h1{
    font-family: "DL Noto Sans Thin";
    left: 50%;
    translate: -50% 0;
    letter-spacing: 15px;
    font-size: 6vw;
    color: #AB4C4C;
    position: relative;
    font-weight: lighter;
}
.close{
    opacity: 0;
    transform: translateY(20%);
    transition: 0.5s;
}
.open{
    opacity: 1;
    transform: translateY(0);
    transition: 0.5s;
}
.top_cat{
    position: relative;
    width: 100%;
    height: 75%;
    left: 50%;
    translate: -50% 0;
    background-color: #fbeded;
}
.top_img{
    max-height: 100%;
    position: absolute;
    left: 50%;
    translate: -50% 0;
}
.top_img.a{
    max-height: 70%;
    position: absolute;
    left: 50%;
    top: 50%;
    translate: -50% -50%;
    z-index: -1;
}
.leftpad{
    width: 50%;
    height: 100%;
    position: absolute;
    left: 0;
    background-color: #F9E1E1;
    z-index: -2;
}
.rightpad{
    width: 50%;
    height: 100%;
    position: absolute;
    right: 0;
    background-color: #F4C5C5;
    z-index: -2;
}

.news_cat,.about_cat{
    position: relative;
    height: fit-content;
    left: 50%;
    translate: -50% 0;
    text-align: center;
    align-items: center;
    max-width: 1280px;
}
.works_cat{
    position: relative;
    left: 50%;
    translate: -50% 0;
    text-align: center;
    max-width: 1280px;
    height: fit-content;
}
.contact_cat{
    position: relative;
    left: 50%;
    translate: -50% 0;
    text-align: center;
    max-width: 1280px;
    height: fit-content;
}
.cot.close{
    opacity: 0;
}
.news_cat,.news_cat>h1,.contact_cat>h1{
    border-bottom: double 7px #AB4C4C;
}
.news-area{
    width: 100%;
    position: relative;
    display: flex;
    justify-content: space-around;
    align-items: center;
}
.news{
    width: 32%;
    aspect-ratio: 1/1;
    background-color: white;
}

#about-area{
    display: flex;
}
.about-right,.about-left{
    width: 50%;
    text-align: center;
    align-content: center;
    align-items: center;
}
.myicon{
    width: 40%;
    border-radius: 1000000px;

}
.about-left>p{
    width: 100%;
    position: relative;
    left: 50%;
    translate: -50% 0;
    font-size: 25px;
}
.works{
    position: relative;
    max-width:90%;
    left: 50%;
    translate: -50% 0;
    aspect-ratio: 1920/2200;
}
.s1,.s2,.s3,.s4,.s5,.s6,.s7,.s8,.s9,.s10,.s11,.s12{
    background-color: white;
    position: absolute;
    z-index: 3;
    translate: -50% -50%;
    overflow: hidden;
}
.s1:hover,.s2:hover,.s3:hover,.s4:hover,.s5:hover,.s6:hover,.s7:hover,.s8:hover,.s9:hover,.s10:hover,.s11:hover,.s12:hover{
    opacity: 0.5;
}
.works>div>img{
    width: 320px;
    position: absolute;
    left: 50%;
    top: 50%;
    translate: -50% -50%;
}
.s1{
    width: 36%;
    left: 65.5%;
    top: 20%;
    aspect-ratio: 115/138;
}
.s2{
    width: 32%;
    left: 63.5%;
    top: 79%;
    aspect-ratio: 130/158;
}
.s3{
    width: 38%;
    left: 26.4%;
    top: 42%;
    aspect-ratio: 215/110;
}
.s4{
    width: 31%;
    left: 84%;
    top: 50.2%;
    aspect-ratio: 178/140;
}
.s5{
    width: 19%;
    left: 57.5%;
    top: 50.2%;
    aspect-ratio: 124/160;
}
.s6{
    width: 27%;
    left: 33%;
    top: 23%;
    aspect-ratio: 135/110;
}
.s7{
    width: 21%;
    left: 36%;
    top: 64.5%;
    aspect-ratio: 135/190;
}
.s8{
    width: 21%;
    left: 13.5%;
    top: 58.5%;
    aspect-ratio: 175/140;
}
.s9{
    width: 16%;
    left: 38.4%;
    top: 86%;
    aspect-ratio: 180/190;
}
.s10{
    width: 10%;
    left: 89%;
    top: 32%;
    aspect-ratio: 120/190;
}
.s11{
    width: 12%;
    left: 86%;
    top: 64%;
    aspect-ratio: 120/60;
}
.s12{
    width: 5%;
    left: 82.5%;
    top: 73.5%;
    aspect-ratio: 60/180;
}

.cot{
    position: relative;
    left: 50%;
    translate: -50% 0;
    max-width: 90%;
    border: #AB4C4C 1px solid;
}
.contactForm{
    position: relative;
    left: 50%;
    translate: -50% 0;
    text-align: left;
    color: #AB4C4C;
    display: flex;
}
#name,#email{
    width: 60%;
    height: 25px;
    position: relative;
}
#message{
    width: 95%;
    min-height: 200px;
    max-height: 600px;
    resize: vertical;
}
.inputarea{
    width: 90%;
    margin-left: 3%;
}
.submit-btn{
    position: relative;
    right: -80%;
}
label{
    margin-left: 20px;
}
#topmove{
    width: 75px;
    height: 150px;
    background-color: #AB4C4C;
    position: fixed;
    right: 20px;
    top: 50%;
    translate: 0 -50%;
    z-index: 100;
    align-items: center;
    border-radius: 20px;
}
#topmove>i{
    position: absolute;
    font-size: 40px;
    color: #FFFFFF;
    top: 35px;
    font-weight: 300;
    font-family: "Zen Kaku Gothic New";
}
#topmove>p{
    margin: 0;
    font-size: 25px;
    bottom: 35px;
    position: absolute;
    color: white;
}

.morebutton{
    width: 150px;
    height: 30px;
    color: white;
    background-color: #AB4C4C;
    border-radius: 10px;
    position: relative;
    left: 50%;
    translate: -50% 0;
    text-align: center;
    align-content: center;
    display: block;
}