/* ============================================================
   page.css — 下層ページ展開（各ページ固有）
   ============================================================ */

/* ===== ROOMS ===== */
.rooms-detail { padding-block: clamp(56px, 8vw, 110px); }

/* 写真の横に縦タブ（Restaurant と同形） */
.rooms-tab { display: grid; grid-template-columns: 1fr 260px; gap: clamp(20px, 4vw, 50px); }
.rooms-tab__stage { position: relative; aspect-ratio: 16/10; overflow: hidden; }
.rooms-tab__panel { position: absolute; inset: 0; opacity: 0; pointer-events: none; transition: opacity 0.8s var(--ease); }
.rooms-tab__panel.is-active { opacity: 1; pointer-events: auto; }
.rooms-tab__panel .room-slider { height: 100%; aspect-ratio: auto; }
.rooms-tab__menu { display: flex; flex-direction: column; justify-content: center; gap: 0.2em; }
.rooms-tab__menu button { text-align: left; font-family: var(--f-en-sans); font-size: 1rem; letter-spacing: 0.06em; color: var(--c-ink-soft); padding: 0.85em 1.1em; border-bottom: 1px solid var(--c-line); transition: 0.4s var(--ease); }
.rooms-tab__menu button small { display: block; font-family: var(--f-ja-sans); font-size: 0.7rem; letter-spacing: 0.16em; opacity: 0.6; margin-top: 0.2em; }
.rooms-tab__menu button:hover { color: var(--c-forest); }
.rooms-tab__menu button.is-active { background: var(--c-forest); color: #fff; }
.rooms-tab__menu button.is-active small { opacity: 0.85; }
.room-detail { margin-top: 2.6em; animation: fadeUp 0.6s var(--ease); }
.room-detail .room-info { margin-top: 0; }
@keyframes fadeUp { from { opacity:0; transform: translateY(16px);} to { opacity:1; transform:none; } }
@media (max-width: 760px){ .rooms-tab { grid-template-columns: 1fr; } .rooms-tab__menu { flex-direction: row; flex-wrap: wrap; } .rooms-tab__menu button { flex: 1 1 40%; min-width: 0; padding-inline: 0.9em; } }
/* 360px 幅では「スタンダードトリプ｜ル」と和名が途中で折れるので、字間を詰めて1行に収める */
@media (max-width: 400px){ .rooms-tab__menu button small { letter-spacing: 0.04em; white-space: nowrap; } }

.room-panel__hero { position: relative; }
.room-slider { position: relative; overflow: hidden; aspect-ratio: 16/8.5; }
.room-slider__track { display: flex; height: 100%; transition: transform 0.7s var(--ease); }
.room-slider__track > * { min-width: 100%; height: 100%; }
.room-slider__track img { width: 100%; height: 100%; object-fit: cover; }
.room-slider__btn { position: absolute; top: 50%; transform: translateY(-50%); width: 48px; height: 48px; border-radius: 50%; background: rgba(255,255,255,0.85); color: var(--c-forest); display: grid; place-items: center; z-index: 2; transition: 0.4s var(--ease); }
.room-slider__btn:hover { background: var(--c-gold); color: #fff; }
.room-slider__btn--prev { left: 18px; }
.room-slider__btn--next { right: 18px; }

.room-info { display: grid; grid-template-columns: 1.3fr 1fr; gap: clamp(24px, 4vw, 56px); margin-top: 2.6em; }
.room-info__head { display: flex; align-items: baseline; gap: 1em; flex-wrap: wrap; border-bottom: 1px solid var(--c-line); padding-bottom: 1em; margin-bottom: 1.4em; }
.room-info__en { font-family: var(--f-en); font-size: clamp(1.6rem, 3.4vw, 2.4rem); font-weight: 500; color: var(--c-forest); }
.room-info__ja { font-size: 0.86rem; letter-spacing: 0.18em; color: var(--c-ink-soft); }
.room-info__view { margin-left: auto; font-family: var(--f-ja); font-size: 0.82rem; color: var(--c-gold); border: 1px solid var(--c-gold); padding: 0.3em 1em; }
.room-info__desc { font-size: 0.94rem; line-height: 2.2; color: var(--c-ink-soft); }
/* 客室の「温泉」マークと、温泉が無い客室の注記（2026.09.29 修正依頼） */
.room-info__view--onsen { background: var(--c-forest); border-color: var(--c-forest); color: #fff; }
.room-info__badges { margin-left: auto; display: flex; align-items: center; gap: 0.6em; flex-wrap: wrap; }
.room-info__badges:empty { display: none; }
.room-info__badges .room-info__view { margin-left: 0; font-size: 0.72rem; padding: 0.25em 0.7em; letter-spacing: 0.04em; }
/* タイトルと並べて1行に収めるため、見出しの字間は詰める */
.room-info__head { gap: 0.8em; }
.room-info__note { font-size: 0.84rem; line-height: 1.9; color: var(--c-gold); margin: 1em 0 0; }
.room-spec { align-self: start; }
.room-spec dl { display: grid; grid-template-columns: 7em 1fr; gap: 0.7em 1em; font-size: 0.9rem; }
.room-spec dt { color: var(--c-ink-soft); letter-spacing: 0.08em; border-bottom: 1px dotted var(--c-line); padding-bottom: 0.6em; }
.room-spec dd { margin: 0; border-bottom: 1px dotted var(--c-line); padding-bottom: 0.6em; }
@media (max-width: 800px){ .room-info { grid-template-columns: 1fr; } }
/* スマホは字間を少し詰め、「ゆとりある空間と客室温泉を備えたデラックスタイプ。」（25字）が
   iPhone Pro Max 級（430px）で1行に収まるようにする（2026.09.14 指摘）。390px では文節で折れる */
@media (max-width: 760px){ .room-info__desc { letter-spacing: 0.02em; } }

/* room list (全タイプ一覧) */
.room-list { background: var(--c-ivory); }
.room-list__grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(20px, 3vw, 40px) clamp(30px, 5vw, 70px); }
.room-list__item { display: grid; grid-template-columns: 130px 1fr; gap: 1.4em; padding-bottom: 1.6em; border-bottom: 1px solid var(--c-line); }
.room-list__item img { aspect-ratio: 1/1; object-fit: cover; }
.room-list__name { font-family: var(--f-en); font-size: 1.2rem; color: var(--c-forest); }
.room-list__name small { display:block; font-family: var(--f-ja-sans); font-size: 0.72rem; letter-spacing: 0.16em; color: var(--c-ink-soft); margin-top: 0.2em; }
.room-list__spec { font-size: 0.8rem; line-height: 1.9; color: var(--c-ink-soft); margin-top: 0.6em; }
@media (max-width: 700px){ .room-list__grid { grid-template-columns: 1fr; } }

/* ===== RESTAURANT ===== */
.rest-intro { text-align: center; max-width: 46em; margin-inline: auto; }
.rest-intro p { font-family: var(--f-ja); font-size: clamp(1rem, 1.8vw, 1.18rem); line-height: 2.4; color: var(--c-ink); }
.rest-tab { display: grid; grid-template-columns: 1fr 240px; gap: clamp(20px, 4vw, 50px); margin-top: 3.4em; }
.rest-tab__stage { position: relative; aspect-ratio: 16/10; overflow: hidden; }
.rest-tab__img { position: absolute; inset: 0; opacity: 0; transition: opacity 0.8s var(--ease); }
.rest-tab__img.is-active { opacity: 1; }
.rest-tab__img img { width:100%; height:100%; object-fit: cover; }
.rest-tab__menu { display: flex; flex-direction: column; justify-content: center; gap: 0.3em; }
.rest-tab__menu button { text-align: left; font-family: var(--f-en-sans); font-size: 1.05rem; letter-spacing: 0.08em; color: var(--c-ink-soft); padding: 1em 1.2em; border-bottom: 1px solid var(--c-line); transition: 0.4s var(--ease); }
.rest-tab__menu button.is-active { background: var(--c-forest); color: #fff; }
.rest-detail { margin-top: 2.4em; max-width: 50em; }
.rest-detail__ttl { display: flex; align-items: baseline; gap: 1em; border-bottom: 1px solid var(--c-forest); padding-bottom: 0.8em; margin-bottom: 1.2em; }
.rest-detail__ttl b { font-family: var(--f-en-sans); font-size: 1.05rem; letter-spacing: 0.12em; color: var(--c-forest); }
.rest-detail__ttl span { font-size: 0.82rem; color: var(--c-ink-soft); letter-spacing: 0.16em; }
.rest-detail p { font-size: 0.93rem; line-height: 2.1; color: var(--c-ink-soft); }
.rest-detail time { display: inline-block; margin-top: 1em; font-size: 0.93rem; line-height: 2.1; color: var(--c-ink-soft); }
/* 横並びにすると項目が文字数なりの幅になり2段目がガタつくので、客室タブと同じく2列に揃える */
@media (max-width: 760px){
  /* ヒーロー直下の空きを詰め、タブを写真の上に出す（2026.09.10 修正依頼「ツメ」「入れ替え」） */
  .p-restaurant .section { padding-top: clamp(28px, 6vw, 44px); }
  .rest-tab { grid-template-columns: 1fr; margin-top: 0; gap: 18px; }
  .rest-tab__menu { order: -1; flex-direction: row; flex-wrap: wrap; gap: 0; }
  .rest-tab__menu button { flex: 1 1 40%; }
  .rest-intro { text-align: left; } .rest-intro br { display: none; }
}

/* ===== SIGHTSEEING ===== */
.p-sightseeing .page-hero__lead { max-width: none; }
/* スマホの観光リード文は修正依頼の指示どおり「1文＝1行」のまま、文の途中は文節（BudouX）で折る。
   （一度 <br> を外して段落で流したが、依頼の赤字は文ごとの改行を前提に付いていたので戻した 2026.09.14） */
@media (max-width: 760px){ .access-addr .pc-sp { display: none; } }
.sight-cat { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-bottom: 3.4em; }
.sight-cat button { position: relative; aspect-ratio: 3/4; overflow: hidden; display: flex; align-items: flex-end; width: 100%; padding: 0; color: #fff; cursor: pointer; transition: opacity 0.4s var(--ease); }
.sight-cat img { position:absolute; inset:0; width:100%; height:100%; object-fit: cover; transition: 0.7s var(--ease); }
.sight-cat button::before { content:""; position:absolute; inset:0; background: linear-gradient(to top, rgba(10,18,14,0.72), transparent 60%); z-index:1; }
.sight-cat button span { position: relative; z-index:2; padding: 1.3em; text-align: left; font-family: var(--f-en-sans); letter-spacing: 0.05em; }
.sight-cat button small { display:block; font-family: var(--f-ja-sans); font-size: 0.72rem; letter-spacing: 0.18em; opacity: 0.85; margin-top: 0.2em; }
.sight-cat button:hover img { transform: scale(1.07); }
.sight-cat button:not(.is-active) { opacity: 0.5; }
.sight-cat button.is-active::after { content:""; position:absolute; inset:0; border: 2px solid var(--c-gold); z-index:3; }
@media (max-width:760px){ .sight-cat { grid-template-columns: 1fr 1fr; } }

/* タブパネル切替 */
.sight-block[data-panel] { display: none; }
.sight-block[data-panel].is-active { display: block; }
.sight-soon { padding: 3.5em 0; text-align: center; font-family: var(--f-ja); font-size: 1rem; letter-spacing: 0.06em; color: var(--c-ink-soft); }

.sight-block { padding-top: 3em; }
.sight-block__lead { font-family: var(--f-ja); font-size: 1rem; line-height: 2.3; max-width: 50em; margin-bottom: 2.6em; }
.spot { display: grid; grid-template-columns: 1.1fr 1fr; gap: clamp(20px, 4vw, 50px); align-items: center; padding: clamp(28px, 4vw, 48px) 0; border-top: 1px solid var(--c-line); }
.spot:last-child { border-bottom: 1px solid var(--c-line); }
.spot img { aspect-ratio: 4/3; object-fit: cover; }
.spot__ttl { font-family: var(--f-ja); font-size: clamp(1.1rem, 2.2vw, 1.35rem); font-weight: 600; color: var(--c-forest); margin-bottom: 0.8em; line-height: 1.6; }
.spot__desc { font-size: 0.92rem; line-height: 2.1; color: var(--c-ink-soft); margin-bottom: 1.4em; }
.spot__data { font-size: 0.84rem; line-height: 2; color: var(--c-ink-soft); border-left: 2px solid var(--c-gold); padding-left: 1.2em; }
.spot:nth-child(even) img { order: 2; }
@media (max-width: 760px){ .spot, .spot:nth-child(even) img { grid-template-columns: 1fr; order: 0; } .spot img { order: -1; } }

/* ===== ONSEN EXPERIENCE（温泉の愉しみ方） ===== */
.onsen-exp { max-width: 800px; margin-inline: auto; }
.onsen-exp__body { text-align: center; }
.onsen-exp__ttl { font-size: clamp(1.3rem, 3vw, 1.95rem); font-weight: 500; color: var(--c-forest); line-height: 1.6; margin: 0 0 1.2em; }
.onsen-exp__lead { font-family: var(--f-ja); font-size: 1rem; line-height: 2.4; color: var(--c-ink-soft); margin: 0 0 clamp(2.4em, 5vw, 3.6em); }
.onsen-exp__efficacy { border: 1px solid var(--c-line); background: rgba(255,255,255,0.5); padding: clamp(1.5em, 3vw, 2.4em); }
.onsen-exp__efficacy dl { display: grid; grid-template-columns: 6.5em 1fr; gap: 0.9em 1.3em; margin: 0; font-size: 0.92rem; }
.onsen-exp__efficacy dt { font-family: var(--f-en-sans); color: var(--c-gold); letter-spacing: 0.08em; }
.onsen-exp__efficacy dd { margin: 0; color: var(--c-ink-soft); line-height: 2; }
@media (max-width: 600px){ .onsen-exp__efficacy dl { grid-template-columns: 1fr; gap: 0.25em 0; } .onsen-exp__efficacy dt { margin-top: 0.7em; } }

/* ===== HOT SPRINGS（立ち寄り湯） ===== */
.onsen-intro { font-family: var(--f-ja); font-size: 1rem; line-height: 2.3; max-width: 60em; margin: 0 0 clamp(2.4em, 5vw, 3.4em); text-align: left; color: var(--c-ink-soft); }
.onsen-list { display: grid; }
.onsen-item { display: grid; grid-template-columns: 0.92fr 1.08fr; gap: clamp(20px, 4vw, 48px); align-items: center; padding: clamp(28px, 4vw, 48px) 0; border-top: 1px solid var(--c-line); }
.onsen-item:last-child { border-bottom: 1px solid var(--c-line); }
.onsen-item__img { aspect-ratio: 4/3; overflow: hidden; }
.onsen-item__img img { width: 100%; height: 100%; object-fit: cover; }
.onsen-item__ttl { font-family: var(--f-ja); font-size: clamp(1.15rem, 2.4vw, 1.5rem); font-weight: 600; color: var(--c-forest); margin: 0 0 0.8em; line-height: 1.5; }
.onsen-item__ttl span { font-size: 0.66em; font-weight: 500; color: var(--c-ink-soft); letter-spacing: 0.04em; }
.onsen-item__desc { font-size: 0.92rem; line-height: 2; color: var(--c-ink-soft); margin: 0 0 1.4em; }
.onsen-item__spec { display: grid; grid-template-columns: 6.5em 1fr; gap: 0.55em 1.1em; font-size: 0.85rem; margin: 0; }
.onsen-item__spec dt { color: var(--c-gold); letter-spacing: 0.06em; border-bottom: 1px dotted var(--c-line); padding-bottom: 0.6em; }
.onsen-item__spec dd { margin: 0; color: var(--c-ink); line-height: 1.7; border-bottom: 1px dotted var(--c-line); padding-bottom: 0.6em; }
.onsen-item__access { display: block; font-size: 0.92em; color: var(--c-ink-soft); margin-top: 0.15em; }
.onsen-item:nth-child(even) .onsen-item__img { order: 2; }
@media (max-width: 760px){ .onsen-item { grid-template-columns: 1fr; } .onsen-item:nth-child(even) .onsen-item__img { order: -1; } .onsen-item__img { order: -1; } }
/* 写真が未支給の施設（狭霧台・宇奈岐日女神社）は淡い地色で埋め、中央に「写真は準備中です」と出す
   （2026.09.14 要望）。写真が入ると <img> が入って :empty から外れるので、文字は自動で消える。 */
.onsen-item__img:empty { background: var(--c-ivory-deep); display: flex; align-items: center; justify-content: center; }
.onsen-item__img:empty::before {
  content: "写真は準備中です";
  font-family: var(--f-ja); font-size: 0.86rem; letter-spacing: 0.2em; color: var(--c-ink-soft);
  padding: 0.7em 1.6em 0.7em 1.8em; border: 1px solid var(--c-line);
}
/* グルメ（住所などが無い型）は本文を中央揃えにして、写真と文章の高さ差を目立たせない */
.onsen-item--simple { align-items: center; }
.onsen-item--simple .onsen-item__desc { margin-bottom: 0; }

/* ===== ACCESS（構成案11ページ準拠。route/parking の共通部は common.css） ===== */
.access-map { aspect-ratio: 21/9; background: var(--c-ivory-deep); position: relative; overflow: hidden; }
/* 21:9 のままだとスマホ幅で高さ 170px 程度しかなく地図が読めないので、縦を稼ぐ */
@media (max-width: 760px){ .access-map { aspect-ratio: 4/3; } }

/* ---- 下層ヒーローの切り抜き位置（2026.09.14「Accessのメイン写真の下の部分が見えない。他ページも同様」） ----
   PCのヒーローは横長（1400x900 で約 2.8:1）なので 3:2 の写真は上下あわせて半分ほどしか入らない。
   既定の中央合わせだと被写体のある下側（テラス・料理・浴槽など）が切れるため、下寄せを既定にする。
   スマホは縦長で写真の全高が入るので、この値は効かない（左右が切れるだけ）。 */
.page-hero__bg img { object-position: 50% 80%; }
/* Access：下端合わせだとロゴ壁がヘッダーメニューに重なるので、ロゴがメニューの下に来て
   テラス席も入る位置まで戻す（2026.09.14 Q&A と同じ調整） */
.p-access .page-hero__bg img { object-position: 50% 82%; }
/* Information：夜のテラス席まで */
.p-news .page-hero__bg img { object-position: 50% 92%; }
/* Restaurant：ビュッフェの料理まで／Onsen：客室露天の浴槽まで */
.p-restaurant .page-hero__bg img { object-position: 50% 88%; }
.p-onsen .page-hero__bg img { object-position: 50% 90%; }
/* Sightseeing：由布岳の山頂を切らない（上寄せ） */
.p-sightseeing .page-hero__bg img { object-position: 50% 35%; }
/* Hot Springs：縦位置の写真。シャワー・窓のある中央のまま */
.p-hotspring .page-hero__bg img { object-position: 50% 50%; }
/* Contact：ペン先が中央にあるので少しだけ下げる */
.p-contact .page-hero__bg img { object-position: 50% 65%; }
/* Photo Gallery のヒーロー：既定の中央合わせだと横長のビューポートでルームナンバー「504」が
   下端で切れる。1366x768 のような横長・低めの画面でも数字が収まる位置まで切り取りを下げる。 */
.p-gallery .page-hero__bg img { object-position: 50% 78%; }
/* Q&A のヒーロー：ロゴ壁（写真の高さ約43%）がヘッダーの下に来て、カウンターまで入る位置。
   下寄せにすると床ばかりになり、ロゴがヘッダーに隠れるので中央付近で止める（2026.09.14） */
.p-qa .page-hero__bg img { object-position: 50% 36%; } /* 09.17 添付の切り抜き見本に合わせる（天井の空調〜カウンター前面まで。ロゴ壁が中央） */
.access-map iframe { width:100%; height:100%; border:0; filter: grayscale(1); }
.access-addr { font-family: var(--f-ja); font-size: 0.98rem; line-height: 1.95; color: var(--c-forest); margin: 1.1em 0 0.6em; }

/* Parking：右カラムの ①②③ ボックス（緑帯＋本文） */
.plots { display: flex; flex-direction: column; gap: 1.2em; }
.plot { border: 1px solid var(--c-line); }
.plot__body { padding: 1em 1.2em; min-height: 56px; }
.plot__addr { font-size: 0.86rem; color: var(--c-ink-soft); margin: 0; }
.parking-pv__notes--full { margin-top: 1.8em; }

/* ===== GALLERY ===== */
.gallery-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.gallery-grid figure { margin: 0; aspect-ratio: 1/1; overflow: hidden; cursor: pointer; }
.gallery-grid img { width:100%; height:100%; object-fit: cover; transition: 0.6s var(--ease); }
.gallery-grid figure:hover img { transform: scale(1.08); }
.gallery-grid figure.tall { grid-row: span 2; aspect-ratio: 1/2; }
@media (max-width: 760px){ .gallery-grid { grid-template-columns: 1fr 1fr; } }

/* ===== CONTACT ===== */
.contact-wrap { display: grid; grid-template-columns: 1fr; max-width: 720px; margin-inline: auto; }
.form-row { margin-bottom: 1.8em; }
.form-row label { display: block; font-size: 0.88rem; letter-spacing: 0.06em; margin-bottom: 0.6em; color: var(--c-ink); }
.form-row label .req { color: var(--c-gold); font-size: 0.74rem; margin-left: 0.6em; letter-spacing: 0.1em; }
.form-row input, .form-row textarea { width: 100%; font-family: inherit; font-size: 0.94rem; padding: 0.95em 1.1em; border: 1px solid var(--c-line); background: var(--c-paper); transition: 0.3s var(--ease); }
.form-row input:focus, .form-row textarea:focus { outline: none; border-color: var(--c-gold); }
.form-row .hint { font-size: 0.76rem; color: var(--c-ink-soft); margin-top: 0.4em; }
.form-notes { background: var(--c-ivory); padding: 1.6em 1.8em; font-size: 0.82rem; line-height: 1.9; color: var(--c-ink-soft); margin: 1.4em 0 2em; }
.form-notes li { padding-left: 1.2em; position: relative; }
.form-notes li::before { content:"・"; position: absolute; left: 0; }
.form-submit { text-align: center; }

/* ---- Contact Form 7 をテーマの見た目に合わせる ----
   CF7 は input を <span class="wpcf7-form-control-wrap"> で包むため、
   そのままだと行間の分だけラベルとの間が空く。ブロック化して余白を消す。 */
.contact-wrap .wpcf7-form-control-wrap { display: block; line-height: 0; }
.contact-wrap .wpcf7-form p { margin: 0; }
.contact-wrap .wpcf7-spinner { display: block; margin: 0.8em auto 0; }
/* 入力エラーの注意書き */
.contact-wrap .wpcf7-not-valid-tip { display: block; margin-top: 0.5em; font-size: 0.78rem; line-height: 1.6; color: #b3413d; }
.contact-wrap .wpcf7-not-valid { border-color: #b3413d; }
/* 送信結果のメッセージ */
.contact-wrap .wpcf7-response-output {
  margin: 1.6em 0 0; padding: 1em 1.2em; border: 1px solid var(--c-line);
  background: var(--c-ivory); font-size: 0.86rem; line-height: 1.8; text-align: center;
}
.contact-wrap .wpcf7 form.sent .wpcf7-response-output { border-color: var(--c-forest); color: var(--c-forest); }
.contact-wrap .wpcf7 form.invalid .wpcf7-response-output,
.contact-wrap .wpcf7 form.failed .wpcf7-response-output { border-color: #b3413d; color: #b3413d; }
/* 送信ボタン：既存の .btn-fill をそのまま使う */
.contact-wrap .form-submit input[type="submit"],
.contact-wrap .form-submit button { border: 0; cursor: pointer; }

/* ---- 確認画面 ---- */
.contact-confirm[hidden] { display: none; }
.contact-confirm__ttl { font-family: var(--f-ja); font-size: 1.1rem; letter-spacing: 0.06em; color: var(--c-forest); margin: 0 0 0.4em; }
.contact-confirm__lead { font-size: 0.86rem; line-height: 1.9; color: var(--c-ink-soft); margin: 0 0 1.6em; }
.contact-confirm__list {
  display: grid; grid-template-columns: 10em 1fr; gap: 0;
  border-top: 1px solid var(--c-line); margin: 0 0 2em;
}
.contact-confirm__list dt,
.contact-confirm__list dd {
  border-bottom: 1px solid var(--c-line); padding: 1.1em 0.2em; margin: 0;
  font-size: 0.9rem; line-height: 1.9;
}
.contact-confirm__list dt { color: var(--c-ink-soft); letter-spacing: 0.06em; }
.contact-confirm__list dd { color: var(--c-ink); white-space: pre-wrap; word-break: break-word; }
.contact-confirm__list dd.is-empty { color: var(--c-ink-soft); }
.contact-confirm__btns { display: flex; justify-content: center; gap: clamp(12px, 2vw, 20px); flex-wrap: wrap; }
.contact-confirm__btns .btn-fill[disabled] { opacity: 0.6; cursor: default; }
@media (max-width: 600px) {
  .contact-confirm__list { grid-template-columns: 1fr; }
  .contact-confirm__list dt { border-bottom: 0; padding-bottom: 0; font-size: 0.8rem; }
  .contact-confirm__list dd { padding-top: 0.3em; }
  .contact-confirm__btns { flex-direction: column-reverse; }
  .contact-confirm__btns .btn-line,
  .contact-confirm__btns .btn-fill { justify-content: center; }
}
.contact-qa-link { text-align: center; margin-top: 2.4em; font-size: 0.9rem; }
/* スマホで2行以上になる中央揃えの文章は左揃えに。「解決しない場合は お問い合わせ より／ご連絡ください。」の
   ように文節で折ると中央揃えだと段落の頭がずれて読みにくい（2026.09.14 指摘）。1行で収まる短文は中央のまま */
@media (max-width: 760px){
  .contact-qa-link, .rest-intro, .onsen-exp__body, .page-intro, .contact-wrap .wpcf7-response-output { text-align: left; }
}
.contact-qa-link a { color: var(--c-gold); border-bottom: 1px solid var(--c-gold); padding-bottom: 2px; }

/* ===== Q&A ===== */
.qa-cat { margin-bottom: 3em; }
.qa-cat__ttl { font-family: var(--f-ja); font-size: 1.1rem; color: var(--c-forest); border-left: 3px solid var(--c-gold); padding-left: 0.8em; margin-bottom: 1.2em; }
.qa-item { border-bottom: 1px solid var(--c-line); }
.qa-item__q { display: flex; align-items: flex-start; gap: 0.9em; width: 100%; text-align: left; padding: 1.3em 0.4em; font-size: 0.96rem; color: var(--c-ink); }
.qa-item__q::before { content: "Q"; font-family: var(--f-en); color: var(--c-gold); font-size: 1.1rem; line-height: 1.4; }
.qa-item__q .mark { margin-left: auto; width: 14px; height: 14px; position: relative; flex-shrink: 0; margin-top: 0.4em; }
.qa-item__q .mark::before, .qa-item__q .mark::after { content:""; position:absolute; top:50%; left:0; width:100%; height:1.5px; background: var(--c-forest); transition: 0.4s var(--ease); }
.qa-item__q .mark::after { transform: rotate(90deg); }
.qa-item.is-open .qa-item__q .mark::after { transform: rotate(0); }
.qa-item__a { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 0.4s var(--ease); }
.qa-item.is-open .qa-item__a { grid-template-rows: 1fr; }
.qa-item__a-inner { overflow: hidden; }
/* 答えの中のリンク（親権者同意書PDFなど）。2026.09.17 */
.qa-item__a-inner a { color: var(--c-gold); border-bottom: 1px solid var(--c-gold); padding-bottom: 1px; }
/* 「A」は flex ではなく字下げで置く。flex にすると本文中のリンクや改行が別々の要素として並び、
   「親権者同意書が必要になります。」＋リンクの行が横に並んでしまう（2026.09.25） */
.qa-item__a p { position: relative; padding: 0 0.4em 1.5em 1.9em; font-size: 0.92rem; line-height: 2; color: var(--c-ink-soft); }
.qa-item__a p::before { content: "A"; position: absolute; left: 0.4em; top: 0; font-family: var(--f-en); color: var(--c-forest); font-size: 1.1rem; line-height: 2; }
/* 答えが複数段落のときは2つ目以降に「A」を出さない（上の余白だけ詰める） */
.qa-item__a p + p { padding-bottom: 1.5em; }
.qa-item__a p + p::before { content: none; }

/* page intro lead under hero */
.page-intro { text-align: center; padding-block: clamp(48px, 7vw, 90px); }
/* ---- お知らせ本文（index.php の個別記事）----
   本文は投稿HTMLなので、見出し・リンク・箇条書きの体裁をここで整える（2026.09.30 重要なお知らせ） */
.p-news .page-intro h2 { font-family: var(--f-ja); font-size: clamp(1.1rem, 2.2vw, 1.35rem); font-weight: 600; color: var(--c-forest); line-height: 1.7; margin: 2.4em 0 1em; }
.p-news .page-intro h2:first-child { margin-top: 0; }
.p-news .page-intro p { margin: 0 0 1.6em; }
.p-news .page-intro a { color: var(--c-gold); border-bottom: 1px solid var(--c-gold); padding-bottom: 1px; }
.p-news .page-intro ul { margin: 0 0 1.6em; padding-left: 1.2em; list-style: disc; }
.p-news .page-intro li { margin-bottom: 0.4em; }
.p-news .page-intro hr { border: 0; border-top: 1px solid var(--c-line); margin: 2.6em 0; }
/* 本文を中央に組むお知らせ（入湯税など）。両端揃えの指定より後に置いて上書きする */
.p-news .page-intro p.news-center { text-align: center; }
.page-intro p { font-family: var(--f-ja); font-size: clamp(0.96rem, 1.8vw, 1.12rem); line-height: 2.4; max-width: 44em; margin-inline: auto; color: var(--c-ink); }