:root {
  --line-green: #06c755;        /* 装飾・枠・ボタン背景・アクセント用 */
  --line-green-text: #078036;   /* 文字用（白に対し 5.06:1 = WCAG AA 達成）。#416 で #058a3d
                                   にしたが実測 4.46:1 で 4.5:1 に僅かに届かず AA 未達だったため、
                                   ブランド(--line-green)に最も近い範囲で 4.5:1 を満たす値に更新（#417）。
                                   --line-green を文字色に使うと 2.26:1 で AA 未達のため分離している */
  --night: #1b2a4a;
  --max-width: 1100px;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

body {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  background: #f5f5f5;
  color: #333;
  line-height: 1.6;
}

h1, h2, h3 { line-height: 1.4; }

/* ---------- ヒーロー ---------- */
.hero {
  text-align: center;
  padding: 40px 16px;
  background: linear-gradient(180deg, var(--night) 0%, #0f1b33 100%);
  color: #fff;
}

/* 参考デザイン: 全幅の濃紺の帯の中で、左に画像（大きく）、右にQRカードを横並びにする。
   ヒーローだけで画面の上半分を占める堂々とした構成。 */
.hero__inner {
  max-width: var(--max-width);
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 40px;
}

.hero__left {
  flex: 1 1 auto;
  max-width: 650px;
  text-align: center;
}

.hero__right { flex: 0 0 auto; }

@media (max-width: 899px) {
  .hero__inner { flex-direction: column; gap: 24px; }
  .hero__left { max-width: 100%; }
}

/* 参考画像から切り出さず title-logo-night.webp（1024x576）をそのまま使う。
   全幅1200pxにするとアップスケールでぼけるため600〜700px程度に留める（設計書6章）。 */
.hero__image {
  display: block;
  width: 100%;
  max-width: 650px;
  height: auto;
  margin: 0 auto 20px;
  border-radius: 12px;
}

.hero h1 {
  font-size: 1.4rem;
}

.hero h1 strong {
  font-size: 2.3rem;
  color: #ffd633;
}

/* 特徴バッジ（①）。詳細は左カラムの特徴カードで説明するので、ここは要点だけの
   小さなチップで一覧性を優先する。 */
.hero__badges {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  margin-top: 16px;
}

.hero__badges li {
  font-size: 0.8rem;
  font-weight: bold;
  padding: 6px 14px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.35);
}

/* #447: カードをLINEブランドカラーの帯にし、文字を白で抜く。
   QRだけは #452 で白地・黒モジュール（qr.svg）に戻した。反転QRはQR規格（暗いモジュール／
   明るい背景）から外れ、iOS標準カメラ等で読み取れない端末が出るため。 */
.qr-card {
  text-align: center;
  padding: 28px 24px;
  background: var(--line-green);
  border-radius: 16px;
  max-width: 360px;
  margin: 0 auto;
  color: #fff;
}

/* CTAをメリット訴求に（③）。QRの上に「無料で遊べる」というユーザー側のメリットを
   最初に見せ、読み取り手順の説明はその下に格下げする。 */
.qr-card__cta {
  font-weight: bold;
  font-size: 1.15rem;
  color: #fff;
  margin-bottom: 6px;
}

.qr-card__lead { font-size: 0.9rem; color: #fff; margin-bottom: 16px; }
.qr-card__title { font-weight: bold; font-size: 1.1rem; margin-bottom: 12px; }
.qr-card img { display: block; margin: 0 auto 12px; }

/* QRを主役に（②）。表示サイズを一回り大きくし、周囲の余白も増やす。
   width/height属性(240x240)は本来サイズのままなので、CSSの拡大表示で
   ぼやけない解像度は確保できている（QRの元画像は高解像度SVG）。 */
/* #452: QRは白地・黒モジュールに戻す（反転QRは規格外で読み取れない端末があるため）。
   カードは緑のままなので、QRを白パネルとして置く。padding分の白がクワイエットゾーンの
   外側にさらに乗るので、緑地がQRに接して読み取り精度を下げることがない。 */
.qr-card__img--main {
  width: 280px;
  height: 280px;
  max-width: 100%;
  margin-bottom: 16px;
  background: #fff;
  padding: 10px;
  border-radius: 12px;
}

.qr-card__note { font-size: 0.8rem; color: #fff; margin-bottom: 16px; }

/* 誤判定時の唯一の逃げ道。CSSで隠すのは可だがDOMから消してはならない（設計書5.2）。
   本物のPCには冗長なので控えめな見た目にする（小さい・グレー）が、
   PC誤判定されたスマホの導線としては機能させる（ユーザー要望 2026-07-18）。 */
.qr-card__fallback {
  display: inline-block;
  margin-bottom: 12px;
  font-size: 0.72rem;
  color: #fff;
  text-decoration: underline;
}

/* 既定（PC・JS無効時を含む）: QRを主役にし、「LINEで開く」ボタンは出さない（display:none）。
   QR下の qr-card__fallback は見せたままにする。
   スマホがPCと誤判定されたとき、これが唯一の導線になる（設計書 5.2）。
   #447でカード自体がLINEグリーンになったため、ボタンは同化しないよう白地に緑文字で抜く
   （白背景に --line-green-text で 4.46:1 を確保する。緑地に緑ボタンだと視認できない）。 */
.btn-line {
  display: none;
  padding: 14px 28px;
  background: #fff;
  color: var(--line-green-text);
  font-weight: bold;
  text-decoration: none;
  border-radius: 8px;
}

/* スマホ: ボタンを主役にし、QR一式と「PCでご覧の方へ」を下げる。
   qr-card__fallback はボタンと遷移先が同じで重複するため隠すが、
   DOMからは消さない（E2Eが toBeAttached で守っている） */
.is-mobile .btn-line { display: inline-block; }
.is-mobile .qr-card img,
.is-mobile .qr-card__lead,
.is-mobile .qr-card__note,
.is-mobile .qr-card__fallback,
.is-mobile .pc-notice { display: none; }

/* ---------- 2カラムレイアウト ---------- */
main {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 32px 16px;
}

/* 参考デザインは右カラムが全体の3割強。左:右をおおよそ2:1にする */
.lp-columns {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 40px;
  align-items: start;
}

/* min-width:0 が無いと、横スクロールの人気ゲーム(.game-scroll)などの
   min-content幅がグリッドトラックを押し広げ、2fr:1frの比率が崩れる
   （グリッドアイテムの既定 min-width は auto=min-content のため） */
.lp-col { display: flex; flex-direction: column; gap: 40px; min-width: 0; }

/* CTA(.cta)は.lp-colの外（.lp-columns直下）に置かれた3つ目のグリッドアイテム。
   auto-placementに任せると「2列とも埋まっている行には置けない」判定でCTAより先に
   右カラムが2行目に押し出されてしまうため、3アイテム全てにgrid-column/grid-rowを
   明示し、PCでは 1行目=左カラム/右カラムの横並び、2行目=CTAの全幅、で確定させる。 */
.lp-col--left { grid-column: 1; grid-row: 1; }
.lp-col--right { grid-column: 2; grid-row: 1; }
/* CTAはグリッドの3つ目のアイテム。PCは全幅で2行目（左右カラムの下の帯）。この配置を
   .cta の見た目定義（下部）から分離してここに集約する。分離していると、下部の .cta が
   ソース順で後になり、モバイル用 @media(max-width:899px) の grid-row:3 を上書きして
   CTAが末尾に来なくなるため（#417）。 */
.cta { grid-column: 1 / -1; grid-row: 2; }

/* PCでは2カラム、スマホは縦積み（純粋なレイアウトの都合なので幅で切り替える） */
@media (max-width: 899px) {
  .lp-columns { grid-template-columns: 1fr; }
  .lp-col { gap: 32px; }

  /* 1カラムになるため grid-row で積み順を制御する。
     Codexレビュー: FAQ等（右カラム）を読み終えた末尾がCTAで終わるほうが離脱を防げるため、
     モバイルでは 左カラム → 右カラム(遊び方/便利/FAQ) → CTA の順にする
     （PCは上の .lp-col--left/right の grid-row:1 のまま横並び＋CTA全幅で不変）。 */
  .lp-col--left { grid-column: 1; grid-row: 1; }
  .lp-col--right { grid-column: 1; grid-row: 2; }
  .cta { grid-column: 1; grid-row: 3; }
}

main section h2 {
  font-size: 1.2rem;
  margin-bottom: 16px;
  padding-bottom: 8px;
  border-bottom: 3px solid var(--line-green);
  display: inline-block;
}

/* ---------- 特徴4カード ---------- */
.feature-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
}

.feature-card {
  background: #fff;
  border-radius: 12px;
  padding: 20px 12px;
  text-align: center;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
}

.feature-icon {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 12px;
  color: #fff;
}

.feature-icon--purple { background: #8b5cf6; }
.feature-icon--blue { background: #3b82f6; }
.feature-icon--pink { background: #ec4899; }
.feature-icon--yellow { background: #f59e0b; }

.feature-card h3 { font-size: 0.95rem; margin-bottom: 6px; }
.feature-card p { font-size: 0.8rem; color: #666; }

/* ---------- 人気のゲーム（横スクロール） ---------- */
.game-scroll {
  display: flex;
  gap: 16px;
  overflow-x: auto;
  padding-bottom: 8px;
  -webkit-overflow-scrolling: touch;
}

/* ゲームカードを大きく（④）。flex-basisを広げ、余白も少し増やす。 */
.game-card {
  flex: 0 0 172px;
  background: #fff;
  border-radius: 14px;
  padding: 14px;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
}

.game-card__thumb { position: relative; margin-bottom: 8px; }

.game-card img {
  width: 100%;
  height: auto;
  aspect-ratio: 1 / 1;
  border-radius: 8px;
  display: block;
  object-fit: cover;
}

/* バッジは実データで裏付けられるものだけ（★評価は使わない）。
   人気No.1＝実プレイ数最多の1本のみ、NEW＝実際の新着1本のみ（設計上の制約）。 */
.game-badge {
  position: absolute;
  top: 6px;
  font-size: 0.65rem;
  font-weight: bold;
  padding: 3px 8px;
  border-radius: 999px;
  color: #fff;
  z-index: 1;
}
.game-badge--rank { left: 6px; background: var(--line-green-text); }
.game-badge--new { right: 6px; background: #ff5252; }

/* モバイル(≤899px)は横スクロール。カード幅を画面比(42vw)にすることで2枚目以降が必ず画面内に
   覗き、スクロール可能なことを視覚的に示す（Codex: 見切れに気づきにくい）。右端にも余白を作る。
   実測: 390px幅で2枚目が約160px（ほぼ全体）覗き、3枚目以降がスクロール対象になる。 */
@media (max-width: 899px) {
  .game-card { flex: 0 0 42vw; max-width: 172px; }
  .game-scroll { padding-right: 24px; }
}

/* PCでは5枚目が横スクロールの途中で見切れて壊れて見えるため（矢印等の手がかりが無い）、
   min-width:900px では横スクロールをやめて5列グリッドに切り替え、5枚が収まるようにする。 */
@media (min-width: 900px) {
  .game-scroll {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    overflow-x: visible;
  }
  .game-card { min-width: 0; }
}

.game-card__title { font-size: 0.98rem; font-weight: bold; margin-bottom: 4px; }

/* ジャンルチップはCSSで描く（設計書 4） */
.genre-chip {
  display: inline-block;
  font-size: 0.7rem;
  padding: 2px 10px;
  border-radius: 999px;
  margin-bottom: 6px;
}
.genre-chip--sports { background: #e0f2fe; color: #0369a1; }
.genre-chip--action { background: #fee2e2; color: #b91c1c; }
.genre-chip--puzzle { background: #ede9fe; color: #6d28d9; }

.game-card__desc { font-size: 0.8rem; color: #666; }

/* 数字で安心感（⑧⑪）。★評価の代わりに実プレイ回数を出す。 */
.game-card__plays {
  font-size: 0.8rem;
  font-weight: bold;
  color: var(--line-green-text);
  margin-top: 4px;
}

/* ---------- 画面イメージ ---------- */
/* 参考デザインは4枚が横1列（各枠は小さめ）。PCでは1列、スマホは2x2に戻す。
   スクショを大きく・余白を減らす（⑤）ため、gapを詰めて画像自体の表示幅を稼ぐ。 */
.screen-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
}

@media (max-width: 899px) {
  .screen-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
}

/* スマホの枠（角丸・ベゼル）はCSSで描く。画像には中身だけを入れる（設計書6章）。
   枠を細くして画像面積を広げる（⑤）。 */
.phone-frame {
  border: 3px solid var(--night);
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

@media (max-width: 899px) {
  .phone-frame { border-width: 4px; border-radius: 20px; }
}

.phone-frame img { width: 100%; height: auto; display: block; }

.screen-card__label {
  text-align: center;
  margin-top: 8px;
  font-size: 0.85rem;
  color: #666;
}

/* ---------- CTA（QR再掲） ---------- */
/* 参考デザインはCTAが左右カラムをまたぐ全幅の帯。.cta は .lp-col の外（.lp-columns 直下）の
   グリッドアイテムなので、grid-column:1/-1 で常に全カラム分の幅（グリッドの列幅+gapの合計）に
   自動で広がる。以前は .lp-col--left（2fr）のflexアイテムとして calc(150%+40px) という
   ハードコードで右カラム分を後乗せしていたため、grid-template-columns や gap を変えると
   静かにズレる構造だったが、grid-column:1/-1 なら比率やgapが変わっても自動追従する。 */
/* 最後のCTAを薄いLINEグリーンの帯に（⑩）。他セクションの白背景と対比させて
   ページ末尾の「今すぐ始めよう」を目立たせる。 */
/* グリッド配置（grid-column:1/-1・PC grid-row:2）は上の .lp-col 配置ブロックに集約した
   （#417: ここに残すとソース順でモバイル @media の grid-row:3 を上書きしてしまう）。 */
.cta {
  text-align: center;
  background: rgba(6, 199, 85, 0.08);
  border-radius: 16px;
  padding: 32px 16px;
}
.cta__sub { font-size: 0.9rem; color: #555; margin-bottom: 20px; }
.qr-card--cta { max-width: 360px; box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1); }

/* ---------- 遊び方3ステップ ---------- */
/* 矢印を入れる分（⑥）gapを広げ、liを position:relative にして
   ::after の矢印をgapの中に絶対配置する。 */
.steps { list-style: none; display: flex; flex-direction: column; gap: 28px; }

.steps li {
  position: relative;
  display: flex;
  align-items: center;
  gap: 14px;
  background: #fff;
  border-radius: 12px;
  padding: 16px;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
}

/* 遊び方の流れを見せる矢印（⑥）。装飾目的なので aria-hidden 相当に扱われるよう
   読み上げに実害の無いシンプルな記号のみを使う。 */
.steps li:not(:last-child)::after {
  content: '↓';
  position: absolute;
  left: 30px;
  bottom: -24px;
  font-size: 1.2rem;
  line-height: 1;
  font-weight: bold;
  color: var(--line-green);
}

.steps__num {
  flex: 0 0 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--line-green-text);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: bold;
}

.steps h3 { font-size: 1rem; }

/* ---------- LINEだから便利（⑦） ---------- */
.line-benefits {
  background: rgba(6, 199, 85, 0.08);
  border-radius: 12px;
  padding: 16px;
}
.line-benefits__list {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
}
.line-benefits__list li {
  font-size: 0.85rem;
  font-weight: bold;
  color: var(--night);
  padding-left: 20px;
  position: relative;
}
.line-benefits__list li::before {
  content: '✓';
  position: absolute;
  left: 0;
  color: var(--line-green-text);
}

/* ---------- PCでご覧の方へ ---------- */
.pc-notice {
  background: #fff3cd;
  border: 1px solid #ffe69c;
  border-radius: 12px;
  padding: 16px;
}
.pc-notice h2 { border-bottom: none; padding-bottom: 0; }
.pc-notice p { font-size: 0.9rem; }

/* ---------- FAQ（3問すべて展開） ---------- */
.faq-item {
  background: #fff;
  border-radius: 12px;
  padding: 16px;
  margin-bottom: 12px;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
}
.faq-item:last-child { margin-bottom: 0; }
.faq-item h3 { font-size: 0.95rem; margin-bottom: 6px; }
.faq-item p { font-size: 0.85rem; color: #555; }

/* ---------- フッター ---------- */
.footer {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 40px 16px;
  text-align: center;
  color: #666;
}

.footer__logo { display: block; margin: 0 auto 24px; width: 160px; height: auto; }

/* footer__top / footer__blocks はモバイルでは display:contents で存在を消し、
   子要素（ロゴ・3ブロック）を .footer に直接ぶら下げた状態と同じ見た目・順序にする
   （既存のモバイル表示を無変更のまま維持するため）。 */
.footer__top, .footer__blocks { display: contents; }

.footer__block { max-width: 500px; margin: 0 auto 24px; text-align: left; }
.footer__block h2 { font-size: 1rem; margin-bottom: 8px; }
.footer__block p, .footer__block ul { font-size: 0.85rem; }
.footer__block ul { padding-left: 20px; }

/* 参考デザインは「みんなでミニゲームとは」「安心・安全への取り組み」「運営会社」の
   3ブロックが横並びで、右端にロゴ。PCのみ .footer__top を実体化してflex行にする。 */
@media (min-width: 900px) {
  .footer__top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 40px;
    text-align: left;
    margin-bottom: 24px;
  }
  .footer__blocks {
    display: flex;
    flex: 1 1 auto;
    gap: 32px;
  }
  .footer__block {
    flex: 1 1 0;
    max-width: none;
    margin: 0;
  }
  .footer__logo {
    flex: 0 0 auto;
    margin: 0;
  }
}

.footer p { margin-bottom: 6px; font-size: 0.85rem; }
.footer a { color: var(--line-green-text); }

/* 遊び方ステップ1の文言をデバイスで出し分ける（Codexレビュー: モバイルは「LINEで開く」を
   押すのにQR前提の案内で矛盾していた）。既定はPC(QR)、is-mobileでモバイル(ボタン)を表示。 */
.step1-mobile { display: none; }
.is-mobile .step1-pc { display: none; }
.is-mobile .step1-mobile { display: inline; }