/* 47国志 遊び方のページ（ゲームと同じ墨の線・紙・橙の差し色） */
:root {
  --ink: #23324a;
  --paper: #fffdf6;
  --line: rgba(35, 50, 74, .14);
  --accent: #ff7a45;
  --sky0: #bfe9ff;
  --sky1: #fff4dc;
  --good: #2ec4b6;
  --blue: #4d96ff;
  --warn: #ff9f43;
  --bad: #ff5a5f;
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body { margin: 0; background: linear-gradient(180deg, var(--sky0) 0, var(--sky1) 520px, var(--sky1)); color: var(--ink);
  font-family: 'M PLUS Rounded 1c', system-ui, -apple-system, 'Hiragino Maru Gothic ProN', sans-serif; line-height: 1.75; }
a { color: inherit; }
button { font: inherit; color: inherit; touch-action: manipulation; cursor: pointer; }
h1, h2, h3 { line-height: 1.3; }

.btn { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 0 26px; border: 3px solid var(--ink); border-radius: 16px; background: var(--accent); color: #fff; font-weight: 900; font-size: 17px; text-decoration: none; box-shadow: 0 4px 0 var(--ink); }
.btn:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--ink); }
.btn.ghost { background: #fff; color: var(--ink); }

/* 表紙 */
.hero { padding: 64px 20px 40px; }
.hero-in { max-width: 980px; margin: 0 auto; }
.kicker { display: inline-block; margin: 0 0 10px; padding: 3px 12px 4px; border: 2px solid var(--ink); border-radius: 999px; background: #fff; font-weight: 900; font-size: 13px; }
.hero h1 { margin: 0; font-family: 'Dela Gothic One', 'M PLUS Rounded 1c', sans-serif; font-weight: 400; font-size: clamp(56px, 13vw, 120px); letter-spacing: .02em; text-shadow: 4px 4px 0 #fff, 7px 7px 0 var(--ink); }
/* ロゴ（image/logo.svg）を型抜きで。前の文字の影（白→墨）と同じ重ね方 */
.hero h1 .logo { display: block; width: clamp(240px, 56vw, 500px); aspect-ratio: 476.3 / 116.26; margin: 8px 0 18px; background: var(--ink); -webkit-mask: url(../image/logo.svg?v=20261021a) center / contain no-repeat; mask: url(../image/logo.svg?v=20261021a) center / contain no-repeat; }
.hero h1 { filter: drop-shadow(4px 4px 0 #fff) drop-shadow(3px 3px 0 var(--ink)); }
.hero .lead { max-width: 640px; font-size: clamp(15px, 3.6vw, 18px); font-weight: 700; }
.cta { display: flex; flex-wrap: wrap; gap: 12px; margin: 22px 0 28px; }
.facts { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin: 0; padding: 0; list-style: none; }
.facts li { padding: 12px 14px; border: 2px solid var(--ink); border-radius: 16px; background: var(--paper); box-shadow: 0 3px 0 var(--ink); }
.facts b { display: block; font-size: 22px; font-weight: 900; }
.facts span { font-size: 12px; font-weight: 700; opacity: .7; }

/* 目次 */
.toc { position: sticky; top: 0; z-index: 5; display: flex; gap: 6px; overflow-x: auto; padding: 10px 16px; background: rgba(255, 253, 246, .92); border-block: 2px solid var(--ink); backdrop-filter: blur(6px); scrollbar-width: none; }
.toc::-webkit-scrollbar { display: none; }
.toc a { flex: none; padding: 4px 12px; border-radius: 999px; font-weight: 800; font-size: 13px; text-decoration: none; white-space: nowrap; }
.toc a:hover, .toc a.on { background: var(--ink); color: #fff; }

main { max-width: 1040px; margin: 0 auto; padding: 0 16px 40px; }
.sec { padding: 56px 0 8px; scroll-margin-top: 56px; }
.sec h2 { display: flex; align-items: center; gap: 12px; margin: 0 0 14px; font-family: 'Dela Gothic One', 'M PLUS Rounded 1c', sans-serif; font-weight: 400; font-size: clamp(26px, 6vw, 38px); }
.sec h2 span { display: grid; place-items: center; width: 46px; height: 46px; border: 3px solid var(--ink); border-radius: 14px; background: var(--accent); color: #fff; font-size: 18px; box-shadow: 0 3px 0 var(--ink); flex: none; }
.sec h3.sub { margin: 28px 0 6px; font-size: 20px; font-weight: 900; }
.intro { max-width: 760px; font-weight: 700; }
.note { font-size: 13px; font-weight: 700; opacity: .75; }
.notes { padding-left: 1.2em; font-weight: 700; }
.notes li { margin: 4px 0; }

/* カード */
.cards { display: grid; gap: 12px; margin: 16px 0; }
.cards.c2 { grid-template-columns: repeat(2, 1fr); }
.cards.c3 { grid-template-columns: repeat(3, 1fr); }
.cards.c5 { grid-template-columns: repeat(5, 1fr); }
/* 長さのちがうカードは列ごとに上から詰める（行の高さをそろえると、短いカードの下が大きく空いた 2026-10-20） */
.cards.mas { display: block; column-gap: 12px; }
.cards.mas.c2 { columns: 2; }
.cards.mas.c3 { columns: 3; }
.cards.mas > * { break-inside: avoid; margin: 0 0 12px; }
.cards.mas > [hidden] { display: none; }
.cards.top { align-items: start; }
.card { padding: 14px 16px; border: 2px solid var(--ink); border-radius: 18px; background: var(--paper); box-shadow: 0 4px 0 var(--ink); }
.card h3 { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; margin: 0 0 6px; font-size: 18px; font-weight: 900; }
.card h3 small { font-size: 12px; font-weight: 800; opacity: .6; }
.card p { margin: 6px 0; font-size: 14px; font-weight: 700; }
.card .when { padding: 6px 10px; border-radius: 10px; background: #fff3d6; font-size: 13px; }
.card.k h3 { font-size: 16px; }
.eg { margin: 8px 0; padding: 0; list-style: none; font-size: 14px; font-weight: 700; }
.eg li { display: flex; gap: 8px; padding: 4px 0; border-bottom: 1px dashed var(--line); }
.eg b { flex: none; min-width: 9em; }

/* 県名の札の見本 */
.pills { margin: 8px 0 0; padding: 0; list-style: none; font-size: 13px; font-weight: 700; }
.pills li { display: flex; align-items: center; gap: 10px; margin: 8px 0; }
.pill { flex: none; display: inline-flex; flex-direction: column; align-items: center; min-width: 96px; padding: 3px 12px 4px; border: 2px solid var(--ink); border-radius: 14px; background: var(--c); color: #fff; font-weight: 900; font-size: 15px; line-height: 1.2; box-shadow: 0 2px 0 var(--ink); }
.pill small { display: inline-flex; align-items: center; gap: 4px; font-size: 10px; font-weight: 800; }
.pill small i { width: 8px; height: 8px; border-radius: 50%; border: 1.5px solid var(--ink); }
.pill.houi { outline: 3px dashed #e0393e; outline-offset: 3px; }

/* 毎月の流れ */
.steps { border: 2px solid var(--ink); border-radius: 18px; background: var(--paper); box-shadow: 0 4px 0 var(--ink); overflow: hidden; }
.step-tabs { display: flex; overflow-x: auto; border-bottom: 2px solid var(--ink); scrollbar-width: none; }
.step-tabs button { flex: 1 0 auto; min-height: 46px; padding: 0 14px; border: 0; border-right: 2px solid var(--ink); background: #fff; font-weight: 900; font-size: 14px; white-space: nowrap; }
.step-tabs button:last-child { border-right: 0; }
.step-tabs button[aria-selected="true"] { background: var(--accent); color: #fff; }
.step-body { padding: 14px 18px; min-height: 150px; }
.step-body h3 { margin: 0 0 6px; font-size: 20px; font-weight: 900; }
.step-body p { margin: 6px 0; font-weight: 700; }

/* 絞りこみ */
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chips button, .ev-btns button { min-height: 40px; padding: 0 14px; border: 2px solid var(--ink); border-radius: 999px; background: #fff; font-weight: 900; font-size: 14px; box-shadow: 0 2px 0 var(--ink); }
.chips button[aria-pressed="true"] { background: var(--ink); color: #fff; }
.card.cmd.dim { display: none; }

/* 合戦の見込み */
.calc-note { margin: 8px 0 0; font-size: 11px; font-weight: 700; opacity: .65; }
.calc { display: grid; grid-template-columns: 1.4fr 1fr; gap: 14px; margin: 14px 0; }
.calc-in { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
fieldset { margin: 0; padding: 10px 14px 12px; border: 2px solid var(--ink); border-radius: 18px; background: var(--paper); box-shadow: 0 4px 0 var(--ink); }
legend { padding: 2px 10px; border: 2px solid var(--ink); border-radius: 999px; background: #fff; font-weight: 900; font-size: 13px; }
fieldset label { display: block; margin: 8px 0; font-size: 13px; font-weight: 800; }
fieldset label output { float: right; font-weight: 900; }
fieldset input[type=range] { display: block; width: 100%; margin-top: 4px; accent-color: var(--accent); min-height: 28px; }
fieldset label.chk { display: flex; align-items: center; gap: 8px; min-height: 32px; }
fieldset label.chk input { width: 20px; height: 20px; accent-color: var(--accent); }
.calc-out { padding: 14px 16px; border: 2px solid var(--ink); border-radius: 18px; background: #fff; box-shadow: 0 4px 0 var(--ink); align-self: start; position: sticky; top: 64px; }
.odds { display: inline-block; padding: 6px 18px 8px; border: 3px solid var(--ink); border-radius: 14px; color: #fff; font-family: 'Dela Gothic One', 'M PLUS Rounded 1c', sans-serif; font-size: 30px; box-shadow: 0 3px 0 var(--ink); }
.bars { margin: 14px 0 8px; display: grid; gap: 8px; }
.bars div { display: grid; grid-template-columns: 5em 1fr 4.5em; align-items: center; gap: 8px; font-size: 13px; font-weight: 800; }
.bars i { display: block; height: 14px; border: 2px solid var(--ink); border-radius: 999px; background: var(--accent); transition: width .2s; }
.bars div + div i { background: var(--blue); }
.bars b { text-align: right; }
.winp { margin: 4px 0; font-weight: 800; }
.winp b { font-size: 22px; }
.why { margin: 6px 0 0; padding-left: 1.1em; font-size: 13px; font-weight: 700; }

/* 表 */
.table-wrap { overflow-x: auto; margin: 14px 0; border: 2px solid var(--ink); border-radius: 18px; background: var(--paper); box-shadow: 0 4px 0 var(--ink); }
table { width: 100%; border-collapse: collapse; font-size: 14px; font-weight: 700; }
th, td { padding: 9px 12px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
thead th { background: var(--ink); color: #fff; font-weight: 900; white-space: nowrap; }
tbody th { white-space: nowrap; }
tr:last-child td, tr:last-child th { border-bottom: 0; }
.card .table-wrap { box-shadow: none; border-radius: 12px; }
table.mini th, table.mini td { padding: 5px 10px; }

/* 士気 */
.shiki { padding: 16px; border: 2px solid var(--ink); border-radius: 18px; background: var(--paper); box-shadow: 0 4px 0 var(--ink); }
.gauge { position: relative; height: 34px; border: 3px solid var(--ink); border-radius: 999px; background: linear-gradient(90deg, #ffd6d6 0 30%, #fff 30% 100%); overflow: hidden; }
.gauge i { position: absolute; inset: 0 auto 0 0; background: linear-gradient(90deg, var(--bad), var(--warn) 40%, var(--good)); transition: width .35s cubic-bezier(.2, .9, .3, 1); }
.gauge b { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); font-size: 18px; font-weight: 900; }
.gauge .ride { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); padding: 0 8px 1px; border-radius: 999px; background: linear-gradient(90deg, #ff4d2e, #ffb11a); color: #fff; font-size: 12px; font-weight: 900; }
.ev-btns { display: flex; flex-wrap: wrap; gap: 8px; margin: 14px 0 6px; }
.ev-btns .month { background: var(--ink); color: #fff; }
.ev-btns .reset { background: #eef1f5; }
.shiki-log { margin: 6px 0 0; font-weight: 800; min-height: 1.75em; }

/* 季節 */
.cal { margin: 14px 0; border: 2px solid var(--ink); border-radius: 18px; background: var(--paper); box-shadow: 0 4px 0 var(--ink); overflow: hidden; }
.cal-months { display: grid; grid-template-columns: repeat(12, 1fr); border-bottom: 2px solid var(--ink); }
.cal-months button { min-height: 52px; border: 0; border-right: 1px solid var(--line); background: #fff; font-weight: 900; font-size: 14px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; }
.cal-months button:last-child { border-right: 0; }
.cal-months button i { font-style: normal; font-size: 10px; font-weight: 800; opacity: .7; }
.cal-months button[aria-pressed="true"] { background: var(--accent); color: #fff; }
.cal-months button.winter { background: #eef6ff; }
.cal-months button.typhoon { background: #fff1e6; }
.cal-months button[aria-pressed="true"].winter, .cal-months button[aria-pressed="true"].typhoon { background: var(--accent); }
.cal-body { padding: 12px 18px; font-weight: 700; min-height: 96px; }
.cal-body h3 { margin: 0 0 4px; font-size: 18px; }
.cal-body ul { margin: 4px 0; padding-left: 1.2em; }

/* 物見 */
.intel { display: grid; grid-template-columns: 1fr 1.4fr; gap: 14px; align-items: start; }
.intel label { display: block; padding: 12px 14px; border: 2px solid var(--ink); border-radius: 18px; background: var(--paper); box-shadow: 0 4px 0 var(--ink); font-weight: 800; }
.intel label output { float: right; font-weight: 900; font-size: 18px; }
.intel input { display: block; width: 100%; margin-top: 8px; accent-color: var(--accent); min-height: 28px; }
.intel-card { padding: 12px 16px; border: 2px solid var(--ink); border-radius: 18px; background: #fff; box-shadow: 0 4px 0 var(--ink); }
.intel-card dl { display: grid; grid-template-columns: auto 1fr; gap: 4px 12px; margin: 0 0 8px; font-size: 14px; }
.intel-card dt { font-weight: 700; opacity: .65; }
.intel-card dd { margin: 0; font-weight: 900; }
.intel-card ul { margin: 0; padding-left: 1.2em; font-weight: 800; font-size: 14px; }
.intel-card li.danger { color: #d64545; }
.intel .note { grid-column: 1 / -1; }

/* よくある質問 */
details { margin: 10px 0; border: 2px solid var(--ink); border-radius: 16px; background: var(--paper); box-shadow: 0 3px 0 var(--ink); }
summary { padding: 12px 16px; font-weight: 900; cursor: pointer; list-style: none; }
summary::-webkit-details-marker { display: none; }
summary::before { content: '＋'; margin-right: 8px; color: var(--accent); }
details[open] summary::before { content: '－'; }
details p { margin: 0; padding: 0 16px 14px; font-weight: 700; }

.foot { padding: 40px 16px 60px; text-align: center; border-top: 2px solid var(--ink); background: var(--paper); }
.foot p { margin: 14px 0 0; font-weight: 800; font-size: 13px; line-height: 1.9; }
.foot .sep { margin: 0 .3em; opacity: .6; }
.foot .line { white-space: nowrap; }

/* 並べ方（2026-10-21 本人指摘「ガタつき」）：12列の格子。行ごとに高さをそろえ、文の長いカードは広く、短いカードは狭く取る（.w3〜.w12）。
   縦長の札の画像は横に添える（.side-l／.side-r。何行ぶん伸ばすかは --side-rows）。タブレットは2列、スマホは1列 */
.lay { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); grid-auto-flow: row dense; gap: 14px; margin: 18px 0; align-items: stretch; }
.lay > * { grid-column: span 12; margin: 0; min-width: 0; }
.lay > [hidden] { display: none; }
.lay > .shot img { height: auto; }
.w3 { grid-column: span 3; } .w4 { grid-column: span 4; } .w5 { grid-column: span 5; } .w6 { grid-column: span 6; } .w7 { grid-column: span 7; } .w8 { grid-column: span 8; }
.lay > .side-l { grid-column: 1 / span 4; grid-row: 1 / span var(--side-rows, 3); align-self: start; }
.lay > .side-r { grid-column: 9 / span 4; grid-row: 1 / span var(--side-rows, 3); align-self: start; }
.lay > .side-l, .lay > .side-r { align-self: center; }
.lay > .side-l img, .lay > .side-r img { max-width: 300px; margin: 0 auto; }
@media (max-width: 900px) {
  .w3, .w4, .w5, .w6 { grid-column: span 6; } .w7, .w8 { grid-column: span 12; }
  .lay > .side-l { grid-column: 1 / span 6; grid-row: 1 / span var(--side-rows-t, 4); }
  .lay > .side-r { grid-column: 7 / span 6; grid-row: 1 / span var(--side-rows-t, 4); }
  .lay > .side-l ~ .card, .lay > .side-r ~ .card { grid-column: span 6; }
}
@media (max-width: 600px) {
  .lay { gap: 12px; }
  .lay > *, .lay > .side-l, .lay > .side-r, .lay > .side-l ~ .card, .lay > .side-r ~ .card { grid-column: span 12; grid-row: auto; }
  .lay > .side-l img, .lay > .side-r img { max-width: 260px; }
}
/* ゲーム画面（2026-10-21 本人要望：ビジュアルを増やす）。横長は幅いっぱい、縦長の札は並べる */
.shot { margin: 18px 0; }
.shot img { display: block; width: 100%; height: auto; border: 3px solid var(--ink); border-radius: 16px; box-shadow: 0 4px 0 var(--ink); background: var(--paper); }
.shot figcaption { margin: 8px 2px 0; font-size: 12px; font-weight: 700; line-height: 1.6; opacity: .75; }
.shot.wide-strip img { border-radius: 12px; }
.shots { display: flex; flex-wrap: wrap; justify-content: center; align-items: flex-start; gap: 18px; margin: 20px 0; }
.shots .shot { margin: 0; width: min(300px, 100%); }
/* 札の画像は札そのものに墨の枠と角丸がある（四隅は透明に抜いてある）。ページ側の枠を重ねると角丸が二重に見えるので、影だけ付ける */
.shot.tall img { border: 0; border-radius: 0; box-shadow: none; background: none; filter: drop-shadow(0 4px 0 var(--ink)); }
@media (max-width: 900px) {
  .cards.c5 { grid-template-columns: repeat(2, 1fr); }
  .cards.c3 { grid-template-columns: repeat(2, 1fr); }
  .cards.mas.c3 { columns: 2; }
  .calc { grid-template-columns: 1fr; }
  .calc-out { position: static; }
}
@media (max-width: 600px) {
  .shots { gap: 12px; }
  .shots .shot { width: calc(50% - 6px); }
  .shots .shot:only-child { width: min(260px, 100%); }
  .hero { padding-top: 40px; }
  .facts { grid-template-columns: repeat(2, 1fr); }
  .cards.c2, .cards.c3, .cards.c5 { grid-template-columns: 1fr; }
  .cards.mas.c2, .cards.mas.c3 { columns: 1; }
  .calc-in { grid-template-columns: 1fr; }
  .intel { grid-template-columns: 1fr; }
  .cal-months { grid-template-columns: repeat(6, 1fr); }
  .cal-months button:nth-child(6) { border-right: 0; }
  .cal-months button:nth-child(-n+6) { border-bottom: 1px solid var(--line); }
  .eg li { flex-direction: column; gap: 0; }
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } .gauge i, .bars i { transition: none; } }