@charset "UTF-8";
/* ==========================================================
   列車旅特集LP  /css/lp-train-journey.css
   scope: #tbx-lp-train-journey
   ・50〜70代がメインターゲットのため本文17px、行間広め、
     タップ領域は最小44pxを確保しています。
   ========================================================== */

:root{
  --tbx-navy:#0f3a5f;        /* 見出し・ヘッダー帯 */
  --tbx-primary:#12578f;     /* 主要ボタン・リンク */
  --tbx-primary-d:#0d4472;
  --tbx-accent:#c0612a;      /* アクセント（煉瓦色） */
  --tbx-gold:#93762a;        /* W乗車バッジ */
  --tbx-gold-bg:#fbf5e6;
  --tbx-text:#2a2a2a;
  --tbx-sub:#5d6672;
  --tbx-bg:#ffffff;
  --tbx-bg-sub:#f2f5f8;
  --tbx-border:#d6dde4;
  --tbx-border-l:#e8edf2;
  --tbx-radius:8px;
  --tbx-shadow:0 1px 3px rgba(15,58,95,.08),0 6px 18px rgba(15,58,95,.06);
}

#tbx-lp-train-journey{
  color:var(--tbx-text);
  font-size:17px;
  line-height:1.9;
  letter-spacing:.02em;
  background:var(--tbx-bg);
}
#tbx-lp-train-journey img{max-width:100%;height:auto;display:block}
#tbx-lp-train-journey ul,
#tbx-lp-train-journey ol,
#tbx-lp-train-journey dl{list-style:none;margin:0;padding:0}
#tbx-lp-train-journey .is-hidden{display:none !important}
/* テーマ側に aria-hidden="true" の要素をまとめて position:fixed 等にする
   広範なルールがあるらしく、装飾アイコン（絵文字・矢印マーク）が
   画面右上に飛んでしまう不具合が起きていた。このスコープ内だけ
   position を static に固定し直して無効化する */
#tbx-lp-train-journey [aria-hidden="true"]{position:static !important;inset:auto}
#tbx-lp-train-journey .sp-only{display:inline}
@media(min-width:768px){#tbx-lp-train-journey .sp-only{display:none}}

/* ---------- レイアウト ---------- */
#tbx-lp-train-journey .tbx-inner{max-width:1120px;margin:0 auto;padding:0 20px}
#tbx-lp-train-journey .tbx-sec{padding:56px 0}
@media(min-width:768px){#tbx-lp-train-journey .tbx-sec{padding:76px 0}}
#tbx-lp-train-journey .tbx-sec--tint{background:var(--tbx-bg-sub)}
#tbx-lp-train-journey .tbx-sec--contact{background:var(--tbx-navy);color:#fff;text-align:center}
#tbx-lp-train-journey .tbx-sec--contact .tbx-h2{color:#fff}
#tbx-lp-train-journey .tbx-sec--contact .tbx-h2::after{background:rgba(255,255,255,.5)}
#tbx-lp-train-journey .tbx-sec--contact .tbx-lead{color:rgba(255,255,255,.85)}

/* ---------- 見出し ---------- */
#tbx-lp-train-journey .tbx-h2{
  font-size:26px;line-height:1.5;font-weight:700;color:var(--tbx-navy);
  margin:0 0 14px;letter-spacing:.01em;
}
@media(min-width:768px){#tbx-lp-train-journey .tbx-h2{font-size:32px}}
#tbx-lp-train-journey .tbx-h2::after{
  content:"";display:block;width:56px;height:3px;background:var(--tbx-accent);
  margin-top:14px;border-radius:2px;
}
#tbx-lp-train-journey .tbx-lead{
  font-size:17px;color:var(--tbx-sub);margin:0 0 26px;max-width:74ch;
}
#tbx-lp-train-journey .tbx-note{font-size:15px;color:var(--tbx-sub);margin:0 0 14px}

/* ---------- ボタン ---------- */
#tbx-lp-train-journey .tbx-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:6px;
  min-height:52px;padding:12px 22px;border-radius:var(--tbx-radius);
  font-size:16px;font-weight:700;text-decoration:none;text-align:center;
  border:2px solid var(--tbx-primary);color:var(--tbx-primary);background:#fff;
  transition:background .15s,color .15s,border-color .15s;cursor:pointer;
}
#tbx-lp-train-journey .tbx-btn:hover{background:#eef4fa}
#tbx-lp-train-journey .tbx-btn--primary{background:var(--tbx-primary);color:#fff}
#tbx-lp-train-journey .tbx-btn--primary:hover{background:var(--tbx-primary-d);border-color:var(--tbx-primary-d);color:#fff}
#tbx-lp-train-journey .tbx-btn--ghost{background:#fff}
#tbx-lp-train-journey .tbx-btn--lg{min-height:60px;font-size:17px;padding:14px 28px}

/* ---------- 01 ヒーロー ---------- */
#tbx-lp-train-journey .tbx-hero{position:relative;background:var(--tbx-navy);color:#fff;overflow:hidden}
#tbx-lp-train-journey .tbx-hero__media{position:absolute;inset:0}
#tbx-lp-train-journey .tbx-hero__media img{width:100%;height:100%;object-fit:cover;opacity:.42}
#tbx-lp-train-journey .tbx-hero__inner{
  position:relative;max-width:1120px;margin:0 auto;padding:64px 20px 52px;text-align:center;
}
@media(min-width:768px){#tbx-lp-train-journey .tbx-hero__inner{padding:104px 20px 88px}}
#tbx-lp-train-journey .tbx-hero__cat{
  font-size:13px;
  text-align: center;
  letter-spacing:.28em;margin:0 0 14px;color:rgba(255,255,255,.86);
}
#tbx-lp-train-journey .tbx-hero__copy{
  font-size:31px;line-height:1.45;font-weight:700;margin:0 0 12px;
  text-shadow:0 2px 16px rgba(0,0,0,.35);
}
@media(min-width:768px){#tbx-lp-train-journey .tbx-hero__copy{font-size:48px}}
#tbx-lp-train-journey .tbx-hero__sub{font-size:16px;margin:0 0 30px;color:rgba(255,255,255,.92)}
@media(min-width:768px){#tbx-lp-train-journey .tbx-hero__sub{font-size:18px;text-align: center;} }
#tbx-lp-train-journey .tbx-hero__cta{display:grid;grid-template-columns:1fr;gap:12px;max-width:520px;margin:0 auto}
@media(min-width:600px){#tbx-lp-train-journey .tbx-hero__cta{grid-template-columns:1fr 1fr}}
#tbx-lp-train-journey .tbx-hero__cta .tbx-btn--primary{border-color:#fff}
#tbx-lp-train-journey .tbx-hero__cta .tbx-btn--ghost{border-color:#fff;color:var(--tbx-navy)}

/* ---------- 価値3つ ---------- */
#tbx-lp-train-journey .tbx-values{display:grid;grid-template-columns:1fr;gap:16px;margin-top:8px}
@media(min-width:768px){#tbx-lp-train-journey .tbx-values{grid-template-columns:repeat(3,1fr);gap:22px}}
#tbx-lp-train-journey .tbx-values li{
  background:#fff;border:1px solid var(--tbx-border-l);border-radius:var(--tbx-radius);
  padding:24px 20px;text-align:center;box-shadow:var(--tbx-shadow);
}
#tbx-lp-train-journey .tbx-values__ic{font-size:30px;line-height:1;display:block}
#tbx-lp-train-journey .tbx-values b{display:block;font-size:18px;color:var(--tbx-navy);margin:10px 0 6px}
#tbx-lp-train-journey .tbx-values span:not(.tbx-values__ic){font-size:15px;color:var(--tbx-sub);line-height:1.75}

/* ---------- 03 列車セレクター ---------- */
#tbx-lp-train-journey .tbx-selgrid{
  display:grid;grid-template-columns:repeat(2,1fr);gap:12px;
}
@media(min-width:640px){#tbx-lp-train-journey .tbx-selgrid{grid-template-columns:repeat(3,1fr)}}
@media(min-width:1000px){#tbx-lp-train-journey .tbx-selgrid{grid-template-columns:repeat(4,1fr)}}
#tbx-lp-train-journey .tbx-selcard{
  display:block;text-decoration:none;color:inherit;background:#fff;
  border:1px solid var(--tbx-border);border-radius:var(--tbx-radius);
  padding:10px;height:100%;transition:.15s;box-shadow:var(--tbx-shadow);
}
#tbx-lp-train-journey .tbx-selcard:hover{border-color:var(--tbx-primary);transform:translateY(-2px)}
#tbx-lp-train-journey .tbx-selcard__img{display:block;border-radius:5px;overflow:hidden;background:var(--tbx-bg-sub)}
#tbx-lp-train-journey .tbx-selcard__img img{width:100%;
  /* aspect-ratio:16/10; */
  /* object-fit:cover */
}
#tbx-lp-train-journey .tbx-selcard__name{display:block;font-size:16px;line-height:1.45;color:var(--tbx-navy);margin:10px 0 2px}
#tbx-lp-train-journey .tbx-selcard__area{display:block;font-size:13px;color:var(--tbx-sub)}
#tbx-lp-train-journey .tbx-selcard__count{
  display:inline-block;margin-top:8px;font-size:13px;font-weight:700;
  color:var(--tbx-accent);border:1px solid currentColor;border-radius:4px;padding:1px 9px;
}
#tbx-lp-train-journey .tbx-selcard.is-dim{opacity:.34;pointer-events:none}
#tbx-lp-train-journey .tbx-selcard.is-dim .tbx-selcard__count{color:var(--tbx-sub)}

/* トグル */
#tbx-lp-train-journey .tbx-toggle{
  display:flex;align-items:center;justify-content:center;gap:8px;width:100%;
  min-height:56px;margin-top:22px;padding:14px 20px;cursor:pointer;
  background:#fff;border:1px solid var(--tbx-border);border-radius:var(--tbx-radius);
  font-size:16px;font-weight:700;color:var(--tbx-navy);font-family:inherit;
}
#tbx-lp-train-journey .tbx-toggle:hover{background:var(--tbx-bg-sub)}
#tbx-lp-train-journey .tbx-toggle--sm{min-height:48px;font-size:15px;font-weight:400;margin-top:16px;width:auto}
#tbx-lp-train-journey .tbx-toggle__ar{display:inline-block;transition:transform .2s;font-size:12px}
#tbx-lp-train-journey [aria-expanded="true"] .tbx-toggle__ar{transform:rotate(180deg)}
#tbx-lp-train-journey .tbx-collapse{overflow:hidden;max-height:0;transition:max-height .3s ease}
#tbx-lp-train-journey .tbx-collapse.is-open{max-height:2600px}
#tbx-lp-train-journey .tbx-collapse__inner{padding-top:20px}

#tbx-lp-train-journey .tbx-pastgrid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}
@media(min-width:768px){#tbx-lp-train-journey .tbx-pastgrid{grid-template-columns:repeat(4,1fr)}}
#tbx-lp-train-journey .tbx-pastcard{
  border:1px solid var(--tbx-border-l);border-radius:var(--tbx-radius);padding:10px;background:#fff;
}
#tbx-lp-train-journey .tbx-pastcard__img img{width:100%;aspect-ratio:16/10;object-fit:cover;border-radius:5px;filter:grayscale(.35)}
#tbx-lp-train-journey .tbx-pastcard b{display:block;font-size:15px;color:var(--tbx-navy);margin:9px 0 2px}
#tbx-lp-train-journey .tbx-pastcard span{display:block;font-size:13px;color:var(--tbx-sub);line-height:1.7}
#tbx-lp-train-journey .tbx-pastcard__st{
  display:inline-block !important;margin-top:6px;font-size:12px;color:var(--tbx-sub);
  border:1px solid var(--tbx-border);border-radius:4px;padding:1px 8px;
}
#tbx-lp-train-journey .tbx-textlink{display:inline-block;margin-top:6px;font-size:14px;color:var(--tbx-primary)}

/* ---------- 04 出発地チップ ---------- */
#tbx-lp-train-journey .tbx-chipgrp{margin-bottom:16px}
#tbx-lp-train-journey .tbx-chipgrp__lb{
  font-size:13px;letter-spacing:.1em;color:var(--tbx-sub);margin:0 0 8px;font-weight:700;
}
#tbx-lp-train-journey .tbx-chips{display:flex;flex-wrap:wrap;gap:8px}
#tbx-lp-train-journey .tbx-chip{
  display:inline-flex;align-items:center;gap:5px;min-height:46px;
  padding:8px 18px;border-radius:999px;cursor:pointer;font-family:inherit;
  border:1.5px solid var(--tbx-border);background:#fff;color:var(--tbx-text);
  font-size:15.5px;white-space:nowrap;transition:.12s;
}
#tbx-lp-train-journey .tbx-chip:hover{border-color:var(--tbx-primary);background:#eef4fa}
#tbx-lp-train-journey .tbx-chip[aria-pressed="true"]{
  background:var(--tbx-primary);border-color:var(--tbx-primary);color:#fff;
}
#tbx-lp-train-journey .tbx-chip__n{font-size:12px;opacity:.7}
#tbx-lp-train-journey .tbx-status{
  display:flex;flex-wrap:wrap;align-items:center;gap:14px;margin-top:8px;
  background:#fff;border:1px solid var(--tbx-border);border-radius:var(--tbx-radius);
  padding:14px 18px;font-size:16px;font-weight:700;color:var(--tbx-navy);
}
#tbx-lp-train-journey .tbx-status__clear{
  min-height:40px;padding:6px 16px;border:1px solid var(--tbx-border);background:#fff;
  border-radius:5px;font-size:14px;cursor:pointer;font-family:inherit;color:var(--tbx-sub);font-weight:400;
}

/* ---------- 05 追従タブ ---------- */
#tbx-lp-train-journey .tbx-trainnav{
  position:sticky;top:0;z-index:30;background:rgba(255,255,255,.96);
  backdrop-filter:blur(6px);border-bottom:1px solid var(--tbx-border-l);
  margin-bottom:26px;
}
#tbx-lp-train-journey .tbx-trainnav__in{
  max-width:1120px;margin:0 auto;padding:10px 20px;
  display:flex;gap:8px;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none;
}
#tbx-lp-train-journey .tbx-trainnav__in::-webkit-scrollbar{height:0}

/* PC（マウス操作）では横スクロールできることが分かるよう
   スクロールバーを表示する。スマホ・タブレットはスワイプで
   操作できるため、従来どおり非表示のまま */
@media (hover:hover) and (pointer:fine){
  #tbx-lp-train-journey .tbx-trainnav__in{
    scrollbar-width:thin;
    scrollbar-color:var(--tbx-border) transparent;
    padding-bottom:14px;
  }
  #tbx-lp-train-journey .tbx-trainnav__in::-webkit-scrollbar{height:8px}
  #tbx-lp-train-journey .tbx-trainnav__in::-webkit-scrollbar-track{background:transparent}
  #tbx-lp-train-journey .tbx-trainnav__in::-webkit-scrollbar-thumb{
    background:var(--tbx-border);border-radius:999px;
  }
  #tbx-lp-train-journey .tbx-trainnav__in::-webkit-scrollbar-thumb:hover{background:var(--tbx-sub)}
}
#tbx-lp-train-journey .tbx-tnb{
  flex:0 0 auto;min-height:40px;display:inline-flex;align-items:center;
  padding:6px 16px;border:1px solid var(--tbx-border);border-radius:999px;
  font-size:14.5px;text-decoration:none;color:var(--tbx-text);background:#fff;white-space:nowrap;
}
#tbx-lp-train-journey .tbx-tnb.is-current{background:var(--tbx-navy);border-color:var(--tbx-navy);color:#fff}

/* ---------- 05 列車ブロック ---------- */
#tbx-lp-train-journey .tbx-train{
  border:1px solid var(--tbx-border);border-radius:var(--tbx-radius);
  overflow:hidden;margin-bottom:28px;background:#fff;scroll-margin-top:70px;box-shadow:var(--tbx-shadow);
}
#tbx-lp-train-journey .tbx-train__hd{
  background:var(--tbx-navy);color:#fff;padding:20px 20px 18px;
}
#tbx-lp-train-journey .tbx-train__name{
  font-size:23px;line-height:1.4;font-weight:700;margin:0;color:#fff;
}
@media(min-width:768px){#tbx-lp-train-journey .tbx-train__name{font-size:28px}}
#tbx-lp-train-journey .tbx-train__kana{
  font-size:13px;font-weight:400;margin-left:10px;color:rgba(255,255,255,.75);white-space:nowrap;
}
#tbx-lp-train-journey .tbx-train__route{font-size:13.5px;color:rgba(255,255,255,.8);margin:6px 0 0}
#tbx-lp-train-journey .tbx-train__catch{font-size:16px;margin:10px 0 0;color:rgba(255,255,255,.96)}
#tbx-lp-train-journey .tbx-train__bd{padding:20px}
#tbx-lp-train-journey .tbx-train__main{margin:0;border-radius:6px;overflow:hidden;background:var(--tbx-bg-sub)}
#tbx-lp-train-journey .tbx-train__main img{width:100%;aspect-ratio:21/9;object-fit:cover}
#tbx-lp-train-journey .tbx-train__photos{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}
#tbx-lp-train-journey .tbx-train__photos img{width:100%;aspect-ratio:3/2;object-fit:cover;border-radius:5px}
#tbx-lp-train-journey .tbx-train__points{display:grid;grid-template-columns:1fr;gap:8px;margin:16px 0 0}
@media(min-width:768px){#tbx-lp-train-journey .tbx-train__points{grid-template-columns:repeat(3,1fr)}}
#tbx-lp-train-journey .tbx-train__points li{
  border-left:3px solid var(--tbx-accent);padding-left:12px;font-size:15px;line-height:1.75;color:#40474f;
}
/* 各列車ブロック内「◯◯の特集ページを見る」リンク
   ・.tbx-train__points との間に余白を確保
   ・アイコン＋グラデーション＋ホバーで矢印が動くリッチな見た目に */
#tbx-lp-train-journey .tbx-train__lp-link{
  width:100%;margin-top:20px;gap:10px;justify-content:flex-start;
  background:linear-gradient(135deg,#eef5fb,#f8fbfe);
  border-color:var(--tbx-primary);color:var(--tbx-primary);
  box-shadow:0 2px 10px rgba(15,58,95,.1);
}
#tbx-lp-train-journey .tbx-train__lp-link:hover{
  background:var(--tbx-primary);color:#fff;
  box-shadow:0 4px 16px rgba(15,58,95,.24);
}
#tbx-lp-train-journey .tbx-train__lp-ic{font-size:20px;line-height:1}
#tbx-lp-train-journey .tbx-train__lp-tx{flex:1;text-align:left}
#tbx-lp-train-journey .tbx-train__lp-ar{transition:transform .2s}
#tbx-lp-train-journey .tbx-train__lp-link:hover .tbx-train__lp-ar{transform:translateX(5px)}

#tbx-lp-train-journey .tbx-backtop{
  display:block;text-align:center;font-size:14px;color:var(--tbx-sub);text-decoration:none;
  border-top:1px solid var(--tbx-border-l);margin-top:22px;padding-top:16px;
}

/* ---------- ツアーカード ---------- */
#tbx-lp-train-journey .tbx-cards{display:grid;grid-template-columns:1fr;gap:18px;margin-top:20px}
@media(min-width:900px){#tbx-lp-train-journey .tbx-cards{grid-template-columns:repeat(2,1fr)}}
#tbx-lp-train-journey .tbx-card{
  display:flex;flex-direction:column;background:#fff;
  border:1px solid var(--tbx-border);border-radius:var(--tbx-radius);overflow:hidden;
}
#tbx-lp-train-journey .tbx-card__top{padding:16px 16px 0}
#tbx-lp-train-journey .tbx-badges{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:12px}
#tbx-lp-train-journey .tbx-bdg{
  font-size:12.5px;line-height:1.6;border:1px solid var(--tbx-border);
  border-radius:4px;padding:2px 9px;color:var(--tbx-sub);background:#fff;
}
#tbx-lp-train-journey .tbx-bdg--w{
  border-color:var(--tbx-gold);color:var(--tbx-gold);background:var(--tbx-gold-bg);font-weight:700;
}
#tbx-lp-train-journey .tbx-bdg--t{border-color:var(--tbx-primary);color:var(--tbx-primary);background:#eef4fa}
#tbx-lp-train-journey .tbx-card__img{margin:0;border-radius:5px;overflow:hidden;background:var(--tbx-bg-sub)}
#tbx-lp-train-journey .tbx-card__img img{width:100%;aspect-ratio:16/9;object-fit:cover}
#tbx-lp-train-journey .tbx-card__name{
  font-size:17.5px;line-height:1.6;font-weight:700;color:var(--tbx-navy);margin:14px 0 8px;
}
#tbx-lp-train-journey .tbx-card__desc{font-size:14.5px;color:var(--tbx-sub);margin:0 0 14px;line-height:1.8}
/* 出発地ごとに本文が異なる商品の、未選択時の案内文 */
#tbx-lp-train-journey .tbx-card__desc--hint{
  color:#8b96a3;font-size:13.5px;font-style:normal;
  background:var(--tbx-bg-sub);border-radius:5px;padding:9px 12px;
}

#tbx-lp-train-journey .tbx-spec{border-top:1px solid var(--tbx-border-l);font-size:15px}
#tbx-lp-train-journey .tbx-spec__row{
  display:flex;gap:12px;padding:10px 0;border-bottom:1px solid var(--tbx-border-l);
}
#tbx-lp-train-journey .tbx-spec__row dt{
  flex:0 0 108px;color:var(--tbx-sub);font-size:13.5px;line-height:1.5;padding-top:2px;
}
#tbx-lp-train-journey .tbx-spec__row dt span{font-size:11.5px}
#tbx-lp-train-journey .tbx-spec__row dd{flex:1;margin:0;min-width:0}
#tbx-lp-train-journey .tbx-price__amt{
  display:block;font-size:25px;font-weight:700;color:var(--tbx-accent);line-height:1.35;
  letter-spacing:.01em;
}
@media(min-width:900px){#tbx-lp-train-journey .tbx-price__amt{font-size:23px}}
#tbx-lp-train-journey .tbx-price__note{display:block;font-size:12.5px;color:var(--tbx-sub)}
#tbx-lp-train-journey .tbx-dpchips{display:flex;flex-wrap:wrap;gap:6px}
#tbx-lp-train-journey .tbx-dp{
  min-height:38px;padding:5px 13px;border-radius:999px;cursor:pointer;font-family:inherit;
  border:1px solid var(--tbx-border);background:#fff;font-size:13.5px;color:var(--tbx-text);
}
#tbx-lp-train-journey .tbx-dp:hover{border-color:var(--tbx-primary)}
#tbx-lp-train-journey .tbx-dp[aria-pressed="true"]{
  background:var(--tbx-primary);border-color:var(--tbx-primary);color:#fff;font-weight:700;
}
#tbx-lp-train-journey .tbx-card__code{
  font-size:12.5px;color:var(--tbx-sub);margin:10px 0 0;text-align:right;
}
#tbx-lp-train-journey .tbx-card__btns{
  display:grid;grid-template-columns:1fr 1fr;gap:10px;padding:16px;margin-top:auto;
}

/* ---------- 空状態 ---------- */
#tbx-lp-train-journey .tbx-empty{
  border:2px dashed var(--tbx-border);border-radius:var(--tbx-radius);
  padding:36px 20px;text-align:center;background:var(--tbx-bg-sub);
}
#tbx-lp-train-journey .tbx-empty b{display:block;font-size:19px;color:var(--tbx-navy);margin-bottom:8px}
#tbx-lp-train-journey .tbx-empty p{font-size:15px;color:var(--tbx-sub);margin:0 0 18px}

/* ---------- 06 早見表 ---------- */
#tbx-lp-train-journey .tbx-tablewrap{overflow-x:auto;background:#fff;border-radius:var(--tbx-radius);border:1px solid var(--tbx-border)}
#tbx-lp-train-journey .tbx-table{width:100%;border-collapse:collapse;font-size:15px;min-width:620px}
#tbx-lp-train-journey .tbx-table th,
#tbx-lp-train-journey .tbx-table td{border-bottom:1px solid var(--tbx-border-l);padding:12px 16px;text-align:left;vertical-align:top}
#tbx-lp-train-journey .tbx-table thead th{
  background:var(--tbx-navy);color:#fff;font-size:13.5px;font-weight:700;white-space:nowrap;border-bottom:none;
}
#tbx-lp-train-journey .tbx-table tbody th{font-weight:700;color:var(--tbx-navy);white-space:nowrap}
#tbx-lp-train-journey .tbx-table__num{white-space:nowrap;color:var(--tbx-sub);font-size:14px}
#tbx-lp-train-journey .tbx-table tr.is-few th,
#tbx-lp-train-journey .tbx-table tr.is-few td{background:#fdf7ec}

/* ---------- 07 座席 ---------- */
#tbx-lp-train-journey .tbx-seats{display:grid;grid-template-columns:repeat(2,1fr);gap:14px}
@media(min-width:900px){#tbx-lp-train-journey .tbx-seats{grid-template-columns:repeat(4,1fr)}}
#tbx-lp-train-journey .tbx-seats li{
  background:#fff;border:1px solid var(--tbx-border-l);border-radius:var(--tbx-radius);padding:12px;
}
#tbx-lp-train-journey .tbx-seats figure{margin:0}
#tbx-lp-train-journey .tbx-seats img{width:100%;aspect-ratio:3/2;object-fit:cover;border-radius:5px}
#tbx-lp-train-journey .tbx-seats b{display:block;font-size:16px;color:var(--tbx-navy);margin:10px 0 4px}
#tbx-lp-train-journey .tbx-seats span{font-size:14px;color:var(--tbx-sub);line-height:1.75}

#tbx-lp-train-journey .tbx-callout{
  margin-top:24px;background:#fff;border:1px solid var(--tbx-border);
  border-left:4px solid var(--tbx-primary);border-radius:0 var(--tbx-radius) var(--tbx-radius) 0;padding:18px 20px;
}
#tbx-lp-train-journey .tbx-callout--warn{border-left-color:var(--tbx-accent)}
#tbx-lp-train-journey .tbx-callout b{display:block;font-size:16px;color:var(--tbx-navy);margin-bottom:6px}
#tbx-lp-train-journey .tbx-callout p{margin:0;font-size:15px;color:var(--tbx-sub)}

/* ---------- 09 ステップ ---------- */
#tbx-lp-train-journey .tbx-steps{display:grid;grid-template-columns:1fr;gap:12px}
@media(min-width:768px){#tbx-lp-train-journey .tbx-steps{grid-template-columns:repeat(4,1fr)}}
#tbx-lp-train-journey .tbx-steps li{
  background:#fff;border:1px solid var(--tbx-border-l);border-radius:var(--tbx-radius);
  padding:18px;font-size:15.5px;line-height:1.7;
}
#tbx-lp-train-journey .tbx-steps b{
  display:block;font-size:12.5px;letter-spacing:.12em;color:var(--tbx-accent);margin-bottom:6px;
}

/* ---------- 11 FAQ ---------- */
#tbx-lp-train-journey .tbx-faq__item{border-bottom:1px solid var(--tbx-border-l)}
#tbx-lp-train-journey .tbx-faq__q{
  display:flex;align-items:flex-start;gap:12px;width:100%;min-height:60px;
  padding:16px 4px;background:none;border:none;cursor:pointer;font-family:inherit;
  font-size:17px;font-weight:700;color:var(--tbx-navy);text-align:left;line-height:1.7;
}
#tbx-lp-train-journey .tbx-faq__q .tbx-toggle__ar{margin-left:auto;color:var(--tbx-sub)}
#tbx-lp-train-journey .tbx-faq__mark{
  flex:0 0 28px;height:28px;border-radius:50%;background:var(--tbx-navy);color:#fff;
  display:inline-flex;align-items:center;justify-content:center;font-size:14px;
}
#tbx-lp-train-journey .tbx-faq__mark--a{background:var(--tbx-accent)}
#tbx-lp-train-journey .tbx-faq__a{
  display:flex;gap:12px;font-size:16px;color:var(--tbx-sub);margin:0;padding:0 4px 18px;line-height:1.85;
}
#tbx-lp-train-journey .tbx-collapse__inner .tbx-faq__a{padding-top:0}

/* ---------- 12 電話 ---------- */
#tbx-lp-train-journey .tbx-tel{margin:0 0 22px}
#tbx-lp-train-journey .tbx-tel a{
  font-size:34px;font-weight:700;color:#fff;text-decoration:none;letter-spacing:.04em;
}
#tbx-lp-train-journey .tbx-tel span{display:block;font-size:14px;color:rgba(255,255,255,.8)}

/* ---------- SP固定CTA ---------- */
#tbx-lp-train-journey .tbx-fixedcta{
  position:fixed;left:0;right:0;bottom:0;z-index:40;
  display:grid;grid-template-columns:1fr 1.4fr;gap:10px;
  padding:10px 14px calc(10px + env(safe-area-inset-bottom));
  background:rgba(255,255,255,.97);border-top:1px solid var(--tbx-border);
  box-shadow:0 -2px 12px rgba(15,58,95,.1);
}
#tbx-lp-train-journey .tbx-fixedcta .tbx-btn{min-height:50px;font-size:15.5px;padding:10px 12px}
@media(min-width:900px){#tbx-lp-train-journey .tbx-fixedcta{display:none}}
@media(max-width:899px){#tbx-lp-train-journey{padding-bottom:80px}}

/* ---------- アクセシビリティ ---------- */
#tbx-lp-train-journey a:focus-visible,
#tbx-lp-train-journey button:focus-visible{
  outline:3px solid var(--tbx-accent);outline-offset:2px;border-radius:4px;
}
@media(prefers-reduced-motion:reduce){
  #tbx-lp-train-journey *{transition:none !important;animation:none !important}
}

/* ------------------------------------------------------------
   出発地チップ：PCでは2カラムに並べて縦の余白を圧縮する
   （スマホは従来どおり縦積み）
   ------------------------------------------------------------ */
@media (min-width: 768px) {

  #tbx-lp-train-journey #departures .tbx-chipwrap {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 32px;
  }

  /* 見出しを左・チップを右の2カラムに */
  #tbx-lp-train-journey #departures .tbx-chipgrp {
    display: grid;
    grid-template-columns: 132px 1fr;
    align-items: start;
    gap: 0 16px;
    padding: 10px 0;
    border-bottom: 1px solid rgba(11, 42, 74, .08);
  }

  /* 最下段（2列なので末尾2つ）だけ区切り線を消す */
  #tbx-lp-train-journey #departures .tbx-chipgrp:nth-last-child(-n + 2) {
    border-bottom: 0;
  }

  #tbx-lp-train-journey #departures .tbx-chipgrp__lb {
    margin: 0;
    padding-top: 5px;
    white-space: nowrap;
  }

  #tbx-lp-train-journey #departures .tbx-chips {
    margin: 0;
  }
}

/* ------------------------------------------------------------
   「車内・外観の写真と見どころを見る」トグル
   基本の .tbx-toggle（太字・16px・全幅）を活かしつつ、
   淡いブルーの面とカメラアイコンで押せることを明示する
   ------------------------------------------------------------ */

#tbx-lp-train-journey .tbx-toggle--about {
  background: #eff5fb;
  border-color: #b9d2ea;
  color: var(--tbx-navy, #0f3a5f);
}

#tbx-lp-train-journey .tbx-toggle--about::before {
  content: "";
  width: 20px;
  height: 20px;
  flex: none;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230f3a5f' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 8.5h3l1.5-2h9L18 8.5h3v11H3z'/%3E%3Ccircle cx='12' cy='13.5' r='3.5'/%3E%3C/svg%3E") center / contain no-repeat;
}

#tbx-lp-train-journey .tbx-toggle--about:hover {
  background: #e2eef9;
  border-color: #8fb9dd;
}

/* ============================================================
   旅っくす 列車旅特集 LP  ヒーロー：列車スライダー
   /css/lp-train-journey.css の末尾に、以下をそのまま追記してください。
   既存の記述は一切変更しません。
   ============================================================ */

/* ------------------------------------------------------------
   1. スライド本体
   .is-slider は JS が「発売中の列車が1件以上あった」ときだけ
   .tbx-hero に付与します。0件のときは付与されないので、
   既存の hero.jpg がそのまま表示されます。
   ------------------------------------------------------------ */

#tbx-lp-train-journey .tbx-heroslides {
  position: absolute;
  inset: 0;
  overflow: hidden;
}

#tbx-lp-train-journey .tbx-heroslides__item {
  position: absolute;
  inset: 0;
  opacity: 0;
  /* ▼ 切替の速さ。JS側の CONF.fadeMs と必ず揃えること */
  transition: opacity 1.1s ease;
}

#tbx-lp-train-journey .tbx-heroslides__item.is-current {
  opacity: 1;
}

#tbx-lp-train-journey .tbx-heroslides__item img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  /* 列車写真は空が広く車体が下寄りのものが多いため、やや下を見せる */
  object-position: center 55%;
  opacity: 1;
  transform: scale(1.02);
}

/* ゆっくりズーム（ケンバーンズ） */
#tbx-lp-train-journey .tbx-heroslides__item.is-current img {
  animation: tbxHeroKenBurns 8s linear forwards;
}

@keyframes tbxHeroKenBurns {
  from { transform: scale(1.02); }
  to   { transform: scale(1.11); }
}

/* ------------------------------------------------------------
   静的な hero.jpg は既定で隠しておく

   既存CSSで opacity:.42 が当たっているため、そのままだと
   JSがスライドを作るまでの一瞬だけ hero.jpg が見えてしまう。
   最初から透明にしておけば、JSを待たずに消えるので発生しない。

   表示するのは次の2つの場合だけ。
     1. 発売中0件      … JSが .is-fallback を付ける
     2. JSが動かない場合 … page.php の <noscript> で表示
   ------------------------------------------------------------ */
#tbx-lp-train-journey .tbx-hero__media > img {
  opacity: 0;
}

#tbx-lp-train-journey .tbx-hero.is-fallback .tbx-hero__media > img {
  opacity: .42;
}

/* 文字とチップの可読性を確保する覆い
   （既存は .tbx-hero__media img { opacity:.42 } で薄くしていましたが、
     スライダー時は写真を鮮やかに出したいため、覆いで対応します） */
#tbx-lp-train-journey .tbx-hero.is-slider .tbx-hero__media::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(
    180deg,
    rgba(6, 26, 48, .42)   0%,
    rgba(6, 26, 48, .22)  42%,
    rgba(6, 26, 48, .72) 100%
  );
}

/* ------------------------------------------------------------
   2. コピー領域の余白
   チップ行のぶんだけ下に余白を足し、CTAボタンとの重なりを防ぎます。
   ------------------------------------------------------------ */

#tbx-lp-train-journey .tbx-hero.is-slider .tbx-hero__inner {
  /* 覆い（.tbx-hero__media::after）よりコピーを前面に置く。
     これが無いと見出しとCTAが覆いの下に沈んで薄く見えます */
  z-index: 2;
  padding-bottom: 132px;
}

@media (min-width: 768px) {
  #tbx-lp-train-journey .tbx-hero.is-slider .tbx-hero__inner {
    padding-bottom: 150px;
  }
}

/* ------------------------------------------------------------
   3. 列車名チップ
   ------------------------------------------------------------ */

#tbx-lp-train-journey .tbx-herochips {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 5;
  max-width: 1120px;
  margin: 0 auto;
  padding: 12px 20px 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 8px;
  row-gap: 7px;
}

#tbx-lp-train-journey .tbx-herochips__lead {
  width: 100%;
  margin: 0 0 4px;
  text-align: center;
  color: rgba(255, 255, 255, .9);
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: .04em;
}

#tbx-lp-train-journey .tbx-herochips__item {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  padding: 6px 13px;
  border: 1px solid rgba(255, 255, 255, .55);
  border-radius: 999px;
  background: rgba(10, 30, 54, .32);
  color: #fff;
  font-size: 13px;
  line-height: 1.2;
  text-decoration: none;
  white-space: nowrap;
  /* ▼ transform / opacity は入れない。
        ホバーで写真が切り替わる挙動は廃止したため、
        見た目の変化は色のみに留める */
  transition: background-color .25s, color .25s, border-color .25s;
}

#tbx-lp-train-journey .tbx-herochips__count {
  font-style: normal;
  font-size: 11px;
  opacity: .75;
}

#tbx-lp-train-journey .tbx-herochips__item:hover,
#tbx-lp-train-journey .tbx-herochips__item:focus-visible {
  background: rgba(255, 255, 255, .22);
  color: #fff;
}

/* いま表示中の列車 */
#tbx-lp-train-journey .tbx-herochips__item.is-current {
  background: #fff;
  border-color: #fff;
  color: var(--tbx-navy, #0b2a4a);
  font-weight: 700;
}

#tbx-lp-train-journey .tbx-herochips__item.is-current .tbx-herochips__count {
  opacity: .65;
}

#tbx-lp-train-journey .tbx-herochips__item:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 2px;
}

/* ------------------------------------------------------------
   4. 一時停止ボタン
   自動で動く要素には停止手段を用意する（アクセシビリティ要件）
   ------------------------------------------------------------ */

/* ボタンは .tbx-hero__media の中に置きます。
   PCでは media が hero 全面（inset:0）なので従来どおり右下、
   SPでは写真ブロックの右下に自然に収まり、位置指定を分ける必要がありません */
#tbx-lp-train-journey .tbx-heropause {
  position: absolute;
  right: 14px;
  bottom: 14px;
  z-index: 6; /* 覆い（::after）より前面に */
  width: 30px;
  height: 30px;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, .45);
  border-radius: 999px;
  background: rgba(10, 30, 54, .4);
  color: #fff;
  font-size: 12px;
  line-height: 1;
  cursor: pointer;
}

#tbx-lp-train-journey .tbx-heropause:hover {
  background: rgba(10, 30, 54, .7);
}

#tbx-lp-train-journey .tbx-heropause:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 2px;
}

/* ------------------------------------------------------------
   5. 写真の上に出す列車名ラベル（スマホのみ表示）
   スマホは写真の上にコピーを乗せないため、
   「いま映っているのがどの列車か」をここで示します。
   ------------------------------------------------------------ */

#tbx-lp-train-journey .tbx-heroslides__label {
  display: none; /* PCではチップが同じ役割を果たすので出さない */
}

/* ------------------------------------------------------------
   6. スマートフォン（767px以下）
   写真ブロック＋コピーの「縦積み」に切り替える

   【なぜ切り替えるか】
   スマホは画面が縦長のため、横長の列車写真を全面背景で敷くと
   横幅の3割程度しか見えず、何の列車か分からなくなります。
   写真を全面背景ではなく2:1のブロックにすることで、
   元画像の約86%（ヒーロー用に2:1の画像を用意すれば100%）が見えます。
   ------------------------------------------------------------ */

@media (max-width: 767px) {

  #tbx-lp-train-journey .tbx-hero.is-slider {
    display: flex;
    flex-direction: column;
    min-height: 0;
  }

  /* --- 写真ブロック --- */
  #tbx-lp-train-journey .tbx-hero.is-slider .tbx-hero__media {
    order: 1;
    position: relative;
    inset: auto;
    width: 100%;
    /* ▼ 元画像の比率に合わせる。ヒーロー用画像は 2:1（例 2000×1000）で用意する */
    aspect-ratio: 2 / 1;
    overflow: hidden;
  }

  /* 全面背景ではなくなるので、中央基準のトリミングでよい */
  #tbx-lp-train-journey .tbx-hero.is-slider .tbx-heroslides__item img {
    object-position: center center;
  }

  /* 写真の上に文字を乗せないため、覆いはラベル用に下端だけ弱くかける */
  #tbx-lp-train-journey .tbx-hero.is-slider .tbx-hero__media::after {
    background: linear-gradient(
      180deg,
      rgba(6, 26, 48, 0)   55%,
      rgba(6, 26, 48, .55) 100%
    );
  }

  /* --- 列車名ラベル --- */
  #tbx-lp-train-journey .tbx-heroslides__label {
    display: block;
    position: absolute;
    left: 16px;
    bottom: 12px;
    z-index: 3;
    color: #fff;
    font-size: 14px;
    font-weight: 700;
    line-height: 1.35;
    text-shadow: 0 1px 6px rgba(0, 0, 0, .5);
  }

  #tbx-lp-train-journey .tbx-heroslides__label small {
    display: block;
    font-size: 11px;
    font-weight: 400;
    opacity: .85;
  }

  /* --- コピー・CTA（写真の下、紺地） --- */
  #tbx-lp-train-journey .tbx-hero.is-slider .tbx-hero__inner {
    order: 2;
    z-index: auto;
    padding: 26px 20px 20px;
  }

  /* --- チップ行（コピーの下） --- */
  #tbx-lp-train-journey .tbx-hero.is-slider .tbx-herochips {
    order: 3;
    position: relative;
    left: auto;
    right: auto;
    bottom: auto;
    margin: 0;
    padding: 0 20px 18px;
    flex-wrap: nowrap;
    justify-content: flex-start;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }

  #tbx-lp-train-journey .tbx-herochips::-webkit-scrollbar {
    display: none;
  }

  #tbx-lp-train-journey .tbx-herochips__lead {
    width: auto;
    margin: 0 6px 0 0;
    white-space: nowrap;
  }

  #tbx-lp-train-journey .tbx-herochips__item {
    font-size: 12.5px;
    padding: 6px 11px;
  }
}

/* ------------------------------------------------------------
   7. 「動きを減らす」設定の端末への配慮
   OS側で視差効果を減らす設定の方には、静止画として見せる
   （JS側でも自動送りを止めています）
   ------------------------------------------------------------ */

@media (prefers-reduced-motion: reduce) {
  #tbx-lp-train-journey .tbx-heroslides__item {
    transition: none;
  }
  #tbx-lp-train-journey .tbx-heroslides__item.is-current img {
    animation: none;
  }
}

/* ==========================================================
   価値カード（02・08）の追加スタイル
   ※ ここは既存ルールを書き換えず、末尾に追記して上書きしています。
     同じ詳細度なら後に書いたほうが勝つCSSの仕様を利用しています。
   ========================================================== */

/* --- アイコンを見出しテキストの左へ --- */
#tbx-lp-train-journey .tbx-values__head{
  display:flex;align-items:center;justify-content:center;
  gap:10px;margin:0 0 8px;
}
#tbx-lp-train-journey .tbx-values__ic{
  display:inline-block;font-size:26px;line-height:1;flex:0 0 auto;
}
#tbx-lp-train-journey .tbx-values b{margin:0}
#tbx-lp-train-journey .tbx-values__head b{text-align:left}

/* リンクになっている価値カード（02）。タップできることが分かる見た目にする */
#tbx-lp-train-journey .tbx-values--link li{padding:0;overflow:hidden;transition:.15s;display:flex}
#tbx-lp-train-journey .tbx-values--link li:hover{
  border-color:var(--tbx-primary);transform:translateY(-2px);
  box-shadow:0 2px 6px rgba(15,58,95,.12),0 10px 24px rgba(15,58,95,.10);
}
#tbx-lp-train-journey .tbx-values--link a{
  display:flex;flex-direction:column;align-items:center;
  flex:1;min-width:0;                     /* height:100% は循環参照になるので使わない */
  padding:24px 20px 20px;text-decoration:none;color:inherit;
}
#tbx-lp-train-journey .tbx-values--link a:hover{background:#f6fafd}
#tbx-lp-train-journey .tbx-values--link a span:not(.tbx-values__ic){flex:0 0 auto}
#tbx-lp-train-journey .tbx-values--link a span.tbx-values__go{
  margin-top:auto;padding-top:14px;
  font-size:15px;font-weight:700;color:var(--tbx-primary);
}
#tbx-lp-train-journey .tbx-values--link a span.tbx-values__go::after{
  content:"→";margin-left:6px;display:inline-block;transition:transform .15s;
}
#tbx-lp-train-journey .tbx-values--link a:hover span.tbx-values__go::after{transform:translateX(4px)}
/* SPではタップ領域を確保しつつ、ボタン然とした帯を出す */
@media(max-width:767px){
  #tbx-lp-train-journey .tbx-values--link a{padding:20px 18px 0}
  #tbx-lp-train-journey .tbx-values--link a span.tbx-values__go{
    width:calc(100% + 36px);margin:16px -18px 0;padding:13px 18px;
    background:var(--tbx-bg-sub);border-top:1px solid var(--tbx-border-l);
    min-height:48px;display:flex;align-items:center;justify-content:center;
  }
}

/* 画像提供クレジット。目立たせず、ページ末尾に小さく添えるだけ */
#tbx-lp-train-journey .tbx-credit{
  max-width:1120px;margin:0 auto;padding:18px 20px 40px;
  font-size:12px;color:var(--tbx-sub);text-align:center;
}