/* JPN Beauty Lounge — v2 styles
One message per band · white ground · serif display over sans body · one accent (CTA only) */
/* Palette — from the logo: lacquer black, antique gold, ivory. Single committed theme. */
:root{
color-scheme:light;
--bg:#f8f7f3; /* porcelain ground */
--sand:#eeeae2; /* stone: alternating light band */
--sand-panel:#e4ded3; /* photo placeholder on stone */
--brown:#6e5c3e; /* deep bronze for small labels */
--bg-2:#ffffff; /* white cards */
--fg:#161513;
--muted:#6d6961;
--line:#e3dfd6;
--panel:#ebe7df;
--ink:#0e0e0d; /* black bands */
--ink-2:#151412;
--ink-fg:#f1ede4;
--ink-muted:#aaa497;
--ink-line:rgba(190,164,112,.26);
--gold:#bfa26c; /* accent, slightly muted */
--gold-2:#dcc89c; /* light gold on black */
--gold-deep:#8c7347; /* gold for small text on light */
--gold-grad:linear-gradient(100deg,#eadfc0 0%,#cfb682 35%,#a88a4f 65%,#dcc99a 100%);
--accent:var(--gold-deep); --accent-fg:#0b0b0b;
--line-green:#06c755; --msgr:#0a7cff;
--serif:"Newsreader","Zen Old Mincho","Hiragino Mincho ProN","Yu Mincho",Georgia,serif;
--serif-ja:"Zen Old Mincho","Hiragino Mincho ProN","Yu Mincho",serif;
--sans:"Figtree","Zen Kaku Gothic New","Hiragino Sans","Yu Gothic",system-ui,sans-serif;
--gutter:clamp(20px,6vw,88px); --band:clamp(88px,12vw,168px);
--cta-bar:64px;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
html.smooth{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--fg);font-family:var(--sans);font-size:16px;line-height:1.75;-webkit-font-smoothing:antialiased}
html[lang="ja"] body{line-height:1.9}
h1,h2,h3{font-family:var(--serif);font-weight:500;line-height:1.12;margin:0;text-wrap:balance;letter-spacing:.005em}
html[lang="ja"] h1,html[lang="ja"] h2,html[lang="ja"] h3{font-family:var(--serif-ja);line-height:1.3;letter-spacing:.02em;word-break:normal}
html[lang="ja"] h1{font-size:clamp(30px,5vw,64px)}
h1{font-size:clamp(36px,5.6vw,72px)}
h2{font-size:clamp(28px,3.8vw,46px)}
h3{font-size:clamp(20px,2vw,24px)}
p{margin:0}
a{color:inherit;text-decoration:none}
img,svg{max-width:100%;display:block}
ul,ol{margin:0;padding:0;list-style:none}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.wrap{max-width:1240px;margin:0 auto;padding-inline:var(--gutter)}
.narrow{max-width:800px}
.eyebrow{font-size:13px;letter-spacing:.06em;color:var(--gold-deep);font-weight:500}
html[lang="ja"] .eyebrow{letter-spacing:.06em}
.lead{color:var(--muted);max-width:60ch;font-size:clamp(16px,1.25vw,18px)}
.center{text-align:center}
.center .lead,.center-lead{margin-inline:auto}
.band{padding-block:var(--band)}
.band + .band{border-top:1px solid var(--line)}
.band.alt{background:var(--bg-2)}
.band.tone-ivory{background:var(--bg)}
.band.tone-sand{background:var(--sand)}
.band.tone-sand .ph{background:var(--sand-panel)}
.band.tone-sand .price-card,.band.tone-sand .trust,.band.tone-sand .faq details,.band.tone-sand .concern-grid a{background:var(--bg-2)}
.band.tone-sand .faq{border-top:0}.band.tone-sand details{border:1px solid #e0d4bb;margin-bottom:10px;padding-inline:22px}
.band.tone-sand .steps{border-top-color:#dccfb3}.band.tone-sand .steps li,.band.tone-sand td,.band.tone-sand th{border-bottom-color:#dccfb3}
.band.tone-sand .price-tbl td.name,.band.tone-sand .price-tbl th.name{background:var(--sand)}
.band.tone-sand .price-tbl tbody tr:hover td.name{background:#e6dbc5}
.band.tone-sand .tags li{background:var(--bg-2)}
.band.tone-sand .eyebrow,.band.tone-sand .cause i,.band.tone-sand .steps li i{color:var(--brown)}
/* centered section headings: short gold rule like the LP */
.center.stack h2::after,.center > h2::after{content:"";display:block;width:56px;height:1px;background:#a38657;margin:22px auto 0}
.band.dark .center.stack h2::after{background:var(--gold)}
.band.dark{background:var(--ink);color:var(--ink-fg);border-top:0}
.band.dark + .band{border-top:0}
.band.dark .eyebrow{color:var(--gold)}
.band.dark .lead,.band.dark .note,.band.dark .muted,.band.dark .steps li span,.band.dark .cat p,.band.dark .person p,.band.dark .case p,.band.dark .case dt{color:var(--ink-muted)}
.band.dark .steps,.band.dark .steps li,.band.dark .faq,.band.dark details,.band.dark td,.band.dark th{border-color:var(--ink-line)}
.band.dark .ph{background:var(--ink-2)}
.band.dark .ph::before{background:linear-gradient(135deg,rgba(201,169,110,.08) 0 1px,transparent 1px) 0 0/28px 28px,radial-gradient(ellipse at 30% 20%,rgba(201,169,110,.12),transparent 60%)}
.band.dark .ph > span{color:var(--ink-muted);border-color:rgba(201,169,110,.35)}
.band.dark .ba div{border-color:var(--ink)}
.band.dark .ba div:last-child{background:rgba(201,169,110,.08)}
.band.dark .ba em{background:var(--ink);color:var(--gold-2)}
.band.dark .btn{border-color:var(--gold);color:var(--ink-fg)}
.band.dark .btn:hover{background:var(--gold);color:var(--ink)}
.band.dark .btn.solid{background:var(--gold);border-color:var(--gold);color:var(--ink)}
.band.dark .btn.solid:hover{background:var(--gold-2);border-color:var(--gold-2)}
.band.dark h2{background:var(--gold-grad);-webkit-background-clip:text;background-clip:text;color:transparent;display:inline-block;padding-bottom:.12em;margin-bottom:-.12em}
.band.dark h3{color:var(--ink-fg)}
.band.dark .steps li i{color:var(--gold)}
.band.dark .steps li b{color:var(--ink-fg)}
.band.tight{padding-block:calc(var(--band)*.6)}
.stack{display:grid;gap:22px}
.center.stack{max-width:720px;margin-inline:auto}
.mt{margin-top:16px}.mt2{margin-top:28px}.mt3{margin-top:64px}
.prose{max-width:66ch;display:grid;gap:18px}
.prose p{color:var(--muted)}
.prose h3{margin-top:14px}
/* buttons: outline / solid / channel colours */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:52px;padding:0 30px;font:500 14px/1 var(--sans);letter-spacing:.04em;border:1px solid var(--fg);color:var(--fg);background:transparent;cursor:pointer;transition:background .2s,color .2s,border-color .2s;white-space:nowrap}
html[lang="ja"] .btn{letter-spacing:.06em;font-size:13px;text-transform:none}
.btn:hover{background:var(--fg);color:var(--bg)}
.btn.solid{background:var(--fg);color:var(--bg)}
.btn.solid:hover{background:var(--gold);border-color:var(--gold);color:var(--ink)}
.btn.msgr{border-color:var(--msgr);color:var(--msgr)}
.btn.msgr:hover{background:var(--msgr);color:#fff}
.btn.line{border-color:var(--line-green);color:#0b8a3e}
.btn.line:hover{background:var(--line-green);border-color:var(--line-green);color:#fff}
.btn.line-solid{background:var(--line-green);border-color:var(--line-green);color:#fff}
.btn svg{width:16px;height:16px;fill:currentColor;flex:none}
.btn-row{display:flex;flex-wrap:wrap;gap:12px}
/* header */
header.top{position:sticky;top:env(safe-area-inset-top,0px);z-index:40;background:rgba(11,11,11,.92);backdrop-filter:blur(12px);border-bottom:1px solid var(--ink-line);color:var(--ink-fg)}
.nav{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:76px}
.logo{display:inline-flex;align-items:center;gap:16px;white-space:nowrap;line-height:1;color:var(--gold-2)}
.logo img{height:44px;width:auto}
.logo .word{font-family:var(--serif);font-size:24px;letter-spacing:.12em;font-weight:500;background:var(--gold-grad);-webkit-background-clip:text;background-clip:text;color:transparent;padding:.1em 2px .22em 0;line-height:1.2;margin-bottom:-.2em}
.logo small{display:block;font:500 8.5px/1 var(--sans);letter-spacing:.32em;color:var(--ink-muted);margin-top:6px}
@media (max-width:480px){.logo .word{font-size:15px;letter-spacing:.02em}.logo img{height:32px}.logo{gap:8px;min-width:0}.nav{gap:8px}.nav-right{gap:6px;flex:none}.lang a{padding:6px 7px;font-size:10.5px}.nav-toggle{width:36px;margin-right:-6px}}
@media (max-width:400px){.logo .word{display:none}}
.nav-links{display:flex;align-items:center;gap:28px;font-size:13px;letter-spacing:.05em;white-space:nowrap}
html[lang="ja"] .nav-links{gap:22px;font-size:13px}
@media (max-width:1200px){.nav-links{gap:18px;font-size:12.5px}html[lang="ja"] .nav-links{gap:16px;font-size:12.5px}.logo .word{font-size:20px}.logo img{height:38px}.nav .btn.hdr{padding:0 18px}}
@media (max-width:1000px) and (min-width:861px){.nav-links{gap:14px;font-size:12px}.logo .word{display:none}.lang a{padding:7px 9px}}
.nav-links a{color:var(--ink-muted);padding:6px 0;border-bottom:1px solid transparent;transition:color .2s}
.nav-links a:hover,.nav-links a[aria-current="page"]{color:var(--ink-fg)}
.nav-links a[aria-current="page"]{border-bottom-color:var(--gold)}
/* dropdown */
.nav-links .has-sub{position:relative;display:flex;align-items:center;align-self:stretch;min-height:76px}
.nav-links .has-sub > a{display:inline-flex;align-items:center;gap:6px}
.nav-links .chev{transition:transform .2s}
.nav-links .has-sub:hover .chev,.nav-links .has-sub:focus-within .chev{transform:rotate(180deg)}
.nav-links .sub{display:none;position:absolute;left:-22px;top:100%;min-width:260px;background:var(--ink);border:1px solid var(--ink-line);border-top:1px solid var(--gold);padding:8px 0;z-index:60;box-shadow:0 18px 40px rgba(0,0,0,.35)}
.nav-links .has-sub:hover .sub,.nav-links .has-sub:focus-within .sub{display:grid}
.nav-links .sub a{display:block;padding:11px 22px;border-bottom:0;font-size:13px;color:var(--ink-muted)}
.nav-links .sub a:hover,.nav-links .sub a[aria-current="page"]{color:var(--gold-2);background:rgba(255,255,255,.03)}
.nav-links .sub a.all{font-size:11px;letter-spacing:.06em;color:var(--gold);border-bottom:1px solid var(--ink-line);margin-bottom:4px}
.nav-right{display:flex;align-items:center;gap:14px}
.lang{display:inline-flex;border:1px solid var(--ink-line);border-radius:999px;overflow:hidden;font-size:12px;letter-spacing:.08em}
.lang a{padding:7px 12px;color:var(--ink-muted);white-space:nowrap}
.lang a[aria-current="true"]{background:var(--gold);color:var(--ink)}
.nav .btn.hdr{min-height:44px;padding:0 26px;font-size:13px;letter-spacing:.1em;text-transform:none;border:1px solid var(--gold);color:var(--ink-fg);background:transparent;box-shadow:inset 0 0 0 1px rgba(201,169,110,.25)}
.nav .btn.hdr:hover{background:var(--gold);color:var(--ink)}
.nav-toggle{display:none;width:44px;height:44px;align-items:center;justify-content:center;margin-right:-10px}
@media (max-width:860px){.nav-toggle{display:inline-flex}}
.nav-toggle span{display:block;width:22px;height:1.5px;background:var(--gold-2);position:relative;transition:background .2s}
.nav-toggle span::before,.nav-toggle span::after{content:"";position:absolute;left:0;width:22px;height:1.5px;background:var(--gold-2);transition:transform .3s,top .3s}
.nav-toggle span::before{top:-7px}.nav-toggle span::after{top:7px}
.nav-toggle[aria-expanded="true"] span{background:transparent}
.nav-toggle[aria-expanded="true"] span::before{top:0;transform:rotate(45deg)}
.nav-toggle[aria-expanded="true"] span::after{top:0;transform:rotate(-45deg)}
@media (max-width:860px){
.nav-links{display:none}
.nav .btn.hdr{min-height:38px;padding:0 14px;font-size:12px}
.nav-toggle{display:inline-flex}
.nav-open .nav-links{display:grid;position:absolute;left:0;right:0;top:100%;background:var(--ink);border-bottom:1px solid var(--ink-line);padding:8px var(--gutter) 20px;gap:0}
.nav-open .nav-links a{padding:16px 0;border-bottom:1px solid var(--ink-line);font-size:16px;font-family:var(--serif);letter-spacing:.04em}
.nav-open .nav-links a:last-child{border-bottom:0}
.nav-open .nav-links .has-sub{display:block;min-height:0;align-self:auto}
.nav-open .nav-links .has-sub > a{border-bottom:1px solid var(--ink-line)}
.nav-open .nav-links .chev{display:none}
.nav-open .nav-links .sub{display:grid;position:static;min-width:0;background:transparent;border:0;box-shadow:none;padding:0 0 8px 18px}
.nav-open .nav-links .sub a{font-family:var(--sans);font-size:14px;padding:12px 0;border-bottom:1px solid var(--ink-line);color:var(--ink-muted)}
.nav-open .nav-links .sub a.all{display:none}
}
@media (max-width:480px){.lang a{padding:7px 10px}.nav .btn.hdr{display:none}}
/* page hero (sub pages) */
.page-hero{padding-block:clamp(64px,9vw,128px) clamp(40px,6vw,72px)}
.page-hero h1{color:var(--fg)}
.page-hero h1{font-size:clamp(34px,4.8vw,60px);max-width:18ch}
.crumbs{font-size:12.5px;letter-spacing:.04em;color:var(--gold-deep);display:flex;gap:10px;margin-bottom:20px}
/* placeholders */
.ph{position:relative;background:var(--panel);overflow:hidden;max-width:100%}
.ph::before{content:"";position:absolute;inset:0;background:
linear-gradient(135deg,color-mix(in srgb,var(--fg) 5%,transparent) 0 1px,transparent 1px) 0 0/28px 28px,
radial-gradient(ellipse at 30% 20%,color-mix(in srgb,var(--accent) 10%,transparent),transparent 60%)}
.ph > span{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);font:500 10.5px/1.5 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--muted);text-align:center;padding:8px 12px;border:1px dashed color-mix(in srgb,var(--muted) 45%,transparent);max-width:88%}
/* hero */
.hero{position:relative;min-height:min(84vh,800px);display:grid;align-items:end;color:var(--ink-fg);background:var(--ink);isolation:isolate}
.hero .ph{position:absolute;inset:0;background:radial-gradient(ellipse at 70% 30%,#3a342a 0%,#1a1813 45%,#0b0b0b 100%)}
.hero .ph::before{opacity:.45}
.hero .ph > span{left:auto;right:var(--gutter);top:24px;transform:none;color:#d9dedc;border-color:#7a8481}
.hero::after{content:"";position:absolute;inset:auto 0 0 0;height:60%;background:linear-gradient(180deg,transparent,rgba(0,0,0,.6));pointer-events:none}
.hero::before{content:"";position:absolute;left:var(--gutter);right:var(--gutter);bottom:0;height:1px;background:linear-gradient(90deg,var(--gold),transparent 70%);z-index:1}
.hero .inner{position:relative;z-index:1;padding-block:clamp(48px,8vw,104px)}
.hero .eyebrow{color:var(--gold)}
.hero h1{max-width:13ch;margin-top:16px;background:var(--gold-grad);-webkit-background-clip:text;background-clip:text;color:transparent;padding-bottom:.12em;line-height:1.18}
html[lang="ja"] .hero h1{max-width:none;word-break:keep-all;line-break:strict}
@media (max-width:560px){html[lang="ja"] .hero h1{word-break:normal;font-size:clamp(26px,7.4vw,32px)}html[lang="ja"] .hero h1 br{display:none}}
.hero .lead{color:var(--ink-muted);margin-top:20px;max-width:52ch}
.hero .btn{border-color:var(--gold);color:var(--ink-fg)}
.hero .btn:hover{background:var(--gold);color:var(--ink)}
.hero .btn.solid{background:var(--gold);color:var(--ink);border-color:var(--gold)}
.hero .btn.solid:hover{background:var(--gold-2);border-color:var(--gold-2)}
.hero .btn-row{margin-top:32px}
.hero-meta{display:flex;flex-wrap:wrap;gap:8px 22px;margin-top:26px;font-size:12.5px;letter-spacing:.06em;color:var(--ink-muted)}
.hero-meta li::before{content:"·";margin-right:8px;opacity:.6}
.hero-meta li:first-child::before{content:none}
/* trust strip */
.trust{display:grid;grid-template-columns:repeat(3,1fr);border:1px solid var(--line);background:var(--bg-2)}
.trust div{padding:34px 28px 32px;border-right:1px solid var(--line);display:grid;gap:10px;align-content:start}
.trust i{font:500 12px/1 var(--sans);font-style:normal;letter-spacing:.2em;color:var(--gold-deep);padding-bottom:12px;border-bottom:1px solid var(--gold);width:34px;margin-bottom:4px}
.trust small{display:block;margin-top:10px;font-size:12.5px;color:var(--muted)}
.trust div:last-child{border-right:0}
.trust b{font-family:var(--serif);font-weight:500;font-size:23px;line-height:1.2}
html[lang="ja"] .trust b{font-family:var(--serif-ja);font-size:20px}
.trust p{font-size:13.5px;color:var(--muted)}
@media (max-width:760px){.trust{grid-template-columns:1fr}.trust div{border-right:0;border-bottom:1px solid var(--line)}.trust div:last-child{border-bottom:0}}
/* categories */
.cats{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(16px,2.5vw,32px);margin-top:48px}
.cat{display:grid;gap:14px;align-content:start}
.cat .ph{aspect-ratio:3/4;transition:transform .4s}
.cat .ph h3{position:absolute;inset:auto 0 0 0;padding:30px 26px;color:var(--gold-2);font-size:clamp(26px,2.6vw,34px);background:linear-gradient(180deg,transparent,rgba(0,0,0,.55));letter-spacing:.06em}
.cat p{color:var(--muted);font-size:14.5px}
.cat small{font-size:11.5px;letter-spacing:.06em;color:var(--gold-deep)}
.cat:hover .ph h3{text-decoration:underline;text-underline-offset:6px;text-decoration-thickness:1px}
@media (max-width:760px){.cats{grid-template-columns:1fr}.cat .ph{aspect-ratio:16/10}}
/* split */
.split{display:grid;grid-template-columns:1.05fr 1fr;gap:clamp(28px,5vw,88px);align-items:center}
.split.rev{grid-template-columns:1fr 1.05fr}
.split .ph{aspect-ratio:4/5;border-radius:0 0 0 160px}
.split .ph.sq{aspect-ratio:1;border-radius:0}
.ba{position:absolute;inset:0;display:grid;grid-template-columns:1fr 1fr}
.ba div{position:relative;border-right:1px solid var(--bg)}
.ba div:last-child{border-right:0;background:color-mix(in srgb,var(--accent) 8%,transparent)}
.ba em{position:absolute;left:14px;top:14px;font:500 10px/1 var(--sans);letter-spacing:.06em;font-style:normal;background:var(--bg);color:var(--fg);padding:6px 8px}
.steps{display:grid;margin:28px 0 0;padding:0;border-top:1px solid var(--line)}
.steps li{display:grid;grid-template-columns:56px 1fr;gap:16px;padding:22px 0;border-bottom:1px solid var(--line);font-size:15px}
.steps li i{font:500 12px/1 var(--sans);font-style:normal;letter-spacing:.1em;color:var(--gold-deep);padding-top:5px}
.steps li b{font-weight:500;display:block}
.steps li span{color:var(--muted);font-size:14px}
.note{font-size:12.5px;color:var(--muted);margin-top:14px}
@media (max-width:860px){.split,.split.rev{grid-template-columns:1fr}.split .ph{aspect-ratio:4/3;border-radius:0 0 0 110px}}
/* team */
.team{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(20px,3vw,40px);margin-top:48px}
.person{display:grid;gap:12px;justify-items:center;text-align:center}
.person .ph{width:min(220px,70vw);aspect-ratio:1;border-radius:50%;box-shadow:0 0 0 1px var(--line),0 0 0 7px var(--bg),0 0 0 8px var(--gold)}
.person b{font-family:var(--serif);font-weight:500;font-size:22px}
html[lang="ja"] .person b{font-family:var(--serif-ja);font-size:19px}
.person small{font-size:11.5px;letter-spacing:.06em;color:var(--gold-deep)}
.person p{font-size:14px;color:var(--muted);max-width:30ch}
@media (max-width:700px){.team{grid-template-columns:1fr}}
/* menu / pricing */
.menu{margin-top:40px;display:grid;gap:44px}
.menu h3{padding-bottom:12px;border-bottom:1px solid var(--gold);margin-bottom:4px}
table{width:100%;border-collapse:collapse;font-size:15px}
td,th{padding:15px 0;border-bottom:1px solid var(--line);vertical-align:top;text-align:left}
th{font:500 12px/1 var(--sans);letter-spacing:.04em;color:var(--muted);padding-bottom:9px}
th.n,td.n{font-variant-numeric:tabular-nums;text-align:right;white-space:nowrap;padding-left:16px}
td.n{font-family:var(--serif);font-size:18px}
td .d{display:block;font-size:13px;color:var(--muted)}
td a{border-bottom:1px solid var(--line)}
td a:hover{border-color:var(--fg)}
.tag{display:inline-block;font:500 9.5px/1 var(--sans);letter-spacing:.06em;padding:5px 7px;border:1px solid var(--gold-deep);color:var(--gold-deep);margin-left:8px;vertical-align:middle}
.tbl{overflow-x:auto}
/* price table: per-session + course total */
.price-tbl table{min-width:760px}
.price-tbl th.name,.price-tbl td.name{position:sticky;left:0;background:inherit;z-index:1;min-width:220px;padding-right:16px}
.band .price-tbl td.name{background:var(--bg)}.band.alt .price-tbl td.name{background:var(--bg-2)}.band .price-tbl th.name{background:var(--bg)}.band.alt .price-tbl th.name{background:var(--bg-2)}
.price-tbl td.n{font-size:17px;line-height:1.2}
.price-tbl td.n b{font-weight:500;display:block}
.price-tbl td.n .tot{display:block;font:400 11.5px/1.4 var(--sans);color:var(--muted);margin-top:4px;letter-spacing:.02em}
.price-tbl td.x{color:var(--muted);font-family:var(--sans);font-size:14px}
.price-tbl th:nth-child(2),.price-tbl td:nth-child(2){color:var(--gold-deep)}
.price-tbl{position:relative}
.price-tbl .swipe{display:none;font:500 10.5px/1 var(--sans);letter-spacing:.06em;color:var(--muted);margin:0 0 10px;text-align:right}
.note.legend{margin-top:14px}
.cats-4{grid-template-columns:repeat(4,1fr)}
.cats-4 .cat .ph h3{font-size:clamp(20px,1.7vw,24px);padding:22px 18px;letter-spacing:.03em}
.cats-4 .cat .ph > span{display:none}
@media (max-width:1000px){.cats-4{grid-template-columns:repeat(2,1fr)}}
@media (max-width:860px){.price-tbl .swipe{display:block}.price-tbl table{min-width:640px}.price-tbl th.name,.price-tbl td.name{min-width:150px;max-width:170px;padding-right:12px;box-shadow:8px 0 12px -10px rgba(0,0,0,.25)}.price-tbl td.n{font-size:15px;padding-left:12px}.price-tbl td.n .tot{font-size:11px}.price-tbl td .d{font-size:12px}.price-tbl .tag{display:block;width:max-content;margin:6px 0 0}}
@media (max-width:560px){.cats-4{grid-template-columns:1fr}}
.price-card{border:1px solid var(--line);background:var(--bg-2);padding:28px;display:grid;gap:8px}
.price-card .big{font-family:var(--serif);font-size:clamp(30px,3vw,40px);line-height:1;font-variant-numeric:tabular-nums}
.price-card .reg{color:var(--muted);font-size:14px}
.price-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:16px;margin-top:28px}
/* access */
.access{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,5vw,72px);align-items:start}
.access .ph{aspect-ratio:4/3}
.map{aspect-ratio:4/3;background:var(--panel);border:1px solid var(--line);position:relative}
.map iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.map .ph{position:absolute;inset:0}
.route{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:20px}
.route .ph{aspect-ratio:1}
.route figcaption{font-size:12.5px;color:var(--muted);margin-top:8px}
.route figure{margin:0}
.addr dl{display:grid;grid-template-columns:110px 1fr;gap:10px 16px;margin:24px 0 0;font-size:15px}
.addr dt{font:500 10.5px/1.9 var(--sans);letter-spacing:.06em;color:var(--muted)}
.addr dd{margin:0}
@media (max-width:860px){.access{grid-template-columns:1fr}}
/* instagram */
.ig-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:6px;margin-top:40px}
.ig-grid .ph,.ig-grid a{aspect-ratio:1;display:block;position:relative;overflow:hidden}
.ig-grid img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.ig-grid .ph > span{font-size:9.5px;letter-spacing:.1em}
@media (max-width:860px){.ig-grid{grid-template-columns:repeat(3,1fr)}}
.ig-handle{display:inline-flex;align-items:center;gap:8px;font-size:14px;margin-top:20px;border-bottom:1px solid var(--line)}
.ig-handle svg{width:18px;height:18px}
/* reviews */
.reviews{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:40px}
.review{border:1px solid var(--line);background:var(--bg-2);padding:28px;display:grid;gap:14px;align-content:start}
.review .stars{color:var(--gold-deep);letter-spacing:2px;font-size:14px}
.review q{font-family:var(--serif);font-size:19px;line-height:1.45;quotes:"“" "”"}
html[lang="ja"] .review q{font-family:var(--serif-ja);font-size:16px}
.review .who{font-size:12.5px;color:var(--muted);display:flex;align-items:center;gap:8px}
.review .who i{width:28px;height:28px;border-radius:50%;background:var(--panel);display:inline-block}
.gsum{display:flex;align-items:center;gap:14px;justify-content:center;margin-top:20px;font-size:14px;color:var(--muted)}
.gsum b{font-family:var(--serif);font-size:32px;color:var(--fg);font-weight:500;font-variant-numeric:tabular-nums}
@media (max-width:860px){.reviews{grid-template-columns:1fr}}
/* social icons */
.social{display:flex;gap:8px;flex-wrap:wrap}
.social a{width:42px;height:42px;border:1px solid var(--line);display:inline-flex;align-items:center;justify-content:center;color:var(--fg);transition:background .2s,color .2s,border-color .2s}
.social a:hover{background:var(--fg);color:var(--bg);border-color:var(--fg)}
.social svg{width:17px;height:17px;fill:currentColor}
.social-wrap{display:flex;justify-content:center;margin-top:32px}
.social-wrap .social a{width:50px;height:50px}
.social-wrap .social svg{width:20px;height:20px}
.fgrid .social{margin-top:16px}
/* faq */
.faq{max-width:760px;margin:56px auto 0;border-top:1px solid var(--line)}
.faq.left{margin-inline:0}
details{border-bottom:1px solid var(--line)}
summary{cursor:pointer;padding:24px 0;font-size:16.5px;font-weight:500;list-style:none;display:flex;justify-content:space-between;gap:16px}
summary::-webkit-details-marker{display:none}
summary::after{content:"+";font-family:var(--serif);font-size:28px;line-height:.8;color:var(--gold-deep);flex:none;transition:transform .25s}
details[open] summary::after{transform:rotate(45deg)}
details p{padding:0 0 20px;color:var(--muted);font-size:15px;max-width:62ch}
/* results list */
.cases{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(20px,3vw,40px);margin-top:64px}
.case{display:grid;gap:12px}
.case .ph{aspect-ratio:1}
.case b{font-weight:500}
.case p{font-size:14px;color:var(--muted)}
.case dl{display:grid;grid-template-columns:auto 1fr;gap:4px 12px;font-size:13px;margin:0}
.case dt{color:var(--muted)}
.case dd{margin:0}
@media (max-width:860px){.cases{grid-template-columns:1fr}}
/* about facts */
.facts{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);border:1px solid var(--line);margin-top:40px}
.facts div{background:var(--bg-2);padding:30px 26px;display:grid;gap:6px}
.facts b{font-family:var(--serif);font-size:clamp(36px,4vw,52px);line-height:1;font-weight:500;font-variant-numeric:tabular-nums}
.facts span{font-size:13.5px;color:var(--muted)}
@media (max-width:700px){.facts{grid-template-columns:1fr}}
/* final CTA band + footer */
.contact{background:var(--ink);color:var(--ink-fg);border-top:0;position:relative}
.contact::before{content:"";position:absolute;left:50%;top:0;transform:translateX(-50%);width:min(60%,520px);height:1px;background:linear-gradient(90deg,transparent,var(--gold),transparent)}
.contact .eyebrow{color:var(--gold)}
.contact .lead{color:var(--ink-muted)}
.contact .num{background:var(--gold-grad);-webkit-background-clip:text;background-clip:text;color:transparent;display:inline-block;padding-bottom:.1em}
.contact h2{background:var(--gold-grad);-webkit-background-clip:text;background-clip:text;color:transparent;display:inline-block;padding-bottom:.12em;margin-bottom:-.12em}
.contact .btn.msgr{border-color:var(--msgr);color:#7fb6ff}
.contact .btn.line{border-color:var(--line-green);color:#5fd98a}
.contact .social a{border-color:var(--ink-line);color:var(--gold-2)}
.contact .social a:hover{background:var(--gold);border-color:var(--gold);color:var(--ink)}
.contact .btn-row{justify-content:center;margin-top:28px}
.contact .num{font-family:var(--serif);font-size:clamp(24px,3vw,32px);margin-top:20px;letter-spacing:.04em;user-select:all}
footer{padding-block:56px 36px;border-top:1px solid var(--ink-line);font-size:13.5px;color:var(--ink-muted);background:var(--ink)}
.fgrid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1.2fr;gap:32px;align-items:start}
.fgrid h4{margin:0 0 14px;font:500 10.5px/1 var(--sans);letter-spacing:.2em;color:var(--gold)}
.fgrid ul{display:grid;gap:9px}
.fgrid a:hover{color:var(--ink-fg)}
.fgrid .logo img{height:auto;width:150px}
.fgrid .social{display:none}
.fgrid .address-block{display:grid;gap:4px}
.fgrid .social a{border-color:var(--ink-line);color:var(--gold-2)}
.fgrid .social a:hover{background:var(--gold);border-color:var(--gold);color:var(--ink)}
.fgrid address{font-style:normal;margin-top:14px;line-height:1.6}
.fbottom{display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px 24px;margin-top:40px;padding-top:20px;border-top:1px solid var(--ink-line);font-size:12.5px}
@media (max-width:860px){.fgrid{grid-template-columns:1fr 1fr}}
@media (max-width:480px){.fgrid{grid-template-columns:1fr}}
@media (max-width:860px){footer{padding-bottom:calc(var(--cta-bar) + 36px + env(safe-area-inset-bottom,0px))}}
/* mobile fixed CTA bar */
.cta-bar{display:none}
@media (max-width:860px){
.cta-bar{position:fixed;left:0;right:0;bottom:0;z-index:50;display:grid;grid-template-columns:1fr 1fr;gap:8px;padding:8px var(--gutter) calc(8px + env(safe-area-inset-bottom,0px));background:rgba(11,11,11,.94);backdrop-filter:blur(10px);border-top:1px solid var(--ink-line)}
.cta-bar .btn{border-color:var(--gold);color:var(--ink-fg)}
.cta-bar .btn.solid{background:var(--gold);color:var(--ink)}
.cta-bar .btn{min-height:46px;padding:0 10px;font-size:11px;letter-spacing:.08em}
html[lang="ja"] .cta-bar .btn{font-size:12.5px}
}
.todo{display:inline-block;font:500 9.5px/1 var(--sans);letter-spacing:.1em;background:#fff3c4;color:#6b4e00;padding:4px 6px;margin-left:6px;vertical-align:middle}
@media (prefers-reduced-motion:reduce){*{transition:none !important}html{scroll-behavior:auto}}
/* ---------- journal / blog ---------- */
.posts{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(20px,3vw,36px);margin-top:40px}
.post-card{display:grid;gap:12px;align-content:start;color:inherit}
.post-card .ph{aspect-ratio:16/10}
.post-card h3{font-size:clamp(20px,1.8vw,24px);line-height:1.25}
.post-card p{font-size:14px;color:var(--muted)}
.post-card:hover h3{color:var(--gold-deep)}
.post-meta{display:flex;gap:14px;align-items:baseline;font-size:12.5px;color:var(--muted)}
@media (max-width:860px){.posts{grid-template-columns:1fr}}
.post .page-hero h1{font-size:clamp(32px,4.2vw,52px);max-width:24ch}
.byline{display:flex;flex-wrap:wrap;gap:6px 18px;margin-top:22px;font-size:13px;color:var(--muted);border-top:1px solid var(--line);padding-top:16px}
.byline .read::before{content:"·";margin-right:10px}
.post-hero{aspect-ratio:16/9;margin-top:8px}
.post-grid{display:grid;grid-template-columns:220px minmax(0,1fr);gap:clamp(28px,5vw,80px);align-items:start;padding-block:clamp(40px,6vw,72px)}
.toc{position:sticky;top:calc(90px + env(safe-area-inset-top,0px));font-size:13.5px}
.toc ul{display:grid;gap:8px;margin-top:12px;padding-left:0}
.toc ul ul{padding-left:14px;margin-top:8px}
.toc a{color:var(--muted);border-left:1px solid var(--line);padding-left:12px;display:block}
.toc a:hover{color:var(--fg);border-color:var(--gold)}
.post-body{max-width:68ch;font-size:17px;line-height:1.85;gap:0}
.post-body h2{font-size:clamp(26px,2.6vw,34px);margin:1.6em 0 .6em}
.post-body h3{font-size:clamp(20px,1.8vw,24px);margin:1.4em 0 .5em}
.post-body p{color:var(--fg);margin:0 0 1.1em}
.post-body ul,.post-body ol{padding-left:1.3em;margin:0 0 1.2em;list-style:disc}
.post-body ol{list-style:decimal}
.post-body li{margin:.3em 0}
.post-body blockquote{margin:1.4em 0;padding:4px 0 4px 20px;border-left:2px solid var(--gold);color:var(--muted);font-family:var(--serif);font-size:1.15em}
html[lang="ja"] .post-body blockquote{font-family:var(--serif-ja)}
.post-body table{font-size:15px;margin:1.2em 0}
.post-body img{border:1px solid var(--line)}
.post-body .refs{font-size:13.5px;color:var(--muted)}
.post-body .note{border-top:1px solid var(--line);padding-top:16px;margin-top:2em}
.post-nav{display:grid;grid-template-columns:1fr 1fr;gap:16px;border-top:1px solid var(--line);padding:28px 0 8px;margin-top:8px}
.post-nav a{display:grid;gap:4px;font-family:var(--serif);font-size:18px}
.post-nav a small{font:500 11px/1 var(--sans);letter-spacing:.06em;color:var(--gold-deep)}
.post-nav .r{text-align:right}
@media (max-width:860px){.post-grid{grid-template-columns:1fr}.toc{position:static;border:1px solid var(--line);padding:16px 18px}}
@media (max-width:560px){.hero .ph > span{display:none}}
/* signature band */
.signature .split .ph{border-radius:160px 0 0 0;aspect-ratio:4/5}
.sig-points{display:grid;gap:0;margin-top:24px;border-top:1px solid var(--ink-line)}
.sig-points li{padding:12px 0;border-bottom:1px solid var(--ink-line);font-size:15px;display:flex;gap:12px;align-items:baseline}
.sig-points li::before{content:"";width:6px;height:6px;background:var(--gold);flex:none;transform:rotate(45deg)}
.sig-points b{font-weight:500;color:var(--ink-fg)}
@media (max-width:860px){.signature .split .ph{border-radius:110px 0 0 0;aspect-ratio:4/3}}
/* about story */
.story{display:grid;gap:18px;max-width:64ch}
.story p{font-size:clamp(16px,1.25vw,18px);line-height:1.9;color:var(--fg)}
.story p.lead{color:var(--muted)}
html[lang="ja"] .page-hero h1{max-width:none;word-break:keep-all;line-break:strict;font-size:clamp(30px,4.2vw,54px)}
@media (max-width:560px){html[lang="ja"] .page-hero h1{word-break:normal}html[lang="ja"] .page-hero h1 br{display:none}}
/* team: doctor featured + 3 therapists */
.team-4{grid-template-columns:repeat(4,1fr)}
.team-4 .person:first-child .ph{box-shadow:0 0 0 1px var(--line),0 0 0 7px var(--bg),0 0 0 8px var(--gold)}
.team-4 .person:not(:first-child) .ph{box-shadow:0 0 0 1px var(--line)}
.team-4 .person .ph{width:min(190px,60vw)}
.person .langs{font-size:12.5px;color:var(--gold-deep);letter-spacing:.04em}
@media (max-width:1000px){.team-4{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.team-4{grid-template-columns:1fr}}
/* category pages */
.jump{display:flex;flex-wrap:wrap;gap:8px 22px;margin-top:28px;font:500 11px/1 var(--sans);letter-spacing:.06em}
.jump a{color:var(--muted);padding:6px 0;border-bottom:1px solid transparent}
.jump a:hover{color:var(--fg);border-bottom-color:var(--gold)}
.menu-list{margin-top:0}
.causes{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(24px,4vw,56px);margin-top:72px}
.cause{border-top:1px solid var(--gold);padding-top:22px;display:grid;gap:12px;align-content:start}
.cause i{font:500 12px/1 var(--sans);font-style:normal;letter-spacing:.2em;color:var(--gold-deep)}
.cause h3{font-size:22px;line-height:1.3}
.cause p{color:var(--muted);font-size:15px;line-height:1.75}
@media (max-width:860px){.causes{grid-template-columns:1fr;gap:28px}}
.cat-list{display:grid;gap:clamp(48px,7vw,112px);margin-top:16px}
.cat-row{display:grid;grid-template-columns:5fr 6fr;gap:clamp(20px,4vw,56px);align-items:center;color:inherit}
.cat-row:nth-child(even){grid-template-columns:6fr 5fr}
.cat-row:nth-child(even) .ph{order:2}
.cat-row .ph{aspect-ratio:4/3}
.cat-row h2{font-size:clamp(28px,3vw,40px);margin-top:10px}
.cat-row .body > p:not(.eyebrow){color:var(--muted);margin-top:14px;max-width:52ch}
.tags{display:flex;flex-wrap:wrap;gap:8px;margin-top:18px}
.tags li{font:500 11px/1 var(--sans);letter-spacing:.08em;padding:8px 12px;border:1px solid var(--line);color:var(--muted)}
.cat-row .more{display:inline-block;margin-top:22px;font:500 12px/1 var(--sans);letter-spacing:.06em;color:var(--gold-deep);border-bottom:1px solid var(--gold)}
.cat-row:hover h2{color:var(--gold-deep)}
@media (max-width:760px){.cat-row,.cat-row:nth-child(even){grid-template-columns:1fr}.cat-row:nth-child(even) .ph{order:0}}
.concern-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:14px;margin-top:56px}
.concern-grid a{display:grid;gap:8px;padding:20px 22px;border:1px solid var(--ink-line);color:var(--ink-fg);transition:border-color .2s,background .2s}
.concern-grid a:hover{border-color:var(--gold);background:rgba(201,169,110,.06)}
.concern-grid b{font-weight:500;font-size:16px}
.concern-grid a > span{font:500 11px/1 var(--sans);letter-spacing:.06em;color:var(--gold)}
@media (max-width:760px){.concern-grid{grid-template-columns:1fr}}
.note.center{text-align:center}
html[lang="ja"] h2,html[lang="ja"] .cat-row h2{word-break:keep-all;line-break:strict;overflow-wrap:anywhere}
/* ============ polish: motion & affordance ============ */
@media (prefers-reduced-motion:no-preference){
html.js .rv{opacity:0;transform:translateY(22px);transition:opacity .8s cubic-bezier(.2,.6,.2,1),transform .8s cubic-bezier(.2,.6,.2,1)}
html.js .rv.in{opacity:1;transform:none}
html.js .rv-d1{transition-delay:.08s}html.js .rv-d2{transition-delay:.16s}html.js .rv-d3{transition-delay:.24s}
}
/* buttons: arrow glide */
.btn{position:relative;overflow:hidden;transition:background .35s,color .35s,border-color .35s,transform .25s,box-shadow .35s}
.btn:hover{transform:translateY(-1px);box-shadow:0 10px 24px -14px rgba(0,0,0,.45)}
.btn.solid:hover{box-shadow:0 14px 28px -14px rgba(201,169,110,.7)}
.btn:active{transform:translateY(0)}
.btn.arrow::after{content:"→";font-family:var(--serif);font-size:18px;line-height:1;transition:transform .3s}
.btn.arrow:hover::after{transform:translateX(5px)}
/* nav: underline grows from left */
.nav-links > a,.nav-links .has-sub > a{position:relative;border-bottom:0}
.nav-links > a::after,.nav-links .has-sub > a::after{content:"";position:absolute;left:0;right:auto;bottom:2px;height:1px;width:0;background:var(--gold);transition:width .3s}
.nav-links > a:hover::after,.nav-links .has-sub > a:hover::after,.nav-links > a[aria-current="page"]::after,.nav-links .has-sub > a[aria-current="page"]::after{width:100%}
.nav-links .sub a{position:relative;padding-left:22px;transition:padding-left .25s,color .2s}
.nav-links .sub a:not(.all):hover{padding-left:34px}
.nav-links .sub a:not(.all)::before{content:"";position:absolute;left:22px;top:50%;width:0;height:1px;background:var(--gold);transition:width .25s}
.nav-links .sub a:not(.all):hover::before{width:8px}
/* image placeholders & cards: zoom + lift */
.ph{transition:transform .6s cubic-bezier(.2,.6,.2,1),box-shadow .5s}
.ph img{transition:transform .8s cubic-bezier(.2,.6,.2,1)}
.cat .ph,.cat-row .ph,.post-card .ph,.case .ph{will-change:transform}
.cat:hover .ph,.cat-row:hover .ph,.post-card:hover .ph{transform:translateY(-4px);box-shadow:0 30px 50px -36px rgba(0,0,0,.55)}
.cat:hover .ph img,.cat-row:hover .ph img,.post-card:hover .ph img{transform:scale(1.04)}
.cat .ph h3{transition:transform .5s,color .3s}
.cat:hover .ph h3{text-decoration:none;color:#fff;transform:translateY(-4px)}
.cat .ph h3::after{content:"→";display:block;font-family:var(--serif);font-size:22px;margin-top:6px;color:var(--gold);opacity:0;transform:translateX(-8px);transition:opacity .4s,transform .4s}
.cat:hover .ph h3::after{opacity:1;transform:none}
.cat-row .more{position:relative;padding-right:0;transition:padding-right .3s,color .3s}
.cat-row:hover .more{padding-right:8px;color:var(--fg)}
.cat-row .tags li{transition:border-color .3s,color .3s}
.cat-row:hover .tags li{border-color:var(--gold);color:var(--gold-deep)}
.cat-row .body{position:relative}
.cat-row .body::before{content:"";position:absolute;left:-28px;top:12px;bottom:12px;width:1px;background:linear-gradient(var(--gold),transparent);opacity:0;transition:opacity .5s}
@media (min-width:761px){.cat-row:hover .body::before{opacity:1}}
/* concern grid: arrow appears */
.concern-grid a{position:relative;padding-right:56px}
.concern-grid a::after{content:"→";position:absolute;right:22px;top:50%;transform:translate(-8px,-50%);font-family:var(--serif);font-size:22px;color:var(--gold);opacity:0;transition:opacity .35s,transform .35s}
.concern-grid a:hover::after{opacity:1;transform:translate(0,-50%)}
.concern-grid a:hover{transform:translateY(-2px)}
.concern-grid a{transition:border-color .3s,background .3s,transform .3s}
/* jump nav: active section */
.jump a{position:relative}
.jump a.on{color:var(--fg);border-bottom-color:var(--gold)}
/* steps: hover highlight */
.steps li{transition:padding-left .3s,background .3s}
.steps li:hover{padding-left:8px}
.steps li i{transition:color .3s}
.steps li:hover i{color:var(--gold)}
/* price table rows */
.price-tbl tbody tr{transition:background .25s}
.price-tbl tbody tr:hover td{background:rgba(201,169,110,.07)}
.price-tbl tbody tr:hover td.name{background:#f3ecdd}
.band.alt .price-tbl tbody tr:hover td.name{background:#faf5ea}
/* trust cards */
.trust > div{transition:background .3s,transform .3s}
.trust > div:hover{background:rgba(201,169,110,.06)}
/* footer / crumbs links */
.crumbs a{transition:color .2s}.crumbs a:hover{color:var(--fg)}
td a{transition:border-color .25s,color .25s}td a:hover{color:var(--gold-deep)}
/* section number hairline before eyebrow on category pages */
.band > .wrap > .eyebrow::before,.split > div > .eyebrow::before,.prose > .eyebrow::before{content:"";display:inline-block;width:28px;height:1px;background:var(--gold);vertical-align:middle;margin-right:12px}
.center .eyebrow::before{display:none}
/* details: smooth plus and hover */
summary{transition:color .25s,padding-left .25s}
summary:hover{color:var(--gold-deep)}
details p{animation:fadeDown .4s ease both}
@keyframes fadeDown{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}
/* hero entrance */
@media (prefers-reduced-motion:no-preference){
html.js .hero .eyebrow,html.js .hero h1,html.js .hero .lead,html.js .hero .btn-row,html.js .page-hero > *{animation:riseIn .9s cubic-bezier(.2,.6,.2,1) both}
html.js .hero h1,html.js .page-hero > :nth-child(2){animation-delay:.12s}
html.js .hero .lead,html.js .page-hero > :nth-child(3){animation-delay:.24s}
html.js .hero .btn-row,html.js .page-hero > :nth-child(4){animation-delay:.36s}
html.js .page-hero > :nth-child(5){animation-delay:.46s}
}
@keyframes riseIn{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
/* scroll cue on hero */
.hero .cue{position:absolute;left:50%;bottom:22px;transform:translateX(-50%);width:1px;height:48px;background:linear-gradient(var(--gold),transparent);opacity:.8}
.hero .cue::before{content:"";position:absolute;left:0;top:0;width:1px;height:16px;background:#fff;animation:cue 1.8s ease-in-out infinite}
@keyframes cue{0%{transform:translateY(0);opacity:0}30%{opacity:1}100%{transform:translateY(32px);opacity:0}}
@media (prefers-reduced-motion:reduce){.hero .cue::before{animation:none}}
/* bigger, clearer category / concern text */
.cat-row .eyebrow{font-size:12.5px}
.cat-row h2{font-size:clamp(32px,3.6vw,48px)}
.cat-row .body > p:not(.eyebrow){font-size:clamp(16px,1.25vw,18px);line-height:1.8;margin-top:18px}
.tags{gap:10px;margin-top:22px}
.tags li{font-size:14px;letter-spacing:.04em;padding:10px 16px;color:var(--fg);border-color:var(--gold)}
.cat-row .more{font-size:13.5px;margin-top:28px}
.concern-grid{gap:16px}
.concern-grid a{padding:26px 64px 26px 28px;gap:10px}
.concern-grid b{font-family:var(--serif);font-weight:500;font-size:clamp(20px,1.7vw,24px);line-height:1.35}
.concern-grid a > span{font-size:12.5px;letter-spacing:.06em}
.concern-grid a::after{font-size:26px}
.cats-4 .cat .ph h3{font-size:clamp(24px,2vw,30px)}
.cat small{font-size:12.5px}
.cat p{font-size:15.5px}
/* type refresh: Bodoni Moda + Zen Old Mincho / Figtree + Zen Kaku Gothic New */
h1,h2,h3,.hero h1,.page-hero h1{font-weight:500;letter-spacing:.005em}
html[lang="ja"] h1,html[lang="ja"] h2,html[lang="ja"] h3{font-weight:500;letter-spacing:.02em}
body{font-size:16px;letter-spacing:.005em}
.lead{line-height:1.8}
.price-card .big,td.n,.contact .num{font-family:var(--serif);font-weight:500}
.price-tbl td.n b{font-weight:500}
.nav-links{font-size:14px;letter-spacing:.02em}
.eyebrow{font-weight:500}
.cat small,.cat-row .more,.post-meta,.jump a,.tags li,.steps li i,.trust i,.cause i{font-family:var(--sans)}
/* breathing room around page heroes (comment: 次のセクションまで余白がなさすぎる) */
.page-hero{padding-block:clamp(72px,10vw,144px) clamp(64px,9vw,120px)}
.page-hero .lead{margin-top:32px}
.cat-list{margin-top:0;padding-bottom:var(--band)}
.wrap > .ph[style*="21/9"]{margin-bottom:clamp(16px,3vw,40px)}
/* ============ refinement: restrained accent, quieter placeholders ============ */
/* small labels: charcoal with a gold hairline instead of gold text everywhere */
.eyebrow{color:var(--muted)}
.band.dark .eyebrow{color:var(--gold-2)}
.band.tone-sand .eyebrow{color:var(--muted)}
.crumbs,.crumbs a{color:var(--muted)}
.cat small{color:var(--muted)}
.steps li i,.cause i,.trust i{color:var(--gold-deep)}
.cat-row .more{color:var(--fg);border-bottom-color:var(--gold)}
.concern-grid a > span{color:var(--gold-2)}
/* photo placeholders: calm, no dashed box */
.ph{background:linear-gradient(135deg,var(--panel),#f3f0ea 60%,var(--panel))}
.band.tone-sand .ph{background:linear-gradient(135deg,var(--sand-panel),#ebe6dc 60%,var(--sand-panel))}
.band.dark .ph{background:linear-gradient(135deg,#1c1b19,#242320 60%,#1c1b19)}
.ph > span{border:0;padding:0;font-size:10px;letter-spacing:.08em;text-transform:none;color:color-mix(in srgb,var(--muted) 70%,transparent);max-width:70%}
.ph::after{content:"";position:absolute;inset:14px;border:1px solid rgba(0,0,0,.05);pointer-events:none}
.band.dark .ph::after{border-color:rgba(255,255,255,.06)}
.ba > div > em{background:rgba(255,255,255,.85);color:var(--fg);font-style:italic;font-family:var(--serif);font-size:14px;letter-spacing:.02em}
/* keep whites truly white on stone, soften shadows */
.band.tone-sand .trust{border-color:#e2ddd2}
.cat:hover .ph,.cat-row:hover .ph,.post-card:hover .ph{box-shadow:0 26px 44px -34px rgba(20,18,14,.45)}
/* headings: ink, not brown */
h1,h2,h3{color:var(--fg)}
.band.dark h1,.band.dark h3{color:var(--ink-fg)}
/* buttons on black: hover fills with the same gold gradient as the logo */
.nav .btn.hdr,.band.dark .btn:not(.msgr):not(.line),.cta-bar .btn:not(.line-solid):not(.solid){position:relative;isolation:isolate;overflow:hidden;border-color:var(--gold);color:var(--ink-fg);background:transparent;box-shadow:none}
.nav .btn.hdr::before,.band.dark .btn:not(.msgr):not(.line)::before,.cta-bar .btn:not(.line-solid):not(.solid)::before{content:"";position:absolute;inset:0;background:var(--gold-grad);opacity:0;transition:opacity .35s;z-index:-1}
.nav .btn.hdr:hover,.band.dark .btn:not(.msgr):not(.line):hover,.cta-bar .btn:not(.line-solid):not(.solid):hover{color:var(--ink);border-color:transparent;background:transparent}
.nav .btn.hdr:hover::before,.band.dark .btn:not(.msgr):not(.line):hover::before,.cta-bar .btn:not(.line-solid):not(.solid):hover::before{opacity:1}
.band.dark .btn.solid:not(.msgr):not(.line){background:transparent;color:var(--ink-fg)}
.band.dark .btn.solid:not(.msgr):not(.line)::before{opacity:1}
.band.dark .btn.solid:not(.msgr):not(.line){color:var(--ink)}
.band.dark .btn.solid:not(.msgr):not(.line):hover::before{opacity:.85}
/* about: hero in one screen, story as editorial two-column */
.about-hero{padding-bottom:clamp(40px,6vw,72px)}
.about-hero .split{align-items:center}
.about-hero h1{font-size:clamp(34px,4vw,54px);max-width:none}
.about-hero .crumbs{margin-bottom:28px}
.about-portrait{aspect-ratio:4/5;max-height:70vh;border-radius:0 0 0 120px}
.story-grid{display:grid;grid-template-columns:5fr 7fr;gap:clamp(32px,6vw,96px);align-items:start}
.story-side{position:sticky;top:100px}
.story-side h2{font-size:clamp(28px,3vw,40px)}
.story{max-width:62ch}
.story p.lead{font-family:var(--serif);font-size:clamp(20px,1.8vw,24px);color:var(--fg);line-height:1.6;border-left:2px solid var(--gold);padding-left:18px}
@media (max-width:860px){.story-grid{grid-template-columns:1fr}.story-side{position:static}.story-side .ph{display:none}.about-portrait{max-height:none;aspect-ratio:16/10;border-radius:0}}
.story-side .ph{aspect-ratio:4/5;max-width:420px}
/* hero headline: compact two-line layout like the reference */
.hero h1{font-size:clamp(34px,4.4vw,62px);max-width:22ch;line-height:1.15;margin-top:18px}
html[lang="en"] .hero h1{letter-spacing:.005em}
.hero .inner{padding-block:clamp(56px,9vw,120px)}
.hero .eyebrow{font-size:12.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--gold-2)}
.hero .lead{margin-top:26px;max-width:58ch;font-size:clamp(16px,1.2vw,18px)}
.hero .btn-row{margin-top:36px}
@media (max-width:560px){.hero h1{font-size:clamp(28px,7vw,34px)}}
.hero .inner{width:100%;justify-self:stretch}
/* Newsreader tuning: readable serif with optical sizing */
h1,h2,h3,.price-card .big,td.n,.contact .num,.logo .word{font-optical-sizing:auto}
h1,h2{font-weight:500;letter-spacing:-.005em}
h3{font-weight:500}
.logo .word{font-weight:500;letter-spacing:.06em}
.hero h1{font-weight:500}
.story p.lead,.concern-grid b{font-weight:500}
/* mobile header: wordmark under the mark, nothing overlaps */
@media (max-width:860px){
.nav{min-height:68px;gap:10px}
.logo{flex-direction:column;align-items:flex-start;gap:4px;min-width:0;flex:1 1 auto;padding:8px 0}
.logo img{height:30px;width:auto}
.logo .word{display:block;font-size:12.5px;letter-spacing:.1em;line-height:1.2;white-space:nowrap;padding-bottom:.1em}
.nav-right{flex:0 0 auto;gap:8px}
.lang a{padding:7px 10px;font-size:11px}
}
@media (max-width:400px){.logo .word{display:block;font-size:11px}}
/* ============ hero background video ============ */
.hero-media{position:absolute;inset:0;overflow:hidden;background:#0e0e0d}
.hero-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center;opacity:.92;transition:opacity 1s ease}
/* readability: darken the side the copy sits on, keep the treatment visible on the right */
.hero-media::after{content:"";position:absolute;inset:0;pointer-events:none;
background:linear-gradient(90deg,rgba(10,9,8,.86) 0%,rgba(10,9,8,.66) 38%,rgba(10,9,8,.22) 70%,rgba(10,9,8,.12) 100%),
linear-gradient(180deg,rgba(10,9,8,.35) 0%,transparent 28%,transparent 62%,rgba(10,9,8,.65) 100%)}
.hero::after{background:none}
.hero .inner{z-index:2}
.hero .cue{z-index:2}
@media (max-width:760px){
.hero{min-height:calc(100svh - 68px)}
.hero-video{object-position:center 30%}
.hero-media::after{background:linear-gradient(180deg,rgba(10,9,8,.25) 0%,rgba(10,9,8,.15) 30%,rgba(10,9,8,.72) 58%,rgba(10,9,8,.92) 100%)}
}
@media (prefers-reduced-motion:reduce){.hero-video{transition:none}}
/* =====================================================================
MOTION SET (TOP page) — ① intro ② hero scroll ③ curves ④ gold frame
⑤ depth cards ⑥ cinema. All disabled under prefers-reduced-motion.
===================================================================== */
/* ① intro: gold mark blooms out of a soft blur, then lifts away */
.intro{position:fixed;inset:0;z-index:200;display:grid;place-items:center;background:#0b0a09;pointer-events:none;
animation:introOut .9s cubic-bezier(.7,0,.2,1) 1.35s forwards}
.intro img{width:82px;height:auto;filter:blur(14px) drop-shadow(0 0 24px rgba(214,190,140,.55));opacity:0;transform:scale(1.18);
animation:introMark 1.5s cubic-bezier(.2,.6,.2,1) .1s forwards}
@keyframes introMark{0%{opacity:0;filter:blur(14px) drop-shadow(0 0 24px rgba(214,190,140,.55));transform:scale(1.18)}
45%{opacity:1;filter:blur(0) drop-shadow(0 0 18px rgba(214,190,140,.35));transform:scale(1)}
80%{opacity:1;filter:blur(0) drop-shadow(0 0 10px rgba(214,190,140,.25));transform:scale(1)}
100%{opacity:0;filter:blur(8px);transform:scale(.96)}}
@keyframes introOut{to{opacity:0;visibility:hidden}}
.intro-seen .intro{display:none}
/* hero copy waits for the intro */
@media (prefers-reduced-motion:no-preference){
html.js.has-intro .hero .eyebrow{animation-delay:1.55s}
html.js.has-intro .hero h1{animation-delay:1.7s}
html.js.has-intro .hero .lead{animation-delay:1.85s}
html.js.has-intro .hero .btn-row{animation-delay:2s}
html.has-intro .hero-video{transform:scale(1.08);animation:heroZoomIn 2.6s cubic-bezier(.2,.6,.2,1) 1.2s forwards}
}
@keyframes heroZoomIn{to{transform:scale(1)}}
/* ② hero: copy grows and fades, footage pushes in slightly (driven by --hp 0→1) */
.hero{--hp:0}
@media (prefers-reduced-motion:no-preference){
.hero .inner{transform:translate3d(0,calc(var(--hp) * -70px),0) scale(calc(1 + var(--hp) * .12));transform-origin:0 60%;opacity:calc(1 - var(--hp) * 1.15);will-change:transform,opacity}
.hero-media{transform:scale(calc(1 + var(--hp) * .08));will-change:transform}
}
/* ③ curved hand-off: a light section after a dark one rises with an arc that flattens as it arrives (--cv 1→0) */
.hero + .band,.dark + .band,.cinema + .band,.band + .contact{--cv:1;position:relative;z-index:2;
margin-top:calc(var(--curve-h) * -1);
border-radius:50% 50% 0 0 / calc(var(--curve-h) * var(--cv)) calc(var(--curve-h) * var(--cv)) 0 0;
padding-top:calc(var(--band) + var(--curve-h) * .5)}
:root{--curve-h:clamp(48px,8vw,120px)}
.band + .contact{background:var(--ink)}
.hero .cue{bottom:calc(var(--curve-h) + 18px)}
/* ④ gold hairline that draws itself around a block when it enters the viewport */
.framed{position:relative}
.draw-frame{position:absolute;inset:clamp(-28px,-2.4vw,-14px);pointer-events:none;z-index:0}
.draw-frame i{position:absolute;background:linear-gradient(90deg,#e9d8a9,#bfa26c 60%,#e9d8a9);box-shadow:0 0 10px rgba(214,190,140,.55),0 0 2px rgba(255,240,205,.8);opacity:.9}
.draw-frame i:nth-child(1){top:0;left:0;height:1px;width:100%;transform:scaleX(0);transform-origin:left}
.draw-frame i:nth-child(2){top:0;right:0;width:1px;height:100%;transform:scaleY(0);transform-origin:top}
.draw-frame i:nth-child(3){bottom:0;right:0;height:1px;width:100%;transform:scaleX(0);transform-origin:right}
.draw-frame i:nth-child(4){bottom:0;left:0;width:1px;height:100%;transform:scaleY(0);transform-origin:bottom}
.draw-frame.on i{transition:transform .9s cubic-bezier(.65,0,.35,1)}
.draw-frame.on i{transform:none}
.draw-frame.on i:nth-child(2){transition-delay:.85s}
.draw-frame.on i:nth-child(3){transition-delay:1.7s}
.draw-frame.on i:nth-child(4){transition-delay:2.55s}
.framed > :not(.draw-frame){position:relative;z-index:1}
.signature .framed .draw-frame{inset:clamp(-56px,-4vw,-24px) calc(var(--gutter) * .45)}
@media (prefers-reduced-motion:reduce){.draw-frame i{transform:none!important}}
/* ⑤ depth: cards drift at different speeds (translate set by JS) */
[data-depth]{will-change:transform}
/* ⑥ cinema: video pinned for one screen, the next section slides over it */
.cinema{position:relative;height:200vh;background:#0b0a09;color:var(--ink-fg)}
.cinema-sticky{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden;display:grid;align-items:center}
.cinema-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transform:scale(calc(1.06 - var(--cp,0) * .06));will-change:transform}
.cinema-sticky::after{content:"";position:absolute;inset:0;background:radial-gradient(ellipse at 30% 50%,rgba(10,9,8,.72),rgba(10,9,8,.35) 60%,rgba(10,9,8,.55));pointer-events:none}
.cinema-copy{position:relative;z-index:1;width:100%}
.cinema-box{max-width:620px;padding:clamp(28px,4vw,56px)}
.cinema-box .draw-frame{inset:0}
.cinema h2{color:var(--ink-fg);background:none;-webkit-text-fill-color:currentColor;font-size:clamp(28px,3.4vw,48px);line-height:1.3}
.cinema .eyebrow{color:var(--gold-2)}
.cinema .lead{color:#d9d3c6}
.cinema .btn{border-color:var(--gold);color:var(--ink-fg)}
/* copy blurs in as the section pins */
@media (prefers-reduced-motion:no-preference){
html.js .cinema-box > :not(.draw-frame){opacity:0;filter:blur(10px);transform:translateY(16px);transition:opacity 1.1s ease,filter 1.1s ease,transform 1.1s cubic-bezier(.2,.6,.2,1)}
html.js .cinema-box.on > :not(.draw-frame){opacity:1;filter:none;transform:none}
html.js .cinema-box.on > :nth-child(3){transition-delay:.15s}
html.js .cinema-box.on > :nth-child(4){transition-delay:.3s}
html.js .cinema-box.on > :nth-child(5){transition-delay:.45s}
}
@media (max-width:760px){
.cinema{height:170vh}
.cinema-sticky{align-items:end;padding-bottom:12vh}
.cinema-sticky::after{background:linear-gradient(180deg,rgba(10,9,8,.2),rgba(10,9,8,.55) 45%,rgba(10,9,8,.9))}
.cinema-box{padding:24px 22px}
}
@media (prefers-reduced-motion:reduce){
.cinema{height:auto}
.cinema-sticky{position:relative;height:auto;min-height:80vh;padding-block:var(--band)}
}
@media (max-width:760px){.hero .cue{display:none}}
/* FV: keep the copy clear of the rising curve */
.hero .inner{padding-bottom:calc(var(--curve-h) + clamp(64px,8vw,120px))}
@media (max-width:760px){.hero .inner{padding-bottom:calc(var(--curve-h) + 48px)}}
/* no sideways scroll from scaled hero copy / video (clip keeps position:sticky working) */
html,body{overflow-x:clip}
.hero{overflow:clip}
/* a section followed by a curved one keeps room for the curve that rises into it */
.band:has(+ .contact){padding-bottom:calc(var(--band) + var(--curve-h))}
/* ============ results: search + filter ============ */
.case-filter{display:grid;gap:18px;padding-bottom:28px;border-bottom:1px solid var(--line)}
.case-search{display:flex;align-items:center;gap:12px;max-width:560px;padding:0 18px;height:52px;background:var(--bg-2);border:1px solid var(--line);color:var(--muted);transition:border-color .25s}
.case-search:focus-within{border-color:var(--gold)}
.case-search input{flex:1;border:0;outline:0;background:transparent;font:400 15px/1 var(--sans);color:var(--fg);min-width:0}
.chips,.subchips{display:flex;flex-wrap:wrap;gap:10px}
.subchips{padding-left:2px}
.chip{display:inline-flex;align-items:center;gap:10px;min-height:44px;padding:0 20px;border:1px solid var(--line);background:var(--bg-2);color:var(--fg);font:500 14px/1 var(--sans);letter-spacing:.02em;cursor:pointer;transition:border-color .25s,background .25s,color .25s}
.chip i{font-style:normal;font-size:12px;color:var(--muted);min-width:1.4em;text-align:center}
.chip:hover{border-color:var(--gold)}
.chip.on{background:var(--ink);border-color:var(--ink);color:var(--ink-fg)}
.chip.on i{color:var(--gold-2)}
.chip.sm{min-height:36px;padding:0 14px;font-size:13px;background:transparent}
.chip.sm.on{background:var(--gold);border-color:var(--gold);color:var(--ink)}
.case-count{font-size:13px;color:var(--muted);margin:0}
.case-count .n{font-family:var(--serif);font-size:20px;color:var(--fg);margin-right:2px}
.case-grid{margin-top:40px}
.case[hidden]{display:none}
.case .case-cat{justify-self:start;font-size:12px;letter-spacing:.04em;color:var(--gold-deep);border-bottom:1px solid transparent}
.case .case-cat:hover{border-bottom-color:var(--gold)}
.case .sample{justify-self:start;font-size:11px;color:var(--muted);border:1px dashed var(--line);padding:3px 8px;margin-top:-4px}
.case dl{display:grid;grid-template-columns:auto 1fr;gap:6px 16px;font-size:14px;margin:0}
.case dt{color:var(--muted)}
.case dd{margin:0}
.case p{font-size:14px;color:var(--muted);margin:0}
.ba-img{position:relative}
.ba-img img{position:absolute;top:0;width:50%;height:100%;object-fit:cover}
.ba-img img:first-child{left:0}.ba-img img:nth-child(2){right:0}
.case-empty{margin-top:32px;color:var(--muted)}
@media (max-width:860px){.case-grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:560px){.case-grid{grid-template-columns:1fr}}
.subchips[hidden],.case-empty[hidden]{display:none!important}
/* mobile: all filter buttons visible without sideways swiping */
@media (max-width:560px){
.chips{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.chips .chip{justify-content:space-between;padding:0 14px;font-size:13px;min-height:46px}
.chips .chip[data-cat="all"]{grid-column:1 / -1}
.subchips{gap:8px}
.chip.sm{font-size:12.5px;padding:0 12px}
}
/* mobile menu: scrolls inside itself, clears the fixed booking bar, page behind stays put */
@media (max-width:860px){
.nav-open .nav-links{max-height:calc(100vh - 68px);max-height:calc(100dvh - 68px);overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;
padding-bottom:calc(var(--cta-bar) + 32px + env(safe-area-inset-bottom,0px))}
}
@media (max-width:560px){.chips .chip{word-break:keep-all;line-break:strict;text-align:left;line-height:1.35;padding:8px 14px;font-size:13px}.chips .chip i{flex:none}}
.hero h1{margin-top:0}.hero .btn-row{margin-top:40px}
/* TOP page: fixed booking bar waits until the visitor has scrolled past the FV */
@media (max-width:860px){
.cta-bar{transition:transform .45s cubic-bezier(.2,.6,.2,1),opacity .35s ease}
html.cta-wait .cta-bar{transform:translateY(110%);opacity:0;pointer-events:none}
}
/* real before/after pair (TOP results) */
.ba-pair{margin:0;display:grid;grid-template-columns:1fr 1fr;gap:6px}
.ba-pair > div{position:relative;overflow:hidden;background:var(--panel)}
.ba-pair img{display:block;width:100%;height:auto;aspect-ratio:3/4;object-fit:cover}
.ba-pair em{position:absolute;left:12px;top:12px;font:italic 500 14px/1 var(--serif);background:rgba(255,255,255,.88);color:var(--fg);padding:6px 10px}
.ba-pair figcaption{grid-column:1 / -1;font-size:12.5px;color:var(--muted);margin-top:8px}
/* ============ before/after slider ============ */
.ba-wrap{display:grid;gap:10px}
.ba-slider{position:relative;margin:0;aspect-ratio:4/5;overflow:hidden;background:var(--panel);user-select:none;-webkit-user-select:none;touch-action:pan-y;cursor:ew-resize}
.ba-slider img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;pointer-events:none}
.ba-before{position:absolute;inset:0;clip-path:inset(0 calc(100% - var(--pos)) 0 0)}
.ba-line{position:absolute;top:0;bottom:0;left:var(--pos);width:2px;margin-left:-1px;background:linear-gradient(#f3e6c4,#bfa26c 50%,#f3e6c4);box-shadow:0 0 12px rgba(0,0,0,.35);pointer-events:none}
.ba-line i{position:absolute;top:50%;left:50%;width:48px;height:48px;margin:-24px 0 0 -24px;border-radius:50%;background:rgba(14,14,13,.78);border:1px solid var(--gold);backdrop-filter:blur(4px);box-shadow:0 6px 20px rgba(0,0,0,.35)}
.ba-line i::before,.ba-line i::after{content:"";position:absolute;top:50%;width:0;height:0;border:6px solid transparent;margin-top:-6px}
.ba-line i::before{left:9px;border-right:8px solid var(--gold-2);border-left:0}
.ba-line i::after{right:9px;border-left:8px solid var(--gold-2);border-right:0}
.ba-tag{position:absolute;top:14px;font:italic 500 15px/1 var(--serif);background:rgba(255,255,255,.9);color:var(--fg);padding:7px 11px;pointer-events:none;transition:opacity .25s}
.ba-tag.l{left:14px}.ba-tag.r{right:14px}
.ba-slider[data-near="l"] .ba-tag.l,.ba-slider[data-near="r"] .ba-tag.r{opacity:0}
/* the range input keeps keyboard + screen-reader control; pointer dragging is handled by JS on the figure */
.ba-range{position:absolute;inset:auto 0 0 0;width:100%;height:100%;opacity:0;margin:0;pointer-events:none}
.ba-slider:focus-within{outline:2px solid var(--gold);outline-offset:3px}
.ba-hint{text-align:center;font-size:12.5px;letter-spacing:.06em;color:var(--muted);margin:2px 0 0}
.ba-note{font-size:12px;color:var(--muted);margin:0}
.band.dark .ba-hint,.band.dark .ba-note{color:var(--ink-muted)}
/* real photos inside placeholder frames */
.ph > img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .8s cubic-bezier(.2,.6,.2,1)}
.ph:has(> img)::before,.ph:has(> img)::after{display:none}
.ph:has(> img){background:var(--panel)}
.cat .ph > img{z-index:0}.cat .ph h3{z-index:1}
.cat:hover .ph > img{transform:scale(1.04)}
.person .ph > img{object-position:50% 40%}
/* ===== Section numerals: large serif figures instead of small sans labels ===== */
.no{font-family:"Newsreader",Georgia,serif;font-weight:300;font-style:normal;font-variant-numeric:lining-nums;letter-spacing:0;color:var(--gold-deep)}
.eyebrow.sec-no{display:flex;align-items:center;gap:0;font-size:14.5px;letter-spacing:.08em;color:var(--fg)}
.eyebrow.sec-no::before{display:none!important}
.eyebrow.sec-no .no{font-size:clamp(40px,3.6vw,54px);line-height:.9;display:inline-flex;align-items:center}
.eyebrow.sec-no .no::after{content:"";width:44px;height:1px;background:currentColor;opacity:.55;margin:0 18px 0 20px}
html[lang="ja"] .eyebrow.sec-no{font-family:var(--serif-ja);font-size:15px;letter-spacing:.12em}
.band.dark .eyebrow.sec-no{color:var(--ink-fg)}
.band.dark .no,.hero .no{color:var(--gold-2)}
.center .eyebrow.sec-no{justify-content:center}
/* page jump nav */
.jump{font-size:13px;gap:10px 30px;letter-spacing:.04em}
.jump a{display:inline-flex;align-items:baseline;gap:9px}
.jump .no{font-size:22px;line-height:1;color:var(--gold-deep)}
html[lang="ja"] .jump a{font-size:13.5px}
/* numbered lists, causes, trust cards */
.steps li{grid-template-columns:64px 1fr}
.steps li i,.cause i,.trust i{font-family:"Newsreader",Georgia,serif;font-weight:300;font-style:normal;font-variant-numeric:lining-nums;letter-spacing:0;color:var(--gold-deep)}
.steps li i{font-size:30px;line-height:1;padding-top:0}
.cause i{font-size:34px;line-height:1}
.trust i{font-size:34px;line-height:1;width:auto;min-width:44px;padding-bottom:14px}
.band.tone-sand .cause i,.band.tone-sand .steps li i,.band.tone-sand .trust i{color:var(--gold-deep)}
.band.dark .steps li i,.band.dark .cause i{color:var(--gold-2)}
@media (max-width:760px){
.eyebrow.sec-no .no{font-size:38px}
.eyebrow.sec-no .no::after{width:28px;margin:0 12px 0 14px}
.eyebrow.sec-no{font-size:13.5px}
.jump{gap:8px 20px}.jump .no{font-size:19px}
.steps li{grid-template-columns:48px 1fr}.steps li i{font-size:26px}
}
/* ===== "Is this you?" concerns: muted, desaturated grey — the one deliberately un-luxurious band ===== */
.band.pain{background:#e3e2df;color:#4b4b49;border-top:0}
.band.pain + .band{border-top:0}
.band.pain h2{color:#424240}
.band.pain .eyebrow.sec-no{color:#6e6e6b}
.band.pain .no{color:#9a9996}
.band.pain .steps,.band.pain .steps li{border-color:rgba(0,0,0,.12)}
.band.pain .steps li{grid-template-columns:40px 1fr}
.band.pain .steps li b{color:#4b4b49;font-weight:500}
.band.pain .steps li i{font-size:0;align-self:center;padding:0}
.band.pain .steps li i::before{content:"";display:block;width:16px;height:1px;background:#8d8d8a}
.band.pain .steps li:hover{padding-left:0}
.band.pain .ph{background:linear-gradient(160deg,#cdccc9,#d8d7d4 55%,#c9c8c5)}
.band.pain .ph::before{background:none}
.band.pain .ph::after{border-color:rgba(0,0,0,.08)}
.band.pain .ph > span{color:#7c7c79;border-color:rgba(0,0,0,.14)}
.band.pain .ph img{filter:grayscale(.85) contrast(.95) brightness(.96)}
.steps li b{font-size:17px;line-height:1.5}
html[lang="ja"] .steps li b{font-family:var(--serif-ja);font-size:17.5px}
.steps li span{margin-top:4px}
@media (max-width:760px){.steps li b{font-size:16px}}
html[lang] .band.pain .steps li b{font-family:var(--sans);font-size:16px}
/* ===== 04 solution + 06 pricing on black & gold ===== */
.band.dark .prose h2,.band.dark h2{color:var(--ink-fg)}
.band.dark .trust{background:transparent;border-color:var(--ink-line)}
.band.dark .trust div{border-color:var(--ink-line)}
.band.dark .trust i{color:var(--gold-2);border-bottom-color:rgba(220,200,156,.45)}
.band.dark .trust b{color:var(--ink-fg)}
.band.dark .trust p{color:var(--ink-muted)}
.band.dark .tag{border-color:var(--gold-2);color:var(--gold-2)}
.band.dark .price-tbl th{color:var(--ink-muted)}
.band.dark .price-tbl th.name,.band.dark .price-tbl td.name{background:var(--ink)}
.band.dark .price-tbl td.name{color:var(--ink-fg)}
.band.dark .price-tbl td.n b{color:var(--ink-fg)}
.band.dark .price-tbl th:nth-child(2),.band.dark .price-tbl td:nth-child(2),.band.dark .price-tbl td:nth-child(2) b{color:var(--gold-2)}
.band.dark .price-tbl td.n .tot,.band.dark .price-tbl td.x,.band.dark .price-tbl .swipe{color:var(--ink-muted)}
.band.dark .price-tbl tbody tr:hover td{background:rgba(220,200,156,.06)}
.band.dark .price-tbl tbody tr:hover td.name{background:#191815}
.band.dark .price-tbl th.name,.band.dark .price-tbl td.name{box-shadow:none}
/* ===== phones: each treatment becomes its own card ===== */
@media (max-width:760px){
.price-tbl{overflow:visible}
.price-tbl .swipe{display:none!important}
.price-tbl table{min-width:0!important;width:100%}
.price-tbl thead{display:none}
.price-tbl table,.price-tbl tbody,.price-tbl tr,.price-tbl td{display:block}
.price-tbl tbody{display:grid;gap:14px}
.price-tbl tr{border:1px solid var(--line);background:var(--bg-2);padding:22px 20px 8px}
.band.dark .price-tbl tr{border-color:var(--ink-line);background:linear-gradient(180deg,#171613,#111110)}
.price-tbl td,.band.dark .price-tbl td{padding:0;border:0;position:static;min-width:0!important;max-width:none!important;box-shadow:none!important;background:none!important;text-align:left;white-space:normal}
.price-tbl td.name{font-size:17px;line-height:1.45;padding-bottom:14px}
html[lang="ja"] .price-tbl td.name{font-family:var(--serif-ja)}
.price-tbl .tag{display:inline-block!important;margin:0 0 0 8px!important;vertical-align:2px}
.price-tbl td.n{display:grid;grid-template-columns:1fr auto;column-gap:12px;align-items:baseline;padding:13px 0;border-top:1px solid var(--line)}
.band.dark .price-tbl td.n{border-top-color:var(--ink-line)}
.price-tbl td.n::before{content:attr(data-en);font:400 13.5px/1.4 var(--sans);color:var(--muted);letter-spacing:.02em}
html[lang="ja"] .price-tbl td.n::before{content:attr(data-ja)}
.band.dark .price-tbl td.n::before{color:var(--ink-muted)}
.price-tbl td.n b{font-size:19px;text-align:right}
.price-tbl td.n .tot{grid-column:2;text-align:right;font-size:12px!important;margin-top:3px}
.price-tbl td.n:has(.tot) b::after{content:" / session";font:400 11.5px var(--sans);color:var(--muted)}
html[lang="ja"] .price-tbl td.n:has(.tot) b::after{content:" / 回"}
.price-tbl td.n .tot::before{content:"Total "}
html[lang="ja"] .price-tbl td.n .tot::before{content:"合計 "}
.band.dark .price-tbl td.n:has(.tot) b::after{color:var(--ink-muted)}
/* first trial: the headline price */
.price-tbl td.n:nth-child(2){display:block;border-top:0;padding:0 0 18px}
.price-tbl td.n:nth-child(2)::before{display:block;font-size:12px;letter-spacing:.08em;margin-bottom:6px;color:var(--gold-deep)}
.band.dark .price-tbl td.n:nth-child(2)::before{color:var(--gold-2)}
.price-tbl td.n:nth-child(2) b{font-size:36px;line-height:1;text-align:left;font-weight:400}
.price-tbl td.x{display:none!important}
}
.band.dark .prose p:not(.eyebrow),.band.dark .split p.lead{color:var(--ink-muted)}
@media (max-width:760px){
.band .price-tbl td.name{padding:0 0 16px!important;font-size:17.5px}
.band .price-tbl td.n{padding:12px 0!important;border-top:1px solid var(--line)!important}
.band.dark .price-tbl td.n{border-top-color:rgba(190,164,112,.18)!important}
.band .price-tbl td.n:nth-child(2){padding:0 0 18px!important;border-top:0!important}
.band .price-tbl tr{padding:24px 22px 10px}
}
/* ===== Google reviews (hand-picked, 3 × 2) ===== */
#reviews .reviews{grid-template-columns:repeat(3,1fr);gap:18px;margin-top:48px}
#reviews .review{padding:30px 28px 26px;gap:16px;grid-template-rows:auto 1fr auto auto}
#reviews .review .stars{font-size:15px;letter-spacing:3px;color:var(--gold)}
#reviews .review .stars .off{color:var(--line)}
#reviews .review q{font-size:17.5px;line-height:1.6}
#reviews .review q[lang="en"]{font-family:var(--serif)}
#reviews .review .rv-tr{font-family:var(--serif-ja);font-size:15.5px;line-height:1.85}
#reviews .review .rv-tr small{display:block;margin-top:8px;font:400 11.5px var(--sans);color:var(--muted)}
#reviews .review q[hidden]{display:none}
.rv-trbtn{justify-self:start;background:none;border:0;border-bottom:1px solid var(--gold);padding:2px 0;font:500 12.5px var(--sans);letter-spacing:.04em;color:var(--gold-deep);cursor:pointer}
.rv-trbtn:hover{color:var(--fg)}
#reviews .review .who{display:grid;gap:4px;padding-top:16px;border-top:1px solid var(--line);font-size:12.5px}
#reviews .review .who b{font-weight:500;font-size:14px;color:var(--fg)}
.gsum .gstars{color:var(--gold);letter-spacing:3px;font-size:15px}
.rv-more{margin-top:44px}
.rv-more .btn{padding-inline:34px}
@media (max-width:1000px){#reviews .reviews{grid-template-columns:repeat(2,1fr)}}
@media (max-width:640px){#reviews .reviews{grid-template-columns:1fr}.rv-more .btn{width:100%;justify-content:center}}
#reviews .review .rv-tr[hidden]{display:none}
#reviews .review .rv-tr q{font-family:var(--serif-ja);font-size:15.5px;line-height:1.85;quotes:"「" "」"}
#reviews .note{margin-top:22px}
/* review avatar + name block */
#reviews .review .who{display:grid;grid-template-columns:44px 1fr;gap:14px;align-items:center}
#reviews .review .who .av{width:44px;height:44px;border-radius:50%;background:var(--gold-grad);color:var(--ink);display:grid;place-items:center;font:500 18px/1 "Newsreader",Georgia,serif;font-style:normal}
#reviews .review .who > div{display:grid;gap:3px}
#reviews .review .who em{font-style:normal;font-size:11px;letter-spacing:.04em;color:var(--gold-deep)}
#reviews .review .who span{font-size:12px;color:var(--muted);line-height:1.5}
#reviews .review q{font-size:16.5px}
/* ===== Gold (logo-like gradient) for every button state that used flat gold ===== */
.btn.solid:not(.line):not(.line-solid):not(.msgr):hover,
.hero .btn:not(.line):not(.line-solid):not(.msgr):hover,
.hero .btn.solid:not(.line):not(.line-solid):not(.msgr),
.cta-bar .btn.solid:not(.line):not(.line-solid):not(.msgr),
.contact .social a:hover,.fgrid .social a:hover,
.chip.sm.on,
.lang a[aria-current="true"]{background:var(--gold-grad)!important;background-size:160% 100%!important;background-position:0 0!important;border-color:transparent!important;color:var(--ink)!important;transition:background-position .6s ease,box-shadow .3s,transform .3s}
.hero .btn.solid:not(.line):not(.line-solid):not(.msgr):hover,
.cta-bar .btn.solid:not(.line):not(.line-solid):not(.msgr):hover{background-position:100% 0!important}
.btn.solid:not(.line):not(.line-solid):not(.msgr):hover{box-shadow:0 14px 30px -14px rgba(168,138,79,.75)}
.lang a[aria-current="true"]{font-weight:500;text-shadow:0 1px 0 rgba(255,255,255,.25)}
html[lang="ja"] #reviews .review q{font-family:var(--serif-ja);font-size:15.5px;line-height:1.9;quotes:"「" "」"}
#reviews .rv-trnote{margin-top:22px;font-size:12px}
/* mobile booking bar: the filled button is gold on screen → logo gradient */
.cta-bar .btn.solid{background:var(--gold-grad)!important;background-size:160% 100%!important;border-color:transparent!important;color:var(--ink)!important}
/* About hero photo: keep the doctor's face in frame when cropped wide on phones */
.about-portrait > img{object-position:50% 22%}
@media (max-width:760px){.about-portrait{aspect-ratio:1/1!important;height:auto!important}.about-portrait > img{object-position:50% 18%}}
/* ===== First visit: centred message + horizontal timeline ===== */
#first-visit .fv-intro{max-width:760px;margin:0 auto;text-align:center}
#first-visit .fv-intro h2{font-size:clamp(28px,3.4vw,44px);line-height:1.45;letter-spacing:.02em}
html[lang="ja"] #first-visit .fv-intro h2{letter-spacing:.06em}
#first-visit .fv-body{margin-top:36px;display:grid;gap:14px;color:var(--muted);font-size:16px;line-height:2}
html[lang="ja"] #first-visit .fv-body{font-size:15.5px;line-height:2.1}
#first-visit .flow{margin-top:clamp(72px,9vw,112px)}
#first-visit .flow-title{display:flex;align-items:center;justify-content:center;gap:22px;font-family:var(--serif);font-weight:400;font-size:20px;letter-spacing:.08em;color:var(--fg)}
html[lang="ja"] #first-visit .flow-title{font-family:var(--serif-ja);font-size:19px;letter-spacing:.14em}
#first-visit .flow-title::before,#first-visit .flow-title::after{content:"";width:64px;height:1px;background:var(--gold)}
.flow-list{list-style:none;padding:0;margin:56px 0 0;display:grid;grid-template-columns:repeat(4,1fr);position:relative}
.flow-list::before{content:"";position:absolute;top:30px;left:12.5%;right:12.5%;height:1px;background:linear-gradient(90deg,var(--gold-2),var(--gold) 50%,var(--gold-2))}
.flow-list li{position:relative;padding:0 clamp(12px,1.8vw,26px);text-align:center}
.flow-no{position:relative;z-index:1;display:grid;place-items:center;width:60px;height:60px;margin:0 auto 28px;border-radius:50%;border:1px solid var(--gold);background:var(--bg);font:300 24px/1 "Newsreader",Georgia,serif;font-variant-numeric:lining-nums;color:var(--gold-deep);transition:background .4s,color .4s,border-color .4s}
.band.tone-sand .flow-no{background:var(--sand)}
.flow-list li:hover .flow-no{background:var(--gold-grad);border-color:transparent;color:var(--ink)}
.flow-list h3{font-size:18.5px;line-height:1.5;margin:0 0 14px;font-weight:500}
html[lang="ja"] .flow-list h3{font-family:var(--serif-ja);font-size:17.5px}
.flow-list p{font-size:14px;line-height:1.95;color:var(--muted);text-align:left}
.flow-cta{display:flex;justify-content:center;margin-top:64px}
.flow-cta .btn{padding-inline:40px}
@media (max-width:900px){
.flow-list{grid-template-columns:1fr;gap:34px;margin-top:40px}
.flow-list::before{top:0;bottom:0;left:29px;right:auto;width:1px;height:auto;background:linear-gradient(180deg,var(--gold-2),var(--gold) 50%,var(--gold-2))}
.flow-list li{display:grid;grid-template-columns:60px 1fr;column-gap:20px;text-align:left;padding:0}
.flow-no{margin:0;grid-row:1/3}
.flow-list h3{margin:14px 0 8px}
#first-visit .fv-body{text-align:left}
.flow-cta .btn{width:100%;justify-content:center}
}
html[lang="ja"] #first-visit .fv-intro h2,html[lang="ja"] #first-visit .fv-body p,html[lang="ja"] .flow-list h3{word-break:keep-all;overflow-wrap:anywhere;line-break:strict}
html[lang="ja"] #first-visit .fv-body{font-size:16px}
/* ===== Booking pair: LINE + Messenger everywhere ===== */
.cta-line,.cta-messenger{display:inline-flex;align-items:center;gap:10px}
.cta-line svg{fill:#06C755}
.cta-messenger svg{fill:#1a8cff}
.btn.solid.cta-line:hover svg,.btn.solid.cta-messenger:hover svg{filter:saturate(1.1)}
.hero .btn-row,.flow-cta,.btn-row{flex-wrap:wrap;gap:12px}
.flow-cta{gap:14px}
.cta-bar .cta-line,.cta-bar .cta-messenger{justify-content:center;gap:8px}
@media (max-width:640px){.flow-cta{flex-direction:column}.flow-cta .btn{width:100%;justify-content:center}}
/* header booking chooser */
.hdr-book{position:relative}
.hdr-book .btn.hdr{display:inline-flex;align-items:center;gap:8px;cursor:pointer;font:inherit;font-size:13px;letter-spacing:.08em}
.hdr-book .chev{width:12px;height:12px;transition:transform .3s}
.hdr-menu{position:absolute;right:0;top:calc(100% + 10px);min-width:200px;padding:8px;background:#141310;border:1px solid var(--ink-line);box-shadow:0 24px 40px -20px rgba(0,0,0,.6);display:grid;gap:4px;opacity:0;visibility:hidden;transform:translateY(-6px);transition:opacity .25s,transform .25s,visibility .25s;z-index:60}
.hdr-book:hover .hdr-menu,.hdr-book:focus-within .hdr-menu,.hdr-book.open .hdr-menu{opacity:1;visibility:visible;transform:none}
.hdr-book:hover .chev,.hdr-book.open .chev{transform:rotate(180deg)}
.hdr-book::after{content:"";position:absolute;left:0;right:0;top:100%;height:12px}
.hdr-opt{display:flex;align-items:center;gap:12px;padding:12px 14px;color:var(--ink-fg);font-size:13.5px;letter-spacing:.04em;transition:background .25s,color .25s}
.hdr-opt svg{width:18px;height:18px;flex:none}
.hdr-opt.cta-line svg{fill:#06C755}.hdr-opt.cta-messenger svg{fill:#1a8cff}
.hdr-opt:hover{background:rgba(220,200,156,.1);color:var(--gold-2)}
.contact .btn.solid.cta-line,.contact .btn.solid.cta-messenger{background:var(--gold-grad)!important;background-size:160% 100%!important;border-color:transparent!important;color:var(--ink)!important}
.contact .btn:not(.solid).cta-line,.contact .btn:not(.solid).cta-messenger{background:transparent;border-color:var(--gold);color:var(--ink-fg)}
.contact .btn:not(.solid).cta-line:hover,.contact .btn:not(.solid).cta-messenger:hover{background:var(--gold-grad);border-color:transparent;color:var(--ink)}
@media (max-width:480px){.hdr-book{display:none}}
/* ===== About · standards: background video + side-slide reveal ===== */
.slide-sec{position:relative;overflow:hidden;isolation:isolate}
.sec-media{position:absolute;inset:0;z-index:-1;background:#0e0e0d}
.sec-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity 1.2s ease}
.sec-video.on{opacity:1}
.sec-media::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(10,9,8,.5) 0%,rgba(10,9,8,.78) 48%,rgba(10,9,8,.9) 100%)}
.slide-sec .split{align-items:center}
.slide-sec .ph{box-shadow:0 40px 80px -40px rgba(0,0,0,.8)}
.slide-sec .steps,.slide-sec .steps li{border-color:rgba(220,200,156,.22)}
.slide-sec .steps li span{color:#c9c2b4}
html.js [data-slide]{opacity:0;transition:opacity 1s cubic-bezier(.2,.6,.2,1),transform 1.15s cubic-bezier(.2,.6,.2,1);transition-delay:var(--d,0s)}
html.js [data-slide="left"]{transform:translateX(-90px)}
html.js [data-slide="right"]{transform:translateX(90px)}
html.js [data-slide].in{opacity:1;transform:none}
@media (max-width:760px){
html.js [data-slide="left"]{transform:translateX(-40px)}
html.js [data-slide="right"]{transform:translateX(40px)}
.sec-media::after{background:rgba(10,9,8,.8)}
}
@media (prefers-reduced-motion:reduce){html.js [data-slide]{opacity:1;transform:none;transition:none}}
/* ===== About · standards v2: centred title, zig-zag glass cards ===== */
#standards .std{display:grid;justify-items:center}
#standards .std-title{text-align:center;font-size:clamp(30px,3.6vw,48px);line-height:1.3;margin:0}
#standards .std-title::after{content:"";display:block;width:56px;height:1px;margin:28px auto 0;background:var(--gold)}
.std-list{list-style:none;padding:0;margin:clamp(48px,6vw,80px) 0 0;width:100%;max-width:1040px;display:grid;gap:clamp(22px,3vw,36px)}
.std-card{width:min(640px,100%);display:grid;grid-template-columns:auto 1fr;gap:28px;align-items:start;
padding:clamp(28px,3.2vw,40px) clamp(26px,3.4vw,44px);
background:linear-gradient(135deg,rgba(24,22,19,.82),rgba(14,13,12,.9));
border:1px solid rgba(220,200,156,.28);box-shadow:0 30px 60px -30px rgba(0,0,0,.7),inset 0 1px 0 rgba(255,255,255,.04);
-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);position:relative}
.std-card::before{content:"";position:absolute;top:-1px;width:72px;height:1px;background:var(--gold-grad)}
.std-right{justify-self:end}.std-right::before{left:-1px}
.std-left{justify-self:start}.std-left::before{right:-1px}
.std-no{font:300 clamp(40px,4vw,54px)/.9 "Newsreader",Georgia,serif;font-variant-numeric:lining-nums;background:var(--gold-grad);-webkit-background-clip:text;background-clip:text;color:transparent;padding-top:2px}
.std-card h3{font-size:20px;line-height:1.45;color:var(--ink-fg);font-weight:500;margin:0 0 10px}
html[lang="ja"] .std-card h3{font-family:var(--serif-ja);font-size:19px;letter-spacing:.04em}
.std-card p{margin:0;font-size:15px;line-height:1.9;color:#cfc8ba}
html[lang="ja"] .std-card p{font-size:14.5px;line-height:2}
.slide-sec .sec-media::after{background:rgba(10,9,8,.55)}
html.js [data-slide="up"]{transform:translateY(30px)}
@media (max-width:760px){
.std-card{grid-template-columns:1fr;gap:12px}
.std-right,.std-left{justify-self:stretch}
}
.sec-video{opacity:1}
html[lang="ja"] .band.pain h2{word-break:keep-all;overflow-wrap:anywhere;line-break:strict}
html[lang="ja"] #solution h2{word-break:keep-all;overflow-wrap:anywhere}
html[lang="ja"] #solution h2{font-size:clamp(26px,3vw,40px);line-height:1.5}
.case-ba{margin:0;aspect-ratio:4/5}
/* FV fills the whole first screen on PC; the next section's curve sits just below the fold */
@media (min-width:761px){
.hero{min-height:calc(100svh - 77px + var(--curve-h) - 8px);align-items:center}
.hero .inner{padding-top:40px;padding-bottom:calc(var(--curve-h) + 40px)}
.hero .cue{bottom:calc(var(--curve-h) + 28px)}
}
/* FV: exactly one screen — next section fully below the fold; scroll cue line ends at the bottom edge */
.hero{min-height:calc(100svh - var(--hdr-h,84px) + var(--curve-h))!important}
.hero .cue{display:block!important;bottom:var(--curve-h)!important;height:clamp(56px,8vh,88px)}
@media (min-width:761px){.hero .inner{padding-bottom:calc(var(--curve-h) + 48px)}}
@media (max-width:760px){:root{--hdr-h:68px}.hero{align-items:center}.hero .inner{padding-bottom:calc(var(--curve-h) + 72px)}}
/* Header: full-width with generous side margins */
:root{--hdr-h:85px}
header.top > .wrap.nav{max-width:none;padding-inline:clamp(28px,4.2vw,88px);min-height:84px}
header.top .nav-links{gap:clamp(18px,2.2vw,40px)}
header.top .nav-right{gap:clamp(12px,1.4vw,24px)}
@media (max-width:760px){header.top > .wrap.nav{padding-inline:20px;min-height:68px}}
@media (max-width:760px){:root{--hdr-h:69px}}
/* FV copy: aligned to the header's left edge, set low in the frame for more breathing room */
@media (min-width:761px){
.hero{align-items:end}
.hero > .wrap.inner{max-width:none;padding-inline:clamp(28px,4.2vw,88px);padding-top:0;padding-bottom:calc(var(--curve-h) + clamp(56px,11vh,130px))}
.hero h1{font-size:clamp(34px,3.4vw,58px)}
.hero .btn-row{margin-top:clamp(28px,4vh,44px)}
}
#results .case-grid{grid-template-columns:repeat(auto-fit,minmax(260px,332px));justify-content:center}
.case-partner{font-size:12px;color:var(--muted);margin-top:8px;padding-top:10px;border-top:1px dashed var(--line)}
.sample.partner{background:transparent;border:1px solid var(--gold);color:var(--gold-deep)}
/* hover rule always sits in the gutter between photo and text */
.cat-row{--gap:clamp(20px,4vw,56px);column-gap:var(--gap)}
.cat-row .body::before{left:calc(var(--gap) / -2)}
.cat-row:nth-child(even) .body::before{left:auto;right:calc(var(--gap) / -2)}
/* category pages: before/after always one row of 3 on desktop */
#results .case-grid{grid-template-columns:repeat(3,minmax(0,1fr));justify-content:stretch;max-width:1180px;margin-inline:auto}
@media (max-width:860px){#results .case-grid{grid-template-columns:repeat(3,minmax(240px,1fr));overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:8px}#results .case-grid > .case{scroll-snap-align:start}}
@media (max-width:560px){#results .case-grid{grid-template-columns:repeat(3,82%)}}
.credit-fig{margin:0;position:relative}
.img-credit{position:absolute;right:8px;bottom:6px;font:400 10px/1 var(--sans);color:rgba(255,255,255,.75);letter-spacing:.04em;text-shadow:0 1px 2px rgba(0,0,0,.4)}
/* ===== Instagram Auto Feed (provided) ===== */
#jpn-instagram-section {
background: #f0ebe3;
padding: 95px 24px 105px;
color: #24211e;
}
#jpn-instagram-section * {
box-sizing: border-box;
}
.jpn-ig-container {
max-width: 1400px;
margin: 0 auto;
text-align: center;
}
.jpn-ig-label {
display: flex;
align-items: center;
justify-content: center;
gap: 16px;
font-size: 14px;
letter-spacing: .12em;
color: #79736c;
margin-bottom: 32px;
}
.jpn-ig-label-line {
width: 40px;
height: 1px;
background: #b89a68;
}
.jpn-ig-heading {
font-family: var(--serif);
font-size: clamp(26px, 4vw, 46px);
font-weight: 400;
letter-spacing: .12em;
line-height: 1.6;
margin: 0;
}
.jpn-ig-divider {
width: 80px;
height: 1px;
background: #b89a68;
margin: 28px auto 50px;
}
.jpn-ig-grid {
display: grid;
grid-template-columns: repeat(6, minmax(0, 1fr));
gap: 9px;
min-height: 150px;
}
.jpn-ig-post {
position: relative;
display: block;
aspect-ratio: 3 / 4;
overflow: hidden;
background: #e4ded4;
}
.jpn-ig-post img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
display: block;
transition: transform .35s ease;
}
.jpn-ig-post:hover img {
transform: scale(1.06);
}
.jpn-ig-media-type {
position: absolute;
top: 10px;
right: 10px;
color: white;
background: rgba(0,0,0,.48);
border-radius: 50%;
width: 27px;
height: 27px;
display: flex;
justify-content: center;
align-items: center;
font-size: 13px;
}
.jpn-ig-profile {
display: inline-flex;
align-items: center;
gap: 10px;
margin-top: 34px;
padding-bottom: 7px;
border-bottom: 1px solid #ded7cd;
color: #24211e;
text-decoration: none;
font-size: 17px;
}
.jpn-ig-profile svg {
width: 25px;
height: 25px;
}
.jpn-ig-fallback {
grid-column: 1 / -1;
padding: 55px 15px;
color: #79736c;
font-size: 14px;
}
@media (max-width: 900px) {
#jpn-instagram-section {
padding: 75px 20px 85px;
}
.jpn-ig-grid {
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 7px;
}
}
@media (max-width: 480px) {
#jpn-instagram-section {
padding: 65px 14px 75px;
}
.jpn-ig-heading {
font-size: 27px;
letter-spacing: .07em;
}
.jpn-ig-grid {
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 3px;
}
.jpn-ig-profile {
font-size: 14px;
}
}
@media (prefers-reduced-motion: reduce) {
.jpn-ig-post img {
transition: none;
}
}
html[lang="ja"] .jpn-ig-heading{font-family:var(--serif-ja)}
#jpn-instagram-section + .band{border-top:0}
/* Instagram section: black + gold */
#jpn-instagram-section{background:var(--ink);color:var(--ink-fg)}
#jpn-instagram-section .jpn-ig-label{color:var(--gold-2)}
#jpn-instagram-section .jpn-ig-label-line,#jpn-instagram-section .jpn-ig-divider{background:var(--gold)}
#jpn-instagram-section .jpn-ig-heading{color:var(--ink-fg)}
#jpn-instagram-section .jpn-ig-post{background:var(--ink-2)}
#jpn-instagram-section .jpn-ig-fallback{color:var(--ink-muted)}
#jpn-instagram-section .jpn-ig-profile{
gap:16px;margin-top:48px;padding:16px 26px 16px 22px;min-width:min(100%,380px);justify-content:space-between;
border:2px solid transparent;border-radius:999px;color:var(--ink-fg);font-size:17px;font-weight:500;letter-spacing:.04em;
background:linear-gradient(var(--ink-2),var(--ink-2)) padding-box,
linear-gradient(45deg,#f9ce34 0%,#f77737 25%,#ee2a7b 55%,#c13584 75%,#6228d7 100%) border-box;
transition:transform .25s ease,box-shadow .25s ease}
#jpn-instagram-section .jpn-ig-profile:hover{transform:translateY(-2px);box-shadow:0 8px 28px rgba(238,42,123,.25)}
#jpn-instagram-section .jpn-ig-icon{width:34px;height:34px;flex:none}
#jpn-instagram-section .jpn-ig-btn-text{flex:1;text-align:center}
#jpn-instagram-section .jpn-ig-chev{width:20px;height:20px;flex:none;color:var(--ink-muted)}
@media (max-width:480px){#jpn-instagram-section .jpn-ig-profile{font-size:15px;padding:13px 20px 13px 16px;min-width:0;width:100%}#jpn-instagram-section .jpn-ig-icon{width:28px;height:28px}}
#jpn-instagram-section .jpn-ig-label{gap:22px;margin-bottom:26px}
#jpn-instagram-section .jpn-ig-wordmark{display:block;height:clamp(30px,3.2vw,42px);width:auto}
#jpn-instagram-section .jpn-ig-label-line{width:56px}
@media (max-width:480px){#jpn-instagram-section .jpn-ig-label-line{width:36px}}
.faq details p a{color:var(--gold-deep);text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}.faq details p a:hover{color:var(--ink)}
/* ===== Strengths under the FV: head + three white cards (ref. layout) ===== */
#merits.band{background:#e6e1d6}
.merits-head{text-align:center;max-width:860px;margin:0 auto clamp(40px,5vw,64px)}
.merits-head h2{font-family:var(--serif);font-weight:400;font-size:clamp(30px,3.4vw,46px);line-height:1.25;letter-spacing:.01em;margin:0}
html[lang="ja"] .merits-head h2{font-family:var(--serif-ja);letter-spacing:.06em}
.merits-head p{margin:22px auto 0;font-size:15.5px;line-height:1.9;color:#4d4842;max-width:46em}
.merits{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;max-width:1240px;margin:0 auto}
.merit{background:#fff;display:flex;flex-direction:column;padding:clamp(36px,3.6vw,56px) clamp(28px,3.2vw,52px) clamp(34px,3.4vw,50px)}
.merit-no{font:400 clamp(40px,3.6vw,52px)/1 var(--serif);color:#a39580;letter-spacing:.02em;margin-bottom:clamp(40px,4.4vw,64px)}
.merit h3{font-family:var(--serif);font-weight:400;font-size:clamp(22px,1.9vw,27px);line-height:1.3;letter-spacing:.005em;margin:0 0 20px;text-wrap:balance}
html[lang="ja"] .merit h3{font-family:var(--serif-ja);font-size:clamp(20px,1.7vw,24px);letter-spacing:.06em}
.merit p{font-size:15px;line-height:1.85;color:#4d4842;margin:0;max-width:34em}
html[lang="ja"] .merit p{font-size:14.5px;line-height:2}
.merit .merit-note{margin-top:14px;font-size:12.5px;line-height:1.8;color:#8a8070}
.merit-link{margin-top:auto;padding-top:36px;align-self:flex-start;display:inline-flex;align-items:center;gap:10px;font-size:15px;color:#9a8a70;text-decoration:none;transition:color .2s}
.merit-link::after{content:"";width:16px;height:1px;background:currentColor;box-shadow:none;position:relative;transition:width .25s}
.merit-link:hover{color:var(--fg)}.merit-link:hover::after{width:26px}
.merit-link:focus-visible{outline:1px solid var(--gold);outline-offset:4px}
@media (max-width:900px){.merits{grid-template-columns:1fr;max-width:620px}.merit-no{margin-bottom:28px}}
.case-disclaimer{margin:28px 0 0;font-size:13px;line-height:1.8;color:var(--muted)}
#merits .wrap{max-width:1440px}
.merit-link::after{content:"→";width:auto;height:auto;background:none;font-size:16px;line-height:1;transition:transform .25s}
.merit-link:hover::after{width:auto;transform:translateX(4px)}
@media (max-width:480px){html[lang="ja"] .merits-head h2{font-size:24px;letter-spacing:.03em}.merits-head p{font-size:14.5px;text-align:left}}
@media (max-width:760px){.hero{align-items:flex-end!important}.hero .inner{padding-top:24px!important;padding-bottom:calc(var(--curve-h) + 84px)!important}}
/* TOP treatment cards: title readable at the bottom of the photo */
.cat .ph h3{inset:auto 0 0 0;top:auto;padding-top:64px;background:linear-gradient(180deg,rgba(0,0,0,0) 0%,rgba(0,0,0,.45) 45%,rgba(0,0,0,.78) 100%);color:#f3ead6;text-shadow:0 1px 12px rgba(0,0,0,.35)}
@media (max-width:760px){
.cats{gap:22px}
.cat{background:#fff;gap:0;padding-bottom:22px;box-shadow:0 1px 0 rgba(0,0,0,.04)}
.cat .ph{aspect-ratio:16/10}
.cat .ph h3{padding:56px 20px 16px;font-size:24px}
.cat .ph h3::after{display:none}
.cat small{padding:16px 20px 0;display:block}
.cat p{padding:8px 20px 0;font-size:14.5px;line-height:1.85}
.cat::after{display:block;padding:14px 20px 0;font:500 13.5px/1 var(--sans);letter-spacing:.04em;color:var(--gold-deep)}
html[lang="en"] .cat::after{content:"Learn more →"}
html[lang="ja"] .cat::after{content:"詳しく見る →"}
}
.cat .ph h3::after{position:absolute;right:20px;bottom:18px;margin:0}
html[lang="ja"] .cats-4 .cat .ph h3{font-size:clamp(15px,1.3vw,20px);letter-spacing:.04em;white-space:nowrap}
@media (min-width:761px){.cats-4 .cat .ph h3{padding:56px 18px 18px}}
.contact .eyebrow::before,.contact h2::after,.contact .center > h2::after{display:none!important;content:none!important}
.contact .center-lead{margin-top:22px}
/* header: official stacked lockup on phones */
.logo .logo-full{display:none}
@media (max-width:860px){
.nav .logo .logo-mark,.nav .logo .word{display:none!important}
.nav .logo .logo-full{display:block;height:54px;width:auto}
.nav .logo{padding:6px 0}
}
/* TOP results: four cases at a glance, swipe on phones */
#results .center.stack{margin-bottom:clamp(32px,4vw,52px)}
#results .case-grid.pick{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(14px,1.6vw,24px);margin:0}
#results .pick .case dl,#results .pick .case > p{display:none}
#results .pick .case b{font-size:16px}
#results .swipe-hint{display:none}
#results .case-disclaimer.center{text-align:center;margin-top:28px}
#results .btn-row.center{justify-content:center}
@media (max-width:900px) and (min-width:761px){#results .case-grid.pick{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:760px){
#results .case-grid.pick{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;gap:14px;margin:0 -20px;padding:0 20px 6px;scroll-padding-left:20px;scrollbar-width:none;-webkit-overflow-scrolling:touch}
#results .case-grid.pick::-webkit-scrollbar{display:none}
#results .pick .case{flex:0 0 78%;scroll-snap-align:start}
#results .pick .ba-range{pointer-events:none}
#results .swipe-hint{display:block;text-align:center;font-size:12.5px;color:var(--muted);margin-top:12px}
}
/* SNS buttons under the Instagram feed */
.jpn-sns-btns{display:flex;flex-direction:column;align-items:center;gap:16px;margin-top:48px}
#jpn-instagram-section .jpn-sns-btns .jpn-ig-profile{margin-top:0;width:min(100%,400px);min-width:0}
#jpn-instagram-section .jpn-fb-profile{
background:linear-gradient(var(--ink-2),var(--ink-2)) padding-box,
linear-gradient(45deg,#0a3d8f 0%,#0163e0 40%,#1877f2 65%,#5aa9ff 100%) border-box}
#jpn-instagram-section .jpn-fb-profile:hover{box-shadow:0 8px 28px rgba(24,119,242,.28)}
/* ===== Concern map: tap the area (treatments page) ===== */
.cz{margin-top:clamp(36px,4vw,56px)}
.cz > input{position:absolute;opacity:0;pointer-events:none}
.cz-tabs{display:none}
.cz-panels{display:grid;grid-template-columns:1fr 1fr;gap:clamp(14px,1.6vw,24px);max-width:1180px;margin:0 auto}
.cz-panel{background:radial-gradient(ellipse at 50% 38%,#2a2620 0%,#191713 55%,#121110 100%);border:1px solid rgba(191,162,108,.35);overflow:hidden}
.cz-head{margin:0;padding:18px 0 16px;text-align:center;font-family:var(--serif);font-weight:400;font-size:clamp(20px,1.8vw,24px);letter-spacing:.12em;color:var(--gold-2);border-bottom:1px solid rgba(191,162,108,.28);background:rgba(191,162,108,.06)}
html[lang="ja"] .cz-head{font-family:var(--serif-ja)}
.cz-stage{position:relative;aspect-ratio:600/640}
.cz-art{position:absolute;inset:0;width:100%;height:100%}
.cz-ill path{fill:none;stroke:#cdb27c;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;opacity:.85}
.cz-lines path{fill:none;stroke:rgba(220,200,156,.55);stroke-width:1;stroke-dasharray:2 4;vector-effect:non-scaling-stroke}
.cz-dots circle{fill:#f3e7c8;stroke:rgba(191,162,108,.5);stroke-width:5}
.cz-pill{position:absolute;width:37%;transform:translateY(-50%);display:flex;align-items:center;justify-content:space-between;gap:8px;
padding:9px 8px 9px 16px;border-radius:999px;background:rgba(14,14,13,.88);border:1px solid rgba(191,162,108,.7);
color:#f1ede4;font-size:13.5px;line-height:1.3;letter-spacing:.02em;text-decoration:none;backdrop-filter:blur(2px);transition:background .25s,border-color .25s,transform .25s}
.cz-pill i{flex:none;width:24px;height:24px;border-radius:50%;background:var(--gold-grad);position:relative}
.cz-pill i::after{content:"";position:absolute;left:8px;top:8px;width:6px;height:6px;border-top:1.6px solid #1a1712;border-right:1.6px solid #1a1712;transform:rotate(45deg)}
.cz-pill:hover,.cz-pill:focus-visible{background:#2a241a;border-color:var(--gold-2);transform:translateY(-50%) translateX(2px);outline:none}
@media (max-width:760px){
.cz-tabs{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:-1px}
.cz-tabs label{text-align:center;padding:14px 0;font-size:16px;letter-spacing:.1em;color:var(--ink-muted);border:1px solid rgba(191,162,108,.35);border-bottom:0;cursor:pointer;font-family:var(--serif-ja)}
#cz-face:checked ~ .cz-tabs label[for="cz-face"],#cz-body:checked ~ .cz-tabs label[for="cz-body"]{background:var(--gold-grad);color:#1a1712;border-color:transparent}
.cz-panels{grid-template-columns:1fr;margin:0 -8px}
.cz-head{display:none}
#cz-face:checked ~ .cz-panels .cz-body,#cz-body:checked ~ .cz-panels .cz-face{display:none}
.cz-pill{width:34%;font-size:12px;padding:7px 5px 7px 10px;gap:4px}
.cz-pill i{width:19px;height:19px}.cz-pill i::after{left:6px;top:6.5px;width:5px;height:5px}
.cz-pill[style*="left:60%"]{left:63%!important}
}
@media (max-width:760px){.cz-t{white-space:nowrap;letter-spacing:0}.cz-pill{width:35%}}
/* treatments page: matcha signature opens the page, over the FV video */
.sig-top{position:relative;overflow:hidden;isolation:isolate}
.sig-top .sig-bg{position:absolute;inset:0;z-index:-1;background:#0e0e0d}
.sig-top .sig-video{width:100%;height:100%;object-fit:cover;opacity:.32;filter:saturate(.8)}
.sig-top .sig-video.on{opacity:.32}
.sig-top .sig-bg::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(14,14,13,.55),rgba(14,14,13,.7))}
.sig-top + .page-hero{padding-top:clamp(64px,7vw,104px)}
/* TOP results: each case in its own frame; arrows + dots on phones */
#results .pick .case{background:#fff;border:1px solid rgba(168,138,79,.35);padding:10px 10px 18px;box-shadow:0 18px 36px -30px rgba(20,18,14,.45)}
#results .pick .case > .case-cat,#results .pick .case > b,#results .pick .case > .sample{margin-left:6px;margin-right:6px}
#results .pick .case > b{display:block;margin-top:2px}
.strip-nav{display:none}
@media (max-width:760px){
#results .pick .case{flex:0 0 80%}
.strip-nav{display:flex;align-items:center;justify-content:center;gap:18px;margin-top:18px}
.strip-btn{width:44px;height:44px;border-radius:50%;border:1px solid var(--gold);background:#fff;position:relative;cursor:pointer}
.strip-btn::after{content:"";position:absolute;left:50%;top:50%;width:9px;height:9px;border-top:1.6px solid var(--gold-deep);border-right:1.6px solid var(--gold-deep);transform:translate(-65%,-50%) rotate(45deg)}
.strip-btn.prev::after{transform:translate(-35%,-50%) rotate(-135deg)}
.strip-btn:disabled{opacity:.3}
.strip-dots{display:flex;gap:8px}
.strip-dots button{width:8px;height:8px;border-radius:50%;border:0;padding:0;background:rgba(168,138,79,.3)}
.strip-dots button.on{background:var(--gold-deep);width:22px;border-radius:4px;transition:width .25s}
#results .swipe-hint{margin-top:10px}
}
/* mobile menu (iOS-safe): fixed panel under the header, page locked in place while open */
@media (max-width:860px){
.nav-open .nav-links{position:fixed;top:var(--menu-top,68px);left:0;right:0;z-index:60;
max-height:calc(100vh - var(--menu-top,68px));max-height:calc(100dvh - var(--menu-top,68px))}
html.menu-open body{position:fixed;left:0;right:0;width:100%;overflow:hidden}
html.menu-open header.top{position:fixed;top:0;left:0;right:0}
.nav-toggle{touch-action:manipulation;-webkit-tap-highlight-color:transparent}
}
/* TOP results cards: soft, unclipped shadow + fine double gold frame */
#results .pick .case{border:1px solid rgba(168,138,79,.28);
box-shadow:inset 0 0 0 5px #fff,inset 0 0 0 6px rgba(168,138,79,.16),0 1px 2px rgba(40,30,15,.04),0 14px 30px -22px rgba(60,45,20,.22)}
@media (max-width:760px){
#results .case-grid.pick{padding-top:6px;padding-bottom:34px;margin-bottom:-22px}
}
/* concern map with photos */
.cz-stage{aspect-ratio:600/750}
.cz-photo{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.cz-stage::after{content:"";position:absolute;inset:0;pointer-events:none;box-shadow:inset 0 0 80px rgba(20,16,10,.18)}
.cz-lines path{stroke:rgba(120,92,48,.75);stroke-width:1.2}
.cz-dots circle{fill:#fff;stroke:rgba(168,136,79,.85);stroke-width:2.5}
.cz-pill{width:31%;background:rgba(14,14,13,.9);box-shadow:0 6px 18px -10px rgba(0,0,0,.5)}
.cz-art{z-index:1}.cz-pill{z-index:2}
@media (max-width:760px){.cz-pill{width:33%}.cz-pill.cz-r{left:65%!important}.cz-pill.cz-l{left:2%!important}}
@media (max-width:760px){.cz-pill.cz-r{left:auto!important;right:2%}.cz-pill{font-size:11.5px}}
@media (max-width:760px){.cz-pill{width:auto;min-width:31%;max-width:44%}}
/* ===== Card reveal: cards rise in sequence, photos settle, gold details draw in ===== */
@media (prefers-reduced-motion:no-preference){
html.js .rv.rv-card{opacity:0;transform:translateY(38px) scale(.985);transition:opacity 1s cubic-bezier(.2,.65,.2,1),transform 1.1s cubic-bezier(.2,.65,.2,1)}
html.js .rv.rv-card.in{opacity:1;transform:none}
html.js .rv-card.rv-d1{transition-delay:.12s}html.js .rv-card.rv-d2{transition-delay:.24s}html.js .rv-card.rv-d3{transition-delay:.36s}
/* photos inside cards settle from a slight zoom */
html.js .rv-card .ph img,html.js .rv-card .ba-slider img,html.js .rv-card .cz-photo{transition:transform 1.6s cubic-bezier(.2,.65,.2,1)}
html.js .rv-card:not(.in) .ph img,html.js .rv-card:not(.in) .ba-slider img,html.js .rv-card:not(.in) .cz-photo{transform:scale(1.08)}
/* strengths: number slides in, a gold rule draws beneath it, then the text follows */
.merit{position:relative}
.merit::before{content:"";position:absolute;left:0;right:0;top:0;height:2px;background:var(--gold-grad);transform:scaleX(0);transform-origin:left;transition:transform 1.2s cubic-bezier(.7,0,.2,1) .35s}
.merit.in::before{transform:scaleX(1)}
.merit-no{display:inline-block;position:relative}
.merit-no::after{content:"";position:absolute;left:0;bottom:-14px;height:1px;width:46px;background:var(--gold);transform:scaleX(0);transform-origin:left;transition:transform .9s cubic-bezier(.2,.65,.2,1) .7s}
.merit.in .merit-no::after{transform:scaleX(1)}
html.js .merit:not(.in) .merit-no{opacity:0;transform:translateX(-14px)}
html.js .merit .merit-no{transition:opacity .9s ease .3s,transform .9s cubic-bezier(.2,.65,.2,1) .3s}
html.js .merit:not(.in) h3,html.js .merit:not(.in) p,html.js .merit:not(.in) .merit-link{opacity:0;transform:translateY(10px)}
html.js .merit h3,html.js .merit p,html.js .merit .merit-link{transition:opacity .8s ease,transform .8s cubic-bezier(.2,.65,.2,1)}
html.js .merit.in h3{transition-delay:.5s}html.js .merit.in p{transition-delay:.62s}html.js .merit.in .merit-link{transition-delay:.78s}
/* numbered steps slide in from the side */
html.js .steps > li.rv-card{transform:translateX(-22px)}
html.js .steps > li.rv-card.in{transform:none}
/* concern map: the dots pulse once the panel arrives */
html.js .cz-panel.in .cz-dots circle{animation:czPulse 2.4s ease-out .8s 2}
}
@keyframes czPulse{0%{stroke-width:2.5}40%{stroke-width:12;stroke:rgba(201,169,110,.35)}100%{stroke-width:2.5}}
/* hover (pointer devices): cards lift gently */
@media (hover:hover){
.merit,#results .pick .case,.review{transition:transform .45s cubic-bezier(.2,.65,.2,1),box-shadow .45s}
.merit:hover,.review:hover{transform:translateY(-4px);box-shadow:0 22px 40px -30px rgba(60,45,20,.35)}
}
.case-grid:has(> .case:only-child){grid-template-columns:minmax(0,420px);justify-content:center}
/* phones, TOP strip: swipe the card sideways anywhere; drag the gold handle to compare */
@media (max-width:760px){
#results .pick .ba-slider{touch-action:pan-x pan-y;cursor:default}
#results .pick .ba-line{pointer-events:none}
#results .pick .ba-line i{pointer-events:auto;touch-action:none;cursor:ew-resize;width:56px;height:56px;margin:-28px 0 0 -28px}
#results .pick .ba-line i::before{left:12px}#results .pick .ba-line i::after{right:12px}
}
/* ===================== matcha peeling page ===================== */
/* 01 concerns: client voices beside the photo */
.mp-voices{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(32px,6vw,96px);align-items:center}
.mp-voices-ph{aspect-ratio:4/5}
.mp-voices-body h2{line-break:strict;word-break:keep-all;overflow-wrap:anywhere}
.mp-voices-ph img{width:100%;height:100%;object-fit:cover}
.mp-voice-list{list-style:none;margin:40px 0 0;padding:0;display:grid;gap:18px}
.mp-voice-list li{position:relative}
.mp-voice-list li:nth-child(even){margin-left:clamp(24px,6vw,88px)}
.mp-voice-list q{quotes:"「" "」" "“" "”";display:inline-block;font:400 clamp(19px,2.1vw,26px)/1.5 var(--serif);color:#3b3b39;background:#f1f0ec;padding:18px 26px;border-radius:2px 22px 22px 22px}
.mp-voice-list li:nth-child(even) q{border-radius:22px 2px 22px 22px;background:#fbfaf7}
html.js .mp-voice-list.pre li{opacity:0;transform:translateY(16px)}
html.js .mp-voice-list.in li{opacity:1;transform:none;transition:opacity .7s ease calc(var(--i)*.22s),transform .7s cubic-bezier(.2,.65,.2,1) calc(var(--i)*.22s)}
@media (max-width:860px){.mp-voices{grid-template-columns:1fr}.mp-voices-ph{aspect-ratio:16/10}.mp-voice-list li:nth-child(even){margin-left:28px}.mp-voice-list q{font-size:17px;padding:14px 18px}}
/* 02 solution: black & gold band with a concern selector */
:root{--grain:url("data:image/svg+xml;utf8,")}
.band.mp-sol{background:radial-gradient(120% 80% at 85% 0%,#2a2418 0%,var(--ink) 55%)}
.mp-sol-head{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,4fr);gap:clamp(32px,6vw,96px);align-items:end}
.mp-sol-head h2{line-break:strict}
.mp-sol-ph{aspect-ratio:1;border-radius:50%;overflow:hidden;max-width:360px;justify-self:end;width:100%;box-shadow:0 0 0 1px rgba(220,200,156,.5),0 0 0 10px rgba(14,14,13,1),0 0 0 11px rgba(220,200,156,.25)}
.mp-sol-ph img{width:100%;height:100%;object-fit:cover}
.mp-skin{margin-top:clamp(48px,6vw,80px);display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);border-top:1px solid var(--ink-line)}
.mp-skin-tabs{display:flex;flex-direction:column}
.mp-skin-tabs button{all:unset;cursor:pointer;display:grid;grid-template-columns:36px 1fr;align-items:baseline;padding:20px 24px 20px 0;border-bottom:1px solid var(--ink-line);font:400 17px/1.5 var(--sans);color:rgba(241,237,228,.55);transition:color .3s,padding .35s}
.mp-skin-n{font:400 14px/1 var(--serif);color:var(--gold)}
.mp-skin-tabs button:hover{color:var(--ink-fg)}
.mp-skin-tabs button[aria-selected="true"]{color:var(--gold-2);padding-left:14px;box-shadow:inset 2px 0 0 var(--gold)}
.mp-skin-tabs button:focus-visible{outline:2px solid var(--gold-2);outline-offset:-2px}
.mp-skin-panels{position:relative;background:linear-gradient(160deg,#1d1a14 0%,#121110 70%);padding:clamp(32px,4vw,60px);border:1px solid rgba(220,200,156,.35);outline:1px solid rgba(220,200,156,.12);outline-offset:-10px;overflow:hidden}
.mp-skin-panels::before{content:"";position:absolute;inset:0;opacity:.3;pointer-events:none;background-image:var(--grain);mix-blend-mode:screen}
.mp-skin-panel{position:relative}
.mp-skin-panel h3{font:400 clamp(24px,2.6vw,34px)/1.35 var(--serif);color:var(--ink-fg);margin:14px 0 18px}
.mp-skin-panel p{color:var(--ink-muted);font-size:16px;line-height:1.9;margin:0}
.mp-skin-panel .mp-skin-rec{display:inline-block;font:500 13px/1 var(--sans);color:#1a160e;background:var(--gold-grad);padding:9px 14px;border-radius:999px;letter-spacing:.03em}
.mp-skin-panel.swap{animation:mpSwap .45s cubic-bezier(.2,.65,.2,1)}
@keyframes mpSwap{from{opacity:0;transform:translateX(14px)}to{opacity:1;transform:none}}
@media (max-width:860px){
.mp-sol-head{grid-template-columns:1fr}.mp-sol-ph{justify-self:center;max-width:200px}
/* phones: no tabs — every concern is shown as its own card */
.mp-skin{grid-template-columns:1fr;border-top:0;margin-top:40px}
.mp-skin-tabs{display:none}
.mp-skin-panels{background:none;border:0;outline:0;padding:0;display:grid;gap:14px;counter-reset:skin;overflow:visible}
.mp-skin-panels::before{display:none}
.mp-skin-panel,.mp-skin-panel[hidden]{display:block;counter-increment:skin;position:relative;padding:22px 20px 22px 58px;background:linear-gradient(160deg,#1d1a14 0%,#121110 75%);border:1px solid rgba(220,200,156,.3)}
.mp-skin-panel::before{content:counter(skin);position:absolute;left:18px;top:22px;width:26px;height:26px;border-radius:50%;border:1px solid var(--gold);color:var(--gold-2);display:grid;place-items:center;font:400 14px/1 var(--serif)}
.mp-skin-panel h3{font-size:20px;margin:10px 0 8px}
.mp-skin-panel p{font-size:14.5px;line-height:1.8}
.mp-skin-panel .mp-skin-rec{font-size:12px;padding:7px 12px}
.mp-skin-panel.swap{animation:none}
}
.mp-cz-sp{display:none}
@media (max-width:860px){
.mp-cz-sp{display:block;margin-top:28px;position:relative;padding:26px 16px 18px;background:linear-gradient(rgba(10,10,9,.72),rgba(10,10,9,.85)),url(../img/concerns/matcha-peeling.jpg) center/cover;border:1px solid rgba(220,200,156,.35)}
.mp-pills{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:12px 10px}
.mp-pills li{display:grid;place-items:center;text-align:center;min-height:54px;padding:6px 4px;border-radius:999px;background:linear-gradient(180deg,#f7f1e3,#d9c79e);color:#1c170e;font:500 15px/1.3 var(--sans);box-shadow:0 4px 12px rgba(0,0,0,.35),inset 0 1px 0 rgba(255,255,255,.7)}
.mp-pills-note{margin:22px 0 0;padding:16px 14px;border:1px solid rgba(220,200,156,.45);background:rgba(14,14,13,.6);color:var(--ink-fg);font:400 15.5px/1.85 var(--serif);text-align:center}
}
/* 04 flow: numbered vertical timeline with photos */
.mp-flow-head{max-width:640px}
.mp-steps{list-style:none;margin:clamp(48px,6vw,80px) 0 0;padding:0;position:relative;max-width:980px}
.mp-steps::before{content:"";position:absolute;left:23px;top:24px;bottom:24px;width:2px;background:#e3d7bd;transform-origin:top}
.mp-steps li{position:relative;display:grid;grid-template-rows:auto 1fr;align-items:start;grid-template-columns:48px minmax(0,1fr) minmax(0,1.15fr);column-gap:clamp(20px,3vw,40px);row-gap:14px;padding-bottom:clamp(48px,6vw,72px)}
.mp-steps li:last-child{padding-bottom:0}
.mp-step-no{grid-row:1/span 2;width:48px;height:48px;border-radius:50%;background:var(--ink);color:var(--gold-2);display:grid;place-items:center;font:400 20px/1 var(--serif);position:relative;z-index:1}
.mp-steps h3{grid-column:2;font:400 clamp(22px,2.2vw,28px)/1.4 var(--serif);margin:8px 0 0}
.mp-steps p{grid-column:2;margin:0;font-size:15.5px;line-height:1.9;color:var(--muted)}
.mp-step-ph{grid-column:3;grid-row:1/span 2;border-radius:20px;overflow:hidden;aspect-ratio:4/3}
.mp-step-ph img{width:100%;height:100%;object-fit:cover}
.mp-steps li.no-ph p{max-width:none}
.mp-steps li.no-ph h3,.mp-steps li.no-ph p{grid-column:2/span 2}
html.js .mp-steps.pre::before{transform:scaleY(0)}
html.js .mp-steps.in::before{transform:scaleY(1);transition:transform 1.8s cubic-bezier(.65,0,.35,1)}
html.js .mp-steps.pre li{opacity:0;transform:translateY(14px)}
html.js .mp-steps.in li{opacity:1;transform:none;transition:opacity .7s ease,transform .7s ease}
html.js .mp-steps.in li:nth-child(2){transition-delay:.35s}html.js .mp-steps.in li:nth-child(3){transition-delay:.7s}html.js .mp-steps.in li:nth-child(4){transition-delay:1.05s}
@media (max-width:860px){
.mp-steps li{grid-template-rows:none}
.mp-steps::before{left:19px}
.mp-steps li{grid-template-columns:40px 1fr;column-gap:18px;row-gap:16px}
.mp-step-no{grid-row:1;width:40px;height:40px;font-size:17px}
.mp-steps h3{grid-column:2;margin:4px 0 0;font-size:21px}
.mp-step-ph{grid-column:2;grid-row:auto}
.mp-steps p,.mp-steps li.no-ph p,.mp-steps li.no-ph h3{grid-column:2}
}
/* 05 soft vs hard: textured menu cards (paper ivory / black lacquer), gold double frame */
.mp-vs-head{text-align:center;max-width:640px;margin:0 auto}
.mp-vs{display:grid;grid-template-columns:1fr 1fr;gap:clamp(16px,2vw,28px);margin-top:clamp(40px,5vw,72px)}
.mp-vs-tabs,.mp-vs-hint{display:none}
.mp-vs-card{position:relative;isolation:isolate;padding:clamp(40px,5vw,72px) clamp(28px,4vw,60px);display:flex;flex-direction:column;overflow:hidden}
.mp-vs-card[hidden]{display:none}
.mp-vs-card::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background-image:var(--grain)}
.mp-vs-card::after{content:"";position:absolute;inset:14px;border:1px solid rgba(191,162,108,.55);outline:1px solid rgba(191,162,108,.3);outline-offset:-6px;pointer-events:none}
.mp-vs-soft{background:radial-gradient(130% 90% at 20% 0%,#fffdf8 0%,#f4eee2 60%,#ece3d1 100%);color:var(--fg)}
.mp-vs-soft::before{opacity:.5;mix-blend-mode:multiply}
.mp-vs-hard{background:radial-gradient(120% 90% at 80% 0%,#2b2519 0%,#121110 55%,#0b0b0a 100%);color:var(--ink-fg)}
.mp-vs-hard::before{opacity:.35;mix-blend-mode:screen}
.mp-vs-card h3{font:400 clamp(40px,5vw,60px)/1 var(--serif);margin:0;text-align:center;letter-spacing:.12em}
.mp-vs-soft h3{color:#2b2418}
.mp-vs-hard h3{background:var(--gold-grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.mp-vs-card h3::after{content:"";display:block;width:56px;height:1px;margin:22px auto 0;background:var(--gold)}
.mp-vs-lead{margin:20px 0 32px;font-size:15px;line-height:1.8;color:#6f6656;text-align:center}
.mp-vs-hard .mp-vs-lead{color:var(--ink-muted)}
.mp-vs-card dl{margin:0}
.mp-vs-card dl div{display:grid;grid-template-columns:9em 1fr;gap:16px;padding:15px 0;border-top:1px dotted rgba(140,115,71,.45)}
.mp-vs-hard dl div{border-top-color:rgba(220,200,156,.28)}
.mp-vs-card dt{font:500 12.5px/1.7 var(--sans);color:var(--gold-deep);letter-spacing:.04em}
.mp-vs-hard dt{color:var(--gold)}
.mp-vs-card dd{margin:0;font-size:15px;line-height:1.7}
.mp-vs-price{margin:auto 0 0;padding-top:32px;font:400 clamp(32px,3.6vw,44px)/1 var(--serif);display:flex;flex-direction:column;align-items:center;gap:10px;text-align:center}
.mp-vs-price small{font:500 12.5px/1 var(--sans);color:var(--gold-deep);letter-spacing:.06em}
.mp-vs-hard .mp-vs-price{color:var(--gold-2)}
.mp-vs-hard .mp-vs-price small{color:var(--gold)}
@media (min-width:861px){.mp-vs-card[hidden]{display:flex}}
@media (max-width:860px){
.mp-vs{grid-template-columns:1fr;gap:0}
.mp-vs-hint{display:flex;align-items:center;justify-content:center;gap:8px;margin:0 0 12px;font:500 13px/1 var(--sans);color:var(--gold-deep);letter-spacing:.04em}
.mp-vs-hint::before{content:"";width:18px;height:18px;background:currentColor;-webkit-mask:url("data:image/svg+xml;utf8,") center/contain no-repeat;mask:url("data:image/svg+xml;utf8,") center/contain no-repeat}
.mp-vs-tabs{display:grid;grid-template-columns:1fr 1fr;gap:6px;padding:6px;margin:0 0 16px;border:1px solid var(--gold);border-radius:999px;background:#fbf7ef}
.mp-vs-tabs button{all:unset;cursor:pointer;text-align:center;padding:14px 0;border-radius:999px;font:400 19px/1 var(--serif);color:var(--gold-deep);letter-spacing:.12em;transition:background .3s,color .3s,box-shadow .3s}
.mp-vs-tabs button[aria-selected="false"]::after{content:" ›";letter-spacing:0}
.mp-vs-tabs button#vs-soft[aria-selected="true"]{background:linear-gradient(180deg,#fffdf8,#ece3d1);color:#2b2418;box-shadow:0 2px 8px rgba(0,0,0,.12),inset 0 0 0 1px rgba(191,162,108,.6)}
.mp-vs-tabs button#vs-hard[aria-selected="true"]{background:linear-gradient(180deg,#2b2519,#0e0d0b);color:var(--gold-2);box-shadow:0 2px 8px rgba(0,0,0,.25)}
.mp-vs-tabs button:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
.mp-vs-card.swap{animation:mpSwap .4s cubic-bezier(.2,.65,.2,1)}
.mp-vs-card dl div{grid-template-columns:7.5em 1fr;gap:12px}
.mp-vs-card dd{font-size:14px}
}
@media (prefers-reduced-motion:reduce){.mp-skin-panel.swap,.mp-vs-card.swap{animation:none}}
/* before/after as a static side-by-side pair (shown on phones on the matcha page) */
.ba-pair{display:none}
@media (max-width:860px){
#results.mp-ba .case-grid{display:grid;grid-template-columns:1fr;overflow:visible;gap:40px;scroll-snap-type:none}
.mp-ba .case-ba{display:none}
.mp-ba .ba-pair{display:grid;grid-template-columns:1fr 1fr;gap:4px}
.mp-ba .ba-pair figure{margin:0;position:relative;aspect-ratio:4/5;overflow:hidden;background:var(--panel)}
.mp-ba .ba-pair img{width:100%;height:100%;object-fit:cover;display:block}
.mp-ba .ba-pair figcaption{position:absolute;left:0;bottom:0;right:0;padding:6px 0;text-align:center;font:italic 400 15px/1 var(--serif);color:#fff;background:linear-gradient(transparent,rgba(0,0,0,.55))}
.mp-ba .ba-pair figure:last-child figcaption{color:var(--gold-2)}
}
/* matcha 01: concern pills on every screen size */
.mp-voice-list{display:none}
.band.pain .mp-cz-sp{margin-top:24px;padding:0;background:none;border:0}
.band.pain .mp-pills{gap:10px}
.band.pain .mp-pills li{min-height:50px;background:#f7f6f3;color:#3b3b39;border:1px solid rgba(0,0,0,.12);box-shadow:0 2px 6px rgba(0,0,0,.06);font-size:14.5px}
.band.pain .mp-pills-note{margin-top:30px;padding:0;background:none;border:0;text-align:center}
.band.pain .mp-pills-note::before{content:"";display:block;width:40px;height:1px;margin:0 auto 18px;background:var(--gold)}
.band.pain .mp-pills-note p{margin:0;font:400 22px/1.6 var(--serif);color:#2f2e2c;letter-spacing:.04em}
.band.pain .mp-pills-note a{display:inline-flex;align-items:center;gap:10px;margin-top:18px;padding:13px 26px;background:var(--ink);color:var(--gold-2);font:500 14px/1 var(--sans);letter-spacing:.06em}
.band.pain .mp-pills-note a::after{content:"";width:7px;height:7px;border-right:1px solid currentColor;border-bottom:1px solid currentColor;transform:rotate(45deg) translateY(-2px)}
.band.pain .mp-cz-sp{display:block}
.band.pain .mp-pills{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,1fr)}
.band.pain .mp-pills li{display:grid;place-items:center;text-align:center;padding:6px 8px;border-radius:999px;font-weight:500;line-height:1.3}
@media (min-width:861px){.band.pain .mp-pills{gap:12px}.band.pain .mp-pills li{min-height:56px;font-size:15.5px}.band.pain .mp-pills-note{text-align:left}.band.pain .mp-pills-note::before{margin:0 0 18px}}
@media (max-width:860px){
.mp-voices{gap:28px}
.mp-voices-ph{aspect-ratio:4/3;order:-1}
/* before/after on phones: photos only */
#results.mp-ba .case > :not(.ba-pair){display:none}
}
/* ---- bottom CTA bar (phones): iOS "liquid glass" capsule (dark tint, bright rim) ---- */
@media (max-width:860px){
.cta-bar{left:14px;right:14px;bottom:calc(12px + env(safe-area-inset-bottom,0px));padding:6px;gap:6px;border-radius:999px;isolation:isolate;
background:rgba(32,32,36,.56);
-webkit-backdrop-filter:blur(26px) saturate(180%);backdrop-filter:blur(26px) saturate(180%);
border:0;box-shadow:0 14px 34px rgba(0,0,0,.35),inset 0 0 0 .5px rgba(255,255,255,.14)}
/* glass rim: bright at top-left and bottom-right, fading in between */
.cta-bar::before,.cta-bar .btn::before{content:"";position:absolute;inset:0;border-radius:inherit;padding:1px;pointer-events:none;
background:linear-gradient(135deg,rgba(255,255,255,.75) 0%,rgba(255,255,255,.12) 30%,rgba(255,255,255,.04) 55%,rgba(255,255,255,.12) 75%,rgba(255,255,255,.55) 100%);
-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0)}
.cta-bar::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
background:radial-gradient(120% 140% at 15% 0%,rgba(255,255,255,.14),rgba(255,255,255,0) 55%)}
.cta-bar .btn{position:relative;z-index:1;min-height:46px!important;border-radius:999px!important;border:0!important;font:500 14.5px/1 var(--sans)!important;letter-spacing:.01em!important;text-transform:none;color:#fff!important;transition:transform .2s ease,background .2s ease}
.cta-bar .btn::before{display:block!important;opacity:.7;background:linear-gradient(135deg,rgba(255,255,255,.6) 0%,rgba(255,255,255,.08) 35%,rgba(255,255,255,0) 60%,rgba(255,255,255,.35) 100%)!important;z-index:0}
.cta-bar .btn::after{display:none!important}
html body .cta-bar .btn.solid:not(.line):not(.line-solid):not(.msgr),html body .cta-bar .btn.solid:not(.line):not(.line-solid):not(.msgr):hover{
background:linear-gradient(180deg,rgba(226,200,146,.38),rgba(170,140,86,.26))!important;background-size:auto!important;color:#fff!important;
box-shadow:inset 0 1px 1px rgba(255,255,255,.25),0 4px 12px rgba(0,0,0,.2)}
.cta-bar .btn:not(.solid){background:rgba(255,255,255,.1)!important;box-shadow:inset 0 1px 1px rgba(255,255,255,.18)}
.cta-bar .btn:active{transform:scale(.96)}
}
.mp-sol-lead p{margin:0 0 1em}.mp-sol-lead p:last-child{margin-bottom:0}
.mp-vs-power{margin:-8px auto 30px;padding:16px 14px;text-align:center;border:1px solid rgba(220,200,156,.45);font:400 clamp(18px,2vw,22px)/1.6 var(--serif);color:var(--gold-2)}
.mp-vs-power small{display:block;margin-top:6px;font:400 11.5px/1.4 var(--sans);color:var(--ink-muted)}