/* ============================================================
   main-tab.css  タブレット（〜1024px）
   HTML で <link rel="stylesheet" href="css/main-tab.css"> として読み込む
============================================================ */

/* ===== max-width: 1024px ===== */
@media(max-width: 1024px) {

             .forPC{display:none;}
             .forSP{display:block;}
             .wrap {
                padding: 0 2.5em;
                max-width: 100%;
            }

             .menu {
                 gap: 18px;
                 font-size: 13.5px
             }

             .nav-right {
                 gap: 16px
             }

             .nav-cta {
                 padding: 10px 15px;
                 font-size: 13px
             }
             /* ヘッダー */
             header .wrap{
                width: 95%;
                max-width: 95%;
                padding: 0;
             }
             /* トップページ */
             .hero {
                 padding-top: 0;
             }
             .hero-inner-logo{
                display: none;
             }
             .hero-inner {
                 grid-template-columns: 1fr;
                 min-height: auto
             }

             .hero-left {
                 padding:2em 3em;
                 background: #fff;
                 width: 90%;
                 z-index: 59;
                 justify-content:start;
                 display: absolute;
                 left: 0;
                 right: 0;
                 margin: auto;
                 top: 30px;
             }

             .hero-left .catch {
                 flex-direction: column;
                 gap: 16px;
                 margin-left: 0;
             }

             .hero h1.tate {
                 writing-mode: horizontal-tb;
                 height: auto;
                 line-height: 1.5
             }
             .hero .sub-tate {
                 writing-mode: horizontal-tb;
                 height: auto;
                 margin-top: 0;
                 font-size: 15px;
                font-family: "Zen Maru Gothic", sans-serif;
                font-weight: 500;
             }

             .hero-right {
                 min-height: 0;
                 margin-top: 0;
                 height: auto;
                 position: absolute;
                 width: 100%;
                 top: 0;
                 left: 0;
                 height: 100vh;
             }

             .hero-right .big-ph {
                 position: absolute;
                 top: 0;
                 left: 0;
                 inset: auto;
                 aspect-ratio: 16/11;
                 background-size: cover;
                 height: 100vh;
             }
             .hero-meta{
                display: none;
             }
             .hero-meta-tab {
                display: block!important;
                 left: 30px;
                 bottom: 3em;
                 max-width: auto;
                 position: absolute;
                 z-index: 3;
                background: var(--bg);
                padding: 24px 28px;
                z-index: 2;
                border-left: 3px solid var(--orange);
                max-width: auto;
            }

            .hero-meta-tab .en {
                font-family: "Shippori Mincho";
                font-style: italic;
                color: var(--tan);
                font-size: 15px;
                letter-spacing: .1em;
                margin-bottom: 8px;
                font-weight: bold;
            }

            .hero-meta-tab p {
                font-family: "Zen Maru Gothic";
                font-size: 15px;
                color: var(--ink);
                line-height: 1.8
            }

             .scroll-hint {
                 display: none
             }

             /* cta */
             .cta {
                 position: relative;
                 text-align: center;
                 padding: 30px 0 25px;
                 overflow: hidden
             }

             .cta .bg-ph {
                 position: absolute;
                 inset: 0
             }

             .cta .veil {
                 position: absolute;
                 inset: 0;
                 background: var(--green);
             }

             .cta .wrap {
                 padding: 0 10px;

             }
             .cta-yoko{
                padding: 0;
             }
             .cta-yoko .wrap{
                display: block;
             }
             .cta-yoko .wrap .right{display: none;}
             .cta-yoko .wrap .left{padding: 3em 2em;width: 100%;}

             .cta .wrap h2 {
                 font-size: 21px;
             }

             .cta .btn {
             }

             .cta .en {
                 font-family: "Shippori Mincho";
                 font-style: italic;
                 letter-spacing: .2em;
                 font-size: 18px;
                 color: #e6d6ba;
                 margin-bottom: 12px;
             }

             .cta h2 {
                 font-size: clamp(28px,4.4vw,44px);
                 color: #fff;
                 letter-spacing: .08em;
                 line-height: 1.5;
                 margin-bottom: 22px
             }

             .cta p {
                 font-size: 16px;
             }

             .cta-actions {
                 margin-bottom: 6px;
                 max-width: 100%;
             }

             .cta .btn {
                 background: #06C755;
                 color: #fff;
                 padding: 20px 44px;
                 font-family: "Zen Maru Gothic";
                 font-size: 16pt;
                 letter-spacing: .06em;
                 border-radius: 50px;
                 display: inline-flex;
                 align-items: center;
                 gap: 12px;
                 transition: transform .2s;
                 font-weight: bold;
             }

             .cta .btn svg {
                 width: 24px;
                 height: 24px;
                 flex: none
             }

             .cta .btn:hover {
                 transform: translateY(-3px)
             }
             /* ----- 下層ページ ----- */
             /* メインビジュアル*/
            .page-hero{
                background-size: cover;
                padding: 80px 0;
            }
            /* 施術・料金 */
            .price-notes{
                width: 80%;
                margin: 2rem auto 0;
            }
             /* 症状ガイド */
             .sym-cols {
                 grid-template-columns: 1fr 1fr;
                 gap: 15px;
             }
             #menu .menu-grid{
                margin-bottom: 1.5rem;
                gap: 30px;
            }
             #detail .symcard-grid{
                width: 100%;
             }
             /* アクセス */
             .page-hero.access{
                background-position:center top;
             }
             /* よくある質問 */
             .faq-cat{
                width: 85%;
                margin: 0 auto 3rem;
             }
             section.blk {
                 padding: 80px 0
             }
         

.case-grid{grid-template-columns:1fr 1fr}.access-list{grid-template-columns:1fr 1fr}

    .stats .wrap {
        grid-template-columns:repeat(4,1fr);
        gap: 20px
    }
    .voice-grid {
        grid-template-columns: 1fr 1fr
    }

    .hero-deco .dots {
        display: none
    }

    .hero > .wrap {
        display: block!important;
        height: calc(100vh - 60px);
        position: relative;
    }
}

/* ===== min-width: 768px and max-width: 1024px（タブレット専用） ===== */

/* ===== min-width: 768px and max-width: 1024px（タブレット専用） ===== */
@media (min-width: 768px) and (max-width:1024px) {

    /* 見出し・大きめ文字のバランス調整 */
    .hero h1.tate {
        font-size: clamp(34px,5.6vw,48px)
    }

    .hero .sub-tate {
        font-size: 15px;
    }

    .h2big {
        font-size: clamp(26px,3.8vw,34px)
    }

    .sec-head h2 {
        font-size: clamp(24px,3.6vw,32px)
    }

    .stat .num {
        font-size: clamp(28px,3.8vw,38px)
    }

    /* 選ばれる3つの理由：タブレットは横幅いっぱいの1列＝写真とテキストを横並び */
    .fgrid {
        grid-template-columns: 1fr;
        gap: 24px
    }

    .fcard .top {
        padding: 20px 28px
    }

    .fcard .body {
        display: flex;
        gap: 32px;
        align-items: center;
        padding: 28px
    }

    .fcard .body .ph {
        flex: 0 0 44%;
        margin-bottom: 0;
        aspect-ratio: 16/10
    }

    .fcard:nth-child(even) .body {
        flex-direction: row-reverse
    }

    .fcard .body p {
        flex: 1;
        font-size: 15px;
        line-height: 2.15
    }

    /* 施術メニュー：内側余白を最適化 */
    .mcell {
        padding: 34px 32px
    }
    .wrap.wrap-menu{
        padding: 0;
    }

    /* 院について／スタッフ／アクセスの間隔 */
    .about-grid {
        gap: 40px
    }

    .staff-grid {
        gap: 40px
    }

    .staff-grid .ph.has-photo {
        background-position: 0 0;
    }

    .acc-grid {
        gap: 40px
    }

    /* フッター：3列の比率をゆとり調整 */
    footer{
        padding-top: 0;
    }
    .foot-grid {
        grid-template-columns: 1.2fr 1fr 1fr;
        gap: 32px;
        display: none;
    }

    /* セクション余白 */
    section.blk {padding: 76px 0}

    /* 初診当日の流れ：横並びのステップ行（番号→アイコン→テキスト） */
    .flow-list {
        grid-template-columns: 1fr;
        gap: 16px;
        width: 80%;
        margin: auto;
        min-width: 500px;
        max-width: 90%;
    }
    
    .flow-step {
        display: flex;
        align-items: center;
        gap: 24px;
        text-align: left;
        padding: 24px 30px
    }
    .flow-step .no {
        position: static;
        transform: none;
        top: auto;
        left: auto;
        flex: none
    }
    .flow-step .ic {
        display: none;
    }
    .flow-step .flow-txt {
        flex: 1
    }

    .flow-step h4 {
        margin-bottom: 6px
    }

    /* お客様の声：横並び（人物＋コメント／左右交互） */
    .voice-grid {
        grid-template-columns: 1fr;
        gap: 20px
    }

    .voice-card {
        display: flex;
        align-items: center;
        gap: 32px
    }

    .voice-card .voice-body {
        flex: 1
    }

    .voice-card .who {
        order: -1;
        flex: none;
        flex-direction: column;
        align-items: center;
        text-align: center;
        width: 132px;
        gap: 10px;
        border-top: none;
        padding-top: 0
    }

    .voice-card .who .av {
        width: 60px;
        height: 60px;
        font-size: 22px
    }

    .voice-card:nth-child(even) {
        flex-direction: row-reverse
    }
}