@charset "UTF-8";
/* ------------------------------------------------------------------------
鍛錬特設 テキスト分離ぶん(38828 修正対応)
  ・図版のキャプションをHTML化
  ・「素材カード別 鍛錬ポイントまとめ」の本文・箇条書き・表を追加
色は intro_img02.jpg から採取した実測値:
  本文 #2f2e27 / キャプション #15128b / 表ヘッダ #a82947 / 罫線 #7d7d7d
  吹き出し 桃 #eebff5(枠 #c54ce5) 水 #7de3e7(枠 #39939e) 黄 #f3ec6a(枠 #9f6331)
------------------------------------------------------------------------ */
html {
    /* iOS Safari が長文ブロックの文字だけ自動拡大してレイアウトを崩すのを防ぐ */
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

.tanren-sec {
    /* 画像とHTMLテキストの継ぎ目が出ないよう、地色を画像と合わせる */
    background: #fbeacc;
    color: #2f2e27;
    font-family: Meiryo, 'Hiragino Kaku Gothic ProN', 'ヒラギノ角ゴ ProN W3',
        'Meiryo UI', sans-serif;
}
.tanren-sec img {
    display: block;
    margin: 0 auto;
}

/* ---- 更新箇所を示すバッジ(32章特設の .sg-badge と同じ意匠) ---- */
.tnr-badge {
    display: inline-block;
    padding: 4px 15px 5px;
    border: 2px solid #b3924e;
    border-radius: 8px;
    background: #1c1c1c;
    color: #fff;
    font-size: 15px;
    font-weight: bold;
    letter-spacing: 1px;
    line-height: 1.2;
    white-space: nowrap;
    -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, .35);
    box-shadow: 0 1px 3px rgba(0, 0, 0, .35);
}
.tnr-badge-row {
    margin: 0 auto 12px;
    width: 870px;
    text-align: left;
}
/* 画像の上に重ねる版(現在は未使用。図版にも付ける場合はこれを使う)。
   クリック領域を塞がないよう pointer-events は無効 */
.tnr-badge--on-img {
    position: absolute;
    left: 48px;
    top: 18px;
    z-index: 2;
    pointer-events: none;
}

/* ---- 図版(鍛錬に使用可能な素材カード) ---- */
.fig-wrap {
    position: relative;
    width: 929px;
    margin: 24px auto 0;
}
.fig-cap {
    position: absolute;
    left: 253px;
    top: 306px;
    width: 374px;
    color: #15128b;
    font-size: 19px;
    font-weight: bold;
    line-height: 28px;
    letter-spacing: .2px;
    text-align: center;
    white-space: nowrap;
}

/* ---- 追加する本文 ---- */
.tp {
    padding: 26px 0 4px;
}
.tp-lead,
.tp-notes {
    width: 870px;
    margin: 0 auto;
    text-align: left;
    white-space: nowrap;
}
.tp-lead {
    font-size: 18px;
    font-weight: bold;
    line-height: 32px;
    letter-spacing: -.2px;
}
.tp-notes {
    margin-top: 18px;
    font-size: 15px;
    font-weight: bold;
    line-height: 26px;
    letter-spacing: -.2px;
}
.tp-notes li {
    padding-left: 1em;
    text-indent: -1em;
}
.tp-notes li::before {
    content: '●';
}
/* ---- 素材カード別 鍛錬ポイントまとめ ---- */
.tp-tbl {
    width: 870px;
    margin: 26px auto 0;
}
.tp-tbl-ttl {
    margin: 0;
    padding: 9px 0;
    background: #a82947;
    color: #fff;
    font-size: 19px;
    font-weight: bold;
    letter-spacing: 2px;
    text-align: center;
}
.tp-cols {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    margin-top: 14px;
}
.tp-col {
    width: 410px;
    padding: 0 0 14px;
    border: 2px solid #7d7d7d;
    background: #fff;
}
.tp-col--old {
    border-color: #4a5b8c;
}
.tp-col--new {
    border-color: #a82947;
}
.tp-col-ttl {
    margin: 0 0 12px;
    padding: 7px 0;
    color: #fff;
    font-size: 17px;
    font-weight: bold;
    text-align: center;
}
.tp-col--old .tp-col-ttl {
    background: #4a5b8c;
}
.tp-col--new .tp-col-ttl {
    background: #a82947;
}
.tp-grid {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
}
/* 鍛錬pt2倍の対象範囲(天・極系の6枚。傑/パラレルは対象外)を囲う。
   旧パネル側は枠を透明にして、左右の行位置だけ揃える */
.tp-hl {
    margin: 4px 16px 0;
    padding: 10px 0;
    border: 4px solid transparent;
    border-radius: 8px;
}
.tp-col--new .tp-hl {
    border-color: #d43f5a;
    background: #f9d2dc;
}
.tp-cell {
    position: relative;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    width: 168px;
    height: 104px;
}
.tp-cell img {
    /* .tanren-sec img の margin:0 auto を打ち消す。
       残っているとフレックスの余白を画像が吸ってしまい、尻尾がカードに届かない */
    margin: 0;
    width: 66px;
    height: 90px;
}

/* 吹き出し(円+左向きの尻尾)。
   ★色はカードの種別ではなく「据え置き=水色 / 増加=黄色+赤い上矢印」を表す(依頼書の塗り分け)。
     xlsx: 据え置き=テーマ色tx2(青) / 増加=FFFF99 / 上矢印=FF0000
     ここでは元ページの吹き出しの色 #7de3e7・#f3ec6a を当てている */
.pt {
    position: relative;
    /* 元デザインどおり、尻尾をカードの右端に少し重ねる */
    margin-left: -7px;
    width: 58px;
    height: 58px;
    border: 3px solid #39939e;
    border-radius: 50%;
    background: #7de3e7;
    color: #000;
    font-size: 14px;
    font-weight: bold;
    line-height: 58px;
    text-align: center;
    white-space: nowrap;
}
.pt::before {
    position: absolute;
    top: 50%;
    left: -16px;
    margin-top: -8px;
    border-width: 8px 14px 8px 0;
    border-style: solid;
    border-color: transparent #39939e transparent transparent;
    content: '';
}
.pt::after {
    position: absolute;
    top: 50%;
    left: -12px;
    margin-top: -5px;
    border-width: 5px 12px 5px 0;
    border-style: solid;
    border-color: transparent #7de3e7 transparent transparent;
    content: '';
}
.pt b {
    /* 据え置きの値は黒字。増加した値だけ赤字にして目立たせる(依頼書の文字色) */
    color: #000;
    font-size: 18px;
}
/* 増加した値 */
.pt--up {
    border-color: #9f6331;
    background: #f3ec6a;
}
.pt--up b {
    color: #da090e;
}
.pt--up::before {
    border-right-color: #9f6331;
}
.pt--up::after {
    border-right-color: #f3ec6a;
}
/* 増加した値に添える赤い上矢印。
   ★フローに入れるとセル内の中央寄せ位置が変わり、矢印の無い行とカードがズレる。
     絶対配置にしてレイアウトから外すこと */
.pt-arrow {
    position: absolute;
    right: 2px;
    top: 50%;
    margin-top: -13px;
    width: 16px;
    height: 27px;
}
.pt-arrow::before {
    position: absolute;
    top: 0;
    left: 0;
    border-width: 0 8px 12px;
    border-style: solid;
    border-color: transparent transparent #da090e;
    content: '';
}
.pt-arrow::after {
    position: absolute;
    top: 11px;
    left: 4px;
    width: 8px;
    height: 16px;
    background: #da090e;
    content: '';
}

/* 戦国くじ【金】【琥珀】の注記。
   32章特設の9スライス・フキダシ(body.png スライス36px)を赤に色替えして流用 */
.tp-callout {
    position: relative;
    margin: 14px auto 0;
    padding: 0 10px;
    width: 840px;
    box-sizing: border-box;
    border: 18px solid transparent;
    border-image: url('../img/parts/balloon_body.png') 36 fill stretch;
    color: #8c1d33;
    font-size: 16px;
    font-weight: bold;
    line-height: 28px;
    text-align: center;
    white-space: nowrap;
}
/* シッポ。先端が赤枠(.tp-hl)の下辺に届くまで伸ばして、指している先を明確にする。
   本体上端からの距離: パネル下端まで14px + パネルの下余白16px = 30px
   ★絶対配置の基準は border-box ではなく padding-box なので、border:18px ぶんを足す。
     付け根(画像下部のベタ)が本体の枠線に重なると自然につながる。
     left も同様に 18px 引く(新パネル中央 = .tp-tbl 基準で 665px、本体左端は 15px) */
.tp-callout::before {
    position: absolute;
    top: -50px;
    left: 632px;
    margin-left: -24px;
    width: 48px;
    height: 41px;
    background: url('../img/parts/balloon_tail_t.png') no-repeat 0 0 / 100% 100%;
    content: '';
}
.tp-callout strong {
    color: #da090e;
    font-size: 24px;
}

/* 2倍の対象外についての注記 */
.tp-cautions {
    margin: 14px auto 0;
    width: 840px;
    text-align: left;
    font-size: 15px;
    font-weight: bold;
    line-height: 24px;
    letter-spacing: -.2px;
    white-space: nowrap;
}
.tp-cautions li {
    padding-left: 1em;
    text-indent: -1em;
}
.tp-cautions li::before {
    content: '※';
}
.tp-cautions li + li {
    margin-top: 6px;
}