/* 紹介ページ・入口ページの見た目（ゲーム本体とは別。多言語で共通）。
   2026-10-13 に、依頼主の参考（任天堂のゲーム紹介ページ）に寄せて作り直した。
     ・全面の絵の見出し ＋ 画面の端まで使う「絵の帯」
     ・金の飾り罫を添えた見出し
     ・明るい羊皮紙の段と、暗い段を交互に
     ・右下に追いかけてくる「遊ぶ」ボタン
   文章が主役なので、読みやすさは落とさない。絵はゲームのものを使い回す。 */

:root {
  --ink: #1d1a26;
  --ink2: #5a5466;
  --paper: #fbf7ef;
  --band: #15121f;
  --band2: #1e1930;
  --gold: #c9a227;
  --gold-l: #ffd97a;
  --line: rgba(29,26,38,.14);
  --line-d: rgba(255,255,255,.16);
}
* { box-sizing: border-box }
html { scroll-behavior: smooth }
body {
  margin: 0; background: var(--paper); color: var(--ink);
  font-family: 'Hiragino Mincho ProN', 'Yu Mincho', serif;
  line-height: 1.95; font-size: 16.5px; text-size-adjust: 100%;
}
img { max-width: 100%; height: auto; display: block }
a { color: #8a5a10 }
.wrap { width: min(100% - 36px, 900px); margin-inline: auto }
.sans { font-family: 'Hiragino Sans', 'Noto Sans JP', system-ui, sans-serif }

/* ---- 見出しの絵（全面） ---- */
.hero { position: relative; color: #fff; text-align: center; padding: 10vh 0 11vh; overflow: hidden;
  background: #15121f center / cover no-repeat }
.hero::after { content: ''; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, rgba(10,8,18,.45) 0%, rgba(10,8,18,.15) 35%, rgba(10,8,18,.85) 100%) }
.hero > * { position: relative; z-index: 1 }
.hero h1 { margin: 0; font-size: 34px; line-height: 1.55; letter-spacing: .06em; font-weight: 600 }
/* 入口ページの見出しは文字（ゲームの紹介ページは題字の絵）。小さい字は上に1行で置く */
.hero h1 small { display: block; font-family: 'Hiragino Sans', 'Noto Sans JP', system-ui, sans-serif;
  font-size: 13px; font-weight: 400; letter-spacing: .22em; opacity: .85; margin-bottom: 16px }
.hero h1 img { width: min(76vw, 520px); margin-inline: auto; filter: drop-shadow(0 8px 20px rgba(0,0,0,.6)) }
.hero p { margin: 20px auto 0; max-width: 32em; font-size: 19px; text-shadow: 0 2px 10px rgba(0,0,0,.9) }
.hero .sub { font-size: 14.5px; opacity: .95; letter-spacing: .04em }

/* ---- ボタン ---- */
.btns { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; margin-top: 30px }
.btn { display: inline-block; padding: 15px 32px; border-radius: 999px; font-weight: 700; text-decoration: none;
  font-family: 'Hiragino Sans', 'Noto Sans JP', system-ui, sans-serif; font-size: 16px; letter-spacing: .04em;
  background: linear-gradient(#ffdf90, #d9a128); color: #3a2a16;
  box-shadow: 0 4px 0 #8a6412, 0 10px 26px rgba(0,0,0,.4);
  transition: background .18s, color .18s, box-shadow .18s, transform .1s }
.btn:hover { background: linear-gradient(#fff0c0, #e8b237) }
.btn:active { transform: translateY(2px); box-shadow: 0 2px 0 #8a6412 }
/* 2つめのボタン。**カーソルを合わせると金になる**（依頼主の指示 2026-10-13） */
.btn.sub { background: rgba(255,255,255,.10); color: #fff; box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.6) }
.btn.sub:hover { background: linear-gradient(#ffdf90, #d9a128); color: #3a2a16;
  box-shadow: 0 4px 0 #8a6412, 0 10px 26px rgba(0,0,0,.4) }
.btn.dark { background: rgba(29,26,38,.06); color: #3a2a16; box-shadow: inset 0 0 0 1.5px rgba(29,26,38,.3) }
.btn.dark:hover { background: linear-gradient(#ffdf90, #d9a128); box-shadow: 0 4px 0 #8a6412, 0 8px 20px rgba(0,0,0,.25) }

/* 右下に追いかけてくるボタン（画面を下げると出る） */
.cta { position: fixed; right: 18px; bottom: 18px; z-index: 50; opacity: 0; transform: translateY(14px);
  transition: opacity .3s, transform .3s; pointer-events: none }
.cta.on { opacity: 1; transform: none; pointer-events: auto }
@media (max-width: 560px) { .cta { right: 12px; bottom: 12px } .cta .btn { padding: 13px 22px; font-size: 15px } }

/* ---- 段 ---- */
section { padding: 72px 0 }
.band { background: var(--band); color: #ece7f5 }
.band a { color: var(--gold-l) }
.band .card { background: rgba(255,255,255,.055); border-color: var(--line-d); color: #ece7f5 }
.band table th, .band table td { border-color: var(--line-d) }
.band th { color: #bdb5cc }
.band .lead, .band .note { color: #b7afc6 }
.band details { border-color: var(--line-d) }

/* 飾り罫つきの見出し */
h2 { font-size: 27px; margin: 0 0 10px; letter-spacing: .06em; text-align: center; font-weight: 600; word-break: keep-all }
h2 .orn { display: inline-flex; align-items: center; gap: 16px }
h2 .orn::before, h2 .orn::after { content: ''; width: 54px; height: 1px; background: var(--gold) }
h2 .orn::before { background: linear-gradient(90deg, transparent, var(--gold)) }
h2 .orn::after { background: linear-gradient(90deg, var(--gold), transparent) }
.lead { margin: 0 auto 34px; color: var(--ink2); text-align: center; max-width: 36em; word-break: keep-all }
h3 { font-size: 18px; margin: 26px 0 8px }
p { margin: 0 0 16px }
.note { font-size: 13.5px; color: var(--ink2); line-height: 1.85 }

/* ---- 絵の帯（画面の端まで） ---- */
.artband { position: relative; min-height: 52vh; display: flex; align-items: center; color: #fff;
  background: #15121f center / cover no-repeat; padding: 56px 0 }
.artband::before { content: ''; position: absolute; inset: 0;
  background: linear-gradient(100deg, rgba(8,6,14,.94) 0%, rgba(8,6,14,.82) 45%, rgba(8,6,14,.5) 100%) }
.artband .wrap { position: relative; z-index: 1 }
.artband h2, .artband .lead { text-align: left; margin-left: 0 }
.artband .lead { color: #ded8ea; text-shadow: 0 2px 10px rgba(0,0,0,.9) }
.artband h2 { text-shadow: 0 2px 12px rgba(0,0,0,.9) }
.artband h2 .orn::before { display: none }
.artband p { text-shadow: 0 2px 10px rgba(0,0,0,.8); max-width: 30em }

/* ---- 札 ---- */
.cards { display: grid; gap: 18px; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)) }
.card { background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: 22px 24px }
.card h3 { margin-top: 0 }
.card p:last-child { margin-bottom: 0 }

table { width: 100%; border-collapse: collapse; font-size: 15.5px }
th, td { text-align: left; padding: 12px 10px; border-bottom: 1px solid var(--line); vertical-align: top }
th { white-space: nowrap; color: var(--ink2); font-weight: 700 }
.scroll { overflow-x: auto }

.price { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)) }
.price .card { text-align: center }
.price .yen { font-size: 30px; font-weight: 800; color: var(--gold); font-family: 'Hiragino Sans', system-ui, sans-serif }
.free { background: #fffbe9; border-color: #e3cf8a }
.band .free { background: rgba(255,207,74,.1); border-color: rgba(255,207,74,.4) }

/* 画面写真は額に入れる */
.shots { display: grid; gap: 22px; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); margin-top: 26px }
.shots figure { margin: 0 }
.shots img { border-radius: 10px; box-shadow: 0 0 0 1px rgba(201,162,39,.5), 0 14px 34px rgba(0,0,0,.5) }
.shots figcaption { font-size: 13.5px; color: #b7afc6; margin-top: 10px; text-align: center }

details { border-bottom: 1px solid var(--line); padding: 14px 0 }
details summary { cursor: pointer; font-weight: 700 }
details[open] summary { color: var(--gold) }
details p { margin: 12px 0 0 }

footer { background: #0e0c16; color: #b9b3c6; padding: 40px 0; font-size: 14px; text-align: center }
footer a { color: var(--gold-l) }
footer .wrap > * + * { margin-top: 10px }
.langs { display: flex; gap: 12px; justify-content: center; padding: 16px 0 0; font-size: 13.5px; color: #8b8498 }

/* 下から浮かび上がる（控えめに） */
.rise { opacity: 0; transform: translateY(18px); transition: opacity .7s ease, transform .7s ease }
.rise.seen { opacity: 1; transform: none }
@media (prefers-reduced-motion: reduce) { .rise { opacity: 1; transform: none; transition: none } }

@media (max-width: 560px) {
  body { font-size: 16px }
  section { padding: 52px 0 }
  .hero { padding: 7vh 0 8vh }
  .hero p { font-size: 17px }
  h2 { font-size: 22px }
  .hero h1 { font-size: 25px }
  h2 .orn::before, h2 .orn::after { width: 28px }
  .artband { min-height: 42vh }
}

/* ---- ゲームの札（入口ページ） ---- */
.games { display: grid; gap: 24px; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)) }
.game { background: #fff; border: 1px solid var(--line); border-radius: 16px; overflow: hidden;
  box-shadow: 0 10px 30px rgba(0,0,0,.08); transition: transform .2s, box-shadow .2s }
.game:hover { transform: translateY(-3px); box-shadow: 0 16px 40px rgba(0,0,0,.14) }
.game img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover }
.game .body { padding: 22px 24px 26px }
.game h3 { margin: 0 0 8px; font-size: 20px }
.game .tags { font-size: 13px; color: var(--ink2); margin: 0 0 12px; letter-spacing: .04em }
.game .btns { justify-content: flex-start; margin-top: 18px }
.game .btn { padding: 12px 24px; font-size: 15px }
.soon { opacity: .7 }

/* ===== 2026-10-13 の作り直し（依頼主の指示：任天堂のゲーム紹介ページを参考に、かっこよく・わかりやすく） ===== */

/* ---- 上に貼りつく帯（どこにいても行き先と「遊ぶ」が見える） ---- */
.nav { position: sticky; top: 0; z-index: 60; background: rgba(13,11,22,.92); backdrop-filter: blur(8px);
  border-bottom: 1px solid rgba(255,255,255,.1) }
.navIn { display: flex; align-items: center; gap: 18px; height: 56px }
.navLogo { color: #fff; text-decoration: none; font-weight: 700; letter-spacing: .06em; white-space: nowrap; font-size: 15px;
  font-family: 'Hiragino Sans', 'Noto Sans JP', system-ui, sans-serif }
.navLinks { display: flex; gap: 20px; flex: 1 1 auto; overflow-x: auto; scrollbar-width: none;
  font-family: 'Hiragino Sans', 'Noto Sans JP', system-ui, sans-serif; font-size: 14px }
.navLinks::-webkit-scrollbar { display: none }
.navLinks a { color: #d6d0e2; text-decoration: none; white-space: nowrap; padding: 4px 0; border-bottom: 2px solid transparent }
.navLinks a:hover { color: #fff; border-bottom-color: var(--gold) }
.btn.small { padding: 9px 18px; font-size: 14px; box-shadow: 0 3px 0 #8a6412; white-space: nowrap }
section[id] { scroll-margin-top: 66px }
@media (max-width: 760px) { .navLogo { display: none } .navIn { gap: 12px } .navIn .btn.small { padding: 8px 13px; font-size: 13px } }

/* ---- 見出しの絵に添える札（無料・買い切り・ブラウザ） ---- */
.chips { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; margin-top: 22px;
  font-family: 'Hiragino Sans', 'Noto Sans JP', system-ui, sans-serif; font-size: 13px; letter-spacing: .04em }
.chips span { padding: 6px 14px; border-radius: 999px; background: rgba(255,255,255,.12);
  border: 1px solid rgba(255,207,74,.55); color: #ffe9b0; backdrop-filter: blur(4px) }

/* ---- 絵と文を交互に並べる段（任天堂のページの作り） ---- */
.feature { padding: 64px 0 }
.featRow { display: grid; gap: 36px; grid-template-columns: 1fr 1fr; align-items: center }
.featRow.rev .featArt { order: -1 }
.featText h2, .featText .lead { text-align: left; margin-left: 0 }
.featText h2 .orn::before { display: none }
.featText .lead { margin-bottom: 18px }
.featArt { margin: 0 }
.featArt img { border-radius: 14px; box-shadow: 0 0 0 1px rgba(201,162,39,.45), 0 18px 40px rgba(0,0,0,.35) }
.featArt figcaption { font-size: 13px; color: var(--ink2); margin-top: 10px; text-align: center }
.band .featArt figcaption { color: #b7afc6 }
@media (max-width: 760px) {
  .feature { padding: 48px 0 }
  .featRow { grid-template-columns: 1fr; gap: 22px }
  .featRow.rev .featArt { order: 0 }
}

/* ---- つなぎかたの図（SVG。画像を読み込まずに、どの幅でもくっきり出る） ---- */
.wire { background: #fff; border: 1px solid var(--line); border-radius: 16px; padding: 18px 18px 20px }
.band .wire { background: rgba(255,255,255,.055); border-color: var(--line-d) }
.wire svg { width: 100%; height: auto; display: block }
.wire h3 { margin: 10px 0 6px; font-size: 17px }
.wire p { margin: 0 }
.wireNote { font-size: 13.5px; color: var(--ink2); margin: 18px 0 0; text-align: center }
.band .wireNote { color: #b7afc6 }

/* 文の切れ目でだけ折り返す（文の途中で改行すると読みにくいため）。
   かたまり自体が1行に入らないときは、ふつうに折り返す（はみ出さないように） */
.say { display: inline-block; word-break: normal }

/* つなぎかたの図の中の字 */
.wS { font: 600 13px 'Hiragino Sans', 'Noto Sans JP', system-ui, sans-serif; fill: #5a5466 }
.band .wS { fill: #b7afc6 }

/* 対応表の○✕ */
.ok { color: #1f7a4d; font-weight: 700 }
.ng { color: #b4472f; font-weight: 700 }
.band .ok { color: #7fe0a8 }
.band .ng { color: #ff9b86 }
td .sub, th .sub { display: block; font-size: 12.5px; color: var(--ink2); font-weight: 400; margin-top: 2px }
.band td .sub, .band th .sub { color: #b7afc6 }