:root{--sl-bg:#f4f0e9;--sl-paper:#fbfaf7;--sl-ink:#24211d;--sl-muted:#7c756d;--sl-line:rgba(36,33,29,.18);--sl-accent:#8c6f5a}*{box-sizing:border-box}html{scroll-behavior:smooth}body.salon-demo-page{margin:0;background:var(--sl-bg);color:var(--sl-ink);font-family:"Noto Sans JP",sans-serif}.sl-page{overflow:hidden}.sl-wrap{width:min(1180px,calc(100% - 64px));margin:auto}.sl-demo-bar{min-height:38px;padding:7px 24px;background:#24211d;color:#fff;display:flex;align-items:center;justify-content:space-between;font-size:11px;letter-spacing:.12em}.sl-demo-bar p{margin:0;display:flex;gap:18px}.sl-demo-bar span{opacity:.55}.sl-demo-bar a{color:#fff;text-decoration:none;opacity:.8}.sl-header{height:86px;padding:0 38px;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;background:rgba(244,240,233,.92);border-bottom:1px solid var(--sl-line);position:relative;z-index:5}.sl-logo{color:var(--sl-ink);text-decoration:none;font-family:"Cormorant Garamond",serif;font-size:20px;letter-spacing:.14em}.sl-logo span{display:inline-grid;place-items:center;width:28px;height:28px;border:1px solid currentColor;border-radius:50%;margin-right:9px}.sl-header nav{display:flex;gap:30px}.sl-header nav a{color:var(--sl-ink);text-decoration:none;font-size:10px;letter-spacing:.16em}.sl-reserve{justify-self:end;background:var(--sl-ink);color:#fff;text-decoration:none;padding:14px 20px;font:600 10px/1 "Noto Sans JP";letter-spacing:.14em}.sl-hero{min-height:760px;position:relative}.sl-hero-photo{position:absolute;right:0;top:0;width:62%;height:680px}.sl-photo{background:linear-gradient(135deg,#d8d0c6,#b9aca0);position:relative;overflow:hidden}.sl-photo:after{content:"";position:absolute;inset:0;background:linear-gradient(120deg,transparent 25%,rgba(255,255,255,.24) 50%,transparent 75%)}.sl-photo span,.sl-photo b{position:absolute;bottom:16px;left:18px;font-size:9px;letter-spacing:.15em;color:#fff;font-weight:500}.sl-hero-copy{position:absolute;z-index:2;left:max(32px,calc((100% - 1180px)/2));top:145px;width:51%}.sl-eyebrow,.sl-label{font-size:10px;letter-spacing:.2em;font-weight:600}.sl-hero h1,.sl-concept h2,.sl-feature h2,.sl-menu h2,.sl-reservation h2{font-family:"Shippori Mincho",serif;font-weight:400}.sl-hero h1{font-size:clamp(42px,5.1vw,76px);line-height:1.35;letter-spacing:.04em;margin:32px 0}.sl-hero h1 em{font-style:normal;color:var(--sl-accent)}.sl-hero-copy>p:last-child{font-family:"Shippori Mincho",serif;line-height:2;font-size:15px}.sl-scroll{position:absolute;left:38px;bottom:26px;font-size:9px;letter-spacing:.2em;writing-mode:vertical-rl}.sl-concept{padding:130px 0 160px;background:var(--sl-paper)}.sl-concept-grid{display:grid;grid-template-columns:1fr 1fr;gap:100px}.sl-concept h2,.sl-feature h2{font-size:clamp(36px,4.5vw,64px);line-height:1.55;margin:28px 0}.sl-concept-copy{padding-top:58px;max-width:520px}.sl-concept-copy .lead{font-family:"Shippori Mincho",serif;font-size:24px;line-height:1.8}.sl-concept-copy p:last-child{font-size:14px;line-height:2.2;color:#5e5953}.sl-concept-photos{height:620px;margin-top:90px;position:relative}.sl-photo-tall{position:absolute;left:0;top:0;width:58%;height:560px}.sl-photo-small{position:absolute;right:0;bottom:0;width:35%;height:320px}.sl-script{position:absolute;right:5%;top:30px;font-family:"Cormorant Garamond",serif;font-size:42px;font-style:italic;line-height:1;color:var(--sl-accent)}.sl-feature{padding:130px 0}.sl-feature-head,.sl-section-head{display:flex;justify-content:space-between;align-items:flex-end}.sl-feature-head>p,.sl-section-head>p{font-size:13px;line-height:2;color:var(--sl-muted)}.sl-feature-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:28px;margin-top:70px}.sl-feature-grid article>span{font-family:"Cormorant Garamond";font-size:13px}.sl-feature-grid .sl-photo{height:400px;margin:15px 0 28px}.sl-feature-grid article:nth-child(2){transform:translateY(55px)}.sl-feature-grid h3{font-family:"Cormorant Garamond";font-size:14px;letter-spacing:.14em;margin:0 0 10px}.sl-feature-grid strong{font-family:"Shippori Mincho";font-size:20px;font-weight:400}.sl-feature-grid p{font-size:12px;line-height:2;color:var(--sl-muted)}.sl-style{padding:170px 0 130px;background:#25221f;color:#f8f5ef}.sl-section-head h2{font-family:"Cormorant Garamond",serif;font-size:70px;font-weight:400;letter-spacing:.04em;margin:15px 0 0}.sl-style .sl-section-head>p{color:#bcb4ab}.sl-style-grid{margin-top:70px;display:grid;grid-template-columns:1.15fr .85fr;grid-template-rows:390px 390px;gap:20px}.sl-style-a{grid-row:span 2}.sl-style-b{width:75%}.sl-style-c{margin-left:auto;width:90%}.sl-style-d{display:none}.sl-menu{padding:140px 0;background:#e7dfd5}.sl-menu-grid{display:grid;grid-template-columns:.8fr 1.2fr;gap:100px}.sl-menu h2{font-size:70px;line-height:.9;margin:28px 0 40px}.sl-menu h2 i{font-family:"Cormorant Garamond";font-weight:400}.sl-menu-grid>div:first-child>p:last-child{font-size:12px;line-height:2;color:var(--sl-muted)}.sl-menu-list>div{display:grid;grid-template-columns:130px 1fr auto;align-items:center;padding:23px 0;border-bottom:1px solid var(--sl-line)}.sl-menu-list span{font:500 10px "Cormorant Garamond";letter-spacing:.15em}.sl-menu-list strong{font-family:"Shippori Mincho";font-weight:400}.sl-menu-list b{font-family:"Cormorant Garamond";font-size:18px;font-weight:500}.sl-menu-list>p{font-size:10px;color:var(--sl-muted);margin-top:22px}.sl-stylist{padding:140px 0;background:var(--sl-paper)}.sl-staff-grid{display:grid;grid-template-columns:1fr 1fr;gap:55px;margin-top:70px;width:82%;margin-left:auto}.sl-staff-grid .sl-photo{height:560px}.sl-staff-grid article:nth-child(2){margin-top:90px}.sl-staff-grid small{display:block;margin-top:22px;font:500 10px "Cormorant Garamond";letter-spacing:.15em;color:var(--sl-muted)}.sl-staff-grid h3{font-family:"Shippori Mincho";font-size:25px;font-weight:400;margin:7px 0}.sl-staff-grid p{font-size:12px;color:var(--sl-muted)}.sl-access{display:grid;grid-template-columns:1.15fr .85fr;min-height:650px;background:#d8cabc}.sl-access-photo{min-height:650px}.sl-access-copy{padding:100px 10vw 70px 70px}.sl-access-copy h2{font-family:"Cormorant Garamond";font-size:42px;font-weight:400;margin:30px 0 50px}.sl-access dl div{display:grid;grid-template-columns:100px 1fr;padding:15px 0;border-bottom:1px solid var(--sl-line)}.sl-access dt{font:500 10px "Cormorant Garamond";letter-spacing:.13em}.sl-access dd{margin:0;font-size:12px}.sl-access-copy>a{display:inline-block;color:var(--sl-ink);font-size:10px;letter-spacing:.14em;margin-top:35px}.sl-reservation{padding:130px 0;background:#8d6f5a;color:#fff;text-align:center}.sl-reservation h2{font-size:clamp(40px,5vw,68px);line-height:1.5;margin:28px 0}.sl-reservation>div>p:nth-of-type(2){font-size:13px;line-height:2}.sl-reserve-buttons{display:flex;justify-content:center;gap:12px;margin:45px auto 30px}.sl-reserve-buttons a{width:280px;padding:21px;background:#fff;color:var(--sl-ink);text-decoration:none;font-size:11px;letter-spacing:.12em;display:flex;justify-content:space-between}.sl-reservation small{font-size:9px;opacity:.7}.sl-footer{min-height:150px;padding:45px 38px;background:#1f1d1b;color:#fff;display:flex;align-items:center;justify-content:space-between}.sl-footer .sl-logo{color:#fff}.sl-footer p{font-size:9px;letter-spacing:.13em;color:#9f9890}
@media(max-width:800px){.sl-wrap{width:min(100% - 36px,1180px)}.sl-demo-bar{padding:8px 14px}.sl-demo-bar span{display:none}.sl-header{height:70px;padding:0 18px;grid-template-columns:1fr auto}.sl-header nav{display:none}.sl-reserve{padding:12px}.sl-hero{min-height:720px}.sl-hero-photo{width:72%;height:430px;top:0}.sl-hero-copy{left:18px;top:330px;width:calc(100% - 36px)}.sl-hero h1{font-size:38px;line-height:1.5;margin:20px 0}.sl-scroll{display:none}.sl-concept{padding:90px 0}.sl-concept-grid{grid-template-columns:1fr;gap:10px}.sl-concept-copy{padding-top:0}.sl-concept-copy .lead{font-size:20px}.sl-concept-photos{height:470px;margin-top:55px}.sl-photo-tall{width:72%;height:410px}.sl-photo-small{width:40%;height:220px}.sl-script{font-size:28px;right:0}.sl-feature{padding:90px 0 130px}.sl-feature-head,.sl-section-head{display:block}.sl-feature-grid{grid-template-columns:1fr;margin-top:40px}.sl-feature-grid article:nth-child(2){transform:none}.sl-feature-grid .sl-photo{height:390px}.sl-style{padding:90px 0}.sl-section-head h2{font-size:52px}.sl-style-grid{grid-template-columns:1fr 1fr;grid-template-rows:400px 280px;gap:10px}.sl-style-a{grid-column:span 2;grid-row:auto}.sl-style-b,.sl-style-c{width:100%;margin:0}.sl-menu{padding:90px 0}.sl-menu-grid{grid-template-columns:1fr;gap:45px}.sl-menu h2{font-size:58px}.sl-menu-list>div{grid-template-columns:90px 1fr auto;gap:8px}.sl-stylist{padding:90px 0}.sl-staff-grid{width:100%;grid-template-columns:1fr 1fr;gap:12px;margin-top:45px}.sl-staff-grid .sl-photo{height:330px}.sl-staff-grid article:nth-child(2){margin-top:55px}.sl-access{grid-template-columns:1fr}.sl-access-photo{min-height:420px}.sl-access-copy{padding:70px 18px}.sl-reservation{padding:90px 0}.sl-reserve-buttons{flex-direction:column}.sl-reserve-buttons a{width:100%}.sl-footer{padding:40px 18px;display:grid;gap:25px}.sl-footer p{margin:0}}

/* v1.0.42 — intentional headline lines stay intact between desktop/mobile breakpoints */
.sl-line{display:block;white-space:nowrap}
.sl-hero-copy{width:58%}
.sl-hero h1{font-size:clamp(38px,4.2vw,66px)}
@media(max-width:1100px) and (min-width:801px){
  .sl-hero-copy{width:62%}
  .sl-hero h1{font-size:clamp(36px,4vw,46px)}
  .sl-concept h2,.sl-feature h2{font-size:clamp(34px,3.8vw,46px)}
}
@media(max-width:800px){
  .sl-hero h1{font-size:clamp(28px,7.3vw,38px)}
  .sl-reservation h2{font-size:clamp(30px,8vw,42px)}
}

/* v1.0.42 narrow-width correction: preserve the same semantic lines without overflow */
@media(max-width:800px){
  .sl-hero-copy{width:calc(100% - 36px)}
  .sl-hero h1{font-size:clamp(22px,7.2vw,38px)}
  .sl-concept h2,.sl-feature h2{font-size:clamp(28px,8vw,40px)}
}

/* =========================================================
   v1.0.43 mobile polish — salon demo
   Re-compose the mobile layout instead of squeezing desktop geometry.
   ========================================================= */
@media(max-width:800px){
  .sl-page{overflow-x:hidden}
  .sl-wrap{width:min(calc(100% - 36px),1180px)}
  .sl-demo-bar{min-height:44px;gap:12px;padding:8px 14px;font-size:9px;letter-spacing:.08em}
  .sl-demo-bar p{display:block;min-width:0}
  .sl-demo-bar strong{white-space:nowrap}
  .sl-demo-bar a{font-size:9px;white-space:nowrap}

  .sl-header{height:66px;padding:0 16px;grid-template-columns:minmax(0,1fr) auto;gap:10px}
  .sl-logo{font-size:14px;letter-spacing:.1em;white-space:nowrap}
  .sl-logo span{width:23px;height:23px;margin-right:6px}
  .sl-reserve{padding:11px 12px;font-size:9px;letter-spacing:.1em;white-space:nowrap}

  .sl-hero{min-height:auto;padding-bottom:72px;background:var(--sl-bg)}
  .sl-hero-photo{position:relative;inset:auto;width:100%;height:58vw;min-height:280px;max-height:390px}
  .sl-hero-copy{position:relative;left:auto;top:auto;width:min(calc(100% - 36px),1180px);margin:0 auto;padding-top:42px}
  .sl-hero h1{font-size:clamp(29px,8vw,38px);line-height:1.55;margin:18px 0 22px;letter-spacing:.02em}
  .sl-hero-copy>p:last-child{font-size:13px;line-height:1.9}

  .sl-concept{padding:82px 0 96px}
  .sl-concept h2,.sl-feature h2{font-size:clamp(28px,7.7vw,36px);line-height:1.6}
  .sl-concept-copy .lead{font-size:19px;line-height:1.8}
  .sl-concept-copy p:last-child{font-size:13px;line-height:2}
  .sl-concept-photos{height:420px;margin-top:45px}
  .sl-photo-tall{width:76%;height:360px}
  .sl-photo-small{width:43%;height:190px}
  .sl-script{top:16px;font-size:24px}

  .sl-feature{padding:82px 0 100px}
  .sl-feature-head>p,.sl-section-head>p{font-size:12px;line-height:1.9}
  .sl-feature-grid{gap:44px;margin-top:34px}
  .sl-feature-grid .sl-photo{height:92vw;max-height:430px;margin-bottom:22px}
  .sl-feature-grid strong{font-size:19px}
  .sl-feature-grid p{font-size:12px;line-height:1.9}

  .sl-style{padding:82px 0}
  .sl-section-head h2{font-size:clamp(42px,13vw,54px);line-height:1}
  .sl-style-grid{margin-top:42px;grid-template-columns:1fr 1fr;grid-template-rows:84vw 52vw;max-height:none}

  .sl-menu{padding:82px 0}
  .sl-menu-grid{gap:34px}
  .sl-menu h2{font-size:clamp(48px,14vw,58px);margin:20px 0 28px}
  .sl-menu-list>div{grid-template-columns:72px minmax(0,1fr) auto;gap:10px;padding:19px 0}
  .sl-menu-list span{font-size:9px;letter-spacing:.08em;overflow-wrap:anywhere}
  .sl-menu-list strong{font-size:13px;line-height:1.6}
  .sl-menu-list b{font-size:16px;white-space:nowrap}

  .sl-stylist{padding:82px 0}
  .sl-staff-grid{width:100%;grid-template-columns:1fr;gap:48px;margin-top:42px}
  .sl-staff-grid article:nth-child(2){margin-top:0}
  .sl-staff-grid .sl-photo{height:112vw;max-height:540px}
  .sl-staff-grid p{line-height:1.8}

  .sl-access-photo{min-height:340px}
  .sl-access-copy{padding:58px 18px 66px}
  .sl-access-copy h2{font-size:34px;margin:24px 0 34px;overflow-wrap:anywhere}
  .sl-access dl div{grid-template-columns:82px minmax(0,1fr);gap:8px}
  .sl-access dd{line-height:1.7}

  .sl-reservation{padding:82px 0}
  .sl-reservation h2{font-size:clamp(28px,7.8vw,38px);line-height:1.65}
  .sl-reserve-buttons{margin-top:34px}
  .sl-footer{min-height:auto;padding:36px 18px;grid-template-columns:1fr;gap:18px}
}

@media(max-width:390px){
  .sl-header{padding-inline:12px}
  .sl-logo{font-size:12px}
  .sl-reserve{padding:10px 9px;font-size:8px}
  .sl-hero h1{font-size:clamp(27px,7.6vw,31px)}
  .sl-concept h2,.sl-feature h2,.sl-reservation h2{font-size:clamp(26px,7.2vw,30px)}
  .sl-menu-list>div{grid-template-columns:64px minmax(0,1fr) auto;gap:7px}
}