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

/* =============================
   旅行プランニング機能 (travel_plan.js)
   ============================= */

/* --- プランバー（画面下部固定） --- */
#travel-plan-bar {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    background: #fff;
    border-top: 3px solid #e67e22;
    box-shadow: 0 -2px 8px rgba(0,0,0,0.15);
    padding: 10px 16px;
    max-height: 60vh;
    overflow-y: auto;
}

.tp-bar-inner {
    max-width: 900px;
    margin: 0 auto;
}

/* --- バーヘッダー（タイトル・注記・？ボタン） --- */
.tp-bar-header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 6px;
}

.tp-bar-title {
    font-weight: bold;
    font-size: 0.95rem;
    color: #e67e22;
}

.tp-bar-note {
    font-size: 0.75rem;
    color: #999;
}

/* --- スポット一覧（バー内） --- */
.tp-spots-list {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 8px;
}

.tp-spot-item {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: #fff7f0;
    border: 1px solid #f0c08a;
    border-radius: 4px;
    padding: 2px 6px;
    font-size: 0.85rem;
}

.tp-spot-num {
    font-weight: bold;
    color: #e67e22;
    min-width: 1em;
}

.tp-spot-name {
    color: #333;
}

/* --- スポット削除ボタン（✕） --- */
.tp-remove-btn {
    background: none;
    border: none;
    cursor: pointer;
    color: #aaa;
    font-size: 0.75rem;
    padding: 0 2px;
    line-height: 1;
}
.tp-remove-btn:hover { color: #e74c3c; }

/* --- バー下部アクション（ルート案内・クリア） --- */
.tp-bar-actions {
    display: flex;
    gap: 8px;
}

.tp-action-btn {
    padding: 5px 14px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 0.85rem;
    font-weight: bold;
}

.tp-btn-route {
    background: #e67e22;
    color: #fff;
}
.tp-btn-route:hover { background: #cf6d17; }

.tp-btn-clear {
    background: #f0f0f0;
    color: #555;
}
.tp-btn-clear:hover { background: #ddd; }

/* --- 吹き出し内「プランに追加」ボタン --- */
.tp-add-btn {
    background: #27ae60;
    color: #fff;
    width: 100%;
    margin-top: 6px;
    text-align: center;
    border: none;
    cursor: pointer;
}
.tp-add-btn:hover { background: #219a52; }

/* 追加済み状態 */
.tp-add-btn.tp-added {
    background: #95a5a6;
    cursor: default;
}

/* 上限到達状態 */
.tp-add-btn.tp-full {
    background: #bdc3c7;
    color: #777;
    cursor: default;
    font-size: 0.8rem;
}

/* --- マップ上のオーバーレイピン（追加済み番号表示） --- */
.tp-overlay-pin {
    width: 24px;
    height: 24px;
    background: #e67e22;
    color: #fff;
    border-radius: 50%;
    border: 2px solid #fff;
    box-shadow: 0 1px 4px rgba(0,0,0,0.4);
    font-size: 12px;
    font-weight: bold;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* --- 並べ替えボタン（◀▶） --- */
.tp-move-btn {
    background: none;
    border: none;
    cursor: pointer;
    color: #aaa;
    font-size: 0.75rem;
    padding: 0 2px;
    line-height: 1;
}
.tp-move-btn:hover { color: #e67e22; }

/* --- ヘルプボタン（？）と説明ボックス --- */
.tp-help-btn {
    background: #f0f0f0;
    border: 1px solid #ccc;
    border-radius: 50%;
    width: 20px;
    height: 20px;
    font-size: 0.75rem;
    cursor: pointer;
    line-height: 1;
    padding: 0;
    color: #555;
    margin-left: 6px;
}
.tp-help-btn:hover { background: #ddd; }

.tp-help-box {
    background: #fff7f0;
    border: 1px solid #f0c08a;
    border-radius: 4px;
    padding: 8px 12px;
    font-size: 0.8rem;
    color: #555;
    line-height: 1.8;
    margin-bottom: 6px;
}

/* --- マップ表示時のウェルカムヒント（3秒で消える） --- */
#tp-welcome-tip {
    position: fixed;
    top: 70px;
    left: 50%;
    transform: translateX(-50%);
    background: #fff;
    color: #333;
    padding: 16px 20px;
    border-radius: 12px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.3);
    font-size: 1.1rem;
    font-weight: bold;
    z-index: 2000;
    pointer-events: none;
    transition: opacity 0.8s;
    white-space: nowrap;
    border-top: 3px solid #e67e22;
}

.tp-tip-fadeout {
    opacity: 0;
}

/* --- 前ページに戻るボタンの確認ダイアログ --- */
#tp-back-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.5);
    z-index: 3000;
}

.tp-back-dialog {
    background: #fff;
    border-radius: 12px;
    padding: 16px 20px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.3);
    min-width: 200px;
}

.tp-back-msg {
    font-size: 1rem;
    color: #333;
    margin-bottom: 16px;
    line-height: 1.6;
}

.tp-back-actions {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.tp-back-btn {
    padding: 10px;
    border: none;
    border-radius: 8px;
    font-size: 0.95rem;
    cursor: pointer;
    font-weight: bold;
}

.tp-back-btn-clear {
    background: #e74c3c;
    color: #fff;
}
.tp-back-btn-clear:hover { background: #c0392b; }

.tp-back-btn-keep {
    background: #27ae60;
    color: #fff;
}
.tp-back-btn-keep:hover { background: #219a52; }

.tp-back-btn-cancel {
    background: #f0f0f0;
    color: #555;
}
.tp-back-btn-cancel:hover { background: #ddd; }