/* ==========================================================
   SMART PHONE
   max-width:767px
========================================================== */

@media (max-width:767px){

    .wrap{
        padding:0 18px 18px 18px;
    }
    .sp-only{ display:inline; }

    /* ==========================
       Header
    ========================== */

    header{
        position:sticky;
        top:0;
        left:0;
        right:0;
        z-index:1000;
        flex-direction:column;
        gap:14px;
        padding:16px 18px;
        padding-bottom:24px;
        background:var(--bg);
        box-shadow:0 2px 16px rgba(0,0,0,.06);
    }

    nav{
        width:100%;
    }

    nav ul{
        justify-content:center;
        flex-wrap:wrap;
        gap:18px;
    }

    nav .en{
        font-size:12px;
    }

    nav .ja{
        font-size:10px;
    }

    /* ==========================
       Anchor offset (fixed header)
    ========================== */

    #service,
    #room-type,
    #voices,
    #flow,
    #profile{
        scroll-margin-top:190px;
    }

    /* ==========================
       Hero
    ========================== */

    .hero{
        padding:50px 0 60px;
    }

    .hero-head{
        text-align:center;
    }

    .hero-inner{
        grid-template-columns:1fr;
        gap:36px;
        text-align:center;
    }

    .hero-content{
        order:2;
        max-width:none;
    }

    .hero-visual{
        order:1;
    }

    .hero-visual img{
        max-width:360px;
        margin:auto;
    }

    .hero h1{
        font-size:28px;
        line-height:1.5;
    }

    .hero .lead{
        max-width:none;
        margin:0 auto 30px;
    }

    .hero-divider{
        margin:24px auto;
    }

    /* ==========================
       Section
    ========================== */

    .room-type,
    .reasons,
    .before-after,
    .menu,
    .profile{
        padding:70px 0;
    }

    .flow{
        padding:36px 0 56px;
        margin-block:24px;
    }

    .section-title h2{
        font-size:28px;
    }

    .section-title h3{
        font-size:19px;
    }

    /* ==========================
       Room Type
    ========================== */

    .type-grid{
        grid-template-columns:1fr;
        gap:22px;
    }

    .type-card{
        max-width:420px;
        margin:auto;
        padding:24px;
    }

    .type-card h3::before{
        width:180px;
    }

    .type-card h3::after{
        left:180px;
    }

    .copy-main{
        font-size:24px;
    }

    .copy-sub{
        font-size:16px;
    }

    .hint{
        gap:14px;
        padding:14px;
    }

    .hint-icon{
        width:32px;
        height:32px;
    }

    .diagnosis-result{
        padding:32px 22px;
        p {
          text-align: left;
        }
    }

    .diagnosis-result h3{
        font-size:20px;
    }

    /* ==========================
       Reasons
    ========================== */

    .reasons-grid{
        gap:32px;
        margin-top:32px;
    }

    .reason{
        flex-direction:column;
        gap:8px;
    }

    .message-box{
        float:none;
        width:140px;
        height:140px;
        margin:0 auto 20px;
    }

    .ba-grid{
        grid-template-columns:1fr;
        gap:20px;
        margin-top:32px;
    }

    /* ==========================
       Voices
    ========================== */

    .voices-grid{
        grid-template-columns:1fr;
        gap:20px;
    }

    /* ==========================
       Service
    ========================== */

    .menu-grid{
        grid-template-columns:1fr;
        gap:24px;
    }

    .menu-card{
        max-width:460px;
        margin:auto;
    }

    /* ==========================
       Flow
    ========================== */

    .flow-steps{
        grid-template-columns:1fr;
        gap:36px;
    }

    .flow-steps::before{
        display:none;
    }

    .flow-step{
        max-width:420px;
        margin:auto;
    }

    /* ==========================
       Profile
    ========================== */

    .profile-box{
        padding:26px;
        grid-template-columns:1fr;
        gap:22px;
        text-align:center;
    }

    .profile-photo{
        max-width:200px;
        margin:0 auto;
        aspect-ratio:1/1;
    }

    .profile-box p{
        text-align:left;
    }

    .profile-box .quals{
        justify-content:center;
    }

    /* ==========================
       CTA
    ========================== */

    .band{
        padding:60px 20px;
    }

    .band h3{
        font-size:24px;
    }

    /* ==========================
       Button
    ========================== */

    .btn-primary{
        width:100%;
        max-width:340px;
    }

}