/* SARARI design system. Washi off-white, one indigo (藍) accent, hairlines, generous space, Zen Kaku Gothic New + Inter Tight. */
:root{
  --bg:#F7F6F2; --surface:#FFFFFF; --ink:#0F1B26; --ink-2:#3A4752; --muted:#5A6570; --line:#E4E2DB; --line-2:#D3D0C7;
  --ai:#1F4566; --ai-2:#15334D; --ice:#E6EFF1; --ok:#2F6B4F; --stone:#ECEAE6;
  --f-lat:"Inter Tight",ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --f-ja:"Inter Tight","Zen Kaku Gothic New","Hiragino Sans","Hiragino Kaku Gothic ProN","Noto Sans JP","Yu Gothic",Meiryo,sans-serif;
  --r:14px; --rs:10px; --gut:16px; --sec:80px; --hdr:60px;
  --ease:cubic-bezier(.2,.7,.2,1);
}
@media (min-width:760px){ :root{ --gut:32px; --sec:112px; } }
@media (min-width:1100px){ :root{ --gut:48px; --sec:136px; --hdr:72px; } }

*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; text-size-adjust:100%; scroll-behavior:smooth; scroll-padding-top:calc(var(--hdr) + 24px); background:var(--bg); }
html.lock{ overflow:hidden; }
body{ margin:0; background:var(--bg); color:var(--ink); -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; text-rendering:optimizeLegibility; overflow-x:hidden; }
html[lang="ja"] body{ font:400 15px/1.9 var(--f-ja); letter-spacing:.04em; }
html[lang="en"] body{ font:400 16px/1.6 var(--f-lat); letter-spacing:-.003em; }
@media (min-width:1100px){ html[lang="ja"] body{ font-size:15.5px; } }
img{ display:block; max-width:100%; height:auto; }
a{ color:inherit; text-decoration:none; }
button,input{ font:inherit; color:inherit; letter-spacing:inherit; }
button{ background:none; border:0; padding:0; cursor:pointer; }
h1,h2,h3,h4,p,ul,ol,figure,dl,dd,fieldset{ margin:0; }
ul,ol{ padding:0; list-style:none; }
table{ border-collapse:collapse; width:100%; }
:focus-visible{ outline:2px solid var(--ai); outline-offset:3px; border-radius:6px; }
.ftr :focus-visible,.hint :focus-visible{ outline-color:#E5EAEE; }
::selection{ background:var(--ai); color:#fff; }
[hidden]{ display:none !important; }
.num{ font-family:var(--f-lat); font-variant-numeric:tabular-nums; letter-spacing:0; }
.sr{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
.muted{ color:var(--muted); }
.skip{ position:absolute; left:-999px; top:8px; z-index:100; background:var(--ink); color:#fff; padding:12px 18px; border-radius:999px; font-weight:500; }
.skip:focus{ left:8px; }
.wrap{ width:100%; max-width:calc(1280px + var(--gut)*2); margin-inline:auto; padding-inline:var(--gut); }
.narrow{ max-width:calc(880px + var(--gut)*2); }

/* ---------- type */
.h1,.h2,.h3,.h4,.buy__h1{ font-weight:500; color:var(--ink); text-wrap:balance; }
html[lang="ja"] .h1,html[lang="ja"] .h2,html[lang="ja"] .h3,html[lang="ja"] .buy__h1{ font-feature-settings:"palt"; word-break:auto-phrase; }
/* short UI and table text: break between phrases, never inside a word */
html[lang="ja"] :is(.cmp th,.guide__t th,.guide__t td,.tier,.pack,.prog__steps,.chip,.btn,.ftr__col a,.acc__i summary,.card__line,.rec__n,.hero__from){ word-break:auto-phrase; }
html[lang="ja"] .h1{ font-size:clamp(28px,4.6vw,54px); line-height:1.45; letter-spacing:.05em; }
html[lang="ja"] .h2{ font-size:clamp(21px,3vw,36px); line-height:1.55; letter-spacing:.05em; }
html[lang="ja"] .h3{ font-size:clamp(20px,2vw,24px); line-height:1.6; letter-spacing:.05em; }
html[lang="ja"] .h4{ font-size:16.5px; line-height:1.65; letter-spacing:.05em; }
html[lang="en"] .h1{ font-size:clamp(38px,5.6vw,76px); line-height:1.02; letter-spacing:-.035em; }
html[lang="en"] .h2{ font-size:clamp(30px,3.7vw,50px); line-height:1.06; letter-spacing:-.03em; }
html[lang="en"] .h3{ font-size:clamp(23px,2.2vw,30px); line-height:1.15; letter-spacing:-.02em; }
html[lang="en"] .h4{ font-size:18px; line-height:1.3; letter-spacing:-.012em; }
.lede{ color:var(--ink-2); text-wrap:pretty; }
html[lang="ja"] .lede{ font-size:15px; line-height:2; max-width:34em; }
html[lang="en"] .lede{ font-size:17px; line-height:1.6; max-width:48ch; }
@media (min-width:1100px){ html[lang="ja"] .lede{ font-size:16px; } html[lang="en"] .lede{ font-size:18px; } }
.lede a,.fine a,.prose a,.acc__b a,.co__terms a,.specs a{ color:var(--ai); text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:4px; text-decoration-color:rgba(31,69,102,.35); transition:text-decoration-color .2s; }
.lede a:hover,.fine a:hover,.prose a:hover,.acc__b a:hover,.co__terms a:hover,.specs a:hover{ text-decoration-color:var(--ai); }
.eyebrow{ display:flex; align-items:center; gap:12px; margin-bottom:18px; font:500 12px/1.4 var(--f-lat); letter-spacing:.16em; text-transform:uppercase; color:var(--ai); }
html[lang="ja"] .eyebrow{ font-family:var(--f-ja); letter-spacing:.14em; font-size:12.5px; }
.eyebrow__n{ display:inline-flex; align-items:center; gap:12px; font-size:11.5px; letter-spacing:.12em; }
.eyebrow__n::after{ content:""; width:28px; height:1px; background:currentColor; opacity:.45; }
.label{ font:500 11.5px/1.5 var(--f-lat); letter-spacing:.14em; text-transform:uppercase; color:var(--muted); }
html[lang="ja"] .label{ font-family:var(--f-ja); letter-spacing:.1em; font-size:12px; }
.fine{ font-size:12.5px; line-height:1.7; color:var(--muted); }
.tlink{ display:inline-flex; align-items:center; gap:10px; min-height:44px; font-weight:500; font-size:14px; color:var(--ink); border-bottom:1px solid transparent; }
.tlink svg{ transition:transform .3s var(--ease); }
.tlink:hover{ color:var(--ai); }
.tlink:hover svg{ transform:translateX(3px); }
.tlink--center{ display:flex; justify-content:center; width:100%; margin-top:6px; }

/* ---------- buttons */
.btn{ display:inline-flex; align-items:center; justify-content:center; gap:10px; height:50px; padding:0 26px; border-radius:999px; background:var(--ink); color:#fff; border:1px solid var(--ink); font-weight:500; font-size:14.5px; white-space:nowrap; cursor:pointer; transition:background .25s,border-color .25s,color .25s,transform .1s; }
html[lang="ja"] .btn{ letter-spacing:.08em; }
.btn:hover{ background:var(--ai); border-color:var(--ai); }
.btn:active{ transform:translateY(1px); }
.btn svg{ flex:none; transition:transform .3s var(--ease); }
.btn:hover svg{ transform:translateX(3px); }
.btn[disabled]{ background:var(--line); border-color:var(--line); color:var(--muted); cursor:not-allowed; transform:none; }
.btn[disabled] svg{ transform:none; }
.btn--ghost{ background:transparent; color:var(--ink); border-color:rgba(15,27,38,.22); }
.btn--ghost:hover{ background:var(--surface); border-color:var(--ink); color:var(--ink); }
.btn--lg{ height:56px; padding:0 30px; font-size:15px; }
.btn--full{ width:100%; }
.btn--grow{ flex:1; min-width:0; }
.btn__sep{ width:1px; height:18px; background:rgba(255,255,255,.28); }
.iconbtn{ width:44px; height:44px; display:inline-grid; place-items:center; border-radius:50%; color:var(--ink); transition:background .2s; flex:none; }
.iconbtn:hover{ background:rgba(15,27,38,.05); }
.iconbtn--sm{ width:36px; height:36px; }

/* ---------- language hint, announcement, header */
.hint{ background:var(--ink); color:#E9EDF0; font-size:13px; }
.hint__in{ display:flex; align-items:center; gap:12px; min-height:48px; padding-block:6px; }
.hint__in > svg{ flex:none; opacity:.7; }
.hint p{ flex:1; line-height:1.5; }
.hint a{ color:#fff; text-decoration:underline; text-underline-offset:3px; margin-left:4px; white-space:nowrap; }
.hint .iconbtn{ color:#E9EDF0; }
.hint .iconbtn:hover{ background:rgba(255,255,255,.08); }

.announce{ background:var(--ai); color:#E3ECF2; font-size:12px; letter-spacing:.05em; }
html[lang="ja"] .announce{ letter-spacing:.08em; }
.announce__in{ display:grid; place-items:center; min-height:36px; text-align:center; }
.announce p{ grid-area:1/1; line-height:1.5; padding-block:9px; visibility:hidden; opacity:0; transition:opacity .3s ease,visibility 0s linear .3s; }
.announce p.on{ visibility:visible; opacity:1; transition:opacity .45s ease .3s,visibility 0s linear .3s; }
@keyframes fadein{ from{ opacity:0; transform:translateY(3px); } to{ opacity:1; transform:none; } }
@media (min-width:1100px){
  .announce__in{ display:flex; justify-content:center; gap:28px; }
  .announce p{ display:inline-flex; align-items:center; gap:28px; visibility:visible; opacity:1; transition:none; }
  .announce p + p::before{ content:""; width:3px; height:3px; border-radius:50%; background:currentColor; opacity:.55; }
}

.hdr{ position:sticky; top:0; z-index:40; background:rgba(247,246,242,.9); -webkit-backdrop-filter:saturate(160%) blur(16px); backdrop-filter:saturate(160%) blur(16px); border-bottom:1px solid transparent; transition:border-color .3s; }
.hdr.is-scrolled,.navon .hdr{ border-bottom-color:var(--line); }
.hdr__in{ height:var(--hdr); display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:8px; }
.hdr__burger{ margin-left:-10px; }
.logo{ display:inline-flex; align-items:center; min-height:44px; color:var(--ink); }
.wm{ display:block; height:15px; width:auto; overflow:visible; }
.hdr__end{ display:flex; align-items:center; justify-content:flex-end; gap:6px; }
.cartbtn{ position:relative; margin-right:-10px; }
.cartbtn b{ position:absolute; top:4px; right:2px; min-width:18px; height:18px; padding:0 5px; border-radius:9px; background:var(--ai); color:#fff; font:600 10.5px/18px var(--f-lat); text-align:center; letter-spacing:0; }
.lang{ display:inline-flex; align-items:center; gap:2px; font:500 12.5px/1 var(--f-lat); letter-spacing:.04em; color:var(--muted); }
.lang span{ opacity:.5; padding:0 2px; }
.lang a{ display:inline-flex; align-items:center; min-height:44px; padding:0 5px; transition:color .2s; }
.lang a[lang="ja"]{ font-family:var(--f-ja); }
.lang a:hover{ color:var(--ink); }
.lang a[aria-current]{ color:var(--ink); }
.nav{ display:none; }
.lang--menu{ display:none; }
@media (max-width:374px){ .hdr__end .lang{ display:none; } }
@media (max-width:1099px){
  .navon .hdr{ -webkit-backdrop-filter:none; backdrop-filter:none; background:var(--bg); }
  .navon .nav{ display:flex; flex-direction:column; position:fixed; left:0; right:0; top:var(--navtop,96px); bottom:0; z-index:39; background:var(--bg); padding:8px var(--gut) 32px; overflow-y:auto; animation:fadein .3s var(--ease); }
  .nav > a{ display:flex; align-items:center; min-height:60px; border-bottom:1px solid var(--line); font-size:18px; font-weight:500; }
  html[lang="ja"] .nav > a{ font-size:17px; letter-spacing:.08em; }
  .navon .lang--menu{ display:flex; margin-top:24px; font-size:14px; }
  .navon .nav__x{ display:grid; gap:14px; margin-top:24px; }
}
.nav__x{ display:none; }
.nav__pick{ display:grid; grid-template-columns:64px minmax(0,1fr) auto; align-items:center; gap:14px; padding:10px; border:1px solid var(--line); border-radius:var(--r); background:var(--surface); }
.nav__pimg{ position:relative; display:block; aspect-ratio:4/5; border-radius:var(--rs); overflow:hidden; background:var(--stone); }
.nav__pimg img,.nav__pimg .ph{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.nav__pt{ display:flex; flex-direction:column; min-width:0; line-height:1.45; }
.nav__pt small{ font-size:11px; color:var(--ai); letter-spacing:.06em; }
.nav__pt b{ font-weight:500; font-size:15px; }
.nav__pt .num{ font-size:13.5px; color:var(--ink-2); }
.nav__pick > svg{ color:var(--muted); }
.nav__offer{ display:flex; gap:10px; align-items:flex-start; padding:12px 14px; border-radius:var(--rs); background:var(--ice); font-size:13px; line-height:1.6; color:var(--ai); }
.nav__offer svg{ flex:none; margin-top:3px; }
.nav__help{ display:flex; flex-wrap:wrap; gap:4px 20px; }
.nav__help a{ display:inline-flex; align-items:center; min-height:44px; font-size:14px; color:var(--ink-2); text-decoration:underline; text-decoration-color:var(--line-2); text-underline-offset:4px; }
@media (min-width:1100px){
  .hdr__in{ grid-template-columns:auto 1fr auto; gap:48px; }
  .hdr__burger{ display:none; }
  .wm{ height:17px; }
  .nav{ display:flex; gap:32px; }
  .nav > a{ display:inline-flex; align-items:center; min-height:44px; font-size:13.5px; color:var(--ink-2); transition:color .2s; position:relative; }
  html[lang="ja"] .nav > a{ letter-spacing:.08em; }
  .nav > a::after{ content:""; position:absolute; left:0; right:0; bottom:10px; height:1px; background:var(--ai); transform:scaleX(0); transform-origin:left; transition:transform .35s var(--ease); }
  .nav > a:hover{ color:var(--ink); }
  .nav > a:hover::after{ transform:none; }
  .hdr__end{ gap:14px; }
}

/* ---------- media containers: the image (or its placeholder) fills the box, the box holds the ratio */
.card__media,.gal__slide,.moment__img,.split__media,.care__media,.ci__img,.hero__media,.gal__thumbs button{ position:relative; overflow:hidden; background:var(--stone); }
.card__media img,.card__media .ph,.gal__slide img,.gal__slide .ph,.moment__img img,.moment__img .ph,.split__media img,.split__media .ph,
.care__media img,.care__media .ph,.ci__img img,.ci__img .ph,.hero__media img,.hero__media .ph,.hero__media picture,.gal__thumbs img,.gal__thumbs .ph{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.ph{ display:block; background:var(--stone); }
.ph svg{ position:absolute; inset:0; width:100%; height:100%; }
.ph .b{ fill:var(--hex); }
.ph .w{ fill:var(--band); }
.ph .l{ fill:none; stroke:var(--ln); stroke-width:1.6; stroke-linecap:round; }
.ph .k{ fill:var(--ln); }
.ph .sh{ fill:rgba(15,27,38,.07); }
.ph--p2{ background:#E5E0D8; }
.ph--p3{ background:var(--hex); }
.ph--life{ background:var(--tone,#E6E3DD); }

/* ---------- hero */
.hero{ position:relative; display:flex; flex-direction:column; }
.hero__in{ display:contents; }
.hero__txt{ order:1; padding:28px var(--gut) 0; }
.hero__act{ order:2; padding:22px var(--gut) 28px; }
.hero__media{ order:3; aspect-ratio:1/1; max-height:72svh; width:100%; background:#E7E3DC; }
.hero__media img{ object-position:50% 82%; }
.hero__txt .eyebrow{ margin-bottom:14px; }
.hero__sub{ margin-top:14px; color:var(--ink-2); max-width:30em; text-wrap:pretty; }
html[lang="ja"] .hero__sub{ font-size:14px; line-height:1.95; }
html[lang="en"] .hero__sub{ font-size:16px; line-height:1.55; max-width:34ch; }
html[lang="ja"] .hero__h1{ font-size:clamp(29px,7.6vw,58px); }
.hero__cta{ display:flex; flex-wrap:wrap; gap:10px; }
.hero__cta .btn{ flex:1 1 auto; }
.hero__from{ margin-top:12px; font-size:13px; line-height:1.6; color:var(--ink-2); }
html[lang="en"] .hero__from{ font-size:14px; }
.hero__pts{ display:flex; flex-wrap:wrap; gap:8px; margin-top:18px; }
.hero__pts li{ display:inline-flex; align-items:center; gap:8px; padding:7px 14px 7px 11px; border-radius:999px; background:var(--surface); border:1px solid var(--line); font-size:12.5px; line-height:1.4; color:var(--ink-2); }
.hero__pts svg{ color:var(--ai); flex:none; }
@media (max-width:759px){
  .hero__pts{ flex-direction:column; gap:6px; margin-top:16px; }
  .hero__pts li{ padding:0; border:0; background:none; font-size:13px; }
}
@media (min-width:760px) and (max-width:1023px){
  .hero__txt{ padding-top:56px; max-width:680px; }
  .hero__act{ padding-bottom:40px; }
  .hero__cta .btn{ flex:0 0 auto; }
  .hero__media{ aspect-ratio:16/10; }
  .hero__media img{ object-position:70% 40%; }
}
@media (min-width:1024px){
  .hero{ display:block; min-height:clamp(600px,calc(100svh - var(--hdr) - 36px),860px); }
  .hero__media{ position:absolute; inset:0; aspect-ratio:auto; max-height:none; height:auto; }
  .hero__media img{ object-position:72% 40%; }
  .hero__media::after{ content:""; position:absolute; top:0; bottom:0; left:0; width:68%; background:linear-gradient(90deg,rgba(247,246,242,.95) 0%,rgba(247,246,242,.8) 38%,rgba(247,246,242,0) 100%); pointer-events:none; }
  .hero__in{ display:flex; flex-direction:column; justify-content:center; position:relative; z-index:1; min-height:inherit; padding-block:88px; }
  .hero__txt,.hero__act{ padding:0; max-width:560px; }
  html[lang="en"] .hero__txt{ max-width:640px; }
  .hero__sub{ margin-top:22px; }
  html[lang="ja"] .hero__sub{ font-size:15.5px; }
  html[lang="en"] .hero__sub{ font-size:18px; }
  .hero__act{ margin-top:36px; }
  .hero__cta .btn{ flex:0 0 auto; }
  .hero__from{ margin-top:16px; }
  .hero__pts{ margin-top:28px; }
  .hero__pts li{ background:rgba(255,255,255,.72); -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px); }
}

/* ---------- sections */
.sec{ padding-block:var(--sec); }
.sec--surface{ background:var(--surface); }
.sec--ice{ background:var(--ice); }
.sec--flush{ padding-top:0; }
.sec__head{ display:grid; gap:18px; margin-bottom:40px; }
.sec__head .h2{ max-width:20em; }
html[lang="en"] .sec__head .h2{ max-width:16em; }
.sec__side{ display:flex; flex-direction:column; align-items:flex-start; gap:12px; }
@media (min-width:900px){
  .sec__head{ grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr); align-items:end; gap:72px; margin-bottom:64px; }
  .sec__side{ justify-self:end; }
  .sec__head--stack{ grid-template-columns:1fr; gap:20px; margin-bottom:40px; }
  .sec__head--stack .sec__side{ justify-self:start; }
}
.pagehead{ padding-block:40px 36px; }
.pagehead__in{ display:grid; gap:18px; }
.pagehead .lede{ margin-top:4px; }
.pagehead--sm{ padding-block:36px 28px; }
.pagehead--sm .lede{ margin-top:14px; }
@media (min-width:900px){ .pagehead__in{ grid-template-columns:1fr 1fr; align-items:end; gap:72px; } }
@media (min-width:1100px){ .pagehead{ padding-block:88px 56px; } .pagehead--sm{ padding-block:72px 44px; } }

/* ---------- moments */
.moments{ display:grid; grid-auto-flow:column; grid-auto-columns:80%; gap:14px; overflow-x:auto; scroll-snap-type:x mandatory; margin-inline:calc(var(--gut)*-1); padding-inline:var(--gut); scroll-padding-inline:var(--gut); scrollbar-width:none; }
.moments::-webkit-scrollbar{ display:none; }
.moment{ scroll-snap-align:start; min-width:0; }
.moment__img{ aspect-ratio:4/5; border-radius:var(--r); }
.moment figcaption{ padding-top:20px; }
.moment__n{ display:block; font-size:11.5px; letter-spacing:.14em; color:var(--ai); margin-bottom:6px; }
.moment p{ margin-top:8px; color:var(--ink-2); font-size:14px; }
html[lang="en"] .moment p{ font-size:15px; }
@media (min-width:760px){ .moments{ grid-auto-flow:row; grid-template-columns:repeat(3,minmax(0,1fr)); gap:24px; overflow:visible; margin-inline:0; padding-inline:0; } }
@media (min-width:1100px){ .moments{ gap:32px; } }

/* ---------- split blocks (layers, discreet, about) */
.split{ display:grid; gap:40px; align-items:center; }
.split__media{ aspect-ratio:4/5; border-radius:var(--r); }
.split__media--sq{ aspect-ratio:1/1; }
@media (min-width:900px){
  .split{ grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:clamp(56px,7vw,112px); }
  .split--rev .split__media{ order:2; }
  .split--top{ align-items:end; }
}
.layers{ border-bottom:1px solid var(--line); }
.layers li{ display:grid; grid-template-columns:40px 1fr; gap:14px; padding:20px 0; border-top:1px solid var(--line); }
.layers p:not(.layers__n){ color:var(--ink-2); font-size:14px; margin-top:4px; }
html[lang="en"] .layers p:not(.layers__n){ font-size:15px; }
.layers__n{ font-size:11px; letter-spacing:.14em; color:var(--ai); line-height:1.6; }
.lg{ margin-top:2px; }
.lg rect{ fill:var(--line-2); transition:fill .3s; }
.lg rect.on{ fill:var(--ai); }
.split__txt > .tlink{ margin-top:12px; }
.note{ display:flex; gap:12px; margin-top:28px; padding:18px 20px; background:var(--ice); border-radius:var(--rs); font-size:13px; line-height:1.85; color:var(--ink-2); }
html[lang="en"] .note{ font-size:14px; line-height:1.55; }
.note svg{ flex:none; color:var(--ai); margin-top:2px; }

/* ---------- product grid and cards */
.grid{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:36px 12px; }
@media (min-width:760px){ .grid{ grid-template-columns:repeat(3,minmax(0,1fr)); gap:48px 20px; } }
@media (min-width:1100px){ .grid{ grid-template-columns:repeat(5,minmax(0,1fr)); gap:56px 20px; } }
.grid--row{ grid-template-columns:none; grid-auto-flow:column; grid-auto-columns:46%; gap:14px; overflow-x:auto; scroll-snap-type:x mandatory; margin-inline:calc(var(--gut)*-1); padding-inline:var(--gut); scroll-padding-inline:var(--gut); scrollbar-width:none; }
.grid--row::-webkit-scrollbar{ display:none; }
.grid--row > *{ scroll-snap-align:start; }
@media (min-width:900px){ .grid--row{ grid-auto-flow:row; grid-template-columns:repeat(4,minmax(0,1fr)); gap:24px; overflow:visible; margin-inline:0; padding-inline:0; } }
.card{ position:relative; display:flex; flex-direction:column; min-width:0; }
.card__media{ aspect-ratio:4/5; border-radius:var(--r); }
.card__media > a{ position:absolute; inset:0; display:block; }
.card__img,.card__media .ph{ transition:transform 1.2s var(--ease); }
.card__alt{ opacity:0; transition:opacity .5s var(--ease); }
@media (hover:hover){
  .card:hover .card__alt{ opacity:1; }
  .card:hover .card__img{ transform:scale(1.03); }
}
.badge{ position:absolute; top:10px; left:10px; z-index:1; display:inline-flex; align-items:center; height:24px; padding:0 10px; border-radius:999px; background:var(--surface); color:var(--ink); font-size:11px; font-weight:500; letter-spacing:.04em; pointer-events:none; }
.badge--line{ background:rgba(255,255,255,.82); color:var(--ink-2); }
.card__add{ position:absolute; right:8px; bottom:8px; z-index:1; width:44px; height:44px; display:grid; place-items:center; border-radius:50%; background:var(--surface); color:var(--ink); box-shadow:0 1px 2px rgba(15,27,38,.08),0 0 0 1px rgba(15,27,38,.05); transition:background .25s,color .25s,transform .2s; }
.card__add:hover{ background:var(--ink); color:#fff; }
.card__add:active{ transform:scale(.94); }
.card__body{ display:block; padding:14px 2px 0; }
.card__model{ font-size:10.5px; letter-spacing:.16em; color:var(--muted); }
.card__name{ margin-top:4px; font-size:15px; font-weight:500; line-height:1.45; transition:color .2s; }
html[lang="ja"] .card__name{ letter-spacing:.06em; }
html[lang="en"] .card__name{ font-size:16px; letter-spacing:-.01em; line-height:1.3; }
.card__body:hover .card__name{ color:var(--ai); }
.card__line{ margin-top:2px; font-size:12.5px; line-height:1.55; color:var(--ink-2); }
html[lang="en"] .card__line{ font-size:13.5px; line-height:1.4; }
.card__color{ display:flex; align-items:center; gap:8px; margin-top:4px; font-size:12.5px; line-height:1.5; color:var(--muted); }
.card__price{ display:flex; flex-wrap:wrap; align-items:center; gap:6px 10px; margin-top:10px; }
.card__price .num{ font-size:15px; font-weight:500; }
.chip{ display:inline-flex; align-items:center; height:22px; padding:0 8px; border-radius:999px; background:var(--ice); color:var(--ai); font-size:11px; font-weight:500; letter-spacing:.02em; white-space:nowrap; }
.sec--ice .chip{ background:var(--surface); }
.dot{ display:inline-block; flex:none; width:10px; height:10px; border-radius:50%; background:var(--c); box-shadow:inset 0 0 0 1px rgba(15,27,38,.16); }
@media (min-width:1100px){ .card__name{ font-size:15.5px; } }

/* bundle tile closing the grid on 2 and 3 columns */
.promo{ grid-column:span 2; display:flex; flex-direction:column; justify-content:center; gap:6px; padding:24px; border-radius:var(--r); background:var(--ice); color:var(--ink); transition:background .3s; }
.promo:hover{ background:#DCE8EB; }
.promo .eyebrow{ margin-bottom:4px; }
.promo__t{ font-size:19px; font-weight:500; line-height:1.45; }
html[lang="ja"] .promo__t{ letter-spacing:.06em; font-feature-settings:"palt"; }
.promo__d{ font-size:13px; color:var(--ink-2); line-height:1.7; }
.promo__go{ display:inline-flex; align-items:center; gap:8px; margin-top:10px; font-size:13.5px; font-weight:500; color:var(--ai); }
@media (min-width:1100px){ .promo{ display:none; } }
.silknote{ display:flex; gap:10px; margin-top:40px; max-width:52em; font-size:13px; line-height:1.8; color:var(--ink-2); }
html[lang="en"] .silknote{ font-size:14px; line-height:1.55; }
.silknote svg{ flex:none; color:var(--muted); margin-top:2px; }

/* ---------- bundle tiers */
.tiers{ display:grid; gap:12px; }
@media (min-width:760px){ .tiers{ grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; } }
@media (min-width:1100px){ .tiers{ gap:24px; } }
.tier{ position:relative; display:flex; flex-direction:column; padding:24px 24px 22px; border-radius:var(--r); background:var(--surface); border:1px solid rgba(15,27,38,.06); }
.tier--best{ border-color:var(--ai); box-shadow:inset 0 0 0 1px var(--ai); }
.tier__flag{ position:absolute; top:-12px; left:24px; height:24px; display:inline-flex; align-items:center; padding:0 12px; border-radius:999px; background:var(--ai); color:#fff; font-size:11.5px; font-weight:500; letter-spacing:.06em; }
.tier__q{ font-size:14px; font-weight:500; color:var(--ink-2); }
.tier__big{ margin-top:10px; font-size:clamp(34px,3.6vw,48px); font-weight:500; line-height:1.05; letter-spacing:-.03em; color:var(--ink); }
.tier--best .tier__big{ color:var(--ai); }
.tier__per{ margin-top:8px; font-size:13.5px; color:var(--ink-2); }
.tier > p:nth-last-child(2){ margin-bottom:20px; }
.tier__b{ margin-top:auto; padding-top:16px; border-top:1px solid var(--line); font-size:13px; line-height:1.75; color:var(--muted); }
html[lang="en"] .tier__b{ font-size:14px; line-height:1.5; }
.offer__ft{ display:flex; flex-direction:column; align-items:flex-start; gap:20px; margin-top:32px; }
@media (min-width:760px){ .offer__ft{ flex-direction:row; align-items:center; justify-content:space-between; gap:40px; } .offer__ft .fine{ max-width:40em; } }

/* ---------- comparison */
.cmpwrap{ max-width:980px; margin-inline:auto; }
.cmpwrap .sec__head{ text-align:center; justify-items:center; }
.cmpwrap .sec__head .h2{ max-width:none; }
.cmp__scroll{ overflow-x:auto; -webkit-overflow-scrolling:touch; }
.cmp{ table-layout:fixed; border-collapse:separate; border-spacing:0; min-width:340px; }
.cmp thead td{ width:34%; }
.cmp thead th{ padding:18px 6px 16px; font-size:12px; font-weight:500; line-height:1.45; color:var(--ink-2); text-align:center; vertical-align:bottom; }
.cmp thead th.is-us{ color:var(--ai); font:600 13px/1.4 var(--f-lat); letter-spacing:.14em; }
.cmp tbody th{ padding:16px 10px 16px 0; font-size:13px; font-weight:500; line-height:1.6; text-align:left; border-top:1px solid var(--line); }
.cmp td{ padding:12px 4px; text-align:center; vertical-align:middle; border-top:1px solid var(--line); }
.cmp .is-us{ background:var(--surface); }
.cmp thead .is-us{ border-radius:var(--r) var(--r) 0 0; }
.cmp tbody tr:last-child .is-us{ border-radius:0 0 var(--r) var(--r); }
.cmp tbody tr:last-child th,.cmp tbody tr:last-child td{ border-bottom:1px solid var(--line); }
.cmp__ic{ display:inline-grid; place-items:center; }
.cmp__ic--yes{ color:var(--ai); }
.cmp__ic--no{ color:#A9AFB4; }
.cmp__ic--partial{ color:var(--ink-2); }
.cmp__txt{ font-size:13px; color:var(--ink-2); }
@media (min-width:760px){
  .cmp thead td{ width:40%; }
  .cmp thead th{ font-size:13.5px; padding:24px 12px 20px; }
  .cmp tbody th{ font-size:15px; padding:20px 16px 20px 0; }
  html[lang="en"] .cmp tbody th{ font-size:16px; }
}

/* ---------- discreet points */
.points{ border-bottom:1px solid var(--line); }
.points li{ display:flex; gap:14px; align-items:flex-start; padding:16px 0; border-top:1px solid var(--line); font-size:14.5px; line-height:1.75; }
html[lang="en"] .points li{ font-size:15.5px; line-height:1.5; }
.points svg{ flex:none; color:var(--ai); margin-top:3px; }

/* ---------- care and returns */
.care{ display:grid; gap:40px; }
.care__media{ aspect-ratio:4/5; border-radius:var(--r); }
@media (max-width:899px){ .care__media{ aspect-ratio:16/10; } }
@media (min-width:900px){ .care{ grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr); gap:clamp(56px,7vw,112px); align-items:center; } }
.care__steps{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }
@media (max-width:559px){ .care__steps{ grid-template-columns:1fr; } .care__steps li{ display:grid; grid-template-columns:28px 1fr; gap:4px 14px; padding:18px; } .care__ic{ grid-row:span 2; } }
.care__steps li{ display:flex; flex-direction:column; gap:10px; padding:20px 18px; border-radius:var(--r); background:var(--bg); }
.care__ic{ color:var(--ai); }
.care__n{ font-size:11px; letter-spacing:.14em; color:var(--muted); }
.care__steps p{ font-size:13.5px; line-height:1.75; color:var(--ink); }
html[lang="en"] .care__steps p{ font-size:14.5px; line-height:1.45; }
@media (min-width:1100px){ .care__steps{ gap:14px; } .care__steps li{ padding:24px 22px; } }
.guar{ display:flex; gap:18px; margin-top:16px; padding:24px 22px; border-radius:var(--r); border:1px solid var(--line); }
.guar > svg{ flex:none; color:var(--ai); }
.guar p{ margin-top:6px; color:var(--ink-2); font-size:14px; }
html[lang="en"] .guar p{ font-size:15px; }
.guar .tlink{ margin-top:4px; }

/* ---------- FAQ accordion */
.faq{ display:grid; gap:28px; }
@media (min-width:900px){ .faq{ grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr); gap:96px; align-items:start; } .faq__head{ position:sticky; top:calc(var(--hdr) + 32px); } }
.faq__head .lede{ margin-top:18px; font-size:14px; }
html[lang="en"] .faq__head .lede{ font-size:16px; }
.acc{ border-top:1px solid var(--line); }
.acc__i{ border-bottom:1px solid var(--line); }
.acc summary{ list-style:none; cursor:pointer; display:flex; justify-content:space-between; align-items:center; gap:24px; min-height:64px; padding:18px 0; font-weight:500; font-size:15px; line-height:1.6; }
html[lang="en"] .acc summary{ font-size:16.5px; line-height:1.4; }
.acc summary::-webkit-details-marker{ display:none; }
.acc summary i{ flex:none; position:relative; width:12px; height:12px; transition:transform .35s var(--ease); }
.acc summary i::before,.acc summary i::after{ content:""; position:absolute; left:0; right:0; top:50%; height:1.5px; margin-top:-.75px; background:var(--ink-2); border-radius:1px; }
.acc summary i::after{ transform:rotate(90deg); transition:opacity .25s; }
.acc__i[open] summary i{ transform:rotate(180deg); }
.acc__i[open] summary i::after{ opacity:0; }
.acc summary:hover{ color:var(--ai); }
.acc__b{ padding:0 36px 24px 0; color:var(--ink-2); font-size:14px; line-height:1.95; }
html[lang="en"] .acc__b{ font-size:15.5px; line-height:1.6; }
.acc__b p + p{ margin-top:10px; }

/* ---------- final call to action */
.final{ padding-block:var(--sec); background:var(--surface); text-align:center; border-top:1px solid var(--line); }
.final__in{ display:flex; flex-direction:column; align-items:center; }
.final .h2{ max-width:18em; }
.final .lede{ margin:18px auto 32px; }
.final__dots{ display:flex; flex-wrap:wrap; justify-content:center; gap:10px; margin-bottom:36px; }
.swatch{ width:22px; height:22px; border-radius:50%; background:var(--c); box-shadow:inset 0 0 0 1px rgba(15,27,38,.14); transition:transform .3s var(--ease); }
.swatch:hover{ transform:translateY(-3px); }

/* ---------- footer */
.ftr{ background:var(--ink); color:#AEB8C1; padding-block:72px 32px; font-size:13.5px; }
.ftr a{ transition:color .2s; }
.ftr a:hover{ color:#fff; }
.ftr__grid{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:40px 20px; }
.ftr__brand{ grid-column:1/-1; }
.logo--ftr{ color:#F7F6F2; flex-direction:column; align-items:flex-start; gap:10px; }
.logo--ftr .wm{ height:20px; }
.logo__kana{ font:500 12px/1 var(--f-ja); letter-spacing:.42em; color:#8E9AA5; }
.ftr__meaning{ margin-top:18px; max-width:26em; color:#C9D1D8; font-size:13.5px; line-height:1.8; }
.ftr__mail{ margin-top:16px; }
.ftr__mail a{ display:inline-flex; align-items:center; gap:10px; min-height:44px; color:#E5EAEE; }
.ftr__col h2{ margin-bottom:10px; font:500 11px/1.4 var(--f-lat); letter-spacing:.16em; text-transform:uppercase; color:#7D8A96; }
html[lang="ja"] .ftr__col h2{ font-family:var(--f-ja); letter-spacing:.12em; }
.ftr__col a{ display:inline-flex; align-items:center; gap:10px; min-height:40px; line-height:1.4; color:#C9D1D8; }
.ftr__models .num{ font-size:11px; color:#8794A0; min-width:18px; }
.ftr__bot{ display:grid; gap:20px; margin-top:56px; padding-top:24px; border-top:1px solid rgba(255,255,255,.1); font-size:12px; color:#8592A0; line-height:1.7; }
.ftr__end{ display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:8px 24px; }
.lang--ftr{ color:#8592A0; font-size:13px; }
.lang--ftr a[aria-current]{ color:#fff; }
.lang--ftr a:hover{ color:#fff; }
@media (min-width:760px){ .ftr__grid{ grid-template-columns:repeat(4,minmax(0,1fr)); } }
@media (min-width:1100px){
  .ftr{ padding-block:104px 40px; }
  .ftr__grid{ grid-template-columns:minmax(0,1.5fr) repeat(4,minmax(0,1fr)); gap:48px; }
  .ftr__brand{ grid-column:auto; }
  .ftr__bot{ grid-template-columns:1fr auto; align-items:end; margin-top:88px; }
}

/* ---------- product page */
.crumb{ display:flex; flex-wrap:wrap; align-items:center; gap:0 10px; font-size:12px; color:var(--muted); }
@media (max-width:759px){ .crumb{ display:none; } .pdp{ padding-top:0; } }
.crumb a{ display:inline-flex; align-items:center; min-height:44px; transition:color .2s; }
.crumb a:hover{ color:var(--ink); }
.crumb [aria-current]{ color:var(--ink-2); }
.pdp{ display:grid; gap:28px; padding-bottom:var(--sec); }
.gal{ position:relative; min-width:0; }
.gal__main{ display:flex; overflow-x:auto; scroll-snap-type:x mandatory; scrollbar-width:none; background:var(--stone); margin-inline:calc(var(--gut)*-1); }
.gal__main::-webkit-scrollbar{ display:none; }
.gal__slide{ flex:0 0 100%; scroll-snap-align:start; aspect-ratio:4/5; }
.gal__count{ position:absolute; right:12px; top:12px; padding:4px 10px; border-radius:999px; background:rgba(255,255,255,.86); font-size:12px; color:var(--ink-2); }
.gal__thumbs{ display:none; }
@media (min-width:760px){
  .gal__main{ margin-inline:0; border-radius:var(--r); }
  .gal__count{ display:none; }
  .gal__thumbs{ display:flex; gap:10px; margin-top:12px; }
  .gal__thumbs button{ flex:0 0 76px; aspect-ratio:4/5; border-radius:var(--rs); opacity:.55; outline:1px solid transparent; outline-offset:2px; transition:opacity .2s,outline-color .2s; }
  .gal__thumbs button:hover{ opacity:1; }
  .gal__thumbs button.on{ opacity:1; outline-color:var(--ink); }
}
.buy{ min-width:0; }
.buy__model{ display:flex; flex-wrap:wrap; align-items:center; gap:8px; font-size:12px; color:var(--muted); }
.buy__model .num{ letter-spacing:.16em; color:var(--ai); font-weight:500; }
.buy__h1{ margin-top:8px; }
html[lang="ja"] .buy__h1{ font-size:clamp(26px,3vw,36px); line-height:1.45; letter-spacing:.08em; }
html[lang="en"] .buy__h1{ font-size:clamp(34px,3.6vw,50px); line-height:1.02; letter-spacing:-.035em; }
.buy__tag{ margin-top:10px; color:var(--ink-2); font-size:14.5px; line-height:1.85; }
html[lang="en"] .buy__tag{ font-size:17px; line-height:1.45; }
.buy__price{ display:flex; flex-wrap:wrap; align-items:baseline; gap:4px 12px; margin-top:20px; }
.buy__price .num{ font-size:28px; font-weight:500; letter-spacing:-.01em; }
.buy__note{ font-size:12px; color:var(--muted); }
.buy__color{ display:flex; flex-wrap:wrap; align-items:center; gap:10px; margin-top:20px; padding-top:18px; border-top:1px solid var(--line); font-size:14px; }
.buy__color .label{ margin-right:2px; }
.buy__color b{ font-weight:500; }
.buy__one{ margin-left:auto; font-size:12.5px; color:var(--muted); }
.packs{ border:0; padding:0; margin-top:22px; min-width:0; }
.packs legend{ padding:0; margin-bottom:10px; }
.packs__row{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; }
.pack{ display:flex; flex-direction:column; align-items:flex-start; gap:3px; min-width:0; padding:12px 12px 11px; border:1px solid var(--line-2); border-radius:12px; background:var(--surface); text-align:left; line-height:1.35; transition:border-color .2s,box-shadow .2s; }
.pack:hover{ border-color:var(--ink-2); }
.pack[aria-pressed="true"]{ border-color:var(--ink); box-shadow:inset 0 0 0 1px var(--ink); }
.pack b{ font-size:13px; font-weight:500; }
.pack__p{ font-size:16px; font-weight:500; }
.pack__p small{ font-size:10.5px; color:var(--muted); font-weight:400; margin-left:1px; }
.pack em{ font-style:normal; font-size:10.5px; line-height:1.45; color:var(--ai); }
.pack em span{ display:block; white-space:nowrap; }
.packs__hint{ margin-top:10px; font-size:12px; line-height:1.6; color:var(--muted); }
/* a single option (no quantity tiers): one card, selected, not clickable */
.packs--one .packs__row{ grid-template-columns:minmax(0,220px); }
.packs--one .pack{ cursor:default; }
.packs--one .pack:hover{ border-color:var(--ink); }
.buyrow{ display:flex; gap:10px; margin-top:18px; }
.qty{ display:inline-flex; align-items:center; height:56px; border:1px solid var(--line-2); border-radius:999px; background:var(--surface); flex:none; }
.qty button{ width:44px; height:100%; display:grid; place-items:center; border-radius:999px; color:var(--ink-2); }
.qty button:hover{ color:var(--ink); }
.qty input{ width:26px; border:0; background:none; text-align:center; font-size:15px; padding:0; outline:0; }
.qty input:focus-visible{ outline:2px solid var(--ai); outline-offset:2px; }
.qty--sm{ height:40px; }
.qty--sm button{ width:36px; }
.qty--sm input{ width:22px; font-size:14px; }
.eta{ display:flex; gap:14px; margin-top:16px; padding:16px 18px; border-radius:12px; background:var(--surface); border:1px solid var(--line); }
.eta > svg{ flex:none; color:var(--ai); margin-top:1px; }
.eta p{ display:flex; flex-wrap:wrap; gap:2px 12px; font-size:14px; line-height:1.6; }
.eta b{ font-weight:500; }
.eta [data-eta]{ font-weight:500; color:var(--ai); }
.eta small{ display:block; margin-top:2px; font-size:11.5px; line-height:1.6; color:var(--muted); }
.trust{ margin-top:16px; border-top:1px solid var(--line); }
.trust li{ display:flex; gap:14px; align-items:flex-start; padding:14px 0; border-bottom:1px solid var(--line); }
.trust svg{ flex:none; color:var(--ai); margin-top:2px; }
.trust b{ display:block; font-size:13.5px; font-weight:500; line-height:1.5; }
.trust span{ display:block; font-size:12px; line-height:1.6; color:var(--muted); }
.ticks{ margin-top:22px; }
.ticks li{ display:flex; gap:10px; padding:5px 0; font-size:14px; line-height:1.75; }
html[lang="en"] .ticks li{ font-size:15px; line-height:1.5; }
.ticks svg{ flex:none; color:var(--ai); margin-top:5px; }
.buy__sum{ margin-top:16px; color:var(--ink-2); font-size:14px; }
html[lang="en"] .buy__sum{ font-size:15px; }
@media (min-width:1024px){
  .pdp{ grid-template-columns:minmax(0,1.12fr) minmax(0,.88fr); gap:clamp(48px,5vw,88px); align-items:start; padding-top:4px; }
  .gal{ position:sticky; top:calc(var(--hdr) + 20px); }
  .buy{ padding-top:8px; }
}
.pinfo{ display:grid; gap:48px; }
@media (min-width:900px){ .pinfo{ grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:clamp(56px,7vw,112px); } }
.pinfo__txt .h3{ margin-bottom:18px; }
.pinfo__txt p{ color:var(--ink-2); }
.pinfo__txt p + p{ margin-top:14px; }
.bestfor{ margin-top:28px; padding:20px 22px; border-radius:var(--r); background:var(--bg); }
.bestfor .label{ margin-bottom:6px; }
.specs{ border-top:1px solid var(--line); }
.specs th,.specs td{ text-align:left; vertical-align:top; padding:15px 0; border-bottom:1px solid var(--line); }
.specs th{ width:34%; padding-right:16px; font-size:12.5px; font-weight:500; color:var(--muted); line-height:1.7; }
.specs td{ font-size:14px; line-height:1.75; color:var(--ink); }
html[lang="en"] .specs td{ font-size:15px; line-height:1.5; }
.scope{ padding-block:40px; }
.scope__in{ display:flex; gap:16px; padding:24px; border-radius:var(--r); background:var(--ice); }
.scope__in > svg{ flex:none; color:var(--ai); }
.scope p{ margin-top:6px; color:var(--ink-2); font-size:14px; }
html[lang="en"] .scope p{ font-size:15px; }
@media (min-width:900px){ .scope{ padding-block:56px; } .scope__in{ padding:32px 36px; } }
.stickybar{ position:fixed; left:0; right:0; bottom:0; z-index:35; display:flex; align-items:center; justify-content:space-between; gap:16px; padding:10px var(--gut) calc(10px + env(safe-area-inset-bottom)); background:rgba(255,255,255,.94); -webkit-backdrop-filter:blur(16px); backdrop-filter:blur(16px); border-top:1px solid var(--line); transform:translateY(110%); transition:transform .35s var(--ease); }
.stickybar.on{ transform:none; }
.stickybar__t{ min-width:0; }
.stickybar b{ display:block; font-weight:500; font-size:14.5px; line-height:1.4; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.stickybar__t > span{ display:flex; align-items:center; gap:7px; font-size:12.5px; color:var(--muted); white-space:nowrap; }
.stickybar .btn{ height:46px; padding:0 22px; }
@media (min-width:1024px){ .stickybar{ display:none; } }
@media (max-width:1023px){ body.has-stickybar .ftr{ padding-bottom:calc(100px + env(safe-area-inset-bottom)); } }

/* ---------- shop */
.shopbar{ display:flex; flex-wrap:wrap; justify-content:space-between; align-items:center; gap:14px 24px; padding-bottom:20px; margin-bottom:32px; border-bottom:1px solid var(--line); }
.chips{ display:flex; flex-wrap:wrap; gap:8px; }
.fchip{ display:inline-flex; align-items:center; gap:8px; height:40px; padding:0 16px; border-radius:999px; border:1px solid var(--line-2); font-size:13px; color:var(--ink-2); transition:background .2s,color .2s,border-color .2s; }
.fchip .num{ font-size:11.5px; color:var(--muted); }
.fchip:hover{ border-color:var(--ink-2); color:var(--ink); }
.fchip[aria-pressed="true"]{ background:var(--ink); border-color:var(--ink); color:#fff; }
.fchip[aria-pressed="true"] .num{ color:rgba(255,255,255,.6); }
.shopbar__guide{ min-height:40px; font-size:13px; color:var(--ai); }
@media (min-width:760px){ .shopbar__guide{ margin-right:auto; } }
.shopbar__rule{ display:flex; align-items:center; gap:8px; font-size:12.5px; line-height:1.6; color:var(--ai); }
.shopbar__rule svg{ flex:none; }
.guide{ border-top:1px solid var(--ink); }
.guide__t thead th{ padding:14px 12px 14px 0; font-size:11.5px; font-weight:500; letter-spacing:.1em; color:var(--muted); text-align:left; border-bottom:1px solid var(--line); }
.guide__t thead th:last-child{ text-align:right; padding-right:0; }
.guide__t tbody th,.guide__t td{ padding:18px 16px 18px 0; border-bottom:1px solid var(--line); text-align:left; vertical-align:middle; font-size:14px; }
.guide__t tbody th{ width:32%; font-weight:500; }
.guide__t tbody th a{ display:inline-flex; align-items:center; gap:12px; transition:color .2s; }
.guide__t tbody th a:hover{ color:var(--ai); }
.guide__no{ font-size:11.5px; letter-spacing:.12em; color:var(--muted); min-width:20px; }
.guide__t td{ color:var(--ink-2); }
.guide__t td.num{ text-align:right; padding-right:0; white-space:nowrap; color:var(--ink); font-weight:500; }
@media (max-width:759px){
  .guide__t thead{ display:none; }
  .guide__t tr{ display:grid; grid-template-columns:1fr auto; gap:4px 16px; padding:16px 0; border-bottom:1px solid var(--line); }
  .guide__t tbody th,.guide__t td{ padding:0; border:0; width:auto; }
  .guide__t td:nth-child(2){ grid-column:1/-1; grid-row:2; font-size:13px; line-height:1.7; }
  .guide__t td.num{ grid-row:1; grid-column:2; }
}

/* ---------- about */
.pagehead--about .split__media{ aspect-ratio:16/10; }
.prose--about{ max-width:calc(760px + var(--gut)*2); }
.prose--about p{ font-size:15.5px; line-height:2.05; color:var(--ink-2); }
html[lang="en"] .prose--about p{ font-size:18px; line-height:1.65; }
.prose--about p + p{ margin-top:1.4em; }
.values{ display:grid; gap:36px; }
@media (min-width:760px){ .values{ grid-template-columns:repeat(3,minmax(0,1fr)); gap:32px; } }
.values li{ padding-top:20px; border-top:1px solid var(--ink); }
.value__n{ display:block; font-size:11.5px; letter-spacing:.14em; color:var(--ai); margin-bottom:12px; }
.values p{ margin-top:10px; color:var(--ink-2); font-size:14px; }
html[lang="en"] .values p{ font-size:15px; }
.specs--co th{ width:28%; }
.co__link{ margin-top:16px; }

/* ---------- cart, drawer, checkout */
.drawer{ position:fixed; inset:0; z-index:60; visibility:hidden; transition:visibility 0s .4s; }
.drawer.on{ visibility:visible; transition-delay:0s; }
.drawer__bg{ position:absolute; inset:0; background:rgba(15,27,38,.36); opacity:0; transition:opacity .35s; }
.drawer.on .drawer__bg{ opacity:1; }
.drawer__pan{ position:absolute; top:0; right:0; bottom:0; width:min(440px,100%); display:flex; flex-direction:column; background:var(--bg); transform:translateX(100%); transition:transform .45s var(--ease); outline:0; }
.drawer.on .drawer__pan{ transform:none; }
.drawer__hd{ display:flex; justify-content:space-between; align-items:center; padding:10px 12px 10px 24px; border-bottom:1px solid var(--line); }
.drawer__t{ font-size:16px; font-weight:500; }
.drawer__t .num{ font-size:13px; color:var(--muted); margin-left:6px; }
.drawer__prog{ padding:4px 24px 0; }
.drawer__bd{ flex:1; overflow-y:auto; padding:0 24px; }
.drawer__ft{ padding:16px 24px calc(18px + env(safe-area-inset-bottom)); border-top:1px solid var(--line); background:var(--surface); }
.drawer__ft .tots{ margin:0 0 14px; }
.prog{ padding:14px 0 16px; }
.prog__msg{ font-size:13px; font-weight:500; line-height:1.6; margin-bottom:10px; color:var(--ink); }
.prog__msg.done{ color:var(--ok); }
.prog__bar{ position:relative; height:4px; border-radius:999px; background:var(--line); overflow:hidden; }
.prog__bar i{ position:absolute; left:0; top:0; bottom:0; width:0; background:var(--ai); border-radius:inherit; transition:width .5s var(--ease); }
.prog__steps{ display:grid; grid-template-columns:repeat(var(--n,3),minmax(0,1fr)); margin-top:8px; font-size:10.5px; line-height:1.45; color:var(--muted); }
.prog__steps li{ text-align:right; padding-left:6px; }
.prog__steps li b{ display:block; font-weight:500; font-size:11px; color:var(--ink-2); }
.prog__steps li.on,.prog__steps li.on b{ color:var(--ai); }
.lines{ }
.ci{ display:grid; grid-template-columns:80px minmax(0,1fr) auto; gap:16px; padding:18px 0; border-bottom:1px solid var(--line); }
.ci__img{ display:block; aspect-ratio:4/5; border-radius:var(--rs); }
.ci__mid{ min-width:0; }
.ci__model{ font-size:10.5px; letter-spacing:.14em; color:var(--muted); }
.ci__name{ display:block; font-weight:500; font-size:14.5px; line-height:1.45; }
.ci__name:hover{ color:var(--ai); }
.ci__meta{ display:flex; flex-wrap:wrap; align-items:center; gap:4px 8px; margin-top:4px; font-size:12.5px; color:var(--muted); }
.ci__ctl{ display:flex; align-items:center; gap:12px; margin-top:10px; }
.ci__rm{ min-height:40px; font-size:12.5px; color:var(--muted); text-decoration:underline; text-decoration-color:var(--line-2); text-underline-offset:3px; }
.ci__rm:hover{ color:var(--ink); }
.ci__tot{ font-size:14.5px; font-weight:500; }
.tots{ margin-top:6px; }
.tot{ display:flex; justify-content:space-between; align-items:baseline; gap:16px; padding:5px 0; font-size:13.5px; color:var(--ink-2); }
.tot dd{ font-size:14px; }
.tot--disc dd{ color:var(--ok); }
.tot--big{ margin-top:8px; padding-top:14px; border-top:1px solid var(--line); color:var(--ink); font-weight:500; font-size:15px; }
.tot--big dd{ font-size:20px; font-weight:500; }
/* complete your rotation: shown under the cart lines below the top tier, compact so the drawer totals stay in view */
.rec{ padding:16px 0 8px; }
.rec__t{ margin-bottom:10px; font-size:13px; font-weight:500; color:var(--ink); }
.rec__l{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; }
.rec__i{ display:flex; flex-direction:column; min-width:0; }
.rec__m{ position:relative; }
.rec__img{ position:relative; display:block; height:88px; border-radius:var(--rs); overflow:hidden; background:var(--stone); }
.rec__img img,.rec__img .ph{ position:absolute; inset:0; width:100%; height:100%; object-fit:contain; }
.rec__add{ position:absolute; right:4px; bottom:4px; width:32px; height:32px; display:grid; place-items:center; border-radius:50%; background:var(--surface); color:var(--ink); box-shadow:0 1px 2px rgba(15,27,38,.08),0 0 0 1px rgba(15,27,38,.06); transition:background .2s,color .2s; }
.rec__add::before{ content:""; position:absolute; inset:-6px; }
.rec__add:hover{ background:var(--ink); color:#fff; }
.rec__n{ margin-top:6px; font-size:12.5px; font-weight:500; line-height:1.4; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.rec__n:hover{ color:var(--ai); }
.rec__p{ font-size:12px; line-height:1.4; color:var(--ink-2); }
.cartpage .rec{ padding-top:28px; }
@media (min-width:760px){ .cartpage .rec__l{ grid-template-columns:repeat(3,minmax(0,170px)); } .cartpage .rec__img{ height:120px; } }
.empty{ text-align:center; padding:56px 8px; }
.empty__t{ font-size:18px; font-weight:500; }
.empty p + p{ max-width:28em; margin:10px auto 26px; color:var(--muted); font-size:13.5px; line-height:1.8; }
.cartpage{ display:grid; gap:32px; align-items:start; }
.cartpage.is-empty{ grid-template-columns:1fr; }
.cartpage .lines{ border-top:1px solid var(--line); }
.cartpage .ci{ grid-template-columns:96px minmax(0,1fr) auto; }
.summary{ padding:24px; border-radius:var(--r); background:var(--surface); border:1px solid var(--line); }
.summary__t{ font-size:15px; font-weight:500; }
.summary .prog{ padding-bottom:10px; }
.summary .btn{ margin-top:18px; }
.summary .fine{ margin-top:14px; }
.mini-trust{ margin-top:18px; padding-top:16px; border-top:1px solid var(--line); display:grid; gap:10px; }
.mini-trust li{ display:flex; align-items:center; gap:10px; font-size:12.5px; color:var(--ink-2); }
.mini-trust svg{ flex:none; color:var(--ai); }
@media (min-width:1024px){
  .cartpage{ grid-template-columns:minmax(0,1fr) 400px; gap:64px; }
  .summary{ position:sticky; top:calc(var(--hdr) + 24px); padding:32px; }
  .cartpage .ci{ grid-template-columns:112px minmax(0,1fr) auto; gap:24px; padding:24px 0; }
}
.co__h{ font-size:15px; font-weight:500; padding-bottom:12px; margin-bottom:4px; border-bottom:1px solid var(--ink); }
.co__h ~ .co__h{ margin-top:48px; }
.co__items th,.co__items td{ padding:14px 0; border-bottom:1px solid var(--line); text-align:left; vertical-align:top; font-size:14px; }
.co__items thead th{ font-size:11.5px; font-weight:500; color:var(--muted); padding-block:12px; letter-spacing:.06em; }
.co__items .num{ text-align:right; white-space:nowrap; padding-left:14px; }
.co__items td:first-child{ display:flex; gap:14px; align-items:center; }
.co__items .ci__img{ width:52px; flex:none; }
.co__items small{ display:block; font-size:12px; color:var(--muted); }
.co__terms{ font-size:14px; }
.co__row{ display:grid; gap:4px; padding:16px 0; border-bottom:1px solid var(--line); }
.co__row dt{ font-size:12.5px; font-weight:500; color:var(--muted); }
.co__row dd{ color:var(--ink); line-height:1.8; }
html[lang="en"] .co__row dd{ line-height:1.55; font-size:15px; }
.co__eta{ display:inline-block; margin-top:6px; color:var(--ink-2); }
.co__eta b{ color:var(--ai); font-weight:500; }
@media (min-width:760px){ .co__row{ grid-template-columns:180px minmax(0,1fr); gap:24px; } }
.notice{ display:flex; gap:12px; margin-top:20px; padding:16px 18px; border-radius:12px; background:var(--ice); font-size:12.5px; line-height:1.75; color:var(--ink-2); }
html[lang="en"] .notice{ font-size:13.5px; line-height:1.5; }
.notice > svg{ flex:none; color:var(--ai); }
.notice__t{ font-weight:600; font-size:13.5px; color:var(--ink); margin-bottom:2px; }
.toast{ position:fixed; left:50%; bottom:24px; z-index:80; max-width:calc(100vw - 32px); transform:translate(-50%,16px); padding:12px 20px; border-radius:999px; background:var(--ink); color:#fff; font-size:13.5px; font-weight:500; text-align:center; opacity:0; pointer-events:none; transition:opacity .25s,transform .3s var(--ease); }
.toast.on{ opacity:1; transform:translate(-50%,0); }
.toast.is-quiet{ width:1px; height:1px; padding:0; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }

/* ---------- 404 */
.nf{ padding-block:96px; text-align:center; }
.nf__in{ display:flex; flex-direction:column; align-items:center; }
.nf .lede{ margin:18px auto 32px; }
.nf__cta{ display:flex; flex-wrap:wrap; justify-content:center; gap:10px; }
.nf__other{ margin-top:32px; }

/* ---------- legal pages (markup from tools/policies/<lang>/*.html) */
.legalwrap{ display:grid; grid-template-columns:minmax(0,1fr); gap:28px; padding-block:28px var(--sec); }
.legalnav ul{ display:flex; gap:8px; overflow-x:auto; margin-inline:calc(var(--gut)*-1); padding:2px var(--gut) 6px; scrollbar-width:none; }
.legalnav ul::-webkit-scrollbar{ display:none; }
.legalnav .label{ display:none; }
.legalnav a{ display:inline-flex; align-items:center; height:38px; padding:0 14px; border:1px solid var(--line-2); border-radius:999px; font-size:12.5px; white-space:nowrap; color:var(--ink-2); transition:border-color .2s,color .2s; }
.legalnav a:hover{ border-color:var(--ink-2); color:var(--ink); }
.legalnav a[aria-current]{ background:var(--ink); color:#fff; border-color:var(--ink); }
@media (min-width:1024px){
  .legalwrap{ grid-template-columns:240px minmax(0,1fr); gap:80px; padding-top:72px; align-items:start; }
  .legalnav{ position:sticky; top:calc(var(--hdr) + 32px); }
  .legalnav .label{ display:block; margin-bottom:12px; }
  .legalnav ul{ display:block; overflow:visible; margin:0; padding:0; border-top:1px solid var(--line); }
  .legalnav li{ border-bottom:1px solid var(--line); }
  .legalnav a{ display:flex; height:auto; min-height:46px; padding:8px 0; border:0; border-radius:0; white-space:normal; font-size:13px; line-height:1.5; }
  .legalnav a[aria-current]{ background:none; color:var(--ai); border:0; }
}
.prose{ min-width:0; max-width:760px; }
.legal h1{ font-weight:500; color:var(--ink); text-wrap:balance; }
html[lang="ja"] .legal h1{ font-size:clamp(24px,3vw,34px); line-height:1.5; letter-spacing:.06em; font-feature-settings:"palt"; }
html[lang="en"] .legal h1{ font-size:clamp(32px,4vw,52px); line-height:1.05; letter-spacing:-.03em; }
.legal__upd{ margin-top:12px; font-size:12px; color:var(--muted); }
.legal h1 + p,.legal__upd + p{ margin-top:28px; }
.legal h2{ margin:56px 0 16px; font-size:18px; font-weight:500; line-height:1.55; }
html[lang="en"] .legal h2{ font-size:22px; line-height:1.25; letter-spacing:-.015em; }
.legal h3{ margin:28px 0 8px; font-size:15.5px; font-weight:500; }
.legal p,.legal ul,.legal ol{ margin:0 0 16px; color:var(--ink-2); font-size:14.5px; line-height:1.95; }
html[lang="en"] .legal p,html[lang="en"] .legal ul,html[lang="en"] .legal ol{ font-size:16px; line-height:1.65; }
.legal ul{ list-style:disc; padding-left:1.4em; }
.legal ol{ list-style:decimal; padding-left:1.6em; }
.legal li{ margin-bottom:6px; }
.legal li::marker{ color:var(--muted); }
.legal strong,.legal b{ font-weight:600; color:var(--ink); }
.tblwrap{ overflow-x:auto; margin:20px 0 24px; -webkit-overflow-scrolling:touch; }
.legal table{ border-top:1px solid var(--ink); font-size:14px; }
.legal th,.legal td{ padding:14px 16px 14px 0; border-bottom:1px solid var(--line); text-align:left; vertical-align:top; line-height:1.8; color:var(--ink-2); }
html[lang="en"] .legal th,html[lang="en"] .legal td{ font-size:15px; line-height:1.55; }
.legal th{ width:32%; min-width:120px; font-weight:500; color:var(--ink); }
.legal td{ min-width:180px; }

/* ---------- scroll reveal (only with JS), subtle */
.js .reveal{ opacity:0; transform:translateY(14px); transition:opacity .9s var(--ease),transform .9s var(--ease); }
.js .reveal.in{ opacity:1; transform:none; }
.grid > .reveal:nth-child(5n+2),.moments > .reveal:nth-child(2),.tiers > .reveal:nth-child(2),.values > .reveal:nth-child(2),.layers > .reveal:nth-child(2),.care__steps > .reveal:nth-child(2){ transition-delay:.06s; }
.grid > .reveal:nth-child(5n+3),.moments > .reveal:nth-child(3),.tiers > .reveal:nth-child(3),.values > .reveal:nth-child(3),.layers > .reveal:nth-child(3),.care__steps > .reveal:nth-child(3){ transition-delay:.12s; }
.grid > .reveal:nth-child(5n+4),.layers > .reveal:nth-child(4),.care__steps > .reveal:nth-child(4){ transition-delay:.18s; }
.grid > .reveal:nth-child(5n){ transition-delay:.24s; }
@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  .js .reveal{ opacity:1; transform:none; transition:none; }
  *,*::before,*::after{ transition-duration:.01ms !important; animation-duration:.01ms !important; }
}
@media print{ .hdr,.announce,.hint,.drawer,.stickybar,.toast{ display:none !important; } .js .reveal{ opacity:1; transform:none; } }