@charset "utf-8";
/* =====================================================================
 * 小田原館トップ 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）。テーマ既定のメイリオ優先だと字幅・折返しがずれるため上書き */
.odw-top, .odw-top-nav, .odw-band--white { 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 で完結させ
   ラスターのにじみを防ぐ。ホットスポットは画像に対する % 座標で絶対配置。 */
/* AUN 7/22 TOP#49【トップイメージ配置調整】: トップイメージはページ最上部から出し、
   ヘッダーがその上に重なるようにする（支給XDはヘッダーの下から始まる形だったが、後の指示で変更）。
   ヘッダーを sticky から fixed に変えると流れから外れ、本文が最上部から始まる。TOPページだけに効かせる。 */
body.page-id-204551 .odw-header-pc,
body.home .odw-header-pc { position: fixed; top: 0; left: 0; right: 0; width: 100%; }
@media (max-width: 480px) {
    body.page-id-204551 .odw-header-sp,
    body.home .odw-header-sp { position: fixed; top: 0; left: 0; right: 0; width: 100%; }
}
/* 001: 固定ヘッダーがメインビジュアルの上端を覆っていた。支給TOPは全高770px＝ヘッダー97px＋写真673px
   （top_pc_0001.svg の viewBox も "0 97 1200 673" でヘッダー分のオフセットを持つ）。
   vol2 AUN ヘッダー#3・#5 で PC ヘッダーは「白帯 57px 固定・茶帯はスクロール後に重ねて表示」へ変更したため、
   常時占める高さは 57px。画面幅に比例させず固定値で送る（SPはヘッダーSVGが 375x60 なので従来どおり比率）。 */
body.page-id-204551 .odw-top-hero,
body.home .odw-top-hero { padding-top: 57px; }
@media (max-width: 480px) {
    body.page-id-204551 .odw-top-hero,
    body.home .odw-top-hero { padding-top: calc((100vw - var(--sbw, 0px)) * 60 / 375); }
}
.odw-top-hero { position: relative; max-width: none; 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: calc(100vw - var(--sbw, 0px)); position: relative; left: 50%; margin-left: calc(-50vw + var(--sbw, 0px) / 2); font-size: 0; line-height: 0; }
.odw-top-hero__cover > svg { width: 100%; height: auto; display: block; }
/* フローティングボタン（指示: 左=チケット 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; }
.odw-float--contact { right: 0; bottom: 100px; gap: 4px; }
.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; } }

/* ── ② 重要なお知らせ帯（ACF: 表示ON＋本文あり時のみ描画） ── */
.odw-top-notice-wrap { max-width: 1200px; margin: 0 auto; padding: 36px 16px 0; }
/* Figma実測: 幅800 / 枠3px #DE0000・角丸なし / 地色 #faf5fa / 見出し #DE0000 */
.odw-top-notice { max-width: 800px; margin: 0 auto; border: 3px solid #DE0000; border-radius: 0; background: #faf5fa; 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: #DE0000; font-size: 19px; font-weight: 700; letter-spacing: 0.06em; }
.odw-top-notice__ico { flex: none; }
/* 本文色はFigma実測 #1942CB（PC/SPとも最濃部が同値）。従前は #3a4a5a */
.odw-top-notice__body { margin: 0; color: #1942CB; 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 ── */
.odw-top-head { text-align: center; margin: 0 0 26px; }
/* AUN #4等: 特殊フォント見出しをFigma書き出し画像で表示（JA＋バー＋EN一体・透過PNG）。PC=画像 / SP=テキスト */
.odw-top-head--img { line-height: 0; text-align: center; margin: 0 0 26px; }
/* 支給XDの書き出しを等倍で出す。高さを一律62pxに固定すると、支給の 60/63/66px が
   ±3〜6% 拡縮されて字形が支給と変わる（AUN 073/076/079/082 の再確認で判明）。 */
.odw-top-head__img { display: inline-block; width: auto; height: auto; max-width: 90%; object-fit: contain; }
.odw-top-head__img--sp { display: none; } /* SP用書き出しはPCでは出さない */
.odw-top-head--txt { display: none; }
.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; }
.odw-top-head__en { margin: 0; font-size: 14px; letter-spacing: 0.32em; text-indent: 0.32em; color: #4f7fa8; font-weight: 600; }

/* ── ④ 注目のコンテンツ スライダー
   デザイン実測: カード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; }

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

/* ── ⑤ 今月のイベント（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; overflow: visible; max-width: 1200px; margin: 0 auto; padding: 78px 16px 40px; } /* 004: 一覧ボタン下端→温泉紹介帯上端を40pxにする（実測94→40） */
/* vol2 AUN 全ページ共通#3(V2-022): 旧AUN#8 で .odw-top-news に overflow:hidden を入れ、舟(x=-43)を支給SVGの
   clipPath(#r: 1200x617) と同じ位置で切っていた。1200px幅では画面端と一致するので問題ないが、
   1500/1920px では中央寄せの1200pxボックスの左端＝画面から360px内側で切れ、宙で断ち切られて見える。
   ここでは切らず、親 .odw-top（overflow-x:hidden）に画面端で切らせる。1200pxでの見え方は従来と同じ。 */
.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; }
/* AUN #8: 舟の挿絵が入稿より小さく見切れていた。
   支給SVGの実体は <rect width="308" height="134" transform="translate(-43 1865)" fill="url(#s)">。
   ＝表示 308x134・x=-43（左へ意図的にはみ出し、親のクリップで切る）。
   462x201 は pattern 側の元解像度なので表示値ではない（アセットはその462x201をそのまま使う）。
   親 .odw-top-news に overflow:hidden を与えて、支給SVGの clipPath(#r: 1200x617) と同じ切り方にする。 */
/* AUN 077(#8): 舟のあしらいが入稿サイズより小さく見切れていた。
   支給XD(PC_TOP)の実体は <rect width="308" height="134" transform="translate(-43 1865)">、
   同じ面の見出し head_event.png は y=1871。＝308×134・x=-43・見出しの6px上。
   以前は「見出しの20px上・左へ約10px」と読み違えて 310×135 / top:58 / left:-50 にしていた。
   セクションの上パディングが78pxなので top: 78-6 = 72px。素材(462×201)と同比率(2.2985)。 */
/* vol2 AUN 全ページ共通#3(V2-022): 最新指示では舟の左端が切れないことを優先する。 */
/* AUN vol2 022/031「背景のグラフィックが切れている」(PC):
   素材 machida_top_deco_ship.png(462x201) は支給の時点で左右とも断ち切られている
   （左端に17px・右端に21pxの不透明画素が残り、余白0）。支給SVGでも
   <rect width="308" height="134" transform="translate(-43 1865)" fill="url(#t)"/> と
   1200のアートボード左端から43px食い込ませた配置になっている。
   実装は max-width:1200 の中で left:0 だったため、幅が広がるほど断ち切り面が
   画面から離れ（1500で150px、1920で360px）、宙で途切れて見えていた。
   029/030 の円形装飾と同じ扱いにして、断ち切り面を画面端へ合わせる。
   ★2026-09-19 決定: この形(画面端そろえ)で確定。left:0 へは戻さない。
     一時的に left:0 とした経緯があるが、幅1500/1920で断ち切り面が画面の中ほどに
     出てしまい、AUNの指摘が再発するため採用しない。 */
/* vol3 AUN TOP#2「イラストの下の方が少し切れている」(PC):
   9/19 に差し替えた 532x154 の素材は船底の手前で水平に断ち切られていた。
   支給XD（machida_web_PC_TOP.svg の image10 462x201 を 308x134 で表示）と同じ絵柄の
   750x326 版（=9/19 以前の素材・比率 2.30 で同一）へ戻し、表示寸法も XD の 308x134 に戻す。 */
.odw-top-news__deco { position: absolute; top: 72px; left: calc(50% - 50vw + var(--sbw, 0px) / 2); width: 308px; height: 134px; z-index: 0; pointer-events: none; }

/* ── 見出し帯（PC: デザイン原本パーツSVG 0001/0002/0003/0013。挿絵込み）
   帯は横100%（フルブリード）で表示し、直下のコンテンツを -100px 重ねて帯下部の余白に食い込ませる ── */
.odw-headband { width: calc(100vw - var(--sbw, 0px)); position: relative; left: 50%; margin-left: calc(-50vw + var(--sbw, 0px) / 2); max-width: none; font-size: 0; line-height: 0; }
.odw-headband > svg { 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; }
/* 見出し画像帯（プラン/クーポン/スペシャル: 0015/0016切り出しの明朝見出し。背景テクスチャ込み） */
.odw-headimg { width: calc(100vw - var(--sbw, 0px)); position: relative; left: 50%; margin-left: calc(-50vw + var(--sbw, 0px) / 2); max-width: none; font-size: 0; line-height: 0; margin-bottom: 8px; }
.odw-headimg img { width: 100%; height: auto; display: 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: -10.4vw; }

/* ── ⑦ 温泉/休処/料理（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); }
/* Figma: 「お食事処のお知らせ」と施設ナビ6タイルの間の右端に入る渡し舟のあしらい。
   バンドSVGより上・ホットスポット(z-index:5)より下に置く。SPは非表示（Figma SPには無い）。
   実装はカード下端〜タイル上端の間隔がFigmaより90px狭いため、あしらいはその余白の中央に置く
   （Figmaはカード下から68px・タイル上まで70px。実装は上下とも約22px）。 */
.odw-top-nav--svg .odw-top-nav__deco { position: absolute; right: 0; top: -95px; width: 322px; height: auto; z-index: 2; pointer-events: none; }

/* ── ⑦(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のみのアイコン行 */
/* ⑦ボタン共通 */
.odw-fbtn { position: relative; display: flex; align-items: center; justify-content: center; padding: 15px 48px 15px 24px; border-radius: 6px; font-size: 16px; font-weight: 600; letter-spacing: 0.1em; text-decoration: none; box-shadow: inset 0 0 0 2px rgba(255,255,255,.9), 0 2px 6px rgba(0,0,0,.12); transition: background-color .25s; }
.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〜。白地×紺枠アウトライン） ── */
.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: 246px; padding: 18px 52px 18px 28px; border-radius: 32px; background-color: #fff; background-image: linear-gradient(to right, #a55713 50%, rgba(255,255,255,0) 50%); background-size: 210% 100%; background-position: 100% 0; background-repeat: no-repeat; border: 1.5px solid #a55713; color: #1a1a1a; 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; } /* 仕様書: 背景が左から右へ茶に変化 */
/* AUN #9/#12/#15/#18: 円で囲まない裸シェブロン（茶）。hover時は文字と同じ白へ追従 */
.odw-top-pill__a { position: absolute; right: 20px; top: 50%; transform: translateY(-50%); display: inline-flex; align-items: center; justify-content: center; color: #a55713; }
.odw-top-pill > a:hover .odw-top-pill__a { color: #fff; }

/* ── ⑧ お食事処のお知らせ（デザイン実測: ポスター300・間隔48・全幅996・説明→ピル56） ── */
.odw-top-dining-sec { position: relative; max-width: 1200px; margin: 0 auto; padding: 72px 16px 0; } /* 005: 岩盤浴帯下端→見出し可視上端を100pxにする（見出し画像の上焼込余白は実測0px／実測96→100） */
.odw-top-dining-sec .odw-top-head { position: relative; z-index: 1; }
.odw-top-dining-sec .odw-top-pill { margin-top: 31px; } /* 006: 一覧ボタンを25px上へ（56→31） */
.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); }
/* vol3 AUN TOP#3・#7「サムネサイズをA4の比率に合わせて高さを縮めて（POPの両側が切れてしまうので）」(PC/SP):
   300:457（=1:1.523）だと A4 縦（210:297 = 1:1.414）の POP が左右で切れていた。 */
.odw-dcard__thumb { display: block; aspect-ratio: 210 / 297; overflow: hidden; background: #ece7dd; }
.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; justify-content: space-between; gap: 10px; }
.odw-dcard__date { font-size: 12px; color: #868686; letter-spacing: 0.06em; }
.odw-dcard__badge { background: #d61518; color: #fff; font-size: 11px; line-height: 1; padding: 5px 10px; border-radius: 2px; }
.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; }
.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; justify-content: center; padding: 20px 40px; background: #ece6da; }
.odw-nav-tile__label { 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; } /* 館内フロア図/万葉プレミア倶楽部 */
.odw-nav-tile__arrow { position: absolute; right: 14px; top: 50%; transform: translateY(-50%); width: 22px; height: 22px; border-radius: 50%; background: #2e6da4; display: flex; align-items: center; justify-content: center; }
.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 ── */
/* vol2 AUN TOP#4・#5(V2-029/030): 円形筆描きは支給素材の時点で端が断ち切られている
   （machida_top_deco_circle_plan.png は右端に138/898px、幅1200のアートボード端で切った書き出し）。
   1200pxでは画面端と一致するが、1500/1920pxでは中央寄せ1200pxボックスの端＝画面から
   150/360px内側で切れ、宙で断ち切られて見える。装飾だけを画面端まで寄せ、
   切り口を画面端に一致させる（1200pxでの見え方は従来と同じ）。
   overflow は visible にし、親 .odw-top（overflow-x:hidden）に画面端で切らせる。 */
.odw-top-offer-sec { position: relative; overflow: visible; max-width: 1200px; margin: 0 auto; padding: 48px 16px 0; } /* 見出し画像に上余白35px焼込のため84→48 */
/* 009/011: 支給 top_pc_0011 のプラン帯右上・クーポン帯左上の円形筆描き装飾（#E3E1D9・347パス）。
   支給は帯の外へはみ出して切れているので、切れた形のまま書き出して帯の端へ寄せる。
   縦位置は支給の帯上端からの距離（プラン+6.27px／クーポン+31.07px）。カードより後ろへ置く。 */
.odw-top-offer__deco { position: absolute; z-index: 0; height: auto; pointer-events: none; }
.odw-top-offer__deco--plan { right: calc(50% - 50vw + var(--sbw, 0px) / 2); top: 6.27px; width: 320.27px; }
.odw-top-offer__deco--coupon { left: calc(50% - 50vw + var(--sbw, 0px) / 2); top: 31.07px; width: 370.74px; }
.odw-top-offer-sec > *:not(.odw-top-offer__deco) { position: relative; z-index: 1; }
.odw-top-offer-sec--coupon { position: relative; padding-top: 42px; padding-bottom: 130px; } /* 010: プラン一覧ボタン下端→クーポン見出し可視上端を70pxにする（見出し画像の上焼込余白は実測28px／実測76→70） */
/* クリーム帯→白帯の境界に跨る雲あしらい（完成図実測: 左=白雲+金雲小/右=金雲） */
.odw-cloud { position: absolute; z-index: 1; height: auto; pointer-events: none; }
.odw-cloud--wl { left: 20px; bottom: -95px; width: 330px; }
.odw-cloud--gl { left: -34px; bottom: -140px; width: 150px; }
.odw-cloud--gr { right: -16px; bottom: -35px; width: 255px; }
.odw-offers { display: grid; gap: 26px; margin: 0 auto; }
/* SPカルーセル用のドット（PCはグリッドで is-static → 非表示） */
.odw-offer-roll__dots { display: flex; justify-content: center; gap: 10px; margin-top: 18px; }
.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; }
.odw-ocard { display: flex; flex-direction: column; background: #fff; box-shadow: 0 1px 8px rgba(0,0,0,.08); text-decoration: none; color: #4a4038; overflow: hidden; transition: box-shadow .2s; }
/* AUN 7/22 TOP#14・#17: PCのカードは一覧ページと同じ生成物（odw_card_*_html）をそのまま置く。
   影とホバーの拡大だけ一覧カードにそろえる。 */
.odw-offers--xcard { align-items: start; }
a.odw-ocard-x { display: block; text-decoration: none; color: inherit; box-shadow: 0 3px 6px rgba(0,0,0,.16); transition: box-shadow .2s; }
a.odw-ocard-x:hover { color: inherit; text-decoration: none; box-shadow: 0 5px 16px rgba(0,0,0,.2); }
a.odw-ocard-x .odw-mfb__photo { transition: transform .4s ease; }
a.odw-ocard-x:hover .odw-mfb__photo { transform: scale(1.06); }
a.odw-ocard:hover { box-shadow: 0 5px 16px rgba(0,0,0,.14); }
.odw-ocard__thumb { position: relative; display: block; aspect-ratio: 16 / 9; overflow: hidden; background: #ece7dd; }
/* AUN #17: 割引バッジ（最大N0%OFF・一覧ページ準拠の赤丸） */
.odw-ocard__off { position: absolute; left: 10px; top: 10px; z-index: 2; width: 68px; height: 68px; border-radius: 50%; background: #a30a1d; color: #fff; display: flex; flex-direction: column; align-items: center; justify-content: center; line-height: 1; text-align: center; }
.odw-ocard__off small { font-size: 11px; font-weight: 700; }
.odw-ocard__off b { font-size: 22px; font-weight: 700; margin: 1px 0; }
.odw-ocard__thumb > img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .4s; }
a.odw-ocard:hover .odw-ocard__thumb > img { transform: scale(1.06); } /* 仕様書: hoverで画像を拡大 */
.odw-ocard__body { display: flex; flex-direction: column; gap: 9px; padding: 14px 16px 18px; }
.odw-ocard__cats { display: flex; flex-wrap: wrap; gap: 6px; }
/* SVG実測: バッジ10px/タイトル18px W6/条件12px W3/通常価格16px W4/クーポン価格37px・円21px・(税込)12px/プラン価格16px */
/* AUN #14/#17: カード仕様を一覧ページ（.mcp-badge/.mcp-title 等）に統一 */
.odw-ocard__cat { color: #fff; font-size: 10px; line-height: 1.4; min-width: 65px; padding: 3px 12px; border-radius: 2px; letter-spacing: 0.05em; text-align: center; }
.odw-ocard__title { font-size: 15px; font-weight: 600; line-height: 1.55; letter-spacing: 0.02em; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-height: 46px; }
.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; }
.odw-ocard__price { font-size: 13px; font-weight: 700; color: #333; display: flex; align-items: baseline; flex-wrap: wrap; }
.odw-offers--plan .odw-ocard__price { font-size: 12px; font-weight: 400; }
.odw-offers--plan .odw-ocard__price b { font-size: 16px; letter-spacing: 0.1em; color: #bd272d; }
.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; }
/* AUN #17: 価格前の▶は#000000に統一（一覧ページ準拠） */
.odw-ocard__tri { align-self: center; width: 0; height: 0; border-style: solid; border-width: 5px 0 5px 7px; border-color: transparent transparent transparent #000000; margin-right: 5px; }
.odw-ocard__pills { display: flex; flex-wrap: nowrap; gap: 5px; margin-top: 2px; overflow: hidden; white-space: nowrap; } /* vol2 V2-032: PC/SPとも特徴タグは1行まで */
.odw-ocard__pill { font-size: 10px; color: #6a5f50; background: #f2eee5; border: 1px solid #e2dccf; border-radius: 3px; padding: 4px 7px; line-height: 1; }
.odw-ocard__cpnbtn { position: relative; display: flex; align-items: center; justify-content: center; margin-top: 8px; padding: 13px 30px; 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） ── */
/* vol2 AUN TOP#8【スペース追加】(PC): 一覧の最終行からフッターの波まで 60px。
   7/22 TOP#23 で 28px へ詰めた指示を vol2 が上書きする（vol2 優先）。
   実測: 下padding 28px のとき DOM間隔28px・可視間隔29px（波の頂点まで）。
   下padding を 60px にすると可視間隔も 60px 付近になる（波の頂点＝フッター上端のため）。 */
.odw-top-group { max-width: 1100px; margin: 0 auto; padding: 96px 16px 60px; }
/* 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; }
/* AUN #22: 地図の高さが大きく見切れていた。原因は旧アセットが縦長(540x960)だったこと。
   XD書き出し(image46=820x762)へ差し替え、幅もXDの配置実測 410px に合わせる。 */
.odw-top-group__map { flex: 0 1 410px; max-width: 410px; }
.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: 6px; text-decoration: none; color: #3a3a3a; font-size: 14px; letter-spacing: 0.05em; line-height: 1.4; }
.odw-grp-list a:hover { color: #a55713; } /* vol3 AUN TOP#4: マウスオーバーは茶色 #A55713（旧 #1a4e70） */
.odw-grp__a { flex: none; width: 18px; height: 18px; background: #2b2b2b; border-radius: 50%; display: flex; align-items: center; justify-content: center; }

/* ── ⑩ スペシャルコンテンツ（デザイン実測: 白帯上端→見出し28・バナー下→白帯終端84、
   下段バナーは高さ138で幅可変(276/258/228/240)のflex中央寄せ） ── */
/* クーポンの前後ボタンはSP専用。PCでは出さない
   （位置と display の指定がSPのメディアクエリ内にしか無く、PCでは素のボタンが
     カルーセル左上に並んで出てしまっていた） */
.odw-offer-nav { display: none; }

/* 見出し帯（雲のあしらい）は画面幅いっぱいに広げる。中身は1200pxのまま中央に置く */
/* vol2 AUN 全ページ共通#1・#2(V2-020/021): overflow-x:hidden だけを指定すると overflow-y が auto に
   繰り上がり、縦もスクロールコンテナになる。雲(top:-53px)が上53pxぶん切れていた原因。
   overflow-x:clip なら他軸を巻き込まないので、横だけ切って縦は見せられる。
   hidden は clip 非対応ブラウザ向けの前置き（その場合の挙動は従来どおり）。 */
.odw-top-special { position: relative; width: calc(100vw - var(--sbw, 0px)); margin-left: calc(50% - 50vw + var(--sbw, 0px) / 2); margin-right: calc(50% - 50vw + var(--sbw, 0px) / 2); padding: 58px 16px 84px; overflow-x: hidden; overflow-x: clip; overflow-y: visible; } /* vol3 AUN TOP#5: 見出し上の余白を30px足す（28→58・PC。SPは下のメディアクエリで別指定） */
.odw-top-special > *:not(.odw-top-special__cloud) { max-width: 1200px; margin-left: auto; margin-right: auto; }
/* XD PC TOP / V2-031: スペシャル帯の雲は完全原本3点を個別配置する。
   XDの帯開始 y=8618 を基準にした実測:
   左ベース 341.55x138, y=-54.28／左柄 300.77x131, y=-13.08, opacity .62, 左右反転／
   右柄 374x158, y=-18.60, opacity .646669。柄2点はXDの cover 指定も維持する。
   XDでは左右をアートボード外へ出しているが、AUN「グラフィックが切れる」対応として
   画像全体を画面内に収める。上下位置と各画像の倍率はXD値を維持する。 */
.odw-top-special__cloud { position: absolute; height: auto; z-index: 0; pointer-events: none; }
.odw-top-special__cloud--l-base { left: 0; top: -54.28px; width: 341.55px; height: 138px; object-fit: fill; }
.odw-top-special__cloud--l-pattern { left: 0; top: -13.08px; width: 300.77px; height: 131px; object-fit: cover; opacity: .62; transform: scaleX(-1); }
.odw-top-special__cloud--r-pattern { right: 0; top: -18.60px; width: 374px; height: 158px; object-fit: cover; opacity: .646669; }
.odw-top-special > *:not(.odw-top-special__cloud) { position: relative; z-index: 1; }
.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: auto; }
.odw-top-special .odw-top-feat__cap { text-align: center; margin-top: 16px; }
.odw-top-special .odw-top-feat__dots { margin-top: 20px; }
.odw-top-splinks { display: flex; justify-content: center; align-items: flex-start; gap: 12px; max-width: 1060px; margin: 34px auto 0; }
.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); }
.odw-top-splink img { display: block; height: 138px; width: auto; max-width: 100%; }

/* ⑩ 利用案内アコーディオン（native details。デザイン実測: 帯上端→ボタン58・ボタン→本文30） */
.odw-top-terms { max-width: 1000px; margin: 0 auto; padding: 58px 16px 0; }
.odw-terms__btn { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 12px; max-width: 440px; margin: 0 auto; padding: 15px 30px; background: #1b2a4a; color: #fff; border-radius: 30px; font-size: 15px; font-weight: 600; 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: 22px; height: auto; }
.odw-terms__chev { display: inline-flex; transition: transform .2s; }
.odw-terms[open] .odw-terms__chev { transform: rotate(180deg); }
.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; justify-content: space-between; 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; }
.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-more > a { position: relative; display: inline-flex; align-items: center; justify-content: center; min-width: 240px; padding: 18px 52px 18px 44px; border: 1.5px solid #a55713; border-radius: 32px; color: #1a1a1a; font-size: 16px; font-weight: 600; letter-spacing: 0.05em; text-decoration: none; background-image: linear-gradient(to right, #a55713 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; }
/* AUN #9/#30: newsボタンにも裸シェブロン（茶）を表示 */
.odw-top-more__a { position: absolute; right: 20px; top: 50%; transform: translateY(-50%); display: inline-flex; align-items: center; justify-content: center; color: #a55713; }
.odw-top-more > a:hover .odw-top-more__a { color: #fff; }
.odw-top-more > a:hover { background-position: 0 0; color: #fff; } /* 仕様書: 背景が左から右へ紺に変化 */

/* ── タブレット（〜1060px。iPad mini 768px等でのPCレイアウト崩れ対策） ────── */
@media (max-width: 1060px) {
    /* スペシャルバナー行: 固定高138pxのflexが横あふれするため折返し */
    .odw-top-splinks { flex-wrap: wrap; justify-content: center; }
    .odw-top-splink img { height: 108px; }
}
@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; }
    /* AUN #33/#36/#37: 各セクションの「一覧を見る」ボタンサイズを㉚(news版)に統一 */
    .odw-top-more > a, .odw-top-pill > a { min-width: 0; width: 100%; max-width: 320px; }
    .odw-top-pill { text-align: center; }
    /* AUN #32: お食事処のお知らせの「一覧を見る」ボタンまでの余白を10px詰める(56→46) */
    /* AUN 7/22 TOP#32: お食事処のお知らせは「一覧を見る」まで少し遠いので10px詰める */
    .odw-top-dining-sec .odw-top-pill { margin-top: 36px; }
    .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; }
    /* 共通見出し(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='36' height='6' viewBox='0 0 36 6'%3E%3Cpath d='M0 3 q4.5 -3 9 0 t9 0 t9 0 t9 0' fill='none' stroke='%23c9c4b8' stroke-width='1.2'/%3E%3C/svg%3E") repeat-x left bottom; }
    /* AUN SP#26/#29/#31/#34/#40/#41: SPも特殊フォント（Figma書き出し画像）で表示。
       ただしFigmaのSP見出しはPCと意匠が別（左寄せ・縦バー無し・ENは下段/右並び）なので、
       PC用画像を流用せず SP用書き出し（head_sp_*.png・原寸1x）を出す。 */
    /* 左寄せ・波線下線は上の .odw-top .odw-top-head が担当（--img も同じ要素なので継承される） */
    .odw-top-head--img { display: block; }
    .odw-top-head--img .odw-top-head__img { display: none; }
    .odw-top-head--img .odw-top-head__img--sp { display: inline-block; width: auto; height: auto; max-width: calc(100% - 8px); }
    .odw-top-head--txt { display: none; }
    .odw-top .odw-top-head__ja { display: block; font-size: 18px; gap: 0; letter-spacing: 0.15em; text-indent: 0; margin: 0 0 7px; }
    .odw-top .odw-top-head__bar { display: none; }
    .odw-top .odw-top-head__en { font-size: 10px; letter-spacing: 0.24em; text-indent: 0; }
    .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; }
    /* Figma実測(375幅): 注目のコンテンツ／スペシャルのカルーセルもカード240px・中央寄せ・
       左右47pxずつ前後が覗く・カード間21px。ラッパの左右padding14pxを打ち消してフルブリード化する。 */
    .odw-top-feat__track { width: calc(100vw - var(--sbw, 0px)); margin-left: calc(50% - 50vw + var(--sbw, 0px) / 2); margin-right: calc(50% - 50vw + var(--sbw, 0px) / 2); gap: 21px; padding: 4px 67px 6px; }
    .odw-top-feat__card { flex-basis: 240px; scroll-snap-align: center; }
    /* AUN vol2 035/047/023: SPでもスライド可能と分かるよう左右の矢印を出す。
       寸法はSPで既に出ているクーポンスライダーの矢印(.odw-sp-cp-slider .nav)と同じ30px。
       縦位置は基底の top:4px / bottom:92px / margin-block:auto のままでサムネ中心と一致する。 */
    .odw-top-feat__nav { display: flex; width: 30px; height: 30px; }
    .odw-top-feat__cap { margin-top: 12px; font-size: 13px; }
    .odw-top-feat__dots { margin-top: 18px; }
    .odw-top-event { padding-top: 38px; }
    /* ⑥ 新着情報: 完成図SPはサムネ左42%の行リスト（白カードなし） */
    .odw-top-news { padding: 36px 14px 42px; }
    .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; }
    /* ⑦ 特徴ブロック: 写真全幅→ラベル→本文（flex解除が必須） */
    .odw-feat-block, .odw-feat-block--photoR { flex-direction: column; min-height: 0; }
    .odw-feat-block__photo { flex: none; width: 100%; height: 220px; min-height: 0; }
    .odw-feat-block__panel { display: block; padding: 26px 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-block--photoL .odw-feat-block__label, .odw-feat-block--photoR .odw-feat-block__label { left: auto; right: auto; }
    .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; }
    .odw-feat-block__ttl { font-size: 19px; line-height: 1.6; }
    .odw-feat-block__body { font-size: 14px; line-height: 2.0; max-width: none; }
    .odw-feat-block__btns { max-width: none; margin-top: 24px; }
    .odw-feat-art { display: none; } /* PC専用の挿絵配置（SPは別レイアウト） */
    .odw-cloud { display: none; }
    .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; }
    .odw-top-dining { grid-template-columns: 1fr 1fr; gap: 14px; max-width: 440px; }
    .odw-top-dining__deco { display: none; }
    /* ⑧b 写真ナビ: SPは横ロゴ＋2列タイル */
    .odw-top-nav { padding-top: 30px; }
    .odw-nav-grid { grid-template-columns: 1fr 1fr; gap: 12px; }
    .odw-nav-tile__label { font-size: 14px; }
    .odw-nav-tile__bar { padding: 14px 30px; }
    .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; }
    .odw-top-offer__deco { display: none; } /* 009/011: PC専用のあしらい（SPの支給素材は未受領） */
    .odw-top-offer-sec--coupon { padding-bottom: 52px; }
    /* 帯はフルブリード（AUN #35/#38「表示範囲を右端まで」）。見出し・ピルは中央のまま */
    .odw-offer-roll { position: relative; width: calc(100vw - var(--sbw, 0px)); margin-left: calc(50% - 50vw + var(--sbw, 0px) / 2); margin-right: calc(50% - 50vw + var(--sbw, 0px) / 2); }
    .odw-offers--plan, .odw-offers--coupon { display: flex; max-width: none; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
    .odw-offers--plan::-webkit-scrollbar, .odw-offers--coupon::-webkit-scrollbar { display: none; }
    /* Figma実測(375幅): カード240px・中央寄せ・左右47pxずつ前後カードが覗く・カード間21px。
       AUN #51: SPプランはサムネイル＋タイトルのみ */
    .odw-offers--plan { gap: 21px; padding: 2px 67px 6px; }
    .odw-offers--plan > .odw-ocard { flex: 0 0 240px; scroll-snap-align: center; }
    /* Figma実測(375幅): クーポンは1枚のみ表示（前後は覗かせない）・カード310px・左右32px */
    .odw-offers--coupon { gap: 33px; padding: 2px 32px 6px; }
    .odw-offers--coupon > .odw-ocard { flex: 0 0 calc(100vw - var(--sbw, 0px) - 64px); scroll-snap-align: center; }
    /* AUN #50: 左右シェブロンナビ（クーポンのみJSで表示） */
    .odw-offer-nav { position: absolute; top: 42%; z-index: 4; width: 38px; height: 38px; border: 0; border-radius: 50%; background: rgba(88,61,38,.82); color: #fff; display: none; align-items: center; justify-content: center; cursor: pointer; }
    .odw-offer-roll--nav .odw-offer-nav { display: flex; }
    .odw-offer-nav--prev { left: 8px; }
    .odw-offer-nav--next { right: 8px; }
    .odw-offer-nav[disabled] { opacity: .3; pointer-events: none; }
    /* SPプランはサムネ＋タイトルのみ表示（価格・条件・タグ・CTAを隠す） */
    /* AUN 7/22 TOP#51: 支給XD(SP_TOP)のプランカードはサムネイルとタイトルだけ。バッジも出さない */
    .odw-offers--plan .odw-ocard__cond, .odw-offers--plan .odw-ocard__price, .odw-offers--plan .odw-ocard__pills,
    .odw-offers--plan .odw-ocard__cats { display: none; }
    .odw-offers--plan .odw-ocard__body { gap: 6px; padding: 12px 12px 16px; }
    .odw-offers--plan .odw-ocard__title { min-height: 0; -webkit-line-clamp: 2; }
    /* ⑪ グループ館一覧: 完成図SPには無い */
    .odw-top-group { display: none; }
    /* ⑩ スペシャルコンテンツ: 下段バナーは2×2 */
    .odw-top-special { padding: 36px 14px 44px; }
    .odw-top-special .odw-top-feat__card { flex-basis: 240px; } /* Figma実測: 上の共通指定と同じ240px */
    .odw-top-splinks { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; max-width: 440px; }
    .odw-top-splink img { height: auto; width: 100%; }
    /* AUN #39: アコーディオンとフッターの間に40pxのスペースを追加。
       SPは .odw-top-group が非表示のため、terms がフッター直前の最終ブロックになる。 */
    .odw-top-terms { padding: 32px 20px 40px; } /* Figma実測: SP本文はx=20..355(左右20px) */
    .odw-terms__item { font-size: 12px; }
}

/* =====================================================================
 * 町田館 追補（machida）— ここから下は町田固有。上は小田原 top.css の複製（無改変）。
 * ブランド実測色（支給バンドSVG抽出）: 見出しJA #2b2b2b / EN・ピル枠 #a55713 /
 * 赤強調 #de0000 / クーポン赤 #a30a1d
 * ===================================================================== */

/* ── 支給バンドSVG帯 共通（MV/4連/足湯）: フルブリード＋%ホットスポット ── */
.odw-svgband { width: calc(100vw - var(--sbw, 0px)); position: relative; left: 50%; margin-left: calc(-50vw + var(--sbw, 0px) / 2); max-width: none; font-size: 0; line-height: 0; }
.odw-svgband > svg { width: 100%; height: auto; display: block; }
.odw-svgband .odw-hot { position: absolute; display: block; z-index: 5; border-radius: 6px; transition: background-color .25s; -webkit-tap-highlight-color: transparent; }
.odw-svgband .odw-hot > span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
/* ホバーはXD仕様書どおりボタン自体の色を入れ替える（背景ティントは廃止・top.js の initBandHover） */
.odw-svgband path, .odw-svgband rect { transition: fill .25s ease; }

/* ── 町田ブランド色への上書き（見出しEN/ピル/一覧を見る） ── */
/* AUN(TOP #5-#10): 見出しはFigma準拠で純黒＋明朝体（現状はゴシック#2b2b2b） */
.odw-top-head__ja { color: #000000; font-family: "Hiragino Mincho ProN","游明朝","Yu Mincho","HiraMinProN-W3",serif; }
.odw-top-head__en { color: #a55713; }
.odw-top-head__bar { background: #ccc; }
/* XD実測（仕様書「一覧を見る」）: 200×60・角丸30・白地・枠2px #a55713・文字は黒 #000000。
   ホバーで背景が左から右に #a55713 へ変化し、文字は白 #fcfcfc。 */
.odw-top-pill > a,
.odw-top-more > a { min-width: 200px; border: 2px solid #a55713; border-radius: 30px; color: #000000; background-image: linear-gradient(to right, #a55713 50%, rgba(255,255,255,0) 50%); background-color: #fff; }
.odw-top-pill > a:hover,
.odw-top-more > a:hover { color: #fcfcfc; }
/* PC は外形も支給どおり 200×60 にする。内訳は 枠2 + 上下padding + 行高24 + 枠2 なので
   padding 18 だと 64 になり支給より 4px 高い。PC だけ 16 にして 60 へそろえる。
   SP の 320 幅・上下18は AUN 7/22 #33/#36/#37（news版へ統一）による指示なので触らない。 */
@media (min-width: 768px) {
    .odw-top-pill > a,
    .odw-top-more > a { padding-top: 16px; padding-bottom: 16px; }
}

/* AUN vol2 037/041/043/045「ボタンのサイズが大きく感じるので入稿データと合わせてほしい」(SP)。
   支給 machida_web_SP_TOP.svg の「一覧を見る」は外形 200x40・角丸20・枠2px #a55713・字14/0.1em。
     path: M 20 0 L 180 0 C 191.04 0 200 8.95 200 20 C 200 31.04 191.04 40 180 40 L 20 40 ... Z
   実装は 320x64・角丸30・字16 で、縦横とも約1.6倍だった。
   高さ40の内訳: 枠2 + padding8 + 行高20 + padding8 + 枠2 = 40。
   ※ 直上コメントの「SPの320幅・上下18は AUN 7/22 #33/#36/#37 の指示なので触らない」と
      真っ向から衝突する。新しい vol2(2026-09-18)の指示を採用している。戻す場合はこのブロックを消す。 */
@media (max-width: 767px) {
    .odw-top-pill > a,
    .odw-top-more > a {
        min-width: 0;
        width: 200px;
        max-width: 200px;
        padding: 8px 28px 8px 16px;
        border-radius: 20px;
        font-size: 14px;
        letter-spacing: 0.1em;
        line-height: 20px;
    }
    .odw-top-pill__a,
    .odw-top-more__a { right: 14px; }
}
/* クーポン価格・ボタンの赤（デザイン実測: 価格 #de0000 / ボタン #a30a1d） */
.odw-ocard__price b { color: #de0000; }
/* AUN #17: ▶は#000000に統一（一覧ページ準拠）。上のクーポン赤上書きを打ち消す */
.odw-ocard__tri { border-color: transparent transparent transparent #000000; }
.odw-ocard__cpnbtn { border-color: #a30a1d; color: #a30a1d; background-image: linear-gradient(to right, #a30a1d 50%, rgba(255,255,255,0) 50%); }

/* vol2 V2-025: TOPのSPクーポン価格行を支給375px座標へ合わせる。
   カード左端基準: ▶ x=26 幅13×16 / 人数 x=44 fs16 / 価格 x=99 fs33。 */
@media (max-width: 767px) {
    .odw-offers--coupon .odw-ocard__price {
        padding-left: 10px;
        white-space: nowrap;
    }
    .odw-offers--coupon .odw-ocard__tri {
        border-width: 8px 0 8px 13px;
        margin-right: 5px;
    }
    .odw-offers--coupon .odw-ocard__people {
        flex: 0 0 auto;
        margin-right: 12px;
        font-size: 16px;
        font-weight: 300;
        color: #2b2b2b;
    }
    .odw-offers--coupon .odw-ocard__price b { font-size: 33px; }
}

/* ── #1-3 PC右端固定 予約/空室/会員（町田固有・ハイブリッド版から移植） ── */
/* 右端固定タブ。支給SVG（100×120・地色と文字を内包）をそのまま並べる。
   地色・アイコン・文字はSVG側が持つのでCSSでは背景を敷かない。 */
/* vol2 AUN TOP(ヘッダー)#4: 追尾バナーは画面の右下に置く（従来は top:38% の縦中央寄り）。 */
.odw-top-side { position: fixed; right: 0; top: auto; bottom: 0; z-index: 900; display: flex; flex-direction: column; width: 100px; box-shadow: -2px 2px 10px rgba(0,0,0,.22); border-radius: 6px 0 0 0; overflow: hidden; }
.odw-top-side__pc { display: flex; flex-direction: column; }
.odw-top-side__btn { display: block; line-height: 0; text-decoration: none; transition: filter .15s; }
.odw-top-side__btn > svg { display: block; width: 100%; height: auto; }
.odw-top-side__btn:hover { filter: brightness(1.12); }
.odw-top-side__sp-art,
.odw-top-side__sp-links { display: none; }
/* ラベルはSVG内に描かれているため、読み上げ用にのみ残す */
.odw-top-side__label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
/* vol2 AUN ヘッダー#16: AUN添付の324×324画像はSP390/DPR3基準なので108×108 CSS px。
   字形・配色は画像をそのまま表示し、3リンクを36pxずつ重ねる。 */
@media (max-width: 767px) {
    .odw-top-side { display: block; width: 108px; height: 108px; bottom: 0; border-radius: 0; box-shadow: -1px 1px 6px rgba(0,0,0,.22); }
    .odw-top-side__pc { display: none; }
    .odw-top-side__sp-art { display: block; width: 108px; height: 108px; }
    .odw-top-side__sp-links { position: absolute; inset: 0; display: grid; grid-template-rows: repeat(3, 36px); }
    .odw-top-side__sp-link { display: block; text-decoration: none; }
}

/* ── ④ ただいまの混雑状況（町田固有・ハイブリッド版から移植） ── */
.odw-top-congestion { max-width: 1200px; margin: 30px auto 0; padding: 0 16px; text-align: center; }
.odw-top-congestion__pill { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 12px; min-width: 400px; padding: 17px 58px 17px 34px; border: 2px solid #a4212d; border-radius: 40px; background: #fff; color: #a4212d; font-size: 16px; font-weight: 700; letter-spacing: 0.05em; text-decoration: none; transition: background .15s, color .15s; }
a.odw-top-congestion__pill:hover { background: #a4212d; color: #fff; }
.odw-top-congestion__pill .chev { position: absolute; right: 24px; top: 50%; transform: translateY(-50%); display: flex; }
.odw-top-congestion__status { display: inline-block; padding: 3px 12px; border-radius: 3px; background: #a4212d; color: #fff; font-size: 14px; }
.odw-top-congestion__note { margin: 10px 0 0; font-size: 13px; color: #6b655c; }
@media (max-width: 767px) {
    .odw-top-congestion { margin-top: 26px; }
    .odw-top-congestion__pill { min-width: 0; width: 100%; padding: 14px 44px 14px 20px; font-size: 14px; gap: 8px; }
}

/* ── ⑤b 今月のイベント（町田: 見出し帯なしバナーのみ。白帯先頭のため上余白を持たせる） ── */
.odw-top-event { padding-top: 64px; }
@media (max-width: 767px) { .odw-top-event { padding-top: 38px; } }

/* ── ⑧b 施設ナビ（支給バンドSVG top_pc_0009 / top_sp_0006 用の調整）
   バンドに白背景・余白が焼き込まれているため、小田原版の padding を打ち消す ── */
.odw-top-nav--svg { padding: 2px 0 0; margin-bottom: -7px; } /* 007: お食事帯終了→ナビ写真可視上端70px（SVG上部の焼込余白68pxを差引） / 008: ナビ可視下端→足湯写真上端70px（SVG下部の焼込余白77pxを差引） */
@media (max-width: 767px) { .odw-top-nav--svg { padding: 16px 0 24px; margin-bottom: 0; }
  /* PC専用のあしらい（Figma SPには無い） */
  .odw-top-nav--svg .odw-top-nav__deco { display: none; }
  .odw-top-special__cloud { display: none; } }
/* footer.php の施設ナビ帯はTOPではデザイン(0009=⑧b)と重複するため非表示（footer.php は無改変） */
body.page-id-204551 .odw-foot-sec--tiles,
body.page-id-204551 .odw-fsp-sec--tiles,
body.home .odw-foot-sec--tiles,
body.home .odw-fsp-sec--tiles { display: none; }
/* TOPのみ: メインフッター(波)の谷の地色をFigma準拠の #f3f1ec に（AUN #13 白フレーム解消。
   他ページは白が正のため footer.php 側は無改変） */
body.page-id-204551 .odw-foot-sec--main,
body.page-id-204551 .odw-fsp-sec--main,
body.home .odw-foot-sec--main,
body.home .odw-fsp-sec--main { background: #f3f1ec; }

/* ── ⑭ グループ各館: 先頭「万葉倶楽部ポータルサイト」強調（デザイン準拠で1行占有・太字） ── */
.odw-grp-list li.is-head { grid-column: 1 / -1; }
.odw-grp-list li.is-head a { font-weight: 600; }

/* =====================================================================
 * SP 設計整合（支給SVG machida_web_SP_TOP.svg の実測値に合わせる）
 * 2026-08-20。設計値は入れ子transformを累積した絶対座標で実測したもの。
 *
 *  ・本文ブロックの左右余白 … 設計は x=20 / 幅335（20pxが最頻値）。
 *                             実装は 14px と 16px が混在していたので 20px に統一。
 *  ・キャンペーンバナー2×2 … 設計 163×94（比1.734）を 8px 間隔で並べる。
 *                             実装は枠に比率が無く 166.5×55.5（比3.0）に潰れていた。
 *  ・ただいまの混雑状況     … 設計 335×50。実装は 59px あった。
 *
 * 横スクロール系（注目のコンテンツ／プラン／クーポン）は AUN 7/21 #35/#38
 * 「表示範囲を右端まで広げる」の指示で意図的に全幅なので、ここでは触らない。
 * ===================================================================== */
@media (max-width: 767px) {

    /* --- 左右余白を設計どおり 20px に統一 --- */
    .odw-top-notice-wrap { padding-left: 20px; padding-right: 20px; }
    .odw-top-cmp-wrap    { padding-left: 20px; padding-right: 20px; }
    .odw-top-congestion  { padding-left: 20px; padding-right: 20px; }
    .odw-top-news        { padding-left: 20px; padding-right: 20px; }
    .odw-top-dining-sec  { padding-left: 20px; padding-right: 20px; }
    .odw-top-special     { padding-left: 20px; padding-right: 20px; }

    /* --- ③ キャンペーンバナー 2×2 ---
       設計: x=20/191（列間8px）, y=929/1031（行間8px）, 各枠 163×94。
       枠に比率を持たせないと登録画像の縦横比がそのまま出て潰れる（#25の163×94はこの枠のこと）。 */
    .odw-top-cmp { gap: 8px; max-width: 335px; }
    .odw-top-cmp__item { aspect-ratio: 163 / 94; border-radius: 3px; }
    .odw-top-cmp__item img { width: 100%; height: 100%; object-fit: cover; }

    /* --- ④ ただいまの混雑状況: 設計 335×50 --- */
    .odw-top-congestion__pill {
        box-sizing: border-box;
        min-height: 50px;
        padding-top: 0;
        padding-bottom: 0;
    }
}