@charset "utf-8";

/* メニュー */
.m-header {
    overflow: hidden;
    opacity: 1;
    z-index: 1000;
    position: fixed;
    top: 0;
    left: 0;
    min-width: 100%;
    height: 80px;
}

/* メニュー展開時 .activeが付与されている */
.m-header.active {
    visibility: visible;
    opacity: 1;
    height: 100vh;
    background-color: #82C6F3;/* ←.m-menuに入れるとヘッダー背景色変わる */

}

.m-menu {
    padding: 0 0 14px;
    width: 100%;
    min-height: 100vh;
}





/* メニュー コンテンツ */
.m-content {
    margin: 0 auto;
    padding: 100px 10vw 0;
    box-sizing: border-box;
    max-width: 100%;


}


.m-menu__main-navi {
    margin: 0 0 60px 0;
}

.m-menu__main-navi ul {
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 40px 16px;
}

.m-menu__main-navi li {
    width: calc(50% - 8px);
}

.m-menu__main-navi a {
    display: block;
    padding-bottom: 9.5px;
    color: #ffffff;
    line-height: 1;
    text-align: center;
    font-weight: 700;
    border-bottom: 1px solid #ffffff;
}



.m-menu__contact {
    margin: 0 0 40px 0;
}

.m-contact-button {
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0 auto 2rem;
    padding: 18px;
    width: 75%;
    background-color: #fff;
    color: #5f5f5f;
    font-weight: 700;
    border-radius: 28px;
    line-height: 1;
    position: relative;
    z-index: 1;
}



.m-contact-button__text {
    display: flex;
    gap: 10px;
    -webkit-box-align: center;
    align-items: center;
}




/* メニュー SNS */
.m-menu__sns {
    margin: 0 0 30px 0;
    display: flex;
    justify-content: center;
}


.m-menu__sns ul {
    margin: 0 20px;
}


.sns-icons {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 46px;
    height: 46px;
    border: 1px solid #e1dede;
    border-radius: 50%;
}




.sns-icons a {
    display: inline-block;
    margin: 0 10px;
    font-size: 30px;
    color: #fffdfd;
    text-decoration: none;
    display: flex;
    justify-content: center;
    align-items: center;
}


.sns-icons:nth-of-type(1) a:hover {
    color: #1877F2;
    /* Twitterの青 */
}

.sns-icons:nth-of-type(2) a:hover {
    color: #1877F2;
    /* Facebookの青 */
}

.sns-icons:nth-of-type(3) a:hover {
    color: #E4405F;
    /* Instagramのピンク */
}




/* ポリシー コピーライト関連 */
.m-menu__sub-navi {
    margin: 0 0 8px 0;
}


.m-menu__sub-navi ul {
    margin: 0;
    padding: 0;
    list-style: none;
}


.m-menu__sub-navi li {
    margin: 0;
    padding: 0;
    line-height: 1;
}


.m-menu__sub-navi a {
    line-height: 1;
    font-family: "futura-pt", sans-serif;
    font-size: .7142857143rem;
    color: #fff;
    letter-spacing: .05em;
}

.m-menu__sub-navi li:nth-of-type(n+2) {
    margin-top: 8px;
}

.m-menu__copyright {
    line-height: 1;
    font-family: "futura-pt", sans-serif;
    font-size: .7142857143rem;
    color: #333333;
    letter-spacing: .05em;
    text-align: right;
}




a {
    text-decoration: none;
}

img {
    max-width: 100%;
}



/* ハンバーガーメニュー */
.m-hamburger {
    width: 27px;
    height: 21px;
    position: fixed;
    top: 23px;
    right: 20px;
    /* cursor: pointer; */
    z-index: 1001;
}


.m-hamburger span {
    display: block;
    background: #82C6F3;
    width: 81.4814814815%;
    height: 2px;
    position: absolute;
    top: calc(50% - 1px);
    right: 0;
    transition: opacity 0.2s linear;
}

.m-hamburger:before,
.m-hamburger:after {
    content: "";
    display: block;
    background: #82C6F3;
    height: 2px;
    position: absolute;
    right: 0;
    transition: width 0.2s linear, background-color 0.2s linear, -webkit-transform 0.2s linear;
    transition: transform 0.2s linear, width 0.2s linear, background-color 0.2s linear;
    transition: transform 0.2slinear, width 0.2s linear, background-color 02s linear, -webkit-transform 0.2s linear;
}


.m-hamburger:before {
    width: 100%;
    top: 0;
}


.m-hamburger:after {
    width: 66.6666666667%;
    top: calc(100% - 2px);
}


.m-hamburger.active {}



.m-hamburger.active span,
.m-hamburger.active:before,
.m-hamburger.active:after {
    background: #ffffff;
}

.m-hamburger.active span {
    opacity: 0;
}

.m-hamburger.active:before {
    transform: translateY(9px) rotate(45deg);
}


.m-hamburger.active:after {
    width: 100%;
    transform: translateY(-9px) rotate(-45deg);
}







/* header-line ..................................................................*/


.header-line-image {
    max-width: 4.125rem;
    max-height: 4.125rem;
    padding: 15px 0 0 10px;
}


.header-line-text {
    margin: 0.8rem 0 0 0.625rem;
    font-size: 1rem;
    font-weight: bold;
    color: #ffffff;
}


















/* PC用のヘッダーテスト */

@media (min-width: 768px) {

    .m-header {
        visibility: visible;
        opacity: 1;
        z-index: 1000;
        position: fixed;
        top: 0;
        left: 0;
        max-width: 100%;
        height: 80px;
    }

    .m-menu {
        background-color: #82C6F3;
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 0 0 0 1rem;
        min-height: 80px;
        max-height: 80px;
        width: 100%;
    }

    .header-line-image {
        display: inline-block;
        /* ロゴの最大幅（PC用） */
        height: auto;
        width: 100%;
        /* 親要素に合わせて可変 */
        padding: 0;
    }

    .header-line-image img {
        width: 100%;
        /* 横幅いっぱいに */
        height: auto;
        /* 高さは自動で比率維持 */
        display: block;
        /* 余白防止 */
        object-fit: contain;
        /* 比率を保って全体を表示 */
        max-height: 80px;
    }

    .m-content {
        max-height: 100px;
        width: 100%;
        margin: 0;
        padding: 0;
        display: flex;
        align-items: center;
        justify-content: space-around;
    }

    .m-menu__main-navi {
        /* width: 100%; */
        margin: 0;
    }

    .m-menu__main-navi ul {
        /* width: 100%; */
    }

    .m-menu__main-navi li {
        width: 180px;
        margin: 0 auto;
        text-align: center;
    }

    .m-menu__main-navi a {
        position: relative;
        /* 擬似要素の基準にする */
        display: inline-block;
        padding-bottom: 9.5px;
        color: #ffffff;
        font-weight: 700;
        font-size: 1rem;
        text-decoration: none;
        border: none;
    }

    /* 下線用の擬似要素 */
    .m-menu__main-navi a::after {
        content: "";
        position: absolute;
        left: 0;
        bottom: 0;
        width: 0;
        /* 最初は0 */
        height: 2px;
        background: #fff;
        transition: width 0.3s ease;
    }

    /* ホバー時に伸びる */
    .m-menu__main-navi a:hover::after {
        width: 100%;
    }



    .m-menu__contact {
        margin: 0 0 0 0;
        display: flex;
        align-items: center;
        width: 50%;
    }

    .m-contact-button {
        display: flex;
        justify-content: center;
        align-items: center;
        margin: 0;
        padding: 18px;
        max-width: 250px;
        background-color: #fff;
        color: #5f5f5f;
        font-weight: 700;
        border-radius: 28px;
        line-height: 1;
        position: relative;
        z-index: 1;
    }



    .m-contact-button__text {
        display: flex;
        gap: 10px;
        -webkit-box-align: center;
        align-items: center;
    }

    .m-hamburger {
        display: none;
    }


    .m-menu__sns {
        margin: 0;
    }
}