@charset "UTF-8";
/* ------------------------------------------------------------------------
テキスト上乗せ部品（文字なし背景画像 + HTMLテキスト）
使い方:
  <div class="txt-sec" id="targetDivN">
    <img class="txt-sec-bg" src="./img/notext/00N.png" alt="">
    <h2 class="sec-title">見出しテキスト</h2>
    <p class="ov" style="left:XXpx; top:XXpx;">本文…</p>
    <table class="ov-table" style="left:XXpx; top:XXpx; width:XXXpx;">…</table>
  </div>
※ #wrapper は930px固定のため、座標はすべてpx指定でよい
------------------------------------------------------------------------ */

.txt-sec {
    position: relative;
    width: 930px;
}
.txt-sec-bg {
    display: block;
    width: 930px;
    height: auto;
}

/* 絶対配置の汎用ボックス（left/top/width はインラインで指定） */
.txt-sec .ov {
    position: absolute;
    margin: 0;
    color: #000;
    font-family: Meiryo, 'Hiragino Kaku Gothic ProN', sans-serif;
    font-weight: bold;
    font-size: 20px;
    line-height: 1.6;
    text-align: center;
}
.txt-sec .ov.align-left { text-align: left; }

/* 見出し帯（紺×金枠バナー）上の白文字
   帯は各画像の上部 y≒30〜95px 付近・幅930px想定。座標は現物合わせで微調整 */
.txt-sec .sec-title {
    position: absolute;
    left: 0;
    top: 42px;
    width: 930px;
    margin: 0;
    color: #fff;
    font-family: 'Yu Mincho', 'YuMincho', 'Hiragino Mincho ProN', serif;
    font-weight: bold;
    font-size: 30px;
    line-height: 1;
    letter-spacing: 2px;
    text-align: center;
    text-shadow: 0 0 6px rgba(0, 0, 40, 0.9), 0 2px 3px rgba(0, 0, 0, 0.8);
}

/* 強調（赤字・黄字・サイズ違い） */
.txt-sec .em-red { color: #e60000; }
.txt-sec .em-yellow { color: #ffe100; }
.txt-sec .em-large { font-size: 1.3em; }

/* 注釈（※〜） */
.txt-sec .note {
    position: absolute;
    margin: 0;
    color: #000;
    font-weight: bold;
    font-size: 14px;
    line-height: 1.7;
    text-align: left;
}

/* 表の上乗せ:
   罫線・帯・背景色は背景画像側に残し、HTML側は透明セルに文字だけ載せる。
   行高・列幅を画像に合わせて固定すること */
.txt-sec .ov-table {
    position: absolute;
    border-collapse: collapse;
    table-layout: fixed;
    background: transparent;
    color: #000;
    font-weight: bold;
    font-size: 16px;
}
.txt-sec .ov-table th,
.txt-sec .ov-table td {
    padding: 0;
    border: none;
    text-align: center;
    vertical-align: middle;
    overflow: hidden;
}

/* 中心アンカー: left/top に「中心座標」を指定して使う */
.txt-sec .ctr {
    transform: translate(-50%, -50%);
    white-space: nowrap;
}

/* アイコン等の画像部品を任意の場所に置く（left/top/width はインラインで指定） */
.txt-sec .ov-img {
    position: absolute;
    margin: 0;
}

/* アイコン下の小ラベル（黒文字＋白フチ） */
.txt-sec .ov-label {
    position: absolute;
    margin: 0;
    color: #111;
    font-family: Meiryo, 'Hiragino Kaku Gothic ProN', sans-serif;
    font-weight: bold;
    font-size: 13px;
    line-height: 1;
    text-shadow:
        1px 1px 0 #fff, -1px 1px 0 #fff, 1px -1px 0 #fff, -1px -1px 0 #fff,
        1px 0 0 #fff, -1px 0 0 #fff, 0 1px 0 #fff, 0 -1px 0 #fff;
}

/* 本文テキスト（濃グレー・左寄せ・行送り34px）
   ※元画像の本文は平均19.4px/字。19px+字間0.4pxで幅を合わせる */
.txt-sec .ov-body {
    position: absolute;
    margin: 0;
    color: #333;
    font-family: Meiryo, 'Hiragino Kaku Gothic ProN', sans-serif;
    font-weight: bold;
    font-size: 19px;
    letter-spacing: 0.4px;
    line-height: 34px;
    text-align: left;
}
/* 「①〜」段落のぶら下げインデント */
.txt-sec .ov-body.hang {
    padding-left: 21px;
    text-indent: -21px;
}

/* 白抜き文字（色付き矢印上のラベルなど） */
.txt-sec .ov-white {
    position: absolute;
    margin: 0;
    color: #fff;
    font-family: Meiryo, 'Hiragino Kaku Gothic ProN', sans-serif;
    font-weight: bold;
    font-size: 20px;
    line-height: 23px;
    text-align: center;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
}

/* 白フチ強調（論功行賞の枚数など地色の上に直接乗る文字） */
.txt-sec .outline-w {
    text-shadow:
        2px 2px 0 #fff, -2px 2px 0 #fff, 2px -2px 0 #fff, -2px -2px 0 #fff,
        2px 0 0 #fff, -2px 0 0 #fff, 0 2px 0 #fff, 0 -2px 0 #fff,
        1px 1px 0 #fff, -1px 1px 0 #fff, 1px -1px 0 #fff, -1px -1px 0 #fff;
}

/* 文字色・サイズのユーティリティ */
.txt-sec .r { color: #e43032; }
.txt-sec .f12 { font-size: 12px; }
.txt-sec .f14 { font-size: 14px; letter-spacing: -0.5px; }
.txt-sec .f15 { font-size: 15px; }
.txt-sec .f17 { font-size: 17px; }
.txt-sec .f18 { font-size: 18px; }
.txt-sec .f21 { font-size: 21px; }
.txt-sec .f24 { font-size: 24px; }

/* 表の標準文字（黒・太字19px） */
.txt-sec .ov-table td {
    font-family: Meiryo, 'Hiragino Kaku Gothic ProN', sans-serif;
    color: #111;
    line-height: 1;
    white-space: nowrap;
}

/* ========================================================================
   セクション固有の座標定義（011〜019）
   ======================================================================== */

/* --- 011: 国別格付（戦果）による報酬 --- */
.sec011 .sec011-table { left: 125px; top: 215px; width: 761px; }
.sec011 .sec011-table td { height: 40.65px; font-size: 19px; text-align: center; }
.sec011 .sec011-table td.c5 { font-size: 14px; letter-spacing: -0.5px; }

/* --- 012: 同盟内の役職による報酬 --- */
.sec012 .sec012-table { left: 183px; top: 372.6px; width: 584px; }
.sec012 .sec012-table td { height: 40.7px; font-size: 19px; text-align: center; }
.sec012 .sec012-table td.role { font-size: 18px; text-align: left; }
.sec012 .sec012-table td.c4 { font-size: 14px; }

/* --- 013: 国別格付「同盟戦果」順位による報酬／論功行賞 --- */
.sec013 .sec013-table { width: 569px; left: 305px; }
.sec013 .sec013-table td { height: 41px; font-size: 19px; text-align: center; }
.sec013 .sec013-table td.cond { font-size: 15px; }
.sec013 .sec013-table td.c5 { font-size: 15px; }
.sec013 .b1 { top: 223.5px; }
.sec013 .b2 { top: 394px; }
.sec013 .b3 { top: 563.5px; }
.sec013 .b4 { top: 693px; }
.sec013 .b5 { top: 782px; }

/* --- 014/015: 全体格付（戦果／同盟戦果） --- */
.zentai-table td { height: 40.7px; font-size: 19px; text-align: center; }
.zentai-a { left: 208px; width: 314.5px; }
.zentai-b { left: 548px; width: 316px; }
.sec014 .zentai-table { top: 297.65px; }
.sec015 .zentai-table { top: 296.65px; }

/* --- 016: 全体格付「一戦撃破」「一戦防衛」順位 --- */
.sec016 .sec016-table { top: 242.6px; width: 278px; }
.sec016 .sec016-table td { height: 45.83px; font-size: 24px; text-align: center; }
.sec016 .sec016-table td.imyo { font-size: 17px; }
.sec016 .sec016-a { left: 165px; }
.sec016 .sec016-b { left: 600px; }

/* --- 018: 文字ピッチ19.4px/字は維持しつつグリフを一回り大きく --- */
.sec018 .ov-body { font-size: 20px; letter-spacing: -0.6px; }

/* --- 019: 本文の字間補正（元画像は18.7px/字と詰まり気味） --- */
.sec019 .ov-body { letter-spacing: -0.3px; }

/* ---- 開発用: 元画像（文字入り）を半透明で重ねて位置合わせする ----
   <body class="calibrate"> にして、.txt-sec に data-original="./img/00N.jpg" を
   持たせると ::after で参照画像を重ねる…はCSSだけでは不可のため、
   下記クラスを付けた <img> を末尾に置く:
   <img class="ghost" src="./img/00N.jpg" alt="">                       */
.txt-sec .ghost {
    display: none;
}
body.calibrate .txt-sec .ghost {
    display: block;
    position: absolute;
    left: 0;
    top: 0;
    width: 930px;
    opacity: 0.5;
    pointer-events: none;
}