/* 公式サイト共通CSS（gen-site.ts が assets/site.css に書き出す）。アプリの theme.ts（和紙ライト＋朱＋金）に合わせる */
:root {
  --paper:#f6eede; --paper-deep:#eee0cb; --surface:#fffaf2; --ink:#2c2823; --sub:#6f6757;
  --line:#e7d8c0; --line-warm:#d68a52; --accent:#df6a32; --accent-deep:#b9532a; --gold:#c9a253;
  --defense:#5a7290; --r:10px;
  --shadow:0 3px 14px rgba(156,100,40,.14);
}
* { box-sizing:border-box; }
html { -webkit-text-size-adjust:100%; }
body { line-break:strict; margin:0; color:var(--ink); background:var(--paper);
  font-family:"Zen Kaku Gothic New",-apple-system,"Hiragino Sans",sans-serif; line-height:1.85; font-size:16px; }
img { max-width:100%; height:auto; display:block; }
a { color:var(--accent-deep); }
.wrap { max-width:1080px; margin:0 auto; padding:0 20px; }
h1, h2, h3, h4 { word-break:auto-phrase; font-family:"Zen Maru Gothic","Hiragino Maru Gothic ProN",sans-serif; font-weight:900; line-height:1.4; margin:0; }

/* 上端の朱ヘアライン（アプリの最上部の線と同じ） */
.topline { height:3px; background:linear-gradient(90deg, var(--accent), var(--gold)); }
header.site { display:flex; align-items:center; justify-content:space-between; height:64px; }
.brand { font-family:"Zen Maru Gothic",sans-serif; font-weight:900; font-size:18px; color:var(--ink); text-decoration:none; }
.brand em { font-style:normal; color:var(--accent); }

.btn { display:inline-flex; align-items:center; justify-content:center; white-space:nowrap;
  background:var(--accent); color:#fff; font-family:"Zen Maru Gothic",sans-serif; font-weight:900; font-size:17px;
  text-decoration:none; padding:14px 28px; border-radius:var(--r); box-shadow:0 4px 0 var(--accent-deep);
  transition:transform .18s cubic-bezier(.16,1,.3,1), box-shadow .18s; }
.btn:hover { transform:translateY(-1px); box-shadow:0 5px 0 var(--accent-deep); }
.btn:active { transform:translateY(3px); box-shadow:0 1px 0 var(--accent-deep); }
.btn.small { font-size:14px; padding:8px 16px; box-shadow:0 3px 0 var(--accent-deep); }

/* ヒーロー: アプリのホームと同じく、盤の写真を全面に敷いて、その上にタイトルを重ねる。
   下端は和紙の地色へフェード、左下にクリームの下地を敷いて文字を読みやすくする（アプリの titleScrim と同じ考え方） */
.photo-hero { position:relative; min-height:clamp(460px, 74vh, 660px); display:flex; align-items:flex-end; overflow:hidden; }
.photo-hero > img { position:absolute; inset:0; z-index:0; width:100%; height:100%; object-fit:cover; object-position:50% 60%; }
.photo-hero::before { content:""; position:absolute; inset:0; z-index:1; pointer-events:none;
  background:
    linear-gradient(180deg, rgba(246,238,222,.55) 0%, rgba(246,238,222,0) 18%),
    radial-gradient(130% 100% at 0% 100%, rgba(252,245,234,.97) 0%, rgba(252,245,234,.92) 42%, rgba(252,245,234,0) 78%),
    linear-gradient(0deg, var(--paper) 0%, rgba(246,238,222,0) 26%); }
.photo-hero .wrap { position:relative; z-index:2; width:100%; padding-bottom:40px; }
.photo-hero .site { position:absolute; z-index:2; top:0; left:20px; right:20px; }
.photo-hero .site .brand { background:rgba(252,245,234,.85); padding:4px 12px; border-radius:var(--r); }
.lockup { margin:0; font-family:"Zen Maru Gothic",sans-serif; font-weight:900; line-height:1.1; }
.lockup .l1 { display:block; font-size:clamp(20px, 2.4vw, 28px); color:var(--ink); }
.lockup .l1 em { font-style:normal; color:var(--accent-deep); }
.lockup .l2 { display:flex; align-items:baseline; gap:12px; font-size:clamp(56px, 8vw, 96px); color:#2c2014; letter-spacing:.02em; }
.lockup .l2 small { font-family:"Zen Kaku Gothic New",sans-serif; font-weight:700; font-size:clamp(13px, 1.4vw, 16px); color:#9a6a3a; letter-spacing:0; }
.hero-copy { max-width:34em; }
.hero-copy .tag { font-family:"Zen Maru Gothic",sans-serif; font-weight:900; font-size:clamp(20px, 2.4vw, 26px); margin:14px 0 4px; }
.hero-copy p { color:var(--sub); font-size:16px; margin:6px 0 22px; }
.photo-hero h1.page { font-size:clamp(30px, 4.4vw, 48px); }
.photo-hero h1.page em { font-style:normal; color:var(--accent); }

section { padding:72px 0; }
.sec-title { font-size:clamp(24px, 3vw, 32px); margin-bottom:22px; }

/* 四間飛車とは: 本文＋明朝の透かし漢字（アプリのカードの透かしと同じ手法） */
.about { position:relative; display:grid; grid-template-columns:minmax(0, 640px) 1fr; gap:40px; }
.about p { margin:0 0 14px; }
.wm { font-family:"Shippori Mincho B1",serif; font-weight:800; font-size:clamp(160px, 22vw, 280px); line-height:1;
  color:rgba(140,117,88,.10); text-align:center; align-self:center; user-select:none; }

/* アプリの仕組み: 大1＋小2のベント（実機画面） */
.bento { display:grid; grid-template-columns:1.25fr 1fr; grid-template-rows:auto auto; gap:18px; }
.tile { background:var(--surface); border:1px solid var(--line); border-radius:var(--r); padding:22px; box-shadow:var(--shadow);
  display:grid; gap:16px; align-content:start; }
.tile.big { grid-row:1 / span 2; grid-template-columns:1fr; background:linear-gradient(180deg, #fff7ec, var(--surface)); }
.tile.side { grid-template-columns:150px 1fr; align-items:center; }
.tile h3 { font-size:20px; }
.tile p { margin:6px 0 0; color:var(--sub); font-size:15px; }
/* 実機スクショは縦に長いので、見せたい部分だけを枠で切り抜く（object-position で位置を指定） */
.phone { border-radius:20px; overflow:hidden; border:5px solid #2a241d; box-shadow:0 10px 28px rgba(60,40,15,.22);
  background:#2a241d; aspect-ratio:4/5; }
.phone img { width:100%; height:100%; object-fit:cover; }
.phone.top img { object-position:50% 0%; }
.phone.lower img { object-position:50% 78%; }
.tile.side .phone { aspect-ratio:1/1; }
.tile.big .phone { width:min(360px, 88%); justify-self:center; aspect-ratio:1/1; }

/* 無料パターン: 盤図＋ミッション一覧 */
.free-box { background:var(--surface); border:1px solid var(--line); border-radius:var(--r); padding:28px; box-shadow:var(--shadow); position:relative; }
.badge { display:inline-block; background:#e3f1e8; color:#2f7d4f; font-weight:700; font-size:13px; border-radius:var(--r); padding:2px 12px; margin-bottom:14px; }
.free-grid { display:grid; grid-template-columns:minmax(0, 420px) 1fr; gap:32px; align-items:start; }
.free-grid h3 { font-size:22px; margin-bottom:4px; }
.board-fig { margin:0; } .board-fig img { border-radius:6px; box-shadow:0 6px 18px rgba(60,40,15,.18); }
figcaption { color:var(--sub); font-size:13px; margin-top:8px; }
.muted { color:var(--sub); font-size:14px; margin:0 0 8px; }
.missions { list-style:none; counter-reset:m; margin:0; padding:0; display:grid; gap:8px; }
.missions li { counter-increment:m; position:relative; padding:10px 14px 10px 46px; background:#fff7ec;
  border-radius:var(--r); border-left:4px solid var(--accent); font-size:15px; line-height:1.6; }
.missions li::before { content:counter(m); position:absolute; left:14px; top:9px; font-family:"Zen Maru Gothic",sans-serif;
  font-weight:900; color:var(--accent); }

/* 有料パック: 相手の陣形ごとの見出し＋アプリと同じ「左帯つきカード」 */
.pack-lead { color:var(--sub); margin:-8px 0 26px; max-width:46em; }
.opp { margin-bottom:34px; }
.opp-head { display:flex; align-items:baseline; justify-content:space-between; gap:12px; font-size:19px;
  border-bottom:2px solid var(--line-warm); padding-bottom:6px; margin-bottom:14px; }
.opp-head small { font-family:"Zen Kaku Gothic New",sans-serif; font-weight:400; font-size:13px; color:var(--sub); }
.pat-list { display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:14px; }
.pat { display:grid; grid-template-columns:112px 1fr; gap:16px; align-items:start; background:var(--surface);
  border:1px solid var(--line); border-left:5px solid var(--defense); border-radius:var(--r); padding:14px;
  transition:transform .2s cubic-bezier(.16,1,.3,1), box-shadow .2s; }
.pat:hover { transform:translateY(-2px); box-shadow:var(--shadow); }
.pat img { border-radius:4px; }
.pat h4 { font-size:17px; }
.pat p { margin:4px 0 0; font-size:14px; line-height:1.7; }
.pat .meta { color:var(--sub); font-size:13px; }

/* 最後の呼びかけ: 朱の帯（同じライトテーマ内の色ブロック） */
.closing { background:var(--accent); color:#fff; border-radius:var(--r); padding:44px 40px; display:grid;
  grid-template-columns:1fr auto; gap:24px; align-items:center; position:relative; overflow:hidden; }
.closing h2 { font-size:clamp(22px, 2.8vw, 30px); }
.closing p { margin:8px 0 0; opacity:.92; }
.closing .btn { background:#fffaf2; color:var(--accent-deep); box-shadow:0 4px 0 #8f3c1c; }
.closing .wm2 { position:absolute; right:-10px; bottom:-60px; font-family:"Shippori Mincho B1",serif; font-weight:800;
  font-size:220px; line-height:1; color:rgba(255,255,255,.10); pointer-events:none; }

footer.site { color:var(--sub); font-size:13px; padding:40px 0 56px; }
footer.site a { color:var(--sub); }

@media (prefers-reduced-motion:no-preference) {
  .photo-hero .hero-copy { animation:rise .7s cubic-bezier(.16,1,.3,1) both; }
  @keyframes rise { from { opacity:0; transform:translateY(14px); } to { opacity:1; transform:none; } }
}
@media (max-width:860px) {
  .about, .bento, .free-grid, .closing { grid-template-columns:1fr; }
  .photo-hero { min-height:560px; }
  /* スマホは文字の下に駒が来るので、下地を全幅で濃くする */
  .photo-hero::before { background:
    linear-gradient(0deg, var(--paper) 0%, rgba(252,245,234,.94) 55%, rgba(252,245,234,.5) 75%, rgba(252,245,234,0) 100%); }
  .wm { display:none; }
  .tile.big { grid-row:auto; }
  .pat-list { grid-template-columns:1fr; }
  .closing { padding:32px 24px; }
}
@media (max-width:520px) {
  .tile.side { grid-template-columns:110px 1fr; }
  .pat { grid-template-columns:84px 1fr; gap:12px; }
}

/* ── 2026-10-02 追加: トップページ・戦法間の導線 ── */
.crumb { font-size:13px; color:var(--sub); margin:4px 0 0; }
.crumb a { color:var(--sub); }
.strat-grid { display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:16px; }
.strat { position:relative; overflow:hidden; display:block; text-decoration:none; color:var(--ink); background:var(--surface);
  border:1px solid var(--line); border-left:5px solid var(--accent); border-radius:var(--r); padding:20px 20px 18px;
  transition:transform .2s cubic-bezier(.16,1,.3,1), box-shadow .2s; }
.strat:hover { transform:translateY(-2px); box-shadow:var(--shadow); }
.strat.wide { grid-column:span 2; }
.strat h3 { font-size:21px; position:relative; }
.strat p { position:relative; margin:6px 0 0; font-size:14px; color:var(--sub); line-height:1.7; }
.strat .meta { color:var(--accent-deep); font-weight:700; font-size:13px; margin-top:10px; }
.strat .kanji { position:absolute; right:10px; bottom:-18px; font-family:"Shippori Mincho B1",serif; font-weight:800;
  font-size:96px; line-height:1; color:rgba(140,117,88,.10); pointer-events:none; }
.notice { background:#fff7ec; border:1px solid var(--line); border-left:4px solid var(--gold); border-radius:var(--r); padding:18px 20px; }
.notice p { margin:0; }
.others { display:flex; flex-wrap:wrap; gap:10px; }
.others a { text-decoration:none; color:var(--ink); background:var(--surface); border:1px solid var(--line); border-radius:var(--r);
  padding:8px 16px; font-family:"Zen Maru Gothic",sans-serif; font-weight:700; }
.others a:hover { border-color:var(--line-warm); }
@media (max-width:860px) {
  .strat-grid { grid-template-columns:1fr; }
  .strat.wide { grid-column:auto; }
}