:root{--ink:#1e232c;--ink2:#5a616d;--paper:#f4f5f1;--card:#fbfbf8;--line:#d9ddd6;--cool:#2a63c4;--disp:'Kaisei Opti','Hiragino Mincho ProN','Yu Mincho',serif;--body:'Zen Kaku Gothic New','Hiragino Sans','Hiragino Kaku Gothic ProN','Yu Gothic',system-ui,sans-serif}
*{box-sizing:border-box}
html{background:var(--paper);-webkit-text-size-adjust:100%;font-synthesis:none}
body{margin:0;color:var(--ink);font:500 15.5px/1.95 var(--body);word-break:normal;overflow-wrap:anywhere}
a{color:inherit;text-underline-offset:3px}
img{display:block;max-width:100%;height:auto}
.hero{padding:clamp(40px,9vw,84px) 20px clamp(30px,6vw,52px);text-align:center;background:radial-gradient(120% 90% at 50% 20%,#fff 0%,#eef0ea 58%,#dfe3dc 100%)}
.logoA{display:block;width:min(100%,620px);margin:0 auto}
.logo{width:100%;height:auto;filter:drop-shadow(0 4px 9px rgba(28,34,48,.2))}
.catch{margin:12px 0 26px;font-family:var(--disp);font-weight:700;font-size:clamp(17px,4.2vw,23px);letter-spacing:.08em}
.play{display:inline-block;text-decoration:none;min-width:230px;padding:17px 44px;color:#f5f6f3;background:var(--ink);font-weight:900;font-size:17px;letter-spacing:.1em;clip-path:polygon(10% 0,90% 0,100% 50%,90% 100%,10% 100%,0 50%);transition:filter .2s}
.play:hover{filter:brightness(1.25)}
.play:focus-visible{outline:3px solid #f2b61f;outline-offset:-6px}
main{width:min(980px,100% - 32px);margin:0 auto;padding:clamp(32px,6vw,64px) 0 16px}
h2{margin:0 0 12px;font-family:var(--disp);font-weight:700;font-size:clamp(22px,4.6vw,29px);line-height:1.4}
p{margin:0 0 12px}
section{margin-bottom:clamp(44px,8vw,80px)}
.sp{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,400px);gap:clamp(20px,4vw,44px);align-items:center}
.sp.rev .tx{order:2}
.sp figure{margin:0}
.sp figure img{width:100%;border-radius:14px;box-shadow:0 10px 30px rgba(28,34,48,.16)}
.mix{display:flex;flex-wrap:wrap;gap:6px 4px;align-items:center;font-weight:900;margin:14px 0}
.c{display:inline-block;padding:0 9px;color:#fff;clip-path:polygon(14% 0,86% 0,100% 50%,86% 100%,14% 100%,0 50%);min-width:34px;text-align:center}
.mix .o,.mix .g,.mix .p{margin-right:16px}
.c.y{color:#3f2c00}
.r{background:#c0212a}.y{background:#f2b61f}.b{background:#2a63c4}.o{background:#d96f12}.g{background:#2d8a4e}.p{background:#7d48b8}
.layers{list-style:none;margin:18px 0 22px;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(148px,1fr));gap:1px;background:var(--line);border:1px solid var(--line);border-radius:12px;overflow:hidden}
.layers li{background:var(--card);padding:8px 14px;font-size:13.5px;color:var(--ink2);line-height:1.5}
.layers b{display:block;color:var(--ink);font-family:var(--disp);font-size:16.5px}
.shots{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(8px,2vw,18px)}
.shots img{width:100%;border-radius:12px;box-shadow:0 8px 24px rgba(28,34,48,.14)}
.plain dl{margin:0;display:grid;gap:1px;background:var(--line);border:1px solid var(--line);border-radius:12px;overflow:hidden}
.plain dl div{background:var(--card);padding:13px 18px}
.plain dt{font-weight:900}
.plain dd{margin:0;color:#3b424e}
.note{margin-top:12px;font-size:14.5px;color:var(--ink2)}
.again{text-align:center;margin:0 0 40px}
footer{padding:8px 16px calc(28px + env(safe-area-inset-bottom,0px));text-align:center;font-size:13px;font-weight:700;line-height:2;color:var(--ink2)}
footer .sep{margin:0 .6em;opacity:.6}
@media (max-width:720px){.sp{grid-template-columns:1fr}.sp.rev .tx{order:0}.sp figure{max-width:440px;margin:0 auto;width:100%}}