/* 生きた部品の見た目。★静止再現の上に重ねるので、設計の絵と同じ位置・同じ形にする。 */
.sec .live-map iframe{width:100%;height:100%;border:0;display:block}

.sec .live-tour{border-radius:0;background:#ddd}
.sec .live-tour img{width:100%;height:100%;object-fit:cover;display:block}
/* テロップ＝設計の実測に合わせる。行送りは 1.5（36px）ではなく **30px**
   （ベースライン 4760.394→4790.394＝30.0）。1.5 のままだと2行で14px高くなり、
   下端を合わせている分だけ上へせり上がって別物に見える（2026-09-01 白石）。
   幅は live.json の実測値をJSが入れるので、余白は箱の内側で数える＝border-box。 */
.sec .live-cap{position:absolute;left:0;right:0;bottom:0;margin:0;box-sizing:border-box;
  padding:13px 21px;background:rgba(188,157,102,.9);color:#fff;
  font:600 24px/30px 'Hiragino Sans','Hiragino Kaku Gothic ProN',sans-serif;
  letter-spacing:.01em;text-shadow:0 1px 2px rgba(0,0,0,.15)}
.sec .live-thumbs{overflow-x:auto;scrollbar-width:none;scroll-behavior:smooth}
.sec .live-thumbs::-webkit-scrollbar{display:none}
/* ★幅は書かない＝設計から測った値を live.json 経由でJSが入れる。
   直書きの 127.3px は設計の 123.44px と 3.9px 違い、6枚で23pxずれて溝を潰していた。 */
.sec .live-th{flex:0 0 auto;height:100%;padding:0;border:0;background:none;
  cursor:pointer;overflow:hidden;opacity:.55;transition:opacity .2s}
.sec .live-th img{width:100%;height:100%;object-fit:cover;display:block}
.sec .live-th[aria-current="true"],.sec .live-th:hover{opacity:1}
.sec .live-arrow{border:0;background:none;cursor:pointer;padding:0;border-radius:50%}
.sec .live-arrow:focus-visible{outline:3px solid #c2591c;outline-offset:2px}

.sec .live-acc{border:0;background:none;cursor:pointer;padding:0;border-radius:6px}
.sec .live-acc:focus-visible{outline:3px solid #c2591c;outline-offset:2px}
/* ★パネルの中身は 1440px の区画そのもの。ボタンの幅(811px)に合わせると**右が切れる**
   （2026-08-31 中尾さん実機＝「1日の流れ」の中身が右で切れていた）。
   ∴ 区画と同じ幅で、左端から置く。 */
/* ★パネルは**地を持つ**。アートボードの下端が白紙の区画（保育園 h02 の下80px 等）だと、
   透けて下のページの罫線・点線が顔を出す（2026-08-31 白石ゲート指摘）。設計ではそこは白。 */
.sec .live-panel{position:absolute;left:0;width:1440px;z-index:402;background:#fff}

/* 動きを減らす設定を尊重する */
@media (prefers-reduced-motion:reduce){
  .sec .live-thumbs{scroll-behavior:auto}
  .sec .live-th{transition:none}
}

/* 開閉・カルーセルの中身の置き場。JSが取り出すまでは隠しておく。
   ★hidden 属性だけに頼らない＝CSSでも確実に隠す（display:none を上書きされないように）。 */
.live-src{position:absolute!important;width:0;height:0;overflow:hidden;clip:rect(0 0 0 0)}
.live-panel{overflow:hidden}
.live-panel .sec{position:relative!important}

/* 施設カルーセル */
.sec .live-rail{transition:transform .35s ease}
.sec .live-rail .sec{position:absolute!important;left:0;top:0}
.sec .live-dots{display:flex}
.sec .live-dot{width:10px;height:10px;padding:0;border:0;border-radius:50%;
  background:#dcdddd;cursor:pointer;transition:background .2s}
.sec .live-dot[aria-current="true"]{background:#c2591c}
.sec .live-arrow{border:0;background:none;cursor:pointer;padding:0;border-radius:50%}
.sec .live-arrow:focus-visible,.sec .live-acc:focus-visible,.sec .live-dot:focus-visible{
  outline:3px solid #c2591c;outline-offset:2px}
@media (prefers-reduced-motion:reduce){
  .sec .live-rail{transition:none}
}

/* 「閉じる」＝設計に描いてある文字の上に重ねる透明なボタン
   （設計は静止画なので、そのままでは押せない＝2026-08-31 中尾さんの確認依頼で発覚） */
.live-close{position:absolute;background:transparent;border:0;padding:0;cursor:pointer;
            -webkit-appearance:none;appearance:none}
.live-close:focus-visible{outline:2px solid #c2591c;outline-offset:2px}

/* 募集要項＝職種カードのリンク（設計の枠の上に重ねる透明なリンク） */
.live-link{display:block;background:transparent;text-decoration:none}
.live-link:focus-visible{outline:2px solid #b78e47;outline-offset:2px}

/* ══ 演出（アニメーション）══════════════════════════════════════════
   ★2026-09-01 中尾さん指示「アコーディオンも開く時にアニメーション」
     「各セクションの表示もフェードインを要所に。下方向からと横方向から、
       バランスよく」。
   ★守る線（正本＝有明幸大 02_知見/20260804_演出を足すときの守る線）：
     ①1回きり（出たら終わり。行き来で再生し直さない）
     ②`prefers-reduced-motion` を尊重して止める
     ③**検査モードでは切る**＝`?fv=design` と `.no-anim` で無効化。
       二段差分も白石ゲートも静止画で見るので、途中で撮ると全部ズレる。
     ④動かすのは「箱」＝中身を個別に動かさない（設計の版面を崩さない） */

/* 開閉＝高さが伸びながら開く */
.sec .live-panel{overflow:hidden;transition:height .42s cubic-bezier(.22,.61,.36,1)}
.sec .live-panel[hidden]{display:block!important;height:0!important;
  visibility:hidden;pointer-events:none}

/* 登場＝下から／横から
   ★★動きは `transform` ではなく **`translate`（単独プロパティ）** で書く★★
     （2026-09-02 中尾さん「アニメーションが中途半端」の是正）。
     写真は `img_xf` が **インラインの `transform`** で置き場を決めているので、
     クラスの `transform` は**必ず負ける**（詳細度＝インライン＞クラス）。
     以前はそれを避けるために「インラインを持つ物は動かさない」と**除外**していたが、
     結果として**人物の切り抜きが4人中1人しか動かない**状態になっていた。
     `translate` は `transform` と**別のプロパティ**で、描画時に合成されるので
     **置き場を壊さずに動かせる**＝除外が要らなくなる。 */
/* ★★速さと距離（2026-09-02 中尾さん「立ち上がりが早すぎて気付けない」）★★
     0.6s/30px では**目が着く前に終わる**。0.85s/44px にして、
     出だしをゆっくり・終わりをなめらかに（cubic-bezier の立ち上がりを寝かせる）。
     ★これ以上遅くすると「重いサイト」に見えるので、ここが上限。 */
/* ★★「JSが落ちたら本文が真っ白になるのでは」＝**確かめたら、ならなかった**（2026-09-02 U-395）
     `.anim{opacity:0}` は本文を隠す指定なので、出す役の live.js が届かなければ
     ページが真っ白になる——と読んで退路を入れかけたが、**実測すると外れていた**：
       live.js を読み込ませずに開くと **`.anim` を持つ要素は 0個**（通常時は743個）。
       ＝`.anim` は**HTMLに焼かれておらず、live.js 自身が付けている**。
       ∴ live.js が届かない／`IntersectionObserver` が無い（iOS12.1以前）時は
         **クラスごと付かない＝本文は最初から見えている**。退路は要らない。
   ★この行を残すのは、次に読む人が同じ道を辿って同じ工数を使わないため。
     検証の道具＝`_audit/` の jslive 実測（live.js だけを外して opacity を数える）。 */
.anim{opacity:0;will-change:opacity,translate;
  transition:opacity .85s ease-out, translate .85s cubic-bezier(.16,.72,.3,1)}
.anim-up{translate:0 44px}
.anim-left{translate:-52px 0}
.anim-right{translate:52px 0}
.anim.in{opacity:1;translate:none}

@media (prefers-reduced-motion: reduce){
  .sec .live-panel{transition:none}
  .anim,.anim-up,.anim-left,.anim-right{opacity:1;translate:none;transition:none}
}
/* 検査モード＝動きを全部切る（撮影・二段差分・白石ゲート用） */
.no-anim .sec .live-panel{transition:none!important}
.no-anim .anim{opacity:1!important;translate:none!important;transition:none!important}
/* 開閉に合わせて、区画の高さと「押し下げられる物」も一緒に動く
   （パネルだけ動かすと、下の中身が一瞬でジャンプして見える） */
/* ★2026-09-01：ここで一度 `transition:none` にしたが**戻した**。
   「区画が伸びない」という実測は、ヘッドレスが**CSSの推移を一切進めない**ために
   出た見かけの値だった（対照実験＝幅100pxに .4s の推移を掛けて500pxへ変えても、
   900ms後も100pxのまま・完了通知0回）。∴ あの測定は最初から盲目だった。
   ★教訓＝**推移が絡む値は、推移を止めてから測る**。止めずに測ると必ず「動かない」と出る。 */
.sec{transition:height .42s cubic-bezier(.22,.61,.36,1)}
.sec .live-pushable{transition:transform .42s cubic-bezier(.22,.61,.36,1)}
.no-anim .sec,.no-anim .sec .live-pushable{transition:none!important}
@media (prefers-reduced-motion: reduce){
  .sec,.sec .live-pushable{transition:none}}

/* 先輩の声＝中央以外のカードは設計と同じ薄さ（設計の実測＝不透明度0.8）。 */
.sec .live-vcard{transition:opacity .35s}
.sec .live-vside{opacity:.8}
.no-anim .sec .live-vcard{transition:none}

/* 送りボタン（◁▷）＝設計には描かれていないので、こちらで作る。
   中尾さん指示（2026-09-01）「セクションの両サイドに◁と▷を設置してスライドしやすく」。
   区画の地（クリーム/白）どちらの上でも読めるよう、白地＋薄い影＋茶の線。 */
.sec .live-navbtn{display:flex;align-items:center;justify-content:center;
  border:0;border-radius:50%;background:rgba(255,255,255,.92);color:#5c4e42;
  box-shadow:0 2px 10px rgba(0,0,0,.16);cursor:pointer;padding:0;
  transition:background .2s,box-shadow .2s,transform .2s}
.sec .live-navbtn:hover{background:#fff;box-shadow:0 3px 14px rgba(0,0,0,.22);transform:scale(1.06)}
.sec .live-navbtn:focus-visible{outline:3px solid #c2591c;outline-offset:2px}
.no-anim .sec .live-navbtn{transition:none}

/* ★live層で組む文字（先輩の声・テロップ等）は**約物を詰める**。
   静止側は「paltを切って1文字ずつletter-spacingで詰める」方式だが、
   live層は原稿から組むので1文字ずつの実測値が無い。paltに任せるのが正解。
   これが無いと「、」「。」の後が全角で空き、行が伸びて設計と別物になる
   （2026-09-01 中尾さん実機・先輩の声）。 */
.sec .live-vname,.sec .live-vpill,.sec .live-vsub,
.sec .live-vhead,.sec .live-vbody,.sec .live-cap{
  font-feature-settings:"palt" 1;font-kerning:normal;
  text-spacing-trim:trim-start}

/* 詳細アコーディオンの「閉じる▲」＝設計の「詳しく見る▼」と同じ見た目のつまみ。
   開くと設計の▼はぼかし帯ごと隠れるので、閉じる口をパネルの下に置く
   （2026-09-01 中尾さん「閉じるボタンを押しても閉じない」「開くボタンが固定」）。 */
.sec .live-detailclose{display:flex;align-items:center;justify-content:center;
  background:#fff;border:2px solid #c2591c;color:#c2591c;border-radius:999px;
  font-weight:700;font-size:20px;letter-spacing:.04em;cursor:pointer;
  font-family:inherit;transition:background .2s,color .2s}
.sec .live-detailclose:hover{background:#c2591c;color:#fff}
.sec .live-detailclose:focus-visible{outline:3px solid #c2591c;outline-offset:3px}
.no-anim .sec .live-detailclose{transition:none}

/* サムネ列の送り＝設計の薄い矢印を隠して、左右とも同じ濃さの丸にする
   （2026-09-01 中尾さん「小さいサムネイルの両端の▷の色が薄いのでもう少し濃くして」）。 */
.sec .live-navbtn--ring{background:#fff;color:#c2591c;
  border:2px solid #c2591c;box-shadow:0 1px 5px rgba(0,0,0,.12)}
.sec .live-navbtn--ring:hover{background:#c2591c;color:#fff}

/* 外部リンク（LINE・インスタ）＝設計の絵の上に重ねる透明な当たり判定 */
.sec .live-out{display:block}
.sec .live-out:focus-visible{outline:3px solid #06c755;outline-offset:3px}

/* 詳細アコーディオン＝区画そのものを幕にして、下に置いてある続きを開放する。
   中身は一度も畳まないので、動いている最中に絵が切れない
   （2026-09-01 中尾さん「切り取られた後半部分が貼り付けられている感じ」への是正）。 */
.sec.live-curtain{transition:height .55s cubic-bezier(.22,.61,.36,1)}
.no-anim .sec.live-curtain{transition:none}
@media (prefers-reduced-motion: reduce){.sec.live-curtain{transition:none}}
.sec .live-reveal{pointer-events:auto}

/* アコーディオンの「続き」＝下端で切っておき、開く時に切り口を下げる。
   左右は常に開けてあるので、横へ出るイラストは一度も切れない。
   （2026-09-01 中尾さん「そもそも読み込まれている残りのエリアを解禁する感じ」） */
.sec .live-reveal{transition:clip-path .55s cubic-bezier(.22,.61,.36,1)}
.sec .live-acc{transition:transform .55s cubic-bezier(.22,.61,.36,1)}
.no-anim .sec .live-reveal,.no-anim .sec .live-acc{transition:none}
@media (prefers-reduced-motion: reduce){
  .sec .live-reveal,.sec .live-acc{transition:none}
}

/* アコーディオンのボタン＝開くと「詳細を閉じる」に変わる（設計の文字は隠す）。
   見た目は設計のピル（オレンジ地・白文字）に合わせる。 */
.sec .live-accbtn.is-open{display:flex;align-items:center;justify-content:center;
  color:#fff;font-weight:700;font-size:26px;letter-spacing:.02em;font-family:inherit}

/* ★動くアコーディオンボタン（ココロ保育園）＝設計のピルから離れるので、こちらで枠を描く。
   見た目は下の「閉じる」（.live-detailclose）と同じにする＝同じ機能は同じ顔。 */
.sec .live-acc.is-float{display:flex;align-items:center;justify-content:center;
  background:#fff;border:2px solid #c2591c;border-radius:999px;
  color:#c2591c;font-weight:700;font-size:20px;letter-spacing:.04em;
  font-family:inherit;cursor:pointer;box-sizing:border-box}
.sec .live-acc.is-float:hover{background:#c2591c;color:#fff}

/* ★1日の流れ（#s18）のボタンの文字はアニメーションさせない（2026-10-05 かよこさん）
     「表示が崩れているのか、アニメーションで正常なのか判断が難しい」＝白い枠は動かず文字だけ
     下からふわっと出るので、出る途中が"枠だけ・文字なし"の崩れに見えていた。
     対象＝live.js がボタンの文字として覚えた物（data-acc-keep）だけ。見出し・本文は今までどおり。 */
#s18 .s-t[data-acc-keep]{opacity:1!important;translate:none!important;transition:none!important}
/* ★開いたまま別のボタンへ移る瞬間だけ、区画の動きを止める（live.js の btn.onclick・2026-10-05） */
.sec.acc-snap,.sec.acc-snap *{transition:none!important}