/* ==========================================
   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;     /* 左端からの余白 */
}

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

/* キャラクターレイヤー（透過PNG、背景の上に重ねる） */
.mv-chara {
  position: absolute;
  bottom: 4.5%;             /* ▼ 上下位置（調整用：大きくすると上へ） */
  left: 5%;               /* ▼ フキダシON時の左右位置（調整用） */
  width: 70%;             /* ▼ キャラのサイズ（調整用） */
  height: auto;
  z-index: 1;
  transition: left 0.3s ease;
}

/* フキダシOFF時：キャラを中央寄りに移動 */
.mv-section.balloon-off .mv-chara {
  left: 15%;              /* ▼ フキダシOFF時の左右位置（調整用） */
}

/* フキダシOFF時：フキダシを非表示 */
.mv-section.balloon-off .mv-balloon {
  display: none;
}

/* フキダシコンテナ — 背景画像でフキダシ形状を表示 */
.mv-balloon {
  position: absolute;
  z-index: 2;  /* キャラ(z-index:1)より手前 */
  /* ▼ 位置・サイズは画像に合わせて調整 */
  right: 3%;
  top: 18%;
  width: 27%;
  height: 55%;

  /* フキダシ形状の透過PNG */
  background: url('../img/mv_balloon.png') center / contain no-repeat;

  display: flex;
  align-items: center;
  justify-content: center;
}

/* フキダシ内テキスト */
.mv-balloon-text {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;

  /* ▼ テキスト領域のサイズ・位置（フキダシ形状に収まるよう調整） */
  width: 75%;
  height: 70%;
  margin-left: 8%;

  font-size: 0.95rem;
  font-weight: 800;
  line-height: 1.65;
  color: #3a2a10;
}

/* 本文テキスト */
.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: "・";
}