@charset "UTF-8";

html{
    font-size:100%;
}
body{
    background:#f7f6f4;
    font-family: "Zen Kaku Gothic New", sans-serif;
    color:var(--font);
    min-height: 100vh;
}
img{
    max-width:100%;
    vertical-align: bottom;
}
ul{
    list-style: none;
}
a{
    text-decoration: none;
    color:var(--font);
}
.container{
    max-width: 960px;
    padding:0 16px;
    margin:0 auto;
}
:root{
    --font:#2d2725;
    --red:#cf5450;
    --blue:#8092cf;
    --green:#A3C676;
    --footer:#b9d496;
}
.wbr{
    word-break: keep-all;
    overflow-wrap: break-word;
}


/*フッター固定用*/
body,html{
    height:100%;
}
body{
    display: flex;
    flex-direction: column;
}
main{
    flex:1 0 auto;
}


/*header*/
#header{
    height:70px;
    background:#f7f6f4;
    box-shadow: 0 2px 2px 0 rgba(0,0,0,0.2);
    position:fixed;
    width:100%;
    z-index:100; /*1でも大丈夫*/
}
.header-content{
    display: flex;
    justify-content: space-between;
    align-items: center;
    height:70px;
    max-width: 960px;
    padding:0 16px;
    margin:0 auto;
}

    
.logo{
    line-height: 1px;
}
.logo a{
    display: flex;
    align-items: flex-end;
}
.logo img{
    height:34px;
}
.logo p{
    font-size:0.8125rem;
    margin-left:7px;
    line-height: 1;
    font-weight: 400;
}
.header-right ul{
    display: flex;
    gap:30px;
    font-weight: 500;
    font-size:1.125rem;
}
.header-right a{
    display: inline-block;
    line-height: 70px;
    position:relative;
}
.header-right a::before{
    position: absolute;
    content:"";
    bottom:0;
    left:0;
    height:3px;
    width:100%;
    background:var(--green);
    border-radius: 3px;
    transform: scaleX(0);
    transform-origin: top left;
    transition:all 0.2s;
}
.header-right a:hover::before{
    transform:scaleX(1);
}

/*menu*/
.menu, .mask{
    display: none;
}




/*共通部品*/
.sect-title{
    display: flex;
    align-items: center;
    gap:20px;
    margin-bottom:30px;
}
.sect-title::after{
    content:"";
    height:0;
    border-bottom:1px dotted var(--font);
    flex-grow: 1;
}
.sect-title h2{
    font-size:4rem;
    font-weight: 500;
}


/*サイド固定SNS*/
.sns{
    position:fixed;
    bottom:140px;
    right:40px;
    width:30px;
    text-align: center;
}
.sns li:not(:last-of-type){
    margin-bottom:20px;
}


/*footer*/
#footer{
    background:var(--footer);
    width:100%;
    padding:25px 0 10px;
}
.footer-content{
    max-width: 960px;
    padding:0 16px;
    margin:0 auto;
    display: flex;
    justify-content: space-between;
    margin-bottom:40px;
}
.footer-right{
    display: flex;
    align-items: flex-start;
    flex-wrap: wrap;
    gap:20px;
    margin-right:70px;
}
.footer-right a{
    padding-left:20px;
    line-height: 1;
    font-weight: 500;
    position: relative;
    transition:opacity 0.2s;
}
.footer-right a::before{
    position: absolute;
    content:"";
    top:50%;
    left:0;
    transform:translateY(-50%);
    width:1px;
    height:0.6rem;
    background:var(--font);
}
.footer-right li:hover{
    opacity: 0.7;
}
.copy{
    text-align:center;
    font-size:0.75rem;
}


/*inview*/
.inview{
    opacity:0;
    transform:translateY(30px);
    transition:all 0.7s;
}
.is-inview{
    opacity: 1;
    transform:translateY(0);
    transition-delay: 0.4s;
}
.inview-delay{
    opacity:0;
    transform:translateY(15px);
    transition:all 0.7s;
}
.is-inview-delay{
    opacity: 1;
    transform:translateY(0);
    transition-delay: 0.7s;
}



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

    /*header&menu*/
    #header{
        height:80px;
    }
    .header-content{
        padding:18px 30px 0;
    }
    .logo a{
        flex-direction: column;
        align-items: flex-start;
    }
    .logo img{
        height:24px;
    }
    .logo p{
        margin-left:0;
        margin-top: 5px;
    }
    .header-right{
        display: none;
    }
    .hamburger{
        width:30px;
        height:18px;
        position:absolute;
        right:30px;
        top:42px;
        cursor: pointer;
        z-index: 30;
    }
    .hamburger::before, .hamburger::after, .hamburger span{
        position:absolute;
        content:"";
        width:100%;
        height:2px;
        left:0;
        background:var(--font);
        border-radius: 1px;
        transform-origin: center center;
    }
    .hamburger span{
        top:50%;
        transform: translateY(-50%);
    }
    .hamburger::before{
        top:0px;
        transition:all 0.4s ease;
    }
    .hamburger::after{
        bottom:0px;
        transition:all 0.4s ease;
    }
    .open .hamburger::before{
        top:50%;
        transform: rotate(225deg);
        background:#fff
    }
    .open .hamburger::after{
        top:50%;
        transform: rotate(-225deg);
        background:#fff;
    }
    .open .hamburger span{
        opacity: 0;
        transition:all 0.4s ease;
    }
    .mask{
        position:fixed;
        top:0;
        left:0;
        width:100%;
        height:100vh;
        background:rgba(128, 146, 207, 0.9);

        cursor: pointer;
        z-index: 10;
    }
    .menu{
        position:fixed;
        top:10vh;
        left:50%;
        transform: translateX(-50%);
        font-weight: 500;
        text-align: center;
        font-size: 1.125rem;
        z-index: 20;
    }
    .menu li{
        margin-bottom:40px;
    }
    .menu a{
        color:#fff;
    }
    .sect-title{
        gap:10px;
    }
    .sect-title h2{
        font-size:2.5rem;
    }
    .sect-title span{
        font-size:0.875rem;
    }
    .sns{
        left:20px;
        bottom:50px;
    }
    .footer-content{
        padding:0 30px;
    }
    .footer-right{
        flex-direction: column;
        margin-right: 0;
    }
}