@charset "UTF-8";
/****************************************
    フッターのスタイル設定
****************************************/


:root{
    --main-color: #000;
    --logo-color1: #ffe74c;
    --logo-color2: #ff4f58;
    --logo-color3: #4f9dff;
    --logo-color4: #30e3ca;
    --text-color:#333;
}



.section-footer{
    background-color: #e3f6fe;
    padding: 62px 0 178px;
    position: relative;
    overflow: hidden;
    .wrap-footer{
        padding: 0 46px 0 60px;
        display: flex;
        gap: 63px;
        max-width: 1200px;
        margin: auto;
        position: relative;
        z-index: 2;
    }
    .address{
        position: relative;
        padding-left: 50px;
        margin: 16px 0 20px;
        line-height: 1.75;
    }
    .address:before{
        content: "";
        display: inline-block;
        background: url( "./images/common/icon-map.png" )  no-repeat center center / contain;
        position: absolute;
        top: 0px;
        left: 0px;
        width: 33px;
        height: auto;
        aspect-ratio: 33 / 44;
    }
    .wrap-sns{
        display: flex;
        gap: 20px;
    }
    .frame-contact{
        background-color: #fff;
        border-radius: 34px;
        width: 732px;
        height: 369px;
        padding: 40px 50px 0;
        position: relative;
        .text{
            margin: 16px 0 28px;
            text-align: center;
            line-height: 1.875;
        }
    }
    .frame-contact:before{
        content: "";
        background: url( "./images/common/grass.png" )  no-repeat center center / contain;
        position: absolute;
        top: -15px;
        left: 50%;
        transform: translateX(-50%);
        width: 64px;
        height: 22px;
    }

    .frame-contact{
        .wrap{
            display: flex;
            .title{
                font-size: 18px;
                font-weight: 500;
                line-height: 1;
                text-align: center;
            }
            .tel{
                font-size: 36px;
                white-space: nowrap;
                margin: 0 auto 0 47px;
            }
            .tel a{
                color: var(--logo-color4);
            }
            .box-tel,.box-mail{
                display: flex;
                align-items: center;
                justify-content: space-between;
                flex-direction: column;
                height: 110px;
            }
            .box-tel{
                padding-right: 36px;
                border-right: solid 1px var(--logo-color4);
            }
            .box-mail{
                padding-left: 36px;
            }
            .open{
                text-align: center;
                line-height: 1;
            }
            .common-button {
                width: 245px;
                height: 54px;
                position: relative;
                margin: 0 auto;
                padding-left: 58px;
            }
            .common-button::before{
                content: "";
                background: url( "./images/common/footer-icon-mail.png" )  no-repeat center center / contain;
                position: absolute;
                top: 14px;
                left: 33px;
                width: 34px;
                height: 25px;
            }
        }
    }
    .ft-menu {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        grid-template-rows: repeat(4, 1fr);
        grid-column-gap: 0px;
        grid-row-gap: 0px;
        margin-top: 48px;
    }
    .menu-item {
        margin-bottom: 1em;
    }
    .menu-item a{
        color: var(--text-color);
        font-size: 16px;
        transition: 0.3s;
    }
    .menu-item a:hover{
        margin-left: 20px;
    }

    .menu-item:nth-child(1) { grid-area: 1 / 1 / 2 / 2; }
    .menu-item:nth-child(2) { grid-area: 2 / 1 / 3 / 2; }
    .menu-item:nth-child(3) { grid-area: 3 / 1 / 4 / 2; }
    .menu-item:nth-child(4) { grid-area: 4 / 1 / 5 / 2; }
    .menu-item:nth-child(5) { grid-area: 1 / 2 / 2 / 3; }
    .menu-item:nth-child(6) { grid-area: 2 / 2 / 3 / 3; }
    .menu-item:nth-child(7) { grid-area: 3 / 2 / 4 / 3; }
    .menu-item:nth-child(8) { grid-area: 4 / 2 / 5 / 3; }
    .menu-item:nth-child(9) { grid-area: 1 / 3 / 2 / 4; }
    .menu-item:nth-child(10) { grid-area: 2 / 3 / 3 / 4; }
    .menu-item:nth-child(11) { grid-area: 3 / 3 / 4 / 4; }
    .menu-item:nth-child(12) { grid-area: 4 / 3 / 5 / 4; }

    .copyright{
        font-family: "Montserrat", sans-serif;
    }

    .plane {
        position: absolute;
        aspect-ratio: 781/255;
        width: 40.6vw;
        height: auto;
        background: url( "./images/common/plane.png" ) no-repeat center center / contain;
        left: 10vw;
        bottom: 95px;
        z-index: 1;
    }

    .cloud {
        position: absolute;
        aspect-ratio: 97/68;
        height: auto;
        background: url( "./images/common/cloud.png" ) no-repeat center center / contain;
    }
    .cloud1{
        width: 70px;
        bottom: 195px;
        left: 15.6vw;
    }
    .cloud2{
        width: 97px;
        bottom: 243px;
        left: 33.2vw;
    }
    .cloud3{
        width: 50px;
        bottom: 185px;
        left: 48.4vw;
    }
    .cloud4{
        width: 165px;
        bottom: 212px;
        right: 29.7vw;
    }
    .cloud5{
        width: 97px;
        bottom: 300px;
        right: 14.6vw;
    }
    @media screen and (max-width: 1440px) {        
        .plane {
            width: 48vw;
            left: 10vw;
            bottom: 60px;
        }
        .cloud1{
            left: 5vw;
        }
        .cloud2{
            left: 25vw;
        }
        .cloud3{
            left: 48.4vw;
        }
        .cloud4{
            right: 18vw;
        }
        .cloud5{
            right: 4vw;
        }
    }
    @media screen and (max-width: 1200px) {
        .wrap-footer {
            padding: 0 40px 0 ;
            gap: 30px;
            justify-content: space-between;
        }
        .frame-contact {
            width: 680px;
            height: auto;
            padding: 40px 30px 40px;
        }
    }

    @media screen and (max-width: 1000px) {
        padding-bottom: 200px;
        .wrap-footer{
            flex-direction: column;
            gap: 70px;
        }
        .frame-contact{
            display: none;
        }

        .box-logo {
            display: grid;
            grid-template-columns: repeat(2, auto);
            grid-template-rows: repeat(2, auto);
            grid-column-gap: 50px;
            grid-row-gap: 0px;
            max-width: 700px;
            margin: auto;
        }
        .footer-logo {
            grid-area: 1 / 1 / 3 / 2; 
            width: min(17vw,200px);
        }
        .address { 
            grid-area: 1 / 2 / 2 / 3; 
            margin: 0;
            font-size:clamp(14px, 14 / 375 * 100vw ,16px);
        }
        .wrap-sns { grid-area: 2 / 2 / 3 / 3; }

        .ft-menu {
            max-width: 700px;
            margin: 0 auto 0;
        }
        .ft-menu {
            grid-template-columns: repeat(3, auto);
            grid-template-rows: repeat(4, auto);
            padding-left: 90px;
        }
        .menu-item {
            width: fit-content;
        }

        .wrap-copyright{
            position: absolute;
            bottom: 10px;
            left: 50%;
            transform: translateX(-50%);
            width: 100%;
            text-align: center;
            font-size:clamp(10px, 10 / 375 * 100vw ,15px);
        }


        .plane {
            width: 54.2vw;
            left: 2vw;
            bottom: 180px;
        }
        .cloud1{
            left: 9.3vw;
            bottom: 246px;
            width: 4.6vw;
        }
        .cloud2{
            left: 33vw;
            bottom: 270px;
            width: 6.6vw;
        }
        .cloud3{
            left: 53vw;
            bottom: 237px;
            width: 3.4vw;
        }
        .cloud4{
            right: 17.3vw;
            bottom: 247px;
            width: 11.4vw;
        }
        .cloud5{
            right: -1vw;
            bottom: 300px;
            width: 6.6vw;
        }
    }
    @media screen and (max-width: 767px) {
        padding-bottom: 250px;
        margin-bottom: 110px;

        .cloud1{
            bottom: 170px;
        }
        .cloud2{
            bottom: 220px;
        }
        .cloud3{
            bottom: 180px;
        }
        .cloud4{
            bottom: 200px;
        }
        .cloud5{
            bottom: 250px;
        }
    }

    @media screen and (max-width: 750px) {
        .wrap-footer {
            padding: 0 36px 0;
        }
        .ft-menu {
            grid-template-columns: repeat(3, auto);
            grid-template-rows: repeat(4, auto);
            padding-left: 50px;
        }

        .ft-menu {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            grid-template-rows: repeat(8, 1fr);
            grid-column-gap: 0px;
            grid-row-gap: 0;
            padding-left: 0;
            max-width: 490px;   
        }

        .menu-item:nth-child(1) { grid-area: 1 / 1 / 2 / 2; }
        .menu-item:nth-child(2) { grid-area: 2 / 1 / 3 / 2; }
        .menu-item:nth-child(3) { grid-area: 3 / 1 / 4 / 2; }
        .menu-item:nth-child(4) { grid-area: 4 / 1 / 5 / 2; }
        .menu-item:nth-child(5) { grid-area: 5 / 1 / 6 / 2; }
        .menu-item:nth-child(6) { grid-area: 6 / 1 / 7 / 2; }
        .menu-item:nth-child(7) { grid-area: 7 / 1 / 8 / 2; }
        .menu-item:nth-child(8) { grid-area: 8 / 1 / 9 / 2; }
        .menu-item:nth-child(9) { grid-area: 1 / 2 / 2 / 3; }
        .menu-item:nth-child(10) { grid-area: 2 / 2 / 3 / 3; }
        .menu-item:nth-child(11) { grid-area: 3 / 2 / 4 / 3; }
        .menu-item:nth-child(12) { grid-area: 4 / 2 / 5 / 3; }
        .menu-item a {
            font-size: 15px;
        }
        .wrap-sns{
            height: 55px;
        }
        .wrap-sns img{
            width: auto;
            height: 100%;
        }
        .plane {
            bottom: 110px;
        }

    }
    @media screen and (max-width: 600px) {
        padding-bottom: 180px;
        margin-bottom: 90px;

        .footer-logo {
            grid-area: 1 / 1 / 3 / 2; 
            width: min(26.6vw,130px);
        }

        .address {
            padding-left: 28px;
        }
        .address:before{
            width: 22px;
            height: auto;
            top: 3px;
        }
    }
    @media screen and (max-width: 500px) {
        margin-bottom: 80px;
        padding: 40px 0 160px;
        .box-logo {
            grid-column-gap: 30px;
        }
        .address {
            padding-left: 24px;
        }
        .address:before{
            width: 18px;
            height: auto;
            top: 5px;
        }

        .menu-item a {
            font-size: 12px;
        }
        .menu-item {
            margin-bottom: 0.4em;
        }
        .wrap-sns{
            height: 40px;
            gap: 10px;
            margin-top: 25px;
        }
        .wrap-sns img{
            aspect-ratio: 1/1;
        }

        .ft-menu {
            grid-column-gap: 40px;
        }

        .cloud1{
            bottom: 170px;
        }
        .cloud2{
            bottom: 200px;
        }
        .cloud3{
            bottom: 150px;
        }
        .cloud4{
            bottom: 150px;
        }
        .cloud5{
            bottom: 200px;
        }
    }
    @media screen and (max-width: 430px) {

        .cloud1{
            bottom: 130px;
        }
        .cloud2{
            bottom: 160px;
        }
        .cloud3{
            bottom: 130px;
        }
        .cloud4{
            bottom: 110px;
        }
        .cloud5{
            bottom: 160px;
        }
    }

    @media screen and (max-width: 370px) {
        .wrap-footer {
            padding: 0 20px 0;
        }
        .box-menu{
            min-width: 320px;
        }
    }
}

.section-footer::after{
    content: "";
    background: url( "./images/common/cloud-bottom.png" )  no-repeat center center / contain;
    position: absolute;
    bottom: 0px;
    left: 0px;
    width: 100vw;
    height: 211px;
    height: auto;
    aspect-ratio: 3840/422;
}
@media screen and (max-width: 1000px) {
    .section-footer::after{
        content: "";
        background: url( "./images/common/cloud-bottom-sp.png" )  no-repeat center center / contain;
        width: 100vw;
        height: auto;
        aspect-ratio: 750/265;
        bottom: -140px;
    }
}
@media screen and (max-width: 767px) {
    .section-footer::after{
        bottom: -90px;
    }
}

@media screen and (max-width: 600px) {
    .section-footer::after{
        bottom: -40px;
    }
}

@media screen and (max-width: 500px) {
    .section-footer::after{
        bottom: -20px;
    }
}


/*  SPの固定フッター */
.sp-footer{
    display: none;
}
.modal-container{
    display: none;
    z-index: 10001;
}

/* オーバーレイ（背景暗く） */
#modal-overlay {
  display: none;
  position: fixed;
  z-index: 10000;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,0.6);
}



/* 固定フッターメニュー */
@media screen and (max-width: 767px) {
    .sp-footer{
        display: block;
        position: fixed;
        width: 100%;
        min-height: 55px;
        height: 14.6vw;
        bottom: 0;
        left: 0;
        z-index: 100;
        color:  #fff;
        background-color: var(--logo-color3);
    }
    .sp-footer-menu{
        display: flex;
        align-items: center;
        justify-content: space-between;
        height: 100%;
        padding: 0 3vw;
    }
    .sp-footer-menu-item {
        width: calc(100vw / 4);
        position: relative;
    }
    .sp-footer-menu-item:not(:last-child)::after{
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        right: 0;
        width: 4px;
        height: 67.2%;
        content: '';
        background-image: url('data:image/svg+xml,%3Csvg%20%0A%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%0A%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%0A%20width%3D%224px%22%20height%3D%2274px%22%3E%0A%3Cpath%20fill-rule%3D%22evenodd%22%20%20fill%3D%22rgb(255%2C%20255%2C%20255)%22%0A%20d%3D%22M1.1000%2C63.1000%20C0.896%2C63.1000%20-0.000%2C63.104%20-0.000%2C62.000%20C-0.000%2C60.895%200.896%2C59.1000%201.1000%2C59.1000%20C3.105%2C59.1000%204.000%2C60.895%204.000%2C62.000%20C4.000%2C63.104%203.105%2C63.1000%201.1000%2C63.1000%20ZM1.1000%2C54.001%20C0.896%2C54.001%20-0.000%2C53.105%20-0.000%2C51.1000%20C-0.000%2C50.896%200.896%2C50.000%201.1000%2C50.000%20C3.105%2C50.000%204.000%2C50.896%204.000%2C51.1000%20C4.000%2C53.105%203.105%2C54.001%201.1000%2C54.001%20ZM1.1000%2C44.000%20C0.896%2C44.000%20-0.000%2C43.105%20-0.000%2C41.1000%20C-0.000%2C40.895%200.896%2C40.000%201.1000%2C40.000%20C3.105%2C40.000%204.000%2C40.895%204.000%2C41.1000%20C4.000%2C43.105%203.105%2C44.000%201.1000%2C44.000%20ZM1.1000%2C34.000%20C0.896%2C34.000%20-0.000%2C33.104%20-0.000%2C32.001%20C-0.000%2C30.896%200.896%2C29.1000%201.1000%2C29.1000%20C3.105%2C29.1000%204.000%2C30.896%204.000%2C32.001%20C4.000%2C33.104%203.105%2C34.000%201.1000%2C34.000%20ZM1.1000%2C23.1000%20C0.896%2C23.1000%20-0.000%2C23.104%20-0.000%2C22.000%20C-0.000%2C20.895%200.896%2C20.001%201.1000%2C20.001%20C3.105%2C20.001%204.000%2C20.895%204.000%2C22.000%20C4.000%2C23.104%203.105%2C23.1000%201.1000%2C23.1000%20ZM1.1000%2C13.1000%20C0.896%2C13.1000%20-0.000%2C13.104%20-0.000%2C12.000%20C-0.000%2C10.896%200.896%2C10.000%201.1000%2C10.000%20C3.105%2C10.000%204.000%2C10.896%204.000%2C12.000%20C4.000%2C13.104%203.105%2C13.1000%201.1000%2C13.1000%20ZM1.1000%2C3.999%20C0.896%2C3.999%20-0.000%2C3.105%20-0.000%2C1.1000%20C-0.000%2C0.896%200.896%2C0.000%201.1000%2C0.000%20C3.105%2C0.000%204.000%2C0.896%204.000%2C1.1000%20C4.000%2C3.105%203.105%2C3.999%201.1000%2C3.999%20ZM1.1000%2C69.1000%20C3.105%2C69.1000%204.000%2C70.895%204.000%2C71.999%20C4.000%2C73.104%203.105%2C74.000%201.1000%2C74.000%20C0.896%2C74.000%20-0.000%2C73.104%20-0.000%2C71.999%20C-0.000%2C70.895%200.896%2C69.1000%201.1000%2C69.1000%20Z%22%2F%3E%0A%3C%2Fsvg%3E');
        background-repeat: no-repeat;
        background-size: contain;
    }
    .sp-footer-menu-link{
        color:  #fff;
        font-size:clamp(9px, 18 / 750 * 100vw ,18px);
        display: flex;
        flex-direction: column;
        justify-content: flex-end;
        align-items: center;
        text-align: center;

        .icon{
            display: block;
            width: 40%;
            height: auto;
        }
        .icon img{
            width: 100%;
            height: 100%;
            object-fit: contain;
            vertical-align: top 
        }
    }
    .p-fixBtnWrap {
        bottom: 16vw;
    }    
}


/*ページトップフラッグ*/
#pagetop-flag{
    position: absolute;
    right: 10vw;
    bottom: 9.5vw;
    width: 117px;
    height: auto;
    aspect-ratio: 117 / 127;
    cursor: pointer;
    background-color: transparent;
    border: none;
    transition: 0.3s;
}
#pagetop-flag:hover{
    transform: translateY(-10px);
}
@media screen and (min-width: 2300px) {
    #pagetop-flag{
        right: 10.5vw;
        bottom: 10vw;
    }
}
@media screen and (max-width: 1440px) {
    #pagetop-flag{
        width: 90px;
    }
}
@media screen and (max-width: 1000px) {
    #pagetop-flag{
        width: 90px;
        right: 6vw;
        bottom: 13.0vw;
    }
}
@media screen and (max-width: 900px) {
    #pagetop-flag{
        width: 90px;
        right: 6vw;
        bottom: 12.0vw;
    }
}
@media screen and (max-width: 860px) {
    #pagetop-flag{
        width: 90px;
        right: 6vw;
        bottom: 10.0vw;
    }
}
@media screen and (max-width: 767px) {
    #pagetop-flag{
        width: 80px;
        right: 5vw;
        bottom: 14.0vw;
    }
}

@media screen and (max-width: 600px) {
    #pagetop-flag{
        width: 80px;
        right: 5vw;
        bottom: 19vw;
    }
}

@media screen and (max-width: 450px) {
    #pagetop-flag{
        width: 70px;
        right: 3vw;
        bottom: 21vw;
    }
}
@media screen and (max-width: 400px) {
    #pagetop-flag{
        width: 60px;
        right: 3vw;
        bottom: 20vw;
    }
}

/* フッタメニューの調整 */
#menu-ftnavi-1 .menu-item-1302 a {
    position: relative;
    padding-left: 20px;
}
#menu-ftnavi-1 .menu-item-1302 a::before {
    content: url('data:image/svg+xml;utf-8,<svg class="__icon" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" viewBox="0 0 48 48"><path d="M44 2H30c-1.1 0-2 .9-2 2s.9 2 2 2h9.2L24 21.2c-.8.8-.8 2 0 2.8s2 .8 2.8 0L42 8.8V18c0 1.1.9 2 2 2s2-.9 2-2V4c0-1.1-.9-2-2-2z"></path></svg>');
    position: absolute;
    top: 2px;
    left: 0;
}
#menu-ftnavi-1 .menu-item-1302 a::after {
    content: url('data:image/svg+xml;utf-8,<svg class="__icon" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" viewBox="0 0 48 48"><path d="M41 27c-1.1 0-2 .9-2 2v10c0 1.1-.9 2-2 2H9c-1.1 0-2-.9-2-2V11c0-1.1.9-2 2-2h10c1.1 0 2-.9 2-2s-.9-2-2-2H9c-3.3 0-6 2.7-6 6v28c0 3.3 2.7 6 6 6h28c3.3 0 6-2.7 6-6V29c0-1.1-.9-2-2-2z"></path></svg>');
    position: absolute;
    top: 2px;
    left: 0;
}
#menu-ftnavi-1 .menu-item-52 a {
    position: relative;
    padding-left: 20px;
}
#menu-ftnavi-1 .menu-item-52 a::before {
    content: url('data:image/svg+xml;utf-8,<svg class="__icon" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" viewBox="0 0 48 48"><path d="M44 2H30c-1.1 0-2 .9-2 2s.9 2 2 2h9.2L24 21.2c-.8.8-.8 2 0 2.8s2 .8 2.8 0L42 8.8V18c0 1.1.9 2 2 2s2-.9 2-2V4c0-1.1-.9-2-2-2z"></path></svg>');
    position: absolute;
    top: 2px;
    left: 0;
}
#menu-ftnavi-1 .menu-item-52 a::after {
    content: url('data:image/svg+xml;utf-8,<svg class="__icon" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" viewBox="0 0 48 48"><path d="M41 27c-1.1 0-2 .9-2 2v10c0 1.1-.9 2-2 2H9c-1.1 0-2-.9-2-2V11c0-1.1.9-2 2-2h10c1.1 0 2-.9 2-2s-.9-2-2-2H9c-3.3 0-6 2.7-6 6v28c0 3.3 2.7 6 6 6h28c3.3 0 6-2.7 6-6V29c0-1.1-.9-2-2-2z"></path></svg>');
    position: absolute;
    top: 2px;
    left: 0;
}
@media screen and (min-width: 751px) {
    #menu-ftnavi-1 li:nth-child(13) {
        grid-column-start: 3;
    }
}