@charset "UTF-8";
/*
 * / (TOP / トップページ) 刷新版 専用 CSS（PC 版）
 * import.css は編集禁止（Xserver で max-age 7日・キャッシュバスター無し配信のため）。
 * 読み込みは blade 側で mics()->asset() を使いバスター付与する。
 * 公開後に本ファイルを修正する場合は system/config/mics.php の version を bump すること。
 *
 * スコープ: すべて body.top-renewal 配下に閉じる。import.css の既存 .top ルールや
 * 共有 _tpl/blocks/job_item を上書きしない（recruits / mypage への波及を避ける）。
 * SP（@media max-width:768px）はファイル末尾の SP ブロックで実装（Figma 422:5860 準拠）。
 *
 * 数値は Figma 422:4636 の get_design_context 実測値（.claude/reviews/figma-fidelity/SPEC.md）。
 * 配色: teal #12b3af / teal濃 #19a3a0 / teal淡文字 #8ccccc / 水色 #d7ebff /
 *       ハイライト #e1fffe / 情報箱 #f0f0f0 / パネル #f2f2f2 / グレー文字 #616161 /
 *       chip灰 #d9d9d9 / 県chip非活性 #939393 / 橙(CTAのみ) #ff9000 / 本文 #1e1e1e。
 */

/* ベース
---------------------------------------------------- */
body.top-renewal .top-renewal__body {
    font-family: 'Noto Sans JP', "ヒラギノ角ゴシック", "Hiragino Kaku Gothic ProN", "Hiragino Sans", "メイリオ", Meiryo, "Yu Gothic", sans-serif;
    font-weight: 500;
    color: #1e1e1e;
    letter-spacing: .1em;
    /* import.css が text-align: justify を継承させるため左寄せにリセット（中央寄せ要素は各自 override） */
    text-align: left;
}

/* リセットは低詳細度（.top-renewal__body のみ）で当てる。
   セクション側の余白指定（body.top-renewal .th-* = 詳細度高）を打ち消さないため。 */
.top-renewal__body p,
.top-renewal__body h1,
.top-renewal__body h2,
.top-renewal__body h3,
.top-renewal__body dl,
.top-renewal__body dd,
.top-renewal__body dt {
    margin: 0;
    line-height: 1.6;
}

.top-renewal__body ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

.top-renewal__body img {
    display: block;
}

.top-renewal__body a {
    text-decoration: none;
}

/* import.css が section 等で letter-spacing を 0/normal にリセットし継承を断ち切るため、
   ラッパ配下の全要素に 0.1em を明示的に効かせる（Figma の tracking は大半が 0.1em＝1.6px@16px 等）。 */
body.top-renewal .top-renewal__body * {
    letter-spacing: .1em;
}

/* デザインで tracking 0（指定なし）の要素は normal に戻す（求人カードのタイトルとタグ） */
body.top-renewal .th-card__title,
body.top-renewal .th-card__tag {
    letter-spacing: normal;
}

/* import.css は .container にクリアフィックス（::before/::after・display:table）を付与する。
   flex 化した .container（ISMS/CTA）ではこの擬似要素が flex item になり、gap で先頭要素が右へずれる。
   → 無効化してコンテンツ左端を他セクション（左端 x140 相当）に揃える。 */
body.top-renewal .th-isms .container::before,
body.top-renewal .th-isms .container::after,
body.top-renewal .th-cta .container::before,
body.top-renewal .th-cta .container::after {
    display: none;
}

/* #2 ヒーロー＋検索ボックス
---------------------------------------------------- */
body.top-renewal .th-hero {
    position: relative;
    min-height: 811px;
    padding: 135px 0 62px;
    background: #fff;
    overflow: hidden;
}

/* 背景写真（opacity .9・看護師=右寄り） */
body.top-renewal .th-hero__bg {
    position: absolute;
    inset: 0;
    z-index: 0;
    overflow: hidden;
}

/* 背景写真は Figma デザインの背景アセット（ライセンス版写真を 2007x775 のワイド形式に合成・
   左=白フェード／右=看護師）。2026-08-03 に Figma(1087:491) で配置が更新され、看護師がより右寄りになった
   （旧 422:8282 の left:-72.47% → 新 left:-65.01%）ため、実測微調整版（width:151%/left:-67.2%/top:-22%）から
   Figma 実値そのままへ差し替え。画像ファイル自体は不変（hero_bg.png・2007x775・MD5 一致）。
   height は Figma では 108% だが、width157.52% と併せた比率 2268/876=2.589 が元画像 2007/775=2.589 と一致するため
   height:auto（比率保持）で同じ絵になる。hero 高さが変わっても歪まない auto を採用。opacity:0.9。

   ★ Figma 幅（1440px）より広い画面では画像を拡大させず 2268x876px に固定する
     （2026-08-17・ユーザー報告「画面幅を広げると FV の画像が下へずれる」）。
     原因は縦横で基準が食い違っていたこと: top は hero 高さ基準（-24.19% ≒ -201px 固定）なのに、
     height:auto は width:157.52%＝画面幅比例で伸びる。幅 1876px では画像高が 876→1132px に膨らみ、
     看護師が約 250px 下がって検索ボックスに切られていた。
     参照サイト（民間医局 doctor-agent.com）の FV も画像は原寸固定（2240x500px・top:0）で拡大させない。
     固定後の横位置は「中央基準」にする（2026-08-17・ユーザー報告 2「拡大するたびに背景画像が右に寄る」）。
     ★ 右余白を画面幅比例（calc(92.51% - 2268px)）にすると画像左端が幅の増分の 92.5% ぶん右へ動き、
       中央寄せのキャッチ・検索ボックス（増分の 50%）を追い越して看護師がカードの右外へ抜けてしまう。
       calc(50% - 1656px) なら移動量が中央寄せ要素と同じ 50% になり、
       検索カード左端から看護師までの距離が 768px で一定＝ページ内の相対位置が一切変わらない（実測）。
     min()/max() は 1440px でちょうど連続に切り替わる係数なので境界でジャンプしない:
       width 157.52% が 2268px に達するのは 2268/1.5752 = 1439.8px。
       left は -0.6501W = 0.5W - 1656 を解いて W = 1439.9px で、width と同じ幅で切り替わる。
     広い画面では画像の左端が画面内へ入る（例 3840px で左に 264px）が、元画像の左 950px は純白で
     hero の background:#fff と同色のため継ぎ目は出ない。逆に右端は灰青（#b7c1c8）なので、
     露出すると白地との境目が見える → 下の ::before 右帯を画像右端まで伸ばして隠す（セットで調整すること）。
     1199px 以下は min()/max() が元の値を返すので不変
     （769〜1199px の top 追従・768px 以下の SP クロップはそれぞれ後段のメディアクエリが上書きする）。 */
body.top-renewal .th-hero__bg img {
    position: absolute;
    left: max(-65.01%, calc(50% - 1656px));
    top: -24.19%;
    width: min(157.52%, 2268px);
    height: auto;
    max-width: none;
    opacity: .9;
}

/* 水色フェード #d7ebff（Figma 実測: 左右両側から中央へ透明）。
   左帯=全幅 0%→濃く20.5%→透明47.6% / 右帯=右端0%→濃く16.7%→透明61.25%。
   2 つの linear-gradient を重ね、中央（看護師）は両方透明で写真が出る。

   ★ 右帯のベタ終端は「画像の右端」まで伸ばす（2026-08-17）。
     .th-hero__bg img を 1440px 超で 2268px に固定＋中央基準にしたため、右余白は 50% - 612px
     （＝画面幅の増分の半分）ずつ広がる。元画像の右端は灰青（#b7c1c8）なので、ベタ帯が届かないと
     写真の終わりが白地との縦の境目として見える（実測: 2560px でくっきり出る）。
     ベタ終端 max(16.7%, calc(50% - 612px)) で境目を必ずベタの内側に入れ、
     フェード終端 max(38.75%, calc(72.05% - 612px)) で従来と同じ 22.05% 幅のグラデーションを保つ。
     どちらも 1838px（0.167W = 0.5W - 612 の解）で切り替わるので段差なし。
     1838px 以下は max() が元の値を返すので従来と完全に同一。
     to left のグラデーション線長＝hero 幅なので、% は「右端からの距離」として画面幅に比例する。 */
body.top-renewal .th-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background:
        linear-gradient(to right, #d7ebff 0%, #d7ebff 20.5%, rgba(215, 235, 255, 0) 47.6%),
        linear-gradient(to left, #d7ebff 0%, #d7ebff max(16.7%, calc(50% - 612px)), rgba(215, 235, 255, 0) max(38.75%, calc(72.05% - 612px)));
}

/* 下端の白フェード（検索ボックス周辺をなじませる・控えめ）。
   Figma は下端のごく一部だけ薄く白む程度。強くすると写真が washされるため薄め・低めにする。 */
body.top-renewal .th-hero::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 150px;
    z-index: 1;
    pointer-events: none;
    background: linear-gradient(to top, rgba(255, 255, 255, .4) 0%, rgba(255, 255, 255, 0) 100%);
}

body.top-renewal .th-hero .container {
    position: relative;
    z-index: 2;
}

body.top-renewal .th-hero__catch {
    margin: 0 0 158px;
    color: #19a3a0;
    font-size: 32px;
    font-weight: 700;
    line-height: 1.6;
    letter-spacing: .1em;
}

/* ログイン時ヒーロー（Figma 427:705）: 看護師写真・大見出しは @guest ガードで DOM から消え、
   ヘッダー直下にすぐ検索ボックスが乗る。section 上端＝ヘッダー下端(y100)基準で、
   タブ上端を 21px（Figma y121-y100）、検索ボックス全体下端を 312px（y412-y100）、CTA 上端を 346px（y446-y100）に合わせ、
   padding を 21px / 34px に圧縮（@guest の 135px/62px を上書き）。min-height は内容で決まる帯高に揃える。 */
body.top-renewal .th-hero.is-member {
    min-height: 0;
    padding: 21px 0 34px;
}
/* 詳細パネル展開時はカード下端→CTA 上端の余白を Figma 427:961（カード下端 y1268 → 帯下端/CTA 上端 y1370 ≈102px・
   閉状態の 34px より広い）に広げる。帯(::before)は bottom:0 でこの余白も含め hero 下端まで #e1fffe を伸ばすため緑は途切れない。 */
body.top-renewal .th-hero.is-member.is-detail-open {
    padding-bottom: 102px;
}

/* #e1fffe 帯（Figma 427:709 閉 / 427:964 展開）は検索ボックスを内包し、その下端まで追従する全幅帯。
   @guest グラデ(::before #d7ebff)を上書きし、header 直下〜タブの余白は塗らない（全面ベタ塗り禁止）。
   top:71px（タブ下端＝カード上端 y171）で帯上端をタブ直下に合わせ、border-top でタブ→フィルタ境目の緑線を
   薄水色帯の全幅で描く（ユーザー確認 2026-06-26。カード幅 1160 では右側が欠けるため帯=全幅で描く）。
   線の太さは Figma 427:961 に合わせ 4px（薄水色帯の上はコントラストが低く 2px では細く見えるため・ユーザー確認 2026-06-26）。 */
body.top-renewal .th-hero.is-member::before {
    top: 71px;
    bottom: 0;
    left: 0;
    right: 0;
    height: auto;
    background: #e1fffe;
    border-top: 4px solid #12b3af;
}

/* 下端の白フェードは @guest 写真構図専用。ログイン版では不要。 */
body.top-renewal .th-hero.is-member::after {
    display: none;
}

/* キャッチの改行は PC が 2 行（「なら」後の <br>・クラス無し）、SP は手動改行なし（自動折返し）。
   ★ .th-hero__br--sp は「SP でだけ増える 1 本」用だったが、SP を改行なしにした 2026-08-11 以降は
      どの幅でも表示されない（base の本ルール＝none、SP は末尾 @media の .th-hero__catch br＝none）。
      SP 専用改行を復活させたくなったときの差し込み口として markup ごと残してある。
   SP 側の指定は末尾 @media ブロック（max-width:768px）を参照。 */
body.top-renewal .th-hero__br--sp {
    display: none;
}

/* 検索ボックス */
body.top-renewal .th-search {
    position: relative;
    max-width: 1160px;
}

/* タブ（カード上部・左寄せ 582px 幅） */
/* タブ枠は Figma 実測どおり全辺 teal #12b3af、top 角のみ 20px。下辺（582px）は @guest 用。
   border だとアクティブタブの box-shadow inset（子）と共有辺で二重線になるため、
   コンテナ枠も box-shadow inset で描く（子の #19a3a0 inset が親の #12b3af inset を後塗りで覆い単線化）。
   ログイン版（@auth）はタブ→フィルタ境目の緑線が薄水色帯(#e1fffe)の全幅に引かれるため、
   is-member::before の border-top（全幅）で描く（ユーザー確認 2026-06-26）。 */
body.top-renewal .th-search__tabs {
    display: flex;
    width: 582px;
    max-width: 100%;
    height: 50px;
    background: #f1f1f1;
    box-shadow: inset 0 0 0 2px #12b3af;
    border-radius: 20px 20px 0 0;
    overflow: hidden;
}

/* ログイン版（@auth）はタブ→フィルタ境目の緑線を is-member::before の全幅 border-top（薄水色帯の全幅）で描く。
   タブ枠の 582px 止まりの下辺が残ると is-member::before の border-top と高さがずれて段差・途切れになるため、
   @auth のみタブ枠を下辺なし 3 辺（左・右・上）の box-shadow にする（@guest は base の全辺を維持・ユーザー確認 2026-06-26）。 */
body.top-renewal .th-hero.is-member .th-search__tabs {
    box-shadow: inset 2px 0 0 #12b3af, inset -2px 0 0 #12b3af, inset 0 2px 0 #12b3af;
}

/* @auth のアクティブタブも base の 4 辺 box-shadow（Task 1-2）だと下辺 #19a3a0 がタブ下端の緑線（4px 隙間）
   直上に重なり左半分だけ二重・非対称になるため、@auth は既定で下辺なし 3 辺にする。 */
body.top-renewal .th-hero.is-member .th-search__tab.is-active {
    box-shadow: inset 2px 0 0 #19a3a0, inset -2px 0 0 #19a3a0, inset 0 2px 0 #19a3a0;
}

/* 緑線（is-member::before の border-top 4px）はカード（白・z-index 上）の背後に来て隠れるため、
   @auth ではカードを線の太さ分 4px 下げ、タブとカードの間に緑線を見せる（ユーザー確認 2026-06-26）。 */
body.top-renewal .th-hero.is-member .th-search__card {
    margin-top: 4px;
}

body.top-renewal .th-search__tab {
    flex: 1;
    border: none;
    background: transparent;
    color: #8ccccc;
    font-family: inherit;
    font-size: 16px;
    font-weight: 700;
    letter-spacing: .1em;
    cursor: pointer;
}

/* 各タブの外側上角を親コンテナ（border-radius:20px 20px 0 0）に合わせて丸める。
   アクティブタブの inset box-shadow 枠は要素自身の border-radius に沿って描かれるため、
   これが無いと四角い角の box-shadow が親の丸クリップと合わず角で枠が途切れる（常勤=左上/非常勤=右上）。 */
body.top-renewal .th-search__tab:first-child {
    border-radius: 20px 0 0 0;
}

body.top-renewal .th-search__tab:last-child {
    border-radius: 0 20px 0 0;
}

/* アクティブタブは Figma 原設計どおり濃teal #19a3a0 の2px枠。border だとタブ分割線が中央からずれるため
   box-shadow inset で描く（コンテナの #12b3af inset を共有辺で後塗りして単線化。base は PC/SP 共通）。 */
body.top-renewal .th-search__tab.is-active {
    background: #12b3af;
    color: #fff;
    box-shadow: inset 0 0 0 2px #19a3a0;
}

/* カード本体 */
body.top-renewal .th-search__card {
    background: #fff;
    border-radius: 0 20px 20px 20px;
    box-shadow: 0 14px 34px rgba(0, 0, 0, .12);
    overflow: hidden;
}

/* フィルタ行（4列） */
body.top-renewal .th-search__filters {
    display: flex;
    border-bottom: 1px solid #e3e3e3;
}

body.top-renewal .th-search__filter {
    position: relative;
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: 60px;
    padding: 0 30px;
    color: #616161;
    border-left: 1px solid #e3e3e3;
    /* ホバーで募集科目（is-selected）と同じ #e1fffe へ滑らかに切替（サイト共通のホバー演出に合わせる） */
    transition: background-color .2s;
}

body.top-renewal .th-search__filter:first-child {
    border-left: none;
}

/* 募集科目列のハイライト（#e1fffe） */
body.top-renewal .th-search__filter.is-selected {
    background: #e1fffe;
}

/* 4列フィルタのホバー: 募集科目（is-selected）と同じ #e1fffe ハイライトを当てる（勤務地/週勤務日数/希望給与）。
   勤務地は <button class="th-search__filter--area">（background:none）だが、:hover は詳細度（0,3,1）が
   --area（0,2,1）を上回るためホバー色が勝つ。is-selected セルは元から #e1fffe で変化なし。 */
body.top-renewal .th-search__filter:hover {
    background: #e1fffe;
}

body.top-renewal .th-search__filter-icon {
    width: 25px;
    height: 25px;
    flex-shrink: 0;
}

/* ラベルはアイコンと共に列の中央に配置（Figma 実測: 中央揃え） */
body.top-renewal .th-search__filter-label {
    font-size: 16px;
    font-weight: 700;
    color: #616161;
    white-space: nowrap;
}

/* 非常勤タブ時の3・4列フィルタ バリアント切替（タブ切替 JS が .th-search に is-part を付与）。
   要素数は4のまま（SP の nth-child 罫線を保つ＝崩れ回避）。ブレークポイント非依存で PC/SP 共通に効く。 */
body.top-renewal .th-part-only {
    display: none;
}
body.top-renewal .th-search.is-part .th-fulltime-only {
    display: none;
}
body.top-renewal .th-search.is-part .th-part-only {
    display: block;
}
/* 「よく検索されるキーワード」も常勤/非常勤で2リストを出し分ける（th-fulltime-only / th-part-only）。
   .th-search__keywords-list は display:flex（後方の .th-search__keywords-list 規則）を持つため、汎用
   .th-part-only{display:none}（同詳細度かつ先方）に後勝ちして非常勤リストが常時表示されてしまう。
   そこで非常勤リストのデフォルト非表示を専用詳細度で確定し、is-part 時のみ flex で横並び（折返し）表示する（PC/SP 共通）。
   常勤リスト(th-fulltime-only)は .th-search__keywords-list(flex)＋is-part 時 .th-search.is-part .th-fulltime-only(none) で足りる。 */
body.top-renewal .th-search__keywords-list.th-part-only {
    display: none;
}
body.top-renewal .th-search.is-part .th-search__keywords-list.th-part-only {
    display: flex;
}

/* シェブロンSVGは viewBox 8×14・preserveAspectRatio=none のため、本来の細い縦長比率で表示する
   （24×24 にすると引き伸ばされて太く見える）。Figma 実測: 24px枠内に 8×14 の細い「>」。右端に絶対配置。 */
body.top-renewal .th-search__filter-chev {
    position: absolute;
    right: 14px;
    top: 50%;
    transform: translateY(-50%);
    width: 10px;
    height: 17px;
}

/* 勤務地・診療科目・希望給与フィルタは <button>（モーダルトリガー）。兄弟 <a> と同一見た目にするための最小リセット。
   レイアウト（flex/高さ/padding/border-left 等）は共有クラス .th-search__filter から継承される。
   背景は指定しない。勤務地・希望給与は白（カード地）、診療科目は .is-selected で #e1fffe ハイライト。 */
body.top-renewal .th-search__filter--area,
body.top-renewal .th-search__filter--diagnosis,
body.top-renewal .th-search__filter--salary,
body.top-renewal .th-search__filter--workdays {
    width: 100%;
    margin: 0;
    font: inherit;
    text-align: inherit;
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
}

/* 勤務地・診療科目・週勤務日数・希望給与ラベルは選択内容で可変長になる（旧: 固定文言）。多選択で列幅を超えても
   レイアウトを崩さないよう、これらフィルタのラベルのみ省略表示する。
   white-space:nowrap は基底 .th-search__filter-label（:298）で担保されるが、本ブロックを自己完結させ
   将来の基底変更にも耐えるよう明示する。flex 子は min-width:auto を 0 にしないと text-overflow が
   効かないため、ボタンとラベル両方に付ける。週勤務日数/希望給与は常勤(th-fulltime-only)/非常勤(th-part-only)の
   二重ラベルだが、いずれも .th-search__filter-label なので両方に当たる。 */
body.top-renewal .th-search__filter--area,
body.top-renewal .th-search__filter--diagnosis,
body.top-renewal .th-search__filter--workdays,
body.top-renewal .th-search__filter--salary {
    min-width: 0;
}
body.top-renewal .th-search__filter--area .th-search__filter-label,
body.top-renewal .th-search__filter--diagnosis .th-search__filter-label,
body.top-renewal .th-search__filter--workdays .th-search__filter-label,
body.top-renewal .th-search__filter--salary .th-search__filter-label {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
}

/* 詳細な検索条件を表示（フィルタ行と件数行の間・Figma 427:955）。
   幅1100px(左右30pxインセット)・高さ48px・border #a7a2a2・背景透明・角丸6px。
   テキスト中央 #616161 16px Bold、右端に下向き chevron。 */
body.top-renewal .th-search__detail {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: calc(100% - 60px);
    height: 48px;
    margin: 25px auto 0;
    padding: 0;
    background: transparent;
    border: 1px solid #a7a2a2;
    border-radius: 6px;
    color: #616161;
    font-size: 16px;
    font-weight: 700;
    letter-spacing: .1em;
    cursor: pointer;
    transition: background-color .2s;
}

body.top-renewal .th-search__detail:hover {
    background: #f7f7f7;
}

body.top-renewal .th-search__detail-chev {
    position: absolute;
    right: 16px;
    top: 50%;
    width: 24px;
    height: 24px;
    transform: translateY(-50%);
}

/* 件数 + 検索ボタン（詳細バー追加に伴い上 padding を 14px に詰める＝Figma の詳細→ボタン間14px） */
body.top-renewal .th-search__action {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    padding: 14px 30px 22px;
}

/* 非ログイン（is-guest）は詳細トグルが非出力のため、フィルタ→件数の上余白を Figma 422:8870
   （フィルタ下端→検索ボタン上端 ≒24px）に戻す。right/bottom/left は上の 30/22/30px を維持。 */
body.top-renewal .th-search.is-guest .th-search__action {
    padding-top: 25px;
    /* 検索ボタン下端 → 会員誘導リード上端 = 5px（Figma PC 694→699 / SP 802→807 とも 5px）。
       base の 22px（PC）/ SP の 20px を打ち消す。ログイン時はリードが無いので不変。 */
    padding-bottom: 5px;
}

/* PC 非ログインは詳細トグルを出さない（Figma 422:8870 はトグル無し・キーワード常時表示）。
   ただしトグルは DOM には残す（SP 非ログインで下部トグル＝キーワード開閉に使うため）ので、
   PC だけ display:none で隠す。SP は下の max-width:768px で display:flex に戻す。 */
body.top-renewal .th-search.is-guest .th-search__detail {
    display: none;
}

/* 会員登録誘導リード（未ログイン限定・Figma PC 1113:445）。検索ボタンの直下・キーワードの区切り線の上。
   @guest でしか出力しないので .is-guest スコープは付けない。
   Figma: 錠アイコン 24×24（x172）＋ gap 7px ＋ 14px Bold #616161 / lh24 / tracking 1.4px(=.1em)。
   左端は件数（.th-search__action の padding-left 30px）に揃える。 */
body.top-renewal .th-search__member-note {
    display: flex;
    align-items: flex-start;   /* SP で 2 行に折返してもアイコンは 1 行目の高さに留める */
    gap: 7px;
    padding: 0 30px;
    margin-bottom: 10px;       /* リード下端 y723 → キーワードの区切り線 y733 = 10px */
    color: #616161;
    font-size: 14px;
    font-weight: 700;
    line-height: 24px;
    letter-spacing: .1em;
}

body.top-renewal .th-search__member-note-icon {
    flex-shrink: 0;            /* テキストが伸びてもアイコンを潰さない */
    width: 24px;
    height: 24px;
}

/* リード文全体（「体制・…(無料会員限定)」）がリンク。平常時は Figma 完全一致（色・サイズ・下線とも
   本文と同一）で、hover のときだけ下線を出す（/login・/register の .login-link と同系統）。
   ユーザー指定 2026-08-04: 当初は「無料会員限定」の 6 文字だけをリンクにしていたが、リード文全体へ
   広げて hover の下線も全体に掛ける方針に変更した。錠アイコンは a の外なので下線は付かない。
   .top-renewal__body a{text-decoration:none}（home.css:52）が既定の下線を消しているため、
   hover 側は明示的に書かないと出ない。 */
body.top-renewal .th-search__member-note-link {
    color: inherit;
    text-decoration: none;
}

body.top-renewal .th-search__member-note-link:hover {
    text-decoration: underline;
    text-underline-offset: 2px;   /* 新着カードタイトル（home.css:1545）と同じオフセット */
}

body.top-renewal .th-search__count {
    font-size: 18px;
    font-weight: 500;
    color: #1e1e1e;
    letter-spacing: 2px;
}

body.top-renewal .th-search__count-num {
    font-size: 24px;
    font-weight: 700;
    color: #1e1e1e;
    margin: 0 2px;
    letter-spacing: 2px;
}

body.top-renewal .th-search__submit {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 320px;
    height: 60px;
    background: #12b3af;
    border: 2px solid #19a3a0;
    border-radius: 40px;
    color: #fff;
    font-size: 18px;
    font-weight: 700;
    letter-spacing: .1em;
    transition: opacity .3s;
}

body.top-renewal .th-search__submit:hover {
    opacity: .85;
}

/* よく検索されるキーワード（Figma 422:8870 では件数+検索ボタンとの間に区切り線を引く。SP の上区切り線は SP ブロックの border-top で別途描く） */
body.top-renewal .th-search__keywords {
    padding: 20px 30px 48px;
    border-top: 1px solid #e3e3e3;
}

/* @auth: キーワードは詳細パネル内（チェックボックス群の後）に内包（Figma 427:1168/427:1179）。
   詳細パネル(.th-search__detail-panel)が padding:0 30 を持つため左右 padding を 0 にして二重を解消し、
   上は __group 相当の 30px 余白に。ブロック上端の border-top は詳細パネル内では不要（Figma はラベル下に罫線）。 */
body.top-renewal .th-search__detail-panel .th-search__keywords {
    padding: 30px 0 0;
    border-top: none;
}
/* 詳細パネル内のキーワード見出しは Figma 427:1180 で teal #12b3af・下に罫線（427:1181）。
   group-heading と同じ構造。@guest 版（件数下）の見出し色 #1e1e1e には波及しない（詳細パネル内限定）。 */
body.top-renewal .th-search__detail-panel .th-search__keywords-label {
    color: #12b3af;
    padding-bottom: 10px;
    border-bottom: 1px solid #e3e3e3;
    margin-bottom: 18px;
}

body.top-renewal .th-search__keywords-label {
    font-size: 16px;
    font-weight: 500;
    color: #1e1e1e;
    margin-bottom: 14px;
}

body.top-renewal .th-search__keywords-list {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
}

/* 「常勤」の後は Figma 実測どおり横線（—, x217 から幅48px）。縦線ではない。 */
body.top-renewal .th-search__keywords-type {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    font-size: 14px;
    font-weight: 700;
    color: #616161;
}

body.top-renewal .th-search__keywords-type::after {
    content: "";
    width: 48px;
    height: 1px;
    background: #c9c9c9;
}

body.top-renewal .th-search__chip {
    display: inline-flex;
    align-items: center;
    height: 30px;
    padding: 0 16px;
    appearance: none;
    border: 0;
    background: #d9d9d9;
    border-radius: 15px;
    color: #616161;
    font-size: 12px;
    font-weight: 500;
    font-family: inherit;
    line-height: 1;
    cursor: pointer;
    transition: opacity .2s, background-color .2s, color .2s;
}

body.top-renewal .th-search__chip:hover {
    opacity: .8;
}

body.top-renewal .th-search__chip.is-selected {
    background: #12b3af;
    color: #fff;
}

body.top-renewal .th-search__chip.is-selected:hover {
    opacity: 1;
}

body.top-renewal .th-search__chip:focus-visible {
    outline: 2px solid #12b3af;
    outline-offset: 2px;
}

/* ===== 詳細な検索条件パネル（PC・Figma 427:1168）=====
   トグルクリックで .th-search.is-detail-open になり PC のみパネルを展開（SP は下の @media で display:none）。 */

/* トグルラベルは擬似要素で出し、展開時に「非表示」へ差し替える（ユーザー指定。SP は @media で font-size を 14px に上書き）。 */
body.top-renewal .th-search__detail-label {
    font-size: 0;
}
body.top-renewal .th-search__detail-label::after {
    content: "詳細な検索条件を表示";
    font-size: 16px;
    letter-spacing: .1em;
}
body.top-renewal .th-search.is-detail-open .th-search__detail-label::after {
    content: "詳細な検索条件を非表示";
}
body.top-renewal .th-search.is-detail-open .th-search__detail-chev {
    transform: translateY(-50%) rotate(180deg);
}

/* パネル本体: 既定は非表示、展開時のみ表示。左右 30px インセット（コンテンツ幅 1100px）。 */
body.top-renewal .th-search__detail-panel {
    display: none;
    padding: 0 30px;
}
body.top-renewal .th-search.is-detail-open .th-search__detail-panel {
    display: block;
}

/* カテゴリ: 見出し（teal 16px Bold）＋下に区切り線、その下に選択肢グリッド。 */
body.top-renewal .th-search__group {
    padding-top: 30px;
}
body.top-renewal .th-search__group-heading {
    /* <button> 化の PC 退行防止リセット（import.css の button 既定 text-align:center / width:shrink / padding:4px 6px を打ち消す）。
       見た目は従来の <p> 見出しと等価＝フラット・左寄せ・全幅 border-bottom を保つ。SP は @media 内でアコーディオン化。 */
    display: block;
    width: 100%;
    text-align: left;
    padding: 0 0 10px;
    font-size: 16px;
    font-weight: 700;
    line-height: 24px;
    color: #12b3af;
    letter-spacing: .1em;
    border-bottom: 1px solid #e3e3e3;
}
body.top-renewal .th-search__options {
    display: grid;
    gap: 20px;
    margin-top: 18px;
}
body.top-renewal .th-search__options--2col {
    grid-template-columns: repeat(2, 1fr);
}
body.top-renewal .th-search__options--3col {
    grid-template-columns: repeat(3, 1fr);
}

/* 選択肢ボックス: 50px・border #a7a2a2・透明背景。中にチェックボックス＋ラベル。 */
body.top-renewal .th-search__option {
    display: flex;
    align-items: center;
    gap: 10px;
    height: 50px;
    padding: 0 10px;
    border: 1px solid #a7a2a2;
    background: transparent;
    cursor: pointer;
}
body.top-renewal .th-search__option-check {
    appearance: none;
    -webkit-appearance: none;
    position: relative;
    flex-shrink: 0;
    width: 24px;
    height: 24px;
    margin: 0;
    border: 2px solid #d9d9d9;
    border-radius: 6px;
    background: #fffdfd;
    cursor: pointer;
}
/* チェック済み（提案・要確認）: ティール塗り＋白チェック。絞り込みはしない純表示の切替。 */
body.top-renewal .th-search__option-check:checked {
    background: #12b3af;
    border-color: #12b3af;
}
body.top-renewal .th-search__option-check:checked::after {
    content: "";
    position: absolute;
    left: 7px;
    top: 3px;
    width: 6px;
    height: 11px;
    border: solid #fff;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}
body.top-renewal .th-search__option-label {
    font-size: 18px;
    font-weight: 500;
    line-height: 24px;
    color: #1e1e1e;
    letter-spacing: .1em;
}

/* ============ 「勤務地を選択」モーダル（Figma 422:7133・PC）============
   検索ボックスの「勤務地」フィルタ（.th-search__filter--area）で開く。data/css にのみ記述（import.css 編集禁止）。
   数値は task MD「デザイン仕様」（Figma 422:7133 実測）準拠。色の要確認事項は各所にコメントで明記。
   既存 /search・/recruits の remodal とは別物（.th-area-* は新規・非干渉）。 */

/* オーバーレイ兼センタリング。既定 hidden 属性で display:none、is-open で flex 表示。
   z-index は固定ヘッダー（import.css 9999・header.css 10000）より上の 10001（下回るとヘッダー背面に潜る）。 */
body.top-renewal .th-area-modal {
    position: fixed;
    inset: 0;
    z-index: 10001;
    display: none;
    /* 2026-08-21: 「__regions だけ内側スクロール」をやめ、オーバーレイ自体を縦スクロールさせる
       （SP は 2026-08-01 に同方式へ移行済み。PC もこれに揃えた）。内側スクロールだと画面が低いときに
       リストの後半（勤務地の「九州・沖縄」、診療科目の後ろ半分など）がモーダルを開いた時点で見えず、
       内側にスクロールバーがあることにも気づかれにくいため。
       align-items:center のままパネルが画面より高くなると上端が画面外へ出て到達できなくなるので
       flex-start にし、パネル側の margin-block:auto で「短いときだけ中央寄せ」を両立させる
       （flex の auto margin は余白が負なら 0 に解決される）。
       overflow の x を明示 hidden にするのは、片軸だけ非 visible にするともう片軸の visible が
       auto に計算されるため（パネルの overflow:hidden を外すので横はみ出しの保険が消える）。
       overscroll-behavior:contain は端まで振り切ったときの document へのスクロール連鎖を止める。 */
    align-items: flex-start;
    justify-content: center;
    padding: 24px 0;
    overflow: hidden auto;
    overscroll-behavior: contain;
}
body.top-renewal .th-area-modal[hidden] {
    display: none;
}
body.top-renewal .th-area-modal.is-open {
    display: flex;
}
/* バックドロップ（クリックで閉じる）。色は Figma ノードに無し＝rgba(0,0,0,.5) を提案（要確認）。 */
/* 暗幕は fixed。absolute のままだとスクロールコンテナの中身と一緒に流れ、
   下へスクロールした先で背景が抜ける（祖先に transform/filter が無いのでクリップもされない）。 */
body.top-renewal .th-area-modal__overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, .5);
}

/* パネル: 白・角丸20px・幅1160px(左右padding60px)。flex column 化し、コンテンツがパネル高さ
   (max-height)を超えるときは __regions（地方/科目アコーディオン）のみ内部スクロールさせ、タイトルと
   フッター（注記/市区町村ボタン/区切り線/件数/ボタン）は固定する（市区町村モーダルと同方針）。 */
body.top-renewal .th-area-modal__panel {
    position: relative;
    display: flex;
    flex-direction: column;
    width: min(1160px, 92vw);
    max-height: none;      /* 90vh 解除。中身なりに縦へ伸ばし、はみ出しはオーバーレイ側でスクロールさせる */
    overflow: visible;
    /* 画面に収まるときだけ上下中央寄せ。収まらないときは 0 に解決され上端が切れない。
       margin-block ショートハンドは iOS Safari 14.1 未満で丸ごと落ちるため longhand で書く。 */
    margin-top: auto;
    margin-bottom: auto;
    padding: 60px;
    background: #fff;
    border-radius: 20px;
}
body.top-renewal .th-area-modal__panel:focus {
    outline: none;
}

/* スティッキー構成: タイトル/注記/市区町村ボタン/区切り線/件数/ボタン/希望給与プルダウン行は flex-shrink:0 で
   固定し、中間の __regions（アコーディオン）だけを flex:1 + overflow-y:auto でスクロールさせる（PC・SP 共通）。
   __note/__city は勤務地のみ・__salary は希望給与のみに存在（無いモーダルでは該当セレクタが空振りするだけ）。
   希望給与は __regions を持たず短いため全要素固定でスクロールは発生しない。min-height:0 はスクロール必須。 */
body.top-renewal .th-area-modal__title,
body.top-renewal .th-area-modal__salary,
body.top-renewal .th-area-modal__workdays,
body.top-renewal .th-area-modal__note,
body.top-renewal .th-area-modal__city,
body.top-renewal .th-area-modal__sep,
body.top-renewal .th-area-modal__count,
body.top-renewal .th-area-modal__actions {
    flex-shrink: 0;
}
body.top-renewal .th-area-modal__regions {
    flex: 0 0 auto;        /* 内側スクロールをやめ、中身の高さそのままで並べる（スクロールはオーバーレイ側） */
    min-height: 0;
    overflow-y: visible;
}

/* タイトル「勤務地を選択」: Bold 24px・#12b3af・tracking .1em。タイトル下端→最初のバー上端 42px。 */
body.top-renewal .th-area-modal__title {
    margin: 0 0 42px;
    font-size: 24px;
    font-weight: 700;
    line-height: 24px;
    letter-spacing: .1em;
    color: #12b3af;
}

/* 地方アコーディオン（6区分）。バー間の縦間隔 12px。 */
body.top-renewal .th-area-acc + .th-area-acc {
    margin-top: 12px;
}

/* 閉状態のバー: 高さ50px・角丸20px・背景#f2f2f2・border 1px #939393。
   ヘッダーは開閉とも高さ50px・align-items:center（24pxラベルが自動で上下中央＝開状態の上13px と一致）。 */
body.top-renewal .th-area-acc {
    background: #f2f2f2;
    border: 1px solid #939393;
    border-radius: 20px;
}
body.top-renewal .th-area-acc__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    height: 50px;
    margin: 0;
    padding: 0 20px 0 40px;
    background: none;
    border: none;
    font: inherit;
    text-align: left;
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
}
/* 地方名ラベル: Medium 16px・#616161・tracking .1em。 */
body.top-renewal .th-area-acc__name {
    font-size: 16px;
    font-weight: 500;
    line-height: 24px;
    letter-spacing: .1em;
    color: #616161;
}
/* 開閉シェブロン: ic_chevron_down.svg（下向き）を 28px 枠で。開状態は rotate(180deg) で上向き。
   色は #616161 固定（地方名と同系で許容）。 */
body.top-renewal .th-area-acc__chev {
    flex-shrink: 0;
    width: 28px;
    height: 28px;
    transition: transform .2s;
}
/* 開状態: border を消す（Figma 開コンテナは枠線なし）。 */
body.top-renewal .th-area-acc.is-open {
    border-color: transparent;
}
body.top-renewal .th-area-acc.is-open .th-area-acc__chev {
    transform: rotate(180deg);
}

/* アコーディオンボディ: 既定 非表示、is-open で表示。見出し下の区切り線は body 上端に幅980px(左右30pxインセット)・1px。
   区切り線色は #d9d9d9 を提案（要 Figma 突き合わせ）。 */
body.top-renewal .th-area-acc__body {
    display: none;
}
body.top-renewal .th-area-acc.is-open .th-area-acc__body {
    display: block;
    position: relative;
}
body.top-renewal .th-area-acc.is-open .th-area-acc__body::before {
    content: "";
    position: absolute;
    top: 0;
    left: 30px;
    width: 980px;
    max-width: calc(100% - 60px);
    height: 1px;
    background: #d9d9d9;
}

/* 都道府県グリッド: 4列・行間30px・左右padding40px・上padding35px・下padding40px（列ピッチ250px は 1fr×4 で吸収）。 */
body.top-renewal .th-area-acc__grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    row-gap: 30px;
    padding: 35px 40px 40px;
}
body.top-renewal .th-area-acc__all,
body.top-renewal .th-area-acc__pref {
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
}

/* チェックボックス: 24px・border 2px #12b3af・角丸6px・#fffdfd。:checked はティール塗り＋白チェック（提案・要確認）。
   既存 .th-search__option-check と同方式（疑似要素チェック）。 */
body.top-renewal .th-area-acc__check {
    appearance: none;
    -webkit-appearance: none;
    position: relative;
    flex-shrink: 0;
    width: 24px;
    height: 24px;
    margin: 0;
    border: 2px solid #12b3af;
    border-radius: 6px;
    background: #fffdfd;
    cursor: pointer;
}
body.top-renewal .th-area-acc__check:checked {
    background: #12b3af;
    border-color: #12b3af;
}
body.top-renewal .th-area-acc__check:checked::after {
    content: "";
    position: absolute;
    left: 7px;
    top: 3px;
    width: 6px;
    height: 11px;
    border: solid #fff;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}
/* 都道府県ラベル: Medium 18px・#1e1e1e・tracking .1em。 */
body.top-renewal .th-area-acc__label {
    font-size: 18px;
    font-weight: 500;
    line-height: 24px;
    letter-spacing: .1em;
    color: #1e1e1e;
}

/* 注記: Medium 14px・#1e1e1e。最後のバー下端から 12px。 */
body.top-renewal .th-area-modal__note {
    margin: 12px 0 0;
    font-size: 14px;
    font-weight: 500;
    line-height: 24px;
    letter-spacing: .1em;
    color: #1e1e1e;
}

/* 市区町村ボタン: 中央・幅371px・高さ50px・角丸30px。注記から30px下。クリック no-op。
   無効（既定）: 背景#d9d9d9・#9e9e9e。有効: 白・border 2px #12b3af・#12b3af。
   右シェブロンはインライン SVG（fill:currentColor）で color に追従。 */
body.top-renewal .th-area-modal__city {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 371px;
    max-width: 100%;
    height: 50px;
    margin: 30px auto 0;
    padding: 0 20px;
    border: none;
    border-radius: 30px;
    background: #d9d9d9;
    color: #9e9e9e;
    font-size: 16px;
    font-weight: 700;
    letter-spacing: .1em;
    cursor: default;
    appearance: none;
    -webkit-appearance: none;
}
body.top-renewal .th-area-modal__city:not(:disabled) {
    background: #fff;
    border: 2px solid #12b3af;
    color: #12b3af;
    cursor: pointer;
}
body.top-renewal .th-area-modal__city-chev {
    flex-shrink: 0;
    width: 8px;
    height: 14px;
}

/* フッター上の区切り線: 幅1040px・1px・薄グレー。市区町村ボタンから30px下。 */
body.top-renewal .th-area-modal__sep {
    width: 1040px;
    max-width: 100%;
    height: 1px;
    margin: 30px auto 0;
    border: 0;
    background: #ddd;
}

/* 件数「条件に該当する求人 340件」: Bold 18px・#1e1e1e・中央。区切り線から20px下。「340」は静的。 */
body.top-renewal .th-area-modal__count {
    margin: 20px 0 0;
    text-align: center;
    font-size: 18px;
    font-weight: 700;
    line-height: 24px;
    letter-spacing: .1em;
    color: #1e1e1e;
}

/* フッターボタン: 中央・2つ横並び・gap30px・各266px×50px・角丸30px・白 Bold 16px。件数から20px下。 */
body.top-renewal .th-area-modal__actions {
    display: flex;
    justify-content: center;
    gap: 30px;
    margin-top: 20px;
}
body.top-renewal .th-area-modal__cancel,
body.top-renewal .th-area-modal__submit {
    width: 266px;
    max-width: 100%;
    height: 50px;
    border: none;
    border-radius: 30px;
    color: #fff;
    font-size: 16px;
    font-weight: 700;
    letter-spacing: .1em;
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
}
body.top-renewal .th-area-modal__cancel {
    background: #9e9e9e;
}
body.top-renewal .th-area-modal__submit {
    background: #12b3af;
}

/* ============ 「希望給与を選択」モーダル中身（Figma 422:7519・.th-area-modal__salary*）============
   勤務地・診療科目の __regions（アコーディオン）に代わる中身。overlay/パネル/タイトル/sep/件数/ボタンは
   共通 .th-area-modal* を流用し、ここでは下限/上限プルダウン行（select2つ＋「円」＋「〜」）のみ定義する。
   パネル幅は Figma 忠実の 980px に id 限定で上書き（他モーダルの 1160px は不変）。 */
body.top-renewal #th-area-modal-salary .th-area-modal__panel {
    width: min(980px, 92vw);
}
/* プルダウン行: [下限 select 360px][円] 〜 [上限 select 360px][円] を横並び・中央寄せ。
   タイトル下マージン42px は .th-area-modal__title 流用。狭幅では flex-wrap で折り返す。 */
body.top-renewal .th-area-modal__salary {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 16px;
    margin: 0;
}
/* select と「円」をまとめる単位。align-items:flex-end ＝ Figma 422:7538/7539 では「円」が select
   （高さ50）の上下中央ではなく下端に揃う（円 y=6836..6860 / select y=6811..6861）。PC/SP 共通。 */
body.top-renewal .th-area-modal__salary-field {
    display: flex;
    align-items: flex-end;
    gap: 8px;
}
/* プルダウン: 幅360px・高さ50px・bg#f2f2f2・border 1px #939393・角丸20px。右端に下向き chevron 28px（色不変ゆえ背景画像）。
   import.css の素 select グローバル（height:30px/padding:0 20px 0 5px/line-height:1/font-size:100%）を
   上書きするため height/padding/line-height/font-size を明示する（詳細度で勝つ）。 */
body.top-renewal .th-area-modal__salary-select {
    appearance: none;
    -webkit-appearance: none;
    width: 360px;
    max-width: 100%;
    height: 50px;
    padding: 0 44px 0 20px;
    background: #f2f2f2 url('/data/media/mics/page/index/top/ic_chevron_down.svg') no-repeat right 14px center;
    background-size: 28px 28px;
    border: 1px solid #939393;
    border-radius: 20px;
    font-size: 16px;
    font-weight: 500;
    line-height: 24px;
    letter-spacing: .1em;
    color: #616161;
    cursor: pointer;
}
/* 「円」: Bold 18px・#1e1e1e・tracking .1em。各 select の直後。 */
body.top-renewal .th-area-modal__salary-unit {
    font-size: 18px;
    font-weight: 700;
    line-height: 24px;
    letter-spacing: .1em;
    color: #1e1e1e;
}
/* 「〜」: Bold 24px・#616161・tracking .1em。2つのフィールドの間。 */
body.top-renewal .th-area-modal__salary-tilde {
    font-size: 24px;
    font-weight: 700;
    line-height: 24px;
    letter-spacing: .1em;
    color: #616161;
}

/* ============ 「週勤務日数を選択」モーダル中身（Figma PC 696-360・.th-area-modal__workdays）============
   勤務地・診療科目の __regions（アコーディオン）に代わる中身。overlay/パネル/タイトル/sep/件数/ボタンは
   共通 .th-area-modal* を流用。ここではグレーボックス（#f2f2f2・角丸20）＋チェックグリッド（4列）のみ定義。
   チェック/ラベルは .th-area-acc__check/__label/__pref を流用（PC 24/18px・SP 20/16px が共通ブロックから当たる）。
   パネル幅は base の min(1160px,92vw)＝コンテンツ1040px が Figma グレーボックス1040px と一致するため上書き不要。
   row-gap/column-gap/padding は保存スクショ workdays_pc_696-360.png（1040×138・2行）とのピクセル突合で確定。 */
body.top-renewal .th-area-modal__workdays {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    row-gap: 30px;
    column-gap: 16px;
    padding: 30px 40px;
    background: #f2f2f2;
    border-radius: 20px;
}

/* 「市区町村を選択」モーダル（Figma 422:7205・.th-city-*）
   勤務地モーダル（.th-area-modal 系・.th-area-acc 系）と同デザインシステム（色/寸法/フォント同一）。
   別名前空間で standalone 複製し、勤務地モーダルの既存ルールには手を入れない（独立性優先）。
   差分は z-index:10002（勤務地 10001 の前面）と、注記/市区町村ボタンが無い点（フッターは件数+2ボタンで同一）。
   都道府県アコーディオン＋市区町村は JS が動的生成する。
---------------------------------------------------- */
/* オーバーレイ兼センタリング。z-index は勤務地モーダル(10001)より上の 10002（前面に重ねる）。 */
body.top-renewal .th-city-modal {
    position: fixed;
    inset: 0;
    z-index: 10002;
    display: none;
    /* 2026-08-21: 「__regions だけ内側スクロール」をやめ、オーバーレイ自体を縦スクロールさせる
       （SP は 2026-08-01 に同方式へ移行済み。PC もこれに揃えた）。内側スクロールだと画面が低いときに
       リストの後半（勤務地の「九州・沖縄」、診療科目の後ろ半分など）がモーダルを開いた時点で見えず、
       内側にスクロールバーがあることにも気づかれにくいため。
       align-items:center のままパネルが画面より高くなると上端が画面外へ出て到達できなくなるので
       flex-start にし、パネル側の margin-block:auto で「短いときだけ中央寄せ」を両立させる
       （flex の auto margin は余白が負なら 0 に解決される）。
       overflow の x を明示 hidden にするのは、片軸だけ非 visible にするともう片軸の visible が
       auto に計算されるため（パネルの overflow:hidden を外すので横はみ出しの保険が消える）。
       overscroll-behavior:contain は端まで振り切ったときの document へのスクロール連鎖を止める。 */
    align-items: flex-start;
    justify-content: center;
    padding: 24px 0;
    overflow: hidden auto;
    overscroll-behavior: contain;
}
body.top-renewal .th-city-modal[hidden] {
    display: none;
}
body.top-renewal .th-city-modal.is-open {
    display: flex;
}
/* バックドロップ（クリックで閉じる）。勤務地モーダルと同じ rgba(0,0,0,.5)。 */
/* 暗幕は fixed。absolute のままだとスクロールコンテナの中身と一緒に流れ、
   下へスクロールした先で背景が抜ける（祖先に transform/filter が無いのでクリップもされない）。 */
body.top-renewal .th-city-modal__overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, .5);
}

/* パネル: 白・角丸20px・幅1160px(左右padding60px)。flex column 化し、コンテンツがパネル高さ
   (max-height)を超えるときは __regions（都道府県・市区町村リスト）のみ内部スクロールさせ、
   タイトルとフッター（区切り線/件数/ボタン）は固定する。 */
body.top-renewal .th-city-modal__panel {
    position: relative;
    display: flex;
    flex-direction: column;
    width: min(1160px, 92vw);
    max-height: none;      /* 90vh 解除。中身なりに縦へ伸ばし、はみ出しはオーバーレイ側でスクロールさせる */
    overflow: visible;
    /* 画面に収まるときだけ上下中央寄せ。収まらないときは 0 に解決され上端が切れない。
       margin-block ショートハンドは iOS Safari 14.1 未満で丸ごと落ちるため longhand で書く。 */
    margin-top: auto;
    margin-bottom: auto;
    padding: 60px;
    background: #fff;
    border-radius: 20px;
}
body.top-renewal .th-city-modal__panel:focus {
    outline: none;
}

/* スティッキー構成: タイトルとフッター（区切り線/件数/ボタン）は flex-shrink:0 で固定し、
   中間の __regions だけを flex:1 + overflow-y:auto でスクロールさせる（PC・SP 共通）。
   min-height:0 は flex item 内スクロールを効かせるために必須。 */
body.top-renewal .th-city-modal__title,
body.top-renewal .th-city-modal__sep,
body.top-renewal .th-city-modal__count,
body.top-renewal .th-city-modal__actions {
    flex-shrink: 0;
}
body.top-renewal .th-city-modal__regions {
    flex: 0 0 auto;        /* 内側スクロールをやめ、中身の高さそのままで並べる（スクロールはオーバーレイ側） */
    min-height: 0;
    overflow-y: visible;
}

/* タイトル「市区町村を選択」: Bold 24px・#12b3af・tracking .1em。タイトル下端→最初のバー上端 42px。 */
body.top-renewal .th-city-modal__title {
    margin: 0 0 42px;
    font-size: 24px;
    font-weight: 700;
    line-height: 24px;
    letter-spacing: .1em;
    color: #12b3af;
}

/* 都道府県アコーディオン（勤務地モーダルの地方アコーディオンと同型）。バー間の縦間隔 12px。 */
body.top-renewal .th-city-acc + .th-city-acc {
    margin-top: 12px;
}

/* 閉状態のバー: 高さ50px・角丸20px・背景#f2f2f2・border 1px #939393。 */
body.top-renewal .th-city-acc {
    background: #f2f2f2;
    border: 1px solid #939393;
    border-radius: 20px;
}
body.top-renewal .th-city-acc__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    height: 50px;
    margin: 0;
    padding: 0 20px 0 40px;
    background: none;
    border: none;
    font: inherit;
    text-align: left;
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
}
/* 都道府県名ラベル: Medium 16px・#616161・tracking .1em。 */
body.top-renewal .th-city-acc__name {
    font-size: 16px;
    font-weight: 500;
    line-height: 24px;
    letter-spacing: .1em;
    color: #616161;
}
/* 開閉シェブロン: ic_chevron_down.svg（下向き）を 28px 枠で。開状態は rotate(180deg) で上向き。色 #616161 固定で許容。 */
body.top-renewal .th-city-acc__chev {
    flex-shrink: 0;
    width: 28px;
    height: 28px;
    transition: transform .2s;
}
/* 開状態: border を消す（Figma 開コンテナは枠線なし）。 */
body.top-renewal .th-city-acc.is-open {
    border-color: transparent;
}
body.top-renewal .th-city-acc.is-open .th-city-acc__chev {
    transform: rotate(180deg);
}

/* アコーディオンボディ: 既定 非表示、is-open で表示。見出し下の区切り線は body 上端に幅980px(左右30pxインセット)・1px・#d9d9d9。 */
body.top-renewal .th-city-acc__body {
    display: none;
}
body.top-renewal .th-city-acc.is-open .th-city-acc__body {
    display: block;
    position: relative;
}
body.top-renewal .th-city-acc.is-open .th-city-acc__body::before {
    content: "";
    position: absolute;
    top: 0;
    left: 30px;
    width: 980px;
    max-width: calc(100% - 60px);
    height: 1px;
    background: #d9d9d9;
}

/* 市区町村グリッド: 4列・行間30px・左右padding40px・上padding35px・下padding40px（列ピッチ250px は 1fr×4 で吸収）。 */
body.top-renewal .th-city-acc__grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    row-gap: 30px;
    padding: 35px 40px 40px;
}
body.top-renewal .th-city-acc__all,
body.top-renewal .th-city-acc__item {
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
}

/* チェックボックス: 24px・border 2px #12b3af・角丸6px・#fffdfd。:checked はティール塗り＋白チェック。勤務地モーダルと同方式。 */
body.top-renewal .th-city-acc__check {
    appearance: none;
    -webkit-appearance: none;
    position: relative;
    flex-shrink: 0;
    width: 24px;
    height: 24px;
    margin: 0;
    border: 2px solid #12b3af;
    border-radius: 6px;
    background: #fffdfd;
    cursor: pointer;
}
body.top-renewal .th-city-acc__check:checked {
    background: #12b3af;
    border-color: #12b3af;
}
body.top-renewal .th-city-acc__check:checked::after {
    content: "";
    position: absolute;
    left: 7px;
    top: 3px;
    width: 6px;
    height: 11px;
    border: solid #fff;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}
/* 市区町村ラベル: Medium 18px・#1e1e1e・tracking .1em。 */
body.top-renewal .th-city-acc__label {
    font-size: 18px;
    font-weight: 500;
    line-height: 24px;
    letter-spacing: .1em;
    color: #1e1e1e;
}

/* フッター上の区切り線: 幅1040px・1px・薄グレー。アコーディオン下端から30px下（勤務地は市区町村ボタンから30px だが、
   市区町村モーダルにはそのボタンが無いため、最後のアコーディオン下端から同じ 30px を据え置く）。 */
body.top-renewal .th-city-modal__sep {
    width: 1040px;
    max-width: 100%;
    height: 1px;
    margin: 30px auto 0;
    border: 0;
    background: #ddd;
}

/* 件数「条件に該当する求人 340件」: Bold 18px・#1e1e1e・中央。区切り線から20px下。「340」は静的。 */
body.top-renewal .th-city-modal__count {
    margin: 20px 0 0;
    text-align: center;
    font-size: 18px;
    font-weight: 700;
    line-height: 24px;
    letter-spacing: .1em;
    color: #1e1e1e;
}

/* フッターボタン: 中央・2つ横並び・gap30px・各266px×50px・角丸30px・白 Bold 16px。件数から20px下。 */
body.top-renewal .th-city-modal__actions {
    display: flex;
    justify-content: center;
    gap: 30px;
    margin-top: 20px;
}
body.top-renewal .th-city-modal__cancel,
body.top-renewal .th-city-modal__submit {
    width: 266px;
    max-width: 100%;
    height: 50px;
    border: none;
    border-radius: 30px;
    color: #fff;
    font-size: 16px;
    font-weight: 700;
    letter-spacing: .1em;
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
}
body.top-renewal .th-city-modal__cancel {
    background: #9e9e9e;
}
body.top-renewal .th-city-modal__submit {
    background: #12b3af;
}

/* フッター（区切り線＋件数＋ボタン）を SP で一括固定するためのラッパー。
   PC は display:contents でボックスを生成せず、3 要素は従来どおりパネル直下の flex item のまま＝レイアウト完全不変。 */
body.top-renewal .th-area-modal__footer,
body.top-renewal .th-city-modal__footer {
    display: contents;
}

/* SP 非ログイン（.is-guest）は詳細パネルを隠す（非ログインはキーワード開閉のみ＝Figma 423:543）。
   折りたたみ既定の非表示は base body.top-renewal .th-search__detail-panel{display:none}（@media 外）が SP に継承され担保するため、
   ここでは展開時(.is-detail-open)にも隠す上書きを .is-guest 限定（特異度 0,4,1）で当てる。
   SP ログイン（:not(.is-guest)）のアコーディオン表示・order は下の SP 検索ボックスブロック（@media max-width:768px）内で実装。 */
@media (max-width: 1199px) {
    body.top-renewal .th-search.is-guest.is-detail-open .th-search__detail-panel {
        display: none;
    }
}

/* #3 / #6 CTA 帯
---------------------------------------------------- */
body.top-renewal .th-cta {
    height: 280px;
    display: flex;
    align-items: center;
    background: #12b3af;
}

body.top-renewal .th-cta .container {
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* リード文。左右の装飾は Figma 実測の SVG（左 \ ・右 / の斜線、白 stroke3px、幅約578px）を
   中央背景に敷き、テキストは左右パディングで斜線の内側に収める。 */
body.top-renewal .th-cta__lead {
    color: #fff;
    font-size: 20px;
    font-weight: 700;
    line-height: 1.6;
    letter-spacing: .1em;
    text-align: center;
    margin-bottom: 26px;
    padding: 0 64px;
    /* 斜線（cta_deco.svg 578px）はテキスト幅収縮（.th-cta .container が align-items:center）で
       p 幅が 578px 未満になると左右端がクリップされ消える。ログイン版リードは @guest より短く
       p 幅 475px となり斜線が消えていたため、min-width で斜線幅（578px・border-box）を下限確保し
       @auth/@guest とも斜線をフル表示する。SP（max-width:350px）には min-width:0 で打ち消す。 */
    min-width: 578px;
    background: url('/data/media/mics/page/index/top/cta_deco.svg') no-repeat center center;
    background-size: 578px 49px;
}

/* CTA リード文の改行は PC/SP で異なる（PC 2行: 「情報満載」後 / SP 3行: 「ならではの」「企業を」後）。
   レスポンシブ <br> を出し分ける。SP 側の表示切替は末尾 @media ブロックで行う。 */
body.top-renewal .th-cta__br--sp {
    display: none;
}

body.top-renewal .th-cta__btn-wrap {
    margin: 0;
}

body.top-renewal .th-cta__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 536px;
    height: 80px;
    padding: 0 40px;
    background: #ff9000;
    border: 2px solid #fff;
    border-radius: 40px;
    color: #fff;
    font-size: 24px;
    font-weight: 700;
    letter-spacing: .1em;
    transition: opacity .3s;
}

body.top-renewal .th-cta__btn:hover {
    opacity: .85;
}

/* #4 / #5 新着求人
---------------------------------------------------- */
body.top-renewal .th-jobs {
    padding: 70px 0 80px;
}

body.top-renewal .th-jobs__heading {
    font-size: 30px;
    font-weight: 700;
    color: #12b3af;
    letter-spacing: .1em;
    margin-bottom: 20px;
}

body.top-renewal .th-jobs__group + .th-jobs__group {
    margin-top: 50px;
}

body.top-renewal .th-jobs__subheading {
    font-size: 16px;
    font-weight: 500;
    color: #1e1e1e;
    letter-spacing: .1em;
    margin-bottom: 19px;
}

/* 都道府県チップ（非活性 #939393 / 活性 #12b3af。パネル上に浮く丸タブ＝下角も10px、パネルと4px隙間） */
body.top-renewal .th-pref {
    display: flex;
    gap: 4px;
    margin-bottom: 4px;
    position: relative;
    z-index: 1;
}

body.top-renewal .th-pref__chip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 94px;          /* 短いラベルは従来どおり 94px。長いラベルが来た場合は内容に追従 */
    padding: 0 14px;          /* 左右余白。border-box 前提 */
    white-space: nowrap;      /* CJK の途中折返しを防止し 1 行固定 */
    height: 50px;
    background: #939393;
    border-radius: 10px;
    color: #fff;
    font-size: 16px;
    font-weight: 700;
    letter-spacing: .1em;
    transition: opacity .2s;
}

body.top-renewal .th-pref li:first-child .th-pref__chip {
    border-top-left-radius: 20px;
}

body.top-renewal .th-pref li:last-child .th-pref__chip {
    border-top-right-radius: 20px;
}

body.top-renewal .th-pref__chip:hover {
    opacity: .85;
}

body.top-renewal .th-pref__chip.is-active {
    background: #12b3af;
}

/* パネル（#f2f2f2） */
body.top-renewal .th-jobs__panel {
    background: #f2f2f2;
    border-radius: 10px 10px 20px 20px;
    padding: 30px;
}

/* 対象エリアの注釈バンド（Figma PC 1140:1110 / SP 1188:2076 の Group 458）。
   Figma 実測（PC / SP で意匠は完全に同一。違うのは幅だけ）:
     バンド  高さ40 角丸10 塗り #cde2fb  PC 1100幅（パネル padding 30 の内側いっぱい）/ SP 350幅
     テキスト #23579b Noto Sans JP Bold 14px 行高24 字間1.4px（=.1em）左 inset 20px
   → 高さ40 = 行高24 + 上下 padding 8。左右 padding 20 で inset を出し、幅は親任せ（PC は
     パネルの content box、SP は下の帯域ブロックで左右 20px マージン）にして固定値を持たない。
   ★ height ではなく min-height にすること。Figma は最短の首都圏（※対象エリア：東京・神奈川・千葉・埼玉）
     しか描いていないが、実データは九州が最長（35文字＝14px+字間で約 540px）で SP（実効 310px）では
     必ず 2 行に折り返す。固定 height だと文字がバンドから溢れる。PC（実効 1060px）は常に 1 行。
   非活性地域は Blade が hidden で出力し、チップ切替 JS が .th-card-list と同じ data-region で付け替える。 */
body.top-renewal .th-jobs__note {
    margin: 0 0 16px;
    padding: 8px 20px;
    border-radius: 10px;
    background: #cde2fb;
    color: #23579b;
    font-size: 14px;
    font-weight: 700;
    line-height: 24px;
    letter-spacing: .1em;
    min-height: 40px;
    box-sizing: border-box;
}

/* [hidden] は UA スタイルの詳細度が低く、上の指定に負けて消えないため明示的に落とす
   （.th-card-list[hidden] と同じ理由・同じ先例）。 */
body.top-renewal .th-jobs__note[hidden] {
    display: none;
}

body.top-renewal .th-card-list {
    display: flex;
    gap: 16px;
    /* カード min-height 撤廃（内容依存の高さ）に伴い、align-items 未指定（既定 stretch）だと
       行内最高カードへ引き伸ばされてしまう。上端揃えにして高さの差をそのまま見せる。 */
    align-items: flex-start;
}

/* display:flex 確定のため [hidden] 属性（UA の低詳細度）だけでは非表示にならない。
   地域チップ切替（JS）で非活性 list を確実に隠すため明示的に上書きする。
   既存先例: .th-area-modal[hidden]（:677）/ .th-city-modal[hidden]（:1053）と同パターン。 */
body.top-renewal .th-card-list[hidden] {
    display: none;
}

/* 新着 0 件地域の空状態。カルーセル JS の .th-card 誤取得を避けるためクラスを分ける。 */
body.top-renewal .th-card-list__empty {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 120px;
    color: #616161;
    font-size: 14px;
    font-weight: 700;
}

/* カルーセル矢印は SP のみ表示（PC はカード3枚並びで不要）。SP 側 @media で flex 表示にする。 */
body.top-renewal .th-jobs__arrow {
    display: none;
}

/* 求人カード（home 専用・共有 job_item は使わない）。
   Figma 実測ではカード高固定（常勤466 / 非常勤498）＋情報ボックス下端寄せだったが、
   タグが少ないカードにタグ〜情報ボックス間の大きな余白ができるため 2026-07 ユーザー依頼で撤回。
   高さは内容依存とし、行内は .th-card-list の align-items: flex-start で上端を揃える。 */
body.top-renewal .th-card {
    position: relative;
    display: flex;
    flex-direction: column;
    width: 356px;
    background: #fff;
    border-radius: 20px;
    padding: 20px;
}

/* 非常勤セクションは Figma 実測で青系 #3487d5（アクティブ県チップ・クリニック名アイコン・タグ枠/文字・お問い合わせボタン）。
   非活性チップ灰・情報ボックス灰・本文は常勤と共通。 */
body.top-renewal .th-jobs__group--part .th-pref__chip.is-active {
    background: #3487d5;
}

body.top-renewal .th-jobs__group--part .th-card__clinic-icon {
    color: #3487d5;
}

body.top-renewal .th-jobs__group--part .th-card__tag {
    border-color: #3487d5;
    color: #3487d5;
}

body.top-renewal .th-jobs__group--part .th-card__btn {
    background: #3487d5;
    border-color: #3487d5;
}

body.top-renewal .th-card__link {
    position: absolute;
    inset: 0;
    z-index: 1;
    border-radius: 20px;
}

body.top-renewal .th-card__title {
    font-size: 18px;
    font-weight: 700;
    line-height: 1.6;
    color: #1e1e1e;
    text-decoration: underline;
    text-underline-offset: 2px;
    margin-bottom: 10px;
}

body.top-renewal .th-card__clinic {
    display: flex;
    align-items: center;
    gap: 10px;                 /* アイコン(24px)とテキストの間隔 */
    color: #08213e;            /* 濃紺(テキスト)。アイコン色は .th-card__clinic-icon で別指定 */
    margin-bottom: 10px;       /* title 直後・tags の上。カード内の縦リズムを 10px に統一 */
}

body.top-renewal .th-card__clinic-icon {
    flex-shrink: 0;
    width: 24px;
    height: 24px;
    color: #12b3af;            /* 常勤(既定)。非常勤は .th-jobs__group--part で #3487d5 に上書き */
}

body.top-renewal .th-card__clinic-name {
    font-size: 14px;
    font-weight: 500;          /* Noto Sans JP Medium。base-font が 500 を供給済み */
    line-height: 24px;
    letter-spacing: .1em;      /* Figma tracking 1.4px @14px */
    overflow-wrap: anywhere;   /* 長いクリニック名のカード幅溢れ対策 */
}

body.top-renewal .th-card__tags {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    margin-bottom: 10px;
}

body.top-renewal .th-card__tag {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 146px;
    min-height: 26px;          /* 1 行時は従来の 26px を維持 */
    padding: 4px 8px;          /* 2 行に折り返す長文言でも上下に余白を確保 */
    background: #fff;
    border: 1px solid #12b3af;
    border-radius: 16px;
    color: #12b3af;
    font-size: 12px;
    font-weight: 700;
    line-height: 1.2;
}

/* 情報ボックス（#f0f0f0・ラベルは #616161 pill）。下端寄せ（margin-top:auto）は 2026-07 ユーザー依頼で撤回し、
   直前要素（title / clinic / tags）の margin-bottom 直後に自然配置する。 */
body.top-renewal .th-card__info {
    background: #f0f0f0;
    border-radius: 10px;
    padding: 12px 16px;
    margin-bottom: 16px;
}

body.top-renewal .th-card__row {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 5px 0;
}

body.top-renewal .th-card__label {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 86px;
    height: 20px;
    background: #616161;
    border-radius: 16px;
    color: #fff;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .1em;
}

body.top-renewal .th-card__value {
    font-size: 14px;
    font-weight: 700;
    color: #1e1e1e;
    line-height: 1.4;
}

body.top-renewal .th-card__btn {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 40px;
    background: #12b3af;
    border: 2px solid #12b3af;
    border-radius: 29px;
    color: #fff;
    font-size: 16px;
    font-weight: 700;
    letter-spacing: .1em;
    transition: opacity .3s;
}

body.top-renewal .th-card__btn:hover {
    opacity: .85;
}

/* #7 おすすめ記事
---------------------------------------------------- */
/* Figma 実測の縦リズム: CTA→見出し70px / 見出し→カード約50px / カード→ISMS約40px */
body.top-renewal .th-articles {
    padding: 70px 0 40px;
}

body.top-renewal .th-articles__heading {
    font-size: 30px;
    font-weight: 700;
    line-height: 1.2;
    color: #12b3af;
    letter-spacing: .1em;
    margin-bottom: 50px;
}

body.top-renewal .th-articles__list {
    display: flex;
    gap: 40px;
}

body.top-renewal .th-article {
    width: 360px;
}

body.top-renewal .th-article__link {
    display: block;
    color: #1e1e1e;
}

body.top-renewal .th-article__thumb {
    display: block;
    width: 100%;
    height: 220px;
    background: #d9d9d9;
    border-radius: 20px;
    margin-bottom: 14px;
    overflow: hidden;
}

body.top-renewal .th-article__thumb img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 20px;
}

body.top-renewal .th-article__meta {
    display: flex;
    align-items: flex-start;
    gap: 10px;
}


body.top-renewal .th-article__title {
    font-size: 20px;
    font-weight: 500;
    line-height: 1.6;
    letter-spacing: .1em;
}

/* #8 ISMS
---------------------------------------------------- */
body.top-renewal .th-isms {
    padding: 0 0 90px;
}

body.top-renewal .th-isms .container {
    display: flex;
    align-items: center;
    gap: 32px;
}

body.top-renewal .th-isms__logo {
    width: 209px;
    flex-shrink: 0;
}

body.top-renewal .th-isms__logo img {
    width: 100%;
    height: auto;
}

body.top-renewal .th-isms__txt {
    font-size: 16px;
    font-weight: 500;
    line-height: 1.6;
    letter-spacing: .1em;
}

/* 企業バナー（共有 .footer-bnr）の3列レイアウト。
   要望: 画像をできるだけ大きく＆コンテンツ両端(body と同じ左133/右1293)に揃える。
   → 各 li を flex:1 で全幅(1160px)を3等分し、画像を列いっぱいに拡大（約360px。PNG実寸508pxなので拡大しても荒れない）。
   列間隔は40pxに抑えて両端を揃えつつ画像を最大化。TOP 限定（他ページの bnr-sec には影響させない）。 */
body.top-renewal .footer-bnr {
    justify-content: normal;
    column-gap: 40px;
    row-gap: 50px;
}
body.top-renewal .footer-bnr > li {
    flex: 0 0 calc((100% - 80px) / 3);
    max-width: calc((100% - 80px) / 3);
    min-width: 0;
}
body.top-renewal .footer-bnr > li img {
    width: 100%;
    height: auto;
}

/* =========================================================================
   SP（スマートフォン）レイアウト — Figma「A案/SP/TOPページ(常勤・ログイン前)」(422:5860 / 390px) 準拠
   --------------------------------------------------------------------------
   ブレークポイントは 768px。テーマ import.css の .container が「>768=width:1180px 固定 /
   ≤768=width:auto + padding 20px」に切替わるのに合わせる（中間幅で横スクロールになるのはサイト共通仕様）。
   ≤768 では container が左右 20px パディングを供給するため Figma SP の x20 インセットと一致する。
   フルブリード要素（CTA 帯・求人パネル）は負マージンで 20px を打ち消して画面端まで広げる。
   blade は変更せず CSS のみでリフロー（フィルタ2×2・カルーセル・並べ替えは grid/order/擬似要素で実現）。
   ========================================================================= */
@media (max-width: 768px) {

    /* ============ #2 ヒーロー ============ */
    /* PC は min-height811・看護師右寄せ transform。SP は看護師中央のカバー表示に切替え、
       上にキャッチ・下に検索カードを重ねる縦構成。高さは内容で決まる（可変幅で崩れない）。
       余白は Figma 修正版「A案/SP/TOPページ(ログイン前)」(1182:1516) 準拠に短縮（2026-08-10）。
       上 44→20px（ヘッダー下端 y64 → キャッチ上端 y84）／下 63→34px（カード下端 y768 → CTA帯上端 y802）。
       旧値では検索ボックス下端が y903 まで下がり、390×844 の端末で「詳細な検索条件を表示」が
       初期表示から溢れていた（ユーザー報告 2026-08-07）。新値では下端 y780 で画面内に収まる。 */
    body.top-renewal .th-hero {
        min-height: 0;
        padding: 20px 0 34px;
    }

    /* 背景画像は PC と同じ hero_bg.png を、width 基準クロップで配置し看護師を中央に出す。
       object-fit:cover だと縦長ボックスへ過剰ズームし車が中央に来るため width/left/top で直接クロップする。
       opacity 0.9（Figma 同値）。
       クロップ 3 値は 2026-08-10 に Figma 修正版 1182:1516 のスクショと実測突合して再導出した
       （旧: width437.03% / left-302.85% / top-4.44〜-4.5%。旧値は Figma 422:5870 由来だが、検索ボックスを
       123px 上げた＝カード上端が y530→y407 になった構図では看護師が大きすぎ・右すぎ・下すぎになり、
       右手の拳とクリップボードがカードで切れていた）。
       カード上端を原点にした実測（390px 幅）で、デザインと次の 2 点が一致するよう合わせている:
         頭頂 -200 / 右手の拳の下端 -40（クリップボードの先端 -25）
       導出: デザインは実装より約 8.3% 小さく（頭頂〜拳下端 165px : 180px）、20px 左・20px 上。
         width 437.03% × 0.917 = 400.7% ／ left・top はその倍率で頭頂と顔中心が上記に来るよう逆算。
       横位置だけはデザイン（顔の中心 x205）から意図的に 8px 右へ寄せている（顔の中心 x213・
       left の逆算値 -278.05% + 8/390 = -276.00%。ユーザー指定 2026-08-10「少し右に」→「ごく僅かに左へ」）。
       左右を動かすときは left だけを増減すれば足りる（1px ≒ 0.256%・右へ動かすほど値が 0 に近づく）。
       ★ top だけ vw なのは hero 高さ非依存にするため。% は hero 高さ基準なので、詳細検索パネルの展開
          （hero 750→967px）で写真が上へ 26px 動いてガタつく。width/left と同じ「画面幅比例」に揃える。 */
    body.top-renewal .th-hero__bg img {
        position: absolute;
        inset: auto;
        left: -276.00%;
        top: -20.08vw;
        width: 400.7%;
        height: auto;
        max-width: none;
        object-fit: fill;
        opacity: .9;
    }

    /* 下端の水色フェード（Figma 436:291/436:292: 写真下端で #d7ebff、上へ透明）。SP は左右帯なし。
       写真はほぼくっきり見せ、検索ボックス直上（写真の見える下端＝タブ上端 hero 相対 343px）に薄く水色をかける。
       看護師の下（hero 相対 327px）から水色を乗せ始め、ベタ到達を検索ボックスのずっと裏（hero 相対 497px）に
       置くことで、身体には水色をかけず写真の見える下端にだけ薄く乗せる（to bottom・hero 上端からの固定px）。
       ※以前は hero 全高基準の % 指定（to top 0-17-46%）で、検索ボックスの高さが伸びると濃い帯が hero 最下部
       （検索ボックスの裏）へずれ、写真の見える下端の水色が消える回帰が出たため、写真基準の固定px化。
       2026-08-10 の余白短縮（padding-top 44→20 / キャッチ margin 280→181）でタブ上端が hero 相対 466→343px へ
       123px 上がったため、開始/到達点も同じだけ上げる（450→327 / 620→497）。 */
    /* ★ 2026-08-27: 検索ボックスを 76px 上げたのに合わせて開始/到達点も同じだけ上げる
          （327→251 / 497→421）。この 2 値は「カード上端 −16px / +154px」というカード基準の
          相対量なので、カードを動かしたら必ずセットで同量ずらすこと。 */
    body.top-renewal .th-hero::before {
        background: linear-gradient(to bottom,
            rgba(215, 235, 255, 0) 251px,
            #d7ebff 421px);
    }
    /* ★ 展開時（.is-detail-open）専用の ::before 上書きはここに置かない（意図的な空き）。
       かつては折りたたみ／展開でキャッチ下マージンが違い（280px / 174px）カード上端が 106px ずれたため、
       展開用に別のグラデ（透明490→ベタ690px）を当てて写真と位置を揃えていた。2026-08-10 に両状態の
       マージンを 181px へ統一しカード上端が hero 相対 343px で不変になったので、上の ::before だけで
       両状態とも正しく機能する。
       ★ 復活させるとカード上端と水色フェードの位置が再びずれる。 */
    /* 上端の白フェード（Figma 422:5871: 上が白→下へ透明・約23%）。ヘッダー下と画像をなじませキャッチを読みやすく。
       折りたたみ時は % 指定が設計（197px）とほぼ一致（=完璧）。展開時のみ下で固定148px（Figma 436:296）へ差し替える。 */
    body.top-renewal .th-hero::after {
        display: block;
        top: 0;
        bottom: auto;
        height: 23%;
        background: linear-gradient(to bottom, #fff 0%, rgba(255, 255, 255, 0) 100%);
    }
    /* 展開時の上端白フェード（Figma 423:332 / 436:296: 固定148px）。展開でヒーローが高くなり % 指定（≒224px）が
       設計より間延びするため、固定px化して 148px に合わせる。折りたたみ用 ::after は不変。 */
    body.top-renewal .th-hero.is-detail-open::after {
        height: 148px;
    }

    /* キャッチは SP では 28px 固定・手動改行なし（2026-08-11 ユーザー指示）。
       旧実装は clamp(23px, 7.6vw, 32px) ＋ <br> 2 本で 3 行（「医師転職・」「なら」後）に割っていた。
       ★ 「28px かつ 1 行」は物理的に両立しない: 全 23 文字は 28px で約 708px 必要な一方、
          設計幅 390px の収容幅は 350px（container 左右 padding 20px）。1 行に収めるには 16px まで
          下げる必要があるため、28px を優先し自動折返しの 2 行（「訪問診療の医師転職・アルバ」／
          「イトなら『在宅専科』」＝「アルバイト」が語中で割れる）を許容する（ユーザー確認 2026-08-11）。
       ★ viewport 約 730px 以上（＝本ブロック上限 768px 付近のタブレット幅）では 28px でも 1 行に収まる。
          実機の折返しを確認するときは必ず 390px 前後まで狭めること。 */
    /* 下マージンは Figma 修正版 1182:1516 の検索ボックス上端 y407 に合わせる（2026-08-10 / 2026-08-11 再計算）。
       ★ この値はキャッチの実高とセットで決まる。キャッチ高が変わったら必ず再計算すること:
            margin = 407 − header64 − padding-top20 − キャッチ実高
          - 3 行（h142）だった頃: 181px（Figma 221px からキャッチ 3 行分の差 40px を減算した値と一致）
          - 2 行（h90）の現在  : 233px ＝ 407 − 64 − 20 − 90 ✓
          28px・改行なし化でキャッチが 142px→90px に縮んだ分、181px のままだと検索ボックス上端が
          y355 へ 52px 上がってしまうため 233px へ引き上げた（ユーザー指示 2026-08-11）。
       旧値 280px では上端 y530・下端 y903 となり、390×844 の端末で「詳細な検索条件を表示」が画面外に出ていた
       （＝マージンを広げる方向に画面外リスクがある。233px は y407 復元ちょうどで、下端は y780＝画面内）。
       ★ 展開時（.is-detail-open）も同じ値＝カード上端は開閉で動かない。旧実装は展開時のみ 174px に
       詰めて上へ 106px ずらしていたが、折りたたみ時が既に y407 まで上がったので不要になった
       （開閉時のガタつきも消える）。展開用の上書きを戻さないこと。 */
    /* ★ 2026-08-27: 検索ボックスを 76px 上へ（ユーザー指示「5cm ほど上に」→「2cm 下げて」→「1cm 下げて」の差引）。
          cm→px は PC ブラウザに定規を当てた 96dpi 基準（1cm ≒ 37.8px）で 190 − 76 − 38 = 76px（= 元位置の 2cm 上）。
          margin 233px → 157px で検索ボックス上端が y407 → y331（下端 y780 → y704）になる。
          ヘッダー下端 y64 からの持ち分は padding-top20 + キャッチ実高90 + margin157 = 267px。
          ★ 233px は「キャッチ 2 行（h90）」とセットの値。≤384px はキャッチが 3 行（h134）になり
             別ルール（ファイル末尾 @media max-width:384px）で管理しているので必ず両方直す。 */
    body.top-renewal .th-hero__catch {
        margin: 0 0 157px;
        font-size: 28px;
        line-height: 1.6;
    }
    /* SP は手動改行を一切入れず自動折返しに任せる。PC/SP 共通の <br>（「なら」後）と
       SP 専用の .th-hero__br--sp の両方をここで消す（後者の base 側 display:none と重複するが、
       「SP は改行なし」という意図を 1 ルールで表すためまとめて指定する）。 */
    body.top-renewal .th-hero__catch br {
        display: none;
    }
}

/* =========================================================================
   検索ボックス（＋ログイン版ヒーロー結合部）— SP 版を中間幅（769〜1199px）にも適用
   --------------------------------------------------------------------------
   検索ボックスの PC 版は設計幅 1160px（+container padding 20px+スクロールバー ≒ viewport 1199px）
   前提のため、これを下回ったら SP 版へ切り替える（2026-07-13）。本ブロックは元々下の SP ブロック
   （max-width:768px）の一部で、ソース順を保ったままメディア条件だけ 1199px に広げて分割した
   （≤768 の SP 表示・カスケード順は従来と完全に同一）。
   非ログインのヒーロー写真・キャッチ・グラデ（上の SP ブロック前半）は 390px 前提の固定 px 構図
   のため広げず、中間幅では PC 構図を維持する。ログイン版ヒーロー（白背景化・タブ直下の緑線
   top:60px・padding 20/40）は SP タブ高 40px と結合するため本ブロックに含める。
   中間幅でヒーローを実際に viewport 幅へ縮める構造上書きはファイル末尾の帯域ブロック参照。 */
@media (max-width: 1199px) {

    /* SP ログインのヒーロー背景は現状（is-member プレースホルダ）維持。base/PC の is-member 圧縮・#e1fffe 帯
       （クラス2つ＝SP の .th-hero 1クラスより詳細度が高く染み出す）を SP で打ち消し、SP レイアウトを既存どおり不変に保つ。
       #e1fffe 帯（is-member::before）は SP では出さず（display:none）背景は素の #fff。SP 既存の
       .th-hero::before/.th-search__card/.th-search__chip は一切変更しない。
       Task 2.6 点検（SP ログイン詳細検索アコーディオン）: マスタートグル展開で footer-js が .th-hero にも is-detail-open を付与するが、
       ① .th-hero__bg/.th-hero__catch は @guest 限定で DOM になく上記の margin/グラデ調整は無害化、
       ② 青フェード .th-hero(.is-detail-open)::before は is-member::before{display:none}（同詳細度0,2,1・ソース後勝ち）で非表示のまま、
       ③ 白フェード ::after（height:148px）は素背景に馴染み青帯化しない。
       → SP ログインのヒーロー背景は白のまま（ユーザー確認 2026-06-26: PC は #e1fffe 帯／SP は白地）。
       カードが「カードに見えない」不具合は背景色ではなく、SP でカード自身の影が消えていた（box-shadow:none）ことが原因。
       影は下の SP .th-search__card 側で復活させる（背景は白を維持）。 */
    /* SP ログインのヘッダー底面→タブ上面の間隔は Figma 427:1336 で 20px（header 底 y64 → タブ上 y84）。
       @guest base（.th-hero=44px）は触らず、@auth 専用ルールでのみ padding-top を 20px に詰める（ユーザー確認 2026-06-26）。
       下端（検索カード→CTA帯「エージェントに無料相談」の隙間）は Figma 427:1336 で 40px
       （検索カード下端 y420 → CTA帯 Group 366 上端 y460）。以前の 63px は広すぎたため 40px に詰める（ユーザー確認 2026-06-26）。 */
    body.top-renewal .th-hero.is-member {
        min-height: 0;
        padding: 20px 0 40px;
    }
    /* SP ログイン版のタブ→フィルタ境目の緑横線（PC は #e1fffe 帯の border-top、SP は帯を出さず背景は白）。
       is-member::before を緑線のみ（height:0・background:transparent）で復活させ hero 全幅（≈画面幅）でタブ直下
       （top:60px＝padding-top 20 + タブ高 40）に 4px 緑線。z-index で前面化＋カード margin-top:4px で緑線を見せる
       （ユーザー確認 2026-06-26）。height:0・transparent のため詳細パネル展開時の青フェード ::before を上書きしても帯化しない。 */
    body.top-renewal .th-hero.is-member::before {
        display: block;
        top: 60px;
        bottom: auto;
        height: 0;
        background: transparent;
        border-top: 4px solid #12b3af;
        z-index: 3;
    }
    /* 詳細パネル展開時の下端余白（検索カード→CTA帯「エージェントに無料相談」の隙間）。
       base の .th-hero.is-member.is-detail-open{padding-bottom:102px}（L162・PC Figma 427:961 の値）は
       特異度 (0,4,1) で SP の .th-hero.is-member（0,3,1）より強く、放置すると SP 展開時も 102px で広すぎる。
       SP 展開時は Figma 427:1493 でカード下端 y813 → CTA帯上端 y853 = 40px（折りたたみ時と同値）。
       同特異度 (0,4,1) を SP ブロック内（ソース後方）に置き、後勝ちで 40px に上書きする（ユーザー確認 2026-06-26）。 */
    body.top-renewal .th-hero.is-member.is-detail-open {
        padding-bottom: 40px;
    }

    /* ============ #2 検索ボックス ============ */
    body.top-renewal .th-search {
        max-width: none;
        width: 100%;
    }

    /* SP で省略する語句（タブの「求人を探す」／科目ラベルの「内科」）。PC では表示し従来文言を維持。 */
    body.top-renewal .th-search__sp-omit {
        display: none;
    }

    /* タブ＝全幅2分割・高さ40px */
    body.top-renewal .th-search__tabs {
        width: 100%;
        height: 40px;
        border-radius: 20px 20px 0 0;
    }
    body.top-renewal .th-search__tab {
        font-size: 14px;
    }

    /* カードを flex 縦並びにして order で「フィルタ→件数/ボタン→詳細表示」へ並べ替え（Figma SP 順）。
       Figma SP のカードは影なしフラット（box-shadow を解除）。 */
    body.top-renewal .th-search__card {
        display: flex;
        flex-direction: column;
        border-radius: 0 0 20px 20px;
        box-shadow: none;
    }
    /* SP ログイン（@auth）はヒーローが白背景のため、影なしだと白カードが背景に溶けて「カードに見えない」。
       非ログインは看護師写真ヒーロー上でコントラストするため影なし（上の box-shadow:none）のまま不変。
       ログイン限定でカードの影を復活させ白背景上でも境界を出す。:not(.is-guest)=詳細度0,3,1 で上の box-shadow:none（0,2,1）に勝つ。
       背景は白を維持（#e1fffe 帯は付けない）。Figma 427:1451 のカードはコード export では effect が落ちるが、スクショ上は底面に明確な
       ドロップシャドウがある。従来の .08/16px では薄すぎ Figma と乖離していたため底面の影を少し濃くする。
       .16 は濃すぎたため .08 と .16 の中間 .12 に調整（ユーザー確認 2026-06-26）。 */
    body.top-renewal .th-search:not(.is-guest) .th-search__card {
        box-shadow: 0 5px 18px rgba(0, 0, 0, .12);
    }

    /* フィルタ＝2×2グリッド。セル間は縦横の区切り線（左列に右border・全セルに下border）。
       縦線をタブの中央分割線と一致させるため minmax(0,1fr) ＋ セル min-width:0 で完全に50/50にする
       （1fr のままだと「一般内科…」セルの min-content で列が不均等になり縦線が左へずれる）。 */
    body.top-renewal .th-search__filters {
        order: 1;
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        border-bottom: none;
    }
    body.top-renewal .th-search__filter {
        height: 50px;
        min-width: 0;
        padding: 0 6px;
        justify-content: center;
        gap: 4px;
        border-left: none;
        /* 全セルに下border＝上段の下の線＋下段（週勤務日数/希望給与）の下の線の両方を出す（Figma SP 423:543）。
           上段だけに付けると下段下の枠線が欠落する。container 側は border-bottom:none のままで二重線を防ぐ。 */
        border-bottom: 1px solid #e3e3e3;
    }
    /* Figma SP はラベルをセル中央・アイコンをその左に置く（長いラベル＝一般内科ほどアイコンが左へ寄る）。
       右に icon 幅相当(12px)のスペーサ flex item を置いて左右をバランスさせラベルを中央化し、アイコン開始位置を左へ。
       chevron は絶対配置のため別計算。 */
    body.top-renewal .th-search__filter::after {
        content: "";
        flex-shrink: 0;
        width: 12px;
    }
    body.top-renewal .th-search__filter:nth-child(odd) {
        border-right: 1px solid #e3e3e3;
    }
    body.top-renewal .th-search__filter-icon {
        width: 21px;
        height: 21px;
    }
    body.top-renewal .th-search__filter-label {
        font-size: 14px;
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    body.top-renewal .th-search__filter-chev {
        right: 14px;
        width: 8px;
        height: 14px;
    }

    /* 件数（左・2 行）＋検索ボタン（右）の横並び（Figma SP 1324:450。2026-08-28 に縦積み中央寄せから変更）。
       base の display:flex / align-items:center / justify-content:space-between をそのまま使うため、
       旧 flex-direction:column と justify-content:center は消す（指定しない＝base の行方向に戻す）。
       Figma 実測: カード 350px 内で 件数ブロック 118px ＋ gap 24px ＋ ボタン 180px = 322px。
       左右 15px は SP のカード内インセット（keywords の margin:0 15px・member-note の padding:0 15px と同値。
       Figma は左 15px / 右 13px だが、他要素と左右対称に揃える方を優先した）。
       上 8px は Figma の区切り線 y659 → ボタン上端 y667。
       gap は 12px と小さめに置く（space-between が余白を配分するので実質「最小間隔」。
       360px 幅など Figma より狭い端末ではボタン側が縮んで折返しを避ける＝下の __submit で flex-shrink を許可）。 */
    body.top-renewal .th-search__action {
        order: 2;
        gap: 12px;
        padding: 8px 15px 20px;
    }
    /* SP は詳細トグル(.th-search__detail)が order:4＝最下部にあり、フィルタ→件数の間隔に関与しない。
       よって非ログイン(is-guest)でも SP の上 padding は base（SP）の 8px を維持し、PC 専用の
       padding-top:25px（メディアクエリ外・フィルタ→件数復元用）が SP に染み出すのを打ち消す。 */
    body.top-renewal .th-search.is-guest .th-search__action {
        padding-top: 8px;
    }
    /* SP 非ログインは下部トグル（order:4）でキーワードを開閉する（Figma 423:543 閉 / 開）。
       PC 用の display:none を SP で打ち消す。display:flex は base .th-search__detail に合わせる。 */
    body.top-renewal .th-search.is-guest .th-search__detail {
        display: flex;
    }
    /* 件数は左寄せ 2 行（Figma 1324:462: 12px Medium / lh24 / tracking 1.4px #1e1e1e）。
       中央寄せ（旧 text-align:center）はボタンと縦積みだった時代の指定なので left に戻す。 */
    body.top-renewal .th-search__count {
        font-size: 12px;
        line-height: 24px;
        letter-spacing: 1.4px;
        text-align: left;
        /* 「この条件の求人件数」を 1 行に保つ（実測 118px）。付けないと flex の縮小で 115px まで
           潰され「この条件の求人件」/「数」の 3 行になる（375px 幅で発生）。 */
        white-space: nowrap;
    }
    /* 1 行目「この条件の求人件数」を独立行にして 2 行目を「264件」にする（PC は inline のまま 1 行）。 */
    body.top-renewal .th-search__count-label {
        display: block;
    }
    /* 数字は 20px Bold / lh24（Figma 1324:462 の span）。base の margin:0 2px は行頭が 2px ずれて
       ラベルと左端が揃わないので SP では消す（Figma も「264」と「件」の間は tracking 分のみ）。 */
    body.top-renewal .th-search__count-num {
        font-size: 20px;
        line-height: 24px;
        letter-spacing: 1.4px;
        margin: 0;
    }
    /* ボタンは 180×50・14px Bold（Figma 1324:468 / 1324:469）。
       flex-shrink は base の 0 を 1 に戻し、Figma（390px 幅）より狭い端末では 180px から縮ませる
       （縮まないと件数側が押し出されて 3 行に折返す）。min-width は文字列「この条件で検索する」
       14px×9 字＋tracking の実寸 ≒138px を下回らせないための下限。 */
    body.top-renewal .th-search__submit {
        width: 180px;
        min-width: 150px;
        max-width: 100%;
        height: 50px;
        font-size: 14px;
        flex-shrink: 1;
    }

    /* 詳細な検索条件を表示＝SP は枠なし・上に区切り線・中央テキスト＋chevron（Figma SP 423:560）。
       展開時は keywords(order:3) より下＝最下部に置くため order を 4 に。 */
    body.top-renewal .th-search__detail {
        order: 4;
        width: auto;
        height: auto;
        margin: 0;
        padding: 20px 20px 24px;
        border: none;
        border-radius: 0;
        background: transparent;
        font-size: 14px;
        line-height: 24px;
        font-weight: 500;
        color: #1e1e1e;
    }
    /* ラベル文言は SP のみ擬似要素で出し、展開時に「非表示」へ差し替える（PC は span 実文字のまま＝非干渉）。
       span 実文字は font-size:0 で隠し、::after で font-size を再指定して描画する。 */
    body.top-renewal .th-search__detail-label {
        font-size: 0;
    }
    body.top-renewal .th-search__detail-label::after {
        content: "詳細な検索条件を表示";
        font-size: 14px;
        letter-spacing: .1em;
    }
    /* 上の区切り線は Figma SP 423:556 どおりカード幅(350)より左右15pxインセット(w320)。 */
    body.top-renewal .th-search__detail::before {
        content: "";
        position: absolute;
        top: 0;
        left: 15px;
        right: 15px;
        height: 1px;
        background: #e3e3e3;
    }
    /* chevron はテキスト右に寄せる（カード右端から約50px・テキスト自体は中央＝Figma 423:560/562）。 */
    body.top-renewal .th-search__detail-chev {
        right: 50px;
        width: 24px;
        height: 24px;
    }

    /* 会員登録誘導リード（Figma SP 1113:446）。件数+ボタン(order:2) の直下・キーワードの前。
       order は keywords と同値 3 にし、同値の兄弟は DOM 順に並ぶ Flexbox の規定で解決する
       （Blade は 本要素 → _search_keywords の @include の順で出力）。こうすることで
       keywords(3) / 詳細トグル(4) の既存 order にも、ログイン側の order（パネル3/トグル4/action5）
       にも一切触らずに済む。DOM 順が崩れると SP だけ並びが入れ替わるため回帰テストで出力順を assert する。
       インセット 15px は keywords（margin:0 15px）・詳細トグルの区切り線（::before left/right:15px）と同一。 */
    body.top-renewal .th-search__member-note {
        order: 3;
        gap: 5px;              /* Figma SP: アイコン右端 x59 → テキスト x64 */
        padding: 0 15px;       /* Figma SP: アイコン x35 = カード左端 x20 + 15px */
        margin-bottom: 5px;    /* リード下端 y855 → 区切り線 y860 = 5px */
        font-size: 12px;       /* Figma SP: 12px Bold / lh24 / tracking 1.2px(=.1em) */
    }

    /* よく検索されるキーワード（Figma SP 展開 423:345）。既定は非表示、トグル展開（is-detail-open）でのみ表示。
       件数/ボタン(order:2) とトグル(order:4) の間（order:3）へ差し込む。 */
    body.top-renewal .th-search__keywords {
        order: 3;
        display: none;
        margin: 0 15px;
        padding: 10px 0 18px;
        border-top: 1px solid #e3e3e3;
    }
    body.top-renewal .th-search.is-detail-open .th-search__keywords {
        display: block;
    }
    body.top-renewal .th-search__keywords-label {
        font-size: 12px;
        letter-spacing: .1em;
        margin-bottom: 6px;
    }
    /* chip は Figma どおり内容フローで 2列（左 x35 / 右は左 chip ＋ 4px 後）。Figma は隣接配置（列間4px・行間5px）なので
       flex-wrap で内容幅のまま流す（grid 等幅だと右列が中央固定になり chip 間が空いて Figma と乖離する）。
       chip 本体（#d9d9d9/h30/radius15/12px #616161/padding 0 16px）は PC 既存を流用。 */
    body.top-renewal .th-search__keywords-list {
        display: flex;
        flex-wrap: wrap;
        column-gap: 4px;
        row-gap: 5px;
    }
    /* 常勤＝独立行（Figma SP は横線なし・chip とは別行）。flex-basis:100% で強制改行し ::after の横線を消す。
       色 #616161 は PC 基底から継承。Figma の 12px Bold・tracking .1em を明示。 */
    body.top-renewal .th-search__keywords-type {
        flex-basis: 100%;
        font-size: 12px;
        font-weight: 700;
        letter-spacing: .1em;
        margin-bottom: 6px;
    }
    body.top-renewal .th-search__keywords-type::after {
        content: none;
    }
    /* 1行固定（折返さない）。letter-spacing は付けない（付けると chip が広がり 375px 級デバイスで右列が折返し 2-2-1 が崩れる）。
       内容幅のまま column-gap:4px で隣接させると Figma（左 x35 / 右 x189）の段組と一致する。 */
    body.top-renewal .th-search__chip {
        white-space: nowrap;
    }

    /* 展開状態のトグル: 文言「非表示」・文字色 #616161・chevron 上向き・上の区切り線を消す（線は keywords 上へ移る）。 */
    body.top-renewal .th-search.is-detail-open .th-search__detail {
        color: #616161;
    }
    body.top-renewal .th-search.is-detail-open .th-search__detail-label::after {
        content: "詳細な検索条件を非表示";
    }
    body.top-renewal .th-search.is-detail-open .th-search__detail-chev {
        transform: translateY(-50%) rotate(180deg);
    }
    body.top-renewal .th-search.is-detail-open .th-search__detail::before {
        display: none;
    }

    /* ===== SP ログイン版「詳細な検索条件を表示」トグルは枠付きボックス（Figma 427:1457 / 427:1336）=====
       PC base（.th-search__detail）は元から 1px #a7a2a2 枠の box だが、上の SP 汎用ルールが非ログイン用に
       枠なしテキスト＋上区切り線（::before）へ上書きしている。ログイン（:not(.is-guest)）だけ box を復活させる。
       Figma 427:1457: 320×48・border 1px solid #a7a2a2・角丸6px・透明背景・中央テキスト #616161 16px Bold・
       chevron 右端。box は折りたたみ／展開とも不変（Figma 427:1336 閉／427:1607・427:1816 開でラベル「詳細な
       検索条件を表示」・chevron 下向きのまま）。非ログイン（is-guest）は枠なし＋上線のまま不変。 */
    body.top-renewal .th-search:not(.is-guest) .th-search__detail {
        width: calc(100% - 30px);   /* カード350内で320幅＝左右15pxインセット（Figma 427:1457） */
        height: 48px;
        margin: 20px auto 8px;      /* filters→box 20px ／ box→件数 8px+action padding-top12px=20px（Figma 427:1336） */
        padding: 0;
        border: 1px solid #a7a2a2;
        border-radius: 6px;
        background: transparent;
        font-size: 16px;
        font-weight: 700;
        color: #616161;
    }
    /* 枠ありでは上の区切り線（::before 1px #e3e3e3）は不要。 */
    body.top-renewal .th-search:not(.is-guest) .th-search__detail::before {
        display: none;
    }
    /* ラベルは ::after で描画（span は font-size:0）。box では Figma どおり 16px に戻す（SP 汎用の 14px を打ち消す）。 */
    body.top-renewal .th-search:not(.is-guest) .th-search__detail-label::after {
        font-size: 16px;
    }
    /* chevron は box 右端内側（base の right:16px に戻す。SP 汎用の right:50px を打ち消す）。 */
    body.top-renewal .th-search:not(.is-guest) .th-search__detail-chev {
        right: 16px;
    }
    /* ★ ここには規則を置かない（意図的な空き）。
       展開時のラベル「非表示」差し替えと chevron 180°回転の実装は、この上にある SP 汎用ルール
       （`.th-search.is-detail-open .th-search__detail-label::after` / `… .th-search__detail-chev`）が担う。
       かつてこの位置に SP ログイン限定（`:not(.is-guest).is-detail-open`＝詳細度 0,5,2 / 0,5,1）で
       その汎用ルールを打ち消す規則があり、Figma 427:1607 / 427:1816 の「box は展開でも不変」に
       合わせてラベルを「表示」・chevron を下向きのまま固定していた。しかし閉じるための操作なのに
       「表示」と出ていて意味が反転しており、2026-08-10 のユーザー指定で撤回した（PC と挙動が揃う）。
       ★ content / transform の打ち消しをここに戻さないこと（戻すと SP だけラベルが「表示」で固まる）。
       回帰テスト: TopSearchDetailToggleTest。 */
    /* box の margin-top:20px は閉状態の filters→box=20px（Figma 427:1336）用。展開時は直前がパネル末尾の
       アコーディオン4（訪問体制）で、Figma 427:1607 は accordion4 y631 → box y641＝10px。展開（is-detail-open）
       のみ box の上マージンを 10px に詰める（閉状態の 20px は不変）。 */
    body.top-renewal .th-search:not(.is-guest).is-detail-open .th-search__detail {
        margin-top: 10px;
    }
    /* 件数+検索ボタン（action）の間隔は閉状態（Figma 427:1336: box→件数 20px・件数→ボタン 14px）基準。
       展開状態（Figma 427:1607）は box→件数 15px・件数→ボタン 10px とやや詰まる。展開時のみ action の
       padding-top（box→件数＝box margin-bottom 8 ＋ action padding-top）と gap（件数→ボタン）を詰める（閉状態は不変）。
       ★ 2026-08-28 に action を横並び（Figma 1324:450）へ変更したため、ここの gap は「縦の間隔」ではなく
         件数とボタンの横方向の最小間隔になった（実際の余白は space-between が配分するので見た目は不変）。 */
    body.top-renewal .th-search:not(.is-guest).is-detail-open .th-search__action {
        padding-top: 7px;
        gap: 10px;
    }

    /* ============ SP ログイン版 詳細検索アコーディオン（Figma 427:1451 閉 / 427:1607 折りたたみ / 427:1816 展開）============
       ログイン（.th-search:not(.is-guest)）限定。非ログイン（.is-guest）には一切波及させない（上の is-guest 用ルールは不変）。
       全セレクタに body.top-renewal プレフィックス＋:not(.is-guest)（詳細度 0,4,1 以上）で base/PC ルールに確実に勝つ。 */

    /* Task 2.1: マスタートグル展開時（is-detail-open）のみ詳細パネルを表示。折りたたみ時は base hide（display:none）のまま。
       base の display:none（0,2,1）に対し :not(.is-guest).is-detail-open（0,4,1）で勝つ。縦積みアコーディオン。 */
    body.top-renewal .th-search:not(.is-guest).is-detail-open .th-search__detail-panel {
        display: flex;
        flex-direction: column;
        /* SP は base の padding:0 30px を 15px インセット（カード 350→見出し/option 320幅）に詰める。 */
        padding: 0 15px;
    }

    /* Task 2.2: SP ログインの並び順（Figma 427:1607: filters → [パネル内: keywords → 4アコーディオン] → 詳細トグル → 件数+ボタン）。
       keywords は別タスクの構造で @auth では詳細パネル（.th-search__detail-panel）の子に内包されるため、外側 .th-search の
       order ではなく「パネル内で先頭」に出す。パネルは Task 2.1 で flex-direction:column なので、子 keywords に order:-1
       （既定 order:0 の .th-search__group 群より前）で先頭化する。外側 .th-search は detail-panel(3)→詳細トグル(4)→action(5)。
       非ログイン order（filters1/action2/keywords3/detail4）は :not(.is-guest) スコープ外なので不変。 */
    body.top-renewal .th-search:not(.is-guest) .th-search__detail-panel .th-search__keywords {
        order: -1;
        /* SP base .th-search__keywords{margin:0 15px} と Task 2.1 パネル padding:0 15px の二重インセット（実幅290px）を
           解消し、見出し/option と同じ 320px 幅（パネルの 15px インセットのみ）に揃える。 */
        margin: 0;
        /* base .th-search__detail-panel .th-search__keywords{padding:30px 0 0} の上 30px は SP では広すぎる。
           Figma 427:1607 は filters 下端 y224 → keywords ラベル y239＝15px。SP login のみ 15px に詰める。 */
        padding: 15px 0 0;
    }
    /* keywords ラベル「よく検索されるキーワード」と下罫線（border-bottom）・その下の「常勤」の間隔。
       base パネルルール（.th-search__detail-panel .th-search__keywords-label{padding-bottom:10px; margin-bottom:18px}）は
       SP では広すぎる。Figma 427:1816 はラベル y239（h24・下端 y263）＝罫線 y263＝常勤 y263 とほぼ密着（光学 ≈6px）。
       SP login のみ padding-bottom:6（ラベル→罫線）・margin-bottom:6（罫線→常勤）に詰める。罫線は base から継承。 */
    body.top-renewal .th-search:not(.is-guest) .th-search__detail-panel .th-search__keywords-label {
        padding-bottom: 6px;
        margin-bottom: 6px;
    }
    /* 「常勤」（keywords-type・flex-basis:100% で独立行）→ 1つ目の chip の間隔。base SP の margin-bottom:6px ＋
       keywords-list の row-gap:5px で 11px と広い。Figma 427:1816 は 常勤 y263（h24・下端 y287）→ chip1 y291＝4px。
       SP login は margin-bottom:0 にして row-gap(5px)のみ＝Figma ≈4px に詰める。 */
    body.top-renewal .th-search:not(.is-guest) .th-search__detail-panel .th-search__keywords-type {
        margin-bottom: 0;
    }
    body.top-renewal .th-search:not(.is-guest) .th-search__detail-panel {
        order: 3;
    }
    /* .th-search__detail は既存 order:4（上の SP ルール）をログインも流用＝詳細トグルはパネルの下。 */
    body.top-renewal .th-search:not(.is-guest) .th-search__action {
        order: 5;
    }

    /* Task 2.3: アコーディオン見出し（折りたたみ = Figma 427:1607）。
       PC base のフラット見出し（display:block/全幅 border-bottom/teal 文字）を SP では枠付きボックスに上書き。
       見出しは `<button>`＋`display:flex` のため width:auto だと内容幅（≈191px）に縮み、下のオプションセル（320＝
       パネル内15pxインセット幅）より小さくなる（ユーザー指摘 2026-06-26）。width:100% で box-sizing:border-box の
       全幅＝オプションと同幅に揃える。 */
    body.top-renewal .th-search:not(.is-guest) .th-search__group-heading {
        position: relative;
        display: flex;
        align-items: center;
        width: 100%;
        height: 50px;
        padding: 0 40px 0 26px;
        border: 1px solid #a7a2a2;
        background: transparent;
        color: #12b3af;
        font-size: 16px;
        font-weight: 700;
        line-height: 24px;
        letter-spacing: .1em;
        text-align: left;
    }
    /* ＋アイコン（折りたたみ）: 右端に currentColor で十字。15px 角相当。展開時は下の is-open で − へ。 */
    body.top-renewal .th-search:not(.is-guest) .th-search__group-heading::before,
    body.top-renewal .th-search:not(.is-guest) .th-search__group-heading::after {
        content: "";
        position: absolute;
        top: 50%;
        right: 18px;
        background: currentColor;
    }
    /* 横棒（＋/− 共通）。 */
    body.top-renewal .th-search:not(.is-guest) .th-search__group-heading::before {
        width: 15px;
        height: 2px;
        transform: translateY(-50%);
    }
    /* 縦棒（＋ のみ。展開時に消して − にする）。 */
    body.top-renewal .th-search:not(.is-guest) .th-search__group-heading::after {
        width: 2px;
        height: 15px;
        /* 横棒(::before right:18px w15＝中心 right25.5px)と十字中心を合わせるため右 24.5px（縦棒 w2 の中心=25.5px）。 */
        right: 24.5px;
        transform: translateY(-50%);
    }
    /* 展開（.th-search__group.is-open）: 背景 teal・文字白。±アイコンは currentColor で白追従。 */
    body.top-renewal .th-search:not(.is-guest) .th-search__group.is-open .th-search__group-heading {
        background: #12b3af;
        color: #fff;
    }
    /* 展開時は縦棒を消して − にする。 */
    body.top-renewal .th-search:not(.is-guest) .th-search__group.is-open .th-search__group-heading::after {
        display: none;
    }

    /* アコーディオン項目間 gap 10px（展開グループ下端と次見出しの間にも 10px）。
       keywords が order:-1 で視覚的に先頭・group 群はその後ろに来るため、DOM 先頭の group（first-child）にも
       margin-top:10px を残し、keywords 最後の chip → 1つ目のアコーディオン「訪問診療の経験」を 10px 空ける
       （Figma 427:1816: 最後の chip y391 → 訪問診療の経験 y401＝10px。:first-child{margin-top:0} だと
       keywords 直後の group に余白が付かず密着していた・ユーザー指摘 2026-06-26）。 */
    body.top-renewal .th-search:not(.is-guest) .th-search__group {
        /* PC の padding-top:30px が SP に染み出すのを打ち消す（gap は margin-top で作る）。 */
        padding-top: 0;
        margin-top: 10px;
    }

    /* Task 2.4: option / チェックボックス（展開時 = Figma 427:1816）。
       PC の grid/gap:20px/margin-top:18px を SP では block・1列・gap0 に上書きし、見出し/option を 1px 連結で積む。 */
    body.top-renewal .th-search:not(.is-guest) .th-search__options {
        display: none;
        margin-top: 0;
    }
    body.top-renewal .th-search:not(.is-guest) .th-search__group.is-open .th-search__options {
        display: block;
    }
    body.top-renewal .th-search:not(.is-guest) .th-search__option {
        /* 見出し/隣接 option と border を 1px 共有（margin-top:-1px で二重線回避）。高さ50px・枠 #a7a2a2。 */
        height: 50px;
        margin-top: -1px;
        padding: 0 16px;
        border: 1px solid #a7a2a2;
        gap: 14px;
    }
    /* PC 24px → SP 20px。border/角丸/背景は PC（base .th-search__option-check）継承で、ここでは再宣言しない。
       ★ 再宣言すると :checked が効かなくなる: base の
         `body.top-renewal .th-search__option-check:checked`（特異度 0,3,1）に対し、この SP 規則は
         `:not(.is-guest)` を含んで 0,4,1 と高く、チェック時のティール塗り（background / border-color）を
         後勝ちで潰す。白いチェックマーク（::after）だけが白地 #fffdfd の上に描かれるため、
         「SP で詳細検索条件にチェックを入れても何も変わらない」状態になっていた（2026-08-09 修正）。
       同ファイルの .th-area-acc__check / .th-city-acc__check の SP 調整もサイズのみ上書きで統一されている
       （ただしあちらは max-width:768px ブロック、こちらは 1199px ブロック＝769〜1199px 帯では
         検索オプションだけ 20px・モーダル側は 24px という既存のサイズ差が残る。今回は非変更）。 */
    body.top-renewal .th-search:not(.is-guest) .th-search__option-check {
        width: 20px;
        height: 20px;
    }
    /* 20px 枠用にチェックマーク座標を再計算（border-width / rotate は PC 継承。上記 2 つの SP 調整と同値）。 */
    body.top-renewal .th-search:not(.is-guest) .th-search__option-check:checked::after {
        left: 6px;
        top: 2px;
        width: 5px;
        height: 10px;
    }
    body.top-renewal .th-search:not(.is-guest) .th-search__option-label {
        font-size: 14px;
        font-weight: 500;
        line-height: 24px;
        color: #1e1e1e;
    }

    /* Task 2.5: keywords ラベル色（Figma SP ログイン #12b3af）。
       ログイン時 keywords は @auth 詳細パネル内に内包され base .th-search__detail-panel .th-search__keywords-label{color:#12b3af} が効くが、
       SP keywords-label（color 未指定）に対し :not(.is-guest) で明示し確実化（非ログインの #1e1e1e 継承には波及しない）。 */
    body.top-renewal .th-search:not(.is-guest) .th-search__keywords-label {
        color: #12b3af;
    }
}

/* ここから再び SP（max-width:768px）限定ブロック（#3 CTA 帯以降）。
   上の 1199px ブロックとの分割は検索ボックスの中間幅拡張のため（ソース順は分割前と同一）。 */
@media (max-width: 768px) {

    /* ============ #3 / #6 CTA 帯 ============ */
    /* 帯=高さ244px相当（上40/テキスト→ボタン16/下40・Figma 422:6020）。
       base は display:flex（PC で帯内中央寄せ）だが、これだと子 .container が content-width に縮み
       リード/ボタンが全幅にならない（斜線がテキストに重なる・ボタン幅不足）。SP は block にして container を全幅に。 */
    body.top-renewal .th-cta {
        display: block;
        height: auto;
        padding: 40px 0;
    }
    /* CTA 帯内の左右余白は Figma(SP 375) 実測の 12px（ボタン x12 w350・斜線 x13）に合わせる。
       import.css の .container 既定 padding 20px だとボタン/リード/斜線が帯端 20px に押し込まれ
       Figma より 8px 狭くなるため、CTA の container に限定して 12px へ上書き（他セクション非影響）。 */
    body.top-renewal .th-cta .container {
        padding-left: 12px;
        padding-right: 12px;
    }
    /* リード文は Figma SP どおり3行（改行は blade のレスポンシブ <br>）。テキストブロックを 350px に固定し
       （ボタンと同幅・中央）斜線をその両端＝テキスト外側に置く。max-width が無いと画面幅に応じて斜線が左右へ開く。
       斜線は擬似要素で描き、テキストの縦高さに合わせる（高さ100%）。少しだけ上に出す（top 負値）。 */
    body.top-renewal .th-cta__lead {
        position: relative;
        width: 100%;
        max-width: 350px;
        /* base/PC の min-width:578px（斜線フル表示用）を SP では打ち消す。
           打ち消さないと SP リードが 578px に広がり画面幅 375/390px をはみ出す。
           SP の斜線は下の ::before/::after（cta_slash.svg・リード両端）で別描画するため min-width 不要。 */
        min-width: 0;
        margin-left: auto;
        margin-right: auto;
        font-size: 16px;
        /* リード下端→ボタン間隔は Figma(SP) 実測 43px（斜線下端 112 とボタン上端 134 の間 22px を含む）。 */
        margin-bottom: 43px;
        padding: 0;
        background-image: none;
    }
    /* 左右の斜線（帯両端）。左=\ 、右は scaleX 反転で / 。Figma(427:1444/1446) 実測で 44×66px・
       リード両端。テキスト box 上端基準で +6px 下げて配置し、文字1行目を斜線上端付近に置く
       （斜線下端はテキスト下端より下へ出る）。SVG も 44:66 比率なので 100% 100% で歪まない。 */
    body.top-renewal .th-cta__lead::before,
    body.top-renewal .th-cta__lead::after {
        content: "";
        position: absolute;
        top: 6px;
        width: 44px;
        height: 66px;
        background: url('/data/media/mics/page/index/top/cta_slash.svg') no-repeat center / 100% 100%;
        pointer-events: none;
    }
    body.top-renewal .th-cta__lead::before {
        left: 0;
    }
    body.top-renewal .th-cta__lead::after {
        right: 0;
        transform: scaleX(-1);
    }
    body.top-renewal .th-cta__br--sp {
        display: inline;
    }
    body.top-renewal .th-cta__br--pc {
        display: none;
    }
    body.top-renewal .th-cta__btn-wrap {
        width: 100%;
        text-align: center;
    }
    body.top-renewal .th-cta__btn {
        min-width: 0;
        width: 100%;
        max-width: 350px;
        height: 70px;
        padding: 0 16px;
        font-size: 20px;
    }

    /* ============ #4 / #5 新着求人 ============ */
    body.top-renewal .th-jobs {
        padding: 50px 0 56px;
    }
    body.top-renewal .th-jobs__heading {
        font-size: 20px;
        margin-bottom: 10px;
    }
    body.top-renewal .th-jobs__subheading {
        font-size: 14px;
        margin-bottom: 12px;
    }
    body.top-renewal .th-jobs__group + .th-jobs__group {
        margin-top: 40px;
    }

    /* 都道府県チップ＝横スクロール。左右とも画面端までブリードし、スクロール時に左端へ余白を残さない
       （container の左右 padding 20px を相殺。タブが途中で切れても画面端まで来る）。非活性は SP 値 #7a7a7a。
       タッチ/トラックパッドの横スワイプに加え、マウスのドラッグでもスライドできるよう
       JS（@push('footer-js') の th-pref ドラッグ）を併用。掴める可視ヒントに grab カーソル。 */
    body.top-renewal .th-pref {
        flex-wrap: nowrap;
        overflow-x: auto;
        margin-left: -20px;
        margin-right: -20px;
        padding-left: 20px;
        padding-right: 20px;
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
        cursor: grab;
    }
    body.top-renewal .th-pref::-webkit-scrollbar {
        display: none;
    }
    /* マウスドラッグ中（JS が .is-dragging を付与）。grabbing カーソル＋県チップのクリック誤遷移を抑止。 */
    body.top-renewal .th-pref.is-dragging {
        cursor: grabbing;
    }
    body.top-renewal .th-pref.is-dragging .th-pref__chip {
        pointer-events: none;
    }
    body.top-renewal .th-pref__chip {
        flex-shrink: 0;
        min-width: 94px;          /* 短いラベルは 94px 維持。長いラベルは内容に追従 */
        padding: 0 12px;          /* SP は font-size:14px。左右余白 */
        white-space: nowrap;      /* 1 行固定 */
        height: 42px;
        font-size: 14px;
        background: #7a7a7a;
    }

    /* パネル＝画面端まで全幅（負マージンで container の 20px を打ち消す＝import.css の .container 左右 padding 20px と一致必須）。位置基準＝カルーセル矢印用。
       横 padding は 0（カードを Figma 427:1336 幅 ≈350px に合わせる）。横の余白＝影分は .th-card-list の左右 padding 12px のみが担う。
       横 padding を残すとカードが過度に狭まり情報欄の値（例「8:30〜17:30（休憩60分）」）が折り返してラベルと噛み合って見えるため 0 にする。 */
    body.top-renewal .th-jobs__panel {
        position: relative;
        margin-left: -20px;
        margin-right: -20px;
        /* 縦 padding 6px。カード上下のグレー余白＝panel 縦 padding 6px ＋ list 縦 padding 14px ＝ 20px で
           Figma 575:991（グレー帯がカード上下 各20px）に合わせる（影用の list 縦 padding 14px は維持）。 */
        padding: 6px 0;
        border-radius: 0;
    }

    /* 注釈バンドは SP でも Figma 1188:2378 のとおり画面左右 20px の位置に置く。
       パネルは margin -20px で全幅化しているので、その分をここで戻す（Figma: x=20 w=350 @390px）。
       上の 6px は panel の縦 padding と合わせてバンド上の余白を作る。意匠（高さ/角丸/色/文字）は base と同一。 */
    body.top-renewal .th-jobs__note {
        margin: 6px 20px 10px;
    }

    /* カード＝横スクロールのカルーセル（1枚ずつ scroll-snap）。
       overflow-x:auto は両軸クリップになるため、カードに付けたドロップシャドウがリスト枠で切れる。
       リストへ padding を与えてシャドウ分の余白を内側（クリップ範囲内＝padding box 内）に確保し影を見せる。
       padding 分カード（flex-basis 100%）は narrow になるが、Figma 427:1336 の「浮いたカード」の見えに沿う。 */
    body.top-renewal .th-card-list {
        gap: 16px;
        box-sizing: border-box;
        /* 横 padding 16px＝影の余白＋左右矢印用のガター（カードを画面端まで広げず、画面端固定の矢印と被らせない）。 */
        padding: 14px 16px;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
    }
    body.top-renewal .th-card-list::-webkit-scrollbar {
        display: none;
    }
    body.top-renewal .th-card,
    body.top-renewal .th-card--part {
        flex: 0 0 100%;
        width: 100%;
        min-width: 0;
        scroll-snap-align: center;
        /* Figma 427:1336 のカードは全周ソフト・下方向やや強めのドロップシャドウで浮く。
           リストの padding（上記）内に収まる blur で、グレー/白背景に対し境界を出す。 */
        box-shadow: 0 3px 12px rgba(0, 0, 0, .12);
    }

    /* 情報欄を横方向に詰めて値を1行に収める。カード幅を Figma に合わせても base の横 padding 16px だと
       最長値「8:30〜17:30（休憩60分）」が値スペース 177px ぴったりで2行に折り返し、ラベルと噛み合って見える。
       横 padding 8px ＋ 行 gap 12px で値スペースを広げ、狭い幅（360px・縦スクロールバー時）でも1行を確保する
       （縦 padding 12px・PC は base のまま不変）。 */
    body.top-renewal .th-card__info {
        padding-left: 8px;
        padding-right: 8px;
    }
    body.top-renewal .th-card__row {
        gap: 12px;
    }
    /* 値の字間をごく僅か詰める（.1em→.06em）。矢印用ガター確保でカードが少し狭まっても、狭い幅（360px・
       縦スクロールバー時）で最長値「8:30〜17:30（休憩60分）」が1行に収まるよう保証する（見た目はほぼ不変・PC不変）。 */
    body.top-renewal .th-card__value {
        letter-spacing: .06em;
    }

    /* カルーセル左右矢印（実ボタン・Figma SP weui:arrow-outlined）。パネル端に縦中央配置・クリックで±1枚送り。
       左端カードでは prev を、右端カードでは next を JS が hidden 属性で隠す。 */
    body.top-renewal .th-jobs__arrow {
        display: flex;
        align-items: center;
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        width: 36px;
        height: 44px;
        padding: 0;
        background: transparent;
        border: none;
        cursor: pointer;
        z-index: 3;
    }
    body.top-renewal .th-jobs__arrow[hidden] {
        display: none;
    }
    /* 矢印マーク（旧擬似要素デザイン踏襲: 14×14 の「く」の字、border 2.5px #333） */
    body.top-renewal .th-jobs__arrow::before {
        content: "";
        width: 14px;
        height: 14px;
        border: solid #333;
        border-width: 0 2.5px 2.5px 0;
    }
    /* マークは画面端へ寄せる（padding 2px）。カードの左右マージン（list の横 padding 16px）内のガターに収め、
       カードに被らせない（Figma 575:1087 もカード外側のガターに矢印を置く）。 */
    body.top-renewal .th-jobs__arrow--prev {
        left: 0;
        justify-content: flex-start;
        padding-left: 2px;
    }
    body.top-renewal .th-jobs__arrow--prev::before {
        transform: rotate(135deg);
    }
    body.top-renewal .th-jobs__arrow--next {
        right: 0;
        justify-content: flex-end;
        padding-right: 2px;
    }
    body.top-renewal .th-jobs__arrow--next::before {
        transform: rotate(-45deg);
    }

    /* ============ #7 おすすめ記事＝縦1列 ============ */
    body.top-renewal .th-articles {
        padding: 50px 0 36px;
    }
    body.top-renewal .th-articles__heading {
        font-size: 20px;
        margin-bottom: 24px;
    }
    body.top-renewal .th-articles__list {
        flex-direction: column;
        gap: 20px;
    }
    body.top-renewal .th-article {
        width: 100%;
    }
    body.top-renewal .th-article__thumb {
        height: 200px;
        margin-bottom: 16px;
    }
    body.top-renewal .th-article__title {
        font-size: 16px;
        line-height: 1.5;
    }

    /* ============ #8 ISMS＝ロゴ上・テキスト下の縦積み ============ */
    /* Figma SP は記事→ISMS=60px / ISMS→バナー=32px（上が広く下が狭い）。
       上 padding 24px で ISMS を下げ（記事との間隔 36+24=60）、下 padding 16px に詰める（+ .bnr-sec 上16 で計32）。 */
    body.top-renewal .th-isms {
        padding: 24px 0 16px;
    }
    body.top-renewal .th-isms .container {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
    }
    body.top-renewal .th-isms__logo {
        width: 113px;
    }
    body.top-renewal .th-isms__txt {
        font-size: 12px;
    }

    /* ============ #9 企業バナー帯＝SP は2列 ============ */
    /* ※Figma SP はバナーが参考スクショ（未再設計）のため、可読性優先で2列に。要確認。 */
    /* bnr-sec padding は PC 値（上下45px）。SP は TOP 限定で上=36px（ISMS→バナー間隔を広め）／下=20px（バナー→フッターを狭く）。 */
    body.top-renewal .bnr-sec {
        padding-top: 36px;
        padding-bottom: 20px;
    }
    body.top-renewal .footer-bnr {
        column-gap: 16px;
        row-gap: 28px;
    }
    body.top-renewal .footer-bnr > li {
        flex: 0 0 calc((100% - 16px) / 2);
        max-width: calc((100% - 16px) / 2);
    }

    /* ログイン後（body.is-member）は #7 おすすめ記事・#8 ISMS が無く、求人カードの直後がフッターバナー帯になる。
       ゲスト用に決めた「カード下 56px」「bnr-sec 上 36px（ISMS→バナー間隔）」がそのまま残ると、
       ログイン時はバナー上の余白が広すぎる（56+36=92px）。ログイン時のみ、バナー上余白（jobs 下＋bnr-sec 上）と
       6枚バナーの行間を詰める（特異度 0,3,1 で上の base 0,2,1 に後勝ち。TOP SP ログインのみ・ユーザー確認 2026-06-26）。 */
    body.top-renewal.is-member .th-jobs {
        padding-bottom: 32px;
    }
    body.top-renewal.is-member .bnr-sec {
        padding-top: 20px;
    }
    body.top-renewal.is-member .footer-bnr {
        row-gap: 16px;
    }

    /* ============ 「勤務地を選択」モーダル（SP 忠実再現：Figma node 422:7705）============
       Figma SP（350×1024・関東アコーディオン展開）にピクセル忠実化。
       共通 .th-area-* セレクタのため診療科目モーダル（#th-area-modal-diagnosis）にも同寸法が波及する
       （希望給与モーダルは本タスク時点で未実装＝対象外）。PC（≥769px）には影響しない（本 @media 内に閉じる）。 */
    /* SP は「選択項目だけ内側スクロール」をやめ、オーバーレイ自体を縦スクロールさせる（参照: 民間医局＝Bootstrap 既定モーダル）。
       ※ 2026-08-21 に PC 基底も同方式へ移行済み。ここに残るのは SP 固有の値（上ガター 16px・下 padding なし・
         パネル幅 92vw・sticky フッター）で、方式そのものの切り替えは PC 基底側で完結している。
       align-items:center のままパネルが画面より高くなると上端が画面外へはみ出して到達できなくなるため flex-start に変え、
       パネル側の margin-block:auto で「短いときだけ中央寄せ」を両立させる（flex の auto margin は余白が負なら 0 に解決される）。
       padding は上下ガター（Bootstrap の 17.5px 相当）。overscroll-behavior:contain は端まで振り切ったときの
       document（ページ本体）へのスクロール連鎖とプルトゥリフレッシュを止める（body{overflow:hidden} は iOS で
       確実でないため二重の保険）。※市区町村モーダルは DOM 上の兄弟なのでモーダル同士の連鎖は起こらない
       （連鎖は z 順ではなく DOM 祖先鎖をたどる）。 */
    body.top-renewal .th-area-modal {
        align-items: flex-start;
        /* 下パディングは入れない: スクロールコンテナの padding 領域は padding box（＝スクロールポート）の
           内側で内容が見えるため、下に padding があると画面下に貼り付いた __footer のさらに下に帯が残り、
           そこを選択項目が流れてしまう（Task 6.3）。上ガターのみ残す。 */
        padding: 16px 0 0;
        overflow: hidden auto;   /* = overflow-x:hidden / overflow-y:auto。片軸だけ非 visible にすると
                                    もう片軸の visible は auto へ計算されるため、x を明示的に hidden で潰す
                                    （Task 1.2 でパネルの overflow:hidden を外す＝横はみ出しの保険が消えるため） */
        overscroll-behavior: contain;
    }
    /* 暗幕: position:absolute のままだとスクロールコンテナの中身と一緒に流れ、下へスクロールした先で背景が抜ける。
       fixed にすると包含ブロックがビューポートになり、スクロールしても画面全体を覆い続ける
       （祖先に transform/filter が無いためスクロールコンテナにクリップされない）。クリックで閉じる挙動は不変。 */
    body.top-renewal .th-area-modal__overlay {
        position: fixed;
    }
    body.top-renewal .th-area-modal__panel {
        width: 92vw;
        max-height: none;      /* 88vh → 解除。中身なりに縦へ伸ばし、はみ出しはオーバーレイ側でスクロールさせる */
        overflow: visible;     /* hidden のままだと sticky な __footer が効かない（Phase 6 で __actions から移設） */
        /* 画面に収まるときだけ上下中央寄せ。収まらないときは 0 に解決され上端が切れない。
           margin-block ショートハンドは iOS Safari 14.1 未満で丸ごと落ちて中央寄せが失われるため longhand で書く。 */
        margin-top: auto;
        margin-bottom: auto;
        /* 下 padding は 36px→20px（2026-08-04・ユーザー指示。スクロール時に見える画面量を増やすため縮小。
           Figma 忠実値は 36px だが意図的逸脱）。sticky フッターの bottom:16px 制約は 20px > 16px で継続して満たす。 */
        padding: 30px 18px 20px;
    }
    /* 中身の高さそのままで並べる（内側スクロールなし）。**2026-08-21 に PC 基底も同方式へ移行した**ので
       この宣言は同値の再宣言になったが、SP 単体で読んだときに挙動が自明になるよう残している。
       勤務地・診療科目・市区町村の 3 モーダルにだけ __regions が存在する（他 4 種は空振り）。 */
    body.top-renewal .th-area-modal__regions {
        flex: 0 0 auto;
        overflow-y: visible;
    }
    body.top-renewal .th-area-modal__title {
        margin-bottom: 30px;
        font-size: 20px;
    }
    body.top-renewal .th-area-acc__head {
        padding: 0 15px;
    }
    /* 地方名: PC 16px → SP 14px（Figma Medium 14px・#616161。tracking .1em は PC 継承）。 */
    body.top-renewal .th-area-acc__name {
        font-size: 14px;
    }
    /* 開閉シェブロン: PC 28px → SP 20px。 */
    body.top-renewal .th-area-acc__chev {
        width: 20px;
        height: 20px;
    }
    body.top-renewal .th-area-acc__grid {
        grid-template-columns: repeat(2, 1fr);
        row-gap: 24px;
        padding: 20px 16px 36px;
    }
    /* PC の区切り線は左右30pxインセットの固定980px。SP はパネル幅に合わせて全幅化（左右16pxインセット）。 */
    body.top-renewal .th-area-acc.is-open .th-area-acc__body::before {
        left: 16px;
        width: auto;
        right: 16px;
        max-width: none;
    }
    /* チェックボックス: PC 24px → SP 20px。チェックマーク位置も 20px 枠用に調整。 */
    body.top-renewal .th-area-acc__check {
        width: 20px;
        height: 20px;
    }
    body.top-renewal .th-area-acc__check:checked::after {
        left: 6px;
        top: 2px;
        width: 5px;
        height: 10px;
    }
    /* ラベル: PC 18px → SP 16px（Figma Medium 16px・#1e1e1e）。 */
    body.top-renewal .th-area-acc__label {
        font-size: 16px;
    }
    /* 注記: PC 14px → SP 10px（Figma Medium 10px・勤務地のみ）。 */
    body.top-renewal .th-area-modal__note {
        font-size: 10px;
    }
    body.top-renewal .th-area-modal__city {
        width: 100%;
    }
    /* 件数: PC 18px → SP 16px（Figma Bold 16px・中央）。 */
    body.top-renewal .th-area-modal__count {
        font-size: 16px;
    }
    /* SP: フッター 3 点セット（区切り線＋件数＋ボタン）。区切り線の上 30px は
       「ラッパー margin-top 18px ＋ padding-top 12px」に振り替える（sep 自身の margin-top は 0 にする）。
       **2026-08-21: 画面下への sticky 固定をやめた**（ユーザー指示で PC と挙動を揃える）。
       固定していると画面が低いとき（375×667 で実測）フッターが最後の選択項目に 14px 重なり、
       「九州・沖縄」など末尾の項目が読みづらかった。いまはパネル全体がオーバーレイ側でスクロールし、
       フッターも一緒に流れる（PC と同じ）。
       これに伴い sticky 前提だった bottom / box-shadow（浮かせた 16px 帯の白塗り）/ z-index /
       background も不要になったので併せて撤去した。display:block は margin-top・padding-top を
       効かせるために必要（PC 基底の display:contents ではボックスが生成されず余白が効かない）。 */
    body.top-renewal .th-area-modal__footer,
    body.top-renewal .th-city-modal__footer {
        display: block;
        flex-shrink: 0;
        margin-top: 18px;
        padding-top: 12px;
    }
    body.top-renewal .th-area-modal__footer .th-area-modal__sep,
    body.top-renewal .th-city-modal__footer .th-city-modal__sep {
        margin-top: 0;
    }
    /* position:sticky 等は Phase 6 で __footer（区切り線＋件数＋ボタンの3点セット）へ移設したため、
       ここは PC 基底（margin-top:20px）に戻し縦積みのみ SP 用に上書きする。 */
    body.top-renewal .th-area-modal__actions {
        flex-direction: column;
        align-items: center;
        gap: 16px;
    }
    body.top-renewal .th-area-modal__cancel,
    body.top-renewal .th-area-modal__submit {
        width: 100%;
        max-width: 266px;
    }

    /* ============ 「診療科目を選択」モーダル SP 固有差分（Figma 422:7953）============
       共通 .th-area-* SP（上記・勤務地由来 422:7705）に、診療科目だけの差分を #th-area-modal-diagnosis
       スコープで上乗せする。勤務地/市町村モーダル SP には波及させない（既存の忠実化値を保護）。 */
    /* カテゴリ間 gap: 共通 12px → 診療科目 SP 14px（Figma）。 */
    body.top-renewal #th-area-modal-diagnosis .th-area-acc + .th-area-acc {
        margin-top: 14px;
    }
    /* 2 行折返しラベル（リハビリテーション科・人間ドック・検診）でチェックボックスを 1 行目に揃える。
       共通は align-items:center（2 行時に縦中央へずれる）。__pref のみ上端寄せにし、20px 枠を 24px 行高の
       1 行目中央へ 2px 下げて単一行ラベルとも整合させる。__all（すべて）は単一行のため対象外。 */
    body.top-renewal #th-area-modal-diagnosis .th-area-acc__pref {
        align-items: flex-start;
    }
    body.top-renewal #th-area-modal-diagnosis .th-area-acc__pref .th-area-acc__check {
        margin-top: 2px;
    }
    /* 内科カテゴリの SP 2 列並び順を Figma（422:7953）へ。DOM は PC（4 列）順のまま、SP のみ order で
       消化器内科の後を 循環器→腎臓→血液→内分泌→心療内科 に並べ替える。心療内科(13376)にも order を
       振らないと order:0 のまま前へ繰り上がる（CSS order は昇順・同値は DOM 順・既定 0）。value は内科固有
       のため他カテゴリと衝突しない。PC（≥769px）には order を付けない＝4 列配置を維持。 */
    body.top-renewal #th-area-modal-diagnosis .th-area-acc__pref:has(input[value="13375"]) { order: 1; } /* 循環器内科 */
    body.top-renewal #th-area-modal-diagnosis .th-area-acc__pref:has(input[value="13971"]) { order: 2; } /* 腎臓内科 */
    body.top-renewal #th-area-modal-diagnosis .th-area-acc__pref:has(input[value="13373"]) { order: 3; } /* 血液内科 */
    body.top-renewal #th-area-modal-diagnosis .th-area-acc__pref:has(input[value="13374"]) { order: 4; } /* 内分泌内科 */
    body.top-renewal #th-area-modal-diagnosis .th-area-acc__pref:has(input[value="13376"]) { order: 5; } /* 心療内科 */

    /* ============ 「希望給与を選択」モーダル中身（SP 忠実再現：Figma node 422:7609）============
       Figma SP（350×383・下限/上限プルダウンを横1行）にピクセル忠実化。
       共通 .th-area-modal__title/__count/__actions/__cancel,__submit は勤務地由来の共有 SP（上記・422:7705）と
       同値（タイトル20/件数16/gap16/ボタン266）ゆえ共有を継承し、希望給与固有の差分（パネル下padding34・
       プルダウン行の横1行・select130px/font14・「円」14・「〜」16・キャンセル角丸28）のみここで上乗せする。
       PC（≥769px）には影響しない（本 @media 内に閉じる）。 */
    /* パネル: 共有 SP は padding 30/18/20（勤務地・下20）。希望給与は Figma 422:7609 実測では下34 だったが、
       2026-08-04 ユーザー指示で他モーダルと揃えて下20 に統一（Figma 値からの意図的逸脱）＝
       id 限定で上書きし共有を汚さない（勤務地と食い違わない・波及なし）。width は 92vw 維持。 */
    body.top-renewal #th-area-modal-salary .th-area-modal__panel {
        width: 92vw;
        padding: 30px 18px 20px;
    }
    /* プルダウン行: PC は select360px 横並び。SP は Figma 422:7620 の横1行
       [下限130][円] 〜 [上限130][円] を中央寄り・gap4px で 1 行に収める。 */
    body.top-renewal .th-area-modal__salary {
        flex-direction: row;
        align-items: center;
        gap: 4px;
        flex-wrap: nowrap;
    }
    /* select と「円」の単位: PC gap8 → SP 4px（Figma 実測 ~3px）。横並び左寄せ。
       align-items:flex-end（「円」の下端揃え＝Figma 422:7629/7630）は PC 基底ルールから継承（SP 再宣言不要）。
       min-width:0 ＝ 行の直接 flex 子であるこの field の既定 min-width:auto を解除し、内側 select の
       `flex:0 1 130px; min-width:0` を効かせる。これが無いと field が min-content で突っ張り select が
       縮まず、92vw パネル（375px=345px・Figma 350px より 5px 狭い）で行がパディングを侵食する。
       追加により 375px=130px 近傍・狭端末（360/320px）で select 自動縮小＝はみ出しゼロ（要確認事項1）。 */
    body.top-renewal .th-area-modal__salary-field {
        justify-content: flex-start;
        gap: 4px;
        min-width: 0;
    }
    /* select: PC 360px → SP 130px（Figma 422:7622）。font16→14・chevron28→20・右paddingを20px chevronに合わせ縮小。
       min-width:0＋flex:0 1 130px で 375px は 130px・狭端末（≤360px）は 130px から自動縮小（要確認事項1）。 */
    body.top-renewal .th-area-modal__salary-select {
        width: 130px;
        flex: 0 1 130px;
        min-width: 0;
        padding: 0 34px 0 16px;
        background-size: 20px 20px;
        font-size: 14px;
    }
    /* 「円」: PC 18px → SP 14px（Figma 422:7629/7630・Bold #1e1e1e は PC 継承）。 */
    body.top-renewal .th-area-modal__salary-unit {
        font-size: 14px;
    }
    /* 「〜」: PC 24px → SP 16px（Figma 422:7631・Bold #616161 は PC 継承）。横1行ゆえ text-align は不要。 */
    body.top-renewal .th-area-modal__salary-tilde {
        font-size: 16px;
    }
    /* キャンセル角丸: PC/共有は 30px。希望給与 SP は Figma 422:7612 の 28px ＝ id 限定で上書き
       （勤務地/診療科目の共有 __cancel は 30px のまま・波及なし。__submit は 30px 維持＝Figma 422:7615）。 */
    body.top-renewal #th-area-modal-salary .th-area-modal__cancel {
        border-radius: 28px;
    }

    /* ============ 「週勤務日数を選択」モーダル中身（SP・Figma 696-395・.th-area-modal__workdays）============
       PC の 4 列を SP は 2 列に上書き。グレーボックス（#f2f2f2・角丸20）・タイトル20/チェック20/ラベル16/件数16/
       ボタン縦積み266 は PC ルール（背景/角丸）＋ SP 共通ブロックから当たるため、ここでは列数と内部余白のみ上書き。
       row-gap/column-gap/padding は保存スクショ workdays_sp_696-395.png（314×240・4行）とのピクセル突合で確定。 */
    body.top-renewal .th-area-modal__workdays {
        grid-template-columns: repeat(2, 1fr);
        row-gap: 32px;
        column-gap: 12px;
        padding: 22px 18px;
    }

    /* ============ 「市区町村を選択」モーダル（SP・Figma 422:7855 忠実再現）============
       PC（422:7205）と同じ色/フォント体系で寸法のみ SP 用に縮小する。
       パネル左右18px / タイトル20px / 都道府県名14px / chevron20px / グリッド2列(行間24px・列間46px) /
       チェック20px / 件数16px / フッター縦積み(各 max266px・ボタン間16px)。
       勤務地・診療科目モーダルの SP（.th-area-*）は別タスクのため本ブロックでは扱わない。 */
    /* SP は勤務地モーダル（.th-area-modal）と同じくオーバーレイ自体を縦スクロールさせる。
       overscroll-behavior:contain は端まで振り切ったときの document（ページ本体）への
       スクロール連鎖とプルトゥリフレッシュを止める（body{overflow:hidden} は iOS で確実でないため二重の保険）。 */
    body.top-renewal .th-city-modal {
        align-items: flex-start;
        /* 下パディングを入れない理由は .th-area-modal と同じ（Task 6.3）。 */
        padding: 16px 0 0;
        overflow: hidden auto;
        overscroll-behavior: contain;
    }
    body.top-renewal .th-city-modal__overlay {
        position: fixed;
    }
    body.top-renewal .th-city-modal__panel {
        width: 92vw;
        max-height: none;
        overflow: visible;
        /* margin-block ショートハンドは iOS Safari 14.1 未満で落ちるため longhand（.th-area-modal__panel と同方針）。 */
        margin-top: auto;
        margin-bottom: auto;
        /* 下 padding は 36px→20px（2026-08-04・ユーザー指示。.th-area-modal__panel と同じ理由）。 */
        padding: 30px 18px 20px;
    }
    body.top-renewal .th-city-modal__regions {
        flex: 0 0 auto;
        overflow-y: visible;
    }
    body.top-renewal .th-city-modal__title {
        margin-bottom: 30px;
        font-size: 20px;
    }
    /* バー左右インセット: Figma 左 ~15px / 右 ~14px。 */
    body.top-renewal .th-city-acc__head {
        padding: 0 14px 0 16px;
    }
    /* 都道府県名: PC 16px → SP 14px（色/太さ/tracking は PC 継承）。 */
    body.top-renewal .th-city-acc__name {
        font-size: 14px;
    }
    /* 開閉シェブロン: PC 28px → SP 20px（開の rotate(180deg) は PC ルール流用）。 */
    body.top-renewal .th-city-acc__chev {
        width: 20px;
        height: 20px;
    }
    /* 市区町村グリッド: 2列維持・行間24px。列間は clamp（Figma の 46px を上限に、375px 実機で 5 文字市名
       〔あきる野市 等〕が折返さない ≒22.5px まで縮む。固定 46px だと 375px で通常市名も折返すため相対値化）。
       padding 上20px/左右16px/下24px。 */
    body.top-renewal .th-city-acc__grid {
        grid-template-columns: repeat(2, 1fr);
        row-gap: 24px;
        column-gap: clamp(16px, 6vw, 46px);
        padding: 20px 16px 24px;
    }
    /* 開コンテナ内の区切り線: コンテナ内左右16pxインセット（Figma 幅280px）。 */
    body.top-renewal .th-city-acc.is-open .th-city-acc__body::before {
        left: 16px;
        width: auto;
        right: 16px;
        max-width: none;
    }
    /* チェックボックス: PC 24px → SP 20px（border/角丸/背景は PC 継承）。 */
    body.top-renewal .th-city-acc__check {
        width: 20px;
        height: 20px;
    }
    /* 20px 枠用にチェックマーク座標を再計算（border-width/rotate は PC 継承）。 */
    body.top-renewal .th-city-acc__check:checked::after {
        left: 6px;
        top: 2px;
        width: 5px;
        height: 10px;
    }
    /* 市区町村ラベル: SP 16px（Figma 一致・据置）。 */
    body.top-renewal .th-city-acc__label {
        font-size: 16px;
    }
    /* 件数: PC 18px → SP 16px（中央/太さ/tracking は PC 継承）。 */
    body.top-renewal .th-city-modal__count {
        font-size: 16px;
    }
    /* フッターボタン: 縦積み・ボタン間16px・各幅 max266px。position:sticky 等は Phase 6 で
       __footer（区切り線＋件数＋ボタンの3点セット）へ移設したため、ここは PC 基底（margin-top:20px）に戻す。 */
    body.top-renewal .th-city-modal__actions {
        flex-direction: column;
        align-items: center;
        gap: 16px;
    }
    body.top-renewal .th-city-modal__cancel,
    body.top-renewal .th-city-modal__submit {
        width: 100%;
        max-width: 266px;
    }
}

/* =========================================================================
   中間幅（769〜1199px）: TOP ヒーロー帯の可変幅化（検索ボックス SP 版切替の土台）
   --------------------------------------------------------------------------
   import.css は PC(≥769px)で .l-container に min-width:1180px を敷くため、そのままでは
   ウィンドウを狭めてもヒーローが縮まず SP 版検索ボックスに切り替わらない。TOP ページ限定で解除する。
   overflow:visible は、まだ中間幅対応していない他セクション（.container 1180px 固定のまま）を
   l-container の overflow:hidden（import.css）でクリップさせず、従来どおり横スクロールで
   到達可能に保つため（ヒーロー以外のセクションの中間幅対応は後続タスク）。
   ヒーロー内の .container のみ可変幅化し、SP と同じ左右 20px ガターを与える。 */
@media only screen and (min-width: 769px) and (max-width: 1199px) {

    body.top-renewal .l-container {
        min-width: 0;
        overflow: visible;
    }

    body.top-renewal .th-hero .container {
        width: auto;
        padding-left: 20px;
        padding-right: 20px;
    }

    /* @guest ヒーロー写真の下端追従: PC 構図（top:-22% 上端基準）は幅を縮めると
       写真高さ（≒58.3vw）だけが縮んで下端が上がり、検索ボックスとの間に白帯が出る。
       写真下端が「hero 上端から約 420px（検索ボックス上端 395px + 重なり 25px）」を
       割らないよう、狭い幅では top を calc で下げて追従させる。max() により広い幅では
       PC 値 -22% が勝って構図不変＝約 1040px 以下からなめらかに効き始める
       （footer の SP 切替 859px より先・境界ジャンプなし。ユーザー要望 2026-07-13）。 */
    body.top-renewal .th-hero__bg img {
        top: max(-22%, calc(429px - 58.3vw));
    }

    /* ============ #4 / #5 新着求人: SP 版と同じ矢印付き無限カルーセル化 ============
       カード・チップは PC サイズのまま（縮小しない）。1 画面 1 枚の SP と違い複数枚が
       見えるため、無限ループはクローンを片側 N 枚敷く JS 側の一般化とセット
       （index.blade.php の thJobsMq* カルーセル。全カードが収まる幅では組まれず矢印も隠れる）。 */
    body.top-renewal .th-jobs .container {
        width: auto;
        padding-left: 20px;
        padding-right: 20px;
    }

    /* 都道府県チップ＝SP と同じ横スクロール（チップ自体は PC サイズのまま。
       マウスドラッグは既存 th-pref ドラッグ JS が overflow 発生で自動的に効く） */
    body.top-renewal .th-pref {
        flex-wrap: nowrap;
        overflow-x: auto;
        margin-left: -20px;
        margin-right: -20px;
        padding-left: 20px;
        padding-right: 20px;
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
        cursor: grab;
    }
    body.top-renewal .th-pref::-webkit-scrollbar {
        display: none;
    }
    body.top-renewal .th-pref.is-dragging {
        cursor: grabbing;
    }
    body.top-renewal .th-pref.is-dragging .th-pref__chip {
        pointer-events: none;
    }
    body.top-renewal .th-pref__chip {
        flex-shrink: 0;
    }

    /* パネル＝SP と同じ画面端まで全幅（container の 20px を相殺）。position は矢印の配置基準。 */
    body.top-renewal .th-jobs__panel {
        position: relative;
        margin-left: -20px;
        margin-right: -20px;
        padding: 6px 0;
        border-radius: 0;
    }

    /* カード列＝横スクロール（scroll-snap）。横 padding 16px は SP と同じ矢印用ガター。 */
    body.top-renewal .th-card-list {
        box-sizing: border-box;
        padding: 14px 16px;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
    }
    body.top-renewal .th-card-list::-webkit-scrollbar {
        display: none;
    }

    /* カードは PC サイズ（width:356px・高さは内容依存＝base のまま）で snap 対象にする。
       flex-shrink:0 が無いと overflow リスト内で 356px を割って縮む。 */
    body.top-renewal .th-card {
        flex-shrink: 0;
        scroll-snap-align: center;
    }

    /* カルーセル左右矢印（SP ブロックと同実装・パネル左右端の縦中央・クリックで±1枚送り） */
    body.top-renewal .th-jobs__arrow {
        display: flex;
        align-items: center;
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        width: 36px;
        height: 44px;
        padding: 0;
        background: transparent;
        border: none;
        cursor: pointer;
        z-index: 3;
    }
    body.top-renewal .th-jobs__arrow[hidden] {
        display: none;
    }
    body.top-renewal .th-jobs__arrow::before {
        content: "";
        width: 14px;
        height: 14px;
        border: solid #333;
        border-width: 0 2.5px 2.5px 0;
    }
    body.top-renewal .th-jobs__arrow--prev {
        left: 0;
        justify-content: flex-start;
        padding-left: 2px;
    }
    body.top-renewal .th-jobs__arrow--prev::before {
        transform: rotate(135deg);
    }
    body.top-renewal .th-jobs__arrow--next {
        right: 0;
        justify-content: flex-end;
        padding-right: 2px;
    }
    body.top-renewal .th-jobs__arrow--next::before {
        transform: rotate(-45deg);
    }

    /* ============ #7 おすすめ記事: 3列 → 2列（3件目は2段目・左端揃え） ============
       PC は記事カード 360px×3＋gap40＝1160px 固定で、これが収まらない本帯域では
       feature ページ「３つの強み」と同じ要領で 2 列に折り返す。カードは PC サイズ
       360px を維持し（文字・画像は縮小しない）、2 枚並ばない狭さでのみ僅かに縮む。
       リスト自体を 2 列分の幅（360×2＋gap40＝760px）に絞って中央配置し、行内は
       左詰めにする＝2段目の 3 件目が 1 段目の左端に揃う（justify-content: center
       だと段ごとに中央寄せされ 3 件目だけ中央に浮く）。
       SP（≤768px）は従来どおり縦 1 列（末尾 SP ブロック）。 */
    body.top-renewal .th-articles .container {
        width: auto;
        padding-left: 20px;
        padding-right: 20px;
    }

    body.top-renewal .th-articles__list {
        flex-wrap: wrap;
        justify-content: flex-start;
        max-width: 760px;
        margin: 0 auto;
    }

    body.top-renewal .th-article {
        width: min(360px, calc((100% - 40px) / 2));
    }

    /* ============ #8 ISMS: SP 版と同じロゴ上・テキスト下の縦積みへ切替 ============
       PC はロゴ 209px＋テキスト横並び（1160px 前提）。本帯域では feature ページの ISMS と
       同じ要領で SP 版レイアウト（ロゴ 113px・テキスト 12px・縦積み）を鏡写しで適用する。
       セクション上下 padding は前後セクションが PC のままのため PC 値（0 0 90px）を維持。 */
    body.top-renewal .th-isms .container {
        width: auto;
        padding-left: 20px;
        padding-right: 20px;
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
    }

    body.top-renewal .th-isms__logo {
        width: 113px;
    }

    body.top-renewal .th-isms__txt {
        font-size: 12px;
    }

    /* ============ #9 企業バナー帯: SP 版と同じ 2 列・SP 版と同じ画像サイズへ切替 ============
       PC は li を全幅の 3 等分（1160px 前提・画像は列幅追従＝約360px）。本帯域では SP 版の
       2 列（gap 16/28）＋ SP デザイン実寸（Figma 390px 幅: content350 → li=(350-16)/2=167px）に
       固定して中央寄せにする（可変 1/2 幅だと SP より大きくなりすぎる・ユーザー指摘 2026-07-13）。
       bnr-sec の上下 padding は前後セクションが PC のままのため PC 値を維持。 */
    body.top-renewal .bnr-sec .container {
        width: auto;
        padding-left: 20px;
        padding-right: 20px;
    }

    /* リスト自体を SP デザインのブロック幅（167×2+16=350px）に絞って中央寄せ。
       li 幅だけ 167px にするとフレックス折返しが「1 行に収まるだけ詰める」（5+1 等）になり
       2 列にならないため、ul の幅で 2 列を確定させる。 */
    body.top-renewal .footer-bnr {
        justify-content: center;
        column-gap: 16px;
        row-gap: 28px;
        max-width: 350px;
        margin-left: auto;
        margin-right: auto;
    }

    body.top-renewal .footer-bnr > li {
        flex: 0 0 calc((100% - 16px) / 2);
        max-width: calc((100% - 16px) / 2);
    }

    /* ============ footer: 可変幅化（feature ページと同じ要領） ============
       footer .container は import.css の 1180px 固定のままだと本帯域で右へはみ出す。
       可変化すれば footer-inner（flex + max-width:1160）がそのまま追従する。
       メニュー＋コピーライトが 1 行に収まらない幅（≤859px）の SP 版切替は下の専用ブロック。 */
    body.top-renewal footer .container {
        width: auto;
    }
}

/* =========================================================================
   中間幅の footer（769〜859px）: SP 版へ切替 — feature ページ（feature.css）と同じ要領
   --------------------------------------------------------------------------
   メニュー（運営会社/利用規約/プライバシーポリシー ≈460px）＋コピーライト（≈341px）＋
   container padding 20px＋スクロールバー ≈ 836px を下回ると折返しが出るため、バッファ込みで
   859px 以下から footer.css の SP レイアウト（縦積み・中央寄せ・14px）を鏡写しで適用する。 */
@media only screen and (min-width: 769px) and (max-width: 859px) {

    body.top-renewal footer .footer-inner {
        flex-direction: column;
        justify-content: center;
        min-height: 114px;
        gap: 8px;
    }

    body.top-renewal footer .footer-menu {
        justify-content: center;
        margin-bottom: 13px;
    }

    body.top-renewal footer .footer-menu > li {
        margin: 0 10px;
    }

    body.top-renewal footer .footer-menu > li a {
        font-size: 14px;
    }

    body.top-renewal footer .copy-right {
        font-size: 14px;
        text-align: center;
    }
}

/* ============ 極小幅 SP（iPhone SE / iPhone 8 = 375×667 など）のファーストビュー ============
   幅 384px 以下ではキャッチが 3 行（実測 h134）に折り返し、2 行（h90）より 44px 高くなる。
   SP ブロックの margin-bottom:233px は「2 行（h90）で検索ボックス上端を Figma 修正版 1182:1516 の
   y407 に置く」ための値なので、3 行になるとカードが y451 へ 44px 下がり、667px の画面では
   「この条件で検索する」の下端が y692＝25px はみ出す（MICS 様の iPhone SE で確認された事象）。
   算出式（margin = 407 − header64 − padding-top20 − キャッチ実高）にキャッチ 3 行の実高 134px を
   入れ直した 189px を当て、幅 384px 以下でも上端 y407・「この条件で検索する」下端 y648 に収める。
   ★ 折返しの境界は実測で **384px = 3 行 / 385px = 2 行**。キャッチの文言・font-size(28px)・
     line-height(1.6) を変えると境界も 189px も再計算が必要
     （TopSpCatchCopyTest / TopSpHeroSearchVisibilityTest が相互に注意書きを持つ）。
   ★ max-width:768px の SP ブロックより後に置いて後勝ちさせている（同詳細度のため順序で決まる）。 */
@media (max-width: 384px) {
    /* ★ 2026-08-27: 上の SP ブロックと同じく検索ボックスを 76px 上げる（189 − 76 = 113px）。
          この帯域はキャッチが 3 行（h134）なので持ち分は 20 + 134 + 113 = 267px となり、
          385px 以上（20 + 90 + 157 = 267px）とちょうど揃う＝どの幅でも上端 y331。 */
    body.top-renewal .th-hero__catch {
        margin-bottom: 113px;
    }
}

/* ============ 極小幅 SP（359px 以下 = iPhone SE 1st / 320px 幅など）の件数＋検索ボタン ============
   件数とボタンの横並び（Figma SP 1324:450・上の max-width:1199px ブロック）は
   件数 116px ＋ gap 12px ＋ ボタン最小 150px = 278px を必要とし、カード内側幅
   （viewport − カード左右マージン 20px×2 − action の padding 15px×2）がこれを割る
   349px 未満ではボタンがカードの右端からはみ出す（実測: viewport 335px でボタン右端が 13px 外）。
   この帯域だけ 2026-08-28 以前と同じ縦積み中央寄せへ戻す（件数の 2 行化は維持）。
   ★ SP 版の本体（max-width:1199px ブロック）より後に置いて後勝ちさせている（同詳細度のため順序で決まる）。 */
@media (max-width: 359px) {
    body.top-renewal .th-search__action {
        flex-direction: column;
        justify-content: center;
        gap: 14px;
    }

    body.top-renewal .th-search__count {
        text-align: center;
    }

    body.top-renewal .th-search__submit {
        width: 260px;
    }
}