:root{
  --void:#05070b;
  --deep:#080c13;
  --navy:#0b111b;
  --navy-2:#0e1622;
  --line:rgba(190,212,240,.16);
  --line-s:rgba(190,212,240,.09);
  --text:#e6ecf6;
  --text-2:#aebbcd;
  --text-3:#7b8798;
  --ice:#9fc4e8;
  --ice-d:#5f86b4;
  --gold:#c9a86a;
  --mincho:"Shippori Mincho B1",'Hiragino Mincho ProN','Yu Mincho',serif;
  --gothic:'Hiragino Sans','Hiragino Kaku Gothic ProN','Yu Gothic Medium','Yu Gothic',
    -apple-system,BlinkMacSystemFont,'Segoe UI',Meiryo,sans-serif;
  --latin:"EB Garamond",'Hiragino Mincho ProN',Georgia,serif;
  --paper:#e9e6de;
  --paper-2:#f2efe8;
  --paper-ink:#1b2029;
  --paper-ink-2:#4a5260;
  --paper-ink-3:#77808e;
  --paper-line:rgba(27,32,41,.16);
  --paper-line-s:rgba(27,32,41,.09);
  --hd:64px;
  --ease:cubic-bezier(.22,.61,.36,1);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--void);color:var(--text);font-family:var(--gothic);font-size:16px;line-height:2;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-feature-settings:'palt' 1;overflow-x:hidden;padding-top:var(--hd);
  word-break:auto-phrase;line-break:strict;overflow-wrap:break-word}
img{display:block;max-width:100%}
h1,h2,h3,h4{font-family:var(--mincho);font-weight:500;margin:0;text-wrap:balance;letter-spacing:.04em}
p{margin:0 0 1.5em}
p:last-child{margin-bottom:0}
a{color:inherit;text-decoration:none}
::selection{background:rgba(159,196,232,.28)}
.skip{position:absolute;left:-9999px;top:0;background:var(--navy);color:#fff;padding:12px 18px;z-index:200}
.skip:focus{left:8px;top:8px}
:focus-visible{outline:2px solid var(--ice);outline-offset:3px}

/* grain */
.grain{position:fixed;inset:0;z-index:80;pointer-events:none;opacity:.035;mix-blend-mode:screen;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E")}

.wrap{max-width:1240px;margin:0 auto;padding-inline:clamp(20px,5vw,48px)}
.narrow{max-width:760px;margin:0 auto;padding-inline:clamp(20px,5vw,48px)}
section{position:relative}
.pad{padding-block:clamp(84px,13vw,168px)}
.pad-s{padding-block:clamp(56px,8vw,96px)}

/* ---------- light section ---------- */
.light{background:var(--paper);color:var(--paper-ink)}
.light h1,.light h2,.light h3,.light h4{color:var(--paper-ink)}
.light .lbl{color:#4d6c94}
.light .lbl-jp{color:var(--paper-ink-3)}
.light .body{color:var(--paper-ink-2)}
.light .cap{color:var(--paper-ink-3)}
.light .btn{--gl:60,100,150;--liq:120,158,200;color:var(--paper-ink);
  background:
    linear-gradient(180deg,rgba(255,255,255,.8) 0,rgba(255,255,255,.3) 14%,rgba(255,255,255,.04) 40%),
    radial-gradient(125% 74% at 50% -42%,rgba(255,255,255,.85),transparent 60%),
    linear-gradient(181deg,rgba(255,255,255,.2) 0,rgba(60,100,150,.05) 52%,rgba(60,100,150,.1) 100%);
  box-shadow:
    0 0 0 1px rgba(27,32,41,.2),
    inset 0 0 0 1px rgba(255,255,255,.6),
    inset 0 2px 1px -1px rgba(255,255,255,1),
    inset 0 -2px 1px -1px rgba(255,255,255,.7),
    inset 1.6px 0 0 -.6px rgba(120,170,220,.4),
    inset -1.6px 0 0 -.6px rgba(255,220,190,.35),
    inset 0 -22px 28px -30px rgba(60,100,150,.55),
    0 14px 28px -20px rgba(27,32,41,.35)}
.light .btn span{color:var(--paper-ink)}
@media(hover:hover) and (pointer:fine){
  .light .btn:hover{color:var(--paper-ink);
    box-shadow:
      0 0 0 1px rgba(27,32,41,.24),
      inset 0 0 0 1px rgba(255,255,255,.75),
      inset 0 2.4px 1px -1px #fff,
      inset 0 -2.4px 1px -1px rgba(255,255,255,.85),
      inset 2px 0 0 -.7px rgba(120,170,220,.5),
      inset -2px 0 0 -.7px rgba(255,220,190,.45),
      inset 0 -24px 30px -30px rgba(60,100,150,.7),
      0 18px 34px -18px rgba(27,32,41,.4)}
  .light .btn:hover span{text-shadow:none}
}
}
.light .tlink{color:var(--paper-ink-2)}
.light .tlink i{background:#4d6c94}
.light .tlink:hover{color:var(--paper-ink)}
.light .rule{background:var(--paper-line-s)}
.deep-warm{background:linear-gradient(180deg,#0b0907 0%,#12100c 100%)}
.raise{background:radial-gradient(120% 80% at 50% 0%,#101a28 0%,#0c1420 52%,#0a111b 100%)}

/* ---------- type ---------- */
.lbl{font-family:var(--latin);font-size:11px;font-weight:500;letter-spacing:.14em;color:var(--text-3);text-transform:uppercase}
.lbl-jp{display:none}
.dsp{font-family:var(--mincho);font-size:clamp(30px,4.7vw,60px);line-height:1.33;font-weight:500;letter-spacing:.004em}
.dsp-s{font-family:var(--mincho);font-size:clamp(23px,3.1vw,36px);line-height:1.46;font-weight:500;letter-spacing:.008em;
  word-break:auto-phrase;line-break:strict}
.body{color:var(--text-2);font-size:15.5px;line-height:1.95;max-width:27em;letter-spacing:.005em;
  word-break:auto-phrase;line-break:strict;overflow-wrap:anywhere}
.body p+p{margin-top:1.7em}
.body.sm{max-width:24em}
.body.sm{font-size:15px;line-height:2.05}
.cap{font-family:var(--latin);font-size:10.5px;letter-spacing:.2em;color:var(--text-3);margin-top:14px}
.rule{height:1px;background:var(--line-s);border:0;margin:0}

/* ---------- Liquid Glass ---------- */
/* つやのある透明ガラス : 中はほぼ素通し、縁で光が曲がる */
.lg{--gl:255,255,255;--mx:50%;--my:50%;
  position:relative;isolation:isolate;border:0;
  -webkit-backdrop-filter:blur(.5px) saturate(152%) brightness(1.06) contrast(1.02);
  backdrop-filter:blur(.5px) saturate(152%) brightness(1.06) contrast(1.02);
  background:
    radial-gradient(130% 86% at 50% -52%,rgba(255,255,255,.4),rgba(255,255,255,.1) 34%,rgba(255,255,255,0) 58%),
    linear-gradient(183deg,rgba(255,255,255,.05) 0,rgba(255,255,255,0) 46%,rgba(var(--gl),.05) 100%);
  box-shadow:
    0 0 0 1px rgba(4,7,12,.5),
    inset 0 0 0 1px rgba(255,255,255,.14),
    inset 0 1.6px 0 rgba(255,255,255,.62),
    inset 0 -1.4px 0 rgba(255,255,255,.26),
    inset 1.2px 0 0 rgba(255,255,255,.18),
    inset -1.2px 0 0 rgba(255,255,255,.12),
    inset 0 -18px 26px -24px rgba(var(--gl),.6),
    0 10px 30px -22px rgba(0,0,0,.7)}
/* 表面の映り込み（カーソル追従） */
.lg::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;opacity:0;
  transition:opacity .7s var(--ease);
  background:
    radial-gradient(52px 34px at var(--mx) var(--my),rgba(255,255,255,.5),rgba(255,255,255,.08) 52%,transparent 74%),
    radial-gradient(240px 200px at var(--mx) var(--my),rgba(var(--gl),.16),transparent 76%)}
.lg>*{position:relative;z-index:1}
/* 縁だけ厚くなるガラス（背後がわずかに拡大・明滅して見える） */
.lg::after,.btn .rim{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  -webkit-backdrop-filter:blur(2.6px) brightness(1.1) saturate(140%);
  backdrop-filter:blur(2.6px) brightness(1.1) saturate(140%);
  -webkit-mask:linear-gradient(#000,#000) content-box,linear-gradient(#000,#000);
  mask:linear-gradient(#000,#000) content-box,linear-gradient(#000,#000);
  -webkit-mask-composite:xor;mask-composite:exclude;
  padding:7px}
@media(prefers-reduced-motion:reduce){.lg,.lg::before{transition:none}}

/* ---------- header ---------- */
.hd{position:fixed;top:0;left:0;right:0;height:var(--hd);z-index:90;display:flex;align-items:center;
  background:linear-gradient(180deg,rgba(5,7,11,.6) 0,rgba(5,7,11,.28) 58%,rgba(5,7,11,0) 100%);
  transition:background .55s var(--ease),-webkit-backdrop-filter .55s var(--ease),backdrop-filter .55s var(--ease)}
.hd::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;pointer-events:none;
  background:linear-gradient(90deg,transparent,rgba(212,236,255,.22) 10%,rgba(212,236,255,.22) 90%,transparent);
  opacity:0;transition:opacity .55s var(--ease)}
.hd.stuck{background:linear-gradient(180deg,rgba(255,255,255,.04) 0,rgba(255,255,255,0) 44%),linear-gradient(180deg,rgba(5,7,11,.56),rgba(5,7,11,.48));
  -webkit-backdrop-filter:blur(1.5px) saturate(152%) brightness(1.04);
  backdrop-filter:blur(1.5px) saturate(152%) brightness(1.04)}
.hd.stuck::after{opacity:1}
.hd .wrap{display:flex;align-items:center;gap:22px;width:100%}
.brandmark{font-family:var(--mincho);font-size:19px;letter-spacing:.3em;color:#fff;line-height:1;text-indent:.3em}
.brandmark span{display:block;font-family:var(--latin);font-size:8.5px;letter-spacing:.3em;color:var(--text-3);margin-top:6px;text-indent:.3em}
.nav{display:none;margin-left:auto;gap:30px;align-items:center}
@media(min-width:1000px){.nav{display:flex}}
.nav a{font-size:13px;letter-spacing:.14em;color:var(--text-2);padding:6px 0;position:relative;transition:color .3s}
.nav a::after{content:"";position:absolute;left:0;right:100%;bottom:0;height:1px;background:var(--ice);transition:right .45s var(--ease);opacity:.8}
.nav a:hover{color:#fff}
.nav a:hover::after{right:0}
.hd .cta{margin-left:auto;display:flex;align-items:center;gap:14px}
@media(min-width:1000px){.hd .cta{margin-left:30px}}
.burger{display:grid;place-items:center;width:44px;height:44px;background:none;border:0;cursor:pointer;margin-right:-10px}
@media(min-width:1000px){.burger{display:none}}
.burger span{display:block;width:20px;height:1px;background:var(--text);transition:transform .35s var(--ease),opacity .2s}
.burger span+span{margin-top:6px}
.burger[aria-expanded="true"] span:first-child{transform:translateY(3.5px) rotate(45deg)}
.burger[aria-expanded="true"] span:last-child{transform:translateY(-3.5px) rotate(-45deg)}
.sheet{position:fixed;inset:0;z-index:85;background:linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,255,255,0) 34%),linear-gradient(180deg,rgba(5,7,11,.8),rgba(5,7,11,.88));box-shadow:none;display:flex;flex-direction:column;justify-content:center;padding:var(--hd) clamp(24px,7vw,56px) 48px;opacity:0;visibility:hidden;transition:opacity .45s var(--ease),visibility .45s}
.sheet[data-open="true"]{opacity:1;visibility:visible}
.sheet a{font-family:var(--mincho);font-size:clamp(22px,6vw,30px);letter-spacing:.14em;padding:16px 0;border-bottom:1px solid var(--line-s);display:flex;align-items:baseline;gap:14px;min-height:56px}
.sheet a em{font-style:normal;font-family:var(--latin);font-size:10px;letter-spacing:.24em;color:var(--text-3)}

/* ---------- buttons : thick optical glass with liquid inside ---------- */
.btn{--r:14px;--gl:186,216,246;--liq:214,234,255;
  --mx:50%;--my:50%;--lx:0;--ly:0;--tilt:0deg;--lift:0px;
  display:inline-flex;align-items:center;justify-content:center;gap:12px;min-height:54px;padding:15px 34px;
  font-family:var(--gothic);font-size:14.5px;letter-spacing:.14em;color:#eef4fd;border:0;
  border-radius:var(--r);
  background:
    linear-gradient(180deg,rgba(255,255,255,.14) 0,rgba(255,255,255,.035) 12%,rgba(255,255,255,0) 34%),
    radial-gradient(125% 74% at 50% -42%,rgba(255,255,255,.17),transparent 62%),
    linear-gradient(181deg,rgba(var(--gl),.05) 0,rgba(5,9,15,.14) 52%,rgba(var(--gl),.1) 100%);
  -webkit-backdrop-filter:blur(1px) saturate(152%) brightness(1.06);
  backdrop-filter:blur(1px) saturate(152%) brightness(1.06);
  box-shadow:
    0 0 0 1px rgba(5,9,15,.55),
    inset 0 0 0 1px rgba(255,255,255,.15),
    inset 0 2px 1px -1px rgba(255,255,255,.72),
    inset 0 -2px 1px -1px rgba(255,255,255,.3),
    inset 1.6px 0 0 -.6px rgba(148,204,255,.3),
    inset -1.6px 0 0 -.6px rgba(255,214,178,.2),
    inset 0 -22px 28px -30px rgba(var(--gl),.7),
    0 18px 34px -24px rgba(0,0,0,.85);
  position:relative;overflow:hidden;isolation:isolate;-webkit-tap-highlight-color:transparent;
  transform-origin:center center;will-change:transform;
  transition:background .6s var(--ease),color .4s var(--ease),
             box-shadow .6s var(--ease),transform .5s var(--ease)}
.btn span{position:relative;z-index:3;transition:text-shadow .6s var(--ease)}
.btn.sm{--r:10px;min-height:44px;padding:11px 20px;font-size:13px;letter-spacing:.1em}
.btn.gold{--gl:226,196,140;--liq:244,228,196;color:#f8efdd}
/* WebGLが使えない／失われた場合でも、購入ボタンは金の色味を保つ */
.btn.gold:not(.gl){box-shadow:
  0 0 0 1px rgba(12,9,5,.55),
  inset 0 0 0 1px rgba(236,208,150,.24),
  inset 0 2px 1px -1px rgba(255,238,206,.6),
  inset 0 -2px 1px -1px rgba(226,196,140,.26),
  inset 0 -22px 28px -30px rgba(226,196,140,.6),
  0 18px 34px -24px rgba(0,0,0,.85)}


/* --- WebGL 版（水で満たされた密閉ガラス） --- */
.btn .g-gl{position:absolute;inset:0;width:100%;height:100%;display:block;z-index:1;
  border-radius:inherit;pointer-events:none;opacity:0;transition:opacity .45s var(--ease)}
.btn.gl .g-gl{opacity:1}
.btn.gl{background:none;
  -webkit-backdrop-filter:blur(7px) saturate(128%) brightness(.97);
  backdrop-filter:blur(7px) saturate(128%) brightness(.97);
  box-shadow:0 14px 30px -26px rgba(0,0,0,.8)}
.light .btn.gl{-webkit-backdrop-filter:blur(7px) saturate(116%) brightness(1.05);
  backdrop-filter:blur(7px) saturate(116%) brightness(1.05)}
.btn.gl span{opacity:0}
.btn.gl .g-liq,.btn.gl .g-lens,.btn.gl::after{display:none}
@media(hover:hover) and (pointer:fine){
  .btn.gl{transition:transform .5s var(--ease),box-shadow .5s var(--ease)}
  .btn.gl:hover{transform:scale(1.038);
    box-shadow:0 26px 48px -22px rgba(0,0,0,.92),
               0 0 46px -12px rgba(168,206,252,.4),
               0 0 120px -30px rgba(168,206,252,.5)}
  .btn.gl.gold:hover{box-shadow:0 26px 48px -22px rgba(0,0,0,.92),
               0 0 46px -12px rgba(232,200,142,.45),
               0 0 120px -30px rgba(232,200,142,.55)}
  .light .btn.gl:hover{box-shadow:0 20px 40px -20px rgba(27,32,41,.45),
               0 0 40px -14px rgba(120,160,210,.5)}
  .btn.gl:active{transform:scale(1.012)}
}

/* --- 中の液体 : ガラスの内側を満たす、ゆらぐ薄い水の層 --- */
.lgdefs{position:absolute;width:0;height:0;overflow:hidden}
.btn .g-liq{position:absolute;inset:4px;z-index:0;border-radius:calc(var(--r) - 4px);overflow:hidden;
  pointer-events:none;opacity:0;visibility:hidden;
  filter:url(#liqWobble);
  transition:opacity .55s var(--ease),visibility 0s .55s}
.btn .g-sheen{position:absolute;inset:-34%;will-change:transform;
  background:
    radial-gradient(44% 62% at calc(50% + var(--lx) * 24%) calc(44% + var(--ly) * 28%),rgba(238,248,255,.19),transparent 66%),
    radial-gradient(32% 44% at calc(44% - var(--lx) * 28%) calc(66% - var(--ly) * 22%),rgba(206,231,255,.15),transparent 68%),
    radial-gradient(70% 90% at 50% 120%,rgba(var(--liq),.16),transparent 70%),
    linear-gradient(180deg,rgba(255,255,255,.07),rgba(255,255,255,0) 44%,rgba(var(--liq),.12));
  filter:blur(3px);
  transform:translate3d(calc(var(--lx) * 7px),calc(var(--ly) * 5px + var(--lift)),0)}
/* 水中を漂う光（液体よりさらに遅れる） */
.btn .g-caus{position:absolute;inset:-30%;mix-blend-mode:screen;filter:blur(9px);
  background:
    radial-gradient(26% 34% at calc(50% + var(--lx) * 34%) calc(52% + var(--ly) * 26%),rgba(240,250,255,.3),transparent 62%),
    radial-gradient(16% 22% at calc(48% - var(--lx) * 40%) calc(70% - var(--ly) * 20%),rgba(255,255,255,.22),transparent 66%),
    radial-gradient(12% 16% at calc(62% + var(--lx) * 22%) calc(34% + var(--ly) * 34%),rgba(214,240,255,.18),transparent 70%)}
/* カーソルから生まれる波紋 */
.btn .rp{position:absolute;width:12px;height:12px;margin:-6px 0 0 -6px;border-radius:50%;
  border:1px solid rgba(255,255,255,.3);
  box-shadow:0 0 0 3px rgba(255,255,255,.055),inset 0 0 8px rgba(255,255,255,.12);
  animation:g-rp 1.55s cubic-bezier(.18,.72,.3,1) forwards}
@keyframes g-rp{
  0%{transform:scale(.35);opacity:.5}
  60%{opacity:.2}
  100%{transform:scale(9);opacity:0}}

/* --- カーソル直下のレンズ（ガラス自体はすぐ反応する） --- */
.btn .g-lens{position:absolute;inset:0;z-index:1;pointer-events:none;border-radius:inherit;
  opacity:0;transition:opacity .4s var(--ease);
  background:
    radial-gradient(24px 24px at var(--mx) var(--my),rgba(255,255,255,.3),rgba(255,255,255,.05) 54%,transparent 74%),
    radial-gradient(74px 74px at var(--mx) var(--my),rgba(var(--gl),.12),transparent 72%);
  -webkit-backdrop-filter:blur(1.8px) brightness(1.07) saturate(128%);
  backdrop-filter:blur(1.8px) brightness(1.07) saturate(128%);
  -webkit-mask:radial-gradient(58px 58px at var(--mx) var(--my),#000 0 38%,transparent 78%);
  mask:radial-gradient(58px 58px at var(--mx) var(--my),#000 0 38%,transparent 78%)}

/* 押した瞬間に走る光 */
.btn::after{content:"";position:absolute;left:var(--mx);top:var(--my);z-index:2;pointer-events:none;
  width:18px;height:18px;margin:-9px 0 0 -9px;border-radius:50%;opacity:0;
  background:radial-gradient(circle,rgba(255,255,255,.45),rgba(var(--gl),.18) 44%,rgba(var(--gl),0) 72%)}
.btn.rip::after{animation:btnrip .8s var(--ease) forwards}
@keyframes btnrip{0%{opacity:.9;transform:scale(1)}100%{opacity:0;transform:scale(15)}}

/* --- PC（マウス） --- */
@media(hover:hover) and (pointer:fine){
  .btn:hover{color:#fff;transform:scale(1.022);
    box-shadow:
      0 0 0 1px rgba(5,9,15,.5),
      inset 0 0 0 1px rgba(255,255,255,.22),
      inset 0 2.4px 1px -1px rgba(255,255,255,.95),
      inset 0 -2.4px 1px -1px rgba(255,255,255,.42),
      inset 2px 0 0 -.7px rgba(148,204,255,.42),
      inset -2px 0 0 -.7px rgba(255,214,178,.28),
      inset 0 -24px 30px -30px rgba(var(--gl),.9),
      0 22px 42px -22px rgba(0,0,0,.9)}
  .btn:hover .g-liq{opacity:1;visibility:visible;transition:opacity .55s var(--ease),visibility 0s 0s}
  .btn:hover .g-lens{opacity:1}
  .btn:hover span{text-shadow:0 0 14px rgba(var(--gl),.4)}
  .btn:active{transform:scale(1.004) scaleY(.988);
    box-shadow:
      0 0 0 1px rgba(5,9,15,.6),
      inset 0 0 0 1px rgba(255,255,255,.18),
      inset 0 1px 0 rgba(255,255,255,.34),
      inset 0 10px 20px -10px rgba(0,0,0,.5),
      inset 0 -2px 1px -1px rgba(255,255,255,.5),
      0 8px 20px -16px rgba(0,0,0,.85);
    transition-duration:.14s}
}
/* --- SP（タッチ） --- */
@media(hover:none),(pointer:coarse){
  .btn{min-height:56px}
  .btn:active .g-liq{opacity:1;visibility:visible;transition:opacity .3s var(--ease),visibility 0s 0s}
  .btn:active .g-lens{opacity:1;transition-duration:.25s}
  .btn:active{transform:scale(.996) scaleY(.986);transition-duration:.12s}
  .btn:active span{text-shadow:0 0 14px rgba(var(--gl),.5)}
}
@media(prefers-reduced-motion:reduce){
  .btn .g-liq{filter:none}
  .btn .rp{display:none}
  .btn.rip::after{animation:none}
  .btn{transition-duration:.14s}
}
.tlink{display:inline-flex;align-items:center;gap:10px;min-height:44px;font-size:14px;letter-spacing:.14em;color:var(--text-2);
  transition:color .45s var(--ease),text-shadow .55s var(--ease),letter-spacing .55s var(--ease)}
.tlink i{display:block;width:26px;height:1px;background:var(--ice-d);transition:width .6s var(--ease),background .4s,box-shadow .5s}
.tlink:hover,.tlink:active{color:#fff;letter-spacing:.165em;text-shadow:0 0 16px rgba(159,196,232,.5)}
.tlink:hover i,.tlink:active i{width:46px;background:var(--ice);box-shadow:0 0 12px rgba(159,196,232,.85)}

/* ---------- reveal ---------- */
.js .rv{opacity:0;transform:translateY(22px);transition:opacity 1.1s var(--ease),transform 1.1s var(--ease)}
.js .rv.on{opacity:1;transform:none}
.js .rv.d1{transition-delay:.12s}.js .rv.d2{transition-delay:.24s}.js .rv.d3{transition-delay:.36s}
.mask{display:block;overflow:hidden}
.js .mask>span{display:block;transform:translateY(105%);transition:transform 1.15s var(--ease)}
.js .on .mask>span,.js .mask.on>span{transform:none}

/* ---------- hero ---------- */
.hero{position:relative;min-height:calc(100svh - var(--hd));display:flex;align-items:center;overflow:hidden;background:var(--void)}
.hero-img{position:absolute;inset:0}
.hero-img img{width:100%;height:100%;object-fit:cover;object-position:62% 40%;opacity:0;transform:scale(1.06);transition:opacity 2.2s var(--ease),transform 2.6s var(--ease)}
.hero-img img.on{opacity:1;transform:none}
@media(max-width:860px){.hero-img img{object-position:center 24%}}
@media(min-width:900px){.hero-img img{object-position:center 38%}}
@media(min-width:1024px){.hero-img{transform:scale(1.12) translateX(2.5%);transform-origin:62% 50%}}
.caustic{position:absolute;inset:-12%;pointer-events:none;mix-blend-mode:screen;opacity:.55;
  background:
   radial-gradient(46% 30% at 30% 42%,rgba(140,190,240,.16),transparent 62%),
   radial-gradient(38% 26% at 70% 58%,rgba(120,170,230,.13),transparent 60%),
   radial-gradient(30% 20% at 52% 30%,rgba(190,220,255,.10),transparent 60%);
  animation:drift 26s ease-in-out infinite alternate}
@keyframes drift{
  0%{transform:translate3d(-2%,-1%,0) scale(1)}
  50%{transform:translate3d(2%,1.5%,0) scale(1.06)}
  100%{transform:translate3d(-1%,2%,0) scale(1.02)}
}
.hero-ripple{position:absolute;inset:0;z-index:1;pointer-events:none;
  opacity:0;transition:opacity 1.2s var(--ease)}
.hero-ripple.on{opacity:1}
.hero-veil{position:absolute;inset:0;background:
  linear-gradient(97deg,rgba(4,6,10,.94) 0%,rgba(4,6,10,.90) 12%,rgba(4,6,10,.82) 22%,rgba(4,6,10,.70) 31%,
    rgba(4,6,10,.56) 40%,rgba(4,6,10,.42) 48%,rgba(4,6,10,.29) 56%,rgba(4,6,10,.18) 64%,
    rgba(4,6,10,.10) 72%,rgba(4,6,10,.045) 80%,rgba(4,6,10,.01) 88%,rgba(4,6,10,0) 94%,rgba(4,6,10,.18) 100%),
  radial-gradient(140% 118% at 0% 62%,rgba(4,6,10,.74) 0%,rgba(4,6,10,.46) 26%,rgba(4,6,10,.22) 48%,rgba(4,6,10,.06) 66%,rgba(4,6,10,0) 80%),
  linear-gradient(0deg,rgba(4,6,10,.84) 0%,rgba(4,6,10,0) 54%)}
@media(max-width:860px){
  .hero-veil{background:
    linear-gradient(0deg,
      rgba(4,6,10,.99) 0%,   rgba(4,6,10,.98) 26%,  rgba(4,6,10,.955) 38%,
      rgba(4,6,10,.90) 48%,  rgba(4,6,10,.78) 56%,  rgba(4,6,10,.60) 64%,
      rgba(4,6,10,.40) 72%,  rgba(4,6,10,.22) 81%,  rgba(4,6,10,.10) 90%,
      rgba(4,6,10,.26) 100%)}
  /* コピーの真下だけ、さらにもう一枚沈める */
  .hero-copy{position:relative}
  .hero-copy::before{content:"";position:absolute;z-index:-1;
    left:-8vw;right:-8vw;top:-5vh;bottom:-10vh;pointer-events:none;
    background:radial-gradient(120% 78% at 34% 62%,
      rgba(4,6,10,.80) 0%, rgba(4,6,10,.62) 38%, rgba(4,6,10,.30) 64%, rgba(4,6,10,0) 88%)}
}
.hero .wrap{position:relative;z-index:2;width:100%}
.hero-copy{max-width:min(1000px,80vw)}
@media(max-width:860px){.hero-copy{max-width:none}.hero{align-items:flex-end;padding-bottom:clamp(36px,8vh,64px)}}
.hero h1{font-size:clamp(36px,6.6vw,96px);line-height:1.16;letter-spacing:-.008em;font-weight:500;margin-top:clamp(16px,2.2vw,28px);word-break:keep-all}
.hero h1 .mask+.mask{padding-left:0}
.hero h1{text-shadow:0 2px 26px rgba(2,5,10,.55),0 1px 3px rgba(2,5,10,.4)}
.hero h1 .mask>span{white-space:nowrap}
@media(max-width:620px){.hero h1{font-size:clamp(30px,8.6vw,42px);line-height:1.22;letter-spacing:-.005em}}
@media(max-width:860px){
  .hero h1{text-shadow:0 2px 30px rgba(2,5,10,.9),0 1px 4px rgba(2,5,10,.7)}
  .hero .lead,.hero .quote,.hero .quote span,.hero-meta,.hero .lbl{
    text-shadow:0 1px 16px rgba(2,5,10,.95),0 1px 3px rgba(2,5,10,.8)}
  .hero .lead{color:#dbe3ef}
  .hero .quote span{color:#b9c4d4}
  .hero-meta{color:#aab4c4}
  .hero .lbl{color:#9fadbf}
  .hero .tlink{text-shadow:0 1px 14px rgba(2,5,10,.9)}
}
.hero .lead{font-family:var(--gothic);color:var(--text-2);font-size:clamp(13.5px,1.3vw,16px);line-height:1.9;margin-top:clamp(28px,4.4vw,52px);letter-spacing:.005em;max-width:34em;
  word-break:auto-phrase;line-break:strict}
.hero .quote{font-family:var(--mincho);color:var(--text);font-size:clamp(16px,1.9vw,23px);line-height:1.7;margin-top:14px;letter-spacing:.01em;max-width:22em}
.hero .quote span{display:block;font-family:var(--gothic);font-size:13px;letter-spacing:.06em;color:var(--text-2);margin-top:12px}
.hero-actions{display:flex;flex-wrap:wrap;gap:14px 24px;align-items:center;margin-top:clamp(30px,5vh,46px)}
.hero-meta{display:flex;flex-wrap:wrap;gap:6px 26px;margin-top:26px;font-family:var(--gothic);font-size:12.5px;letter-spacing:.02em;color:var(--text-2)}
.hero-meta b{color:var(--gold);font-weight:400}
.scrollcue{position:absolute;left:clamp(20px,5vw,48px);bottom:26px;z-index:2;display:none;align-items:center;gap:10px;font-family:var(--latin);font-size:9.5px;letter-spacing:.3em;color:var(--text-3)}
@media(min-width:900px){.scrollcue{display:flex}}
.scrollcue i{display:block;width:1px;height:42px;background:linear-gradient(180deg,var(--ice-d),transparent);animation:cue 2.8s ease-in-out infinite}
@keyframes cue{0%,100%{opacity:.3;transform:scaleY(.6);transform-origin:top}50%{opacity:1;transform:scaleY(1);transform-origin:top}}

/* ---------- interlude ---------- */
.interlude{background:var(--void);padding-block:clamp(8px,1.6vw,18px)}
.interlude .dsp{max-width:22em}
@media(min-width:900px){.interlude .wrap{padding-inline:clamp(40px,7vw,110px)}}

/* ---------- bleed figure ---------- */
.bleed{position:relative;overflow:hidden}
.bleed>img{width:100%;height:clamp(300px,58vw,720px);object-fit:cover;will-change:transform}
.bleed .shade{position:absolute;inset:0;background:linear-gradient(0deg,rgba(5,7,11,.88) 0%,rgba(5,7,11,.1) 52%,rgba(5,7,11,.42) 100%)}
.bleed .cnt{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:flex-end}
.bleed .cnt.mid{justify-content:center;align-items:center;text-align:center}
.bleed .cnt .wrap{padding-bottom:clamp(30px,6vw,72px)}
.bleed .cnt.mid .wrap{padding-bottom:0}

/* ---------- editorial split ---------- */
.ed{display:grid;grid-template-columns:1fr;gap:0}
@media(min-width:980px){
  .ed{grid-template-columns:.86fr 1.14fr;align-items:center}
  .ed.rev{grid-template-columns:1.14fr .86fr}
  .ed.rev>.fig{order:2}
  .ed.w4{grid-template-columns:1.2fr .8fr}
  .ed.w4.rev{grid-template-columns:.8fr 1.2fr}
  .ed.hi{align-items:flex-start}
  .ed.hi>.txt{padding-top:clamp(96px,13vw,210px)}
  .ed.lo{align-items:flex-end}
  .ed.lo>.txt{padding-bottom:clamp(84px,11vw,180px)}
}
.ed>.fig{margin:0;overflow:hidden;position:relative}
@media(min-width:980px){
  /* 画像の内側の縁を背景へ溶かし、文字と写真の境界をぼかす */
  .ed>.fig::before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
    background:linear-gradient(270deg,
      rgba(4,6,10,1) 0%,rgba(4,6,10,.97) 4%,rgba(4,6,10,.88) 9%,rgba(4,6,10,.72) 15%,
      rgba(4,6,10,.52) 22%,rgba(4,6,10,.33) 30%,rgba(4,6,10,.18) 38%,rgba(4,6,10,.08) 46%,
      rgba(4,6,10,.02) 54%,rgba(4,6,10,0) 62%)}
  .ed.rev>.fig::before{background:linear-gradient(90deg,
      rgba(4,6,10,1) 0%,rgba(4,6,10,.97) 4%,rgba(4,6,10,.88) 9%,rgba(4,6,10,.72) 15%,
      rgba(4,6,10,.52) 22%,rgba(4,6,10,.33) 30%,rgba(4,6,10,.18) 38%,rgba(4,6,10,.08) 46%,
      rgba(4,6,10,.02) 54%,rgba(4,6,10,0) 62%)}
}
.ed>.fig img{width:100%;height:100%;object-fit:cover;aspect-ratio:4/3.4;transition:transform 1.6s var(--ease),filter 1.6s var(--ease)}
@media(min-width:980px){.ed>.fig img{aspect-ratio:auto;min-height:clamp(420px,46vw,660px)}}
.ed:hover>.fig img{transform:scale(1.035)}
.ed>.txt{padding:clamp(44px,7vw,92px) clamp(20px,5vw,48px)}
.scene{background:var(--void)}
.scene>.fig img{aspect-ratio:4/4.8}
@media(min-width:980px){.scene>.fig img{aspect-ratio:auto;min-height:clamp(560px,64vw,860px)}}
.scene>.txt{padding-block:clamp(40px,6vw,80px)}
@media(min-width:980px){
  .ed>.txt{max-width:600px}
  .ed:not(.rev)>.txt{margin-right:auto;padding-left:clamp(44px,6vw,110px)}
  .ed.rev>.txt{margin-left:auto;padding-right:clamp(44px,6vw,110px)}
  .ed.w4>.txt{max-width:660px}
}

/* ---------- story sticky ---------- */
.story{display:grid;grid-template-columns:1fr}
@media(min-width:980px){.story{grid-template-columns:52% 48%}}
.story-stage{position:relative;height:56vw;max-height:520px;overflow:hidden}
@media(min-width:980px){.story-stage{position:sticky;top:var(--hd);height:calc(100svh - var(--hd));max-height:none}}
.story-stage figure{position:absolute;inset:0;margin:0;opacity:0;transition:opacity 1.3s var(--ease),transform 2.4s var(--ease);transform:scale(1.05)}
.story-stage figure.on{opacity:1;transform:none}
.story-stage img{width:100%;height:100%;object-fit:cover}
.story-steps{display:flex;flex-direction:column}
.stepimg{display:none;margin:0}
.step{padding:clamp(56px,11vh,140px) clamp(20px,5vw,48px);border-bottom:1px solid var(--line-s)}
@media(min-width:980px){.step{min-height:70svh;display:flex;flex-direction:column;justify-content:center;padding-inline:clamp(40px,5vw,76px)}}
.step:last-child{border-bottom:0}
.step .no{font-family:var(--latin);font-size:10.5px;letter-spacing:.34em;color:var(--ice-d)}
.step .no span{color:var(--text-3)}
.step h3{font-size:clamp(20px,2.5vw,29px);line-height:1.8;margin-top:18px}
.step .body{margin-top:22px}
.q{--qy:46%;position:relative;font-family:var(--mincho);font-size:clamp(17px,1.9vw,22px);line-height:1.94;
  color:#eef3fa;padding-left:clamp(24px,2.6vw,38px);margin-top:26px;letter-spacing:.015em;
  word-break:auto-phrase;line-break:strict}
.q::before{content:"";position:absolute;left:0;top:.42em;bottom:.42em;width:1px;border-radius:1px;
  background:linear-gradient(180deg,
    rgba(150,190,228,0) 0%,rgba(150,190,228,.10) 6%,
    rgba(178,208,238,.42) 26%,rgba(190,216,244,.5) 52%,
    rgba(160,196,232,.34) 78%,rgba(150,190,228,0) 100%)}
.q::after{content:"";position:absolute;left:-2px;top:.42em;bottom:.42em;width:5px;pointer-events:none;
  background:radial-gradient(2.2px 54px at 2.5px var(--qy),
    rgba(238,247,255,.95) 0%,rgba(196,224,252,.45) 38%,rgba(150,190,228,0) 74%);
  opacity:.34;transition:opacity .8s var(--ease)}
.q:hover::after{opacity:1}
@media(prefers-reduced-motion:reduce){.q::after{transition:none}}
.q cite{display:block;font-family:var(--latin);font-style:normal;font-size:10.5px;letter-spacing:.22em;color:var(--text-3);margin-top:16px}

/* ---------- water focus ---------- */
.waterwrap{position:relative;overflow:hidden}
.waterwrap>img{width:100%;height:clamp(420px,76vw,860px);object-fit:cover}
.focuslight{position:absolute;inset:0;pointer-events:none;mix-blend-mode:screen;
  background:radial-gradient(34% 30% at var(--fx,50%) var(--fy,50%),rgba(175,210,245,.28),transparent 66%);
  transition:background .2s linear}
.waterwrap .shade{position:absolute;inset:0;background:
  linear-gradient(270deg,rgba(5,7,11,.9) 0%,rgba(5,7,11,.78) 26%,rgba(5,7,11,.3) 54%,rgba(5,7,11,.12) 74%,rgba(5,7,11,.55) 100%),
  linear-gradient(0deg,rgba(5,7,11,.72),rgba(5,7,11,0) 46%)}
@media(max-width:860px){.waterwrap>img{object-position:72% center}
  .waterwrap .shade{background:linear-gradient(0deg,rgba(5,7,11,.95) 6%,rgba(5,7,11,.66) 44%,rgba(5,7,11,.4) 100%)}}
.waterwrap .side{margin-left:auto;max-width:540px}
@media(max-width:860px){.waterwrap .side{margin-left:0;max-width:none}}

/* ---------- specs / hairline data ---------- */
.data{border-top:1px solid var(--line);margin-top:clamp(30px,4vw,44px)}
.data .r{display:grid;grid-template-columns:96px minmax(0,1fr);gap:10px 24px;padding:18px 0;border-bottom:1px solid var(--line-s);align-items:baseline}
@media(min-width:620px){.data .r{grid-template-columns:150px minmax(0,1fr)}}
.data dt{font-family:var(--latin);font-size:10.5px;letter-spacing:.22em;color:var(--text-3);margin:0}
.data dd{margin:0;font-size:15.5px;color:var(--text);line-height:1.95}
.data dd em{font-style:normal;color:var(--text-3);font-size:13px;display:block;margin-top:4px}
.dsp i{font-style:normal}
.stagger i{display:inline}
.credit{margin-top:clamp(48px,7vw,88px);display:grid;gap:clamp(30px,3.6vw,44px) clamp(26px,3vw,40px)}
@media(min-width:720px){.credit{grid-template-columns:auto auto;justify-content:start;column-gap:clamp(44px,6vw,90px)}
  .credit .off{padding-top:clamp(18px,2.6vw,34px)}
  .credit .wide{grid-column:1 / -1;margin-top:clamp(2px,1vw,10px)}}
.credit b{display:block;font-family:var(--latin);font-weight:400;font-size:clamp(40px,5.4vw,68px);line-height:.92;
  letter-spacing:-.015em;color:#fff;font-variant-numeric:lining-nums}
.credit .c:nth-child(3) b{font-family:var(--mincho);font-size:clamp(32px,4.2vw,52px);letter-spacing:.02em}
.credit span{display:block;font-family:var(--latin);font-size:10px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--gold);margin-top:11px}
.credit em{display:block;font-style:normal;font-size:12.5px;line-height:1.95;color:var(--text-3);margin-top:14px;max-width:22em}

.riceX{margin-top:clamp(28px,3.6vw,40px)}
.riceX .r{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:2px 16px;align-items:baseline;padding:17px 0 16px;border-top:1px solid var(--line-s)}
.riceX .r:last-of-type{border-bottom:1px solid var(--line-s)}
.riceX .lb{font-family:var(--gothic);font-size:11px;letter-spacing:.16em;color:var(--ice-d);white-space:nowrap;width:3.4em}
.riceX .nm{font-family:var(--mincho);font-size:clamp(18px,2.2vw,22px);line-height:1.4;color:#fff;letter-spacing:.04em}
.riceX .nm em{font-style:normal;display:block;font-family:var(--gothic);font-size:12.5px;color:var(--text-3);margin-top:7px;line-height:1.75;letter-spacing:.02em}
.riceX .pc{text-align:right;white-space:nowrap;font-family:var(--latin);color:var(--text-2)}
.riceX .pc s{text-decoration:none;font-size:10px;letter-spacing:.18em;color:var(--text-3);margin-right:7px}
.riceX .pc b{font-size:15.5px;font-weight:400;font-variant-numeric:tabular-nums;letter-spacing:.04em}
.riceX .pc i{font-style:normal;font-size:11px;color:var(--text-3);margin-left:1px}
.riceX .note{font-size:12.5px;color:var(--text-3);margin:16px 0 0;line-height:1.8}

/* ---------- full-bleed image strip ---------- */
.strip{display:grid;grid-template-columns:repeat(2,1fr);gap:2px;background:var(--void)}
@media(min-width:900px){.strip{grid-template-columns:repeat(4,1fr)}}
.strip figure{margin:0;overflow:hidden;position:relative}
.strip img{width:100%;aspect-ratio:3/4;object-fit:cover;filter:saturate(.92);transition:transform 1.5s var(--ease),filter 1.5s var(--ease)}
@media(min-width:900px){.strip img{aspect-ratio:3/4.1}}
.strip figure:hover img{transform:scale(1.05);filter:saturate(1.02)}

/* ---------- pairing ---------- */
.ptitle{position:relative;overflow:hidden;min-height:clamp(380px,62vw,660px);display:flex;align-items:center}
.ptitle>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 46%}
.ptitle .sc{position:absolute;inset:0;background:
  linear-gradient(92deg,rgba(5,7,11,.9) 0%,rgba(5,7,11,.7) 34%,rgba(5,7,11,.22) 64%,rgba(5,7,11,.4) 100%),
  linear-gradient(0deg,rgba(5,7,11,.72),rgba(5,7,11,0) 52%)}
@media(max-width:820px){.ptitle .sc{background:linear-gradient(0deg,rgba(5,7,11,.94) 4%,rgba(5,7,11,.6) 48%,rgba(5,7,11,.42) 100%)}
  .ptitle{align-items:flex-end;padding-bottom:clamp(30px,7vw,54px)}}
.ptitle .wrap{position:relative;z-index:2;width:100%}
.tilehd{display:flex;align-items:center;gap:16px;font-family:var(--mincho);font-size:clamp(13.5px,1.4vw,15.5px);
  letter-spacing:.14em;color:var(--paper-ink-3);margin:0 0 clamp(18px,2vw,26px);white-space:nowrap}
.tilehd::after{content:"";flex:1;height:1px;background:var(--paper-line-s)}
.tiles{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(10px,1.4vw,18px)}
@media(min-width:760px){.tiles{grid-template-columns:repeat(4,1fr)}}
.tile{margin:0;overflow:hidden}
.tile .ph{overflow:hidden;aspect-ratio:1/1}
.tile img{width:100%;height:100%;object-fit:cover;transform:scale(var(--z,1.3));transform-origin:var(--zo,center);filter:saturate(.9) brightness(.97);transition:transform 1.3s var(--ease),filter 1.3s var(--ease)}
.tile:hover img{transform:scale(calc(var(--z,1.3) * 1.07));filter:saturate(1.02) brightness(1)}
.tile figcaption{padding-top:13px;min-height:5.2em}
.tile .kind{font-family:var(--latin);font-size:9.5px;letter-spacing:.26em;color:#4d6c94}
.tile .kind,.tile .nm,.tile .ds{margin-bottom:0}
.tile .nm{font-family:var(--mincho);font-size:clamp(15px,1.5vw,17.5px);line-height:1.5;margin-top:7px;letter-spacing:.03em}
.tile .ds{font-size:12.5px;line-height:1.7;color:var(--paper-ink-3);margin-top:6px}
.pgrid{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(10px,1.6vw,18px);margin-top:clamp(26px,4vw,40px)}
@media(min-width:820px){.pgrid{grid-template-columns:repeat(4,1fr)}}
.pgrid figure{margin:0;overflow:hidden}
.pgrid img{width:100%;aspect-ratio:4/3.2;object-fit:cover;filter:saturate(.86) brightness(.9);transition:transform 1.2s var(--ease),filter 1.2s var(--ease)}
.pgrid figure:hover img{transform:scale(1.05);filter:saturate(1) brightness(1)}
.pgrid figcaption{font-size:14.5px;margin-top:12px;color:var(--text);letter-spacing:.04em}
.pgrid figcaption em{font-style:normal;display:block;font-size:12.5px;color:var(--text-3);margin-top:4px;line-height:1.7}
.circs{display:grid;grid-template-columns:1fr;gap:20px;margin-top:clamp(26px,4vw,38px)}
@media(min-width:680px){.circs{grid-template-columns:1fr 1fr;gap:26px 40px}}
.circ{display:grid;grid-template-columns:76px minmax(0,1fr);gap:18px;align-items:center}
@media(min-width:980px){.circ{grid-template-columns:92px minmax(0,1fr)}}
.circ img{width:100%;aspect-ratio:1/1;object-fit:cover;border-radius:50%;filter:saturate(.86) brightness(.92)}
.circ .nm{font-family:var(--mincho);font-size:clamp(16px,1.8vw,18px);line-height:1.6;color:#fff}
.circ .ds{font-size:13px;color:var(--text-3);line-height:1.8;margin-top:5px}
.note-line{margin-top:clamp(28px,4vw,40px);border-left:1px solid var(--gold);padding-left:22px;color:var(--text-2);font-size:15px;line-height:2.05;max-width:52em}
.note-line b{color:#fff;font-weight:500}

/* ---------- award ---------- */
.medal{width:clamp(120px,15vw,168px);margin:0 auto;border-radius:50%;filter:drop-shadow(0 0 34px rgba(201,168,106,.28))}
.creds{margin-top:clamp(34px,5vw,54px);display:flex;flex-direction:column;align-items:center;gap:0}
.creds p{margin:0;font-family:var(--mincho);font-size:clamp(15px,1.7vw,18px);line-height:1.9;letter-spacing:.1em;color:var(--gold);text-align:center;padding:15px 0;position:relative;width:100%}
.creds p+p::before{content:"";position:absolute;top:0;left:50%;transform:translateX(-50%);width:34px;height:1px;background:rgba(201,168,106,.34)}
@media(min-width:800px){
  .creds{flex-direction:row;justify-content:center;align-items:center;gap:0}
  .creds p{width:auto;padding:0 clamp(22px,3vw,40px)}
  .creds p+p::before{top:50%;left:0;transform:translateY(-50%);width:1px;height:1.4em}
}
br.sp{display:none}
@media(min-width:800px){br.sp{display:inline}}
.creds i{font-style:normal;display:block;font-family:var(--gothic);font-size:10.5px;letter-spacing:.24em;color:rgba(201,168,106,.55);margin-bottom:9px}

/* ---------- lineup ---------- */
.lineup{display:grid;grid-template-columns:1fr;gap:clamp(48px,6vw,64px);margin-top:clamp(36px,5vw,56px)}
@media(min-width:880px){.lineup{grid-template-columns:repeat(3,1fr);gap:clamp(22px,2.8vw,48px)}}
.plan{display:flex;flex-direction:column;position:relative}
.plan .card{flex:1;display:flex;flex-direction:column;overflow:hidden;padding:clamp(10px,1vw,14px);
  background:linear-gradient(180deg,rgba(8,12,19,.62) 0%,rgba(4,7,12,.86) 100%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.07),
    inset 0 0 0 1px rgba(190,212,240,.07),
    0 34px 64px -44px rgba(0,0,0,.95);
  transition:box-shadow .6s var(--ease),transform .6s var(--ease)}
@media(hover:hover) and (pointer:fine){
  .plan:hover .card{transform:translateY(-3px);
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.12),
      inset 0 0 0 1px rgba(190,212,240,.13),
      0 40px 70px -40px rgba(0,0,0,1)}
}
.plan.best .card{background:linear-gradient(180deg,rgba(18,15,10,.6) 0%,rgba(6,7,10,.88) 100%);
  box-shadow:
    inset 0 1px 0 rgba(236,207,150,.3),
    inset 0 0 0 1px rgba(201,168,106,.24),
    0 34px 64px -42px rgba(0,0,0,.95)}
@media(hover:hover) and (pointer:fine){
  .plan.best:hover .card{box-shadow:
    inset 0 1px 0 rgba(236,207,150,.46),
    inset 0 0 0 1px rgba(201,168,106,.36),
    0 40px 70px -38px rgba(0,0,0,1)}
}
.plan .tagbest{display:flex;align-items:center;gap:11px;font-family:var(--mincho);font-size:16px;font-weight:600;
  letter-spacing:.26em;color:#f3ddb0;text-shadow:0 0 22px rgba(201,168,106,.75);margin:0 0 15px;min-height:1.6em}
.plan .tagbest i{flex:0 0 auto;width:7px;height:7px;background:#e6c98f;transform:rotate(45deg);
  box-shadow:0 0 12px rgba(230,201,143,.9)}
.plan .tagbest::after{content:"";flex:1;height:1px;background:linear-gradient(90deg,rgba(236,207,150,.85),rgba(236,207,150,0))}
.plan .tagbest[data-empty]{visibility:hidden}
.plan .ph{margin:0;overflow:hidden;position:relative;z-index:1;
  box-shadow:0 0 0 1px rgba(255,255,255,.1),0 14px 28px -20px rgba(0,0,0,.9),inset 0 1px 0 rgba(255,255,255,.22)}
.plan .ph::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(255,255,255,.07) 0,rgba(255,255,255,0) 26%,rgba(5,7,11,.3) 100%)}
.plan .ph img{width:100%;aspect-ratio:4/3;object-fit:cover;transition:transform 1.3s var(--ease),filter 1.3s var(--ease);filter:brightness(.97)}
@media(min-width:880px){.plan .ph img{aspect-ratio:4/3}}
.plan:hover .ph img{transform:scale(1.045);filter:brightness(1)}
.plan .pinfo{padding:clamp(20px,2.2vw,26px) clamp(12px,1.2vw,16px) clamp(12px,1.2vw,16px);display:flex;flex-direction:column;flex:1;position:relative;z-index:1}

.plan h3{font-size:clamp(20px,1.9vw,23px);line-height:1.55}
.plan h3 em{font-style:normal;display:block;font-family:var(--mincho);font-size:13.5px;letter-spacing:.1em;color:var(--text-3);margin-top:9px;line-height:1.7}
.plan .inclhd{font-family:var(--latin);font-size:10px;letter-spacing:.26em;color:var(--text-3);
  margin:clamp(18px,2vw,24px) 0 0}
.plan .items{list-style:none;margin:11px 0 0;padding:0;border-top:1px solid rgba(190,212,240,.16)}
.plan .items li{display:flex;align-items:flex-start;gap:14px;padding:15px 0 16px;border-bottom:1px solid var(--line-s)}
.plan .items figure{margin:0;overflow:hidden;flex:0 0 auto;background:rgba(255,255,255,.03);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.08)}
.plan .items img{width:62px;height:62px;object-fit:cover;display:block}
.plan .itxt{flex:1 1 auto;min-width:0}
.plan .items .nm{font-size:12.5px;line-height:1.7;color:var(--text);margin:0;letter-spacing:.02em}
.plan .items .nm em{font-style:normal;color:var(--text-3);font-size:11.5px}
.plan .items .qty{display:flex;align-items:baseline;justify-content:flex-end;gap:2px;margin:8px 0 0;line-height:1;
  font-family:var(--mincho);font-weight:500;font-size:20px;color:#fff;
  font-variant-numeric:tabular-nums;letter-spacing:.03em}
.plan .items .qty span{font-family:var(--gothic);font-size:12px;color:var(--text-3);margin-right:2px}
.plan .items .qty i{font-style:normal;font-family:var(--gothic);font-size:12px;color:var(--text-2);
  margin-left:2px;letter-spacing:.06em}
.plan.best .items .qty{color:#fbf2e0}
.plan .note-ex{font-size:10.5px;line-height:1.8;color:var(--text-3);margin:12px 0 0;letter-spacing:.02em}
.plan .pr{margin-top:auto;padding-top:clamp(20px,2.4vw,30px)}
.plan .was{font-size:14px;color:var(--text-2);letter-spacing:.04em;margin:0}
.plan .was s{font-family:var(--mincho);font-size:17px;color:var(--text);letter-spacing:.02em;text-decoration-thickness:1px;text-decoration-color:rgba(230,150,140,.85);margin:0 2px}
.plan .now{font-family:var(--mincho);font-size:clamp(28px,2.9vw,38px);line-height:1.15;color:#fff;font-variant-numeric:tabular-nums;margin:8px 0 0;letter-spacing:.02em;white-space:nowrap}
.plan .now small{font-size:.34em;letter-spacing:.1em;color:var(--text-2);margin-left:6px}
.plan .prow{display:flex;align-items:center;gap:14px;margin-top:14px;flex-wrap:wrap}
.plan .off{display:inline-block;font-family:var(--latin);font-size:10.5px;letter-spacing:.18em;color:var(--gold);border:1px solid rgba(201,168,106,.42);padding:5px 11px;margin:0}
.plan .free{font-size:11.5px;letter-spacing:.1em;color:var(--text-3);white-space:nowrap}
.plan .btn{margin-top:20px;width:100%}
.tbd{border-bottom:1px dashed currentColor;opacity:.72}

/* ---------- 単一商品オファー ---------- */
.plan.offer{display:block;position:relative;margin-top:clamp(40px,5.5vw,72px);
  border-top:1px solid rgba(190,212,240,.14);padding-top:clamp(32px,4vw,52px)}
@media(min-width:900px){
  .plan.offer{display:grid;grid-template-columns:1.06fr .94fr;column-gap:clamp(36px,5vw,84px);align-items:start}
}
.offer .offer-ph{margin:0;position:relative}
.offer .offer-ph .phi{display:block;overflow:hidden}
.offer .offer-ph figcaption{margin-top:11px;font-family:var(--gothic);font-size:11.5px;line-height:1.7;letter-spacing:.015em;color:var(--text-3)}
@media(max-width:620px){.offer .offer-ph figcaption{font-size:10.5px;margin-top:9px}}
.offer .offer-ph img{width:100%;aspect-ratio:4/3;object-fit:cover;display:block;
  transition:transform 1.3s var(--ease);filter:brightness(.98)}
.offer:hover .offer-ph img{transform:scale(1.035)}
.offer .offer-txt{padding-top:clamp(26px,3vw,4px)}
.offer h3{font-family:var(--mincho);font-size:clamp(21px,2.3vw,29px);line-height:1.45;letter-spacing:.01em;margin:0}
.offer .pr{margin-top:0;padding-top:clamp(24px,2.8vw,34px)}
.offer .now{font-size:clamp(34px,3.9vw,52px)}
.lineup-head{max-width:760px}
.lineup-head .dsp{margin-top:0}
@media(max-width:899px){
  /* スマホでは金額を主役サイズに */
  .offer .was{font-size:15.5px}
  .offer .was s{font-size:20px}
  .offer .now{font-size:clamp(44px,12.5vw,60px);margin-top:12px}
  .offer .now small{font-size:.30em}
  .offer .off{font-size:12px;padding:7px 13px;letter-spacing:.12em}
  .offer .free{font-size:13px}
  .offer .prow{gap:12px 16px;margin-top:18px}
}
.offer .btn{max-width:420px}

/* ---------- 電話注文 ---------- */
.tel{margin-top:clamp(44px,6vw,80px);padding-top:clamp(30px,4vw,46px);border-top:1px solid rgba(190,212,240,.14)}
.telhd{font-family:var(--mincho);font-size:clamp(17px,1.9vw,22px);line-height:1.6;letter-spacing:.02em;color:#fff;margin:0}
.telgrid{display:grid;gap:clamp(26px,3.4vw,40px);margin-top:clamp(22px,2.6vw,32px)}
@media(min-width:780px){.telgrid{grid-template-columns:1fr 1fr;column-gap:clamp(40px,6vw,96px)}}
.tellbl{font-size:12.5px;letter-spacing:.08em;color:var(--text-3);margin:0}
.telno{margin:9px 0 0;line-height:1}
.telno a{font-family:var(--latin);font-size:clamp(32px,4vw,50px);letter-spacing:.005em;color:#fff;
  font-variant-numeric:lining-nums tabular-nums;white-space:nowrap;transition:color .3s}
.telno a:hover{color:var(--gold)}
.telno.sub a{font-size:clamp(26px,3.1vw,38px);color:var(--text)}
.telsub{font-size:12px;line-height:1.75;color:var(--text-3);margin:11px 0 0;letter-spacing:.02em}

.setmeta{display:flex;flex-wrap:wrap;gap:10px 26px;margin-top:22px;font-family:var(--latin);font-size:11px;letter-spacing:.2em;color:var(--text-3)}

/* ---------- スマホ用 固定注文バー ---------- */
.cartbar{position:fixed;left:0;right:0;bottom:0;z-index:60;display:none;
  padding:11px clamp(14px,4vw,20px) calc(11px + env(safe-area-inset-bottom));
  background:linear-gradient(180deg,rgba(6,9,14,.86) 0%,rgba(4,6,10,.97) 42%,rgba(4,6,10,.99) 100%);
  -webkit-backdrop-filter:blur(16px) saturate(130%);backdrop-filter:blur(16px) saturate(130%);
  box-shadow:0 -18px 40px -26px rgba(0,0,0,.9);
  transform:translateY(112%);transition:transform .5s var(--ease);will-change:transform}
.cartbar::before{content:"";position:absolute;left:0;right:0;top:0;height:1px;
  background:linear-gradient(90deg,rgba(201,168,106,0),rgba(201,168,106,.5) 34%,rgba(201,168,106,.5) 66%,rgba(201,168,106,0))}
@media(max-width:899px){.cartbar{display:block}}
.cartbar.on{transform:none}
.cbrow{display:flex;align-items:center;gap:14px}
.cbprice{margin:0;flex:0 0 auto;font-family:var(--mincho);font-size:27px;line-height:1.05;color:#fff;
  font-variant-numeric:tabular-nums;letter-spacing:.01em;white-space:nowrap}
.cbprice small{font-size:.42em;color:var(--text-2);margin-left:3px;letter-spacing:.06em}
.cbprice em{display:block;font-style:normal;font-family:var(--gothic);font-size:10.5px;
  color:var(--gold);letter-spacing:.1em;margin-top:5px}
.cartbar .btn{flex:1 1 auto;min-height:50px;padding:13px 18px;margin:0}
.cbtel{display:flex;align-items:baseline;justify-content:center;gap:9px;flex-wrap:wrap;
  margin-top:10px;padding-top:9px;border-top:1px solid rgba(190,212,240,.12);
  font-size:11px;letter-spacing:.04em;color:var(--text-3)}
.cbtel b{font-family:var(--latin);font-weight:400;font-size:20px;letter-spacing:.005em;color:#fff;
  font-variant-numeric:lining-nums tabular-nums}
.cbtel i{font-style:normal;font-size:10.5px;color:var(--text-3)}
@media(prefers-reduced-motion:reduce){.cartbar{transition:none}}

/* ---------- faq ---------- */
.faq{border-top:1px solid var(--line);margin-top:clamp(40px,6vw,64px)}
details{border-bottom:1px solid var(--line-s)}
summary{cursor:pointer;list-style:none;padding:20px 40px 20px 0;position:relative;font-size:15.5px;line-height:1.8;color:var(--text);min-height:52px}
summary::-webkit-details-marker{display:none}
summary::after{content:"";position:absolute;right:6px;top:28px;width:9px;height:9px;border-right:1px solid var(--ice-d);border-bottom:1px solid var(--ice-d);rotate:45deg;transition:rotate .4s var(--ease)}
details[open] summary::after{rotate:-135deg}
details .ans{padding:0 0 22px;color:var(--text-2);font-size:15px;line-height:2.1;max-width:60em;overflow:hidden}
details .ans>span{display:block;transform:translateY(-6px);opacity:0;transition:transform .5s var(--ease),opacity .4s ease}
details[open] .ans>span{transform:none;opacity:1}
details.closing-now .ans>span{transform:translateY(-4px);opacity:0}
.js details .ans.anim{transition:height .46s var(--ease)}
@media(prefers-reduced-motion:reduce){details .ans>span{transition:none;transform:none;opacity:1}.js details .ans.anim{transition:none}}

/* ---------- closing ---------- */
.closing{position:relative;min-height:88svh;display:flex;align-items:center;justify-content:center;text-align:center;overflow:hidden}
.closing>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 44%}
.closing .shade{position:absolute;inset:0;background:radial-gradient(60% 55% at 50% 48%,rgba(5,7,11,.22),rgba(5,7,11,.86) 78%),linear-gradient(0deg,rgba(5,7,11,.92),rgba(5,7,11,.3) 60%)}
.closing .inner{position:relative;z-index:2;padding:clamp(60px,10vh,120px) clamp(20px,5vw,48px)}
.closing h2{font-size:clamp(28px,4.6vw,54px);line-height:1.7;letter-spacing:.14em}

/* ---------- footer ---------- */
footer{border-top:1px solid var(--line-s);padding-block:clamp(40px,6vw,64px);color:var(--text-3);font-size:13px;line-height:2}
.fnav{display:flex;flex-wrap:wrap;gap:10px 32px;padding-bottom:26px;margin-bottom:26px;border-bottom:1px solid var(--line-s)}
/* 年齢に関する注意文 */
.agewarn{font-family:var(--gothic);font-size:clamp(13.5px,1.5vw,15.5px);line-height:1.95;letter-spacing:.06em;
  color:rgba(230,236,246,.42);margin:0 0 30px;padding-bottom:28px;border-bottom:1px solid var(--line-s)}
.fnav a{display:inline-flex;align-items:center;gap:7px;min-height:44px;font-size:13.5px;letter-spacing:.06em;color:var(--text-2);transition:color .3s}
.fnav a:hover{color:#fff}
footer b{color:var(--text-2);font-weight:400}
.legal{margin-top:20px;padding-top:20px;border-top:1px solid var(--line-s);font-size:12px;line-height:1.95}

@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition-duration:.25s!important}
  .rv{transform:none}
  .mask>span{transform:none}
  .caustic{opacity:.4}
  .bleed>img{transform:none!important}
}
/* ---------- mobile refinements (<=700px) ---------- */
@media(max-width:700px){
  .wrap,.narrow{padding-inline:24px}
  .ed>.txt{padding:52px 24px}
  .step{padding:54px 24px}
  .pad{padding-block:72px}
  .pad-s{padding-block:54px}

  p{margin-bottom:1.35em}
  .body{font-size:14.5px;line-height:1.88}
  .body.sm{font-size:14px;line-height:1.86}

  .dsp{font-size:23px;line-height:1.64;letter-spacing:.045em}
  .dsp-s{font-size:19.5px;line-height:1.7}
  .step h3{font-size:19.5px;line-height:1.72;margin-top:14px}
  .lbl{font-size:10px;letter-spacing:.28em}
  .lbl-jp{font-size:11px;letter-spacing:.24em}
  .q{font-size:15.5px;line-height:1.92;padding-left:16px;margin-top:22px}

  .hero-img img{object-position:center 12%}
  .hero-veil{background:linear-gradient(0deg,rgba(4,6,10,.99) 0%,rgba(4,6,10,.97) 40%,rgba(4,6,10,.6) 64%,rgba(4,6,10,.74) 100%)}
  .hero h1{line-height:1.66}
  .hero .lead{font-size:13.5px;line-height:2;margin-top:20px}
  .hero-meta{font-size:10px;gap:6px 16px;margin-top:22px}

  .data .r{grid-template-columns:1fr;gap:6px;padding:16px 0}
  .data dd{font-size:14.5px;line-height:1.82}

  summary{font-size:13.5px;line-height:1.78;padding:16px 32px 16px 0;min-height:0}
  summary::after{top:24px;right:4px;width:8px;height:8px}
  details .ans{font-size:13.5px;line-height:1.92;padding-bottom:18px}

  .story-stage{display:none}
  .stepimg{display:block;margin:0 -24px 22px}
  .stepimg img{width:100%;height:44vw;max-height:260px;object-fit:cover}
  .step{padding-block:32px}
  .acc .stephd{cursor:pointer;position:relative;padding-right:34px}
  .acc .stephd::after{content:"";position:absolute;right:4px;top:calc(50% - 5px);width:8px;height:8px;border-right:1px solid var(--ice-d);border-bottom:1px solid var(--ice-d);rotate:45deg;transition:rotate .4s var(--ease)}
  .acc .step.open .stephd::after{rotate:-135deg}
  .acc .stepbody{overflow:hidden}
  .acc .stepbody.anim{transition:height .45s var(--ease)}
  .acc .step:not(.open) .stepbody{height:0}

  /* PAIRING : 全タイル同じ幅（2列） */
  .tiles{grid-template-columns:repeat(2,1fr);gap:10px 12px}
  .tile .kind{display:none}
  .tile figcaption{min-height:0;padding-top:9px}
  .tile .nm{font-size:14.5px;line-height:1.5;margin-top:0;letter-spacing:.01em}
  .tile .ds{font-size:11.5px;line-height:1.65;margin-top:5px}

  .plan .inc{font-size:12.5px;line-height:1.85}
  .plan .now{font-size:32px}

  .riceX .nm{font-size:16px}
  .riceX .nm em{font-size:11.5px}
  .creds p{font-size:14px;padding:12px 0}
  .note-line{font-size:13.5px;line-height:1.9;padding-left:16px}
}

/* ============ カート遷移前のお届け日案内モーダル ============ */
.cn-ov{position:fixed;inset:0;z-index:9998;display:flex;align-items:center;justify-content:center;
  padding:20px;background:rgba(3,5,9,.86);backdrop-filter:blur(10px) saturate(.9);
  -webkit-backdrop-filter:blur(10px) saturate(.9);opacity:0;
  transition:opacity .4s cubic-bezier(.22,.61,.36,1)}
.cn-ov.cn-in{opacity:1}
.cn-card{position:relative;width:100%;max-width:580px;max-height:calc(100vh - 40px);overflow-y:auto;
  background:#fff;color:#1b2029;border-radius:16px;
  padding:clamp(34px,6vw,52px) clamp(22px,4.4vw,42px) clamp(26px,5vw,42px);
  text-align:center;box-shadow:0 30px 90px rgba(0,0,0,.6);
  transform:translateY(14px) scale(.985);transition:transform .45s cubic-bezier(.22,.61,.36,1)}
.cn-ov.cn-in .cn-card{transform:none}
.cn-card:focus{outline:none}
.cn-ttl{font-family:var(--mincho);font-weight:500;font-size:clamp(19px,4.6vw,24px);
  line-height:1.6;letter-spacing:.08em;color:#11151c;margin:0}
.cn-txt{font-family:var(--mincho);font-size:clamp(13px,3.2vw,15px);line-height:2.15;
  letter-spacing:.04em;color:#3a414d;margin:clamp(22px,4.5vw,32px) auto 0;
  max-width:30em;text-wrap:balance;word-break:auto-phrase;line-break:strict}
.cn-act{margin:clamp(26px,5vw,36px) 0 0}
.cn-yes{font-family:var(--mincho);font-size:clamp(16px,4vw,19px);letter-spacing:.16em;
  text-indent:.16em;line-height:1;width:100%;max-width:220px;padding:clamp(15px,3.2vw,18px) 10px;
  border-radius:7px;cursor:pointer;background:#2f333a;color:#fff;border:1px solid #2f333a;
  transition:background .3s,border-color .3s;-webkit-tap-highlight-color:transparent}
.cn-yes:hover{background:#11151c;border-color:#11151c}
.cn-yes:focus-visible{outline:2px solid #5f86b4;outline-offset:3px}
.cn-x{position:absolute;top:10px;right:10px;width:40px;height:40px;border:0;background:none;
  cursor:pointer;color:#8b929c;font-size:22px;line-height:1;border-radius:50%;
  transition:color .25s,background .25s;-webkit-tap-highlight-color:transparent}
.cn-x:hover{color:#11151c;background:#f2f3f5}
.cn-x:focus-visible{outline:2px solid #5f86b4;outline-offset:2px}
.cn-lock{overflow:hidden!important}
@media(prefers-reduced-motion:reduce){.cn-ov,.cn-card{transition:none}}