/* ==========================================
   0. CSS変数（サイト全体で繰り返し使う値を一元管理）
========================================== */
:root {
  --color-text: #482715;          /* 本文テキスト色 */
  --color-highlight: #c80000;     /* 強調テキスト色（赤） */
  --color-title-text: #f3d97d;    /* 見出しテキスト色 */
  --color-title-stroke: #040000;  /* 見出しテキスト縁取り色 */
  --color-bg-outer: #8fe2ff;      /* ページ外側の背景色 */
  --spacing-content: 32px;        /* 本文の左パディング（テキスト・画像共通） */
  --spacing-block: 20px;          /* ブロック間の余白 */
  --bg-sec: #f0eedf;              /* セクション背景色 */
}

/* ==========================================
   1. リセット & ページ全体
========================================== */
/* ブラウザのデフォルトスタイルをリセット */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* ページ全体（＝コンテンツの外側の左右の余白）の背景色と背景画像を設定 */
body {
  font-family: "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Meiryo", sans-serif;
  line-height: 1;

  /* 左右端の色 */
  background-color: var(--color-bg-outer); 
  /* 左右端の画像 */
  background-image: url('../img/bg_ptrn.gif'), url('../img/bg.png');
  background-position: center top, center top;
  background-repeat: repeat-y, no-repeat;
}

/* コンテンツ全体の中央カラム */
#wrapper {
  margin: 0 auto;
  width: 930px;
}

/* ==========================================
   2. メインエリア
========================================== */
/* セクション子要素（セットごとに下マージンで20px空ける） */
.section-block {
  padding-bottom: var(--spacing-block);
}

/* メインエリアの背景色 */
.bg-sec {
  background-color: var(--bg-sec);
}

/* 画像の基本設定：ブロック要素化＋中央揃え＋はみ出し防止 */
img {
  display: block;        /* テキストの回り込みを防ぐ */
  max-width: 100%;       /* 親要素からはみ出さない */
  height: auto;          /* 縦横比を維持 */
  margin-left: auto;     /* 左右中央揃え */
  margin-right: auto;
}

/* MV・セクション全幅画像 — 横幅を親要素いっぱいに引き伸ばす */
section > img {
  width: 100%;
}

/* サブタイトルの設定 */
.sub_title {
  margin-bottom: 15px;     /* 下に余白を作る */
}

/* 見出しの設定 ── 背景画像の上にテキストを重ねて表示する構造 */
.title {
  width: auto;
  height: auto;
  max-width: none;
  position: relative;      /* 子要素の絶対配置の基準 */
  margin-bottom: 10px;     /* タイトル下に余白を作る */
}

/* 見出しテキストの基本設定 */
.title p {
  font-size: 1.8rem;     /* サイズ */
  font-weight: 700;      /* 太さ */

  /* 縁取りの太さと色 */
  -webkit-text-stroke: 4px var(--color-title-stroke);
  text-stroke: 4px var(--color-title-stroke);

  /* 文字の内側を指定色で塗りつぶす（文字色が見えなくなるのを防ぐ） */
  -webkit-text-fill-color: var(--color-title-text);
  text-fill-color: var(--color-title-text);

  /* 縁取りがテキストの中央（または外側）に重なるように調整 */
  paint-order: stroke fill;

  position: absolute;  /* 背景画像の上に重ねる */
  top: 42%;            /* 上端からの位置 */
  left: 7%;            /* 左端からの位置 */
  transform: translateY(-50%); /* 垂直方向（上下）のみ中央寄せにする */

  margin: 0;             /* absolute要素のため外部余白は不要 */
  padding: 0;            /* absolute要素のためパディングは不要 */
  white-space: nowrap;   /* テキストが途中で意図せず改行されるのを防ぐ */
}

/* 見出しテキスト ナンバリング */
.title p .chapter-text {
  font-size: 0.8em;
}

/* 見出しテキスト 本題 */
.title p .title-text {
  padding-left: 50px;     /* 左端からの余白 */
}

/* 文字数が多い見出しは一段小さくして帯に収める。
   1.8rem のままだと帯（860px）を49pxはみ出す。右に約24px残る 1.65rem にする。
   ※ 全体に効かせると他の見出し（いずれも余裕あり）まで小さくなるので個別指定 */
.title-long p { font-size: 1.65rem; }

/* ==========================================
   2b. MVフキダシ（テキスト化）
========================================== */
/* MVセクションを位置基準にする */
.mv-section {
  position: relative;
}

/* キャラクターレイヤー（透過PNG、背景の上に重ねる） */
.mv-chara {
  position: absolute;
  bottom: 0;                /* ▼ 上下位置（調整用）※下端で切って“見切れ”にする */
  left: 2%;               /* ▼ 左右位置（調整用） */
  width: 52%;             /* ▼ キャラのサイズ（調整用） */
  height: auto;
  z-index: 1;
  transition: left 0.3s ease;
}


/* 本文テキスト */
.media-box p {
  font-size: 1rem;       /* サイズ */
  font-weight: 800;      /* 太さ */
  line-height: 28px;     /* 行間 */
  color: var(--color-text); /* カラー */
  padding: 0 0 var(--spacing-block) var(--spacing-content); /* 上 右 下 左 */
  box-sizing: border-box; /* パディングを含めた横幅の計算を自動化（崩れ防止） */
  white-space: pre-wrap; /* HTML内のEnterによる改行をそのまま画面に表示 */
}

/* 本文テキスト 大文字 */
.large-text {
  font-size: 1.4em;
  color: var(--color-highlight); /* 文字色を赤色に指定 */
}

/* 注釈テキスト */
p.small-text {
  font-size: 0.8em;
  line-height: 18px;
}

/* 下部余白 追加クラス 10px */
.expand-pb-10 {
  padding-bottom: 10px;
}

/* 下部余白 削除クラス 10px */
.reduce-mb-10 {
  margin-bottom: -10px;
}

/* 下部余白 削除クラス 15px */
.reduce-mb-15 {
  margin-bottom: -15px;
}

/* 下部余白 削除クラス 20px */
.reduce-mb-20 {
  margin-bottom: -20px;
}

/* 下部余白 削除クラス 40px */
.reduce-mb-40 {
  margin-bottom: -40px;
}

/* 下部余白 削除クラス 80px */
.reduce-mb-80 {
  margin-bottom: -80px;
}

/* 本文画像 ── 左右パディングを本文テキストと揃えて統一感を出す */
.media-box img {
  padding: 0 var(--spacing-content) var(--spacing-block) var(--spacing-content);
}

/* 期間テキスト */
.schedule-row {
  display: flex;
  align-items: center;
  gap: 12px;           /* ラベルと文字の間の隙間 */
  margin-bottom: 15px; /* 行と行の間の隙間 */

  /* 本文テキストと同じ左パディングを適用 */
  padding-left: var(--spacing-content, 32px); 
  box-sizing: border-box; /* パディングによる幅の広がりを防ぐ */
}

/* 期間ラベル */
.period-label {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  width: 84px;
  height: 28px;
  box-sizing: border-box;
  border: 2px solid #911012;
  border-radius: 14px;
  background-color: #fff;
  color: #911012;
  font-size: 16px;
  font-weight: bold;
}

/* 期間ラベル テキスト */
.date-text {
  color: #911012;
  font-size: 22px;
  font-weight: 900;
  letter-spacing: -0.5px;
  -webkit-text-stroke: 6px #fff;
  paint-order: stroke fill;
}

/* 期間ラベル 数字テキスト */
.date-text .num {
  font-size: 36px;

  position: relative;
  z-index: 1; /* 数字のレイヤーを文字（年・月・日）よりも手前に引き上げる */
}

/* 対象合戦スケジュールエリアの親コンテナ */
.battle-schedule-row {
  display: flex;
  align-items: center;    /* ラベルの文字中心と日付の文字中心を垂直に揃える */
  gap: 16px;              /* ラベルと日付の間の隙間 */
  
  /* 本文テキストと同じ左パディング（余白）をこの行全体に適用 */
  margin: 0 0 var(--spacing-block) var(--spacing-content); /* 上 右 下 左 */
}

/* 対象合戦ラベル */
.battle-label {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;

  width: 140px;
  height: 24px;
  box-sizing: border-box;
  z-index: 1;

  /* 文字の基本設定 */
  color: #911012;
  font-size: 1.4rem;
  font-weight: 900;
  line-height: 1;
  white-space: nowrap;

  /* 縁取りの設定 */
  -webkit-text-stroke: 4px #ffffff;
  text-stroke: 4px #ffffff;
  paint-order: stroke fill;
}

/* 下敷きのピンク角丸矩形 */
.battle-label::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 82%; /* 文字を上に突き出す */
  transform: translate(-50%, -50%);

  width: 140px;
  height: 20px;
  background-color: #f4a6a6;
  border-radius: 10px;
  z-index: -1; 

  -webkit-text-stroke: 0 transparent;
  text-stroke: 0 transparent;
}

/* 丸数字のCSS */
.battle-label .circle-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  width: 19px;
  height: 19px;
  background-color: #911012; 
  color: #ffffff;
  border-radius: 50%;
  font-size: 0.95rem;
  margin-left: 3px;

  transform: translateY(1px); 

  -webkit-text-stroke: 0 transparent;
  text-stroke: 0 transparent;

  box-shadow: 0 0 0 2px #ffffff;
}

/* 日付テキスト（本文テキストと同じ） */
.battle-date-text {
  font-size: 1.4rem;            /* サイズ */
  font-weight: 700;           /* 太さ */
  line-height: 28px;          /* 行間 */
  color: var(--color-text);   /* カラー */
  white-space: nowrap;        /* 日付が途中で意図せず改行されるのを防ぐ */
}

/* ==========================================
   3. テーブル設定
========================================== */
/* ------------------------------------------
   1. 共通レイアウト（構造・サイズ・余白）
------------------------------------------ */
/* 囲みタグにパディングを指定して確実に隙間を作る */
.table-container {
  /* 左右にテキストや画像と同じ余白（32px）を適用 */
  padding: 0 var(--spacing-content) var(--spacing-block) var(--spacing-content);
  box-sizing: border-box;
}

/* ------------------------------------------
   2. 提供割合テーブル専用設定
------------------------------------------ */
.kuji-table {
  width: 100%;
  border-collapse: collapse;
  border: 3px solid #706347;
  font-family: sans-serif;
}

.kuji-table th,
.kuji-table td {
  border: 1px solid #706347; /* セル同士の間隔 */
  padding: 12px 8px;
  text-align: center;
  vertical-align: middle;
  font-size: 1.1rem;
  font-weight: 900;
}

/* ヘッダー背景色（各レアリティのカラー） */
.kuji-table th.bg-main { background-color: #a39369; color: #ffffff; }
.kuji-table th.bg-ten { background-color: #85b0d3; color: #ffffff; }
.kuji-table th.bg-goku { background-color: #8e8e8e; color: #ffffff; }
.kuji-table th.bg-maboroshi { background-color: #652b88; color: #ffffff; line-height: 1.2; }
.kuji-table th.bg-toku { background-color: #dea878; color: #ffffff; }
.kuji-table th.bg-jo { background-color: #ebd674; color: #ffffff; }

/* セルの個別調整 */
.kuji-table td.kuji-type {
  font-size: 1rem;
  line-height: 1.4;
  background-color: #ffffff;
  color: var(--color-text);
}
/* 注記（※幻くじ…）の赤文字 */
.kuji-table td.kuji-type .kuji-sub-text {
  font-size: 0.75rem;
  display: block;
  margin-top: 4px;
}
.kuji-table td.times,
.kuji-table td.rate {
  background-color: #ffffff;
  color: var(--color-text);
}

/* 幻（選択中）のハイライト（黄背景に赤文字） */
.kuji-table td.highlight {
  background-color: #ffff00;
  color: var(--color-highlight);
}

/* 非活性「-」のセル（グレー背景） */
.kuji-table td.disabled {
  background-color: #b3b3b3;
  color: var(--color-text);
}

/* ------------------------------------------
   3. クエスト達成テーブル専用設定
------------------------------------------ */
.quest-table {
  width: 100%;
  border-collapse: collapse;
  font-family: sans-serif;
}

/* 全セル共通の基本スタイル */
.quest-table th,
.quest-table td {
  border: 1px solid #706347; /* 基本の内側の細い線 */
  padding: 12px 20px;
  vertical-align: middle;
  font-size: 1.05rem;
  font-weight: 900;
  text-align: left; /* 基本のベース設定 */
}

/* ヘッダーの設定 */
.quest-table th.bg-main {
  background-color: #a39369; /* くすんだゴールド */
  color: #ffffff;
  text-align: center;
  border-top: 3px solid #706347; /* 上部の外枠（太線） */
}

/* --- 1列目の空スペース（上半分）を完全に透明化 --- */
.quest-table .col-blank,
.quest-table .td-blank {
  border: none !important;
  background: transparent !important;
  width: 35px; /* 影城主ラベルと同じ幅を確保 */
  padding: 0;
}

/* --- 枠線の緩急コントロール（collapseの特性を利用） --- */

/* テーブルの左外枠 */
.quest-table th.bg-main:nth-child(2),
.quest-table td.td-cond {
  border-left: 3px solid #706347;
}

/* テーブルの右外枠（太線3px） */
.quest-table th:last-child,
.quest-table td:last-child {
  border-right: 3px solid #706347;
}

/* テーブルの最下部の外枠（太線3px） */
.quest-table tr:last-child td {
  border-bottom: 3px solid #706347;
}

/* --- コンテンツセルの個別装飾 --- */
.quest-table .td-cond,
.quest-table .td-reward {
  background-color: #ffffff;
  color: var(--color-text);
  line-height: 1.5;
  text-align: center; /* データセルの文字を左右中央寄せに */
}

/* 条件列の幅を固定（画像に合わせる） */
.quest-table .td-cond {
  width: 38%;
}

/* --- 「影城主のみ」ラベルセルのスタイル --- */
.quest-table .td-shadow-label {
  background-color: #fffb00;        /* 鮮やかな黄色 */
  border: none;                     /* 上下左をすべての線なし */
  border-right: 3px solid #706347;  /* 右側の太線だけは、メインの表と繋げるために維持 */
  width: 35px;
  padding: 15px 0;
  text-align: center;
  vertical-align: middle;
}

/* ラベルテキストの縦書き制御 */
.quest-table .td-shadow-label span {
  writing-mode: vertical-rl;
  text-combine-upright: none;
  color: #ff0024;
  font-size: 1.15rem;
  font-weight: 900;
  letter-spacing: 4px;
  display: block;
  margin: 0 auto;
  text-align: center;
}

/* ------------------------------------------
   4. 累計戦果報酬テーブル専用設定
------------------------------------------ */
.reward-table {
  width: 100%;
  border-collapse: collapse;
  border: 3px solid #706347; /* 外枠：これまでのテーブルと同じ濃い茶色太線 */
  font-family: sans-serif;
}

.reward-table th,
.reward-table td {
  border: 1px solid #706347; /* 内側の細い線 */
  padding: 14px 20px;
  text-align: center;        /* 文字は左右中央寄せ */
  vertical-align: middle;    /* 文字は上下中央寄せ */
  font-size: 1.05rem;
  font-weight: 900;          /* 全体に合わせて太字 */
}

/* ヘッダーの設定 */
.reward-table th.bg-main {
  background-color: #a39369; /* くすんだゴールド */
  color: #ffffff;            /* ヘッダー文字は白 */
}

/* 通常データセルの設定 */
.reward-table td {
  background-color: #ffffff; /* 基本は白背景 */
  color: var(--color-text);   /* サイト共通のテキスト色 */
  line-height: 1.5;
}

/* 2行目の薄い黄色背景 */
.reward-table tr.row-yellow td {
  background-color: #fffbdf;
}

/* ------------------------------------------
   5. 注意事項ボックス
------------------------------------------ */
.notice-box {
  margin: 0 var(--spacing-content) var(--spacing-block);
  padding: 16px 20px;
  background-color: #f2edd3;
  border: 2px solid #c8b97a;
  border-radius: 8px;
  font-size: 0.85rem;
  font-weight: 700;
  line-height: 1.7;
  color: var(--color-text);
}

/* notice-box 内の p を .media-box p の余白からリセット */
.notice-box p {
  padding: 0;
  margin: 0;
}

/* 注意事項の見出し行 */
.notice-box .notice-title {
  font-size: 1rem;
  font-weight: 900;
  color: #c80000;
  margin-bottom: 6px;
}

/* 注意事項の警告アイコン */
.notice-box .notice-icon {
  display: inline-block;
  width: 0;
  height: 0;
  border-left: 8px solid transparent;
  border-right: 8px solid transparent;
  border-bottom: 14px solid #c80000;
  margin-right: 6px;
  vertical-align: middle;
  position: relative;
  top: -2px;
}

/* リスト */
.notice-box ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.notice-box ul li {
  padding-left: 1em;
  text-indent: -1em;
}

.notice-box ul li::before {
  content: "・";
}


/* ==========================================
   キラカード（描きおろし極・光の帯 B案）
========================================== */
.kira-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 32px;
  margin: 10px 0 20px;
}

/* ※ .media-box img（詳細度0,1,1）の padding に負けないよう、セレクタも .media-box を付ける */
.media-box img.kira-card,
.kira-card {
  width: 224px;
  height: 315px;
  /* .media-box img の padding(0 32px 20px) を継承すると、border-box のせいで
     描画領域が 160x295 に潰れる（横圧縮の正体）。ここで必ず打ち消す */
  padding: 0;
  margin: 0;
  flex: 0 0 auto;           /* flex内で縮まない */
  /* 等倍表示。拡大するとGIFの帯がにじむので原寸で置く */
  image-rendering: auto;
  box-shadow: 0 0 14px rgba(0, 0, 0, .45);
}


/* ==========================================
   MV（この企画の調整）
   背景 930x430 / キャラは比1.44の切り抜きなので幅を絞って収める
========================================== */
.mv-chara {
  width: 56%;
  bottom: 0;
  left: auto;
  right: 2%;              /* ▼ 左右位置（調整用）※同時開催ロゴ撤去に伴い右へ */
}

/* タイトルロゴ（右上）── plan/イベント企画/紅蓮の拾六文銭/タイトルロゴ.png を幅1000pxに縮小したもの */
.mv-logo {
  position: absolute;
  z-index: 0;              /* 背景の上・キャラ(z-index:1)の後ろ。腕がロゴに被っても隠れない */
  top: 50%;                /* ▼ 上下位置（調整用）※最終FB「もうちょい中央に」で 58%→50% */
  transform: translateY(-50%);
  left: 2%;                /* ▼ 左右位置（調整用）※キャラと入れ替えて左へ */
  right: auto;
  width: 53%;              /* ▼ ロゴのサイズ（調整用） */
  height: auto;
  filter: drop-shadow(0 4px 10px rgba(0,0,0,.55));
}


/* ==========================================
   紅蓮テーマ（赤＋黒ベース）── 2026-08-18
   季節くじ夏（水色）からの上書き。元に戻すときはこのブロックを丸ごと消し、
   img/_orig_summer/ の3画像を img/ に戻す。
========================================== */
:root {
  --color-text: #f1e4cf;          /* 本文: 生成り */
  --color-highlight: #ff6a3d;     /* 強調: 炎のオレンジ赤 */
  --color-title-text: #f3d97d;    /* 見出し: 金（そのまま） */
  --color-title-stroke: #1a0806;  /* 見出し縁: 焦げ黒 */
  --color-bg-outer: #0e0606;      /* 外側: 黒 */
  --bg-sec: #1e1211;              /* セクション: 焦げ茶黒 */
  --guren-red: #a3141a;           /* 紅蓮の赤（帯・ヘッダー） */
  --guren-red-dark: #6e0c10;
  --guren-gold: #c9a24c;          /* 罫線の金 */
  --guren-cell: #2a1a18;          /* 表セル */
  --guren-cell-alt: #33201d;
}

/* 期間ラベル：黒地に赤縁・赤文字 */
.period-label {
  background-color: #150a09;
  border-color: var(--guren-red);
  color: #ff6a3d;
}
.date-text {
  color: #ffb45a;                       /* 日付は金橙 */
  -webkit-text-stroke: 6px #150a09;
}

/* 対象合戦ラベル */
.battle-label { color: #ffb45a; -webkit-text-stroke: 4px #150a09; text-stroke: 4px #150a09; }
.battle-label::before { background-color: var(--guren-red-dark); }
.battle-label .circle-num { background-color: var(--guren-red); box-shadow: 0 0 0 2px #150a09; }

/* フキダシ内テキストは黄地のまま（変更なし） */

/* 表：黒地に金罫・赤ヘッダー */
.kuji-table,
.quest-table,
.reward-table { border-color: var(--guren-gold); }
.kuji-table th, .kuji-table td,
.quest-table th, .quest-table td,
.reward-table th, .reward-table td { border-color: var(--guren-gold); }

.kuji-table th.bg-main,
.quest-table th.bg-main,
.reward-table th.bg-main { background-color: var(--guren-red); color: #fff3dc; }
/* レアリティ色は残す（識別のため）が少し沈める */
.kuji-table th.bg-ten { background-color: #4f7ea3; }
.kuji-table th.bg-goku { background-color: #5e5e5e; }
.kuji-table th.bg-toku { background-color: #b0803f; }
.kuji-table th.bg-jo { background-color: #b09a3a; }

/* ※ このページの td はクラス無しなので、td 全体を対象にする */
.kuji-table td,
.quest-table td,
.reward-table td { background-color: var(--guren-cell); color: var(--color-text); }
.reward-table tr.row-yellow td { background-color: var(--guren-cell-alt); }
.kuji-table td.highlight { background-color: #5a3a00; color: #ffd36a; }
.kuji-table td.disabled { background-color: #3a3230; color: #9a8f88; }
.quest-table .td-shadow-label { background-color: #5a3a00; border-right-color: var(--guren-gold); }
.quest-table .td-shadow-label span { color: #ffd36a; }

/* 注意事項ボックス：黒赤 */
.notice-box {
  background-color: #170b0a;
  border-color: var(--guren-red-dark);
  color: #d9c9b3;
}
.notice-box .notice-title { color: #ff6a3d; }
.notice-box .notice-icon { border-bottom-color: #ff6a3d; }

/* キラカードの影を赤い発光に */
.media-box img.kira-card,
.kira-card { box-shadow: 0 0 18px rgba(255, 90, 40, .55), 0 0 2px rgba(0,0,0,.8); }

/* MVの同時開催（メインロゴの真下）── 墨の刷毛帯の上にサブロゴ、左上に「同時開催」タグ */
.mv-sublogo {
  position: absolute;
  z-index: 3;
  right: 7%;                /* ▼ 左右位置（調整用）※メインロゴと中心を揃える */
  top: 67%;                 /* ▼ 上下位置（調整用）※メインロゴ ver2 が縦に伸びたぶん下げた。60%だと主ロゴと詰まる／70%だとMV下端まで6px */
  width: 33%;               /* ▼ サイズ（調整用） */
  aspect-ratio: 2.5 / 1;
  background: url('../img/mv_brush.png') center / 100% 100% no-repeat;
  display: flex;
  align-items: center;
  justify-content: center;
}
.mv-sublogo img {
  width: 76%;               /* ▼ 帯に対するロゴの大きさ（調整用） */
  height: auto;
  filter: drop-shadow(0 2px 4px rgba(0,0,0,.6));
}
/* 「同時開催」タグ：赤地に白抜き。帯の左上に少し食い込ませる */
.mv-sublogo-tag {
  position: absolute;
  left: 9%;
  top: 4%;
  padding: 3px 10px 4px;
  background: linear-gradient(#c8161e, #8e0c12);
  border: 1px solid #f3d97d;
  border-radius: 3px;
  color: #fff;
  font-size: 0.75rem;
  font-weight: 900;
  letter-spacing: 0.15em;
  line-height: 1;
  box-shadow: 0 2px 4px rgba(0,0,0,.6);
  white-space: nowrap;
}

/* サブ部の冒頭に置く同時開催ロゴ */
.sub-logo-wrap {
  background-color: var(--bg-sec);
  padding: 28px 0 24px;
}
.sub-logo {
  width: 700px;             /* ▼ サイズ（調整用） */
  margin: 0 auto;
  filter: drop-shadow(0 6px 12px rgba(0,0,0,.6));
}

/* ロゴ2つの後ろに敷く暗い帯（右側）。背景の炎を沈めてロゴを立たせる。キャラ(z-index:1)の後ろ */
.mv-shade {
  position: absolute;
  z-index: 0;
  top: 0; bottom: 0; left: 0;
  width: 58%;               /* ▼ 帯の幅（調整用） */
  background: linear-gradient(270deg,
    rgba(10, 4, 4, 0)    0%,
    rgba(10, 4, 4, .55) 22%,
    rgba(10, 4, 4, .72) 45%,
    rgba(10, 4, 4, .72) 100%);
  pointer-events: none;
}


/* ==========================================
   金テーマ（サブ部「太閤秀吉 無尽の祝い」）── 2026-08-18
   .sub-part 配下だけ変数と色を差し替える。メイン部の紅蓮テーマには影響しない。
========================================== */
.sub-part {
  --color-text: #3a2410;          /* 本文: 焦げ茶 */
  --color-highlight: #b3121a;     /* 強調: 深紅 */
  --color-title-text: #fff2c4;    /* 見出し: 淡い金 */
  --color-title-stroke: #4a2e08;  /* 見出し縁: 濃い金茶 */
  --bg-sec: #e9d59c;              /* セクション: 金 */
  --gold-deep: #8a6218;           /* 罫線・ヘッダーの濃い金 */
  --gold-cell: #fbf4de;           /* 表セル: 象牙 */
  --gold-cell-alt: #f3e6bd;
  --gold-line: #a3792a;
}
.sub-part .bg-sec,
.sub-part .sub-logo-wrap {
  background-color: var(--bg-sec);
  background-image: url('../img/gold_tex.jpg');
  background-size: 400px 400px;
}
.sub-part .sub-logo-wrap { padding: 28px 0 22px; }
/* 金地の上のロゴは影を濃いめに */
.sub-part .sub-logo { filter: drop-shadow(0 6px 10px rgba(60, 30, 0, .55)); }

/* 期間ラベル：金縁 */
.sub-part .period-label { background-color: #fff8e4; border-color: var(--gold-deep); color: #8a2a10; }
.sub-part .date-text { color: #8a1a12; -webkit-text-stroke: 6px #fff8e4; }
.sub-part .battle-label { color: #8a1a12; -webkit-text-stroke: 4px #fff8e4; text-stroke: 4px #fff8e4; }
.sub-part .battle-label::before { background-color: #f1d98a; }
.sub-part .battle-label .circle-num { background-color: #8a1a12; box-shadow: 0 0 0 2px #fff8e4; }

/* 表：象牙のセル・濃い金の罫とヘッダー */
.sub-part .kuji-table, .sub-part .quest-table, .sub-part .reward-table { border-color: var(--gold-deep); }
.sub-part .kuji-table th, .sub-part .kuji-table td,
.sub-part .quest-table th, .sub-part .quest-table td,
.sub-part .reward-table th, .sub-part .reward-table td { border-color: var(--gold-line); }
.sub-part .kuji-table th.bg-main, .sub-part .quest-table th.bg-main, .sub-part .reward-table th.bg-main {
  background: linear-gradient(#a3792a, #8a6218); color: #fff6dc;
}
.sub-part .kuji-table td, .sub-part .quest-table td, .sub-part .reward-table td {
  background-color: var(--gold-cell); color: var(--color-text);
}
.sub-part .reward-table tr.row-yellow td { background-color: var(--gold-cell-alt); }
/* 最終段（太閤）など強調行があれば使う */
.sub-part .reward-table tr.row-gold td { background-color: #f6dc8a; color: #6a1a10; }

/* 注意事項：象牙地に金縁 */
.sub-part .notice-box { background-color: #fbf4de; border-color: var(--gold-line); color: #4a3418; }
.sub-part .notice-box .notice-title { color: #b3121a; }
.sub-part .notice-box .notice-icon { border-bottom-color: #b3121a; }


/* ==========================================
   原稿対応で追加したパーツ（2026-08-19）
   作家プロフィール / カード2枚組 / セリフ / クエストグリッド / 交換所グリッド
========================================== */

/* ---- 小見出し ---- */
.block-head {
  margin: 4px var(--spacing-content) 10px;
  padding: 6px 14px;
  font-size: 1.15rem;
  font-weight: 900;
  color: var(--color-title-text);
  background: linear-gradient(90deg, rgba(163,20,26,.9), rgba(163,20,26,0));
  border-left: 5px solid var(--color-title-text);
}

/* ---- 作家プロフィール ---- */
.author-box {
  margin: 0 var(--spacing-content) var(--spacing-block);
  padding: 14px 18px;
  border: 1px solid rgba(201,162,76,.6);
  background: rgba(0, 0, 0, .22);
}
.author-name {
  font-size: 1.15rem;
  font-weight: 900;
  color: var(--color-title-text);
  margin-bottom: 6px;
}
.author-name .author-kana { font-size: .8em; font-weight: 700; }
.author-text {
  font-size: .82rem;
  font-weight: 700;
  line-height: 1.85;
  color: var(--color-text);
  padding: 0 !important;
}

/* ---- 通常版 / パラレル版 の2枚組 ---- */
.card-duo {
  display: flex;
  justify-content: center;
  gap: 60px;
  margin: 6px 0 var(--spacing-block);
}
.card-cell { position: relative; text-align: center; }
.card-badge {
  display: inline-block;
  margin-bottom: 8px;
  padding: 3px 18px 4px;
  border-radius: 3px;
  background: linear-gradient(#c8161e, #8e0c12);
  border: 1px solid var(--color-title-text);
  color: #fff;
  font-size: .85rem;
  font-weight: 900;
  letter-spacing: .12em;
}
.card-badge.badge-parallel { background: linear-gradient(#6b4bb0, #3f2a70); }
.card-cap {
  margin-top: 8px;
  font-size: .85rem;
  font-weight: 900;
  line-height: 1.5;
  color: var(--color-text);
  padding: 0 !important;
}
/* 未納品スロット */
.card-tbd {
  width: 224px;
  height: 315px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  background: repeating-linear-gradient(45deg, #3a2a28, #3a2a28 10px, #332322 10px, #332322 20px);
  border: 2px dashed rgba(201,162,76,.8);
  color: rgba(255, 230, 190, .8);
  font-size: 1.5rem;
  font-weight: 900;
  line-height: 1.6;
}
.card-tbd-s { width: 150px; height: 211px; font-size: 1.1rem; margin: 0 auto; }

/* ---- くじ名の帯画像 ---- */
.kuji-strip {
  display: block;
  margin: 0 auto var(--spacing-block);
  max-width: 880px;
}

/* ---- 提供割合テーブルのくじ名セル ---- */
.kuji-table td.td-kujiname { font-size: 1rem; line-height: 1.4; }

/* ---- にゃんの掛け合い（左右端に大きくにゃん＋中央にフキダシ） ---- */
.nyan-talk {
  position: relative;
  height: 300px;            /* ▼ ブロックの高さ（調整用） */
  margin: 0 0 var(--spacing-block);
}

.nyan-talk img {
  position: absolute;
  bottom: 0;
  height: 290px;            /* ▼ にゃんの大きさ（調整用） */
  width: auto;
  margin: 0 !important;
  padding: 0 !important;
  filter: drop-shadow(0 5px 8px rgba(90, 60, 10, .4));
}

.nyan-talk-l { left: 4px; }
/* 右のにゃんは左右反転して内側（フキダシ側）を向かせる。槍もフキダシに被らなくなる */
.nyan-talk-r {
  right: 4px;
  transform: scaleX(-1);
}

/* フキダシ本体（白地・細い枠） */
.nyan-balloon {
  position: absolute;
  width: 340px;             /* ▼ フキダシの幅（調整用） */
  padding: 16px 18px !important;
  background: #fff;
  border: 2px solid #4a3418;
  color: #2e2010;
  font-size: .95rem;
  font-weight: 800;
  line-height: 2;
  text-align: center;
  box-shadow: 0 3px 6px rgba(60, 40, 8, .25);
}

.nyan-balloon-l { left: 268px; top: 8px; }     /* ▼ 上のフキダシ位置（調整用） */
.nyan-balloon-r { right: 268px; top: 158px; }  /* ▼ 下のフキダシ位置（調整用） */

/* しっぽ ── 枠の色と白地を2枚重ねて“縁のある三角”にする */
.nyan-balloon::before,
.nyan-balloon::after {
  content: "";
  position: absolute;
  top: 44px;                /* ▼ しっぽの高さ（調整用） */
  border: 13px solid transparent;
}

.nyan-balloon-l::before {
  left: -26px;
  border-right-color: #4a3418;
}
.nyan-balloon-l::after {
  left: -23px;
  border-right-color: #fff;
}

.nyan-balloon-r::before {
  right: -26px;
  border-left-color: #4a3418;
}
.nyan-balloon-r::after {
  right: -23px;
  border-left-color: #fff;
}

/* ---- 立ち絵つきセリフ ---- */
.serif-box {
  display: flex;
  align-items: center;
  gap: 20px;
  margin: 0 var(--spacing-content) var(--spacing-block);
  padding: 14px 18px;
  border: 1px solid rgba(201,162,76,.55);
  background: rgba(0, 0, 0, .2);
}
.serif-chara { width: 150px; height: auto; flex: 0 0 auto; margin: 0 !important; padding: 0 !important; }
.serif-body { flex: 1 1 auto; }
.serif-head {
  font-size: 1.1rem;
  font-weight: 900;
  color: var(--color-title-text);
  margin-bottom: 8px;
  padding: 0 !important;
}
.serif-text {
  font-size: .95rem;
  font-weight: 800;
  line-height: 1.8;
  color: var(--color-text);
  padding: 0 !important;
}
.serif-quote { font-style: normal; }
.serif-quote::before { content: "「"; }
.serif-quote::after { content: "」"; }

/* ---- クエスト報酬グリッド ---- */
.quest-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 10px;
  margin: 0 var(--spacing-content) var(--spacing-block);
}
.quest-grid-3 { grid-template-columns: repeat(3, 1fr); }
.quest-cell {
  padding: 10px 6px 12px;
  text-align: center;
  border: 1px solid rgba(201,162,76,.6);
  background: rgba(0, 0, 0, .22);
}
.quest-cell img {
  width: 100%;
  max-width: 150px;
  height: auto;
  margin: 0 auto !important;
  padding: 0 !important;
}
.quest-no {
  display: block;
  margin-bottom: 8px;
  padding: 3px 4px 4px;
  background: linear-gradient(#a3141a, #6e0c10);
  color: #fff;
  font-size: .8rem;
  font-weight: 900;
  line-height: 1.35;
  border-radius: 2px;
}
.quest-name {
  margin-top: 8px;
  font-size: .82rem;
  font-weight: 900;
  line-height: 1.5;
  color: var(--color-text);
  padding: 0 !important;
}
.quest-add {
  margin-top: 6px;
  padding: 5px 4px !important;
  font-size: .72rem;
  font-weight: 900;
  line-height: 1.4;
  color: var(--color-text);
  background: rgba(255, 255, 255, .1);
  border-radius: 3px;
}
.quest-add .ico {
  display: inline-block;
  width: 22px;
  vertical-align: middle;
  margin: 0 3px 0 0 !important;
  padding: 0 !important;
}
.quest-add .ico-t { width: 16px; }

/* ---- 交換所ラインナップ ---- */
.item-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  margin: 0 var(--spacing-content) var(--spacing-block);
}
.item-cell {
  padding: 10px 6px 10px;
  text-align: center;
  border: 1px solid rgba(201,162,76,.6);
  background: rgba(0, 0, 0, .2);
}
.item-cell img {
  width: 100%;
  max-width: 140px;
  height: auto;
  margin: 0 auto !important;
  padding: 0 !important;
}
.item-cell img.item-ticket { max-width: 100px; }
.item-textitem {
  width: 100%;
  max-width: 140px;
  height: 197px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(#5a3f10, #2e2008);
  border: 2px solid #c9a24c;
  color: #ffe9a8;
  font-size: .95rem;
  font-weight: 900;
  line-height: 1.5;
}
.item-name {
  margin-top: 8px;
  font-size: .82rem;
  font-weight: 900;
  line-height: 1.4;
  color: var(--color-text);
  padding: 0 !important;
}
.item-cost {
  margin-top: 5px;
  padding: 4px !important;
  font-size: .8rem;
  font-weight: 900;
  color: var(--color-text);
  background: rgba(255, 255, 255, .1);
  border-radius: 3px;
}
.item-lim { display: block; font-size: .72em; opacity: .85; }
/* 交換所カードのランク／レベル（DH QA r224）。出典=16周年記念メダル交換所.xlsx「9月分_交換所にアイテム追加」 */
.item-rank { display: block; font-size: .78em; opacity: .9; font-weight: 700; }
/* 壱ノ祝 クエスト報酬のランク／レベル。出典=イベントクエスト管理.xlsx */
.quest-rank { display: block; font-size: .82em; opacity: .9; font-weight: 700; }

/* ---- 目立たせたい一行 ---- */
.pickup-text {
  margin: 0 var(--spacing-content) var(--spacing-block);
  padding: 10px 14px !important;
  text-align: center;
  font-size: 1rem;
  font-weight: 900;
  color: #ffe9a8;
  background: linear-gradient(#a3141a, #6e0c10);
  border: 1px solid #c9a24c;
  border-radius: 4px;
}

/* ==========================================
   金テーマ側の上書き（.sub-part 配下）
========================================== */
.sub-part .block-head {
  color: #4a2e08;
  background: linear-gradient(90deg, rgba(201,162,76,.95), rgba(201,162,76,0));
  border-left-color: #8a6218;
}
.sub-part .serif-box,
.sub-part .quest-cell,
.sub-part .item-cell,
.sub-part .author-box {
  background: rgba(255, 250, 232, .72);
  border-color: #a3792a;
}
.sub-part .serif-head { color: #8a1a12; }
.sub-part .quest-add,
.sub-part .item-cost { background: rgba(90, 62, 16, .12); }
.sub-part .pickup-text {
  color: #fff6dc;
  background: linear-gradient(#a3141a, #7a0e12);
  border-color: #8a6218;
}
.sub-part .card-tbd {
  background: repeating-linear-gradient(45deg, #e2cf9a, #e2cf9a 10px, #d8c48c 10px, #d8c48c 20px);
  border-color: #8a6218;
  color: #6a4a10;
}


/* ---- 既存イベントへのリンクボタン ---- */
.link-row { text-align: center; padding: 0 var(--spacing-content) var(--spacing-block) !important; }
.link-btn {
  display: inline-block;
  padding: 10px 26px;
  border-radius: 4px;
  background: linear-gradient(#a3792a, #6e4d12);
  border: 1px solid #f0d68f;
  color: #fff6dc;
  font-size: .95rem;
  font-weight: 900;
  text-decoration: none;
  box-shadow: 0 2px 5px rgba(0, 0, 0, .45);
}
.link-btn::after { content: " ▶"; font-size: .8em; }
.link-btn:hover { filter: brightness(1.12); }

/* ---- 異名・上の句（既存ページの見せ方に合わせる） ---- */
.item-textitem {
  flex-direction: column;
  gap: 10px;
  background: none;
  border: none;
}
.item-textitem-label { font-size: .85rem; font-weight: 900; color: var(--color-text); }
.item-textitem-word {
  display: block;
  width: 92%;
  padding: 10px 0;
  background: #fff;
  border: 2px solid #6a5a30;
  color: #241a08;
  font-size: 1.15rem;
  font-weight: 900;
}
.pickup-text .wh { color: #fff; }


/* ==========================================
   サブ部の段落見出し ── 巻物 ver2（サブタイトル_ver2.png / 860×131）
   長方形の帯＋左上に「壱ノ祝」用の額縁がある版。
     額縁  : 内側 x 78〜180 / y 7〜38  （中心 129, 22）
     本文帯: 左右の軸の内側 x 54〜828（幅774）/ 中心 x 441
   ※ 書き文字にする場合は サブタイトル_ver2.psd を使い、下の <span>/<p> を消す
========================================== */
.sub-part .title {
  /* ※ 巻物(860)より親(930)が広いと % の基準がズレるので、幅を巻物に合わせる */
  width: 860px;
  margin: 0 auto 2px;
}

/* 「壱ノ祝」── 左上の額縁の中に置く。<p> の外に出してあるので単独で動かせる */
.sub-part .title .chapter-text {
  position: absolute;
  /* ※ 巻物は 860px 固定なので、額縁の中心を実測値のpxで直接指定している */
  left: 122px;              /* ▼ 額縁の中心X（調整用）※額縁の内側 x84〜160 */
  top: 21px;                /* ▼ 額縁の中心Y（調整用）※額縁の内側 y6〜37 */
  transform: translate(-50%, -50%);
  z-index: 2;
  font-size: 1.28rem;       /* ▼ 表題の文字サイズ（調整用）※額縁の内側76pxに収まる上限あたり */
  font-weight: 900;
  line-height: 1;
  letter-spacing: .08em;
  /* letter-spacing は最後の字の“後ろ”にも入るので、同じぶんを左に足して字面を中央へ */
  padding-left: .08em;
  white-space: nowrap;
  color: #a3141a;
}

/* 見出し本文 ── 額縁の下の帯に中央寄せ */
.sub-part .title p {
  left: 51.3%;              /* ▼ 文字の左右位置（調整用）※帯の中心 441px */
  top: 52%;                 /* ▼ 文字の上下位置（調整用） */
  transform: translate(-50%, -50%);
  font-size: 1.92rem;       /* ▼ 文字サイズ（調整用）
                               一番長い弐ノ祝が軸に当たらない上限あたり（左右に約20pxの余白） */
  -webkit-text-stroke: 4px #4a2408;
  text-stroke: 4px #4a2408;
  -webkit-text-fill-color: var(--color-title-text);
  text-fill-color: var(--color-title-text);
}


/* ==========================================================================
   チーム内FB対応（2026-08-25）
   ここが最終上書き。戻すときはこのブロックごと削除する。
   ========================================================================== */

/* ---- 1. 全体の文字を一回り大きく（FB「フォントサイズをもう少し大きく」）----
   ※ .media-box p (0,1,1) が部品側の指定(0,1,0)を潰していたので、
      ここのセレクタは必ず .media-box を付けて詳細度を揃えること。 */
.media-box > p              { font-size: 1.06rem; line-height: 1.95; }
/* ★ .block-head は <p> なので .media-box > p (0,1,1) に負けて本文と同じ16.96pxになっていた。
      .block-head 側の 1.15rem も padding: 6px 14px も効いていない。
      - font-size … 小見出しとして本文より一回り大きく
      - line-height … 1.95 のままだと帯が背高になるので 1.5 に締める（帯の高さは据え置き）
      - padding … .media-box p の `0 32px 20px`（上0・下20px）が当たっていて文字が帯の上に
                  貼り付いていた。上下を同じ 10px にして縦中央に置く。左32pxは本文の
                  字下げに合わせたものなので残す。 */
.media-box .block-head {
  font-size: 1.4rem;
  line-height: 1.5;
  padding: 10px 14px 10px 32px;
}
.media-box .author-text     { font-size: .98rem; line-height: 1.9; }
.media-box .quest-name      { font-size: 1.06rem; }
/* 報酬の帯：アイコンと文字を1行に、左寄せ・縦中央（FB 172/368/394） */
.media-box .quest-add {
  display: flex;
  align-items: center;          /* 縦は中央 */
  justify-content: flex-start;  /* 横は左寄せ */
  gap: 8px;
  min-height: 52px;
  text-align: left;
  font-size: 1rem;
  line-height: 1.35;
  padding: 6px 8px !important;
}
.media-box .quest-add .ico {
  display: inline-block;
  flex: 0 0 auto;
  width: 40px;                  /* ▼ メダルの大きさ（調整用） */
  margin: 0 !important;
}
.media-box .quest-add .ico-t { width: 46px; }
.media-box .quest-add .rw-text { flex: 1 1 auto; }   /* 極選ポイントのチケットは縦長（FB 392/418） */
.media-box .item-name       { font-size: 1.06rem; }
.media-box .item-cost {
  font-size: 1rem;
  text-align: center;                 /* ▼ 最終FB「メダル●枚／●回までは全部中央揃えにする」 */
  padding: 7px 10px !important;
}
/* 最終FB「異名のところの項目表示位置が他と比べてずれている」
   異名セルだけ画像の箱の中身（ラベル＋短冊）が縦に長く、コスト欄の位置が上にずれていた。
   セルを縦フレックスにして **コスト欄を下端に寄せる**と、行内の全セルで高さが揃う。
   （グリッドの子は既定で stretch＝同じ行のセルは同じ高さになる） */
.media-box .item-cell { display: flex; flex-direction: column; }
.media-box .item-cell .item-cost { margin-top: auto; }
.media-box .serif-text      { font-size: 1.1rem; line-height: 1.9; }
.quest-no                   { font-size: .95rem; }
.kuji-table td,
.kuji-table th              { font-size: 1.02rem; }
.reward-table td,
.reward-table th            { font-size: 1rem; }
.notice-box li              { font-size: .9rem; line-height: 1.85; }

/* ---- 2. 真島ヒロの名前を大きく＋FAIRY TAILの書影（FB「名前大きく」「フェアリーテール」）---- */
/* ★ float:right にすると、フロートが終わった行（最後の1行）が
   書影の下に潜り込む。2カラム(flex)にして本文と書影を分ける。 */
.author-box {
  display: flex;
  align-items: center;          /* 書影は縦中央に揃える */
  gap: 20px;
}
.author-body { flex: 1 1 auto; min-width: 0; }
.media-box .author-name {
  font-size: 1.85rem;           /* ▼ 名前の大きさ（調整用） */
  line-height: 1.3;
  margin-bottom: 10px;
}
.author-name .author-kana { font-size: .52em; }
.author-cover {
  flex: 0 0 260px;              /* ▼ 書影の大きさ（調整用） */
  margin: 0;
  text-align: center;
}
.author-cover img {
  width: 100%;
  height: auto;
  /* .media-box img の padding(0 32px 20px) を継承すると、box-sizing:border-box の
     せいで内側の描画領域だけが削られ、書影が横に潰れる（.kira-card と同じ症状）。
     260px幅なら描画は194x290になり、本来の 258x386 に対して縦横比が崩れる。 */
  padding: 0;
  border: 1px solid rgba(201,162,76,.7);
  box-shadow: 0 3px 10px rgba(0,0,0,.5);
}
.author-cover figcaption {
  margin-top: 6px;
  font-size: .74rem;
  font-weight: 900;
  color: var(--color-title-text);
}
/* 見出しの中の「真島ヒロ」を一段大きく */
.author-hl { font-size: 1.18em; }

/* ---- 3. くじ筐体のアイコン（FB「ガチャ筐体のアイコンが無い」）---- */
.kuji-icons {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;                       /* ★帯の4分割とピッタリ合わせる。gap/paddingを入れると列がずれる */
  width: 880px;
  max-width: 100%;
  margin: -6px auto var(--spacing-block);
  padding: 0;
}
.kuji-icons .kuji-icon { text-align: center; }
.kuji-icons img {
  width: auto;
  max-width: 100%;
  max-height: 150px;            /* ▼ 筐体の大きさ（調整用） */
  margin: 0 auto !important;
  padding: 0 !important;
  filter: drop-shadow(0 3px 6px rgba(0,0,0,.5));
}
/* 帯と筐体をひと組に見せる */
.kuji-strip { margin-bottom: 8px; }

/* ---- 4. 拾壱連の演出（原稿p2）---- */
.juichiren {
  margin: 4px var(--spacing-content) var(--spacing-block);
  padding: 16px 10px 18px;
  text-align: center;
  background: radial-gradient(ellipse at center, rgba(120,20,14,.55), rgba(0,0,0,.32) 72%);
  border: 1px solid rgba(201,162,76,.5);
  border-radius: 6px;
}
.juichiren img { margin: 0 auto !important; padding: 0 !important; }
/* ★ .jr-flow は flex。フレックス子要素の margin:auto は余白を全部吸って左右に押し広げるので、
   くじ筐体とカードだけは margin を殺して gap で並べる（放っておくと120pxも離れる） */
.jr-flow img { margin: 0 !important; }
.jr-head { display: block; width: 100%; max-width: 374px; }
.jr-flow {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  margin: 10px 0 12px;
}
.jr-kuji { width: 132px; height: auto; filter: drop-shadow(0 3px 6px rgba(0,0,0,.55)); }
.jr-card { width: 168px; height: auto; box-shadow: 0 0 16px rgba(255,120,40,.5); }
.jr-arrow {
  width: 0; height: 0;
  border-left: 26px solid #d8c48c;
  border-top: 18px solid transparent;
  border-bottom: 18px solid transparent;
  flex: 0 0 auto;
}
.jr-foot { display: block; width: 100%; max-width: 560px; margin-top: 4px !important; }

/* ---- 5. カードをクリックで拡大（FB「カードのモーダル対応」）----
   ★ inline-block にすると「通常版」バッジ(inline-block)と同じ行に並んでしまい、
     バッジがカードの下端に潜り込む。必ず block にすること。 */
.card-zoom {
  display: block;
  position: relative;
  width: 224px;
  margin: 0 auto;
  cursor: zoom-in;
  line-height: 0;
}
.card-zoom::after {
  content: "クリックで詳細";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: 4px 0 5px;
  background: rgba(0,0,0,.62);
  color: #ffe9a8;
  font-size: .72rem;
  font-weight: 900;
  letter-spacing: .06em;
  line-height: 1.2;
  opacity: 0;
  transition: opacity .15s;
}
.card-zoom:hover::after { opacity: 1; }

/* ---- 5b. グリッド内のカードもクリックで拡大 ----
   マスの中のカードは幅がマス依存なので、包んだ <a> は幅を持たせず中身に従わせる。
   .card-zoom の width:224px をそのまま食うとマスから溢れる。 */
.card-zoom-s {
  display: block;
  width: 100%;
  max-width: none;
  margin: 0;
  cursor: zoom-in;
}
.card-zoom-s::after { content: none; }          /* 小さいので「クリックで拡大」は出さない */
.card-zoom-s img { transition: filter .15s, transform .15s; }
.card-zoom-s:hover img { filter: brightness(1.12); transform: scale(1.03); }

/* モーダルでカードを見せるとき（素材が224x315の実寸なので拡大する）
   ★ 後段の `.popup-figure img`(0,1,1) と同詳細度だと負ける。必ず2クラスで書く。 */
/* ★ カードの詳細画像は**等倍で撮ってある**（8月EVの納品物と同じ）。
   CSSで伸縮させるとにじむので、拡大も縮小もしない。 */
.popup-figure.popup-figure-card img {
  width: auto;
  height: auto;
  max-width: 96vw;
  max-height: 92vh;
  image-rendering: auto;
}

/* ---- 5c. カード画像下の定型文（FB 55）---- */
.media-box p.card-note {
  margin: -6px 0 var(--spacing-block);
  text-align: center;
  font-size: .92rem;
  font-weight: 700;
  color: var(--color-text);
  opacity: .92;
  padding-left: var(--spacing-content) !important;
  padding-right: var(--spacing-content) !important;
}

/* ---- 5d. MVの上下の境界線（7月EVの header.jpg に焼かれている淡い金線と同じ）---- */
.mv-section {
  border-top: 3px solid #e9d68a;      /* ▼ 線の色・太さ（調整用） */
  border-bottom: 3px solid #e9d68a;
  box-sizing: border-box;
}

/* ---- 6. 対象合戦の文字を赤く（FB）---- */
.battle-label {
  color: #ff4a3a;
  -webkit-text-stroke: 4px #240b09;
  text-stroke: 4px #240b09;
}
/* 金テーマ側（.sub-part）が後勝ちするので同じ詳細度で上書きする */
.sub-part .battle-label { color: #c8161e; -webkit-text-stroke: 5px #fff8e4; text-stroke: 5px #fff8e4; }
.sub-part .battle-label::before { background-color: #c8161e; }
.battle-label::before { background-color: #7a0f14; }
.quest-no {
  background: linear-gradient(#d61b22, #8e0c12);
  color: #fff;
}
.ql-no .circle-num,
.quest-no .circle-num { background-color: #7a0f14; }
/* にゃんのセリフの中の「◯月◯日発表の対面合戦」も赤 */
.taimen-red { color: #c8161e; font-weight: 900; text-decoration: underline; }
.sub-part .taimen-red { color: #b3121a; }

/* ---- 7. 赤備えのアイコン（原稿p3と同じく対象合戦の日程リストの右）---- */
.battle-schedule { position: relative; }
.akazonae {
  position: absolute;
  right: 40px;                  /* ▼ 左右位置（調整用） */
  top: 50%;
  transform: translateY(-50%);
  margin: 0;
  text-align: center;
}
.akazonae img {
  width: 118px;                 /* ▼ 大きさ（調整用） */
  height: auto;
  margin: 0 auto !important;
  padding: 0 !important;
}
.akazonae figcaption {
  margin-top: 2px;
  font-size: .95rem;
  font-weight: 900;
  color: var(--color-highlight);
  white-space: nowrap;
}

/* ---- 8. 異名は専用の裏地（FB「異名は専用の裏地があります」）---- */
.item-imyou {
  display: block;
  width: 92%;
  max-width: 176px;
  height: auto;
  margin: 0 auto !important;
  padding: 0 !important;
  image-rendering: auto;
}

/* ---- 8b. セリフ枠：ボタン入りは本文とボタンを横並びにする ----
   本文の下にボタンを積むと、本文の右・にゃんの右下に大きな空きが残って
   枠だけが間延びしていた（実測 281px。中身は本文100px＋ボタン93px）。
   本文とボタンを一行に並べて縦の空きを畳む。 */
.serif-box-tall { align-items: center; }
.serif-box-tall .serif-body {
  display: flex;
  align-items: center;
  gap: 24px;
}
.serif-box-tall .serif-text { flex: 1 1 auto; }
/* ボタンの p は inline-block のベースライン分、上下に約28pxずつ余白を作る。
   flex にすると行ボックス自体が無くなるので、ボタンの line-height を壊さずに消せる。
   （line-height:0 で潰すとボタン内の2行まで潰れて高さが 93→37px になる） */
.serif-box-tall .quest-btn-row {
  flex: 0 0 auto;
  margin: 0;
  display: flex;
}
.serif-box-tall .quest-btn { text-align: center; }

/* ---- 8c. 交換所のセル高さを揃える ----
   カードは140x197、チケットは100x121で、チケットの行だけセルが低くなっていた。
   画像の箱を197pxに固定し、中身は object-fit: contain で収める。 */
.media-box .item-cell img {
  height: 197px;
  object-fit: contain;
}

/* ---- 8d. にゃん1体＋フキダシ（.nyan-talk は掛け合い専用で高さ固定なので別に作る）---- */
.nyan-say {
  display: flex;
  align-items: center;
  gap: 26px;
  margin: 2px var(--spacing-content) var(--spacing-block);
}
/* 交換所グリッドの最終行の空き2マスに収めるとき */
.item-grid .nyan-say-cell {
  grid-column: span 2;          /* ▼ 何マスぶん使うか（調整用） */
  align-self: center;
  gap: 14px;
  margin: 0;
}
.item-grid .nyan-say-cell .nyan-say-chara { height: 118px; }
.item-grid .nyan-say-cell .nyan-say-balloon {
  font-size: .98rem;
  line-height: 1.8;
  padding: 14px 16px !important;
}
.nyan-say-chara {
  flex: 0 0 auto;
  width: auto;
  height: 132px;                /* ▼ にゃんの大きさ（調整用） */
  margin: 0 !important;
  padding: 0 !important;
}
.media-box p.nyan-say-balloon {
  position: relative;
  flex: 1 1 auto;
  margin: 0;
  padding: 18px 22px !important;
  background: #fff;
  border: 2px solid #4a3418;
  border-radius: 10px;
  color: #2e2010;
  font-size: 1.08rem;
  font-weight: 800;
  line-height: 1.95;
  text-align: center;
  box-shadow: 0 3px 6px rgba(60, 40, 8, .25);
}
/* しっぽ ── 枠色と白地の三角を2枚重ねて“縁のある三角”にする */
.nyan-say-balloon::before,
.nyan-say-balloon::after {
  content: "";
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  border: 14px solid transparent;
}
.nyan-say-balloon::before { left: -28px; border-right-color: #4a3418; }
.nyan-say-balloon::after  { left: -25px; border-right-color: #fff; }

/* ---- 8e. 本文の一部だけ赤くする（large-text と違ってサイズは変えない）---- */
.red-text { color: var(--color-highlight); }

/* ---- 9. 交換上限アップのセリフ内で強調する語 ---- */
.hl-up { color: #b3121a; font-weight: 900; }

/* ---- 10. ログボ表にアイテム画像（FB「ログボのアイテム画像」）---- */
.reward-table td { vertical-align: middle; }
.rw-ico {
  display: block;
  width: 68px;                  /* ▼ メダルの大きさ（調整用） */
  height: auto;
  margin: 2px auto 4px !important;
  padding: 0 !important;
}
.rw-ico-t { width: 58px; }      /* くじチケットは縦長なので少し小さく */
.rw-name { display: block; line-height: 1.4; }

/* ---- 11. クエスト一覧のボタン（原稿の赤ボタン）---- */
/* ★ .media-box p の white-space: pre-wrap のせいで、タグ内の改行・インデントが
   そのまま空行になり行が161pxまで伸びていた。ボタン行だけ通常の折り返しに戻す。 */
.media-box .quest-btn-row,
.quest-btn-row {
  text-align: center;
  margin: 0 0 var(--spacing-block);
  padding: 0 !important;
  white-space: normal;
  line-height: 0;
  font-size: 0;
}
.quest-btn {
  display: inline-block;
  min-width: 260px;
  padding: 12px 30px;
  border-radius: 4px;
  background: linear-gradient(#e01f26, #a3141a);
  border: 1px solid #ffd98a;
  color: #fff;
  font-size: 1.1rem;
  font-weight: 900;
  line-height: 1.3;             /* 親の line-height:0 を打ち消す */
  letter-spacing: .06em;
  text-decoration: none;
  cursor: pointer;
  box-shadow: 0 3px 7px rgba(0,0,0,.45);
}
.quest-btn-main::after { content: " \25B6"; font-size: .8em; }
.quest-btn-sub {
  display: block;
  line-height: 1.5;             /* 同上 */
  margin-top: 5px;
  padding: 2px 0 3px;
  background: rgba(0,0,0,.28);
  border-radius: 2px;
  font-size: .78rem;
  letter-spacing: .04em;
}
.quest-btn:hover { filter: brightness(1.12); }

/* ---- 11b. 合戦クエスト一覧：説明文＋ボタンを枠に入れて右寄せ（対面合戦側と揃える）---- */
.quest-lead {
  display: flex;
  align-items: center;
  gap: 20px;
  margin: 0 var(--spacing-content) var(--spacing-block);
  padding: 14px 18px;
  border: 1px solid rgba(201,162,76,.55);
  background: rgba(0, 0, 0, .2);
}
.sub-part .quest-lead {
  background: rgba(255, 250, 232, .72);
  border-color: #a3792a;
}
.media-box .quest-lead-text {
  flex: 1 1 auto;
  margin: 0;
  padding: 0 !important;        /* .media-box p の左パディングを打ち消す */
  font-size: 1.06rem;
  line-height: 1.9;
}
.media-box .quest-lead .quest-btn-row { flex: 0 0 auto; margin: 0; }

/* ---- 12. モーダル本体 ---- */
.popup-overlay {
  display: none;
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(0,0,0,.78);
  z-index: 1500;
  align-items: center;
  justify-content: center;
  padding: 24px;
}
.popup-figure { position: relative; margin: 0; text-align: center; }
/* ★ ここに来るのは幸村の通常版/パラレル版だけ（にゃん・饗宴は .popup-figure-card で上書き）。
      素材の解像度が違い（通常版 card_normal_lg.png=448x630 / パラレル版 card_kira.gif=224x315）、
      width:auto のままだと通常版だけ2倍で表示され、パラレル版と揃わない（DH QA r53）。
      表示幅を固定して揃える。GIF側は2倍に伸びるが、キラ素材は224x315しか無い。
      min() の 58vh は 224:315 の比で高さが 82vh に収まる値。 */
.popup-figure img {
  width: min(448px, 88vw, 58vh);
  height: auto;
  border-radius: 4px;
  box-shadow: 0 8px 40px rgba(0,0,0,.8);
}
.popup-figure figcaption {
  margin-top: 10px;
  color: #ffe9a8;
  font-size: .95rem;
  font-weight: 900;
}
.popup-close {
  position: absolute;
  top: -16px; right: -16px;
  width: 40px; height: 40px;
  border: 2px solid #fff;
  border-radius: 50%;
  background: #1a1a1a;
  color: #fff;
  font-size: 18px;
  font-weight: bold;
  line-height: 1;
  cursor: pointer;
  z-index: 2;
}
.popup-close:hover { background: #b03030; }

.quest-modal {
  position: relative;
  width: 900px;
  max-width: 94vw;
  max-height: 88vh;
  overflow-y: auto;
  padding: 44px 26px 28px;      /* 上は閉じるボタンぶん */
  background-color: #f6ecd2;
  background-image: url(../img/gold_tex.jpg);
  background-size: 400px 400px;
  border: 3px solid #8a6218;
  border-radius: 8px;
  box-shadow: 0 10px 44px rgba(0,0,0,.8);
}
.quest-modal .popup-close { position: sticky; float: right; top: 0; right: 0; margin: -34px -10px 0 0; }
.quest-modal .quest-list { display: none; }

/* タイトル帯 */
.ql-title {
  margin: 0 0 18px;
  padding: 12px 0 13px;
  text-align: center;
  background: linear-gradient(#a3792a, #6e4d12);
  border: 1px solid #f0d68f;
  border-radius: 4px;
  color: #fff6dc;
  font-size: 1.5rem;
  font-weight: 900;
  letter-spacing: .1em;
  text-shadow: 0 2px 3px rgba(0,0,0,.45);
}

/* 対象期間ボックス（白地の角丸。8月EVの見せ方に合わせる） */
.ql-period {
  margin: 0 0 22px;
  padding: 14px 18px;
  background: #fffdf5;
  border: 1px solid #a3792a;
  border-radius: 8px;
}
.ql-period ul { list-style: none; margin: 0; padding: 0; }
.ql-period li {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 3px 0;
  color: #3a2410;
  font-size: 1.02rem;
  font-weight: 900;
  line-height: 1.7;
}
.ql-date { flex: 1 1 auto; }
.ql-badge {
  flex: 0 0 auto;
  min-width: 108px;
  padding: 4px 10px 5px;
  text-align: center;
  background: linear-gradient(#8a6218, #6e4d12);
  border-radius: 3px;
  color: #fff6dc;
  font-size: .9rem;
  letter-spacing: .04em;
}

/* ▼小見出し */
.ql-sec {
  margin: 22px 0 8px;
  color: #4a2e08;
  font-size: 1.12rem;
  font-weight: 900;
}
.ql-sec::before { content: "▼"; margin-right: 4px; color: #8a6218; }

/* 表 */
.ql-table { width: 100%; border-collapse: collapse; background: #fffdf5; }
.ql-table th, .ql-table td {
  padding: 11px 14px;
  border: 1px solid #a3792a;
  color: #3a2410;
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.6;
  text-align: center;
  vertical-align: middle;
}
.ql-table th { background: #8a6218; color: #fff6dc; font-weight: 900; letter-spacing: .04em; }
.ql-table tbody tr:nth-child(even) td { background: #f7eeda; }
.ql-table td.ql-cond { text-align: left; }
.ql-table td.ql-rw { width: 38%; white-space: nowrap; }
.ql-ico { display: inline-block; width: 26px; height: auto; vertical-align: -7px; margin: 0 4px 0 0 !important; padding: 0 !important; }
.ql-no { white-space: nowrap; font-weight: 900; width: 26%; }
.ql-card { text-align: left; }
.ql-card img {
  display: inline-block;
  width: 46px; height: auto; vertical-align: middle;
  margin: 0 10px 0 0 !important; padding: 0 !important;
  border: 1px solid #a3792a;
}
/* 対面合戦は30行あるのでテーブルを2枚並べる（tbodyにgridを当てると幅が崩れる） */
.ql-split { display: flex; gap: 14px; align-items: flex-start; }
.ql-split .ql-table { flex: 1 1 0; }
.ql-split .ql-table td,
.ql-split .ql-table th { padding: 8px 10px; font-size: .95rem; }
.ql-split .ql-table td.ql-cond { white-space: nowrap; }
.ql-split .ql-table td.ql-rw { width: auto; }
.ql-lead { margin: 0 2px 10px; color: #4a2e08; font-size: .96rem; font-weight: 700; line-height: 1.7; }

.ql-note { margin: 12px 2px 0; color: #4a2e08; font-size: .9rem; font-weight: 700; line-height: 1.8; }

/* ---- 13. 締めのにゃんを大きく（FB「最後のキャラのサイズを大きく」）---- */
.nyan-closing { gap: 16px; padding: 16px 0 32px; }
.nyan-closing img { height: 150px; }              /* ▼ 大きさ（調整用）※旧104px */
/* ★【雅】の2体（3番目=太閤にゃん / 5番目=幸村にゃん）を一段大きく。
      カード側も【雅】が大きく【化】が小さいので、それに合わせる（DH QA r370）。
      並び順は 竹林・霧隠・太閤・猿飛・幸村。順番を変えるならここも直すこと。 */
.nyan-closing img:nth-child(3),
.nyan-closing img:nth-child(5) { height: 190px; }
.nyan-closing-text { font-size: 1.4rem; }