@charset "utf-8";

body.active{
    height: 100%;
    overflow: hidden;
}

.check {
    display: none;
}

/* --------------- ドロワーボタン ------------------ */
.btn_menu {
    display: none;
}

/* --------------- ドロワー動き ------------------ */
.menu{
    display: none;
}






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

    /* --------------- ドロワーボタン ------------------ */
    .btn_menu {
        display: block;
        width: calc((100 / 390) * 48 * 1vw);
        aspect-ratio: 1/1;
        border-radius: 50%;
        background: linear-gradient(180deg,rgba(54, 199, 255, 1) 0%, rgba(0, 88, 134, 1) 100%);    
        position: relative;    
    }

    .btn_menu span {
        display: block;
        width: calc((100 / 390) * 22 * 1vw);
        aspect-ratio: 22/2;
        background-color: white;
        position: absolute;
        left: 25%;
    }
    
    .btn_menu span:nth-of-type(1) {
        top: calc((100 / 390) * 15 * 1vw);
        transform: rotate(0);
    }
    
    .btn_menu span:nth-of-type(2) {
        top: calc((100 / 390) * 23 * 1vw);
        transform: scale(1);
    }
    
    .btn_menu span:nth-of-type(3) {
        bottom: calc((100 / 390) * 15 * 1vw);
        transform: rotate(0);
    }

    #btn_open:checked + .btn_menu span:nth-of-type(1){
        top: calc((100 / 390) * 23 * 1vw);
        left: 25%;
        transform: rotate(-45deg);
        transition: all .3s ease;
    }
    #btn_open:checked + .btn_menu span:nth-of-type(2){
        transform: scale(0);
        transition: all .3s ease;
    }
    #btn_open:checked + .btn_menu span:nth-of-type(3){
        bottom: calc((100 / 390) * 23 * 1vw);
        transform: rotate(45deg);
        transition: all .3s ease;
    }
    
    
        
    /* --------------- ドロワー動き ------------------ */
    .menu_bg{
        width: 100vw;
        min-height: 100vh;
        background-color: white;
        position: fixed;
        left: 0;
        top: -100vh;
        z-index: -10;
    }
    
    .menu{
        display: block;
        width: 100%;
        height: calc(100vh - (100 / 390) * 66 *1vw);
        background: url(/assets/img/nav_bg.png) no-repeat center top/cover;
        overflow-y: scroll;
        color: white;
        position: fixed;
        left: 0;
        top: -100vh;
        z-index: -1;
        transition: top .5s, right .5s, bottom .5s, left .5s;
    }

    .menu::before{
        content: '';
        display: block;
        width: 100%;
        aspect-ratio: 390/16;
        background: url(/assets/img/subtruct.svg) no-repeat center center/cover;
        position: sticky;
        top: 0;
        left: 0;
        z-index: 100;
    }

    
    #btn_open:checked ~ .menu_bg{
        top: 0;
    }
    
    #btn_open:checked ~ .menu {
        top: calc((100 / 390) * 66 * 1vw);
    }

    .nav1{
        display: flex;
        width: calc((100 / 390) * 330 * 1vw);
        height: calc((100 / 390) * 345 * 1vw);
        margin: calc((100 / 390) * 76 * 1vw) auto calc((100 / 390) * 64 * 1vw);
        flex-wrap: wrap;
        row-gap: calc((100 / 390) * 36 * 1vw);
        column-gap: calc((100 / 390) * 24 * 1vw);
    }

    .nav1>li:nth-child(odd){
        width: calc((100 / 390) * 160 * 1vw);
    }
    
    .nav1 .en{
        display: block;
        margin-bottom: calc((100 / 390) * 2 * 1vw);
        font-size: calc((100 / 390) * 24 * 1vw);
        color: white;
        font-weight: 500;
        letter-spacing: .05em;
    }

    .nav1 .ja{
        display: block;
        margin-bottom: calc((100 / 390) * 18 * 1vw);
        padding-left: calc((100 / 390) * 20 * 1vw);
        font-size: calc((100 / 390) * 13 * 1vw);
        letter-spacing: .05em;
        font-weight: 500;
        position: relative;
    }

    .nav1 .ja::before{
        content: '';
        display: block;
        width: calc((100 / 390) * 7 * 1vw);
        aspect-ratio: 1/1;
        border-radius: 50%;
        background: linear-gradient(90deg, rgba(19, 169, 233, 1) 0%, rgba(1, 64, 96, 1) 100%);
        position: absolute;
        top: 50%;
        left: calc((100 / 390) * 5 * 1vw);
        transform: translateY(-50%);
    }
    
    .nav1 dd{
        margin-bottom: calc((100 / 390) * 8 * 1vw);
        padding-left: calc((100 / 390) * 20 * 1vw);
        font-size: calc((100 / 390) * 14 * 1vw);
        line-height: 1.8;
        color: #176E00;
        position: relative;
    }

    .nav1 dd::before{
        content: '';
        display: block;
        width: calc((100 / 390) * 7 * 1vw);
        aspect-ratio: 1/1;
        border-radius: 50%;
        background: linear-gradient(90deg, rgba(255, 255, 109, 1) 0%, rgba(88, 163, 31, 1) 100%);        
        position: absolute;
        top: 50%;
        left: calc((100 / 390) * 5 * 1vw);
        transform: translateY(-50%);
    }

    .nav1 dd:last-child{
        margin-bottom: 0;
    }

    .nav1 dd:has(a:hover)::before{
        opacity: .7;
        transition: all 0.3s;    
    }
        

    .nav2{
        display: flex;
        width: fit-content;
        margin-left: calc((100 / 390) * 32 * 1vw);
        margin-bottom: calc((100 / 390) * 46 * 1vw);
        flex-wrap: wrap;
        row-gap: calc((100 / 390) * 11 * 1vw);
        column-gap: calc((100 / 390) * 32 * 1vw);
        font-size: calc((100 / 390) * 12 * 1vw);
        color: #797979;
    }

    .nav2::after{
        content: '';
        width: 100%;
    }

    .nav2 li:first-child img{
        width: calc((100 / 390) * 160 * 1vw);
    }
    
    .nav2 li:nth-child(n+2){
        order: 1;
    }
        
    
}