:root{
  --stage:#0b0d12; --stage2:#10131a; --panel:#141821; --ink:#ece9e2; --ink2:#b9b5ad; --mute:#7d7a74; --line:rgba(236,233,226,.12);
  --light:#fff4e0; --warm:rgba(255,244,224,.18);
  --moji:#fff4e0; --yoyaku:#f6e9cf; --hyoka:#ecdcb6; --kanjo:#e3ce9e; --seicho:#dac08a;
  --serif:"Shippori Mincho","Yu Mincho",serif; --sans:"Zen Kaku Gothic New",sans-serif; --mono:"IBM Plex Mono",ui-monospace,monospace;
  --ease:cubic-bezier(.2,.7,.2,1);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--stage);color:var(--ink);font-family:var(--sans);font-weight:300;line-height:1.95;letter-spacing:.02em}
/* 単一の光だまり：ページ全体に一つだけ */
body::before{content:"";position:fixed;inset:0;z-index:0;pointer-events:none;background:radial-gradient(42% 38% at 62% 28%,var(--warm),transparent 70%)}
main,header,footer{position:relative;z-index:1}
.mono{font-family:var(--mono);font-size:12px;letter-spacing:.08em;color:var(--mute)}
.skip{position:absolute;left:-999px;top:12px;background:var(--light);color:#000;padding:8px 14px;border-radius:6px;z-index:99}
.skip:focus{left:12px}
:focus-visible{outline:2px solid var(--light);outline-offset:3px}

.top{position:sticky;top:0;z-index:5;display:flex;justify-content:space-between;align-items:center;padding:16px clamp(20px,5vw,64px);background:linear-gradient(rgba(11,13,18,.92),rgba(11,13,18,0));backdrop-filter:blur(8px)}
.brand{display:flex;align-items:center;gap:10px;font-size:15px}
.brand .mono{text-decoration:line-through;font-size:13px}
.brand .to{color:var(--mute)}
.brand b{font-weight:700;color:var(--light);letter-spacing:.04em}
.top nav{display:flex;gap:22px;font-size:12.5px;letter-spacing:.14em}
.top nav a{color:var(--ink2);text-decoration:none;border-bottom:1px solid transparent;padding-bottom:3px;transition:.3s}
.top nav a:hover{color:var(--ink);border-color:var(--ink)}

section{padding:clamp(72px,10vw,130px) clamp(20px,8vw,140px);max-width:1200px;margin:0 auto}
.sec-head{display:flex;align-items:baseline;gap:18px;margin-bottom:26px}
.sec-head .num{font-size:13px;color:var(--ink2);padding:2px 8px;border:1px solid var(--line);border-radius:4px}
h2{font-family:var(--serif);font-weight:600;font-size:clamp(24px,3vw,38px);line-height:1.6;margin:0;letter-spacing:.03em}
h3{font-family:var(--serif);font-weight:600;font-size:20px;margin:0 0 10px}
.intro{max-width:760px;color:var(--ink2);margin:0 0 36px;font-size:15.5px}

/* ===== HERO ===== */
.hero{position:relative;min-height:92vh;padding-top:0;padding-bottom:0;display:flex;align-items:flex-end;max-width:none}
.flow{position:absolute;inset:0;width:100%;height:100%;display:block}
.flow-static{display:none;position:absolute;inset:0;width:100%;height:100%}
.no-js .flow{display:none}.no-js .flow-static{display:block}
@media (prefers-reduced-motion:reduce){.flow{display:none}.flow-static{display:block}}
.hero-text{position:relative;max-width:1200px;margin:0 auto;width:100%;padding:0 clamp(20px,8vw,140px) 9vh}
.eyebrow{margin:0 0 22px;color:var(--ink2)}
h1{font-family:var(--serif);font-weight:600;line-height:1.35;font-size:clamp(32px,4.6vw,62px);margin:0;letter-spacing:.02em}
h1 span{display:block}
h1 .l1{color:var(--ink2)}
h1 .l2{white-space:nowrap}
@media (max-width:900px){h1 .l2{white-space:normal}}
h1 .l2 b{font-weight:700;color:#fff4e0;text-shadow:0 0 40px rgba(255,244,224,.6)}
.lead{max-width:680px;margin:28px 0 0;font-size:clamp(14.5px,1.35vw,17px);color:var(--ink2)}
.lead b{color:var(--ink);font-weight:500}
.hint{margin:26px 0 0;font-size:11px}
.no-js .hint{display:none}

/* ===== WHAT ===== */
.what{background:var(--stage2);max-width:none}
.what>*{max-width:1200px;margin-left:auto;margin-right:auto}
.two{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-bottom:22px}
.box{padding:32px 34px;border:1px solid var(--line);border-radius:12px;background:var(--panel)}
.box.chg{border-color:rgba(255,244,224,.35);background:linear-gradient(160deg,#1a1d26,#141821)}
.box ul{margin:0;padding-left:1.15em}
.box li{margin:8px 0;font-size:15px;color:var(--ink2)}
.box li b{color:var(--ink);font-weight:500}
.box li::marker{color:var(--light)}
.note{margin:18px 0 0;font-size:13px;color:var(--mute);border-top:1px dashed var(--line);padding-top:14px}
.note b{color:var(--light);font-weight:500}
.map{display:grid;gap:8px}
.mrow{display:grid;grid-template-columns:1.1fr 44px 1.1fr 1.6fr;align-items:center;gap:14px;padding:14px 22px;border:1px solid var(--line);border-radius:10px;background:var(--panel)}
.mrow.new{border-style:dashed}
.was{text-decoration:line-through;font-size:13px}
.arrow{height:1px;background:var(--ink2);position:relative;opacity:.6}
.arrow::after{content:"";position:absolute;right:-1px;top:-3px;border:4px solid transparent;border-left-color:var(--ink2)}
.now{font-size:18px}.now b{font-weight:700}
.desc{font-size:13px;color:var(--mute)}

/* ===== COLORS LAB ===== */
.lab{display:grid;grid-template-columns:200px 1fr;gap:26px;align-items:start}
.swatches{display:grid;gap:10px}
.sw{display:flex;align-items:center;gap:12px;background:var(--panel);border:1px solid var(--line);color:var(--ink2);font:inherit;font-size:14px;padding:12px 14px;border-radius:10px;cursor:pointer;text-align:left;transition:.3s}
.sw i{width:14px;height:14px;border-radius:50%;border:1.5px solid var(--c);flex:none;transition:.3s}
.sw:hover{border-color:var(--c);color:var(--ink)}
.sw[aria-pressed="true"]{border-color:var(--c);color:var(--ink)}
.sw[aria-pressed="true"] i{background:var(--c);box-shadow:0 0 12px var(--c)}
.call{position:relative;border:1px solid var(--line);border-radius:14px;background:var(--panel);padding:22px 26px 26px;min-height:340px;overflow:hidden;transition:box-shadow .6s}
.call-head{display:flex;justify-content:space-between;margin-bottom:14px}
.state{color:var(--ink2)}
.wave{height:56px;margin-bottom:18px}
.wave svg{width:100%;height:100%}
.wave path{fill:none;stroke:var(--ink2);stroke-width:1.5;opacity:.8;transition:stroke .6s}
.layers{display:grid;gap:10px}
.layer{display:none;grid-template-columns:auto 1fr;gap:14px;align-items:start;padding:12px 14px;border-radius:10px;background:rgba(255,255,255,.03);border-left:3px solid var(--c)}
.layer.on{display:grid;animation:rise .5s var(--ease)}
@keyframes rise{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.layer .tag{font-family:var(--mono);font-size:11px;letter-spacing:.1em;color:var(--c);padding:2px 8px;border:1px solid var(--c);border-radius:4px;margin-top:3px;white-space:nowrap}
.layer p{margin:0;font-size:14px;color:var(--ink)}
.layer[data-l="moji"]{--c:var(--moji)}.layer[data-l="yoyaku"]{--c:var(--yoyaku)}.layer[data-l="hyoka"]{--c:var(--hyoka)}.layer[data-l="kanjo"]{--c:var(--kanjo)}.layer[data-l="seicho"]{--c:var(--seicho)}
.empty{margin:0;color:var(--mute);font-size:14px}
.empty.hide{display:none}
.no-js .layer{display:grid}.no-js .empty{display:none}.no-js .swatches{display:none}.no-js .lab{grid-template-columns:1fr}
.foot{max-width:760px;margin:30px 0 0;color:var(--ink2);font-size:15px;border-left:2px solid var(--light);padding-left:18px}

/* ===== WHY ===== */
.why{background:var(--stage2);max-width:none}
.why>*{max-width:1200px;margin-left:auto;margin-right:auto}
.why-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.step{padding:28px 26px;border:1px solid var(--line);border-radius:12px;background:var(--panel)}
.step .mono{display:block;margin-bottom:12px}
.step p{margin:0;font-size:14.5px;color:var(--ink2)}
.step.now{border-color:rgba(255,244,224,.4);background:linear-gradient(160deg,#1a1d26,#141821)}
.step.now .mono{color:var(--light)}

/* ===== WHOM ===== */
.three{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.lamp{position:relative;padding:34px 28px 30px;border:1px solid var(--line);border-radius:12px;background:var(--panel);overflow:hidden}
.lamp::before{content:"";position:absolute;left:50%;top:-40px;width:260px;height:160px;transform:translateX(-50%);background:radial-gradient(50% 60% at 50% 20%,var(--c),transparent 70%);opacity:.18;pointer-events:none}
.bulb{width:10px;height:10px;border-radius:50%;background:var(--c);box-shadow:0 0 16px var(--c);margin-bottom:22px}
.lamp h3 small{display:block;font-family:var(--sans);font-size:11.5px;letter-spacing:.16em;color:var(--mute);font-weight:400;margin-top:4px}
.lamp p{margin:0;font-size:14.5px;color:var(--ink2)}

/* ===== LINEUP ===== */
.tiles{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
.tile{position:relative;padding:22px 20px 20px;border:1px solid var(--line);border-radius:12px;background:var(--panel);overflow:hidden;transition:transform .4s var(--ease),border-color .4s}
.tile::before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;background:var(--c);opacity:.7}
.tile.now::before{box-shadow:0 0 18px var(--light)}
.tile:hover{transform:translateY(-3px);border-color:var(--c)}
.tile.now{background:linear-gradient(180deg,#1a1d26,#141821)}
.tile.later{opacity:.6}
.st{position:absolute;top:14px;right:14px;font-size:10px}
.tile h3{font-size:clamp(16px,1.5vw,20px);white-space:nowrap;font-family:var(--sans);font-weight:500;margin:10px 0 6px;letter-spacing:.02em}
.tile h3 b{color:var(--light);font-weight:700}
.tile p{margin:0;font-size:13px;color:var(--ink2);line-height:1.8}

/* ===== FAQ ===== */
details{border-bottom:1px solid var(--line);padding:18px 0}
summary{cursor:pointer;font-weight:500;font-size:16px;list-style:none;display:flex;justify-content:space-between;gap:16px}
summary::-webkit-details-marker{display:none}
summary::after{content:"＋";color:var(--light);flex:none}
details[open] summary::after{content:"－"}
details p{margin:10px 0 0;color:var(--ink2);font-size:14.5px}

footer{padding:90px clamp(20px,8vw,140px) 70px;border-top:1px solid var(--line);background:#07090d}
.big{font-family:var(--serif);font-size:clamp(22px,3vw,36px);line-height:1.6;margin:0 0 26px;color:var(--ink2)}
.big b{color:var(--light);font-weight:700}

@media (max-width:900px){.two,.why-grid,.three{grid-template-columns:1fr}.tiles{grid-template-columns:repeat(2,minmax(0,1fr))}.lab{grid-template-columns:1fr}.swatches{grid-template-columns:repeat(5,1fr)}.sw{padding:10px 8px;font-size:12px;justify-content:center}.sw i{display:none}}
@media (max-width:640px){.top nav{display:none}.tiles{grid-template-columns:1fr}.mrow{grid-template-columns:1fr;gap:4px}.arrow{display:none}.hero{min-height:84vh}}
@media print{body{background:#fff;color:#000}.flow,.hint,.top nav,.swatches{display:none!important}.layer{display:grid!important}.empty{display:none}section,.box,.tile,.lamp,.step,.call{border-color:#999;background:#fff;color:#000}h1 .l1,.lead,.intro,p{color:#000}}