/* 一発本番！怪獣撮影所 — 紹介ページ。暗い映画館と台本の紙を交互に、見出しの前にカチンコの「シーン」札 */
:root {
  --ink: #1c1a2e; --night: #0b0a10; --paper: #f1e7d0; --paper2: #e4d7ba; --yel: #f7c948; --red: #d8452f; --mute: #6c6577;
  --disp: 'Dela Gothic One', 'Hiragino Kaku Gothic StdN', sans-serif;
  --head: 'Noto Sans JP', 'Hiragino Kaku Gothic ProN', sans-serif;
  --body: 'Zen Kaku Gothic New', 'Hiragino Kaku Gothic ProN', 'Yu Gothic', sans-serif;
}
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body { margin: 0; background: var(--night); color: var(--paper); font-family: var(--body); font-weight: 500; font-size: 16px; line-height: 1.9; }
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }
a:focus-visible, .cta:focus-visible { outline: 3px solid var(--yel); outline-offset: 3px; }
.nw { display: inline-block; }
.wrap { max-width: 1040px; margin: 0 auto; padding: 0 max(20px, env(safe-area-inset-left)); }

/* 上の帯 */
.bar { position: sticky; top: 0; z-index: 10; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 8px max(16px, env(safe-area-inset-left)); background: rgba(11, 10, 16, .92); border-bottom: 2px solid #2a2834; backdrop-filter: blur(6px); }
.brand { display: flex; align-items: center; gap: 8px; text-decoration: none; font-family: var(--head); font-weight: 900; font-size: 15px; white-space: nowrap; }
.play { flex: none; padding: 6px 14px; background: var(--yel); color: var(--ink); border: 2px solid #000; box-shadow: 2px 2px 0 #000; text-decoration: none; font-family: var(--head); font-weight: 900; font-size: 14px; }

/* ヒーロー：夜のセットの写真にロゴ。上下にフィルムの穴 */
.hero { position: relative; overflow: hidden; min-height: min(86vh, 760px); display: grid; place-items: center; text-align: center; }
.hero picture, .hero picture img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hero::before { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse 60% 55% at 50% 48%, rgba(11, 10, 16, .55), rgba(11, 10, 16, .1) 70%), linear-gradient(rgba(11, 10, 16, 0) 60%, var(--night)); }
.hero::after, .last::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 22px; background: #000 repeating-linear-gradient(90deg, transparent 0 14px, #e8e0c8 14px 30px, transparent 30px 44px) 0 6px / 44px 10px repeat-x; }
.heroIn { position: relative; padding: 70px 20px 64px; width: min(100%, 760px); }
.hero h1 { margin: 0 auto 10px; width: min(92%, 620px); }
.lead { margin: 0; font-family: var(--disp); font-size: clamp(22px, 4.2vw, 36px); line-height: 1.4; color: #fff; text-shadow: 3px 3px 0 var(--ink), -2px -2px 0 var(--ink), 2px -2px 0 var(--ink), -2px 2px 0 var(--ink); }
.sub { margin: 10px 0 22px; font-size: clamp(15px, 2vw, 18px); text-shadow: 0 1px 4px #000, 0 0 2px #000; }
.cta { display: inline-block; min-width: 240px; padding: 14px 30px; background: var(--yel); color: var(--ink); border: 3px solid #000; box-shadow: 4px 4px 0 #000; text-decoration: none; font-family: var(--head); font-weight: 900; font-size: 19px; letter-spacing: .06em; }
.cta:active { transform: translate(2px, 2px); box-shadow: 2px 2px 0 #000; }
.free { margin: 14px 0 0; font-size: 13px; opacity: .85; text-shadow: 0 1px 3px #000; }

/* 節：台本の紙と、暗い映画館 */
.sec { position: relative; padding: 76px 0 84px; background: var(--paper); color: var(--ink); }
.sec.dark { background: var(--night); color: var(--paper); }
.sec + .sec::before { content: ''; position: absolute; left: 0; right: 0; top: -1px; height: 14px; background: repeating-linear-gradient(90deg, var(--ink) 0 26px, transparent 26px 34px); opacity: .9; }
.sec.dark + .sec::before { background: repeating-linear-gradient(90deg, var(--night) 0 26px, transparent 26px 34px); }
.scene { display: inline-flex; align-items: center; margin: 0 0 14px; padding: 4px 14px 4px 46px; font-family: var(--head); font-weight: 900; font-size: 14px; letter-spacing: .14em; color: #fff; background: var(--ink) linear-gradient(115deg, #fff 0 8px, var(--ink) 8px 16px, #fff 16px 24px, var(--ink) 24px 32px) 0 0 / 34px 100% no-repeat; border: 2px solid var(--ink); }
.dark .scene { border-color: #fff; background-color: #000; }
h2 { margin: 0 0 18px; font-family: var(--disp); font-weight: 400; font-size: clamp(28px, 4.6vw, 42px); line-height: 1.32; letter-spacing: .02em; }
h2 em { font-style: normal; color: var(--red); }
.dark h2 em { color: var(--yel); }
h2.small { margin-top: 48px; font-size: clamp(28px, 3.6vw, 32px); }
h3 { margin: 0 0 6px; font-family: var(--head); font-weight: 900; font-size: 19px; line-height: 1.45; }
p { margin: 0 0 1em; }
.intro { max-width: 46em; font-size: 17px; margin-bottom: 28px; }

/* 画面写真 */
.shot { margin: 0; border: 3px solid var(--ink); box-shadow: 6px 6px 0 var(--ink); background: #000; }
.dark .shot { border-color: #3b3848; box-shadow: 6px 6px 0 #000; }
.shot.wide { margin: 0 0 36px; }
.mon { margin: 0; }
.mon img { border: 4px solid var(--ink); outline: 2px solid #5a5668; background: #000; aspect-ratio: 16 / 9; object-fit: cover; width: 100%; }
.paper { margin: 0; transform: rotate(-1.6deg); box-shadow: 8px 10px 0 rgba(0, 0, 0, .28); }

/* シーン1：3つの手順 */
.steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.steps li { position: relative; padding: 18px 18px 6px; background: #fff8e8; border: 3px solid var(--ink); box-shadow: 5px 5px 0 var(--ink); }
.mk { display: inline-grid; place-items: center; min-width: 40px; height: 40px; padding: 0 6px; margin: 0 0 10px; font-family: var(--head); font-weight: 900; font-size: 20px; line-height: 1; color: var(--ink); background: #f39b4a; border: 3px solid var(--ink); }
.mk.cam { background: var(--yel); }
.mk.film { background: #fff; }
.mk.st { background: #f08070; color: #fff; font-size: 17px; }
.mk.cat { background: #e8b878; }

/* シーン2：3台のモニター */
.cams { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; margin-bottom: 34px; }
.cams figcaption { margin-top: 12px; font-size: 15px; line-height: 1.8; }
.cams figcaption b { display: block; font-family: var(--head); font-weight: 900; font-size: 18px; color: var(--yel); }
dl.film { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; margin: 0; border: 2px solid #3b3848; }
dl.film div { padding: 14px 18px; border-left: 2px solid #3b3848; }
dl.film div:first-child { border-left: 0; }
dl.film dt { font-size: 13px; color: #b7aec4; }
dl.film dd { margin: 2px 0 0; font-family: var(--head); font-weight: 900; font-size: 17px; }

/* シーン3：4シリーズ */
.series { display: grid; grid-template-columns: repeat(2, 1fr); gap: 30px; }
.sr { background: #fff8e8; border: 3px solid var(--ink); box-shadow: 6px 6px 0 var(--ink); }
.sr .mon img { border-width: 0 0 3px; outline: 0; }
.srBody { padding: 16px 20px 18px; }
.tech { display: inline-block; margin: 0 0 6px; padding: 1px 10px; font-size: 13px; font-weight: 700; color: #fff; background: var(--red); }
.sr h3 { font-size: 22px; }
.titles { list-style: none; display: flex; flex-wrap: wrap; gap: 6px 8px; margin: 4px 0 12px; padding: 0; }
.titles li { padding: 2px 10px; font-size: 14px; font-weight: 700; background: var(--paper2); border: 2px solid var(--ink); }
.goal { margin: 0; font-family: var(--head); font-weight: 900; font-size: 14px; color: var(--mute); }
.duel { display: grid; grid-template-columns: 1.1fr 1fr; gap: 28px; align-items: center; margin-top: 44px; }

/* シーン4：本日の現場 */
.mods { list-style: none; margin: 0 0 34px; padding: 0; display: grid; gap: 8px; max-width: 760px; }
.mods li { display: grid; grid-template-columns: 1fr auto; gap: 0 14px; align-items: baseline; padding: 12px 16px; background: #17151f; border: 2px solid #3b3848; }
.mods b { font-family: var(--head); font-weight: 900; font-size: 17px; }
.mods span { grid-column: 1; font-size: 14px; color: #c9c0d4; }
.mods i { grid-row: 1 / 3; grid-column: 2; font-style: normal; font-family: var(--disp); font-size: 28px; color: var(--yel); }
.haps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.haps div { padding: 18px 18px 4px; background: #17151f; border: 2px solid #3b3848; }

/* シーン5：試写室 */
.split { display: grid; grid-template-columns: 1.15fr 1fr; gap: 34px; align-items: center; margin-bottom: 46px; }
.split.rev { grid-template-columns: .8fr 1.2fr; align-items: start; margin-bottom: 0; }
.split h3 { margin-top: 10px; }
.ranks { list-style: none; margin: 8px 0 0; padding: 0; counter-reset: r; }
.ranks li { display: flex; justify-content: space-between; gap: 10px; padding: 8px 4px; border-bottom: 2px dashed rgba(28, 26, 46, .25); }
.ranks li b { font-family: var(--head); font-weight: 900; }
.ranks li span { color: var(--mute); font-weight: 700; }

/* シーン6：操作 */
.ctrl { display: grid; grid-template-columns: 1.15fr 1fr; gap: 26px; }
.ctrl > div { padding: 18px 20px 8px; background: #17151f; border: 2px solid #3b3848; }
.ctrl dl { margin: 0; }
.ctrl dl div { display: grid; grid-template-columns: 9.5em 1fr; gap: 10px; padding: 8px 0; border-top: 1px solid #2c2a36; }
.ctrl dt { font-family: var(--head); font-weight: 900; color: var(--yel); }
.ctrl dd { margin: 0; font-size: 15px; }

/* シーン7：コツ */
.tips { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; }
.tips li { padding: 16px 20px; background: #fff8e8; border: 3px solid var(--ink); font-size: 15px; }
.tips b { display: block; font-family: var(--head); font-weight: 900; font-size: 18px; margin-bottom: 4px; }

/* よくある質問 */
.faq { margin: 0; display: grid; gap: 12px; max-width: 820px; }
.faq div { padding: 16px 20px; background: #17151f; border: 2px solid #3b3848; }
.faq dt { font-family: var(--head); font-weight: 900; font-size: 17px; color: var(--yel); }
.faq dd { margin: 6px 0 0; font-size: 15px; }

/* 最後：撮影チームと遊ぶボタン */
.symbols { position: absolute; width: 0; height: 0; overflow: hidden; }
.last { position: relative; padding: 76px 0 70px; text-align: center; background: var(--night); }
.last .wrap { display: flex; flex-direction: column; align-items: center; }
.crew { margin: 0 0 6px; font-size: 13px; letter-spacing: .3em; color: #b7aec4; }
.team { width: min(70vw, 300px); height: auto; color: var(--paper); margin-bottom: 22px; overflow: visible; }
.last p:not(.crew) { font-size: 17px; }

footer { padding: 26px 20px max(30px, env(safe-area-inset-bottom)); text-align: center; font-size: 13px; color: #b7aec4; border-top: 2px solid #2a2834; }
footer a { color: #b7aec4; }
footer .sep { margin: 0 .5em; opacity: .6; }
footer small { display: block; margin-top: 6px; font-size: 12px; opacity: .8; }

@media (max-width: 860px) {
  .steps, .cams, .haps { grid-template-columns: 1fr; }
  .series, .duel, .split, .split.rev, .ctrl, .tips { grid-template-columns: 1fr; }
  dl.film { grid-template-columns: 1fr; }
  dl.film div { border-left: 0; border-top: 2px solid #3b3848; }
  dl.film div:first-child { border-top: 0; }
  .paper { max-width: 420px; margin: 0 auto; }
  .sec { padding: 60px 0 66px; }
}
@media (max-width: 480px) {
  .brand { font-size: 13px; }
  .ctrl dl div { grid-template-columns: 7.5em 1fr; }
  .cta { min-width: 0; width: 100%; }
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

/* ─ ヒーローのロゴ：ゲームのタイトルと同じ登場の動き（css/style.css から写した。変えるときは両方） ─ */
/* image/logo.svg を1文字ずつ組み直したもの。
   上の段は赤い帯に白抜き、下の段は黄から橙の2色。1文字ずつ落ちてきて着地で揺れる ─ */
.vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
h1.logo { margin: 0 auto 10px; width: min(92%, 620px); line-height: 0; animation: lgShake .62s steps(10) 1.28s both; }
.logoSvg { width: 100%; height: auto; overflow: visible; }
.logoSvg .mv { transform-box: fill-box; transform-origin: 50% 100%; }
.logoSvg .ext { fill: #7a2418; stroke: #1c1a2e; stroke-width: 14; stroke-linejoin: round; transform: translate(9px, 11px); }
.logoSvg .out { fill: #1c1a2e; stroke: #1c1a2e; stroke-width: 15; stroke-linejoin: round; }
.logoSvg .row.b .face { fill: url(#lgFaceB); }
.logoSvg .row.t .face { fill: url(#lgFaceT); }
.logoSvg .row.t .ext { fill: #1c1a2e; }
.logoSvg .band polygon { fill: #d8452f; stroke: #1c1a2e; stroke-width: 9; stroke-linejoin: round; }
.logoSvg .band { transform-box: fill-box; transform-origin: 0 50%; animation: lgBand .32s steps(5) .1s both; }
.logoSvg .row.t .mv { animation: lgPop .4s steps(6) both; animation-delay: calc(.32s + var(--i) * .08s); }
.logoSvg .row.b .mv { animation: lgStomp .46s steps(7) both; animation-delay: calc(.86s + var(--i) * .12s); }
/* 「！」だけは着地のあとも時々ぐらつく */
.logoSvg .row.t .ch:last-child { transform-box: fill-box; transform-origin: 50% 100%; animation: lgWobble 3.6s steps(1) 2.2s infinite; }
.logoSvg .glint .bar { fill: #fff; opacity: .75; animation: lgGlint 5s steps(14) 2.4s infinite; }
@keyframes lgBand { from { transform: scaleX(0); } to { transform: none; } }
@keyframes lgPop { 0% { transform: translateY(-60px) scale(.3); opacity: 0; } 55% { transform: translateY(6px) scale(1.18, .82); opacity: 1; } 80% { transform: scale(.95, 1.06); } 100% { transform: none; opacity: 1; } }
@keyframes lgStomp { 0% { transform: translateY(-420px); opacity: 0; } 50% { transform: translateY(0) scale(1.22, .74); opacity: 1; } 72% { transform: translateY(-14px) scale(.94, 1.08); } 100% { transform: none; opacity: 1; } }
@keyframes lgShake { 0%, 100% { transform: none; } 10% { transform: translate(3px, 2px); } 20% { transform: translate(-3px, -1px); } 30% { transform: translate(2px, -2px); } 40% { transform: translate(-2px, 2px); } 50% { transform: translate(3px, 1px); } 60% { transform: translate(-2px, -2px); } 70% { transform: translate(2px, 1px); } 80% { transform: translate(-1px, 1px); } 90% { transform: translate(1px, 0); } }
@keyframes lgWobble { 0%, 88%, 100% { transform: none; } 90% { transform: rotate(-9deg); } 93% { transform: rotate(7deg); } 96% { transform: rotate(-3deg); } }
@keyframes lgGlint { 0% { transform: skewX(-20deg) translateX(0); } 22%, 100% { transform: skewX(-20deg) translateX(1180px); } }
@media (prefers-reduced-motion: reduce) { h1.logo, h1.logo .mv, h1.logo .band, h1.logo .ch, h1.logo .bar { animation: none !important; } }