/* ===================== main の配置 ===================== */
main {
  align-items    : center; /* 横方向の中央寄せ */
  background     : linear-gradient(180deg, #FAF9F8 0%, #F6F4F2 100%);
  box-sizing     : border-box;
  display        : flex;
  flex-direction : column; /* ← 縦方向に並べる */
  font-family    : "Noto Sans JP", sans-serif;
  gap            : 40px; /* 各 .topData 間の余白 */
  margin         : 0 auto;
  max-width      : 1280px;
  padding        : 100px 20px 120px;
  width          : 860px;
}

/* ===================== 料金表セクション ===================== */
.section.pricing-table {
  background : #FFFFFF;
  max-width  : 100vw; /* ビューポートいっぱい */
  min-width  : 320px; /* スマホ最小幅 */
  padding    : 80px 0;
  width      : 100%;
}

.pricing-table .container {
  margin : 0 auto;
  width  : min(1100px, 90%);
}

/* タイトル */
.section.pricing-table .section-title {
  color         : var(--color-accent-dark);
  margin-bottom : 40px;
}

/* ===================== テーブル ===================== */
#dataTable {
  background      : #FFFFFF;
  border-collapse : collapse;
  border-radius   : 12px;
  box-shadow      : 0 8px 24px rgba(0, 0, 0, 0.05);
  font-size       : 0.95rem;
  line-height     : 1.6;
  overflow        : hidden;
  width           : 100%;
}

/* 表題行 */
#dataTable th {
  background     : var(--color-accent-dark);
  border-bottom  : 2px solid rgba(255, 255, 255, 0.15);
  color          : #FFFFFF;
  font-weight    : 600;
  letter-spacing : 0.03em;
  padding        : 16px 20px;
  text-align     : left;
}

/* データ行 */
#dataTable td {
  background     : #FFFFFF;
  border-bottom  : 1px solid #EEEEEE;
  padding        : 14px 20px;
  transition     : background 0.2s ease;
  vertical-align : top;
}

/* ホバー時 */
#dataTable tr:hover td {
  background : rgba(181, 148, 114, 0.05);
}

/* JS連動用クラス */
#dataTable tr.hover-group td,
#dataTable td.priceNoteBox.hover {
  background : rgba(181, 148, 114, 0.05) !important;
}

/* 右寄せ */
#dataTable .tdRight {
  color       : var(--color-accent-dark);
  font-weight : 700;
  text-align  : right;
}

/* 備考セル */
.priceNoteBox {
  background    : #FAF9F7;
  border-left   : 3px solid var(--color-accent);
  border-radius : 0 6px 6px 0;
  color         : #555555;
  font-size     : 0.9rem;
  line-height   : 1.7;
  padding       : 12px 16px;
}

/* ===================== レスポンシブ ===================== */
@media (max-width : 768px) {
  .section.pricing-table {
    padding : 60px 0;
  }

  #dataTable {
    box-shadow : 0 4px 10px rgba(0, 0, 0, 0.05);
    font-size  : 0.85rem;
  }

  #dataTable th,
  #dataTable td {
    padding : 10px 12px;
  }

  .priceNoteBox {
    border-left-width : 2px;
    padding           : 8px 10px;
  }
}

/* ===================== 微調整（モバイル最小対応） ===================== */
@media (max-width : 480px) {
  .section.pricing-table .section-title {
    font-size : 1.4rem;
  }

  #dataTable {
    font-size : 0.8rem;
  }

  #dataTable th,
  #dataTable td {
    padding : 8px 10px;
  }
}

/* ===================== 汎用セクションタイトル ===================== */
h2 {
  color          : var(--color-accent-dark);
  display        : block;
  font-family    : "Playfair Display", serif;
  font-size      : clamp(1.8rem, 2.4vw, 2.2rem);
  font-weight    : 700;
  letter-spacing : 0.03em;
  margin-bottom  : 1.2rem; /* 下線との距離を短く */
  position       : relative;
  text-align     : left; /* 左寄せに変更 */
  text-shadow    : 0 1px 1px rgba(255, 255, 255, 0.5),
  0 2px 4px rgba(0, 0, 0, 0.05);
}

/* 下線：見出し直下にフル幅で上品なライン */
h2::after {
  background    : linear-gradient(
    to right,
    transparent 0%,
    var(--color-accent) 10%,
    var(--color-accent-dark) 50%,
    var(--color-accent) 90%,
    transparent 100%
  );
  border-radius : 1px;
  bottom        : 0;
  content       : "";
  height        : 2px;
  left          : 0;
  opacity       : 0.8;
  position      : absolute;
  width         : 100%; /* 表全体と同じ幅感に */
}


.section .container {
  margin-top : 0;
}

/* 表の直上にあるh2との距離を詰める */
.section-title + table,
.section-title + .table-wrapper {
  margin-top : 1.5rem;
}

/* 背景色があるセクションでも馴染むよう淡く調整 */
.section {
  background    : linear-gradient(180deg, #FFFFFF, #F9F8F7 80%, #F7F5F3 100%);
  border-bottom : 1px solid #EAE4DC;
  border-top    : 1px solid #EAE4DC;
  max-width     : 100vw;
  min-width     : 320px;
}

/* スマホではカード型に変更 */
@media (max-width : 1024px) {
  main {
    align-items : initial; /* 中央寄せ解除 */
    box-sizing  : border-box;
    display     : block !important;
    gap         : 0; /* 不要な間隔をリセット */
    margin      : 0 auto;
    max-width   : 100vw !important;
    padding     : 60px 10px 80px !important;
    width       : 100% !important;
  }

  #dataTable,
  #dataTable tbody,
  #dataTable tr,
  #dataTable td,
  #dataTable th {
    display : block;
    width   : 100%;
  }

  #dataTable tr {
    background    : #FFFFFF;
    border        : 1px solid #EEEEEE;
    border-radius : 10px;
    box-shadow    : 0 4px 10px rgba(0, 0, 0, 0.05);
    margin-bottom : 16px;
    padding       : 12px;
  }

  #dataTable th {
    display : none; /* 見出し非表示 */
  }

  #dataTable td {
    border  : none;
    padding : 6px 0;
  }

  #dataTable td::before {
    color         : var(--color-accent-dark);
    content       : attr(data-label);
    display       : block;
    font-weight   : 600;
    margin-bottom : 2px;
  }

  /* 備考セル（rowspanセル）はカード下部で幅100%表示 */
  #dataTable td.priceNoteBox {
    background    : #FAF9F7;
    border-left   : 3px solid var(--color-accent);
    border-radius : 6px;
    margin-top    : 8px;
    padding       : 10px 12px;
    width         : 100%;
  }
}