/* ============================================================
   基弘会 採用サイト｜**TOPページ専用**のSP版
   ★`_work/sp/sp.css`（施設4ページ・相席の持ち場）とは**別ファイル**。
     クラス接頭辞は `spt-`＝ PC側(`.sec`)とも 施設SP版(`.sp-`)とも1つも当たらない。
     ＝相席と資源を共有しない（40_未解決 U-400）。
   ★★このCSSはPC版と同じページに同居する。
     ∴ 素の要素セレクタ（*, body, img, a, button）を裸で書かない＝全部 `.spt-root` の中へ。
   ★組み方＝**設計幅750pxの絶対配置**（PC版 `.sec` と同じ考え）。
     画面幅に合わせて `zoom` で版面ごと縮める＝組み直さない。倍率は sp_top.js が入れる。
   2026-09-03 有明幸大
   ============================================================ */

/* 900px以上＝PC版のまま（SP版は描かない） */
@media (min-width:900px){ .spt-root{display:none!important} }

@media (max-width:899px){
  /* PC版の本文と固定物を消す（`sp-on` はSP版を持つページにだけ付く）
     ★★TOPは `main#content` の外にも PC版の部品が居る★★（2026-09-03 実測）
       `<body>` の直下に `section.fv`（**幅1440**）／`.fv.live-more-host`／`.c-spacer` が並ぶ。
       `main#content` と `.chrome` だけ消すと **横に1065pxはみ出したまま**になり、
       固定物（`position:fixed`）の幅まで1440pxに引きずられる。∴ ここで全部落とす。 */
  body.sp-on main#content,
  body.sp-on .chrome,
  body.sp-on > section.fv,
  body.sp-on > .live-more-host,
  body.sp-on > .c-spacer{display:none!important}
}

.spt-root{
  --z:.5;                      /* 画面幅/750。sp_top.js が実測で入れ替える */
  --brown:#5c4e42;
  --orange:#c2591c;
  --beige:#efeadd;
  position:relative;
  width:100%;
  overflow:clip;
  background:#fff;
  font-family:"Hiragino Sans","Hiragino Kaku Gothic ProN","Noto Sans JP","Yu Gothic",YuGothic,Meiryo,sans-serif;
  /* ★★約物は「詰める」＝設計（Illustrator）がそう組んでいる★★（2026-09-03 実測）
     切った状態だと「。」「、」「（）」が全角のままで**行が横に伸び**、
     その区画の差分だけが 10〜23 に跳ねた（絵の方は mean 0.00＝完全一致だったので
     犯人が文字だと名指しできた）。∴ palt を **入れる**。残りのズレは fitText が吸う。 */
  font-feature-settings:"palt" 1;
  text-size-adjust:100%;
  -webkit-text-size-adjust:100%;       /* ★font boosting を止める（50番 #189） */
}

/* ── 版面（設計750px幅をそのまま組み、zoomで縮める） ───────── */
.spt-page{
  position:relative;
  width:750px;
  margin:0;
  zoom:var(--z);
}
.spt-ab{position:absolute;left:0;width:750px;overflow:hidden}

/* ── 帯＝フェードで出てくる1単位（デザインの余白で切ってある） ─────────
   ★絵は background-image で描く＝帯の高さを自由に取っても画像は切り直さない
     （1500pxのスライスを共有し、background-position でずらすだけ）。
   ★★**隠すのはJSが `.spt-anim` を付けた時だけ**★★＝JSが落ちた機・IntersectionObserver
     が無い機では**クラスごと付かない＝本文は見えたまま**（PC版 live.css と同じ考え方）。 */
/* ★帯は**文字だけ**の入れ物（2026-09-04）＝絵は下の `.spt-bg` が持つ。
   帯に背景を持たせると、同じ絵を帯の数だけ別々に縮小描画することになり、
   境目に1本の線が残る（実測＝53箇所中28箇所）。 */
.spt-band{position:absolute;left:0;width:750px}
.spt-band .spt-tx{position:absolute;inset:0}
.spt-root.spt-anim .spt-band{opacity:0;transform:translateY(34px);
  transition:opacity .7s cubic-bezier(.22,.61,.36,1),transform .7s cubic-bezier(.22,.61,.36,1)}
.spt-root.spt-anim .spt-band.is-in{opacity:1;transform:none}
/* ★帯の中の行を上から順に出す（2026-09-16 かよこさん「SP版にもフェードなどの遊び心を」）
   ＝PC版の「部品ごとに薄く浮き上がる」に寄せる。動くのは**文字と、文字に付く小さな絵**だけ（背景の絵は動かさない＝中尾さん 2026-09-04）。
   ★`translate` は `transform`（傾いた行の rotate）と別の性質なので、傾きを壊さずに滑らせられる。
   ★遅れ（--d）は sp_top.js が帯ごとに「行の上端の順」で入れる（最大 420ms）。 */
.spt-root.spt-anim .spt-band .spt-tx > *{opacity:0;translate:0 10px;
  transition:opacity .55s cubic-bezier(.22,.61,.36,1),translate .55s cubic-bezier(.22,.61,.36,1);transition-delay:var(--d,0ms)}
.spt-root.spt-anim .spt-band.is-in .spt-tx > *{opacity:1;translate:0 0}
/* 大きな飾り文字（Holiday / System / 大きな数字）＝ゆっくり横から流れ込む
   ★出終わった後の位置（translate:0）を**この行より後に**明示する（2026-09-16 かよこさん「4つのこだわりの4が離れている」）
     ＝同じ強さの指定は後に書いた方が勝つ。最初はこの行が is-in より後に在り、出終わっても -28px に居座っていた（4・2・3・Holiday・System 全部）。 */
.spt-root.spt-anim .spt-band .spt-tx > .spt-big{translate:-28px 0;transition-duration:1.15s}
.spt-root.spt-anim .spt-band.is-in .spt-tx > .spt-big{translate:0 0}
/* 畳んだ中身を開く時＝ふわっと（背景の暗幕はそのまま） */
/* ★keyframes ではなく transition で（このMacの検査ブラウザで keyframes が最初のコマで止まり opacity:0 のまま＝実機でも同じ型の事故があり得る。
     開く側（JS）が `is-open` を付け、万一付かなくても 400ms 後に付ける保険つき） */
.spt-root.spt-anim .spt-panel .spt-panel-in{opacity:0;transform:translateY(18px) scale(.985);
  transition:opacity .32s cubic-bezier(.22,.61,.36,1),transform .32s cubic-bezier(.22,.61,.36,1)}
.spt-root.spt-anim .spt-panel.is-open .spt-panel-in{opacity:1;transform:none}
/* 「毎回違う写真」の枠には opacity の演出を入れない（下に設計の写真が焼いてあり、透けた瞬間に2枚目に見える＝2026-09-16 かよこさん実機） */
/* ★絵＝スライス1枚＝1要素。**割らない・動かさない**（線を作らないため） */
.spt-bg{position:absolute;left:0;width:750px;display:block;
  background-repeat:no-repeat;background-size:750px auto;background-position:0 0}
.spt-tx{position:absolute;inset:0}
.spt-tx span{
  position:absolute;
  white-space:pre;
  margin:0;
  display:block;
  font-family:inherit;
}
.spt-tx span.m{font-family:"Hiragino Mincho ProN","Yu Mincho",YuMincho,"Noto Serif JP",serif}
.spt-tx span.v{writing-mode:vertical-rl;text-orientation:upright}

/* 目次の錨（見えない・高さゼロ） */
.spt-anchor{position:absolute;left:0;width:1px;height:1px;display:block}

/* ── FV（C案・PNG＝暫定 U-402） ───────────────────────────── */
.spt-fv{position:absolute;left:0;top:0;width:750px;overflow:hidden}
/* ★写真は「窓＋中の絵」＝PC版と同じ作り（窓で切り、中の絵は位置と大きさを持つ） */
.spt-fv-tiles{position:absolute;inset:0}
.spt-fv-t{position:absolute;display:block;overflow:hidden}
.spt-fv-t img{position:absolute;display:block;max-width:none}
/* ★枠と見出しの層＝写真の上に重なる（透過PNG→WebP） */
/* ★MVは3枚の層で重ねる（2026-09-03 新SVG）＝写真タイルを挟んで
   写真 → mid（色ブロック5） → person（切り抜き人物・**掛け算**） → over（色ブロック4＋文字）。
   ★person だけ `mix-blend-mode:multiply`＝**下の写真に掛かる**のが設計。
     ふつうに重ねると別の絵になる（不透明度は絵に焼き込んである）。 */
/* ★B案（茶色）は**全面の背景写真が写真タイルより下**に在る＝別の層で敷く */
.spt-fv-under{position:absolute;left:0;top:0;width:750px;height:920px;display:block;
  pointer-events:none;z-index:0}
.spt-fv-over{position:absolute;left:0;top:0;
  width:750px;height:920px;display:block;pointer-events:none}
/* ★「続きを見る」の丸ボタン＝**MVの器の外**に置く（2026-09-03）
   設計では MV（0〜920）とベージュ帯（925〜）に**またがって**いる。
   MVの中（`overflow:hidden`・高さ920）に入れると必ず下半分が切れる。
   ∴ 版面の子として絶対配置し、帯より前に出す。 */
.spt-fv-next{position:absolute;display:block;z-index:6;
  background:url("top/fv_next.webp?v=260915b") center/100% 100% no-repeat}  /* ?v=＝新版で中身が変わった（7日キャッシュ対策・2026-09-15） */

/* 読み上げ・検索にだけ出る文字（見た目には出さない）
   ★FVをPNGで置いた穴を、ここで塞ぐ＝焼き付いた見出しと同じ言葉をDOMに残す。 */
.spt-sr{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;
  clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}

/* ── 画面に貼りつく物 ─────────────────────────────────── */
.spt-chrome{position:fixed;inset:0;pointer-events:none;z-index:9000}
.spt-chrome a,.spt-chrome button{pointer-events:auto}

.spt-hd{
  position:absolute;left:0;top:0;width:100%;
  height:calc(88px * var(--z));
  background:rgba(255,255,255,0);
  transition:background .25s ease;
}
.spt-root.is-scrolled .spt-hd{background:rgba(255,255,255,.867)}  /* ★PC版と同じ不透明度 */
.spt-hd-logo{position:absolute;left:calc(30px * var(--z));top:0;
  width:calc(430px * var(--z));height:calc(88px * var(--z));display:block}
.spt-burger{
  position:absolute;right:calc(24px * var(--z));top:calc(14px * var(--z));
  width:calc(62px * var(--z));height:calc(60px * var(--z));
  border:0;background:none;padding:0;cursor:pointer;
}
.spt-burger span{display:block;height:calc(5px * var(--z));border-radius:99px;background:var(--brown);
  margin:calc(9px * var(--z)) auto;width:calc(46px * var(--z));transition:transform .2s,opacity .2s}
.spt-root.is-menu .spt-burger span:nth-child(1){transform:translateY(calc(14px * var(--z))) rotate(45deg)}
.spt-root.is-menu .spt-burger span:nth-child(2){opacity:0}
.spt-root.is-menu .spt-burger span:nth-child(3){transform:translateY(calc(-14px * var(--z))) rotate(-45deg)}

/* 右端の縦「募集要項」 */
.spt-side{
  position:absolute;right:0;top:50%;transform:translateY(-50%);
  writing-mode:vertical-rl;
  /* ★★縦組みでは半角数字が「寝る」★★（2026-09-03 中尾さん「数字が横向きになっています」）
     ＝「**4**つの施設」「**1**日の流れ」の数字だけ横になる。日本語の縦組みは1桁の数字を立てるのが正しい。
     PC版（chrome.js）も同じ対策を入れている＝`text-orientation:upright`。 */
  text-orientation:upright;
  background:#7a8a52;color:#fff;text-decoration:none;
  font-size:calc(26px * var(--z));letter-spacing:.12em;
  padding:calc(22px * var(--z)) calc(9px * var(--z));
  border-radius:calc(10px * var(--z)) 0 0 calc(10px * var(--z));
  box-shadow:0 2px 8px rgba(0,0,0,.18);
  /* ★★opacity:0 だけでは当たり判定が残る★★（2026-09-04 監査C#4＝スクロール前のFVの右端を触ると募集要項へ飛んだ）
     `.spt-chrome a{pointer-events:auto}` が子に効くので、親の none では止まらない。∴ visibility で消す（当たりも消える） */
  opacity:0;visibility:hidden;pointer-events:none;transition:opacity .25s,visibility .25s;
}
.spt-root.is-scrolled .spt-side{opacity:1;visibility:visible;pointer-events:auto}

/* 右下の「TOP」 */
.spt-totop{
  position:absolute;right:calc(20px * var(--z));
  bottom:calc(110px * var(--z));
  width:calc(88px * var(--z));height:calc(88px * var(--z));
  border-radius:50%;background:rgba(255,255,255,.92);color:var(--brown);
  font-size:calc(22px * var(--z));font-weight:700;
  display:flex;align-items:center;justify-content:center;text-decoration:none;
  box-shadow:0 2px 10px rgba(0,0,0,.2);
  opacity:0;visibility:hidden;pointer-events:none;transition:opacity .25s,visibility .25s;   /* ★visibility＝当たりも消す（監査C#4） */
}
.spt-root.is-scrolled .spt-totop{opacity:1;visibility:visible;pointer-events:auto}

/* 下の固定バー（募集要項／応募する） */
.spt-bar{position:absolute;left:0;right:0;bottom:0;display:flex;
  transform:translateY(100%);transition:transform .25s ease}
.spt-root.is-scrolled .spt-bar{transform:none}
.spt-bar a{flex:1 1 50%;text-align:center;text-decoration:none;color:#fff;
  font-size:calc(30px * var(--z));font-weight:600;letter-spacing:.06em;
  padding:calc(26px * var(--z)) 0}
.spt-bar-a{background:#7a8a52}
.spt-bar-b{background:#c2591c}

/* ハンバーガーのメニュー（ポップアップ） */
.spt-menu{position:absolute;inset:0;background:rgba(92,78,66,.45);
  display:flex;align-items:center;justify-content:center;pointer-events:auto}
.spt-menu[hidden]{display:none}
.spt-menu-in{background:#fff;border-radius:calc(12px * var(--z));
  width:calc(500px * var(--z));padding:calc(40px * var(--z)) 0 calc(28px * var(--z));
  display:flex;flex-direction:column;align-items:center;
  box-shadow:0 10px 40px rgba(0,0,0,.25)}
.spt-menu-in a{color:var(--brown);text-decoration:none;font-size:calc(26px * var(--z));
  padding:calc(16px * var(--z)) 0;font-weight:600}
.spt-menu-cta{display:flex;flex-direction:column;width:calc(360px * var(--z));gap:calc(12px * var(--z));
  margin-top:calc(14px * var(--z))}
.spt-menu-cta a{color:#fff;text-align:center;border-radius:calc(6px * var(--z));
  padding:calc(16px * var(--z)) 0;font-size:calc(26px * var(--z))}
.spt-menu-cta .a{background:#7a8a52}
.spt-menu-cta .b{background:#c2591c}
.spt-menu-close{margin-top:calc(22px * var(--z));border:1px solid #cfc7bd;background:#fff;
  color:var(--brown);border-radius:calc(6px * var(--z));
  padding:calc(10px * var(--z)) calc(30px * var(--z));font-size:calc(22px * var(--z));cursor:pointer}

/* ── 畳んである中身（アコーディオン・ポップアップ） ─────────── */
.spt-panel{position:fixed;inset:0;z-index:9500;
  /* ★うしろを十分に沈める（中尾さん 2026-09-03「モーダルにすると背景が真っ白で見づらい」）
       ＝白いカードと白い版面が地続きに見えて、どこまでがモーダルか分からなくなっていた。 */
  background:rgba(58,48,40,.66);
  -webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);
  overflow:auto;-webkit-overflow-scrolling:touch;
  /* ★両サイドに「指でつかめる」余白を残す（中尾さん 2026-09-03）
       ＝画面いっぱいにするとスクロールが効かなくなるため。残りは全部モーダルへ回す。 */
  padding:calc(46px * var(--z)) var(--spt-gut,12px)}
.spt-panel[hidden]{display:none}
.spt-panel-in{position:relative;width:750px;margin:0 auto;zoom:var(--pz,var(--z));background:#fff;
  border-radius:16px;overflow:hidden;box-shadow:0 18px 60px rgba(0,0,0,.45)}
.spt-panel-close{position:sticky;bottom:calc(16px * var(--z));display:block;margin:calc(16px * var(--z)) auto 0;
  border:0;background:var(--brown);color:#fff;border-radius:calc(6px * var(--z));
  padding:calc(12px * var(--z)) calc(36px * var(--z));font-size:calc(24px * var(--z));cursor:pointer}

@media (prefers-reduced-motion:reduce){
  .spt-root *{transition:none!important;animation:none!important}
  .spt-root.spt-anim .spt-band{opacity:1!important;transform:none!important}
  .spt-root.spt-anim .spt-band .spt-tx > *{opacity:1!important;translate:0 0!important}
}

/* ── 押せる所（設計のボタンの上に置く透明な当たり） ─────────────
   ★絵はデザインの中にある。DOM側は「押せること」だけを足す＝見た目を1画素も変えない。 */
.spt-hit{position:absolute;display:block;border:0;background:transparent;padding:0;margin:0;
  cursor:pointer;-webkit-tap-highlight-color:transparent;z-index:5}
.spt-hit:focus-visible{outline:3px solid #c2591c;outline-offset:2px;border-radius:6px}

/* 二段差分のための姿（?gate=1）＝設計のアートボードに無い物を消して比べる */
.spt-root.spt-gate .spt-chrome{display:none!important}

/* ── 「写真で見る基弘会」＝大きな写真を送れるようにする（中尾さん指示 2026-09-03）──
   ★「大きな写真の方の両端に▷をつけてスライドできるよ！感をだす」
   ★写真はPC版の正本（inc/live.json の tour.slides・16枚）を参照。画像は複製しない。 */
.spt-tour{position:absolute;overflow:hidden;z-index:4}
.spt-tour-stage{position:absolute;inset:0}
.spt-slide{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  opacity:0;transition:opacity .35s ease}
.spt-slide.is-on{opacity:1}
/* ★★テロップ＝設計は「写真の上に浮くベージュの小箱」★★（2026-09-04 中尾さん
     「テロップの装飾が入ってないです」）
   こちらは**下端いっぱいの黒いグラデ帯**にしていた＝別物だった。
   設計の実測（`.ai` の図形＋文字から）＝
     箱  x50.00〜430.12 / y5194.01〜5263.37（写真の枠 x37.9 y4900.5 からの相対＝左12.1・下40.1・幅380.1）
     塗り rgb(188,157,102)／文字 19.4px HiraKakuStd-W6（太字）白・行送り24.25（＝1.25）
     余白 横16.7・縦10.45（箱69.4−2行48.5の半分）
   ★不透明度と影は**PC版に合わせる**（`assets/css/live.css` 10行＝`rgba(188,157,102,.9)`＋
     `text-shadow:0 1px 2px rgba(0,0,0,.15)`）＝PCとSPでテロップの見え方を割らない。 */
.spt-tour-cap{position:absolute;left:12.10px;right:auto;bottom:40.10px;
  width:380.10px;margin:0;box-sizing:border-box;
  padding:10.45px 16.70px;color:#fff;font-weight:700;
  font-size:19.40px;line-height:1.25;letter-spacing:.01em;
  background:rgba(188,157,102,.9);text-shadow:0 1px 2px rgba(0,0,0,.15)}
/* 両端の▷＝「送れる」と分かる大きさ・当たり */
.spt-arw{position:absolute;top:50%;transform:translateY(-50%);
  width:74px;height:74px;border:0;padding:0;cursor:pointer;
  border-radius:50%;background:rgba(255,255,255,.86);
  box-shadow:0 2px 10px rgba(0,0,0,.22);display:flex;align-items:center;justify-content:center}
/* ★★右端の縦タブ（募集要項）と重ならない所へ★★（2026-09-03 実測）
     `right:14px` だと固定タブが▷の真上に乗り、**押しても反応しなかった**
     （elementFromPoint が `spt-side` を返した）。∴ カードの内側へ寄せる。 */
.spt-arw-p{left:76px}
.spt-arw-n{right:76px}
.spt-tour .spt-arw-p{left:16px}      /* 写真スライドは枠が狭いので端に寄せてよい */
.spt-tour .spt-arw-n{right:16px}
.spt-arw span{display:block;width:20px;height:20px;border-top:5px solid #5c4e42;
  border-right:5px solid #5c4e42}
.spt-arw-p span{transform:rotate(-135deg);margin-left:6px}
.spt-arw-n span{transform:rotate(45deg);margin-right:6px}
.spt-arw:active{background:#fff}
/* ★写真ツアーのサムネ＝**本物を横に並べる**（2026-09-04）。
   設計の枠は6つぶんだが写真は16枚なので、帯の中で横に送れるようにする。 */
.spt-thumbs{position:absolute;display:flex;align-items:center;z-index:5;
  overflow-x:auto;overflow-y:hidden;scrollbar-width:none;-webkit-overflow-scrolling:touch;
  scroll-behavior:smooth}
.spt-thumbs::-webkit-scrollbar{display:none}
.spt-thumb{padding:0;border:0;background:none;cursor:pointer;display:block;
  border-radius:4px;overflow:hidden}
.spt-thumb img{display:block;width:100%;height:100%;object-fit:cover;border-radius:4px}
.spt-thumb[aria-current="true"]{outline:4px solid #c2591c;outline-offset:1px;border-radius:4px}
.spt-root.spt-gate .spt-thumbs{display:none}   /* 検査の時は設計と同じ姿にする */
.spt-root.spt-gate .spt-arw,
.spt-root.spt-gate .spt-tour-cap{display:none}   /* 検査の時は設計に無い物を消す */

/* 勤務地の地図＝設計には「埋め込みコードの文字」しか無いので、ここで本物を出す */
.spt-map{position:absolute;border:0;display:block;background:#f2efe9;z-index:3}
.spt-root.spt-gate .spt-map{display:none}   /* 検査の時は設計に無い物を消す */
/* 設計の文字は、写真スライドより前に出す（見出しが写真に隠れないように）
   ★★ただし**クリックは通す**★★（2026-09-03 中尾さん「▷を押してもスライドしない／
     施設へのボタンのリンクが切れている」）＝文字の層は区画いっぱいの透明な板なので、
     そのままだと下のカルーセルの矢印・リンクを**全部飲み込む**（JSは動いていた）。
   ★文字そのものは選べるように、span だけ拾う。 */
.spt-tx{z-index:5;pointer-events:none}
.spt-tx span{pointer-events:auto}
.spt-tx img.spt-follow{position:absolute;display:block;pointer-events:none}  /* 文字に付いて動く飾り（矢印）2026-09-16 */
.spt-tx img.spt-over{position:absolute;display:block;pointer-events:none;filter:drop-shadow(1px 2px 2px rgba(0,0,0,.28))}  /* 絵から抜いて重ねる札（勉強が楽しくなる!）2026-09-16 */
.spt-tour{z-index:2}

/* 行頭がカギカッコの行＝詰め（palt）で左のアキが消えて前の字に付くので、少し右へ */
.spt-tx span[data-ind]{text-indent:.08em}

/* 傾いている行は「行の真ん中」を軸に回す（設計の bbox の中心と一致する） */
.spt-tx span{transform-origin:50% 50%}

/* ── 「選べる4つの施設」＝横に送れるカルーセル（中尾さん 2026-09-03） ────── */
/* ★★帯を**不透明で塞ぐ**★★（2026-09-03 中尾さん「両脇のカードの後ろに
   多分別のカードが焼き付いてますね」）＝設計の背景には**元の4枚組がそのまま焼かれて**おり、
   こちらのカルーセルの脇からその端が覗いて「カードが2枚重なって」見えていた。
   地の色は設計の実測（帯の左右の溝＝rgb(250,248,245)）。 */
.spt-fac{position:absolute;left:0;width:750px;overflow:hidden;z-index:4;
  background:#faf8f5}
/* ★帯を上へ広げたぶん、中身は下げて**元の位置のまま**にする（--fpad） */
.spt-fac-rail{position:absolute;top:var(--fpad,0px);bottom:0;transition:transform .42s cubic-bezier(.22,.61,.36,1)}
.spt-fac-card{position:absolute;top:0;bottom:0;display:block;text-decoration:none}
.spt-fac-card img{display:block;width:100%;height:auto}
.spt-fac .spt-arw{z-index:6;top:calc(50% + var(--fpad,0px) / 2)}
.spt-fac-dots{position:absolute;left:0;right:0;bottom:10px;margin:0;display:flex;
  justify-content:center;gap:14px}
.spt-fac-dots button{width:16px;height:16px;border-radius:50%;border:0;padding:0;
  background:rgba(92,78,66,.28);cursor:pointer}
.spt-fac-dots button[aria-current="true"]{background:#c2591c}
.spt-root.spt-gate .spt-fac-dots{display:none}

/* ── 「先輩たちの声」＝10人ぶんのカルーセル（PC正本 voice10 の型をそのまま置く） ── */
.spt-vo{position:absolute;left:0;width:750px;overflow:hidden;z-index:4}
/* ★★声のカルーセルの◀▶は「写真の高さ」に合わせる★★（2026-09-03 中尾さん指摘）
   既定の `top:50%` だとカードの真ん中＝**見出しの上に白い丸が乗る**
   （「本文に白い塗りつぶし」に見えていた片方の正体）。写真の中心へ寄せる。 */
.spt-vo .spt-arw{top:150px;transform:none}
.spt-vo-rail{position:absolute;top:0;bottom:0;transition:transform .42s cubic-bezier(.22,.61,.36,1)}
/* ★カードから中身が出ないように切る（人によって肩書き・本文の長さが違う） */
.spt-vo-card{position:absolute;top:0;background:#fff;border-radius:10px;overflow:hidden;
  box-shadow:1px 1px 3px rgba(0,0,0,.6)}
.spt-vo-card span,.spt-vo-card img{position:absolute;display:block}
.spt-vo-card .v-ph{border-radius:8px;object-fit:cover;z-index:1}
.spt-vo-card .v-tag{z-index:0}
/* ★帯＝施設名の器（PC版 live.js と同じ作り）。幅は中身で決まる */
.spt-vo-card .v-pill{border-radius:99px;z-index:2;display:flex;align-items:center;
  white-space:nowrap;color:#000;box-sizing:border-box;width:auto}
/* ★肩書き・ひとことは**折り返す**＝人によって長さが違う（実測＝「海外で20年の宣教師。…」で溢れた）。
     タグ箱の右端までで折る。 */
.spt-vo-card .v-nm{z-index:2;white-space:nowrap;color:#000}
.spt-vo-card .v-fc,.spt-vo-card .v-sb{z-index:2;white-space:normal;color:#000;
  width:calc(100% - 300px);line-height:1.3}
.spt-vo-card .v-nm i{font-style:normal}
.spt-vo-card .v-ru{height:1px;z-index:2;opacity:.35}
/* ★見出しは**折り返す**＝人によって長さが違う（中尾さん「この人だけ見出しが伸びて変」）。
     `nowrap` だとカードから飛び出す。カードの内側の幅で折る。 */
.spt-vo-card .v-hd{z-index:2;font-weight:600;white-space:normal;
  width:calc(100% - 94px);line-height:1.28}
.spt-vo-card .v-bw{z-index:2;color:#000}
.spt-vo-card .v-b{position:static;display:block;white-space:normal;margin:0 0 .35em}
.spt-vo .spt-arw{z-index:6}
/* 枚数はカードの外（上の余白）に置く＝本文に重ならない */
.spt-vo-n{position:absolute;right:96px;top:-2px;margin:0;font-size:20px;color:#5c4e42;z-index:7}
.spt-root.spt-gate .spt-vo-n{display:none}

/* ── 応募フォーム＝設計の枠の上に本物の入力欄を置く（U-403） ────────────── */
.spt-form{position:absolute;left:0;top:0;width:750px;height:100%;z-index:6;pointer-events:none}
.spt-form .spt-fi{position:absolute;pointer-events:auto}
.spt-form .spt-fi > *{width:100%;height:100%;box-sizing:border-box;font:inherit;
  font-size:22px;color:#231815;background:transparent;border:0;outline:0;padding:0 14px;
  -webkit-appearance:none;appearance:none;border-radius:0}
.spt-form .spt-fi-a > *{padding:12px 14px;resize:none;line-height:1.6}
.spt-form .spt-fi-s > *{background-image:none}
.spt-form .spt-fi-c{display:flex;align-items:center}
.spt-form .spt-fi-c input{position:absolute;left:0;top:50%;transform:translateY(-50%);width:26px;height:26px;margin:0;
  -webkit-appearance:none;appearance:none;background:#fff;border:1.5px solid #8c7b6a;border-radius:3px;box-sizing:border-box}
.spt-form .spt-fi-c input:checked{background:#c2591c;border-color:#c2591c}
.spt-form .spt-fi-c input:checked::after{content:'';position:absolute;left:8px;top:3px;width:7px;height:13px;border:solid #fff;border-width:0 3px 3px 0;transform:rotate(45deg)}
.spt-form .spt-fi-btn > *{opacity:0;cursor:pointer}
.spt-form .spt-fi > *:focus{box-shadow:inset 0 0 0 3px rgba(194,89,28,.55)}
.spt-form-msg{position:absolute;left:100px;top:3250px;width:550px;font-size:20px;color:#c2591c;
  pointer-events:auto}
.spt-form-msg:empty{display:none}
.spt-root.spt-gate .spt-form{display:none}    /* 検査の時は設計の絵だけで比べる */

/* 二段差分の時だけ隠す＝設計に「まだ無い」物（写真スライドは設計では“別途用意”の空枠） */
.spt-root.spt-gate .spt-tour{display:none}

/* ── サイドフロート4つ（PC版と同じ顔ぶれ・色）──────────────────────── */
.spt-tabs{position:absolute;right:0;top:50%;transform:translateY(-50%);
  display:flex;flex-direction:column;gap:calc(10px * var(--z));
  opacity:0;visibility:hidden;pointer-events:none;transition:opacity .25s,visibility .25s}   /* ★visibility＝当たりも消す（監査C#4） */
.spt-root.is-scrolled .spt-tabs{opacity:1;visibility:visible;pointer-events:auto}
/* ★子の pointer-events:auto を外した＝親が消えている間も子だけ押せていた原因（監査C#4）。押せるかは親に従う */
.spt-tabs .spt-side{position:static;transform:none;opacity:1}

/* ── 画像更新ボタン＝PC版と**同じ作り**（2026-09-03 中尾さん「しょぼくなってる／何のボタンだかわからない」）
   ★PC版（fv.css）の実測＝96×96の丸／オレンジのグラデ（#c2591c→#e0803a→#b78e48）／白4px枠／
     **脈打つ輪**（1.6s）／**回る矢印**（3.2s）／文字「毎回」「違う写真」。
   ★これが無いと「毎回変わること」に気づかれない＝ランダムにした意味が伝わらない（PC版のコメントより）。 */
.spt-shuffle{position:absolute;left:calc(26px * var(--z));top:calc(104px * var(--z));
  width:calc(96px * var(--z));height:calc(96px * var(--z));border:0;padding:0;background:none;
  border-radius:999px;cursor:pointer;-webkit-tap-highlight-color:transparent;z-index:70}
.spt-shuffle-ring{position:absolute;inset:0;border-radius:999px;background:#e0803a;
  pointer-events:none;animation:spt-ring 1.6s cubic-bezier(0,.2,.8,1) infinite}
.spt-shuffle-in{position:relative;display:flex;flex-direction:column;align-items:center;
  justify-content:center;width:100%;height:100%;border-radius:999px;
  background:linear-gradient(135deg,#c2591c 0%,#e0803a 55%,#b78e48 100%);
  color:#fff;border:calc(4px * var(--z)) solid #fff;
  box-shadow:0 calc(18px * var(--z)) calc(34px * var(--z)) calc(-12px * var(--z)) rgba(0,0,0,.45);
  transition:transform .2s ease}
.spt-shuffle:active .spt-shuffle-in{transform:scale(.95)}
.spt-shuffle svg{width:calc(26px * var(--z));height:calc(26px * var(--z));
  animation:spt-spin 3.2s linear infinite}
.spt-shuffle b{font-size:calc(11px * var(--z));font-weight:900;line-height:1.25;letter-spacing:.02em}
.spt-shuffle b:first-of-type{margin-top:calc(3px * var(--z))}
.spt-shuffle.is-busy{opacity:.6}
@keyframes spt-ring{0%{transform:scale(1);opacity:.85}100%{transform:scale(1.5);opacity:0}}
@keyframes spt-spin{to{transform:rotate(-360deg)}}
@media (prefers-reduced-motion:reduce){
  .spt-shuffle-ring,.spt-shuffle svg{animation:none}
  .spt-shuffle-in{transition:none}}

/* 入れ替える枠＝押されるまで空（絵はJSが入れる） */
.spt-swap{position:absolute;display:block;background-size:cover;background-position:center;
  z-index:3;pointer-events:none}
.spt-swap:not([style*="background-image"]){display:none}
.spt-root.spt-gate .spt-shuffle,.spt-root.spt-gate .spt-tabs{display:none}

/* ココロ保育園のチラ見せ＝ぼかしを外して、くっきりした絵＋liveの文字を上から敷く */
.spt-teaser{position:absolute;left:0;width:750px;overflow:hidden;z-index:3}
.spt-teaser img{position:absolute;left:0;top:0;width:750px;height:auto;display:block}
.spt-tx-teaser{z-index:5}

/* ── 4つの施設カルーセル＝両端の「白いベール」（設計と同じ）────────────
   ★実測（2026-09-03）＝設計は**外側の約60pxだけ**を白く飛ばしている。
     中央カード（設計x 60〜690）は**濃さ1.000＝完全一致**だった。
     ∴ 隣のカードを薄くするのではなく、**端に白い帯を重ねる**のが正しい。 */
.spt-fac::before,.spt-fac::after{content:"";position:absolute;top:0;bottom:0;width:66px;
  pointer-events:none;z-index:5}
.spt-fac::before{left:0;background:linear-gradient(to right,
  rgba(255,255,255,.80) 0,rgba(255,255,255,.76) 52px,rgba(255,255,255,0) 66px)}
.spt-fac::after{right:0;background:linear-gradient(to left,
  rgba(255,255,255,.80) 0,rgba(255,255,255,.76) 52px,rgba(255,255,255,0) 66px)}

/* ★★運んできたフォームは、PC版のCSSの「効き目」まで一緒には来ない★★
   （2026-09-03 中尾さん「なぞの入力欄が。」）
   PC版はスパム除けの欄を `.sec .lf-guard{left:-9999px}`（`assets/css/form.css` 84行）で隠している。
   こちらは CF7 のフォームを**`.sec` の外へ運んで**使うので、その規則が当たらなくなり
   「この欄は入力しないでください」が画面に出ていた。
   ★消してはいけない（送信時に**空であること**を見て弾いている＝`functions.php` 322行）。
   ∴ **PC版と同じやり方で隠す**（DOMには残す・読み上げからも外す）。 */
.spt-root .lf-guard{position:absolute!important;left:-9999px!important;top:auto!important;
  width:1px!important;height:1px!important;overflow:hidden!important}
/* ★運んだフォームの中で、こちらの枠に入らなかった部品も同じ扱い（保険） */
.spt-root .spt-cf7 > p:not(:has(.spt-fi)){margin:0}

/* ── 錨の着地位置＝固定ヘッダー（設計88px）のぶん手前で止める（2026-09-04 監査C#1／A#24）
   ★sp_top.js の landHash と同じ数字。ブラウザ自身が load 後に錨へ飛び直す時にも同じ場所に着くようにする
   （2経路で着地がずれると「一瞬正しい所→少し下」に見える）。.spt-page は zoom 済みなので設計pxで書く。 */
.spt-page [id^="spt-"]{scroll-margin-top:88px}

/* ── 指で押せる大きさ（2026-09-04 監査C#11・A#19＝SP TOPの押せる物80個中38個が40px未満）──
   ★数字は設計px（.spt-page は zoom≒0.52 なので、画面では約半分になる）。目安＝画面で40px以上。 */
/* 施設カルーセルの点＝見た目16px（画面8px）のまま、**当たりだけ**76px（画面40px）へ。点は ::before で描く */
.spt-fac-dots button{position:relative;width:76px;height:76px;background:transparent;margin:0 -14px}
.spt-fac-dots button::before{content:'';position:absolute;left:50%;top:50%;width:16px;height:16px;margin:-8px 0 0 -8px;
  border-radius:50%;background:rgba(92,78,66,.28)}
.spt-fac-dots button[aria-current="true"]{background:transparent}
.spt-fac-dots button[aria-current="true"]::before{background:#c2591c}
/* 電話（2つ目・画面18px高）＝見えない当たりを上下に24pxずつ広げる（視覚は変えない） */
.spt-hit[href^="tel:"]::after{content:'';position:absolute;left:0;right:0;top:-24px;bottom:-24px}

/* ── 重ね窓の「×」（2026-09-04 監査C#10＝閉じる手段が1,700px下にしか無かった）──────
   ★画面に貼りつく（`position:fixed`）＝どこまで読んでも右上に在る。
   ★`.spt-panel` は zoom を掛けていない層なので、ここは実寸のpxで書く。
   ★指で押せる大きさ（44px）を最初から満たす。 */
.spt-panel .spt-x{
  position:fixed;top:calc(8px + env(safe-area-inset-top));right:10px;z-index:20;
  width:44px;height:44px;border:0;border-radius:50%;
  background:rgba(255,255,255,.94);color:#5c4e42;
  font-size:24px;line-height:1;font-weight:700;cursor:pointer;
  box-shadow:0 2px 10px rgba(0,0,0,.22);
  display:flex;align-items:center;justify-content:center;padding:0;
}
.spt-panel .spt-x:focus-visible{outline:3px solid #c2591c;outline-offset:2px}
.spt-root.spt-gate .spt-panel .spt-x{display:none}   /* 検査の時は設計の絵だけで比べる */

/* ── 指で押せる大きさ（残り・2026-09-04 監査C#11／A#19）──────────────
   ★どれも**見た目は設計のまま**で、当たり（押せる範囲）だけを広げる。
   ★数字は画面px（`.spt-chrome` は zoom の外の層）。目安＝44px（Appleの指針）。 */
/* ハンバーガー 32×31 → 当たり44×44（絵は中央に置いたまま） */
.spt-burger{position:relative}
.spt-burger::after{content:'';position:absolute;left:50%;top:50%;
  width:44px;height:44px;transform:translate(-50%,-50%)}
/* 写真ツアーの ◁▷ 38×38 → 44×44
   ★2026-09-15 是正（かよこさん実機検品）＝ここに書いていた `.spt-arw{position:relative}` が
     上の `.spt-arw{position:absolute; left/right}` を**後勝ちで潰していた**＝▷（次へ）が left:-76 に落ちて画面外、
     ◁と▷が縦に並んでいた（施設・先輩の声・写真ツアーの3か所とも・9/4から）。当たり用の ::after は
     absolute の親でも同じに効くので、position は書かない。 */
.spt-arw::after{content:'';position:absolute;left:50%;top:50%;
  width:44px;height:44px;transform:translate(-50%,-50%)}
/* サムネイル 48×32 → 上下に6pxずつ当たりを伸ばす（横は隣とぶつかるので触らない） */
.spt-thumb{position:relative}
.spt-thumb::after{content:'';position:absolute;left:0;right:0;top:-6px;bottom:-6px}

/* ── AKAIRE_ 2026-09-14 先方赤入れ対応（有明）── */
.spt-tx span.u{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.16em}
.spt-hbox{position:absolute;box-sizing:border-box;background:#fff;border:1.5px solid #c2581c;border-radius:10px;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;text-align:center;
  font-family:"Hiragino Sans","Hiragino Kaku Gothic ProN","Noto Sans JP","Yu Gothic",YuGothic,Meiryo,sans-serif}
.spt-hbox b{font-size:16px;line-height:1.25;color:#5c4e42;font-weight:700;letter-spacing:-.02em}
.spt-hbox span{font-size:12px;line-height:1.3;color:#333;font-weight:400}
.spt-hint{position:absolute;display:flex;align-items:center;gap:8px;font-size:15px;line-height:1.5;font-weight:700;color:#c2581c;
  font-family:"Hiragino Sans","Hiragino Kaku Gothic ProN","Noto Sans JP",sans-serif}
.spt-hint i{font-style:normal;font-size:20px;line-height:1}
/* 答えパネルの罫線・マーカー（AKAIRE_ ⑥）＝絵の上・文字（z5）の下 */
.spt-ans{position:absolute;z-index:3;pointer-events:none;display:block}
.spt-ans.over{z-index:6}  /* 設計で文字より上に描かれている線（黒の下線） */

/* ★2026-09-28 校名に「大学／専門学校」を付けた（先方の意向・50番 #368）＝大学・短大パネルが 4行→6行で縦に伸びた。
   設計の絵（p_daigaku_00）は 416px までしか枠の縦線を持たないので、伸びたぶんの縦線をここで描き足す（絵の線＝x 49.5〜50.5／699.5〜700.5・#666462） */
.spt-frame-ext{position:absolute;left:49.5px;width:651px;box-sizing:border-box;display:block;
  border:solid #666462;border-width:0 1px;background:#fff}