/* くじ手帳 静的サイト共通スタイル
 *
 * 【方針】
 * ・外部CDN・第三者スクリプトは使わない（S3+CloudFrontの静的配信のみ、
 *   追加コストゼロ・第三者へのアクセス送信ゼロ）。書体だけは同一オリジンから
 *   自前で配る（下の @font-face 参照）。JSは相変わらず一切使わない。
 * ・配色はAppの「Organic」デザインシステム
 *   （ios/LotteryApp/Support/OrganicTokens.swift）のトークンそのもの。
 *   暖かい生成り地＝背景 / テラコッタ＝強調 / 金＝当せん /
 *   セージ寄りの緑＝プラス収支 / 赤茶＝マイナス収支。
 *   ここで色を発明しない。App と Web で別の色を持たない。
 *   （以前は紺＋金の旧ブランドで、消えた ColorSemantics.swift を参照していた）
 * ・モバイルファースト。競合の既存サイトはPC前提で横スクロールが必要な作りが多く、
 *   スマホでの読みやすさがそのまま差になる想定。
 */

/* 【なぜ書体を自前で配るのか】
 * Appは丸ゴシックが顔なので、サイトだけ OS 標準ゴシックだと別物に見える。
 * かといって Google Fonts から読むと、訪問者の IP が第三者に渡る
 * （privacy.html で「第三者へのアクセス送信ゼロ」と約束している以上できない）。
 * よって woff2 を同一オリジンから配る。中身は index.html / guide / results の
 * 全21ページに実際に出る532字だけに絞ってある（各約80KB。元の ttf は 3.4MB）。
 *
 * 【url() は「このCSSファイル」からの相対パス】
 * HTML から見た相対パスではない。site.css は /assets/ にあるので "fonts/..." で
 * 正しく、"assets/fonts/..." と書くと /assets/assets/fonts/... を探して404になる。
 * 絶対パス "/assets/..." にしないのは、file:// で開いた時にシステムのルートを
 * 見に行ってしまうため（privacy.html で一度踏んでいる）。
 *
 * 【532字に無い文字は fallback に落ちる】
 * 後から本文に新しい漢字を足すと、その字だけ OS 標準ゴシックで出る。
 * 読めなくなるわけではないので許容する。気になったら subset を作り直す。
 */
@font-face {
  font-family: "M PLUS Rounded 1c";
  src: url("fonts/MPLUSRounded1c-Regular-site-subset.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  /* サブセットの取りこぼしや読み込み遅延で本文が消えないよう swap 固定 */
  font-display: swap;
}
@font-face {
  font-family: "M PLUS Rounded 1c";
  src: url("fonts/MPLUSRounded1c-Bold-site-subset.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

:root {
  /* --- 淡色地とその上の文字 --- */
  --bg: #F5EAD8;           /* 画面地（Organic.background） */
  --card: #F9F4ED;         /* 浮いた面（Organic.inset） */
  --line: #EBDDC5;         /* 面の輪郭（Organic.card）。淡い塗りとしても使う */
  --ink: #402310;          /* 本文（Organic.ink）。濃色地としても使う色そのもの */
  --ink-2: #645C50;        /* 補助テキスト（Organic.secondaryText） */

  /* --- 強調（テラコッタ） --- */
  --brand: #C67139;        /* Organic.accent。見出しなど「大きい文字」専用 */
  --brand-soft: #8C491A;   /* Organic.accentDeep。本文サイズのリンクはこちら
                              （accent は淡色地で3.0:1しか出ずAAに届かない） */

  /* --- 濃色地（--ink）の上に乗せるもの --- */
  --on-dark: #FFF8E6;      /* Organic.onInk */
  --on-dark-2: rgba(255, 248, 230, 0.82);  /* 同じ色の弱め。9.6:1 */
  --gold-on-dark: #E0B25E; /* Organic.goldOnDark。濃色地の上の金文字はこれ1色 */
  --inactive: #C0B6A5;     /* Organic.tabInactive。押せないボタンの地 */

  /* --- 意味色 --- */
  --win: #C0902F;          /* 金＝当せん（Organic.gold） */
  --win-ink: #8A6420;      /* 淡色地の上の金文字（Organic.goldText） */
  --win-bg: #F7E9CD;       /* 金のティント（Organic.goldTint） */
  --profit: #56633F;       /* プラス収支（Organic.accent2Deep） */
  --loss: #A8412C;         /* マイナス収支（Organic.loss） */

  --radius: 12px;
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: "M PLUS Rounded 1c", -apple-system, BlinkMacSystemFont, "Hiragino Sans",
    "Hiragino Kaku Gothic ProN", "Yu Gothic", "Noto Sans JP", Meiryo, sans-serif;
  font-size: 16px;
  line-height: 1.85;
  word-break: normal;
  overflow-wrap: anywhere;
}

.wrap { max-width: 760px; margin: 0 auto; padding: 0 16px; }

/* 本文中のリンク。淡色地の上では accent（3.0:1）ではAAに届かないので accentDeep。
   privacy.html / terms.html も同じ使い分けにしてある。 */
a { color: var(--brand-soft); }
a:hover { color: var(--brand); }

/* --- ヘッダー / フッター --- */
/* 濃色地は Organic.ink そのもの。「濃い茶色の面」と「本文の文字色」は
   App でも同じトークンなので、変数を2つに分けない（分けた瞬間に片方だけ直る）。 */
.site-header {
  background: var(--ink);
  color: var(--on-dark);
}
.site-header .wrap {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 18px;
  padding-top: 10px;
  padding-bottom: 10px;
}
.site-logo {
  color: var(--on-dark);
  font-weight: 700;
  font-size: 17px;
  text-decoration: none;
  letter-spacing: 0.04em;
}
.site-logo span { color: var(--gold-on-dark); }
.site-nav { display: flex; gap: 16px; margin-left: auto; font-size: 14px; }
.site-nav a { color: var(--on-dark-2); text-decoration: none; }
.site-nav a:hover { color: var(--on-dark); text-decoration: underline; }

.breadcrumb { font-size: 13px; color: var(--ink-2); margin: 16px 0 0; }
.breadcrumb a { color: var(--ink-2); }

.site-footer {
  margin-top: 56px;
  padding: 24px 0 40px;
  border-top: 1px solid var(--line);
  font-size: 13px;
  color: var(--ink-2);
}
.site-footer p { margin: 6px 0; }
.site-footer .footer-links { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 14px; }

/* 免責（全ページ共通で必ず出す） */
.disclaimer { margin: 0; }
.disclaimer li { margin: 4px 0; }
ul.disclaimer { list-style: none; padding: 0; }

/* --- 見出し・本文 --- */
h1 {
  font-size: 26px;
  line-height: 1.45;
  margin: 20px 0 12px;
  color: var(--brand);
}
h2 {
  font-size: 20px;
  line-height: 1.5;
  margin: 44px 0 12px;
  padding-left: 12px;
  border-left: 5px solid var(--brand);
  color: var(--brand);
}
h3 { font-size: 17px; margin: 28px 0 8px; color: var(--brand-soft); }
p { margin: 12px 0; }
.lead { font-size: 17px; }
.updated { font-size: 13px; color: var(--ink-2); margin: 0 0 8px; }

.card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 16px;
  margin: 20px 0;
}
.note {
  background: var(--card);
  border-left: 4px solid var(--win);
  border-radius: 0 8px 8px 0;
  padding: 12px 14px;
  margin: 20px 0;
  font-size: 15px;
}
.note strong { color: var(--win-ink); }

/* --- 表 --- */
.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; margin: 16px 0; }
table {
  border-collapse: collapse;
  width: 100%;
  background: var(--card);
  font-size: 15px;
}
th, td {
  border: 1px solid var(--line);
  padding: 8px 10px;
  text-align: left;
  vertical-align: middle;
}
/* 見出し行の文字は accent ではなく ink。15px太字を accent にすると
   この地の上で 2.9:1 しか出ない（表は数字を読ませる場所なので落とせない）。 */
thead th { background: var(--line); color: var(--ink); white-space: nowrap; }
td.num, th.num { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
/* 縞は「地の色をわずかに沈める」だけ。新しい色を1つ増やさない。 */
tbody tr:nth-child(even) { background: rgba(64, 35, 16, 0.035); }
caption { caption-side: top; text-align: left; font-size: 13px; color: var(--ink-2); padding-bottom: 6px; }

/* --- 数字ボール（ロト系・ビンゴ5） --- */
.balls { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0; padding: 0; list-style: none; }
.ball {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 42px;
  height: 42px;
  padding: 0 6px;
  border-radius: 50%;
  background: var(--win);
  /* 金地の上は白（2.9:1）ではなく ink（5.0:1）。Appのくじカードも
     金の面には濃い茶の数字を乗せている。 */
  color: var(--ink);
  font-weight: 700;
  font-size: 17px;
  font-variant-numeric: tabular-nums;
}
.ball.bonus { background: var(--card); color: var(--win-ink); border: 2px solid var(--win); }
.ball-label { font-size: 13px; color: var(--ink-2); align-self: center; margin-right: 2px; }
.digits {
  font-size: 30px;
  font-weight: 700;
  letter-spacing: 0.22em;
  color: var(--win-ink);
  font-variant-numeric: tabular-nums;
}

/* --- 試合結果の数字列（toto/BIG系） --- */
.seq { display: flex; flex-wrap: wrap; gap: 6px; margin: 12px 0; padding: 0; list-style: none; }
.seq li {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 34px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--card);
  padding: 3px 0 4px;
  font-size: 15px;
  line-height: 1.3;
}
.seq li .g { font-size: 10px; color: var(--ink-2); }
.seq li .v { font-weight: 700; font-variant-numeric: tabular-nums; }
.seq li.void .v { color: var(--ink-2); }
/* 一覧表の中の数字列。toto/BIG系は14個並ぶので nowrap にすると狭い画面で
   表が極端に横に伸びる。折り返しは許可しつつ、最低幅だけ確保しておく。 */
.seq-inline { font-variant-numeric: tabular-nums; letter-spacing: 0.1em; min-width: 9em; }

/* --- ビンゴ5のカード図 --- */
.bingo-card {
  width: auto;
  margin: 16px 0;
  table-layout: fixed;
}
.bingo-card td {
  width: 33.33%;
  height: 62px;
  text-align: center;
  font-weight: 700;
  font-size: 17px;
  padding: 4px;
}
.bingo-card td .g { display: block; font-size: 11px; font-weight: 400; color: var(--ink-2); }
.bingo-card td.hit { background: var(--win); color: var(--ink); }
.bingo-card td.hit .g { color: rgba(64, 35, 16, 0.72); }
.bingo-card td.miss { background: rgba(64, 35, 16, 0.06); color: var(--ink-2); }
.bingo-card td.free { background: var(--win-bg); color: var(--win-ink); }

/* --- 収支の色（Appの意味色と一致させる） --- */
.profit { color: var(--profit); font-weight: 700; }
.loss { color: var(--loss); font-weight: 700; }
.muted { color: var(--ink-2); }

/* --- CTA --- */
.cta {
  background: var(--ink);
  color: var(--on-dark);
  border-radius: var(--radius);
  padding: 22px 18px;
  margin: 44px 0 8px;
}
.cta h2 {
  color: var(--on-dark);
  border-left: none;
  padding-left: 0;
  margin: 0 0 8px;
  font-size: 20px;
}
.cta p { margin: 8px 0; }
.cta .cta-main { font-size: 17px; font-weight: 700; color: var(--gold-on-dark); }
.cta ul { margin: 10px 0; padding-left: 20px; }
.cta-store { margin-top: 16px; }
.cta-button {
  display: inline-block;
  background: var(--win);
  color: var(--ink);  /* 金地の上の文字。白だと 2.9:1 で読みづらい */
  font-weight: 700;
  text-decoration: none;
  padding: 12px 22px;
  border-radius: 999px;
}
/* 「まだ押せない」状態。金でも地の色でもない、Appの非活性色を使う */
.cta-button.is-pending { background: var(--inactive); color: var(--ink); cursor: default; }
/* 注意書き。濃色地の上の文字は金1色に統一し、弱めるのは不透明度で行う
   （似た灰色を新しく1つ増やさないため） */
.cta-note { display: block; font-size: 13px; color: var(--gold-on-dark); opacity: 0.75; margin-top: 8px; }

/* --- リンクカード（内部リンク） --- */
.link-list { list-style: none; padding: 0; margin: 16px 0; display: grid; gap: 10px; }
.link-list a {
  display: block;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 14px 16px;
  text-decoration: none;
  /* 16px太字は「大きい文字」扱いにならないので accent(3.3:1) ではなく accentDeep */
  color: var(--brand-soft);
  font-weight: 700;
}
.link-list a:hover { border-color: var(--win); }
.link-list a .sub { display: block; font-weight: 400; font-size: 14px; color: var(--ink-2); margin-top: 2px; }

.chip-list { list-style: none; padding: 0; margin: 16px 0; display: flex; flex-wrap: wrap; gap: 8px; }
.chip-list a {
  display: inline-block;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 7px 14px;
  font-size: 15px;
  text-decoration: none;
  color: var(--brand-soft);
}
.chip-list a:hover { border-color: var(--win); }

/* --- 手順 --- */
ol.steps { padding-left: 22px; }
ol.steps > li { margin: 14px 0; }

/* --- LPのヒーロー --- */
.hero {
  background: linear-gradient(160deg, var(--ink) 0%, var(--brand-soft) 100%);
  color: var(--on-dark);
  padding: 40px 0 34px;
}
.hero h1 { color: var(--on-dark); font-size: 30px; margin: 0 0 14px; line-height: 1.4; }
/* 中に .hero-point（金）を含むので、opacity ではなく色そのものを弱める。
   opacity を親に掛けると金の強調まで一緒に沈む。 */
.hero .hero-sub { font-size: 17px; color: var(--on-dark-2); margin: 0; }
.hero .hero-point { color: var(--gold-on-dark); font-weight: 700; }
.hero .cta-store { margin-top: 22px; }

/* --- 実機スクショ＋短い説明の交互レイアウト（トップページの機能紹介） ---
   モバイルファースト：狭い画面では常に「画像 → 文」の縦積み。
   700px 以上で初めて2カラムにして、左右を交互に入れ替える。 */
.feature {
  display: grid;
  gap: 12px;
  margin: 32px 0;
  align-items: center;
}
.feature-shot {
  margin: 0;
  text-align: center;
}
.feature-shot img {
  display: block;
  width: 100%;
  max-width: 200px;
  height: auto;
  margin: 0 auto;
  border-radius: 20px;
  border: 1px solid var(--line);
}
.feature-body h2 { margin-top: 0; }
.feature-body p { margin-bottom: 0; }
/* 機能ブロックの中の但し書き。枠で囲わず、その機能のすぐ下に小さく置く。 */
.feature-body .inline-note { font-size: 14px; color: var(--ink-2); margin-top: 8px; }

/* .note の中でリストを使うぶんの調整（免責事項をまとめた箇所） */
.note ul { margin: 0; padding-left: 20px; }
.note li { margin: 8px 0; }
.note li:first-child { margin-top: 0; }
.note li:last-child { margin-bottom: 0; }
/* .note を <details> にした版（免責事項・トップページ）。中身は開くまで隠すだけで
   DOMには残す（SEO・#disclaimer アンカーの成立のため）。 */
.note > summary {
  cursor: pointer;
  font-weight: 700;
  list-style: none;
}
.note > summary::-webkit-details-marker { display: none; }
.note > summary::after {
  content: '＋ 詳しく見る';
  display: inline-block;
  margin-left: 8px;
  font-weight: 400;
  font-size: 14px;
  color: var(--ink-2);
}
.note[open] > summary::after { content: '－ 閉じる'; }
.note > ul { margin-top: 12px; }

/* --- FAQ（アコーディオン） --- */
.faq details {
  border-top: 1px solid var(--line);
  padding: 10px 0;
}
.faq details:first-of-type { border-top: none; padding-top: 0; }
.faq summary {
  cursor: pointer;
  font-weight: 700;
  padding: 2px 0;
  list-style: none;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: '+';
  float: right;
  color: var(--ink-2);
  font-weight: 400;
}
.faq details[open] summary::after { content: '−'; }
.faq details p { margin: 8px 0 0; }

/* リンクカードの簡略版（説明文なしの1行リンク）。#guide の導線ブロックのように
   カード＋説明文のフル装備が要らない箇所向け。 */
.link-list--compact { display: block; }
.link-list--compact li { margin: 0; }
.link-list--compact a {
  display: block;
  padding: 10px 0;
  border: none;
  border-top: 1px solid var(--line);
  border-radius: 0;
}
.link-list--compact li:last-child a { border-bottom: 1px solid var(--line); }
.link-list--compact a:hover { border-color: var(--win); }

@media (min-width: 700px) {
  h1 { font-size: 30px; }
  .hero h1 { font-size: 36px; }
  .link-list { grid-template-columns: 1fr 1fr; }
  .link-list--compact { grid-template-columns: 1fr; }
  .feature {
    grid-template-columns: 200px 1fr;
    gap: 36px;
    margin: 48px 0;
  }
  .feature.is-reverse { grid-template-columns: 1fr 200px; }
  .feature.is-reverse .feature-shot { order: 2; }
  .feature.is-reverse .feature-body { order: 1; }
}