@charset "utf-8";
/* block: webfonts-2026-09-05 XD照合で決めた書体の、ヒラギノが無い環境向けの代替（Google Fonts）。
   Zen Old Mincho = SP見出しの明朝（1文字ごとの字形一致率でヒラギノ明朝W6を上回った候補。
   詳細は sp-heading-mincho-2026-09-05）。
   Jost（Futura系・特集ラベル用）は 198 で当該ラベルをヒラギノ角ゴへ戻したため読み込みをやめた。*/
@import url("https://fonts.googleapis.com/css2?family=Zen+Old+Mincho:wght@600&display=swap");
/* /block: webfonts-2026-09-05 */
/* =====================================================================
 * 小田原館トップ page-top.php 用スタイル（Phase1: 動的土台）
 * ブランド色: 焦茶 #583d26 / 背景 #f3f1ec / 価格の赤 #bd272d / 装飾ゴールド #bfa980
 * Phase2 で Figma(odawara_web_PC/SP_TOP) の焼き込みSVGオーバーレイへ差し替える際は、
 * 各セクションの中身(カードグリッド)を odw_inline_svg バンド＋% オーバーレイに置換する。
 * ===================================================================== */

.odw-top { width: 100%; overflow-x: hidden; background: #f3f1ec; }
/* 完成図の書体は Hiragino Sans（W3/W6）。テーマ既定のメイリオ優先だと字幅・折返しがずれるため上書き */
/* block: common-band-font-2026-09-05 共通帯（フッター直上）はTOP以外のページでこの指定から漏れており、
   テーマ既定（iOSでは system-ui）で出ていた。カードの料金など数字の書体がTOPと別物になるので .odw-common-band を足す。
   お食事ページ単体で置くお知らせカード（.odw-dcard）も同じ理由で日付の書体が別物だったため合わせて足す。 */
.odw-top, .odw-top-nav, .odw-band--white, .odw-common-band, .odw-dcard { font-family: "Hiragino Sans", "ヒラギノ角ゴシック", "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN W3", "Noto Sans JP", Meiryo, sans-serif; }

/* ── セクション共通 ─────────────────────────────── */
.odw-top-sec { max-width: 1200px; margin: 0 auto; padding: 40px 16px; }
.odw-top-h2 { text-align: center; margin: 0 0 24px; font-size: 24px; font-weight: 600; letter-spacing: 0.12em; color: #583d26; }
.odw-top-h2 > span { position: relative; display: inline-block; padding-bottom: 10px; }
.odw-top-h2 > span::after { content: ""; position: absolute; left: 50%; bottom: 0; width: 48px; height: 2px; margin-left: -24px; background: #bfa980; }

/* ── ① メインビジュアル（Figma焼き込みヒーロー＋透明ホットスポット） ──
   画像は 1200x720（PC）。デザインは1200px中央寄せ構成なので max-width:1200 で完結させ
   ラスターのにじみを防ぐ。ホットスポットは画像に対する % 座標で絶対配置。 */
.odw-top-hero { position: relative; max-width: 1200px; margin: 0 auto; line-height: 0; }
.odw-top-hero__img { display: block; width: 100%; height: auto; }
.odw-top-hero__hot { position: absolute; inset: 0; }
.odw-top-hero__hot .odw-hot { position: absolute; display: block; }
/* デバッグ時のみ: .odw-top-hero__hot .odw-hot { outline: 1px solid rgba(255,0,0,.5); } */
/* PC: パーツSVGカバーを全幅100%（フルブリード） */
.odw-top-hero__cover { width: 100vw; position: relative; left: 50%; margin-left: -50vw; font-size: 0; line-height: 0; }
.odw-top-hero__cover > svg { width: 100%; height: auto; display: block; }
/* block: hero-logo-2026-07-28 ヒーロー中央の縦ロゴ（AUN 3kedw4 #1）。XD実測: 幅82/1200・上端(259.5-80)/635 */
/* block: hero-logo-shadow-2026-08-28 ヒーロー写真に重なる「小田原お堀端 万葉の湯」のロゴが
   平坦で背景に埋もれていた（AUN #1-1 = 020「ドロップシャドウをつけていただきたい」）。
   AUN添付の完成イメージでは白い字画のすぐ隣が明度8〜23まで落ちており、濃いめの影が付いている。
   透過PNGなので box-shadow ではなく filter: drop-shadow を使う（字形に沿って影が出る）。
   ロゴの表示幅は最大110pxなので、添付（幅274pxで確認）の見え方を実寸へ換算した値にする。 */
.odw-top-hero__logo { position: absolute; left: 50%; top: 28.3%; transform: translateX(-50%); width: 6.83vw; min-width: 62px; max-width: 110px; height: auto; z-index: 2; pointer-events: none;
    filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.55)); }
/* /block: hero-logo-shadow-2026-08-28 */
@media (max-width: 767px) { .odw-top-hero__logo { display: none; } } /* SPは写真に焼込済み */
/* フローティングボタン（指示: 左=チケット left:50px/bottom:100px、右=質問・問合せ right:0/bottom:100px。スクロール固定） */
.odw-float { position: fixed; z-index: 980; display: flex; flex-direction: column; }
.odw-float--tickets { left: 50px; bottom: 100px; gap: 10px; }
/* block: pc-float-contact-gap0-2026-09-15 PC追尾ボタン（よくある質問／お問い合わせ）の間の
   4pxの隙間を無くす（AUN 282）。button_pc_0003/0004 はどちらも 100x120 で
   viewBox いっぱいに背景矩形（M0,0H100V120H0Z）を持ち内部余白が無いため、
   見えている隙間＝この gap そのもの。SP の同種ピルは上のコメントどおり「間隔0」が仕様で、
   PC だけ 4px 残っていた。SP は .odw-spfloat が別指定なので影響しない
   （.odw-float は max-width:767px で display:none）。 */
.odw-float--contact { right: 0; bottom: 100px; gap: 0; }
/* block: sp-float-banner-2026-07-27 SP用の追尾バナー（AUN xbbeqy #9「追尾バナーがTOP画像内に設置されている」）
   寸法・並びはFigma SP_TOP実測: チケット71×79（間隔4px）→16px→ピル108×36×2（間隔0）。いずれも右端に揃う。
   デザインでは最下段がヒーロー下端の30px上に来るので、固定表示でも同じ余白感になるよう下基準で置く。 */
.odw-spfloat { position: fixed; right: 0; bottom: calc(30px + env(safe-area-inset-bottom, 0px)); z-index: 980; display: none; flex-direction: column; align-items: flex-end; }
.odw-spfloat__ticket { display: block; }
.odw-spfloat__ticket img { display: block; width: 71px; height: auto; }
.odw-spfloat__ticket + .odw-spfloat__ticket { margin-top: 4px; }
.odw-spfloat__pill { display: block; }
.odw-spfloat__pill svg { display: block; width: 108px; height: auto; }
.odw-spfloat__ticket + .odw-spfloat__pill { margin-top: 16px; }
@media (max-width: 767px) { .odw-spfloat { display: flex; } }
/* /block: sp-float-banner-2026-07-27 */
/* block: talkappi-overlap-2026-07-28（AUN 3kedw4 #2・vbb25m #3/#4/#8/#9）Talkappiの自動ポップアップ
   （クイックメニュー/ご用件を伺います）が、TOPの固定ボタンや新着一覧の「食事」タブに被って
   クリックを横取りしていた（食事タブが押せない＝「食事のニュースが表示されない」の正体）。
   自動ポップアップは全ページで抑止し、チャット起動アイコン(talkappi-chat-icon)は残す。 */
#talkappi-chat-greeting,
.talkappi-chat-menu { display: none !important; }
/* /block: talkappi-overlap-2026-07-28 */
.odw-float a { display: block; transition: opacity .2s; }
.odw-float a:hover { opacity: .75; }
.odw-float--tickets svg { width: 95px; height: auto; display: block; }
.odw-float--contact svg { width: 100px; height: auto; display: block; }
@media (max-width: 767px) { .odw-float { display: none; } }
/* block: talkappi-chat-offset-2026-09-04 AIコンシェルジュ（Talkappi のチャットアイコン #talkappi-chat-icon・80×80・right:10 bottom:320）が
   右下フロート「よくある質問」（.odw-float--contact・bottom:100・高さ244＝上端 y=viewport−344）に 24px 食い込んでいた
   （AUN m54rn7 #2 = 195「AIコンシェルジュがよくある質問に被らない位置に」）。フロート側は設計値のまま、
   アイコンを 40px 上げて bottom:360（アイコン下端 y=viewport−360 → フロート上端との空き 16px）。
   最小化バー（.talkappi-chat-minimized）も同じ量だけ上げる。SPはフロート自体が非表示なので対象外。 */
@media (min-width: 768px) {
    /* Talkappi側は id＋class の !important で位置を決めているため、詳細度を上げて上書きする */
    html body #talkappi-chat-icon.talkappi-chat, html body .talkappibot #talkappi-chat-icon,
    html body .talkappi-chat-minimized { bottom: 360px !important; }
}
/* /block: talkappi-chat-offset-2026-09-04 */

/* ── ② 重要なお知らせ帯（ACF: 表示ON＋本文あり時のみ描画） ── */
.odw-top-notice-wrap { max-width: 1200px; margin: 0 auto; padding: 36px 16px 0; }
.odw-top-notice { max-width: 800px; margin: 0 auto; border: 1.5px solid #d0454a; border-radius: 6px; background: #fdf5f6; padding: 22px 28px; text-align: center; }
.odw-top-notice__ttl { display: flex; align-items: center; justify-content: center; gap: 12px; margin: 0 0 12px; color: #c1272d; font-size: 19px; font-weight: 700; letter-spacing: 0.06em; }
.odw-top-notice__ico { flex: none; }
.odw-top-notice__body { margin: 0; color: #3a4a5a; font-size: 15px; line-height: 1.9; }

/* ── ③ キャンペーンバナー 2×2（デザイン実測: バナー408x123・列間24・行間33・全幅840） ── */
.odw-top-cmp-wrap { max-width: 1200px; margin: 0 auto; padding: 44px 16px 0; }
.odw-top-cmp { display: grid; grid-template-columns: 1fr 1fr; gap: 33px 24px; max-width: 840px; margin: 0 auto; }
.odw-top-cmp__item { display: block; border-radius: 6px; overflow: hidden; box-shadow: 0 1px 6px rgba(0,0,0,.12); transition: transform .2s, box-shadow .2s; }
.odw-top-cmp__item:hover { transform: translateY(-2px); box-shadow: 0 5px 16px rgba(0,0,0,.18); }
.odw-top-cmp__item img { display: block; width: 100%; height: auto; }

/* ── 共通見出し（｜ タイトル ｜ ＋ 英字サブ）
   デザイン実測(odawara_web_PC_TOP.png): JA=36px/字間0.26em/バー2x32(テキストから42px)、
   JA下→EN上=約20px、EN下→コンテンツ=約26px ── */
/* block: head-mincho-2026-07-28 セクション見出しの和文は明朝（XD/Figma準拠）。
   PCは焼込SVGが明朝なのに、SP・共通帯のテキスト見出しだけゴシックで出ていた
   （AUN 3kedw4 #19/#20/#21/#31/#36/#37/#40/#45・rweb88 #4「フォントがXD内と変わっている」）。 */
.odw-top-head__ja { font-family: "Hiragino Mincho ProN", "Hiragino Mincho Pro", "Yu Mincho", YuMincho, "Noto Serif JP", "MS PMincho", serif; }
/* /block: head-mincho-2026-07-28 */
.odw-top-head { text-align: center; margin: 0 0 26px; }
.odw-top-head__ja { display: flex; align-items: center; justify-content: center; gap: 42px; margin: 0 0 12px; font-size: 36px; font-weight: 600; letter-spacing: 0.26em; text-indent: 0.26em; color: #3a3128; }
.odw-top-head__bar { display: inline-block; width: 2px; height: 32px; background: #b7c2cd; }
/* block: head-en-font-2026-09-05 見出しの英字（PLAN / COUPON / EVENT・NEWS ほか）に書体の明示指定が無く、
   body 継承の system-ui（iOSでは San Francisco）で出ていた。入稿のどの書体とも別物なので、
   198 の確定指示（ヒラギノ角ゴシック）に合わせる。サイズ・字送り・色は据え置き。
   共通帯を出す全ページに効く（判定は odw_show_common_offer_band()）。 */
.odw-top-head__en { margin: 0; font-family: "Hiragino Sans", "Hiragino Kaku Gothic ProN", sans-serif; font-size: 14px; letter-spacing: 0.32em; text-indent: 0.32em; color: #4f7fa8; font-weight: 600; }
/* /block: head-en-font-2026-09-05 */

/* ── ④ 注目のコンテンツ スライダー
   デザイン実測: カード240x133(≈9:5)・間隔20・トラック全幅1020、
   画像下→説明文24・説明文下→ドット30、前段バナーとの間70・後段(白帯)まで84 ── */
.odw-top-feat-wrap { max-width: 1200px; margin: 0 auto; padding: 70px 16px 84px; }
.odw-top-feat { position: relative; max-width: 1020px; margin: 0 auto; }
.odw-top-feat__track { display: flex; gap: 20px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; -webkit-overflow-scrolling: touch; scrollbar-width: none; padding: 4px 2px 6px; }
.odw-top-feat__track::-webkit-scrollbar { display: none; }
.odw-top-feat__card { scroll-snap-align: start; flex: 0 0 calc((100% - 60px) / 4); display: flex; flex-direction: column; text-decoration: none; color: #4a4038; }
.odw-top-feat__thumb { display: block; width: 100%; aspect-ratio: 240 / 133; border-radius: 6px; overflow: hidden; box-shadow: 0 1px 6px rgba(0,0,0,.12); background: #e9e3d9; }
.odw-top-feat__thumb > img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .3s; }
.odw-top-feat__card:hover .odw-top-feat__thumb > img { transform: scale(1.06); } /* 仕様書: hoverで画像を拡大 */
.odw-top-feat__cap { margin-top: 24px; font-size: 14px; letter-spacing: 0.05em; line-height: 1.75; color: #3a3a3a; }
/* 前へ/次へ矢印（サムネイル帯の縦中央あたりに配置。下のキャプション/ドット分を bottom で除外） */
.odw-top-feat__nav { position: absolute; top: 4px; bottom: 92px; margin-block: auto; width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; border: 1px solid #e2dccf; border-radius: 50%; background: #fff; box-shadow: 0 2px 8px rgba(0,0,0,.12); cursor: pointer; z-index: 2; transition: background .15s; }
.odw-top-feat__nav:hover { background: #f6f2ea; }
.odw-top-feat__nav--prev { left: -8px; }
.odw-top-feat__nav--next { right: -8px; }
.odw-top-feat__dots { display: flex; justify-content: center; gap: 10px; margin-top: 30px; }
.odw-top-feat__dots button { width: 10px; height: 10px; padding: 0; border: 0; border-radius: 50%; background: #cfc7bb; cursor: pointer; transition: background .15s; }
.odw-top-feat__dots button[aria-current="true"] { background: #7a6a55; }
/* オーバーフローが無いときは操作UIを隠す */
.odw-top-feat.is-static .odw-top-feat__nav { display: none; }
/* block: dots-threshold-2026-09-04 1ビューに収まる枚数（PC: 注目4枚・スペシャル3枚）以下ではドットも出さない
   （AUN wb67rb 1-1/1-5 = 116/119）。判定は js/top.js（cards.length <= perView）で is-static を付ける。
   従来は矢印だけ消してドットは残していた。 */
.odw-top-feat.is-static .odw-top-feat__dots { display: none; }
/* /block: dots-threshold-2026-09-04 */

/* ── 全幅バンド背景（cream/white 帯切替） ── */
.odw-band--white { background: #fff; }

/* ── ⑥b 本日の空き状況（SPのみ）
   Figma実測(SP_TOP 32:24289): 箱 x=14..360(幅347)・y高425・枠2px #718b98・角丸・地色 #f3f1ec、
   更新時刻帯は幅289(箱内左右29px)・高25・#e6d1bc、行カードは白・高59・間5 ── */
.odw-vac-wrap { padding: 22px 0 26px; background: #fff; }
.odw-vac { width: 347px; margin: 0 auto; border: 2px solid #718b98; border-radius: 10px; background: #f3f1ec; padding: 20px 0 22px; text-align: center; }
.odw-vac__ttl { margin: 0 0 12px; font-size: 19px; font-weight: 600; letter-spacing: 0.16em; text-indent: 0.16em; color: #2b2b2b; }
/* 素材のアウトライン（odw_vac_head_sp.svg・字面141.15×16.64）を置く場合。
   箱＝字面になるので下のアキはマージンがそのまま効く（入稿は見出し字面下端→日付字面上端19px）。 */
.odw-vac__ttl--svg { font-size: 0; line-height: 0; margin: 0 0 15px; text-indent: 0; }
.odw-vac__ttl--svg svg { display: inline-block; width: 141px; height: auto; }
.odw-vac__date { margin: 0 0 10px; font-size: 17px; letter-spacing: 0.06em; color: #2b2b2b; }
.odw-vac__upd { width: 289px; height: 25px; margin: 0 auto 12px; display: flex; align-items: center; justify-content: center; background: #e6d1bc; font-size: 14px; font-weight: 600; letter-spacing: 0.06em; color: #2b2b2b; }
.odw-vac__rows { width: 289px; margin: 0 auto; }
.odw-vac__row { display: flex; align-items: center; gap: 10px; height: 59px; margin-bottom: 5px; padding: 0 10px 0 0; background: #fff; border: 1px solid #ddd7cc; text-align: left; }
.odw-vac__thumb { flex: none; width: 56px; height: 45px; margin: 0 0 0 6px; overflow: hidden; line-height: 0; }
.odw-vac__thumb > img { width: 100%; height: 100%; object-fit: cover; display: block; }
.odw-vac__name { flex: 0 1 auto; min-width: 0; white-space: nowrap; font-size: 15px; font-weight: 600; letter-spacing: 0.04em; color: #2b2b2b; }
.odw-vac__name > i { margin-left: 6px; white-space: nowrap; font-style: normal; font-size: 11px; font-weight: 400; color: #6b6153; }
/* 状態列は右端に固定（AUN 3kedw4 #24「表示場所を揃えて」。名前+時間の幅で左右にずれていた） */
.odw-vac__st { flex: none; width: 66px; margin-left: auto; text-align: center; line-height: 1.1; }
.odw-vac__st > b { display: block; font-size: 21px; font-weight: 400; color: #2b2b2b; }
.odw-vac__st > i { display: block; font-style: normal; font-size: 10px; font-weight: 600; color: #2b2b2b; }
.odw-vac__open { margin: 14px 0 10px; font-size: 15px; letter-spacing: 0.1em; color: #2b2b2b; }
.odw-vac__tel { display: inline-flex; align-items: center; justify-content: center; gap: 10px; width: 289px; height: 42px; border: 1px solid #c7c1b4; border-radius: 24px; background: #fff; color: #2b2b2b; font-size: 22px; letter-spacing: 0.04em; text-decoration: none; }
.odw-vac__telico { flex: none; width: 26px; height: 26px; border-radius: 50%; background: #d79b5e; display: flex; align-items: center; justify-content: center; }

/* ── 共通帯（フッター直上・全サブページ共通。AUN 8qqrpb 再設計：旧・焼込SVGを廃しTOPと同一コンポーネントで描画） ──
   TOPのプラン/クーポンは地色ベージュ・新着は白バンド。共通帯でもその見え方をそのまま再現する
   （白背景ページでもTOPと同じデザインに合わせる要件のため地色は固定）。 */
.odw-common-band { position: relative; }
.odw-common-band .odw-band--offer { background: #f3f1ec; }

/* ── ⑤ 今月のイベント（EVENT・NEWS）デザイン実測: 白帯上端→見出し80・バナー幅672 ── */
.odw-top-event { position: relative; max-width: 1200px; margin: 0 auto; padding: 0 16px 0; }
.odw-top-event .odw-top-head { position: relative; z-index: 1; }
.odw-top-event__banner { position: relative; z-index: 1; max-width: 672px; margin: 0 auto; }
.odw-top-event__banner > a { display: block; border-radius: 6px; overflow: hidden; box-shadow: 0 1px 8px rgba(0,0,0,.10); transition: transform .2s, box-shadow .2s; }
.odw-top-event__banner > a:hover { transform: translateY(-2px); box-shadow: 0 5px 16px rgba(0,0,0,.16); }
.odw-top-event__banner img { display: block; width: 100%; height: auto; }
.odw-top-event__deco { position: absolute; top: 26px; right: 0; width: 245px; height: auto; z-index: 0; pointer-events: none; }

/* ── ⑥ 新着情報・お知らせ（NEWS）デザイン実測: バナー下→見出し78・ピル下→白帯終端94 ── */
.odw-top-news { position: relative; max-width: 1200px; margin: 0 auto; padding: 78px 16px 94px; }
.odw-top-news .odw-top-grid { max-width: 1020px; margin: 0 auto; }
.odw-top-news .odw-top-head { position: relative; z-index: 1; }
.odw-top-news .odw-top-grid,
.odw-top-news .odw-top-more { position: relative; z-index: 1; }
.odw-top-news__deco { position: absolute; top: 44px; left: 0; width: 230px; height: auto; z-index: 0; pointer-events: none; }

/* ── 見出し帯（PC: デザイン原本パーツSVG 0001/0002/0003/0013。挿絵込み）
   帯は横100%（フルブリード）で表示し、直下のコンテンツを -100px 重ねて帯下部の余白に食い込ませる ── */
.odw-headband { width: 100vw; position: relative; left: 50%; margin-left: -50vw; max-width: none; font-size: 0; line-height: 0; }
.odw-headband > svg,
.odw-headband > img { width: 100%; height: auto; display: block; }
/* 重なり量はvw単位: 帯(100vw)と同じ比率で伸縮させ、狭い画面でも見出しが隠れない
   （-10.4vw ≒ 1440px幅で-150px / -8vw ≒ 同-115px） */
.odw-headband + * { margin-top: -10.4vw; position: relative; z-index: 1; }
/* block: evnews-head-size-reverted-2026-09-08 一つ前の「帯PNGを max-width:1370px で頭打ちにする」指定は
   2026-09-08 19:20 の再修正指示（帯全体を縮めない・帆船ごと中央へ動かさない）により差し戻した。
   文字サイズは下の evnews-head-vector-2026-09-08（見出しをベクターで原寸表示）で揃える。 */
/* 見出し画像帯（プラン/クーポン/スペシャル: 0015/0016切り出しの明朝見出し。背景テクスチャ込み） */
/* 見出し画像は実寸で中央寄せ（AUN 3ke5pj #1/#6）。
   従来は100vwへ引き伸ばしていたため、1200pxより広い画面では常に拡大されてぼやけていた。 */
.odw-headimg { width: 100%; max-width: 1200px; margin: 0 auto 8px; text-align: center; font-size: 0; line-height: 0; }
.odw-headimg img { width: auto; max-width: 100%; height: auto; display: inline-block; }
/* margin:0 auto 系の後勝ち/高詳細度ルールに負けないよう明示（新着グリッド・ダイニング） */
.odw-top-news .odw-headband + .odw-top-grid { margin-top: -8vw; }
.odw-top-dining-sec .odw-headband + .odw-top-dining { margin-top: calc(-10.4vw + 30px); } /* DINING INFORMATION下に30px空ける */
/* 注目のコンテンツ帯(top_pc_pc_0001)は高さ137のテキストのみで挿絵の空きが無く、共通の-10.4vwだと
   スライダー画像が見出し文字に被る。正の余白に上書きして被りを解消（AUN xbbeqy #3） */
.odw-top-feat-wrap .odw-headband + .odw-top-feat { margin-top: 22px; }

/* ── ⑦ 温泉/休処/料理（PC: パーツSVG 0004〜0012 焼き込み＋%ホットスポット） ── */
.odw-featsvg { font-size: 0; line-height: 0; }
.odw-featsvg-row { display: flex; }
.odw-featsvg-half { position: relative; flex: 0 0 50%; min-width: 0; }
.odw-featsvg-half > svg { width: 100%; height: auto; display: block; }
.odw-featsvg .odw-hot { position: absolute; display: block; z-index: 5; border-radius: 6px; transition: background-color .25s; }
.odw-featsvg .odw-hot > span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.odw-featsvg .odw-hot--dk:hover { background: rgba(13,54,75,.22); } /* 紺/赤/青ボタン: 暗く */
.odw-featsvg .odw-hot--lt:hover { background: rgba(255,255,255,.32); } /* 黄ボタン: 明るく(#FFDF69近似) */

/* ── ⑧b 写真ナビ（PC: パーツSVG 0014＋%ホットスポット） ── */
.odw-top-nav--svg { position: relative; max-width: 1200px; margin: 0 auto; padding: 24px 16px 40px; font-size: 0; line-height: 0; }
.odw-top-nav--svg > svg { width: 100%; height: auto; display: block; }
.odw-top-nav--svg .odw-hot { position: absolute; display: block; z-index: 5; transition: background-color .25s; }
.odw-top-nav--svg .odw-hot > span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.odw-top-nav--svg .odw-hot:hover { background: rgba(255,255,255,.18); }

/* ── ⑦(SP用HTML) 写真＋説明 交互ブロック ── */
.odw-feat-blocks { position: relative; }
.odw-feat-block { display: flex; align-items: stretch; min-height: 600px; }
.odw-feat-block--photoR { flex-direction: row-reverse; }
.odw-feat-block__photo { flex: 1 1 50%; background-size: cover; background-position: center; min-height: 300px; position: relative; z-index: 2; }
.odw-feat-block__panel { flex: 1 1 50%; position: relative; display: flex; align-items: center; background: #f3f1ec; padding: 56px 44px; }
/* 完成図: photoLブロック=写真右に縦書き / photoRブロック=パネル左上に横書き */
.odw-feat-block__label { position: absolute; top: 58px; writing-mode: vertical-rl; letter-spacing: 0.34em; font-size: 13px; font-weight: 600; color: #b7b1a4; }
.odw-feat-block--photoL .odw-feat-block__label { left: 36px; }
.odw-feat-block--photoR .odw-feat-block__label { writing-mode: horizontal-tb; left: 33px; right: auto; top: 38px; }
/* SVG実測: テキスト左端はパネル左から101px・タイトル24px/字間0.1em/W6・本文16px/字間0.05em/W3(折返し幅386px) */
.odw-feat-block__inner { width: 100%; max-width: none; margin: 0; padding-left: 101px; padding-right: 40px; }
.odw-feat-block--photoL .odw-feat-block__inner,
.odw-feat-block--photoR .odw-feat-block__inner { padding-left: 101px; padding-right: 40px; }
.odw-feat-block__ttl { margin: 0 0 16px; font-size: 24px; line-height: 1.75; font-weight: 600; letter-spacing: 0.1em; color: #1a1a1a; }
.odw-feat-block__ttl .r { color: #d61518; }
.odw-feat-block__body { margin: 0; font-size: 16px; line-height: 2.0; letter-spacing: 0.05em; color: #3a3a3a; max-width: 386px; }
.odw-feat-block__btns { margin-top: 28px; display: flex; flex-direction: column; gap: 14px; max-width: 410px; }
.odw-feat-block__icons { display: none; } /* 完成図SPのみのアイコン行 */
/* ⑦ボタン共通 */
/* Figma実測(SP_TOP 32:24289): 角丸なしの直角・白1pxの内枠は縁から4px内側・括弧書きは2行目に中央で入る。
   旧実装は border-radius:6px＋縁に密着したinsetリング＋1行流し込みだった（AUN xbbeqy #18/#19/#20） */
.odw-fbtn { position: relative; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; text-align: center; padding: 15px 48px 15px 24px; border-radius: 0; font-size: 16px; font-weight: 600; letter-spacing: 0.1em; text-decoration: none; box-shadow: 0 2px 6px rgba(0,0,0,.12); transition: background-color .25s; }
.odw-fbtn::after { content: ""; position: absolute; inset: 4px; border: 1px solid rgba(255,255,255,.9); pointer-events: none; }
/* 括弧書きは Figma と同じく必ず2行目に落とす（.odw-fbtn__t の中なのでブロック化で改行させる） */
.odw-fbtn__t small { display: block; }
.odw-fbtn small { font-size: 14px; font-weight: 600; }
.odw-fbtn__a { position: absolute; right: 15px; top: 50%; transform: translateY(-50%); width: 22px; height: 22px; border: 1.5px solid currentColor; border-radius: 50%; display: flex; align-items: center; justify-content: center; }
/* ホバー色はデザイン仕様書準拠: 紺=#165E83→#0D364B・黄=#FBC601→#FFDF69（赤/青は同系トーンで暗く） */
.odw-fbtn--red { background: #d61518; color: #fff; }
.odw-fbtn--red:hover { background: #a80f12; }
.odw-fbtn--blue { background: #2f42a5; color: #fff; }
.odw-fbtn--blue:hover { background: #24327f; }
.odw-fbtn--navy { background: #1a4e70; color: #fff; }
.odw-fbtn--navy:hover { background: #0d364b; }
.odw-fbtn--yellow { background: #f2b600; color: #4a3b12; }
.odw-fbtn--yellow:hover { background: #ffdf69; }

/* ── 共通: ピルCTA（デザイン実測: 高60・幅246〜。白地×紺枠アウトライン） ── */
/* 「一覧を見る」ピル: Figma実測 198×47・枠2px・影あり・文字は墨色の太字・矢印は丸囲みなしの素シェブロン。
   旧実装は 248×58・枠1.5px・影なし・紺文字・丸囲み矢印だった（Figma準拠へ統一）。 */
.odw-top-pill { text-align: center; margin-top: 34px; position: relative; z-index: 1; }
.odw-top-pill > a { position: relative; display: inline-flex; align-items: center; justify-content: center; min-width: 198px; padding: 9px 42px 9px 22px; border-radius: 32px; background-color: #fff; background-image: linear-gradient(to right, #1a4e70 50%, rgba(255,255,255,0) 50%); background-size: 210% 100%; background-position: 100% 0; background-repeat: no-repeat; border: 2px solid #1a4e70; box-shadow: 0 2px 4px rgba(33,29,23,.18); color: #211d17; font-size: 16px; font-weight: 600; letter-spacing: 0.05em; text-decoration: none; transition: background-position .35s, color .25s; }
.odw-top-pill > a:hover { background-position: 0 0; color: #fff; } /* 仕様書: 背景が左から右へ紺に変化 */
.odw-top-pill__a { position: absolute; right: 16px; top: 50%; transform: translateY(-50%); width: 15px; height: 15px; color: #1a4e70; display: flex; align-items: center; justify-content: center; }
.odw-top-pill > a:hover .odw-top-pill__a { color: #fff; }

/* ── ⑧ お食事処のお知らせ（デザイン実測: ポスター300・間隔48・全幅996・説明→ピル56） ── */
/* 上余白はAUN 3kedw4 #6「100px開けて」。実機の画素計測で82pxだったため +18px（焼込余白の見積り誤りを是正） */
/* block: dining-band-seam-2026-08-28 見出し帯の margin-top:13px が親（padding/borderなし）を
   マージン相殺で貫通し、上の写真セクションとの間に地色の帯として見えていた
   （AUN #1-2 = 021「空きを無くしてください」。参考画像の矢印はこの帯を指している）。
   実測: 写真下端6291 → 地色15px → 白バンド6306。
   余白そのものは AUN 3kedw4 #6「100px開けて」で決めた値なので残し、
   margin を親の padding へ付け替えて相殺を止める（地色の帯だけが消える）。 */
.odw-top-dining-sec { position: relative; max-width: 1200px; margin: 0 auto; padding: 13px 16px 0; }
.odw-top-dining-sec .odw-headband { margin-top: 0; }
/* /block: dining-band-seam-2026-08-28 */
.odw-top-dining-sec .odw-top-head { position: relative; z-index: 1; }
.odw-top-dining-sec .odw-top-pill { margin-top: 56px; }
.odw-top-dining__deco { position: absolute; top: 24px; right: 0; width: 245px; height: auto; z-index: 0; pointer-events: none; }
.odw-top-dining { position: relative; z-index: 1; display: grid; grid-template-columns: repeat(3, 1fr); gap: 48px; max-width: 996px; margin: 0 auto; }
.odw-dcard { display: flex; flex-direction: column; background: #fff; box-shadow: 0 1px 8px rgba(0,0,0,.08); text-decoration: none; color: #4a4038; transition: box-shadow .2s; }
.odw-dcard:hover { box-shadow: 0 5px 16px rgba(0,0,0,.14); }
/* block: dcard-b4-2026-09-04 お食事処ポスターの枠を B4 比（257:364）へ（AUN wb67rb 1-3/2-19 = 117/133
   「画像の比率が少し細長くなっている。B4サイズの比率に」）。旧 300:457（0.656）は B4（0.706）より約7%細長い。 */
.odw-dcard__thumb { display: block; aspect-ratio: 257 / 364; overflow: hidden; background: #ece7dd; }
/* /block: dcard-b4-2026-09-04 */
.odw-dcard__thumb > img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .4s; }
.odw-dcard:hover .odw-dcard__thumb > img { transform: scale(1.06); } /* 仕様書: hoverで画像を拡大 */
.odw-dcard__body { display: flex; flex-direction: column; gap: 9px; padding: 14px 16px 18px; }
.odw-dcard__meta { display: flex; align-items: center; gap: 10px; }
.odw-dcard__date { font-size: 12px; color: #868686; letter-spacing: 0.06em; }
/* block: dcard-badge-color-2026-08-28 お食事処のお知らせカードのタグの色（AUN #2-26 = 046）。
   完成イメージの添付から実色を採取した結果 #932323（濃い赤）。旧実装の #D61518（鮮やかな赤）とも、
   カテゴリ定義 odw_news_categories() の dining = #9F7A3E（茶）とも異なるため、採取値を直接指定する。
   タグ文言が「食事処」（3字）になり幅が足りず2行に折れていたため white-space: nowrap も併せて指定する。
   他カテゴリの色は変更しない（このセレクタはお食事処カードのタグ専用）。 */
.odw-dcard__badge { background: #932323; color: #fff; font-size: 11px; line-height: 1; padding: 5px 10px; border-radius: 2px; white-space: nowrap; }
/* /block: dcard-badge-color-2026-08-28 */
.odw-dcard__lead { font-size: 13px; line-height: 1.7; color: #666; }

/* ── ⑧b 写真ナビ（デザイン実測: タイル304・列間24行間22・全幅960・ラベル帯高64・ピル→写真64・下80）
   原本はグリッド左寄せ(x84-1044)で右余白156pxに縦ロゴを配置＝タイルとロゴは重ならない。
   グリッドに z-index:1 を与えロゴ(絶対配置)より常に前面に。1220px未満はロゴ非表示。 ── */
.odw-top-nav { position: relative; max-width: 1200px; margin: 0 auto; padding: 64px 16px 80px; }
/* PC(SVG版)の下余白はAUN 3kedw4 #7「90px開けて」: SVG側にタイル下88px相当が焼込のため padding-bottom 0 */
.odw-top-nav.odw-top-nav--svg { padding-bottom: 0; }
.odw-nav-grid { position: relative; z-index: 1; display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px 24px; max-width: 960px; margin: 0 auto 0 68px; }
@media (max-width: 1199px) {
    .odw-nav-grid { margin: 0 auto; }
    .odw-top-nav__logo { display: none; }
}
.odw-nav-tile { display: block; text-decoration: none; background: #fff; box-shadow: 0 1px 6px rgba(0,0,0,.10); overflow: hidden; transition: box-shadow .2s; }
.odw-nav-tile:hover { box-shadow: 0 5px 16px rgba(0,0,0,.16); }
.odw-nav-tile__phwrap { display: block; aspect-ratio: 304 / 190; overflow: hidden; }
.odw-nav-tile__ph { display: block; width: 100%; height: 100%; background-size: cover; background-position: center; transition: transform .4s; }
.odw-nav-tile:hover .odw-nav-tile__ph { transform: scale(1.06); } /* 仕様書: hoverで画像を拡大 */
.odw-nav-tile__bar { position: relative; display: flex; align-items: center; gap: 8px; padding: 20px 16px; background: #ece6da; }
.odw-nav-tile__label { flex: 1 1 auto; min-width: 0; text-align: center; font-size: 18px; font-weight: 600; letter-spacing: 0.2em; text-indent: 0.2em; color: #3a3a3a; }
.odw-nav-tile__label--l { letter-spacing: 0.1em; text-indent: 0.1em; } /* 館内フロア図/万葉プレミア倶楽部 */
/* block: navtile-noverlap-2026-07-28 ラベルと矢印を絶対配置→flexに（AUN 3kedw4 #33「ボタンデザインが崩れている」）。
   「館内フロア図」「万葉プレミア倶楽部」でラベル右端が矢印に2〜6px食い込んでいた。 */
.odw-nav-tile__arrow { position: static; flex: none; width: 22px; height: 22px; border-radius: 50%; background: #2e6da4; display: flex; align-items: center; justify-content: center; }
/* /block: navtile-noverlap-2026-07-28 */
.odw-top-nav__logo { position: absolute; right: 0; top: 46px; width: 140px; height: auto; z-index: 0; pointer-events: none; }
.odw-top-nav__logosp { display: none; } /* SP専用の横ロゴ（万葉の湯＋MANYO ODAWARA） */

/* ── ⑨ お得なプラン/クーポン カード
   デザイン実測: plan=カード324/間隔24/全幅1020、coupon=カード388/間隔52/全幅828、
   セクション上余白84、クーポン下は雲装飾を挟み白帯まで130 ── */
.odw-top-offer-sec { max-width: 1200px; margin: 0 auto; padding: 48px 16px 0; } /* 見出し画像に上余白35px焼込のため84→48 */
/* TOPのプラン帯はAUN 3kedw4 #8「(ベージュ帯開始から)100px開けて」・クーポン見出し下はAUN #9「30px開けて」
   （見出しSVGは上余白の焼込なし＝paddingがそのまま余白になる）。SPは後段のSP実測値を活かすためPC限定 */
@media (min-width: 768px) {
    /* block: plan-head-gap-2026-08-30 「余白を30px開けてください」。
       見出しSVGは上余白の焼込が無く（実測: セクション上端＋padding の位置に字面が始まる）、
       padding がそのまま見た目の空きになる。旧値14pxは AUN 3kedw4 #8「100px開けて」由来だが、
       今回の指示が優先。ベージュ帯の上端から字面まで 30px にする。 */
    .odw-top .odw-top-offer-sec { padding-top: 30px; }
    /* /block: plan-head-gap-2026-08-30 */
    .odw-top .odw-top-offer-sec--coupon { padding-top: 48px; }
    /* 見出し→カード 30px: TOPクーポン(3kedw4 #9)・共通帯はPLAN/COUPON両方(3keb68 #2/#3・4keq9q #3) */
    .odw-top .odw-top-offer-sec--coupon .odw-headimg,
    .odw-common-band .odw-top-offer-sec .odw-headimg { margin-bottom: 30px; }
    /* TOPの「PLAN」下も30px（2026-07-28 ご指示。当初50px→クーポンと同値に統一）。
       見出し画像は文字が下端まであり焼込余白0なので、この margin がそのまま見た目の空きになる */
    .odw-top .odw-top-offer-sec:not(.odw-top-offer-sec--coupon):not(.odw-top-offer-sec--evnews) .odw-headimg { margin-bottom: 30px; }
    /* 共通帯の先頭(プラン帯)は上に20px足す（3keb68 #1）: 48+20 */
    .odw-common-band .odw-band--offer > .odw-top-offer-sec:first-of-type { padding-top: 68px; }
    /* イベント・お知らせ帯: 上を30px詰め(#9: 78→48)・見出し(EVENT・NEWS)下→カードを30pxに(#4)。
       帯PNG(1200x235)のEN下端=130px焼込 → カード上端=130+30=160px ⇒ margin-top:-(235-160)/1200*100vw */
    .odw-common-band .odw-top-news { padding-top: 48px; }
    /* block: evnews-card-gap-2026-09-08 見出し(EVENT・NEWS)の下端→カード上端を30px一定にする（#4）。
       見出しは幅523px固定・高さ78.6px固定、重ね位置は帯高の42.23%（中心）。帯高は 470/2400×100vw。
       カード上端 = 見出し下端+30 なので
         重なり量 = -(帯高 - (0.4223×帯高 + 39.3 + 30)) = -(0.11313×幅 - 69.3px)。
       見出し幅491pxでは高さ73.8px・半分36.9px。さらに EVENT・NEWS のインク下端の下に
       2.4px の余白を持つ（原本からの切り出しのため）。30px は「文字の下端から」なので
       定数は 36.9 + 30 - 2.4 = 64.5px。
       焼き込み見出しを使っていた頃の -6.25vw や、1370px頭打ちの -85.6px はもう成り立たない
       （見出しが幅に比例しなくなったため。旧値のままだと幅1962pxで101pxまで開く）。 */
    .odw-common-band .odw-top-news .odw-headband + .odw-top-grid { margin-top: calc(64.5px - 11.313vw); }
    /* 新着カードのタイトルはPC2行まで（3keb68 #8） */
    .odw-common-band .odw-top-news .odw-top-card__title { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }
}
/* 下余白はFigma実測: 「一覧を見る」ボタン下端→クリーム帯終端 84px（実測127px→43px詰め）。
   雲あしらいはこの下端を基準に配置しているため、ここがずれると雲の位置も全部ずれる。 */
.odw-top-offer-sec--coupon { position: relative; padding-bottom: 87px; }
/* クリーム帯→白帯の境界に跨る雲あしらい（完成図実測: 左=白雲+金雲小/右=金雲） */
/* 雲は左右とも版面の外へはみ出す意匠（--gl は left:-34px、--gr は right:-16px）。
   右側は文書幅を1216pxに広げてしまい、1200px幅ちょうどのビューポートで横スクロールが出ていた。
   絶対配置の基準である帯セクション側で切り落とす（左のはみ出しも同時に処理される）。
   ※ hidden ではなく clip。雲は bottom:-95px 等で下にも意図的にはみ出しており、
     hidden だと縦のはみ出しまで切れてしまう。 */
/* block: cloud-edge-2026-07-28（AUN 3kedw4 #12）雲・円相はウィンドウ幅に関わらず画面の両端に付ける。
   従来はセクション(最大1200px)基準の left/right:0 ＋ overflow-x:clip だったため、
   1200pxより広い画面では雲が版面の端（画面の内側）に残っていた。
   viewport基準（calc(50% - 50vw)）で配置し、はみ出しの刈り込みは全幅の親側で行う。 */
.odw-top, .odw-common-band { overflow-x: clip; }
.odw-cloud { position: absolute; z-index: 1; height: auto; pointer-events: none; }
/* block: cloud-figma-export-2026-07-27（AUN xbbeqy #27「XDと同じ形に」）
   金雲2点はFigmaのベクター実体を書き出して差し替えた（旧実装は左右とも同じ素材
   odawara_top_cloud_gold_s.png を別倍率で使い回しており、形も大きさも設計と違っていた）。
     右 = 32:27294 x931..1305(版面外を1200でクリップ→269幅) y8320..8478
     左 = 32:27296 x-152..148(0でクリップ→149幅)          y8325..8456
   位置はクリーム帯→白帯の境界（＝この帯セクションの下端）を基準にした実測値:
     クリーム雲 上-82 / 左の金雲 上-43・下+88 / 右の金雲 上-48・下+110
   ※クリーム雲は焼込背景の一部でベクター単体が無いため素材は据え置き、幅284・上端-82で合わせる */
.odw-cloud--wl { left: calc(50% - 50vw); bottom: -33px; width: 284px; }
.odw-cloud--gl { left: calc(50% - 50vw); bottom: -88px; width: 149px; }
.odw-cloud--gr { right: calc(50% - 50vw); bottom: -110px; width: 269px; }
/* /block: cloud-figma-export-2026-07-27 */
.odw-offers { display: grid; gap: 26px; margin: 0 auto; }
/* block: band-circle-2026-07-28 共通帯の背景グラフィック（AUN 3ke5pj #7「グラフィック反映」）
   Figma(32:36740 PC_温泉)の円相＝プラン帯の右と、クーポン帯の左に薄く敷かれている。
   実装は帯セクションの ::before。帯側の overflow-x:clip で版面外は切り落とされる。
   カードより下に来るよう、カード側(.odw-offer-roll)を z-index:1 にしている。 */
/* TOPにも同じ円相を出す（AUN 3kedw4 #10/#11「あしらいが消えている」＝共通帯限定だったのを全帯へ）。
   位置は画面端ぴったり（AUN 3keb68 #6/#7「輪っかは全て見えるように/画面のサイドに付けて」）。 */
.odw-top-offer-sec { position: relative; }
.odw-top-offer-sec::before { content: ""; position: absolute; z-index: 0; pointer-events: none;
  background: url("../images/common/odawara_band_circle.png") no-repeat center / contain;
  right: calc(50% - 50vw); top: 66px; width: 398px; height: 428px; }
.odw-top-offer-sec--coupon::before { right: auto; left: calc(50% - 50vw); top: -34px; width: 498px; height: 535px; }
.odw-offer-roll, .odw-top-offer-sec .odw-headimg, .odw-top-offer-sec .odw-top-pill { position: relative; z-index: 1; }
/* /block: band-circle-2026-07-28 */

/* SPカルーセル用のドット（PCはグリッドで is-static → 非表示） */
.odw-offer-roll { position: relative; }
.odw-offer-roll__dots { display: flex; justify-content: center; gap: 10px; margin-top: 18px; }
.odw-offer-roll__nav { display: none; }
.odw-offer-roll__dots button { width: 10px; height: 10px; padding: 0; border: 0; border-radius: 50%; background: #cfc7bb; cursor: pointer; transition: background .15s; }
.odw-offer-roll__dots button[aria-current="true"] { background: #7a6a55; }
.odw-offer-roll.is-static .odw-offer-roll__dots { display: none; }
.odw-offers--plan { grid-template-columns: repeat(3, 1fr); gap: 24px; max-width: 1020px; }
.odw-offers--coupon { grid-template-columns: repeat(2, 1fr); gap: 52px; max-width: 828px; }
/* カードは行内で高さを揃え、「このクーポンを使う」はカード下端に固定する（AUN 3ke5pj #12）。
   従来はタイトル行数やタグ数でボタン位置がカードごとにバラついていた。 */
.odw-ocard { display: flex; flex-direction: column; height: 100%; background: #fff; box-shadow: 0 1px 8px rgba(0,0,0,.08); text-decoration: none; color: #4a4038; overflow: hidden; transition: box-shadow .2s; }
a.odw-ocard:hover { box-shadow: 0 5px 16px rgba(0,0,0,.14); }
/* block: ocard-thumb-ratio-2026-08-25 カード画像の枠比と収め方（AUN 6mww5p #1-1）
   従来は一律 16/9(1.778) だったが、XD原本(odawara_web_PC_TOP.svg)の実測は
   プラン 324x189(1.714) / クーポン 388x228(1.702)。カード幅(324/388)はCSSと一致しており、
   16/9 は設計値ではない。
   さらに支給バナーは縦横比が枠と揃わないことがあり（例: 720x323=2.229）、
   cover だと左右が切れて「比率が変わって見える」状態になっていた。
   プラン/クーポンのバナーは contain で全体を必ず見せる。
   地色はカード地に馴染ませる（余白が出ても帯から浮かない）。
   お知らせカードは別クラス(.odw-top-card__thumb)なので影響しない。 */
.odw-ocard__thumb { display: block; aspect-ratio: 324 / 189; overflow: hidden; background: transparent; }
/* block: ocard-thumb-cover-2026-08-27 支給バナーが枠比と合わず、contain で上下に帯が出ていた
   （AUN #1-1/#2-5/#4-11 = 009/012/017「画像の比率が変わってしまっている」）。
   2026-08-26 は「切らない」を優先して contain にしたが、XD原本(odw_pc_top.png のプランカード)は
   画像が枠いっぱいに入っており letterbox が無い。再指摘でもあるため cover へ差し戻す。
   実測: 枠 plan 324x189=1.714 / coupon 388x228=1.702 に対し、支給バナーは 2.229〜2.235 と 1.716〜1.724。
   プランのバナーで cover にすると左右11%ずつが切れるが、切れるのは背景のみで文字要素は残る（実画像で確認）。 */
.odw-ocard__thumb > img { width: 100%; height: 100%; object-fit: contain; display: block; transition: transform .4s; }
/* クーポンの支給バナーは枠比(388:228=1.702)とほぼ一致(1.716〜1.724)。cover にしても切り取りは
   片側0.6%程度で、contain のときに出ていた細い余白だけが消える（AUN #2-5 = 012「少しだけ比率が変わっている」）。
   プラン側は支給バナーが 2.23:1 と枠比から大きく外れており、cover にすると文字が切れるため contain のまま。 */
.odw-offers--coupon .odw-ocard__thumb > img { object-fit: cover; object-position: center; }
/* /block: ocard-thumb-cover-2026-08-27 */
.odw-offers--coupon .odw-ocard__thumb { aspect-ratio: 388 / 228; }
/* block: plan-thumb-ratio-2026-08-30 枠の比は XD原本で 240×140（=324:189）と確定しているので変えない
   （odawara_web_SP_TOP_01.svg の rect を実測。スペシャルの 240×140、下段の 161×94 も同じ 1.714）。
   支給バナーが 2.23 のため contain では上下に22pxずつ白帯が出るが、cover にすると左右が11.5%ずつ切れて
   「温泉付」バッジや「飲」の字が欠ける（実機で確認済み）。
   そこで枠の高さを画像に追従させる（aspect-ratio を解除し height:auto）。表示される画像の大きさは
   contain のときと同じ（324×145.4 → 323.2×145.0）で、消えるのは空の白帯44pxだけ。
   バナーが設計比 324:189 で再入稿されれば、枠は自動的に 324×189＝XD原本の 240×140 と同じ比に戻る。
   バナーはWordPressのアイキャッチ（運用側で差し替わる）なので素材そのものは加工しない。 */
/* block: plan-thumb-cover-2026-09-05 プランのサムネを 324:189 の枠で自動トリミング（AUN 2026-09-04 共通 #1 = 192
   「プラン画像が一部大きく表示されている。飲み放題プランのサイズに合わせて自動トリミング」）。
   2026-08-30 は「枠を画像に追従（cover で文字が欠けるバナーがあるため）」としていたが、館から自動トリミングの指示が出たため
   cover に戻す。比率が違う登録画像（貸切風呂付プラン 806×563・フロント写真 3000×2000）は中央で切られる。 */
.odw-offers--plan .odw-ocard__thumb { aspect-ratio: 324 / 189; }
.odw-offers--plan .odw-ocard__thumb img { width: 100%; height: 100%; object-fit: cover; object-position: center; }
/* /block: plan-thumb-cover-2026-09-05 */
.odw-offers--plan .odw-ocard__thumb > img { height: auto; object-fit: fill; }
/* /block: plan-thumb-ratio-2026-08-30 */
/* /block: ocard-thumb-ratio-2026-08-25 */
a.odw-ocard:hover .odw-ocard__thumb > img { transform: scale(1.06); } /* 仕様書: hoverで画像を拡大 */
.odw-ocard__body { display: flex; flex-direction: column; flex: 1 1 auto; gap: 9px; padding: 14px 16px 18px; }
/* block: ocard-cat-size-2026-08-27 タグのサイズと間隔がXD原本とずれていた（AUN #1-2 = 010「タグ修正」）。
   XD原本 odw_pc_top.png のプランカードを実測: タグ 60x18px・間隔10px（実装は 65x20px・間隔6px）。 */
.odw-ocard__cats { display: flex; flex-wrap: wrap; gap: 10px; }
/* /block: ocard-cat-size-2026-08-27 */
/* SVG実測: バッジ10px/タイトル18px W6/条件12px W3/通常価格16px W4/クーポン価格37px・円21px・(税込)12px/プラン価格16px */
/* block: ocard-cat-xd-2026-08-25 カテゴリタグ（AUN 6mww5p #1-2）
   XD「プラン_カテゴリ／クーポン_カテゴリ」実測: PC 65x20・文字10px・角丸なし・中央寄せ。
   従来は文字数なりの幅＋角丸2pxで、タグごとに幅がバラついていた。
   規定より長いラベルが入っても切れないよう min-width で下限だけ固定する。 */
.odw-ocard__cat { display: inline-flex; align-items: center; justify-content: center;
    box-sizing: border-box; min-width: 60px; height: 18px; padding: 0 6px;
    color: #fff; font-size: 10px; line-height: 1; border-radius: 0; letter-spacing: 0.05em; }
/* /block: ocard-cat-xd-2026-08-25 */
/* block: ocard-title-clamp2-2026-08-27 PCでタイトルの行数制限が無く3行以上出ていた
   （AUN #2-6 = 013「2行まで表示されるようにしていただきたい」）。SPは既に2行制限あり(下部メディアクエリ)。
   XD原本のカードはタイトル2行。3行目以降だけを省略する。 */
.odw-ocard__title { font-size: 18px; font-weight: 600; line-height: 1.6; letter-spacing: 0.05em;
    display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }
/* /block: ocard-title-clamp2-2026-08-27 */
.odw-ocard__title small { display: inline-block; font-weight: normal; font-size: 13px; color: #666; }
.odw-ocard__cond { font-size: 12px; color: #8a8a8a; letter-spacing: 0.05em; }
.odw-ocard__reg { font-size: 16px; color: #555; letter-spacing: 0.05em; font-weight: 400; margin-bottom: -1px; }
/* 通常価格→割引価格・条件テキスト→価格の空きを10pxに（AUN 3ke5pj #5/#9/#23）。
   .odw-ocard__body の gap:9px に対し、この2箇所だけ 10px になるよう微調整する。 */
.odw-ocard__cond + .odw-ocard__price, .odw-ocard__reg + .odw-ocard__price { margin-top: 1px; }
.odw-ocard__price { font-size: 13px; font-weight: 700; color: #333; display: flex; align-items: baseline; flex-wrap: wrap; }
/* block: offer-card-figma-2026-07-28 帯カードの価格行をFigma(32:25487 TOP)に合わせる（AUN 3ke5pj #4/#10/#11/#23/#24）
   プラン: 「お一人様」はグレーのピル、価格は黒16px。従来は素テキスト＋赤字で設計と別物だった。
   クーポン: ▶は人数テキストの高さに合わせて中央、人数と金額の間は20px。 */
.odw-offers--plan .odw-ocard__price { font-size: 12px; font-weight: 400; align-items: center; column-gap: 0; color: #333; }
.odw-offers--plan .odw-ocard__per { margin-right: 12px; } /* ピルと金額の間だけ空ける（数字と「円〜」は詰める） */
.odw-offers--plan .odw-ocard__price b { font-size: 16px; letter-spacing: 0.1em; color: #333; font-weight: 600; }
.odw-ocard__per { font-size: 11px; line-height: 1; letter-spacing: 0.05em; color: #4c4a45; background: #e0ddd6; padding: 6px 9px; white-space: nowrap; }
/* block: coupon-price-align-2026-08-27 PCで「N名様」が金額のベースラインに揃い、
   大きな数字(37px)に対して下寄りに見えていた（AUN #2-7 = 014「『1名様』と値段の設置位置が揃うように」）。
   XD原本 odw_pc_top.png のクーポンカードは「0名様」が数字に対して上下中央。
   SP側は既に center（下部メディアクエリ）で、PCだけ baseline のままだった。 */
.odw-offers--coupon .odw-ocard__price { column-gap: 20px; align-items: center; } /* 「0名様」と金額の間 20px */
/* /block: coupon-price-align-2026-08-27 */
.odw-offers--coupon .odw-ocard__price .odw-ocard__ppl { display: inline-flex; align-items: center; gap: 6px; font-size: 20px; }
/* /block: offer-card-figma-2026-07-28 */
.odw-offers--coupon .odw-ocard__price { font-size: 20px; font-weight: 400; }
.odw-ocard__price b { font-size: 26px; color: #bd272d; margin: 0 1px; }
.odw-offers--coupon .odw-ocard__price b { font-size: 37px; font-weight: 600; }
.odw-ocard__price small { font-size: 12px; font-weight: 600; color: #333; }
.odw-ocard__amt { display: inline-flex; align-items: baseline; }
.odw-ocard__tri { flex: none; width: 0; height: 0; border-style: solid; border-width: 5px 0 5px 7px; border-color: transparent transparent transparent #bd272d; }
.odw-ocard__pills { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 2px; }
/* 属性タグチップ: Figma実測の地色は青灰 #e4e9eb・角丸なし・枠線なし（旧: 和紙ベージュ＋角丸＋枠） */
.odw-ocard__pill { font-size: 10px; color: #4c4a45; background: #e4e9eb; border: 0; border-radius: 0; padding: 5px 8px; line-height: 1; }
/* 「このクーポンを使う」: Figma実測 231×40（カード389pxの59%）・中央寄せ。旧実装は355×55でほぼ全幅だった */
.odw-ocard__cpnbtn { position: relative; display: flex; align-items: center; justify-content: center; width: 231px; max-width: 100%; margin: auto auto 0; padding: 7px 26px; border: 1.5px solid #bd272d; border-radius: 28px; color: #bd272d; font-size: 16px; font-weight: 600; letter-spacing: 0.1em; text-decoration: none; background-image: linear-gradient(to right, #bd272d 50%, rgba(255,255,255,0) 50%); background-size: 210% 100%; background-position: 100% 0; background-repeat: no-repeat; transition: background-position .35s, color .25s; }
.odw-ocard__cpnbtn:hover { background-position: 0 0; color: #fff; } /* 仕様書: 背景が左から右へ赤に変化 */
.odw-ocard__cpnbtn-a { position: absolute; right: 14px; top: 50%; transform: translateY(-50%); display: flex; }

/* ── ⑪ 全国に広がる万葉倶楽部グループ（デザイン実測: 上96・下104） ── */
.odw-top-group { max-width: 1100px; margin: 0 auto; padding: 96px 16px 104px; }
/* SVG実測: 見出し中央20px/0.1em 左右に罫線・サブ15px/0.05em中央 */
.odw-top-group__head { margin-bottom: 30px; text-align: center; }
.odw-top-group__ttl { display: flex; align-items: center; justify-content: center; gap: 28px; margin: 0; font-size: 20px; font-weight: 600; letter-spacing: 0.1em; text-indent: 0.1em; color: #3a3128; }
.odw-top-group__ttl::before, .odw-top-group__ttl::after { content: ""; flex: 0 0 120px; height: 1px; background: #cfc8ba; }
.odw-top-group__sub { margin: 12px 0 0; font-size: 15px; letter-spacing: 0.05em; color: #6f675a; }
.odw-top-group__cols { display: flex; gap: 34px; align-items: flex-start; }
.odw-top-group__map { flex: 0 0 44%; }
.odw-top-group__map img { width: 100%; height: auto; display: block; }
.odw-top-group__lists { flex: 1 1 auto; padding-top: 4px; }
.odw-grp-h { margin: 0 0 14px; padding-bottom: 8px; font-size: 14px; font-weight: 600; letter-spacing: 0.05em; border-bottom: 1px solid #ddd6c8; }
.odw-grp-h--portal { color: #33414f; }
.odw-grp-h--hotel { margin-top: 28px; color: #b89040; }
.odw-grp-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 11px 22px; }
.odw-grp-list a { display: flex; align-items: center; gap: 9px; text-decoration: none; color: #3a3a3a; font-size: 14px; letter-spacing: 0.05em; line-height: 1.4; }
.odw-grp-list a:hover { color: #1a4e70; }
/* XDの丸ボタンは黒（AUN 3kedw4 #15。旧: 緑 #2f7a52） */
.odw-grp__a { flex: none; width: 18px; height: 18px; border-radius: 50%; background: #000; display: flex; align-items: center; justify-content: center; }

/* ── ⑩ スペシャルコンテンツ（デザイン実測: 白帯上端→見出し28・バナー下→白帯終端84、
   下段バナーは高さ138で幅可変(276/258/228/240)のflex中央寄せ） ── */
/* 上余白はFigma実測: クリーム帯終端→「スペシャルコンテンツ」見出し上端 105px（実測34px）。
   雲が白帯側へ110pxはみ出す意匠なので、ここが詰まっていると雲が見出しまで垂れて見える。 */
.odw-top-special { max-width: 1200px; margin: 0 auto; padding: 99px 16px 84px; }
.odw-top-special .odw-top-feat { max-width: 1032px; margin: 0 auto; }
.odw-top-special .odw-top-feat__card { flex-basis: calc((100% - 48px) / 3); } /* 上段は3枚並び */
.odw-top-special .odw-top-feat__thumb { aspect-ratio: 240 / 133; } /* スライダー3枚の高さを統一（画像はcoverでトリミング） */
.odw-top-special .odw-top-feat__cap { text-align: center; margin-top: 16px; }
.odw-top-special .odw-top-feat__dots { margin-top: 20px; }
/* block: splinks-autofit-2026-08-28 未設定の枠を出さないようにした（AUN #1-35 = 024）結果、
   バナーが4枚未満のとき repeat(4, 1fr) では左寄せになり右側が空いてしまう。
   auto-fit で空のトラックを畳み、残った枚数を中央に寄せる。4枚のときの見え方は従来と同じ。 */
.odw-top-splinks { display: grid; grid-template-columns: repeat(auto-fit, minmax(0, 256px)); justify-content: center; gap: 12px; max-width: 1060px; margin: 34px auto 0; } /* 下段バナーを等幅に統一（枚数に追従） */
/* /block: splinks-autofit-2026-08-28 */
.odw-top-splink { display: block; border-radius: 4px; overflow: hidden; box-shadow: 0 1px 6px rgba(0,0,0,.10); transition: transform .2s, box-shadow .2s; }
.odw-top-splink:hover { transform: translateY(-2px); box-shadow: 0 5px 14px rgba(0,0,0,.16); }
/* block: splink-ratio-2to1-2026-09-09 スペシャルコンテンツ2行目のバナーをSPと同じ2:1にする（AUN xbpe4y #8 = 268）。
   PCは高さ138px固定で 256x138＝1.86、SPは aspect-ratio:2/1 で 169x84＝2.00 と比率が食い違っていた。
   高さ固定をやめて比率で持たせる（幅256なら高さ128）。はみ出しは従来どおり cover で中央トリミング。 */
.odw-top-splink img { display: block; width: 100%; height: auto; aspect-ratio: 2 / 1; object-fit: cover; }
/* /block: splink-ratio-2to1-2026-09-09 */

/* ⑩ 利用案内アコーディオン（native details。デザイン実測: 帯上端→ボタン58・ボタン→本文30） */
.odw-top-terms { max-width: 1000px; margin: 0 auto; padding: 58px 16px 0; }
/* block: terms-btn-figma-2026-07-28 Figma(32:25701/26019)実測: 360x50・地色#0D133A・角丸25(完全な丸)・
   左に万葉マーク23x25(ボタン左端から40px)・ラベル16px・右に小シェブロン。AUN 3kedw4 #13 */
.odw-terms__btn { list-style: none; cursor: pointer; position: relative; display: flex; align-items: center; justify-content: center;
    width: 360px; max-width: 100%; height: 50px; margin: 0 auto; padding: 0 44px 0 40px;
    background: #0d133a; color: #fff; border-radius: 25px; font-size: 16px; font-weight: 600; letter-spacing: 0.04em; transition: opacity .2s; }
.odw-terms__btn:hover { opacity: .7; } /* 仕様書: マウスオーバーで透過 100%→70% */
.odw-terms__btn::-webkit-details-marker { display: none; }
.odw-terms__mark { flex: none; width: 23px; height: 25px; margin-right: 4px; }
.odw-terms__label { display: inline-block; }
.odw-terms__chev { position: absolute; right: 24px; top: 50%; transform: translateY(-50%); display: inline-flex; transition: transform .2s; }
.odw-terms[open] .odw-terms__chev { transform: translateY(-50%) rotate(180deg); }
@media (max-width: 767px) { .odw-terms__btn { width: 335px; font-size: 15px; padding: 0 40px 0 28px; } }
/* /block: terms-btn-figma-2026-07-28 */
.odw-terms__body { margin-top: 30px; }
.odw-terms__item { margin: 0 0 6px; font-size: 12px; letter-spacing: 0.1em; line-height: 1.8; color: #4a4a4a; }

/* ── カードグリッド（news: デザイン実測 カード324・間隔24・画像比3:2） ── */
.odw-top-grid { display: grid; gap: 24px; grid-template-columns: repeat(3, 1fr); }
.odw-top-grid--coupon { grid-template-columns: repeat(2, 1fr); }

.odw-top-card { display: flex; flex-direction: column; background: #fff; border-radius: 4px; overflow: hidden; box-shadow: 0 1px 6px rgba(0,0,0,0.08); color: #333; text-decoration: none; transition: box-shadow .2s; }
.odw-top-card:hover { box-shadow: 0 4px 14px rgba(0,0,0,0.14); }
.odw-top-card__thumb { display: block; width: 100%; aspect-ratio: 3 / 2; overflow: hidden; background: #e9e3d9; }
.odw-top-card__thumb > img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .4s; }
.odw-top-card:hover .odw-top-card__thumb > img { transform: scale(1.06); } /* 仕様書: hoverで画像を拡大 */
.odw-top-card__body { display: flex; flex-direction: column; gap: 8px; padding: 14px 16px 18px; }
.odw-top-card__meta { display: flex; align-items: center; gap: 8px; }
.odw-top-card__date { font-size: 12px; color: #868686; letter-spacing: 0.1em; font-weight: 600; }
.odw-top-card__tag { align-self: flex-start; color: #fff; font-size: 11px; line-height: 1; padding: 5px 9px; border-radius: 2px; white-space: nowrap; }
.odw-top-card__title { font-size: 14px; line-height: 1.8; font-weight: 400; letter-spacing: 0.05em; color: #3a3a3a;
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; } /* 3行以上に伸びるのを防ぐ（AUN 3ke5pj #16「表示は2行までに」） */
.odw-top-card__title small { display: inline-block; font-weight: normal; font-size: 13px; color: #666; }
.odw-top-card__lead { font-size: 14px; line-height: 1.8; letter-spacing: 0.05em; color: #555; }
.odw-top-card__reg { font-size: 12px; color: #777; }
.odw-top-card__price { font-size: 13px; color: #bd272d; font-weight: bold; }
.odw-top-card__price b { font-size: 22px; }

/* ── 一覧を見る（デザイン実測: ボタン高64） ── */
.odw-top-more { text-align: center; margin-top: 28px; }
/* .odw-top-pill と同一意匠に統一（Figmaでは新着帯もプラン/クーポン帯と同じボタン） */
.odw-top-more > a { display: inline-block; min-width: 198px; padding: 9px 42px 9px 22px; border: 2px solid #1a4e70; border-radius: 32px; box-shadow: 0 2px 4px rgba(33,29,23,.18); color: #211d17; font-size: 16px; font-weight: 600; letter-spacing: 0.05em; text-decoration: none; background-color: #fff; background-image: linear-gradient(to right, #1a4e70 50%, rgba(255,255,255,0) 50%); background-size: 210% 100%; background-position: 100% 0; background-repeat: no-repeat; transition: background-position .35s, color .25s; }
.odw-top-more > a:hover { background-position: 0 0; color: #fff; } /* 仕様書: 背景が左から右へ紺に変化 */

/* ── タブレット（〜1060px。iPad mini 768px等でのPCレイアウト崩れ対策） ────── */
@media (max-width: 1060px) {
    /* スペシャルバナー行: 2列へ折返し。高さは比率(2:1)が決めるので指定しない
       （splink-ratio-2to1-2026-09-09 で固定高をやめた） */
    .odw-top-splinks { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 1024px) and (min-width: 768px) {
    /* フローティングボタン: コンテンツに被らないよう縮小・左右に寄せる */
    .odw-float--tickets { left: 10px; bottom: 70px; gap: 8px; }
    .odw-float--tickets svg { width: 70px; }
    .odw-float--contact { bottom: 70px; }
    .odw-float--contact svg { width: 74px; }
    /* 3〜4列グリッドの圧迫緩和 */
    .odw-top-feat__card { flex-basis: calc((100% - 40px) / 3); }
    .odw-top-feat__nav { display: none; }
    .odw-offers--plan { gap: 16px; }
    .odw-offers--coupon { gap: 24px; }
    .odw-top-dining { gap: 24px; }
    /* グループ館一覧: 地図と一覧を縦積み */
    .odw-top-group__cols { flex-direction: column; gap: 28px; }
    .odw-top-group__map { flex: none; width: 100%; max-width: 420px; margin: 0 auto; }
    /* テキスト見出し(プラン/クーポン/スペシャル)の縮小 */
    .odw-top-head__ja { font-size: 28px; gap: 30px; }
    .odw-top-head__bar { height: 26px; }
}

/* ── SP（完成図 odawara_web_SP_TOP.svg 実測準拠） ────────────── */
@media (max-width: 767px) {
    .odw-top .odw-pconly { display: none; } /* PC限定表記（例: 熱海・） */
    .odw-top-sec { padding: 32px 14px; }
    .odw-top-h2 { font-size: 20px; }
    /* block: sp-band-colors-2026-07-28 SPの帯地色をXD SP_TOPの実測に合わせる（AUN 3kedw4 #22/#23/#26/#30/#41/#42）。
       XDの帯: ヒーロー〜バナー=白 / 注目〜新着=ベージュ / 空き状況=白 / 城下町=白 / 温泉=ベージュ /
       休処=白 / 四季〜お食事処=ベージュ / 施設ナビ=白 / プラン以降=ベージュ */
    /* XD SP実測(375幅換算)の帯: 0-1492白(ヒーロー〜バナー〜注目のコンテンツ) / 1492-2377ベージュ(イベント・新着) /
       2377-3760白(空き状況・城下町) / 3760-5077ベージュ(温泉) / 5077-5450白(休処) /
       5450-6664ベージュ(四季・お食事処) / 6664-7264白(施設ナビ) / 7264-以降ベージュ(プラン以降)
       ※以前は帯の対応付けを誤り、注目のコンテンツと施設ナビがベージュのままだった（AUN 3kedw4 #22/#23） */
    .odw-top-hero, .odw-top-notice-wrap, .odw-top-cmp-wrap,
    .odw-top .odw-top-feat-wrap, .odw-top .odw-top-nav { background: #fff; }
    .odw-top .odw-top-event, .odw-top .odw-top-news { background: #f3f1ec; }
    .odw-feat-blocks .odw-feat-block:nth-child(1) .odw-feat-block__panel,
    .odw-feat-blocks .odw-feat-block:nth-child(3) .odw-feat-block__panel { background: #fff; }
    .odw-top .odw-top-dining-sec { background: #f3f1ec; }
    .odw-top .odw-top-special { background: #f3f1ec; }
    /* /block: sp-band-colors-2026-07-28 */
    .odw-top-more > a { min-width: 0; width: 100%; max-width: 320px; }
    .odw-top-notice-wrap { padding-top: 26px; }
    .odw-top-notice { padding: 18px 16px; }
    .odw-top-notice__ttl { font-size: 17px; gap: 8px; }
    .odw-top-notice__body { font-size: 14px; text-align: left; }
    /* ③ バナー: 完成図SPは2×2グリッド（小） */
    .odw-top-cmp-wrap { padding-top: 30px; }
    .odw-top-cmp { grid-template-columns: 1fr 1fr; gap: 12px 10px; max-width: 440px; }
    /* SPバナーは16:9（AUN 3kedw4 #18「正方形から16:9へ変更」。旧: 第2Rの指示で1:1にしていた）。
       SP専用画像(<picture><source>)を設定した枠のみ比率を強制し、未設定枠はPC画像の素の比率。 */
    .odw-top-cmp__item:has(picture source) img { aspect-ratio: 16 / 9; object-fit: cover; height: auto; }
    .odw-top-feat__thumb:has(picture source) { aspect-ratio: 1 / 1; }
    .odw-top-special .odw-top-feat__thumb:has(picture source) { aspect-ratio: 1 / 1; }
    /* 共通見出し(TOPのみ): 完成図SP_TOPは左寄せ・縦バーなし・下に波線。
       サブページ(news等)のSPは｜バー付き中央のままなので .odw-top スコープ必須 */
    .odw-top .odw-top-head { text-align: left; margin: 0 0 24px; padding: 0 8px 22px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='47.64' height='8' viewBox='0 0 47.64 8'%3E%3Cpath d='M0 1.01C13 0.73 11.9 7 23.83 7C35.74 7 35.73 1.01 47.64 1.01' fill='none' stroke='%23cecece' stroke-width='2'/%3E%3C/svg%3E") repeat-x left bottom; }
    /* block: sp-head-xd-2026-07-28 SP見出しをXD/Figma実測に（AUN 3ke5pj #17/#20/#25「フォントをXD上のものに」）
       Figma SP_TOP実測: 和文=1文字あたり約25pxの送り＝20px×字間0.26em。英字も11px×0.24emに合わせる。
       2026-07-28 第5R(#19/20/21/31/36/37/40/45): 最新XDはW3より太い中字＝500へ（W3細字に下げたのは行き過ぎだった） */
    /* block: sp-head-size-xd-2026-08-27 XD原本 odw_sp_top.png のSP見出しを実測し直した（AUN #4-10/#5-9/#6-12）。
       クーポン見出しで 日本語の字面高20px・1文字の送り26.8px・字面 x27-202。
       20px×0.26em では 字面高18px・送り25.2px・x27-192 と約10%小さかったため 22px×0.2em にする
       （22px なら 字面高19.8px・送り26.4px で実測と1px以内）。 */
    .odw-top .odw-top-head__ja { display: block; font-size: 22px; font-weight: 400; gap: 0; letter-spacing: 0.2em; text-indent: 0; margin: 0 0 7px; }
    /* /block: sp-head-size-xd-2026-08-27 */
    .odw-top .odw-top-head__bar { display: none; }
    .odw-top .odw-top-head__en { font-size: 11px; letter-spacing: 0.24em; text-indent: 0; }
    /* Figma(SP)の見出しは和文と英字が同じ行に並ぶ（「お得なプラン PLAN」）。
       英字が長いもの（DINING INFORMATION 等）は自然に折り返って2段になる＝flex-wrapで両方を満たす。
       ※お知らせ一覧/詳細の「｜新着情報｜」は中央＋縦バーのままなので、TOPと共通帯だけに限定する。 */
    .odw-top .odw-top-head,
    .odw-common-band .odw-top-head { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 15px; }
    .odw-common-band .odw-top-head { text-align: left; margin: 0 0 24px; padding: 0 8px 22px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='47.64' height='8' viewBox='0 0 47.64 8'%3E%3Cpath d='M0 1.01C13 0.73 11.9 7 23.83 7C35.74 7 35.73 1.01 47.64 1.01' fill='none' stroke='%23cecece' stroke-width='2'/%3E%3C/svg%3E") repeat-x left bottom; }
    .odw-common-band .odw-top-head__ja { display: block; font-size: 20px; font-weight: 400; gap: 0; letter-spacing: 0.26em; text-indent: 0; margin: 0 0 4px; } /* 太さはXD準拠500（3keb68 #11-13） */
    .odw-common-band .odw-top-head__bar { display: none; }
    .odw-common-band .odw-top-head__en { font-size: 11px; letter-spacing: 0.24em; text-indent: 0; margin: 0 0 4px; }
    /* /block: sp-head-xd-2026-07-28 */
    /* block: head-event-oneline-2026-08-28 「今月のイベントをチェック！」（13字）が
       22px/0.2em＝字面338.8px で、利用可能幅 100vw−48px（375pxで327px）を超え「ク！」だけが
       次行へ落ちていた（AUN 2-6 = 026）。狭い端末でも孤立改行が出ないよう、幅から逆算した
       font-size で1行に収める。字面 = 13字 × 1.2fs − 0.2fs ≒ 15.6fs。 */
    .odw-top-event .odw-top-head__ja { white-space: nowrap; font-size: min(21px, calc((100vw - 48px) / 15.6)); }
    /* /block: head-event-oneline-2026-08-28 */
    /* block: head-news-stack-2026-08-28 「新着情報・お知らせ」は字面が短く flex-wrap が働かないため
       NEWS が同じ行の右側に並んでいた（AUN 2-9 = 029）。完成イメージは和文1行目・NEWS 2行目。
       日本語側を単独で1行占有させる。ほかの見出しは既に折り返しており影響しない。 */
    .odw-top-news .odw-top-head__ja { flex: 0 0 100%; }
    /* /block: head-news-stack-2026-08-28 */
    /* block: sp-head-size-xd-2026-08-28 SP見出しの寸法をXD原本 odawara_web_SP_TOP_01.png の実測へ
       （AUN 2-5 = 025 / 2-6 = 026 / 2-9 = 029「フォントサイズや位置をXDと合わせる」）。
       字送りは両端の字面ではなく「字と字の中心間隔」で測る（両端は閾値で1〜2px揺れるため）。
       XD実測の字送り: 注目のコンテンツ 24.86 / 今月のイベントをチェック！ 25.29 / 新着情報・お知らせ 25.25
       → 平均 25.13。現行 22px × (1+0.2em) = 26.4 は約1.3px過大。21px なら 25.2 で一致する。
       英字は字面幅 XD 106 / 101 / 38 に対し現行(11px) 111 / 109 / 43 → 10px で一致する。
       和文と英字の字面の空きは XD で 12〜13px。 */
    /* 太さ: ヒラギノ明朝は W3(=400/500) と W6(=600/700) の2段しか無い。XDの字面の「濃い画素率」は
       16.7 / 11.5 / 23.0%（注目のコンテンツ / 今月のイベント / 新着情報）で、
       400 だと 9.9 / 9.5 / 17.6%（平均4.7pt細い）、600 で 15.0 / 13.9 / 24.1%（平均1.7pt差）と一致する。 */
    .odw-top .odw-top-head__ja { font-size: 21px; font-weight: 600; flex: 0 0 100%; }
    /* 英字の太さ: ヒラギノ角ゴは W6〜W9（600〜900）まである。XDの濃い画素率は
       29.1 / 27.8 / 38.3%（TOP CONTENT / EVENT・NEWS / NEWS）で、
       600 は 23.5 / 26.3 / 31.7%（平均4.6pt細い）、800 で 28.2 / 31.1 / 38.2%（平均1.4pt差）と一致する。
       900 は 35.7 / 36.3 / 44.2% で太すぎる。字面幅も 800 が XD 106/101/38 に最も近い。 */
    .odw-top .odw-top-head__en { font-size: 10px; font-weight: 800; }
    /* XD原本ではSPの見出しは全て和文1行目・英字2行目（英字の左端が和文の左端に揃う）。
       字面が短い見出しは flex-wrap では折り返らないので、和文側に1行を占有させる。 */
    /* /block: sp-head-size-xd-2026-08-28 */
    /* block: head-wave-remove-2026-08-28 XD原本では波線が付くのは「注目のコンテンツ」だけで、
       「今月のイベントをチェック！」と「新着情報・お知らせ」の下には波線が無い
       （AUN 2-8 = 028 / 2-10 = 030「グラフィック削除」。ピンは左端 x6・右端 x340 で、
       見出しと同じ高さを横断する線＝波線を指している）。この2見出しからだけ波線を外す。
       XD実測の空き: 英字の字面下端からバナー上端まで20px。 */
    .odw-top-event .odw-top-head { background-image: none; padding-bottom: 0; margin-bottom: 11px; }
    .odw-top-news .odw-top-head { background-image: none; padding-bottom: 0; margin-bottom: 8px; }
    /* XD実測の縦の空き: 帯上端→和文字面 28px / 英字字面→バナー 20px / バナー→和文字面 49px /
       英字字面→記事1件目 17px / 英字字面→波線 23px / 波線→カード 23px。 */
    .odw-top-feat-wrap .odw-top-head { margin-bottom: 19px; }
    /* /block: head-wave-remove-2026-08-28 */
    /* block: top-event-sp-image-2026-08-28 SP用バナーが設定されているときだけXD実測の枠に固定する
       （XD: x20〜349・y1580〜1826 ＝ 330×247）。角丸と影はXDに無いので外す。 */
    .odw-top-event__banner--hassp { max-width: 330px; }
    .odw-top-event__banner--hassp > a { border-radius: 0; box-shadow: none; }
    .odw-top-event__banner--hassp img { aspect-ratio: 330 / 247; object-fit: cover; }
    /* /block: top-event-sp-image-2026-08-28 */
    .odw-top .odw-top-head__ja { margin: 0 0 7px; } /* XD実測: 和文字面→英字字面 12〜13px（旧4pxでは10px） */
    .odw-top .odw-top-head__en { margin: 0 0 4px; }
    .odw-top-head__ja { font-size: 23px; gap: 16px; letter-spacing: 0.18em; text-indent: 0.18em; }
    .odw-top-head__bar { height: 23px; }
    .odw-top-head__en { font-size: 11px; letter-spacing: 0.28em; }
    /* ④ 注目のコンテンツ */
    .odw-top-feat-wrap { padding: 34px 14px 44px; }
    .odw-top-feat__track { gap: 14px; }
    .odw-top-feat__card { flex-basis: 76%; }
    .odw-top-feat__nav { display: none; }
    .odw-top-feat__cap { margin-top: 12px; font-size: 13px; }
    .odw-top-feat__dots { margin-top: 18px; }
    /* block: feat-carousel-xd-2026-08-28 「注目のコンテンツ」のカルーセルを XD 原本
       odawara_web_SP_TOP_01.svg の実測へ揃える（AUN 2-5 = 025「サイズや位置をXDと合わせる」）。
       XD実測: カード画像 240×140 を x=-192 / 68 / 329.5 に配置（ピッチ260＝カード240＋間隔20）。
       中央カードは x68〜308 で画面中央 187.5 に一致。左右のチラ見せは画面端まで届く。
       375px以外でも中央に来るよう、トラックの左右paddingと矢印位置は (画面幅−240)/2 から算出する。
       矢印は φ25（r12.5）白丸・枠 #cecece 1px・シェブロン #868686 2px で、中心 (48.5, 画像中心) と
       (327.5, 画像中心)。ドットは φ8・ピッチ27・4個で中心 x187.5、字面下端から14px下。
       キャプションは 14px / 行送り20px / letter-spacing 0.05em、画像下端から10px。
       現行は カード260.7×144.5・間隔14・左寄せ・矢印非表示・ドットφ10ピッチ20 だった。
       セレクタは .odw-top-feat-wrap 配下に限定し、同じ部品を使う .odw-top-special には当てない。 */
    .odw-top-feat-wrap .odw-top-feat__track { gap: 20px; margin-left: -14px; margin-right: -14px; padding: 4px max(0px, calc((100% + 28px - 240px) / 2)) 6px; }
    .odw-top-feat-wrap .odw-top-feat__card { flex-basis: 240px; scroll-snap-align: center; }
    .odw-top-feat-wrap .odw-top-feat__thumb,
    .odw-top-feat-wrap .odw-top-feat__thumb:has(picture source) { aspect-ratio: 240 / 140; border-radius: 0; box-shadow: none; }
    .odw-top-feat-wrap .odw-top-feat__cap { margin-top: 10px; font-size: 14px; line-height: 20px; letter-spacing: 0.05em; }
    .odw-top-feat-wrap .odw-top-feat__dots { margin-top: 8px; gap: 19px; } /* トラックの padding-bottom 6px と合わせて画像下端から204px */
    .odw-top-feat-wrap .odw-top-feat__dots button { width: 8px; height: 8px; }
    .odw-top-feat-wrap .odw-top-feat__nav { display: flex; width: 25px; height: 25px; top: 61.5px; bottom: auto; margin-block: 0; border-color: #cecece; }
    .odw-top-feat-wrap .odw-top-feat__nav--prev { left: max(0px, calc((100% + 28px - 240px) / 2 - 46px)); }
    .odw-top-feat-wrap .odw-top-feat__nav--next { right: max(0px, calc((100% + 28px - 240px) / 2 - 46px)); }
    .odw-top-feat-wrap .odw-top-feat__nav svg { width: 14px; height: 14px; }
    .odw-top-feat-wrap .odw-top-feat__nav svg path { stroke: #868686; stroke-width: 2; }
    /* /block: feat-carousel-xd-2026-08-28 */
    /* 左右14px: 上の top-left-line-2026-09-09 の基準に合わせる（旧16px） */
    .odw-top-event { padding-top: 26px; padding-left: 14px; padding-right: 14px; } /* XD実測: 帯上端→和文字面 28px */
    /* ⑥ 新着情報: 完成図SPはサムネ左42%の行リスト（白カードなし） */
    .odw-top-news { padding: 47px 14px 42px; } /* XD実測: バナー下端→和文字面 49px */
    .odw-top-event__deco, .odw-top-news__deco { display: none; }
    .odw-top-grid, .odw-top-grid--coupon { grid-template-columns: 1fr; gap: 22px; }
    .odw-top-news .odw-top-card { display: grid; grid-template-columns: 42% 1fr; column-gap: 12px; align-items: start; background: transparent; border-radius: 0; box-shadow: none; overflow: visible; }
    .odw-top-news .odw-top-card:hover { box-shadow: none; }
    .odw-top-news .odw-top-card__thumb { aspect-ratio: 3 / 2; border-radius: 3px; }
    .odw-top-news .odw-top-card__body { padding: 0; gap: 6px; }
    .odw-top-news .odw-top-card__date { font-size: 13px; }
    .odw-top-news .odw-top-card__title { font-size: 13px; line-height: 1.65; font-weight: 500; }
    .odw-top-news .odw-top-card__lead { display: none; }
    /* Figma(SP_TOP)ではカードとカードの間に細い罫線が入る。最終カードの下は引かない */
    .odw-top-news .odw-top-grid--news > .odw-top-card { padding-bottom: 16px; border-bottom: 1px solid #ddd7cc; }
    .odw-top-news .odw-top-grid--news > .odw-top-card:last-child { border-bottom: 0; }
    /* ⑨c イベント・お知らせ帯（SPのみ）も新着帯と同じカード意匠にする */
    .odw-top-offer-sec--evnews .odw-top-card { display: grid; grid-template-columns: 42% 1fr; column-gap: 12px; align-items: start; background: transparent; border-radius: 0; box-shadow: none; overflow: visible; padding-bottom: 16px; border-bottom: 1px solid #ddd7cc; }
    .odw-top-offer-sec--evnews .odw-top-card:last-child { border-bottom: 0; }
    .odw-top-offer-sec--evnews .odw-top-card:hover { box-shadow: none; }
    .odw-top-offer-sec--evnews .odw-top-card__thumb { aspect-ratio: 3 / 2; border-radius: 3px; }
    .odw-top-offer-sec--evnews .odw-top-card__body { padding: 0; gap: 6px; }
    .odw-top-offer-sec--evnews .odw-top-card__date { font-size: 13px; }
    .odw-top-offer-sec--evnews .odw-top-card__title { font-size: 13px; line-height: 1.65; font-weight: 500; }
    /* ⑦ 特徴ブロック: 写真全幅→ラベル→本文（flex解除が必須） */
    .odw-feat-block, .odw-feat-block--photoR { flex-direction: column; min-height: 0; }
    /* block: feat-photo-355-2026-08-29 支給XD原本 odawara_web_SP_TOP_01 では写真は全幅ではなく
       355×355（clipPath の rect も width=355 height=355）で、写真が寄っていない側に20pxの空きが出る。
       実測: ブロック1 x0-354 / ブロック2 x20-374 / ブロック3 x0-354 / ブロック4 x20-374 と左右交互。
       旧実装の 375×356 全幅は、以前参照していた別書き出し（ref/odw_sp_top.png）由来で、
       支給原本とは本文の字送り・改行位置も違っていた。支給原本を正とする。 */
    .odw-feat-block__photo { flex: none; width: calc(100% - 20px); aspect-ratio: 1 / 1; height: auto; min-height: 0; }
    .odw-feat-block--photoR .odw-feat-block__photo { margin-left: 20px; }
    /* /block: feat-photo-355-2026-08-29 */
    /* block: feat-label-gap-2026-09-05 「MANYO ODAWARA」の縦位置を入稿実測へ合わせる（AUN m54rn7 #4 = 198
       「MANYO ODAWARAの文字はもう少し上だと思います。素材を確認をしてください」）。
       入稿 odawara_web_SP_TOP_01.png（375幅・等倍）を行単位で走査した実測値。特集ブロックは入稿に2つあり、
       写真下端→ラベル字面上端 = 12px / 10px、ラベル字面下端→見出し字面上端 = 21px / 23px。
       実装は 30px / 26px でラベルが18px下がっていた。パネルの上パディングを 26px→7px、
       ラベルの下マージンを 14px→10px にして、字面基準で 上11px・下22px（入稿の平均値）へ揃える。
       ラベルの字面は行ボックス上端から4.4px下・高さ10px、見出しは行ボックス上端から8.4px下なので、
       アキの目標値からこの分を引いた値がパディング／マージンになる。 */
    .odw-feat-block__panel { display: block; padding: 11px 18px 38px; }
    .odw-feat-block__label { position: static; writing-mode: horizontal-tb; display: block; text-align: right; margin: 0 0 14px; letter-spacing: 0.28em; color: #b7b1a4; }
    /* 素材のアウトライン（odw_feat_label_sp.svg）を置く場合は、箱の高さ＝字面になるので
       アキはパディング／マージンの値がそのまま効く。上11px・下22px（見出しの行内アキ8.4pxを差し引いて14px）。 */
    .odw-feat-block__label--svg { font-size: 0; line-height: 0; }
    .odw-feat-block__label--svg svg { display: inline-block; width: 155px; height: auto; vertical-align: top; }
    /* block: feat-label-color-2026-09-06 入稿は特集ブロックごとに色が違う（AUN m54rn7 #4/#5/#9/#10 = 198/199/203/204
       「アウトライン化後も入稿の色・線幅が再現されていない」）。素材 SP_TOP_01.svg の4本のパスは
       1本目 translate(200 3253) と3本目 translate(200 5095) が #d3d3d3、
       2本目 translate(20 4133) と4本目 translate(20 5823) が #165e83。いずれも fill と同色の stroke を持ち
       stroke-width 0.5。実装は4箇所とも #d3d3d3・stroke なしで、線が細く色も1色だった。
       SVG側は fill/stroke を currentColor にしてあるので、ここで色だけを与える。
       写真が左のブロック（photoL）＝1・3本目が灰色、写真が右（photoR）＝2・4本目が紺。 */
    .odw-feat-block--photoL .odw-feat-block__label--svg { color: #d3d3d3; margin-right: 2px; }
    .odw-feat-block--photoR .odw-feat-block__label--svg { color: #165e83; margin-left: 2px; }
    /* 左右位置も入稿と2pxずれていた（パネルの左右パディング18pxに対し、入稿のラベルは端から20px）。
       字面基準の実測: 入稿 photoL x200-354 / photoR x20-175、実装は 202-356 / 18-172 だった。 */
    /* /block: feat-label-color-2026-09-06 */
    /* /block: feat-label-gap-2026-09-05 */
    .odw-feat-block--photoL .odw-feat-block__label, .odw-feat-block--photoR .odw-feat-block__label { left: auto; right: auto; }
    /* block: feat-label-xd-2026-08-28 「MANYO ODAWARA」の実描画をXD実測（字面 155×10px・右端 x354）へ合わせる。
       13px/0.28em は字面 172.5×10.6px で幅が18px広かった。canvas の actualBoundingBox で
       font-size と letter-spacing を総当たりし、12.3px/0.218em＝字面 155.1×10.0px を採用。
       右端は text-align:right のため 357 − 末尾字間2.68px = 354.3px。AUN 2-12/2-17/2-20/2-23 共通。 */
    .odw-feat-block__label { font-size: 12.3px; letter-spacing: 0.218em; }
    /* /block: feat-label-xd-2026-08-28 */
    .odw-feat-block__inner,
    .odw-feat-block--photoL .odw-feat-block__inner,
    .odw-feat-block--photoR .odw-feat-block__inner { max-width: none; padding: 0; }
    /* block: sp-featblock-xd-2026-08-28 XD原本 odw_sp_top.png の温泉ブロックを実測し直した
       （AUN #2-14/#2-18/#2-21/#2-24 = 034/038/041/044「フォントサイズが全体的に変わっている」）。
       見出し: 赤字の字面高17px（=19pxで一致）だが1行目→3行目が XD 67px に対し実装60px。
               行送り 33.5px 相当＝line-height 1.76。PC基本値の1.75と同じなのでSPの上書き1.6をやめる。
       本文  : XDは1行「ゆったりと湯に浸かり、季節の味覚を楽し」19文字で幅334px＝送り17.6px。
               16px×0.1em で17.6pxと一致し、字面高も14pxでXD実測どおり。実装の14px×0.05emでは
               1行に入る文字数が増えて別物になっていた。行送りもXD実測30px＝1.875。 */
    /* /block: sp-featblock-xd-2026-08-28 */
    /* block: sp-featblock-xd-2026-08-29 上のブロックは ref/odw_sp_top.png を見て決めた値だが、
       支給XD原本 odawara_web_SP_TOP_01.png は別書き出しで、同じ行でも字面が広い
       （タイトル2行目 327px vs 306px / 本文1行目 314px vs 300px。字面高はどちらも19px・15pxで同じ＝
       違うのは字送り）。支給原本の実測に入れ替える。
       見出し: 字送り 20.97 / 21.39（中心間隔）＝平均21.18、字面高19px、行送り34px
               → 20px × 0.05em ＝ 21.0 / 行送り 1.7 ＝ 34px。19pxでは字面高が17〜18pxで足りない。
       本文  : 字送り 16.81 / 16.79 の2行一致、字面高15px、行送り30px
               → 16px × 0.05em ＝ 16.8 / 行送り 1.875 ＝ 30px。0.1em(17.6)では1行の文字数が変わる。 */
    .odw-feat-block__ttl { font-size: 20px; line-height: 1.7; letter-spacing: 0.05em; }
    .odw-feat-block__body { font-size: 16px; line-height: 1.875; letter-spacing: 0.05em; max-width: none; }
    /* /block: sp-featblock-xd-2026-08-29 */
    /* block: sp-static-xd-2026-08-29 支給XD原本 odawara_web_SP_TOP_01.svg の <text> 指定を機械抽出し
       （svg_inventory.py で入れ子transformを解決／141要素）、実装の計算値と突き合わせて差分を当てた。
       font-size と letter-spacing は SVG の値そのまま。太さは SVG の W番号どおりにすると
       XDのラスタより細くなる（本文: XD濃さ20.4% に対し weight300=14.0% / weight400=17.7%）ため、
       濃さがXDに近いほうを採る。位置・寸法・字送りは SVG が正。 */
    /* 特集: 見出しの字送りはブロックごとに違う（1枚目 0.07em / 2〜4枚目 0.1em） */
    .odw-feat-block:nth-of-type(1) .odw-feat-block__ttl { letter-spacing: 0.07em; }
    .odw-feat-block:nth-of-type(n+2) .odw-feat-block__ttl { letter-spacing: 0.1em; }
    /* 特集: ラベルは写真が画面端に付いていない側へ寄る（XD: 1枚目 右端x353 / 2枚目 左端x20） */
    .odw-feat-block--photoR .odw-feat-block__label { text-align: left; }
    /* 特集: ボタンの括弧書き（XD fs12 / 0.1em） */
    .odw-fbtn__t small { font-size: 12px; letter-spacing: 0.1em; }
    /* 特集: ボタン背面の橋の線画（XD image18 を x0 y3622 に 375.2×138.0 / opacity 0.2 で敷いている。
       XDでは線画の下端 y3760 が次ブロックの写真上端 y3760 とぴったり接する。
       実装のボタンはXDより背が高い（72px vs 60px）ため上端基準では下に隙間が残るので、下端で合わせる。 */
    .odw-feat-block:nth-of-type(1) .odw-feat-block__btns { position: relative; }
    .odw-feat-block:nth-of-type(1) .odw-feat-block__btns::before {
        content: ""; position: absolute; left: 50%; transform: translateX(-50%);
        top: auto; bottom: -38px; /* パネル下padding(38px)を打ち消し、線画の下端を次ブロックの上端に接地させる */
        width: 100vw; aspect-ratio: 375.228 / 138.042; opacity: 0.2; z-index: 0; pointer-events: none;
        background: url("../images/top/odawara_top_art_bridge.png") no-repeat center top / 100% auto;
    }
    .odw-feat-block:nth-of-type(1) .odw-feat-block__btns > * { position: relative; z-index: 1; }
    /* 「一覧を見る」ピル（XD fs14 / 0.1em） */
    .odw-top-pill a > span:first-child { font-size: 14px; letter-spacing: 0.1em; }
    /* 空室状況（XD 見出し fs16 / 0.2em、時間 fs10 / W6） */
    .odw-vac__name { font-size: 16px; letter-spacing: 0.2em; }
    .odw-vac__name > i { font-size: 10px; font-weight: 600; }
    /* クーポン（XD 通常価格 fs14、条件ピル 0.05em / W6） */
    .odw-ocard__reg { font-size: 14px; }
    .odw-ocard__pill { letter-spacing: 0.05em; font-weight: 600; }
    /* フッター（XD 営業表記 fs14、電話番号 fs26 / W6） */
    .odw-vac__open { font-size: 14px; }
    .odw-vac__tel { font-size: 26px; font-weight: 600; }
    /* /block: sp-static-xd-2026-08-29 */
    .odw-feat-block__btns { max-width: none; margin-top: 24px; }
    .odw-feat-art { display: none; } /* PC専用の挿絵配置（SPは別レイアウト） */
    .odw-cloud { display: none; }
    .odw-top .odw-top-offer-sec::before { display: none; } /* 円相あしらいはXD SP_TOPに無い（共通帯は従来どおり） */
    .odw-feat-block--photoR .odw-feat-block__label { left: auto; top: auto; }
    .odw-feat-block__icons { display: block; width: 339px; max-width: 96%; margin: 22px auto 0; }
    /* ⑧ お食事処 */
    .odw-top-dining-sec { padding-top: 38px; padding-left: 14px; padding-right: 14px; }
    .odw-top-dining { grid-template-columns: 1fr 1fr; gap: 14px; max-width: 440px; }
    .odw-top-dining__deco { display: none; }
    /* ⑧b 写真ナビ: SPは横ロゴ＋2列タイル */
    /* 施設ナビ: Figma実測(SP_TOP 32:24289) グリッド幅335(左右20px)・キャプション帯28px・
       写真117px・行ピッチ157px。旧実装は左右16px・帯49px・写真103px(aspect 304/190)だった
       （AUN xbbeqy #23「カテゴリ部分をXDと同じデザインに」） */
    .odw-top-nav { padding-top: 30px; padding-left: 20px; padding-right: 20px; }
    .odw-nav-grid { grid-template-columns: 1fr 1fr; gap: 12px; }
    .odw-nav-tile__phwrap { aspect-ratio: 323 / 234; }
    /* block: nav-tile-xd-2026-08-30 XD原本と料金ページの焼込SVGが同値で、字送りは3段階。
       14px一律だと「万葉プレミア倶楽部」の字面が137pxになりラベル枠115pxを超えて2行に折れ、
       そのタイルだけ背が伸びて隣とズレていた（XD/料金ページ: 12px 0.1em で字面123.6px＝1行）。 */
    .odw-nav-tile__label { font-size: 13px; letter-spacing: 0.3em; text-indent: 0.3em; }
    /* ウェルネスだけ 0.2em。タイルの並びはPHPで固定（温泉/お食事/休処/ウェルネス/館内フロア図/万葉プレミア倶楽部）
       なので4番目を指す。PHPは141KBあり、Dropboxの部分アップロードで500になったため触らない。 */
    .odw-nav-grid > :nth-child(4) .odw-nav-tile__label { letter-spacing: 0.2em; text-indent: 0.2em; }
    .odw-nav-tile__label--l { font-size: 12px; letter-spacing: 0.1em; text-indent: 0; }
    /* 12px/0.1em でも「万葉プレミア倶楽部」の字面は117.6pxで、帯の左右padding12px＋間隔8px＋矢印11pxを
       引いたラベル枠115pxに収まらず2行に折れていた。XDは帯 x193-354 に対し文字が x208-341＝右の空きが13px
       しかない（実装は31px確保していた）。XDに合わせて確保量を減らし、1行に収める。 */
    /* /block: nav-tile-xd-2026-08-30 */
    .odw-nav-tile__bar { padding: 4px 6px 4px 10px; gap: 4px; }
    .odw-top-nav__logo { display: none; }
    .odw-top-nav__logosp { display: block; width: 274px; max-width: 82%; height: auto; margin: 0 0 16px 2px; }
    /* ⑨ プラン/クーポン: 完成図SPは横スワイプカルーセル＋ドット */
    .odw-top-offer-sec { padding-top: 36px; padding-left: 14px; padding-right: 14px; }
    .odw-top-offer-sec--coupon { padding-bottom: 52px; }
    .odw-offers--plan, .odw-offers--coupon { display: flex; gap: 14px; max-width: none; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; -webkit-overflow-scrolling: touch; scrollbar-width: none; padding: 2px 2px 6px; }
    .odw-offers--plan::-webkit-scrollbar, .odw-offers--coupon::-webkit-scrollbar { display: none; }
    .odw-offers--plan > .odw-ocard { flex: 0 0 62%; scroll-snap-align: start; }
    .odw-offers--coupon > .odw-ocard { flex: 0 0 86%; scroll-snap-align: start; }
    /* block: sp-card-figma-2026-07-28 SPのカード（AUN 3ke5pj #19「添付の形式にしてください」）
       Figma SP_TOP実測: プランのカルーセルは【画像＋タイトル2行】のみ（カテゴリ/条件/価格/属性タグ無し）。
       クーポンのカルーセルは従来どおり全情報を出す（Figmaも同じ）。 */
    .odw-offers--plan .odw-ocard__cats,
    .odw-offers--plan .odw-ocard__cond,
    .odw-offers--plan .odw-ocard__price,
    .odw-offers--plan .odw-ocard__pills { display: none; }
    /* カテゴリタグのSP実測値（XD: 50x17・文字8px。AUN 6mww5p #1-2） */
    .odw-ocard__cat { min-width: 50px; height: 17px; font-size: 8px; padding: 0 5px; }
    .odw-offers--plan .odw-ocard__title { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; font-size: 15px; line-height: 1.7; }
    .odw-offers--plan .odw-ocard { background: transparent; box-shadow: none; }
    .odw-offers--plan .odw-ocard__body { padding: 12px 2px 0; }
    /* クーポンの価格は1行に収める（「▶1名様」と金額が改行で分かれていた） */
    .odw-offers--coupon .odw-ocard__price { flex-wrap: nowrap; align-items: center; column-gap: 10px; }
    .odw-offers--coupon .odw-ocard__price .odw-ocard__ppl { font-size: 15px; white-space: nowrap; }
    .odw-offers--coupon .odw-ocard__price b { font-size: 30px; }
    /* カルーセルの左右矢印（Figma SP_TOP準拠） */
    .odw-offer-roll__nav { display: flex; position: absolute; top: 96px; width: 30px; height: 30px; display: flex; align-items: center; justify-content: center;
        border: 0; border-radius: 50%; background: rgba(255,255,255,.92); box-shadow: 0 1px 5px rgba(0,0,0,.18); color: #7a6a55; z-index: 2; cursor: pointer; }
    .odw-offer-roll__nav--prev { left: 2px; }
    .odw-offer-roll__nav--next { right: 2px; }
    /* block: sp-coupon-single-2026-07-29 (AUN 3kedw4 #38)
       クーポンは「1枚ずつ表示＋左右シェブロン」。次カードを覗かせる表示をやめる。
       XD(SP_TOP_01)実測: カードは x=30〜345（幅315px・画面中央）、丸矢印はカードの左右端に重なる。
       ビューポート幅をカード幅ぴったりにすることで、次カードは枠外に出て覗かない。
       （カード側に padding を持たせて中央寄せする方式だと gap の分だけ必ず覗いてしまう） */
    .odw-top-offer-sec--coupon .odw-offer-roll { width: 319px; margin-left: auto; margin-right: auto; }
    .odw-offers--coupon { padding-left: 2px; padding-right: 2px; }
    .odw-offers--coupon > .odw-ocard { flex: 0 0 315px; scroll-snap-align: center; }
    /* カードの白地の高さを全クーポンで揃える（AUN 3keb68 #14）。
       .odw-ocard の height:100% は親の高さが auto のため auto に解決され、
       さらに height 指定があると align-items:stretch が効かず、内容の少ないカードだけ短くなっていた。 */
    .odw-offers--coupon > .odw-ocard { height: auto; align-self: stretch; }
    .odw-offer-roll:has(.odw-offers--coupon) .odw-offer-roll__nav--prev { left: -13px; }
    .odw-offer-roll:has(.odw-offers--coupon) .odw-offer-roll__nav--next { right: -13px; }
    /* /block: sp-coupon-single-2026-07-29 */
    /* 矢印は各カルーセルの写真の縦中央に合わせる（3keb68 #15/#16。plan=62%幅/coupon=86%幅で写真高が違う） */
    .odw-offer-roll:has(.odw-offers--plan) .odw-offer-roll__nav { top: 64px; }
    .odw-offer-roll:has(.odw-offers--coupon) .odw-offer-roll__nav { top: 90px; }
    .odw-offer-roll.is-static .odw-offer-roll__nav { display: none; }
    /* 円相の背景グラフィックはFigmaのSPには無い（PCのみ）ので出さない */
    .odw-common-band .odw-top-offer-sec::before { display: none; }
    /* /block: sp-card-figma-2026-07-28 */
    /* ⑪ グループ館一覧: 完成図SPには無い */
    .odw-top-group { display: none; }
    /* ⑩ スペシャルコンテンツ: 下段バナーは2×2 */
    /* 下パディングは 056 で 44px→40px（スペシャル最終行の字面下端→次セクションの字面上端を40pxにする） */
    .odw-top-special { padding: 36px 14px 40px; }
    .odw-top-special .odw-top-feat__card { flex-basis: 76%; }
    .odw-top-splinks { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; max-width: 440px; }
    .odw-top-splink img { height: auto; width: 100%; aspect-ratio: 2 / 1; object-fit: cover; } /* SPも2:1で統一 */
    /* block: sp-terms-gap-2026-08-28 SPで利用規約ブロックと波（フッター）の間の処理
       （AUN #2-37/#3-38/#3-39 = 056/057/058）。実測:
         閉じた状態  ボタン下端9898 = フッター上端9898 → 間隔0px（指示は40px）
         開いた状態  本文下端10818 / フッター上端10824 → 間隔6px、しかもその6pxが白（指示は50px・白を無くす）
       白はブロックの外側の地色が出ていたもの。ブロック自体に地色を敷いたうえで、
       閉じた状態=40px / 開いた状態=50px になるよう padding を分ける。 */
    /* block: sp-dining-bg-2026-08-28 SPで「お食事ページはこちら」ボタンの下端(6717)と
       地色ブロック .odw-top-dining-sec の下端が同一で、そのすぐ下から白地になっていた
       （AUN #2-28 = 048「グレー背景を45pxほど伸ばしていただきたい」）。 */
    .odw-top-dining-sec { padding-bottom: 45px; }
    /* /block: sp-dining-bg-2026-08-28 */
    /* block: sp-terms-toppad-2026-09-06 「万葉倶楽部をご利用のお客様へ」の上のアキ（AUN 7dwr57 #2-37 = 056
       「40pxほど開けていただきたい」）。ピン（原寸400×10777の 左18px・上9909px）はこのバーの左上を指す。
       実測すると直前の .odw-top-special の最終行の字面下端→バーの字面上端が67pxあった。
       内訳は .odw-top-special の下パディング44px ＋ ここの上パディング23px。
       上パディングを23px→2px、.odw-top-special の下パディングを44px→40pxにして40pxに合わせる。
       ※測定時の注意: 追尾チャット（talkappi-chat）が右側に重なるため、行走査を全幅で行うと
         ウィジェットを「直前の要素」と誤認する。x0-250 に限定して測ること。 */
    .odw-top-terms { padding-top: 2px; padding-bottom: 40px; background: #f3f1ec; }
    /* /block: sp-terms-toppad-2026-09-06 */
    .odw-terms[open] { padding-bottom: 4px; } /* 元から6pxあるので 40+4+6=50px */
    /* /block: sp-terms-gap-2026-08-28 */
    .odw-terms__item { font-size: 12px; }
    /* block: sp-font-xd-svg-2026-09-04 SPの書体を支給XD（2026-09-03版 odawara_web_SP_TOP_01.svg）の
       パスを3倍で描画した字形と突き合わせて決め直した（AUN wb67rb 2-6〜2-25 = 120-122/126-128/131/132/136-139
       「フォントを入稿データと同様に」）。1倍のPNGでは太さがアンチエイリアスで揺れるため、SVGを正とする。
       ・特集本文: ヒラギノ角ゴ W3(300) がXDと一致（字形一致率 0.894、W4=0.839、濃さ 0.242 vs XD 0.239）
       ・特集見出し: 現行の W6・20px・0.07em がXDと同幅（3行とも 176.7/327.0/314.7px で一致）だが、
         枠幅339pxで2行目が「〜満たされ／る。」と折れていた。XDは字面右端 x347.7（枠右端 ≧369）なので
         見出しだけ枠を右へ12px広げる。本文はXDの折り返し（19字）に合わせ最大330px
       ・英字見出し: XDの濃さ 0.244 は W4〜W5（400=0.230 / 500=0.265）。和文W6の同条件比 0.94 を掛けると
         0.26 ＝ 500 が最寄り。字面幅 XD 105.3px に対し 500×0.28em で 105.7px
       ・「お得なプラン PLAN」「お得なクーポン COUPON」はXDで英字が和文と同じ行（右隣・空き15px）。
         他6見出しは和文1行目・英字2行目のまま */
    .odw-top .odw-top-head__en { font-weight: 500; letter-spacing: 0.28em; }
    .odw-top-offer-sec:not(.odw-top-offer-sec--evnews) .odw-top-head__ja { flex: 0 0 auto; }
    .odw-feat-block__ttl { margin-left: 3px; margin-right: -12px; }
    .odw-feat-block__body { font-weight: 300; margin-left: 3px; max-width: 330px; }
    /* /block: sp-font-xd-svg-2026-09-04 */
    /* block: vac-time-overflow-2026-09-04 本日の空き状況の時間「11:00〜18:00」が空き印の上へ飛び出していた
       （AUN wb67rb 2-9 = 123）。時間の字間 3.2px（0.32em）で字面108pxになり、名前欄129px（x116〜245）を
       超えて x288 まで伸びていた。XD（SVG 3倍描画）の時間の字面は x170〜245 の 75px＝字間ほぼ0。
       名前欄を伸縮させ、時間は字間0・左空き8px（XD: 名前字面右端161→時間170）にする。 */
    /* XD実測（行 x43〜332）: サムネ x47.7〜92.7（45px角）／名前「貸部屋」x108〜161／時間 x170〜245／
       空き印 x267〜323。実装はサムネ56px幅で名前が x116 から始まり、時間が空き印（x255）に接していた。
       サムネを45px角にして名前を x108 へ、空き印の枠を56pxにして x266 へ寄せる（時間右端245→空き印266）。 */
    /* block: vac-outline-2026-09-05 入稿のアウトライン（パス）をそのまま置くため、テキスト用の装飾を外す。
       入稿実測: 「24時間営業／年中無休」215×17（パネル中央）／電話ボタン 300×45（枠線も素材に含む）。
       パネルは x14〜361（幅347）で入稿と同値なので、ボタンは左右23pxの余白で中央に入る。 */
    .odw-vac__open--svg { margin: 14px 0 10px; font-size: 0; line-height: 0; text-align: center; }
    .odw-vac__open--svg svg { display: inline-block; width: 215px; height: auto; }
    .odw-vac__tel--svg { display: block; width: 300px; height: 45px; margin: 0 auto; padding: 0; border: 0; border-radius: 0; background: none; font-size: 0; line-height: 0; }
    .odw-vac__tel--svg svg { display: block; width: 100%; height: auto; }
    /* /block: vac-outline-2026-09-05 */
    .odw-vac__thumb { width: 45px; }
    .odw-vac__name { flex: 1 1 auto; min-width: 0; }
    .odw-vac__name i { letter-spacing: 0; margin-left: 9px; }
    .odw-vac__st { width: 56px; }
    /* /block: vac-time-overflow-2026-09-04 */
    /* block: feat-strip-white-2026-09-04 写真の寄っていない側の20px帯を白に（AUN wb67rb 2-11/2-15 = 125/129
       「背景白に統一」）。XD原本ではブロック1・3（写真左寄せ）の右帯は白（x357〜375の全画素 #fff）で、
       本文パネルの白と続いている。実装は帯がページ地色 #f3f1ec のままだった。
       ブロック2・4（写真右寄せ）の左帯はXDでも地色なので触らない。 */
    .odw-feat-blocks .odw-feat-block:nth-child(1),
    .odw-feat-blocks .odw-feat-block:nth-child(3) { background: #fff; }
    /* /block: feat-strip-white-2026-09-04 */
    /* block: nav-tile-xd-2026-09-04 写真ナビのタイルを支給XD（2026-09-03版 SP_TOP）実測へ
       （AUN wb67rb 2-20/2-21 = 134/135「矢印の印象が変わっている」「画像の縦横比や拡大率が入稿データと異なる」）。
       XD実測（タイル1「温泉」x20〜182）: 写真 162×108（3:2）／帯 28px（y6869〜6896・#ece2d8）／
       矢印 直径12px の紺丸（#165e83）で右の空き15px（x156〜167）。
       実装は 写真 323:234（117px）・帯30px・矢印22px で、写真が縦に8%伸び矢印が約2倍だった。 */
    .odw-nav-tile__phwrap { aspect-ratio: 3 / 2; }
    /* block: nav-tile-gap-match-2026-09-09 タイルの間隔を下層ページの施設ナビ（焼込SVG）へ揃える（AUN 262）。
       下層SP（/welness/ 幅375）の実測: タイルは x20..182 / x193..355（幅162）、列の空き11px、
       写真108px＋帯28px＝136px で行の送り157px＝行の空き21px。
       TOPは gap:12px 一律で 幅161.5・行の空き12px となり、行間が9px詰まっていた。 */
    .odw-nav-grid { gap: 21px 11px; }
    /* 「温泉」だけ字間が広い（下層の字面 幅37.0px ＝ 字間0.91em。休処は 29.0px ＝ 0.3em）。
       ※ラベルの水平位置は下層側が面ごとにばらつく（字面中心 72.2〜80.8）ため合わせていない。
         最長の「万葉プレミア倶楽部」は下層72.2 / TOP68.7 でほぼ一致しており、
         帯全体で中央寄せに変えると矢印に重なるので現行の寄せ方を維持する。 */
    .odw-nav-grid > :nth-child(1) .odw-nav-tile__label { letter-spacing: 0.91em; text-indent: 0.91em; }
    /* /block: nav-tile-gap-match-2026-09-09 */
    /* block: nav-tile-arrow-lower-2026-09-05 矢印を下層ページのタイルに合わせる（AUN 2026-09-04 TOP #16 = 210 再修正。
       添付「スクリーンショット 2026-09-04 19.17.24.png」の下層タイル（帯 204px 幅＝実タイル 162px の 1.259倍）を実測:
       紺丸 14×13px → 11px、帯右端〜丸右端 30px → 24px、丸の中心は帯の中心（y159/159）、中の白シェブロンは細線。
       TOPは 12px・右空き 14px だったので 11px・右空き 24px へ。帯高 28px（XD）は据え置き。 */
    .odw-nav-tile__bar { height: 28px; box-sizing: border-box; padding: 0 13px 0 8px; gap: 4px; }
    .odw-nav-tile__arrow { width: 12px; height: 12px; background: #165e83; }
    /* block: nav-tile-arrow-glyph-2026-09-09 丸の中の「>」が下層とズレていた（AUN 262 再指摘）。
       3倍解像度でのピクセル実測（温泉タイル・丸12x12px）:
         TOP  丸の中で x4.67..8.33 / y3.00..9.67（上余白3.00・下余白2.00）・白の面積 9.0px²
         下層 丸の中で x4.33..8.33 / y2.33..9.33（上余白2.33・下余白2.33）・白の面積13.1px²
       つまり TOP は「>」が 0.5px 下がって線も細かった。svg が inline のためベースラインで下がるので
       display:block にし、下層と同じ太さ・大きさになる 10.5px / stroke-width 3.2 へ。
       丸そのものの位置も 右空き21.0px（下層 19〜20px）だったので padding-right を 15→13px に。 */
    .odw-nav-tile__arrow svg { display: block; width: 10.5px; height: 10.5px; }
    .odw-nav-tile__arrow svg path { stroke-width: 3.7; }
    /* /block: nav-tile-arrow-glyph-2026-09-09 */
    /* block: nav-tile-label-x-2026-09-09 ラベルの水平位置を下層の焼込SVGに合わせる（AUN 262）。
       TOPはフレックスで「矢印を除いた残り」の中央に置くため、下層より左に寄っていた。
       下層は面ごとに手で置かれていて一定の規則が無い（字面中心 95.83〜101.00）ので、
       3倍解像度で実測した差分をタイルごとに与える。単位はSP375基準のpx。
         字面中心 TOP → 下層 : 温泉 90.50→101.00 / お食事 263.67→270.17 / 休処 90.33→101.00 /
                              ウェルネス 263.83→269.50 / 館内フロア図 89.67→95.83 / プレミア 262.83→265.33
       いちばん長い「万葉プレミア倶楽部」でも移動後の字面右端は130.8で、矢印の左端135に触れない。
       レイアウトを動かさないよう transform で寄せる。 */
    .odw-nav-grid > :nth-child(1) .odw-nav-tile__label { transform: translateX(10.5px); }
    .odw-nav-grid > :nth-child(2) .odw-nav-tile__label { transform: translateX(6.5px); }
    .odw-nav-grid > :nth-child(3) .odw-nav-tile__label { transform: translateX(10.7px); }
    .odw-nav-grid > :nth-child(4) .odw-nav-tile__label { transform: translateX(5.7px); }
    .odw-nav-grid > :nth-child(5) .odw-nav-tile__label { transform: translateX(6.2px); }
    .odw-nav-grid > :nth-child(6) .odw-nav-tile__label { transform: translateX(2.5px); }
    /* /block: nav-tile-label-x-2026-09-09 */
    /* /block: nav-tile-arrow-lower-2026-09-05 */
    /* block: nav-tile-arrow-match-2026-09-09 下層ページの施設ナビ（焼込SVG）と実測で揃える（AUN xbpe4y #1 = 261）。
       下層SP（/onsen/ 幅375）の実測: 紺丸は x156-167 / y9394-9405 の 12x12、色 #165e83、
       タイル右端182までの空き15px、中の白シェブロンは高さ約5px・線幅1pxで「>」がはっきり見える。
       TOPは 11x11・#2e6da4・右空き24pxで、さらに svg 6px に stroke-width 2.6/24 が掛かって
       線幅0.65pxとなり、シェブロンがほぼ見えない塗り丸になっていた。
       丸・色・右空きを下層に合わせ、svgは11px・stroke-width 2.2（=11px上で約1px）に上書きする。
       実測での照合: 円内12x12マスでのシェブロンの広がりは 下層が2〜9行目・4〜8列、
       svg7pxでは3〜7行目・4〜6列と小さかった。パスは24のviewBoxで縦14/24なので
       11px なら字面6.4px となり下層に一致する。
       PCは 22px・#2e6da4 のまま（この指定はSPのメディアクエリ内）。 */
    /* /block: nav-tile-xd-2026-09-04 */
    /* block: feat-photo-xd-src-2026-09-04 特集写真をXDが実際に配置している画像へ（AUN wb67rb 2-16 = 130 / 7dwr57 2-22 = 042
       「写真の比率が変わっている・余白がある」「写真が横に伸びている」）。
       支給フォルダの書き出し画像と照合（32×32グレースケールの平均絶対差）:
       ブロック4（料理）: XD配置 = SP_TOP_01-image17（750×500 の中央正方形）で差 0.5。実装の odawara_top_feat_meal.jpg
         （600×580）は別カットで差 84.8 ＝ 写真そのものが違っていた。
       ブロック2（湯河原）: XD配置 = SP_TOP_01-image54（882×931）で差 0.9。実装の onsen2.jpg（880×837）は差 23.4 ＝ 天地の切り位置が違う。
       ブロック1・3は実装画像とXD配置が同一（差 0.8 以下）なので据え置き。
       XDの中央正方形を images/top/odawara_top_feat_{onsen2,meal}_sp.jpg（710×710＝2倍）に書き出し、SPだけ差し替える（PCは焼込SVGのまま）。
       料理は同じカットの高解像度版 odawara_web_PC_shokuji_07-image19（2953×1971・差 0.35）から書き出した。 */
    .odw-feat-blocks .odw-feat-block:nth-child(2) .odw-feat-block__photo { background-image: url(../images/top/odawara_top_feat_onsen2_sp.jpg) !important; }
    .odw-feat-blocks .odw-feat-block:nth-child(4) .odw-feat-block__photo { background-image: url(../images/top/odawara_top_feat_meal_sp.jpg) !important; }
    /* /block: feat-photo-xd-src-2026-09-04 */
    /* block: feat-art-xd-2026-09-04 特集ブロック2・3の余白に、XD原本（2026-09-03版 SP_TOP_01.svg）が配置している線画を敷く
       （AUN 7dwr57 2-15/2-16/2-19 = 035/036/039「背景のグラフィック反映」「空きのデザインに」。再トリアージ 12:22）。
       SVG内の配置（画像参照は <pattern> の xlink:href）:
       ・ブロック2の下: image14（和船・2149×566）を x75〜375・y4641〜4721（300×80）。下端が次ブロックの写真上端 y4721 に接する。
         濃さはXD字面 24.2 に対し合成 0.3 で 24.2 → opacity 0.3。テーマ素材に無かったため images/top/odawara_top_art_boats.png を書き出し
       ・ブロック3の下: image6（帆船・1126×370 ＝ テーマ既存 odawara_top_art_ships.png と同一・差0.1）を x−32〜276・y5318〜5452
         （308×134、pattern は xMidYMid slice ＝ 高さ134に合わせ左右を切る）。下端が次ブロックの写真上端 y5450 に接する
       いずれもブロック1の橋（feat-art-bridge）と同じく、ボタン行の擬似要素で「パネル下padding(38px)を打ち消して次ブロックに接地」させる。 */
    .odw-feat-block:nth-of-type(2) .odw-feat-block__btns,
    .odw-feat-block:nth-of-type(3) .odw-feat-block__btns { position: relative; }
    .odw-feat-block:nth-of-type(2) .odw-feat-block__btns > *,
    .odw-feat-block:nth-of-type(3) .odw-feat-block__btns > * { position: relative; z-index: 1; }
    .odw-feat-block:nth-of-type(2) .odw-feat-block__btns::after {
        content: ""; position: absolute; right: -18px; bottom: -38px; width: 300px; height: 80px;
        background: url("../images/top/odawara_top_art_boats.png") no-repeat right bottom / 100% auto;
        opacity: 0.3; z-index: 0; pointer-events: none;
    }
    .odw-feat-block:nth-of-type(3) .odw-feat-block__btns::after {
        content: ""; position: absolute; left: -50px; bottom: -40px; width: 308px; height: 134px;
        background: url("../images/top/odawara_top_art_ships.png") no-repeat center bottom / auto 134px;
        opacity: 0.3; z-index: 0; pointer-events: none;
    }
    /* /block: feat-art-xd-2026-09-04 */
    /* block: feat-label-hiragino-2026-09-05 特集の「MANYO ODAWARA」ラベルの書体（AUN m54rn7 #4 = 198「ヒラギノ角ゴシックにしてください」）。
       入稿ではこのラベルもアウトライン化されており、字形一致率では Futura Medium Italic が最上位（0.81）だったため
       一度 Futura/Jost に寄せていた（旧 block: feat-label-futura-2026-09-05）。依頼者の確定指示でヒラギノ角ゴへ戻す。
       ヒラギノには斜体が無いので font-style は normal（合成斜体は字形が崩れるため使わない）。
       字送りは入稿の字面幅155px（x200〜355）に合わせて再計算した（12px・0.22em で実測155px）。 */
    .odw-feat-block__label { font-family: "Hiragino Sans", "Hiragino Kaku Gothic ProN", sans-serif; font-style: normal; font-weight: 600; font-size: 12px; letter-spacing: 0.22em; }
    /* /block: feat-label-hiragino-2026-09-05 */
    /* block: sp-heading-mincho-2026-09-05 SP見出し（注目のコンテンツ／今月のイベント／新着情報／お食事処／プラン／クーポン／
       イベント・お知らせ／スペシャル）の和文書体（AUN 2026-09-04 TOP #6/#7/#8/#11/#12/#13/#14/#15 = 200/201/202/205-209）。
       XD SVG を3倍描画し、1文字ずつ字形一致率を取った（22候補）。「注目のコンテンツ」: Zen Old Mincho 600 = 0.669 ＞
       凸版文久明朝 0.641 ＞ しっぽり明朝 0.640 ＞ ヒラギノ明朝W6 0.632、「新着情報・お知らせ」: 凸版文久 0.593 ＞ Zen Old Mincho 0.577 ＞
       ヒラギノ明朝W6 0.546。XDの書体そのものは候補に無かった（最上位でも 0.67）が、2見出しとも現行のヒラギノ明朝より
       近く、かつ Windows でも同じ字形で出せる Zen Old Mincho（Google Fonts）へ。字送り（0.2em・21px）は据え置き。 */
    .odw-top .odw-top-head__ja { font-family: "Zen Old Mincho", "Hiragino Mincho ProN", "Yu Mincho", serif; }
    /* /block: sp-heading-mincho-2026-09-05 */
}

/* 2026-09-05: SP入稿の字形・和英の配置・波線をそのまま表示する。 */
@media (max-width: 480px) {
    .odw-top .odw-top-head.odw-top-head--outline,
    .odw-common-band .odw-top-head.odw-top-head--outline {
        display: block;
        width: min(335px, calc(100vw - 40px));
        max-width: 100%;
        margin-left: auto;
        margin-right: auto;
        padding: 0;
        background: none;
        line-height: 0;
    }
    .odw-top-head--outline > svg { display: block; width: 100%; height: auto; overflow: visible; }
    /* block: top-left-line-2026-09-09 TOPの各項目の左端を「新着情報の画像の左端」に揃える
       （AUN xbpe4y #6/#7 = 266/267「各項目が中央寄りに見える。左揃えにして縦のラインを統一」）。
       実測（SP375）: 新着情報の画像 x14 に対し、見出しは全セクション x20、
       お食事処/プラン/イベント・お知らせの画像は x16 とバラついていた。
       見出しは入稿アウトラインSVG（width 335・margin auto）で中央寄せのため x20 になる。
       箱＝字面なので幅は変えず、左寄せにして位置だけ動かす。あわせてセクションの左右余白を14pxへ。
       クーポンのカルーセル（チラ見せ）は指示どおり維持する。 */
    .odw-top .odw-top-head.odw-top-head--outline { margin-left: 0; margin-right: auto; }
    /* block: top-left-line-rest-2026-09-13 同じ依頼で2ヶ所が基準線から外れたまま残っていた（実測）。
       .odw-top-cmp（注目のコンテンツ）は wrap の左右padding 16px で x16、
       イベントのSPバナーは max-width:330px + margin:0 auto の中央寄せで x22.5。
       依頼文が「注目のコンテンツ」を名指しし、「中央寄りなので左揃えに」と言っているので、
       padding を 14px にし、バナーの中央寄せを解除する。バナーの箱（330x247）は入稿のまま動かさない。
       ※入稿XDではこのバナーは x20-349 なので、基準線 x14 に合わせる分だけ入稿から6px左へ出る。
         入稿どおりの x20 に戻す場合は margin-left: 6px を足せば済む。 */
    .odw-top-cmp-wrap { padding-left: 14px; padding-right: 14px; }
    .odw-top-event__banner--hassp { margin-left: 0; margin-right: auto; }
    /* /block: top-left-line-rest-2026-09-13 */
    /* /block: top-left-line-2026-09-09 */
    /* block: head-outline-gap-2026-09-06 見出し下のアキを入稿実測へ合わせる
       （AUN 016/018/019/025/026/028/029/045/050/051/053/054/120-122/132/136-139/200-202/205-209 の最終検証）。
       入稿SP_TOP_01.png と SP_onsen_06.png を等倍で行走査し、見出しの最終バンド（波線または英字）の
       下端から次のコンテンツの字面上端までを測った値:
         注目のコンテンツ21 / 今月のイベント19 / 新着情報15 / お食事処20 / プラン30 / クーポン23 /
         イベント・お知らせ20 / スペシャル20
       共通帯（下層ページ）の プラン30・クーポン23・イベント20 はTOPと同値だったので、
       ページを問わず同じ値を当てる。SVGは箱＝字面なので、この差分をそのまま margin-bottom に反映する。 */
    .odw-top-head--outline.odw-top-head--featured { margin-bottom: 17px; }
    .odw-top-head--outline.odw-top-head--event    { margin-bottom: 20px; }
    .odw-top-head--outline.odw-top-head--news     { margin-bottom: 15px; }
    .odw-top-head--outline.odw-top-head--dining   { margin-bottom: 19px; }
    .odw-top-head--outline.odw-top-head--plan     { margin-bottom: 28px; }
    .odw-top-head--outline.odw-top-head--coupon   { margin-bottom: 22px; }
    .odw-top-head--outline.odw-top-head--evnews   { margin-bottom: 20px; }
    .odw-top-head--outline.odw-top-head--special  { margin-bottom: 16px; }
    /* /block: head-outline-gap-2026-09-06 */
}

/* block: evnews-head-vector-2026-09-08 共通帯「イベント・お知らせ」の文字をベクターで原寸表示する（AUN 260）。
   帯のPNG（舟の装飾）は従来どおり width:100vw。その上に見出しSVGを原寸で重ねる。
   幅648pxで和文の字面が37pxとなり、「お得なプラン」「お得なクーポン」と同値になる。
   縦位置は、従来のPNG内の見出し位置（2400px中のy138＝帯の高さの29.4%）に合わせる。 */
/* TOPにも --b3（新着情報・お知らせ）があるので、装飾と見出しを分離した共通帯だけに効かせる */
.odw-headband--split { position: relative; }
.odw-headband--split > .odw-headband__text {
	position: absolute;
	left: 50.583%;
	top: 42.23%;
	/* 523px＝プラン/クーポンと同じ和文字面37-38px。ただし帯（100vw）の中の帆船は幅に比例して縮むため、
	   狭いPC幅では固定523pxだと帆船へ寄っていく。帆船の右端は 651/2400=27.125vw、見出しの中心は
	   50.583vw なので、間隔15pxを残せる最大幅は (50.583-27.125)*2vw-30px＝46.9vw-30px。
	   1200px以上では491pxが選ばれ、それ未満では自動で縮む（band-head-clamp-2026-09-08）。 */
	/* 幅は同じ字で比べて決める（band-head-size-2026-09-08）。行ブロックの高さで合わせると
	   イベント側は最も背の高い「知」、プラン側は「得」が基準になり、同じ字が6%大きくなっていた。
	   同一字「お」の字面：プラン/クーポン 37x31px。イベントは523pxで39x33pxだったので
	   523 x 31/33 = 491px。縦線の高さも 37→35px でプラン(35)/クーポン(36)と揃う。 */
	width: min(491px, calc(46.9vw - 30px));
	height: auto;
	transform: translate(-50%, -50%);
	pointer-events: none;
}

/* ===========================================================================
   block: top-section-gap-2026-09-15  TOPのセクション間余白（AUN 318-325）
   ---------------------------------------------------------------------------
   依頼は「共通帯」トリアージだが、AUN原画像は TOP のフルページ（PC 1280x10227 /
   SP 375x10443）で、実測の scrollHeight（PC 10253 / SP 10284）とほぼ一致する。
   TOP には .odw-common-band が無く、プラン/クーポンは page-top.php 自身のセクション。
   下層の共通帯へ波及させない方針（依頼者判断）なので、すべて .odw-top で限定する。

   余白は「上の要素の描画下端 → 下の見出しの描画上端」で測る。
   見出し画像・焼込SVGは内部に透明帯を持つため、ボックスの間隔とは一致しない。
   =========================================================================== */
@media (min-width: 768px) {
    /* AUN 320: お食事ボタン下端 → 施設ナビのタイル上端を 30px（実測 105px）。
       施設ナビは焼込SVGで、SVGの上側に透明帯が 46.7px ある（ボックス上端 6295.3 に対し
       インク開始 6406）。padding-top を 0 にしても 47px 残るので、不足ぶんを負のマージンで補う。
       64(padding) + 11(margin) = 75px 詰めて 105 → 30px。 */
    .odw-top .odw-top-nav--svg { padding-top: 0; margin-top: -11px; }

    /* AUN 318（2026-09-15 12:40 の再指示で基準を変更）:
       「お得なプランのロゴの上に 100px の余白」。参考画像で確認したところ、指しているのは
       ベージュ帯（セクションの地色）が始まってからロゴまでの距離で、実測 18px だった。
       初回は「施設ナビのタイル下端 → ロゴ上端」を 100px と解釈して padding-top を 18px にしたが、
       基準が違ったので padding-top をそのまま 100px にする。
       この上にある白い 82.5px は施設ナビの焼込SVGが持つ下側の透明帯で、ここでは動かさない
       （タイル下端からロゴまでの合計は 182px になる）。 */
    .odw-top .odw-top-offer-sec:not(.odw-top-offer-sec--coupon):not(.odw-top-offer-sec--evnews) { padding-top: 100px; }

    /* AUN 319: プラン「一覧を見る」下端 → 「お得なクーポン」見出し上端を 80px（実測 48px）。
       ここだけ広げる方向。 */
    .odw-top .odw-top-offer-sec--coupon { padding-top: 80px; }

    /* AUN 321: 「万葉倶楽部をご利用のお客様へ」下端 → 「万葉倶楽部グループ各館」見出し上端を
       50px（実測 98px）。.odw-top-group は TOP 専用（SPは display:none）。 */
    .odw-top .odw-top-group { padding-top: 48px; }
}

@media (max-width: 767px) {
    /* AUN 322-325: SPは「ピル／タイル下端 → 次セクションの見出し上端」を 4 箇所とも 60px。
       実測 322=116 / 323=36 / 324=88 / 325=36。
       間隔は「上セクションの padding-bottom ＋ 下セクションの padding-top」の和なので、
       上側を 0 にそろえ、下側を 60 に統一して二重加算を避ける。
         322 = nav pb 80→0   + offer pt 36→60 = 60
         323 = offer pb 0     + offer pt(クーポン) 36→60 = 60
         324 = coupon pb 52→0 + offer pt(イベント) 36→60 = 60
         325 = evnews pb 0    + special pt 36→60 = 60 */
    /* 2026-09-15 追記: タイル下端→見出しの 60px はそのままに、その内訳を
       「白 30px ＋ ベージュ 30px」にする。白いのは .odw-top-nav の背景(#fff)で、
       ベージュは .odw-top のページ地色。境目＝ナビの下端なので、
       ナビの padding-bottom が白の帯の高さになる。 */
    .odw-top .odw-top-nav { padding-bottom: 30px; }
    .odw-top .odw-top-offer-sec { padding-top: 60px; }
    /* プラン側だけ 30px。クーポン(323)・イベント(324)は 60px のまま据え置く。 */
    .odw-top .odw-top-offer-sec:not(.odw-top-offer-sec--coupon):not(.odw-top-offer-sec--evnews) { padding-top: 30px; }
    .odw-top .odw-top-offer-sec--coupon { padding-bottom: 0; }
    .odw-top .odw-top-special { padding-top: 60px; }
}