/* 黒い樹脂本体＋無記名の紙シール。2026-10-22 */
:root{--bg:#090a0b;--bg-2:#121314;--ink:#e9e3d7;--ink-2:#b6b0a5;--ink-3:#928b7e;--line:#302c27;--accent:#a82d2a;--max:1240px}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}
body{background:var(--bg)}
a,button,summary{-webkit-tap-highlight-color:rgba(168,45,42,.2)}
:focus-visible{outline:2px solid #dec4a1;outline-offset:6px}
section[id]{scroll-margin-top:84px}
.nav{padding-top:calc(22px + env(safe-area-inset-top));padding-bottom:22px}
.nav.solid{background:rgba(9,10,11,.91);border-bottom:1px solid rgba(208,195,173,.12)}
.logo{font-size:11px;letter-spacing:.12em}
.logo i{width:6px;height:6px;box-shadow:0 0 14px rgba(168,45,42,.4)}
.nav-links{font-size:12px;letter-spacing:.06em}
.pill{height:42px;padding:0 23px;border-radius:3px;border-color:#71685b;letter-spacing:.05em}
.pill.fill{background:#e4dccb;border-color:#e4dccb;color:#171512}
.hero{height:100svh;min-height:820px;background:#090a0b}
.demo{inset:240px 0 220px;padding:0;perspective:1400px;isolation:isolate}
.demo::before{background:radial-gradient(ellipse at 50% 42%,#262421 0%,#101111 48%,#090a0b 80%)}
.demo::after{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(ellipse at center,rgba(195,173,137,.06),transparent 70%)}
.obj{z-index:1;width:min(92vw,570px);transform-style:preserve-3d}
.cassette-art{position:relative;display:block;width:100%;height:auto;transform:translateZ(16px);backface-visibility:hidden;-webkit-backface-visibility:hidden}
.cassette-back{position:absolute;inset:0;width:100%;height:100%;transform:rotateY(180deg) translateZ(16px);backface-visibility:hidden;-webkit-backface-visibility:hidden;filter:brightness(.75)}
.obj .slice{inset:6% 4% 8%;border-radius:3%;background:#141516;border:1px solid #242526}
.cassette-edge{position:absolute;display:block;backface-visibility:visible;background:repeating-linear-gradient(0deg,#151617 0 3px,#222325 3px 4px);border:1px solid #303132}
.edge-left,.edge-right{top:6%;height:86%;width:32px;transform:translateX(-50%) rotateY(90deg)}
.edge-left{left:4%;filter:brightness(.75)}
.edge-right{left:96%}
.edge-top,.edge-bottom{left:4%;width:92%;height:32px;transform:translateY(-50%) rotateX(90deg);background:linear-gradient(180deg,#101112,#303132 20%,#151617 30%,#141516 70%,#27282a 78%,#101112)}
.edge-top{top:6%}
.edge-bottom{top:92%;filter:brightness(.65)}
.floor{display:none}
.hero-shade{background:linear-gradient(180deg,rgba(9,10,11,.12),transparent 25%,transparent 62%,#090a0b);pointer-events:none}
.hero-foot{position:static;display:block;padding:0}
.hero-left{position:absolute;z-index:5;top:104px;left:var(--pad);right:var(--pad);text-align:center}
.hero .eyebrow{margin:0 0 20px;font-size:10px;letter-spacing:.32em;color:#bbb0a0}
.hero h1{margin:0 auto;max-width:470px;font-size:inherit;line-height:1}
.title-art{width:100%;height:auto}
.hero-right{position:absolute;z-index:5;bottom:40px;left:var(--pad);right:var(--pad);max-width:420px}
.hero-right p{font-size:13px;line-height:2;color:var(--ink-2);margin-bottom:24px}
.hero-btns{gap:30px}
.textlink{font-size:12px;letter-spacing:.07em}
.textlink .dot{width:32px;height:32px;border-color:#71685b}
.hero-note{top:72px;width:90%;text-align:center;font-size:11px}
.hint{right:30px;color:#928b7e;font-size:9px;letter-spacing:.22em}
.h2,.footer-title,.rows h3{font-family:"Yu Mincho","Hiragino Mincho ProN",serif;letter-spacing:.06em}
.h2{line-height:1.5}
.sec{border-top-color:var(--line);padding:100px 0}
.label{display:flex;align-items:center;gap:12px;font-size:11px;letter-spacing:.18em;color:#ac9f8b}
.label::before{content:"";width:22px;height:1px;background:var(--accent)}
.body{font-size:14px;line-height:2.1}
#story{background:radial-gradient(ellipse at 80% 35%,#1b1915,transparent 60%)}
.listing{box-shadow:0 35px 90px -25px #000;transform:rotate(-2deg);border-radius:10px}
.listing-ph{background:#d3cec3}
.fict{color:var(--ink-3);margin-top:24px}
.rows .n{color:#a0896b;font-family:Georgia,serif;font-size:15px}
.rows li{padding:30px 0}
.rows h3{font-size:26px}
.rows p{font-size:13px;line-height:2}
.full{background:#0c0c0b;height:65svh;min-height:430px}
.full img{object-position:65% center;filter:saturate(.55) brightness(.72)}
.full-text{padding-bottom:50px;background:linear-gradient(transparent,rgba(9,10,11,.95))}
.full-text p{font-family:"Yu Mincho","Hiragino Mincho ProN",serif;letter-spacing:.07em;line-height:1.7}
#buy{background:linear-gradient(140deg,#181613,#0c0d0e 60%)}
.buy-ph{border-color:#40392e;border-radius:3px;box-shadow:0 24px 70px rgba(0,0,0,.4)}
.plan{padding:26px 0 32px}
.plan-price{font-family:Georgia,serif;font-size:36px;color:#e9e0cf}
.plan-price small{font-family:var(--font)}
.big-btn{border-radius:3px;background:#e4dccb;color:#171512;font-size:14px}
.big-btn.line{border-color:#71685b}
.lim{border-radius:2px;font-weight:500;color:#d88673;border-color:#85483c}
.must{border-top-width:1px;padding:22px 22px 24px;border-left:1px solid #4c332d;background:#191412}
.must b{color:#db8a78}
.acc summary{font-size:14px;padding:24px 0}
.acc .in{font-size:13px;line-height:2}
.footer{background:#070809;padding:70px 0;color:#928b7e}
.footer-title{font-size:clamp(24px,5vw,38px)}
/* 円のベースは固定、歯車だけをその上で回す。座標は正面素材に合わせる。 */
.reel-face{position:absolute;inset:0;backface-visibility:hidden;-webkit-backface-visibility:hidden;pointer-events:none;transform-style:preserve-3d}
.reel-front{transform:translateZ(16.3px)}
.reel-back{transform:rotateY(180deg) translateZ(16.3px);filter:brightness(.75)}
.reel-base,.reel-face .reel{position:absolute;border-radius:50%}
.reel-base{background:#080909}
.reel-face .reel{background:url("img/reel-spindle-black-20261022.svg") center/100% 100% no-repeat;transform-origin:50% 50%;animation:spin 3.6s linear infinite;animation-play-state:paused}
.hero.playing .reel-face .reel{animation-play-state:running;animation-duration:3.6s}
@media(min-width:900px){
 .hero{min-height:740px}
 .hero-left{top:25%;left:max(40px,6.5vw);right:auto;width:40vw;max-width:600px;text-align:left}
 .hero h1{max-width:none}
 .hero .eyebrow{margin-bottom:28px}
 .hero-right{left:max(40px,6.5vw);right:auto;bottom:auto;top:calc(25% + 16.666vw + 85px);width:34vw;max-width:420px}
 .demo{inset:100px 0 100px 42%;padding:0}
 .obj{width:min(52vw,760px)}
 .sec{padding:130px 0}
 .rows h3{font-size:32px}
 .full-text{padding-left:6.5vw;padding-right:6.5vw}
 .full{height:70svh}
}
@media(min-width:1500px){.hero-right{top:calc(25% + 335px)}}
@media(max-width:359px){.hero{min-height:810px}.hero-left{top:100px}.demo{inset:225px 0 225px}.hero-right{bottom:32px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.reel-face .reel{animation:none!important}}

@media(min-width:600px) and (max-width:899px){
 .hero{min-height:1000px}
 .demo{inset:360px 0 250px}
 .hero-right{left:50%;right:auto;width:420px;transform:translateX(-50%)}
}

/* 実写の紙・樹脂・リールを使い、厚みを本体サイズに比例させる。 */
.obj{--cassette-depth:70px;--half-depth:35px}
.cassette-art{transform:translateZ(var(--half-depth));filter:brightness(var(--front-light,1))}
.cassette-back{transform:rotateY(180deg) translateZ(var(--half-depth));filter:brightness(var(--back-light,.85))}
.reel-front{transform:translateZ(calc(var(--half-depth) + .15px));filter:brightness(var(--front-light,1))}
.reel-back{transform:rotateY(180deg) translateZ(calc(var(--half-depth) + .15px));filter:brightness(var(--back-light,.85))}
.obj .slice{border-color:#1c1d1e;background:#101112}
.edge-left,.edge-right{width:var(--cassette-depth);border-radius:3px;background:linear-gradient(90deg,#111315,#242628 44%,#08090a 49%,#101214 54%,#1e2022 58%,#111315);border-color:#252729}
.edge-top,.edge-bottom{height:var(--cassette-depth);border-radius:3px;background:linear-gradient(180deg,#101214,#282a2c 40%,#0a0b0c 48%,#101214 53%,#202224 59%,#101214);border-color:#252729}
.reel-face .reel{background-image:url("img/cassette-black-real-20261022.png");background-repeat:no-repeat;mask-image:radial-gradient(circle,#000 98%,transparent 100%);-webkit-mask-image:radial-gradient(circle,#000 98%,transparent 100%)}
.reel-face .reel-left{width:11.84895833%;height:17.77343750%;left:23.79557292%;top:37.06054688%;background-size:843.95604396% 562.63736264%;background-position:26.99409158% 45.07125891%}
.base-left{width:11.97916667%;height:17.96875000%;left:23.73046875%;top:36.96289062%}
.reel-face .reel-right{width:11.84895833%;height:17.77343750%;left:64.19270833%;top:37.06054688%;background-size:843.95604396% 562.63736264%;background-position:72.82127031% 45.07125891%}
.base-right{width:11.97916667%;height:17.96875000%;left:64.12760417%;top:36.96289062%}
/* 曲面の角は積層した丸い本体へ逃がし、側面が四角く張り出さないようにする。 */
.edge-left,.edge-right{top:9%;height:80%;border-radius:2px}
.edge-top,.edge-bottom{left:6.5%;width:87%;border-radius:2px}

/* ユーザー制作の原本を使用。原本の余白だけ表示枠で切り取る。 */
.title-original-frame{display:block;aspect-ratio:1942/809;overflow:hidden;mix-blend-mode:normal}
.title-original-frame .title-art{width:100%;height:100%;object-fit:cover;object-position:50% 50%}

/* 提供されたオバケンのブランドロゴ。比率・色は原本のまま。 */
.logo img{display:block;width:92px;height:auto}
@media(min-width:900px){.logo img{width:108px}}