/* ============================================
  共通スタイル（必要に応じて最小限に）
============================================ */
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 {

  overflow-x: auto;
  max-width: 100%;
}

.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;
}

/* スクロールヒント*/
.scroll-hint-auto {
  font-size: 14px;
  color: #ec0b8a;
  text-align: center;
  margin-top: 8px;
  display: none;
  /* デフォルトは非表示 */
}

@media (max-width: 999px) {
  .scroll-hint-auto {
    display: block;
    /* 999px以下で表示 */
  }
}


/* ============================================
  空港選択コンポーネント（.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;
}


/* ========== トップページ専用 ========== */
.portal-hero {
  overflow: hidden;
  min-height: 360px;
  margin-top: 56px;
}

.portal-hero-bg {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-size: cover;
  background-position: center;
  background-color: #1a6fc4;
}

.portal-hero-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(to right, rgba(10, 40, 80, 0.80) 0%, rgba(10, 40, 80, 0.55) 100%);
}

.portal-hero .container {
  padding-top: 4rem !important;
  padding-bottom: 4rem !important;
}

.portal-func-card {
  background-color: #fff !important;
  transition: box-shadow 0.15s, transform 0.15s;
  cursor: pointer;
  position: relative;
  z-index: 1;
}

a:has(.portal-func-card) {
  background-color: #fff;
  display: block;
  border-radius: 0.5rem;
}


.portal-func-card:hover {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  transform: translateY(-2px);
}

.portal-func-icon {
  font-size: 1.3rem;
}

.portal-func-card .text-muted {
  color: #555 !important;
  font-size: 0.85rem !important;
  overflow: hidden;
}

#search-cards-area>.mb-3.text-center {
  display: none !important;
}


/* ========== フッターリンク ========== */
footer a {
  text-decoration: underline;
  text-decoration-color: rgba(255, 255, 255, 0.35);
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
  /* ← これを追加 */
}

footer a:hover {
  text-decoration-color: rgba(255, 255, 255, 0.9);
}

.footer-nolink {
  opacity: 0.55;
  font-size: 12px;
}


/* アンカーリンクのオフセット */
[id^="section"] {
  scroll-margin-top: 70px;
}




/* ========== 季節の背景 ========== */
.seasonal-bg-left,
.seasonal-bg-right {
  position: absolute;
  width: 220px;
  height: 300px;
  pointer-events: none;
  z-index: 0;
  background-repeat: no-repeat;
  background-size: contain;
}

.seasonal-bg-left {
  left: 0;
}

.seasonal-bg-right {
  right: 0;
  transform: scaleX(-1);
}

/* 春：桜 */
.season-spring .seasonal-bg-left,
.season-spring .seasonal-bg-right {
  background-image: url("../imgs/season_spring.aa34df73d122.svg");
}

/* 夏：若葉 */
.season-summer .seasonal-bg-left,
.season-summer .seasonal-bg-right {
  background-image: url("../imgs/season_summer.cff3294a781e.svg");
}

/* 秋：紅葉 */
.season-autumn .seasonal-bg-left,
.season-autumn .seasonal-bg-right {
  background-image: url("../imgs/season_autumn.3e20ba7e25ad.svg");
}

/* 冬：雪 */
.season-winter .seasonal-bg-left,
.season-winter .seasonal-bg-right {
  background-image: url("../imgs/season_winter.16097172b189.svg");
}