/* =========================================================
   Mobile / responsive layer (SP comps = 375px wide)
   Shared chrome: mobile header bar + hamburger + full-screen menu
   Breakpoint: <= 820px
   ========================================================= */

/* mobile chrome is hidden on desktop */
.m-header,.m-menu,.m-burger{display:none}

@media (max-width:820px){

  /* ---- hide desktop headers/nav ---- */
  .hero .brand,.hero .gnav{display:none!important}
  .site-header,.breadcrumb{display:none!important}

  /* ---- mobile header bar ---- */
  .m-header{
    position:fixed;top:0;left:0;right:0;z-index:1000;
    display:flex;align-items:center;justify-content:space-between;
    height:60px;padding:0 18px;background:transparent;
  }
  .m-header__logo{display:flex}
  .m-header__logo img{height:34px;width:auto;display:block}
  .m-burger{
    display:flex;flex-direction:column;justify-content:center;gap:5px;
    width:34px;height:34px;background:none;border:0;cursor:pointer;padding:6px 4px;
  }
  .m-burger span{display:block;height:2px;width:100%;background:#1b1b1b;border-radius:2px;transition:.3s}

  /* push content below the fixed bar */
  body{padding-top:60px}

  /* ---- full-screen menu overlay ---- */
  .m-menu{
    display:block;position:fixed;inset:0;z-index:1100;
    background:#0d0116;color:#e9e6ec;
    padding:26px 26px 60px;overflow-y:auto;
    transform:translateY(-100%);opacity:0;visibility:hidden;
    transition:transform .5s cubic-bezier(.7,0,.2,1),opacity .4s ease,visibility .5s;
  }
  .m-menu.is-open{transform:translateY(0);opacity:1;visibility:visible}
  .m-menu__close{
    position:absolute;top:18px;right:18px;width:40px;height:40px;
    background:none;border:0;color:#fff;font-size:30px;line-height:1;cursor:pointer;
  }
  .m-menu__nav{list-style:none;margin:42px 0 0;padding:0;display:flex;flex-direction:column;gap:18px}
  .m-menu__nav a{color:#fff;font-size:16px;letter-spacing:.04em}
  .m-menu__nav a:active{opacity:.6}
  .m-menu__privacy{display:inline-block;margin:38px 0 18px;font-size:12px;color:#cfc9d6}
  .m-menu__sep{border:0;border-top:1px solid rgba(255,255,255,.16);margin:0 0 26px}
  .m-menu__sns{display:flex;flex-direction:column;gap:18px}
  .m-menu__sns .fsns span{font-size:13px;font-weight:700;color:#fff;line-height:1.5}
  .m-menu__sns .fsns__btn{display:block;background:#fff;color:#333;border-radius:6px;
    padding:12px 16px;font-size:12px;margin-top:8px}
  .m-menu__copy{margin-top:34px;font-size:11px;color:#9a92a4;text-align:center}
  body.m-menu-open{overflow:hidden}

  /* ---- generic layout resets (single column) ---- */
  .wrap,.wrap-narrow{padding:0 22px}
  .section{padding:56px 0}
  .hero + .section{padding-top:40px}
  .sec-title{font-size:34px}
  .sec-title--left{font-size:30px}
  .cards3{grid-template-columns:1fr;gap:26px}
  .center{margin-top:34px}

  /* ---- TOP hero: stacked flow instead of the 1500px stage ---- */
  .hero{
    max-width:none;aspect-ratio:auto;height:auto;overflow:visible;
    display:flex;flex-direction:column;
    background:url("../images/hero-bg.png") top center / 210% auto no-repeat, var(--bg);
    padding:16px 22px 24px;container-type:normal;
  }
  .hero__photos{display:block;position:relative;height:200px;margin:4px 0 18px;order:1}
  .hp{box-shadow:0 8px 22px rgba(0,0,0,.12);border-radius:6px}
  .hp--study{left:33%;top:0;width:65%;height:148px;transform:rotate(-4deg)}
  .hp--salon{left:0;top:66px;width:47%;height:132px;transform:rotate(-7deg)}
  .hero__copy{position:static;order:2;width:100%;font-size:30px;line-height:1.5;
    margin:4px 0 16px;font-weight:700;color:var(--ink);text-shadow:none}
  .hero__copy .on-photo{color:var(--ink);text-shadow:none}   /* copy no longer over photos on SP */
  .hero__copy .circle{padding:0 6px}
  .hero__copy .circle__mark{left:-4px;top:-6px;width:calc(100% + 12px);height:calc(100% + 14px)}
  .hero__lead{position:static;order:3;width:100%;font-size:13px;line-height:1.95;color:#444}
}

/* =========================================================
   TOP page — sections BELOW the hero (SP comp: sp/index.png)
   ========================================================= */
@media (max-width:820px){

  /* ---------- ABOUT ---------- */
  .is-top .about{overflow:hidden}          /* clip decorative blob so no h-scroll */
  .about-how{display:none}                 /* subtle HOW watermark overflows on SP */
  .about__inner{gap:24px}
  .about__lead{font-size:20px;line-height:1.7;margin-bottom:16px}
  .about__body{font-size:13px;margin-bottom:24px}
  .about__img img{border-radius:6px}

  /* ---------- SERVICE: big photo on top, then stacked rows ---------- */
  .srv-wrap{gap:0}
  .srv-photo{min-height:0;height:auto;aspect-ratio:16/11;
    border-radius:8px;margin-bottom:30px}
  .srv-list{gap:36px}
  .srv{grid-template-columns:1fr;gap:14px}
  .srv__thumb{aspect-ratio:16/10;border-radius:6px}
  .srv__icon svg{width:52px;height:52px}
  .srv__desc{max-width:none}

  /* ---------- APPLICATION: text then centered phone ---------- */
  .app__body{max-width:none;margin-bottom:24px}
  .app__phone{margin-top:24px}

  /* ---------- GROUP: single column of cards ---------- */
  .group__grid{row-gap:36px}
  .gcard__img{aspect-ratio:16/10}
}

/* very small phones */
@media (max-width:400px){
  .hero__copy{font-size:26px}
  .sec-title{font-size:29px}
}