/* ============================================
  共通スタイル（必要に応じて最小限に）
============================================ */
a.text-warning {
  text-decoration: none;
}

a.text-warning:hover {
  text-decoration: underline;
}

.scroll-hint {
  font-size: 14px;
  color: #ec0b8a;
  text-align: center;
  animation: fadeOut 3s ease-out 45s forwards;
  margin-bottom: 8px;
}

@keyframes fadeOut {
  to {
    opacity: 0;
    visibility: hidden;
  }
}


/* ============================================
  基本の空港テーブル（airport-table 共通）
============================================ */
.airport-table {
  font-size: 14px;
  table-layout: fixed;
  min-width: 100%;
  /* ← スクロール発生の条件に必要 */
  white-space: nowrap;
  border-collapse: collapse;
}

/* ============================================
  基本の観光地テーブル（pref-table 共通）
============================================ */
.pref-table {
  font-size: 14px;
  table-layout: fixed;
  min-width: 100%;
  /* ← スクロール発生の条件に必要 */
  white-space: nowrap;
  border-collapse: collapse;
}


/* ============================================
  トップページリンクテーブル（.toppage-scope）
============================================ */
.toppage-scope .airport-table {
  min-width: 1000px;
  /* ← より強制的な横スクロール */
}

.toppage-scope .airport-table td,
.toppage-scope .airport-table th {
  padding: 2px 4px;
  white-space: nowrap;
  text-align: center;
  vertical-align: middle;
}

.toppage-scope .airport-table td {
  max-width: 6px;
  overflow: hidden;
  text-overflow: ellipsis;
}

.toppage-scope .sticky-col {
  position: sticky;
  left: 0;
  background-color: #f8f9fa;
  z-index: 1;
}

/* リンクなしのセルを薄く表示 */
.toppage-scope .airport-table td.no-link {
  color: #888;
  opacity: 0.6;
}

.toppage-scope .airport-table td.has-link {
  color: #222;
  font-weight: bold;
  opacity: 1;
}

.toppage-scope .airport-table td.has-link a:hover {
  color: #0066cc;
  background-color: #eef6ff;
  text-decoration: underline;
}

/* ============================================
  空港選択コンポーネント（.select-airport-scope）
============================================ */
.select-airport-scope .area-button {
  cursor: pointer;
  background-color: #e7f0ff;
  color: #0d6efd;
  border: 1px solid #c3d7ee;
  padding: 6px 12px;
  border-radius: 6px;
  font-size: 12px;
  min-height: 34px;
  text-align: center;
  width: 100%;
  display: inline-block;
  transition: background-color 0.3s ease;
}

.select-airport-scope .area-button:hover {
  background-color: #d8e8ff;
}

.select-airport-scope .flat-button {
  cursor: pointer;
  background-color: #ebf9f1;
  border: 1px solid transparent;
  color: #1e7f4e;
  padding: 6px 8px;
  border-radius: 4px;
  font-size: 12px;
  text-align: center;
  display: block;
  width: 100%;
  transition: background-color 0.3s ease;
}

.select-airport-scope .flat-button:hover {
  background-color: #d9f2e4;
  text-decoration: none;
}

.select-airport-scope .airport-table td {
  padding: 6px;
  width: 10%;
  text-align: center;
  vertical-align: middle;
}

.select-airport-scope .area-grid td {
  padding: 6px;
  width: 20%;
}

.select-airport-scope .area-grid tr,
.select-airport-scope .area-grid td {
  border-bottom: none !important;
  border-top: none !important;
}

.select-airport-scope .airport-section {
  margin-top: 12px;
  display: none;
}

.select-airport-scope .table-responsive {
  overflow-x: auto;
}

/* ============================================
  観光地選択コンポーネント（.select-pref-scope）
============================================ */
.select-pref-scope .area-button-pref {
  cursor: pointer;
  background-color: #fff3cd;
  color: #856404;
  border: 1px solid #ffeeba;
  padding: 6px 12px;
  border-radius: 6px;
  font-size: 12px;
  min-height: 34px;
  text-align: center;
  width: 100%;
  display: inline-block;
  transition: background-color 0.3s ease;
}

.select-pref-scope .area-button-pref:hover {
  background-color: #ffe8a1;
}

.select-pref-scope .flat-button-pref {
  box-sizing: border-box;

  cursor: pointer;
  background-color: #ffe5d0;
  border: 1px solid transparent;
  color: #a65b00;
  padding: 6px 8px;
  border-radius: 4px;
  font-size: 12px;
  text-align: center;
  display: block;
  width: 100%;
  transition: background-color 0.3s ease;
}

.select-pref-scope .flat-button-pref:hover {
  background-color: #ffd1a1;
  text-decoration: none;
}

.select-pref-scope .pref-table td {
  padding: 6px;
  width: 10%;
  text-align: center;
  vertical-align: middle;
}

.select-pref-scope .area-grid td {
  padding: 6px;
  width: 20%;
}

.select-pref-scope .area-grid tr,
.select-pref-scope .area-grid td {
  border-bottom: none !important;
  border-top: none !important;
}

.select-pref-scope .pref-section {
  margin-top: 12px;
  display: none;
}

.select-pref-scope .table-responsive {
  overflow-x: auto;
}


/* ============================================
  トグルボタンの選択状態（active）
============================================ */
#toggle_airport.active,
#toggle_pref.active,
#toggle_keyword.active {
  opacity: 0.85;
  box-shadow: 0 0 0 2px #33333333;
}

#toggle_airport,
#toggle_pref,
#toggle_keyword {
  font-size: 1.1rem; /* 通常のBootstrapより少し大きめ */
}

/* ============================================
  カード表示切り替え用（任意で使う場合）
============================================ */
.card-toggle-visible {
  display: block;
}

.card-toggle-hidden {
  display: none !important;
}


/* ============================================
 トグルリンク用の色クラス
============================================ */

.link-airport {
  color: #0d6efd; /* Bootstrapのprimary（青） */
}

.link-pref {
  color: #ffc107; /* Bootstrapのwarning（黄色） */
}

.link-keyword {
  color: #6c757d; /* Bootstrapのsecondary（灰） */
}

/* ============================================
 ホバー時に下線を消す
============================================ */

.link-airport:hover,
.link-pref:hover,
.link-keyword:hover {
  text-decoration: none;
}