:root{color-scheme:dark;--aqua:#91d9d4;--ink:#030605;--scale:min(1px, .0694444444vw)}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:#030504;color:#f5f6f5;font-family:'Hiragino Kaku Gothic ProN','Yu Gothic',Meiryo,sans-serif;font-size:16px;min-width:1024px}button{font:inherit;cursor:pointer}img{display:block;max-width:100%}button:focus-visible{outline:2px solid #b2fff3;outline-offset:6px}[hidden]{display:none!important}h1,h2,h3,p,dl,dd{margin:0}h3{font-weight:600}.hero{position:relative;height:calc(1228 * var(--scale));min-height:873px;overflow:hidden;background:#020606;isolation:isolate}.hero-art{position:absolute;top:0;left:0;width:100%;height:calc(1049 * var(--scale));min-height:746px;overflow:hidden}.hero-base,.hero-rocks{position:absolute;width:100%;height:100%;object-fit:cover}.hero-shade{position:absolute;inset:0;z-index:3;background:linear-gradient(0deg,#020606 0%,rgba(2,6,6,.97) 7%,transparent 32%,rgba(0,0,0,.1) 100%)}.brand{position:absolute;left:24px;top:30px;width:122px;z-index:6}.eyebrow{position:absolute;top:calc(38 * var(--scale));width:calc(562 * var(--scale));left:50%;transform:translateX(-50%);z-index:5}.hero h1{position:absolute;top:calc(110 * var(--scale));left:50%;width:calc(490 * var(--scale));transform:translateX(-50%);z-index:5}.catch{position:absolute;top:calc(879 * var(--scale));left:50%;width:calc(507 * var(--scale));transform:translateX(-50%);z-index:5}.intro{position:absolute;top:calc(1072 * var(--scale));width:calc(781 * var(--scale));left:50%;transform:translateX(-50%);z-index:5}.slideshow{height:200px;position:relative;overflow:hidden;border-block:1px solid #143330;background:#06100f}.slide-track{display:flex;width:max-content;height:100%;animation:slides 100s linear infinite}.slide-set{display:flex;flex-shrink:0;height:100%}.slide-set img{width:267px;height:200px;object-fit:cover}.motion-toggle{position:absolute;bottom:8px;right:12px;border:1px solid #ffffff38;background:#031110b8;color:#c9e4df;border-radius:2px;font-size:11px;padding:6px 10px;z-index:6;opacity:.65}.motion-toggle:hover{opacity:1}.motion-toggle span{margin-left:9px}.section-heading{text-align:center;position:relative;z-index:5}.section-heading>span{display:block;color:#70c6c3;font-family:Georgia,serif;font-size:17px;letter-spacing:.42em;margin:0 0 12px .42em}.section-heading h2 img{margin:auto;max-width:90%;height:auto}.story{position:relative;overflow:hidden;isolation:isolate}.story-art{position:absolute;inset:0}.story-art img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center}.dimmer{animation:flicker 13s linear infinite;opacity:0}.story-shade{position:absolute;inset:0;z-index:2;background:linear-gradient(0deg,rgba(0,0,0,.36),rgba(0,0,0,.27)),radial-gradient(ellipse at center,rgba(0,0,0,.69),transparent 75%)}.story-inner{position:relative;z-index:5;padding:76px 24px 70px}.story .section-heading{margin-bottom:38px}.story-copy{text-align:center;font-family:'Yu Mincho','Hiragino Mincho ProN',serif;font-size:17px;line-height:1.9;letter-spacing:.045em;text-shadow:0 1px 4px #000}.story-copy p{margin:0 0 22px}.story-copy>p:first-child{font-size:21px;letter-spacing:.12em;margin-bottom:28px}.outline-button{width:234px;height:38px;background:#06131380;color:#fff;border:1px solid #9ebbb8;font-size:14px;letter-spacing:.08em;position:relative;margin-top:10px;transition:background .2s}.outline-button span{position:absolute;right:16px}.outline-button:hover{background:#18413bc9}.points{padding:70px 0 75px;background:#030504}.points .section-heading{margin-bottom:42px}.point-list{max-width:1122px;width:calc(100% - 120px);margin:auto;display:grid;gap:28px}.point{display:grid;grid-template-columns:594fr 500fr;gap:28px;align-items:center;min-height:213px}.point-picture{width:100%}.point-detail{display:flex;align-items:flex-start;gap:22px}.point-number{width:118px;flex-shrink:0}.point h3{font-size:25px;line-height:1.35;letter-spacing:-.045em;margin:16px 0 12px}.point p{font-size:18px;line-height:1.65;max-width:300px;letter-spacing:.01em}.point-2{grid-template-columns:500fr 594fr}.point-2 .point-picture{order:2}.point-2 .point-detail{order:1}.play-world{position:relative;background:linear-gradient(#03080766,#092e2d35),url('assets/play-background-01.webp') center/cover;isolation:isolate;overflow:hidden}.play{padding:105px 0 60px;position:relative;z-index:5}.play-grid{width:1120px;max-width:90%;margin:45px auto 0;display:grid;grid-template-columns:repeat(3,1fr);gap:30px;text-align:center}.play-icon{width:205px;height:205px;margin:0 auto 26px;border-radius:50%;background:#e3e8e65c;border:1px solid #ffffff1c;display:grid;place-items:center}.play-icon img{width:145px;height:145px;object-fit:contain}.play-item h3{font-size:24px;color:#b9ece8;text-shadow:0 0 8px #86d9ce8c;margin-bottom:12px}.play-item p{font-size:17px;line-height:1.55}.howto{padding:70px 0 90px;background:#006b638c;position:relative;z-index:5}.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:28px;max-width:1140px;width:90%;margin:82px auto 0}.step{border:2px solid #d2faf2;background:linear-gradient(#00463b44,#063b3790);box-shadow:0 0 15px #b4fff14d;position:relative;padding:22px 22px 28px;min-height:375px}.step-top{position:absolute;left:-2px;top:-48px;width:130px;height:48px;background:#edfffc;box-shadow:0 0 12px #cfffffc4;border:1px solid #c9efec}.step img{width:100%;height:139px;object-fit:cover;border:1px solid #e9ffff;margin-bottom:16px}.step h3{font-size:23px;text-align:center;margin-bottom:12px;letter-spacing:.03em}.step p{font-size:17px;line-height:1.65}.buy{border:1px solid #c5eee4;border-radius:3px;background:#c3ebe3;color:#124d48;font-size:21px;font-weight:600;letter-spacing:.06em;padding:18px 28px;display:flex;align-items:center;justify-content:center;gap:40px;transition:background .2s,box-shadow .2s}.buy:hover{background:#e4fff9;box-shadow:0 0 18px #7de0ce44}.buy span{font-size:.7em}.buy.small{font-size:16px;width:100%;padding:9px 12px;gap:20px;background:#f3fffc;margin-top:15px}.information{padding:70px 24px 0}.information .section-heading{margin-bottom:42px}.table-frame{max-width:830px;margin:auto;position:relative;padding:12px;background:linear-gradient(135deg,transparent 15px,#a8c4c1 15px,#a8c4c1 16px,transparent 16px),linear-gradient(315deg,transparent 15px,#a8c4c1 15px,#a8c4c1 16px,transparent 16px);border-block:1px solid #8caaa6}.table-frame:before{content:'';position:absolute;inset:5px;border:1px solid #607874;clip-path:polygon(20px 0,100% 0,100% calc(100% - 20px),calc(100% - 20px) 100%,0 100%,0 20px);pointer-events:none}table{width:100%;border-collapse:collapse;text-align:left;font-size:17px;line-height:1.65}th,td{border:1px solid #49615d;padding:17px 20px}th{width:170px;font-weight:500;background:#0e1916}td{background:#080d0b}tr:first-child td{font-size:22px}tr:nth-child(8) td{font-size:22px;font-weight:600}.info-notes{max-width:830px;margin:18px auto 0;font-size:13px;line-height:1.8;color:#c8d0cd}.faq{max-width:1122px;width:calc(100% - 120px);margin:85px auto 0;padding:55px 78px 65px;background:#003f39}.faq .section-heading{margin-bottom:42px}.faq dl{font-size:17px;line-height:1.8}.faq dl>div+div{margin-top:25px}.faq dt{font-weight:600;margin-bottom:9px}.faq dd{color:#e4ece9}footer{text-align:center;padding:65px 0 145px;color:#668c84;font-family:Georgia,serif;letter-spacing:.15em;font-size:13px}.purchase-bar{position:fixed;z-index:20;bottom:0;left:0;width:100%;background:#082d31f5;border-top:1px solid #58bfc0;box-shadow:0 -8px 30px #0005;backdrop-filter:blur(8px)}.purchase-inner{width:1120px;max-width:90%;height:100px;margin:auto;display:flex;align-items:center;gap:35px}.purchase-title{font-family:'Yu Mincho',serif;font-size:32px;letter-spacing:.02em}.price{font-size:21px;white-space:nowrap}.price strong{font-size:30px;font-weight:500}.purchase-inner>.buy{margin-left:auto;width:50%;height:65px}dialog{border:1px solid #65b1a6;background:#092b29;color:white;padding:50px;max-width:480px;text-align:center;box-shadow:0 20px 80px #0008}dialog::backdrop{background:#000a;backdrop-filter:blur(3px)}dialog h2{font-size:23px;margin:16px 0 22px}dialog p{line-height:1.8}.dialog-label{letter-spacing:.15em;color:#a4ddd4}.dialog-close{position:absolute;top:10px;right:15px;border:0;background:transparent;color:white;font-size:25px}.dialog-ok{margin-top:24px;padding:10px 50px;background:#c3ebe3;border:0;color:#124d48}@keyframes slides{to{transform:translateX(-50%)}}@keyframes flicker{0%,52%,62%,100%{opacity:0}54%{opacity:.28}56%{opacity:.08}59%{opacity:.34}81%{opacity:0}84%{opacity:.18}87%{opacity:0}}@media(min-width:1440px){.hero-art{height:1049px}.hero{height:1228px}}@media(max-width:1200px){.point h3{font-size:21px}.point p{font-size:16px}.point-number{width:98px}.point-detail{gap:14px}.play-item h3{font-size:20px}.step{padding:18px}.step h3{font-size:20px}.step p{font-size:16px}}@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*:before,*:after{animation:none!important;transition:none!important}}
.point-number{background:url('assets/points-04.webp') center/contain no-repeat}
/* Revision 2: PSD typography, readable backgrounds and visible gentle motion. */
.section-heading>.section-label{letter-spacing:normal;margin:0 0 12px;min-height:18px;display:flex;justify-content:center;align-items:center}
.section-label img{max-width:none;height:auto}
.brand{width:144px;height:auto;left:22px;top:20px;overflow:visible}
.hero-shade{background:linear-gradient(0deg,#020606 0%,rgba(2,6,6,.97) 7%,transparent 36%,rgba(0,0,0,.14) 100%)}
.story-copy{font-family:'Hiragino Sans','Hiragino Kaku Gothic ProN','Yu Gothic',Meiryo,sans-serif;font-weight:400;letter-spacing:.025em;font-size:17px;line-height:1.95}
.story-copy>p:first-child{font-size:20px;letter-spacing:.06em}
.story-art img:first-child{filter:brightness(.78)}
.dimmer{animation:light-falter 7.8s linear infinite}
.play-world{background-image:linear-gradient(rgba(0,6,8,.62),rgba(0,11,12,.68)),url('assets/play-background-01.webp')}
.howto{background:#00605882}
.step{border:0;box-shadow:none;background:url('assets/how-to-03.webp') center/100% 100% no-repeat;padding:91px 25px 28px;min-height:468px}
.step-top{display:none}
.steps{margin-top:35px;gap:28px}
.step h3{font-size:23px}.step p{font-size:17px}
@keyframes light-falter{0%,35%,52%,100%{opacity:0}38%{opacity:.25}40%{opacity:.05}43%{opacity:.8}46%{opacity:.12}49%{opacity:.5}73%{opacity:0}76%{opacity:.55}79%{opacity:.1}82%{opacity:0}}
@media(prefers-reduced-motion:reduce){}
.story-art img{object-position:center top}
.story-art .warning-glow{mix-blend-mode:screen;animation:warning-pulse 3.8s linear infinite;opacity:.75}
.dimmer{animation:warning-dip 3.8s linear infinite}
@keyframes warning-dip{0%,12%,48%,65%,100%{opacity:0}24%,31%{opacity:1}38%{opacity:.25}78%,88%{opacity:.93}94%{opacity:.3}}
@keyframes warning-pulse{0%,12%,48%,65%,100%{opacity:.85}24%,31%{opacity:0}38%{opacity:.5}78%,88%{opacity:.02}94%{opacity:.45}}
@media(prefers-reduced-motion:reduce){.warning-glow{opacity:.15}.dimmer{opacity:0}}
@media(prefers-reduced-motion:reduce){}

/* Motion: consolidated settings. Keep all effects behind typography. */
@font-face{font-family:'Story W5';src:local('HiraginoSans-W5'),local('Hiragino Sans W5');font-weight:600;font-style:normal;font-display:swap}
.story-emphasis{font-family:'Story W5','Hiragino Sans','Hiragino Kaku Gothic ProN','Yu Gothic',Meiryo,sans-serif;font-weight:600}
.hero-base{filter:brightness(.70);transform-origin:60% 45%;animation:space-drift 32s linear -8s infinite alternate;will-change:transform}
.hero-rocks{filter:brightness(.68);z-index:2;transform-origin:50% 100%;animation:rock-drift 22s ease-in-out -6s infinite alternate;will-change:transform}
@keyframes space-drift{from{transform:scale(1.04) translate(-.8%,.4%)}to{transform:scale(1.06) translate(.8%,-.4%)}}
@keyframes rock-drift{from{transform:scale(1.12) translate(-2.6%,1%) rotate(-.3deg)}to{transform:scale(1.15) translate(2.6%,-1%) rotate(.3deg)}}
.stars{position:absolute;inset:0;z-index:1;pointer-events:none}
.stars i{position:absolute;left:var(--x);top:var(--y);width:var(--size);height:var(--size);border-radius:50%;background:#d8f4ff;box-shadow:0 0 5px #7ebacb;animation:star-breathe var(--period) ease-in-out var(--delay) infinite alternate}
@keyframes star-breathe{0%,15%{opacity:.12;transform:scale(.75)}85%,100%{opacity:.8;transform:scale(1.1)}}
.meteor{position:absolute;left:10%;top:15%;width:125px;height:1px;background:linear-gradient(90deg,transparent,#b5e7e3);opacity:0;z-index:1;filter:drop-shadow(0 0 2px #b3eeff);animation:quiet-meteor 13s linear -9s infinite}
.meteor.second{left:32%;top:8%;width:85px;animation:quiet-meteor 21s linear -3s infinite}
@keyframes quiet-meteor{0%,80%,100%{opacity:0;transform:translate(0,0) rotate(28deg)}83%{opacity:.55}91%{opacity:0;transform:translate(260px,138px) rotate(28deg)}}
.scanlines{position:absolute;inset:0;pointer-events:none;z-index:4;overflow:hidden;background:repeating-linear-gradient(to bottom,transparent 0 5px,rgba(106,159,178,.035) 5px 6px)}
.hero .scanlines{background:none;mix-blend-mode:screen;mask-image:linear-gradient(#000 0%,#000 70%,transparent 94%)}
.hero .scanlines:before,.hero .scanlines:after{content:'';position:absolute;inset:-6px;background:url('assets/fv-interference.jpg') center/cover;pointer-events:none}
.hero .scanlines:before{opacity:.30}
.hero .scanlines:after{opacity:.5;animation:signal-flicker 4.7s steps(1,end) infinite}
@keyframes signal-flicker{0%,100%{clip-path:inset(8% 0 85%);transform:translateX(0);opacity:.25}18%{clip-path:inset(37% 0 61%);transform:translateX(2px);opacity:.55}22%{opacity:.1}44%{clip-path:inset(65% 0 30%);transform:translateX(-3px);opacity:.42}48%{opacity:.12}72%{clip-path:inset(20% 0 76%);transform:translateX(1px);opacity:.5}76%{opacity:.15}}
@media(prefers-reduced-motion:reduce){.hero-base,.hero-rocks,.stars i,.hero .scanlines:after{animation:none!important}.hero-base{transform:scale(1.04)}.hero-rocks{transform:scale(1.12)}.stars i{opacity:.3}.meteor,.hero .scanlines:after{display:none}}

/* Story interference retains the existing cool neutral tint. */
.story .scanlines:after{content:'';position:absolute;inset:-6px;background:url('assets/fv-interference.jpg') center/cover;filter:grayscale(1) brightness(1.35);mix-blend-mode:screen;opacity:.2;animation:story-signal 4.7s steps(1,end) -1.2s infinite;pointer-events:none}
@keyframes story-signal{0%,100%{clip-path:inset(8% 0 85%);transform:translateX(0);opacity:.14}18%{clip-path:inset(37% 0 61%);transform:translateX(2px);opacity:.32}22%{opacity:.08}44%{clip-path:inset(65% 0 30%);transform:translateX(-3px);opacity:.26}48%{opacity:.08}72%{clip-path:inset(20% 0 76%);transform:translateX(1px);opacity:.3}76%{opacity:.1}}
.purchase-bar{left:50%;bottom:24px;width:auto;transform:translateX(-50%);background:none;border:0;box-shadow:none;backdrop-filter:none}
.purchase-bar .floating-buy{width:300px;height:58px;padding:0 36px;gap:24px;border:1px solid #93cfc9;border-radius:999px;background:linear-gradient(115deg,rgba(17,65,66,.94),rgba(30,91,87,.90));color:#e3f7f3;font-size:18px;font-weight:500;letter-spacing:.12em;box-shadow:0 6px 24px #0008,inset 0 1px 0 #dbfff512;backdrop-filter:blur(10px);transition:background .25s,box-shadow .25s,transform .25s}
.purchase-bar .floating-buy span{font-size:12px;letter-spacing:0}
.purchase-bar .floating-buy:hover{background:linear-gradient(115deg,#225c5b,#327b72);box-shadow:0 6px 28px #0008,0 0 16px #86d9ce25;transform:translateY(-2px)}
@media(prefers-reduced-motion:reduce){.story .scanlines:after{animation:none!important;opacity:0}}

/* PC finishing: optically centered intro, consistent heading rhythm. */
.hero .intro{top:calc(1138.5 * var(--scale));transform:translate(-50%,-50%)}
.buy.small span{display:inline-block;font-size:26px;font-weight:500;line-height:1;transform:translateY(-1px)}
.story-inner{padding-top:80px;padding-bottom:80px}
.points{padding-top:80px;padding-bottom:80px}
.play{padding-top:80px;padding-bottom:64px}
.howto{padding-top:80px;padding-bottom:80px}
.information{padding-top:80px}
.section-heading>.section-label{height:22px;display:flex;align-items:center;justify-content:center;margin:0 0 14px;letter-spacing:normal}
.story .section-heading,.points .section-heading,.information .section-heading,.faq .section-heading{margin-bottom:40px}
.play-grid{margin-top:40px}
.faq{margin-top:80px;padding-top:60px;padding-bottom:60px}

/* PC cards scale as a unit, preserving the approved composition. */
.steps{--hu:min(1px,calc((100vw - 80px)/1120));width:calc(1120 * var(--hu));max-width:none;grid-template-columns:repeat(3,calc(344 * var(--hu)));gap:calc(44 * var(--hu));margin-top:35px}
.steps .step{height:calc(430 * var(--hu));min-height:0;padding:0;position:relative}
.steps .step>img{position:absolute;left:calc(16 * var(--hu));top:calc(78 * var(--hu));width:calc(312 * var(--hu));height:calc(137 * var(--hu));margin:0;object-fit:cover}
.steps .step h3{position:absolute;top:calc(228 * var(--hu));left:calc(16 * var(--hu));width:calc(312 * var(--hu));font-size:calc(23 * var(--hu));line-height:1.4;margin:0;letter-spacing:0}
.steps .step p{position:absolute;top:calc(272 * var(--hu));left:calc(28 * var(--hu));width:calc(288 * var(--hu));font-size:calc(17 * var(--hu));line-height:1.55;margin:0}
.steps .step .buy.small{position:absolute;top:calc(356 * var(--hu));left:calc(28 * var(--hu));width:calc(288 * var(--hu));height:calc(42 * var(--hu));margin:0;padding:0 calc(40 * var(--hu));font-size:calc(16 * var(--hu));line-height:1;display:flex;justify-content:center;align-items:center}
.buy-chevron{position:absolute;right:calc(18 * var(--hu));top:50%;transform:translateY(-50%);width:calc(20 * var(--hu));height:calc(20 * var(--hu));fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.brand img{width:100%;height:auto}
.brand:focus-visible{outline:2px solid #b2fff3;outline-offset:6px}
.hero .catch{top:calc(849 * var(--scale))}
.hero .intro{filter:drop-shadow(0 0 3px #a9f5e9aa) drop-shadow(0 0 9px #6ac7c35c)}

/* Responsive extension: approved desktop composition above remains the baseline. */
.intro-mobile{display:none}
.scroll-cue{position:absolute;right:32px;bottom:32px;z-index:6;display:flex;flex-direction:column;align-items:center;gap:12px;color:#b7d8d5;text-decoration:none;font-size:10px;letter-spacing:.25em;padding:10px}
.scroll-cue i{display:block;width:1px;height:46px;background:#8bc2bc40;overflow:hidden}
.scroll-cue i:after{content:'';display:block;width:1px;height:100%;background:#c2efea;animation:scroll-signal 2.5s ease-in-out infinite}
@keyframes scroll-signal{0%{transform:translateY(-100%)}65%,100%{transform:translateY(100%)}}
.site-loader{position:fixed;inset:0;z-index:100;display:grid;place-items:center;background:radial-gradient(ellipse at 50% 40%,#123536,#030a0d 65%);opacity:0;visibility:hidden;transition:opacity .65s ease,visibility .65s;pointer-events:none}
.site-loader:before{content:'';position:absolute;inset:0;opacity:.08;background:url('assets/fv-interference.jpg') center/cover;mix-blend-mode:screen;animation:loader-noise 1.8s steps(1) infinite}
.js-loading .site-loader{opacity:1;visibility:visible;pointer-events:auto}
.js-loading{overflow:hidden}
.js-loading .purchase-bar{visibility:hidden}
.loader-inner{position:relative;width:min(320px,72vw);text-align:center;color:#a6ceca}
.loader-inner>img{width:220px;max-width:75%;margin:30px auto 36px;filter:drop-shadow(0 0 18px #81cbc133)}
.loader-label{font:9px/1.8 monospace;letter-spacing:.18em}
.loader-status{font:10px/1.8 monospace;letter-spacing:.24em}
.loader-meter{height:1px;background:#89c6c330;margin:22px 0 16px}
.loader-meter>span{display:block;height:100%;width:0;background:#bbe5db;box-shadow:0 0 9px #94fff5;transition:width .4s ease}
.loader-count{font:14px/1.5 monospace;letter-spacing:.16em;font-variant-numeric:tabular-nums}
.loader-count span{font-size:9px;margin-left:5px}
.loader-coordinate{position:absolute;bottom:36px;font:9px/1.5 monospace;letter-spacing:.14em;color:#507572}
@keyframes loader-noise{0%,100%{transform:translateY(0);opacity:.06}40%{transform:translateY(2px);opacity:.1}44%{opacity:.04}}
@media(max-width:1023px){
 body{min-width:0}
 .hero{min-height:0;height:calc(1228 * var(--scale))}
 .hero-art{min-height:0;height:calc(1049 * var(--scale))}
 .brand{width:112px;top:18px;left:18px}
 .eyebrow{top:70px;width:52%}
 .hero h1{top:112px;width:37%}
 .hero .intro{width:calc(781 * var(--scale))}
 .scroll-cue{right:16px;bottom:14px;font-size:9px;gap:8px}
 .scroll-cue i{height:28px}
 .slideshow{height:156px}.slide-set img{height:156px;width:208px}
 .point-list{width:calc(100% - 64px);gap:36px}
 .point,.point-2{grid-template-columns:1fr 1fr;gap:24px}
 .point-detail{gap:12px}.point-number{width:60px}
 .point h3{font-size:20px;margin:4px 0 12px}.point p{font-size:15px;line-height:1.8}
 .play-grid{gap:18px;width:calc(100% - 64px);max-width:none}
 .play-icon{width:140px;height:140px;margin-bottom:22px}.play-icon img{width:100px;height:100px}
 .play-item h3{font-size:18px;line-height:1.6}.play-item p{font-size:14px;line-height:1.8}
 .steps{--hu:1px;width:calc(100% - 48px);grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
 .steps .step{height:auto;min-height:395px;padding:65px 18px 28px}
 .steps .step>img,.steps .step h3,.steps .step p,.steps .step .buy.small{position:relative;top:auto;left:auto;width:100%}
 .steps .step>img{height:auto;aspect-ratio:312/137;margin-bottom:18px}
 .steps .step h3{font-size:19px;margin-bottom:14px}
 .steps .step p{font-size:15px;line-height:1.8}
 .steps .step .buy.small{height:44px;padding:0 22px 0 8px;font-size:13px;margin-top:20px}
 .buy-chevron{right:8px;width:16px;height:16px}
 .faq{width:calc(100% - 64px);padding:48px 40px}.faq dl{font-size:16px}
 table{font-size:15px}th{width:150px}th,td{padding:16px}
 dialog{width:calc(100% - 40px);padding:42px 24px}
}
@media(max-width:699px){
 .hero{height:810px}
 .hero-art{height:615px}
 .hero-base,.hero-rocks{object-position:53% center}
 .hero-shade{background:linear-gradient(0deg,#020606 0%,#020606 22%,transparent 43%,#0002 100%)}
 .brand{width:96px;left:16px;top:16px}
 .eyebrow{top:78px;width:82%;max-width:370px}
 .hero h1{top:118px;width:70%;max-width:320px}
 .hero .catch{top:527px;width:86%;max-width:415px}
 .hero .intro{display:none}
 .intro-mobile{display:block;position:absolute;top:618px;left:24px;right:24px;z-index:5;text-align:center;font-size:14px;line-height:1.95;letter-spacing:.03em;color:#e6f3ef;text-shadow:0 0 9px #83ded777}
 .scroll-cue{left:50%;right:auto;bottom:10px;transform:translateX(-50%);font-size:9px;gap:8px}
 .scroll-cue i{height:25px}
 .slideshow{height:130px}.slide-set img{height:130px;width:174px}
 .story-inner{padding:60px 24px}
 .story-copy{font-size:15px;line-height:2.05;text-align:left;max-width:440px;margin:auto;letter-spacing:.025em;overflow-wrap:anywhere}
 .story-copy>p:first-child{font-size:19px;text-align:center;letter-spacing:.02em}
 .story-copy p{margin-bottom:25px}
 .outline-button{display:block;margin:28px auto 0;height:44px;width:210px}
 .story-art img{object-position:50% top}
 .section-heading>.section-label{margin-bottom:12px;height:18px}
 .section-label img{max-width:240px;max-height:16px;width:auto}
 .section-heading h2 img{max-width:calc(100% - 48px);max-height:32px;width:auto}
 .points .section-heading h2 img{width:calc(100% - 48px);max-width:460px;height:auto;max-height:none}
 .points{padding:60px 0}
 .point-list{width:calc(100% - 40px);max-width:460px;gap:40px}
 .point,.point-2{grid-template-columns:1fr;gap:18px;min-height:0}
 .point-2 .point-picture,.point-2 .point-detail{order:initial}
 .point-detail{padding:0 4px;gap:16px}.point-number{width:68px}
 .point h3{font-size:20px;line-height:1.5;letter-spacing:-.025em;margin:1px 0 10px}
 .point p{font-size:15px;line-height:1.9;max-width:none}
 .play{padding:60px 0}
 .play-grid{grid-template-columns:1fr;width:calc(100% - 56px);max-width:440px;gap:24px;margin-top:32px;text-align:left}
 .play-item{display:grid;grid-template-columns:86px 1fr;column-gap:22px;align-items:center}
 .play-icon{grid-row:1/3;width:86px;height:86px;margin:0}.play-icon img{width:64px;height:64px}
 .play-item h3{font-size:17px;margin:0 0 6px;align-self:end;line-height:1.5}
 .play-item p{font-size:13px;line-height:1.7;align-self:start}
 .howto{padding:60px 0}
 .steps{--hu:min(1px,calc((100vw - 48px)/344));width:calc(344 * var(--hu));grid-template-columns:1fr;gap:24px;margin-top:28px}
 .steps .step{height:calc(430 * var(--hu));min-height:0;padding:0}
 .steps .step>img{position:absolute;left:calc(16 * var(--hu));top:calc(78 * var(--hu));width:calc(312 * var(--hu));height:calc(137 * var(--hu));margin:0}
 .steps .step h3{position:absolute;top:calc(228 * var(--hu));left:calc(16 * var(--hu));width:calc(312 * var(--hu));font-size:calc(23 * var(--hu));line-height:1.4;margin:0}
 .steps .step p{position:absolute;top:calc(272 * var(--hu));left:calc(28 * var(--hu));width:calc(288 * var(--hu));font-size:calc(17 * var(--hu));line-height:1.55;margin:0}
 .steps .step .buy.small{position:absolute;top:calc(356 * var(--hu));left:calc(28 * var(--hu));width:calc(288 * var(--hu));height:calc(42 * var(--hu));margin:0;padding:0 calc(40 * var(--hu));font-size:calc(16 * var(--hu))}
 .buy-chevron{right:calc(18 * var(--hu));width:calc(20 * var(--hu));height:calc(20 * var(--hu))}
 .information{padding:60px 20px 0}.table-frame{padding:8px}
 table{table-layout:fixed;font-size:13px;line-height:1.8}
 th{width:30%;font-size:12px}th,td{padding:13px 10px;overflow-wrap:anywhere}
 tr:first-child td,tr:nth-child(8) td{font-size:18px}
 .info-notes{font-size:11px;line-height:1.9}
 .faq{width:calc(100% - 40px);margin-top:56px;padding:40px 22px}.faq dl{font-size:14px;line-height:1.9}.faq dt{margin-bottom:8px}.faq dl>div+div{margin-top:28px}
 .story .section-heading,.points .section-heading,.information .section-heading,.faq .section-heading{margin-bottom:30px}
 .purchase-bar{bottom:calc(14px + env(safe-area-inset-bottom,0px))}
 .purchase-bar .floating-buy{width:240px;height:50px;font-size:16px}
 footer{padding:44px 0 110px}
}
@media(prefers-reduced-motion:reduce){.scroll-cue i:after{animation:none}.site-loader:before{animation:none}.site-loader,.loader-meter>span{transition:none}}

.mobile-break{display:none}.duration{white-space:nowrap}
@media(max-width:1023px){.play-item h3 .duration{display:block}}
@media(max-width:699px){.mobile-break{display:block}.story-copy{text-align:center}.story-copy p{text-wrap:balance}}
/* Mobile art and balanced play-format block. */
.point-picture{display:block;min-width:0}.point-picture>img{width:100%;height:auto}
@media(max-width:699px){
 .intro-mobile{color:#91d9d4;text-shadow:0 0 8px #67bdb64d}
 .play-grid{width:calc(100% - 64px);max-width:296px;margin-inline:auto;gap:28px}
 .play-item{grid-template-columns:80px minmax(0,1fr);column-gap:24px}
 .play-icon{width:80px;height:80px}.play-icon img{width:58px;height:58px}
 .play-item h3{font-size:16px;line-height:1.6}
}
/* Mobile how-to: quieter typography and a larger image area. */
@media(max-width:699px){
 .steps .step>img{height:calc(164 * var(--hu))}
 .steps .step h3{top:calc(256 * var(--hu));font-size:calc(19 * var(--hu));line-height:1.5}
 .steps .step p{top:calc(298 * var(--hu));font-size:calc(14 * var(--hu));line-height:1.8}
 .steps .step .buy.small{top:calc(360 * var(--hu));font-size:calc(14 * var(--hu));font-weight:500}
}
/* Purchase notes share the FAQ panel and text alignment. */
.purchase-notes{margin-top:44px;padding-top:36px;border-top:1px solid #91d9d44d;font-size:17px;line-height:1.8}
.purchase-notes>h2{font-size:21px;font-weight:500;letter-spacing:.08em;text-align:center;margin-bottom:30px}
.purchase-notes-body h3{font-size:inherit;font-weight:600;margin-bottom:9px}
.purchase-notes-body p{color:#e4ece9}
.purchase-notes-body p+p{margin-top:12px}
.purchase-notes-body>div+div{margin-top:25px}
.contact-link{display:inline-block;margin-top:14px;color:#b9ece8;text-underline-offset:5px;text-decoration-thickness:1px}
.purchase-notes a:focus-visible,.footer-links a:focus-visible{outline:2px solid #91d9d4;outline-offset:4px}
.footer-links{display:flex;justify-content:center;flex-wrap:wrap;gap:12px 28px;margin-bottom:28px;font-family:'Hiragino Sans','Yu Gothic',Meiryo,sans-serif;font-size:12px;letter-spacing:.02em}
.footer-links a{color:#a0bab2;text-underline-offset:5px}.footer-links a:hover,.contact-link:hover{color:#e4fff9}
@media(max-width:1023px){.purchase-notes{font-size:16px}}
@media(max-width:699px){.purchase-notes{margin-top:34px;padding-top:30px;font-size:14px;line-height:1.9}.purchase-notes>h2{font-size:18px;letter-spacing:.04em;margin-bottom:24px}.purchase-notes-body h3{margin-bottom:8px}.purchase-notes-body>div+div{margin-top:28px}}

/* Retained POINT dimming and how-to frame spacing. */
.point-picture>img{filter:brightness(.74) saturate(.88)}
@media(min-width:1024px){
 .steps .step>img{left:calc(28 * var(--hu));width:calc(288 * var(--hu))}
 .steps .step .buy.small{left:calc(36 * var(--hu));width:calc(272 * var(--hu));top:calc(348 * var(--hu))}
}
@media(min-width:700px) and (max-width:1023px){
 .steps .step{padding-inline:26px;padding-bottom:38px}
 .steps .step .buy.small{font-size:12px;padding-inline:8px 28px}
}
@media(max-width:699px){
 .steps .step{height:calc(450 * var(--hu))}
 .steps .step>img{left:calc(28 * var(--hu));width:calc(288 * var(--hu));height:calc(151 * var(--hu));top:calc(83 * var(--hu))}
 .steps .step h3{top:calc(250 * var(--hu));left:calc(28 * var(--hu));width:calc(288 * var(--hu))}
 .steps .step p{top:calc(292 * var(--hu));left:calc(32 * var(--hu));width:calc(280 * var(--hu))}
 .steps .step .buy.small{left:calc(36 * var(--hu));width:calc(272 * var(--hu));top:calc(362 * var(--hu));height:calc(40 * var(--hu))}
}

/* Responsive how-to layout aligned with the supplied prototype. */
.step-label{display:none}
@media(max-width:1023px){
 .steps{width:calc(100% - 110px);max-width:992px;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;align-items:stretch;margin:35px auto 0}
 .steps .step{display:flex;flex-direction:column;height:auto;min-height:0;min-width:0;padding:30px 13px 18px;background:linear-gradient(180deg,#8edfd428 0,#10484680 50%,#032f32ed 100%);border:1px solid #b5f0e3a1;box-shadow:0 0 0 2px #77dfd435,0 0 14px #c8fff441,inset 0 0 12px #b3f9ef2b}
 .steps .step:before{content:'';position:absolute;top:-2px;left:16px;width:67px;height:12px;border-radius:2px 3px 0 0;transform:skew(12deg);background:#ddfaf6;box-shadow:0 0 12px #dffffb}
 .steps .step-top{display:none}
 .step-label{display:block;position:absolute;right:13px;top:10px;font-size:10px;line-height:1;letter-spacing:.12em;color:#a9f5eb}
 .steps .step>img{position:static;width:100%;height:auto;aspect-ratio:1.55;object-fit:cover;margin:0 0 15px;border:1px solid #7edbd8}
 .steps .step h3{position:static;width:auto;font-size:17px;line-height:1.6;margin:0 0 11px;text-align:center}
 .steps .step p{position:static;width:auto;flex:1;font-size:13px;line-height:1.85;margin:0}
 .steps .step .buy.small{position:relative;top:auto;left:auto;width:100%;height:auto;min-height:44px;margin:16px 0 0;padding:8px 25px 8px 9px;font-size:12px;line-height:1.5;letter-spacing:.02em}
 .steps .buy-chevron{right:8px;width:16px;height:16px}
}
@media(max-width:699px){
 .steps{width:calc(100% - 40px);max-width:540px;grid-template-columns:minmax(0,1fr);gap:26px;margin-top:32px}
 .steps .step{padding:30px 17px 22px}
 .steps .step>img{aspect-ratio:1.78}
 .steps .step h3{font-size:19px}
 .steps .step p{font-size:14px}
 .steps .step .buy.small{font-size:14px;min-height:44px;padding-inline:32px}
 .steps .buy-chevron{right:12px;width:18px;height:18px}
}

/* Mobile framed artwork alignment. */
@media(max-width:699px){
 .point-list,.steps{width:calc(100% - 48px);max-width:460px;margin-inline:auto}
}

/* Quieter POINT artwork on phones. */
@media(max-width:699px){.point-picture>img{filter:brightness(.60) saturate(.88)}}

/* v21: pre-release test play / SF terminal dialog */
.testplay-dialog{width:min(94vw,1000px);max-width:1000px;max-height:min(94vh,1000px);overflow:auto;border:0;background:transparent;padding:12px;color:#efffff;text-align:center;box-shadow:none}
.testplay-dialog::backdrop{background:rgba(0,4,9,.82);backdrop-filter:blur(6px)}
.testplay-terminal{position:relative;isolation:isolate;padding:25px 34px 20px;background:linear-gradient(150deg,rgba(10,34,41,.98),rgba(1,9,14,.98));border:2px solid #86c7c9;clip-path:polygon(20px 0,calc(100% - 20px) 0,100% 20px,100% calc(100% - 20px),calc(100% - 20px) 100%,20px 100%,0 calc(100% - 20px),0 20px);box-shadow:inset 0 0 30px #35c5cb20}
.testplay-terminal:before{content:'';position:absolute;inset:7px;pointer-events:none;border:1px solid #3c8c946e;clip-path:polygon(14px 0,calc(100% - 14px) 0,100% 14px,100% calc(100% - 14px),calc(100% - 14px) 100%,14px 100%,0 calc(100% - 14px),0 14px)}
.testplay-terminal-top,.testplay-terminal-bottom{display:flex;align-items:center;gap:10px;color:#8cc6c7;font:11px/1.3 ui-monospace,SFMono-Regular,Consolas,monospace;letter-spacing:.19em;text-align:left}
.testplay-terminal-id{margin-left:auto;color:#5b9fa5}.testplay-signal{width:8px;height:8px;background:#a1ffea;box-shadow:0 0 12px #8affee;border-radius:50%}
.testplay-eyebrow{margin:18px 0 2px!important;color:#87d9d7;font:12px/1.5 ui-monospace,SFMono-Regular,Consolas,monospace;letter-spacing:.32em}
.testplay-dialog h2{margin:0 0 5px;font-size:clamp(20px,2.5vw,29px);font-weight:600;letter-spacing:.1em}
.testplay-lead{color:#d3e7e6;font-size:14px;line-height:1.6;margin-bottom:14px!important}
.testplay-banner{width:100%;height:auto;border:1px solid #3d777b;box-shadow:0 0 20px #41c9ca17}
.testplay-note{margin:15px auto 0!important;color:#c5d7d8;font-size:13px;line-height:1.85}
.testplay-apply{display:inline-flex;align-items:center;justify-content:center;gap:20px;margin:17px auto 0;padding:13px 32px;min-height:46px;background:linear-gradient(100deg,#a4e3e0,#74bfc5);color:#06171b;font-weight:700;text-decoration:none;letter-spacing:.08em;clip-path:polygon(10px 0,100% 0,100% calc(100% - 10px),calc(100% - 10px) 100%,0 100%,0 10px);transition:filter .2s}
.testplay-apply:hover{filter:brightness(1.15)}.testplay-apply[hidden]{display:none!important}
.testplay-pending{margin:12px auto 0!important;font-size:12px;color:#a6bfc1}
.testplay-dialog .dialog-close{z-index:3;top:12px;right:20px;font-size:29px;color:#e3ffff}
.testplay-dialog .dialog-ok{margin-top:15px;padding:8px 30px;background:transparent;color:#b9e4e1;border:1px solid #558c91}
.testplay-terminal-bottom{justify-content:space-between;border-top:1px solid #477b8066;margin-top:18px;padding-top:11px;font-size:10px}.testplay-terminal-bottom span{color:#6ec8c9}
@media(max-width:699px){.testplay-dialog{width:calc(100% - 12px);padding:4px;max-height:92vh}.testplay-terminal{padding:29px 14px 17px;clip-path:polygon(12px 0,calc(100% - 12px) 0,100% 12px,100% calc(100% - 12px),calc(100% - 12px) 100%,12px 100%,0 calc(100% - 12px),0 12px)}.testplay-terminal-top{font-size:9px;letter-spacing:.07em}.testplay-terminal-id{display:none}.testplay-dialog .dialog-close{right:12px;top:8px}.testplay-eyebrow{font-size:10px;letter-spacing:.12em}.testplay-lead{font-size:12px}.testplay-note{font-size:12px}.testplay-banner{width:100%}.testplay-terminal-bottom{font-size:8px}}

/* v22: test-play campaign banner links to the actual X post when configured */
.testplay-banner-link{display:block;max-width:100%;margin:0 auto;cursor:default;text-decoration:none;outline-offset:5px}
.testplay-banner-link[href]{cursor:pointer}
.testplay-banner-link[href]:hover .testplay-banner{border-color:#a6e5e3;box-shadow:0 0 22px #68e5e64d;filter:brightness(1.045)}
.testplay-banner-link[href]:focus-visible{outline:2px solid #9fece9}

/* v23: improve readability of campaign announcement, without changing banner */
.testplay-lead{font-size:17px;line-height:1.75}
.testplay-note{font-size:15px;line-height:1.9}
@media(max-width:699px){.testplay-lead{font-size:15px;line-height:1.75}.testplay-note{font-size:14px;line-height:1.85}}

/* v24: floating CTA typography matched to the main purchase CTA.
   Keep the label on one line and center it independently of the arrow. */
.purchase-bar .floating-buy{
  position:relative;
  display:flex;
  align-items:center;
  justify-content:center;
  flex-wrap:nowrap;
  width:300px;
  height:58px;
  padding:0 24px;
  gap:0;
  font-family:'Hiragino Kaku Gothic ProN','Yu Gothic',Meiryo,sans-serif;
  font-size:18px;
  font-weight:600;
  letter-spacing:.06em;
  line-height:1.2;
  white-space:nowrap;
  word-break:keep-all;
  text-align:center;
}
.purchase-bar .floating-buy>span{
  position:absolute;
  right:20px;
  top:50%;
  transform:translateY(-50%);
  font-size:12px;
  font-weight:500;
  letter-spacing:0;
  line-height:1;
}
@media(max-width:699px){
  .purchase-bar .floating-buy{
    width:260px;
    height:50px;
    padding:0 24px;
    font-size:15px;
    letter-spacing:.06em;
  }
  .purchase-bar .floating-buy>span{right:17px;font-size:11px}
}
/* 星の位置(HTMLの style 属性から移した) */
.stars i:nth-child(1){--x:9.62%;--y:53.54%;--delay:-4.99s;--period:2.59s;--size:3.2px}
.stars i:nth-child(2){--x:16.06%;--y:38.28%;--delay:-4.48s;--period:3.04s;--size:2.9px}
.stars i:nth-child(3){--x:9.20%;--y:73.84%;--delay:-2.34s;--period:2.21s;--size:1.8px}
.stars i:nth-child(4){--x:45.37%;--y:67.85%;--delay:-2.79s;--period:4.93s;--size:1.7px}
.stars i:nth-child(5){--x:40.77%;--y:11.62%;--delay:-4.19s;--period:4.27s;--size:3.5px}
.stars i:nth-child(6){--x:2.56%;--y:75.81%;--delay:-0.72s;--period:2.83s;--size:1.7px}
.stars i:nth-child(7){--x:34.19%;--y:68.06%;--delay:-1.74s;--period:3.77s;--size:2.9px}
.stars i:nth-child(8){--x:80.78%;--y:49.65%;--delay:-2.69s;--period:3.32s;--size:3.0px}
/* 募集ダイアログ: 狭い画面で、文節の途中で改行しない */
.ph{display:inline-block}
.testplay-lead,.testplay-note,.testplay-dialog h2,.testplay-apply{text-wrap:balance}
.apply-text{text-align:center}
/* 「Xの応募投稿を開いてリポストする」ボタンを小さくする */
.testplay-apply{min-height:40px;padding:9px 26px;gap:12px;font-size:15px;letter-spacing:.05em}
@media(max-width:699px){.testplay-apply{padding:8px 16px;gap:8px;font-size:13px;letter-spacing:.02em;min-height:38px}}
/* 「閉じる」ボタンを小さくする */
.testplay-dialog .dialog-ok{margin-top:12px;padding:5px 22px;font-size:13px;line-height:1.5;letter-spacing:.05em}