@charset "utf-8";

/* ____________________________
共通パーツ
ここから
___________________________ */

/* 変数
-------------------------------------------------------------------------- */
:root {
    /* Themeカラー */
    --mainColor_blue:#556CA0;
    --mainColor_blue-light: #7789B3;

    /* bgカラー */
    --bg_blue: #D5EAF6;
    --bg_white-blue: #F3FBFF;
    --bg_white: #ffffff;
    --bg_caution: rgba(255,255,255, .8);
    --bg_line: #06C655;
    --bg_overlay: rgba(0, 0, 0, .1);
    --bg_recommend: #44C5E3;
    --bg_lesson: radial-gradient(100% 100% at 50% 0%, #D4E3F6 0%, #F1F4F7 100%);
    --bg_arrow: rgba(255, 255, 255, .7);
    --bg_glow: radial-gradient(closest-side,
        #DDEAFB 0%,
        #DDEAFB 15%,
        #DEEBFC 20%,
        #E1EDFC 30%,
        #E5EFFC 40%,
        #E9F1FD 50%,
        #EDF4FE 60%,
        #F2F7FE 70%,
        #F8FBFE 80%,
        #FBFCFF 85%,
        #FEFEFF 90%,
        rgba(255, 255, 255, 0) 95%);

    /* Colorsカラー */
    --colors_caution: #e8502e;
    --colors_fff: #ffffff;
    --colors_under-line: #dddddd;
    --colors_arrow: #527CAD;

    /* textカラー */
    --text_main: #292D32;
    --text_heading: #2F90E4;
    --text_sub: #444444;
    --text_sub-en: #89B7F3;
    --text_fff: #ffffff;
    --text_caution: #DE474A;
    --text_number: #EAF5FB;

    /* Opacityカラー */
    --opacity: #ffffff;

    /* lineカラー */
    --line-white-blue: #F3FBFF;
    --line-blue: #98C0F4;
    --line-dark-blue: #89B7F3;
    --line-gray: #D9D9D9;
}


/* 使用webフォント
-------------------------------------------------------------------------- */
/* 本文 Noto Sans JP ／ 見出し・キャッチコピー Noto Serif JP（.notoserif で切り替える） */


/* 初期設定
-------------------------------------------------------------------------- */
html {
    scroll-behavior: smooth;
    overflow: scroll;
    font-size: 62.5%;
}

body {
    font-family: "Noto Sans JP", "Hiragino Sans", "Yu Gothic", sans-serif;
    font-size: 1.6rem;
    font-weight: normal;
    font-style: normal;
    background-color: var(--bg_white);
    color: var(--text_main);
}

/* 最終行に1〜2文字だけ残るのを防ぐ。語をひとかたまりにする */
.-nowrap {
    display: inline-block;
}

a {
    text-decoration: none;
    color: inherit;
}

p {
    font-size: 1.6rem;
    font-weight: normal;
}

/* 画像は必ず3点セットで指定する */
img {
    width: 100%;
    height: auto;
    object-fit: cover;
}


/* 共通部分
-------------------------------------------------------------------------- */
/* ---------- フォント  ---------- */
.notoserif {
    font-family: "Noto Serif JP", "Hiragino Mincho ProN", serif;
}

/* ---------- インナー ---------- */
/* 横幅と左右余白はここに集約する。各セクションで個別に指定しない */
.inner {
    width: 100%;
    max-width: 1440px;
    margin: 0 auto;
    padding-right: 10rem;
    padding-left: 10rem;
}

@media screen and (max-width: 768px) {
    .inner {
        padding-right: 2rem;
        padding-left: 2rem;
    }
}

/* ---------- タイトル ---------- */
/* 日本語の見出し。下の余白はセクション側で上書きしないこと */
.title {
    margin-bottom: 4rem;
    font-family: "Noto Serif JP", "Hiragino Mincho ProN", serif;
    font-size: 2.4rem;
    font-weight: 500;
    line-height: 1.6;
    letter-spacing: .14em;
    text-align: center;
}

.sub__title {
    display: block;
    margin-bottom: .8rem;
    padding-bottom: 0;
    color: var(--text_sub-en);
    font-family: "Noto Sans JP", sans-serif;
    font-size: 2rem;
    font-weight: 700;
    line-height: 1.45;
    letter-spacing: .075em;
}

.sub__title::after {
    display: block;
    width: 15.4rem;
    height: 2px;
    margin: 0 auto;
    background-color: var(--line-blue);
    content: "";
}

@media screen and (max-width: 768px) {
    .title {
        margin-bottom: 2rem;
        font-size: 1.6rem;
    }

    .sub__title {
        margin-bottom: 1.6rem;
        font-size: 1.6rem;
    }
}

/* ---------- ページ内リンクの着地位置 ---------- */
/* 着地位置。ヘッダー196px＋fadeinの60pxぶん手前で止める */
main section[id] {
    scroll-margin-top: min(25.6rem, 17.778vw);
}

@media screen and (max-width: 768px) {
    main section[id] {
        scroll-margin-top: 14rem;
    }
}

/* ---------- 背景 ---------- */
.-bg-blue {
    background-color: var(--bg_blue);
}

.-bg-white-blue {
    background-color: var(--bg_white-blue);
}

.-bg-white {
    background-color: var(--bg_white);
}

/* ---------- section上下余白 ---------- */
.-section-space {
    padding-top: 8rem;
    padding-bottom: 8rem;
}

@media screen and (max-width: 768px) {
    .-section-space {
        padding-top: 4rem;
        padding-bottom: 4rem;
    }
}

/* ---------- 文末の語を途中で切らせない ---------- */
.-nowrap {
    white-space: nowrap;
}
/* 確認用：カード本文の文末の改行制限を解除 */
.introduction__item-text .-nowrap {
    white-space: normal;
}

/* ---------- PC SP 表示切り替え ---------- */
.-pc-only {
    display: block;
}

.-sp-only {
    display: none;
}

@media screen and (max-width: 768px) {
    .-pc-only {
        display: none;
    }

    .-sp-only {
        display: block;
    }
}

/* ---------- ボタン ---------- */
.link__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    font-size: 1.6rem;
    font-weight: 700;
    line-height: 1.4;
    text-align: center;
    transition: all 300ms ease-in 0ms;
}

.link__btn img {
    width: 2.2rem;
    flex-shrink: 0;
}

.link__btn--reserve {
    padding: 1.6rem 2.4rem;
    background-color: var(--mainColor_blue);
    color: var(--text_fff);
    border: solid 1px var(--mainColor_blue);
}

.link__btn--reserve:hover {
    background-color: var(--bg_white);
    color: var(--mainColor_blue);
}

.link__btn--line {
    padding: 1.8rem 4rem;
    border-radius: 100px;
    background-color: var(--bg_line);
    color: var(--text_fff);
    border: solid 1px var(--bg_line);
}

.link__btn--tel {
    padding: 1.8rem 4rem;
    border-radius: 100px;
    background-color: var(--line-dark-blue);
    color: var(--text_fff);
    border: solid 1px var(--line-dark-blue);
}

/* ホバーは黒10%の膜を重ねる。背景色の差し替えはしない */
.link__btn--line,
.link__btn--tel {
    position: relative;
}

.link__btn--line::after,
.link__btn--tel::after {
    position: absolute;
    inset: -1px; /* 枠線の1pxまで覆う。0だと枠線だけ元の色で残る */
    border-radius: inherit;
    background-color: var(--bg_overlay);
    opacity: 0;
    transition: opacity 300ms ease-in 0ms;
    content: "";
}

.link__btn--line:hover::after,
.link__btn--tel:hover::after {
    opacity: 1;
}

.link__btn--outline {
    padding: 1.4rem 3rem;
    border-radius: 100px;
    background-color: var(--bg_white);
    color: var(--text_main);
    border: solid 1px var(--text_main);
}

.link__btn--outline:hover {
    background-color: var(--text_main);
    color: var(--text_fff);
}

@media screen and (max-width: 768px) {
    .link__btn {
        font-size: 1.5rem;
    }

    .link__btn--line,
    .link__btn--tel {
        width: 100%;
        max-width: 33.5rem;
    }
}


/* アニメーション
-------------------------------------------------------------------------- */
/* ---------- スクロールでフェードイン ---------- */
.fadein {
    opacity: 0;
    transform: translateY(60px);
    transition: 1s;
}

.fadein.is-show {
    opacity: 1;
    transform: translateY(0);
}

/* ---------- 端末側で動きを減らす設定にしている場合 ---------- */
@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }

    .fadein {
        opacity: 1;
        transform: none;
        transition: none;
    }

    .about__slider-list {
        animation: none;
    }
}

/* ---------- 電話番号のリンク ---------- */
/* 768px以上は発信しない（JSで止めている）ため、押せるようには見せない */
@media screen and (min-width: 768px) {
    a[href^="tel:"] {
        cursor: default;
    }

    /* 押しても発信しないので、ホバーの反応もなくす（先方指示）。
       上の .link__btn--tel:hover::after（詳細度0,2,1）と同じ詳細度のため、
       ソース順で後ろにあるこちらが勝つ。LINEボタンのホバーは残す */
    .link__btn--tel:hover::after {
        opacity: 0;
    }
}


/* ____________________________
TOPページ
ここから
___________________________ */

/* ヘッダー
-------------------------------------------------------------------------- */
/* 最初から fixed にする。途中で切り替えると位置が飛ぶ */
.header {
    position: fixed;
    top: 0;
    right: 0;
    left: 0;
    z-index: 10;
    padding-top: min(3.7rem, 2.57vw);
    padding-bottom: 2rem;
    transition: all 300ms ease-in 0ms;
}

/* stretch でロゴの列と高さを揃える。gapの数値で位置を合わせないこと */
.header__wrap {
    display: flex;
    align-items: stretch;
    justify-content: space-between;
    gap: 2rem;
}

/* ---------- ロゴ ---------- */
/* 1440pxはデザインの値。それより狭いと min() で画面幅に比例（420px → 29.167vw） */
.header__logo {
    width: 100%;
    max-width: min(42rem, 29.167vw);
    flex-shrink: 0;
}

/* 窓の高さが低いと、メインビジュアルの写真が上下に大きく切り取られ（1440×700で277px）、
   object-position: center 55% のぶん代表の顔が上がってキャッチコピーに重なる。
   その条件のときだけロゴを小さくして、キャッチコピーの下端をご予約ボタンの下端に合わせる（先方指示）。
   820pxは実測の境目。810px以下で切り取り量が92pxを超え、重なりが出始める。
   これは横幅ではなく「窓の高さ」が条件なので、5章の横幅のブレークポイントの表には足していない。
   15.96vw は 1280pxで204px・1366pxで218px。いずれも現在の約54%で、
   ロゴ下端＋間隔6px＋文字20pxがボタンの下端にちょうど収まる大きさ */
@media screen and (min-width: 1025px) and (max-height: 820px) {
    .header__logo {
        max-width: min(21rem, 15.96vw);
    }
}

.header__logo-link {
    position: relative;
    display: block;
}

.header__logo-img {
    display: block;
    transition: opacity 300ms ease-in 0ms;
}

.header__logo-img--black {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    opacity: 0;
}

.header__logo-text {
    display: block;
    margin-top: .6rem;
    color: var(--text_fff);
    font-size: min(1.5rem, 1.042vw);
    font-weight: 700;
    line-height: 1.5;
    letter-spacing: .175em;
    white-space: nowrap;
}

/* ---------- 右側のまとまり ---------- */
/* space-between でSNSの行を上端・ナビの行を下端へ。gapの数値で合わせないこと */
.header__body {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: space-between;
    gap: 1.6rem;
}

.header__contact {
    display: flex;
    align-items: center;
}

/* ---------- SNSアイコン ---------- */
.header__sns {
    display: flex;
    align-items: center;
    gap: min(3.4rem, 2.362vw);
    margin-right: min(4rem, 2.778vw);
}

.header__sns-item {
    width: min(4rem, 2.778vw);
}

.header__sns-item a {
    display: block;
}

/* Instagramはホバーで変化させない。LINEだけ少し暗くする。*/
.header__sns-item--line a {
    transition: filter 300ms ease-in 0ms;
}

.header__sns-item--line a:hover {
    filter: brightness(.9);
}

/* ---------- 営業時間・電話番号 ---------- */
.header__info {
    margin-right: min(3.2rem, 2.223vw);
    padding-bottom: .6rem;
    color: var(--text_fff);
    text-align: right;
}

.header__hours {
    padding-top: .3rem;
    padding-right: .5rem;
    font-size: min(1.5rem, 1.042vw);
    line-height: 1.6;
    letter-spacing: .12em;
}

.header__tel {
    margin-top: .3rem;
    font-size: min(2.4rem, 1.667vw);
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: .05em;
}

.header__tel a {
    display: flex;
    align-items: center;
    gap: .6rem;
}

.header__tel-icon {
    position: relative;
    display: block;
    flex-shrink: 0;
    width: min(3.2rem, 2.223vw);
    margin-top: .6rem;
    margin-left: -.4rem;
}

.header__tel-img {
    display: block;
    width: 100%;
    transition: opacity 300ms ease-in 0ms;
}

.header__tel-img--black {
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0;
}

/* ---------- 予約ボタン ---------- */
.header__reserve-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: min(1.5rem, 1.042vw);
    height: min(8.9rem, 6.181vw);
    padding: 0 min(1.5rem, 1.042vw) 0 min(2.3rem, 1.598vw);
    background-color: var(--mainColor_blue);
    border: solid 1px var(--mainColor_blue);
    color: var(--text_fff);
    font-size: min(1.5rem, 1.042vw);
    font-weight: 700;
    letter-spacing: .15em;
    transition: all 300ms ease-in 0ms;
    border-radius: 9px;
}

.header__reserve-link img {
    width: min(3.4rem, 2.362vw);
    flex-shrink: 0;
}

/* ホバーは背景を薄くする。枠線の色も一緒に変えること */
.header__reserve-link:hover {
    background-color: var(--mainColor_blue-light);
    border-color: var(--mainColor_blue-light);
}

/* ---------- ナビゲーション ---------- */
/* PCは追従時のみ表示。display ではなく高さと透明度で出す */
.header__nav {
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    transition: max-height 300ms ease-in 0ms, opacity 300ms ease-in 0ms;
}

.header__list--home,
.header__drawer-contact,
.header__drawer-sns {
    display: none;
}

.header__menu {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: min(2.4rem, 1.667vw);
}

/* 文字サイズも画面幅に比例させる。固定するとナビが2行に折り返す */
.header__nav-link {
    font-size: min(1.3rem, .903vw);
    font-weight: 700;
    white-space: nowrap;
    transition: all 300ms ease-in 0ms;
}

.header__nav-link:hover {
    color: var(--text_sub-en);
}

/* ---------- ハンバーガーボタン ---------- */
.header__toggle {
    display: none;
}

/* ---------- 追従状態 ---------- */
/* 追従時に変えるのは色とナビの表示だけ。大きさと余白は変えない */
.header.is-fixed {
    background-color: var(--bg_white);
    box-shadow: 0 2px 8px rgba(41, 45, 50, .08);
}

.header.is-fixed .header__logo-img--white {
    opacity: 0;
}

.header.is-fixed .header__logo-img--black {
    opacity: 1;
}

.header.is-fixed .header__tel-img--white {
    opacity: 0;
}

.header.is-fixed .header__tel-img--black {
    opacity: 1;
}

.header.is-fixed .header__logo-text,
.header.is-fixed .header__info {
    color: var(--text_main);
}

.header.is-fixed .header__nav {
    max-height: 4rem;
    opacity: 1;
}


/* メインビジュアル
-------------------------------------------------------------------------- */
/* 高さは 100vh − 130px も上限にして、下にABOUTが見えるようにする */
.mv {
    position: relative;
    width: 100%;
    height: min(58.82vw, 84.7rem, max(50rem, calc(100vh - 13rem)));
    overflow: hidden;
}

.mv__img {
    position: absolute;
    top: 0;
    left: 50%;
    width: 113.7%;
    height: 100%;
    overflow: hidden;
    border-bottom-right-radius: 50% 42.8%;
    border-bottom-left-radius: 50% 42.8%;
    transform: translateX(-50%);
}

.mv__img picture {
    display: block;
    width: 100%;
    height: 100%;
}

/* 枠を113.7%に広げているので、写真は87.95%で画面幅に戻す */
.mv__img img {
    width: 87.95%;
    height: 100%;
    margin-right: auto;
    margin-left: auto;
    object-fit: cover;
    object-position: center 55%;
}

/* ---------- キャッチコピー ---------- */
.mv__inner {
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    height: 100%;
}

.mv__catch {
    position: absolute;
    top: 33.67%;
    left: 52.23%;
}

.mv__catch-text {
    font-size: min(4.8rem, 3.334vw);
    font-weight: 700;
    line-height: min(8.7rem, 6.042vw);
    letter-spacing: .123em;
}

.mv__catch-name {
    margin-top: min(5.2rem, 3.612vw);
    padding-left: min(1rem, 0.695vw);
    font-family: "Noto Serif JP", "Hiragino Mincho ProN", serif;
    font-size: min(2.4rem, 1.667vw);
    letter-spacing: .12em;
    font-weight: 700;
}

/* ---------- スマホ（500px以下） ---------- */
/* SP専用画像が縦長のため500pxで切り替える。500pxはここだけの例外 */
@media screen and (max-width: 500px) {
    /* SP画像はカーブとフェードを含む透過WebP。JPGに変換しないこと */
    .mv {
        height: auto;
        max-height: none;
    }

    .mv__img {
        position: static;
        width: 100%;
        height: auto;
        border-bottom-right-radius: 0;
        border-bottom-left-radius: 0;
        transform: none;
    }

    .mv__img img {
        width: 100%;
        height: auto;
        aspect-ratio: 750 / 1346;
        object-fit: contain;
        object-position: center;
    }

    /* right は 2rem。.mv__inner は絶対配置の基準がパディングの外側になる */
    .mv__catch {
        top: 15%;
        right: 2rem;
        left: auto;
        width: 21rem;
        text-align: left;
    }

    .mv__catch-text {
        font-size: 1.6rem;
        line-height: 2.4rem;
    }

    /* iPhoneのSafariで「ー」が落ちるため、字間を詰めて1行に固定する */
    .mv__catch-name {
        margin-top: 1.2rem;
        padding-left: 0;
        font-size: 1.3rem;
        line-height: 2.4rem;
        letter-spacing: .07em;
        text-align: right;
    }

    .mv__nowrap {
        white-space: nowrap;
    }
}


/* ヘッダー　1024px以下（ハンバーガーメニューに切り替える）
-------------------------------------------------------------------------- */
@media screen and (max-width: 1024px) {
    .header {
        padding-top: 1.2rem;
        padding-bottom: 1.2rem;
    }

    .header__wrap {
        align-items: center;
    }

    .header__logo,
    .header.is-fixed .header__logo {
        max-width: 20rem;
    }

    .header__logo-text,
    .header.is-fixed .header__logo-text {
        margin-top: .4rem;
        font-size: 1rem;
        letter-spacing: 0;
    }

    .header__body {
        flex-direction: row;
        align-items: center;
        gap: 1.2rem;
        margin-left: auto;
    }

    .header__sns-item--instagram,
    .header__info,
    .header__reserve {
        display: none;
    }

    .header__sns,
    .header.is-fixed .header__sns {
        margin-right: 0;
    }

    /* LINEアイコンとハンバーガーは同じ40×40に揃える（デザインどおり） */
    .header__sns-item--line,
    .header.is-fixed .header__sns-item--line {
        width: 4rem;
    }

    /* ドロワーより前面に出す。下げると開いたメニューを閉じられない */
    .header__logo,
    .header__contact,
    .header__toggle {
        position: relative;
        z-index: 6;
    }

    /* ---------- ハンバーガーボタン ---------- */
    /* LINEアイコンと同じ40×40。線は幅20px・太さ2px・間隔6px（デザイン実測） */
    .header__toggle {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: .6rem;
        width: 4rem;
        height: 4rem;
        border-radius: 8px;
        background-color: var(--mainColor_blue);
        flex-shrink: 0;
    }

    .header__toggle-line {
        display: block;
        width: 2rem;
        height: 2px;
        background-color: var(--text_fff);
        transition: all 300ms ease-in 0ms;
    }

    .header__toggle-text {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip-path: inset(50%);
    }

    .header__toggle[aria-expanded="true"] .header__toggle-line:nth-child(1) {
        transform: translateY(8px) rotate(45deg);
    }

    .header__toggle[aria-expanded="true"] .header__toggle-line:nth-child(2) {
        opacity: 0;
    }

    .header__toggle[aria-expanded="true"] .header__toggle-line:nth-child(3) {
        transform: translateY(-8px) rotate(-45deg);
    }

    /* ---------- ドロワーメニュー ---------- */
    /* 左右のパディングは .inner と同じ値にする（absolute のため .inner が効かない） */
    .header__drawer {
        position: absolute;
        top: 100%;
        right: 0;
        left: 0;
        z-index: 5;
        display: none;
        /* 引く値はヘッダーの実寸95px。dvh 非対応ブラウザ用に vh も先に書く */
        max-height: calc(100vh - 9.5rem);
        max-height: calc(100dvh - 9.5rem);
        padding: 2rem 10rem 2.4rem;
        overflow-y: auto;
        background-color: var(--bg_white);
    }

    body.is-drawerActive .header {
        position: fixed;
        top: 0;
        background-color: var(--bg_white);
    }

    body.is-drawerActive {
        overflow: hidden;
    }

    body.is-drawerActive .header__logo-img--white {
        opacity: 0;
    }

    body.is-drawerActive .header__logo-img--black {
        opacity: 1;
    }

    body.is-drawerActive .header__logo-text {
        color: var(--text_main);
    }

    /* ---------- メニューの一覧 ---------- */
    .header__nav {
        display: block;
        max-height: none;
        overflow: hidden;
        opacity: 1;
        border: solid 1px var(--line-dark-blue);
        border-radius: 2.4rem;
    }

    /* 追従時のPC指定（0,3,0）を打ち消すため、同じ詳細度で書き直す */
    .header.is-fixed .header__nav {
        max-height: none;
        opacity: 1;
    }

    .header__menu {
        flex-direction: column;
        align-items: stretch;
        gap: 0;
    }

    .header__list + .header__list {
        background-image: linear-gradient(var(--line-dark-blue), var(--line-dark-blue));
        background-position: top left;
        background-size: 100% 1px;
        background-repeat: no-repeat;
    }

    .header__list--home {
        display: block;
    }

    .header__nav-link {
        display: flex;
        align-items: center;
        justify-content: center;
        height: 4rem;
        font-size: 1.6rem;
        letter-spacing: .1em;
    }

    /* ---------- 予約の案内 ---------- */
    .header__drawer-contact {
        display: block;
        margin-top: 2.4rem;
        padding: 1rem;
        border-radius: 2.4rem;
        background-color: var(--bg_white-blue);
        text-align: center;
    }

    .header__drawer-title {
        margin-bottom: 1.2rem;
        font-size: 1.8rem;
        font-weight: 700;
        line-height: 1.5;
        letter-spacing: .1em;
    }

    .header__drawer-title--tel {
        margin-top: 3.2rem;
    }

    .header__drawer-text {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 2.4rem;
        margin-bottom: 1.2rem;
        font-size: 1.5rem;
        line-height: 1.5;
        letter-spacing: .1em;
    }

    .header__drawer-text::before,
    .header__drawer-text::after {
        width: 1px;
        height: 2rem;
        background-color: var(--text_main);
        content: "";
    }

    .header__drawer-text::before {
        transform: rotate(-25deg);
    }

    .header__drawer-text::after {
        transform: rotate(25deg);
    }

    .header__drawer-text--plain::before,
    .header__drawer-text--plain::after {
        content: none;
    }

    /* 400pxで頭打ちにする。width: 100% だけだとタブレット幅で広すぎる */
    .header__drawer-btn .link__btn {
        gap: 1.6rem;
        width: 100%;
        max-width: 40rem;
        height: 6rem;
        padding: 0;
        font-size: 1.8rem;
    }

    .header__drawer-btn .link__btn img {
        width: 3.6rem;
    }

    /* ---------- SNS ---------- */
    .header__drawer-sns {
        display: flex;
        justify-content: flex-end;
        gap: 1.6rem;
        margin-top: 1.6rem;
    }

    .header__drawer-sns img {
        width: 4.5rem;
        height: 4.5rem;
        object-fit: contain;
    }
}

/* ---------- SP ---------- */
@media screen and (max-width: 768px) {
    .header__drawer {
        padding-right: 2rem;
        padding-left: 2rem;
    }
}


/* 当店について
-------------------------------------------------------------------------- */
.about {
    position: relative;
    z-index: 0;
    padding-top: 8.8rem;
    padding-bottom: 8.8rem;
}

/* ぼかしがフェードインの中に閉じ込められるため、見出しを前面に固定する */
.about__title {
    position: relative;
    z-index: 1;
}

.about__wrap {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 4rem;
    padding-right: 5rem;
    margin-top: 13.6rem;
    margin-bottom: 9.6rem;
}

/* ---------- 左のリード文 ---------- */
.about__lead {
    position: relative;
    flex: 1 1 67rem;
    margin-top: 10rem;
    font-size: 2.8rem;
    font-weight: 500;
    line-height: 1.72;
    letter-spacing: clamp(0em, calc(1.192vw - 12.13px), .18em);
    text-align: center;
}

.about__lead::before {
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: -1;
    width: 64rem;
    height: 56rem;
    transform: translate(-50%, -50%);
    background: var(--bg_glow);
    content: "";
}

/* ---------- 右の説明 ---------- */
.about__content {
    flex: 0 1 48rem;
}

.about__content-title {
    margin-bottom: 4rem;
    padding-left: 1.4rem;
    font-size: 3rem;
    font-weight: 500;
    line-height: 4.3rem;
    letter-spacing: clamp(0em, calc(.5vw - 4.2px), .1em);
    text-align: center;
}

/* text-align: justify は使わない（日本語では字間が極端に開く） */
.about__content-text {
    font-size: 1.5rem;
    line-height: 3.7rem;
}

/* ---------- 施術風景のスライダー ---------- */
.about__slider {
    overflow: hidden;
}

/* 2組並べて1組分流す。間隔は margin-right（gapでは繰り返しがずれる） */
.about__slider-list {
    display: flex;
    width: max-content;
    animation: aboutSliderLoop 60s linear infinite;
}

.about__slider-item {
    width: 24.6vw;
    margin-right: .8rem;
    flex-shrink: 0;
}

.about__slider-item img {
    aspect-ratio: 355 / 243;
    border-radius: 16px;
}

@keyframes aboutSliderLoop {
    0% {
        transform: translateX(0);
    }

    100% {
        transform: translateX(-50%);
    }
}

/* ---------- タブレット・スマホ（1024px以下） ---------- */
@media screen and (max-width: 1024px) {
    .about__wrap {
        flex-direction: column;
        gap: 11.9rem;
        padding-right: 0;
    }

    .about__lead,
    .about__content {
        flex: none;
        width: 100%;
        max-width: 48rem;
        margin-right: auto;
        margin-left: auto;
    }

    .about__lead {
        margin-top: 0;
        font-size: 1.6rem;
        line-height: 3.6rem;
        letter-spacing: .075em;
    }

    .about__lead::before {
        width: 31rem;
        height: 31rem;
    }

    .about__content-title {
        margin-bottom: 1.6rem;
        padding-left: 0;
        font-size: 1.6rem;
        line-height: 3.6rem;
        letter-spacing: .02em;
    }

    .about__content-text {
        font-size: 1.6rem;
        letter-spacing: .02em;
    }
}

/* ---------- SP ---------- */
@media screen and (max-width: 768px) {
    .about {
        padding-top: 6rem;
        padding-bottom: 6rem;
    }

    .about__wrap {
        margin-top: 15rem;
        margin-bottom: 6rem;
    }

    .about__slider-item {
        width: 60vw;
    }
}


/* 当店ではこんな施術をさせて頂きます
-------------------------------------------------------------------------- */
.introduction__title {
    margin-bottom: 6.4rem;
    font-size: clamp(2.2rem, 2.22vw, 3.2rem);
    letter-spacing: .25em;
}

.introduction {
    padding-top: 8rem;
    padding-bottom: 8rem;
}

/* ---------- 1件ずつのまとまり ---------- */
.introduction__item {
    display: flex;
    align-items: flex-start;
}

.introduction__item + .introduction__item {
    margin-top: 8rem;
}

.introduction__item--reverse {
    flex-direction: row-reverse;
}

.introduction__item--clone {
    display: none;
}

.introduction__img {
    width: 45.65%;
    flex-shrink: 0;
}

.introduction__img img {
    aspect-ratio: 1132 / 802;
    border-radius: 3rem;
}

/* ---------- 白いカード ---------- */
/* 重なりは left でずらす。マイナスマージンは使わない。高さは指定しない */
.introduction__body {
    position: relative;
    z-index: 1;
    left: -3.23%;
    width: 44.35%;
    margin-top: 11.61%;
    padding: clamp(2.4rem, 3.33vw, 4.8rem) clamp(2.4rem, 3.33vw, 4.8rem) clamp(2.8rem, 3.75vw, 5.4rem) clamp(2.4rem, 2.5vw, 3.6rem);
    border-radius: 3rem;
    background-color: var(--bg_white);
}

.introduction__item--reverse .introduction__body {
    left: 3.23%;
}

/* ---------- 番号 ---------- */
.introduction__number {
    position: absolute;
    bottom: 100%;
    left: 10rem;
    margin-bottom: 1.2rem;
    color: var(--text_number);
    font-family: "Noto Sans JP", sans-serif;
    font-size: 11.6rem;
    font-weight: 700;
    line-height: 1;
}

.introduction__item--reverse .introduction__number {
    right: 10rem;
    left: auto;
}

/* ---------- カードの見出し ---------- */
.introduction__item-title {
    position: relative;
    margin-bottom: 3.3rem;
    padding-left: 2.2rem;
    color: var(--text_heading);
    font-family: "Noto Serif JP", "Hiragino Mincho ProN", serif;
    font-size: clamp(1.7rem, 1.46vw, 2.1rem);
    font-weight: 500;
    line-height: 1.5;
    /* .2em では「へ」だけが2行目に落ちるため .1em にする（先方指示） */
    letter-spacing: .1em;
}

/* 「動ける身体へ」をひとかたまりにして、語の途中で切れないようにする */
.introduction__nowrap {
    white-space: nowrap;
}

.introduction__item-title::before {
    position: absolute;
    top: .1em;
    bottom: .1em;
    left: 0;
    width: 4px;
    background-color: var(--text_heading);
    content: "";
}

.introduction__item-text {
    font-size: 1.5rem;
    line-height: 2.07;
    letter-spacing: min(.2em, .21vw);
}

/* ---------- 矢印 ---------- */
.introduction__arrow {
    display: none;
}

/* ---------- 900px以下 ---------- */
@media screen and (max-width: 900px) {
    .introduction__img {
        width: 50%;
    }

    .introduction__body {
        left: -8%;
        width: 58%;
        margin-top: 10%;
    }

    .introduction__item--reverse .introduction__body {
        left: 8%;
    }

    .introduction__number {
        left: 8rem;
        font-size: 8rem;
    }

    .introduction__item--reverse .introduction__number {
        right: 8rem;
    }
}

/* ---------- SP ---------- */
@media screen and (max-width: 768px) {
    .introduction {
        padding-top: 4rem;
        padding-bottom: 4.3rem;
        border-radius: 2.7rem;
    }

    .introduction__title {
        margin-bottom: 1.7rem;
        font-size: clamp(1.5rem, 2.344vw, 1.8rem);
        letter-spacing: .175em;
    }

    .introduction__slider {
        position: relative;
    }

    .introduction__list {
        display: flex;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        scrollbar-width: none;
    }

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

    .introduction__item,
    .introduction__item--reverse {
        position: relative;
        flex: 0 0 100%;
        flex-direction: column;
        align-items: center;
        padding-top: 3rem;
        scroll-snap-align: center;
        scroll-snap-stop: always;
    }

    .introduction__item--clone {
        display: flex;
    }

    .introduction__item + .introduction__item {
        margin-top: 0;
    }

    .introduction__item.fadein {
        opacity: 1;
        transform: none;
        transition: none;
    }

    .introduction__img {
        width: 74.6%;
    }

    .introduction__img img {
        border-radius: 3.1rem;
    }

    .introduction__body,
    .introduction__item--reverse .introduction__body {
        position: static;
        left: auto;
        width: 74.6%;
        margin: 2rem 0 0;
        padding: 2.8rem 1.6rem 1.3rem 2.8rem;
        border-radius: 3rem;
    }

    .introduction__number,
    .introduction__item--reverse .introduction__number {
        top: 0;
        right: auto;
        bottom: auto;
        left: .6rem;
        margin-bottom: 0;
        font-size: 2.8rem;
        letter-spacing: -.07em;
    }

    .introduction__item-title {
        margin-bottom: 2rem;
        padding-left: .3rem;
        padding-bottom: .6rem;
        font-size: 1.6rem;
        line-height: 1.575;
        letter-spacing: .05em;
    }

    .introduction__item-title::before {
        left: -1.3rem;
        width: 3px;
    }

    .introduction__item-text {
        line-height: 2;
        letter-spacing: .05em;
    }

    /* ---------- 矢印 ---------- */
    .introduction__arrow {
        position: absolute;
        top: calc(3rem + (100vw - 4rem) * .746 / (1132 / 802) / 2 - .65rem);
        display: block;
        width: 2.8rem;
        height: 2.741rem;
        border-radius: 50%;
        background-color: var(--bg_arrow);
        transform: translateY(-50%);
    }

    .introduction__arrow--prev {
        left: 0;
    }

    .introduction__arrow--next {
        right: 0;
    }

    /* 三角形の中央寄せ。にじむので必ず整数pxでずらす */
    .introduction__arrow::before {
        position: absolute;
        top: 50%;
        left: 50%;
        width: 1.2rem;
        height: 1.4rem;
        background-color: var(--colors_arrow);
        content: "";
    }

    .introduction__arrow--prev::before {
        clip-path: polygon(0 50%, 100% 0, 100% 100%);
        transform: translate(calc(-50% - 2px), -50%);
    }

    .introduction__arrow--next::before {
        clip-path: polygon(0 0, 100% 50%, 0 100%);
        transform: translate(calc(-50% + 2px), -50%);
    }
}


/* 代表紹介
-------------------------------------------------------------------------- */
/* ---------- セクションの上余白 ---------- */
.profile {
    padding-top: 8rem;
}

/* ---------- 冒頭の一文 ---------- */
.profile__lead {
    margin-bottom: 8rem;
    font-size: clamp(2rem, 2.22vw, 3.2rem);
    line-height: 1.5625;
    letter-spacing: .1em;
    text-align: center;
}


/* ---------- 名前・本文・写真 ---------- */
.profile__wrap {
    display: flex;
    align-items: stretch;
    justify-content: space-between;
    gap: 2.4rem;
}

.profile__content {
    flex: 0 1 56.5rem;
}

.profile__img {
    flex: 0 1 62rem;
}

.profile__img img {
    height: 100%;
    border-radius: 3rem;
}

.profile__person {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 1.6rem 4rem;
    margin-bottom: 4rem;
    padding-left: 5rem;
}

.profile__name {
    margin-top: .8rem;
    font-size: 3.2rem;
    font-weight: 700;
    line-height: 3.6rem;
    letter-spacing: .08em;
}

.profile__name,
.profile__origin {
    white-space: nowrap;
}

.profile__origin {
    font-size: 1.6rem;
    font-weight: 700;
    line-height: 2.7rem;
    letter-spacing: .12em;
}

.profile__text {
    font-size: 1.6rem;
    line-height: 3.1rem;
    letter-spacing: .1em;
    line-break: strict;
}

.profile__text + .profile__text {
    margin-top: 3.1rem;
}

.profile__em {
    color: var(--text_sub-en);
    font-style: normal;
    font-weight: 700;
}

.profile__nowrap {
    white-space: nowrap;
}

/* ---------- 学びの一文 ---------- */
.profile__study {
    margin-top: 10rem;
    margin-bottom: 4rem;
    font-size: clamp(1.6rem, 1.39vw, 2rem);
    line-height: 1.6;
    letter-spacing: .1em;
    text-align: center;
}

/* ---------- 認定資格 ---------- */
.profile__license {
    padding: 2rem 4rem 4rem;
    border-radius: 3rem;
    background-color: var(--bg_white-blue);
}

.profile__license-title {
    margin-bottom: 2rem;
    font-size: 2.4rem;
    font-weight: 600;
    line-height: 1.5;
    letter-spacing: .1em;
}

.profile__license-item {
    font-size: 1.6rem;
    line-height: 3rem;
    letter-spacing: .13em;
}

.profile__license-item::before {
    content: "・";
}

/* ---------- 1150px以下 ---------- */
/* 名前と出身地が並びきらなくなる幅。1150pxはここだけの例外 */
@media screen and (max-width: 1150px) {
    .profile__person {
        display: block;
        padding-left: 0;
    }

    .profile__name {
        margin-top: 0;
        margin-bottom: .8rem;
    }
}

/* ---------- 900px以下 ---------- */
@media screen and (max-width: 900px) {
    .profile__wrap {
        flex-direction: column;
        gap: 1.6rem;
        max-width: 60rem;
        margin-right: auto;
        margin-left: auto;
    }

    .profile__content {
        flex: none;
    }

    .profile__img {
        flex: none;
        order: -1;
        width: 100%;
    }

    .profile__img img {
        height: auto;
        aspect-ratio: 335 / 359;
        border-radius: 3rem;
    }

    .profile__person {
        display: block;
        width: fit-content;
        margin: 0 auto 1.6rem;
        padding-left: 0;
    }

    .profile__name {
        text-align: center;
    }

    .profile__study,
    .profile__license {
        max-width: 60rem;
        margin-right: auto;
        margin-left: auto;
    }

    .profile__study-br {
        display: none;
    }
}

/* ---------- SP ---------- */
@media screen and (max-width: 768px) {
    .profile {
        padding-top: 4rem;
        padding-bottom: 4rem;
    }

    .profile__lead {
        margin-bottom: 4.8rem;
        font-size: 1.6rem;
        line-height: 3.05rem;
        letter-spacing: .06em;
    }

    .profile__lead-br,
    .profile__study-br {
        display: none;
    }

    .profile__name,
    .profile__origin {
        margin-top: 0;
        font-size: 1.6rem;
        line-height: 3.25rem;
        letter-spacing: .12em;
    }

    .profile__name {
        letter-spacing: .08em;
    }

    .profile__study {
        margin-top: 5.4rem;
        margin-bottom: 4rem;
        font-size: 1.5rem;
        line-height: 3.2rem;
    }

    .profile__license {
        padding: 4rem 2rem 3rem 3.2rem;
    }

    .profile__license-title {
        margin-bottom: 2.4rem;
        font-size: 1.6rem;
    }
}

@media screen and (min-width: 441px) {
    .profile__lead-br {
        display: inline;
    }
}


/* 料金案内
-------------------------------------------------------------------------- */
/* ---------- セクションの上下余白 ---------- */
.price {
    padding-top: 0rem;
    padding-bottom: 8rem;
}


.price__lead {
    margin-bottom: 3.2rem;
    font-size: 2.4rem;
    font-weight: 600;
    line-height: 1.6;
    letter-spacing: .1em;
    text-align: center;
}

.price__lead-text {
    font-size: 1.6rem;
    line-height: 3rem;
    letter-spacing: .1em;
    text-align: center;
}

.price__flow-wrap {
    width: fit-content;
    margin: 4rem auto 0;
}

.price__flow {
    padding: 0 1.6rem;
    background-color: var(--bg_white-blue);
    font-size: 2rem;
    font-weight: 600;
    line-height: 3.2rem;
    letter-spacing: .1em;
    text-align: center;
}

.price__flow-item {
    white-space: nowrap;
}

.price__flow-item:not(:last-child)::after {
    content: "→";
}

.price__note {
    margin-top: 4rem;
    font-size: 1.6rem;
    line-height: 3rem;
    letter-spacing: .1em;
}

/* ---------- メニューの繰り返し ---------- */
.price__list {
    margin-top: 8rem;
}

.price__item {
    display: flex;
    align-items: stretch;
    justify-content: space-between;
    gap: 4rem;
}

.price__item + .price__item {
    margin-top: 8rem;
}

/* absolute にして、写真の縦横比が列の高さを決めないようにする */
.price__img {
    position: relative;
    flex: 0 1 60rem;
}

.price__img img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    aspect-ratio: 600 / 440;
    object-fit: cover;
    border-radius: 3rem;
}

.price__body {
    flex: 0 1 60rem;
}

.price__menu + .price__menu {
    margin-top: 8.8rem;
}

.price__menu-title {
    display: flex;
    align-items: center;
    gap: 1.6rem;
    margin-bottom: 2rem;
    font-size: 2.4rem;
    font-weight: 500;
    line-height: 3.2rem;
    letter-spacing: .05em;
}

.price__menu-title::before {
    flex-shrink: 0;
    width: 4px;
    height: 3.2rem;
    background-color: var(--text_heading);
    content: "";
}

.price__menu-text {
    font-size: 1.6rem;
    line-height: 3.5rem;
    letter-spacing: .04em;
    line-break: strict;
}

/* ---------- 料金表 ---------- */
.price__table {
    width: 100%;
}

.price__table th,
.price__table td {
    font-size: 1.6rem;
    font-weight: 700;
    line-height: 3.5rem;
    letter-spacing: .05em;
}

.price__box .price__table th,
.price__box .price__table td {
    line-height: 4.4rem;
}

.price__table td {
    white-space: nowrap;
}

.price__table th {
    width: 100%;
    font-weight: 400;
    text-align: left;
}

.price__table--visit th,
.price__table--distance th,
.price__table--ask th {
    white-space: nowrap;
}

.price__time,
.price__fee {
    padding-left: 2rem;
    text-align: left;
}

.price__tax {
    padding-left: 1.6rem;
    font-weight: 400;
    font-feature-settings: "halt" 1;
}

.price__caption {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
}

/* ---------- 水色のボックス ---------- */
.price__box {
    margin-top: 4.8rem;
    padding: 1.6rem 2.4rem;
    border-radius: 2rem;
    background-color: var(--bg_white-blue);
}

.price__badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 10rem;
    height: 2.8rem;
    margin-right: 1.6rem;
    background-color: var(--mainColor_blue);
    color: var(--text_fff);
    font-size: 1.4rem;
    font-weight: 400;
    letter-spacing: .05em;
}

.price__box-title {
    margin-bottom: 1.2rem;
    font-size: 2.4rem;
    font-weight: 500;
    line-height: 3.5rem;
    letter-spacing: .05em;
}

.price__box--fee {
    display: flex;
    flex-direction: column;
    gap: 1.2rem;
    margin-top: 1.6rem;
}

.price__box--fee .price__box-title {
    margin-bottom: 0;
    font-size: 2rem;
    text-align: center;
}


/* ---------- 出張コンディショニングの料金表 ---------- */
.price__table--visit {
    width: auto;
    margin: 1.6rem auto 0;
}

.price__table--visit th {
    width: auto;
    font-weight: 700;
}

.price__table--visit .price__fee {
    padding-left: 7.2rem;
    text-align: left;
}

.price__table--visit .price__plus {
    padding-left: 2.4rem;
    text-align: center;
}

.price__table--visit .price__fee + .price__plus + .price__fee {
    padding-left: 3.2rem;
}

.price__table--visit .price__tax {
    padding-left: .6rem;
}

/* ---------- 要相談だけの料金表 ---------- */
.price__table--ask {
    width: auto;
    margin: 1.6rem auto 0;
}

.price__table--ask th {
    width: auto;
    font-weight: 700;
}

.price__table--ask .price__fee {
    padding-left: 5.6rem;
    text-align: left;
}

/* ---------- 出張料金の注意書き ---------- */
.price__caution {
    margin-top: .8rem;
    color: var(--text_caution);
    font-size: 1.6rem;
    line-height: 3.1rem;
    letter-spacing: .02em;
}

/* ---------- 1025〜1400px ---------- */
/* この表だけ1397pxで項目名が折り返すため、SPと同じ組み方にする。1400pxはここだけの例外 */
@media screen and (max-width: 1400px) and (min-width: 1025px) {
    .price__table--main,
    .price__table--main tbody {
        display: block;
    }

    .price__table--main tr {
        display: flex;
        flex-wrap: wrap;
        justify-content: flex-end;
    }

    .price__box .price__table--main th,
    .price__box .price__table--main td {
        line-height: 2.8rem;
    }

    .price__table--main th {
        width: 100%;
    }

    .price__table--main .price__time {
        padding-left: 0;
    }

    .price__table--main .price__fee,
    .price__table--main .price__tax {
        padding-left: 1.6rem;
    }
}

/* ---------- タブレット ---------- */
@media screen and (max-width: 1024px) {
    .price__item {
        flex-direction: column;
        gap: 0;
    }

    .price__img {
        position: static;
        flex: none;
        width: 100%;
        max-width: 60rem;
        margin: 0 auto 4rem;
    }

    .price__img img {
        position: static;
        height: auto;
    }

    .price__body {
        flex: none;
        width: 100%;
    }
}

/* ---------- SP ---------- */
@media screen and (max-width: 768px) {
    .price {
        padding-top: 0;
        padding-bottom: 2.4rem;
    }


    .price__lead {
        margin-bottom: 2rem;
        font-size: 1.6rem;
        line-height: 3rem;
    }

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

    .price__flow-wrap {
        width: 100%;
        margin-top: 2rem;
    }

    .price__flow {
        padding: 0 .4rem;
        font-size: 1.6rem;
        line-height: 3rem;
    }

    .price__note {
        margin-top: 2rem;
    }

    .price__list {
        margin-top: 4rem;
    }

    .price__item {
        flex-direction: column;
        gap: 0;
    }

    .price__item + .price__item {
        margin-top: 4rem;
    }

    .price__img {
        flex: none;
        width: 100%;
        max-width: 60rem;
        margin: 0 auto 4rem;
    }

    .price__img img {
        aspect-ratio: 255 / 170;
        border-radius: 2rem;
    }

    .price__body {
        flex: none;
        width: 100%;
    }

    .price__menu {
        display: flex;
        flex-direction: column;
    }

    .price__caution {
        order: 1;
        margin-top: 4rem;
        line-height: 3.2rem;
    }

    .price__menu + .price__menu {
        margin-top: 3.2rem;
    }

    .price__menu-title {
        gap: 1.2rem;
        margin-bottom: 1.6rem;
        font-size: 1.6rem;
        line-height: 2rem;
    }

    .price__menu-title::before {
        height: 2rem;
    }

    .price__menu-text {
        line-height: 3.2rem;
    }

    .price__br {
        display: none;
    }

    .price__table,
    .price__table tbody {
        display: block;
    }

    .price__table tr {
        display: flex;
        flex-wrap: wrap;
        justify-content: flex-end;
    }

    .price__table th,
    .price__table td,
    .price__box .price__table th,
    .price__box .price__table td {
        line-height: 2.8rem;
    }

    .price__table th {
        width: 100%;
    }

    /* 440px以下 */
    @media screen and (max-width: 440px) {
        .price__table tr + tr {
            padding-top: 1rem;
        }
    }


    /* ---------- 581〜768px ---------- */
    /* 580px以上は表組みのまま1行に収める。581pxはここだけの例外 */
    @media screen and (min-width: 581px) {
        .price__table--main {
            display: table;
        }

        .price__table--main tbody {
            display: table-row-group;
        }

        .price__table--main tr {
            display: table-row;
        }

        .price__table--main th {
            width: auto;
        }

        /* SP共通（0,2,0）を打ち消すため、同じ詳細度でソース順の後ろに置く */
        .price__box .price__table--main th,
        .price__box .price__table--main td {
            line-height: 4.4rem;
        }
    }

    .price__time {
        padding-left: 0;
    }

    .price__fee,
    .price__tax {
        padding-left: 1.6rem;
    }

    .price__box {
        margin-top: 4rem;
        padding: .8rem 1.6rem 1.6rem 1rem;
    }

    .price__box-title {
        margin-bottom: 2.8rem;
        font-size: 1.6rem;
        line-height: 2.8rem;
    }

    .price__box--fee {
        flex-direction: column;
        gap: 0;
        margin-top: 3.2rem;
        padding: .8rem 2rem 1.6rem;
    }

    /* PC側（0,2,0）を打ち消すため、同じ詳細度で書く */
    .price__box--fee .price__box-title {
        font-size: 1.6rem;
        line-height: 3.5rem;
    }

    /* 335px（375pxのときのインナー幅）で頭打ちにして中央に置く */
    .price__table--visit {
        width: 100%;
        max-width: 33.5rem;
        margin: 4rem auto 0;
    }

    .price__table--visit tr {
        justify-content: space-between;
    }

    .price__table--visit th,
    .price__table--visit td {
        line-height: 4rem;
    }

    .price__table--visit th {
        width: auto;
    }

    .price__table--visit .price__fee {
        padding-left: 0;
    }

    .price__table--visit .price__plus {
        padding-left: 0;
    }

    .price__table--visit .price__fee + .price__plus + .price__fee {
        padding-left: 0;
    }

    .price__table--ask {
        margin-top: .8rem;
        margin-right: 0;
        margin-left: auto;
    }

    .price__table--ask th {
        width: auto;
    }

    .price__table--ask th,
    .price__table--ask td {
        line-height: 3.2rem;
    }
}

/* ---------- 出張料金の距離の表 ---------- */
/* ★この指定はSPのメディアクエリより後ろに置くこと（詳細度が同じため打ち消される） */
.price__table--distance {
    display: block;
    width: 100%;
}

/* 組と組の間（48px）は組の中（約26〜29px）より広くする。下限24remは1組の実寸 */
.price__table--distance tbody {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(24rem, max-content));
    justify-content: center;
    column-gap: 4.8rem;
}

/* display だけでなく flex-wrap と justify-content も戻すこと */
.price__table--distance tr {
    display: flex;
    flex-wrap: nowrap;
    justify-content: flex-start;
}

/* 項目名の幅をそろえる。消すと金額の頭がずれる */
.price__table--distance th {
    width: auto;
    min-width: 11rem;
    padding-right: 0;
    font-weight: 700;
}

.price__table--distance .price__fee {
    padding-left: 0;
}

@media screen and (max-width: 768px) {
    .price__table--distance th,
    .price__table--distance td {
        line-height: 3.5rem;
    }
}


/* コンディショニング教室
-------------------------------------------------------------------------- */
.lesson {
    padding-top: 2.4rem;
    padding-bottom: 2.4rem;
    border-radius: 3rem;
    background: var(--bg_lesson);
}

.lesson__wrap {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 4rem;
}

.lesson__body {
    padding-top: 6rem;
}

.lesson__title {
    margin-bottom: 4.8rem;
    font-size: clamp(2rem, 2.084vw, 3rem);
    font-weight: 500;
    line-height: 1.7;
    letter-spacing: .05em;
}

.lesson__link {
    font-size: 1.6rem;
    line-height: 1.8;
    letter-spacing: .05em;
}

.lesson__link-item {
    display: inline-flex;
    align-items: center;
    gap: 3.2rem;
    white-space: nowrap;
    transition: all 300ms ease-in 0ms;
}

.lesson__link-item:hover {
    color: var(--mainColor_blue);
}

.lesson__link-item img {
    width: 3.6rem;
    flex-shrink: 0;
}

/* ---------- 写真 ---------- */
.lesson__list {
    display: flex;
    flex: 0 0 64rem;
    gap: 4rem;
}

/* ---------- 1025〜1279px ---------- */
@media screen and (min-width: 1025px) and (max-width: 1279px) {
    .lesson__list {
        flex-basis: 46rem;
    }
}

.lesson__item {
    flex: 0 1 30rem;
}

/* ---------- 1025〜1279px ---------- */
/* この区間だけ写真を小さくして文章に幅を回す。21remより大きいと段ずれが残る。1280pxはここだけの例外 */
@media screen and (min-width: 1025px) and (max-width: 1279px) {
    .lesson__item {
        flex: 0 1 21rem;
    }
}

.lesson__item:nth-child(2) {
    margin-top: 4.8rem;
}

.lesson__item img {
    width: 100%;
    height: auto;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    border-radius: 50%;
}

/* ---------- タブレット ---------- */
@media screen and (max-width: 1024px) {
    .lesson__wrap {
        flex-direction: column;
        gap: 4.8rem;
        max-width: 60rem;
        margin-right: auto;
        margin-left: auto;
    }

    .lesson__body {
        width: 100%;
        padding-top: 0;
        text-align: center;
    }

    .lesson__br {
        display: none;
    }

    /* 1行に収めるため固定する。clamp のままだと1024pxで2行になる */
    .lesson__title {
        margin-bottom: 2.4rem;
        font-size: 1.9rem;
    }

    /* column では 64rem が高さとして効くため none に戻す */
    .lesson__list {
        flex: none;
        gap: 1.5rem;
        width: 100%;
    }

    .lesson__item {
        flex: none;
        width: calc((100% - 1.5rem) / 2);
    }
}

/* ---------- SP ---------- */
@media screen and (max-width: 768px) {
    .lesson {
        padding-top: 4rem;
        padding-bottom: 3.2rem;
    }

    .lesson__wrap {
        flex-direction: column;
        gap: 2.4rem;
    }

    .lesson__body {
        padding-top: 0;
    }

    .lesson__body {
        text-align: left;
    }

    .lesson__br {
        display: inline;
    }

    .lesson__title {
        margin-bottom: 0;
        font-size: 1.6rem;
        line-height: 2.7rem;
    }

    .lesson__link {
        line-height: 2.7rem;
    }

    .lesson__link-item {
        gap: 2.4rem;
    }

    .lesson__link-item img {
        width: 3.2rem;
    }

    .lesson__list {
        gap: 1.5rem;
        width: 100%;
    }

    .lesson__item {
        width: calc((100% - 1.5rem) / 2);
    }

    .lesson__item:nth-child(2) {
        margin-top: 10.4rem;
    }
}


/* アクセス
-------------------------------------------------------------------------- */
.access {
    padding-top: 8rem;
    padding-bottom: 8rem;
}


/* ---------- 交通手段ごとの案内 ---------- */
.access__item {
    display: flex;
    align-items: flex-start;
    gap: 5.6rem;
}

.access__item + .access__item {
    margin-top: 3rem;
}

.access__label {
    display: flex;
    flex: 0 0 32.8rem;
    align-items: center;
    justify-content: center;
    height: 5.6rem;
    border: solid 1px var(--text_main);
    border-radius: 2.8rem;
    font-size: 1.8rem;
    font-weight: 500;
    letter-spacing: .08em;
}

.access__label {
    margin-top: 1rem;
}

.access__desc {
    font-size: 1.6rem;
    line-height: 3rem;
    letter-spacing: .09em;
}

/* ---------- 地図 ---------- */
.access__map {
    margin-top: 4.8rem;
    overflow: hidden;
    border-radius: 2.4rem;
}

.access__map iframe {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 1038 / 500;
    border: 0;
}

/* ---------- タブレット ---------- */
@media screen and (max-width: 1024px) {
    .access__item {
        display: block;
    }

    .access__label {
        margin: 0 auto 2.4rem;
    }
}

/* ---------- SP ---------- */
@media screen and (max-width: 768px) {
    .access {
        padding-top: 5.6rem;
        padding-bottom: 5.6rem;
    }


    .access__item {
        display: block;
    }

    .access__item + .access__item {
        margin-top: 4rem;
    }

    .access__label {
        width: 20.8rem;
        margin: 0 auto 2.4rem;
        font-size: 1.6rem;
        letter-spacing: .02em;
    }

    .access__map {
        margin-top: 5.6rem;
    }

    .access__map iframe {
        aspect-ratio: 331 / 236;
    }
}


/* 店舗情報
-------------------------------------------------------------------------- */
.information {
    padding-top: 0;
    padding-bottom: 8rem;
}


.information__wrap {
    display: flex;
    align-items: stretch;
    justify-content: space-between;
    gap: 1.6rem;
}

.information__list {
    flex: 1 1 auto;
    background-image: repeating-linear-gradient(to right, var(--text_main) 0 4px, transparent 4px 6px);
    background-position: bottom left;
    background-size: 100% 1px;
    background-repeat: no-repeat;
}

.information__item {
    display: flex;
    align-items: center;
    padding-top: 2rem;
    padding-bottom: 2rem;
    background-image: repeating-linear-gradient(to right, var(--text_main) 0 4px, transparent 4px 6px);
    background-position: top left;
    background-size: 100% 1px;
    background-repeat: no-repeat;
}

/* 行送りは24px。dt は reset.css で太字になるため戻す */
.information__label {
    flex: 0 0 9.6rem;
    font-size: 1.6rem;
    font-weight: normal;
    line-height: 2.4rem;
    letter-spacing: .08em;
}

.information__desc {
    font-size: 1.6rem;
    line-height: 2.4rem;
    letter-spacing: .08em;
}

.information__nowrap {
    white-space: nowrap;
}

.information__address {
    display: flex;
    flex-wrap: wrap;
    gap: 0 2.4rem;
    font-style: normal;
}

/* 郵便番号は縮めない。縮むと「〒992-」「0072」で切れる */
.information__zip {
    flex-shrink: 0;
}

.information__desc--holiday {
    display: flex;
    align-items: center;
    gap: .8rem;
}

.information__sns {
    flex-shrink: 0;
    width: 4.4rem;
}

/* ---------- 写真 ---------- */
.information__img {
    flex: 0 0 50.4rem;
}

.information__img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 2.4rem;
}

/* ---------- タブレット ---------- */
@media screen and (max-width: 1024px) {
    .information__wrap {
        flex-direction: column;
        gap: 4rem;
    }

    .information__img {
        flex: none;
        order: -1;
    }

    .information__img img {
        height: auto;
        aspect-ratio: 331 / 246;
    }
}

/* ---------- SP ---------- */
@media screen and (max-width: 768px) {
    .information {
        padding-top: 0;
        padding-bottom: 5.6rem;
    }


    .information__item {
        position: relative;
        display: block;
        padding-top: 1.2rem;
        padding-bottom: 2rem;
    }

    .information__label {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 10rem;
        height: 3.2rem;
        margin-bottom: .8rem;
        background-color: var(--bg_white-blue);
        line-height: 1.5;
    }

    .information__address {
        flex-direction: column;
        gap: .8rem;
    }

    .information__desc--holiday {
        display: block;
    }

    .information__sns {
        position: absolute;
        top: 1.2rem;
        right: 0;
    }
}


/* よくある質問
-------------------------------------------------------------------------- */
.faq {
    padding-top: 0;
    padding-bottom: 8rem;
}


.faq__list {
    max-width: 110rem;
    margin: 0 auto;
}

.faq__question {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 2.4rem;
    width: 100%;
    padding-top: 2.4rem;
    padding-bottom: 2.4rem;
    border-bottom: 2px solid var(--line-gray);
    background-color: transparent;
    font-size: 2.4rem;
    font-weight: 400;
    line-height: 1.5;
    letter-spacing: .05em;
    text-align: left;
    cursor: pointer;
}

.faq__question::after {
    flex-shrink: 0;
    width: 1.6rem;
    height: 1.6rem;
    margin-right: 3.2rem;
    border-top: 2px solid var(--text_main);
    border-right: 2px solid var(--text_main);
    transform: translateY(-25%) rotate(135deg);
    transition: transform 300ms ease;
    content: "";
}

.faq__question[aria-expanded="true"]::after {
    transform: translateY(25%) rotate(-45deg);
}

.faq__answer {
    padding-top: 2.2rem;
    padding-right: 6.4rem;
    padding-bottom: 2.4rem;
    font-size: 1.6rem;
    line-height: 3.2rem;
    letter-spacing: .075em;
}

/* ---------- SP ---------- */
@media screen and (max-width: 768px) {
    .faq {
        padding-top: 0;
        padding-bottom: 5.6rem;
    }


    .faq__list {
        max-width: none;
    }

    .faq__question {
        gap: 1.6rem;
        padding-top: 1.6rem;
        padding-bottom: 1.6rem;
        font-size: 1.6rem;
    }

    .faq__question::after {
        width: 1.3rem;
        height: 1.3rem;
        margin-right: 1.2rem;
    }

    .faq__answer {
        padding-top: 2.2rem;
        padding-right: 0;
        padding-bottom: 1.6rem;
    }
}

/* ---------- 動きを減らす設定のとき ---------- */
@media (prefers-reduced-motion: reduce) {
    .faq__question::after {
        transition: none;
    }
}


/* ご予約
-------------------------------------------------------------------------- */
.reservation {
    padding-top: 0;
    padding-bottom: 8rem;
}


.reservation__wrap {
    display: flex;
    align-items: stretch;
    justify-content: space-between;
    gap: 2rem;
}

/* iframeは中身から幅を決められないため、1440pxのときの幅を基準に置く */
.reservation__calendar {
    flex: 1 1 68rem;
    overflow: hidden;
    border-radius: 1.6rem;
}

/* ---------- 440px以下 ---------- */
/* カレンダーの高さを固定する（先方指示）。40rem＝400px */
@media screen and (max-width: 440px) {
    .reservation__calendar {
        height: 40rem;
    }
}

.reservation__calendar iframe {
    display: block;
    width: 100%;
    height: 100%;
    aspect-ratio: 685 / 454;
    border: 0;
}

/* ---------- LINE・電話の案内 ---------- */
.reservation__contact {
    flex: 0 1 51.2rem;
    min-width: 38.4rem;
    padding: 3.2rem;
    border-radius: 2.4rem;
    background-color: var(--bg_white-blue);
    text-align: center;
}

/* ---------- タブレット ---------- */
@media screen and (max-width: 1024px) {
    .reservation__wrap {
        flex-direction: column;
        gap: 4rem;
    }

    .reservation__calendar,
    .reservation__contact {
        flex: none;
        width: 100%;
        min-width: 0;
    }
}

.reservation__tel {
    margin-top: 4rem;
}

.reservation__contact-title {
    margin-bottom: 1.6rem;
    font-size: 2rem;
    font-weight: 700;
    line-height: 1.5;
    letter-spacing: .1em;
}

.reservation__contact-text {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 2.4rem;
    margin-bottom: 1.6rem;
    font-size: 1.6rem;
    line-height: 1.5;
    letter-spacing: .1em;
}

.reservation__contact-text::before,
.reservation__contact-text::after {
    width: 1px;
    height: 2rem;
    background-color: var(--text_main);
    content: "";
}

.reservation__contact-text::before {
    transform: rotate(-25deg);
}

.reservation__contact-text::after {
    transform: rotate(25deg);
}

.reservation__contact-text--plain::before,
.reservation__contact-text--plain::after {
    content: none;
}

.reservation__btn .link__btn {
    gap: 1.6rem;
    width: 32rem;
    height: 6rem;
    padding: 0;
    font-size: 1.8rem;
}

.reservation__btn .link__btn img {
    width: 3.6rem;
}

.reservation__note {
    margin-top: 1.6rem;
    font-size: 1.6rem;
    line-height: 1.5;
    letter-spacing: .05em;
}

.reservation__nowrap {
    white-space: nowrap;
}

/* 414px以下は必ず2行にする。414pxはここだけの例外 */
@media screen and (max-width: 414px) {
    .reservation__nowrap {
        display: block;
    }
}

/* ---------- SP ---------- */
@media screen and (max-width: 768px) {
    .reservation {
        padding-top: 0;
        padding-bottom: 5.6rem;
    }


    .reservation__wrap {
        gap: 5rem;
    }

    .reservation__calendar iframe {
        aspect-ratio: 330 / 209;
    }

    .reservation__contact {
        padding: 2.4rem .8rem;
    }

    .reservation__btn .link__btn {
        width: 100%;
        max-width: 32rem;
        font-size: 1.6rem;
    }
}


/* フッター
-------------------------------------------------------------------------- */
.footer {
    padding-top: 4rem;
    padding-bottom: 2.4rem;
    background-color: var(--mainColor_blue);
    color: var(--text_fff);
}

/* 空の2列目・4列目を余白にする（space-between ではナビが右にずれる） */
.footer__wrap {
    display: grid;
    grid-template-columns: auto 170fr auto 295fr auto;
    align-items: start;
}

.footer__logo {
    grid-column: 1;
}

.footer__nav {
    grid-column: 3;
}

.footer__info {
    grid-column: 5;
}

/* ---------- 1024px以下 ---------- */
@media screen and (max-width: 1024px) {
    /* auto-fit で、入る幅では横並び・入らない幅では縦積み。下限32.4remは店舗情報の実寸 */
    .footer__wrap {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(min(32.4rem, 100%), 1fr));
        gap: 4rem;
    }

    .footer__logo {
        grid-column: 1 / -1;
    }

    .footer__nav,
    .footer__info {
        grid-column: auto;
    }
}

.footer__logo {
    flex-shrink: 0;
    width: 11.6rem;
}

.footer__logo img {
    width: 100%;
    height: auto;
    aspect-ratio: 116 / 158;
    object-fit: contain;
}

/* ---------- ナビゲーション ---------- */
.footer__nav {
    display: flex;
    gap: 9.6rem;
}

.footer__list + .footer__list {
    margin-top: 1.5rem;
}

.footer__nav-link {
    font-size: 1.6rem;
    line-height: 2rem;
    letter-spacing: .1em;
    transition: color 300ms ease-in 0ms;
}

.footer__nav-link:hover {
    color: var(--text_sub-en);
}

/* ---------- 店舗情報 ---------- */
.footer__info-item {
    display: flex;
    gap: 2.4rem;
}

.footer__info-item + .footer__info-item {
    margin-top: 1.2rem;
}

/* reset.css の dt が太字になるが、デザインは値と同じ太さなので戻す */
.footer__info-label {
    flex: 0 0 7.2rem;
    font-size: 1.6rem;
    font-weight: normal;
    line-height: 2.4rem;
    letter-spacing: .1em;
}

.footer__info-desc {
    font-size: 1.6rem;
    line-height: 2.4rem;
    letter-spacing: .1em;
}

.footer__address {
    font-style: normal;
    line-height: 2.6rem;
}

/* ---------- 下段　noson正規取扱店とSNS ---------- */
.footer__noson {
    text-align: center;
}

/* バナーをnosonの公式サイトへのリンクにしている。
   reset.css が img を block にしているため、a をそのままにすると
   中の画像が行の中で扱われて位置がずれる。inline-block にして
   親の text-align: center で中央に置く（見た目は従来どおり） */
.footer__noson a {
    display: inline-block;
}

.footer__bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 4rem;
    margin-top: 3.6rem;
}

.footer__noson-text {
    margin-bottom: 1.2rem;
    font-size: 1.4rem;
    font-weight: 700;
    line-height: 1.5;
    letter-spacing: .1em;
}

.footer__noson img {
    width: 7.6rem;
    height: auto;
    margin-right: auto;
    margin-left: auto;
    object-fit: contain;
}

.footer__sns {
    display: flex;
    align-items: center;
    gap: 2.4rem;
}

/* LINEだけ brightness(.9) で暗くする（膜では透明な角まで黒くなる） */
.footer__sns-item--line {
    transition: filter 300ms ease-in 0ms;
}

.footer__sns-item--line:hover {
    filter: brightness(.9);
}

/* Threadsだけ縦長（86×96）なので、正方形に contain で収める */
.footer__sns-item img {
    width: 4.8rem;
    height: 4.8rem;
    object-fit: contain;
}

.footer__copy {
    font-size: 1.4rem;
    letter-spacing: .1em;
    text-align: center;
}

/* ---------- SP ---------- */
@media screen and (max-width: 768px) {
    .footer {
        padding-top: 4rem;
        padding-bottom: 1.2rem;
    }

    /* 768px以下は1列に固定。.inner のパディングが減って横並びが復活するため */
    .footer__wrap {
        grid-template-columns: 1fr;
    }

    .footer__logo {
        width: 5.6rem;
    }

    .footer__nav {
        gap: 8rem;
    }

    .footer__noson-word {
        display: block;
    }

    .footer__noson-text {
        margin-bottom: .8rem;
        line-height: 1.8rem;
    }

    .footer__noson img {
        width: 5.8rem;
    }

    .footer__bottom {
        align-items: flex-end;
        margin-top: 4rem;
    }

    .footer__sns {
        gap: 2rem;
        margin-bottom: .4rem;
    }

    .footer__sns-item img {
        width: 5rem;
        height: 5rem;
    }

    .footer__copy {
        margin-top: 4rem;
    }
}


@media screen and (min-width: 1025px) {
    .footer__wrap {
        grid-template-columns: auto 170fr auto 295fr max-content;
    }

    .footer__info-item {
        display: grid;
        grid-template-columns: 7.2rem max-content;
        gap: 2.4rem;
    }
}