/* ============================================================================
mobile-2.css — スマホ版CSS（担当：チャットB ＝ 3問診断 / 私たちのホテル / §8沿革 / §9 22の旅先）
----------------------------------------------------------------------------
★PC安全の保証： に media="(max-width:1024px)" を付けて読み込む。
→ ブラウザは768pxより上ではこのファイルを一切適用しない＝PC(デスクトップ)には物理的に影響しない。
★全CSSの最後に読み込む＝基底を上書きできる（!important に頼らなくても勝てる）。ここに書けば必ず勝つ。
★このファイルは「担当B」だけが編集する。index.html の inline CSS(=PCルール)は触らない。
★もう片方(§1/§2-3/フッター/マーキー)は assets/mobile-1.css。
使い方：担当セクションのスマホ調整はここに @media(max-width:1024px){ ... } で書く（SP区切りは768px＝iPad縦まで一貫）。
（既存のSPルールが index.html / hotel-work.css / history-selected.css / s6.css にあるが、
このファイルが最後に読まれるので、ここに書けば上書きできる＝index.htmlを触らずに済む）
例：
@media (max-width:1024px){
.quiz-card{ ... }
.hotel-work__panel{ ... }
.s9-title{ ... }
}
============================================================================ */
/* ▼▼▼ §9 22の旅先：SPは「無限ループ＋自動ドリフト＋スワイプ」のカルーセルを維持しつつ、
カード一定サイズ(JS側でscale=1.0)・ページ縦スクロールでは回さない(JS側)。ここではカードロゴ拡大などCSS面を調整。
カード位置(フッターとの距離)は --s9-card-lift、見出し位置は --section-heading-y で調整。PCは不変。 ▼▼▼ */
@media (max-width:1024px){
/* カードのブランドロゴを大きく（SP） */
.s9-card .ph .s9-mark img{max-width:calc(56% * var(--mk,1));max-height:calc(30% * var(--mk,1))}
/* ホテル別の微調整（SPのみ）：コートヤード3軒 +10% / マリオット南紀白浜・山中湖 +15% */
.s9-card[data-hid="courtyardTokyo"] .ph .s9-mark img,
.s9-card[data-hid="courtyardHakuba"] .ph .s9-mark img,
.s9-card[data-hid="courtyardShinOsaka"] .ph .s9-mark img{max-width:calc(56% * var(--mk,1) * 1.1);max-height:calc(30% * var(--mk,1) * 1.1)}
.s9-card[data-hid="shirahamaMarriott"] .ph .s9-mark img,
.s9-card[data-hid="fujiMarriott"] .ph .s9-mark img{max-width:calc(56% * var(--mk,1) * 1.15);max-height:calc(30% * var(--mk,1) * 1.15)}
/* カードを縦長 4:5 に（幅=--s9cw、高さ=幅×1.25）。JS側の cardH も 1.25 に合わせ済み */
.s9-card .ph{aspect-ratio:4/5}
/* カードをフッターのすぐ上(約30px)まで下げる（lift小=footerClear小=カード下がる）。JSがこの値を読む */
.s9{--s9-card-lift:17px}
}
/* ▲▲▲ §9 ここまで ▲▲▲ */
/* §9 タッチ端末で :hover が張り付き、タップしたカードの写真がズーム(scale1.18)したまま固定される問題を打ち消す。
hover:none＝マウスを持たない端末のみ対象なので PC/マウスは完全に不変。 */
@media (hover: none){
.s9-card:hover .ph > img{transform:none}
/* 矢印: タップ後に :hover の translateY(-1px)＋明色が張り付き「左右で高さが違う/片方だけ明るい」に見えるのを打ち消す（第1弾hover打ち消しの入れ忘れ分） */
.hotel-work__arrow:hover{ transform:none; color:rgba(244,241,234,.82); }
/* iOS Safari のプル・トゥ・リフレッシュを無効化＝逆スクロールで最上部まで戻って下に引いた時の「勝手にリロード」を断つ。
touch端末(hover:none)限定＝PC/マウスは完全に不変。Lenisは実機OFF＝ドキュメントがネイティブscrollなのでrootに効かせる。 */
html, body{ overscroll-behavior-y: none; }
}
/* §9マーキーも115pxに統一(history-selected.cssの@media767を上書き)。§9見出しもマーキー直下に。
私たちのホテル/§8は flow pre-marquee で自動的にマーキー直下に付くので個別調整不要(以前の-27は逆効果だったので撤去) */
@media (max-width:1024px){
.history-selected__marquee-track span{font-size:clamp(100px,29.5vw,175px)}
.s9{--section-heading-y:-3px} /* §9見出しをマーキー直下に(gap118で他と統一) */
/* 日本語見出し統一(21→22px)。1行に収まる(nowrapのまま) */
.history-selected__title{font-size:22px} /* 50年の歩み */
.s9-title{font-size:22px} /* 22の旅先へ */
}
/* 電話幅だけ、見出しはマーキー直下の位置を保ったまま、カード列と§9終端を50px上へ詰める。
§9終端直後がバナー。文字下端側は写真より詰まって見えるため、見出し→カードを約90px、
カード→バナーを約80pxにして視覚上の余白を揃える。 */
@media (max-width:600px){
.s9{min-height:0}
.s9-stage{margin-top:-50px}
}
/* ▼ 沿革(history-selected) SP再設計。旧レイアウトは「タイトル上／本文+facts下端」で、facts下端がフェザーに沈み・
2列で長い施設名が泣き別れ・8件時に窮屈だった。→ カード内テキストを『上寄せの縦フロー』に統一：
年代 → タイトル → 本文 → 施設リスト(1列) を上から並べ、写真は下側に見せる。件数(4〜8)に依らず破綻しない。 ▼ */
@media (max-width:1024px){
.history-selected__scroll{display:none} /* (a) 中央のscroll誘導は雑然→SP非表示 */
/* カード内を縦フロー(上寄せ)に。全要素を左揃え。タイトル+本文 と 施設リスト の間は少し離す(card-innerのgap) */
.history-selected__card-inner{display:flex;flex-direction:column;justify-content:flex-start;align-items:stretch;gap:clamp(15px,2.4vh,22px);height:100%}
.history-selected__copy{display:flex;flex-direction:column;align-items:stretch;gap:clamp(4px,.9vh,8px);height:auto;max-width:none}
.history-selected__meta{margin:0;align-self:stretch}
/* (c) タイトルを少し大きく(.86→.94→1.02)。本文(.74rem)との差が小さく、.copy の gap も 8px しか
無かったため「見出しに見えない」状態だった → サイズ差と下マージンで階層をつける。 */
.history-selected__card-title{font-size:1.02rem;margin:0 0 .28rem;align-self:stretch}
/* (左揃え修正) 本文が align-self:end(旧grid残骸)で右に寄っていた→stretchで左揃え・全幅。少し大きく。区切りで2行(JSで先頭。の後に
) */
.history-selected__body--mobile{max-width:none;margin:0;align-self:stretch;text-align:left;text-wrap:pretty;-webkit-line-clamp:3;font-size:.74rem;line-height:1.5}
/* (d)(b) 施設リスト：1列(縦並び)で長い名前も1行に／読めるサイズ／左揃え */
.history-selected__facts--mobile{grid-template-columns:1fr;gap:.18rem;font-size:.6rem;line-height:1.32;margin:0;align-self:stretch}
}
/* ▼ 私たちのホテル(hotel-work) SP調整：見出し少し小さく / カード(=ホテル写真)を30%ダウン / パネル(セクション)を低く / 緑の植物イラストを約1/5に。PC・タブレット(≥601)は不変 ▼ */
@media (max-width:1024px){
.hotel-work__title{font-size:22px} /* 日本語見出し統一(21→22px) */
/* OUR WORKS マーキーの上：前の質問カード(.quiz-card)が自セクション枠より46px下にはみ出す＝見た目の隙間が他(86)より狭く40になる。
なので上マージンを 86→132(+46) にして、質問カード下端からの“見た目”の距離を他マーキーと同じ86に揃える。 */
.works-pre-marquee{margin-top:132px}
.hotel-work__panel{
--hw-card:min(54vw,210px); /* カード=ホテル写真を約30%ダウン(300→210) */
min-height:470px; /* セクション(パネル)：パディング増分だけ微増(内容に合わせる) */
padding:50px 16px 44px; /* 緑パネル内側のパディングを約2倍に(旧26/7.5/24) */
}
.hotel-work__foliage{width:125px;right:12px} /* 緑の植物イラスト：1/5(96px)から1.3倍(125px) */
.hotel-work__more{border-width:1px} /* view allカプセルの線を細く(2→1px) */
/* カード写真の上に乗るホテルロゴを+20%（施設別の--hw-mkは維持。Marriott等の個別指定はfilterだけなのでサイズ競合なし） */
.hotel-work__mark img{max-width:calc(62.5% * var(--hw-mk,1) * 1.2);max-height:calc(32.8125% * var(--hw-mk,1) * 1.2)}
}
/* ▼ 3つの質問(quiz) SP整理 ▼ */
@media (max-width:1024px){
/* 質問文：横1列で収まるよう縮小（最長13文字が幅326pxに収まる上限≒22.8px→端末幅に追従する5.2vwで小端末も1行）。balanceは保険 */
.quiz-q{text-wrap:balance;font-size:clamp(15px,5.2vw,21px)}
/* 選択肢(ア/イ/ウ)の帯を更に細く：縦paddingを16→10px（帯の高さ約76→約64px） */
.quiz-opt{padding-block:10px}
/* スキップ誘導「スクロールして次へ/スキップ」を水平中央に。質問画面では STEP の下（bottom:22vh）。文字は少し小さく */
.quiz-skip{left:50%;right:auto;transform:translateX(-50%);align-items:center;text-align:center;white-space:nowrap;bottom:22vh;font-size:13px}
/* 診断結果ボタン：横長フルwidthの2段積みに。上段=ホテルを詳しく見る / 下段=もう一度診断する（DOM順は もう一度→ホテル なので column-reverse で逆順に） */
.quiz-result__actions{flex-direction:column-reverse}
.quiz-rbtn{flex:0 0 auto;padding-block:18px}
/* 結果画面：「こちらもおすすめ」リストと「スクロールして次へ」が重なる（リスト444-596/skip520-580、下に60pxの余地なし）。
結果はクイズの終点で自然に下へスクロールでき、リスト自体が続きを促すので、結果画面だけスキップ誘導を非表示にして重なりを解消 */
.quiz.result-on .quiz-skip{display:none}
/* 結果画面「こちらもおすすめ」：カードを細く＋上に詰める＝短い端末でも収まるように（旧: card58px/thumb40px/上の隙間35px） */
.quiz-more{margin-top:clamp(8px,1.4vh,14px)} /* ボタン↔リストの間を詰める */
.quiz-more__label{margin-bottom:clamp(5px,.9vh,9px)} /* ラベル下を詰める */
.quiz-more__grid{gap:clamp(6px,.9vh,9px)} /* カード間を詰める */
.quiz-more__card{padding:6px} /* カードを細く */
.quiz-more__thumb{width:46px;height:34px} /* サムネ小さく＝カード細く(58→約46px) */
/* ① 上部：バナー画像を画面幅に収めつつ、さらに20%小さく（旧90vw→72vw / 360→288px。高さ自動でアスペクト維持） */
.quiz-eyebrow__img{width:min(72vw,288px);height:auto}
/* ★SP専用 診断ヘッダ：他セクション(私たちのホテル/沿革)と同じ律動＝マーキー帯(121px)→eyebrow(-3pxで直下)→日本語見出し(+6px)。左端5vwで統一。
上下の余白も他マーキーに合わせる：上=フィルムから約86px（scatter下パディングに食い込む負マージンで詰める）、下=見出し→質問カードを約42px（.quiz の margin-top を下で縮小）。 */
.quiz-head{display:block;position:relative;z-index:5;width:100vw;margin:0} /* 上余白はフィルム側(scatter-pin padding-bottom:86px)で確保 */
.quiz{margin-top:42px} /* 見出し→質問カードの距離を他セクション(タイトル→中身≈42px)に統一（既定16vh≈135pxは開きすぎ）。SPのみ */
.quiz-head__marquee{width:100vw;overflow:hidden;pointer-events:none}
.quiz-head__eyebrow{margin:-3px 0 6px 5vw;color:#555;font-family:"Helvetica Neue","Arial",sans-serif;
font-weight:300;font-size:15px;line-height:1;letter-spacing:.01em}
.quiz-head__eyebrow b{font-weight:300;color:#555}
.quiz-head__title{margin:0 0 0 5vw;color:#2d2d2d;font-family:"Shippori Mincho","Hiragino Mincho ProN","Yu Mincho",serif;
font-weight:500;font-size:22px;line-height:1.08;letter-spacing:.05em}
/* ① 上部：森イラストが小さい画面だとピル中央の文字に被る→少し縮小＋上へ持ち上げてピルの上辺より上に置く（PC同様「森はピルの上」）。
rise=森だけをtranslateYで上げる(レイアウトは動かさない)。overlapはピルとの重なり量。 */
.quiz{--quiz-forest-w:124px;--quiz-forest-overlap:2px} /* 森イラストを+15%(108→124px) */
/* 森イラスト：バナーに少しかかる位まで下げ＋更に右寄りへ（中央から右へ+62px、Y+3pxでバナー上辺に軽く重ねる） */
.quiz-forest{transform:translate(62px,3px)}
/* ① 上部：カード上の大きな植物(.quiz-illust)は min-width 240px でSPだとピル中央の文字に被る（PCは右端の余白に置ける）。
森(pines)が上部の緑を担うのでSPでは非表示にして文字を最優先。※必要なら小さくして右上へ寄せる案も可 */
.quiz-illust{display:none}
/* ② 縦の余白：space-betweenで質問/選択肢/フッターが均等に離れ115pxずつ空いて間延び→質問+選択肢を上に寄せて一組にし、フッターは下端固定 */
.quiz-content{justify-content:flex-start}
/* タイトルを少し下げる。ただし帯(選択肢)は動かさないため、下の .quiz-opts margin-top を同じ分だけ減らす＝タイトル↔帯の距離が縮む（帯は元位置のまま） */
.quiz-q{margin-top:clamp(44px,7.8vh,64px)}
.quiz-opts{margin-top:clamp(12px,2.2vh,20px)} /* タイトル↔帯の距離を縮小（帯の位置はタイトルの下げ分と相殺で不変） */
/* フッターを縦積みに：上=インジケーター(STEP+ドット) / 下=戻るカプセル。DOM順は 戻る→stepper なので column-reverse で上下反転。
margin-bottom:20vh（帯との隙間を作るため26→20vhに下げる）。stepper↔カプセルの隙間を広げる(gap) */
.quiz-foot{flex-direction:column-reverse;align-items:center;gap:clamp(18px,2.8vh,26px);margin-top:auto;margin-bottom:20vh}
/* ステッパー：写真の上なので白＋影で視認性。ラベル少し大きく。帯幅いっぱいに。帯(選択肢)との間に余白 */
.quiz-stepper{width:100%;margin-top:clamp(24px,3.6vh,34px)}
/* 視認性UP：ラベルは白＋強めの二重影（タイト＋ソフト）で明るい写真でも輪郭を確保 */
.quiz-stepper__label{color:#fff;text-shadow:0 1px 2px rgba(0,0,0,.6),0 2px 12px rgba(0,0,0,.66);font-size:14px}
/* トラック全体に濃いハロー影＝白いドット/線が明るい背景でも浮く */
.quiz-stepper__track{filter:drop-shadow(0 1px 4px rgba(0,0,0,.7)) drop-shadow(0 0 2px rgba(0,0,0,.55))}
/* ドットを大きく（off/done 6→9px / on 9→13px）＋白を濃く */
.qs-node .qs-d::before{background:rgba(255,255,255,.92);width:9px;height:9px}
.qs-node.on .qs-d::before{width:13px;height:13px;background:#fff}
/* インジケーター(ドット)を帯より内側に＝コネクタを詰める(50vw-63px)。中央配置。連結線は太く(2px)＋白を濃く */
.qs-node + .qs-node{margin-left:calc(50vw - 63px)}
.qs-node + .qs-node::before{width:calc(50vw - 63px);height:2px;background:rgba(255,255,255,.62)}
.qs-node.on::before,.qs-node.done::before{background:rgba(255,255,255,.96)}
/* 「戻る」を白系のカプセルタグに：インジケーターの下・幅は帯(=インジケーター)と同じ100%・細いが少し厚みを(縦padding5px) */
.quiz-back{position:static;left:auto;top:auto;transform:none;width:100%;justify-content:center;
background:rgba(255,255,255,.86);border:1px solid rgba(255,255,255,.55);border-radius:999px;
color:var(--green,#2B2B2B);opacity:1;text-shadow:none;padding:9px 12px;font-size:11.5px;letter-spacing:.14em;line-height:1.3}
.quiz-back__ic{filter:none;width:1.05em;height:1.05em}
}
/* ▼ ハンバーガーメニュー(hotel-menu) SP整理：ロゴ+×を「緑ヘッダー帯」に(透明だったのでスクロール中のリストが背後に透けていた)。ロゴが285px幅で大きすぎ→縮小 ▼ */
@media (max-width:1024px){
.hotel-menu__top{background:#2B2B2B;padding-block:14px} /* ヘッダー帯＝リストが背後を潜ってもロゴ/×がクリアに。フッターと同色(旧 #1f3b2c) */
.hotel-menu__logo{width:min(48vw,185px);height:auto} /* 76vw(285px)→48vw(185px)。アスペクト維持(height:autoで潰れない) */
.hotel-menu__body{padding-top:74px} /* ヘッダー高さ(≈close46+padding28)に合わせ本文開始を揃える */
/* SELECTED HOTEL パネル(feature)はPCのホバープレビュー用。SPだと一覧の下に先頭ホテルが静的に出て無意味＆紛らわしい
（@media920のdisplay:noneが後続の基底ルールに上書きされて効いていなかった）。タップ→ドロワーで詳細が出るので非表示にする */
.hotel-menu__feature{display:none!important}
}
/* 矢印(SP)：見た目を一回り大きく＋左右の間隔を広げる（ユーザー明示依頼＝見た目も変更）。ミニマルな線矢印の印象は維持。
・chevron 10→13px・線 1.5→1.75px ・arrows gap 7→16px ・ボタン幅を確保
・::after でタップ標的を約44px確保（間隔拡大に合わせ張り出しを再調整、隣と重ねない）。高さは既に44px(--hw-command-h)。PC(>600px)は非適用。 */
@media (max-width:1024px){
.hotel-work__arrows{ gap:16px; }
.hotel-work__arrow{ position:relative; width:20px; }
.hotel-work__arrow span{ width:13px; height:13px; border-top-width:1.75px; border-right-width:1.75px; }
.hotel-work__arrow::after{ content:''; position:absolute; top:0; bottom:0; }
.hotel-work__arrow--prev::after{ left:-16px; right:-4px; }
.hotel-work__arrow--next::after{ left:-4px; right:-16px; }
}
/* ── 私たちのホテル: SPネイティブ横スクロール（2026-07-07）
JS transform追従を廃止し overflow-x + scroll-snap に。慣性/軸ロックはOSネイティブ＝Pick up Hotelsと同じ感触。
.hotel-work--native は hotel-work.js が SP(≤600px) 判定時のみ付与 → PC/タブレットに影響なし。 */
@media (max-width: 1024px) {
.hotel-work--native .hotel-work__viewport {
overflow-x: auto;
overflow-y: hidden;
-webkit-overflow-scrolling: touch;
scroll-snap-type: x mandatory;
scrollbar-width: none;
}
.hotel-work--native .hotel-work__viewport::-webkit-scrollbar { display: none; }
.hotel-work--native .hotel-work__track {
transform: none !important; /* 残留JS書き込みの保険 */
transition: none !important;
will-change: auto; /* 9000px級の合成レイヤーを持たない（メモリ対策） */
}
.hotel-work--native .hotel-work__card { scroll-snap-align: start; }
}
/* ▼▼▼ タブレット専用(601〜1024px)：電話(≤600)は不変。iPad縦だけ見出し/本文/セクション高さを拡大。 ▼▼▼ */
@media (min-width:601px) and (max-width:1024px){
/* 見出し(22px固定)をタブレット幅に追従拡大 */
.history-selected__title{font-size:clamp(37px,5.4vw,57px)}
.s9-title{font-size:clamp(37px,5.4vw,57px)}
.hotel-work__title{font-size:clamp(37px,5.4vw,57px);white-space:nowrap} /* 「わたしたちのホテル」が55pxで2行折返し→1行に */
.hotel-work__heading{width:min(680px,calc(100vw - var(--hw-edge) * 2))} /* 見出し容器の520px上限が55px見出しに狭い(3px超過)→広げる */
.quiz-head__title{font-size:clamp(37px,5.4vw,57px)}
/* ★診断の選択肢(帯)の幅：index.html:570 @media(max-width:960px) の .quiz-opts{max-width:380px} が
iPad Air(820)等≤960で選択肢を46%vwに細めていた（1024だけ>960で正しく広かった＝端末で見え方が激変）。
バナー帯・progress線と同じ基準(100vw-95px)に統一して全タブレット幅で一定に。 */
.quiz-opts{max-width:min(calc(100vw - 95px),900px)}
.quiz-q{font-size:clamp(28px,4vw,44px)}
/* 診断eyebrow「Your Stay」：英語eyebrowを35%縮小(51→33px) */
.quiz-head__eyebrow{font-size:clamp(22px,3.25vw,34px)}
/* 3つの質問：選択肢カードの文字が小さすぎ→拡大（電話比 約1.8倍へ） */
.quiz-opt__label{font-size:clamp(21px,2.6vw,30px)}
.quiz-opt__nuance{font-size:clamp(15px,1.9vw,22px)}
/* 診断バナー帯「3つの問いで あなたに合う一軒を」＝下のスクロールインジケーター
(.quiz-stepper__track)と“常に”同じ長さにする。線の実幅は全タブレット幅で一定して
100vw-95px(実測 1024→929/820→725/768→673 = すべて100vw-95px)。
★以前は 91vw(ビューポート基準)で線(カード基準)と基準が違い1024でだけ一致し他幅でズレていた。
同じ基準にすれば全幅で一致する。 */
.quiz-eyebrow__img{width:min(calc(100vw - 95px),940px)}
/* 私たちのホテル：カードが小さすぎ＋高くしたら空白→カードを大きく＆高さは中身なりに(空白解消) */
.hotel-work__panel{--hw-card:clamp(300px,34vw,400px);--hw-command-h:clamp(50px,6vw,58px);min-height:auto;padding:clamp(56px,7vh,96px) clamp(28px,5vw,52px)}
/* §8沿革：文字を大きく（モバイル比で拡大。二次情報も電話比1.6+へ） */
.history-selected__card-title{font-size:clamp(1.3rem,2.9vw,1.85rem)}
.history-selected__body--mobile{font-size:clamp(1.05rem,2vw,1.35rem)}
.history-selected__facts--mobile{font-size:clamp(.9rem,1.7vw,1.15rem)}
/* §9：カードを正方形に（長方形→1:1）。大きさはJS係数(0.375)で拡大 */
.s9-card .ph{aspect-ratio:1/1}
/* §9：カードは“波(フッター)基準”でliftぶん上げ、見出しはmin-heightで制御（別系統）。
・カード↔フッターの隙間 = --s9-card-lift（175px→約1/6に詰める）。カードサイズが幅で変わるため
1024は既に隙間が小さく重なりやすい→vw追従clampで1024で最小(≈1/6)・narrowは重ならない範囲で詰める。
・見出し↔カードの隙間 = min-heightで制御。 */
.s9{min-height:720px;--s9-card-lift:42px}
/* 私たちのホテル：ホテル名。clamp下限が低く820px等では小さかった→下限を上げて全幅で大きく。 */
.hotel-work__name{font-size:clamp(18px,2.1vw,23px)}
/* ★メーター(進捗リング)：リングを大きく／数字はリング内に収める（22pxだと"04/22"がリング径をはみ出し接触）。
リングは --hw-command-h 経由だと view all ボタン高も上がるので、progress を直接拡大して分離。 */
.hotel-work__progress{width:clamp(60px,7.4vw,76px);height:clamp(60px,7.4vw,76px)}
.hotel-work__count{font-size:clamp(15px,1.7vw,19px)}
/* 診断：ステッパー(14px)・スキップ(13px)を拡大（電話比 約1.8倍へ） */
.quiz-stepper__label{font-size:clamp(18px,2.1vw,26px)}
.quiz-skip{font-size:clamp(17px,1.9vw,22px)}
/* §8沿革：Era/Year等のセル(16px)・"The Next Hundred Years"(10.8px)・年代"1973-1976"(9px)を拡大 */
.history-selected__cell{font-size:clamp(17px,2.1vw,26px)}
.history-selected__closing span{font-size:clamp(16px,1.8vw,22px)}
.history-selected__meta{font-size:clamp(17px,2.1vw,26px)}
/* DESTINATIONS マーキー：mobile-2:55(一般層)で175px頭打ち→他マーキー(mobile-1)と揃えて拡大。
フロー要素なので位置計算の連動なし＝安全（§9見出しが少し下がるだけ）。 */
.history-selected__marquee-track span{font-size:clamp(175px,24vw,240px)}
/* §8沿革：レイアウトの窮屈解消（「表組みっぽさ」を減らす）。
①テーブル列幅がモバイル固定rem(Era 6.6rem/Year 2.7rem)のまま文字だけ拡大され
"1973-1976"がはみ出しヘッダ/データ行が縦積み崩壊 → 列を広げ行間を確保。
②写真が正方形(1/1.04)×1024px幅=1024px高で支配的・コピーが上に密集 →
タブレットはやや横長に短くし、カード内タイトル↔本文の間延びを解消。 */
/* ★真因：.history-selected__hide-tablet{display:none} は max-width:991 にしか無く、
モバイル構造の3列グリッドは max-width:1024。→992〜1024px(iPad Pro縦=1024が該当)では
3列グリッドなのにhide-tabletプレースホルダが残り、セル4個で4個目(Year)が折返し崩壊。
タブレット層で hide-tablet を隠して穴を塞ぐ（601〜991では既にnone＝無害）。 */
.history-selected__hide-tablet{display:none}
/* ★§8「50年の歩み」重なり：見出しは position:absolute でテーブルに被さる構造。見出しを1.2倍(55px)に
したらテーブル上端との隙間が4pxに詰まりほぼ重なった→テーブルを下げて適切な隙間を作る。
（margin-topは親と相殺して効かないので padding-topで確実に下げる。） */
.history-selected__tabs{padding-top:clamp(34px,5vw,54px)}
.history-selected__row{grid-template-columns:9.5rem minmax(0,1fr) 4.5rem;gap:.7rem}
.history-selected__row--head{min-height:3.1rem}
.history-selected{--history-card-pad-y:1.9rem}
.history-selected__image{aspect-ratio:1/0.7}
.history-selected__item:last-child .history-selected__image{aspect-ratio:1/0.82}
.history-selected__card-title{margin:.7rem 0 0;line-height:1.28}
.history-selected__body--mobile{max-width:34em;margin:0 0 .9rem;line-height:1.55}
.history-selected__facts--mobile{gap:.35rem .9rem;margin:.9rem 0 0}
/* 私たちのホテル：操作行(01/22＋矢印＋view all)の潰れ修正。
根因＝PC基準 .hotel-work__more{width:calc(100% - --hw-card*3 - gap*3)} がタブレット層の
--hw-card(34vw≈348px)×3=1044px>panel幅で負値化→ボタン0幅→右下に密集。
電話(≤760)の処理は max-width:760 の中なので 761〜1024 には効かない穴だった。
電話と同じく links=space-between・more=auto幅にして操作行を左右へ広げる。 */
.hotel-work__links{justify-content:space-between;gap:0}
/* view all・矢印も clamp下限が低く820pxで14pxに張り付き小さかった→下限を上げる */
.hotel-work__more{width:auto;min-width:clamp(184px,23vw,230px);font-size:clamp(17px,2vw,21px)}
.hotel-work__controls{gap:clamp(18px,2.4vw,30px)}
.hotel-work__arrows{gap:clamp(12px,1.5vw,18px)}
.hotel-work__arrow{width:clamp(17px,2.1vw,22px)}
/* ハンバーガーメニュー(hotel-menu ドロワー)の中身：SP処理は max-width:760 にしか無く、
761〜1024 はPCサイズ＝ロゴ・ホテル名・sub・CLOSEが小さい。下に余白も多い→余裕を持って拡大。 */
/* ★ロゴ変形修正：一般層(mobile-2:166)が width:min(48vw,185px) を固定→私が height:60px を足したため
幅185×高60(比3.08)に潰れた(自然比10.79の横長ワードマーク)。高さ基準は誤り→幅基準(height:auto)へ。 */
.hotel-menu__logo{width:min(56vw,380px);height:auto} /* 横長ワードマーク：幅で拡大・アスペクト維持(17→~35px高) */
.hotel-menu__sub{font-size:clamp(15px,1.6vw,20px)} /* ホテル一覧 12→~16px */
.hotel-menu__link{font-size:clamp(18px,2vw,24px);padding:clamp(11px,1.5vh,18px) 2px} /* ホテル名 12→~20px＋行間広げ */
.hotel-menu__eyebrow{font-size:clamp(46px,5.8vw,74px)} /* HOTEL LINKS 45→~59px */
.hotel-menu__close .hm-close-label{font-size:clamp(16px,1.7vw,21px)} /* CLOSE 15→~17px */
.hotel-menu__close .hm-x{width:34px;height:34px} /* ✕ を1.3×(26→34) */
/* ★リスト全幅化：921〜1024は body が2列(list|feature)で list が左半分に押し込まれ、
ホテル名が窮屈に折返していた(右半分は空)。≤920 と同じく feature 非表示＋body 1列にして
ホテル一覧を全幅で使う→2列が広がり折返し解消。 */
.hotel-menu__body{grid-template-columns:1fr}
.hotel-menu__feature{display:none}
.hotel-menu__links{column-gap:clamp(32px,5vw,72px)}
}
/* ▼ 診断結果: iPhone SE級(高さ〜667px)でも「こちらもおすすめ」が初期表示に入るよう圧縮(2026-08-02)。
紹介文のフォントを小さく・行間を詰めてスペースを確保。 ▼ */
@media (max-width:600px){
.quiz-result__copy{font-size:14px;line-height:1.7}
.quiz-result{gap:clamp(10px,1.6vh,16px);padding-bottom:clamp(26px,4.5vh,56px)}
}
@media (max-width:600px) and (max-height:700px){
.quiz-result__copy{font-size:13.5px;line-height:1.58}
.quiz-result__name{font-size:19px}
.quiz-result__logo{height:calc(clamp(44px,5vh,60px) * 1.44 * var(--logo-scale,1))}
.quiz-rbtn{padding-block:11px}
}