/* =========================
   main.document （最終構成）
========================= */

/* ===== タイトル ===== */
main.document .pageTitle {
  margin-bottom : 20px; /* 間延び防止 */
  text-align    : center;
}

main.document .pageTitle h2 {
  color          : #222222;
  display        : inline-block;
  font-family    : "Noto Sans JP", "Helvetica Neue", sans-serif;
  font-size      : clamp(1.7rem, 2vw, 2.1rem);
  font-weight    : 700;
  letter-spacing : 0.04em;
  padding-bottom : 6px;
  position       : relative;
}

main.document .pageTitle h2::after {
  background    : linear-gradient(90deg, #B59472 0%, #E3D4C0 100%);
  border-radius : 2px;
  bottom        : 0;
  content       : "";
  height        : 2px;
  left          : 50%;
  position      : absolute;
  transform     : translateX(-50%);
}

/* ===== mesBox（装飾削除、レイアウト制御のみ） ===== */
main.document .mesBox {
  box-sizing      : border-box;
  display         : flex;
  justify-content : center;
  margin          : 0 auto;
  max-width       : 1280px;
  padding         : 0; /* ✅ 余白・背景削除 */
  width           : 100%;
}

/* ===== manualBox（主デザイン集約） ===== */
main.document .manualBox {
  background    : #FFFFFF;
  border-radius : 12px;
  box-shadow    : 0 4px 16px rgba(0, 0, 0, 0.05);
  box-sizing    : border-box;
  max-width     : 960px;
  padding       : 40px 60px;
  width         : 100%;
}

/* ===== リストナビ ===== */
main.document nav ol {
  counter-reset         : section;
  display               : grid;
  gap                   : 18px;
  grid-template-columns : repeat(auto-fit, minmax(260px, 1fr));
  list-style            : none;
  margin                : 0;
  padding               : 0;
}

main.document nav li {
  background    : #F9F8F6;
  border-radius : 10px;
  box-shadow    : 0 2px 6px rgba(0, 0, 0, 0.04);
  padding       : 18px 20px;
  position      : relative;
  transition    : transform 0.2s ease, box-shadow 0.2s ease;
}

main.document nav li:hover {
  box-shadow : 0 4px 10px rgba(0, 0, 0, 0.08);
  transform  : translateY(-2px);
}

main.document nav li::after {
  color             : #B59472;
  content           : counter(section, decimal-leading-zero);
  counter-increment : section;
  font-family       : "Playfair Display", serif;
  font-size         : 0.8rem;
  opacity           : 0.5;
  position          : absolute;
  right             : 14px;
  top               : 10px;
}

/* ===== リンク ===== */
main.document nav a {
  color           : #333333;
  display         : block;
  font-weight     : 600;
  letter-spacing  : 0.02em;
  text-decoration : none;
  transition      : color 0.2s ease;
}

main.document nav a:hover {
  color : #B59472;
}

/* ===== レスポンシブ ===== */
@media (max-width : 768px) {
  main.document .manualBox {
    padding : 24px 18px;
  }

  main.document nav ol {
    grid-template-columns : 1fr;
  }
}

/* =========================
   MANUALページ専用デザイン
   (termsBoxデザイン集約版)
========================= */

/* --- mesBox: 構造保持のみ --- */
main.document .mesBox {
  display         : flex;
  justify-content : center;
  margin          : 0 auto;
  max-width       : 1280px;
  padding         : 0;
}

/* --- termsBox: メインコンテナ --- */
main.document .termsBox {
  background    : #FFFFFF;
  border-radius : 14px;
  box-shadow    : 0 4px 16px rgba(0, 0, 0, 0.05);
  color         : #333333;
  font-size     : 0.95rem;
  line-height   : 1.8;
  max-width     : 960px;
  padding       : 48px 60px;
  width         : 100%;
}

/* 導入文（最初のdiv） */
main.document .termsBox > div:first-of-type {
  background    : #FBFAF8;
  border-left   : 4px solid var(--color-accent, #B59472);
  border-radius : 8px;
  color         : #555555;
  margin-bottom : 32px;
  padding       : 20px 24px;
}

/* =========================
   見出し
========================= */

/* h3 見出し */
main.document .termsBox li > h3 {
  align-items    : center;
  color          : var(--color-accent-dark, #8C6C4A);
  display        : inline-flex; /* 番号の右に横並び */
  font-size      : 1.1rem;
  font-weight    : 700;
  gap            : 6px; /* ▶ と文字の間 */
  margin         : 0 0 10px 0;
  vertical-align : middle;
}

/* ▶マーク（タイトル左） */
main.document .termsBox h3::before {
  color     : var(--color-accent, #B59472);
  content   : "▶";
  font-size : 0.8rem;
  transform : translateY(1px);
}

/* =========================
   リスト構造
========================= */

/* 親リスト（番号付き） */
main.document .termsBox ol {
  list-style    : decimal;
  margin-bottom : 1.5em;
  padding-left  : 2em; /* 番号分の余白 */
}

/* 各リスト項目 */
main.document .termsBox ol li {
  line-height   : 1.8;
  margin-bottom : 24px;
  position      : relative;
}

/* サブリスト（黒丸） */
main.document .termsBox ol ol {
  list-style   : disc;
  margin-left  : 1.8em;
  margin-top   : 8px;
  padding-left : 0;
}

main.document .termsBox ol ol li {
  margin-bottom : 8px;
}

/* リスト内テキストブロック */
main.document .termsBox li > div,
main.document .termsBox li > ol,
main.document .termsBox li > ul {
  margin-left : 1.2em;
}

/* =========================
   テキスト装飾・リンクなど
========================= */

/* リンク */
main.document .termsBox a {
  color           : var(--color-accent, #B59472);
  text-decoration : underline;
  transition      : color 0.2s ease;
}

main.document .termsBox a:hover {
  color           : var(--color-accent-dark, #8C6C4A);
  text-decoration : none;
}

/* 補足・注意ブロック */
main.document .termsBox div {
  background    : #FDFAF6;
  border-left   : 3px solid #D9C5AA;
  border-radius : 6px;
  color         : #555555;
  font-size     : 0.9rem;
  margin-top    : 20px;
  padding       : 16px 20px;
}

/* =========================
   レスポンシブ
========================= */
@media (max-width : 768px) {
  main.document .termsBox {
    padding : 28px 20px;
  }

  main.document .termsBox li > h3 {
    font-size : 1rem;
  }
}

/* =========================
   MANUALページ専用デザイン
   (termsBoxデザイン集約版)
========================= */

/* --- mesBox: 構造保持のみ --- */
main.document .mesBox {
  display         : flex;
  justify-content : center;
  margin          : 0 auto;
  max-width       : 1280px;
  padding         : 0;
}

/* --- termsBox: メインコンテナ --- */
main.document .termsBox {
  background    : #FFFFFF;
  border-radius : 14px;
  box-shadow    : 0 4px 16px rgba(0, 0, 0, 0.05);
  color         : #333333;
  font-size     : 0.95rem;
  line-height   : 1.8;
  max-width     : 960px;
  padding       : 48px 60px;
  width         : 100%;
}

/* 導入文（最初のdiv） */
main.document .termsBox > div:first-of-type {
  background    : #FBFAF8;
  border-left   : 4px solid var(--color-accent, #B59472);
  border-radius : 8px;
  color         : #555555;
  margin-bottom : 32px;
  padding       : 20px 24px;
}

/* =========================
   見出し
========================= */

/* h3 見出し（背景付き） */
main.document .termsBox li > h3 {
  align-items    : center;
  background     : linear-gradient(90deg, #F5EFE8 0%, #F8F4EE 100%);
  border-radius  : 6px;
  box-shadow     : inset 0 0 1px rgba(0, 0, 0, 0.1);
  color          : #4A3B28;
  display        : inline-flex; /* 番号の右に横並び */
  font-size      : 1.1rem;
  font-weight    : 700;
  gap            : 8px; /* ▶ と文字の間 */
  margin         : 0 0 10px 0;
  padding        : 6px 12px 6px 10px; /* 背景の内側余白 */
  vertical-align : middle;
  width          : 100%;
}

/* ▶マーク（タイトル左） */
main.document .termsBox h3::before {
  color     : var(--color-accent, #B59472);
  content   : "▶";
  font-size : 0.8rem;
  transform : translateY(1px);
}

/* =========================
   リスト構造
========================= */

/* 親リスト（番号付き） */
main.document .termsBox ol {
  list-style    : decimal;
  margin-bottom : 1.5em;
  padding-left  : 2em; /* 番号分の余白 */
}

/* 各リスト項目 */
main.document .termsBox ol li {
  line-height   : 1.8;
  margin-bottom : 24px;
  position      : relative;
}

/* サブリスト（黒丸） */
main.document .termsBox ol ol {
  list-style   : disc;
  margin-left  : 1.8em;
  margin-top   : 8px;
  padding-left : 0;
}

main.document .termsBox ol ol li {
  margin-bottom : 8px;
}

/* リスト内テキストブロック */
main.document .termsBox li > div,
main.document .termsBox li > ol,
main.document .termsBox li > ul {
  margin-left : 1.2em;
}

/* =========================
   テキスト装飾・リンクなど
========================= */

/* リンク */
main.document .termsBox a {
  color           : var(--color-accent, #B59472);
  text-decoration : underline;
  transition      : color 0.2s ease;
}

main.document .termsBox a:hover {
  color           : var(--color-accent-dark, #8C6C4A);
  text-decoration : none;
}

/* 補足・注意ブロック */
main.document .termsBox div {
  background    : #FDFAF6;
  border-left   : 3px solid #D9C5AA;
  border-radius : 6px;
  color         : #555555;
  font-size     : 0.9rem;
  margin-top    : 20px;
  padding       : 16px 20px;
}

/* =========================
   レスポンシブ
========================= */
@media (max-width : 768px) {
  main.document .termsBox {
    padding : 28px 20px;
  }

  main.document .termsBox li > h3 {
    font-size : 1rem;
    padding   : 5px 10px;
  }
}

/* =========================
   MANUAL / DOCUMENT PAGE
========================= */

/* =========================
   MANUAL / DOCUMENT PAGE
   （他ページ非干渉）
========================= */

main.document .mesBox {
  background : none;
  display    : block;
  margin     : 0 auto;
  padding    : 0;
  width      : 100%;
}

/* --- chapterBox全体 --- */
main.document .mesBox .chapterBox {
  background    : #FFFFFF;
  border-radius : 12px;
  box-shadow    : 0 4px 18px rgba(0, 0, 0, 0.06);
  display       : block;
  margin-bottom : 40px;
  padding       : 36px 48px;
}

/* --- 導入文 (最初の div) --- */
main.document .mesBox .chapterBox > div:first-of-type {
  background    : #FBFAF8;
  border-left   : 4px solid var(--color-accent, #B59472);
  border-radius : 8px;
  color         : #555555;
  font-size     : 0.95rem;
  line-height   : 1.9;
  margin-bottom : 36px;
  padding       : 20px 24px;
}

/* --- リスト構造調整（横並び防止） --- */
main.document .mesBox .chapterBox ol,
main.document .mesBox .chapterBox ul {
  display             : block !important;
  list-style-position : outside;
  margin              : 0 0 1.2em 0;
  padding-left        : 1.8em;
  width               : 100% !important;
}

main.document .mesBox .chapterBox li {
  display       : block;
  line-height   : 1.8;
  margin-bottom : 1.6em;
  width         : 100%;
}

/* --- 第1階層見出し h3 --- */
main.document .mesBox .chapterBox h3 {
  align-items   : center;
  background    : linear-gradient(90deg, #F5EFE8 0%, #F8F4EE 100%);
  border-radius : 6px;
  box-shadow    : inset 0 0 1px rgba(0, 0, 0, 0.1);
  color         : #4A3B28;
  display       : inline-flex;
  font-size     : 1.1rem;
  font-weight   : 700;
  gap           : 8px;
  line-height   : 1.4;
  margin        : 0 0 14px 0;
  padding       : 6px 14px 6px 10px;
  width         : 100%;
}

main.document .mesBox .chapterBox h3::before {
  color     : var(--color-accent, #B59472);
  content   : "▶";
  font-size : 0.8rem;
  transform : translateY(1px);
}

/* --- テーブル --- */
main.document .mesBox .chapterBox table {
  border-collapse : collapse;
  box-shadow      : 0 2px 6px rgba(0, 0, 0, 0.05);
  font-size       : 0.9rem;
  margin-top      : 30px;
  width           : 100%;
}

main.document .mesBox .chapterBox th,
main.document .mesBox .chapterBox td {
  border         : 1px solid #E3DFDA;
  padding        : 10px 14px;
  vertical-align : top;
}

main.document .mesBox .chapterBox th {
  background  : #F8F6F3;
  color       : #4A3B28;
  font-weight : 700;
  text-align  : center;
}

main.document .mesBox .chapterBox td ul {
  margin       : 0;
  padding-left : 1.5em;
}

/* --- 最下部リンク --- */
main.document .mesBox .chapterBox > div:last-of-type {
  margin-top : 40px;
  text-align : right;
}

main.document .mesBox .chapterBox a {
  color           : var(--color-accent, #B59472);
  font-weight     : 500;
  text-decoration : underline;
  transition      : color 0.2s ease;
}

main.document .mesBox .chapterBox a:hover {
  color           : var(--color-accent-dark, #8C6C4A);
  text-decoration : none;
}

/* --- レスポンシブ対応 --- */
@media (max-width : 768px) {
  main.document .mesBox .chapterBox {
    padding : 24px 20px;
  }

  main.document .mesBox .chapterBox h3 {
    font-size : 1rem;
    padding   : 5px 10px;
    width     : 100%;
  }

  main.document .mesBox .chapterBox th,
  main.document .mesBox .chapterBox td {
    padding : 8px 10px;
  }
}

/* --- データテーブル内の列名や短文セルの改行禁止 --- */
main.document #dataTable th,
main.document #dataTable td {
  white-space : nowrap; /* ✅ 改行しない */
}

/* --- 「説明」列のみ改行を許可 --- */
main.document #dataTable td:nth-child(3) {
  white-space : normal; /* ✅ 説明列は折り返し可 */
}

/* --- 退会ボタン（redBtn） --- */
#planSubmitBtn.redBtn {
  align-items     : center;
  background      : linear-gradient(180deg, #D84B4B 0%, #B93E3E 100%);
  border          : none;
  border-radius   : 8px;
  box-shadow      : 0 3px 8px rgba(217, 75, 75, 0.25);
  color           : #FFFFFF;
  cursor          : pointer;
  display         : inline-flex;
  font-size       : 0.95rem;
  font-weight     : 600;
  justify-content : center;
  letter-spacing  : 0.05em;
  padding         : 10px 26px;
  transition      : all 0.25s ease;
}

/* --- hover時：やや暗く、立体感を強調 --- */
#planSubmitBtn.redBtn:hover {
  background : linear-gradient(180deg, #C94444 0%, #9E2F2F 100%);
  box-shadow : 0 4px 10px rgba(185, 62, 62, 0.35);
  transform  : translateY(-1px);
}

/* --- active時：押し込まれたように見せる --- */
#planSubmitBtn.redBtn:active {
  background : linear-gradient(180deg, #A43737 0%, #8A2C2C 100%);
  box-shadow : inset 0 2px 4px rgba(0, 0, 0, 0.2);
  transform  : translateY(1px);
}

/* --- disabled時（将来拡張用） --- */
#planSubmitBtn.redBtn:disabled {
  background : #E0BEBE;
  color      : #FFF5F5;
  cursor     : not-allowed;
  opacity    : 0.6;
}