@charset "UTF-8";
/* ------------------------------------------------------------------------
千万石夢現録 追加セクション（原稿「32章特設ページ修正.xlsx」対応）
  - 930px固定幅の #wrapper 内に置く前提
  - 画像焼き込みではなく HTML テキストで組む
  - 【仮】素材（原稿から切り出したもの）は img/senmangoku/ に置いてある
------------------------------------------------------------------------ */

.sg-sec {
    position: relative;
    /* flow-root にしないと先頭の .sg-chu の上マージンが外へ抜けて
       セクション間に <main> の地色(#f0eedf)の帯が出る */
    display: flow-root;
    width: 930px;
    /* 中項目は大項目「「千万石夢現録」とは」の中に続くので、背景はベタのまま
       (上端の桜柄 band_bg.png は大項目の先頭でしか使わない) */
    background: #fdd5de;
    font-family: Meiryo, 'Hiragino Kaku Gothic ProN', sans-serif;
    color: #2b1a1a;
    /* セクション末尾のアキ。次の中項目バーの margin-top(20px)と合わせて
       セクション間が約40pxになる */
    padding-bottom: 20px;
}
.sg-sec img { display: block; }


/* ---- 実装時期などの注記バッジ（原稿の「8/7追加」と同じ意匠）
   画像の上に絶対配置して使う。クリック領域を塞がないよう pointer-events は無効。 ---- */
.sg-badge {
    position: absolute;
    z-index: 2;
    padding: 4px 15px 5px;
    background: #1c1c1c;
    border: 2px solid #b3924e;
    border-radius: 8px;
    color: #fff;
    font-family: Meiryo, 'Hiragino Kaku Gothic ProN', sans-serif;
    font-size: 15px;
    font-weight: bold;
    letter-spacing: 1px;
    line-height: 1.2;
    white-space: nowrap;
    box-shadow: 0 1px 3px rgba(0, 0, 0, .35);
    pointer-events: none;
}

/* ---- 画像の一部を白で伏せる（焼き込みアイコンの差し替え用） ---- */
.txt-sec .sg-erase {
    position: absolute;
    display: block;
    background: #fff;
}

/* ---- 中項目の見出し（バー＋タイトル文字）
   バーは PSD(【祝】傑の欠片…psb の「長方形 1067 のコピー」＋流水)から切り出した
   872x52 の透過PNG。記事の配色に合わせて色相を振った版を用意してあるので
   .sg-chu--pink / --purple / --green / --blue を必ず併記する。
   （色替えは 更新差分/make_chu_bar_colors.py で生成）
   タイトル文字は make_chu_titles.jsx で生成した透過PNG。 ---- */
.sg-chu {
    position: relative;
    width: 930px;
    height: 52px;
    margin: 20px 0 20px;
    background-repeat: no-repeat;
    background-position: 29px 0;
}
.sg-chu--pink   { background-image: url('../img/senmangoku/chu_bar_pink.png'); }
.sg-chu--purple { background-image: url('../img/senmangoku/chu_bar_purple.png'); }
.sg-chu--green  { background-image: url('../img/senmangoku/chu_bar_green.png'); }
.sg-chu--blue   { background-image: url('../img/senmangoku/chu_bar_blue.png'); }
.sg-chu-ttl {
    position: absolute;
    left: 0;
    top: 0;
    width: 930px;
}

/* ---- 大項目の見出し帯（金枠プレート＋タイトル文字）
   今回の3セクションは中項目なので未使用。大項目を新設するとき用に残してある。
   プレートはPSD(メイン_記事01.psd の ttl > AdobeStock_338046863)から文字なしで
   切り出した 880x72 の透過PNG。左右72pxを固定した border-image なので幅可変。
   タイトル文字は make_band_titles.jsx で生成する。 ---- */
/* band_bg.png の桜柄は y=195 あたりでベタ(#fdd5de)に馴染みきる。
   帯を短く切ると下端に継ぎ目が出るので、CSSグラデーションを重ねて
   残りのフェードを詰めている（帯の高さは自由に変えられる） */
.sg-band {
    position: relative;
    width: 930px;
    height: 142px;
    background:
        linear-gradient(to bottom, rgba(253, 213, 222, 0) 62%, #fdd5de 100%),
        url('../img/senmangoku/band_bg.png') no-repeat top center;
}
.sg-band-plate {
    position: absolute;
    left: 25px;
    top: 30px;
    width: 880px;
    height: 72px;
    box-sizing: border-box;
    border: 0 solid transparent;
    border-width: 0 72px;
    border-image: url('../img/senmangoku/band_plate.png') 0 72 fill stretch;
}
.sg-band-ttl-img {
    position: absolute;
    left: 0;
    top: 0;
    width: 930px;
    height: auto;
}
/* PNGを作れないときのフォールバック(見た目は原本と別フォントになる) */
.sg-band .sg-band-ttl {
    position: absolute;
    left: 25px;
    top: 50px;
    width: 880px;
    text-align: center;
    color: #fff;
    font-family: 'Yu Mincho', 'YuMincho', 'Hiragino Mincho ProN', serif;
    font-weight: bold;
    font-size: 30px;
    line-height: 1;
    letter-spacing: 2px;
    text-shadow: 0 0 10px rgba(42, 157, 255, .9), 0 0 5px rgba(42, 157, 255, .8), 0 1px 3px rgba(0, 0, 40, .7);
}

/* ---- 小見出し帯（濃紺グラデ） ---- */
.sg-subband {
    margin: 0 20px 18px;
    padding: 9px 0;
    background: linear-gradient(#3d4a70, #1d2540);
    border: 2px solid #c8a34b;
    border-radius: 4px;
    color: #fff;
    font-size: 21px;
    font-weight: bold;
    text-align: center;
    letter-spacing: 1px;
}

/* ---- 本文 ---- */
.sg-lead,
.sg-note {
    margin: 0 20px 14px;
    font-size: 17px;
    line-height: 1.7;
    font-weight: bold;
}
.sg-note {
    font-size: 14px;
    font-weight: normal;
}
.sg-red { color: #d3000c; }
.sg-center { text-align: center; }

/* ---- フォント設計（2026-08-06 FB反映・font_proposal.html の案C）----
   見出し・カード名・大きい数字 = HGP明朝E(極太明朝・Office同梱)。
   無いPCでは游明朝Demibold(Windows標準/macOS游明朝)に落ちる。
   キャラのセリフ = UD デジタル教科書体(Win10以降標準)で手書きの親しみを出し、
   ルール本文(Meiryo)と声を書体で区別する。本文はMeiryoのまま。 ---- */
.sg-subband,
.sg-blocktitle,
.sg-col > h3,
.sg-dp-label,
.sg-kura-card .name,
.sg-kura-card .kura-main .val {
    font-family: 'HGP明朝E', 'HGPMinchoE', 'Yu Mincho Demibold', 'Yu Mincho',
                 '游明朝', 'Hiragino Mincho ProN', serif;
}
.sg-subband,
.sg-blocktitle {
    font-weight: normal;      /* 明朝Eは元が極太。boldにすると合成太字で潰れる */
    letter-spacing: 4px;
}
.sg-kura-card .name {
    font-weight: normal;
    letter-spacing: 5px;
}
.sg-kura-card .kura-main .val { letter-spacing: 0; }
/* キャラのセリフ(フキダシ・行軍力図のひとこと)
   UD デジタル教科書体は Windows 10 以降の標準で、Macには入っていない。
   Mac用の受け皿としてヒラギノ角ゴを挟み、それも無ければ Meiryo に落とす。
   (Hiragino Sans は現行macOSでの名称。ProN は従来からの名称で両方見る) */
.sg-balloon,
.sg-kougun .kg-note {
    font-family: 'UD Digi Kyokasho NP-B', 'UD デジタル 教科書体 NP-B',
                 'UD Digi Kyokasho N-B',
                 'Hiragino Kaku Gothic ProN', 'Hiragino Sans',
                 Meiryo, sans-serif;
}

/* ---- 冒頭のリード文（大きめ） ---- */
.sg-lead-lg {
    font-size: 21px;
    line-height: 1.7;
    text-align: center;
    margin-bottom: 22px;
}

/* ---- 【〜】のブロック見出し ---- */
.sg-blocktitle {
    margin: 0 20px 10px;
    font-size: 21px;
    font-weight: bold;
    text-align: center;
    letter-spacing: 1px;
    color: #2b1a1a;
}
/* 直前のブロックとの間に1行ぶん(約30px)のアキを入れる版。
   .sg-blocktitle の margin ショートハンドに負けないよう、必ず後ろに置くこと */
.sg-blocktitle--gap { margin-top: 30px; }

/* ---- 蔵カード＋盟主城 ---- */
.sg-kura-list {
    display: flex;
    gap: 12px;
    /* 左右に余白を作るため930pxいっぱいには広げない */
    width: 760px;
    margin: 0 auto 8px;
    /* 3枚を同じ高さに伸ばし、盟主城の枠はカード下端に揃える */
    align-items: stretch;
}
/* 蔵を守る盟主城（カードの枠内） */
/* 3枚とも同じ高さになるよう最低高さを持たせ、中身は上下中央に置く
   （米蔵だけ「なし」の1行で低くなるのを防ぐ） */
.sg-kura-card .kura-moshu {
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: 69px;
    box-sizing: border-box;
    margin: auto 0 0;
    padding: 5px 6px 7px;
    background: rgba(255, 255, 255, .5);
    border: 2px solid #d18b3c;
    border-radius: 5px;
}
.sg-kura-card .kura-moshu .ttl {
    margin: 0 0 3px;
    font-size: 12px;
    line-height: 1.2;
    color: #8a6a34;
}
.sg-kura-card .kura-moshu .val {
    margin: 0;
    font-size: 12px;
    line-height: 1.3;
    color: #4a3f2c;
}
.sg-kura-card .kura-moshu .val b {
    display: block;
    margin-top: 1px;
    font-size: 15px;
}
.sg-kura-card .kura-moshu.none {
    border-style: dashed;
    border-color: #c4b8a4;
}
.sg-kura-card .kura-moshu.none .ttl { color: #a89c88; }
.sg-kura-card .kura-moshu.none .val b { color: #a89c88; }

/* カードそのものを豪華枠にする（画像素材/豪華枠/豪華枠.png 442x320 の9スライス）
   角丸(半径約24px)＋外周の影を含めて スライス42px。四隅は固定、辺だけ伸縮するので
   カードの幅・高さを変えても角の丸みと影が崩れない。
   fill を付けているので中央の和紙テクスチャがそのまま中身の背景になる */
.sg-kura-card {
    flex: 1;
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    padding: 0;
    background: none;
    border: 22px solid transparent;
    border-image: url('../img/senmangoku/kura_frame.png') 42 fill stretch;
    text-align: center;
}
.sg-kura-card .name {
    margin: 0 0 2px;
    font-size: 26px;
    font-weight: bold;
    letter-spacing: 2px;
    line-height: 1.3;
    color: #3a2708;
}
/* アイコンと「1国内の総数」を横並びにする（2026-08-07 レイアウト変更） */
.sg-kura-card .kura-head {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin: 4px 0 4px;
}
.sg-kura-card .icon {
    display: block;
    flex: 0 0 88px;
    margin: 0;
    width: 88px;
    height: auto;
}
.sg-kura-card .kura-count {
    flex: 0 0 auto;
    text-align: center;
}
.sg-kura-card .kura-count .lbl {
    display: inline-block;
    margin: 0 0 2px;
    padding: 1px 7px 2px;
    background: rgba(90, 70, 40, .1);
    border-radius: 3px;
    font-size: 11px;
    line-height: 1.3;
    color: #6b5a38;
    white-space: nowrap;
}
.sg-kura-card .kura-count .val {
    margin: 0;
    font-size: 27px;
    font-weight: bold;
    line-height: 1.1;
    color: #3a2708;
}
.sg-kura-card .kura-count .val small { font-size: 15px; margin-left: 1px; }
/* 石高がメイン、総数と陥落戦功はサブ情報として区分けする */
.sg-kura-card .kura-main {
    margin: 2px 0 8px;
    padding: 5px 0 3px;
    border-top: 1px solid #cbbfa2;
    border-bottom: 1px solid #cbbfa2;
}
.sg-kura-card .kura-main .lbl {
    margin: 0;
    font-size: 13px;
    letter-spacing: 1px;
    color: #6b5a38;
}
.sg-kura-card .kura-main .val {
    margin: 0;
    font-size: 34px;
    font-weight: bold;
    line-height: 1.15;
    letter-spacing: 1px;
    color: #a3121c;
}
/* 陥落戦功の1行だけ。ラベル左・数値右 */
.sg-kura-card .kura-sub {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 0 6px;
    margin: 0 0 6px;
    align-items: baseline;
    text-align: left;
}
.sg-kura-card .kura-sub dt {
    font-size: 12px;
    color: #7c6c4d;
}
.sg-kura-card .kura-sub dd {
    margin: 0;
    font-size: 15px;
    font-weight: bold;
    text-align: right;
    color: #4a3f2c;
}
.sg-kura-card .kura-sub dd small { font-size: 12px; }

/* ------------------------------------------------------------------------
汎用フキダシ .fk
  <p class="fk fk--l">本文</p>            … 左向きのシッポ付き
  <p class="fk fk--r fk-t80">本文</p>     … 右向き / シッポを下寄せ
  向き: fk--l 左 / fk--r 右 / fk--t 上 / fk--b 下 (省略で枠のみ)
  素材: img/senmangoku/balloon/body.png(120x120, スライス幅36px) + tail_*.png
  → 絵柄を差し替えるときは同じサイズ・同じスライス幅で作り直せばCSSは触らなくてよい

  ★シッポの位置は変数で計算している。絶対配置の基準は border-box ではなく
    padding-box なので、枠の太さ(--fk-border)を足さないと本体に埋まる。
------------------------------------------------------------------------ */
.fk {
    position: relative;
    box-sizing: border-box;
    margin: 0;
    padding: 0 2px;
    border: 14px solid transparent;
    border-image: url('../img/senmangoku/balloon/body.png') 36 fill stretch;
    font-size: 13px;
    line-height: 1.5;
    text-align: center;
}

/* 既定値: 枠14px / シッポ 20(突き出し) x 24(付け根) / 本体への重なり4px */
.fk--l,
.fk--r,
.fk--t,
.fk--b {
    --fk-border: 14px;
    --fk-tail: 20px;
    --fk-base: 24px;
    --fk-overlap: 4px;
    --fk-out: calc((var(--fk-border) + var(--fk-tail) - var(--fk-overlap)) * -1);
}
.fk--l::before,
.fk--r::before,
.fk--t::before,
.fk--b::before {
    content: '';
    position: absolute;
    background-repeat: no-repeat;
    background-size: 100% 100%;
}
/* 左右向き */
.fk--l::before,
.fk--r::before {
    width: var(--fk-tail);
    height: var(--fk-base);
    top: 50%;
    margin-top: calc(var(--fk-base) / -2);
}
.fk--l::before { left: var(--fk-out);  background-image: url('../img/senmangoku/balloon/tail_l.png'); }
.fk--r::before { right: var(--fk-out); background-image: url('../img/senmangoku/balloon/tail_r.png'); }
/* 上下向き(幅と高さが入れ替わる) */
.fk--t::before,
.fk--b::before {
    width: var(--fk-base);
    height: var(--fk-tail);
    left: 50%;
    margin-left: calc(var(--fk-base) / -2);
}
.fk--t::before { top: var(--fk-out);    background-image: url('../img/senmangoku/balloon/tail_t.png'); }
.fk--b::before { bottom: var(--fk-out); background-image: url('../img/senmangoku/balloon/tail_b.png'); }

/* 大きめのフキダシ(キャラのセリフ用)はシッポも枠も大きい */
.sg-balloon.fk--l,
.sg-balloon.fk--r {
    --fk-border: 18px;
    --fk-tail: 30px;
    --fk-base: 36px;
    --fk-overlap: 6px;
}

/* シッポの位置ずらし(左右向きのとき: 上下方向) */
.fk-t20::before { top: 24%; }
.fk-t80::before { top: 76%; }
/* シッポの位置ずらし(上下向きのとき: 左右方向) */
.fk-l25::before { left: 25%; }
.fk-l75::before { left: 75%; }

/* ---- 蔵の配置マップ（巻物1枚。マップ・拡大パーツ・引き出し線は画像に含まれる）
   フキダシとキャラだけHTMLで上に重ねている ---- */
.sg-map {
    position: relative;
    margin: 0 20px 24px;
    height: 455px;
}
.sg-map .map {
    position: absolute;
    left: 0;
    top: 0;
    width: 890px;
}
.sg-balloon {
    position: absolute;
    box-sizing: border-box;
    margin: 0;
    padding: 2px 6px;
    border: 18px solid transparent;
    border-image: url('../img/senmangoku/balloon/body.png') 36 fill stretch;
    font-size: 16px;
    font-weight: bold;
    line-height: 1.6;
    text-align: center;
}
/* 地図(暗い盤面)は kura_map.jpg の x62-603 / y60-411。城アイコンは y320 までしか
   無いので、フキダシの上端を 310 まで下げると盤面の空きスペースにだけ乗る。
   下端(440)は巻物の内側の下端(447)ギリギリ。 */
.sg-map .sg-balloon {
    left: 452px;
    top: 310px;
    width: 292px;
    font-size: 14px;
}
.sg-map .chara {
    position: absolute;
    right: 8px;
    /* 巻物の内側の下端ギリギリに足元が来る位置 */
    top: 272px;
    width: 150px;
}

/* ---- 攻撃国／防御国 2カラム ---- */
.sg-cols {
    display: flex;
    gap: 14px;
    margin: 0 20px 24px;
    align-items: flex-start;
}
.sg-col {
    flex: 1;
    background: #f4f4f4;
    border: 2px solid #2b2b2b;
    border-radius: 4px;
    padding: 14px 14px 18px;
}
.sg-col > h3 {
    display: inline-block;
    margin: 0 0 12px;
    padding: 7px 18px;
    color: #fff;
    font-size: 18px;
    letter-spacing: 1px;
    border-radius: 3px;
}
.sg-col.atk > h3 { background: #d70b18; }
.sg-col.def > h3 { background: #22a3e0; }
.sg-col p {
    margin: 0 0 12px;
    font-size: 15px;
    line-height: 1.7;
    text-align: left;
}
.sg-col h4 {
    margin: 16px 0 8px;
    font-size: 16px;
    border-bottom: 2px solid #2b2b2b;
    padding-bottom: 3px;
    text-align: left;
}
.sg-col ul {
    margin: 0 0 12px;
    padding: 0;
    list-style: none;
    font-size: 15px;
    line-height: 1.7;
    text-align: left;
}
.sg-col ul li {
    padding-left: 1em;
    text-indent: -1em;
    margin-bottom: 4px;
}

/* ---- 表 ---- */
.sg-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 15px;
    background: #fff;
    margin-bottom: 12px;
}
.sg-table th {
    background: #c8951e;
    color: #fff;
    font-size: 14px;
    padding: 5px 4px;
    border: 1px solid #2b2b2b;
    white-space: nowrap;
}
.sg-table td {
    border: 1px solid #2b2b2b;
    padding: 8px 6px;
    text-align: center;
    line-height: 1.5;
}
.sg-table td.kura {
    width: 108px;
    font-weight: bold;
}
.sg-table td.kura img {
    margin: 2px auto 0;
    width: 62px;
    height: auto;
}
.sg-table td.hl { background: #ffff00; font-weight: bold; }
.sg-table td.na { background: #9c9c9c; color: #fff; }
.sg-table td.num { white-space: nowrap; }

/* ---- 図版待ちのプレースホルダ ---- */
.sg-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    margin: 0 0 12px;
    padding: 20px 10px;
    min-height: 150px;
    background: #dbeaf7;
    border: 3px dashed #3b7fb5;
    border-radius: 14px;
    color: #2b5c86;
    font-size: 15px;
    line-height: 1.7;
    font-weight: bold;
}
.sg-placeholder.tall { min-height: 260px; }

/* ---- 行軍力のカウント例（原稿「32章特設ページ修正_追記.xlsx」の図をHTML化）
       「攻撃国時の特別ルール」カラム内（実効幅 約396px）に収まる縦積みレイアウト ---- */
.sg-kougun {
    margin: 0 0 14px;
    background: #fff;
    border: 2px solid #2b2b2b;
    border-radius: 4px;
    overflow: hidden;
}
.sg-kougun > .ttl {
    margin: 0;
    padding: 8px 0;
    background: #1a1a1a;
    color: #fff;
    font-size: 16px;
    font-weight: bold;
    text-align: center;
    letter-spacing: 1px;
}
.sg-kougun > .sub {
    margin: 8px 8px 4px;
    font-size: 13px;
    text-align: center;
}

.kg-row {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 8px 8px 10px;
}
.kg-note + .kg-row { border-top: 1px dashed #b0b0b0; }

/* 城主（キャラ＋行軍力バッジ） */
.kg-chara {
    width: 104px;
    flex: 0 0 104px;
    text-align: center;
}
.kg-chara img {
    display: block;
    margin: 0 auto;
    width: 92px;
}
.kg-chara .kg-name {
    margin: 2px 0 0;
    font-size: 13px;
    font-weight: bold;
}
.sg-kp {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 76px;
    height: 62px;
    margin: 0 auto 2px;
    border-radius: 50%;
    line-height: 1;
}
.sg-kp b { font-size: 12px; }
.sg-kp span { font-size: 26px; font-weight: bold; margin-top: 1px; }
.sg-kp.y { background: #ffc000; color: #000; }
.sg-kp.r { background: #e60012; color: #fff; }

/* 攻撃先（矢印＋蔵アイコン） */
.kg-targets { flex: 1; }
.kg-line {
    display: flex;
    align-items: center;
    gap: 2px;
}
.kg-line + .kg-line { margin-top: 10px; }
.kg-arrow {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 44px;
    padding-right: 22px;
    color: #fff;
    font-size: 15px;
    font-weight: normal;
    white-space: nowrap;
    clip-path: polygon(0 24%, 76% 24%, 76% 0, 100% 50%, 76% 100%, 76% 76%, 0 76%);
}
.kg-arrow b { font-weight: bold; }
.kg-arrow.y { background: #ffc000; color: #000; }
.kg-arrow.b { background: #4a9fd8; }
/* 蔵アイコンと並べる薄い黄色の矢印 */
.kg-arrow.pale { background: #ffe699; color: #1a1a1a; }
.kg-line .kura {
    flex: 0 0 62px;
    width: 62px;
}
.kg-line .kome-set {
    flex: 0 0 62px;
    width: 62px;
}
.kg-line .kome-set img {
    display: block;
    width: 62px;
    margin-top: -22px;
}
.kg-line .kome-set img:first-child { margin-top: 0; }

/* 城主のひとこと */
.sg-kougun .kg-note {
    margin: 0 8px 10px;
    padding: 5px 8px;
    border: 1px solid #2b2b2b;
    font-size: 13px;
    font-weight: bold;
    line-height: 1.5;
    text-align: center;
}
.sg-kougun .kg-note.y { background: #fff6da; border-color: #c8951e; }
.sg-kougun .kg-note.b { background: #e9f3fb; border-color: #3b7fb5; }

/* ---- 石高増減 / 陣営VS などの図版 ---- */
.sg-fig {
    margin: 0 auto 18px;
    display: block;
}

/* ---- フロー図の枠内・下部に置く補足文 ---- */
.sg-flow-note {
    margin: 16px 4px 0;
    padding-top: 14px;
    border-top: 1px solid #c9c9c9;
    font-size: 14px;
    line-height: 1.7;
    font-weight: bold;
    text-align: center;
}
.sg-flow-note + .sg-flow-note {
    margin-top: 10px;
    padding-top: 0;
    border-top: none;
}

/* ---- ルール一覧（3ブロックをまとめて中央寄せ・中身は左揃え）
   display:table で内容幅に縮み、margin:auto で中央に来る。
   各行は flex なのでルール番号バッジが縦に揃う。 ---- */
.sg-rules {
    display: table;
    margin: 0 auto 20px;
    /* 枠で囲む。display:table なので内容幅に縮んだまま中央に来る。
       枠線の太さ・色は .sg-flow の図版枠に合わせている */
    padding: 16px 24px;
    background: #fff;
    border: 2px solid #2b2b2b;
}
.sg-rule-item {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin: 0 0 14px;
    font-size: 17px;
    line-height: 1.7;
    font-weight: bold;
    text-align: left;
}
.sg-rule-item:last-child { margin-bottom: 0; }
/* ルール枠の中に置く前置き。ルール本体と同じ太字だが1段小さくする */
.sg-rules-lead {
    margin: 0 0 14px;
    padding-bottom: 13px;
    border-bottom: 1px solid #c9c9c9;
    font-size: 16px;
    line-height: 1.7;
    font-weight: bold;
    text-align: center;
}
/* ルール枠の中のかけあい。左右のキャラを向かい合わせ、外側にフキダシを置く。
   フキダシは汎用の .fk（9スライス）を使う。しっぽは内側のキャラを指す向きにする
   （左のフキダシ=fk--r、右のフキダシ=fk--l） */
.sg-rules-face {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    margin: 6px 0 16px;
}
.sg-rules-face .fk {
    width: 208px;
    font-size: 14px;
    line-height: 1.6;
    text-align: center;
}
/* 原寸の縦横比が違うので、幅ではなく高さで背丈を揃える */
.sg-rules-face .chara {
    height: 152px;
    width: auto;
}
/* 猫は刀が左へ突き出ているので、犬に当たらないよう少し右へ寄せる */
.sg-rules-face .chara + .chara {
    height: 140px;
    margin-left: 10px;
}

/* ルール枠の中に置く結び。区切り線を引いてルール本体と分ける */
.sg-rules-note {
    margin: 14px 0 0;
    padding-top: 13px;
    border-top: 1px solid #c9c9c9;
    font-size: 17px;
    line-height: 1.7;
    font-weight: bold;
    text-align: center;
}
.sg-rule-item > .sg-rule {
    flex: 0 0 auto;
    margin-right: 0;
}

/* ---- ルール番号バッジ（本文＋フキダシ内） ---- */
.sg-rule,
.fk-rule {
    display: inline-block;
    border-radius: 3px;
    color: #fff;
    font-weight: bold;
    letter-spacing: 1px;
}
.sg-rule {
    margin-right: 10px;
    padding: 2px 12px;
    font-size: 15px;
    vertical-align: 2px;
}
.fk-rule {
    margin: 0 auto 5px;
    padding: 1px 9px 2px;
    font-size: 11px;
}
.fk .fk-rule { display: table; }
.sg-rule.r1, .fk-rule.r1 { background: #c8951e; }
.sg-rule.r2, .fk-rule.r2 { background: #1d2540; }
.sg-rule.r3, .fk-rule.r3 { background: #7a3f8f; }

/* ---- 図と図をつなぐ「抽選後」の下向き矢印 ---- */
.sg-flow-next {
    margin: 0 20px 16px;
    text-align: center;
}
.sg-flow-next span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    width: 220px;
    height: 52px;
    padding-bottom: 12px;
    background: #8b8f9c;
    color: #fff;
    font-size: 17px;
    font-weight: bold;
    letter-spacing: 2px;
    clip-path: polygon(22% 0, 78% 0, 78% 64%, 100% 64%, 50% 100%, 0 64%, 22% 64%);
}

/* ---- 陣営決定フロー図 ---- */
.sg-flow {
    margin: 0 20px 18px;
    padding: 14px 16px 18px;
    background: #f4f4f4;
    border: 2px solid #2b2b2b;
}
.sg-flow > .ttl {
    margin: 0 0 12px;
    font-size: 16px;
    font-weight: bold;
    text-align: left;
}
.sg-flow-row {
    display: flex;
    align-items: flex-start;
    /* 左右端に振り分けず、2ブロックを左詰めで並べる(間に区切り線) */
    justify-content: flex-start;
}
.sg-flow-side {
    display: flex;
    align-items: flex-start;
    gap: 8px;
}
.sg-flow-side + .sg-flow-side {
    margin-left: 18px;
    padding-left: 18px;
    border-left: 1px dashed #9a9a9a;
}
.sg-flow-col { width: 92px; }
.sg-flow-col > .cap {
    font-size: 12px;
    text-align: center;
    margin: 0 0 4px;
    white-space: nowrap;
}
.sg-box {
    border: 1px solid #000;
    text-align: center;
    font-size: 13px;
    padding: 5px 0;
    background: #fff;
}
.sg-box + .sg-box { border-top: none; }
.sg-box.o { background: #ffc000; }
.sg-box.g { background: #92d050; }
/* 埋まっていない枠（希望を出した国が定員に満たないことを示す） */
.sg-box.empty {
    background: #fff;
    border-style: dashed;
    color: #9a9a9a;
}
.sg-big {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 176px;
    font-size: 15px;
    font-weight: bold;
    border: 1px solid #000;
}
.sg-big.o { background: #ffc000; }
.sg-big.g { background: #92d050; }
.sg-arrow {
    align-self: center;
    font-size: 20px;
    line-height: 1;
    color: #ffc000;
}
.sg-arrow.g { color: #92d050; }
.sg-flow .fk {
    width: 176px;
    font-size: 12px;
}
.sg-flow .fk + .fk { margin-top: 10px; }

/* ---- 天下統一戦のドラフト（希望順位表／5巡の進行）----
   .sg-flow の内寸は 930 - margin40 - padding32 - border4 = 854px。
   希望順位表は「陣営」列＋10列で目一杯なので font-size を落として詰めている。 */
.sg-draft {
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed;
    font-size: 13px;
    text-align: center;
}
.sg-draft th,
.sg-draft td {
    border: 1px solid #2b2b2b;
    padding: 5px 2px;
    background: #fff;
}
.sg-draft th { background: #e4e4e4; font-weight: bold; }
.sg-draft th.o { background: #ffc000; }
.sg-draft th.g { background: #92d050; }
/* 陣営名は折り返さない。残り(854-120)を10列で割って1列73px */
.sg-draft th.o,
.sg-draft th.g { width: 120px; white-space: nowrap; }

/* ---- 決定できる合戦ルールの一覧（報酬②）----
   支給素材「オプション表示枠.png」を部品化して組んだもの（更新差分/make_ropt_parts.py）。
     ropt_row.png  890x111  帯＋左の巻物プレート。1行ぶんの背景
     ropt_chip.png 114x86   選択肢の箱。9スライスで文字数に追従させる
   支給素材は3択固定だが実際は2〜6択あるので、箱を1つだけ抜いて伸縮させている。 */
.sg-ropt {
    width: 780px;
    margin: 0 auto 18px;
}
/* 行の背景は箱まで焼き込み済み(make_ropt_parts.py がベクター原稿から生成)。
   箱の数ごとに1枚あり、箱位置はCSSの space-evenly と同じ計算で焼いてあるので、
   下の .chip 幅(96/78)を変えるときは GEOM も合わせて再生成すること */
.sg-ropt .ropt-row {
    display: flex;
    align-items: center;
    box-sizing: border-box;
    width: 780px;
    height: 70px;
    background: no-repeat 0 0;
}
.sg-ropt .ropt-row.rn2 { background-image: url('../img/senmangoku/hoshu/ropt_row_n2.jpg'); }
.sg-ropt .ropt-row.rn3 { background-image: url('../img/senmangoku/hoshu/ropt_row_n3.jpg'); }
.sg-ropt .ropt-row.rn4 { background-image: url('../img/senmangoku/hoshu/ropt_row_n4.jpg'); }
.sg-ropt .ropt-row.rn6 { background-image: url('../img/senmangoku/hoshu/ropt_row_n6.jpg'); }
.sg-ropt .ropt-row + .ropt-row { margin-top: 2px; }

/* 項目名。巻物プレート(250px)の上に載せる。左右は軸と破れ端をよける */
.sg-ropt .item {
    flex: 0 0 250px;
    box-sizing: border-box;
    margin: 0;
    padding: 0 30px 0 24px;
    font-size: 14px;
    font-weight: bold;
    line-height: 1.3;
    color: #3a2a18;
    text-align: center;
}
.sg-ropt .item .sub {
    display: block;
    margin-top: 1px;
    font-size: 10px;
    line-height: 1.25;
    color: #5f4a32;
}

/* 選択肢の文字。背景の箱と同じ space-evenly 配置で重ねる */
.sg-ropt .opts {
    flex: 1;
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: space-evenly;
    gap: 0;
    /* 帯の右端の飾り(CAP_W=8px)ぶん。make_ropt_parts.py の焼き込み位置と連動 */
    padding-right: 8px;
}
.sg-ropt .chip {
    display: flex;
    flex-direction: column;   /* 「（変更なし）」を2行目に落とす */
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    width: 96px;
    min-height: 46px;
    padding: 0 4px;
    font-size: 12px;
    font-weight: bold;
    line-height: 1.35;
    color: #2b1a10;
    text-align: center;
    white-space: nowrap;
}
.sg-ropt .chip small {
    font-size: 9.5px;
    font-weight: bold;
    line-height: 1.25;
    color: #6b4a1e;
}
.sg-ropt .opts.n6 .chip { width: 78px; }

/* ---- 5巡の進行（◀▶で1巡ずつ進めるスライド）----
   JSが無効でも全5巡が縦に並ぶだけで意味が通るように、既定は「全部見えている」。
   JSが .js-on を付けたときだけ、現在の巡以外を隠す。 */
/* 見出しの直後に置く操作の案内。JSが動くときだけ出す */
.sg-dp-guide { display: none; }
.sg-dp.js-on .sg-dp-guide {
    display: block;
    margin: 0 0 12px;
    font-size: 13px;
    color: #6b6b6b;
    text-align: center;
}
.sg-dp-ctrl { display: none; }
.sg-dp.js-on .sg-dp-ctrl {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    margin: 0 0 14px;
}
.sg-dp-btn {
    width: 44px;
    height: 34px;
    padding: 0;
    background: #1d2540;
    border: none;
    border-radius: 4px;
    color: #fff;
    font-size: 15px;
    line-height: 34px;
    cursor: pointer;
}
.sg-dp-btn:hover { background: #33406b; }
.sg-dp-btn:disabled { background: #c3c3c3; cursor: default; }
.sg-dp-label {
    min-width: 108px;   /* 「希望提出」と「第N巡」で幅が変わってボタンが動くのを防ぐ */
    font-size: 18px;
    font-weight: bold;
    letter-spacing: 1px;
    text-align: center;
}
/* 盤面(希望順位表)の見出し */
.sg-dp-boardttl {
    margin: 0 0 6px;
    font-size: 14px;
    font-weight: bold;
    text-align: left;
}
.sg-dp-label b { color: #c00000; font-size: 22px; margin: 0 2px; }

/* 希望順位表を盤面として使う。配属済みは陣営色に沈め、今回の指名だけ立たせる */
.sg-dp-board { margin-bottom: 16px; }
.sg-dp-board td { transition: background .25s, color .25s, opacity .25s; }
/* 同じ国が両方の行に出るので、行ごとに結果を出し分ける。
   won-* = その行の陣営が獲得した／lost = 取れなかった */
.sg-dp-board td.won-o { background: #ffc000; font-weight: bold; }
.sg-dp-board td.won-g { background: #92d050; font-weight: bold; }
.sg-dp-board td.lost {
    background: #ededed;
    color: #9a9a9a;
    text-decoration: line-through;
}
/* 重複していないのに相手が取っていった国。取り合っていないので打ち消し線は付けない */
.sg-dp-board td.gone {
    background: #f4f4f4;
    color: #b5b5b5;
}
/* その巡で決まったところだけ赤枠で立たせる */
.sg-dp-board td.now { box-shadow: inset 0 0 0 2px #c00000; }

/* 両陣営の枠。巡が進むと上から埋まる */
.sg-dp-camps {
    display: flex;
    justify-content: center;
    gap: 56px;
    margin-bottom: 14px;
}
.sg-dp-camp > .cap {
    margin: 0 0 4px;
    font-size: 13px;
    font-weight: bold;
    text-align: center;
}
.sg-dp-slots { width: 132px; }
.sg-dp-slots .slot {
    border: 1px solid #000;
    padding: 5px 0;
    font-size: 13px;
    text-align: center;
    transition: background .25s, color .25s;
}
.sg-dp-slots .slot + .slot { border-top: none; }
.sg-dp-slots .slot.o { background: #ffc000; }
.sg-dp-slots .slot.g { background: #92d050; }
/* 未確定の枠は中身を伏せる（JS有効時のみ。文字は消さず透明にして高さを保つ） */
.sg-dp.js-on .sg-dp-slots .slot.pending {
    background: #fff;
    border-style: dashed;
    color: transparent;
}
.sg-dp.js-on .sg-dp-slots .slot.now { font-weight: bold; box-shadow: inset 0 0 0 2px #c00000; }

/* 解説文 */
.sg-dp-desc {
    margin: 0 0 8px;
    font-size: 13px;
    line-height: 1.7;
    text-align: left;
}
.sg-dp-desc:last-child { margin-bottom: 0; }
.sg-dp-desc b { color: #c00000; }
.sg-dp-tag {
    display: inline-block;
    margin-right: 8px;
    padding: 1px 9px 2px;
    background: #1d2540;
    border-radius: 3px;
    color: #fff;
    font-size: 12px;
    vertical-align: 1px;
}
.sg-dp.js-on .sg-dp-desc { display: none; }
.sg-dp.js-on .sg-dp-desc.on { display: block; }
.sg-dp.js-on .sg-dp-tag { display: none; }
/* 操作ボタンの直下に置くので、図のキャプションとして中央寄せにする。
   JS無効時は5巡ぶんが縦に並ぶ一覧なので、そちらは左揃えのまま */
.sg-dp.js-on .sg-dp-descs {
    margin: 0 0 16px;
    min-height: 48px;   /* 巡ごとの行数差で下の図が上下しないように */
}
.sg-dp.js-on .sg-dp-desc { text-align: center; }

/* ---- キャラ吹き出し ---- */
.sg-chara-talk {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    margin: 6px 20px 0;
}
/* 直前の図版の下端に重ねるパターン。
   石高達成報酬の図は下80pxほどが空きなので、そこへキャラを食い込ませる。
   z-index は保険（本来はDOM順で後のインライン内容が上に来る） */
.sg-chara-talk--overlap {
    position: relative;
    z-index: 1;
    margin-top: -100px;
}
/* キャラを右に置くパターン */
.sg-chara-talk--right {
    justify-content: center;
    margin-bottom: 24px;
}
.sg-chara-talk--right img { width: 150px; }
.sg-chara-talk--right .sg-balloon { width: 400px; }
.sg-chara-talk img { width: 176px; }
.sg-chara-talk .sg-balloon {
    position: relative;
    width: 420px;
}
/* 文が長いセリフ用。本文幅890に対し キャラ176 + 隙間4 + 580 = 760 で収まる。
   同じ詳細度の .sg-chara-talk .sg-balloon に負けないよう、必ず後ろに置くこと */
.sg-chara-talk--wide .sg-balloon { width: 580px; }

/* ---- 報酬セクション ---- */
.sg-right { text-align: right; margin-right: 24px; }

/* 全幅で使う表（報酬獲得条件・1票の重み） */
.sg-table--wide {
    width: 720px;
    margin: 0 auto 10px;
    font-size: 15px;
}
.sg-table--wide th { font-size: 16px; padding: 7px 4px; }
.sg-table--wide td { padding: 9px 10px; }
.sg-table--wide td.cond {
    width: 270px;
    font-weight: bold;
    background: #f7f2e6;
}
.sg-table--wide th.w { width: 130px; }
.sg-table--wide td.num { width: 130px; font-weight: bold; white-space: nowrap; }

/* 注意事項 */
.sg-caution {
    margin: 18px 20px 0;
    text-align: left;
    padding: 12px 18px 14px;
    background: #fff;
    border: 2px solid #2b2b2b;
    border-radius: 4px;
}
.sg-caution .ttl {
    margin: 0 0 6px;
    font-size: 15px;
    font-weight: bold;
}
.sg-caution ul {
    margin: 0;
    padding: 0;
    list-style: none;
    font-size: 14px;
    line-height: 1.7;
}
.sg-caution li {
    padding-left: 1em;
    text-indent: -1em;
    margin-bottom: 3px;
}
.sg-caution li .sub {
    display: block;
    padding-left: 2em;
    text-indent: 0;
}

/* ---- 内容が未確定のブロック（原稿待ち。納品前に必ず解消する） ---- */
.sg-tbd {
    margin: 0 20px 22px;
    padding: 12px 18px 14px;
    background: #fff8e8;
    border: 3px dashed #e08a00;
    border-radius: 8px;
    text-align: left;
    font-size: 15px;
    line-height: 1.7;
    color: #6b4e12;
}
.sg-tbd .ttl {
    margin: 0 0 4px;
    font-size: 17px;
    font-weight: bold;
    color: #c46a00;
}
.sg-tbd p { margin: 0; }
.sg-tbd .memo {
    display: block;
    margin-top: 4px;
    font-size: 13px;
    color: #97803f;
}