@charset "UTF-8";

/* 基本デザイン */

html {
    font-size: 100%;
}

body {
    font-family: '游明朝', 'Yu Mincho', YuMincho, 'Hiragino Mincho Pro', serif;
    line-height: 1.7;
    margin: 0;
    padding: 0;
    /* overflow-x: auto; */
}


ul,
li {
    list-style: none;
}

.margin-0 {
    margin: 0 auto;
}

.aline-center {
    text-align: center;
}

.aline-left {
    text-align: left;
}

.aline-right {
    text-align: right;
}

.p-family {
    font-family: "Yu Gothic", "Hiragino Sans W3", "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN W3", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
}



/* ホバーの設定 */
a {
    text-decoration: none;
}

a:hover {
    color: #ec79a0;
    transition: all 0.3s ease-in-out 0.1s;
}

.pc-hdr-menu a:hover,
.top-msg a:hover,
.sitemap a:hover,
.ftr-sns a:hover {
    color: #ec79a0;
    transition: all 0.3s ease-in-out 0.1s;
}

img:hover {
    filter: brightness(1.05);
    transition: all 0.3s ease-in-out 0.1s;
}

.wrapper {
    text-align: center;
    margin: 0 auto;
}

.bgc-green {
    background-color: #65BBB2;
}

.bgc-white {
    background-color: white;
}


/* シャドウの設定 */
.shadow {
    box-shadow: 4px 4px 4px rgba(0, 0, 0, 0.2);
}

.shadow-white {
    filter: drop-shadow(4px 4px 4px #65bbb2);
}


/* 要素と要素の間隔設定 */
.element-interva10 {
    height: 10px;
}

.element-interva20 {
    height: 20px;
}

.element-interva50 {
    height: 50px;
}

.element-interva100 {
    height: 100px;
}


.element-interva10-m {
    height: 10px;
    background-color: #65bbb2;
}

.element-interva20-m {
    height: 20px;
    background-color: #65bbb2;
}

.element-interva50-m {
    height: 50px;
    background-color: #65bbb2;
}

.element-interva100-m {
    height: 100px;
    background-color: #65bbb2;
}


.element-interva100-g {
    height: 100px;
    background-color: rgba(101, 187, 178, 0.2);
}




/* ふわっと動く */
.fade {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 1.5s, transform 1s;
}

.fade.active {
    opacity: 1;
    transform: translateY(0px);
}


.fa-heart {
    color: rgba(236, 121, 160, 0.5);
}



/* 上下にふわふわ */
.fuwafuwa-y {
    animation: floating-y 4.8s ease-in-out infinite alternate-reverse;
    /* animation-delay: calc(random() * 3s); */
    /* ランダムな開始遅延 */
}

@keyframes floating-y {
    0% {
        transform: translateY(-5px);
    }

    33.33333% {
        transform: translateY(5px)
    }

    66.66667% {
        transform: translateY(0)
    }

    100% {
        transform: translateY(-5px);
    }
}

li:nth-child(1) {
    animation-duration: 6s
}

li:nth-child(2) {
    animation-duration: 8s
}

li:nth-child(3) {
    animation-duration: 7s
}

/* 基本デザイン ここまで*/




/* PC設定 ------------------------------*/
@media(min-width:769px) {

    /* 戻るボタン*/
    .return-btn i {
        position: fixed;
        bottom: 1rem;
        right: 1rem;
        background-color: #65bbb2;
        color: white;
        border-radius: 50%;
        width: 40px;
        height: 40px;
        text-align: center;
        font-size: 1.5rem;
        z-index: 9999;
        padding-top: 7px;
        border: solid 1px white;
    }

    .return-btn-w i {
        position: fixed;
        bottom: 1rem;
        right: 1rem;
        background-color: white;
        color: #65bbb2;
        border-radius: 50%;
        width: 40px;
        height: 40px;
        text-align: center;
        font-size: 1.5rem;
        z-index: 9999;
        padding-top: 7px;
        border: solid 1px #65bbb2;
    }

    .sp-none {
        display: none;
    }

    /* ヘッダーメニュー */
    .sp-hdr-menu,
    .hamburger-nav {
        display: none;
    }

    .header-nav {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 70px;
        background-color: rgba(255, 255, 255, 0.9);
        z-index: 999999;
    }

    .pc-hdr {
        width: 100vw
    }

    .pc-hdr-menu {
        position: fixed;
        top: 0;
        left: 47%;
        transform: translateX(-50%);
        align-items: center;
        justify-content: center;

        width: 1200px;
        height: 70px;
        color: #414141;
        font-weight: bold;
        z-index: 99999;
        margin: 0 auto;
    }

    .hdr-left {
        display: flex;
        justify-content: flex-end;
        width: 600px;
    }

    .hdr-right {
        display: flex;
        justify-content: flex-start;
        width: 600px;
    }

    .hdr-left li {
        padding-right: 5px;
        padding-top: 20px;
        font-size: 1.1rem;
    }

    .hdr-right li {
        padding-left: 5px;
        padding-top: 20px;
        font-size: 1.1rem;
    }

    .pc-hdr-menu a {
        color: #414141;
    }

    .pc-hdr-menu ul {
        display: flex;
    }

    .pc-hdr-menu li {
        display: flex;
        justify-content: center;
    }

    .pc-hdr-menu img {
        padding: 5px;
        max-width: 65px;
        margin: 0 auto;
    }

    /* スクロールバー：非表示 */
    .scrollbar {
        -ms-overflow-style: none;
        scrollbar-width: none;
    }

    .scrollbar::-webkit-scrollbar {
        display: none;
    }


    /* PC　トップ画像 */
    /* スマホ　トップ画像 */
    .top-sp-img,
    .race-sp-img,
    .menu-sp-img,
    .race-sp-img-m {
        /* content-visibility: hidden; */
        display: none;
    }

    /* PC　全体を囲んだハコ */
    .wrapper100 {
        /* display: flex;
        justify-content: center; */
        width: 100%;

        margin: 0;
        padding: 0;
        /* overflow-x: auto; */

        overflow: hidden;
        /* スクロールバーを非表示にし、はみ出たコンテンツを切り取る */
    }

    .top-img {
        position: relative;
        padding-top: 70px;
        max-width: 100%;

        margin: 0 auto;
        text-align: center;
        padding: 0;
    }

    .top-pc-img {
        width: 100%;
        min-width: 1000px;
        height: auto;
        margin: 0 auto;
        text-align: center;
        padding: 0;
        display: block;
    }

    .menu-img {
        position: relative;
        padding-top: 70px;
        width: 100%;
    }

    .menu-pc-img {
        width: 100%;
        min-width: 1000px;
        height: auto;
        margin: 0 auto;
        padding: 0;
        display: block;
    }

    /* PC　トップ画像下のロゴレース */
    .race-pc-img {
        height: 25px;
        background-image: url(../images/logorace-half-green-under.svg);
        background-size: 48px 25px;
        background-repeat: repeat-x;
        display: block;
    }

    /* PC　メニューページ画像下のロゴレース */
    .race-img-under-m {
        height: 25px;
        background-image: url(../images/logorace-half-white-under.svg);
        background-size: 48px 25px;
        background-repeat: repeat-x;
        display: block;
        background-color: #65bbb2;
    }

    /* PC　トップページ　トップの文 */
    .top-msg {
        position: absolute;
        top: 63%;
        left: 10%
    }

    .top-msg p,
    .top-msg a {
        color: white;
    }

    .p-msg {
        font-size: 1rem;
    }

    .p-insta {
        font-size: 2rem;
    }

    .p-small {
        font-size: 14px;
    }


    /* PC　メニューページ　トップの文章 */
    .menu-msg {
        position: absolute;
        top: 60%;
        right: 2%;
        background-color: rgba(255, 255, 255, 0.4);
        border-radius: 1rem;
        padding: 15px;
    }

    .menu-msg p,
    .menu-msg a {
        color: #65bbb2;
    }

    .p-msg-m {
        font-size: 1.1rem;
        text-align: center;
    }

    .p-insta-m {
        font-size: 2rem;
    }

    .p-small-m {
        font-size: 14px;
    }

    .p-small-m a:hover {
        color: #ec79a0;
    }

    /* PC　ヘッダーロゴの回転設定 */
    /* 回転アニメーション */
    @keyframes rotateAnimation {
        from {
            transform: rotate(0deg);
        }

        to {
            transform: rotate(360deg);
        }
    }

    /* 回転する要素のスタイル */
    .rotate {
        width: 65px;
        height: 65px;
        animation: rotateAnimation 8s linear infinite;
        margin: 0 auto;
    }


    /* PC　ご質問やご相談は～お問い合わせください */
    .contact-word {
        width: 1000px;
        background-color: rgba(255, 255, 255, 0.8);
        border-radius: 12px;
        border: solid 1px rgba(101, 187, 178, 0.5);
        margin: 0 auto;
        padding: 0.5rem;
        text-align: center;

        /* grid-row-start: 3;
        grid-row-end: 4; */
        /* グリッド縦の範囲 */
    }

    .contact-word i {
        padding-right: 3px;
    }

    .contact-word p {
        color: #414141;
        font-size: 0.9rem;
        padding-left: 2px;
    }

    .contact-word a {
        color: #65bbb2;
        font-weight: bold;
    }

    .contact-word a:hover {
        color: #ec79a0;
        transition: all 0.3s ease-in-out 0.1s;
    }


    /* PC　トップページ　コンセプト */
    /* PC　コンセプト　ロゴレース上 */
    .race-pcs-above {
        width: 1000px;
        object-fit: cover;
        margin: 0 auto;
    }

    /* PC　コンセプト　ロゴレース下 */
    .race-pcs-under {
        width: 1000px;
        object-fit: cover;
        margin: 0 auto;
    }

    .race-pcs-img {
        height: 25px;
        display: block;
    }

    .about {
        display: grid;
        gap: 0;
        grid-template-columns: 300px 700px;
        grid-template-rows: 80px 220px;

        width: 1000px;
        height: 350px;
        font-size: 16px;
        color: #414141;
        border: solid 1px rgba(101, 187, 178, 0.5);
    }

    .about-left-above {
        position: relative;
        width: 300px;
        height: 80px;
        background-color: #65bbb2;
        grid-column-start: 1;
        grid-column-end: 2;
        /* グリッド横の範囲 */
    }

    .inside1 {
        position: absolute;
        top: 18px;
        left: 85px;
        color: white;
        width: auto;
        font-size: 1.5rem;
    }

    .about-logo {
        position: absolute;
        top: 15px;
        left: 20px;
        width: 50px;
    }

    .about-left-under {
        position: relative;
        width: 300px;
        height: 270px;
        grid-row-start: 2;
        grid-row-end: 3;
        /* グリッド縦の範囲 */
    }

    .inside2 {
        position: absolute;
        top: 70px;
        left: 60px;
        color: white;
        width: auto;
        font-size: 38px;
    }

    .prana-img {
        width: 300px;
        height: 270px;
    }

    .about-right {
        width: 700px;
        height: 350px;
        grid-column-start: 2;
        grid-column-end: 3;
        padding: 5%;
    }

    .about-link {
        text-align: right;
    }

    .about-link a {
        font-size: 19px;
        font-weight: bold;
        color: #65bbb2;
    }

    .about-link a:hover {
        color: #ec79a0;
    }


    /* PC　トップページ　インフォメーション */
    .info {
        width: 1000px;
        height: auto;
        color: #414141;
        border: solid 1px rgba(101, 187, 178, 0.5);
        margin: 0 auto;
    }

    .info-title {
        width: 1000px;
        height: 50px;
        background-color: #65bbb2;
        font-size: 28px;
        font-weight: bold;
        color: white;
        text-align: center;
    }

    .info-grid {
        display: grid;
        grid-template-columns: 300px 700px;
        margin: 0 auto;
        gap: 0;
    }

    .info-left {
        display: flex;
        width: 300px;
        height: auto;
        margin: 0 auto;
        padding-bottom: 0;
    }

    body .info-left a img {
        vertical-align: bottom;
        width: 300px;
        height: auto;
    }

    .info-right {
        width: 700px;
        height: auto;
        background-color: rgba(101, 187, 178, 0.1);
        margin: 0 auto;
        text-align: left;
        padding: 50px 55px 0px 55px;
        font-size: 15px;
    }

    .info-right p {
        border-bottom: solid 1px rgba(101, 187, 178, 0.3);
    }

    .info-link {
        padding-top: 100px;
        text-align: right;
        padding-bottom: 0;
    }

    .info-link a {
        font-size: 19px;
        font-weight: bold;
        color: #65bbb2;
    }

    .info-link a:hover {
        color: #ec79a0;
    }



    /* PC　インフォ　キッズヨガ */
    .info-left_ky img {
        vertical-align: bottom;
        width: 300px;
        height: auto;
    }

    .info-right_ky {
        width: 700px;
        background-color: rgba(255, 245, 176, 0.3);
        margin: 0 auto;
        text-align: left;
        padding: 50px 55px 0px 55px;
        font-size: 15px;
    }

    .info-right_ky p {
        border-bottom: dotted 0.5px rgba(101, 187, 178, 0.3);
        font-size: 14px;
    }

    .info-right-kysp {
        display: none;
    }

    .box_yellow {
        color: #2c2c2f;
        background: rgba(252, 238, 33, 0.72);
        font-weight: bold;
        font-size: 18px;
    }

    .box_yellow2 {
        color: #2c2c2f;
        background: rgba(252, 238, 33, 0.3);
    }

    .box_pink {
        background: rgba(255, 147, 147, 0.2);
    }

    .kids-banner {
        margin: 0 auto;
        text-align: center;
    }

    .kids-banner img {
        width: 300px;
    }


    /* PC　インフォ　ヨガイベント */
    .info-collaboyoga {
        display: grid;
        grid-template-columns: 540px 460px;
        /* フライヤー3列 */

        margin: 0 auto;
        gap: 0;
    }

    .info-collaboyoga img {
        vertical-align: bottom;
        width: 180px;
        height: auto;
    }


    .info-collabo_left {
        display: grid;
        grid-template-columns: 180px 180px 180px;
        /* フライヤー3列 */
    }

    .info-collabo_right {
        width: 460px;
    }

    .info-collaboyoga-title {
        width: 460px;
        height: 40px;
        background-color: #65bbb2;
        font-size: 22px;
        font-weight: bold;
        color: white;
        text-align: center;
        margin: 0 auto;
    }

    .info-collaboyoga-event {
        width: 460px;
        height: auto;
        padding: 35px;
    }

    .info-collaboyoga-event p {
        font-size: 13px;
        text-align: left;
    }

    .insta_banner {
        text-align: left;
    }

    .insta_banner img {
        width: 300px;
    }



    /* PC　メニューページ　各コンテンツ */
    .menu {
        width: 1000px;
        height: auto;
    }

    /* PC　メニュー　タイトル */
    .menu-title {
        position: relative;
        width: 900px;
        height: 90px;
        text-align: left;
        margin: 0 auto;
        border: double 1px rgba(101, 187, 178, 0.5);
        background-color: rgba(101, 187, 178, 0.5);
        background-image: url(../images/menu-title.webp);
        background-size: 100%;
        background-position: right;
    }

    .menu-title img {
        position: absolute;
        top: 6px;
        left: 15px;
        width: 75px;
        height: 75px;
        filter: drop-shadow(4px 4px 4px rgba(255, 255, 255, 1));
    }

    .menu-title h1 {
        position: absolute;
        top: 12px;
        left: 105px;
        font-size: 35px;
        color: white;
    }

    .menu-wrapper {
        width: 900px;
        background-color: rgba(101, 187, 178, 0.1);
        margin: 0 auto;
        padding-top: 30px;
        padding-bottom: 40px;
    }

    .menu-contents {
        width: 750px;
        height: auto;
        text-align: left;
        margin: 0 auto;
        padding-top: 15px;
        padding-bottom: 20px;
    }

    .menu-contents p {
        color: #414141;
        font-size: 1rem;
    }




    /* PC　メニューページ　パーソナルレッスン */
    /* PC　パーソナルレッスン　コンテンツ */
    .personal-contents {
        width: 900px;
        margin: 0 auto;
        text-align: left;
    }

    /* PC　パーソナルレッスン　メニュータイトル */
    .personal-title {
        width: 750px;
        background-color: white;
        border: solid 1px #65bbb2;
        text-align: center;
        margin: 0 auto;
        padding: 5px;
    }

    .personal-title h5 {
        font-size: 1.3rem;
        font-weight: 600;
        color: #414141;
        padding: 5px;
    }

    /* PC　各レッスン　時間と人数 */
    .lsn-sub {
        width: 700px;
        margin: 0 auto;
        text-align: left;
    }

    .lsn-sub p {
        font-size: 17px;
        color: #414141;
    }

    .lsn-sub i {
        color: #65bbb2;
    }

    /* PC　各レッスン　レッスンの詳細設定 */
    .lsn-list {
        width: 700px;
        margin: 0 auto;
        padding-top: 20px;
        padding-bottom: 20px;
        text-align: center;
    }

    .personal-contents p {
        font-size: 1rem;
        color: #414141;
    }


    /* PC　メニューページ　グループレッスン */
    /* PC　グループレッスン　コンテンツ */
    .group-contents {
        width: 900px;
        margin: 0 auto;
        text-align: left;
    }

    /* PC　グループレッスン　メニュータイトル */
    .group-title {
        width: 750px;
        background-color: rgba(101, 187, 178, 0.3);
        text-align: center;
        margin: 0 auto;
        padding: 5px;
    }

    .group-title h5 {
        font-size: 1.3rem;
        font-weight: 600;
        color: #414141;
        padding: 5px;
    }

    .group-contents p {
        font-size: 1rem;
        color: #414141;
    }




    /* PC　メニュー　料金表 */
    /* プラナ料金表・体験料　注釈 */
    .fee-sp {
        display: none;
    }

    .fee-annotation {
        width: 900px;
        text-align: right;
        margin: 0 auto;
    }

    .fee-annotation p {
        font-size: 0.9rem;
        color: #414141;
    }

    /* PC　プラナ料金表・体験料　テーブル */
    .fee {
        width: 900px;
    }

    .fee,
    .fee-first,
    tr,
    td {
        background-color: #F5F6EE;
        border: 2px solid rgba(65, 65, 65, 0.5);
        border-collapse: collapse;
        font-weight: 500;
        margin: 0 auto;
        color: #414141;
    }

    tr,
    td {
        padding: 10px;
        width: auto;
        height: 25px;
        text-align: center;
    }

    .fee-green {
        font-size: 1.1rem;
        background-color: rgba(101, 187, 178, 1);
    }

    .fee-green05 {
        font-size: 15px;
        background-color: rgba(101, 187, 178, 0.5);
    }

    .fee-green02 {
        font-size: 1.1rem;
        background-color: rgba(101, 187, 178, 0.2);
    }

    .fee-course {
        width: 180px;
        font-size: 1.1rem;
        color: white;
        background-color: rgba(65, 65, 65, 0.8);
    }

    .fee-white {
        border-top: solid 2px white;
        border-left: solid 2px white;
        background-color: white;
    }

    /* PC　体験料　横 */
    .fee-first-g {
        background-color: rgba(101, 187, 178, 0.5);
        font-size: 17px;
    }



    /* PC　料金について　コンテンツ */
    .fee-contents {
        width: 750px;
        height: auto;
        text-align: left;
        margin: 0 auto;
        padding-top: 15px;
        padding-bottom: 20px;
    }

    .fee-contents p {
        color: #414141;
        font-size: 1rem;
    }


    /* PC　体験料　打ち消し線 */
    .p-through {
        text-decoration: line-through;
        color: #65bbb2;
    }


    /* PC　メニュー　アクセス */
    /* PC　グーグルマップ埋め込み */
    .google-map iframe {
        width: 880px;
        height: 400px;
        border-radius: 10px;
        box-shadow: 4px 4px 4px rgba(0, 0, 0, 0.2);
        filter: sepia(20%);
        -webkit-filter: sepia(20%);
        margin: 0 auto;
    }

    .google-map iframe:hover {
        filter: none;
        -webkit-filter: none;
        transition: all 0.3s ease-in-out 0.1s;
    }


    /* PC　メニューページ　アクセスの方法 */
    .access-contents {
        width: 900px;
        height: auto;
        text-align: left;
        margin: 0 auto;
    }

    .access-contents p {
        color: #414141;
        font-size: 1rem;
    }

    .access-contents h3 {
        width: 100%;
        height: 45px;
        color: white;
        font-size: 1.1rem;
        background-color: #65bbb2;
        padding-top: 6px;
        padding-left: 1rem;

    }

    /* PC　メニューページ　アクセス　住所と営業時間 */
    .access-contents h4 {
        width: 100%;
        height: 45px;
        color: #414141;
        font-size: 1.1rem;
        background-color: rgba(101, 187, 178, 0.2);
        padding-top: 6px;
        padding-left: 1rem;
    }

    .access-contents a {
        color: #65bbb2;
        font-weight: bold;
    }

    .access-contents a:hover {
        color: #ec79a0;
        border-bottom: solid 1px #ec79a0;
    }

    .access-small {
        font-size: 14px;
    }

    .access-small a:hover {
        color: #ec79a0;
        border-bottom: solid 1px #ec79a0;
    }





    /* PC　メニューページ　お問い合わせ */
    /* PC　ご質問やご相談は～ */
    .contact-message {
        width: 800px;
        border-radius: 10px;
        background-color: rgba(255, 255, 255, 1);
        border: solid 1px rgba(101, 187, 178, 0.5);
        margin: 0 auto;
    }

    .contact-message i {
        padding-right: 2px;
    }

    .contact-message p {
        color: #414141;
        font-size: 1rem;
        padding: 10px;
    }

    .contact-message a {
        color: #65bbb2;
        font-weight: bold;
    }

    .contact-message a:hover {
        color: #ec79a0;
        transition: all 0.3s ease-in-out 0.1s;
    }

    .contact-root {
        width: 900px;
        align-items: center;
        margin: 0 auto;
    }

    .contact-procedure {
        width: 840px;
        display: grid;
        grid-template-columns: 280px 280px 280px;
        gap: 0;
        text-align: center;
        margin: 0 auto;
    }

    .contact-mock {
        width: 840px;
        display: grid;
        grid-template-columns: 280px 280px 280px;
        gap: 0;
        margin: 0 auto;
    }

    .line-greenbtn {
        width: 200px;
        border-radius: 10px;
        background-color: #06C755;
        color: white;
        font-size: 0.9rem;
        font-weight: bold;
        padding: 6px;
        margin: 0 auto;
        text-align: center;
    }

    .line-entry {
        width: 800px;
        background-color: #414141;
        color: white;
        font-size: 17px;
        margin: 0 auto;
        padding: 15px;
    }

    .contact-procedure-white {
        margin: 5px;
        padding: 5px 15px;
    }

    .contact-procedure-white p {
        font-size: 0.9rem;
        font-weight: 600;
        color: #414141;
    }

    .contact-procedure-white img {
        width: 70px;
    }

    .mock {
        width: 200px;
        height: auto;
        margin: 0 auto;
    }

    /* PC　お問い合わせ　LINEボタン　リンク先 */
    .contact-linegreen {
        width: 800px;
        margin: 0 auto;
    }

    .contact-linegreen a {
        width: 800px;
        border-radius: 2rem;
        border: 1px solid #06C755;
        background-color: #06C755;
        color: white;
        font-size: 1.25rem;
        font-weight: bold;
        padding-left: 30%;
        padding-right: 30%;
        padding-top: 15px;
        padding-bottom: 15px;
        margin: 0 auto;
        align-items: center;
    }

    .contact-linegreen a:hover {
        color: #06C755;
        background-color: white;
        border: solid 1px #06C755;
        transition: all 0.3s ease-in-out 0.1s;
    }



    /* 20250613納品時のCSS */
    /* PC　お客様の声 */
    /* スライドアニメーション */
    /* .voice-contents {
        width: 950px;
        display: grid;
        grid-template-columns: 500px 400px;
        margin: 0 auto;
    }

    .slider {
        position: relative;
        width: 450px;
        margin: 0 auto;
        overflow: hidden;
        border-radius: 10px;
    }

    .slide-wrapper {
        display: flex;
        transition: transform 0.5s ease;
        width: 100%;
    }

    .slide {
        flex: 1 0 100%;
    }

    video {
        width: 350px;
        height: auto;
        display: block;
        margin: 0 auto;
        border-radius: 10px;
    }

    .nav {
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        color: #414141;
        font-size: 3rem;
        font-weight: bold;
        border: none;
        padding: 0.5rem;
        cursor: pointer;
        z-index: 1;
    }

    .prev {
        left: 10px;
    }

    .next {
        right: 10px;
    } */


    /* PC　お客様の声　右側　吹き出し */
    /* .voice-message i {
        padding-right: 8px;
        color: #ec79a0;
    }

    .voice-message p {
        position: relative;
        display: inline-block;
        width: 400px;
        border-radius: 20px;
        background-color: rgba(236, 121, 160, 0.2);
        text-align: left;
        font-size: 15px;
        color: #414141;
        margin-left: 16px;
        margin-bottom: 10px;
        padding: 16px;
    }

    .voice-message p::after {
        content: "";
        position: absolute;
        top: 50%;
        left: 0;
        border-style: solid;
        border-width: 8px 16px 8px 0;
        border-color: transparent rgba(236, 121, 160, 0.2) transparent transparent;
        translate: -100% -50%;
        transform: skew(0, -24deg);
        transform-origin: right;
    } */



    /* インスタアプリ内不具合の為、修正しないといけなくなりの代替え案 */
    /* PC　お客様の声 */
    .voice-contents {
        width: 900px;
        display: grid;
        grid-template-columns: 400px 500px;
        margin: 0 auto;
    }

    /* PC　お客様の声　左側　写真 */
    .slider {
        width: 400px;
        margin: 0 auto;
    }

    .customer {
        margin: 0 auto;
        padding-top: 20px;
        padding-right: 20px;
    }

    .customer img {
        width: 380px;
        filter: drop-shadow(4px 4px 4px rgba(0, 0, 0, 0.3))
    }

    /* PC　お客様の声　右側　コメント */
    .voice-message {
        width: 500px;
        background-color: #F5F6EE;
        padding: 20px 10px 20px 25px;
        margin: 0 auto;
    }

    .voice-message i {
        font-size: 14px;
        padding-left: 4px;
        color: rgba(236, 121, 160, 0.5);
    }

    .voice-message p {
        position: relative;
        display: inline-block;
        width: auto;
        border-radius: 15px;
        background-color: white;
        text-align: left;
        font-size: 15px;
        font-weight: 100;
        color: #414141;
        margin-bottom: 10px;
        padding: 8px 16px 8px 19px;
    }

    .voice-message p::after {
        content: "";
        position: absolute;
        top: 50%;
        left: 0;
        border-style: solid;
        border-width: 8px 16px 8px 0;
        border-color: transparent white transparent transparent;
        translate: -100% -50%;
        transform: skew(0, -24deg);
        transform-origin: right;
    }

    .voice-message a {
        text-align: center;
        font-size: 15px;
        font-weight: 100;
        color: rgba(236, 121, 160, 0.5);
    }




    /* PC　メニューページ　SNS */
    .sns-qr {
        width: 600px;
        display: grid;
        grid-template-columns: 1fr 1fr 1fr;
        margin: 0 auto;
    }

    .sns-qr img {
        width: 170px;
        margin: 0 auto;
    }

    .sns-btn-m {
        width: 600px;
        display: grid;
        grid-template-columns: 1fr 1fr 1fr;
        gap: 0;
        margin: 0 auto;
    }

    .sns-btn-m p {
        width: 170px;
        height: 35px;
        border-radius: 10px;
        border: solid 1px rgba(101, 187, 178, 0.5);
        background-color: white;
        color: #65bbb2;
        font-size: 1rem;
        font-weight: bold;
        margin: 0 auto;
        padding: 2px;
    }

    .sns-link {
        width: 600px;
        height: 60px;
        display: grid;
        grid-template-columns: 1fr 1fr 1fr;
        margin: 0 auto;
    }

    .sns-link p {
        font-size: 0.9rem;
        text-align: center;
        color: #414141;
    }

    .sns-link a {
        color: #65bbb2;
        font-weight: bold;
    }

    .sns-link a:hover {
        color: #ec79a0;
    }




    /* PC SNS吹き出し */
    .speechBubble {
        position: relative;
        display: inline-block;
        margin-bottom: 20px;
        padding: 10px;
        border: 1px solid rgba(101, 187, 178, 0.5);
        border-radius: 10px;
        background-color: #ffffff;
        text-align: center;
        font-size: 17px;
        font-weight: 700;
        line-height: 1.75;
        color: #65bbb2;
        box-shadow: 4px 4px 4px rgba(0, 0, 0, 0.2);
    }

    .speechBubble::before {
        content: "";
        position: absolute;
        bottom: 0;
        left: 50%;
        border-style: solid;
        border-width: 20px 0 0 20px;
        border-color: rgba(101, 187, 178, 0.5) transparent transparent;
        translate: -50% 100%;
    }

    .speechBubble::after {
        content: "";
        position: absolute;
        bottom: 0;
        left: 50%;
        border-style: solid;
        border-width: 17.6px 0 0 17.6px;
        border-color: #ffffff transparent transparent;
        translate: calc(-50% + 0.2px) 100%;
    }





    /* PC　トップページ ゆみギャラリー　スライダー */
    .img-slide {
        width: 1fr;
        text-align: center;
        margin: 0 auto;
    }

    .slider-gallery-up,
    .slider-gallery-down {
        width: 1200px;
        margin: 0 auto;
    }

    .slider-gallery-up img,
    .slider-gallery-down img {
        width: 200px;
        height: 200px;
        object-fit: cover;
        margin: 0 auto;
        padding: 5px;
    }

    .slider-gallery-up p {
        font-size: 14px;
        color: #414141;
    }





    /* PC　メニューページ　カレンダー　ボタン */
    /* PC　予約はこちら　ボタン　リンク先 */
    .reserve-btn-w {
        width: 800px;
        margin: 0 auto;
    }

    .reserve-btn-w a {
        width: 800px;
        border: 1px solid #ec79a0;
        border-radius: 2rem;
        background-color: white;
        color: #ec79a0;
        font-size: 1.4rem;
        font-weight: bold;
        padding-left: 35%;
        padding-right: 35%;
        padding-top: 15px;
        padding-bottom: 15px;
        margin: 0 auto;
        align-items: center;
    }

    .reserve-btn-w a:hover {
        color: white;
        background-color: #ec79a0;
        border: solid 1px #ec79a0;
        transition: all 0.3s ease-in-out 0.1s;
    }

    .reserve-annotation-w {
        width: 700px;
        margin: 0 auto;
    }

    .reserve-annotation-w p {
        font-size: 0.8rem;
        text-align: right;
    }

    /* PC　LINEボタン　ボタン　リンク先 */
    .contact-linegreen-w {
        width: 800px;
        margin: 0 auto;
    }

    .contact-linegreen-w a {
        width: 800px;
        border-radius: 2rem;
        border: 1px solid #06C755;
        background-color: white;
        color: #06C755;
        font-size: 1.3rem;
        font-weight: bold;
        padding-left: 32%;
        padding-right: 32%;
        padding-top: 15px;
        padding-bottom: 15px;
        margin: 0 auto;
        align-items: center;
    }

    .contact-linegreen-w a:hover {
        color: white;
        background-color: #06C755;
        border: solid 1px #06C755;
        transition: all 0.3s ease-in-out 0.1s;
    }




    /* PC　メニューページ　ご予約について */
    /* PC　予約　エアリザーブの手順　*/
    .reserve-contents {
        width: 900px;
        height: auto;
        margin: 0 auto;

        display: grid;
        grid-template-columns: 500px 380px;
    }

    .rsv-pro {
        width: 380px;
        background-color: #414141;
        color: white;
        font-size: 17px;
        text-align: center;
        margin: 0 auto;
        padding: 15px;
    }

    .rsv-exp {
        background-color: #F5F6EE;
    }

    .rsv-entry {
        text-align: left;
        padding: 10px 10px 20px 20px;
    }

    .rsv-entry p {
        font-size: 15px;
        color: #414141;
    }

    .rsv-entry a {
        color: #65bbb2;
        font-weight: bold;
        border-bottom: 1px solid #65bbb2;
    }

    .rsv-entry a:hover {
        color: #ec79a0;
        font-weight: bold;
        border-bottom: 1px solid #ec79a0;
    }



    /* PC　予約ボタン　外部リンク */
    .reserve-btn {
        width: 800px;
        margin: 0 auto;
    }

    .reserve-btn a {
        border-radius: 2rem;
        border: 1px solid #ec79a0;
        background-color: #ec79a0;
        color: white;
        font-size: 1.4rem;
        font-weight: bold;
        padding-left: 35%;
        padding-right: 35%;
        padding-top: 15px;
        padding-bottom: 15px;
        margin: 0 auto;
        align-items: center;
    }

    .reserve-btn a:hover {
        color: #ec79a0;
        background-color: white;
        border: solid 1px #ec79a0;
        transition: all 0.3s ease-in-out 0.1s;
    }

    .reserve-annotation {
        width: 700px;
        margin: 0 auto;
    }

    .reserve-annotation p {
        font-size: 0.8rem;
        text-align: right;
    }




    /* PC　予約についての説明スライド */
    /* スライダー */
    .slider-thumbnail .swiper-slide {
        opacity: 0.5;
        transition: opacity 0.5s;
        width: calc(100% / 4);
    }

    .slider-thumbnail .swiper-slide.swiper-slide-thumb-active {
        opacity: 1;
    }

    /* レイアウトのためのスタイル */
    .slider-rsv {
        max-width: 450px;
        width: 100%;
        margin: 0 auto;
    }

    .slider-rsv img {
        width: 99%;
        height: auto;
        margin: 0 auto;
        border: solid 1px #414141;
    }

    .slider-thumbnail {
        width: 450px;
        height: 120px;
        margin: 0 auto;
    }

    .slider-thumbnail img {
        width: 100px;
        height: 110px;
        margin: 0 auto;
        padding: 3px;
        background-color: #65bbb2;
    }

    .swiper-button-next,
    .swiper-button-prev {
        color: #65bbb2;
    }


    /* PC　トップページ　フッター */
    /* PC　フッター上　ハーフレース */
    .footer-race-img {
        height: 25px;
        background-image: url(../images/logorace-halr-green.svg);
        background-size: 48px 25px;
        background-repeat: repeat-x;
        display: block;
    }

    .footer img {
        width: 200px;
    }

    .footer {
        margin: 0 auto;
        width: 100%;
    }

    .sitemap {
        width: 1020px;
        display: flex;
    }

    .sitemap p,
    .sitemap a {
        justify-content: space-between;
        color: white;
        font-size: 0.8rem;
        margin: 0 auto;
        padding-top: 5px;
        padding-bottom: 10px;
    }

    .ftr-add {
        padding-top: 15px;
    }

    .ftr-add p,
    .ftr-copy small {
        color: white;
    }

    .ftr-sns a {
        font-size: 30px;
        color: white;
    }


    /* PC　メニューページのフッター設定 */
    /* フッター画像上のレース */
    .footer-race-img-m {
        height: 25px;
        background-image: url(../images/logorace-half-white.svg);
        background-size: 48px 25px;
        background-repeat: repeat-x;
        display: block;
        background-color: #65bbb2;
    }

    .footer-m img {
        width: 200px;
    }

    .footer-m {
        margin: 0 auto;
    }

    .sitemap-m {
        width: 1020px;
        display: flex;
    }

    .sitemap-m p,
    .sitemap-m a {
        justify-content: space-between;
        color: #65bbb2;
        font-size: 0.8rem;
        margin: 0 auto;
        padding-top: 5px;
        padding-bottom: 10px;
    }

    .sitemap-m a:hover {
        color: #ec79a0;
    }

    .ftr-add-m {
        padding-top: 15px;
    }

    .ftr-add-m p,
    .ftr-copy-m small {
        color: #65bbb2;
    }

    .ftr-sns-m a {
        font-size: 30px;
        color: #65bbb2;
    }

    .ftr-sns-m a:hover {
        font-size: 30px;
        color: #ec79a0;
    }




    /* PC　トップページ　固定ボタン　お問い合わせはこちら＆体験レッスンはこちら */
    .top-btn-contents {
        position: fixed;
        bottom: 0;
        display: flex;
        flex-wrap: nowrap;
        justify-content: center;
        column-gap: 22px;
        width: 100%;
        background: rgba(101, 187, 178, 0.4);
        margin: 0 auto;
        padding-top: 5px;
        padding-bottom: 5px;
        z-index: 100;
    }

    .top-btn-line {
        width: 400px;
        height: 60px;
        border-radius: 22px;
        border: 1px solid rgba(255, 255, 255, 0.4);
        background: linear-gradient(90deg, rgb(101, 187, 178, 1) 0%, rgba(255, 255, 255, 0.2) 50%, rgb(101, 187, 178, 1) 100%);
        box-shadow: 4px 4px 4px rgba(0, 0, 0, 0.2);
        color: white;
        font-size: 26px;
        font-weight: bold;
        margin: 0 auto;
        align-items: center;
        padding: 5px;
    }

    .top-btn-firstlsn {
        width: 400px;
        height: 60px;
        border-radius: 20px;
        border: 1px solid rgba(255, 255, 255, 0.4);
        background: linear-gradient(90deg, rgb(101, 187, 178, 1) 0%, rgba(166, 238, 31, 0.6) 50%, rgba(236, 121, 160, 1) 100%);
        background-size: 200% 100%;
        box-shadow: 4px 4px 4px rgba(0, 0, 0, 0.2);
        color: white;
        font-size: 26px;
        font-weight: bold;
        margin: 0 auto;
        align-items: center;
        padding: 5px;
    }

    .top-btn-line img,
    .top-btn-firstlsn img {
        position: absolute;
        top: 5px;
        left: 25px;
        width: 50px;
        height: 50px;
    }

    .top-btn-line p,
    .top-btn-firstlsn p {
        position: absolute;
        top: 6px;
        right: 25px;
    }

    .top-btn-line:hover {
        background-color: rgba(255, 255, 255, 0.8);
        transition: all 0.3s ease-in-out 0.1s;
    }

    .top-btn-firstlsn:hover {
        background-position: 100% 0;
        background-color: white;
        transition: all 0.3s ease-in-out 0.1s;
    }




    /* PC　メニューページ　ご入会の流れ */
    .join-entry {
        text-align: center;
        margin: 0 auto;
    }

    .join-entry p {
        background-color: white;
        border: solid 2px #65bbb2;
        border-radius: 12px;
        padding: 10px;
        color: #414141;
        font-size: 1rem;
    }

    .join-entry a {
        color: #65bbb2;
        font-weight: bold;
    }

    .join-entry a:hover {
        color: #ec79a0;
        border-bottom: solid 1px #ec79a0;
    }

    .join-annotation {
        background: linear-gradient(transparent 60%, rgba(236, 121, 160, 0.3) 20%);
        display: inline-block;
        color: #414141;
        font-size: 14px;
        padding-bottom: -5px;
    }


    /* PC　メニューページ　よくある質問 */
    .faq-contents {
        width: 600px;
        text-align: left;
        margin: 0 auto;
    }

    .faq-contents i {
        color: #ec79a0;
    }

    .faq-contents p {
        background-color: white;
        padding: 15px;
        color: #414141;
        font-size: 1rem;
    }

    /* PC　メニューページ　よくある質問　吹き出し */
    .faq-bubble {
        position: relative;
        display: inline-block;
        width: 600px;
        border-radius: 8px;
        color: #414141;
        font-size: 1rem;
        margin-bottom: 20px;
        padding: 16px;
        text-align: center;
    }

    .faq-bubble::after {
        content: "";
        position: absolute;
        bottom: 0;
        left: 30%;
        border-style: solid;
        border-width: 20px 0 0 20px;
        border-color: #ffffff transparent transparent;
        translate: calc(-50% - 0.4px) 100%;
        transform: skew(-25deg);
        transform-origin: top;
    }



    /* PC　メニューページ　固定ボタン */
    .menu-btn-contents {
        position: fixed;
        bottom: 0;

        display: flex;
        flex-wrap: nowrap;
        justify-content: center;
        column-gap: 22px;
        width: 100%;
        background: rgba(255, 255, 255, 0.8);
        margin: 0 auto;
        padding-top: 5px;
        padding-bottom: 5px;
        z-index: 100;
    }

    .menu-btn-line {
        width: 400px;
        height: 55px;
        border-radius: 22px;
        border: 1px solid #65bbb2;
        background-color: white;
        color: #65bbb2;
        font-size: 22px;
        font-weight: bold;
        margin: 0 auto;
        align-items: center;
        padding: 6px;
    }

    .menu-btn-rsv {
        width: 400px;
        height: 55px;
        border-radius: 22px;
        border: 1px solid #ec79a0;
        background-color: white;
        color: #ec79a0;
        font-size: 22px;
        font-weight: bold;
        margin: 0 auto;
        align-items: center;
        padding: 6px;
    }

    .menu-btn-line:hover {
        background-color: #65bbb2;
        color: white;
        transition: all 0.3s ease-in-out 0.1s;
    }

    .menu-btn-rsv:hover {
        background-color: #ec79a0;
        color: white;
        transition: all 0.3s ease-in-out 0.1s;
    }

    .menu-btn-annotation {
        width: 380px;
        margin: 0 auto;
    }

    .menu-btn-annotation p {
        font-size: 10px;
        text-align: right;
    }
}

/* PC設定　ここまで */








/* スマホ設定 ------------------------------*/
@media(max-width:768px) {

    /* 戻るボタン　固定 */
    .return-btn i,
    .return-btn-w i {
        display: none;
    }

    .pc-none {
        /* content-visibility: hidden; */
        display: none;
    }

    /* ヘッダー */
    .header-nav {
        display: none;
    }

    .hamburger-nav {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 66px;
        z-index: 9999;
        background-color: white;
    }

    .sp-hdr-menu {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 66px;
    }

    .sp-hdr-logo {
        width: 62px;
        height: 66px;
        background-color: #65bbb2;
    }

    .sp-hdr-menu img {
        height: 62px;
        position: fixed;
        top: 1px;
        left: 40%;
    }

    .sp-hdr-menu a {
        position: fixed;
        top: 30px;
        right: 5px;
        font-size: 0.9rem;
        color: #65bbb2;
        border-bottom: 1px solid #65bbb2;
    }

    .sp-hdr-menu a:hover {
        color: #ec79a0;
        border-bottom: 1.5px solid #ec79a0;
    }


    /* ハンバーガーメニュー ------------------------------*/

    .hamburger-nav {
        margin: 0 auto;
        padding: 0;
    }

    #nav-drawer {
        position: fixed;
        top: 25px;
        left: 28px;
    }

    /*チェックボックス等は非表示に*/
    .nav-unshown {
        display: none;
    }

    /*アイコンのスペース*/
    #nav-open {
        display: inline-block;
        width: 30px;
        height: 22px;
        vertical-align: middle;
    }

    #nav-open img {
        position: fixed;
        top: 4px;
        left: 5px;
        width: 50px;
        height: 50px;
    }

    #nav-drawer p {
        position: fixed;
        top: 45px;
        left: 10px;
        color: white;
        font-size: 0.9rem;
    }

    /*閉じる用の背景の設定*/
    #nav-close {
        display: none;
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: black;
        opacity: 0;
        transition: all 0.3s ease-in-out 0.1s;
    }

    /*ハンバーガーメニューの中身*/
    .hbg-menu-logo {
        width: 220px;
        margin: 0 auto;
    }

    .hbg-menu-logo img {
        width: 200px;
        margin: 0 auto;
    }

    #nav-content {
        position: fixed;
        overflow: auto;
        top: 0;
        left: 0;
        z-index: 9999;
        width: 90%;
        max-width: 280px;
        height: 100%;
        background: #65bbb2;
        transition: all 0.3s ease;
        -webkit-transform: translateX(-105%);
        transform: translateX(-105%);
        margin: 0 auto;
    }

    #nav-content ul {
        padding-top: 1rem;
    }

    #nav-content li {
        font-size: 1.2rem;
        font-weight: bold;
        text-align: center;
    }

    #nav-content li a {
        text-decoration: none;
        color: white;
        width: 100%;
        display: block;

        &:hover {
            background-color: rgba(255, 255, 255, 0.4);
        }
    }

    /* .header-logo-menu {
        width: 50px;
        height: 500px;
    } */

    #nav-content a:hover {
        color: rgba(236, 121, 160, 0.9);
        transition: all 0.3s ease-in-out 0.1s;
    }

    .hbg-sns {
        display: flex;
        margin: 0 auto;
    }


    /*チェックがついたら表示させる*/
    #nav-input:checked~#nav-close {
        display: block;
        opacity: .5;
    }

    #nav-input:checked~#nav-content {
        -webkit-transform: translateX(0%);
        transform: translateX(0%);
        box-shadow: 4px 4px 4px rgba(0, 0, 0, .15);
    }

    .header-logo-menu {
        display: flex;
        display: -moz-flex;
        display: -o-flex;
        display: -webkit-flex;
        display: -ms-flex;
        flex-direction: row;
        -moz-flex-direction: row;
        -o-flex-direction: row;
        -webkit-flex-direction: row;
        -ms-flex-direction: row;
    }

    /* ハンバーガーメニュー ここまで ------------------------------*/



    /* スマホトップ画像の設定 */
    /* PCのトップ画像 */
    .top-pc-img,
    .race-pc-img,
    .menu-pc-img {
        /* content-visibility: hidden; */
        display: none;
    }

    .top-img,
    .menu-img {
        width: 100%;
    }

    .top-sp-img {
        max-width: 100%;
        margin: 0 auto;
        padding-top: 40px;
        display: block;
    }


    /* スマホ　トップ画像のロゴレース　下 */
    .race-sp-img {
        height: 15px;
        background-image: url(../images/logorace-half-green-under.svg);
        background-size: 28px 15px;
        background-repeat: repeat-x;
        display: block;
    }

    /* スマホ　トップ画像下　～ヨガスタジオ */
    .top-msg {
        width: 95%;
        margin: 0 auto;
        padding-top: 50px;
        padding-bottom: 50px;
    }

    /* スマホ　トップページ　スタジオ紹介：プラナパークサイドヨガ */
    .p-msg {
        font-size: 1rem;
        color: #414141;
        text-align: center;
        border-bottom: dotted 1px rgba(101, 187, 178, 0.5);
    }

    .p-name {
        font-size: 1.1rem;
        color: #414141;
        text-align: center;
    }

    .in-menu {
        background-color: rgba(101, 187, 178, 0.1);
        background: linear-gradient(90deg, rgb(101, 187, 178, 0.5) 0%, rgba(255, 255, 255, 0.8) 50%, rgba(236, 121, 160, 0.5) 100%);
        margin: 20px;
        padding-top: 10px;
        padding-bottom: 10px;
    }

    .in-menu a {
        color: #414141;
        font-size: 1rem;
        text-align: center;
    }

    .in-menu:hover {
        background: linear-gradient(90deg, rgb(101, 187, 178, 1) 0%, rgba(255, 255, 255, 0.5) 50%, rgba(236, 121, 160, 1) 100%);
    }




    /* スマホ　メニューページ　トップ画像 */
    .menu-sp-img {
        max-width: 100%;
        margin: 0 auto;
        padding-top: 40px;
        display: block;
    }

    /* スマホ　メニューページ　トップ画像のロゴレース　下 */
    .race-sp-img-m {
        height: 15px;
        background-image: url(../images/logorace-half-white-under.svg);
        background-size: 28px 15px;
        background-repeat: repeat-x;
        display: block;
        background-color: #65bbb2;
    }

    /* スマホ　メニューページ　トップ画像下の文言 */
    .menu-msg {
        width: 100%;
        background-color: #65bbb2;
        margin: 0 auto;
        padding-top: 50px;
        padding-bottom: 50px;
    }

    .p-msg-m {
        width: 95%;
        font-size: 1rem;
        color: white;
        margin: 0 auto;
        text-align: center;
        border-bottom: dotted 1px rgba(255, 255, 255, 0.5);
    }



    /* スマホ　メニューページ　スタジオ紹介：プラナパークサイドヨガ */
    .p-name-m {
        font-size: 1.1rem;
        color: white;
        text-align: center;
    }


    /* スマホ　トップページ　コンセプト ロゴレース */
    .race-pcs-above {
        height: 15px;
        background-image: url(../images/logorace-halr-green.svg);
        background-size: 28px 15px;
        background-repeat: repeat-x;
        display: block;
    }

    .race-pcs-under {
        height: 15px;
        background-image: url(../images/logorace-half-green-under.svg);
        background-size: 28px 15px;
        background-repeat: repeat-x;
        display: block;
    }

    .race-img-under-m {
        height: 15px;
        background-image: url(../images/logorace-half-white-under.svg);
        background-size: 28px 15px;
        background-repeat: repeat-x;
        display: block;
        background-color: #65bbb2;
    }

    .race-pcs-img {
        display: none;
    }


    /* スマホ　フッター画像上のレース */
    .footer-race-img {
        height: 15px;
        background-image: url(../images/logorace-halr-green.svg);
        background-size: 28px 15px;
        background-repeat: repeat-x;
        display: block;
    }


    /* スマホ　フッター画像上のレース */
    .footer-race-img-m {
        height: 15px;
        background-image: url(../images/logorace-half-white.svg);
        background-size: 28px 15px;
        background-repeat: repeat-x;
        display: block;
        background-color: #65bbb2;
    }




    /* スマホ　トップページ　コンセプト */
    .about {
        width: 100%;
        height: auto;
        border: solid 1px rgba(101, 187, 178, 0.5);
        margin: 0 auto;
        font-size: 0.9rem;
        color: #414141;
    }

    .about-left-above {
        position: relative;
        height: 80px;
        background-color: #65bbb2;
    }

    .inside1 {
        position: absolute;
        top: 15px;
        left: 85px;
        width: auto;
    }

    .about-logo {
        position: absolute;
        top: 15px;
        left: 20px;
        width: 50px;
    }

    .about-left-under {
        position: relative;
        width: 100%;
        height: auto;
    }

    .prana-img {
        width: 100%;
        height: 100px;
    }

    .inside2 {
        position: absolute;
        top: 5px;
        left: 50px;
        padding-top: 15px;
    }

    .about-right {
        width: 98%;
        height: auto;
        margin: 0 auto;
        text-align: left;
        padding: 5%;
    }

    .about h1 {
        font-size: 28px;
        color: white;
    }

    .about h2 {
        font-size: 32px;
        color: white;
        font-weight: bold;
    }

    .about-link {
        text-align: right;
    }

    .about-link a {
        font-size: 18px;
        color: #65bbb2;
    }

    .about-link a:hover {
        color: #ec79a0;
    }


    /* スマホ　トップページ　インフォメーション */
    .info {
        width: 100%;
        height: auto;
        /* border: solid 1px rgba(101, 187, 178, 0.5); */
        color: #414141;
        margin: 0 auto;
    }

    body .info-left a img {
        vertical-align: bottom;
        width: 250px;
        height: auto;
    }

    .info-title {
        width: 100%;
        height: 50px;
        background-color: #65bbb2;
        text-align: center;
        color: white;
        font-size: 25px;
        font-weight: bold;
        padding: 3px;
    }

    .info-grid {
        width: 100%;
    }

    .info-left {
        display: flex;
        justify-content: center;
        width: 100%;
        margin: 0 auto;
        padding-bottom: 0;
    }

    .info-right {
        width: 100%;
        background-color: rgba(101, 187, 178, 0.1);
        margin: 0 auto;
        text-align: left;
        font-size: 14px;
        padding: 20px;
    }

    .info-right p {
        border-bottom: dotted 0.5px rgba(101, 187, 178, 0.3);
    }

    .info-right-kypc {
        display: none;
    }


    .info-link {
        text-align: right;
        padding-top: 20px;
    }

    .info-link a {
        font-size: 18px;
        color: #65bbb2;
    }

    .info-link a:hover {
        color: #ec79a0;
    }


    /* スマホ　インフォ　キッズヨガ */
    .info-left_ky img {
        vertical-align: bottom;
        width: 250px;
        height: auto;
    }

    .info-right_ky {
        width: 100%;
        background-color: rgba(255, 245, 176, 0.3);
        margin: 0 auto;
        text-align: left;
        font-size: 14.5px;
        padding: 20px;
    }

    .info-right_ky p {
        /* border-bottom: dotted 0.5px rgba(101, 187, 178, 0.3); */
        font-size: 14px;
    }

    .box_yellow {
        color: #2c2c2f;
        background: rgba(252, 238, 33, 0.72);
        font-weight: 600;
        font-size: 17px;
    }

    .box_yellow2 {
        color: #2c2c2f;
        background: rgba(252, 238, 33, 0.3);
    }

    .box_pink {
        background: rgba(255, 147, 147, 0.2);
    }

    .kids-banner {
        text-align: center;
    }

    .kids-banner img {
        width: 300px;
    }



    /* スマホ　インフォ　ヨガイベント */
    .info-collaboyoga {
        display: grid;
        grid-template-rows: auto auto;
        margin: 0 auto;
        gap: 0;
    }

    .info-collaboyoga img {
        vertical-align: bottom;
        width: 100px;
        height: auto;
    }

    .info-collabo_left {
        display: grid;
        grid-template-columns: 100px 100px 100px;
        grid-template-rows: auto auto;
        margin: 0 auto;
        gap: 0;
    }

    .info-collabo_right {
        width: 100%;
        /* display: grid;
        grid-template-rows: 40px auto; */

    }

    .info-collaboyoga-title {
        width: 100%;
        height: 40px;
        background-color: #65bbb2;
        font-size: 22px;
        font-weight: bold;
        color: white;
        text-align: center;
    }

    .info-collaboyoga-event {
        width: 100%;
        height: auto;
        padding: 20px;
    }

    .info-collaboyoga-event p {
        font-size: 12px;
        text-align: left;
    }

    .insta_banner {
        text-align: center;
    }

    .insta_banner img {
        width: 300px;
    }









    /* スマホ　メニューページ　各タイトル */
    .menu {
        width: 100%;
        height: auto;
    }

    .menu-title {
        position: relative;
        height: 70px;
        background-color: rgba(101, 187, 178, 0.5);
        border: double 1px rgba(101, 187, 178, 0.5);
        background-image: url(../images/menu-title.webp);
        background-size: 100%;
        background-position: right;
    }

    .menu-title img {
        position: absolute;
        top: 8px;
        left: 15px;
        width: 50px;
        height: 50px;
        filter: drop-shadow(4px 4px 4px rgba(255, 255, 255, 1));
    }

    .menu-title h1 {
        position: absolute;
        top: 10px;
        left: 75px;
        font-size: 28px;
        color: white;
    }

    /* スマホ　パーソナル・グループレッスン・体験レッスンの詳細文 */
    .menu-wrapper {
        width: 98%;
        margin: 0 auto;
        padding-top: 30px;
        padding-bottom: 40px;
    }

    .menu-contents {
        width: 90%;
        height: auto;
        margin: 0 auto;
        text-align: left;
    }

    .menu-contents p {
        color: #414141;
        font-size: 1rem;
    }




    /* スマホ　メニューページ　パーソナルレッスン */
    /* PC　パーソナルレッスン　コンテンツ */
    .personal-contents {
        width: 100%;
        margin: 0 auto;
        text-align: left;
    }

    /* スマホ　パーソナルレッスン　メニュータイトル */
    .personal-title {
        width: 95%;
        background-color: rgba(101, 187, 178, 0.2);
        border: solid 1px #65bbb2;
        text-align: center;
        margin: 0 auto;
    }

    .personal-title h5 {
        font-size: 1.2rem;
        font-weight: 600;
        color: #414141;
        padding: 5px;
    }

    /* スマホ　各レッスン　時間と人数 */
    .lsn-sub {
        width: 90%;
        margin: 0 auto;
        text-align: left;
    }

    .lsn-sub p {
        font-size: 1rem;
        color: #414141;
    }

    .lsn-sub i {
        color: #65bbb2;
    }


    /* スマホ　各レッスン　レッスンの詳細設定 */
    .lsn-list {
        width: 90%;
        margin: 0 auto;
        padding-top: 20px;
        padding-bottom: 30px;
    }

    .personal-contents p {
        font-size: 1rem;
    }


    /* スマホ　メニューページ　グループレッスン */
    /* スマホ　グループレッスン　コンテンツ */
    .group-contents {
        width: 100%;
        margin: 0 auto;
        text-align: left;
    }

    /* スマホ　グループレッスン　メニュータイトル */
    .group-title {
        width: 95%;
        background-color: rgba(101, 187, 178, 0.3);
        text-align: center;
        margin: 0 auto;
    }

    .group-title h5 {
        font-size: 1.2rem;
        font-weight: 600;
        color: #414141;
        padding: 5px;
    }

    .group-contents p {
        font-size: 1rem;
    }





    /* スマホ　メニュー　料金表 */
    /* PC　料金表 */
    .fee {
        display: none;
    }

    /* スマホ　プラナ料金表　注釈 */
    .fee-annotation {
        width: 98%;
        text-align: right;
    }

    .fee-annotation p {
        font-size: 0.8rem;
        color: #414141;
    }

    /* スマホ　体験レッスン */
    /* 体験料　注釈 */
    .first-annotation {
        width: 98%;
        text-align: right;
    }

    .first-annotation p {
        font-size: 0.8rem;
        color: #414141;
    }


    /* スマホ　料金表　テーブル */
    .fee-sp {
        width: 95%;
    }

    .fee-sp,
    tr,
    td {
        background-color: #F5F6EE;
        border: 1px solid rgba(65, 65, 65, 0.5);
        border-collapse: collapse;
        font-weight: 500;
        margin: 0 auto;
        color: #414141;
    }

    tr,
    td {
        padding: 10px;
        width: auto;
        height: 25px;
        text-align: center;
    }

    .fee-green {
        width: 100px;
        background-color: rgba(101, 187, 178, 1);
        font-size: 1rem;
        color: #414141;
    }

    .fee-green02 {
        width: 150px;
        background-color: rgba(101, 187, 178, 0.2);
        font-size: 0.9rem;
        color: #414141;
    }

    .fee-course {
        width: 200px;
        background-color: rgba(65, 65, 65, 0.8);
        font-size: 1rem;
        color: white;
    }

    .fee-white {
        border-top: solid 1px white;
        border-left: solid 1px white;
        background-color: white;
    }

    .fee-white-sp {
        border-left: solid 1px white;
        background-color: white;
    }

    .fee-green05 {
        width: 250px;
        background-color: rgba(101, 187, 178, 0.5);
        font-size: 1rem;
        color: #414141;
    }

    /* スマホ　料金表　入会金・手数料の説明 */
    .fee-contents {
        width: 90%;
        height: auto;
        text-align: left;
        margin: 0 auto;
        padding-top: 15px;
        padding-bottom: 20px;
        color: #414141;
    }

    .fee-contents p {
        color: #414141;
        font-size: 1rem;
    }


    /* スマホ　メニュー　アクセス */
    /* スマホ　グーグルマップ埋め込み */
    .google-map iframe {
        width: 90%;
        height: 300px;
        border-radius: 10px;
        box-shadow: 4px 4px 4px rgba(0, 0, 0, 0.2);
        filter: sepia(20%);
        -webkit-filter: sepia(20%);
        margin: 0 auto;
    }

    .google-map iframe:hover {
        filter: none;
        -webkit-filter: none;
        transition: all 0.3s ease-in-out 0.1s;
    }

    /* スマホ　アクセスの方法 */
    .access-contents {
        width: 90%;
        height: auto;
        text-align: left;
        margin: 0 auto;
    }

    .access-contents p {
        color: #414141;
        font-size: 15px;
    }

    .access-contents h3 {
        width: 100%;
        height: 45px;
        color: white;
        font-size: 1rem;
        background-color: #65bbb2;
        padding-top: 6px;
        padding-left: 1rem;
    }

    /* スマホ　住所と営業時間 */
    .access-contents h4 {
        width: 100%;
        height: 45px;
        color: #414141;
        font-size: 1.1rem;
        background-color: rgba(101, 187, 178, 0.2);
        padding-top: 6px;
        padding-left: 1rem;
    }

    .access-contents a {
        color: #65bbb2;
        font-weight: bold;
    }

    .access-contents a:hover {
        color: #ec79a0;
        border-bottom: solid 1px #ec79a0;
    }

    .access-small {
        font-size: 13px;
    }

    .access-small a:hover {
        color: #ec79a0;
        border-bottom: solid 1px #ec79a0;
    }





    /* スマホ　メニューページ　お問い合わせ */
    /* スマホ　ご質問やご相談は～ */
    .contact-message {
        width: 98%;
        background-color: rgba(255, 255, 255, 1);
        border-radius: 10px;
        border: solid 1px rgba(101, 187, 178, 0.5);
        margin: 0 auto;
    }

    .contact-message i {
        display: none;
    }

    .contact-message p {
        color: #414141;
        font-size: 0.9rem;
        padding: 10px;
    }

    .contact-message a {
        color: #65bbb2;
        font-weight: bold;
    }

    .contact-message a:hover {
        color: #ec79a0;
        transition: all 0.3s ease-in-out 0.1s;
    }

    .contact-root {
        width: 100%;
        align-items: center;
        margin: 0 auto;
    }

    .contact-procedure {
        width: 95%;
        text-align: center;
        margin: 0 auto;
    }

    .contact-procedure img {
        width: 150px;
    }

    .line-greenbtn {
        width: 180px;
        border-radius: 10px;
        background-color: #06C755;
        padding: 6px;
        margin: 0 auto;
        color: white;
        font-weight: bold;
        font-size: 0.9rem;
    }

    .contact-mock {
        width: 300px;
        margin: 0 auto;
    }

    .contact-procedure-white {
        margin: 5px;
        padding: 5px 15px;
    }

    .contact-procedure-white p {
        font-size: 0.9rem;
        font-weight: 600;
        color: #414141;
    }

    .mock {
        width: 200px;
        height: auto;
        margin: 0 auto;
    }

    .line-entry {
        width: 90%;
        background-color: #414141;
        color: white;
        font-size: 17px;
        margin: 0 auto;
        padding: 15px;
    }

    /* スマホ　LINE問い合わせボタン　※外部リンク */
    .contact-linegreen {
        width: 90%;
        margin: 0 auto;
    }

    .contact-linegreen a {
        width: 90%;
        border-radius: 2rem;
        border: 1px solid #06C755;
        background-color: #06C755;
        color: white;
        font-size: 1.1rem;
        font-weight: bold;
        padding-left: 15%;
        padding-right: 15%;
        padding-top: 15px;
        padding-bottom: 15px;
        margin: 0 auto;
        align-items: center;
    }

    .contact-linegreen a:hover {
        color: #06C755;
        background-color: white;
        border: solid 1px #06C755;
        transition: all 0.3s ease-in-out 0.1s;
    }



    /* スマホ　メニュー　SNS */
    .sns-contents {
        width: 100%;
        height: auto;
        margin: 0 auto;
    }

    .sns-qr {
        width: 95%;
        display: grid;
        grid-template-columns: 1fr 1fr 1fr;
        margin: 0 auto;
    }

    .sns-qr img {
        width: 100px;
        margin: 0 auto;
        border-radius: 10px;
    }

    .sns-btn-m {
        width: 95%;
        height: 30px;
        display: grid;
        grid-template-columns: 1fr 1fr 1fr;
        gap: 0;
        margin: 0 auto;
    }

    .sns-btn-m p {
        width: 95%;
        border-radius: 10px;
        border: solid 1px rgba(101, 187, 178, 0.5);
        background-color: white;
        color: #65bbb2;
        font-size: 0.9Srem;
        font-weight: bold;
        margin: 0 auto;
        padding: 3px;
    }

    .sns-link {
        width: 95%;
        height: 50px;
        display: grid;
        grid-template-columns: 1fr 1fr 1fr;
        margin: 0 auto;
    }

    .sns-link p {
        font-size: 0.8rem;
        text-align: center;
        color: #414141;
    }

    .sns-link a {
        color: #65bbb2;
        font-weight: bold;
    }

    .sns-link a:hover {
        color: #ec79a0;
    }

    /* スマホ　SNS吹き出し */
    .speechBubble {
        position: relative;
        display: inline-block;
        margin-bottom: 20px;
        padding: 10px;
        border: 1px solid rgba(101, 187, 178, 0.5);
        border-radius: 10px;
        background-color: #ffffff;
        text-align: center;
        font-size: 17px;
        font-weight: 700;
        line-height: 1.75;
        color: #65bbb2;
        box-shadow: 4px 4px 4px rgba(0, 0, 0, 0.2);
    }

    .speechBubble::before {
        content: "";
        position: absolute;
        bottom: 0;
        left: 50%;
        border-style: solid;
        border-width: 20px 0 0 20px;
        border-color: rgba(101, 187, 178, 0.5) transparent transparent;
        translate: -50% 100%;
    }

    .speechBubble::after {
        content: "";
        position: absolute;
        bottom: 0;
        left: 50%;
        border-style: solid;
        border-width: 17.6px 0 0 17.6px;
        border-color: #ffffff transparent transparent;
        translate: calc(-50% + 0.2px) 100%;
    }




    /* スマホ　メニュー　お客様の声 */
    /* お客様の声　吹き出し */
    /* .voice-message {
        display: none;
    } */

    /* お客様の声　スライドアニメーション */
    /* .voice-contents {
        width: 90%;
        margin: 0 auto;
    }

    .slider {
        position: relative;
        width: 90%;
        margin: 0 auto;
        overflow: hidden;
        border-radius: 10px;
    }

    .slide-wrapper {
        display: flex;
        transition: transform 0.5s ease;
        width: 100%;
    }

    .slide {
        flex: 1 0 100%;
    }

    video {
        width: 90%;
        height: auto;
        display: block;
        margin: 0 auto;
        border-radius: 10px;
    }

    .nav {
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        color: #414141;
        font-size: 3rem;
        font-weight: bold;
        border: none;
        padding: 0;
        cursor: pointer;
        z-index: 1;
        height: 200px;
    }

    .prev {
        left: 0;
    }

    .next {
        right: 0;
    } */


    /* インスタアプリ内不具合の為、修正しないといけなくなりの代替え案 */
    /* スマホ　お客様の声 */
    .voice-contents {
        width: 100%;
        margin: 0 auto;
    }

    /* スマホ　お客様の声　左側　写真 */
    .slider {
        width: 100%;
        margin: 0 auto;
    }

    .customer {
        margin: 0 auto;
    }

    .customer img {
        width: 90%;
        filter: drop-shadow(4px 4px 4px rgba(0, 0, 0, 0.3));
    }

    /* スマホ　お客様の声　右側　コメント */
    .voice-message {
        width: 98%;
        padding: 20px 10px 20px 25px;
        margin: 0 auto;
    }

    .voice-message i {
        font-size: 14px;
        padding-left: 4px;
        color: rgba(236, 121, 160, 0.5);
    }

    .voice-message p {
        position: relative;
        display: inline-block;
        width: auto;
        border-radius: 15px;
        background-color: #F5F6EE;
        text-align: left;
        font-size: 14px;
        font-weight: 100;
        color: #414141;
        margin-bottom: 10px;
        padding: 8px 16px 8px 19px;
    }

    .voice-message p::after {
        content: "";
        position: absolute;
        top: 50%;
        left: 0;
        border-style: solid;
        border-width: 8px 16px 8px 0;
        border-color: transparent #F5F6EE transparent transparent;
        translate: -100% -50%;
        transform: skew(0, -24deg);
        transform-origin: right;
    }

    .voice-message a {
        text-align: center;
        font-size: 15px;
        font-weight: 100;
        color: rgba(236, 121, 160, 0.5);
    }





    /* スマホ　トップページ ゆみギャラリー　スライド */
    .slider-gallery-up {
        width: 100%;
        margin: 0 auto;
    }

    .slider-gallery-up img {
        width: 200px;
        height: 200px;
        object-fit: cover;
        margin: auto;
        padding: 5px;
    }

    .slider-gallery-up p {
        font-size: 12px;
    }

    .img-slide {
        width: 100%;
        text-align: center;
    }





    /* スマホ　メニューページ　予約について */
    /* スマホ　予約　エアリザーブの手順 */
    .reserve-contents {
        width: 100%;
        height: auto;
        margin: 0 auto;
    }

    .reserve-contents img {
        width: 80%;
        margin: 0 auto;
    }

    .reserve-exp {
        width: 95%;
        background-color: rgba(101, 187, 178, 0.1);
        padding: 5px;
        margin: 0 auto;
    }

    .reserve-exp p {
        width: 80%;
        font-size: 0.9rem;
        text-align: left;
        margin: 0 auto;
        color: #414141;
    }

    /* スマホ　予約ボタン　外部リンク */
    .reserve-btn {
        width: 90%;
        margin: 0 auto;
    }

    .reserve-btn a {
        width: 90%;
        border-radius: 2rem;
        border: 1px solid #ec79a0;
        background-color: #ec79a0;
        color: white;
        font-size: 1.2rem;
        font-weight: bold;
        padding-left: 28%;
        padding-right: 28%;
        padding-top: 15px;
        padding-bottom: 15px;
        margin: 0 auto;
        align-items: center;
    }

    .reserve-btn a:hover {
        color: #ec79a0;
        background-color: white;
        border: solid 1px #ec79a0;
        transition: all 0.3s ease-in-out 0.1s;
    }

    .reserve-annotation {
        width: 80%;
        margin: 0 auto;
    }

    .reserve-annotation p {
        font-size: 0.8rem;
        text-align: center;
    }



    /* スマホ　予約についての説明スライド */
    /* スライダー */
    .slider-thumbnail .swiper-slide {
        opacity: 0.5;
        transition: opacity 0.5s;
        width: calc(100% / 4);
    }

    .slider-thumbnail .swiper-slide.swiper-slide-thumb-active {
        opacity: 1;
    }

    /* レイアウトのためのスタイル */
    .slider-rsv {
        width: 85%;
        margin: 0 auto;
    }

    .slider-rsv img {
        width: 98%;
        height: auto;
        margin: 0 auto;
        border: solid 1px #414141;
    }

    .slider-thumbnail {
        display: none;
    }

    .swiper-button-next,
    .swiper-button-prev {
        color: #65bbb2;
    }

    .rsv-pro {
        width: 90%;
        background-color: #414141;
        color: white;
        font-size: 17px;
        text-align: center;
        margin: 0 auto;
        padding: 10px;
    }

    .rsv-exp {
        margin: 0 auto;
    }

    .rsv-entry {
        width: 90%;
        background-color: #F5F6EE;
        text-align: left;
        padding: 5px 10px 10px 10px;
        margin: 0 auto;
    }

    .rsv-entry p {
        font-size: 15px;
        color: #414141;
    }

    .rsv-entry a {
        color: #65bbb2;
        font-weight: bold;
        border-bottom: 1px solid #65bbb2;
    }

    .rsv-entry a:hover {
        color: #ec79a0;
        font-weight: bold;
        border-bottom: 1px solid #ec79a0;
    }





    /* スマホ　メニューページ　カレンダー　ボタン */
    /* スマホ　予約はこちら　ボタン　リンク先 */
    .reserve-btn-w {
        width: 90%;
        margin: 0 auto;
    }

    .reserve-btn-w a {
        width: 90%;
        border: 1px solid #ec79a0;
        border-radius: 2rem;
        background-color: white;
        color: #ec79a0;
        font-size: 1.1rem;
        font-weight: bold;
        padding-left: 28%;
        padding-right: 28%;
        padding-top: 15px;
        padding-bottom: 15px;
        margin: 0 auto;
        align-items: center;
    }

    .reserve-btn-w a:hover {
        color: white;
        background-color: #ec79a0;
        border: solid 1px #ec79a0;
        transition: all 0.3s ease-in-out 0.1s;
    }

    .reserve-annotation-w {
        width: 80%;
        margin: 0 auto;
    }

    .reserve-annotation-w p {
        font-size: 0.8rem;
        text-align: center;
    }

    /* スマホ　LINEボタン　リンク先 */
    .contact-linegreen-w {
        width: 90%;
        margin: 0 auto;
    }

    .contact-linegreen-w a {
        width: 90%;
        border-radius: 2rem;
        border: 1px solid #06C755;
        background-color: white;
        color: #06C755;
        font-size: 1.1rem;
        font-weight: bold;
        padding-left: 20%;
        padding-right: 20%;
        padding-top: 15px;
        padding-bottom: 15px;
        margin: 0 auto;
        align-items: center;
    }

    .contact-linegreen-w a:hover {
        color: white;
        background-color: #06C755;
        border: solid 1px #06C755;
        transition: all 0.3s ease-in-out 0.1s;
    }


    /* スマホ　トップページ　ママヨガ　写真 */
    .under-img img {
        width: 100%;
        height: auto;
        margin: 0 auto;
    }




    /* スマホ　トップページ　フッター */
    .footer {
        width: 90%;
        display: grid;
        grid-template-columns: 120px 1fr;
        grid-template-rows: 300px 100px 50px;
    }

    .sitemap {
        grid-column: 1 / 2;
        padding-top: 10px;
    }

    .footer img {
        grid-column: 2 / 3;
        width: 200px;
        padding-top: 10px;
        margin: 0 auto;
    }

    .ftr-logo {
        text-align: center;
    }

    .ftr-add {
        grid-column: 1 / 3;
        text-align: left;
        padding-top: 10px;
    }

    .ftr-sns {
        grid-row: 3 / 4;
        text-align: left;
        width: 90%;
    }

    .sitemap p,
    .sitemap a {
        text-align: left;
        color: white;
        font-size: 0.8rem;
    }

    .ftr-add p,
    .ftr-copy small {
        color: white;
        font-size: 0.8rem;
    }

    .ftr-sns a {
        font-size: 25px;
        color: white;
    }

    .ftr-copy {
        text-align: center;
    }


    /* スマホ　メニューページ　フッター */
    .footer-m {
        width: 90%;
        display: grid;
        grid-template-columns: 120px 1fr;
        grid-template-rows: 300px 100px 50px;
    }

    .sitemap-m {
        grid-column: 1 / 2;
        padding-top: 10px;
    }

    .footer-m img {
        grid-column: 2 / 3;
        width: 200px;
        padding-top: 10px;
        margin: 0 auto;
    }

    .ftr-logo-m {
        text-align: center;
    }

    .ftr-add-m {
        grid-column: 1 / 3;
        text-align: left;
        padding-top: 10px;
    }

    .ftr-sns-m {
        grid-row: 3 / 4;
        text-align: left;
        width: 90%;
    }

    .sitemap-m p,
    .sitemap-m a {
        text-align: left;
        color: #65bbb2;
        font-size: 0.8rem;
    }

    .ftr-add-m p,
    .ftr-copy-m small {
        color: #65bbb2;
        font-size: 0.8rem;
    }

    .ftr-sns-m a {
        font-size: 25px;
        color: #65bbb2;
    }

    .ftr-copy-m {
        text-align: center;
    }

    .sitemap-m a:hover,
    .ftr-sns-m i:hover {
        color: #ec79a0;
        transition: all 0.3s ease-in-out 0.1s;
    }



    /* スマホ　トップページ　固定ボタン　お問い合わせはこちら＆体験レッスンはこちら */
    .top-btn-contents {
        position: fixed;
        bottom: 0;
        justify-content: center;
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 8px;
        width: 100%;
        background: rgba(101, 187, 178, 0.4);
        margin: 0 auto;
        padding: 5px;
        z-index: 100;
    }

    .top-btn-line {
        max-width: 100%;
        height: 45px;
        border-radius: 16px;
        border: 1px solid rgba(255, 255, 255, 0.4);
        background: linear-gradient(90deg, rgb(101, 187, 178, 1) 0%, rgba(255, 255, 255, 0.2) 50%, rgb(101, 187, 178, 1) 100%);
        box-shadow: 4px 4px 4px rgba(0, 0, 0, 0.2);
        color: white;
        font-size: 14px;
        font-weight: bold;
        margin: 0 auto;
        align-items: center;
        padding: 10px 5px;
    }

    .top-btn-firstlsn {
        max-width: 100%;
        height: 45px;
        border-radius: 16px;
        border: 1px solid rgba(255, 255, 255, 0.4);
        background: linear-gradient(90deg, rgb(101, 187, 178, 1) 0%, rgba(166, 238, 31, 0.6) 50%, rgba(236, 121, 160, 1) 100%);
        background-size: 200% 100%;
        box-shadow: 4px 4px 4px rgba(0, 0, 0, 0.2);
        color: white;
        font-size: 14px;
        font-weight: bold;
        margin: 0 auto;
        align-items: center;
        padding: 10px 5px;
    }

    .top-btn-line p,
    .top-btn-firstlsn p {
        margin: 0 auto;
    }

    .top-btn-line img,
    .top-btn-firstlsn img,
    .top-btn-line i,
    .top-btn-firstlsn i {
        display: none;
    }

    .top-btn-line:hover {
        background-color: rgba(255, 255, 255, 0.8);
        transition: all 0.3s ease-in-out 0.1s;
    }

    .top-btn-firstlsn:hover {
        background-position: 100% 0;
        background-color: white;
        transition: all 0.3s ease-in-out 0.1s;
    }



    /* スマホ　メニューページ　ご入会の流れ */
    .join-entry {
        text-align: center;
        margin: 0 auto;
    }

    .join-entry p {
        background-color: white;
        border: solid 1px #65bbb2;
        border-radius: 10px;
        padding: 3px;
        color: #414141;
    }




    /* スマホ　メニューページ　ご入会の流れ */
    .join-entry {
        text-align: center;
        margin: 0 auto;
    }

    .join-entry p {
        background-color: white;
        border: solid 2px #65bbb2;
        border-radius: 12px;
        padding: 8px;
        color: #414141;
        font-size: 1rem;
    }

    .join-entry a {
        color: #65bbb2;
        font-weight: bold;
    }

    .join-entry a:hover {
        color: #ec79a0;
        font-weight: bold;
        border-bottom: solid 1px #ec79a0;
    }

    .join-annotation {
        background: linear-gradient(transparent 60%, rgba(236, 121, 160, 0.3) 20%);
        display: inline-block;
        color: #414141;
        font-size: 14px;
        padding-bottom: -5px;
    }



    /* スマホ　メニューページ　よくある質問 */
    .faq-contents {
        width: 90%;
        text-align: left;
        margin: 0 auto;
    }

    .faq-contents i {
        color: #ec79a0;
    }

    .faq-contents p {
        background-color: rgba(101, 187, 178, 0.3);
        padding: 15px;
        color: #414141;
        font-size: 1rem;
    }

    /* スマホ　メニューページ　よくある質問　吹き出し */
    .faq-bubble {
        position: relative;
        display: inline-block;
        width: 90%;
        border-radius: 8px;
        color: #414141;
        font-size: 1rem;
        margin-bottom: 20px;
        padding: 16px;
        text-align: center;
    }

    .faq-bubble::after {
        content: "";
        position: absolute;
        bottom: 0;
        left: 30%;
        border-style: solid;
        border-width: 20px 0 0 20px;
        border-color: rgba(101, 187, 178, 0.3) transparent transparent;
        translate: calc(-50% - 0.4px) 100%;
        transform: skew(-25deg);
        transform-origin: top;
    }




    /* スマホ　メニューページ　固定ボタン　LINE問い合わせ＆予約はこちら */
    .menu-btn-contents {
        position: fixed;
        bottom: 0;

        justify-content: center;
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 8px;
        width: 100%;
        background: rgba(255, 255, 255, 0.8);
        margin: 0 auto;
        padding: 5px;
        z-index: 99;
    }

    .menu-btn-line {
        max-width: 100%;
        height: 45px;
        border-radius: 16px;
        border: 1px solid #65bbb2;
        background-color: white;
        color: #65bbb2;
        font-size: 16px;
        font-weight: bold;
        margin: 0 auto;
        align-items: center;
        padding: 6px;
        z-index: 99;
    }

    .menu-btn-rsv {
        max-width: 100%;
        height: 45px;
        border-radius: 16px;
        border: 1px solid #ec79a0;
        background-color: white;
        color: #ec79a0;
        font-size: 18px;
        font-weight: bold;
        margin: 0 auto;
        align-items: center;
        padding: 6px;
        z-index: 99;
    }

    .menu-btn-line:hover {
        background-color: #65bbb2;
        color: white;
        transition: all 0.3s ease-in-out 0.1s;
    }

    .menu-btn-rsv:hover {
        background-color: #ec79a0;
        color: white;
        transition: all 0.3s ease-in-out 0.1s;
    }

    .menu-btn-annotation {
        max-width: 90%;
        margin: 0 auto;
    }

    .menu-btn-annotation p {
        font-size: 10px;
        text-align: right;
    }
}

/* スマホ　ここまで */