/* ============================================================
   main-sp.css  スマートフォン（〜767px）
   HTML で <link rel="stylesheet" href="css/main-sp.css"> として読み込む
============================================================ */

@media(max-width: 767px) {
    /* 共通 */
    .wrap{
        padding: 0em 1.5em;
    }
    #detail .symcard {
        flex-direction: column;
    }
    .symcard-ph {
        width: 100%;
        border-radius: 14px 14px 0 0; /* 上側だけ角丸 */
        aspect-ratio: 16/9;
    }
    .symcard-ph img {
        aspect-ratio: 16/9;
    }

    .inside-grid,.symcard-grid,.case-grid,.access-list,.staff-full{grid-template-columns:1fr;gap:26px}.contact-box{padding:24px 20px}.contact-box .fld{grid-template-columns:1fr;gap:6px}.symcard .row{grid-template-columns:1fr;gap:2px}

    .stats .wrap {
        grid-template-columns:1fr 1fr
    }
    .mcell .mhead{
        display: block;
    }
    .mcell .mhead h3{
        margin-bottom: 10px;
    }
    .mcell .time,.mcell .price{
        font-size: 23px;
    }
    .sym-cols{
        background: none;
        border: none;
    }
    .sym-cols .col{
        margin-bottom: 20px;
    }

    .flow-list {
        grid-template-columns: 1fr;
        width: 85%;
        margin: auto;
    }
    #access .acc-grid{
        display: block;
    }
    #access .map-ph, #access .box-R{
        width: 100%;
    }
    #access .map-ph{
        aspect-ratio: 16/11
    }
    .map-ph iframe{
        max-height: 100%;
    }
    #access .box-R{
        padding-left: 0;
    }
    #access table tr:first-child th,
    #access table tr:first-child td{
        border-top: 0;
    }

    .voice-grid {
        grid-template-columns: 1fr
    }

    .news-item {
        flex-wrap: wrap;
        gap: 8px 12px
    }

    .pagetop {
        right: 14px;
        bottom: 14px;
        width: 44px;
        height: 44px
    }
    .subpage .about-visual{
        display: none;
    }
    .subpage.sub-menu .wrap-menu .wrap{
        padding: 0;
    }
    .subpage.sub-menu .subpage .mcell:last-child{
        margin-bottom: 0;
    }

    .sp-fixed-cta{
        display: block;
        position:fixed;
        left:0;
        right:0;
        bottom:0;z-index:70;
        padding: 0;
        background:#06C755;
        width: 100%;
    }
    .sp-fixed-cta a{
        flex:1;display:inline-flex;
        align-items:center;
        justify-content:center;
        gap:9px;
        background:#06C755;
        color:#fff;
        font-family:"Zen Maru Gothic";
        font-weight:700;font-size:20px;
        padding:20px 0;
        letter-spacing:.04em;
        width: 100%;
    }
    .sp-fixed-cta a svg{
        width:20px;height:20px;flex:none
    }
    /* バーの高さ分、ページ下部に余白を追加（フッター最下部が隠れないように） */
    body{padding-bottom:calc(70px + env(safe-area-inset-bottom))}
    /* ページトップボタンとかぶらないよう少し上へ */
    .pagetop{
        bottom:calc(84px + env(safe-area-inset-bottom));
        display: none;
    }
    /* ドロワー(メニュー)を開いている間はバーを隠す */
    body.nav-open .sp-fixed-cta{display:none}

    section[id], [id="cta"], [id="access"], [id="top"]{
        scroll-margin-top:76px; /* スマホ：ヘッダー高さ(64px)＋余白 */
    }

            .forPC{display:none;}
            .forSP{display:block;}
            header{
                backdrop-filter:none;
                -webkit-backdrop-filter:none;
                background:rgba(250,246,238,.97);
                width: 100%;
                position: fixed;
                height: 70px;
                top: 0;
                left: 0;
                right: 0;
            }
            header .wrap{
                width: 100%;
                max-width: 100%;
                padding: 0;
            }
            header .wrap .logo img{
                display: none;
            }
            body{
                padding-top: 70px;
            }
            .nav {
                height: 70px;
            }
            .nav-toggle {
                display: flex
            }

            .nav-right {
                gap: 10px
            }

            .nav-cta {
                padding: 9px 13px;
                font-size: 12.5px;
                gap: 5px;
                display: none;
            }
            .cta-yoko .wrap{
                padding: 0;
            }
            .cta-yoko .wrap .left{
                padding: 2em 1.5em;
            }
            .nav-cta .cta-full {
                display: none
            }

            .nav-cta .cta-short {
                display: inline
            }

            .nav-cta svg {
                width: 15px;
                height: 15px
            }

            /* スライドインのドロワーメニュー */
            .menu {
                position: fixed;
                top: 64px;
                right: 0;
                height: calc(100dvh - 64px);
                width: min(82vw,320px);
                background: var(--cream);
                flex-direction: column;
                align-items: stretch;
                justify-content: flex-start;
                gap: 0;
                padding: 14px 26px 40px;
                box-shadow: -10px 0 34px rgba(0,0,0,.14);
                transform: translateX(105%);
                transition: transform .35s cubic-bezier(.4,0,.2,1);
                z-index: 55;
                overflow-y: auto
            }

            body.nav-open .menu {
                transform: translateX(0)
            }

            .menu a {
                width: 100%;
                padding: 16px 4px;
                border-bottom: 1px solid var(--line);
                font-size: 16px;
                color: var(--ink)
            }
            body.nav-open{overflow:visible}

            .logo b {
                font-size: 17px;
            }
            /* 下層ページ */
            body.subpage .h2big{
                font-size: 25px;
                margin-bottom: 1rem;
            }
            .subpage #flow .flow-step{
                width: 85%;
                margin: auto;
                padding: 1.5em;
    }
            .page-hero{
                width: 100%;
                padding: 70px 0;
                background-size: cover!important;
                background-position: center!important;
            }
            .page-hero h1{
                padding: 5px 15px;
                font-size: 25px;
            }
            .hero h1.tate{
                font-size: 25px;
                text-align: center;
                margin: auto;
            }
            .hero .sub-tate{
                font-size: 15px;
                text-align: center;
            }
            .hero .sub-tate br{
                display: none;
            }
            .hero > .wrap{
                background-image: url(../images/main.jpg);
                background-size: cover;
                height: auto;
                padding: 1.5em 0;
            }
            .hero-inner-logo{
                display: block;
                margin: 0 auto 1rem;
                width: 300px;
            }
            .hero-inner-logo img{
                width: 100%;
            }
            .hero-left {
                padding: 1.5em;
                margin: 1.5rem auto;
                position: unset;
            }
            .hero-left .catch > div{
                margin: auto;
                line-height: 1.8;
                font-size: 14px;
            }
            .hero-right{
                display: none;
            }

            .hero-meta, .hero-meta-tab{
                display: none!important;
            }
            .fgrid {
                grid-template-columns: 1fr
            }

            .res-row .wrap {
                flex-direction: column;
                gap: 20px;
                text-align: center
            }
            .menu-grid{
                border: 0;
            }

            /* 院について - #about */
            .about-txt p{
                line-height: 1.7;
            }
            .about-grid,.staff-grid,.acc-grid {
                grid-template-columns: 1fr;
                gap: 40px
            }
            #menu .menu-grid,
            .menu-grid, .sym-cols{
                gap: 10px;
                margin-bottom: 0;
            }
            .staff-txt blockquote{
                font-size: 15px;
            }
            .staff-txt .lic span{
                font-size: 14px;
                padding: 3px 10px;
            }
            .about-visual .p2 {
                position: relative;
                right: 0;
                bottom: 0;
                width: 100%;
                margin-top: 16px;
                border: none
            }
            .menu-grid,.sym-cols {
                grid-template-columns: 1fr
            }
            #inside .ph.has-photo{
                width: 100%;
                height: auto;
            }
            .mcell {
                padding: 32px 28px;
                margin-bottom: 20px;
                border: 0;
            }
            .itbl th, .itbl td {
                font-size: 15px;
            }
            .inside-card figcaption{
                line-height: 1.7;
            }
            /* 施術メニュー */
            .price-notes{
                width: 100%;
            }
            .flow-step .ic{
                margin-top: 0;
            }
            /* よくある質問 #FAQ */
            .faq-cat{
                width: 100%;
                margin-bottom: 0;
            }
            .faq-cat + .faq-cat{
                margin-top: 2rem;
            }

            /* ----- フッター ----- */
            footer {
                padding: 20px 0;
            }

            footer .copy {
                padding-top: 0;
                border-top: 0;
            }

            .foot-grid {
                grid-template-columns: 1fr;
                display: none;
            }

            .foot-col {
                display: none;
            }

            section.blk {
                padding: 50px 0
            }

            .logo span {
                font-size: 18px;
                padding-left: 25px;
            }
            

}