/* =============================================================================
   サブページ共通スタイル（tips.html / rules.html / sanma.html）

   本編 index.html は 3840x2160 の固定キャンバスをscaleする別構造なので、ここには入らない。
   こちらは普通の縦フロー。3ページで同じCSSを書き写していたのを1本にまとめたもの。
   ============================================================================= */

:root{
  --h1:#3aab4c; --h2:#e8743b; --h3:#2b97d6; --h6:#16b3a6; --hy:#e84d9b;
  --ink:#4a3b22; --paper:#fffdf6; --line:#e8b53e; --sub:#7a5b14;
}
*{margin:0; box-sizing:border-box;}
body{
  font-family:"Zen Maru Gothic","Hiragino Maru Gothic ProN",sans-serif; color:var(--ink);
  background:#ffe27a;
  background-image:
    repeating-linear-gradient(0deg, rgba(232,184,58,.45) 0 44px, rgba(232,184,58,0) 44px 88px),
    repeating-linear-gradient(90deg, rgba(232,184,58,.45) 0 44px, rgba(232,184,58,0) 44px 88px);
  -webkit-font-smoothing:antialiased; padding:40px 5vw 80px; line-height:1.6;
}

/* ===== ヘッダー ===== */
header.top{max-width:1100px; margin:0 auto 26px;}
h1{font-size:42px; font-weight:900; color:#3aab4c; -webkit-text-stroke:6px #fff; paint-order:stroke fill;}
.lead{font-size:17px; font-weight:700; color:var(--sub); margin-top:8px;}
.wrap{max-width:820px; margin:0 auto;}
header.top{max-width:820px;}

/* ページ間の行き来。戻るボタンの隣に並べる */
.pagenav{display:flex; flex-wrap:wrap; gap:8px; margin-top:14px;}
.pagenav a{font-size:16px; font-weight:800; color:#fff; text-decoration:none;
  padding:8px 18px; border-radius:14px; box-shadow:0 4px 0 rgba(0,0,0,.12);}
.pagenav a.home{background:#1d7ec2;}
.pagenav a.tips{background:#0f9284;}
.pagenav a.rules{background:#5a3fa0;}
.pagenav a.sanma{background:#d05a20;}
/* 現在地。色を薄くする方式は 2.5:1 まで落ちて読めなかったので、
   ページ色を保ったまま白の内枠＋▍で「今ここ」を形で示す。 */
.pagenav a[aria-current="page"]{box-shadow:inset 0 0 0 3px rgba(255,255,255,.85); cursor:default;}
.pagenav a[aria-current="page"]::before{content:"▍ ";}

/* ===== 見出し ===== */
h2{font-size:30px; font-weight:900; color:var(--sub); margin:38px 0 14px; padding-bottom:8px;
  border-bottom:5px solid var(--line); display:flex; align-items:center; gap:12px; flex-wrap:wrap;}
h2 .cnt{font-size:18px; font-weight:800; color:#fff; background:#c2551e; border-radius:12px; padding:3px 12px;}

/* ===== 役カード（tips.html） ===== */
.yaku{background:var(--paper); border:4px solid #fff; border-radius:18px;
  box-shadow:inset 0 0 0 3px #f3e4ad, 0 3px 0 rgba(0,0,0,.05); padding:16px 20px; margin-bottom:12px;}
.yhead{display:flex; align-items:center; gap:12px; margin-bottom:6px; flex-wrap:wrap;}
.hb{color:#fff; font-size:16px; font-weight:900; border-radius:9px; padding:3px 11px; min-width:52px; text-align:center;}
.hb.h1{background:var(--h1);} .hb.h2{background:var(--h2);} .hb.h3{background:var(--h3);}
.hb.h6{background:var(--h6);} .hb.hy{background:var(--hy);}
.ynm{font-size:28px; font-weight:900;}
.yka{font-size:18px; font-weight:700; color:#b08a3a;}
.ydesc{font-size:19px; font-weight:600; color:#5a4a2a;}

/* ===== 濃色リスト（tips.html の豆知識） ===== */
.tlist{display:grid; grid-template-columns:1fr 1fr; gap:12px;}
.titem{background:#2a1f3e; color:#ffe9a8; border:3px solid #fff; border-radius:16px; padding:14px 18px;
  font-size:18px; font-weight:700; line-height:1.5; display:flex; gap:12px;}
.titem .no{flex:0 0 auto; color:#bfa9e0; font-weight:900;}
.titem b{color:#ffd24a;}
.tlist.warn .titem{background:#3a2418; border-color:#e8a13b; box-shadow:inset 4px 0 0 var(--h2);}
.tlist.warn .titem b{color:#ffb24a;}
.tlist.pro .titem{background:#14322e; border-color:#36c2b0; box-shadow:inset 4px 0 0 var(--h6);}
.tlist.pro .titem b{color:#7df0dd;}
.note{font-size:14px; font-weight:500; color:#6b5316; margin-top:6px;}

/* ===== ルールカード（rules.html / sanma.html 共通） =====
   1枚 = 1ルール。「何が起きるか」「点がどう動くか」「採用はまちまち」を必ず3点セットで持たせる。 */
.rule{background:var(--paper); border:4px solid #fff; border-radius:18px;
  box-shadow:inset 0 0 0 3px #f3e4ad, 0 3px 0 rgba(0,0,0,.05);
  padding:18px 22px; margin-bottom:14px;}
.rule-head{display:flex; align-items:baseline; gap:6px 12px; flex-wrap:wrap; margin-bottom:8px;}
.rule-head .tag{flex-basis:100%; align-self:start; width:max-content;}
.rule-nm{font-size:26px; font-weight:900;}
.rule-ka{font-size:15px; font-weight:700; color:#8a6a1f;}
.rule-desc{font-size:17px; font-weight:500; color:#4a3b22; line-height:1.7;}

/* 点の動き。ここだけ数字が読めればいいので、地を変えて独立させる */
.rule-pt{margin-top:10px; background:#fff6d8; border-radius:12px; padding:10px 14px;
  font-size:17px; font-weight:700; color:#6a5a36;}
.rule-pt b{color:#c5232b;}
.rule-pt .lbl{display:inline-block; font-size:13px; font-weight:900; color:#fff; background:#e8a13b;
  border-radius:8px; padding:2px 9px; margin-right:8px; vertical-align:2px;}

/* 採用状況バッジ。ローカルルールは「どこでも同じ」ではないので必ず付ける */
.tag{font-size:13px; font-weight:900; border-radius:8px; padding:3px 10px; white-space:nowrap;}
.tag.common{background:#dff3d6; color:#2e7020;}   /* だいたいどこでも */
.tag.split{background:#fff0cf; color:#8a5c14;}    /* 場所による */
.tag.rare{background:#ffe1e1; color:#b03434;}     /* 雀荘・身内ルール寄り */
.tag.app{background:#e6f0ff; color:#2f57a8;}      /* ネット麻雀の既定 */

.rule-where{margin-top:9px; font-size:15px; font-weight:500; color:#6b5642;
  border-left:5px solid #efd9a0; padding-left:11px;}

/* ===== 表 ===== */
.tblwrap{overflow-x:auto; -webkit-overflow-scrolling:touch; margin:6px 0 4px;}
table.t{width:100%; min-width:520px; border-collapse:separate; border-spacing:0; background:var(--paper);
  border-radius:14px; overflow:hidden; box-shadow:0 3px 0 rgba(0,0,0,.06); font-weight:700;}
table.t th, table.t td{padding:11px 13px; text-align:left; font-size:16px;
  border-bottom:3px solid #f0e3b8; border-right:3px solid #f0e3b8;}
table.t th:last-child, table.t td:last-child{border-right:none;}
table.t tr:last-child th, table.t tr:last-child td{border-bottom:none;}
table.t thead th{background:var(--line); color:#fff; font-size:16px; font-weight:900;}
table.t tbody th{background:#fbeecb; color:var(--sub); white-space:nowrap;}
table.t .ka{font-size:13px; font-weight:700; color:#8a6a1f;}
table.t .no{color:#d24a4a; font-weight:900;}
table.t .yes{color:#3a8b2a; font-weight:900;}

/* ===== 注意ボックス ===== */
.callout{border-radius:16px; padding:14px 18px; margin:14px 0; font-size:17px; font-weight:700; line-height:1.65;}
.callout.warn{background:#fff0cf; color:#8a5b12; box-shadow:inset 5px 0 0 var(--h2);}
.callout.info{background:#e6f0ff; color:#2f5296; box-shadow:inset 5px 0 0 var(--h3);}
.callout b{color:#c5232b;}

/* ===== 打つ前チェックリスト ===== */
.check{list-style:none; display:grid; gap:9px; margin-top:6px;}
.check li{background:#fff; border:3px solid #efd9a0; border-radius:14px; padding:11px 15px;
  font-size:16px; font-weight:500; color:#4a3b22; display:flex; gap:11px;}
.check li::before{content:""; flex:0 0 auto; width:17px; height:17px; margin-top:4px;
  border:3px solid var(--h2); border-radius:5px; background:#fff;}

/* ===== スマホ ===== */
@media screen and (max-width:760px){
  body{padding:24px 16px 60px;}
  h1{font-size:30px; -webkit-text-stroke:5px #fff;}
  h2{font-size:23px;}
  .tlist{grid-template-columns:1fr;}
  .rule{padding:14px 15px;}
  .rule-nm{font-size:21px;}
  .rule-desc{font-size:16px;}
  .rule-pt{font-size:15px;}
  .ynm{font-size:22px;}
  .ydesc{font-size:16px;}
  .check li{font-size:15px;}

  /* 表を横スクロールさせると、狭い列の中で理由の文章が折り返して行が異常に伸び、
     画面には役名しか映らない（実機375pxで確認）。スマホでは表をやめて1行=1カードに積む。 */
  .tblwrap{overflow-x:visible;}
  table.t{min-width:0; background:none; box-shadow:none; border-radius:0;}
  table.t thead{display:none;}
  table.t tbody, table.t tr, table.t th, table.t td{display:block; width:auto;}
  table.t tr{background:var(--paper); border:3px solid #f0e3b8; border-radius:14px;
    padding:12px 15px; margin-bottom:10px; box-shadow:0 3px 0 rgba(0,0,0,.05);}
  table.t th, table.t td{border:none; padding:0;}
  table.t tbody th{background:none; font-size:20px; font-weight:900; color:var(--ink); white-space:normal;}
  table.t .ka{display:inline-block; margin-left:8px; font-size:13px;}
  table.t tbody td{font-size:15px; margin-top:5px;}
  /* 判定（作れない/条件つき/…）はバッジとして独立させる */
  /* 判定バッジ化は役の可否表(#yakudiff)だけ。#goneは2列なので理由文が巻き込まれる */
  #yakudiff td:first-of-type{display:inline-block; margin:6px 0 2px;
    font-size:13px; font-weight:900; border-radius:8px; padding:3px 10px; background:#f0e3b8;}
  #yakudiff td:first-of-type.no{background:#ffe1e1; color:#d24a4a;}
  #yakudiff td:first-of-type.yes{background:#dff3d6; color:#3a8b2a;}
  #yakudiff td:first-of-type.warn{background:#fff0cf; color:#a8752a;}
}

/* ===== 印刷 =====
   本編のPDF出力（用紙1枚に畳む）とは別系統。こちらは普通の縦フローなので、
   複数ページに流してよい。黄色い地とナビだけ落として白紙に載せる。 */
@media print{
  body{background:#fff !important; background-image:none !important; padding:0; font-size:12pt;}
  .pagenav{display:none !important;}
  .rule, .yaku, .titem, .check li, table.t{break-inside:avoid; page-break-inside:avoid;}
  h2, h3{break-after:avoid; page-break-after:avoid;}
  .titem{background:#fff !important; color:#3a2c52 !important; border-color:#ccc !important;}
  .titem b{color:#a8752a !important;}
  *{-webkit-print-color-adjust:exact !important; print-color-adjust:exact !important;}
}

/* =============================================================================
   下層ページ リデザイン用パーツ（2026-08-18）
   競合調査で採った型：牌で見せる（うちだけの武器）／影響まとめ箱（三人麻雀.com）／
   四麻|三麻 比較表（mahjongapp.info）／Q&A（三人麻雀.com）／数字主役カード
   ============================================================================= */

/* ---- ① 牌グリッド：使う牌を絵で見せる。抜ける牌は斜線 ---- */
.tilegrid{background:var(--paper); border:3px solid #fff; border-radius:16px;
  padding:13px 16px; box-shadow:0 3px 0 rgba(0,0,0,.08); margin:0 auto 12px; width:max-content; max-width:100%;}
.tilegrid .ttl{font-size:16px; font-weight:900; margin-bottom:10px;}
.tilegrid .trow{display:flex; gap:3px; align-items:center; margin-bottom:7px;}
.tilegrid .trow .lbl{font-size:12px; font-weight:900; color:#7a6535; flex:0 0 32px;}
.tilegrid .tile{width:28px; height:38px; border-radius:5px; background:#fff; border:2px solid #efd9a0;
  box-shadow:0 2px 0 #e6cd90, inset 0 0 0 1px #f5ecd2; display:flex; align-items:center; justify-content:center; flex:0 0 auto;}
.tilegrid .tile img{width:82%; height:82%; object-fit:contain; display:block;}
.tilegrid .tile.x{background:#e8dcc4; border-color:#d6c6a4; box-shadow:0 2px 0 #cbbb98; position:relative;}
.tilegrid .tile.x img{opacity:.42; filter:grayscale(.7);}
.tilegrid .tile.x::after{content:""; position:absolute; inset:16% 12%;
  background:linear-gradient(to bottom right,transparent 44%,#d24a4a 44%,#d24a4a 56%,transparent 56%);}
.tilegrid .cap{font-size:14px; font-weight:800; color:#8a7648; margin-top:6px;}
.tilegrid .cap b{color:#c5232b;}

/* ---- ② 影響まとめ箱：濃色見出し＋「原因 → 結果」リスト ---- */
.effbox{background:var(--paper); border:3px solid #fff; border-radius:16px; overflow:hidden;
  box-shadow:0 3px 0 rgba(0,0,0,.08); margin-bottom:12px;}
.effbox .hd{background:#4a3b22; color:#ffe27a; font-size:15px; font-weight:900; padding:10px 14px;}
.effbox ul{margin:0; padding:11px 16px 13px 32px;}
.effbox li{font-size:15px; font-weight:500; color:#4a3b22; line-height:1.65; margin-bottom:6px;}
.effbox li:last-child{margin-bottom:0;}
.effbox li b{color:#7a4a10; background:linear-gradient(transparent 62%, #ffd24a 62%);}

/* ---- ③ 比較表：四麻|三麻 の2列。三麻側だけ赤字 ---- */
.cmptable{background:var(--paper); border:3px solid #fff; border-radius:16px; overflow:hidden;
  box-shadow:0 3px 0 rgba(0,0,0,.08); margin-bottom:12px;}
.cmptable table{width:100%; table-layout:fixed; border-collapse:collapse; font-size:14px; font-weight:800;}
.cmptable tbody th{width:96px;}
.cmptable th,.cmptable td{padding:9px 12px; border-bottom:2px solid #f3e8c8; text-align:left;}
.cmptable thead th{background:#8a6a1f; color:#fff; font-size:13px; font-weight:900;}
.cmptable thead th:nth-child(3){background:#b04d15;}
.cmptable tbody th{color:#8a7648; font-weight:900; width:82px; background:none; white-space:nowrap;}
.cmptable td:last-child{color:var(--ink); font-weight:900; background:#fff2ee;}
.cmptable tr:last-child th,.cmptable tr:last-child td{border-bottom:none;}

/* ---- ④ Q&A：例外・細かい話はここに逃がして本文を汚さない ---- */
.qa{background:var(--paper); border:3px solid #fff; border-radius:14px; padding:12px 13px;
  box-shadow:0 3px 0 rgba(0,0,0,.08); margin-bottom:12px;}
.qa .l{display:flex; gap:10px; margin-bottom:8px;}
.qa .l:last-child{margin-bottom:0;}
.qa .b{flex:0 0 26px; height:26px; border-radius:7px; color:#fff; font-size:14px; font-weight:900;
  display:flex; align-items:center; justify-content:center;}
.qa .q .b{background:#d24a4a;}
.qa .a .b{background:#4a7fd2;}
.qa .tx{font-size:14px; font-weight:500; color:#4a3b22; line-height:1.6; padding-top:4px;}
.qa .q .tx{font-size:15px; font-weight:900;}
.qa .tx b{color:#7a4a10; background:linear-gradient(transparent 62%, #ffd24a 62%); font-weight:700;}

/* ---- ⑤ 早見表：ルール名 × 数字 × 採用バッジ を1行で ---- */
.quicklist{background:var(--paper); border:3px solid #fff; border-radius:16px; overflow:hidden;
  box-shadow:0 3px 0 rgba(0,0,0,.08); margin-bottom:12px;}
.quicklist .row{display:flex; align-items:flex-start; gap:10px; padding:11px 13px; border-bottom:2px solid #f3e8c8;
  text-decoration:none; color:inherit;}
.quicklist a.row::after{content:"▸"; color:#c9a63f; font-size:14px; margin-left:auto; align-self:center;}
.quicklist .tag{margin-left:0; margin-top:1px;}
.quicklist .nm{white-space:nowrap;}
.quicklist .row:last-child{border-bottom:none;}
.quicklist .nm{font-size:16px; font-weight:900; flex:0 0 108px;}
.quicklist .v{font-size:14px; font-weight:900; color:var(--ink); flex:0 1 auto; min-width:0;}
.quicklist .v small{display:block; font-size:11.5px; font-weight:500; color:#7a6535;}

/* ---- ⑥ カードの作り直し：数字を主役に、詳細は畳む ----
   .rule-pt を濃色ブロックへ格上げ（クラス名は既存テストが見ているので変えない）。
   説明文は短く、長い補足(.rule-where)は <details> の中へ。 */
.rule .rule-pt{background:#4a3b22; color:#ffe9a8; border-radius:12px; padding:10px 14px;
  font-size:18px; font-weight:900; line-height:1.4; margin-top:10px;}
.rule .rule-pt b{color:#ffd24a;}
.rule .rule-pt .lbl{display:block; font-size:11px; font-weight:900; color:#e8b53e;
  letter-spacing:1px; background:none; padding:0; margin:0 0 3px;}
.rule details{margin-top:9px; border-top:2px dashed #efe0b4;}
.rule summary{list-style:none; cursor:pointer; font-size:14px; font-weight:900; color:#8a6a1f;
  display:inline-block; background:#fff6d8; border-radius:10px; padding:9px 14px; margin-top:8px;}
.rule summary::-webkit-details-marker{display:none;}
.rule summary::after{content:" ▾";}
.rule details[open] summary::after{content:" ▴";}
.rule details .rule-where{margin-top:6px; border-left:none; padding-left:0;}

@media screen and (max-width:760px){
  .tilegrid .tile{width:26px; height:35px;}
  .tilegrid .trow .lbl{flex-basis:28px;}
  .quicklist .nm{flex-basis:88px; font-size:14px;}
  .effbox li{font-size:14px;}
}
@media print{
  /* 畳んだ詳細も紙には全部出す（JSが beforeprint で open を付ける保険つき） */
  .rule details, .rule details .rule-where{display:block;}
  .rule summary{display:none;}
  .rule .rule-pt{background:#f3e8c8 !important; color:#4a3b22 !important;}
  .rule .rule-pt b{color:#c5232b !important;}
  .effbox .hd{background:#f3e8c8 !important; color:#4a3b22 !important;}
}
@media screen and (max-width:360px){
  /* iPhone SE級。牌9枚+ラベルが320pxちょうどで2px溢れたので一段縮める */
  .tilegrid{padding:11px 10px;}
  .tilegrid .tile{width:24px; height:32px; border-width:1.5px;}
  .tilegrid .trow{gap:2px;}
  .tilegrid .trow .lbl{flex-basis:26px; font-size:11px;}
}

/* ---- ⑦ 例牌：役の可否を牌の並び＋○✕で見せる ---- */
.eg{display:flex; flex-wrap:wrap; gap:7px; margin-top:8px;}
.eg .g{display:inline-flex; align-items:center; gap:2px; padding:4px 7px 4px 5px; border-radius:9px; background:#fff;}
.eg .g.ok{border:2px solid #9fd18a;}
.eg .g.ng{border:2px solid #eba3a3; background:#fdf4f4; position:relative;}
.eg .g.ng .tl img{opacity:.45; filter:grayscale(.6);}
.eg .tl{width:21px; height:28px; border-radius:4px; background:#fffdf6; border:1.5px solid #efd9a0;
  box-shadow:0 1.5px 0 #e6cd90; display:flex; align-items:center; justify-content:center; flex:0 0 auto;}
.eg .tl img{width:82%; height:82%; object-fit:contain; display:block;}
.eg .mk{font-size:15px; font-weight:900; margin-left:3px;}
.eg .g.ok .mk{color:#3a8b2a;}
.eg .g.ng .mk{color:#d24a4a;}
.egcap{font-size:12.5px; font-weight:500; color:#7a6535; margin-top:5px;}
@media screen and (max-width:760px){
  .eg .tl{width:19px; height:25px;}
}

/* ---- 2周目レビュー反映の追加分 ---- */
/* H-1: 濃色ブロックの下に続く本文（旧ptの長文はこちらへ） */
.rule-ptbody{font-size:15px; font-weight:500; color:#4a3b22; line-height:1.7; margin-top:8px;}
.rule-ptbody b{color:#a8351f; font-weight:700;}
/* H-3: 濃色は「金額が動く」セクションだけ。それ以外は淡色 */
.rule.tone-light .rule-pt{background:#fff6d8; color:#6a5a36;}
.rule.tone-light .rule-pt b{color:#c5232b;}
.rule.tone-light .rule-pt .lbl{color:#8a5c14;}
/* M-5: 早見表→カードのアンカー着地 */
.rule{scroll-margin-top:14px;}
/* M-8: 「条件つき」にも色を（デスクトップ表側） */
table.t .warn{color:#a8752a; font-weight:900;}

/* 白（Haku.svg）は中身が空のSVG＝真っ白で、画像の読み込み失敗に見える。
   実物の白牌に寄せて、薄青の内枠を描いて「これが白」だと分かるようにする */
.tilegrid .tile.haku::before{content:""; position:absolute; inset:15% 18%;
  border:2px solid #9fc2d8; border-radius:3px;}
.tilegrid .tile{position:relative;}
/* 13枚もの（国士無双・九蓮宝燈）は1つの箱に収まらないので、箱の中で折り返す */
.eg .g{flex-wrap:wrap; max-width:100%;}
@media screen and (max-width:360px){
  .eg .tl{width:17px; height:23px;}
}