/* ============================================================================
   mobile-1.css — スマホ版CSS（担当：チャットA ＝ §1ヒーロー / §2-3スキャッター / フッター / マーキー / 背景まわり）
   ----------------------------------------------------------------------------
   ★PC安全の保証：<link> に media="(max-width:1024px)" を付けて読み込む。
     → ブラウザは768pxより上ではこのファイルを一切適用しない＝PC(デスクトップ)には物理的に影響しない。
   ★全CSSの最後に読み込む＝基底を上書きできる（!important に頼らなくても勝てる）。
   ★このファイルは「担当A」だけが編集する。index.html の inline CSS(=PCルール)は触らない。
   ★もう片方(診断/私たちのホテル/§8/§9)は assets/mobile-2.css。
   ============================================================================ */

/* SP全体：タップ時に一瞬出る青いハイライト（-webkit-tap-highlight-color の既定＝iOS/Androidの標準挙動）を消す。
   ドロワ・質問カード・各ボタン等すべてのタップ要素が対象。継承プロパティだが確実性のため全要素(*)に指定。
   このファイルは media(max-width:1024px) 読み込み＝PC(>768)には一切適用されない。マウスでは元々出ない。 */
*{-webkit-tap-highlight-color:transparent}

/* SP/タブレット横スクロール安全網：html/body が overflow-x:visible のため、どこか1要素の微小はみ出し
   （マーキー端・sub-pixel・iOS Safari実機の丸め等）で“若干横スクロール”が出る事故を防ぐ。
   overflow:clip は overflow:hidden と違いスクロールコンテナを作らない＝position:sticky(§8/旅のフィルム)と
   Lenisを壊さない。このファイルは media(max-width:1024px)読込＝PCには一切適用されない。 */
html,body{overflow-x:clip}

/* ▼▼▼ SP フッター：WebGL波をやめて「まっすぐな緑フッター＋上辺の細い金線」に（DPR1でボヤけたため・perfも最良）。
   PCは従来のWebGL波のまま（波はJSもSP(<=600)で生成しない）。 ▼▼▼ */
@media (max-width:1024px){
  #wave{display:none}                 /* WebGLキャンバス非表示(JS側でも生成停止済) */
  .wave-mascot{display:none}          /* 虎は今は非表示の方針 */
  .site-footer{height:8.5vh;min-height:66px;background:#2B2B2B}   /* まっすぐな帯(=波と同色)。13vh→8.5vh(35%薄く) */
  .site-footer::before{content:"";position:absolute;left:0;right:0;top:0;height:1.5px;
    background:linear-gradient(90deg,#a8854a,#e8d49a,#a8854a);pointer-events:none}   /* 上辺の細い金線 */
  .wave-ui{padding:0}
  /* 3要素すべて縦中央(=同じ水平線)に揃える。50th=左(ハンバーガーの反対) / ワードマーク=水平中央 / ハンバーガー=右 */
  .wave-logo{position:absolute;left:clamp(18px,5.5vw,30px);top:50%;transform:translateY(-50%);width:43px;margin:0}   /* 50th: 左・+20%(36→43) */
  .wave-brand{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:clamp(156px,44vw,202px);margin:0}   /* ワードマーク: 水平&垂直中央・+20% */
  .wave-right{position:absolute;right:clamp(18px,5.5vw,30px);top:50%;bottom:auto;transform:translateY(-50%)}   /* ハンバーガー: 右・縦中央 */
  .wave-menu{align-content:center}    /* 3本線をボックス中央に=中心を他と揃える */
}

/* ▼▼▼ SP HERO 第一パス。PCのブロブ構成を縦へ分離（施設動画=右上/人物=左下）＋見出し縮小＋50thロゴを直上へ。
   位置の起点はヒーローJSが CSS変数/ブロブ% から読むので、ここの上書きで配置だけ変わり choreography は維持。 ▼▼▼ */
@media (max-width:1024px){
  .headline{--hl:clamp(40px,11vw,50px);--text-y:0px;line-height:1.14;letter-spacing:.04em}   /* +20%(33/9.2vw/42→40/11vw/50)。文字種比率は--hl基準なのでバランス維持のまま拡大 */
  .headline .hl-kn{font-size:calc(var(--hl) * 0.936)}   /* ひらがな(を/の/へ)だけ+20%(0.78→0.936)。SPのみ・PCは0.78のまま */
  .hero-logo{--logo-y:0px;--logo-scale:0.78;margin-bottom:14px}
  .center{justify-content:flex-start;padding-top:18vh;transform:none}   /* 見出し塊を上へ */
  /* ブロブの見た目の横長度 ≒ config の ratio × (キャンバス幅px/高さpx)。縦長キャンバスだと横長ratioが潰れて正方形っぽく見える
     → 幅%を上げ高さ%を下げてキャンバスを横広めにし、本来の横長(PC同様)を出す。左%を負に振って左へ伸ばす。 */
  #b-hero-sm{left:24%!important;top:-22%!important;width:110%!important;height:var(--hero-sm-height,53%)!important}   /* 施設ミックス動画（上側）: 601〜1024pxは53%。電話幅は下の変数だけ57%へ */
  #b-hero-lg{left:-18%!important;top:46%!important;width:108%!important;height:52%!important}   /* 人物(左下): 適度な横長＋左へ少し(122/50/-26→108/52/-18) */
}

/* 電話幅だけ、上側動画を下へ約32〜34px追加して人物・スカーフを見せる。
   上端・横位置・ブロブ形状パラメータは維持し、空いた縦領域へ見出しを16px下げる。 */
@media (max-width:600px){
  #b-hero-sm{--hero-sm-height:57%}
  .headline{--text-y:16px}
}

/* ▼▼▼ SP セクション最適化（マーキー縮小 / §3+4 見出し統一・詰め / スキャッター2列グリッド再設計） ▼▼▼ */
@media (max-width:1024px){
  /* マーキー統一：§9(history-selected__marquee)がSP専用に clamp(88px,25vw,150px)=約97px で他(156px)より小さかった＝「違う」。
     他のマーキーもこれに合わせ全セクション統一。eyebrowのgap161はそのまま＝§9と同じ「マーキー下 約59px」に揃う */
  .hero-saga .hero-marquee__track span,
  .s3-marquee__track span,
  .quiz-marquee__track span{font-size:clamp(100px,29.5vw,175px)}   /* 全マーキー統一＝115px@390 */
  /* 見出しオフセットも「マーキーと同じclamp」で計算＝マーキーサイズを変えてもeyebrowが常にマーキー直下に追従(空きすぎ防止) */
  .hero-saga__title{top:calc(var(--saga-top,95vh) + clamp(100px,29.5vw,175px) * 1.05 - 3px)}   /* §1見出し：マーキー直下 */
  .s3-title{--s3-marq-h:calc(clamp(100px,29.5vw,175px) * 1.05);--s3-head-overlap:-29px!important}   /* §3：マーキー→eyebrow。s3マーキーはグリフが低く描画されるため、数値-3にすると見た目が詰まりすぎる→-29(実測+11)が他4セクションの-3と“見た目”一致 */
  /* §3+§4 WE ARE 見出し：固定ドライバ内の幅を広げて無理改行を解消 */
  .s3-title .scatter-message,.s2scatter .scatter-message{width:min(86vw,446px)!important;max-width:86vw!important}
  /* 日本語見出し「その旅の中に / 森トラストホテルズ」を22pxに統一＋2行に(l1/l2をblock化)。SPの19px/nowrap/br非表示を上書き */
  .scatter-message .we-hl{font-size:22px;white-space:normal}
  .scatter-message .we-hl .l1,.scatter-message .we-hl .l2{display:block}
  /* タイトル左paddingを私たちのホテル(5vw)に統一。ヒーロー/§3scatterは旧--edge(9vw≈34px)で左が深すぎた→5vw(≈19px) */
  .hero-saga__title{left:5vw}
  .hero-saga__title .hst-hl{font-size:22px}   /* ヒーロー見出しも22pxに(clamp min21→22) */
  .s3-title .scatter-message{left:5vw}
  /* §2-3 スキャッター SP＝「旅のフィルム」に全面差し替え。旧グリッド(写真散らし＋詩3つ)はSPでは非表示にし、
     代わりに下の .s2film(ピン留めシネマ)を見せる。PC版(>768)は mobile-1.css 自体を読まないので従来のスキャッターのまま。 */
  .s2scatter .scatter-grid{display:none!important}

  /* ▼ 旅のフィルム：ピン留めシネマ本体。
     .s2film = スクロール量を生む縦長スペーサ(520svh)。.s2film__stage = sticky で画面にピン(=固定に見える)。
     6枚(.s2film__layer)を絶対配置でスタック→JSが opacity をクロスフェード。DOM順で後の写真が前面。
     Ken Burns の scale と、詩(.s2film__cap)の1行フェードもJSが制御(index.html末尾の driver)。 */
  /* フィルム直後(scatter-pin下)の余白：story.css の padding-block:12vh(≈101px)がフィルム後に余分な空きを作り、
     診断マーキーが他セクションより離れて見えた→下だけ86pxに詰めて他マーキーの上余白(約86px)に統一。上(entry)は不変。 */
  .s2scatter .scatter-pin{padding-bottom:86px}
  .s2film{display:block;position:relative;z-index:61;height:520vh;height:520svh}
  .s2film__stage{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden;background:#16211b;
    transform:translateZ(0);backface-visibility:hidden;isolation:isolate;will-change:transform}   /* 合成レイヤに載せて角丸クリップのAA(薄い枠線)を綺麗に＋JSで立ち上げtranslateYを毎フレーム。sticky自身へのtransformは吸着を壊さない */
  .s2film__layers{position:absolute;inset:0;z-index:1}
  .s2film__layer{position:absolute;inset:0;opacity:0;will-change:opacity}
  .s2film__layer:first-child{opacity:1}   /* 土台(京都)は初期から不透明＝ピン開始時に隙間なし */
  .s2film__layer>img,.s2film__layer>video{width:100%;height:100%;object-fit:cover;display:block;
    transform-origin:var(--o,50% 50%);will-change:transform}
  /* 動画(長崎の回廊)は動きが右側にある＝coverの中央トリミングだと右端が切れて“動画感”が出ない。右寄せで右端を見せる。 */
  .s2film__layer>video{object-position:100% 50%}
  /* 下部スクリム：白文字(詩)の可読性のため下だけ軽く暗く。上半分は写真のまま */
  .s2film__scrim{position:absolute;inset:0;z-index:2;pointer-events:none;
    background:linear-gradient(to top,rgba(18,26,21,.66) 0%,rgba(18,26,21,.20) 26%,rgba(18,26,21,0) 48%)}
  /* 詩：下三分の一・明朝・白。全行を同じ baseline に絶対スタックし、JSが1行ずつ opacity 切替 */
  .s2film__caps{position:absolute;left:0;right:0;bottom:15svh;z-index:3;pointer-events:none}
  .s2film__cap{position:absolute;left:6vw;right:6vw;bottom:0;margin:0;opacity:0;
    font-family:"Shippori Mincho","Hiragino Mincho ProN","Yu Mincho",serif;font-weight:500;
    font-size:clamp(21px,6.5vw,30px);line-height:1.5;letter-spacing:.08em;color:#fff;
    text-shadow:0 2px 22px rgba(0,0,0,.42);will-change:opacity,transform}   /* 最長「まだ知らない自分に泊まる」(11字)が各機で1行に収まるサイズ＋左右余白 */
  /* 進捗ドット：右端に6点。現在=白+拡大 */
  .s2film__rail{position:absolute;right:15px;top:50%;transform:translateY(-50%);z-index:4;
    display:flex;flex-direction:column;gap:9px;pointer-events:none}
  .s2film__rail i{width:6px;height:6px;border-radius:50%;background:rgba(255,255,255,.38);transition:background .3s,transform .3s}
  .s2film__rail i.on{background:#fff;transform:scale(1.4)}

  /* §2 キャッチコピー：PC同様「1文＝1行」(。区切り)。文が幅で二次折り返しして途中で割れないよう nowrap で1行固定。フォントは各文が収まるサイズに縮小・幅拡大 */
  .s2-head{max-width:94vw}
  .s2-head .sub{font-size:clamp(15px,5vw,20px);letter-spacing:.03em}   /* +20%。5vw=画面幅追従＝小端末では自動で縮む(レスポンシブ)。最長文でも94vwに収まる範囲 */
  .s2-head .sub .ln{display:block;white-space:nowrap}

  /* §2 Pick up Hotels：横4:縦3(4:3)＋横幅縮小(50vw)＋角丸小さく＋カード間隔を広げる。スクロールは従来のステップ送り(ドット表示)のまま */
  .s2pick__item{width:50vw}
  .s2pick__item .eyecatch{aspect-ratio:4/3;border-radius:6px}   /* 角丸を小さく(10→6) */
  .s2pick__track{gap:5vw;touch-action:pan-y}   /* カード間隔を広げる(1.7vw→5vw)＋横ドラッグはJSで処理・縦はページスクロール */
  /* ホテル名(cardLabel)のPC用手動改行<br>(例:IRAPH SUI 宮古島)をSPだけ無効化＝カード幅で自然折り返し。PCは<br>のまま */
  .s2pick__item .title br{display:none}
  /* タッチ端末で :hover が張り付き、触ったカードだけ「1段上がる」/ズームしたまま固定される問題を打ち消す。
     hover:none＝マウスを持たない端末のみ対象なので、hover:hover の PC/マウス環境は完全に不変。 */
  @media (hover: none){
    .s2pick__item:hover .eyecatch{transform:none;box-shadow:0 6px 20px rgba(0,0,0,.08)}
    .s2pick__item:hover .eyecatch img{transform:none}
  }
}

/* ▼▼▼ タブレット専用(601〜1024px)：モバイルの構造そのまま、文字サイズ/余白だけタブレット向けに拡大。
   電話(≤600px)は min-width 条件に入らない＝完全に不変。iPad縦(〜1024)だけに効く上書き層。 ▼▼▼ */
@media (min-width:601px) and (max-width:1024px){
  /* JP見出し(ユーザー確認済＝据置) */
  .hero-saga__title .hst-hl{font-size:clamp(37px,5.4vw,57px)}
  .scatter-message .we-hl{font-size:clamp(37px,5.4vw,57px)}
  /* ★§3見出し「その旅の中に／森トラストホテルズ」：見出しを55pxに拡大したら幅446pxでは
     「森トラストホテルズ」が単語途中で3行に折返し→テキストエリアを右に広げ2行に収める。 */
  .s3-title .scatter-message,.s2scatter .scatter-message{width:min(92vw,600px)!important;max-width:92vw!important}

  /* ★ヒーロー主見出し(.headline hl-kw/hl-kn/hl-te/hl-kata)：--hl が clamp(..,50px)で頭打ち
     →1024でも50px＝小さい。タブレットは上限を外し電話(43px)の約1.9倍へ。文字種比率は--hl基準で維持。 */
  .headline{--hl:clamp(50px,8vw,84px)}
  /* ★ヒーロー50周年ロゴ：--logo-scale:0.78固定で1024でも86px(=8%vw)＝極小。タブレットで拡大。 */
  .hero-logo{--logo-scale:1.4}
  /* 固定フッターをさらに1.3×（前回の1.3×からもう一段）：50周年ロゴ・森トラストwordmark・ハンバーガー。
     87→113px / 263→342px / 39×31→51×40。 */
  .wave-logo{width:clamp(94px,11vw,124px)}                /* 87→~112px */
  .wave-brand{width:clamp(260px,33.4vw,352px)}           /* 263→~342px */
  .wave-menu{width:51px;height:40px;gap:8.5px}           /* 39×31→51×40 */
  .wave-menu span{width:40px;height:3.4px}               /* 31×2.6→40×3.4 */
  /* ★ローディングロゴ：width:168px固定で1024でも168px。タブレットは幅追従で拡大。 */
  #preloader .pl-logo{width:clamp(180px,26vw,300px);max-width:none}
  /* ★マーキー：font-size が clamp(..,175px)で頭打ち＝1024で相対的に細い。上限を上げて存在感を戻す。
     ▼位置計算(下2つ)が同じclampを参照するので必ず同時に更新(eyebrowがマーキー直下に追従)。 */
  .hero-saga .hero-marquee__track span,
  .s3-marquee__track span,
  .quiz-marquee__track span{font-size:clamp(175px,24vw,240px)}
  /* ※DESTINATIONS(.history-selected__marquee-track span)は mobile-2.css:55(後読み)が勝つため
     mobile-2 のタブレット層で拡大する（担当B領域）。ここに書いても上書きされ効かない。 */
  .hero-saga__title{top:calc(var(--saga-top,95vh) + clamp(175px,24vw,240px) * 1.05 - 3px)}
  .s3-title{--s3-marq-h:calc(clamp(175px,24vw,240px) * 1.05);--s3-head-overlap:10px!important}

  /* 英語eyebrow(共通var・マーキー下の英語)：2倍は大きすぎ→35%縮小(51→33px) */
  :root{--eyebrow-size:clamp(22px,3.25vw,34px)}
  /* §2キャッチコピー(.ch＝動画上のテキスト)：もう少し大きく */
  .s2-head .sub{font-size:clamp(27px,3.6vw,42px)}
  /* §2「旅のフィルム」の詩(.s2film__cap)＝拡大した動画の上に載る詩テキスト：もう少し大きく */
  .s2film__cap{font-size:clamp(34px,5.2vw,52px)}
  /* §2 Pick up Hotels：タイトル・カード名を拡大 */
  .s2pick__title{font-size:clamp(34px,3.8vw,46px)}
  .s2pick__item .title{font-size:clamp(18px,2.1vw,24px)}
}

/* ===== SP/タブレット専用マスコット v5「金線の振り付け」（lib/sp-mascot.js が body 直下に生成） =====
   金線の上に固定で住み、セクションの節目ごとに「実際に歩いて」定位置を移る（PC版振り付けの軽量版）。
   その場歩きはピン留め区間で背景が動かず嘘に見えるため廃止。transform遷移の時間はJSが距離から算出。
   スプライト送りは必ずpx（%は「画像幅−ボックス幅」比で破綻）。サイズは --spmh-h だけで全追従。 */
@media (max-width:1024px){
  .spmh{
    --spmh-h:clamp(72px, 12vw + 30px, 150px);   /* 画面幅連動: 390→77px / 768→122px / 1024→153px */
    position:fixed;
    right:2vw;
    bottom:calc(max(8.5vh,66px) - 6px);   /* 足元を金線に6px食い込ませ接地 */
    width:calc(var(--spmh-h) * 1.07);
    height:var(--spmh-h);
    z-index:96;
    pointer-events:none;
    transform:translateX(calc(-100vw - 100%));   /* 初期=画面外左（入場前） */
    transition-property:transform;
    transition-timing-function:linear;
  }
  .spmh__walk,.spmh__sit{
    position:absolute;top:0;bottom:0;left:50%;
    transform:translateX(-50%);
    display:none;
    background-repeat:no-repeat;
    background-position:0 0;
  }
  .spmh__walk{
    width:calc(var(--spmh-h) * 1.07);
    background-image:url("../assets/mascot/_web/sp/tiger-walk-sprite.png");
    background-size:calc(var(--spmh-h) * 1.07 * 16) 100%;
  }
  .spmh__sit{
    width:calc(var(--spmh-h) * 1.15);
    background-image:url("../assets/mascot/_web/sp/tiger-hero-blink.png");
    background-size:calc(var(--spmh-h) * 1.15 * 12) 100%;
  }
  /* --- 入場（画面外左→右端の定位置。素材は左向き→右歩きは反転） --- */
  .spmh.is-enter{animation:spmh-enter 3.2s linear forwards}
  .spmh.is-enter .spmh__walk{
    display:block;
    transform:translateX(-50%) scaleX(-1);
    animation:spmh-walkstep .8s steps(16) infinite;
  }
  /* --- 待機 --- */
  .spmh.is-seated .spmh__sit{display:block}
  .spmh.is-blink .spmh__sit{animation:spmh-blink 1.1s steps(12) 1}
  /* --- 歩行（JSが transform とduration を駆動。向きは is-flip） --- */
  .spmh.is-walking .spmh__sit{display:none}
  .spmh.is-walking .spmh__walk{
    display:block;
    animation:spmh-walkstep .55s steps(16) infinite;
  }
  .spmh.is-flip .spmh__walk{transform:translateX(-50%) scaleX(-1)}
  /* 終幕の虎が画面内にいる間は固定の虎を消す（猛スクロール時に2匹並ぶのを防ぐバトンタッチ） */
  .spmh.is-yield{visibility:hidden}
  @keyframes spmh-enter{
    from{transform:translateX(calc(-100vw - 100%))}
    to  {transform:translateX(0)}
  }
  @keyframes spmh-walkstep{
    from{background-position-x:0}
    to  {background-position-x:calc(var(--spmh-h) * 1.07 * -16)}
  }
  @keyframes spmh-blink{
    from{background-position-x:0}
    to  {background-position-x:calc(var(--spmh-h) * 1.15 * -12)}
  }
}
/* 終幕の虎（.cta-banners 先頭に in-flow）: バナーの右上に座って見送る。PCでは出さない。 */
.spmf{display:none}
@media (max-width:1024px){
  /* height:0 のアンカー＝レイアウトに一切高さを足さない（カードとバナーの間隔を広げない）。
     虎は絶対配置で上に乗り、bottom:-6px でバナーの上枠に足が6px重なって「座ってる」形になる
     （DOM順でバナーが後＝足先はバナーの枠の奥に隠れる）。8/5に2枚積みになっても常に1枚目の上。 */
  /* z-index:3 — バナー(.cta-banner)の filter がスタッキング文脈を作るため、
     指定しないと虎の足がバナーの枠の下に潜る。虎は常に最前面。 */
  .spmf{--spmh-h:clamp(72px, 12vw + 30px, 150px);display:block;position:relative;height:0;z-index:3;pointer-events:none}
  .spmf__f{
    position:absolute;right:4vw;bottom:-6px;
    width:calc(var(--spmh-h) * 1.15);height:var(--spmh-h);
    background-image:url("../assets/mascot/_web/sp/tiger-hero-blink.png");
    background-repeat:no-repeat;background-position:0 0;
    background-size:calc(var(--spmh-h) * 1.15 * 12) 100%;
  }
  .spmf.is-blink .spmf__f{animation:spmh-blink 1.1s steps(12) 1}
}

@media (prefers-reduced-motion: reduce){
  .spmh{transition:none!important}
  .spmh.is-enter{animation:none}
}