@charset "UTF-8";
/* ============================================================
   venue-lp.css ― 会場LP（東京ドーム・京セラドーム大阪 など）の共通スタイル
   ・TOPと同じ順で style.css → ensei-add.css → lp-motion.css → lp-hotel4.css → lp-frame.css を読み、
     そのあとにこのファイルを読みます
   ・共通パーツ（widget.css / ensei-cards.css）は変えていません
   ・色はTOPの ensei-add.css「22.」の3色（本文 #172033／サブ #33445B／補足 #687386）と、
     文字リンクの青 #0068B7 に合わせています
   ・会場LPを増やすときは、このファイルはそのまま使います（会場ごとに変えるのはHTMLとCSVだけ）
   ============================================================ */

/* ---------- 1. ヒーロー：会場のアクセスを横に並べる ---------- */
.vlp-hero-access {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 10px;
  margin: 22px auto 0; padding: 0; list-style: none; }
.vlp-hero .hero-inner { padding-bottom: 18px; }
.vlp-hero h1 { font-size: 36px; }
@media (max-width: 800px) {
  .vlp-hero h1 { font-size: 26px; }
  .vlp-hero-access { flex-direction: column; align-items: stretch; max-width: 420px; }
  .vlp-hero-access li { justify-content: flex-start; text-align: left; }
}

/* ---------- 2. これからある公演（手動で更新） ---------- */
.vlp-shows { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--line, #DBE4EB); }
.vlp-show {
  display: grid; grid-template-columns: 180px minmax(0, 1fr) auto; align-items: center; gap: 8px 20px;
  padding: 16px 4px; border-bottom: 1px solid var(--line, #DBE4EB); }
.vlp-show__date { color: #172033; font-size: 15px; font-weight: 800; line-height: 1.5; }
.vlp-show__name { color: #172033; font-size: 16px; font-weight: 700; line-height: 1.5; overflow-wrap: anywhere; }
.vlp-show__links { display: flex; flex-wrap: wrap; gap: 8px; }
.vlp-shows-empty { display: none; margin: 0; padding: 18px; border-radius: 10px; background: var(--soft, #F7F9FB); color: #33445B; font-size: 14px; }
/* 公演が1件もないときは、一覧の代わりにひとことを出す（:has 未対応の古いブラウザでは何も出ません） */
.vlp-schedule:not(:has(.vlp-show)) .vlp-shows { display: none; }
.vlp-schedule:not(:has(.vlp-show)) .vlp-shows-empty { display: block; }
@media (max-width: 800px) {
  .vlp-show { grid-template-columns: 1fr; gap: 6px; padding: 14px 0; }
  .vlp-show__links { margin-top: 4px; }
  .vlp-show__links .vlp-btn { flex: 1 1 0; }
}

/* ボタン（公演・アクセスで使う小さめのボタン） */
.vlp-btn {
  display: inline-flex; align-items: center; justify-content: center; box-sizing: border-box;
  min-height: 44px; padding: 8px 16px; border: 2px solid var(--blue, #0878C9); border-radius: 10px;
  background: var(--blue, #0878C9); color: #fff; font-size: 14px; font-weight: 800; line-height: 1.4; text-align: center; }
.vlp-btn:hover { background: var(--blue-dark, #055A99); border-color: var(--blue-dark, #055A99); color: #fff; }
.vlp-btn.is-line { background: #fff; color: var(--blue, #0878C9); }
.vlp-btn.is-line:hover { background: #EAF6FF; color: var(--blue-dark, #055A99); }

/* 「〇〇をもっと見る」系の文字リンク（右に ›） */
.vlp-textlink { display: inline-block; margin-top: 16px; color: #0068B7; font-size: 14px; font-weight: 700; }
.vlp-textlink::after { content: "›"; margin-left: 6px; font-size: 1.2em; line-height: 1; }
.vlp-textlink:hover { text-decoration: underline; text-underline-offset: 3px; }

/* ---------- 3. 泊まるエリア：PCは手作りマップ＋説明、SPは近さの物差し ---------- */
.vlp-area { display: grid; grid-template-columns: minmax(0, 560px) minmax(0, 1fr); gap: 28px; align-items: start; }
.vlp-map { margin: 0; }
.vlp-map__frame { border: 1px solid var(--line, #DBE4EB); border-radius: 12px; background: var(--soft, #F7F9FB); overflow: hidden; }
.vlp-map svg { display: block; width: 100%; height: auto; }
.vlp-map figcaption { margin-top: 8px; color: #687386; font-size: 12px; line-height: 1.6; }
/* マップの中の文字（会場名・駅名・エリア名は画像に焼き込まず、SVGの文字にしています） */
.vlp-map .m-rail { fill: none; stroke: #A9B6C2; stroke-width: 6; stroke-linecap: round; stroke-linejoin: round; }
.vlp-map .m-st { fill: #fff; stroke: #4F6275; stroke-width: 3; }
.vlp-map .m-st-label { fill: #33445B; font-size: 13px; font-weight: 700; }
.vlp-map .m-small { fill: #687386; font-size: 11px; }
.vlp-map .m-venue { fill: #0B2740; }
.vlp-map .m-venue-label { fill: #fff; font-size: 15px; font-weight: 800; }
.vlp-map .m-ring { fill: none; stroke: #0878C9; stroke-width: 2; stroke-dasharray: 6 6; opacity: .55; }
.vlp-map .m-ring-label { fill: #055A99; font-size: 11px; font-weight: 700; }
.vlp-map .m-area rect { fill: #fff; stroke: #0068B7; stroke-width: 2; }
.vlp-map .m-area.is-main rect { fill: #0068B7; }
.vlp-map .m-area text { fill: #0068B7; font-size: 13px; font-weight: 800; }
.vlp-map .m-area .m-area-time { font-size: 11px; font-weight: 700; }
.vlp-map .m-area.is-main text { fill: #fff; }
.vlp-map a.m-area:hover rect, .vlp-map a.m-area:focus rect { stroke: #055A99; stroke-width: 3; }
.vlp-map a.m-area:focus { outline: none; }
.vlp-map a.m-area:focus-visible rect { stroke: #172033; stroke-width: 3; }
/* ホテルの番号ピン：位置を確かめるまでは出さない（section に has-pins を付けると表示） */
.vlp-map .m-pins { display: none; }
.has-pins .vlp-map .m-pins { display: inline; }
.vlp-map .m-pin circle { fill: #0878C9; stroke: #fff; stroke-width: 3; }
.vlp-map .m-pin text { fill: #fff; font-size: 13px; font-weight: 800; }

/* マップ横のエリア説明 */
.vlp-areas { margin: 0; padding: 0; list-style: none; display: grid; gap: 10px; }
.vlp-areas li { padding: 14px 16px; border: 1px solid var(--line, #DBE4EB); border-radius: 10px; background: #fff; }
.vlp-areas__name { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; color: #172033; font-size: 16px; font-weight: 800; line-height: 1.5; }
.vlp-areas__time { padding: 2px 9px; border-radius: 5px; background: var(--soft, #F7F9FB); color: #33445B; font-size: 12px; font-weight: 800; white-space: nowrap; }
.vlp-areas li.is-main .vlp-areas__time { background: #0068B7; color: #fff; }
.vlp-areas__desc { margin-top: 4px; color: #33445B; font-size: 13px; line-height: 1.7; }
.vlp-areas__go { display: inline-block; margin-top: 6px; color: #0068B7; font-size: 13px; font-weight: 700; }
.vlp-areas__go::after { content: "›"; margin-left: 5px; }

/* 物差し（SPだけ）。棒の位置は style の --s（始まり）と --w（長さ）を％で。0〜20分を100％とします */
.vlp-ruler { display: none; }
.vlp-ruler__scale { display: flex; justify-content: space-between; margin-bottom: 4px; color: #687386; font-size: 11px; }
.vlp-ruler__bar { position: relative; height: 10px; margin: 6px 0 8px; border-radius: 999px; background: #E3E9EF; }
.vlp-ruler__bar span { position: absolute; top: 0; bottom: 0; left: var(--s, 0%); width: var(--w, 10%); border-radius: 999px; background: #0068B7; }
.vlp-map-toggle { display: none; }

@media (max-width: 800px) {
  .vlp-area { grid-template-columns: 1fr; gap: 14px; }
  .vlp-area__side { order: 1; }
  /* SPではマップを閉じておき、「地図を見る」で開く */
  .vlp-map { order: 2; display: none; }
  .vlp-area.is-map-open .vlp-map { display: block; }
  .vlp-map-toggle {
    order: 3; display: flex; align-items: center; justify-content: center; gap: 6px;
    min-height: 44px; width: 100%; box-sizing: border-box;
    border: 2px solid var(--blue, #0878C9); border-radius: 10px; background: #fff;
    color: var(--blue, #0878C9); font: inherit; font-size: 14px; font-weight: 800; cursor: pointer; }
  .vlp-areas li { padding: 14px; }
  .vlp-ruler { display: block; }
  .vlp-areas__desc { font-size: 12.5px; }
}

/* ---------- 4. ホテル：1エリア8件（PCは4列×2段、SPは2列でまず4件） ----------
   lp-hotel4.css（4枚を1列にぴったり並べる指定）のあとに読み、8件のときだけ並べ方を上書きします。
   ★ウィジェットの中の作り（.ltkRecoWidget__track の直下に .ltkRecoWidget__card が並ぶ）を前提にしています。
     共通パーツが更新されたら、表示を確認してください */
.vlp-hotel { padding-top: 6px; }
.vlp-hotel::before, .vlp-hotel::after { content: none; }   /* 1会場だけなのでミシン目は出さない */
@media (min-width: 960px) {
  .vlp-hotel .ltkRecoWidget__track {
    display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px 16px;
    transform: none !important; }
  .vlp-hotel .ltkRecoWidget__card { flex: none; width: auto; }
}
@media (max-width: 959px) {
  .vlp-hotel:not(.is-all) .ltkRecoWidget__card:nth-child(n+5) { display: none; }
}
.vlp-more-btn { display: none; }
@media (max-width: 959px) {
  .vlp-more-btn:not([hidden]) {
    display: flex; align-items: center; justify-content: center;
    width: 100%; min-height: 48px; margin-top: 14px; box-sizing: border-box;
    border: 2px solid var(--blue, #0878C9); border-radius: 10px; background: #fff;
    color: var(--blue, #0878C9); font: inherit; font-size: 14px; font-weight: 800; cursor: pointer; }
  .vlp-more-btn:hover { background: #EAF6FF; }
}

/* ---------- 5. 行き方・終演後のカード ---------- */
.vlp-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.vlp-cards.is-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.vlp-card { padding: 20px; border: 1px solid #E3E9EF; border-radius: 12px; background: #fff; }
.vlp-card h3 { color: #172033; font-size: 17px; font-weight: 800; line-height: 1.5; }
.vlp-card p { margin-top: 8px; color: #33445B; font-size: 14px; line-height: 1.8; }
.vlp-card .vlp-textlink { margin-top: 10px; }

@media (max-width: 800px) {
  .vlp-cards, .vlp-cards.is-2 { grid-template-columns: 1fr; gap: 10px; }
  .vlp-card { padding: 16px; }
  .vlp-card h3 { font-size: 16px; }
  .vlp-card p { font-size: 13.5px; }
}

/* ---------- 6. 予約ボタン・ほかの会場 ---------- */
.vlp-reserve { margin-top: 4px; }
.vlp-other { margin-top: 28px; padding-top: 24px; border-top: 1px solid var(--line, #DBE4EB); }
.vlp-other h3 { color: #172033; font-size: 18px; font-weight: 800; margin-bottom: 12px; }

/* ---------- 7. 細かな調整 ---------- */
/* ホテル一覧の箱：TOPの会場ブロックの区切り線（ensei-add.css「19.」）を、会場LPでは出さない */
.venue-box.vlp-hotel { margin-top: 0; padding-top: 0; border-top: 0; }
/* 見出し下のひとことの中のリンク（FAQなど） */
.lead a { color: #0068B7; font-weight: 700; }
.lead a:hover { text-decoration: underline; text-underline-offset: 3px; }
/* 見出しを言葉の切れ目（、や <wbr>）で改行する。収まらないときだけ途中で折り返す（TOPのヒーローと同じ考え方） */
.vlp-hero h1, .vlp-hero h1 strong, .ensoku-lp .lp-panel > h2 { word-break: keep-all; overflow-wrap: anywhere; }

/* ---------- 8. 会場マップ（venue-map-builder v2 で書き出す部品） ----------
   ビルダーの「HTML」をそのまま貼るだけで、この見た目になります。
   ・図形（線路・駅・会場・エリア）はSVG、文字とピンはHTML。地図が縮んでも文字は小さくなりすぎません
   ・幅が狭いとき（会場LPのSP）は、部品の幅を見て自動でスマホ用の大きさに切り替えます
   ・「スマホでは隠す」にした文字（is-sp-hide）は、狭いときだけ消えます */
.vm-block { container: vm / inline-size; color: #172033; }
.vm-inner { display: block; }
.vm-block.is-area-pin .vm-inner,
.vm-block.is-area-nopin .vm-inner {
  display: grid; grid-template-columns: minmax(0, 560px) minmax(0, 1fr); gap: 24px; align-items: start;
  padding: 20px; border-radius: 16px; background: #F7F9FB; }
.vm-map { margin: 0; }
.vm-canvas { position: relative; aspect-ratio: 560 / 420; border: 1px solid #DBE4EB; border-radius: 12px; overflow: hidden; background: #ECE7DE; }
.vm-svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.vm-l {
  position: absolute; transform: translate(-50%, -50%); white-space: nowrap;
  color: #172033; font-size: 13px; font-weight: 700; line-height: 1.3; pointer-events: none;
  text-shadow: 0 0 3px #fff, 0 0 3px #fff, 0 0 4px #fff, 0 0 6px #fff; }
.vm-st.is-top    { transform: translate(-50%, calc(-100% - 12px)); }
.vm-st.is-bottom { transform: translate(-50%, 12px); }
.vm-st.is-right  { transform: translate(14px, -50%); }
.vm-st.is-left   { transform: translate(calc(-100% - 14px), -50%); }
.vm-st.is-sub { font-size: 12px; font-weight: 500; }
.vm-venue { color: #fff; font-size: 15px; font-weight: 800; text-shadow: none; }
.vm-park { color: #4A7343; font-size: 12px; }
.vm-text { color: #5B6B7A; font-size: 11px; font-weight: 500; }
.vm-text.is-m { font-size: 13px; font-weight: 700; }
.vm-text.is-blue { color: #055A99; }
.vm-text.is-green { color: #4A7343; }
.vm-text.is-road { color: #8A7B66; font-weight: 700; letter-spacing: .08em; }
.vm-ring-l { color: #055A99; font-size: 11px; }
.vm-walk { padding: 3px 10px; border-radius: 999px; background: #0B2740; color: #fff; font-size: 11px; text-shadow: none; }
.vm-zone {
  display: inline-flex; align-items: center; gap: 8px; padding: 5px 14px 5px 5px;
  border: 2px solid #0068B7; border-radius: 999px; background: #fff; line-height: 1.25; text-shadow: none; }
.vm-zone i {
  display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
  width: 26px; height: 26px; border-radius: 50%; background: #0068B7; color: #fff;
  font-size: 13px; font-weight: 800; font-style: normal; }
.vm-zone b { display: block; color: #0068B7; font-size: 13px; font-weight: 800; }
.vm-zone small { display: block; color: #33445B; font-size: 11px; font-weight: 700; }
.vm-zone.is-main { background: #0068B7; }
.vm-zone.is-main i { background: #fff; color: #0068B7; }
.vm-zone.is-main b { color: #fff; }
.vm-zone.is-main small { color: #D8ECFA; }
.vm-arrow { padding: 8px 14px; border-radius: 12px; background: #0B2740; color: #fff; text-align: center; text-shadow: none; }
.vm-arrow b { display: block; font-size: 14px; font-weight: 800; }
.vm-arrow small { display: block; margin-top: 2px; color: #D8E2EC; font-size: 11px; }
.vm-pin {
  display: flex; align-items: center; justify-content: center; box-sizing: border-box;
  width: 30px; height: 30px; border: 3px solid #fff; border-radius: 50%; background: #0878C9;
  color: #fff; font-size: 13px; font-weight: 800; text-shadow: none; box-shadow: 0 2px 6px rgba(23, 32, 51, .3); }
.vm-scale { color: #33445B; font-size: 11px; }
.vm-lg-note { margin: 2px 0 0; color: #687386; font-size: 11px; line-height: 1.6; }
.vm-note { margin: 8px 0 0; color: #687386; font-size: 11px; line-height: 1.6; }
.vm-side { min-width: 0; display: flex; flex-direction: column; gap: 10px; }
.vm-title { margin: 0; font-size: 16px; font-weight: 800; line-height: 1.5; }
.vm-desc { margin: 0; color: #33445B; font-size: 13px; line-height: 1.8; }
.vm-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
.vm-chips li { padding: 6px 12px; border: 1px solid #DBE4EB; border-radius: 8px; background: #fff; font-size: 13px; font-weight: 700; }
.vm-legend { display: flex; flex-direction: column; gap: 8px; margin: 4px 0 0; padding: 0; list-style: none; }
.vm-legend li { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border: 1px solid #DBE4EB; border-radius: 10px; background: #fff; }
.vm-num {
  display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
  width: 28px; height: 28px; border-radius: 50%; background: #0878C9; color: #fff; font-size: 13px; font-weight: 800; }
.vm-lg-body { flex: 1 1 auto; min-width: 0; }
.vm-lg-name { margin: 0; font-size: 14px; font-weight: 800; line-height: 1.4; overflow-wrap: anywhere; }
.vm-lg-chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 6px 0 0; }
.vm-chip { padding: 3px 9px; border-radius: 6px; background: #EEF2F6; color: #33445B; font-size: 12px; font-weight: 700; white-space: nowrap; }
.vm-chip.is-venue { background: #0B2740; color: #fff; }
.vm-chip.is-station { background: #0068B7; color: #fff; }
.vm-tag { font-size: 12px; font-weight: 800; white-space: nowrap; }
.vm-tag.is-venue { color: #0B2740; }
.vm-tag.is-station { color: #0068B7; }
.vm-tag.is-both { color: #33445B; }
/* タブレット幅：地図と説明を縦に並べる */
@container vm (max-width: 760px) {
  .vm-block.is-area-pin .vm-inner,
  .vm-block.is-area-nopin .vm-inner { grid-template-columns: minmax(0, 1fr); gap: 14px; padding: 12px; }
}
/* スマホ幅：文字とピンをひと回り小さく。補足の文字は隠せる */
@container vm (max-width: 480px) {
  .vm-l { font-size: 11px; }
  .vm-st.is-sub, .vm-park, .vm-text, .vm-ring-l { font-size: 10px; }
  .vm-text.is-m { font-size: 11px; }
  .vm-venue { font-size: 12px; }
  .vm-zone { gap: 5px; padding: 3px 9px 3px 3px; border-width: 1.5px; }
  .vm-zone i { width: 20px; height: 20px; font-size: 11px; }
  .vm-zone b { font-size: 11px; }
  .vm-zone small { display: none; }
  .vm-pin { width: 24px; height: 24px; border-width: 2px; font-size: 11px; }
  .vm-walk { padding: 2px 7px; font-size: 10px; }
  .vm-arrow { padding: 5px 9px; }
  .vm-arrow b { font-size: 12px; }
  .vm-arrow small { font-size: 10px; }
  .vm-block .is-sp-hide { display: none; }
  .vm-legend li { gap: 10px; padding: 10px 12px; }
  .vm-lg-name { font-size: 13px; }
  .vm-chip { font-size: 11px; padding: 2px 7px; }
}

/* スマホ幅：エリアの札は記号（A・B…）の丸だけにする。名前は地図の下の一覧で見せる */
@container vm (max-width: 480px) {
  .vm-zone { padding: 2px; gap: 0; }
  .vm-zone > span { display: none; }
  .vm-zone i { width: 24px; height: 24px; font-size: 12px; }
  .vm-flag { font-size: 11px !important; padding: 3px 13px 3px 7px !important; }
}

/* ---------- 9. これからある公演：月ごと・ジャンルで絞り込み ---------- */
.vlp-filter { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 18px; }
.vlp-filter[hidden] { display: none; }
.vlp-chip {
  display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 0 14px;
  border: 1.5px solid #CBD7E2; border-radius: 999px; background: #fff; color: #33445B;
  font: inherit; font-size: 14px; font-weight: 700; cursor: pointer; }
.vlp-chip:hover { border-color: #0B2740; }
.vlp-chip:focus-visible { outline: 2px solid #0878C9; outline-offset: 2px; }
.vlp-chip[hidden] { display: none; }
.vlp-chip__n { min-width: 22px; padding: 1px 6px; border-radius: 999px; background: #EEF2F6; font-size: 12px; text-align: center; }
.vlp-chip.is-on { background: #0B2740; border-color: #0B2740; color: #fff; }
.vlp-chip.is-on .vlp-chip__n { background: rgba(255,255,255,.22); color: #fff; }
.vlp-month + .vlp-month { margin-top: 22px; }
.vlp-month[hidden] { display: none; }
.vlp-month__h { display: flex; align-items: center; gap: 12px; margin: 0 0 2px; color: #172033; font-size: 16px; font-weight: 800; }
.vlp-month__h::after { content: ""; flex: 1; height: 1px; background: #DBE4EB; }
.vlp-sched .vlp-shows { border-top: 0; }
.vlp-sched .vlp-show { grid-template-columns: 92px minmax(0, 1fr) auto; gap: 8px 18px; padding: 14px 2px; }
.vlp-sched .vlp-show[hidden] { display: none; }
.vlp-show__when {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  min-height: 64px; margin: 0; padding: 6px 4px; border-radius: 10px; background: #F1F5F9; text-align: center; line-height: 1.15; }
.vlp-show__big { color: #172033; font-size: 22px; font-weight: 800; letter-spacing: -.01em; }
.vlp-show__big.is-long { font-size: 17px; }
.vlp-show__small { margin-top: 4px; color: #33445B; font-size: 12px; font-weight: 700; }
.vlp-show__when.is-now { background: #FFF1EC; }
.vlp-show__when.is-now .vlp-show__big { color: #C8402E; font-size: 15px; }
.vlp-show__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; margin: 0 0 4px; }
.vlp-genre { display: inline-block; padding: 2px 9px; border-radius: 999px; color: #fff; font-size: 12px; font-weight: 800; line-height: 1.5; }
.vlp-genre.is-concert { background: #0068B7; }
.vlp-genre.is-sports { background: #1D7A4C; }
.vlp-genre.is-event { background: #B45F17; }
.vlp-genre.is-stage { background: #7A4BA8; }
.vlp-show__venue { color: #687386; font-size: 12.5px; }
.vlp-show__sub { margin: 3px 0 0; color: #33445B; font-size: 12.5px; }
.vlp-sched__more {
  display: flex; align-items: center; justify-content: center; width: 100%; min-height: 48px; margin-top: 16px;
  border: 2px solid var(--blue, #0878C9); border-radius: 10px; background: #fff; color: var(--blue, #0878C9);
  font: inherit; font-size: 14px; font-weight: 800; cursor: pointer; }
.vlp-sched__more:hover { background: #EAF6FF; }
.vlp-sched__more[hidden] { display: none; }
.vlp-sched__asof { margin-top: 14px; }
@media (max-width: 800px) {
  .vlp-sched .vlp-show { grid-template-columns: 72px minmax(0, 1fr); gap: 10px 12px; padding: 14px 0; }
  .vlp-sched .vlp-show__links { grid-column: 1 / -1; }
  .vlp-show__when { min-height: 58px; }
  .vlp-show__big { font-size: 19px; }
  .vlp-show__big.is-long { font-size: 14px; }
  .vlp-show__when.is-now .vlp-show__big { font-size: 13px; }
  .vlp-sched .vlp-show__name { font-size: 15px; }
  .vlp-chip { min-height: 38px; padding: 0 12px; font-size: 13px; }
}

/* ---------- 10. 公演予定（タイムライン・ホテルが主役） ---------- */
.vlp-sched.is-tl .vlp-month__h { margin-bottom: 4px; }
.vlp-tl { position: relative; margin-left: 6px; border-left: 2px solid #DBE4EB; }
.vlp-sched.is-tl .vlp-show {
  position: relative; display: grid; grid-template-columns: 168px minmax(0, 1fr) auto; gap: 6px 20px; align-items: start;
  padding: 14px 0 16px 22px; border-bottom: 0; }
.vlp-sched.is-tl .vlp-show[hidden] { display: none; }
.vlp-sched.is-tl .vlp-show::before {
  content: ""; position: absolute; left: -8px; top: 19px; width: 14px; height: 14px; box-sizing: border-box;
  border-radius: 50%; background: #fff; border: 3px solid #0068B7; }
.vlp-sched.is-tl .vlp-show[data-genre="sports"]::before { border-color: #1D7A4C; }
.vlp-sched.is-tl .vlp-show[data-genre="event"]::before { border-color: #B45F17; }
.vlp-sched.is-tl .vlp-show[data-genre="stage"]::before { border-color: #7A4BA8; }
.tl-when { margin: 0; padding-top: 2px; color: #172033; font-size: 16px; font-weight: 800; line-height: 1.5; }
.tl-day.is-sat { color: #0068B7; }
.tl-day.is-sun { color: #C8402E; }
.tl-name { margin: 0; color: #172033; font-size: 16px; font-weight: 700; line-height: 1.55; overflow-wrap: anywhere; }
.tl-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; margin: 5px 0 0; }
.tl-ticket { display: inline-block; margin-top: 6px; color: #687386; font-size: 12.5px; font-weight: 700; }
.tl-ticket::after { content: "›"; margin-left: 5px; }
.tl-ticket:hover { color: #0068B7; }
.tl-stays { display: flex; flex-direction: column; gap: 8px; min-width: 200px; }
.vlp-btn.tl-stay { min-height: 46px; padding: 8px 18px; font-size: 14.5px; }
.tl-cta { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 20px;
  margin-top: 22px; padding: 18px 20px; border-radius: 12px; background: #0B2740; color: #fff; }
.tl-cta p { margin: 0; font-size: 15px; font-weight: 700; line-height: 1.6; }
.tl-cta__btns { display: flex; flex-wrap: wrap; gap: 8px; }
.tl-cta .vlp-btn { background: #fff; border-color: #fff; color: #0B2740; }
.tl-cta .vlp-btn.is-line { background: transparent; color: #fff; }
@media (max-width: 800px) {
  .vlp-sched.is-tl .vlp-show { grid-template-columns: minmax(0, 1fr); gap: 4px; padding: 12px 0 16px 18px; }
  .vlp-sched.is-tl .vlp-show::before { top: 16px; }
  .tl-when { font-size: 15px; }
  .tl-name { font-size: 15px; }
  .tl-stays { flex-direction: row; flex-wrap: wrap; min-width: 0; margin-top: 8px; }
  .tl-stays .vlp-btn { flex: 1 1 140px; }
  .tl-cta { flex-direction: column; align-items: stretch; }
  .tl-cta__btns .vlp-btn { flex: 1 1 0; }
}
/* ヒーローの予約ボタン */
.vlp-hero-cta { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin: 20px auto 0; }
.vlp-hero-cta a { display: inline-flex; align-items: center; justify-content: center; min-height: 50px; padding: 0 24px;
  border-radius: 999px; font-size: 15px; font-weight: 800; text-decoration: none; }
.vlp-hero-cta .is-main { background: #fff; color: #0B2740; }
.vlp-hero-cta .is-main:hover { background: #EAF6FF; }
.vlp-hero-cta .is-sub { border: 2px solid rgba(255,255,255,.85); color: #fff; }
.vlp-hero-cta .is-sub:hover { background: rgba(255,255,255,.12); }
@media (max-width: 800px) { .vlp-hero-cta { flex-direction: column; max-width: 420px; } }

/* ホテル一覧（1つのリスト）：カードの地名（エリア名）を切らずに出す */
.vlp-hotel .ltkRecoWidget__value--place { font-size: .8125rem; letter-spacing: -.01em; }

/* ---------- 11. まずはここから：目的で選ぶおすすめ（3テーマ×2件） ---------- */
.vlp-picks { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; margin: 4px 0 0; }
.vlp-theme { --c: #0068B7; --bg: #EAF3FB; display: flex; flex-direction: column; gap: 12px; padding: 14px; border-radius: 16px; background: var(--bg); }
.vlp-theme.is-save { --c: #1D7A4C; --bg: #E9F5EE; }
.vlp-theme.is-near { --c: #C8402E; --bg: #FCEDEA; }
.vlp-theme.is-next { --c: #0068B7; --bg: #EAF3FB; }
.vlp-theme__head { display: flex; align-items: center; gap: 12px; padding: 2px 4px; }
.vlp-theme__icon { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 48px; width: 48px; height: 48px; border-radius: 50%; background: var(--c); color: #fff; }
.vlp-theme__icon svg { width: 26px; height: 26px; }
.vlp-theme__title { margin: 0; color: var(--c); font-size: 19px; font-weight: 800; line-height: 1.35; }
.vlp-theme__who { margin: 2px 0 0; color: #33445B; font-size: 13px; font-weight: 700; }
.vlp-theme__list { display: grid; gap: 12px; }
.vlp-pick { display: grid; grid-template-columns: 112px minmax(0, 1fr); overflow: hidden; border-radius: 12px; background: #fff; box-shadow: 0 1px 3px rgba(24,45,77,.12); }
.vlp-pick__img { position: relative; min-height: 100%; background: #E6ECF1; }
.vlp-pick__img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.vlp-pick__ph { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; color: #8A95A3; font-size: 11px; font-weight: 700; }
.vlp-pick__ph svg { width: 28px; height: 28px; }
.vlp-pick__body { display: flex; flex-direction: column; gap: 4px; padding: 12px 12px 12px 14px; min-width: 0; }
.vlp-pick__name { margin: 0; color: #172033; font-size: 15px; font-weight: 800; line-height: 1.45; overflow-wrap: anywhere; }
.vlp-pick__area { margin: 0; color: #687386; font-size: 12px; font-weight: 700; }
.vlp-pick__facts { margin: 4px 0 8px; padding: 0; list-style: none; display: grid; gap: 3px; }
.vlp-pick__facts li { display: flex; align-items: flex-start; gap: 5px; color: #33445B; font-size: 12.5px; line-height: 1.55; }
.vlp-pick__facts svg { flex: 0 0 14px; width: 14px; height: 14px; margin-top: 3px; color: var(--c); }
.vlp-pick__btn { margin-top: auto; min-height: 40px; padding: 6px 12px; font-size: 13.5px; background: var(--c); border-color: var(--c); }
.vlp-pick__btn:hover { filter: brightness(.92); background: var(--c); border-color: var(--c); }
.vlp-picks__note { grid-column: 1 / -1; margin-top: 0; }
@media (max-width: 1100px) and (min-width: 801px) { .vlp-picks { grid-template-columns: minmax(0, 1fr); } .vlp-theme__list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 800px) {
  .vlp-picks { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  .vlp-theme { padding: 12px; }
  .vlp-theme__icon { flex-basis: 42px; width: 42px; height: 42px; }
  .vlp-theme__title { font-size: 17px; }
  .vlp-pick { grid-template-columns: 96px minmax(0, 1fr); }
  .vlp-pick__name { font-size: 14px; }
}

/* 11-2. おすすめ：3つのテーマのカードの高さをそろえる（見出し・1件目・2件目の行を、横の列どうしで共有する） */
@supports (grid-template-rows: subgrid) {
  @media (min-width: 1101px) {
    .vlp-picks { grid-template-rows: auto auto auto auto; }
    .vlp-theme { display: grid; grid-row: span 3; grid-template-rows: subgrid; gap: 12px; }
    .vlp-theme__list { display: contents; }
    .vlp-pick { height: 100%; }
    .vlp-picks__note { grid-row: 4; }
  }
}
/* 位置のアイコンは、ホテル一覧（ウィジェット）と同じ灰色のピンにそろえる */
.vlp-pick__area { display: flex; align-items: center; gap: 2px; }
.vlp-pick__area::before {
  content: ""; flex: 0 0 16px; width: 16px; height: 16px; margin: 0; background: #687386;
  -webkit-mask: url("https://tour.l-tike.com/contents/special/live_travel/venue_common/images/icons/pick-area-pin.svg") center / contain no-repeat;
          mask: url("https://tour.l-tike.com/contents/special/live_travel/venue_common/images/icons/pick-area-pin.svg") center / contain no-repeat; }
.vlp-pick__ph { background: linear-gradient(160deg, #EEF2F6, #DCE4EC); }

/* ---------- 12. エリアごとのホテル（「どこに泊まる？」の各エリアからのとび先） ---------- */
.vlp-ah + .vlp-ah { margin-top: 30px; }
.vlp-ah[hidden] { display: none; }
.vlp-ah { scroll-margin-top: 70px; }
.vlp-ah__head { display: flex; align-items: center; gap: 12px; margin: 0 0 12px; }
.vlp-ah__letter { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 36px; width: 36px; height: 36px; border-radius: 50%; background: #0068B7; color: #fff; font-size: 16px; font-weight: 800; }
.vlp-ah__title { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; margin: 0; color: #172033; font-size: 19px; font-weight: 800; line-height: 1.4; }
.vlp-ah__title small { margin: 0; padding: 2px 9px; border-radius: 6px; background: #EEF2F6; color: #33445B; font-size: 12px; font-weight: 800; vertical-align: 2px; white-space: nowrap; }
.vlp-ah__desc { margin: 2px 0 0; color: #33445B; font-size: 13px; }
.vlp-ah .venue-box.vlp-hotel { margin: 0; padding: 0; border: 0; }
.vlp-ah__more { display: inline-block; margin-top: 8px; color: #0068B7; font-size: 13.5px; font-weight: 700; }
.vlp-ah__more::after { content: "›"; margin-left: 5px; }
.vlp-ah__sample { margin: 0; padding: 2px 8px; border-radius: 6px; background: #FFF1EC; color: #C8402E; font-size: 11.5px; font-weight: 800; vertical-align: 3px; }
@media (max-width: 800px) { .vlp-ah__title { font-size: 17px; } .vlp-ah__head { align-items: flex-start; } }

/* エリアごとのホテル：エリアは見出しでわかるので、カードの中の地名は出さない */
.vlp-ah .ltkRecoWidget__kv--place { display: none; }

/* ---------- 13. E〜Gの路線図（PCは横長、スマホは縦長） ---------- */
.vlp-route { margin: 4px 0 16px; padding: 16px 18px 12px; border: 1px solid #DBE4EB; border-radius: 14px; background: #fff; }
.vlp-route svg { display: block; width: 100%; height: auto; margin: 0 auto; }
.vlp-route .vlp-route__pc { max-width: 820px; }
.vlp-route .vlp-route__sp { display: none; max-width: 360px; }
.vlp-route__note { margin: 6px 0 0; color: #687386; font-size: 11.5px; }
@media (max-width: 640px) {
  .vlp-route { padding: 12px 10px 10px; }
  .vlp-route .vlp-route__pc { display: none; }
  .vlp-route .vlp-route__sp { display: block; }
}

/* ---------- 14. 全体マップ：エリアの札は押せる（そのエリアのホテルへ）／スマホではアイコンを大きく ---------- */
.vm-canvas a.vm-zone { pointer-events: auto; cursor: pointer; text-decoration: none; transition: box-shadow .15s ease, transform .15s ease; }
.vm-canvas a.vm-zone:hover { box-shadow: 0 2px 8px rgba(11, 39, 64, .25); }
.vm-canvas a.vm-zone:focus-visible { outline: 3px solid #0878C9; outline-offset: 2px; }
.vm-canvas a.vm-zone::after { content: "›"; margin-left: 2px; font-weight: 800; color: inherit; }
.vm-canvas a.vm-zone:not(.is-main)::after { color: #0068B7; }
.vm-canvas a.vm-zone.is-main::after { color: #fff; }
.vm-sicon, .vm-vicon { transform-box: fill-box; transform-origin: center; }
@container vm (max-width: 480px) {
  .vm-sicon { transform: scale(1.7); }
  .vm-vicon { transform: scale(1.35); }
  .vm-canvas a.vm-zone { padding: 0; border-width: 2px; }
  .vm-canvas a.vm-zone i { width: 32px; height: 32px; font-size: 15px; }
  .vm-canvas a.vm-zone::after { display: none; }
  .vm-flag:not(.is-left) { transform: translate(8px, -50%) !important; }
  .vm-flag.is-left { transform: translate(calc(-100% - 8px), -50%) !important; }
}

/* ---------- 15. 電車1本で来られるエリア（E〜G）：1行ずつの路線図 ---------- */
.vlp-rides-wrap { margin-top: 26px; }
.vlp-rides__h { margin: 0 0 4px; color: #172033; font-size: 18px; font-weight: 800; word-break: keep-all; overflow-wrap: anywhere; }
.vlp-rides__lead { margin: 0 0 12px; }
.vlp-rides { margin: 0; padding: 0; list-style: none; display: grid; gap: 8px; }
.vlp-ride__link {
  display: grid; grid-template-columns: 34px minmax(150px, 210px) minmax(0, 1fr) auto auto; align-items: center; gap: 0 16px;
  padding: 12px 16px; border: 1px solid #DBE4EB; border-radius: 12px; background: #fff; color: #172033; text-decoration: none;
  transition: border-color .15s ease, box-shadow .15s ease; }
.vlp-ride__link:hover { border-color: #0068B7; box-shadow: 0 2px 8px rgba(0, 104, 183, .12); }
.vlp-ride__link:focus-visible { outline: 3px solid #0878C9; outline-offset: 2px; }
.vlp-ride__letter { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 50%; background: #0068B7; color: #fff; font-size: 15px; font-weight: 800; }
.vlp-ride__from b { display: block; font-size: 16px; font-weight: 800; line-height: 1.35; }
.vlp-ride__from small { display: block; margin-top: 1px; color: #687386; font-size: 12px; font-weight: 700; }
.vlp-ride__line { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.vlp-ride__lname { color: var(--line); font-size: 12px; font-weight: 800; line-height: 1; }
.vlp-ride__bar { position: relative; display: flex; align-items: center; justify-content: center; height: 6px; border-radius: 3px; background: var(--line); }
.vlp-ride__bar::before, .vlp-ride__bar::after { content: ""; position: absolute; top: 50%; width: 12px; height: 12px; margin-top: -6px; box-sizing: border-box; border-radius: 50%; background: #fff; border: 3px solid var(--line); }
.vlp-ride__bar::before { left: -2px; }
.vlp-ride__bar::after { right: -2px; }
.vlp-ride__chip { padding: 2px 10px; border: 1.5px solid var(--line); border-radius: 999px; background: #fff; color: var(--line); font-size: 11.5px; font-weight: 800; line-height: 1.5; white-space: nowrap; }
.vlp-ride__to { display: inline-flex; align-items: center; gap: 6px; min-width: 6.5em; font-size: 14px; font-weight: 800; white-space: nowrap; }
.vlp-ride__to svg { width: 20px; height: 20px; flex: none; }
.vlp-ride__go { color: #0068B7; font-size: 13px; font-weight: 800; white-space: nowrap; }
.vlp-ride__go::after { content: "›"; margin-left: 4px; }
.vlp-rides__note { margin: 8px 0 0; color: #687386; font-size: 11.5px; }
@media (max-width: 800px) {
  .vlp-ride__link { grid-template-columns: 30px minmax(0, 1fr) auto; grid-template-areas: "l f g" "line line to"; gap: 10px 12px; padding: 12px 14px; }
  .vlp-ride__letter { grid-area: l; width: 30px; height: 30px; font-size: 14px; }
  .vlp-ride__from { grid-area: f; }
  .vlp-ride__go { grid-area: g; }
  .vlp-ride__line { grid-area: line; }
  .vlp-ride__to { grid-area: to; align-self: end; font-size: 13px; }
}
/* エリアごとのホテル：CSVのリストを作るまでの表示 */
.vlp-ah__pending { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px; padding: 16px 18px; border: 1px dashed #BFCCD8; border-radius: 12px; background: #F7F9FB; }
.vlp-ah__pending p { margin: 0; color: #33445B; font-size: 14px; font-weight: 700; }

/* ---------- 16. 泊まるエリア（A〜D）：カード全体を押せる／「ホテルを見る」は右上 ---------- */
.vlp-areas.is-links li { padding: 0; border: 0; background: none; }
.vlp-areas__card { display: block; padding: 14px 16px; border: 1px solid var(--line, #DBE4EB); border-radius: 10px; background: #fff; color: #172033; text-decoration: none; transition: border-color .15s ease, box-shadow .15s ease; }
.vlp-areas__card:hover { border-color: #0068B7; box-shadow: 0 2px 8px rgba(0, 104, 183, .12); }
.vlp-areas__card:focus-visible { outline: 3px solid #0878C9; outline-offset: 2px; }
.vlp-areas__top { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.vlp-areas__card .vlp-areas__name { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; }
.vlp-areas__card .vlp-areas__go { flex: none; margin: 2px 0 0; color: #0068B7; font-size: 13px; font-weight: 800; white-space: nowrap; }
.vlp-areas__card .vlp-areas__desc { display: block; margin-top: 4px; }

/* ---------- 17. この駅からなら（E〜G）：駅でおすすめ ---------- */
.vlp-stcs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin: 0; padding: 0; list-style: none; }
.vlp-stc__link { display: flex; flex-direction: column; gap: 12px; height: 100%; box-sizing: border-box; padding: 16px; border: 1px solid #DBE4EB; border-top: 5px solid var(--line); border-radius: 14px; background: #fff; color: #172033; text-decoration: none; transition: box-shadow .15s ease; }
.vlp-stc__link:hover { box-shadow: 0 4px 14px rgba(24, 45, 77, .14); }
.vlp-stc__link:focus-visible { outline: 3px solid #0878C9; outline-offset: 2px; }
.vlp-stc__head { display: flex; align-items: center; gap: 10px; }
.vlp-stc__icon { display: inline-flex; flex: none; width: 34px; height: 34px; color: #33445B; }
.vlp-stc__icon svg { width: 100%; height: 100%; }
.vlp-stc__ttl { flex: 1; min-width: 0; }
.vlp-stc__ttl b { display: block; font-size: 20px; font-weight: 800; line-height: 1.25; }
.vlp-stc__ttl small { display: block; margin-top: 2px; color: #687386; font-size: 12px; font-weight: 700; }
.vlp-stc__letter { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 26px; height: 26px; border-radius: 50%; background: #0068B7; color: #fff; font-size: 12px; font-weight: 800; }
.vlp-stc__route { display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; align-items: center; gap: 0 8px; padding: 12px; border-radius: 10px; background: #F5F7FA; }
.vlp-stc__stop { font-size: 14px; font-weight: 800; white-space: nowrap; }
.vlp-stc__stop.is-to { color: #0B2740; }
.vlp-stc__track { position: relative; height: 6px; margin: 0 4px; border-radius: 3px; background: var(--line); }
.vlp-stc__track::before, .vlp-stc__track::after { content: ""; position: absolute; top: 50%; width: 12px; height: 12px; margin-top: -6px; box-sizing: border-box; border-radius: 50%; background: #fff; border: 3px solid var(--line); }
.vlp-stc__track::before { left: -4px; }
.vlp-stc__track::after { right: -4px; }
.vlp-stc__track span { position: absolute; left: 50%; bottom: 10px; transform: translateX(-50%); color: var(--line); font-size: 11.5px; font-weight: 800; white-space: nowrap; }
.vlp-stc__dome { display: inline-flex; width: 26px; height: 26px; padding: 4px; box-sizing: border-box; border-radius: 50%; background: #0B2740; color: #fff; }
.vlp-stc__dome svg { width: 100%; height: 100%; }
.vlp-stc__steps { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; }
.vlp-stc__steps li { display: flex; align-items: flex-start; gap: 8px; color: #33445B; font-size: 13.5px; line-height: 1.6; }
.vlp-stc__steps b { color: #172033; }
.vlp-stc__no { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 20px; height: 20px; margin-top: 1px; border-radius: 50%; background: var(--line); color: #fff; font-size: 11.5px; font-weight: 800; }
.vlp-stc__go { margin-top: auto; padding-top: 4px; color: #0068B7; font-size: 13.5px; font-weight: 800; }
.vlp-stc__go::after { content: "›"; margin-left: 5px; }
@media (max-width: 800px) {
  /* スマホは横にスワイプ（縦に長くしない） */
  .vlp-stcs { display: flex; gap: 12px; margin: 0; padding: 2px 2px 8px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
  .vlp-stcs::-webkit-scrollbar { display: none; }
  .vlp-stc { flex: 0 0 84%; scroll-snap-align: start; }
  .vlp-stc__ttl b { font-size: 18px; }
}
.vlp-stcs__hint { display: none; margin: 0 0 8px; color: #687386; font-size: 12px; }
@media (max-width: 800px) { .vlp-stcs__hint { display: block; } }

/* ---------- 18. ヒーローの絵：文字の後ろに背景として敷く（ヒーローの高さは変えない） ---------- */
.vlp-hero { position: relative; overflow: hidden; }
.vlp-hero .hero-inner { position: relative; z-index: 2; }
.vlp-hero__art {
  position: absolute; inset: 0; z-index: 0; display: block; width: 100%; height: 100%;
  object-fit: cover; object-position: center bottom; opacity: .6; transform: translateY(31%); pointer-events: none; }
/* 文字の読みやすさのために、絵の上に紺のうすい膜をかける（中央の文字のあたりを少し濃く） */
.vlp-hero::before {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    radial-gradient(ellipse 60% 55% at 50% 45%, rgba(8, 28, 48, .72), rgba(8, 28, 48, .35) 70%, rgba(8, 28, 48, .15)),
    linear-gradient(to bottom, rgba(8, 28, 48, .35), rgba(8, 28, 48, 0) 40%); }
@media (max-width: 800px) { .vlp-hero__art { top: auto; height: 170px; opacity: .45; transform: translateY(22%); } }

/* ---------- 19. エリアごとの地図（ホテルと駅の位置）＋ホテル一覧 ---------- */
.vm-hname { padding: 2px 8px; border: 1px solid #CBD7E2; border-radius: 6px; background: rgba(255, 255, 255, .95); color: #172033; font-size: 11.5px; font-weight: 800; text-shadow: none; white-space: nowrap; }
.vm-canvas .vm-hpin { box-shadow: 0 2px 6px rgba(8, 28, 48, .35); }
.vlp-ah__body { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 18px; align-items: start; }
.vlp-ah__map .vm-block { margin: 0; }
.vlp-ah__mapnote { margin: 6px 0 0; color: #687386; font-size: 11.5px; }
/* 地図の番号と同じ番号を、ホテルのカードにも付ける（CSVの並び順） */
.vlp-ah.has-map .ltkRecoWidget__track { counter-reset: vlp-h; }
.vlp-ah.has-map .ltkRecoWidget__card { position: relative; counter-increment: vlp-h; }
.vlp-ah.has-map .ltkRecoWidget__card::before {
  content: counter(vlp-h); position: absolute; left: 8px; top: 8px; z-index: 3; display: flex; align-items: center; justify-content: center;
  width: 26px; height: 26px; box-sizing: border-box; border: 2px solid #fff; border-radius: 50%; background: #0878C9; color: #fff;
  font-size: 12px; font-weight: 800; box-shadow: 0 1px 4px rgba(8, 28, 48, .3); }
@media (min-width: 960px) {
  .vlp-ah.has-map .vlp-hotel .ltkRecoWidget__track { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 959px) {
  .vlp-ah__body { grid-template-columns: minmax(0, 1fr); gap: 12px; }
}
@container vm (max-width: 480px) {
  .vm-canvas .vm-hpin { width: 28px; height: 28px; font-size: 13px; }
}

/* ---------- 20. エリアごとのホテル（地図あり）：参考の形＝横長のカードを縦に並べる ----------
   ウィジェットのカードの中身（写真・名前・星・最寄り駅・料金）はそのまま、並べ方だけを変えています */
.vlp-ah.has-map .vlp-hotel .ltkRecoWidget__viewport { overflow: visible; width: auto; margin: 0; padding: 0; }
.vlp-ah.has-map .vlp-hotel .ltkRecoWidget__track { display: flex !important; flex-direction: column; gap: 8px; width: auto !important; transform: none !important; }
.vlp-ah.has-map .vlp-hotel .ltkRecoWidget__card {
  display: grid !important; grid-template-columns: 92px minmax(0, 1fr); flex: none !important; width: 100% !important; min-height: 92px; max-width: none !important;
  border: 1px solid #E4DED4; border-radius: 12px; box-shadow: none; overflow: hidden; }
.vlp-ah.has-map .vlp-hotel .ltkRecoWidget__card:hover { border-color: #0068B7; box-shadow: 0 2px 8px rgba(0, 104, 183, .12); }
.vlp-ah.has-map .vlp-hotel .ltkRecoWidget__imageWrap { height: auto; min-height: 76px; aspect-ratio: auto; margin: 8px 0 8px 8px; border-radius: 8px; overflow: hidden; }
.vlp-ah.has-map .vlp-hotel .ltkRecoWidget__image { width: 100%; height: 100%; object-fit: cover; }
.vlp-ah.has-map .vlp-hotel .ltkRecoWidget__card .ltkRecoWidget__body,
.vlp-ah.has-map .vlp-hotel .ltkRecoWidget__card--noPrice .ltkRecoWidget__body {
  grid-template-columns: auto minmax(0, 1fr); grid-template-rows: auto auto auto; row-gap: 5px; column-gap: 10px;
  grid-template-areas: "name name" "stars place" "price priceNote"; align-content: center; padding: 8px 12px; height: auto !important; min-height: 0 !important; }
.vlp-ah.has-map .vlp-hotel .ltkRecoWidget__card--noPrice .ltkRecoWidget__body { grid-template-areas: "name name" "stars place"; }
.vlp-ah.has-map .vlp-hotel .ltkRecoWidget__hotelName { height: auto !important; min-height: 0 !important; font-size: 15px; line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; }
.vlp-ah.has-map .ltkRecoWidget__kv--place { display: inline-flex !important; justify-self: start; max-width: 100%; padding: 2px 8px; border-radius: 6px; background: #E8F1EF; }
.vlp-ah.has-map .ltkRecoWidget__value--place { max-width: none; color: #23615D; font-size: 12px; font-weight: 800; }
.vlp-ah.has-map .ltkRecoWidget__priceNote { align-self: center; justify-self: start; font-size: 11px; }
.vlp-ah.has-map .ltkRecoWidget__value--price { font-size: 18px; }
/* 番号は写真の左上に */
.vlp-ah.has-map .ltkRecoWidget__card::before { left: 12px; top: 12px; width: 24px; height: 24px; font-size: 11.5px; }
@media (max-width: 959px) {
  .vlp-ah.has-map .vlp-hotel:not(.is-all) .ltkRecoWidget__card:nth-child(n+5) { display: none !important; }
}
/* 写真がないときの表示は、せまい枠ではアイコンだけにする */
.vlp-ah.has-map .ltkRecoWidget__imageFallback span:not(.ltkRecoWidget__imageFallbackIcon) { display: none; }

/* おすすめのテーマ色（会場のすぐそば＝赤、繁華街＝紫、大浴場＝青緑） */
.vlp-theme.is-busy { --c: #7A4BA8; --bg: #F3EEF9; }
.vlp-theme.is-bath { --c: #0E7C86; --bg: #E7F5F6; }

/* ---------- 21. 行き方：着く場所ごとの乗り方 ---------- */
.vlp-arrs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.vlp-arr { display: flex; flex-direction: column; gap: 10px; padding: 18px; border: 1px solid #DBE4EB; border-top: 5px solid var(--c); border-radius: 14px; background: #fff; }
.vlp-arr__head { display: flex; align-items: center; gap: 12px; }
.vlp-arr__icon { display: inline-flex; flex: none; width: 40px; height: 40px; padding: 8px; box-sizing: border-box; border-radius: 50%; background: var(--c); color: #fff; }
.vlp-arr.is-train .vlp-arr__icon, .vlp-arr.is-bus .vlp-arr__icon { padding: 9px; }
.vlp-arr__icon svg { width: 100%; height: 100%; }
.vlp-arr.is-train .vlp-arr__icon svg rect:first-child { fill: transparent; }
.vlp-arr__how { margin: 0; color: #687386; font-size: 12px; font-weight: 800; }
.vlp-arr__where { margin: 0; color: #172033; font-size: 18px; font-weight: 800; line-height: 1.35; }
.vlp-arr__meta { align-self: flex-start; margin: 0; padding: 3px 10px; border: 1.5px solid var(--c); border-radius: 999px; color: var(--c); font-size: 12.5px; font-weight: 800; }
.vlp-arr__steps { display: grid; gap: 7px; margin: 0; padding: 0; list-style: none; }
.vlp-arr__steps li { display: flex; align-items: flex-start; gap: 8px; color: #33445B; font-size: 13.5px; line-height: 1.6; }
.vlp-arr__steps b { color: #172033; }
.vlp-arr__no { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 20px; height: 20px; margin-top: 1px; border-radius: 50%; background: var(--c); color: #fff; font-size: 11.5px; font-weight: 800; }
.vlp-arr__btns { display: grid; gap: 8px; margin-top: auto; padding-top: 6px; }
.vlp-arr__btns .vlp-btn { width: 100%; min-height: 44px; white-space: nowrap; }
.vlp-arrs__note { margin-top: 12px; }
@media (max-width: 960px) {
  /* スマホ・タブレットは横にスワイプ（縦に長くしない） */
  .vlp-arrs { display: flex; gap: 12px; padding: 2px 2px 8px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
  .vlp-arrs::-webkit-scrollbar { display: none; }
  .vlp-arr { flex: 0 0 84%; max-width: 360px; scroll-snap-align: start; }
}

/* ---------- 22. 遠征の段取り（縦のステップ） ---------- */
.vlp-tl2 { position: relative; display: grid; gap: 14px; margin: 0; padding: 0; list-style: none; }
.vlp-tl2::before { content: ""; position: absolute; left: 19px; top: 20px; bottom: 20px; width: 2px; background: #CFE0EE; }
.vlp-tl2__item { position: relative; display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 14px; align-items: start; }
.vlp-tl2__no { position: relative; z-index: 1; display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 50%; background: #0068B7; color: #fff; font-size: 17px; font-weight: 800; box-shadow: 0 0 0 4px #fff; }
.lp-section.is-soft .vlp-tl2__no { box-shadow: 0 0 0 4px var(--soft, #F7F9FB); }
.vlp-tl2__body { padding: 14px 18px 16px; border: 1px solid #DBE4EB; border-radius: 12px; background: #fff; }
.vlp-tl2__when { margin: 0; color: #0068B7; font-size: 12.5px; font-weight: 800; }
.vlp-tl2__title { margin: 2px 0 0; color: #172033; font-size: 17px; font-weight: 800; line-height: 1.45; }
.vlp-tl2__text { margin: 6px 0 0; color: #33445B; font-size: 14px; line-height: 1.8; }
.vlp-tl2__btns { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
@media (max-width: 800px) {
  .vlp-tl2::before { left: 15px; }
  .vlp-tl2__item { grid-template-columns: 32px minmax(0, 1fr); gap: 10px; }
  .vlp-tl2__no { width: 32px; height: 32px; font-size: 14px; }
  .vlp-tl2__body { padding: 12px 14px 14px; }
  .vlp-tl2__title { font-size: 16px; }
  .vlp-tl2__text { font-size: 13.5px; }
  .vlp-tl2__btns .vlp-btn { flex: 1 1 0; }
}

/* PCでは段取りを横に4つ並べて、高さを抑える */
@media (min-width: 961px) {
  .vlp-tl2 { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
  .vlp-tl2::before { left: 20px; right: calc(25% - 4px); top: 19px; bottom: auto; width: auto; height: 2px; }
  .vlp-tl2__item { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto 1fr; gap: 10px; }
  .vlp-tl2__body { display: flex; flex-direction: column; height: 100%; box-sizing: border-box; }
  .vlp-tl2__text { font-size: 13.5px; line-height: 1.75; }
  .vlp-tl2__btns { margin-top: auto; padding-top: 10px; }
  .vlp-tl2__btns .vlp-btn { width: 100%; }
}

/* ---------- 23. エリアごとのホテル：エリアのひとこと案内（行き方・こんな人に・ひとこと） ---------- */
.vlp-ah__facts { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 10px; margin: 0 0 14px; }
.vlp-ah__facts > div { --fc: #0068B7; padding: 10px 14px; border: 1px solid #DBE4EB; border-left: 4px solid var(--fc); border-radius: 10px; background: #fff; }
.vlp-ah__facts > .is-who { --fc: #7A4BA8; }
.vlp-ah__facts > .is-tip { --fc: #B45F17; }
.vlp-ah__facts dt { display: flex; align-items: center; gap: 6px; margin: 0 0 3px; color: var(--fc); font-size: 12.5px; font-weight: 800; }
.vlp-ah__facts dd { margin: 0; color: #33445B; font-size: 13.5px; line-height: 1.65; }
.vlp-ah__ficon { display: inline-flex; width: 16px; height: 16px; color: var(--fc); }
.vlp-ah__ficon svg { width: 100%; height: 100%; }
@media (max-width: 959px) {
  .vlp-ah__facts { grid-template-columns: minmax(0, 1fr); gap: 6px; }
  .vlp-ah__facts > div { padding: 8px 12px; }
  .vlp-ah__facts dd { font-size: 13px; }
}

/* ---------- 24. エリアの地図：準備中の枠（地図ができたら差し替え） ---------- */
.vlp-mapph {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; aspect-ratio: 560 / 420;
  border: 1px solid #D9D2C5; border-radius: 12px; color: #33445B; text-align: center;
  background:
    linear-gradient(28deg, transparent 47%, rgba(255,255,255,.9) 47.5%, rgba(255,255,255,.9) 50.5%, transparent 51%),
    linear-gradient(-62deg, transparent 58%, rgba(255,255,255,.75) 58.5%, rgba(255,255,255,.75) 60.5%, transparent 61%),
    linear-gradient(90deg, transparent 30%, rgba(255,255,255,.7) 30.5%, rgba(255,255,255,.7) 32%, transparent 32.5%),
    #ECE7DE; }
.vlp-mapph__icon { display: inline-flex; width: 40px; height: 40px; padding: 4px; border-radius: 12px; background: #fff; color: #33445B; box-shadow: 0 2px 6px rgba(8,28,48,.15); }
.vlp-mapph__icon svg { width: 100%; height: 100%; }
.vlp-mapph__name { margin: 4px 0 0; padding: 3px 12px; border-radius: 999px; background: rgba(255,255,255,.92); font-size: 15px; font-weight: 800; }
.vlp-mapph__note { margin: 0; padding: 2px 10px; border-radius: 6px; background: rgba(255,255,255,.85); color: #687386; font-size: 12.5px; font-weight: 700; }
/* 会場が地図の外にあるとき：会場の方向の札 */
.vm-canvas .vm-varrow { padding: 3px 10px; border-radius: 999px; background: #0B2740; color: #fff; font-size: 11.5px; font-weight: 800; text-shadow: none; white-space: nowrap; transform: translate(0, 0); }
@container vm (max-width: 480px) { .vm-canvas .vm-varrow { font-size: 10.5px; } }

/* 公演予定：ボタンは1つ（同じ色）。下の案内のボタンも同じ色に */
.tl-stays { min-width: 168px; }
.tl-cta .vlp-btn, .tl-cta .vlp-btn.is-line { background: #fff; border-color: #fff; color: #0B2740; }
/* 文の区切りで改行する（句点だけが次の行に落ちないように） */
.vlp-nw { display: inline-block; }
/* 会場の名札をアイコンの上に出す（まわりにホテル名が多い地図用） */
.vm-canvas .vm-flag.is-top { clip-path: none !important; padding: 4px 10px !important; border-radius: 4px !important; }
@container vm (max-width: 480px) { .vm-flag.is-top { transform: translate(-50%, calc(-100% - 22px)) !important; } }

/* エリアごとのホテル：いちばん下の「◯◯のホテルをもっと見る」は右側に */
#hotel .lp-panel > .vlp-textlink { display: table; margin: 18px 0 0 auto; }

/* ===== アイコン（7会場共通）：形は images/icons/◯◯.svg。色は currentColor（まわりの文字の色）で付く ===== */
.vlp-ico { display: inline-block; flex: none; width: 1em; height: 1em; background-color: currentColor;
  -webkit-mask: var(--ico) center / contain no-repeat; mask: var(--ico) center / contain no-repeat; vertical-align: middle; }
.vlp-ico--access-train { --ico: url("https://tour.l-tike.com/contents/special/live_travel/venue_common/images/icons/access-train.svg"); }
.vlp-ico--access-bus   { --ico: url("https://tour.l-tike.com/contents/special/live_travel/venue_common/images/icons/access-bus.svg"); }
.vlp-ico--access-plane { --ico: url("https://tour.l-tike.com/contents/special/live_travel/venue_common/images/icons/access-plane.svg"); }
.vlp-ico--pick-no-photo { --ico: url("https://tour.l-tike.com/contents/special/live_travel/venue_common/images/icons/pick-no-photo.svg"); }
.vlp-ico--pick-check { --ico: url("https://tour.l-tike.com/contents/special/live_travel/venue_common/images/icons/pick-check.svg"); }
.vlp-ico--theme-near-venue  { --ico: url("https://tour.l-tike.com/contents/special/live_travel/venue_common/images/icons/theme-near-venue.svg"); }
.vlp-ico--theme-downtown  { --ico: url("https://tour.l-tike.com/contents/special/live_travel/venue_common/images/icons/theme-downtown.svg"); }
.vlp-ico--theme-bath  { --ico: url("https://tour.l-tike.com/contents/special/live_travel/venue_common/images/icons/theme-bath.svg"); }
.vlp-ico--theme-shinkansen-airport  { --ico: url("https://tour.l-tike.com/contents/special/live_travel/venue_common/images/icons/theme-shinkansen-airport.svg"); }
.vlp-theme__icon .vlp-ico { width: 26px; height: 26px; }
.vlp-arr__icon { align-items: center; justify-content: center; }
.vlp-arr__icon .vlp-ico { width: 22px; height: 22px; }
.vlp-pick__facts .vlp-ico { width: 14px; height: 14px; margin-top: 3px; color: var(--c); }
.vlp-pick__ph .vlp-ico { width: 28px; height: 28px; }
.vlp-mapph__icon { align-items: center; justify-content: center; }
.vlp-mapph__icon .vlp-ico { width: 26px; height: 26px; }

/* ===== エリアごとのホテル：写真が縦長でもカードの高さをそろえる（写真は枠いっぱいに切り取る） ===== */
.vlp-ah.has-map .vlp-hotel .ltkRecoWidget__card { align-items: center; }
.vlp-ah.has-map .vlp-hotel .ltkRecoWidget__imageWrap { position: relative; width: auto !important; height: 76px !important; min-height: 76px !important; max-height: 76px !important; flex: none !important; }
.vlp-ah.has-map .vlp-hotel .ltkRecoWidget__image { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

/* ===== 地図の描き足し：歩く道・駅の出口・地下を走る線・目印（Kアリーナ横浜から） ===== */
.vm-canvas .vm-l.vm-text.is-walk { color: #B35A00; font-weight: 800; font-size: 11.5px; background: rgba(255,255,255,.9); padding: 1px 7px; border-radius: 999px; box-shadow: 0 0 0 1px rgba(224,123,0,.4); }
.vm-canvas .vm-l.vm-text.is-exit { color: #33445B; font-weight: 800; font-size: 11px; background: rgba(255,255,255,.9); padding: 0 5px; border-radius: 4px; }
.vm-canvas .vm-l.vm-text.is-sub  { color: #2F6FB5; font-weight: 700; font-size: 10.5px; }
.vm-canvas .vm-l.vm-text.is-lm   { color: #33445B; font-weight: 700; font-size: 11px; }

/* ===== 地図の出典（国土地理院の利用規約：地図が見えているあいだ、いつも見えるように） ===== */
.vm-credit { margin: 4px 2px 0; color: #7A8594; font-size: 10.5px; line-height: 1.5; text-align: right; }

/* 地図の下の2行（出典・「地図の番号は…」）は右寄せでそろえる */
.vlp-ah__map .vlp-ah__mapnote { text-align: right; }
.vm-credit + .vlp-ah__mapnote, .vlp-ah__map .vm-block + .vlp-ah__mapnote { margin-top: 2px; }
.vm-credit span { display: inline-block; }   /* スマホでは文の区切りで折り返す */
.vm-credit a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }