@charset "UTF-8";

html{
    font-size:100%;
}
body{
    background:#fffdfa;
    font-family:"Noto sans JP", sans-serif;
    color:#000;
    font-size:1rem;
}
img{
    vertical-align: bottom;
    max-width:100%;
}
li{
    list-style: none;
}
a{
    text-decoration: none;
    color:#000;
}
section{
    margin-bottom:120px;
}
.content{
    max-width:1020px;
    margin:0 auto;
    padding:0 50px;
}
.wbr{
    word-break:keep-all;
    overflow-wrap: break-word;
}


/*hamburger*/
.hamburger-center{
    height:2px;
    border-radius:4px;
    background:#000; 
}

.hamburger{
    width:34px;
    position:absolute;
    top:50%;
    right:0;
    transform: translateY(-50%);
    padding:12px 0;
    cursor:pointer;
    display: none;
    z-index:999;
}
.hamburger::before, .hamburger::after{
    position:absolute;
    content:"";
    width:100%;
    height:2px;
    border-radius:4px;
    background:#000;
    transform-origin:top left;

}
.hamburger::before{
    top:0;
}
.hamburger::after{
    bottom:0;
}

#header nav{
    position:relative;
}


/*drawer*/
.drawer{
    top:0;
    right:-100vw;
    z-index:901;
    padding-bottom:20px;
    width:100vw;
    min-height:60vh;
    height:100vh;
    position:fixed;
    background:rgba(255,253,250,0.8);
    transition: right 0.3s ease;
    visibility: hidden;
}
.open{
    right:0;
}
.hidden{
    visibility: visible;
}
.drawer ul{
    padding:10vh 0 5vh;
    text-align:center;
    width:100vw;
    height:50%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}
.drawer-btn{
    height:24px;
    width:34px;
    margin:28px 30px 28px auto;
    position:relative;
}
.drawer-btn::before, .drawer-btn::after{
    position:absolute;
    content:"";
    height:2px;
    width:100%;
    background:#000;
    left:0;
    top:50%;
    transform: translateY(-50%);
}
.drawer-btn::before{
    transform: rotate(45deg);
}
.drawer-btn::after{
    transform: rotate(-45deg);
}

.drawer a,#footer a{
    transition:opacity 0.1s;
}
.drawer a:hover,#footer a:hover{
    opacity: 0.7;
}


/*header*/
#header{
    border-bottom:1px solid #632cd8;
    position:sticky;
    z-index: 900;
    top:0;
    background:#fffdfa;
}
.logo{
    height:102px;
    padding:8px 0;
    line-height:1px;
    display: block;
}
.logo a{
    display: block;
    height:100%;
}
.logo img{
    height:100%;
    width:100%;
    object-fit: contain;
}
.header-content{
    max-width:1020px;
    margin:0 auto;
    padding:0 30px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.header-right ul{
    display: flex;
    gap:3.5vw;
    color:#000;
}
.header-right li{
    position:relative;
}
.header-right a{
    display: block;
    line-height:2rem;
}
.header-right li::before{
    position:absolute;
    content:"";
    left:0;
    bottom:-2px;
    height:2px;
    width:100%;
    background:#632cd8;
    border-radius:1px;
    transform: scale(0,1);
    transform-origin:left top;
    transition:transform 0.3s;
}
.header-right li:hover::before{
    transform:scale(1,1);
}


/*mainvisual*/
#mainvisual{
    text-align: center;
    background-image: url(img/mainvisual.jpg);
    background-size:cover;
    margin-bottom:100px;
}
#mainvisual .content{
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    min-height:calc(100vh - 102px);
}
.main-top{
    color:rgba(225,225,225,0.8);
    font-size: 5rem;
    letter-spacing: 5%;
    margin-top:30vh;
    margin-bottom:5vh;
}
.main-sub{
    color:rgba(225,225,225,0.7);
    font-size:1.25rem;
    margin-bottom:10vh;
}


/*news*/
.title{
    font-family: "Syne", "sans-serif";
    font-size:5.625rem;
    max-width:1120px;
    margin:0 auto 20px;
}
.content{
    max-width:1020px;
    margin:0 auto;
    padding:0 50px;
}
.news-item{
    display: flex;
    gap:20px;
    align-items: center;
    width:20%
}
#news li{
    display: flex;
    align-items: flex-start;
    font-size:1.125rem;
    border-top:1px solid #b5b5b5;
    padding:25px 0;
}
#news li:last-child{
    border-bottom:1px solid #b5b5b5;
}
.tag{
    font-size:0.875rem;
    height:1.125rem;
    color:#5b5b5b;
}
.btn{
    margin-top:30px;
    text-align:center;
}
.btn a::before{
    position:absolute;
    content:"";
    top:0;
    left:0;
    width:100%;
    height:100%;
    background:#dcd6e9;
    z-index:-1;
    transform: scale(0,1);
    transition:transform 0.3s;
    transform-origin: left top;
}
.btn a:hover::before{
    transform:scale(1,1);
}
.btn a{
    display: inline-block;
    border-bottom:1px solid #632cd8;
    font-size:1.25rem;
    padding:7px 20px;
    position:relative;
}


/*about*/
.catch{
    font-size:2.5rem;
    color:#fff;
    padding:70px 0 326px;
    margin-bottom:40px;
    background-size: cover;
    background-position: center;
    position:relative;
    z-index:2;
}
.catch::before{
    position:absolute;
    background:rgba(0,0,0,0.3);
    content:"";
    width:100%;
    height:100%;
    top:0;
    left:0;
    z-index:-1;
}
#about .catch{
    background-image:url(img/about.jpg);
}
.description{
    max-width: 720px;
    text-align: justify;
    margin:0 auto;
}


/*service*/
#service .catch{
    background-image: url(img/service.jpg);
}


/*works*/
#works ul{
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    row-gap: 24px;
}
#works li{
    width:calc(94% / 3);
    box-shadow:2px 4px 3.7px 0 rgba(0,0,0,0.25) ;
    position:relative;
    transition:transform 0.2s;
}
#works li:hover{
    transform: scale(1.05,1.05);
}
#works img{
    width:100%;
    height:100%;
    object-fit: cover;
}
#works li::before{
    position:absolute;
    content:var(--name);
    font-size: 0.75rem;
    text-align:right;
    padding:14px 27px;
    width:100%;
    background:rgba(225,225,225,0.5);
    bottom:0;
}


/*footer*/
#footer{
    background:#aeaeae;
}
.footer-content{
    max-width:1020px;
    margin:0 auto;
    padding:0 50px;
}
#footer nav{
    display: flex;
    flex-wrap: wrap;
    gap:30px;
    justify-content: center;
    padding:40px 0 60px;
}
#footer ul{
    display: flex;
    gap:30px
}
.footer-bottom{
    font-size:0.75rem;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    padding-bottom:20px;
}
.policy{
    display: flex;
    gap:60px;
}


/*inview用のCSS*/
.fadeup{
    opacity: 0;
    transform:translateY(20px);
    transition:opacity 0.6s, transform 0.6s;
}
.fadeup.inview{
    opacity: 1;
    transform:translateY(0);
    transition-delay: 0.2s;
}



/*responsive*/
@media screen and (max-width:1020px){

    #news li{
        flex-direction: column;
    }
    .news-item{
        width:auto;
        margin-bottom:16px;
    }
    #works li{
        width:calc(96% / 2)
    }
}

@media screen and (max-width:700px){

    section{
        margin-bottom:100px;
    }
    .content{
        padding:0 20px;
    }

    /*hamburger&drawer*/
    .header-right ul{
        display: none;
    }
    .hamburger{
        display: block;
    }

    /*header*/
    .logo{
        height:80px;
        padding:10px 0;
    }

    /*mainvisual*/
    #mainvisual{
        min-height:calc(100vh - 80px);
    }
    .main-top{
        font-size:3rem;
    }
    .main-sub{
        font-size:1rem;
    }

    /*news*/
    .title{
        font-size:4rem;
    }
    #news li{
        font-size:1rem;
        padding:20px 0;
    }
    
    .tag{
        font-size:0.75rem;
    }
    .btn a{
        font-size:1.125rem;
    }

    /*about*/
    .catch{
        font-size:1.5rem;
        padding:40px 20px 177px;
    }
    .description{
        font-size: 0.875rem;
    }

    /*works*/
    #works li{
        width:100%;
    }
    #works li:nth-of-type(n+5){
        display: none;
    }

    /*footer*/
    .footer-content{
        padding: 0 30px;
    }
    #footer nav{
        justify-content: space-around;
        gap:normal;
    }
    #footer ul{
        flex-direction: column;
    }
    .footer-bottom{
        display: block;
    }
    .policy{
        gap:normal;
        justify-content: space-around;
        margin-bottom: 30px;
    }
    .copy{
        text-align: center;
    }
}