#contents #main_inpage {
  background-size: 100%;
  background-repeat: repeat-y;
  background-position: center;
}
#contents #main_inpage.pink {
  background-image: url(../../img/special/260801/background_pink.webp);
}
#contents #main_inpage.blue {
  background-image: url(../../img/special/260801/background_blue.webp);
}
#contents #main_inpage.green {
  background-image: url(../../img/special/260801/background_green.webp);
}
#contents #main_inpage.yellow {
  background-image: url(../../img/special/260801/background_yellow.webp);
}

/* テーブルを横並びにするラッパー */
.charter-fare-tables {
  display: flex;
  gap: 10px;
  justify-content: center;
  align-items: flex-start;
  font-family: "Hiragino Kaku Gothic ProN", "Meiryo", sans-serif;
  margin: 10px 36px 36px;
}

/* カラム */
.charter-fare-col {
  width: 100%;
  max-width: 360px;
}

/* =========================================
                テーブル基本設定（外部CSSの干渉を完全ブロック）
              ========================================= */
.charter-fare-tables table {
  width: 100%;
  border-collapse: collapse;
  border: 2px solid #6a8b1a; /* 確実に外枠を実線にする */
  margin: 0;
}

/* ヘッダーセル */
.charter-fare-tables th {
  background-color: #6a8b1a;
  color: #ffffff;
  font-size: 16px;
  font-weight: normal;
  padding: 10px 0;
  letter-spacing: 8px;
  text-align: center;
  width: 50%;
  position: relative;
  border: none !important; /* 既存の点線を強制排除 */
}

/* ヘッダーの縦線（白）上下に余白を持たせる */
.charter-fare-tables thead th:first-child::after {
  content: "";
  position: absolute;
  right: 0;
  top: 6%;
  height: 86%;
  width: 1px;
  background-color: #ffffff;
  z-index: 2; /* 👈 これを追加して最前面に出す */
}

/* データセル */
.charter-fare-tables td {
  padding: 16px 10px;
  text-align: center;
  font-size: 16px;
  font-weight: bold;
  color: #222222 !important;
  position: relative;
  border: none !important; /* 既存の点線を強制排除 */
  background-color: #ffffff;
}

/* ボディの縦線（緑） */
.charter-fare-tables tbody td:first-child::after {
  content: "";
  position: absolute;
  right: 0;
  top: 10%;
  height: 80%;
  width: 1px;
  background-color: #6a8b1a; /* 実線の図形として描画 */
  z-index: 1;
}

/* 左のセルの横線（左端に余白を持たせ、右端は中央までピタッと繋げる） */
.charter-fare-tables tbody tr:not(:last-child) td:first-child::before {
  content: "";
  position: absolute;
  bottom: 0;
  left: 8px; /* 左側の余白 */
  right: 0; /* 中央は余白ゼロで繋げる */
  height: 1px;
  background-color: #6a8b1a;
  z-index: 2; /* 縦線の上に乗せて綺麗に交差させる */
}

/* 右のセルの横線（左端は中央から繋げ、右端に余白を持たせる） */
.charter-fare-tables tbody tr:not(:last-child) td:last-child::before {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0; /* 中央は余白ゼロで繋げる */
  right: 8px; /* 右側の余白 */
  height: 1px;
  background-color: #6a8b1a;
  z-index: 2;
}

/* 注釈部分 */
.charter-fare-notes {
  margin-top: 10px;
  padding-left: 5px;
  color: #222222;
}

.charter-fare-notes p {
  margin: 0;
  font-size: 13px;
  font-weight: bold;
  line-height: 1.5;
  text-align: left;
}

/* レスポンシブ対応 */
@media (max-width: 768px) {
  .charter-fare-tables {
    flex-direction: column;
    align-items: center;
  }
}

.charter-fare-tables.pink table {
  border: 2px solid #ea616f;
}

/* ヘッダーセル */
.charter-fare-tables.pink th {
  background-color: #ea616f;
}

/* ボディの縦線（緑） */
.charter-fare-tables.pink tbody td:first-child::after {
  background-color: #ea616f;
}

/* 左のセルの横線（左端に余白を持たせ、右端は中央までピタッと繋げる） */
.charter-fare-tables.pink tbody tr:not(:last-child) td:first-child::before {
  background-color: #ea616f;
  z-index: 2; /* 縦線の上に乗せて綺麗に交差させる */
}

/* 右のセルの横線（左端は中央から繋げ、右端に余白を持たせる） */
.charter-fare-tables.pink tbody tr:not(:last-child) td:last-child::before {
  background-color: #ea616f;
}

.charter-fare-tables.blue table {
  border: 2px solid #0071b2;
}

/* ヘッダーセル */
.charter-fare-tables.blue th {
  background-color: #0071b2;
}

/* ボディの縦線（緑） */
.charter-fare-tables.blue tbody td:first-child::after {
  background-color: #0071b2;
}

/* 左のセルの横線（左端に余白を持たせ、右端は中央までピタッと繋げる） */
.charter-fare-tables.blue tbody tr:not(:last-child) td:first-child::before {
  background-color: #0071b2;
  z-index: 2; /* 縦線の上に乗せて綺麗に交差させる */
}

/* 右のセルの横線（左端は中央から繋げ、右端に余白を持たせる） */
.charter-fare-tables.blue tbody tr:not(:last-child) td:last-child::before {
  background-color: #0071b2;
}

.charter-fare-tables.yellow table {
  border: 2px solid #821a1f;
}

/* ヘッダーセル */
.charter-fare-tables.yellow th {
  background-color: #821a1f;
}

/* ボディの縦線（緑） */
.charter-fare-tables.yellow tbody td:first-child::after {
  background-color: #821a1f;
}

/* 左のセルの横線（左端に余白を持たせ、右端は中央までピタッと繋げる） */
.charter-fare-tables.yellow tbody tr:not(:last-child) td:first-child::before {
  background-color: #821a1f;
  z-index: 2; /* 縦線の上に乗せて綺麗に交差させる */
}

/* 右のセルの横線（左端は中央から繋げ、右端に余白を持たせる） */
.charter-fare-tables.yellow tbody tr:not(:last-child) td:last-child::before {
  background-color: #821a1f;
}

/* 全体を囲む背景（デザイン確認用。不要であれば背景色は外してください） */
.kyoto-nav-wrapper {
  background-color: #dcb878;
  padding: 30px 60px;
  /* 画像に合わせて明朝体を指定 */
  font-family: "Yu Mincho", "Hiragino Mincho ProN", "MS PMincho", serif;
}

/* ボタンを中央にまとめるコンテナ */
.kyoto-nav-container {
  max-width: 800px;
  margin: 0 auto;
}

/* 2列レイアウトのグリッド設定 */
.kyoto-nav-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 15px; /* ボタン間の隙間 */
}

/* ボタンの共通設定 */
.kyoto-nav-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  text-decoration: none;
  color: #ffffff !important;
  text-align: center;
  padding: 16px 50px;
  line-height: 1.2;
  font-size: 16px;
  font-weight: bold;
  letter-spacing: 1px;
  box-sizing: border-box;
  transition: opacity 0.3s ease;
}

/* ホバー時のアクション（少しだけ透明にする） */
.kyoto-nav-btn:hover {
  opacity: 0.85;
}

/* 右側の三角マーク（CSSで図形として描画） */
.kyoto-nav-btn::after {
  content: "";
  position: absolute;
  right: 20px;
  top: 50%;
  transform: translateY(-50%); /* 縦方向の中央揃え */
  width: 0;
  height: 0;
  /* ↓ここからが変更点です（右向きの三角形を作る指定） */
  border-top: 10px solid transparent;
  border-bottom: 10px solid transparent;
  border-left: 14px solid #ffffff;
}
/* -----------------------------------
            各ボタンの個別カラー設定
          ----------------------------------- */

/* 上部：赤茶色 */
.kyoto-nav-btn-top {
  background-color: #b83d26;
  border: 1px solid #e57a16; /* 上だけオレンジっぽい枠線 */
  margin-bottom: 15px;
  font-size: 16px;
  font-weight: bold;
  padding: 20px 50px;
}

/* 中段左：ピンク */
.kyoto-nav-btn-pink {
  background-color: #e66074;
  border: 1px solid #ffffff;
}

/* 中段右：青 */
.kyoto-nav-btn-blue {
  background-color: #0066ad;
  border: 1px solid #ffffff;
}

/* 下段左：えんじ色 */
.kyoto-nav-btn-burgundy {
  background-color: #5d1727;
  border: 1px solid #ffffff;
}

/* 下段右：緑 */
.kyoto-nav-btn-green {
  background-color: #5c8626;
  border: 1px solid #ffffff;
}

/* -----------------------------------
            レスポンシブ対応（スマホ表示）
          ----------------------------------- */
@media (max-width: 768px) {
  .kyoto-nav-grid {
    grid-template-columns: 1fr; /* 1列に縦積み */
  }

  .kyoto-nav-btn {
    font-size: 16px;
    padding: 20px 45px;
  }

  .kyoto-nav-btn-top {
    font-size: 18px;
  }
}