@charset "utf-8";
/* CSS Document */


/* ==================================================
  1. タブメニューのデザイン（非選択タブを少し薄めのグレーに調整）
================================================== */
.custom-tab-menu {
  display: flex !important;
  list-style: none !important;
  padding: 0 !important;
  margin: 15px 0 0 0 !important;
  position: relative !important;
  z-index: 2 !important;
}

.custom-tab-menu li {
  flex: 1 !important;
  text-align: center !important;
  padding: 12px 10px !important;
  /* 非選択タブ：明るく上品な薄めグレー */
  background-color: #ececec !important;
  color: #555555 !important;
  font-weight: bold !important;
  cursor: pointer !important;
  border: 1px solid #cccccc !important;
  border-bottom: none !important;
  border-radius: 6px 6px 0 0 !important;
  margin-right: 4px !important;
  font-size: 15px !important;
  transition: all 0.2s ease !important;
}

.custom-tab-menu li:last-child {
  margin-right: 0 !important;
}

/* 選択中（アクティブ）のタブ */
.custom-tab-menu li.is-active {
  background-color: #282F60 !important;
  color: #ffffff !important;
  border-color: #282F60 !important;
}

/* ==================================================
  2. コンテナ（大枠の罫線なし）
================================================== */
.tab-wrapper-container {
  border: none !important;
  background-color: transparent !important;
  padding: 15px 0 0 0 !important;
  position: relative !important;
  box-sizing: border-box !important;
}

/* 内部テーブルの基本設定 */
.tab-wrapper-container table {
  width: 100% !important;
  border-collapse: separate !important;
  border-spacing: 0 15px !important; /* 行ごとの上下間隔（離す設定） */
  margin: 0 !important;
  font-size: 15px !important;
  line-height: 1.6 !important;
  color: #333333 !important;
}

/* ==================================================
  3. タブ切り替え制御（商品 vs 納期）
================================================== */
/* ① 初期状態：「商品について」タブがアクティブ時 */
.tab-wrapper-container tr.tab-delivery-row {
  display: none !important;
}
.tab-wrapper-container tr.tab-spec-row {
  display: block !important;
}
.tab-wrapper-container table.tab-spec-table {
  display: table !important;
}

/* ② 「納期・配送について」タブがアクティブ時（show-delivery付与時） */
.tab-wrapper-container.show-delivery tr.tab-delivery-row {
  display: block !important;
}
.tab-wrapper-container.show-delivery tr.tab-spec-row {
  display: none !important;
}
.tab-wrapper-container.show-delivery table.tab-spec-table {
  display: none !important;
}

/* ==================================================
  4. 項目ごとに独立したカード（ブロック離し）デザイン
================================================== */
/* 行（tr）を枠線付き独立カード化 */
.tab-wrapper-container table tr {
  display: block !important;
  margin-bottom: 15px !important;
  border: 1px solid #dcdcdc !important;
  border-radius: 6px !important;
  overflow: hidden !important;
  background-color: #ffffff !important;
  box-shadow: 0 1px 3px rgba(0,0,0,0.03) !important;
}

.tab-wrapper-container table tr:last-child {
  margin-bottom: 0 !important;
}

/* 項目名（1列目の見出し） */
.tab-wrapper-container table th,
.tab-wrapper-container table td:first-child {
  display: block !important;
  width: 100% !important;
  background-color: #f5f5f5 !important;
  font-weight: bold !important;
  font-size: 16px !important;
  padding: 10px 15px !important;
  box-sizing: border-box !important;
  border: none !important;
  border-bottom: 1px solid #dcdcdc !important;
  color: #222222 !important;
}

/* 内容本文（2列目の詳細） */
.tab-wrapper-container table td:last-child {
  display: block !important;
  width: 100% !important;
  font-size: 15px !important;
  padding: 14px 15px !important;
  box-sizing: border-box !important;
  border: none !important;
  background-color: #ffffff !important;
}

/* スマホ表示（SP）調整 */
@media screen and (max-width: 768px) {
  .custom-tab-menu li {
    font-size: 13px !important;
    padding: 10px 5px !important;
  }
  .tab-wrapper-container table tr {
    margin-bottom: 12px !important;
  }
  .tab-wrapper-container table th,
  .tab-wrapper-container table td:first-child {
    font-size: 14px !important;
    padding: 8px 10px !important;
  }
  .tab-wrapper-container table td:last-child {
    font-size: 13px !important;
    padding: 10px !important;
  }
}