/* ============================================================
   THE SPRINGS VALLEY yufu — common.css
   由布院・温泉宿サイト 共通スタイル
   Palette: 深緑(#1f3a32) × ゴールド(#b89a5e) × アイボリー(#f3efe6)
   ============================================================ */

:root {
  /* --- color tokens --- */
  --c-forest:       #1f3a32;
  --c-forest-deep:  #15281f;
  --c-forest-soft:  #2c4a40;
  --c-gold:         #b89a5e;
  --c-gold-light:   #d2bd8c;
  --c-ivory:        #f3efe6;
  --c-ivory-deep:   #e9e2d3;
  --c-paper:        #fbfaf6;
  --c-ink:          #28302c;
  --c-ink-soft:     #5a625c;
  --c-line:         #d8d0bf;
  --c-white:        #ffffff;

  /* --- type --- */
  --f-en: "Cormorant Garamond", "Times New Roman", serif;
  --f-en-sans: "Jost", "Helvetica Neue", sans-serif;
  --f-ja: "Shippori Mincho", "Hiragino Mincho ProN", "Yu Mincho", serif;
  --f-ja-sans: "Zen Kaku Gothic New", "Hiragino Sans", "Yu Gothic", sans-serif;

  /* --- layout --- */
  --wrap: 1180px;
  --gut: clamp(20px, 5vw, 60px);
  --header-h: 84px;

  /* --- motion --- */
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  /* Instagram マーク（CSS mask 用）。色は currentColor で追従させる */
  --i-insta: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='3' width='18' height='18' rx='5'/%3E%3Ccircle cx='12' cy='12' r='4'/%3E%3Ccircle cx='17.2' cy='6.8' r='1.2' fill='%23000' stroke='none'/%3E%3C/svg%3E");
}

/* ============================================================ reset */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--f-ja-sans);
  color: var(--c-ink);
  background: var(--c-paper);
  line-height: 1.85;
  letter-spacing: 0.04em;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
ul, ol { margin: 0; padding: 0; list-style: none; }
button { font-family: inherit; cursor: pointer; border: none; background: none; }

/* ============================================================ utility */
.wrap { max-width: var(--wrap); margin-inline: auto; padding-inline: var(--gut); }
/* スマホ幅だけ効く改行。指摘のあった文の折り返し位置を固定するために使う */
br.sp { display: none; }
@media (max-width: 760px){ br.sp { display: inline; } }
/* 説明文は右端をまっすぐ揃える（2026.09.17 修正依頼 3・5・6・8ページ／09.25 スマホも同様に）。
   両端揃え（justify）。文節改行（keep-all）のままだと次の文節が長いときに字間が大きく開くので、
   説明文は通常の字送り（どの文字でも折り返す＝印刷物と同じ組み）に戻す。各文は「。」で改行済み。
   ※ BudouX が inline style で keep-all を付けるため（common.js で .budoux の span に写す）!important で上書きする */
.onsen-item__desc, .room-info__desc, .modal__desc, .rest-detail p, .discover__detail-lead,
.discover__efficacy dd, .onsen-exp__efficacy dd, .qa-item__a-inner p, .parking-pv__lead,
.sight-block__lead, .onsen-exp__lead, .onsen-intro, .page-intro p, p.page-intro,
.discover__lead, .view__lead, .concept__body p, .page-hero__lead { text-align: justify; text-wrap: pretty; }
.onsen-item__desc .budoux, .room-info__desc .budoux, .modal__desc .budoux, .rest-detail p .budoux,
.discover__detail-lead .budoux, .discover__efficacy dd .budoux, .onsen-exp__efficacy dd .budoux,
.qa-item__a-inner .budoux, .parking-pv__lead .budoux,
.sight-block__lead .budoux, .onsen-exp__lead .budoux, .onsen-intro .budoux,
.page-intro p .budoux, p.page-intro .budoux, .discover__lead .budoux, .view__lead .budoux,
.concept__body p .budoux, .page-hero__lead .budoux,
.qa-item__a-inner p { word-break: normal !important; overflow-wrap: normal !important; line-break: strict; }
/* common.js の fixOrphans が「す。」だけの行を避けるために入れる区切り（現在は無効）。
   区切った行は右端まで伸ばさない（伸ばすと「国内外の クラシック カーや…」のように字間が開く。2026.09.18 却下） */
span.orph { display: block; }/* 画面には出さず、読み上げ・検索には残す */
.visually-hidden { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.en { font-family: var(--f-en); }
.en-sans { font-family: var(--f-en-sans); }
.ja-mincho { font-family: var(--f-ja); }

/* section heading 展開（英字大 + 和字小） */
.sec-head { display: flex; align-items: baseline; gap: 1em; margin-bottom: 2.4em; }
.sec-head__en {
  font-family: var(--f-en);
  font-size: clamp(2rem, 4.4vw, 3.1rem);
  font-weight: 500;
  letter-spacing: 0.06em;
  color: var(--c-forest);
  line-height: 1;
}
.sec-head__ja {
  font-family: var(--f-ja-sans);
  font-size: 0.82rem;
  letter-spacing: 0.34em;
  color: var(--c-ink-soft);
}

/* eyebrow（縦罫ラベル） */
.eyebrow { font-family: var(--f-en-sans); font-size: 0.72rem; letter-spacing: 0.42em; text-transform: uppercase; color: var(--c-gold); }

/* primary button */
.btn-line {
  display: inline-flex; align-items: center; gap: 0.9em;
  font-family: var(--f-en-sans); font-size: 0.78rem; letter-spacing: 0.22em;
  text-transform: uppercase; color: var(--c-forest);
  padding: 1.1em 2.4em; border: 1px solid var(--c-forest);
  transition: 0.5s var(--ease);
}
.btn-line::after { content: ""; width: 26px; height: 1px; background: currentColor; transition: 0.5s var(--ease); }
.btn-line:hover { background: var(--c-forest); color: var(--c-white); }
.btn-line:hover::after { background: var(--c-white); width: 38px; }

/* お知らせ本文中のボタン。本文は投稿HTMLなので、アイコンはCSS側（data URI）で足す。
   ※ .btn-line は英字大文字化されるため、和文が混じるボタンでは text-transform を戻す。 */
.news-cta { margin: 2.2em 0 0; }
.news-cta .btn-line { text-transform: none; letter-spacing: 0.12em; font-family: var(--f-ja); font-size: 0.9rem; }
/* お知らせ本文の画像と中央揃えブロック（開業記念SALE 記事のように、画像＋告知文を中央に組む用） */
.news-figure { margin: 0 auto 2.4em; max-width: 720px; }
.news-figure img { width: 100%; height: auto; display: block; }
.news-center { text-align: center; }
.news-center p { margin-inline: auto; }
.btn-line--insta::before {
  content: ""; width: 1.15em; height: 1.15em; flex: none;
  background: currentColor;
  -webkit-mask: var(--i-insta) center / contain no-repeat;
          mask: var(--i-insta) center / contain no-repeat;
}

.btn-fill {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.8em;
  font-family: var(--f-en-sans); font-size: 0.82rem; letter-spacing: 0.2em; text-transform: uppercase;
  background: var(--c-forest); color: var(--c-white);
  padding: 1.25em 3em; transition: 0.5s var(--ease);
}
.btn-fill:hover { background: var(--c-gold); }

/* ============================================================ loading
   サイトを開いたときに全面を覆うローディング画面。
   読み込みが終わると js/common.js が .is-done を付けて消える。 */
.site-loader {
  /* 言語切替（Accessdove）が z-index 99998〜99999 を使っていて前面に出てしまうため、
     ローディングは最大値にして必ず一番上に来るようにする。 */
  position: fixed; inset: 0; z-index: 2147483647;
  display: flex; align-items: center; justify-content: center;
  background: var(--c-forest);
  opacity: 1; visibility: visible;
  transition: opacity 0.7s var(--ease), visibility 0.7s var(--ease);
  /* JSが動かなかったときの保険。12秒後に強制的に開ける */
  animation: siteLoaderSafety 0s linear 12s forwards;
}
.site-loader.is-done { opacity: 0; visibility: hidden; pointer-events: none; }
@keyframes siteLoaderSafety { to { opacity: 0; visibility: hidden; pointer-events: none; } }

.site-loader__inner { text-align: center; animation: siteLoaderIn 1s var(--ease) both; }
.site-loader__logo { width: min(230px, 46vw); height: auto; margin: 0 auto; }
/* ロゴの下に細い金の線。左右に伸び縮みして「読み込み中」を示す */
.site-loader__bar { display: block; width: min(230px, 46vw); height: 1px; margin: 2.2em auto 0; background: rgba(255,255,255,0.16); overflow: hidden; position: relative; }
.site-loader__bar::before {
  content: ""; position: absolute; inset: 0; background: var(--c-gold);
  transform-origin: left center; animation: siteLoaderBar 1.4s var(--ease) infinite;
}
@keyframes siteLoaderIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes siteLoaderBar {
  0%   { transform: scaleX(0);   transform-origin: left center; }
  50%  { transform: scaleX(1);   transform-origin: left center; }
  50.1%{ transform: scaleX(1);   transform-origin: right center; }
  100% { transform: scaleX(0);   transform-origin: right center; }
}
@media (prefers-reduced-motion: reduce) {
  .site-loader__inner { animation: none; }
  .site-loader__bar::before { animation: none; transform: scaleX(1); }
}

/* ============================================================ information（お知らせの一覧）
   TOPの Information と /news/ の一覧で共用。2026.09.14「一覧のデザインもTOPと同じに」 */
.info__list li { display: grid; grid-template-columns: 130px 1fr; gap: 1.4em; align-items: center; padding: 1.5em 0.4em; border-bottom: 1px solid var(--c-line); transition: 0.4s var(--ease); }
.info__list li:first-child { border-top: 1px solid var(--c-line); }
.info__list li:hover { background: var(--c-ivory); padding-inline: 1.2em; }
.info__list time { font-family: var(--f-en-sans); font-size: 0.86rem; letter-spacing: 0.1em; color: var(--c-gold); }
.info__list a { font-size: 0.92rem; }
.info__more { text-align: right; margin-top: 2.4em; }
@media (max-width: 600px){ .info__list li { grid-template-columns: 1fr; gap: 0.3em; } }
/* 一覧のページ送り（WordPress の the_posts_pagination）。TOPのボタンと同じ細枠に揃える */
.info__more .nav-links { display: flex; justify-content: flex-end; flex-wrap: wrap; gap: 0.5em; }
.info__more .nav-links .page-numbers { display: inline-flex; align-items: center; justify-content: center; min-width: 2.6em; height: 2.6em; padding: 0 0.8em; border: 1px solid var(--c-line); font-family: var(--f-en-sans); font-size: 0.82rem; letter-spacing: 0.1em; color: var(--c-ink-soft); transition: 0.4s var(--ease); }
.info__more .nav-links .page-numbers:hover { border-color: var(--c-forest); color: var(--c-forest); }
.info__more .nav-links .page-numbers.current { background: var(--c-forest); border-color: var(--c-forest); color: #fff; }
.info__more .nav-links .dots { border: 0; }
.info__more .screen-reader-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
/* ============================================================ header */
.site-header {
  position: fixed; inset: 0 0 auto 0; z-index: 100;
  height: var(--header-h);
  display: flex; align-items: center; justify-content: space-between;
  padding-inline: var(--gut);
  background: linear-gradient(to bottom, rgba(10,18,14,0.55), transparent);
  transition: background 0.5s var(--ease), box-shadow 0.5s var(--ease);
}
/* スクロールで色だけ変える。
   以前は高さも 84px→70px に縮めていたが、中央揃えのためロゴとナビが
   7px 上にずれて見えたので、高さは変えない。 */
.site-header.is-solid {
  background: var(--c-forest);
  box-shadow: 0 6px 28px rgba(0,0,0,0.16);
}
.site-header__logo { display: flex; align-items: center; gap: 0.6em; color: var(--c-white); }
.site-header__logo .mark { width: 30px; height: 30px; }
.site-header__logo .mark path { stroke: var(--c-gold); }
.site-header__logo .txt { line-height: 1.05; }
.site-header__logo .txt b { display: block; font-family: var(--f-en); font-weight: 500; font-size: 0.96rem; letter-spacing: 0.34em; }
.site-header__logo .txt small { display: block; font-family: var(--f-en); font-style: italic; font-size: 0.62rem; letter-spacing: 0.2em; opacity: 0.85; padding-left: 0.2em; }

.gnav { display: flex; align-items: center; gap: 2.1em; color: var(--c-white); }
.gnav a { font-family: var(--f-en-sans); font-size: 0.84rem; letter-spacing: 0.12em; position: relative; padding-bottom: 4px; }
.gnav a::after { content:""; position:absolute; left:0; bottom:0; width:0; height:1px; background: var(--c-gold); transition: 0.4s var(--ease); }
.gnav a:hover::after, .gnav a[aria-current="page"]::after { width:100%; }
/* フォント指定が無く body（和文・1rem）を継承していたため、他のメニューと不揃いだった */
/* 言語切替（Accessdove）の置き場所。
   幅は「Language」の文字（.gnav__lang-ph）で確保してあるので、
   ウィジェットが入る前後で Rooms / Restaurant / Access の位置は動かない。
   visibility は継承するため、枠そのものには visible を明示しておく
   （枠ごと隠すと、あとから入れるウィジェットまで巻き添えで消えてしまう）。 */
.gnav__lang { position: relative; display:flex; align-items:center; visibility: visible; opacity:0.9; font-family: var(--f-en-sans); font-size: 0.84rem; letter-spacing: 0.12em; }
.gnav__lang-ph { visibility: hidden; }              /* 幅を確保するためだけの文字 */
/* 仮の「Language」（2026.09.25）。Accessdove のウィジェットが入るまでの間だけ出す。
   位置は幅確保用の文字にぴったり重ねる。本物が入ると js/common.js が hidden を付けて消す。 */
.gnav__lang-tmp {
  position: absolute; left: 0; top: 50%; transform: translateY(-50%);
  white-space: nowrap; color: inherit; cursor: default;
}
/* Accessdove が挿入する言語切替（"Language ▾"）の書体を Rooms / Restaurant / Access に揃える。
   要素自体は Accessdove の JS が作るので、テーマ側からは書体だけ上書きする。
   色・枠線は Accessdove 管理画面の設定が優先される。 */
.language-selector,
.language-selector .language-code,
.language-selector .language-option {
  font-family: var(--f-en-sans) !important;
  font-size: 0.84rem !important;
  font-weight: 400 !important;
  letter-spacing: 0.12em !important;
}
.gnav__insta { display:flex; align-items:center; opacity:0.9; transition: 0.4s var(--ease); }
.gnav__insta:hover { opacity:1; color: var(--c-gold-light); }
.gnav__insta .i-insta { width:18px; height:18px; }

.burger { display: flex; flex-direction: column; gap: 5px; width: 30px; padding: 6px 0; }
.burger span { height: 1.5px; background: var(--c-white); transition: 0.4s var(--ease); }

@media (max-width: 900px) {
  /* リンクとLanguageは隠し、ハンバーガー(.burger)は残す＝スマホでドロワーを開ける */
  .gnav a, .gnav__lang, .gnav__insta { display: none; }
}

/* ============================================================ drawer (mobile menu) */
.drawer {
  position: fixed; inset: 0; z-index: 200;
  background: rgba(10,18,14,0.28);
  opacity: 0; visibility: hidden; transition: 0.3s var(--ease);
}
.drawer.is-open { opacity: 1; visibility: visible; }
.drawer__panel {
  position: absolute; top: 0; right: 0;
  width: min(300px, 88vw);
  background: #fff; color: var(--c-ink);
  padding: 1.5em 1.5em 1.1em;
  box-shadow: 0 14px 44px rgba(0,0,0,0.24);
  transform: translateY(-10px); opacity: 0;
  transition: 0.35s var(--ease);
}
.drawer.is-open .drawer__panel { transform: none; opacity: 1; }
/* right はパネルの左右パディング（1.5em）と同値。メニュー項目の右端と揃う */
.drawer__close { position: absolute; z-index: 2; top: calc((var(--header-h) - 30px) / 2); right: 1.5em; width: 30px; height: 30px; }
.drawer__close::before, .drawer__close::after { content:""; position:absolute; top:50%; left:0; width:100%; height:1.4px; background: var(--c-ink); }
.drawer__close::before { transform: rotate(45deg); }
.drawer__close::after { transform: rotate(-45deg); }
.drawer__logo { margin: 2.6em 0 1.1em; text-align:center; line-height: 0; }
.drawer__logo img { width: 188px; height: auto; }
.drawer nav { display: flex; flex-direction: column; gap: 0; text-align: left; width: auto; }
.drawer nav a {
  display: flex; align-items: baseline; gap: 0.7em;
  font-family: var(--f-en-sans); color: var(--c-ink); font-size: 0.92rem; letter-spacing: 0.1em;
  padding: 0.82em 0; border-bottom: 1px solid var(--c-line);
}
.drawer nav a:last-child { border-bottom: none; }
.drawer nav a small { font-family: var(--f-ja-sans); font-size: 0.63rem; letter-spacing: 0.14em; color: var(--c-ink-soft); margin-left: auto; }

/* ============================================================ modal (popup) */
.modal { position: fixed; inset: 0; z-index: 300; display: flex; align-items: center; justify-content: center; padding: 5vw; background: rgba(12,20,15,0.6); opacity: 0; visibility: hidden; transition: 0.4s var(--ease); }
.modal.is-open { opacity: 1; visibility: visible; }
.modal__box { position: relative; background: #fff; max-width: 860px; width: 100%; max-height: 90vh; overflow-y: auto; transform: translateY(16px); transition: 0.5s var(--ease); }
.modal.is-open .modal__box { transform: none; }
.modal__close { position: absolute; top: 14px; right: 14px; z-index: 2; width: 40px; height: 40px; border-radius: 50%; background: rgba(255,255,255,0.92); box-shadow: 0 2px 12px rgba(0,0,0,0.12); }
.modal__close::before, .modal__close::after { content:""; position:absolute; top:50%; left:50%; width:16px; height:1.5px; background: var(--c-ink); }
.modal__close::before { transform: translate(-50%,-50%) rotate(45deg); }
.modal__close::after { transform: translate(-50%,-50%) rotate(-45deg); }
.modal__img { position: relative; overflow: hidden; }
.modal__img img { width:100%; height: clamp(200px, 34vh, 380px); object-fit: cover; display:block; }
/* 写真スライダー */
.modal__slides { display: flex; transition: transform 0.5s var(--ease); }
.modal__slide { flex: 0 0 100%; }
.modal__arrow {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 2;
  width: 40px; height: 40px; border-radius: 50%;
  background: rgba(255,255,255,0.82); color: var(--c-ink);
  font-size: 1.5rem; line-height: 1; display: flex; align-items: center; justify-content: center;
  box-shadow: 0 2px 10px rgba(0,0,0,0.16); transition: background 0.3s var(--ease);
}
.modal__arrow:hover { background: #fff; }
.modal__arrow--prev { left: 12px; }
.modal__arrow--next { right: 12px; }
.modal__body { padding: clamp(18px, 3vw, 30px) clamp(22px, 4vw, 40px); }
.modal__head { display: flex; align-items: baseline; gap: 1em; flex-wrap: wrap; border-bottom: 1px solid var(--c-line); padding-bottom: 0.9em; margin-bottom: 1.2em; }
.modal__en { font-family: var(--f-en); font-size: clamp(1.4rem, 3vw, 2rem); font-weight: 500; color: var(--c-forest); }
.modal__ja { font-size: 0.82rem; letter-spacing: 0.16em; color: var(--c-ink-soft); }
.modal__view, .modal__time { margin-left: auto; font-family: var(--f-ja); font-size: 0.8rem; color: var(--c-gold); border: 1px solid var(--c-gold); padding: 0.25em 0.9em; white-space: nowrap; }
.modal__desc { font-size: 0.94rem; line-height: 1.95; color: var(--c-ink-soft); }
.modal__spec { margin-top: 1.2em; }
.modal__spec dl { display: grid; grid-template-columns: 6.5em 1fr; gap: 0.55em 1em; font-size: 0.88rem; }
.modal__spec dt { color: var(--c-ink-soft); letter-spacing: 0.08em; border-bottom: 1px dotted var(--c-line); padding-bottom: 0.5em; }
.modal__spec dd { margin: 0; border-bottom: 1px dotted var(--c-line); padding-bottom: 0.5em; }

/* 客室の「温泉」マークと、温泉が無い客室の注記（2026.09.29 修正依頼）。
   マークは深緑の塗りで、由布岳ビュー（金の枠）と並べても見分けがつくようにする。 */
.modal__view--onsen { background: var(--c-forest); border-color: var(--c-forest); color: #fff; }
.modal__badges { margin-left: auto; display: flex; align-items: center; gap: 0.5em; flex-wrap: wrap; }
.modal__badges:empty { display: none; }
.modal__note { font-size: 0.82rem; line-height: 1.8; color: var(--c-gold); margin: 0.8em 0 0; }
.modal__body:has(.modal__spec) .modal__note { grid-column: 1; margin-top: 0.4em; }
/* 一画面表示：「説明」と「施設情報」を横並び（specがある客室モーダルのみ） */
.modal__body:has(.modal__spec) {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  column-gap: clamp(22px, 3vw, 44px);
  row-gap: 1.1em;
  align-items: start;
}
.modal__body:has(.modal__spec) .modal__head { grid-column: 1 / -1; margin-bottom: 0; }
.modal__body:has(.modal__spec) .modal__desc { grid-column: 1; line-height: 1.95; }
.modal__body:has(.modal__spec) .modal__spec { grid-column: 2; margin-top: 0; }
.modal__body:has(.modal__spec) > p:last-child { grid-column: 1 / -1; margin-top: 0.2em !important; }
@media (max-width: 560px) {
  .modal__img img { height: 52vw; }
  .modal__body:has(.modal__spec) { display: block; }
  .modal__body:has(.modal__spec) .modal__spec { margin-top: 1.6em; }
  .modal__body:has(.modal__spec) > p:last-child { margin-top: 1.8em !important; }
}

/* ============================================================ lightbox */
.lightbox { position: fixed; inset: 0; z-index: 320; display: flex; align-items: center; justify-content: center; padding: 6vw; background: rgba(10,16,12,0.9); opacity: 0; visibility: hidden; transition: opacity 0.5s var(--ease), visibility 0.5s var(--ease); }
.lightbox.is-open { opacity: 1; visibility: visible; }
.lightbox__stage { max-width: 92vw; max-height: 82vh; margin: 0; opacity: 0; transform: scale(0.96) translateY(10px); transition: opacity 0.6s var(--ease), transform 0.6s var(--ease); transition-delay: 0.08s; }
.lightbox.is-open .lightbox__stage { opacity: 1; transform: scale(1) translateY(0); }
.lightbox__stage img { max-width: 92vw; max-height: 82vh; object-fit: contain; display: block; transition: opacity 0.35s var(--ease); }
.lightbox__stage.is-swapping img { opacity: 0; }
.lightbox__close { position: absolute; top: 24px; right: 28px; width: 40px; height: 40px; }
.lightbox__close::before, .lightbox__close::after { content:""; position:absolute; top:50%; left:0; width:100%; height:1.5px; background:#fff; }
.lightbox__close::before { transform: rotate(45deg); }
.lightbox__close::after { transform: rotate(-45deg); }
.lightbox__nav { position: absolute; top: 50%; transform: translateY(-50%); width: 54px; height: 54px; border-radius: 50%; color: #fff; font-size: 2rem; line-height: 1; display: grid; place-items: center; background: rgba(255,255,255,0.12); transition: 0.3s var(--ease); }
.lightbox__nav:hover { background: rgba(255,255,255,0.25); }
.lightbox__nav--prev { left: 3vw; }
.lightbox__nav--next { right: 3vw; }
@media (max-width: 600px){ .lightbox__nav { width:44px; height:44px; font-size:1.5rem; } }

/* ============================================================ side booking (固定縦書き) */
.side-book {
  position: fixed; right: 0; top: 50%; transform: translateY(-50%); z-index: 90;
  writing-mode: vertical-rl;
  background: var(--c-gold); color: var(--c-white);
  font-family: var(--f-ja); font-size: 0.92rem; letter-spacing: 0.34em;
  padding: 1.6em 0.85em; box-shadow: -4px 0 20px rgba(0,0,0,0.14);
  transition: 0.4s var(--ease);
}
.side-book:hover { background: var(--c-gold-light); }
.side-book .ico { writing-mode: horizontal-tb; font-size: 0.9rem; margin-bottom: 0.7em; opacity:0.85; }
@media (max-width: 700px) { .side-book { display: none; } }

/* mobile fixed CTA bar */
.m-cta { display: none; }
@media (max-width: 700px) {
  .m-cta {
    display: flex; position: fixed; bottom: 0; inset-inline: 0; z-index: 90;
    background: var(--c-forest);
    padding-bottom: env(safe-area-inset-bottom, 0px);
  }
  .m-cta a { flex: 1; text-align: center; color: var(--c-white); font-family: var(--f-ja); font-size: 0.9rem; padding: 1.05em 0; letter-spacing: 0.12em; }
  .m-cta a + a { border-left: 1px solid rgba(255,255,255,0.16); }
  .m-cta a.is-gold { background: var(--c-gold); }
  /* reCAPTCHA のバッジ（画面右下に固定）が上の固定バーと重なるので、バーの上へ逃がす。
     Google 側のスタイルで bottom:14px が当たっているため !important が必要。
     z-index はバー(90)より下げ、万一重なってもボタンを覆わないようにする。 */
  .grecaptcha-badge {
    bottom: calc(57px + env(safe-area-inset-bottom, 0px) + 12px) !important;
    z-index: 80 !important;
  }
}

/* ============================================================ page hero (下層展開) */
.page-hero {
  position: relative; min-height: 56vh; display: flex; align-items: flex-end;
  padding: 0 var(--gut) clamp(40px, 7vw, 80px);
  color: var(--c-white); overflow: hidden;
}
.page-hero__bg { position:absolute; inset:0; z-index:-2; }
.page-hero__bg img { width:100%; height:100%; object-fit: cover; }
.page-hero::after { content:""; position:absolute; inset:0; z-index:-1; background: linear-gradient(to top, rgba(10,18,14,0.6), rgba(10,18,14,0.15) 50%, rgba(10,18,14,0.35)); }
.page-hero__ttl { font-family: var(--f-en); font-size: clamp(2.6rem, 7vw, 4.6rem); font-weight: 500; letter-spacing: 0.06em; line-height: 1; }
.page-hero__lead { margin-top: 1.1em; max-width: 40em; font-size: 0.94rem; line-height: 2.1; text-shadow: 0 1px 8px rgba(0,0,0,0.3); }
.page-hero__scroll { position:absolute; right: var(--gut); bottom: 0; writing-mode: vertical-rl; font-family: var(--f-en-sans); font-size: 0.66rem; letter-spacing: 0.3em; display:flex; align-items:center; gap: 1.2em; padding-bottom: 60px; }
.page-hero__scroll::after { content:""; width:1px; height:50px; background: rgba(255,255,255,0.7); }
/* スマホではリード文が右端の縦書き「Scroll」の下に潜り込むので、その幅ぶん右を空けて折り返す。
   下層ページ共通（2026.09.10 修正依頼：Rooms / Restaurant / Sightseeing / Access / Contact / Q&A）。
   本文の書体で 2.1 行送りだと 2〜3 行に収まる分量なので、文字数のバランスは BudouX に任せる。 */
@media (max-width: 760px){
  .page-hero > div:not(.page-hero__bg):not(.page-hero__scroll) { padding-right: 3.2em; }
  .page-hero__lead { font-size: 0.9rem; line-height: 2; }
}

/* ============================================================ footer */
.site-footer { background: var(--c-forest); color: var(--c-white); padding: clamp(60px, 8vw, 100px) 0 0; }
.site-footer__top { text-align: center; padding-bottom: clamp(40px, 6vw, 64px); }
.site-footer__logo { color: var(--c-gold); }
.site-footer__logo svg { width: 56px; height: 56px; margin: 0 auto 0.8em; }
.site-footer__logo svg path { stroke: var(--c-gold); }
.site-footer__logo b { display:block; font-family: var(--f-en); font-size: clamp(1.3rem, 3vw, 1.9rem); letter-spacing: 0.32em; font-weight:500; }
.site-footer__logo small { font-family: var(--f-en); font-style: italic; font-size: 0.8rem; letter-spacing: 0.2em; }

.f-info { display: grid; grid-template-columns: 220px 1fr 1fr; gap: clamp(30px, 5vw, 60px); align-items: start; border-top: 1px solid rgba(255,255,255,0.16); padding: clamp(40px, 5vw, 56px) 0; }
.f-info__photo { margin: 0; }  /* figure の既定マージン（1em 40px）を打ち消す */
.f-info__photo img { aspect-ratio: 4/5; object-fit: cover; }
/* margin:0 は必須。既定の下マージンが .f-sns の上マージンと相殺して効かなくなる */
.f-info dl { display: grid; grid-template-columns: auto 1fr; gap: 0.5em 1.4em; font-size: 0.86rem; margin: 0; }
.f-info dt { color: var(--c-gold-light); letter-spacing: 0.1em; }
.f-info dd { margin: 0; }
.f-info__ttl { font-family: var(--f-en-sans); font-size: 0.78rem; letter-spacing: 0.26em; text-transform: uppercase; color: var(--c-gold); margin-bottom: 1.4em; }
/* Instagram ボタンの下端を INFORMATION 側の最終行（Wi-Fi の行）に合わせる（クライアント指示）。
   別々の dl なので自動では揃わず、1行ぶんの逃げで実測1px以内に収めている。 */
.f-sns { margin-top: 1.75em; }
.f-sns a { display:inline-flex; align-items:center; gap:0.5em; border:1px solid rgba(255,255,255,0.3); padding: 0.5em 1em; font-family: var(--f-en-sans); font-size:0.74rem; letter-spacing:0.1em; transition:0.4s var(--ease); }
.f-sns .i-insta { width: 1.15em; height: 1.15em; flex: none; }
.f-sns a:hover { background: var(--c-gold); border-color: var(--c-gold); }
.f-bottom { display:flex; flex-wrap: wrap; justify-content: space-between; gap: 1em; padding: 1.8em 0; border-top: 1px solid rgba(255,255,255,0.16); font-size: 0.72rem; letter-spacing: 0.08em; }
.f-bottom nav { display:flex; flex-wrap:wrap; gap: 1.6em; }
.f-bottom nav a:hover { color: var(--c-gold-light); }
.f-bottom small { opacity: 0.6; letter-spacing: 0.14em; }
/* 画面下の固定CTAバー（.m-cta）がフッター末尾の規約リンク・コピーライトに重なるため、
   その高さぶんの逃げを作る。フッターに持たせるので、バーの背後も緑のまま連続する。
   ※ .site-footer の padding ショートハンド（上記）より後に書くこと。先に書くと打ち消される。 */
@media (max-width: 700px) {
  .site-footer { padding-bottom: calc(57px + env(safe-area-inset-bottom, 0px)); }
}
@media (max-width: 760px) {
  .f-info { grid-template-columns: 1fr; }
  /* 縦位置の建物写真なので、横長に切ると上下が落ちて構図が崩れる。
     比率は保ったまま少し大きくし、上のロゴと同じく中央に置いて左の余りをなくす。 */
  .f-info__photo { max-width: 260px; margin-inline: auto; }
}

/* 予約フォーム：1カラムになるスマホでは、子供の区分も他の項目と同じ全幅に戻す
   （PC用の 232px 上限＋中央寄せのままだと、ここだけ細く浮いて見える） */
@media (max-width: 700px) {
  .zen-search .children-selects { grid-template-columns: 1fr; justify-content: stretch; }
}

/* ============================================================ scroll reveal */
[data-reveal] { opacity: 0; transform: translateY(34px); transition: opacity 1s var(--ease), transform 1s var(--ease); }
[data-reveal].is-in { opacity: 1; transform: none; }
[data-reveal-d="1"] { transition-delay: 0.12s; }
[data-reveal-d="2"] { transition-delay: 0.24s; }
[data-reveal-d="3"] { transition-delay: 0.36s; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
  [data-reveal] { opacity: 1; transform: none; }
}

/* spacing helper */
.section { padding-block: clamp(64px, 9vw, 130px); }
.section--ivory { background: var(--c-ivory); }
.section--forest { background: var(--c-forest); color: var(--c-white); }

/* ---- 予約検索モジュール（reservation.jp） ---- */
/* 下層ページ：フッター上部の帯 */
.foot-reserve { background: var(--c-ivory-deep); padding: clamp(40px, 6vw, 64px) 0; }
.foot-reserve__head { text-align: center; margin-bottom: clamp(20px, 3vw, 32px); }
.foot-reserve__en { display: block; font-family: var(--f-en-sans); font-size: 0.72rem; letter-spacing: 0.42em; text-transform: uppercase; color: var(--c-gold); }
.foot-reserve__ja { display: block; font-family: var(--f-ja); font-size: 1.05rem; letter-spacing: 0.14em; color: var(--c-forest); margin-top: 0.5em; }

/* 共通：検索フォーム（フッター帯・TOP宿泊を予約 で共用）
   注意：reservation.jp の search-module.js が実行時に fieldset（.rooms 客室数 / .adults 大人 /
   .sort 並び順 など）を .field-button の直前へ差し込む。項目数は固定できないので
   id ではなく「#searchBox 内の select / input[type=text]」でまとめてスタイルを当てる。
   高さ 54px に統一し、下端揃え。ラベル無しのボタンも同じ行に揃う。 */
.zen-search #searchBox { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: center; gap: clamp(10px, 1.6vw, 16px);
  width: min(100%, 960px); margin-inline: auto; }
/* fieldset は display:block のままにする。display:flex にすると legend の特殊レンダリング
   （匿名コンテンツボックス）と干渉し、Chrome で中身の高さが二重に加算されて
   下に大きな余白ができる（中身が複数行になる .children で顕著）。 */
.zen-search fieldset { position: relative; border: 0; margin: 0; padding: 0; display: block; text-align: left; }
.zen-search legend { display: block; float: none; width: auto; font-family: var(--f-en-sans); font-size: 0.72rem; line-height: 1.4; letter-spacing: 0.16em; color: var(--c-ink-soft); text-transform: uppercase; padding: 0; margin: 0 0 0.5em; }
.zen-search #searchBox input[type="text"],
.zen-search #searchBox select,
.zen-search .sub-bgcolor { height: 54px; box-sizing: border-box; }
.zen-search #searchBox input[type="text"],
.zen-search #searchBox select { width: 100%; font-family: var(--f-ja); font-size: 0.98rem; color: var(--c-forest); background-color: #fff; border: 1px solid var(--c-line); border-radius: 0; padding: 0 1em; margin: 0; cursor: pointer; -webkit-appearance: none; appearance: none; }
.zen-search #checkin_date { min-width: 200px; }
/* select は共通の下向き矢印（部屋数・人数・並び順など後から追加される分も含む） */
.zen-search #searchBox select { min-width: 118px; padding-right: 2.4em;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='7' viewBox='0 0 10 7'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%231f3a32' stroke-width='1.4' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 1em center; }
.zen-search .field-button { margin: 0; }
.zen-search .sub-bgcolor { display: inline-flex; align-items: center; justify-content: center; font-family: var(--f-en-sans); font-size: 0.86rem; letter-spacing: 0.14em; color: #fff; background: var(--c-gold); border: 0; border-radius: 0; padding: 0 2.6em; cursor: pointer; transition: background 0.4s var(--ease); }
.zen-search .sub-bgcolor:hover { background: var(--c-forest); }
/* 「日付未定」チェックボックス枠：流れから外して高さ崩れを防止 */
.zen-search #no_checkin { position: absolute; top: calc(100% + 6px); left: 0; margin: 0; white-space: nowrap; font-size: 0.78rem; line-height: 1.4; color: var(--c-ink-soft); }
.zen-search #no_checkin:empty { display: none; }
.zen-search #no_checkin label { display: inline-flex; align-items: center; gap: 0.4em; cursor: pointer; }
/* 子供・こだわり条件は区分が最大5つ並ぶため、独立した行にまとめる
   （flex アイテムは .children-selects ではなく fieldset.children なので fieldset 側に指定） */
/* width:100% は必須。flex アイテムの高さが確定する前に auto-fit グリッドの列数が
   「1列＝5行」で見積もられ、fieldset だけが実際の倍近い高さになって下に空白が出る。 */
.zen-search fieldset.children,
.zen-search fieldset.attributes { flex: 1 0 100%; width: 100%; box-sizing: border-box; padding-top: clamp(14px, 2vw, 20px); border-top: 1px solid var(--c-line); }
/* 「子供」の見出しと、その上の区切り線はクライアント指示で非表示
   （区分名だけで通じるため。上段との間隔は padding-top で保つ） */
.zen-search fieldset.children > legend { display: none; }
.zen-search fieldset.children { border-top: 0; }
.zen-search--dark fieldset.children,
.zen-search--dark fieldset.attributes { border-top-color: rgba(255, 255, 255, 0.28); }
/* 各区分は上段のフィールド（ラベル上・枠付き入力下）と同じ作法で揃える。
   区分名が2行になっても select の下端が揃うよう align-items:end。 */
/* 1fr で伸ばすと、受け入れなしの区分を隠したあと残り2つが極端に間延びする。
   上限を設けて幅を固定し、フォームの他の行（チェックイン〜大人／並び順）と同じく中央に揃える。 */
.zen-search .children-selects { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 232px)); justify-content: center; align-items: end; gap: clamp(10px, 1.6vw, 16px); }
.zen-search .children-selects > div { min-width: 0; }
.zen-search .children-selects label { display: flex; flex-direction: column; gap: 0.5em; font-family: var(--f-en-sans); font-size: 0.72rem; line-height: 1.4; letter-spacing: 0.06em; color: var(--c-ink-soft); cursor: pointer; }
.zen-search #searchBox .children-selects select { width: 100%; min-width: 0; }
.zen-search .children-selects span[name="no-acceptance"] { display: flex; align-items: center; height: 54px; font-family: var(--f-ja); font-size: 0.92rem; color: var(--c-ink-soft); background: rgba(0, 0, 0, 0.03); border: 1px dashed var(--c-line); padding: 0 1em; }
.zen-search--dark .children-selects span[name="no-acceptance"] { background: rgba(255, 255, 255, 0.08); border-color: rgba(255, 255, 255, 0.3); }
/* 「受け入れなし」の区分は非表示（クライアント指示）。現状は幼児の3区分が該当。
   区分名を直接指定せず :has() で拾うので、reservation.jp 側で受け入れを開始して
   no-acceptance が消えれば、CSSを触らずに自動で再表示される。
   :has() 非対応の旧ブラウザでは従来どおり「受け入れなし」が見えるだけで実害はない。 */
.zen-search .children-selects > div:has(span[name="no-acceptance"]) { display: none; }
/* こだわり条件（客室属性・プラン属性）のチェックボックス群 */
.zen-search fieldset.attributes dl { margin: 0; }
.zen-search fieldset.attributes dt { font-size: 0.82rem; letter-spacing: 0.08em; color: var(--c-ink-soft); margin-bottom: 0.5em; }
.zen-search fieldset.attributes dd { margin: 0 0 0.9em; }
.zen-search fieldset.attributes ul { list-style: none; display: flex; flex-wrap: wrap; gap: 0.5em 1.2em; margin: 0; padding: 0; }
.zen-search fieldset.attributes label { display: inline-flex; align-items: center; gap: 0.4em; font-size: 0.9rem; line-height: 1.4; cursor: pointer; }

/* TOP「宿泊を予約」セクション内の暗色バリアント */
.booking__reserve { margin-top: clamp(1.6em, 3vw, 2.4em); }
.zen-search--dark legend { color: var(--c-gold-light); }
.zen-search--dark #no_checkin,
.zen-search--dark .children-selects label,
.zen-search--dark fieldset.attributes label { color: rgba(255, 255, 255, 0.86); }

/* 820px 以下で縦積みへ。640〜820px の中間幅は横並びのまま折り返しが乱れ、
   全幅指定の「子供」「こだわり条件」に挟まれた「並び順」が1行を独占して余白が出るため。 */
@media (max-width: 820px){
  .zen-search #searchBox { flex-direction: column; align-items: stretch; gap: 14px; }
  .zen-search #searchBox input[type="text"], .zen-search #searchBox select, .zen-search .sub-bgcolor { min-width: 0; width: 100%; }
  .zen-search #searchBox select { background-position: right 1.1em center; }
  .zen-search #no_checkin { position: static; margin-top: 6px; white-space: normal; }
  .zen-search .field-button { margin-top: 4px; }
  /* 縦並びでは flex-basis:100% が「高さ」になり fieldset が伸びて余白になるので解除 */
  .zen-search fieldset.children,
  .zen-search fieldset.attributes { flex: 0 0 auto; padding-top: 14px; }
}

/* ---- 公式ロゴ画像（ヘッダー／ドロワー／フッター） ---- */
.site-header__logo img { height: 24px; width: auto; display: block; }
.drawer__logo img { width: 168px; height: auto; display: block; margin: 0 auto; }
.site-footer__logo img { width: clamp(190px, 24vw, 250px); height: auto; display: block; margin: 0 auto 0.4em; }
@media (max-width: 600px){ .site-header__logo img { height: 19px; } }

/* ============================================================
   ACCESS 共通（route フロー図 / parking）：TOP・アクセスページ共用
   ============================================================ */
/* route flow：左に見出し／右にフロー図 */
.access-pv .route { display: grid; grid-template-columns: 180px 1fr; gap: clamp(16px, 3vw, 40px); align-items: center; margin-top: clamp(1.2em, 2.6vw, 1.9em); }
/* access-pv__top と最初のルート（By Train）の間だけ広めに */
.access-pv__top + .route { margin-top: clamp(2.6em, 5vw, 3.8em); }
.route__head { align-self: center; }
.route__ttl { font-family: var(--f-en-sans); font-size: 1.3rem; letter-spacing: 0.1em; color: var(--c-forest); margin: 0; }
.route__sub { font-family: var(--f-ja-sans); font-size: 0.78rem; letter-spacing: 0.12em; color: var(--c-ink-soft); margin: 0.5em 0 0; }

.access-pv .route-flow { display: grid; grid-template-columns: 1fr 1.4fr 1fr 0.8fr 1fr; gap: 0; align-items: stretch; }
.access-pv .route-flow--air {
  grid-template-rows: auto auto;
  grid-template-areas:
    "o1 t1 hub w1 g"
    "o2 t2 hub w2 g";
  row-gap: clamp(14px, 2.5vw, 26px);
}
/* 配置はクラスで持つ（スマホでの並べ替えにも使うため、インライン style にしない） */
.ra-o1 { grid-area: o1; } .ra-t1 { grid-area: t1; } .ra-hub { grid-area: hub; }
.ra-w1 { grid-area: w1; } .ra-g { grid-area: g; }
.ra-o2 { grid-area: o2; } .ra-t2 { grid-area: t2; } .ra-w2 { grid-area: w2; }
.access-pv .route-node { background: var(--c-forest-soft); color: #fff; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 0.9em 1em; min-height: clamp(88px, 11vw, 118px); font-size: 0.86rem; line-height: 1.5; }
.access-pv .route-node--hub { align-self: stretch; }
/* コネクタ（矢印区間）：ラベル＝線の上／所要時間＝線の下。線が両側の箱をつなぐ */
.access-pv .route-node--mid { background: transparent; min-height: 0; color: var(--c-ink-soft); font-size: 0.78rem; padding: 0.4em 0; }
.access-pv .route-conn__label { line-height: 1.45; }
.access-pv .route-conn__line { align-self: stretch; height: 1px; background: var(--c-forest); margin: 0.5em 0; }
.access-pv .route-conn__time { color: var(--c-forest); font-family: var(--f-en-sans); font-size: 0.86rem; line-height: 1.4; }
.access-pv .route-node--goal { background: var(--c-forest); padding: 0.5em 0.3em; }
.route-logo-img { width: auto; max-width: 82%; max-height: clamp(46px, 7vw, 66px); object-fit: contain; }
.route-logo { display: flex; flex-direction: column; align-items: center; text-align: center; color: #fff; line-height: 1.35; }
.route-logo b { font-family: var(--f-en); font-weight: 400; font-size: 0.5rem; letter-spacing: 0.06em; white-space: nowrap; }
.route-logo small { font-family: var(--f-en); font-style: italic; font-size: 0.46rem; letter-spacing: 0.14em; color: var(--c-gold-light); margin-top: 0.2em; }

/* parking：左にMAP図／右に案内 */
.access-pv .parking { margin-top: clamp(2.4em, 5vw, 3.4em); }
.access-pv__ph { font-family: var(--f-en-sans); font-size: 1.3rem; letter-spacing: 0.1em; color: var(--c-forest); margin-bottom: 0.8em; }
.parking-pv { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(20px, 4vw, 48px); align-items: start; }
/* 背景は白・余白は最小限にして図をできるだけ大きく見せる（クライアント指示） */
.parking-pv__map { aspect-ratio: 4/3; background: #fff; display: flex; align-items: center; justify-content: center; font-family: var(--f-en-sans); letter-spacing: 0.18em; color: var(--c-ink-soft); font-size: 1rem; padding: 6px; }
.parking-pv__map img { width: 100%; height: 100%; object-fit: contain; }
.parking-pv__bar { background: var(--c-forest); color: #fff; font-family: var(--f-ja); font-size: 0.96rem; letter-spacing: 0.06em; padding: 0.7em 1.1em; margin: 0; }
.parking-pv__lead { margin: 1.1em 0 0; font-size: 0.9rem; line-height: 1.9; color: var(--c-ink); }
.parking-pv__lead span { display: inline-block; color: var(--c-forest); }
.parking-pv__notes { list-style: none; margin: 1.2em 0 0; padding: 0; }
.parking-pv__notes li { position: relative; padding-left: 1.4em; font-size: 0.82rem; line-height: 1.8; color: var(--c-ink-soft); }
.parking-pv__notes li::before { content: "※"; position: absolute; left: 0; }
.parking-pv__lots { display: grid; grid-template-columns: auto 1fr; gap: 0.6em 1.2em; margin: 1.4em 0 1.8em; }
.parking-pv__lots dt { font-family: var(--f-ja); color: var(--c-forest); font-size: 0.92rem; white-space: nowrap; }
.parking-pv__lots dd { margin: 0; font-size: 0.86rem; color: var(--c-ink-soft); }

@media (max-width: 960px){
  .access-pv .route { grid-template-columns: 1fr; gap: 0.9em; }
  .access-pv .route-flow { grid-template-columns: 92px minmax(120px, 1fr) 104px 52px 104px; }
}
@media (max-width: 680px){
  .access-pv .route-flow, .access-pv .route-flow--air { display: flex; flex-direction: column; grid-template-areas: none; }
  .access-pv .route-node--goal { min-height: 60px; }
  /* By Air は DOM 順のまま縦に積むと「大分空港→…→ゴール→福岡空港→…」となり、
     福岡発の経路が行き先を失う。両空港をバスセンターに合流させる順に並べ替える。
     徒歩区間は2つとも同内容なので、片方（w2）は隠す。 */
  .access-pv .route-flow--air .ra-o1  { order: 1; }
  .access-pv .route-flow--air .ra-t1  { order: 2; }
  .access-pv .route-flow--air .ra-o2  { order: 3; }
  .access-pv .route-flow--air .ra-t2  { order: 4; }
  .access-pv .route-flow--air .ra-hub { order: 5; }
  .access-pv .route-flow--air .ra-w1  { order: 6; }
  .access-pv .route-flow--air .ra-g   { order: 7; }
  /* .access-pv .route-node が display:flex を持つため、詳細度を上げないと隠せない */
  .access-pv .route-flow--air .ra-w2  { display: none; }

  /* 縦積みの区間表示は「手段 → 罫線 → 所要時間」を縦に並べると読みにくい
     （2026.09.10 修正依頼）。中央に下向きの矢印を置き、左に手段・右に所要時間を並べる。 */
  .access-pv .route-node--mid {
    display: grid; grid-template-columns: 1fr 20px 1fr; align-items: center;
    column-gap: 0.9em; padding: 0.55em 0; min-height: 0;
  }
  .access-pv .route-node--mid .route-conn__label { text-align: right; justify-self: end; line-height: 1.5; }
  .access-pv .route-node--mid .route-conn__line {
    position: relative; width: 1px; height: 46px; margin: 0; align-self: center; justify-self: center;
  }
  .access-pv .route-node--mid .route-conn__line::after {
    content: ""; position: absolute; left: 50%; bottom: 0; width: 7px; height: 7px;
    border-right: 1px solid var(--c-forest); border-bottom: 1px solid var(--c-forest);
    transform: translate(-50%, 0) rotate(45deg);
  }
  .access-pv .route-node--mid .route-conn__time { text-align: left; justify-self: start; }
}
@media (max-width: 760px){ .parking-pv { grid-template-columns: 1fr; } .parking-pv__map { aspect-ratio: 16/10; } }