/* 追従UIとメニュー（設計＝pcメニュー画面／pc画面イメージ から実測）
   ★1440px幅の設計座標をそのまま使い、器（.chrome）を基準に置く。 */
.chrome{position:fixed;inset:0;pointer-events:none;z-index:9000;
  font-family:'Hiragino Sans','Hiragino Kaku Gothic ProN','Noto Sans JP',sans-serif}
/* ★`.c-in` は画面いっぱいの高さ×1440px の**透明な箱**。ここに pointer-events:auto を
   与えると、**ページ中央1440pxのクリックを全部吸ってしまう**（z-index:9000 で最前面）。
   ハンバーガーは .c-in の子なので押せるが、その下のカルーセル・アコーディオンには
   マウスが一切届かない（2026-08-31 中尾さん「メニューは開くのにカルーセルもアコーディオンも動かない」）。
   ∴ **押せるようにするのは、実際のボタンだけ**。器は素通しのまま。 */
.chrome .c-burger,.chrome .c-tab,.chrome .c-top,.chrome .c-cta,.chrome .c-menu{pointer-events:auto}
.chrome .c-in{position:absolute;top:0;width:1440px;height:100%}
/* ★右端の器＝画面の右端に貼る。設計は1440幅の右端にハンバーガー(1370.7)・
   募集要項タブ(1384.1)・TOPへ(1333.8)を置いているので、器を右端へ貼れば
   **設計の相対位置のまま、画面の右端にまとまる**。 */
.chrome .c-in-r{right:0;left:auto}
/* ★中央の器＝応募バーだけ。これはページの中央に置く物。 */
.chrome .c-in-c{left:50%;transform:translateX(-50%)}

/* ハンバーガー */
/* ★線の色と間隔は設計の実測（2026-08-31 白石🔁）。
   色＝#221714（#3e3a39 では薄すぎた）。間隔＝10px にすると
   3本が 12/24/36px の**整数位置**に乗り、設計（墨 y26-27・38-39・50-51）と一致する。
   9.5px では中央寄せの起点が半画素になり、上下2本だけ太くにじんでいた。 */
.c-burger{position:absolute;border:0;background:#fff;cursor:pointer;padding:0;
  display:flex;flex-direction:column;justify-content:center;align-items:center;gap:10px}
.c-burger span{display:block;width:31.4px;height:2px;background:#221714;transition:transform .25s,opacity .2s}
.c-burger[aria-expanded="true"] span:nth-child(1){transform:translateY(11.5px) rotate(45deg)}
.c-burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.c-burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-11.5px) rotate(-45deg)}

/* 右の「募集要項」タブ（縦書き） */
.c-tab{position:absolute;color:#fff;text-decoration:none;border-radius:12px 0 0 12px}

/* TOPへ戻る */
/* ★矢印は上・TOPは下＝設計の余白（上6px／下7px）で置く。
   中央寄せ(gap:2px)だと矢印が8px下がり、文字との間隔が半分になる
   （2026-08-31 白石🔁＋実測＝設計の墨 y764-809 に対し実装 y772-809）。 */
.c-top{position:absolute;border:0;cursor:pointer;border-radius:50%;color:#fff;
  padding:0;box-sizing:border-box;
  opacity:0;visibility:hidden;transition:opacity .25s,visibility .25s}
.c-top.on{opacity:1;visibility:visible}
.c-top svg{display:block}

/* 下部の応募するバー */
.c-cta{position:absolute;
  color:#fff;text-decoration:none;font-weight:700}

/* メニュー */
.c-menu{position:absolute;inset:0;background:rgba(0,0,0,.18);opacity:0;visibility:hidden;
  transition:opacity .25s,visibility .25s}
.c-menu.on{opacity:1;visibility:visible}
.c-panel{position:absolute;background:rgba(255,255,255,.94);border-radius:10px;
  box-shadow:0 6px 26px rgba(0,0,0,.18)}
.c-menu a,.c-menu button{position:absolute;text-decoration:none;color:#231815}
.c-menu .c-item{display:block;white-space:nowrap}
.c-menu .c-btn{display:flex;align-items:center;justify-content:center;color:#fff;border-radius:4px}
.c-menu .c-close{display:flex;align-items:center;justify-content:center;background:#fff;
  border:1px solid #231815;border-radius:4px;cursor:pointer;color:#231815}
@media (prefers-reduced-motion:reduce){.chrome *{transition:none!important}}

/* 「毎回違う写真」を押している間だけ、写真をすっと沈める（切り替わりが唐突にならない） */
.fv img{transition:opacity .18s ease}
.fv.is-shuffling img{opacity:.45}
@media (prefers-reduced-motion: reduce){ .fv img{transition:none} .fv.is-shuffling img{opacity:1} }

/* ★左端の器＝画像切替ボタン（2026-09-01 中尾さん「左上に固定のフロートに」）。
   右端の `.c-in-r` と同じ作法で、器を画面の左端へ貼る。 */
.chrome .c-in-l{left:0;right:auto}
/* 器は素通しのまま＝押せるようにするのはボタンだけ（.c-in に pointer-events を与えない） */
.chrome .fv-shuffle{pointer-events:auto}

/* ── スマホ幅（SP版を持たないページ＝募集要項）のメニュー（2026-09-04 監査C#2・A#3）──
   ★正体＝メニューの箱と項目は、設計の1440座標を「右端基準の器」に絶対配置している。幅390では器の左端が
     画面の左1050px外にあり、箱（設計x≈1000）は x=-181 に落ちて**9項目中0項目**しか見えなかった。
   ★直し＝899px以下では**座標を捨て、項目を上から流す**（インラインの座標は !important で上書き）。
     SP版を持つページ（.sp-on）では .chrome 自体が消えるので、この規則は募集要項にしか効かない。
     hoiku/roadmap は viewport width=1440 なので、このメディアクエリには来ない。
   ★閉じ方＝ハンバーガー自身が × に変わるのはそのまま。「Close」は項目の下に流す（右上だと × と二重になる）。 */
@media (max-width:899px){
  .c-menu .c-in{position:fixed;inset:0;width:auto;height:auto;transform:none;
    display:flex;flex-direction:column;gap:8px;padding:76px 12px 24px;box-sizing:border-box;
    overflow:auto;-webkit-overflow-scrolling:touch}
  .c-menu .c-panel{display:none}                     /* 箱は捨てる＝項目1つずつが白い行になる */
  .c-menu .c-item,.c-menu .c-btn,.c-menu .c-close{
    position:static!important;left:auto!important;top:auto!important;bottom:auto!important;
    width:auto!important;height:auto!important;font-size:17px!important}
  .c-menu .c-item{display:block;background:rgba(255,255,255,.96);border-radius:8px;
    padding:14px 18px;line-height:1.3;white-space:normal;min-height:48px;box-sizing:border-box}
  .c-menu .c-btn{padding:16px 18px;border-radius:8px;min-height:52px}
  .c-menu .c-close{padding:14px 18px;margin-top:8px;min-height:48px}
}

/* ── 暗幕は画面いっぱいに（2026-09-04 監査A#9）────────────────────
   ★`.c-menu` は右端1440pxの器（`.c-in-r`）の中に居るので、1920pxでは**左480pxが暗くならず、
     そこを押しても閉じなかった**。器から出さずに、暗幕だけ画面幅へ広げる。
   ★中身（`.c-panel` と項目）は器の座標のままなので、設計の位置関係は変わらない。 */
.chrome .c-in-r > .c-menu{left:auto;right:0;width:100vw}
/* ── キーボードの順番＝追従UIを本文より先に（2026-09-04 監査C#14）──────
   ★DOMは末尾のままだが、`.chrome` は画面に固定された「サイト共通の操作」なので、
     Tabで最初に触れる方が自然（本文45個を通過してからメニュー、では遠すぎる）。
   ※順番はJS側（tabindex）で与える。ここは見た目の焦点を消さないための保険。 */
.chrome a:focus-visible,.chrome button:focus-visible{outline:3px solid #c2591c;outline-offset:2px}

/* ── スマホ幅（SP版を持たないページ＝募集要項）の追従UI（2026-09-04 監査C#12・A#15）──
   ★設計は1440px幅の座標をそのまま置く作り。幅390では
     ・応募バーが **幅1237px**（画面の外へ大きくはみ出し、文字だけ中央に見える）
     ・サイドタブ4本が **画面の高さの6割**を占め、右端から56px画面外
   ∴ 899px以下では**座標を捨てて、スマホ用の寸法で置き直す**（SP版を持つページには効かない）。
   ★寸法はSP版TOP（`sp_top.css` の `.spt-bar` `.spt-side`）に合わせる＝2つのページで同じ顔にする。 */
@media (max-width:899px){
  /* 応募バー＝画面下いっぱいの帯 */
  .chrome .c-in-c{left:0;right:0;transform:none;width:100%}
  .chrome .c-cta{left:0!important;right:0!important;width:100%!important;
    bottom:0!important;top:auto!important;height:56px!important;border-radius:0!important;
    display:flex;align-items:center;justify-content:center}
  .chrome .c-cta .c-cta-l{position:static!important;font-size:17px!important;top:auto!important}
  /* サイドタブ＝縦書きのまま、画面の高さの3割に収める */
  .chrome .c-tab{width:30px!important;height:auto!important;min-height:96px;max-height:23vh;
    padding:10px 5px;font-size:13px!important;line-height:1.25;
    writing-mode:vertical-rl;text-orientation:upright;
    display:flex;align-items:center;justify-content:center}
  .chrome .c-tab .c-tab-l{position:static!important;left:auto!important;top:auto!important;
    font-size:13px!important;writing-mode:vertical-rl;text-orientation:upright}
  /* ハンバーガーは右上・44px（指で押せる大きさ） */
  .chrome .c-burger{left:auto!important;right:10px!important;top:10px!important;
    width:44px!important;height:44px!important;border-radius:8px}
  /* TOPへ戻る丸 */
  .chrome .c-top{left:auto!important;right:12px!important;width:46px!important;height:46px!important;
    bottom:72px!important;top:auto!important}
  /* 画像更新ボタンは狭い画面では出さない（本文を覆うだけになる＝監査C#17と同じ理由） */
  .chrome .c-in-l{display:none}
}

/* ── 「毎回違う写真」ボタンの置き場（2026-09-04 監査C#17・A#29）────────────
   ★中尾さん指示（2026-09-01「左上に固定のフロートに」＝51番A8）は**そのまま守る**。
     直すのは「**常に本文の上に乗って読めなくする**」ことだけ＝
     ①下へ 96px 下げて、見出しの起点（区画の頭）と重ならない位置にする
     ②半透明にして、下の文字が透ける（押した時・触れた時は不透明に戻す）
   ★消さない・動かしすぎない＝中尾さんが決めた「左上」から出ない範囲での手当て。 */
.chrome .fv-shuffle{opacity:.82;transition:opacity .18s}
.chrome .fv-shuffle:hover,.chrome .fv-shuffle:focus-visible,.chrome .fv-shuffle:active{opacity:1}
@media (min-width:900px){ .chrome .c-in-l .fv-shuffle{margin-top:96px} }