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

@media (max-width:767px){

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

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

    header{
        flex-direction:column;
        gap:18px;
        padding:20px 0;
    }

    nav{
        width:100%;
    }

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

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

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

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

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

    .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:320px;
        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,
    .menu,
    .flow,
    .profile{
        padding:70px 0;
    }

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

    /* ==========================
       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:42px;
        height:42px;
    }

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

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

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

    .reasons-grid{
        grid-template-columns:1fr;
        gap:40px;
    }

    /* ==========================
       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;
    }

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

    .band{
        padding:60px 20px;
    }

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

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

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

}