/* ============================================================
   site-custom.css — このサイト固有のスタイル（共有 style.css の後に読む）
   DRIVER_JOBS_2026_10_12
   共有の変更は /var/www/shared/jobs-base/assets/css/style.css に書けば全サイトに届く。
   ここには「このサイトだけ違う」ものだけを置く（複製元 taxi-jobs の site-custom.css を流用）。
   ============================================================ */

/* テーマ色: アンバー（common/init.php の THEME_COLOR と同じ値） */
:root {
    --accent: #B45309;
    --accent-dark: #92400E;
    --accent-light: #FFFBEB;
}

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        --accent-light: #3B2305;
    }
}

:root[data-theme="dark"] {
    --accent-light: #3B2305;
}

body {
    background: var(--bg-primary);
}

/* ============================================================
   無料登録 /entry/（LEADS_L1_2026_10_13）
   ============================================================ */
.entry-alert {
    display: flex; gap: 10px; align-items: flex-start;
    padding: 14px 16px; margin-bottom: 20px;
    border-radius: var(--radius-sm);
    background: #fff1f2; color: #be123c;
}
.entry-section .form-error { font-size: 12px; color: #e11d48; margin-top: 5px; }
.entry-section .has-error .form-input,
.entry-section .has-error .form-select { border-color: #e11d48; }
.entry-contact-hint { margin: 0 0 10px; }
.entry-fieldset { border: 0; padding: 0; margin: 0 0 20px; min-width: 0; }
.entry-fieldset legend { padding: 0; }
.entry-choices { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 6px; }
.entry-choice {
    padding: 10px 14px; align-items: center;
    border: 1px solid var(--border); border-radius: var(--radius-sm);
    background: var(--bg-primary);
}
.entry-choice:has(input:checked) { border-color: var(--accent); background: var(--accent-light); color: var(--text-primary); }
.entry-section .has-error .entry-choice { border-color: #e11d48; }
.entry-consent {
    margin: 8px 0 20px; padding: 18px 20px;
    border: 1px solid var(--border); border-radius: var(--radius-lg);
    background: var(--bg-surface);
}
.entry-consent.has-error { border-color: #e11d48; }
.entry-consent-title { display: flex; align-items: center; gap: 8px; font-size: 15px; font-weight: 700; margin-bottom: 12px; }
.entry-consent-title .lucide-icon { width: 18px; height: 18px; color: var(--accent); }
.entry-consent-list { display: grid; grid-template-columns: 8em 1fr; gap: 6px 12px; font-size: 13px; line-height: 1.6; color: var(--text-secondary); }
.entry-consent-list dt { font-weight: 700; color: var(--text-primary); }
.entry-consent-list dd { margin: 0; }
.entry-consent-policy { font-size: 12px; color: var(--text-muted); margin: 12px 0; }
.entry-consent-check { font-weight: 700; color: var(--text-primary); }
.entry-steps { margin: 0; padding-left: 1.4em; font-size: 13px; line-height: 1.7; color: var(--text-secondary); }
.entry-steps li + li { margin-top: 6px; }
.entry-thanks { max-width: 720px; margin: 0 auto; }
.entry-thanks-actions { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; margin-top: 24px; }
@media (max-width: 768px) {
    .entry-consent-list { grid-template-columns: 1fr; gap: 2px; }
    .entry-consent-list dd { margin-bottom: 8px; }
    .entry-section .contact-grid { grid-template-columns: 1fr; }
}
:root[data-theme="dark"] .entry-alert { background: rgba(225,29,72,0.12); color: #fb7185; }
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .entry-alert { background: rgba(225,29,72,0.12); color: #fb7185; }
}

/* 管理画面 /admin/leads/ */
.leads-section { margin-bottom: 24px; }
.leads-detail { display: grid; grid-template-columns: 9em 1fr; gap: 6px 12px; font-size: 13px; }
.leads-detail dt { font-weight: 700; color: var(--text-secondary); }
.leads-detail dd { margin: 0; word-break: break-all; white-space: pre-wrap; }
.leads-criteria { font-size: 12px; color: var(--text-muted); margin: 6px 0 12px; }
.leads-note { font-size: 12px; color: var(--text-muted); margin-top: 8px; }
.leads-actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 12px; }
.leads-warning { padding: 12px 16px; border-radius: var(--radius-sm); background: #fffbeb; color: #92400e; margin-bottom: 16px; font-size: 13px; }
.leads-muted { color: var(--text-muted); }

/* ============================================================
   MOBILE_FIT_2026_10_13 スマホ幅（390px）で見つかった崩れ3点の是正
   1) ヘッダー: ロゴSVG（viewBox 2100x210）が高さ24px固定→幅240pxになり、
      「ログイン」が縦書きに潰れ、メニューが画面外へ押し出されていた。
      ロゴを残り幅に合わせて縮め、ボタンは折り返さない。
   2) ヒーロー: 同じロゴSVGが高さ46px固定→幅460pxになり、1fr列が
      min-content で広がって本文ごと右にはみ出していた。
   3) 記事の表: 列が多い表に横スクロールの包みがなく右端が切れていた。
   共有 style.css 側の直しは boei 等の本番に影響するため別途承認後。
   ============================================================ */
@media (max-width: 768px) {
    .header-inner { gap: 12px; }
    .header-logo { min-width: 0; flex: 1 1 auto; }
    .header-logo-inner { min-width: 0; width: 100%; }
    .header-logo-tagline { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .header-logo-name { min-width: 0; }
    .header-logo-name .logo-icon { flex-shrink: 0; }
    .header-logo-svg { flex: 1 1 0; min-width: 0; width: auto; max-width: 240px; height: auto; }
    .header-actions { gap: 8px; flex-shrink: 0; }
    .header-actions .btn { white-space: nowrap; }

    .hero-content { min-width: 0; }
    .hero-logo { display: flex; justify-content: center; width: 100%; }
    .hero-logo-svg { width: 100%; max-width: 460px; height: auto; }

    .article-body table { display: block; overflow-x: auto; max-width: 100%; -webkit-overflow-scrolling: touch; }
}
@media (max-width: 480px) {
    .header-logo-tagline { font-size: 10px; }
}

/* MOBILE_FIT_2026_10_13 (4) 記事ページ: パンくずの上に固定ヘッダー分の余白がなく、
   PC幅でもパンくず1行目がヘッダーの裏に隠れていた（複製元の記事テンプレート由来） */
.container > nav.article-breadcrumb { padding-top: calc(var(--header-h) + 16px); } /* article.css が後に読まれるため詳細度を上げる */
/* (5) ヒーロー説明文3行目がPC幅で右の車両画像に触れていた。16pxで列内に収める */
.hero-desc { font-size: 16px; }

/* ============================================================
   HOME_V2_2026_10_13 トップページ作り直し（ブルーカラーの顔）
   濃紺の地 × アンバーの差し色 × 極太ゴシック。トップページ（index.php）の hv2-* だけに効く。
   参考: GOジョブ（一言見出し＋人物＋重なる検索カード）／リクロジ（給与が主役のカード）
         ケイサーチ（県チップ・鮮度表示）／ピーチャン（ヒーロー内の2択）
   既存の区画は消さない。共有 style.css は触らない。
   ============================================================ */
:root {
    --hv2-navy: #0F1B33;
    --hv2-navy-2: #16264A;
    --hv2-navy-line: #2A3B5F;
    --hv2-amber: #F59E0B;
    --hv2-amber-hi: #FBBF24;
    --hv2-amber-ink: #92400E;   /* 白地の上のアンバー文字（7:1 以上） */
    --hv2-amber-bg: #FEF3C7;
    --hv2-ink: #F8FAFC;
    --hv2-ink-dim: #CBD5E1;
    --hv2-font: 'M PLUS 2', 'Hiragino Sans', 'Noto Sans JP', sans-serif;
}
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        --hv2-amber-ink: #FBBF24;
        --hv2-amber-bg: rgba(245,158,11,0.16);
    }
}
:root[data-theme="dark"] {
    --hv2-amber-ink: #FBBF24;
    --hv2-amber-bg: rgba(245,158,11,0.16);
}

/* 画面読み上げ専用の見出し */
.hv2-sr {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

/* ---------- ヒーロー ---------- */
.hv2-hero {
    background: var(--hv2-navy);
    color: var(--hv2-ink);
    padding-top: calc(var(--header-h) + 40px);
    padding-bottom: 120px;          /* 検索カードが下に重なる分 */
    overflow: hidden;
    font-family: var(--hv2-font);
}
.hv2-hero-inner {
    display: grid;
    grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.75fr);
    gap: 32px;
    align-items: center;
}
.hv2-hero-copy { min-width: 0; padding-bottom: 8px; }
.hv2-eyebrow {
    display: inline-flex; align-items: center; gap: 8px;
    margin: 0 0 18px; padding: 6px 14px;
    border: 1px solid var(--hv2-navy-line); border-radius: 999px;
    font-size: 15px; font-weight: 700; color: var(--hv2-amber-hi);
}
.hv2-eyebrow .lucide-icon { width: 18px; height: 18px; }
.hv2-title {
    margin: 0 0 18px;
    font-family: var(--hv2-font);
    font-size: 54px; line-height: 1.22; font-weight: 900; letter-spacing: 0.01em;
    color: var(--hv2-ink);
}
.hv2-title-line { display: block; }
.hv2-title-line--accent { color: var(--hv2-amber); }
.hv2-sub {
    margin: 0 0 26px; max-width: 34em;
    font-size: 18px; line-height: 1.75; font-weight: 500; color: var(--hv2-ink-dim);
}

/* 2択ミニフォーム */
.hv2-choice {
    background: var(--hv2-navy-2);
    border: 1px solid var(--hv2-navy-line);
    border-radius: 14px;
    padding: 18px 18px 14px;
    max-width: 620px;
}
.hv2-choice-q { margin: 0 0 12px; font-size: 16px; font-weight: 800; color: var(--hv2-ink); }
.hv2-choice-btns { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.hv2-choice-btn {
    display: flex; align-items: center; justify-content: center; gap: 8px;
    min-height: 56px; padding: 10px 14px;
    border: 2px solid var(--hv2-ink-dim); border-radius: 10px;
    background: transparent; color: var(--hv2-ink);
    font-size: 17px; font-weight: 800; line-height: 1.35; text-align: center; text-decoration: none;
    transition: background var(--transition), border-color var(--transition), color var(--transition);
}
.hv2-choice-btn .lucide-icon { width: 20px; height: 20px; flex-shrink: 0; }
.hv2-choice-btn:hover { background: rgba(248,250,252,0.08); border-color: var(--hv2-ink); color: var(--hv2-ink); }
.hv2-choice-btn--primary { background: var(--hv2-amber); border-color: var(--hv2-amber); color: var(--hv2-navy); }
.hv2-choice-btn--primary:hover { background: var(--hv2-amber-hi); border-color: var(--hv2-amber-hi); color: var(--hv2-navy); }
.hv2-choice-note { margin: 10px 0 0; font-size: 14px; line-height: 1.6; color: var(--hv2-ink-dim); }

.hv2-sublinks { display: flex; flex-wrap: wrap; gap: 8px 20px; margin-top: 18px; }
.hv2-sublink {
    display: inline-flex; align-items: center; gap: 6px;
    min-height: 44px; padding: 0 4px;
    font-size: 16px; font-weight: 700; color: var(--hv2-ink);
    text-decoration: underline; text-underline-offset: 4px; text-decoration-color: var(--hv2-amber);
}
.hv2-sublink .lucide-icon { width: 18px; height: 18px; color: var(--hv2-amber); }
.hv2-sublink:hover { color: var(--hv2-amber-hi); }

/* 人物写真（黒地の写真を濃紺になじませる: 端をぼかす） */
.hv2-hero-photo { position: relative; align-self: end; min-width: 0; }
.hv2-hero-photo img {
    display: block; width: 100%; max-width: 380px; height: auto; margin-left: auto;
    -webkit-mask-image: linear-gradient(to right, transparent 0, #000 22%, #000 85%, transparent 100%), linear-gradient(to bottom, transparent 0, #000 14%);
    -webkit-mask-composite: source-in;
            mask-image: linear-gradient(to right, transparent 0, #000 22%, #000 85%, transparent 100%), linear-gradient(to bottom, transparent 0, #000 14%);
            mask-composite: intersect;
}
.hv2-hero-photo::before {   /* 写真の後ろの淡い光（人物を浮かせる） */
    content: ""; position: absolute; inset: 10% 0 0 10%;
    background: radial-gradient(closest-side, rgba(245,158,11,0.22), transparent);
    pointer-events: none;
}
.hv2-hero-photo::after {    /* 下端を濃紺へ溶かす */
    content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 30%;
    background: linear-gradient(to bottom, transparent, var(--hv2-navy));
    pointer-events: none;
}

/* フォーカスの枠（暗い地でも見える色で残す） */
.hv2-hero a:focus-visible,
.hv2-wage a:focus-visible,
.hv2-sticky a:focus-visible { outline: 3px solid var(--hv2-amber-hi); outline-offset: 3px; }
.hv2-search :focus-visible,
.hv2-section a:focus-visible,
.hv2-trust a:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }

/* ---------- 検索カード（ヒーローに重ねる） ---------- */
.hv2-search-wrap { position: relative; z-index: 2; margin-top: -84px; }
.hv2-search {
    background: var(--bg-primary);
    border: 1px solid var(--border);
    border-radius: 16px;
    box-shadow: 0 18px 40px -12px rgba(15,27,51,0.35);
    padding: 22px 24px 24px;
    font-family: var(--hv2-font);
}
.hv2-search-title {
    display: flex; align-items: center; gap: 8px;
    margin: 0 0 14px; font-size: 20px; font-weight: 900; color: var(--text-primary);
}
.hv2-search-title .lucide-icon { width: 22px; height: 22px; color: var(--accent); }
.hv2-search-fields { display: grid; grid-template-columns: 1fr 1fr auto; gap: 14px; align-items: end; }
.hv2-field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.hv2-field-label { font-size: 15px; font-weight: 800; color: var(--text-secondary); }
/* select の三角は自前（docs/snippets/select.css・ASI_SELECT_2026_08_27） */
.hv2-select {
    appearance: none; -webkit-appearance: none;
    width: 100%; min-height: 54px;
    padding: 10px 40px 10px 14px;
    border: 2px solid var(--border); border-radius: 10px;
    background-color: var(--bg-primary); color: var(--text-primary);
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23475569' stroke-width='2' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat; background-position: right 14px center;
    font-family: inherit; font-size: 17px; font-weight: 700;
}
.hv2-select:hover { border-color: var(--text-muted); }
.hv2-search-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    min-height: 54px; padding: 0 28px;
    border: 0; border-radius: 10px;
    background: var(--hv2-navy); color: var(--hv2-ink);
    font-family: inherit; font-size: 18px; font-weight: 900; cursor: pointer;
    transition: background var(--transition);
}
.hv2-search-btn .lucide-icon { width: 20px; height: 20px; color: var(--hv2-amber); }
.hv2-search-btn:hover { background: var(--hv2-navy-2); }
:root[data-theme="dark"] .hv2-search-btn { background: var(--hv2-amber); color: var(--hv2-navy); }
:root[data-theme="dark"] .hv2-search-btn .lucide-icon { color: var(--hv2-navy); }
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .hv2-search-btn { background: var(--hv2-amber); color: var(--hv2-navy); }
    :root:not([data-theme="light"]) .hv2-search-btn .lucide-icon { color: var(--hv2-navy); }
}

/* ---------- 数字の帯 ---------- */
.hv2-stats { padding: 28px 0 8px; font-family: var(--hv2-font); }
.hv2-stats-grid {
    display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
    margin: 0; border: 1px solid var(--border); border-radius: 14px; overflow: hidden;
    background: var(--bg-primary);
}
.hv2-stat { padding: 18px 20px; border-left: 1px solid var(--border); min-width: 0; }
.hv2-stat:first-child { border-left: 0; }
.hv2-stat-label {
    display: flex; align-items: center; gap: 6px;
    font-size: 15px; font-weight: 700; color: var(--text-secondary);
}
.hv2-stat-label .lucide-icon { width: 18px; height: 18px; color: var(--hv2-amber-ink); flex-shrink: 0; }
.hv2-stat-value { margin: 6px 0 0; display: flex; align-items: baseline; flex-wrap: wrap; gap: 2px 4px; }
.hv2-stat-num { font-size: 44px; line-height: 1.1; font-weight: 900; color: var(--text-primary); font-variant-numeric: tabular-nums; }
.hv2-stat-num--date { font-size: 32px; }
.hv2-stat-unit { font-size: 17px; font-weight: 800; color: var(--text-primary); }

/* ---------- 節の共通 ---------- */
.hv2-section { padding: 64px 0; font-family: var(--hv2-font); }
.hv2-section--tint { background: var(--bg-secondary); }
.hv2-head { margin-bottom: 28px; }
.hv2-head--row { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px 24px; flex-wrap: wrap; }
.hv2-h2 {
    display: flex; align-items: center; gap: 12px;
    margin: 0 0 10px;
    font-family: var(--hv2-font); font-size: 32px; line-height: 1.3; font-weight: 900;
    color: var(--text-primary);
}
.hv2-h2 .lucide-icon {
    width: 40px; height: 40px; padding: 8px; flex-shrink: 0;
    border-radius: 10px; background: var(--hv2-navy); color: var(--hv2-amber);
}
.hv2-lead { margin: 0; max-width: 46em; font-size: 16px; line-height: 1.75; color: var(--text-secondary); }
.hv2-more { margin-top: 24px; text-align: center; }
.hv2-btn-outline {
    display: inline-flex; align-items: center; justify-content: center; gap: 6px;
    min-height: 48px; padding: 0 22px;
    border: 2px solid var(--text-primary); border-radius: 10px;
    background: var(--bg-primary); color: var(--text-primary);
    font-size: 16px; font-weight: 800; text-decoration: none; white-space: nowrap;
}
.hv2-btn-outline .lucide-icon { width: 18px; height: 18px; }
.hv2-btn-outline:hover { background: var(--text-primary); color: var(--bg-primary); }

/* ---------- 職種タイル ---------- */
.hv2-cats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.hv2-cat {
    display: grid; grid-template-columns: auto 1fr auto; grid-template-rows: auto auto;
    column-gap: 14px; align-items: center;
    min-height: 96px; padding: 16px 18px;
    border: 1px solid var(--border); border-radius: 14px;
    background: var(--bg-primary); color: var(--text-primary); text-decoration: none;
    transition: border-color var(--transition), box-shadow var(--transition);
}
.hv2-cat:hover { border-color: var(--hv2-amber); box-shadow: var(--shadow-md); color: var(--text-primary); }
.hv2-cat-icon {
    grid-row: 1 / 3;
    display: flex; align-items: center; justify-content: center;
    width: 52px; height: 52px; border-radius: 12px;
    background: var(--hv2-navy); color: var(--hv2-amber);
}
.hv2-cat-icon .lucide-icon { width: 26px; height: 26px; }
.hv2-cat-name { font-size: 17px; line-height: 1.4; font-weight: 800; min-width: 0; }
.hv2-cat-count { grid-column: 2; font-size: 15px; font-weight: 700; color: var(--text-secondary); }
.hv2-cat-num { font-size: 26px; font-weight: 900; color: var(--hv2-amber-ink); margin-right: 2px; }
.hv2-cat-go { grid-column: 3; grid-row: 1 / 3; width: 22px; height: 22px; color: var(--text-muted); }

/* ---------- 地域（県チップ） ---------- */
.hv2-regions { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.hv2-region {
    padding: 16px 18px 18px;
    border: 1px solid var(--border); border-radius: 14px; background: var(--bg-primary);
}
.hv2-region-name { margin: 0 0 12px; font-size: 18px; font-weight: 900; color: var(--text-primary); }
.hv2-pref-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
.hv2-pref {
    display: inline-flex; align-items: center; gap: 6px;
    min-height: 44px; padding: 0 14px;
    border: 1px solid var(--border); border-radius: 999px;
    background: var(--bg-secondary); color: var(--text-primary);
    font-size: 16px; font-weight: 700; text-decoration: none;
}
.hv2-pref:hover { border-color: var(--hv2-amber); color: var(--text-primary); }
.hv2-pref--has { background: var(--bg-primary); border-color: var(--text-muted); }
.hv2-pref-count {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 26px; height: 24px; padding: 0 7px; border-radius: 999px;
    background: var(--hv2-navy); color: var(--hv2-amber-hi);
    font-size: 14px; font-weight: 800; font-variant-numeric: tabular-nums;
}

/* ---------- 求人カード v2（includes/job-card-v2.php） ---------- */
.hv2-jobs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.hv2-job {
    display: flex; flex-direction: column; gap: 12px;
    padding: 18px 18px 16px;
    border: 1px solid var(--border); border-radius: 14px;
    background: var(--bg-primary); color: var(--text-primary); text-decoration: none;
    transition: border-color var(--transition), box-shadow var(--transition);
}
.hv2-job:hover { border-color: var(--hv2-amber); box-shadow: var(--shadow-lg); color: var(--text-primary); }
.hv2-job-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.hv2-job-logo { width: 28px; height: 28px; border-radius: 6px; object-fit: contain; background: #fff; }
.hv2-job-company { font-size: 14px; font-weight: 700; color: var(--text-secondary); }
.hv2-job-cat {
    margin-left: auto; padding: 2px 10px; border-radius: 999px;
    background: var(--bg-surface); color: var(--text-secondary);
    font-size: 13px; font-weight: 700;
}
.hv2-job-title { margin: 0; font-size: 18px; line-height: 1.5; font-weight: 900; color: var(--text-primary); }
.hv2-job-salary {
    display: flex; flex-direction: column; gap: 4px;
    padding: 12px 14px; border-radius: 10px;
    background: var(--hv2-amber-bg);
}
.hv2-job-salary-label {
    display: inline-flex; align-items: center; gap: 6px;
    font-size: 14px; font-weight: 800; color: var(--hv2-amber-ink);
}
.hv2-job-salary-label .lucide-icon { width: 18px; height: 18px; }
.hv2-job-salary-value { font-size: 19px; line-height: 1.45; font-weight: 900; color: var(--text-primary); }
.hv2-job-salary--closed { background: var(--bg-surface); }
.hv2-job-salary--closed .hv2-job-salary-label { color: var(--text-secondary); }
.hv2-job-meta { display: flex; flex-direction: column; gap: 6px; margin: 0; padding: 0; list-style: none; }
.hv2-job-meta li { display: flex; align-items: flex-start; gap: 8px; font-size: 16px; line-height: 1.55; color: var(--text-secondary); }
.hv2-job-meta .lucide-icon { width: 18px; height: 18px; margin-top: 3px; flex-shrink: 0; color: var(--text-primary); }
.hv2-job-meta-text {
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; min-width: 0;
}
.hv2-job-foot { display: flex; flex-direction: column; gap: 6px; margin-top: auto; padding-top: 4px; }
.hv2-job-tags { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; list-style: none; min-width: 0; }
.hv2-chip {
    padding: 3px 10px; border-radius: 999px;
    border: 1px solid var(--border); background: var(--bg-secondary);
    font-size: 14px; font-weight: 700; color: var(--text-primary);
}
.hv2-job-more {
    display: inline-flex; align-items: center; gap: 2px; align-self: flex-end;
    min-height: 44px; padding: 0 4px 0 12px;
    font-size: 15px; font-weight: 900; color: var(--text-primary);
}
.hv2-job-more .lucide-icon { width: 18px; height: 18px; color: var(--hv2-amber-ink); }

/* ---------- 年収の帯 ---------- */
.hv2-wage { background: var(--hv2-navy); color: var(--hv2-ink); padding: 64px 0; font-family: var(--hv2-font); }
.hv2-h2--dark { color: var(--hv2-ink); }
.hv2-h2--dark .lucide-icon { background: var(--hv2-amber); color: var(--hv2-navy); }
.hv2-lead--dark { color: var(--hv2-ink-dim); }
.hv2-wage-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.hv2-wage-col { background: var(--hv2-navy-2); border: 1px solid var(--hv2-navy-line); border-radius: 14px; padding: 18px 20px; }
.hv2-wage-col-title { display: flex; align-items: center; gap: 8px; margin: 0 0 8px; font-size: 18px; font-weight: 900; color: var(--hv2-ink); }
.hv2-wage-col-title .lucide-icon { width: 22px; height: 22px; color: var(--hv2-amber); }
.hv2-wage-list { margin: 0; padding: 0; list-style: none; }
.hv2-wage-list li + li { border-top: 1px solid var(--hv2-navy-line); }
.hv2-wage-row {
    display: grid; grid-template-columns: 4.2em 1fr auto; align-items: baseline; gap: 10px;
    min-height: 56px; padding: 10px 0;
    color: var(--hv2-ink); text-decoration: none;
}
.hv2-wage-row:hover { color: var(--hv2-amber-hi); }
.hv2-wage-rank { font-size: 15px; font-weight: 700; color: var(--hv2-ink-dim); }
.hv2-wage-pref { font-size: 18px; font-weight: 800; }
.hv2-wage-yen { font-size: 28px; font-weight: 900; color: var(--hv2-amber); font-variant-numeric: tabular-nums; white-space: nowrap; }
.hv2-wage-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px; margin-top: 24px; }
.hv2-btn-amber {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    min-height: 52px; padding: 0 24px; border-radius: 10px;
    background: var(--hv2-amber); color: var(--hv2-navy);
    font-size: 17px; font-weight: 900; text-decoration: none;
}
.hv2-btn-amber .lucide-icon { width: 20px; height: 20px; }
.hv2-btn-amber:hover { background: var(--hv2-amber-hi); color: var(--hv2-navy); }
.hv2-wage-source { margin: 0; flex: 1 1 280px; font-size: 14px; line-height: 1.6; color: var(--hv2-ink-dim); }

/* ---------- 条件チップ ---------- */
.hv2-conds { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin: 0; padding: 0; list-style: none; }
.hv2-cond {
    display: flex; align-items: center; gap: 10px;
    min-height: 56px; padding: 10px 14px;
    border: 1px solid var(--border); border-radius: 12px;
    background: var(--bg-primary); color: var(--text-primary);
    font-size: 16px; font-weight: 800; line-height: 1.4; text-decoration: none;
}
.hv2-cond .lucide-icon { width: 22px; height: 22px; flex-shrink: 0; color: var(--hv2-amber-ink); }
.hv2-cond:hover { border-color: var(--hv2-amber); color: var(--text-primary); }

/* ---------- 信用の帯 ---------- */
.hv2-trust { padding: 8px 0 64px; font-family: var(--hv2-font); }
.hv2-trust-box {
    display: flex; flex-direction: column; gap: 20px;
    padding: 28px 32px; border-radius: 16px;
    background: var(--bg-secondary); border: 1px solid var(--border);
}
.hv2-trust-head .hv2-h2 { margin-bottom: 12px; }
.hv2-trust-lead { margin: 0; max-width: 46em; font-size: 17px; line-height: 1.8; font-weight: 600; color: var(--text-primary); }
.hv2-trust-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin: 0; padding: 0; list-style: none; }
.hv2-trust-item {
    display: grid; grid-template-columns: auto 1fr; column-gap: 14px; align-items: start;
    padding: 14px; border-radius: 12px; background: var(--bg-primary); border: 1px solid var(--border);
}
.hv2-trust-icon {
    grid-row: 1 / 3; display: flex; align-items: center; justify-content: center;
    width: 44px; height: 44px; border-radius: 10px; background: var(--hv2-navy); color: var(--hv2-amber);
}
.hv2-trust-icon .lucide-icon { width: 22px; height: 22px; }
.hv2-trust-title { font-size: 17px; font-weight: 900; color: var(--text-primary); }
.hv2-trust-desc { font-size: 15px; line-height: 1.6; color: var(--text-secondary); }

/* ---------- 既存の節（他サイト・会社・コラム・流れ）を新しいトーンに寄せる ---------- */
.hv2-legacy { font-family: var(--hv2-font); }
.hv2-legacy .section-title {
    font-family: var(--hv2-font); font-size: 32px; line-height: 1.3; font-weight: 900;
}
.hv2-legacy .section-desc { font-size: 16px; line-height: 1.75; }
.hv2-legacy .related-site-card,
.hv2-legacy .category-card,
.hv2-legacy .article-card,
.hv2-legacy .flow-step { border-radius: 14px; }
.hv2-legacy .related-site-card-icon,
.hv2-legacy .category-card-icon { background: var(--hv2-navy); color: var(--hv2-amber); }
.hv2-legacy .related-site-card-icon .lucide-icon,
.hv2-legacy .category-card-icon .lucide-icon { color: var(--hv2-amber); }
.hv2-legacy .related-site-card-name,
.hv2-legacy .category-card-title,
.hv2-legacy .article-card-title,
.hv2-legacy .flow-step-title { font-weight: 900; }
.hv2-legacy .related-site-card-desc,
.hv2-legacy .category-card-desc,
.hv2-legacy .article-card-desc,
.hv2-legacy .flow-step-desc { font-size: 16px; line-height: 1.7; }
.hv2-legacy .articles-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
/* 最後の CTA も濃紺×アンバーに（共有の .cta-section .btn:not(.btn-outline) より詳細度を上げる） */
.hv2-cta.cta-section { background: var(--hv2-navy); }
.hv2-cta .cta-title { font-family: var(--hv2-font); font-size: 34px; font-weight: 900; color: var(--hv2-ink); }
.hv2-cta .cta-desc { font-size: 16px; line-height: 1.8; color: var(--hv2-ink-dim); }
.hv2-cta.cta-section .btn.btn-primary { background: var(--hv2-amber); border-color: var(--hv2-amber); color: var(--hv2-navy); }
.hv2-cta.cta-section .btn.btn-primary:hover { background: var(--hv2-amber-hi); border-color: var(--hv2-amber-hi); color: var(--hv2-navy); }
.hv2-cta.cta-section .btn:not(.btn-outline):not(.btn-primary) { background: var(--hv2-ink); border-color: var(--hv2-ink); color: var(--hv2-navy); }
.hv2-cta.cta-section .btn-outline { border-color: var(--hv2-ink-dim); color: var(--hv2-ink); }
.hv2-cta.cta-section .btn:focus-visible { outline: 3px solid var(--hv2-amber-hi); outline-offset: 3px; }
.hv2-legacy .flow-step-num { background: var(--hv2-navy); color: var(--hv2-amber); font-weight: 900; }
.hv2-legacy .btn-lg { min-height: 48px; font-weight: 800; }

/* ---------- スマホの追従ボタン（768px以下・トップページだけ） ---------- */
.hv2-sticky { display: none; }

/* ---------- レスポンシブ ---------- */
@media (max-width: 1024px) {
    .hv2-title { font-size: 46px; }
    .hv2-jobs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .hv2-conds { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
    .hv2-regions { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .hv2-cats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .hv2-trust-list { grid-template-columns: 1fr; }
    .hv2-legacy .articles-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 768px) {
    .hv2-hero { padding-top: calc(var(--header-h) + 24px); padding-bottom: 96px; }
    .hv2-hero-inner { grid-template-columns: minmax(0, 1fr) minmax(0, 0.55fr); gap: 12px; }
    .hv2-title { font-size: 38px; }
    .hv2-sub { font-size: 17px; }
    .hv2-choice-btns { grid-template-columns: 1fr; }
    .hv2-search-wrap { margin-top: -72px; }
    .hv2-search { padding: 18px 16px 18px; }
    .hv2-search-fields { grid-template-columns: 1fr 1fr; }
    .hv2-search-btn { grid-column: 1 / -1; width: 100%; }
    .hv2-stats-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .hv2-stat:nth-child(3) { border-left: 0; }
    .hv2-stat:nth-child(n+3) { border-top: 1px solid var(--border); }
    .hv2-section, .hv2-wage { padding: 48px 0; }
    .hv2-h2, .hv2-legacy .section-title { font-size: 26px; }
    .hv2-h2 .lucide-icon { width: 36px; height: 36px; padding: 7px; }
    .hv2-wage-cols { grid-template-columns: 1fr; }
    .hv2-conds { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .hv2-trust-box { padding: 22px 18px; }

    .hv2-sticky {
        display: block;
        position: fixed; left: 0; right: 0; bottom: 0; z-index: 90;
        padding: 10px 16px calc(10px + env(safe-area-inset-bottom));
        background: rgba(15,27,51,0.96);
        border-top: 1px solid var(--hv2-navy-line);
    }
    .hv2-sticky-btn {
        display: flex; align-items: center; justify-content: center; gap: 8px;
        min-height: 52px; border-radius: 10px;
        background: var(--hv2-amber); color: var(--hv2-navy);
        font-family: var(--hv2-font); font-size: 17px; font-weight: 900; text-decoration: none;
    }
    .hv2-sticky-btn .lucide-icon { width: 20px; height: 20px; }
    .hv2-sticky-btn:hover { background: var(--hv2-amber-hi); color: var(--hv2-navy); }
    /* フッターの最後が追従バーに隠れないよう、ページの最後に余白を足す */
    body:has(.hv2-sticky) { padding-bottom: calc(76px + env(safe-area-inset-bottom)); }
}
@media (max-width: 600px) {
    .hv2-hero-inner { grid-template-columns: 1fr; }
    .hv2-hero-photo { display: none; }
    .hv2-title { font-size: 32px; line-height: 1.3; }
    .hv2-eyebrow { font-size: 14px; }
    .hv2-search-fields { grid-template-columns: 1fr; }
    .hv2-cats, .hv2-regions, .hv2-jobs, .hv2-legacy .articles-grid { grid-template-columns: 1fr; }
    .hv2-cta .cta-title { font-size: 26px; }
    .hv2-h2, .hv2-legacy .section-title { font-size: 24px; }
    .hv2-stat { padding: 14px 14px; }
    .hv2-stat-num { font-size: 34px; }
    .hv2-stat-num--date { font-size: 24px; }
    .hv2-stat-unit { font-size: 15px; }
    .hv2-stat-label { font-size: 14px; }
    .hv2-wage-yen { font-size: 22px; }
    .hv2-wage-row { grid-template-columns: 3.6em 1fr auto; }
    .hv2-conds { grid-template-columns: 1fr 1fr; }
    .hv2-cond { font-size: 15px; padding: 10px 12px; }
    .hv2-head--row .hv2-btn-outline { width: 100%; }
}
/* HOME_V2_2026_10_13 ここまで */

/* ============================================================
   SKIN_V2_2026_10_13 全ページの見た目をトップ（HOME_V2）と同じトーンに揃える
   - 書体: 全ページ Noto Sans JP（本文400・ボタン/ラベル700・見出し900）。
     旧: 本文 M PLUS 2／見出し Inter（boei 流用）。M PLUS 2 は太くすると丸く浮くため外した。
   - ヘッダー・フッター: 濃紺（#0F1B33／#0B1426）× アンバーの差し色。
   - 背景: 本文の地は白、節の交互は #F5F7FB。点々の背景・ぼかし動画は外す。
   - 角丸 10〜12px、ボタンは高さ44px以上・10px角。
   - 共有 style.css にあるティールの直書きのうち、画面に出るものだけここで上書きする。
   共有 style.css・page 別 CSS（article/area/landing-pages）は触らない。既存区画は消さない。
   ============================================================ */
:root {
    --font-sans: 'Noto Sans JP', 'Hiragino Sans', 'Hiragino Kaku Gothic ProN', sans-serif;
    --font-display: 'Noto Sans JP', 'Hiragino Sans', 'Hiragino Kaku Gothic ProN', sans-serif;
    --hv2-font: 'Noto Sans JP', 'Hiragino Sans', 'Hiragino Kaku Gothic ProN', sans-serif;

    --sk-navy: #0F1B33;          /* ヘッダー・濃い帯（= --hv2-navy） */
    --sk-navy-2: #16264A;        /* 濃紺の中の一段明るい面 */
    --sk-navy-line: #2A3B5F;     /* 濃紺の中の線 */
    --sk-footer: #0B1426;        /* フッター */
    --sk-on-navy: #F8FAFC;       /* 濃紺の上の文字 */
    --sk-on-navy-dim: #CBD5E1;   /* 濃紺の上の補助文字 */
    --sk-on-navy-mute: #94A3B8;  /* 濃紺の上の小さい文字（7:1 以上） */
    --sk-amber: #F59E0B;         /* 暗い地の上のボタン（文字は濃紺） */
    --sk-amber-hi: #FBBF24;
    --sk-amber-ring: rgba(180, 83, 9, 0.22);

    --bg-secondary: #F5F7FB;     /* 節の交互（薄い青灰） */
    --bg-surface: #EEF2F8;
    --text-primary: #0F1B33;     /* 白地の文字は濃紺（旧 #1e293b） */

    --radius-sm: 10px;
    --radius-md: 10px;
    --radius-lg: 12px;
    --radius-xl: 12px;

    /* area.css が --color-primary 未定義時にティール（#0d9488）へ落ちるため、ここで定義する */
    --color-primary: #B45309;
    --color-primary-dark: #92400E;
}

/* ---------- 書体と本文 ---------- */
body {
    font-family: var(--font-sans);
    font-size: 16px; font-weight: 400;
    background: var(--bg-primary);
    background-image: none;
}
h1, h2, .section-title, .hv2-h2, .list-page-title, .jobs-page-title, .detail-title,
.cta-title, .static-page-title, .faq-page-title, .contact-hero-title, .cat-guide-title,
.article-title, .article-header h1, .area-hero h1, .area-hero-title {
    font-family: var(--font-display); font-weight: 900; letter-spacing: 0.01em;
}
h3, h4 { font-family: var(--font-display); font-weight: 700; }
.btn, .category-tab, .service-tab, .form-label, .filter-group-label, .badge-category,
.job-card-badge, .article-card-badge, .spec-badge-lg, .breadcrumb [aria-current] { font-weight: 700; }
/* 本文の読み物は16px以上（旧 13〜15px） */
.list-page-desc, .section-desc, .detail-description, .cat-guide-text, .static-page-desc,
.faq-answer, .faq-page-desc, .legal-content p, .legal-content ul li, .company-table td,
.article-card-desc, .category-card-desc, .flow-step-desc, .feature-card-desc, .cta-desc,
.jobs-empty-desc, .list-empty-text, .contact-hero-desc { font-size: 16px; line-height: 1.8; }

/* フォーカスの枠は全ページで見えるように（共有 CSS の outline:none を補う） */
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible,
textarea:focus-visible, summary:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }

/* ---------- ヘッダー（濃紺） ---------- */
.site-header,
[data-theme="dark"] .site-header {
    background: rgba(15, 27, 51, 0.96);
    -webkit-backdrop-filter: blur(12px);
            backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--sk-navy-line);
    color: var(--sk-on-navy);
}
.site-header .header-logo { color: var(--sk-on-navy); }
.site-header .header-logo-tagline { color: var(--sk-on-navy-dim); font-weight: 500; }
.site-header .header-logo-svg { color: var(--sk-on-navy); }
.logo-icon-svg { display: block; width: 24px; height: 24px; flex-shrink: 0; color: var(--sk-amber); }
.site-header .logo-icon-svg { margin-right: 4px; }
.site-header .nav-link {
    display: inline-flex; align-items: center; min-height: 44px;
    font-size: 14px; font-weight: 700; color: #E2E8F0;
}
.site-header .nav-link:hover { color: var(--sk-amber-hi); }
.site-header a:focus-visible,
.site-header button:focus-visible,
.site-header input:focus-visible { outline: 3px solid var(--sk-amber-hi); outline-offset: 2px; }

/* 検索窓: 濃紺の中で輪郭が見える白枠＋一段明るい面 */
.site-header .header-search-input {
    min-height: 40px;
    background: var(--sk-navy-2); color: var(--sk-on-navy);
    border: 1px solid #4A5D82; border-radius: 10px;
    font-size: 14px;
}
.site-header .header-search-input::placeholder { color: var(--sk-on-navy-mute); }
.site-header .header-search-icon { color: var(--sk-on-navy-dim); }
.site-header .header-search-input:focus { border-color: var(--sk-amber); box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.25); }
.site-header .header-search-dropdown { color: var(--text-primary); }

/* 言語切替 */
.site-header .lang-switcher__btn { min-height: 40px; border-color: #4A5D82; color: #E2E8F0; border-radius: 10px; }
.site-header .lang-switcher__btn:hover { background: rgba(248, 250, 252, 0.08); }

/* ボタン: ログイン=白枠／無料登録=アンバー（文字は濃紺） */
.site-header .btn { min-height: 44px; border-radius: 10px; font-size: 14px; font-weight: 700; }
.site-header .btn-outline { background: transparent; border: 2px solid #E2E8F0; color: var(--sk-on-navy); }
.site-header .btn-outline:hover { background: rgba(248, 250, 252, 0.10); border-color: #fff; color: #fff; }
.site-header .btn-primary { background: var(--sk-amber); border: 2px solid var(--sk-amber); color: var(--sk-navy); }
.site-header .btn-primary:hover { background: var(--sk-amber-hi); border-color: var(--sk-amber-hi); color: var(--sk-navy); }
.site-header .btn-ghost { color: #E2E8F0; }
.site-header .btn-ghost:hover { background: rgba(248, 250, 252, 0.08); color: #fff; }

/* ハンバーガー */
.site-header .hamburger-btn { min-height: 44px; min-width: 44px; border-color: #4A5D82; color: #E2E8F0; border-radius: 10px; }
.site-header .hamburger-btn:hover { background: rgba(248, 250, 252, 0.08); border-color: var(--sk-amber); color: var(--sk-amber-hi); }

/* スマホのメニューパネル（濃紺） */
.mobile-menu { background: var(--sk-navy); color: var(--sk-on-navy); font-family: var(--font-sans); }
.mobile-menu-header { background: var(--sk-footer); border-bottom-color: var(--sk-navy-line); }
.mobile-menu-logo { color: var(--sk-on-navy); font-weight: 900; }
.mobile-menu-logo-icon { width: 22px; height: 22px; }
.mobile-menu-close { width: 44px; height: 44px; color: var(--sk-on-navy-dim); }
.mobile-menu-close:hover { background: var(--sk-navy-2); color: #fff; }
.mobile-menu-category { color: var(--sk-on-navy-mute); font-size: 12px; }
.mobile-menu-nav a { min-height: 48px; color: #E2E8F0; font-size: 16px; font-weight: 700; }
.mobile-menu-nav a .lucide-icon { color: var(--sk-on-navy-mute); }
.mobile-menu-nav a:hover { background: var(--sk-navy-2); color: var(--sk-amber-hi); }
.mobile-menu-nav a:hover .lucide-icon { color: var(--sk-amber-hi); }
.mobile-menu-nav a.is-current-lang { color: var(--sk-amber-hi); }
.mobile-menu-nav a.is-current-lang .lucide-icon { color: var(--sk-amber-hi); }
.mobile-menu-nav a:focus-visible, .mobile-menu-close:focus-visible { outline: 3px solid var(--sk-amber-hi); outline-offset: -3px; }
.mobile-menu-divider { background: var(--sk-navy-line); }
.mobile-menu-cta { background: var(--sk-amber) !important; color: var(--sk-navy) !important; font-weight: 900 !important; border-radius: 10px; }
.mobile-menu-cta .lucide-icon { color: var(--sk-navy) !important; }
.mobile-menu-cta:hover { background: var(--sk-amber-hi) !important; color: var(--sk-navy) !important; }

/* ---------- フッター（濃紺・飾りなし） ---------- */
.site-footer { background: var(--sk-footer); color: var(--sk-on-navy-dim); font-size: 15px; font-family: var(--font-sans); }
.site-footer::after, .site-footer::before { content: none; display: none; }
.footer-video { display: none; }
.footer-logo-tagline { color: var(--sk-on-navy-mute); }
.footer-logo-svg, .footer-logo-name { color: var(--sk-on-navy); }
.logo-icon-svg--footer { margin-right: 2px; }
.footer-brand-desc { color: var(--sk-on-navy-dim); font-size: 15px; }
.footer-col-title { color: #fff; font-size: 14px; font-weight: 900; letter-spacing: 0.02em; }
.footer-col-links a { color: var(--sk-on-navy-dim); font-size: 15px; min-height: 32px; }
.footer-col-links a:hover,
.footer-legal-links a:hover,
.footer-related-links a:hover { color: var(--sk-amber); }
.footer-bottom { border-top-color: var(--sk-navy-line); }
.footer-legal-links a, .footer-related-links a, .footer-related-label, .footer-copyright { color: var(--sk-on-navy-mute); font-size: 14px; opacity: 1; }
.site-footer a:focus-visible, .site-footer button:focus-visible { outline: 3px solid var(--sk-amber-hi); outline-offset: 2px; }
.footer-theme-toggle { width: 44px; height: 44px; border-color: var(--sk-navy-line); color: var(--sk-on-navy-dim); border-radius: 10px; }
.footer-theme-toggle:hover { color: var(--sk-amber); border-color: var(--sk-amber); }

/* ---------- 共通の CTA 帯（フッター直前）: トップの最後の CTA と同じ濃紺×アンバー ---------- */
.cta-section { background: var(--sk-navy); }
.cta-section .cta-title { color: var(--sk-on-navy); font-size: 30px; }
.cta-section .cta-desc { color: var(--sk-on-navy-dim); }
.cta-section .btn.btn-primary { background: var(--sk-amber); border: 2px solid var(--sk-amber); color: var(--sk-navy); }
.cta-section .btn.btn-primary:hover { background: var(--sk-amber-hi); border-color: var(--sk-amber-hi); color: var(--sk-navy); }
.cta-section .btn.btn-outline { border: 2px solid var(--sk-on-navy-dim); color: var(--sk-on-navy); background: transparent; }
.cta-section .btn.btn-outline:hover { background: rgba(248, 250, 252, 0.10); border-color: #fff; color: #fff; }
.cta-section .btn:focus-visible { outline: 3px solid var(--sk-amber-hi); outline-offset: 3px; }

/* ---------- 背景と節 ---------- */
.features-section, .categories-section, .articles-section,
.categories-section.pattern-1, .categories-section.pattern-2,
.categories-section.pattern-3, .categories-section.pattern-4 { background-image: none; }
.flow-section { background-image: none; background-color: var(--bg-secondary); }
.hero-section { background: var(--bg-primary); }
.jobs-section { background: var(--bg-secondary); }

/* ---------- ボタン（主=アンバー #B45309・白文字／角10px／高さ44px以上） ---------- */
.btn { min-height: 44px; border-radius: 10px; font-family: var(--font-sans); }
.btn-xs { min-height: 32px; }
.btn-lg { min-height: 52px; border-radius: 10px; font-weight: 900; }
.btn-primary { background: #B45309; color: #fff; }
.btn-primary:hover { background: #92400E; color: #fff; }
.btn-outline { border: 2px solid var(--text-primary); color: var(--text-primary); }
.btn-outline:hover { background: var(--text-primary); border-color: var(--text-primary); color: var(--bg-primary); }
.hero-actions .btn { border-radius: 10px; }

/* ---------- ティール直書きの上書き（共有 style.css） ---------- */
.header-search-input:focus, .search-input:focus, .form-control:focus, .form-select:focus,
.form-input:focus, .form-textarea:focus, .tag-input:focus-within,
.auth-modal .form-input:focus { box-shadow: 0 0 0 3px var(--sk-amber-ring); }
.hero-badge { border-color: rgba(180, 83, 9, 0.25); border-radius: 10px; }
.category-tab.active .category-count { background: rgba(180, 83, 9, 0.14); }
.list-cta-banner { border-color: rgba(180, 83, 9, 0.22); }
.current-plan-card { border-color: rgba(180, 83, 9, 0.22); }
.job-card--listing:hover { box-shadow: var(--shadow-lg); border-color: var(--accent); }
.jd-hero::before { background: radial-gradient(circle, rgba(180, 83, 9, 0.08) 0%, transparent 70%); }
.jd-hero-avatar { box-shadow: 0 4px 14px rgba(180, 83, 9, 0.22); }
.jd-cta { background: var(--accent-light); border-color: rgba(180, 83, 9, 0.22); }
.jd-article-link { border-color: rgba(180, 83, 9, 0.18); }
.feature-card-highlight { box-shadow: 0 8px 24px rgba(180, 83, 9, 0.16); }
.lead-form-msg.is-ok, .apply-gate-job { color: #92400E; }
.lead-form--footer .lead-form-msg.is-ok { color: var(--sk-amber-hi); }
.feature-card-icon { border-radius: 10px; }
/* landing-pages.css（会社・資格・業態のページ） */
.cat-related-card--featured { background: linear-gradient(135deg, rgba(180, 83, 9, 0.08), rgba(180, 83, 9, 0.02)); }
.maker-meta-item {   /* 旧: 999px のピル型で、スマホでは見出し語が縦に潰れていた */
    display: block; padding: 8px 12px; border: 1px solid var(--border); border-radius: 10px;
    background: var(--bg-secondary); font-size: 14px; line-height: 1.6;
}
.maker-meta-item strong { margin-right: 4px; font-weight: 900; }
.skill-career-path { background: var(--bg-secondary); border-color: var(--border); }
.humanoid-hub-hero { background: var(--bg-secondary); border-color: var(--border); }
.hub-job-card:hover { box-shadow: var(--shadow-md); }

/* ---------- 一覧ページの見出し・検索・絞り込み（トップの検索カードと同じトーン） ---------- */
.list-page-title { font-size: 32px; line-height: 1.3; color: var(--text-primary); }
.list-page-title .lucide-icon {
    width: 40px; height: 40px; padding: 8px; border-radius: 10px;
    background: var(--sk-navy); color: var(--sk-amber); vertical-align: middle;
}
.breadcrumb { font-size: 14px; color: var(--text-secondary); }
.breadcrumb a { color: var(--text-secondary); }
.breadcrumb a:hover { color: var(--accent); }

.job-search-form {
    border: 2px solid var(--border); border-radius: 12px; background: var(--bg-primary);
    box-shadow: 0 10px 24px -14px rgba(15, 27, 51, 0.35);
}
.job-search-form:focus-within { border-color: var(--accent); }
.job-search-input { min-height: 52px; font-size: 16px; font-weight: 700; color: var(--text-primary); }
.job-search-icon { color: var(--text-secondary); }
.job-search-btn {
    min-height: 52px; background: var(--sk-navy); color: var(--sk-on-navy);
    font-size: 16px; font-weight: 900;
}
.job-search-btn .lucide-icon { color: var(--sk-amber); width: 18px; height: 18px; }
.job-search-btn:hover { background: var(--sk-navy-2); color: var(--sk-on-navy); }

.job-filter-panel {
    background: var(--bg-primary); border: 1px solid var(--border); border-radius: 12px;
    box-shadow: 0 10px 24px -16px rgba(15, 27, 51, 0.30);
}
.job-filter-panel .filter-group-label,
.filter-group-label {
    font-size: 15px; font-weight: 900; color: var(--text-primary);
    text-transform: none; letter-spacing: 0;
}
.job-filter-panel .filter-group-label .lucide-icon { color: var(--hv2-amber-ink); }
.category-tab, .service-tab {
    min-height: 44px; padding: 8px 14px;
    border: 2px solid var(--border); border-radius: 10px;
    background: var(--bg-primary); color: var(--text-primary);
    font-size: 15px; font-weight: 700; white-space: normal; text-align: left;
}
.category-tab .lucide-icon { width: 18px; height: 18px; color: var(--text-secondary); flex-shrink: 0; }
.category-tab:hover, .service-tab:hover { border-color: var(--hv2-amber); background: var(--bg-primary); color: var(--text-primary); }
.category-tab.active, .service-tab.active {
    border-color: var(--hv2-amber); background: var(--hv2-amber-bg); color: var(--text-primary); font-weight: 900;
}
.category-tab.active .lucide-icon { color: var(--hv2-amber-ink); }
.search-result-summary { font-size: 16px; color: var(--text-secondary); }
.search-result-summary strong { font-size: 22px; font-weight: 900; color: var(--text-primary); }

/* 求人一覧のカード（job-card-v2）: 右の列に2列で並べる */
.hv2-jobs--listing { grid-template-columns: repeat(2, minmax(0, 1fr)); margin: 0 0 32px; font-family: var(--font-sans); }
.hv2-job:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
@media (max-width: 600px) {
    .hv2-jobs--listing { grid-template-columns: 1fr; }
    .list-page-title { font-size: 26px; }
    .list-page-title .lucide-icon { width: 34px; height: 34px; padding: 7px; }
}

/* ---------- カード類の角丸と見出しの太さ（他ページ） ---------- */
.job-card, .detail-card, .sidebar-card, .article-card, .category-card, .feature-card,
.flow-step, .faq-item, .cat-guide, .list-empty, .contact-form, .contact-info-card,
.about-pillar, .company-info, .jobs-empty { border-radius: 12px; }
.detail-card-title, .cat-guide-title, .faq-group-title, .company-info-title { font-weight: 900; }
.detail-card-title .lucide-icon, .cat-guide-title .lucide-icon, .cat-guide-subtitle .lucide-icon { color: var(--hv2-amber-ink); }
.detail-price, .rental-plan-price { font-family: var(--font-sans); font-weight: 900; }
.flow-step-num { background: var(--sk-navy); color: var(--sk-amber); font-family: var(--font-sans); font-weight: 900; }
.faq-question { font-family: var(--font-sans); font-size: 16px; font-weight: 700; }
.faq-question::before, .faq-answer::before { font-family: var(--font-sans); }

/* ---------- ダークモード（data-theme="dark" と OS 設定の両方） ----------
   ヘッダー・フッター・濃紺の帯はそのまま。本文の地は #0B1426 系、文字は #E2E8F0。 */
:root[data-theme="dark"] {
    --bg-primary: #0B1426;
    --bg-secondary: #111D35;
    --bg-surface: #182644;
    --text-primary: #E2E8F0;
    --text-secondary: #B8C4D6;
    --text-muted: #8A99B3;
    --border: #24365A;
    --border-light: #1A2948;
    --accent: #F59E0B;          /* 暗い地の上のアンバー（濃紺地で 8:1 以上） */
    --accent-dark: #FBBF24;
    --sk-amber-ring: rgba(245, 158, 11, 0.30);
}
:root[data-theme="dark"] .btn-primary { background: var(--sk-amber); color: var(--sk-navy); }
:root[data-theme="dark"] .btn-primary:hover { background: var(--sk-amber-hi); color: var(--sk-navy); }
:root[data-theme="dark"] .site-header { background: rgba(15, 27, 51, 0.96); }
:root[data-theme="dark"] .hv2-job-logo { background: #fff; }
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        --bg-primary: #0B1426;
        --bg-secondary: #111D35;
        --bg-surface: #182644;
        --text-primary: #E2E8F0;
        --text-secondary: #B8C4D6;
        --text-muted: #8A99B3;
        --border: #24365A;
        --border-light: #1A2948;
        --accent: #F59E0B;
        --accent-dark: #FBBF24;
        --sk-amber-ring: rgba(245, 158, 11, 0.30);
    }
    :root:not([data-theme="light"]) .btn-primary { background: var(--sk-amber); color: var(--sk-navy); }
    :root:not([data-theme="light"]) .btn-primary:hover { background: var(--sk-amber-hi); color: var(--sk-navy); }
}
/* ---------- 地域ページ（area.css は後に読まれるため body を付けて詳細度を上げる） ----------
   旧: --color-primary 由来のティールのグラデーション。トップのヒーローと同じ濃紺にする。
   あわせて、固定ヘッダーの裏にパンくずが隠れていた／ヒーローの下に空白が空いていた点を直す */
body .area-hero {
    background: var(--sk-navy); color: var(--sk-on-navy);
    padding-top: calc(var(--header-h) + 24px);
}
body .area-hero-breadcrumb { font-size: 14px; color: var(--sk-on-navy-dim); }
body .area-hero-breadcrumb a { color: #E2E8F0; text-decoration: underline; text-underline-offset: 3px; text-decoration-color: rgba(245, 158, 11, 0.6); }
body .area-hero-breadcrumb a:hover { color: var(--sk-amber-hi); }
body .area-hero a:focus-visible { outline: 3px solid var(--sk-amber-hi); outline-offset: 2px; }
body .area-hero-lead { color: var(--sk-on-navy-dim); font-size: 16px; }
body .area-hero-stat { background: var(--sk-navy-2); border: 1px solid var(--sk-navy-line); border-radius: 10px; color: var(--sk-on-navy-dim); font-size: 14px; }
body .area-hero-stat strong { color: var(--sk-amber); font-weight: 900; }
body .area-hero + .list-section.area-page { padding-top: 8px; }
body .area-cta-banner { background: var(--sk-navy); }
body .area-cta-desc { color: var(--sk-on-navy-dim); }
body .area-cta-banner .btn-primary { background: var(--sk-amber); color: var(--sk-navy); }
body .area-cta-banner .btn-primary:hover { background: var(--sk-amber-hi); color: var(--sk-navy); }
body .area-cta-banner .btn-outline { border-color: var(--sk-on-navy-dim); color: var(--sk-on-navy); background: transparent; }
body .area-cta-banner .btn:focus-visible { outline: 3px solid var(--sk-amber-hi); outline-offset: 3px; }

/* ---------- ヘッダーの詰まり（PC幅で検索窓が潰れていた） ---------- */
.site-header .header-inner { gap: 16px; }
.site-header .header-nav { gap: 18px; }
.site-header .header-search { min-width: 150px; }
.site-header .nav-link, .site-header .btn, .site-header .lang-switcher__btn { white-space: nowrap; flex-shrink: 0; }
@media (max-width: 1180px) {
    .site-header .header-nav { gap: 14px; }
    .site-header .nav-link { font-size: 13px; }
}
/* 1100px以下は検索窓を出さない（トップと求人一覧のページ内に検索がある）。ナビとボタンを優先 */
@media (max-width: 1100px) {
    .site-header .header-search { display: none; }
}
/* 769〜960px はナビが入りきらないため、スマホと同じくメニューボタンにまとめる（無料登録は出したまま） */
@media (max-width: 960px) and (min-width: 769px) {
    .site-header .header-nav { display: none; }
    .site-header .lang-switcher { display: none; }
    .site-header .hamburger-btn { display: flex; }
}
/* ---------- フッターの段組み ----------
   旧: ロゴ欄(340px)＋5列(最小136px)を横一列に並べ、PC幅でも右端の「関連サイト」がはみ出していた。
   ロゴ欄を上段に置き、リンクは下段で均等な列にする。 */
@media (min-width: 769px) {
    .site-footer .footer-top { flex-direction: column; gap: 36px; }
    .site-footer .footer-brand { max-width: 640px; }
    .site-footer .footer-nav { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 28px; justify-content: stretch; }
    .site-footer .footer-col { min-width: 0; }
}
@media (min-width: 769px) and (max-width: 1024px) {
    .site-footer .footer-nav { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
/* ---------- 地域・会社ページの横長カード（.job-card--listing・PHP は触らない）を v2 カードの給与表示に寄せる ----------
   旧: 給与が13px・1行で省略され、スマホで右端が切れていた */
.job-card--listing .job-card-salary-tag {
    white-space: normal; word-break: break-word; overflow: visible;
    padding: 8px 12px; border-radius: 10px; line-height: 1.5;
    background: var(--hv2-amber-bg); color: var(--text-primary);
    font-family: var(--font-sans); font-size: 16px; font-weight: 900;
}
.job-card--listing .job-card-closed-tag { background: var(--bg-surface); color: var(--text-secondary); }
.job-card--listing .job-card-title { font-weight: 900; }
.job-card--listing .job-card-company { font-weight: 700; color: var(--text-secondary); }
.job-card--listing:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }

/* 直前の濃紺の CTA 帯とフッターの境目を細い線で示す */
.site-footer { border-top: 1px solid var(--sk-navy-line); }

/* SKIN_V2_2026_10_13 ここまで */

/* ============================================================
   SKIN_V2B_2026_10_13 残りのページの見た目をトップ（HOME_V2）と同じ型に揃える（第2弾）
   - ページ上部: 共通の濃紺の帯（includes/page-hero.php・.ph-hero）。手本は都道府県ページの .area-hero
   - 求人カード: includes/job-card-v2.php（.hv2-job）を地域・会社・資格・業態・詳細の関連・お気に入りでも使う
   - 節の見出し: 各ページ固有の h2 を、トップの .hv2-h2（濃紺の角丸チップ＋Lucide＋900）と同じ見た目に
   - 情報ボックス・比較表・FAQ の折りたたみ: 角丸10〜12px・枠 #E2E8F0（= var(--border)）・見出し700
   共有 style.css・page 別 CSS（area/article/landing-pages）は触らず、ここで上書きする。既存区画は消さない。
   ============================================================ */

/* ---------- ページ上部の帯（.ph-hero） ---------- */
/* 帯を中に置いた外枠は、固定ヘッダー分の上余白を帯の側に持たせる */
body .ph-host { padding-top: 0; }
.ph-hero {
    background: var(--sk-navy); color: var(--sk-on-navy);
    padding: calc(var(--header-h) + 24px) 0 32px;
    margin-bottom: 40px;
    font-family: var(--font-sans);
}
.ph-hero-inner { min-width: 0; }
.ph-crumbs { margin: 0 0 18px; font-size: 14px; line-height: 1.6; color: var(--sk-on-navy-dim); }
.ph-crumbs-list { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 0; margin: 0; padding: 0; list-style: none; }
.ph-crumbs-item { display: inline-flex; align-items: center; min-width: 0; }
.ph-crumbs-item + .ph-crumbs-item::before { content: "/"; margin: 0 8px; color: var(--sk-on-navy-mute); }
.ph-crumbs a {
    color: #E2E8F0; text-decoration: underline; text-underline-offset: 3px;
    text-decoration-color: rgba(245, 158, 11, 0.6);
}
.ph-crumbs a:hover { color: var(--sk-amber-hi); }
.ph-crumbs [aria-current] { color: var(--sk-on-navy-dim); font-weight: 700; }
.ph-hero a:focus-visible { outline: 3px solid var(--sk-amber-hi); outline-offset: 2px; }
.ph-title {
    display: flex; align-items: center; gap: 14px;
    margin: 0 0 14px;
    font-family: var(--font-display); font-size: 34px; line-height: 1.3; font-weight: 900;
    color: var(--sk-on-navy); letter-spacing: 0.01em;
    overflow-wrap: anywhere;
}
.ph-title .lucide-icon {
    width: 44px; height: 44px; padding: 9px; flex-shrink: 0;
    border-radius: 10px; background: var(--sk-amber); color: var(--sk-navy);
}
.ph-title-text { min-width: 0; }
.ph-lead { margin: 0; max-width: 48em; font-size: 16px; line-height: 1.8; color: var(--sk-on-navy-dim); }
.ph-lead a { color: #fff; text-decoration: underline; text-decoration-color: var(--sk-amber); text-underline-offset: 3px; }
.ph-lead a:hover { color: var(--sk-amber-hi); }
.ph-lead strong { color: var(--sk-on-navy); }
.ph-note { margin: 10px 0 0; font-size: 14px; color: var(--sk-on-navy-mute); }
.ph-stats { display: flex; flex-wrap: wrap; gap: 12px; margin: 20px 0 0; padding: 0; list-style: none; }
.ph-stat {
    display: flex; flex-direction: column; gap: 2px;
    padding: 10px 16px; min-width: 0;
    background: var(--sk-navy-2); border: 1px solid var(--sk-navy-line); border-radius: 10px;
    font-size: 14px; color: var(--sk-on-navy-dim);
}
.ph-stat-value { font-size: 22px; line-height: 1.2; font-weight: 900; color: var(--sk-amber); font-variant-numeric: tabular-nums; }
.ph-stat--meta { display: block; font-size: 15px; line-height: 1.6; max-width: 100%; }
.ph-stat--meta strong { margin-right: 4px; font-weight: 900; color: var(--sk-amber-hi); }
.ph-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 22px; }
.ph-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    min-height: 52px; padding: 0 24px; border-radius: 10px;
    font-size: 17px; font-weight: 900; text-decoration: none;
}
.ph-btn .lucide-icon { width: 20px; height: 20px; }
.ph-btn--primary { background: var(--sk-amber); border: 2px solid var(--sk-amber); color: var(--sk-navy); }
.ph-btn--primary:hover { background: var(--sk-amber-hi); border-color: var(--sk-amber-hi); color: var(--sk-navy); }
.ph-btn--outline { background: transparent; border: 2px solid var(--sk-on-navy-dim); color: var(--sk-on-navy); }
.ph-btn--outline:hover { background: rgba(248, 250, 252, 0.10); border-color: #fff; color: #fff; }
@media (max-width: 768px) {
    .ph-hero { padding: calc(var(--header-h) + 18px) 0 26px; margin-bottom: 28px; }
    .ph-title { font-size: 26px; gap: 10px; }
    .ph-title .lucide-icon { width: 38px; height: 38px; padding: 8px; }
    .ph-stats { gap: 8px; }
    .ph-stat { padding: 8px 12px; }
    .ph-stat-value { font-size: 19px; }
    .ph-actions .ph-btn { flex: 1 1 100%; }
}

/* ---------- 地域ページの帯の中身の幅を、ほかのページ（.container）と揃える ---------- */
body .area-hero { margin-bottom: 40px; padding-bottom: 32px; }
body .area-hero-inner { max-width: var(--container); padding: 0 20px; }
body .area-hero-title { font-size: 34px; font-weight: 900; color: var(--sk-on-navy); }
body .area-hero-stats { gap: 12px; }
body .area-hero-stat { padding: 10px 16px; }
body .area-hero-stat strong { font-size: 22px; }
@media (max-width: 768px) {
    body .area-hero-title { font-size: 26px; }
}

/* ---------- 節の見出し（トップの .hv2-h2 と同じ見た目） ---------- */
.cat-guide-title, body .area-section-title, .about-section-title, .faq-group-title,
.related-title, .list-related-title, .company-section-title, body .area-region-title,
body .robot-articles-heading {
    display: flex; align-items: center; gap: 12px;
    margin: 0 0 20px; padding: 0; border: 0;
    font-family: var(--font-display); font-size: 26px; line-height: 1.35; font-weight: 900;
    color: var(--text-primary); letter-spacing: 0.01em;
}
.cat-guide-title .lucide-icon, body .area-section-title .lucide-icon, .about-section-title .lucide-icon,
.faq-group-title .lucide-icon, .related-title .lucide-icon, .list-related-title .lucide-icon,
.company-section-title .lucide-icon, body .area-region-title .lucide-icon, body .robot-articles-heading .lucide-icon,
.company-section-title svg {
    width: 40px; height: 40px; padding: 8px; flex-shrink: 0;
    border-radius: 10px; background: var(--sk-navy); color: var(--sk-amber);
}
/* アイコンの無い見出しは、同じ位置に濃紺のチップ（アンバーの縦棒）を置いて揃える */
.about-section-title:not(:has(.lucide-icon)):not(:has(svg))::before,
.legal-body h2::before {
    content: ""; flex-shrink: 0;
    width: 12px; height: 32px; border-radius: 6px;
    background: var(--sk-navy); box-shadow: inset 4px 0 0 var(--sk-amber);
}
.legal-body h2 {
    display: flex; align-items: center; gap: 12px;
    margin: 40px 0 14px; padding: 0; border: 0;
    font-family: var(--font-display); font-size: 22px; line-height: 1.4; font-weight: 900; color: var(--text-primary);
}
.legal-body > p, .legal-body li { font-size: 16px; line-height: 1.85; }
/* 見出しの横の件数バッジ（旧: ティール） */
.area-job-count-badge, .industry-job-count, .company-job-count {
    display: inline-flex; align-items: center; min-height: 28px; padding: 0 10px; margin-left: 4px;
    border-radius: 999px; background: var(--hv2-amber-bg); color: var(--hv2-amber-ink);
    font-size: 15px; font-weight: 900; border: 0;
}
/* 小さい箱の中の見出し（問い合わせ・登録フォームの横の案内、求人詳細の各ブロック） */
.contact-info-title, .form-section-title, .detail-card-title, .entry-consent-title {
    display: flex; align-items: center; gap: 10px;
    font-family: var(--font-display); font-size: 18px; line-height: 1.4; font-weight: 900; color: var(--text-primary);
}
.contact-info-title .lucide-icon, .form-section-title .lucide-icon, .detail-card-title .lucide-icon {
    width: 32px; height: 32px; padding: 7px; flex-shrink: 0;
    border-radius: 8px; background: var(--sk-navy); color: var(--sk-amber);
}
@media (max-width: 768px) {
    .cat-guide-title, body .area-section-title, .about-section-title, .faq-group-title,
    .related-title, .list-related-title, .company-section-title, body .area-region-title,
    body .robot-articles-heading { font-size: 22px; gap: 10px; }
    .cat-guide-title .lucide-icon, body .area-section-title .lucide-icon, .about-section-title .lucide-icon,
    .faq-group-title .lucide-icon, .related-title .lucide-icon, .list-related-title .lucide-icon,
    .company-section-title .lucide-icon, body .area-region-title .lucide-icon, body .robot-articles-heading .lucide-icon,
    .company-section-title svg { width: 36px; height: 36px; padding: 7px; }
    .legal-body h2 { font-size: 20px; }
}

/* ---------- 情報ボックス（角丸12px・枠 var(--border)・白地は変数） ---------- */
.cat-guide, body .area-section, .company-section, .contact-info-card, .about-pillar,
.hub-card, .company-list-card, .faq-cta-wrap, .industry-jobs-empty, body .area-jobs-empty {
    border-radius: 12px; border: 1px solid var(--border); background: var(--bg-primary);
    box-shadow: none;
}
.cat-guide { padding: 28px 32px; }
body .area-section { padding: 28px 32px; }
.industry-jobs, .hub-section, .cat-related-section { margin-top: 48px; }
.cat-guide-text, body .area-adoption-text, body .area-outlook-text, .about-section-body,
.company-section-body, .hub-card-detail { font-size: 16px; line-height: 1.85; color: var(--text-primary); }
body .area-industry-item, body .area-profile-item, .cat-related-card, .skill-career-path {
    border-radius: 10px; border-color: var(--border); background: var(--bg-secondary);
}
body .area-industry-item-name { color: var(--hv2-amber-ink); font-weight: 900; font-size: 16px; }
body .area-industry-item-text { font-size: 15px; line-height: 1.75; color: var(--text-secondary); }
body .area-profile-label { font-size: 14px; font-weight: 700; color: var(--text-secondary); }
body .area-profile-value { font-size: 22px; font-weight: 900; color: var(--text-primary); }
body .area-tips-list li { font-size: 16px; line-height: 1.8; }
/* 地域・市区町村・業態のチップ（旧: ティールのピル） */
body .area-related-link, body .area-nearby-link, body .area-city-card {
    display: inline-flex; align-items: center; gap: 6px;
    min-height: 44px; padding: 0 14px;
    border: 1px solid var(--border); border-radius: 10px;
    background: var(--bg-primary); color: var(--text-primary);
    font-size: 15px; font-weight: 700; text-decoration: none;
}
body .area-related-link .lucide-icon, body .area-nearby-link .lucide-icon { width: 16px; height: 16px; color: var(--hv2-amber-ink); }
body .area-related-link:hover, body .area-nearby-link:hover, body .area-city-card:hover {
    border-color: var(--hv2-amber); background: var(--hv2-amber-bg); color: var(--text-primary);
}
body .area-city-card { justify-content: space-between; }
body .area-city-card-pop { font-size: 13px; font-weight: 700; color: var(--text-secondary); }
body .area-pref-card { border-radius: 12px; border: 1px solid var(--border); background: var(--bg-primary); }
body .area-pref-card:hover { border-color: var(--hv2-amber); box-shadow: var(--shadow-md); }
body .area-pref-card-name { font-weight: 900; color: var(--text-primary); }
body .area-pref-card-jobs { color: var(--hv2-amber-ink); font-weight: 900; }
.hub-card-title, .company-list-card-name { font-weight: 900; }
.hub-card-link { color: var(--text-primary); font-weight: 900; }

.industry-intro-body p { font-size: 16px; line-height: 1.85; color: var(--text-primary); }
.about-list li { font-size: 16px; line-height: 1.75; }
.skill-usecase-title, .cat-related-card-name { font-weight: 900; font-size: 16px; }
.skill-usecase-detail, .cat-related-card-meta, .hub-card-desc, .hub-card-detail { font-size: 15px; line-height: 1.7; }
.skill-usecase-card { border-radius: 10px; border: 1px solid var(--border); }

/* 総合ページの「最新求人」見出し: 右端の「すべて見る」がスマホで見出しを縦に崩していた */
.hub-latest-jobs .cat-guide-title { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; }
.hub-view-all-link { font-size: 15px; font-weight: 700; color: var(--hv2-amber-ink); }
@media (max-width: 600px) {
    .hub-latest-jobs .cat-guide-title { grid-template-columns: auto minmax(0, 1fr); }
    .hub-view-all-link { grid-column: 2; justify-self: start; display: inline-flex; align-items: center; min-height: 44px; }
}

/* 会社一覧: 絞り込みが出ない（国が1つだけ）とき、空の左列で一覧が右へ寄っていた */
.joblist-sidebar:not(:has(*)) + .joblist-main { grid-column: 1 / -1; }
.joblist-sidebar:not(:has(*)) { display: none; }
.hub-card-meta { font-size: 14px; color: var(--text-secondary); }
/* 会社一覧のカード: スマホでは2列だと1行4〜5文字で読みにくいため1列に */
@media (max-width: 600px) { .hub-grid--maker { grid-template-columns: minmax(0, 1fr); } }

/* ---------- 比較表・項目表 ---------- */
.skill-comparison-table-wrap { border-radius: 12px; border: 1px solid var(--border); overflow-x: auto; }
.skill-comparison-table { font-size: 16px; }
.skill-comparison-table thead tr { background: var(--bg-secondary); }
.skill-comparison-table th { font-size: 15px; font-weight: 700; color: var(--text-primary); border-bottom: 1px solid var(--border); }
.skill-comparison-table td { border-bottom-color: var(--border); }
.spec-row { border-bottom-color: var(--border); padding: 12px 0; }
.spec-row dt { font-size: 15px; font-weight: 700; color: var(--text-secondary); }
.spec-row dd { font-size: 16px; line-height: 1.7; }
.company-info-table, .legal-table { border: 1px solid var(--border); border-radius: 12px; padding: 4px 20px; background: var(--bg-primary); }

/* ---------- FAQ の折りたたみ（角丸カード） ---------- */
.faq-item { border: 1px solid var(--border); border-radius: 12px; margin-bottom: 12px; background: var(--bg-primary); overflow: hidden; }
.faq-question {
    min-height: 60px; padding: 14px 20px; gap: 12px;
    font-size: 16px; font-weight: 700; line-height: 1.6; color: var(--text-primary);
}
.faq-question::before {
    content: "Q"; width: 30px; height: 30px; border-radius: 8px;
    background: var(--sk-navy); color: var(--sk-amber); font-size: 15px; font-weight: 900; font-family: var(--font-sans);
}
/* ボタン式（.faq-q-icon と chevron を自前で持つ）は疑似要素の Q と矢印を出さない（旧: Q が二重に出ていた） */
.faq-question:has(.faq-q-icon)::before,
.faq-question:has(.faq-toggle-icon)::after { content: none; display: none; }
.faq-q-icon {
    display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
    width: 30px; height: 30px; border-radius: 8px;
    background: var(--sk-navy); color: var(--sk-amber);
    font-size: 15px; font-weight: 900; font-family: var(--font-sans);
}
.faq-q-text { flex: 1 1 auto; min-width: 0; }
.faq-toggle-icon { margin-left: auto; flex-shrink: 0; width: 20px; height: 20px; color: var(--text-secondary); transition: transform var(--transition); }
.faq-question.open .faq-toggle-icon { transform: rotate(180deg); }
.faq-question:hover { background: var(--bg-secondary); }
.faq-question.open, details.faq-item[open] > .faq-question { background: var(--hv2-amber-bg); color: var(--text-primary); }
/* ボタン式は開いた答えだけ出す（開閉は assets/js/app.js が .open を付ける） */
.faq-item > button.faq-question + .faq-answer:not(.open) { display: none; }
.faq-answer {
    padding: 16px 20px 20px 62px; border-top: 1px solid var(--border);
    background: var(--bg-primary); font-size: 16px; line-height: 1.85; color: var(--text-primary);
}
.faq-answer p { font-size: 16px; line-height: 1.85; }
.faq-answer::before { content: "A"; left: 26px; top: 16px; color: var(--hv2-amber-ink); font-size: 18px; font-weight: 900; font-family: var(--font-sans); }
.faq-answer a { color: var(--hv2-amber-ink); font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }
/* FAQ ページの分類ボタン（旧: 小さな丸いピル） */
.faq-categories { justify-content: flex-start; gap: 8px; margin-bottom: 32px; }
.faq-cat-btn {
    min-height: 44px; padding: 8px 16px;
    border: 2px solid var(--border); border-radius: 10px;
    background: var(--bg-primary); color: var(--text-primary);
    font-size: 15px; font-weight: 700;
}
.faq-cat-btn:hover { border-color: var(--hv2-amber); color: var(--text-primary); }
.faq-cat-btn.active { border-color: var(--hv2-amber); background: var(--hv2-amber-bg); color: var(--text-primary); font-weight: 900; }
.faq-group { margin-bottom: 40px; }
@media (max-width: 600px) {
    .faq-question { padding: 12px 14px; }
    .faq-answer { padding: 14px 14px 16px 52px; }
    .faq-answer::before { left: 20px; }
}

/* ---------- コラム一覧のカード（トップのコラム3本と同じ） ---------- */
.articles-list-page .articles-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.articles-list-page .article-card { border-radius: 14px; border: 1px solid var(--border); }
.articles-list-page .article-card:hover { border-color: var(--hv2-amber); box-shadow: var(--shadow-md); }
.articles-list-page .article-card-title { font-size: 17px; font-weight: 900; line-height: 1.5; color: var(--text-primary); }
.articles-list-page .article-card-desc { font-size: 16px; line-height: 1.7; }
.articles-list-page .article-card-date { display: inline-flex; align-items: center; gap: 4px; font-size: 14px; color: var(--text-secondary); }
.articles-list-page .article-card-date .lucide-icon { width: 14px; height: 14px; }
/* 分類の絞り込み（トップの職種タブと同じ四角いボタン） */
.articles-list-page .article-filter { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 28px; }
.articles-list-page .filter-chip {
    display: inline-flex; align-items: center; gap: 6px;
    min-height: 44px; padding: 0 14px;
    border: 2px solid var(--border); border-radius: 10px;
    background: var(--bg-primary); color: var(--text-primary);
    font-size: 15px; font-weight: 700; text-decoration: none;
}
.articles-list-page .filter-chip .lucide-icon { width: 16px; height: 16px; color: var(--text-secondary); }
.articles-list-page .filter-chip:hover { border-color: var(--hv2-amber); color: var(--text-primary); }
.articles-list-page .filter-chip.active { border-color: var(--hv2-amber); background: var(--hv2-amber-bg); color: var(--text-primary); font-weight: 900; }
.articles-list-page .filter-chip.active .lucide-icon { color: var(--hv2-amber-ink); }
.articles-list-page .filter-count {
    display: inline-flex; align-items: center; justify-content: center; min-width: 24px; height: 22px; padding: 0 6px;
    border-radius: 999px; background: var(--bg-secondary); color: var(--text-secondary); font-size: 13px; font-weight: 700;
}
.articles-list-page .filter-chip.active .filter-count { background: var(--bg-primary); color: var(--text-primary); }
@media (max-width: 900px) { .articles-list-page .articles-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .articles-list-page .articles-grid { grid-template-columns: 1fr; } }

/* ---------- 求人カードの並び（地域・会社・資格・業態・詳細の関連・お気に入り） ---------- */
.hv2-jobs--listing { gap: 16px; }
body .area-section .hv2-jobs--listing, .industry-jobs .hv2-jobs--listing { margin-bottom: 24px; }
.hv2-jobs--related { margin-bottom: 20px; }
.fav-item { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.fav-item > .hv2-job { flex: 1 1 auto; }
.fav-item--closed > .hv2-job { opacity: 0.8; }
.fav-item-foot { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-size: 14px; color: var(--text-secondary); }
.fav-item-foot .fav-remove-form { margin-left: auto; }
.fav-item-foot .btn-fav-remove { min-width: 44px; min-height: 44px; border-radius: 10px; }
@media (max-width: 600px) {
    body .area-section, .cat-guide { padding: 20px 16px; }
}

/* ---------- ログイン・会員登録（帯の下のフォームの箱） ---------- */
.auth-section--v2b { padding: 0 16px 64px; background: var(--bg-primary); }
.auth-section--v2b .auth-container { width: 100%; max-width: 480px; margin: 0 auto; }
.auth-section--v2b .auth-card {
    padding: 32px 28px; border: 1px solid var(--border); border-radius: 12px;
    background: var(--bg-primary); box-shadow: 0 10px 24px -16px rgba(15, 27, 51, 0.30);
}
.auth-section--v2b .auth-form { display: flex; flex-direction: column; gap: 18px; }
.auth-section--v2b .form-group { margin-bottom: 0; }
.auth-section--v2b .form-label { font-size: 15px; font-weight: 700; }
.auth-section--v2b .form-input {
    width: 100%; min-height: 48px; padding: 10px 14px;
    border: 2px solid var(--border); border-radius: 10px;
    background: var(--bg-primary); color: var(--text-primary); font-size: 16px;
}
.auth-section--v2b .form-input:focus { border-color: var(--accent); }
.auth-section--v2b .input-password-wrap { position: relative; }
.auth-section--v2b .btn-pw-toggle {
    position: absolute; right: 2px; top: 50%; transform: translateY(-50%);
    min-width: 44px; min-height: 44px; border: 0; background: transparent; color: var(--text-secondary);
}
.auth-section--v2b .form-check-label { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; font-size: 15px; }
.auth-section--v2b .btn { width: 100%; }
.auth-section--v2b .auth-links { margin-top: 20px; display: flex; flex-direction: column; gap: 8px; text-align: center; font-size: 15px; }
.auth-section--v2b .auth-links a { color: var(--hv2-amber-ink); font-weight: 700; }
.auth-section--v2b .form-error { margin-top: 6px; font-size: 14px; color: #B91C1C; }
@media (max-width: 600px) { .auth-section--v2b .auth-card { padding: 22px 16px; } }

/* ---------- 配信停止（素のボタンを主ボタンの見た目に） ---------- */
.unsubscribe-page > .container p { font-size: 16px; line-height: 1.85; margin-bottom: 14px; }
.unsubscribe-page > .container a { color: var(--hv2-amber-ink); font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }
.unsubscribe-page button[type="submit"] {
    display: inline-flex; align-items: center; justify-content: center;
    min-height: 48px; padding: 0 24px; border: 0; border-radius: 10px;
    background: #B45309; color: #fff; font-family: var(--font-sans); font-size: 16px; font-weight: 900; cursor: pointer;
}
.unsubscribe-page button[type="submit"]:hover { background: #92400E; }

/* ---------- 記事本文（includes/article-template.php）: 帯は入れず、パンくずと h1 の書体・色だけ揃える ---------- */
/* article.css は site-custom.css より後に読まれるため body を付けて詳細度を上げる */
body .article-title { font-family: var(--font-display); font-size: 32px; font-weight: 900; line-height: 1.4; color: var(--text-primary); }
body .article-breadcrumb { font-size: 14px; color: var(--text-secondary); }
body .article-breadcrumb a { color: var(--text-secondary); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: rgba(180, 83, 9, 0.5); }
body .article-breadcrumb a:hover { color: var(--hv2-amber-ink); }
body .article-breadcrumb [aria-current] { color: var(--text-primary); font-weight: 700; }
@media (max-width: 768px) { body .article-title { font-size: 25px; } }

/* ---------- ダークモード: 新しい部品は変数で塗るため、area.css の白地の直書きだけ上書き ---------- */
:root[data-theme="dark"] body .area-section,
:root[data-theme="dark"] body .area-pref-card { background: var(--bg-primary); }
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) body .area-section,
    :root:not([data-theme="light"]) body .area-pref-card { background: var(--bg-primary); }
}

/* ---------- スマホの横はみ出し（第2弾の検収で見つけたもの） ---------- */
/* 問い合わせ: 2列（1fr＋280px）のままスマホでも並び、右の案内が画面外へ出ていた */
@media (max-width: 900px) {
    .contact-grid { grid-template-columns: minmax(0, 1fr); gap: 24px; }
    .contact-info { position: static; }
}
@media (max-width: 600px) { .contact-form-wrap { padding: 20px 16px; } }
/* 会社概要などの項目表: 長いURL・メールアドレスで右へはみ出さないように */
.spec-row { min-width: 0; }
.spec-row dd { min-width: 0; overflow-wrap: anywhere; }
@media (max-width: 600px) {
    .spec-row { flex-direction: column; gap: 4px; }
    .spec-row dt { flex: none; }
}

/* SKIN_V2B_2026_10_13 ここまで */

/* SKIN_V2C_2026_10_13 FAQ 末尾の案内箱: 白地に白文字で見えなかった（共有 .article-cta の白文字が残る）。文字を本文色に */
.faq-cta-wrap { text-align: center; padding: 32px 24px; }
.faq-cta-wrap .article-cta-title { font-size: 20px; font-weight: 900; color: var(--text-primary); margin: 0 0 8px; }
.faq-cta-wrap .article-cta-desc { font-size: 16px; color: var(--text-secondary); margin: 0 0 18px; }
.faq-cta-wrap .btn { background: var(--accent); color: #ffffff; border: 0; }
.faq-cta-wrap .btn:hover { background: var(--accent-dark); color: #ffffff; }

/* ============================================================
   SKIN_V3_2026_10_13 配色の刷新「若くて清潔」（齊木さん: 濃紺×アンバーは「じじくさい・高級感はいらない」）
   白地＋淡い空色の面、主色は澄んだ青 #1B7FE6、給与の帯だけ柔らかい黄色（複製元の名残・色はそのまま）。
   濃紺の面（ヒーロー・年収の帯・ヘッダー・フッター）を全部明るい面に置き換える。変数の上書きだけで全ページに効く。
   ============================================================ */
:root {
    --hv2-navy: #E8F2FC;          /* 旧: 濃紺の面 → 淡い空色 */
    --hv2-navy-2: #FFFFFF;
    --hv2-navy-line: #CFE0F3;
    --hv2-ink: #16263B;           /* 明るい面の上の文字 */
    --hv2-ink-dim: #4A5B70;
    --hv2-amber: #1B7FE6;         /* 旧: アンバー → 主色の青 */
    --hv2-amber-hi: #3B93EE;
    --hv2-amber-ink: #125FB3;
    --hv2-amber-bg: #E6F1FD;
    --sk-navy: #FFFFFF;           /* ヘッダー */
    --sk-navy-2: #F3F7FC;
    --sk-navy-line: #DCE6F2;
    --sk-footer: #F3F6FA;         /* フッター */
    --sk-on-navy: #16263B;
    --sk-on-navy-dim: #4A5B70;
    --sk-on-navy-mute: #64748B;
    --sk-amber: #1B7FE6;
    --sk-amber-hi: #3B93EE;
    --sk-amber-ring: rgba(27,127,230,0.25);
    --accent: #1B7FE6;
    --accent-dark: #125FB3;
    --accent-light: #E6F1FD;
    --color-primary: #1B7FE6;
    --color-primary-dark: #125FB3;
    --bg-secondary: #F5F9FD;
    --bg-surface: #EEF4FB;
    --text-primary: #16263B;
    --radius-sm: 12px; --radius-md: 12px; --radius-lg: 16px; --radius-xl: 16px;
    --v3-yellow-bg: #FFF6D6;      /* 給与の帯（柔らかい黄色） */
    --v3-yellow-ink: #6B4E00;
}
/* 見出しは 900 → 800 で軽く */
.hv2-h2, .hv2-title, .hv2-stat-num, .page-hero h1, .hv2-search-title { font-weight: 800; }
h1, h2, h3 { font-weight: 800; }
/* ヘッダー: 白・下線・ボタンは青 */
.site-header { background: rgba(255,255,255,0.96); border-bottom: 1px solid #E3EAF3; box-shadow: 0 1px 0 rgba(22,38,59,0.04); }
.site-header .header-search-input { background: #F3F7FC; border-color: #DCE6F2; color: #16263B; }
.site-header .btn-outline { border-color: #CBD5E1; color: #16263B; }
.site-header .btn-primary, .site-header .header-cta { background: #1B7FE6; color: #fff; }
.site-header .nav-link:hover { color: #1B7FE6; }
/* ヒーロー: 淡い空色のグラデ・イラストは横長・溶かし処理を外す */
.hv2-hero { background: linear-gradient(180deg, #E8F2FC 0%, #F6FAFE 100%); }
.hv2-hero-inner { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; }
.hv2-eyebrow { background: #fff; border-color: #CFE0F3; color: #125FB3; }
.hv2-title { font-size: 46px; }
.hv2-title-line--accent { color: #1B7FE6; }
.hv2-choice { background: #fff; border-color: #DCE6F2; box-shadow: 0 8px 24px rgba(22,38,59,0.06); }
.hv2-choice-btn { border-color: #CBD5E1; color: #16263B; }
.hv2-choice-btn:hover { background: #F3F7FC; border-color: #1B7FE6; color: #125FB3; }
.hv2-choice-btn--primary, .hv2-choice-btn--primary:hover { color: #fff; }
.hv2-sublink { text-decoration-color: #1B7FE6; }
.hv2-hero-photo img { max-width: 560px; margin: 0 auto; -webkit-mask-image: none; mask-image: none; }
.hv2-hero-photo::before, .hv2-hero-photo::after { display: none; }
/* 検索ボタン・見出しのチップ */
.hv2-search-btn { background: #1B7FE6; color: #fff; }
.hv2-search-btn .lucide-icon { color: #fff; }
.hv2-search-btn:hover { background: #125FB3; }
.hv2-h2 .lucide-icon { background: #E6F1FD; color: #1B7FE6; }
.hv2-h2--dark .lucide-icon { background: #1B7FE6; color: #fff; }
/* 年収の帯: 淡い空色の面に白いカード */
.hv2-wage { background: #E8F2FC; }
.hv2-wage-col { background: #fff; border-color: #CFE0F3; }
/* 給与の帯だけ柔らかい黄色 */
.hv2-job-salary { background: var(--v3-yellow-bg); }
.hv2-job-salary-label { color: var(--v3-yellow-ink); }
.hv2-job-salary-label .lucide-icon { color: var(--v3-yellow-ink); }
/* ボタン全般: 青 */
.btn-primary { background: #1B7FE6; color: #fff; }
.btn-primary:hover { background: #125FB3; color: #fff; }
.unsubscribe-page button[type="submit"] { background: #1B7FE6; }
.unsubscribe-page button[type="submit"]:hover { background: #125FB3; }
.faq-cta-wrap .btn { background: #1B7FE6; }
.faq-cta-wrap .btn:hover { background: #125FB3; }
/* フッター: 明るい灰に濃い文字 */
.site-footer { background: #F3F6FA; color: #4A5B70; border-top: 1px solid #DCE6F2; }
.site-footer a:hover { color: #1B7FE6; }
.site-footer .header-logo-svg, .site-footer .footer-logo-svg { color: #16263B; }
/* SKIN_V3 追記: ヘッダーの文字が薄かった／イラストの白地を角丸カードに */
.site-header .nav-link { color: #16263B; }
.site-header .nav-link:hover { color: #1B7FE6; }
.site-header .lang-switcher__btn { color: #16263B; border-color: #CBD5E1; background: #fff; }
.site-header .lang-switcher__btn .lucide-icon { color: #16263B; }
.site-header .hamburger-btn { color: #16263B; border-color: #CBD5E1; }
.site-header .header-search-icon { color: #64748B; }
.hv2-hero-photo img { border-radius: 20px; box-shadow: 0 12px 32px rgba(22,38,59,0.10); background: #fff; }
.mobile-menu, .mobile-menu-panel { background: #fff; color: #16263B; }
/* SKIN_V3 追記2: 明るい地に合わせた page-hero の文字・パンくず・チップ／スマホ幅のヒーロー1列 */
.ph-hero { background: linear-gradient(180deg, #E8F2FC 0%, #F6FAFE 100%); border-bottom: 1px solid #DCE6F2; }
.ph-crumbs a { color: #4A5B70; text-decoration-color: rgba(27,127,230,0.45); }
.ph-crumbs a:hover { color: #1B7FE6; }
.ph-crumbs [aria-current] { color: #16263B; }
.ph-title .lucide-icon { background: #1B7FE6; color: #fff; }
.ph-lead a { color: #125FB3; text-decoration-color: #1B7FE6; }
.ph-lead a:hover { color: #1B7FE6; }
.ph-stat { background: #fff; border-color: #CFE0F3; color: #4A5B70; }
.ph-stat-value { color: #125FB3; }
.ph-stat--meta strong { color: #125FB3; }
body .area-hero-breadcrumb a { color: #4A5B70; text-decoration-color: rgba(27,127,230,0.45); }
body .area-hero-breadcrumb a:hover { color: #1B7FE6; }
@media (max-width: 1024px) {
    .hv2-hero-inner { grid-template-columns: minmax(0, 1fr) minmax(0, 0.9fr); }
}
@media (max-width: 768px) {
    .hv2-hero-inner { grid-template-columns: 1fr; gap: 20px; }
    .hv2-hero-photo { display: block; order: -1; }
    .hv2-hero-photo img { max-width: 100%; border-radius: 16px; }
    .hv2-title { font-size: 34px; }
    .hv2-eyebrow { font-size: 14px; padding: 5px 12px; }
    .hv2-choice-btns { grid-template-columns: 1fr; }
    .hv2-choice-btn { font-size: 16px; }
}
@media (max-width: 600px) {
    .hv2-hero-photo { display: block; }
    .hv2-title { font-size: 30px; }
}
/* SKIN_V3 写真風ヒーロー（A案）: 角丸・注記 */
.hv2-hero-photo img { border-radius: 20px; object-fit: cover; aspect-ratio: 3 / 2; }
.hv2-photo-note { margin: 6px 4px 0; font-size: 12px; color: #64748B; text-align: right; }
/* SKIN_V3 職種タイルに写真（A案） */
.hv2-cat--photo { display: grid; grid-template-columns: auto 1fr auto; grid-template-areas: "photo photo photo" "icon name go" "icon count go"; padding: 0 0 16px; overflow: hidden; }
.hv2-cat--photo .hv2-cat-photo { grid-area: photo; width: 100%; aspect-ratio: 3 / 2; object-fit: cover; display: block; margin-bottom: 14px; }
.hv2-cat--photo .hv2-cat-icon { grid-area: icon; margin-left: 16px; }
.hv2-cat--photo .hv2-cat-name { grid-area: name; padding: 0 8px 0 12px; }
.hv2-cat--photo .hv2-cat-count { grid-area: count; padding: 0 8px 0 12px; }
.hv2-cat--photo .hv2-cat-go { grid-area: go; margin-right: 16px; align-self: center; }
/* SKIN_V3 ヒーローを全幅の背景写真に（齊木さん「ヒーローっぽくない」） */
.hv2-hero--bg { position: relative; background: #DDEBF8 url('../images/hero-wide.webp') right center / cover no-repeat; min-height: 600px; display: flex; align-items: center; }
.hv2-hero--bg::before { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(255,255,255,0.94) 0%, rgba(255,255,255,0.86) 34%, rgba(255,255,255,0.15) 58%, rgba(255,255,255,0) 72%); pointer-events: none; }
.hv2-hero--bg > .container { position: relative; z-index: 1; width: 100%; }
.hv2-hero--bg .hv2-hero-inner { grid-template-columns: minmax(0, 560px) 1fr; }
.hv2-hero--bg .hv2-hero-photo { visibility: hidden; }
.hv2-hero--bg .hv2-photo-note { position: absolute; right: 16px; bottom: 132px; z-index: 1; margin: 0; color: #fff; text-shadow: 0 1px 2px rgba(0,0,0,0.45); visibility: visible; }
.hv2-hero--bg .hv2-title { font-size: 52px; }
@media (max-width: 768px) {
    .hv2-hero--bg { background-image: url('../images/hero-wide-sm.webp'); background-position: 72% top; background-size: auto 340px; background-color: #F6FAFE; min-height: 0; padding-top: calc(var(--header-h) + 300px); display: block; }
    .hv2-hero--bg::before { background: linear-gradient(180deg, rgba(246,250,254,0) 0, rgba(246,250,254,0) 260px, #F6FAFE 340px); }
    .hv2-hero--bg .hv2-hero-inner { grid-template-columns: 1fr; }
    .hv2-hero--bg .hv2-hero-photo { display: none; }
    .hv2-hero--bg .hv2-title { font-size: 32px; }
}
/* SKIN_V3 ヒーロー背景の調整: 画像を全体表示寄りに・注記の位置 */
.hv2-hero--bg { background-size: auto 100%; background-position: right top; min-height: 640px; }
@media (min-width: 1500px) { .hv2-hero--bg { background-size: cover; background-position: right 20%; } }
@media (max-width: 768px) {
    .hv2-hero--bg { background-size: 100% auto; background-position: center top; padding-top: calc(var(--header-h) + 150px); }
    .hv2-hero--bg::before { background: linear-gradient(180deg, rgba(246,250,254,0) 0, rgba(246,250,254,0) 150px, #F6FAFE 230px); }
    .hv2-hero--bg .hv2-photo-note { top: calc(var(--header-h) + 140px); bottom: auto; right: 10px; font-size: 11px; }
}
@media (max-width: 768px) {
    .hv2-hero--bg { background-size: auto 260px; background-position: 80% calc(var(--header-h)); padding-top: calc(var(--header-h) + 250px); }
    .hv2-hero--bg::before { background: linear-gradient(180deg, rgba(246,250,254,0) 0, rgba(246,250,254,0) calc(var(--header-h) + 200px), #F6FAFE calc(var(--header-h) + 262px)); }
    .hv2-hero--bg .hv2-photo-note { top: calc(var(--header-h) + 236px); }
}

/* ============================================================
   QUIZ_2026_10_13 アンケート形式の登録導線（includes/quiz.php・assets/js/quiz.js）
   配色は SKIN_V3（主色 #1B7FE6・白地）。本文16px以上・ボタン高さ48px以上・フォーカス枠は消さない。
   開いた瞬間に全画面で覆わない: 下からのカードは画面の下1/3以内・PCは右下の小さなカード。
   ============================================================ */
.quiz { --qz-blue: #1B7FE6; --qz-blue-dk: #125FB3; --qz-ink: #16263B; --qz-dim: #4A5B70; --qz-line: #CBD5E1; --qz-soft: #F3F7FC; --qz-err: #B42318; font-size: 16px; color: var(--qz-ink); }
.quiz [hidden] { display: none !important; }
.quiz-hero { max-width: 560px; padding: 18px 18px 14px; }
.quiz-hero-title { margin: 0 0 10px; font-size: 18px; font-weight: 800; line-height: 1.5; color: #16263B; }
.quiz-head { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.quiz-count { flex-shrink: 0; margin: 0; font-size: 14px; font-weight: 700; color: var(--qz-dim); }
.quiz-bar { flex: 1; height: 8px; border-radius: 999px; background: #E3EAF3; overflow: hidden; }
.quiz-bar-fill { display: block; height: 100%; border-radius: 999px; background: var(--qz-blue); transition: width 0.25s ease; }
.quiz-bar-fill--1 { width: 20%; }
.quiz-bar-fill--2 { width: 40%; }
.quiz-bar-fill--3 { width: 60%; }
.quiz-bar-fill--4 { width: 80%; }
.quiz-bar-fill--5 { width: 100%; }
.quiz-q { margin: 0 0 6px; font-size: 20px; font-weight: 800; line-height: 1.45; color: var(--qz-ink); }
.quiz-q:focus { outline: none; }
.quiz-q:focus-visible { outline: 3px solid var(--qz-blue); outline-offset: 3px; border-radius: 4px; }
.quiz-hint { margin: 0 0 12px; font-size: 16px; line-height: 1.6; color: var(--qz-dim); }
.quiz-fieldset { margin: 0; padding: 0; border: 0; min-width: 0; }
.quiz-opts { display: grid; gap: 10px; margin-bottom: 12px; }
.quiz-opts--chips { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.quiz-opts--grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.quiz-opts--list { grid-template-columns: 1fr; }
/* 選択肢のボタン（単一選択はタップで次へ） */
.quiz-opt {
    display: flex; align-items: center; justify-content: center;
    min-height: 52px; padding: 8px 12px;
    border: 2px solid var(--qz-line, #CBD5E1); border-radius: 12px;
    background: #fff; color: #16263B;
    font-family: inherit; font-size: 16px; font-weight: 700; line-height: 1.4; text-align: center;
    cursor: pointer; transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.quiz-opts--list .quiz-opt { justify-content: flex-start; text-align: left; padding: 10px 16px; }
.quiz-opt:hover { background: #F3F7FC; border-color: #1B7FE6; color: #125FB3; }
.quiz-opt[aria-pressed="true"] { background: #E6F1FD; border-color: #1B7FE6; color: #125FB3; }
.quiz-opt:focus-visible, .quiz-next:focus-visible, .quiz-link-btn:focus-visible,
.quiz-sheet-close:focus-visible, .quiz-modal-close:focus-visible,
.quiz-form-link:focus-visible, .quiz-sheet-link:focus-visible,
.quiz-consent-more summary:focus-visible { outline: 3px solid #1B7FE6; outline-offset: 2px; }
/* 複数選択のチップ（チェックボックス） */
.quiz-chip { position: relative; display: block; cursor: pointer; }
.quiz-chip input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.quiz-chip-box {
    display: flex; align-items: center; gap: 8px;
    min-height: 52px; padding: 8px 12px;
    border: 2px solid #CBD5E1; border-radius: 12px; background: #fff;
    font-size: 16px; font-weight: 700; line-height: 1.4; color: #16263B;
}
.quiz-chip-check { width: 18px; height: 18px; flex-shrink: 0; padding: 1px; border: 2px solid #CBD5E1; border-radius: 6px; color: transparent; }
.quiz-chip:hover .quiz-chip-box { border-color: #1B7FE6; }
.quiz-chip input:checked + .quiz-chip-box { background: #E6F1FD; border-color: #1B7FE6; color: #125FB3; }
.quiz-chip input:checked + .quiz-chip-box .quiz-chip-check { background: #1B7FE6; border-color: #1B7FE6; color: #fff; }
.quiz-chip input:focus-visible + .quiz-chip-box { outline: 3px solid #1B7FE6; outline-offset: 2px; }
/* 次へ・送信 */
.quiz-actions { margin-top: 4px; }
.quiz-next {
    display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%;
    min-height: 56px; padding: 10px 16px; border: 0; border-radius: 12px;
    background: #1B7FE6; color: #fff;
    font-family: inherit; font-size: 17px; font-weight: 800; cursor: pointer;
}
.quiz-next:hover { background: #125FB3; }
.quiz-next:disabled { opacity: 0.7; cursor: wait; }
.quiz-next .lucide-icon { width: 20px; height: 20px; }
.quiz-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; margin-top: 10px; }
.quiz-link-btn {
    display: inline-flex; align-items: center; gap: 4px;
    min-height: 48px; padding: 0 8px 0 2px; border: 0; background: transparent;
    font-family: inherit; font-size: 16px; font-weight: 700; color: #125FB3; cursor: pointer;
}
.quiz-link-btn .lucide-icon { width: 18px; height: 18px; }
.quiz-form-link { display: inline-flex; align-items: center; min-height: 48px; margin-left: auto; font-size: 15px; color: #4A5B70; text-decoration: underline; text-underline-offset: 3px; }
.quiz-form-link:hover { color: #125FB3; }
.quiz-sub > .quiz-link-btn { margin-top: -4px; }
/* 5問目の入力欄 */
.quiz-field { margin-bottom: 12px; }
.quiz-label { display: block; margin-bottom: 4px; font-size: 16px; font-weight: 700; color: #16263B; }
.quiz-req { display: inline-block; margin-left: 6px; padding: 0 6px; border-radius: 4px; background: #E6F1FD; color: #125FB3; font-size: 13px; font-weight: 700; vertical-align: 1px; }
.quiz-input {
    display: block; width: 100%; min-height: 50px; padding: 10px 14px;
    border: 2px solid #CBD5E1; border-radius: 10px; background: #fff; color: #16263B;
    font-family: inherit; font-size: 16px;
}
.quiz-input:focus { outline: 3px solid rgba(27,127,230,0.35); outline-offset: 1px; border-color: #1B7FE6; }
.quiz-input[aria-invalid="true"] { border-color: #B42318; }
.quiz-error { margin: 6px 0 0; font-size: 15px; font-weight: 700; color: #B42318; }
.quiz-error[hidden] { display: none; }
.quiz-consent { margin: 14px 0 12px; padding: 14px; border: 1px solid #DCE6F2; border-radius: 12px; background: #F5F9FD; }
.quiz-consent-title { display: flex; align-items: center; gap: 6px; margin: 0 0 6px; font-size: 16px; font-weight: 800; color: #16263B; }
.quiz-consent-title .lucide-icon { width: 18px; height: 18px; color: #1B7FE6; }
.quiz-consent-summary { margin: 0 0 8px; font-size: 16px; line-height: 1.65; color: #4A5B70; }
.quiz-consent-more { margin-bottom: 10px; }
.quiz-consent-more summary { display: flex; align-items: center; min-height: 44px; font-size: 16px; font-weight: 700; color: #125FB3; cursor: pointer; }
.quiz-consent-list { margin: 6px 0 0; font-size: 15px; }
.quiz-consent-check { display: flex; align-items: flex-start; gap: 10px; min-height: 48px; padding: 10px 0 0; font-size: 16px; font-weight: 700; line-height: 1.55; color: #16263B; cursor: pointer; }
.quiz-consent-check input { flex-shrink: 0; width: 22px; height: 22px; margin-top: 2px; accent-color: #1B7FE6; }
.quiz-consent-check input:focus-visible { outline: 3px solid #1B7FE6; outline-offset: 2px; }

/* 下から出る小さなカード（スマホ: 画面の下・高さは画面の1/3以内／PC: 右下の小さなカード） */
.quiz-sheet {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 95;
    max-height: 33vh; overflow-y: auto;
    padding: 14px 16px calc(12px + env(safe-area-inset-bottom));
    background: #fff; border-top: 1px solid #DCE6F2; border-radius: 16px 16px 0 0;
    box-shadow: 0 -8px 24px rgba(22,38,59,0.12);
    transform: translateY(105%); transition: transform 0.3s ease;
}
.quiz-sheet.is-in { transform: translateY(0); }
.quiz-sheet[hidden] { display: none; }
.quiz-sheet-close {
    position: absolute; top: 4px; right: 4px;
    display: inline-flex; align-items: center; justify-content: center;
    width: 48px; height: 48px; border: 0; border-radius: 10px; background: transparent; color: #4A5B70; cursor: pointer;
}
.quiz-sheet-close:hover { background: #F3F7FC; color: #16263B; }
.quiz-sheet-close .lucide-icon { width: 22px; height: 22px; }
.quiz-sheet-title { margin: 0 48px 2px 0; font-size: 16px; font-weight: 800; line-height: 1.45; color: #16263B; }
.quiz-sheet-lead { margin: 0 48px 8px 0; font-size: 14px; line-height: 1.5; color: #4A5B70; }
.quiz-sheet-opts { display: flex; flex-wrap: nowrap; gap: 8px; overflow-x: auto; padding: 2px 2px 6px; scrollbar-width: thin; }
.quiz-opt--sm { flex: 0 0 auto; min-height: 48px; padding: 6px 16px; white-space: nowrap; }
.quiz-sheet-link { display: inline-flex; align-items: center; min-height: 44px; font-size: 14px; color: #4A5B70; text-decoration: underline; text-underline-offset: 3px; }
/* カードを出している間はスマホの追従ボタンを隠す（重ならないように） */
body.quiz-sheet-on .hv2-sticky { display: none; }
@media (min-width: 769px) {
    .quiz-sheet {
        left: auto; right: 20px; bottom: 20px; width: 360px; max-height: min(33vh, 340px);
        padding: 16px 16px 12px; border: 1px solid #DCE6F2; border-radius: 16px;
        box-shadow: 0 12px 32px rgba(22,38,59,0.16);
        transform: translateY(24px); opacity: 0; transition: transform 0.3s ease, opacity 0.3s ease;
    }
    .quiz-sheet.is-in { transform: translateY(0); opacity: 1; }
    .quiz-sheet-opts { flex-wrap: wrap; overflow: visible; }
}

/* 続きのモーダル（利用者がカードで答えた後に開く） */
.quiz-modal { position: fixed; inset: 0; z-index: 1100; display: flex; align-items: center; justify-content: center; padding: 16px; }
.quiz-modal[hidden] { display: none; }
.quiz-modal-backdrop { position: absolute; inset: 0; background: rgba(22,38,59,0.45); }
.quiz-modal-panel {
    position: relative; width: 100%; max-width: 560px; max-height: calc(100vh - 32px); max-height: calc(100dvh - 32px); overflow-y: auto;
    padding: 16px 20px 18px; border-radius: 16px; background: #fff; box-shadow: 0 20px 48px rgba(22,38,59,0.25);
}
.quiz-modal-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; margin-bottom: 10px; }
.quiz-modal-title { margin: 8px 0 0; font-size: 18px; font-weight: 800; line-height: 1.45; color: #16263B; }
.quiz-modal-close {
    flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center;
    width: 48px; height: 48px; border: 0; border-radius: 10px; background: transparent; color: #4A5B70; cursor: pointer;
}
.quiz-modal-close:hover { background: #F3F7FC; color: #16263B; }
.quiz-modal-close .lucide-icon { width: 22px; height: 22px; }
body.quiz-modal-open { overflow: hidden; }
@media (max-width: 600px) {
    .quiz-opts--grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .quiz-q { font-size: 19px; }
    .quiz-hero { padding: 16px 14px 12px; }
    .quiz-modal { padding: 0; align-items: stretch; }
    .quiz-modal-panel { max-width: none; max-height: none; border-radius: 0; padding: 12px 16px calc(16px + env(safe-area-inset-bottom)); }
}
@media (prefers-reduced-motion: reduce) {
    .quiz-sheet, .quiz-bar-fill { transition: none; }
}

/* SNS からの着地ページ /go/（検索から来る人のページではないので、アンケートを画面いっぱいに出す） */
.go-body { margin: 0; min-height: 100vh; background: linear-gradient(180deg, #E8F2FC 0%, #F6FAFE 60%, #FFFFFF 100%); color: #16263B; font-size: 16px; }
.go-header { display: flex; align-items: center; justify-content: center; padding: 14px 16px; }
.go-logo { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; color: #16263B; font-size: 18px; font-weight: 800; text-decoration: none; }
.go-logo .lucide-icon { width: 26px; height: 26px; color: #1B7FE6; }
.go-logo:focus-visible { outline: 3px solid #1B7FE6; outline-offset: 3px; border-radius: 6px; }
.go-main { max-width: 600px; margin: 0 auto; padding: 4px 16px 24px; }
.go-title { margin: 0 0 6px; font-size: 26px; font-weight: 800; line-height: 1.4; color: #16263B; text-align: center; }
.go-lead { margin: 0 0 16px; font-size: 16px; line-height: 1.6; color: #4A5B70; text-align: center; }
.go-card { padding: 18px 18px 14px; border: 1px solid #DCE6F2; border-radius: 16px; background: #fff; box-shadow: 0 8px 24px rgba(22,38,59,0.06); }
.go-note { margin: 12px 0 0; font-size: 15px; line-height: 1.6; color: #4A5B70; text-align: center; }
.go-jobs { display: flex; align-items: center; justify-content: center; gap: 6px; min-height: 48px; margin-top: 8px; font-size: 16px; font-weight: 700; color: #125FB3; text-decoration: underline; text-underline-offset: 4px; }
.go-jobs .lucide-icon { width: 18px; height: 18px; }
.go-jobs:focus-visible { outline: 3px solid #1B7FE6; outline-offset: 2px; }
.go-footer { padding: 16px; font-size: 14px; color: #64748B; text-align: center; }
.go-footer a { color: #4A5B70; }
@media (max-width: 600px) {
    .go-title { font-size: 22px; }
    .go-card { padding: 16px 14px 12px; }
}

/* ============================================================
   HERO_BALANCE_2026_10_14 PC のヒーローの釣り合い
   旧: 写真を背景全面に敷いたため横にはみ出し、人物が画面中央＝説明文と胸元が重なっていた。
   新: 写真は右側の領域だけに敷き、人物を右寄りに。左は無地。アンケートは3列で背を低く。
   スマホ（768px 以下）は従来のまま。
   ============================================================ */
@media (min-width: 769px) {
    .hv2-hero--bg { background-image: none; background-color: #F6FAFE; min-height: 0; padding-top: calc(var(--header-h) + 36px); padding-bottom: 104px; }
    .hv2-hero--bg::after { content: ""; position: absolute; top: 0; bottom: 0; left: 36%; right: 0; z-index: 0; background: linear-gradient(180deg, rgba(255,255,255,0) calc(100% - 96px), #fff 100%), url('../images/hero-wide.webp') 30% center / cover no-repeat; pointer-events: none; }
    .hv2-hero--bg::before { z-index: 1; background: linear-gradient(180deg, rgba(255,255,255,0) calc(100% - 96px), #fff 100%), linear-gradient(90deg, #F6FAFE 0%, #F6FAFE 38%, rgba(246,250,254,0.85) 44%, rgba(246,250,254,0) 54%); } /* HERO_FADE_2026_10_17: 下端の96pxを白へ軽くぼかす */
    .hv2-hero--bg > .container { z-index: 2; }
    .hv2-hero--bg .hv2-hero-inner { grid-template-columns: minmax(0, 620px) 1fr; }
    .hv2-hero--bg .hv2-title { font-size: 46px; }
    .hv2-hero--bg .hv2-sub { max-width: 560px; }
    .hv2-hero--bg .quiz-hero { max-width: 620px; padding: 16px 18px 12px; }
    .hv2-hero--bg .quiz-hero .quiz-opts--chips { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
    .hv2-hero--bg .quiz-hero .quiz-opt { min-height: 46px; padding: 6px 10px; }
    .hv2-hero--bg .quiz-hero .quiz-hint { margin-bottom: 10px; }
}
@media (min-width: 769px) and (max-width: 1100px) {
    .hv2-hero--bg::after { left: 46%; }
    .hv2-hero--bg::before { background: linear-gradient(90deg, #F6FAFE 0%, #F6FAFE 50%, rgba(246,250,254,0.85) 56%, rgba(246,250,254,0) 66%); }
    .hv2-hero--bg .hv2-hero-inner { grid-template-columns: minmax(0, 52%) 1fr; }
    .hv2-hero--bg .quiz-hero .quiz-opts--chips { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* HERO_BALANCE_2026_10_14 追補: 人物は写真の横 73% の位置 → 領域の 72% に合わせると幅が変わっても人物が見切れない */
@media (min-width: 769px) {
    .hv2-hero--bg::after { background-position: 72% top; }
    .hv2-hero--bg .quiz-hero .quiz-choice-note, .hv2-hero--bg .quiz-hero .hv2-choice-note { margin-top: 6px; }
}
@media (min-width: 1200px) {
    .hv2-hero--bg .quiz-hero .quiz-opts--chips { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
/* HERO_BALANCE_2026_10_14 本案: アンケートはヒーローの外（.hv2-quiz-wrap）でヒーローの下端に重ねる。検索カードはその下に普通に並べる */
.hv2-quiz-wrap { position: relative; z-index: 3; margin-top: -84px; }
.hv2-quiz-wrap .quiz-hero { max-width: none; margin: 0; }
.hv2-quiz-wrap + .hv2-search-wrap { margin-top: 24px; }
@media (min-width: 769px) {
    .hv2-hero--bg { min-height: 560px; padding-bottom: 130px; }
    .hv2-hero--bg .hv2-hero-inner { grid-template-columns: minmax(0, 600px) 1fr; }
    .hv2-hero--bg .hv2-title { font-size: 50px; }
    .hv2-quiz-wrap .quiz-hero { padding: 22px 28px 16px; }
    .hv2-quiz-wrap .quiz-opts--chips { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
    .hv2-quiz-wrap .quiz-next { max-width: 360px; }
}
@media (max-width: 768px) {
    .hv2-quiz-wrap { margin-top: -56px; }
}
@media (min-width: 769px) {
    .hv2-quiz-wrap .quiz-opts--chips { grid-template-columns: repeat(auto-fit, minmax(136px, 1fr)); }
}
@media (min-width: 769px) {
    .hv2-quiz-wrap .quiz-opts--chips { display: flex; flex-wrap: wrap; gap: 10px; }
    .hv2-quiz-wrap .quiz-opts--chips .quiz-opt { flex: 1 1 auto; white-space: nowrap; padding: 8px 18px; }
}
/* HERO_THREE_2026_10_14: 写真を3人並び（20代男性・女性・年配男性）に差し替え。PC用は人物側を切り出した画像（hero-wide.webp）を右寄せで敷く */
@media (min-width: 769px) {
    .hv2-hero--bg::after { background-position: right top; }
}
@media (max-width: 768px) {
    .hv2-hero--bg { background-position: right calc(var(--header-h)); }
}
@media (min-width: 769px) and (max-width: 1100px) {
    .hv2-hero--bg::after { left: 44%; background-size: auto 78%; background-position: right bottom; -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 30%); mask-image: linear-gradient(180deg, transparent 0, #000 30%); }
}
@media (min-width: 769px) and (max-width: 1100px) {
    .hv2-hero--bg::after { left: 50%; background-size: auto 74%; -webkit-mask-image: linear-gradient(180deg, rgba(0,0,0,0) 26%, #000 46%); mask-image: linear-gradient(180deg, rgba(0,0,0,0) 26%, #000 46%); }
    .hv2-hero--bg::before { background: linear-gradient(90deg, #F6FAFE 0%, #F6FAFE 48%, rgba(246,250,254,0) 53%); }
    .hv2-hero--bg .hv2-hero-inner { grid-template-columns: minmax(0, 48%) 1fr; }
}

/* ============================================================
   QUIZ_SPOTLIGHT_2026_10_14 トップのアンケートを「まずこれ」に見せる
   - 枠を太い青に・影・「まずはここから」の目印
   - 少しスクロールしてアンケートが画面に入ると、周りを暗くしてアンケートだけ浮かせる（1回だけ。
     暗い所を押す・Esc・アンケートが画面から外れると解除）。全画面で覆って操作を止めるポップアップではない。
   ============================================================ */
.hv2-quiz-wrap .quiz-hero { border: 3px solid #1B7FE6; box-shadow: 0 14px 40px rgba(27, 127, 230, 0.18); position: relative; }
.quiz-hero-badge { display: inline-flex; align-items: center; gap: 6px; margin: 0 0 10px; padding: 4px 12px; border-radius: 999px; background: #1B7FE6; color: #fff; font-size: 13px; font-weight: 800; line-height: 1.6; }
.quiz-hero-badge .lucide-icon { width: 14px; height: 14px; }
.quiz-spotlight-overlay { position: fixed; inset: 0; z-index: 1000; background: rgba(9, 20, 35, 0.58); opacity: 0; pointer-events: none; transition: opacity 0.35s ease; }
body.is-quiz-spotlight .quiz-spotlight-overlay { opacity: 1; pointer-events: auto; cursor: pointer; }
body.is-quiz-spotlight .hv2-quiz-wrap { z-index: 1001; }
body.is-quiz-spotlight .hv2-quiz-wrap .quiz-hero { box-shadow: 0 0 0 6px rgba(27, 127, 230, 0.25), 0 24px 60px rgba(0, 0, 0, 0.35); }
@media (prefers-reduced-motion: reduce) { .quiz-spotlight-overlay { transition: none; } }

/* SEARCH_ROW_2026_10_14 求人を探す: 見出しの右が空いていた → PC は見出しと入力欄を1行に並べる */
@media (min-width: 900px) {
    .hv2-search { display: grid; grid-template-columns: auto 1fr; align-items: end; column-gap: 28px; }
    .hv2-search .hv2-search-title { margin: 0; align-self: center; white-space: nowrap; }
}

/* ============================================================
   HOME_DESIGN_2026_10_14 トップページの見た目の手直し（齊木さんの指摘）
   ============================================================ */
/* 見出しと説明文は中央寄せ */
.hv2-head { text-align: center; }
.hv2-head .hv2-h2 { justify-content: center; }
.hv2-head .hv2-lead { margin-left: auto; margin-right: auto; max-width: 760px; }
.hv2-head--row { display: flex; flex-direction: column; align-items: center; gap: 14px; }
.hv2-center { display: flex; justify-content: center; margin-top: 28px; }
.hv2-title-line { display: block; }

/* ボタン（主） */
.hv2-btn-primary { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 52px; padding: 12px 26px; border-radius: 12px; background: #1B7FE6; color: #fff; font-weight: 800; font-size: 16px; text-decoration: none; box-shadow: 0 6px 18px rgba(27, 127, 230, 0.28); transition: background 0.15s ease, transform 0.15s ease; }
.hv2-btn-primary:hover { background: #1466BD; color: #fff; transform: translateY(-1px); }
.hv2-btn-primary .lucide-icon { width: 18px; height: 18px; }

/* 職種カード: 画像を低く・上の隙間なし・アイコンと文字を詰める・折り返さない・矢印なし */
.hv2-cat.hv2-cat--photo { padding: 0; overflow: hidden; display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto auto; column-gap: 12px; align-items: center; }
.hv2-cat--photo .hv2-cat-photo { grid-column: 1 / -1; display: block; width: 100%; height: auto; aspect-ratio: 16 / 7; object-fit: cover; margin: 0; border-radius: 0; }
.hv2-cat--photo .hv2-cat-icon { grid-row: 2 / 4; margin: 14px 0 14px 16px; width: 44px; height: 44px; }
.hv2-cat--photo .hv2-cat-name { grid-column: 2; margin: 14px 16px 0 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 15px; line-height: 1.4; }
.hv2-cat--photo .hv2-cat-count { grid-column: 2; margin: 2px 16px 14px 0; }
.hv2-cat--photo .hv2-cat-go { display: none; }

/* 地域から探す: 地方ごとに1行（地方名＋県のボタン）を1枚のカードにまとめる */
.hv2-regions { display: block; background: #fff; border: 1px solid #DCE6F2; border-radius: 16px; overflow: hidden; }
.hv2-regions .hv2-region { display: grid; grid-template-columns: 150px 1fr; align-items: center; gap: 16px; padding: 16px 24px; border: 0; border-bottom: 1px solid #E8EEF6; border-radius: 0; background: transparent; box-shadow: none; min-height: 0; }
.hv2-regions .hv2-region:last-child { border-bottom: 0; }
.hv2-regions .hv2-region-name { margin: 0; font-size: 15px; font-weight: 800; color: #16263B; }
.hv2-regions .hv2-pref-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; }
.hv2-regions .hv2-pref { display: inline-flex; align-items: center; gap: 6px; padding: 7px 12px; border: 1px solid #CFE0F3; border-radius: 10px; background: #F6FAFE; color: #16263B; font-weight: 700; font-size: 14px; text-decoration: none; transition: background 0.15s ease, border-color 0.15s ease; }
.hv2-regions .hv2-pref:hover { background: #E6F1FD; border-color: #1B7FE6; color: #125FB3; }
.hv2-regions .hv2-pref-count { min-width: 20px; padding: 0 6px; border-radius: 999px; background: #1B7FE6; color: #fff; font-size: 12px; line-height: 20px; text-align: center; }
@media (max-width: 768px) {
    .hv2-regions .hv2-region { grid-template-columns: 1fr; gap: 10px; padding: 14px 16px; }
}

/* 条件から探す: 押したくなるボタンに（右に矢印） */
.hv2-conds .hv2-cond { display: flex; align-items: center; gap: 10px; padding: 14px 16px; border: 1.5px solid #CFE0F3; border-radius: 12px; background: #fff; color: #16263B; font-weight: 700; text-decoration: none; box-shadow: 0 2px 6px rgba(22, 38, 59, 0.04); transition: border-color 0.15s ease, background 0.15s ease, transform 0.15s ease; }
.hv2-conds .hv2-cond:hover { border-color: #1B7FE6; background: #F3F8FE; transform: translateY(-1px); }
.hv2-conds .hv2-cond > .lucide-icon:first-child { color: #1B7FE6; }
.hv2-cond-label { flex: 1; }
.hv2-cond-go { color: #1B7FE6; width: 18px; height: 18px; flex-shrink: 0; }

/* 求人を探すの選択欄: 右の矢印をはっきり */
.hv2-select { background-color: #fff; border-width: 1.5px; }

/* お役立ちコラム: 4列×2段・カテゴリー */
.hv2-art-cats { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin: 0 0 24px; padding: 0; list-style: none; }
.hv2-art-cat { display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border: 1.5px solid #CFE0F3; border-radius: 999px; background: #fff; color: #16263B; font-weight: 700; font-size: 14px; text-decoration: none; }
.hv2-art-cat:hover { border-color: #1B7FE6; color: #125FB3; }
.hv2-art-cat-num { padding: 0 8px; border-radius: 999px; background: #E6F1FD; color: #125FB3; font-size: 12px; line-height: 20px; }
.hv2-art-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; }
.hv2-art { display: flex; flex-direction: column; border: 1px solid #DCE6F2; border-radius: 14px; background: #fff; overflow: hidden; text-decoration: none; color: #16263B; transition: box-shadow 0.15s ease, transform 0.15s ease; }
.hv2-art:hover { box-shadow: 0 10px 26px rgba(22, 38, 59, 0.10); transform: translateY(-2px); }
.hv2-art-thumb { display: block; aspect-ratio: 16 / 9; background: #EEF4FB; }
.hv2-art-thumb img { display: block; width: 100%; height: 100%; object-fit: cover; }
.hv2-art-body { display: flex; flex-direction: column; gap: 8px; padding: 14px 14px 16px; }
.hv2-art-badge { align-self: flex-start; padding: 2px 10px; border-radius: 999px; background: #E6F1FD; color: #125FB3; font-size: 12px; font-weight: 700; }
.hv2-art-title { font-size: 15px; font-weight: 700; line-height: 1.55; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
@media (max-width: 1024px) { .hv2-art-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .hv2-art-grid { grid-template-columns: 1fr; } }

/* ご利用の流れ: 矢印でつながる4ステップ */
.hv2-flow-eyebrow { display: inline-flex; align-items: center; gap: 6px; margin: 0 0 10px; padding: 4px 14px; border-radius: 999px; background: #1B7FE6; color: #fff; font-size: 13px; font-weight: 800; }
.hv2-flow-eyebrow .lucide-icon { width: 14px; height: 14px; }
.hv2-flow-steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 36px; margin: 0; padding: 0; list-style: none; counter-reset: none; }
.hv2-flow-step { position: relative; display: flex; flex-direction: column; align-items: center; text-align: center; padding: 26px 18px 22px; border: 1px solid #DCE6F2; border-radius: 16px; background: #fff; }
.hv2-flow-step:not(:last-child)::after { content: ""; position: absolute; top: 50%; right: -27px; width: 18px; height: 18px; border-top: 3px solid #1B7FE6; border-right: 3px solid #1B7FE6; transform: translateY(-50%) rotate(45deg); }
.hv2-flow-num { font-size: 12px; font-weight: 800; letter-spacing: 0.08em; color: #1B7FE6; }
.hv2-flow-icon { display: inline-flex; align-items: center; justify-content: center; width: 56px; height: 56px; margin: 10px 0 12px; border-radius: 50%; background: #E6F1FD; color: #1B7FE6; }
.hv2-flow-icon .lucide-icon { width: 26px; height: 26px; }
.hv2-flow-title { margin: 0 0 8px; font-size: 17px; font-weight: 800; color: #16263B; }
.hv2-flow-desc { margin: 0; font-size: 14px; line-height: 1.7; color: #4A5B70; }
@media (max-width: 900px) {
    .hv2-flow-steps { grid-template-columns: 1fr; gap: 30px; }
    .hv2-flow-step:not(:last-child)::after { top: auto; bottom: -23px; right: 50%; transform: translateX(50%) rotate(135deg); }
}

/* CTA: 全幅の帯ではなくカード型・ボタンは横並び・写真つき */
.hv2-cta2 { padding-top: 24px; }
.hv2-cta-card { display: grid; grid-template-columns: 1.15fr 0.85fr; align-items: stretch; border-radius: 20px; overflow: hidden; background: linear-gradient(135deg, #E8F2FC 0%, #F6FAFE 100%); border: 1px solid #CFE0F3; }
.hv2-cta-text { padding: 40px 44px; }
.hv2-cta-title { margin: 0 0 12px; font-size: 28px; font-weight: 800; color: #16263B; }
.hv2-cta-desc { margin: 0 0 22px; font-size: 15px; line-height: 1.8; color: #4A5B70; }
.hv2-cta-actions { display: flex; flex-wrap: wrap; gap: 12px; }
.hv2-cta-actions .hv2-btn-outline { min-height: 52px; }
.hv2-cta-company { display: inline-flex; align-items: center; gap: 6px; margin-top: 18px; color: #125FB3; font-weight: 700; font-size: 14px; text-decoration: none; }
.hv2-cta-company:hover { text-decoration: underline; }
.hv2-cta-company .lucide-icon { width: 16px; height: 16px; }
.hv2-cta-photo { position: relative; min-height: 280px; }
.hv2-cta-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 900px) {
    .hv2-cta-card { grid-template-columns: 1fr; }
    .hv2-cta-photo { order: -1; min-height: 200px; }
    .hv2-cta-text { padding: 26px 20px; }
    .hv2-cta-actions > a { flex: 1 1 100%; }
}
/* HOME_DESIGN_2026_10_14 追補 */
.hv2-job--photo { padding-top: 0; overflow: hidden; }
.hv2-job-photo { display: block; width: calc(100% + 36px); max-width: none; margin: 0 -18px 2px; aspect-ratio: 16 / 8; height: auto; object-fit: cover; }
.hv2-stat-num--date { font-size: 26px; white-space: nowrap; letter-spacing: -0.01em; }
@media (max-width: 1100px) { .hv2-stat-num--date { font-size: 21px; } }
.hv2-cat--photo .hv2-cat-icon { width: 38px; height: 38px; margin: 12px 0 12px 14px; }
.hv2-cat--photo .hv2-cat-name { font-size: 14px; letter-spacing: -0.01em; overflow: visible; text-overflow: clip; }
.hv2-cat.hv2-cat--photo { column-gap: 10px; }
.hv2-legacy .section-title, .hv2-legacy .section-desc { text-align: center; margin-left: auto; margin-right: auto; }
.hv2-trust-head { text-align: center; }
.hv2-trust-head .hv2-h2 { justify-content: center; }
/* FOOTER_TITLE_2026_10_14: 明るいフッターで列の見出しが白文字のまま読めなかった */
.site-footer .footer-col-title { color: #16263B; }
/* QUIZ_SHEET_V2_2026_10_14 下から出るアンケート: 質問を先に見せ、選択肢は格子で全部見せる */
.quiz-sheet { border: 3px solid #1B7FE6; }
.quiz-sheet-title { font-size: 15px; color: #125FB3; }
.quiz-sheet-step { display: flex; align-items: center; gap: 10px; margin: 6px 48px 6px 0; }
.quiz-sheet-count { flex-shrink: 0; font-size: 12px; font-weight: 800; color: #4A5B70; }
.quiz-sheet-bar { flex: 1; height: 6px; border-radius: 999px; background: #E3EAF3; overflow: hidden; }
.quiz-sheet-bar-fill { display: block; width: 20%; height: 100%; border-radius: 999px; background: #1B7FE6; }
.quiz-sheet-q { margin: 2px 0 2px; font-size: 19px; font-weight: 800; line-height: 1.4; color: #16263B; }
.quiz-sheet-lead { margin-right: 0; font-size: 13px; }
.quiz-sheet .quiz-sheet-opts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; overflow: visible; padding: 2px 0 4px; }
.quiz-sheet .quiz-opt--sm { min-height: 44px; padding: 6px 8px; white-space: nowrap; font-size: 15px; }
@media (max-width: 768px) {
    .quiz-sheet .quiz-sheet-opts { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
    .quiz-sheet .quiz-opt--sm { min-height: 42px; font-size: 14px; padding: 4px 4px; }
    .quiz-sheet-q { font-size: 17px; }
}
@media (min-width: 769px) {
    .quiz-sheet { width: 400px; max-height: none; overflow: visible; border: 3px solid #1B7FE6; }
}
/* QUIZ_SPOTLIGHT_2026_10_14 追補: スマホでは暗くしない（画面を広く覆う形を避ける） */
@media (max-width: 768px) {
    .quiz-spotlight-overlay { display: none; }
}

/* ILLUST_TRIAL_2026_10_15 挿絵のお試し（線画・水色と黄色の差し色） */
.quiz-hero-illust { display: none; }
@media (min-width: 1100px) {
    .hv2-quiz-wrap .quiz-hero { padding-right: 230px; }
    .quiz-hero-illust { display: block; position: absolute; right: 22px; bottom: 0; width: auto; height: 250px; pointer-events: none; }
}
.hv2-search-illust { display: none; }
@media (min-width: 900px) {
    .hv2-search.hv2-search--illust { grid-template-columns: 190px auto 1fr; }
    .hv2-search-illust { display: block; width: 190px; height: auto; border-radius: 10px; align-self: center; }
}
.hv2-flow-illust { display: block; width: 88px; height: 88px; margin: 6px 0 10px; }
.hv2-cta-photo--illust { background: #fff; display: flex; align-items: center; justify-content: center; padding: 20px; }
.hv2-cta-photo--illust img { position: static; width: 100%; height: auto; max-height: 280px; object-fit: contain; }
/* ILLUST_PLACE_2026_10_15 挿絵の置き方を直す */
@media (min-width: 1100px) {
    .hv2-quiz-wrap .quiz-hero { padding-right: 28px; display: grid; grid-template-columns: minmax(0, 1fr) 210px; column-gap: 24px; }
    .hv2-quiz-wrap .quiz-hero > * { grid-column: 1; }
    .hv2-quiz-wrap .quiz-hero > .quiz-hero-illust { grid-column: 2; grid-row: 1 / span 8; align-self: center; justify-self: center; position: static; width: 100%; height: auto; max-height: 300px; object-fit: contain; }
}
.hv2-flow-illust { width: 112px; height: 112px; margin: 8px 0 12px; }
.list-empty-illust { display: block; width: 100%; max-width: 420px; height: auto; margin: 0 auto 16px; border-radius: 14px; }
.hv2-quiz-wrap .quiz-hero > .quiz-hero-badge { justify-self: start; }

/* QUIZ_ANIM_2026_10_15 アンケートを気持ちよく進める動き */
@keyframes quizInFwd { from { opacity: 0; transform: translateX(28px); } to { opacity: 1; transform: none; } }
@keyframes quizInBack { from { opacity: 0; transform: translateX(-28px); } to { opacity: 1; transform: none; } }
@keyframes quizPick { 0% { transform: scale(1); } 45% { transform: scale(0.95); } 100% { transform: scale(1); } }
@keyframes quizCheck { 0% { transform: scale(0.6); } 60% { transform: scale(1.15); } 100% { transform: scale(1); } }
.quiz-anim-fwd { animation: quizInFwd 0.34s cubic-bezier(0.2, 0.8, 0.2, 1) both; }
.quiz-anim-back { animation: quizInBack 0.34s cubic-bezier(0.2, 0.8, 0.2, 1) both; }
.quiz-opt { transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease, transform 0.12s ease, box-shadow 0.15s ease; }
.quiz-opt:active { transform: scale(0.97); }
.quiz-opt.is-picked { animation: quizPick 0.22s ease; background: #E6F1FD; border-color: #1B7FE6; color: #125FB3; box-shadow: 0 0 0 4px rgba(27, 127, 230, 0.18); }
.quiz-opt input[type="checkbox"]:checked, .quiz-opt[aria-pressed="true"] .quiz-check { animation: quizCheck 0.25s ease; }
.quiz-bar-fill { transition: width 0.45s cubic-bezier(0.2, 0.8, 0.2, 1); }
.quiz-next { transition: background 0.15s ease, transform 0.12s ease; }
.quiz-next:active { transform: scale(0.98); }
@media (prefers-reduced-motion: reduce) {
    .quiz-anim-fwd, .quiz-anim-back, .quiz-opt.is-picked, .quiz-opt input[type="checkbox"]:checked { animation: none; }
    .quiz-opt:active, .quiz-next:active { transform: none; }
    .quiz-bar-fill { transition: none; }
}
/* QUIZ_ORDER_2026_10_15 お名前は姓・名の2欄 */
.quiz-name-row, .form-name-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
/* QUIZ_ORDER_2026_10_15: 1問目のボタンは文字の幅に合わせる（最後の「未定」が横いっぱいに伸びないように） */
.hv2-quiz-wrap .quiz-opts--chips .quiz-opt { flex: 0 1 auto; }
/* AGE_NAME_2026_10_15 下から出るカードの免許（文字が長いので2列・折り返し可） */
.quiz-sheet .quiz-sheet-opts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.quiz-sheet .quiz-opt--sm { white-space: normal; line-height: 1.35; font-size: 14px; }
@media (max-width: 768px) { .quiz-sheet .quiz-sheet-opts { grid-template-columns: repeat(2, minmax(0, 1fr)); } .quiz-sheet .quiz-opt--sm { font-size: 13px; } }
.quiz-age-chips { margin-top: 6px; }

/* FONT_SYSTEM_2026_10_15 本文は端末の日本語書体（Web フォントの読み込み待ちと書体の切り替わりをなくす） */
:root {
    --font-sans: 'Hiragino Sans', 'Hiragino Kaku Gothic ProN', 'Yu Gothic UI', 'Yu Gothic', YuGothic, 'Meiryo', 'Noto Sans JP', 'Noto Sans CJK JP', sans-serif;
    --font-display: var(--font-sans);
    --hv2-font: var(--font-sans);
}
body { font-family: var(--font-sans); }

/* QUIZ_FIX_2026_10_15 */
.quiz-multi-badge { display: inline-flex; align-items: center; gap: 6px; margin: 0 0 6px; padding: 3px 10px; border-radius: 999px; background: #FFF6D6; color: #8A5A00; font-size: 13px; font-weight: 800; }
.quiz-multi-badge .lucide-icon { width: 15px; height: 15px; }
.quiz-contact-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
@media (max-width: 520px) { .quiz-contact-row { grid-template-columns: 1fr; } }
/* COPY_2026_10_15 */
.quiz-consent-more summary { min-height: 36px; font-size: 12px; font-weight: 700; }
.quiz-name-age-row { display: grid; grid-template-columns: 1fr; gap: 0 16px; }
@media (min-width: 769px) { .quiz-name-age-row { grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr); align-items: start; } }
.quiz-name-age-row .quiz-age-chips { gap: 6px; }
.quiz-name-age-row .quiz-age-chips .quiz-chip-box { padding-left: 10px; padding-right: 10px; }

/* TAP_INVITE_2026_10_15 思わず1つ押したくなる1問目 */
.quiz-tap-lead { display: inline-flex; align-items: center; gap: 6px; margin: 0 0 6px; color: #125FB3; font-size: 13px; font-weight: 800; }
.quiz-tap-lead .lucide-icon { width: 16px; height: 16px; }
.quiz-opts--cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-bottom: 4px; }
.quiz-opt.quiz-card { display: flex; align-items: center; gap: 12px; min-height: 72px; padding: 12px 14px; text-align: left; justify-content: flex-start; border-width: 2px; border-radius: 14px; background: #fff; box-shadow: 0 2px 8px rgba(22, 38, 59, 0.05); transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.15s ease, background 0.15s ease; }
.quiz-card-icon { flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; width: 42px; height: 42px; border-radius: 12px; background: #E6F1FD; color: #1B7FE6; transition: background 0.15s ease, color 0.15s ease; }
.quiz-card-icon .lucide-icon { width: 22px; height: 22px; }
.quiz-card-text { flex: 1; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.quiz-card-label { font-size: 16px; font-weight: 800; color: #16263B; line-height: 1.35; }
.quiz-card-sub { font-size: 12.5px; font-weight: 500; color: #4A5B70; line-height: 1.45; }
.quiz-card-go { flex-shrink: 0; width: 20px; height: 20px; color: #9DB7D6; transition: transform 0.18s ease, color 0.15s ease; }
.quiz-opt.quiz-card:hover { transform: translateY(-2px); border-color: #1B7FE6; background: #F7FBFF; box-shadow: 0 10px 22px rgba(27, 127, 230, 0.16); }
.quiz-opt.quiz-card:hover .quiz-card-icon { background: #1B7FE6; color: #fff; }
.quiz-opt.quiz-card:hover .quiz-card-go { transform: translateX(3px); color: #1B7FE6; }
.quiz-opt.quiz-card:active { transform: translateY(0) scale(0.98); }
@keyframes quizCardIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes quizCardNudge { 0%, 100% { transform: none; } 50% { transform: translateX(4px); } }
.quiz-opts--cards .quiz-card { animation: quizCardIn 0.45s cubic-bezier(0.2, 0.8, 0.2, 1) both; }
.quiz-opts--cards .quiz-card:nth-child(2) { animation-delay: 0.07s; }
.quiz-opts--cards .quiz-card:nth-child(3) { animation-delay: 0.14s; }
.quiz-opts--cards .quiz-card:nth-child(4) { animation-delay: 0.21s; }
.quiz-opts--cards .quiz-card .quiz-card-go { animation: quizCardNudge 1.6s ease-in-out 1.2s 2; }
@media (max-width: 520px) {
    .quiz-opts--cards { grid-template-columns: 1fr; gap: 8px; }
    .quiz-opt.quiz-card { min-height: 64px; }
}
@media (prefers-reduced-motion: reduce) {
    .quiz-opts--cards .quiz-card, .quiz-opts--cards .quiz-card .quiz-card-go { animation: none; }
    .quiz-opt.quiz-card:hover { transform: none; }
}

/* SAME_HEIGHT_2026_10_15 1〜4問目を同じ高さに（重ねて置き、表に出ていない問いは見えないだけで場所は取る） */
.quiz-steps { display: grid; }
.quiz-steps > .quiz-step { grid-area: 1 / 1; min-width: 0; }
.quiz-steps > .quiz-step[hidden] { display: block; visibility: hidden; pointer-events: none; }
.quiz.is-final .quiz-steps { display: none; }
/* 都道府県の問いの中の「地方の一覧」と「県の一覧」も重ねて、切り替えで高さが変わらないように */
.quiz-step[data-step] .quiz-sub-stack { display: grid; }
.quiz-sub-stack > .quiz-sub { grid-area: 1 / 1; min-width: 0; }
.quiz-sub-stack > .quiz-sub[hidden] { display: block; visibility: hidden; pointer-events: none; }
/* 「戻る」が出たり消えたりして下の高さが変わらないように */
.quiz-foot .quiz-back[hidden] { display: inline-flex; visibility: hidden; }
/* SAME_HEIGHT_2026_10_15 追補: .quiz [hidden] { display:none !important } より強くする */
.quiz .quiz-steps > .quiz-step[hidden],
.quiz .quiz-sub-stack > .quiz-sub[hidden] { display: block !important; visibility: hidden; pointer-events: none; }
.quiz .quiz-foot .quiz-back[hidden] { display: inline-flex !important; visibility: hidden; }
.quiz.is-final .quiz-steps { display: none !important; }
/* UNKOU_2026_10_15 / QUIZ_TIME_2026_10_15 */
.quiz-unkou { margin: 6px 0 4px; padding: 12px 14px; border-radius: 12px; background: #F3F8FE; border: 1px solid #CFE0F3; }
.quiz-unkou .quiz-label { margin-bottom: 8px; }
.quiz .quiz-steps .quiz-unkou[hidden] { display: none !important; }
.quiz-tap-sep { margin: 0 6px; color: #9DB7D6; }
.quiz .quiz-steps > .quiz-step[hidden] .quiz-unkou { display: none !important; }

/* COMPACT_2026_10_15 問いの背を低くして、1問目の下の隙間を減らす */
.quiz-opt--back { color: #4A5B70; background: #F6FAFE; border-style: dashed; gap: 4px; }
.quiz-opt--back .lucide-icon { width: 16px; height: 16px; }
@media (min-width: 769px) {
    .quiz .quiz-sub .quiz-opts--grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
    .quiz .quiz-sub .quiz-opts--grid .quiz-opt { min-height: 46px; padding: 6px 6px; white-space: nowrap; }
    .quiz .quiz-opts--timing { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
    .quiz .quiz-opts--timing .quiz-opt { min-height: 52px; }
}
@media (min-width: 769px) { .quiz-opt.quiz-card { min-height: 90px; } }
/* COMPACT_2026_10_15 「戻る」は進み具合の右（場所は常に取る＝1問目でも高さが変わらない） */
.quiz-head .quiz-back { flex-shrink: 0; min-height: 32px; padding: 0 4px; font-size: 13px; }
.quiz .quiz-head .quiz-back[hidden] { display: inline-flex !important; visibility: hidden; }
/* CHIP_MINW_2026_10_15 2問目の選択肢に最低幅（「未定」だけ短くならないように） */
.quiz .quiz-opts--chips .quiz-chip-box { min-width: 112px; justify-content: center; }
@media (max-width: 520px) { .quiz .quiz-opts--chips .quiz-chip-box { min-width: 0; } }
/* UNKOU_ALIGN_2026_10_15 資格のボタンの文字を縦の真ん中に・見出しを枠の中へ */
.quiz-unkou > legend { float: left; width: 100%; padding: 0; margin: 0 0 8px; }
.quiz-unkou > legend + * { clear: both; }
.quiz-unkou .quiz-chip-box { display: flex; align-items: center; justify-content: center; min-height: 46px; padding: 0 14px; line-height: 1.2; }
/* TIMING_CARDS_2026_10_15 質問3のカード（1問目と同じ見た目・PC 2列） */
.quiz .quiz-opts--cards.quiz-opts--timing { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 520px) { .quiz .quiz-opts--cards.quiz-opts--timing { grid-template-columns: 1fr; } }

/* NAME_AGE_COLS_2026_10_15 お名前と年代を電話・メールと同じ2列に・高さをそろえる */
.quiz-name-age-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; align-items: start; }
@media (max-width: 520px) { .quiz-name-age-row { grid-template-columns: 1fr; } }
.quiz-name-age-row .quiz-fieldset { margin: 0; }
.quiz-name-age-row .quiz-age-chips { display: flex; flex-wrap: nowrap; gap: 6px; margin: 0; }
.quiz-name-age-row .quiz-age-chips .quiz-chip { flex: 1 1 0; min-width: 0; }
.quiz .quiz-name-age-row .quiz-age-chips .quiz-chip-box { min-width: 0; min-height: 50px; height: 50px; padding: 0 4px; justify-content: center; font-size: 13px; line-height: 1.2; white-space: nowrap; }
.quiz-name-age-row .quiz-age-chips .quiz-chip-check { display: none; }
@media (max-width: 380px) { .quiz .quiz-name-age-row .quiz-age-chips .quiz-chip-box { font-size: 12px; } }
.quiz-name-age-row legend.quiz-label { padding: 0; }
/* 提携事業者への情報提供の要約: 小さく・行間を詰める */
.quiz-consent-summary { font-size: 13px; line-height: 1.55; }
@media (max-width: 520px) {
    .quiz .quiz-name-age-row .quiz-age-chips .quiz-chip-box { font-size: 12px; letter-spacing: -0.02em; padding: 0 2px; }
    .quiz-name-age-row { gap: 0; margin-bottom: 14px; }
    .quiz-name-age-row .quiz-age-chips { gap: 4px; }
}
/* TITLE_2026_10_15 */
.quiz-hero-sub { margin: -4px 0 10px; font-size: 14px; line-height: 1.6; color: #4A5B70; }
.hv2-quiz-wrap .quiz-hero > .quiz-hero-sub { grid-column: 1; }

/* CHIP_ALIGN_2026_10_15 2問目: 全部の選択肢を左揃え・同じ最低幅・チェックと文字の左位置をそろえる */
.quiz .quiz-opts--chips .quiz-chip-box { justify-content: flex-start; min-width: 124px; padding-left: 14px; padding-right: 14px; }
@media (max-width: 520px) { .quiz .quiz-opts--chips .quiz-chip-box { min-width: 0; } }
/* NEXT_GRAY_2026_10_15 何も選んでいない間の「次へ」 */
.quiz-next.is-idle { background: #C9D2DD; color: #5B6B7E; cursor: pointer; }
.quiz-next.is-idle:hover { background: #BCC7D4; }

/* ICON_ALIGN_2026_10_15 アイコンの見た目の中心を文字にそろえる（数値の中心は合っていても、絵の重心が下がって見えていた） */
.quiz-hero-badge { line-height: 1; padding-top: 5px; padding-bottom: 5px; }
.quiz-hero-badge .lucide-icon { position: relative; top: -1px; flex-shrink: 0; }
.quiz-head .quiz-back { line-height: 1; gap: 3px; }
.quiz-head .quiz-back .lucide-icon { position: relative; top: -0.5px; width: 14px; height: 14px; flex-shrink: 0; }
/* AGE_WIDTH_2026_10_15 年代ボタン: 幅を増やし、文字の左右に余白を残す（5つで同じ幅） */
.quiz-name-age-row { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.25fr); }
.quiz .quiz-name-age-row .quiz-age-chips { gap: 5px; }
.quiz .quiz-name-age-row .quiz-age-chips .quiz-chip-box { padding: 0 6px; font-size: 13px; }
@media (max-width: 520px) { .quiz .quiz-name-age-row .quiz-age-chips .quiz-chip-box { padding: 0 3px; font-size: 12px; } }

/* CONSENT_GAP_2026_10_16 「提供する項目・範囲・撤回の方法（全文）」の上下の隙間を詰める */
.quiz-consent-summary { margin: 0 0 2px; }
.quiz-consent-more { margin: 0 0 4px; }
.quiz-consent-more summary { min-height: 24px; padding: 2px 0; line-height: 1.4; }
.quiz-consent-more[open] summary { margin-bottom: 4px; }
.quiz-consent-check { margin-top: 4px; }

/* HERO_CLEAN_2026_10_16 PC: ヒーローの文字が写真と重ならないよう、写真の領域を右へ寄せ、文字の幅を狭める */
@media (min-width: 1101px) {
    .hv2-hero--bg::after { left: 50%; background-position: 78% top; }
    .hv2-hero--bg::before { background: linear-gradient(90deg, #F6FAFE 0%, #F6FAFE 50%, rgba(246,250,254,0.9) 53%, rgba(246,250,254,0) 62%); }
    .hv2-hero--bg .hv2-hero-inner { grid-template-columns: minmax(0, 540px) 1fr; }
    .hv2-hero--bg .hv2-sub { max-width: 500px; }
}

/* TOP_LIST_2026_10_16 */
/* 説明文: 「|」の位置で改行するのは PC だけ（スマホは自然に折り返す） */
@media (max-width: 768px) { .hv2-lead-br { display: none; } }
/* 職種の写真: 使う部分を下げて顔が切れないように（上の方を見せる） */
.hv2-cat--photo .hv2-cat-photo { object-position: 50% 18%; }
/* 職種カード: アイコンと右の文字の隙間を詰める */
.hv2-cat.hv2-cat--photo { column-gap: 8px; }
.hv2-cat--photo .hv2-cat-icon { margin-right: 0; }
.hv2-cat--photo .hv2-cat-name, .hv2-cat--photo .hv2-cat-count { margin-left: 0; }
/* 県ごとの件数の丸: まん丸に（幅と高さを同じに・中身を中央に） */
.hv2-regions .hv2-pref-count, .hv2-pref-count { box-sizing: border-box; display: inline-flex; align-items: center; justify-content: center; width: 22px; min-width: 22px; height: 22px; padding: 0; border-radius: 50%; line-height: 1; font-size: 12px; font-variant-numeric: tabular-nums; }
/* 会社のロゴが無いときの頭文字の丸 */
.hv2-job-logo--ini { display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; color: #fff; font-size: 14px; font-weight: 800; line-height: 1; flex-shrink: 0; }
.hv2-job-logo--c0 { background: #1B7FE6; } .hv2-job-logo--c1 { background: #14A38B; } .hv2-job-logo--c2 { background: #E39A1B; }
.hv2-job-logo--c3 { background: #7B61D9; } .hv2-job-logo--c4 { background: #D8546E; } .hv2-job-logo--c5 { background: #4A6A8A; }

/* JOBCARD_HEAD_2026_10_16 会社のアイコンはグレーの細い線＋角丸・会社名が長くてもタグを下に落とさない */
.hv2-job-head { flex-wrap: nowrap; align-items: center; gap: 8px; min-width: 0; }
.hv2-job-logo { box-sizing: border-box; flex-shrink: 0; border: 1px solid #D5DAE0; border-radius: 8px; padding: 2px; background: #fff; }
.hv2-job-logo--ini { border: 1px solid transparent; padding: 0; border-radius: 8px; }
.hv2-job-company { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hv2-job-cat { flex: 0 0 auto; white-space: nowrap; }
.hv2-job-logo.hv2-job-logo--ini { background: #4A6A8A; color: #fff; }
.hv2-job-logo.hv2-job-logo--c0 { background: #1B7FE6; } .hv2-job-logo.hv2-job-logo--c1 { background: #14A38B; } .hv2-job-logo.hv2-job-logo--c2 { background: #E39A1B; }
.hv2-job-logo.hv2-job-logo--c3 { background: #7B61D9; } .hv2-job-logo.hv2-job-logo--c4 { background: #D8546E; } .hv2-job-logo.hv2-job-logo--c5 { background: #4A6A8A; }

/* JOBCARD_BTN_2026_10_16 */
/* 給与: 円マークのアイコン・文字を細く小さく（太さ900・19px は重く読みづらかった） */
.hv2-job-salary-value { font-size: 16px; font-weight: 700; line-height: 1.55; letter-spacing: 0; }
.hv2-job-salary-label { font-size: 13px; font-weight: 700; }
/* 「詳細を見る」: 全幅の角丸ボタン */
.hv2-job-more { display: flex; align-items: center; justify-content: center; gap: 6px; align-self: stretch; width: 100%; min-height: 48px; margin-top: 6px; padding: 0 16px; border-radius: 12px; background: #1B7FE6; color: #fff; font-size: 15px; font-weight: 800; box-shadow: 0 4px 12px rgba(27, 127, 230, 0.22); transition: background 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease; }
.hv2-job-more .lucide-icon { color: #fff; width: 18px; height: 18px; transition: transform 0.15s ease; }
.hv2-job:hover .hv2-job-more { background: #1466BD; transform: translateY(-1px); box-shadow: 0 8px 18px rgba(27, 127, 230, 0.3); }
.hv2-job:hover .hv2-job-more .lucide-icon { transform: translateX(3px); }
/* 年収ランキング: 順位の右の隙間を詰める（順位は文字の幅だけ・県名と金額を寄せる） */
.hv2-wage-row { grid-template-columns: auto 1fr auto; gap: 14px; }
.hv2-wage-rank { min-width: 2.2em; }

/* TRUST_2026_10_16 数字の出どころ: 説明文を中央寄せ・カードはアイコンと見出しを1行に・アイコンを小さく */
.hv2-trust-lead { margin: 0 auto; max-width: 46em; text-align: center; font-size: 15px; line-height: 1.75; font-weight: 500; }
.hv2-trust-item { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; padding: 16px 18px; }
.hv2-trust-headline { display: flex; align-items: center; gap: 8px; }
.hv2-trust-icon { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 8px; }
.hv2-trust-icon .lucide-icon { width: 16px; height: 16px; }
.hv2-trust-title { font-size: 16px; font-weight: 800; line-height: 1.3; }
.hv2-trust-desc { font-size: 14px; line-height: 1.65; }
.hv2-trust-lead { max-width: 58em; }
.hv2-trust-lead { text-wrap: balance; }

/* MODAL_SAME_2026_10_16 CTA から開くアンケートのモーダル: トップのアンケートと同じ見た目（青い太枠・バッジ・見出し・右にイラスト） */
.quiz-modal-panel { max-width: 860px; border: 3px solid #1B7FE6; padding: 20px 24px 22px; }
.quiz-modal-head { margin-bottom: 8px; align-items: flex-start; }
.quiz-modal-headtext { flex: 1; min-width: 0; }
.quiz-modal-headtext .quiz-hero-badge { margin-bottom: 8px; }
.quiz-modal-title { margin: 0 0 6px; font-size: 18px; font-weight: 800; line-height: 1.45; }
.quiz-modal-headtext .quiz-hero-sub { margin: 0 0 4px; }
.quiz-modal-body { display: grid; grid-template-columns: minmax(0, 1fr) 190px; gap: 20px; align-items: center; }
.quiz-modal-illust { display: block; width: 100%; height: auto; max-height: 280px; object-fit: contain; }
@media (max-width: 900px) { .quiz-modal-body { grid-template-columns: 1fr; } .quiz-modal-illust { display: none; } }
@media (max-width: 768px) { .quiz-modal-panel { border-width: 0; } }
.quiz-modal-panel { max-width: 980px; }
.quiz-modal-body { grid-template-columns: minmax(0, 1fr) 200px; }

/* CTA_SEAM_2026_10_16 CTAカード: 文字側と画像側で背景が分かれて継ぎ目が出ていた → 1枚の背景でつなぎ、絵は底に揃えて置く */
.hv2-cta-card { background: linear-gradient(120deg, #E8F2FC 0%, #F2F8FE 60%, #F6FAFE 100%); position: relative; }
.hv2-cta-photo.hv2-cta-photo--illust { background: transparent; padding: 0 16px 0 0; display: flex; align-items: flex-end; justify-content: center; min-height: 260px; }
.hv2-cta-photo--illust img { position: static; width: auto; max-width: 100%; height: auto; max-height: 300px; object-fit: contain; object-position: center bottom; }
@media (max-width: 900px) { .hv2-cta-photo.hv2-cta-photo--illust { padding: 0; min-height: 180px; order: -1; } .hv2-cta-photo--illust img { max-height: 200px; } }

/* IND_CARDS_2026_10_16 業種ページ: 会社カード・職種写真カード・資格カード・イラスト・コラムカード */
.ind-co-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.ind-co { display: flex; align-items: center; gap: 14px; padding: 16px; border: 1.5px solid #CFE0F3; border-radius: 14px; background: #fff; color: #16263B; text-decoration: none; transition: box-shadow 0.15s ease, transform 0.15s ease, border-color 0.15s ease; }
.ind-co:hover { border-color: #1B7FE6; box-shadow: 0 10px 26px rgba(22, 38, 59, 0.10); transform: translateY(-2px); color: #16263B; }
.ind-co .ind-co-logo { width: 48px; height: 48px; flex: 0 0 48px; border-radius: 12px; font-size: 20px; object-fit: contain; }
.ind-co-body { display: flex; flex-direction: column; gap: 4px; min-width: 0; flex: 1 1 auto; }
.ind-co-name { font-size: 16px; font-weight: 800; line-height: 1.4; }
.ind-co-desc { font-size: 13px; line-height: 1.6; color: #4A5B70; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; }
.ind-co-go { width: 22px; height: 22px; flex: 0 0 22px; color: #1B7FE6; }
.ind-cats { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.ind-skill-wrap { display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px; align-items: center; }
.ind-skill-wrap--img { grid-template-columns: minmax(0, 1fr) minmax(0, 300px); }
.ind-skill-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin: 0; padding: 0; list-style: none; }
.ind-skill-wrap--img .ind-skill-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.ind-skill-card { display: flex; align-items: flex-start; gap: 12px; padding: 14px 16px; border: 1.5px solid #CFE0F3; border-radius: 14px; background: #fff; color: #16263B; font-size: 15px; font-weight: 700; line-height: 1.6; }
.ind-skill-card::before, .ind-skill-card::after { content: none; }
.ind-skill-check { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; flex: 0 0 28px; border-radius: 50%; background: #E6F1FD; color: #1B7FE6; }
.ind-skill-check .lucide-icon { width: 16px; height: 16px; }
.ind-skill-text { min-width: 0; overflow-wrap: anywhere; }
.ind-skill-fig img, .ind-intro-fig img { display: block; width: 100%; height: auto; border-radius: 16px; }
.ind-intro-grid { display: block; }
.industry-intro--img .ind-intro-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 340px); gap: 28px; align-items: center; }
.ind-art-grid { margin-top: 4px; }
.ind-art-more { margin-top: 20px; text-align: center; }
@media (max-width: 1024px) {
  .ind-cats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ind-skill-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 720px) {
  .ind-co-grid, .ind-cats, .ind-skill-grid, .ind-skill-wrap--img .ind-skill-grid { grid-template-columns: 1fr; }
  .ind-skill-wrap--img, .industry-intro--img .ind-intro-grid { grid-template-columns: minmax(0, 1fr); }
  .industry-intro--img .ind-intro-fig { order: -1; }
  .ind-skill-wrap--img .ind-skill-fig { order: -1; }
}

/* IND_IMG_2026_10_16 業種ページの画像（複製元の名残・このサイトでは未使用） */
.ind-intro-fig { display: flex; flex-direction: column; gap: 12px; align-items: center; }
.ind-intro-fig img { width: 100%; height: auto; max-width: 420px; object-fit: contain; }
.ind-skill-extra { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin-top: 16px; }
.ind-skill-extra-card { margin: 0; padding: 14px; border: 1px solid #DCE6F2; border-radius: 14px; background: #fff; text-align: center; }
.ind-skill-extra-card img { display: block; width: 100%; max-width: 280px; height: 200px; margin: 0 auto 8px; object-fit: contain; }
.ind-skill-extra-card figcaption { font-size: 14px; font-weight: 700; color: #16263B; line-height: 1.5; }
@media (max-width: 640px) { .ind-skill-extra { grid-template-columns: 1fr; } }

/* FAQ_OPEN_2026_10_16 は取り消し（1つ目だけ最初から開く・他は押して開閉。app.js の FAQ_FIRST_OPEN） */

/* CRUMB_UNIFY_2026_10_16 パンくずの上下の余白を全ページで統一（ヘッダーの下から12px・下も12px・高さ24px） */
.ph-hero { padding-top: calc(var(--header-h) + 12px); }
.ph-crumbs { margin: 0 0 12px; line-height: 24px; }
.area-hero { padding-top: calc(var(--header-h) + 12px); }
.area-hero-breadcrumb { margin-bottom: 12px; line-height: 24px; }
.breadcrumb { margin: 0 0 12px; line-height: 24px; }
.container > nav.article-breadcrumb { padding-top: calc(var(--header-h) + 12px); padding-bottom: 12px; line-height: 24px; }
.detail-page .breadcrumb, .detail-main .breadcrumb { margin-bottom: 12px; }

/* CRUMB_UNIFY2_2026_10_16 実測で残った差を詰める（詳細88→76・一覧96+8→76・県の下20→12） */
.detail-section { padding-top: calc(var(--header-h) + 12px); }
.list-section { padding-top: calc(var(--header-h) + 12px); }
.list-page-header { padding-top: 0; }
.area-hero-breadcrumb { margin-bottom: 12px; }

/* SIDEBAR_NOSCROLL_2026_10_16 サイドバーにスクロールバーを出さない（高さ制限をやめ、中身をそのまま見せる） */
.joblist-sidebar, .detail-sidebar, .sidebar-card { max-height: none; overflow: visible; }
body .area-hero { padding-top: calc(var(--header-h) + 12px); }
body .area-hero-breadcrumb { margin-bottom: 12px; line-height: 24px; }

/* JOBLIST_FIX_2026_10_16 雇用形態ボタンは3つ+2つの2行・サイドバーは固定（高さが画面に収まるよう余白を詰める）・給与の黄色を薄く・フッター下段 */
.service-filter { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px; }
.service-filter .service-tab { grid-column: span 2; justify-content: center; text-align: center; padding-left: 6px; padding-right: 6px; white-space: nowrap; }
.service-filter .service-tab:nth-child(n+4) { grid-column: span 3; }
@media (min-width: 1024px) {
  .joblist-sidebar { position: sticky; top: calc(var(--header-h) + 16px); align-self: start; }
}
:root { --v3-yellow-bg: #FFFAE8; }
.footer-bottom { align-items: center; }
.footer-legal-links { display: flex; flex-wrap: wrap; gap: 8px 24px; }
.footer-bottom-end { display: flex; align-items: center; gap: 16px; margin-left: auto; }
.footer-bottom-end .footer-copyright { margin: 0; }

/* JOBCARD_TUNE_2026_10_16 カードの補足文字を少し小さく・題名は太すぎない・ロゴ/会社名/バッジの縦中央をそろえる／詳細の写真 */
.hv2-job-meta li { font-size: 14px; }
.hv2-job-title { font-weight: 700; }
.hv2-job-head { align-items: center; }
.hv2-job-company, .hv2-job-cat { line-height: 1; display: inline-flex; align-items: center; }
.hv2-job-company { min-height: 28px; }
.hv2-job-cat { padding: 6px 10px; }
.hv2-job-logo { align-self: center; }
.detail-hero-photo { display: block; width: 100%; aspect-ratio: 16 / 7; height: auto; object-fit: cover; border-radius: 12px; margin-bottom: 16px; }

/* HEADER_FIX_2026_10_16 白いヘッダー上でログインのホバーが見えなくなる不具合（濃紺用の白文字指定が残っていた） */
.site-header .btn-outline:hover { background: #EAF2FD; border-color: #1B7FE6; color: #1B7FE6; }
:root[data-theme="dark"] .site-header .btn-outline:hover { background: rgba(255,255,255,0.10); border-color: #fff; color: #fff; }

/* SEARCH_RICH_2026_10_16 ヘッダー検索の候補（新着・会社・職種・条件） */
.site-header .header-search-dropdown { left: auto; right: 0; width: 440px; max-width: calc(100vw - 32px); max-height: min(560px, calc(100vh - 100px)); overflow-y: auto; padding: 8px; border-radius: 14px; background: var(--bg-primary); }
.hs-title { display: flex; align-items: center; gap: 6px; margin: 10px 8px 4px; font-size: 12px; font-weight: 800; color: var(--text-muted); letter-spacing: 0.04em; }
.hs-title:first-child { margin-top: 4px; }
.hs-title .lucide-icon { width: 14px; height: 14px; }
.hs-item { display: flex; align-items: center; gap: 10px; padding: 8px; border-radius: 10px; color: var(--text-primary); text-decoration: none; }
.hs-item:hover, .hs-item.is-active { background: #EAF2FD; }
.hs-logo { width: 28px; height: 28px; flex: 0 0 28px; border-radius: 8px; object-fit: contain; background: #fff; border: 1px solid #D5DAE0; padding: 2px; box-sizing: border-box; }
.hs-logo--ini { display: inline-flex; align-items: center; justify-content: center; background: #4A6A8A; border-color: transparent; color: #fff; font-size: 14px; font-weight: 800; padding: 0; }
.hs-job { align-items: flex-start; }
.hs-job-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.hs-job-title { font-size: 14px; font-weight: 700; line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.hs-job-meta { font-size: 12px; color: var(--text-muted); }
.hs-job-salary { font-size: 12px; color: #9A6A00; background: #FFFAE8; border-radius: 6px; padding: 1px 6px; align-self: flex-start; max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hs-company-name { flex: 1; min-width: 0; font-size: 14px; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hs-count { font-size: 12px; color: var(--text-muted); }
.hs-chips { display: flex; flex-wrap: wrap; gap: 6px; padding: 2px 8px 4px; }
.hs-chip { display: inline-flex; padding: 6px 12px; border: 1px solid var(--border); border-radius: 999px; font-size: 13px; font-weight: 700; gap: 6px; }
.hs-chip .lucide-icon { width: 14px; height: 14px; }
.hs-all { justify-content: space-between; margin-top: 6px; border-top: 1px solid var(--border); border-radius: 0 0 10px 10px; padding-top: 12px; font-size: 14px; font-weight: 800; color: #1B7FE6; }
.hs-all .lucide-icon { width: 16px; height: 16px; }

/* APPLY_GATE_2026_10_16 アンケートのあとの「採用ページへ進む」 */
.entry-apply-go { max-width: 720px; margin: 8px auto 24px; padding: 24px; border: 2px solid #1B7FE6; border-radius: 16px; background: #fff; text-align: center; display: flex; flex-direction: column; gap: 12px; align-items: center; }
.entry-apply-go-lead { margin: 0; font-size: 18px; font-weight: 800; }
.entry-apply-go-note { margin: 0; font-size: 13px; color: var(--text-muted); }

/* PLAIN_HEADING_2026_10_16 サービス概要・規約系の見出しは左の棒（ブラケット）をやめて、文字だけの見出しにする */
.about-section-title:not(:has(.lucide-icon)):not(:has(svg))::before,
.legal-body h2::before { content: none; display: none; }
.about-section-title, .legal-body h2 { font-size: 22px; font-weight: 800; margin: 0 0 14px; padding: 0; border: 0; }
.about-section { margin-bottom: 44px; }

/* STATIC_PAGES_2026_10_16 サービス概要・採用担当者向け: カードはアイコンと見出しを1行・見出しはチップ/棒なし・流れは矢印でつなぐ */
.features-grid .feature-card { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 10px; align-items: center; align-content: start; }
.features-grid .feature-card > .feature-card-desc,
.features-grid .feature-card > .btn,
.features-grid .feature-card > a,
.features-grid .feature-card > p { grid-column: 1 / -1; }
.features-grid .feature-card > .feature-card-desc { margin-top: 10px; }
.features-grid .feature-card > .btn { margin-top: 12px; justify-self: start; }
.features-grid .feature-card .feature-card-title { margin: 0; font-size: 17px; font-weight: 800; line-height: 1.4; }
.features-grid .feature-card .feature-card-icon { margin: 0; }
.about-section-title .lucide-icon { width: 26px; height: 26px; padding: 0; background: none; border-radius: 0; color: #1B7FE6; }
.about-section-title { gap: 10px; }

.step-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 28px; counter-reset: none; }
.step-list .step-item { position: relative; display: flex; flex-direction: column; gap: 12px; padding: 20px 18px; background: var(--bg-primary); border: 1px solid var(--border); border-radius: 14px; }
.step-list .step-number { width: 40px; height: 40px; border-radius: 50%; background: #1B7FE6; color: #fff; font-weight: 800; font-size: 18px; display: flex; align-items: center; justify-content: center; }
.step-list .step-item:not(:last-child)::after { content: ""; position: absolute; top: 40px; right: -22px; width: 16px; height: 16px; border-top: 3px solid #1B7FE6; border-right: 3px solid #1B7FE6; transform: rotate(45deg); opacity: 0.55; }
.step-list .step-item:not(:last-child)::before { content: ""; position: absolute; top: 59px; left: calc(100% - 2px); width: 26px; height: 3px; background: #1B7FE6; opacity: 0.35; }
@media (max-width: 900px) {
  .step-list { grid-template-columns: 1fr; gap: 24px; }
  .step-list .step-item { flex-direction: row; align-items: flex-start; }
  .step-list .step-item:not(:last-child)::after { top: auto; bottom: -19px; right: auto; left: 28px; transform: rotate(135deg); }
  .step-list .step-item:not(:last-child)::before { display: none; }
}

/* SELECT_ARROW_2026_10_16 セレクトボックスに下向きの三角（▼）を付ける／お名前（姓・名）を2列 */
.form-select, .form-select:required:invalid, .form-select:invalid { -webkit-appearance: none; appearance: none; padding-right: 40px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2364748B' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 14px center; background-size: 16px 16px; }
.form-row-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }

/* CONTACT_TUNE_2026_10_16 お問い合わせ: 2列・案内カードの縦中央と左端そろえ・送信前の余白・フッターの切替ボタン */
.contact-form .form-row-2, .contact-form-wrap .form-row-2 { align-items: start; }
.contact-form .form-row-2 > .form-group, .contact-form-wrap .form-row-2 > .form-group { margin-bottom: 0; }
.contact-form .form-row-2, .contact-form-wrap .form-row-2 { margin-bottom: 20px; }
.contact-form .form-row-2 .form-row-2, .contact-form-wrap .form-row-2 .form-row-2 { margin-bottom: 0; }
@media (max-width: 640px) { .contact-form .form-row-2, .contact-form-wrap .form-row-2 { grid-template-columns: 1fr; } }
.form-privacy-note { margin: 8px 0 24px; line-height: 1.7; }
.contact-info-title { gap: 8px; margin-bottom: 14px; }
.contact-info-title .lucide-icon { width: 20px; height: 20px; padding: 0; background: none; border-radius: 0; color: #1B7FE6; }
.contact-info-row { display: grid; grid-template-columns: 96px minmax(0, 1fr); align-items: center; column-gap: 12px; padding: 6px 0; }
.contact-info-row dt { display: flex; align-items: center; gap: 6px; margin: 0; font-weight: 700; color: var(--text-secondary); white-space: nowrap; }
.contact-info-row dd { margin: 0; text-align: left; word-break: break-all; }
.contact-info-row .lucide-icon { margin-top: 0; width: 16px; height: 16px; }
.contact-info-text { margin: 0 0 16px; }
.footer-theme-toggle { width: 32px; height: 32px; margin: 0; border-radius: 8px; }
.footer-theme-toggle .lucide-icon { width: 16px; height: 16px; }
/* 求人一覧サイドの雇用形態ボタン: 狭い幅で文字が切れないよう字をわずかに小さく */
.service-filter .service-tab { font-size: 13px; letter-spacing: 0; }
.contact-grid, .contact-layout { grid-template-columns: minmax(0, 1fr) 330px; }
.contact-info-row { grid-template-columns: 92px minmax(0, 1fr); }
.contact-info-row dd { word-break: normal; overflow-wrap: anywhere; font-size: 14px; }
@media (max-width: 900px) { .contact-grid, .contact-layout { grid-template-columns: 1fr; } }
.service-filter .service-tab { font-size: 12.5px; padding-left: 4px; padding-right: 4px; }

/* JOBCARD_ALIGN_2026_10_17 給与ラベルと条件行のアイコンを文字の縦中央に・カテゴリのバッジは写真の右上へ・雇用形態ボタンの幅 */
.hv2-job-salary-label { line-height: 1; gap: 6px; }
.hv2-job-salary-label .lucide-icon { display: block; width: 18px; height: 18px; flex: 0 0 18px; }
.hv2-job-meta li { align-items: flex-start; line-height: 22px; }
.hv2-job-meta .lucide-icon { width: 16px; height: 16px; margin-top: 3px; flex: 0 0 16px; }
.hv2-job--photo { position: relative; }
.hv2-job--photo .hv2-job-cat { position: absolute; top: 12px; right: 12px; margin: 0; z-index: 2; background: rgba(255,255,255,0.96); color: var(--text-primary); box-shadow: 0 2px 8px rgba(15,27,51,0.18); }
.service-filter { grid-template-columns: repeat(12, minmax(0, 1fr)); }
.service-filter .service-tab { grid-column: span 4; }
.service-filter .service-tab:nth-child(4) { grid-column: span 7; }
.service-filter .service-tab:nth-child(5) { grid-column: span 5; }

/* SEARCH_DROPDOWN_LEFT_2026_10_17 候補は入力欄の左端にそろえ、幅広く縦に長く */
.site-header .header-search-dropdown { left: 0; right: auto; width: 520px; max-height: min(720px, calc(100vh - 90px)); }
@media (max-width: 1200px) { .site-header .header-search-dropdown { width: 420px; } }

/* MAKER_CARD_2026_10_17 会社一覧カード: アイコン・所在地のピン・ボタン／関連コラムのカード */
.hub-card--maker { display: flex; flex-direction: column; gap: 10px; }
.hub-card-head { display: flex; align-items: center; gap: 12px; }
.hub-card-head .hub-card-title { margin: 0; min-width: 0; }
.hub-card-logo { width: 40px; height: 40px; flex: 0 0 40px; border-radius: 10px; object-fit: contain; background: #fff; border: 1px solid #D5DAE0; padding: 3px; box-sizing: border-box; }
.hub-card-logo--ini { display: inline-flex; align-items: center; justify-content: center; border-color: transparent; padding: 0; color: #fff; font-size: 18px; font-weight: 800; }
.hub-card-meta { display: flex; align-items: flex-start; gap: 6px; margin: 0; }
.hub-card-meta .lucide-icon { width: 16px; height: 16px; flex: 0 0 16px; margin-top: 3px; color: #64748B; }
.hub-card--maker .hub-card-btn { margin-top: auto; }
.hub-card--maker .hub-card-btn .lucide-icon { width: 16px; height: 16px; }
.list-related-articles { background: none; border: 0; padding: 0; }
.list-related-articles .list-related-title { font-size: 22px; font-weight: 800; margin-bottom: 18px; }
.list-related-more { margin-top: 20px; }
.hub-card-logo--ini.hv2-job-logo--c0 { background: #1B7FE6; } .hub-card-logo--ini.hv2-job-logo--c1 { background: #14A38B; } .hub-card-logo--ini.hv2-job-logo--c2 { background: #E39A1B; }
.hub-card-logo--ini.hv2-job-logo--c3 { background: #7B61D9; } .hub-card-logo--ini.hv2-job-logo--c4 { background: #D8546E; } .hub-card-logo--ini.hv2-job-logo--c5 { background: #4A6A8A; }

/* HEADER_INPUT_WHITE_2026_10_17 ヘッダーの検索欄は背景白／会社別カードはホバーで動かさず枠線だけ */
.site-header .header-search-input { background: #fff; border-color: #CBD5E1; }
.hub-card:hover, .hub-card--maker:hover { transform: none; box-shadow: none; border-color: #1B7FE6; }
.hub-card { transition: border-color 0.15s ease; }

/* LINK_AS_BUTTON_2026_10_17 カード内の「求人を見る」系の文字リンクは、全ページでボタンにする（資格・条件別／業態別／会社別／県など） */
.hub-card-link, .cat-related-card-link {
  display: flex; align-items: center; justify-content: center; gap: 6px;
  margin-top: auto; min-height: 44px; padding: 10px 16px; border-radius: 10px;
  background: #1B7FE6; color: #fff; font-size: 15px; font-weight: 800; text-align: center; text-decoration: none;
}
.hub-card-link::after, .cat-related-card-link::after { content: ""; width: 7px; height: 7px; border-top: 2px solid currentColor; border-right: 2px solid currentColor; transform: rotate(45deg); }
.hub-card:hover .hub-card-link, .cat-related-card:hover .cat-related-card-link { background: #1466BD; color: #fff; }
.hub-card, .cat-related-card { display: flex; flex-direction: column; }
.cat-related-card { gap: 8px; }

/* LEGAL_TUNE_2026_10_17 規約・プライバシー・特商法・FAQ: 見出しは背景/アイコンなし・リスト番号の位置・見出しとの間隔・FAQの開いた行の背景なし */
body .ph-hero.ph-hero--plain { background: none; color: var(--text-primary); padding: calc(var(--header-h) + 12px) 0 0; margin-bottom: 8px; border: 0; }
body .ph-hero--plain .ph-title { color: var(--text-primary); font-size: 32px; margin: 0 0 8px; }
body .ph-hero--plain .ph-title .lucide-icon { display: none; }
body .ph-hero--plain .ph-crumbs, body .ph-hero--plain .ph-crumbs [aria-current] { color: var(--text-secondary); }
body .ph-hero--plain .ph-crumbs a { color: var(--text-secondary); text-decoration-color: rgba(100,116,139,0.5); }
body .ph-hero--plain .ph-crumbs-item + .ph-crumbs-item::before { color: var(--text-muted); }
body .ph-hero--plain .ph-lead, body .ph-hero--plain .ph-note { color: var(--text-secondary); }
.legal-body ol, .legal-body ul { margin: 0 0 20px; padding-left: 1.8em; }
.legal-body ol { list-style: decimal outside; }
.legal-body ul { list-style: disc outside; }
.legal-body li { margin-bottom: 8px; padding-left: 2px; }
.legal-body li > ul, .legal-body li > ol { margin: 8px 0 4px; }
.legal-body h2 { margin-top: 40px; }
.legal-body .legal-contact { margin-bottom: 24px; }
.static-page-nav { margin-top: 40px; display: flex; flex-wrap: wrap; gap: 12px; }
body .faq-question.open, body details.faq-item[open] > .faq-question { background: transparent; }
.legal-body li, .legal-body li li { font-size: 16px; line-height: 1.85; color: var(--text-secondary); }

/* SKILL_ILLUST_2026_10_17 資格・条件別: 一覧カードの挿絵・各ページの見出し右の挿絵・求人カードは3列 */
.hub-card-illust { display: block; width: 100%; aspect-ratio: 4 / 3; height: auto; object-fit: contain; background: #F3F7FC; border-radius: 10px; margin-bottom: 4px; }
.ph-hero-inner--illust { position: relative; }
.ph-hero-illust { position: absolute; right: 0; bottom: 0; width: 260px; height: auto; max-height: 100%; object-fit: contain; pointer-events: none; }
.ph-hero-inner--illust .ph-title, .ph-hero-inner--illust .ph-lead, .ph-hero-inner--illust .ph-note { max-width: calc(100% - 290px); }
@media (max-width: 800px) { .ph-hero-illust { display: none; } .ph-hero-inner--illust .ph-title, .ph-hero-inner--illust .ph-lead, .ph-hero-inner--illust .ph-note { max-width: none; } }
.hv2-jobs--cols3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 1024px) { .hv2-jobs--cols3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .hv2-jobs--cols3 { grid-template-columns: 1fr; } }

/* COMPANY_AUTO_2026_10_17 会社ページ（求人データから自動生成）まわり
   - 求人カード: 会社ページがある会社はカードを <div> にし、タイトルのリンクをカード全面に広げる。会社名は会社ページへのリンク（前面）
   - 求人詳細: 会社名を会社ページへのリンクに
   - 会社別一覧: 「詳しい紹介がある会社」「求人掲載中の会社」の2ブロック */
.hv2-job--linked { position: relative; }
.hv2-job--linked .hv2-job-link { color: inherit; text-decoration: none; }
.hv2-job--linked .hv2-job-link::after { content: ""; position: absolute; inset: 0; z-index: 1; border-radius: 14px; }
.hv2-job--linked .hv2-job-link:focus-visible { outline: none; }
.hv2-job--linked:has(.hv2-job-link:focus-visible) { outline: 3px solid var(--accent); outline-offset: 2px; }
.hv2-job--linked .hv2-job-cat { pointer-events: none; }
.hv2-job-colink { position: relative; z-index: 2; color: var(--text-secondary); text-decoration: underline; text-decoration-color: rgba(100, 116, 139, 0.45); text-underline-offset: 3px; }
.hv2-job-colink:hover { color: #1B7FE6; text-decoration-color: currentColor; }
.job-company-link { color: var(--text-primary); text-decoration: underline; text-decoration-color: rgba(100, 116, 139, 0.45); text-underline-offset: 3px; }
.job-company-link:hover { color: #1B7FE6; text-decoration-color: currentColor; }
.maker-index .maker-block:first-child { margin-top: 0; }
.maker-index .maker-block > .cat-guide-text { margin: -8px 0 16px; }
.ph-hero-inner--illust > :not(.ph-hero-illust):not(.ph-crumbs) { max-width: calc(100% - 290px); }
.ph-hero-illust { width: 240px; bottom: 8px; }
@media (max-width: 800px) { .ph-hero-inner--illust > :not(.ph-hero-illust):not(.ph-crumbs) { max-width: none; } }

/* HERO_FADE_2026_10_17（最終）PCのヒーロー下端を白へ軽くぼかす（左の背景色側も） */
@media (min-width: 769px) {
  .hv2-hero--bg::before { background: linear-gradient(180deg, rgba(255,255,255,0) calc(100% - 96px), #fff 100%), linear-gradient(90deg, #F6FAFE 0%, #F6FAFE 50%, rgba(246,250,254,0.9) 53%, rgba(246,250,254,0) 62%); }
}

/* AREA_TUNE_2026_10_17 県ページ: 産業別カードの左ボーダーなし・上の数字は太すぎない・年収/労働時間のカードは折り返さない */
body .area-industry-item { border-left: 1px solid var(--border); }
body .area-hero-stat strong { font-weight: 700; font-size: 22px; }
body .area-hero-stat { font-size: 13px; }
.area-profile-grid { grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 12px; }
body .area-profile-item { padding: 14px 16px; }
body .area-profile-label { text-transform: none; letter-spacing: 0; font-size: 13px; margin-bottom: 4px; }
body .area-profile-value { font-size: 20px; font-weight: 800; white-space: nowrap; }
body .area-profile-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
@media (max-width: 900px) { body .area-profile-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
body .area-profile-label { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
body .area-profile-label { white-space: normal; overflow: visible; text-overflow: clip; }
body .area-profile-item { display: flex; flex-direction: column; justify-content: space-between; gap: 4px; }
body .area-profile-grid { margin-top: 16px; }
/* CAT_GAP_2026_10_17 トップの職種カード: アイコンと文字の間を詰める */
.hv2-cat.hv2-cat--photo { column-gap: 10px; }
.hv2-cat--photo .hv2-cat-name, .hv2-cat--photo .hv2-cat-count { padding-left: 0; }

/* AREA_TUNE2_2026_10_17 県ページ: ヒントの点を文の1行目の中央に・ヒントの中のリンク・市区町村カード（人口の見出し）・FAQの開いた所の区切り線なし・記事カード */
body .area-tips-list li { align-items: flex-start; gap: 12px; }
body .area-tips-list li::before { margin-top: 12px; width: 6px; height: 6px; flex: 0 0 6px; background: #1B7FE6; }
body .area-tips-list li > span { min-width: 0; }
body .area-tips-list li a { color: #1B7FE6; font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }
body .area-city-card { flex-direction: column; align-items: flex-start; justify-content: center; gap: 2px; padding: 8px 14px; }
body .area-city-card-pop { font-size: 12px; font-weight: 500; color: var(--text-muted); }
.area-city-more { margin: 12px 0 0; font-size: 14px; color: var(--text-secondary); }
body .faq-answer { border-top: 0; padding-top: 4px; }
body .faq-question.open, body .faq-question[aria-expanded="true"] { border-bottom: 0; }
.hv2-art-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 1024px) { .hv2-art-grid--3, .hv2-art-grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .hv2-art-grid--3, .hv2-art-grid--4 { grid-template-columns: 1fr; } }
.article-links-block { margin-top: 0; }
/* QA_SAME_2026_10_17 QとAの文字は同じ大きさ・同じ色（全ページ）／将来展望の左線なし */
body .faq-q-icon, body .faq-answer::before { font-size: 18px; font-weight: 900; color: #1B7FE6; font-family: var(--font-sans); line-height: 1; }
body .faq-q-badge { font-size: 18px; font-weight: 900; }
body .area-outlook-text { border-left: 0; background: none; padding: 0; }

/* FAV_2026_10_17 求人の保存（お気に入り）ボタン・ログインの案内・保存した求人／閲覧履歴のページ
   - カード: 写真の左上（右上は職種のバッジ）に丸いボタン。写真の無いカードは右上。タイトルのリンク（カード全面 z-index:1）より前面に置く
   - 詳細: 応募ボタンの下に横長の「この求人を保存」 */
.fav-btn { cursor: pointer; font-family: inherit; -webkit-tap-highlight-color: transparent; }
.fav-btn .lucide-icon, .fav-btn svg { width: 20px; height: 20px; flex-shrink: 0; }
.fav-btn.is-saved svg { fill: currentColor; }
.fav-btn.is-busy { opacity: 0.6; pointer-events: none; }
.fav-btn:focus-visible { outline: 3px solid #1B7FE6; outline-offset: 2px; }
.fav-btn--card {
  position: absolute; top: 12px; left: 12px; z-index: 3;
  display: flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; padding: 0; border-radius: 50%;
  border: 1px solid #D5DAE0; background: rgba(255, 255, 255, 0.96); color: #1B7FE6;
  box-shadow: 0 1px 4px rgba(15, 27, 51, 0.14);
  transition: background var(--transition), color var(--transition), border-color var(--transition);
}
.fav-btn--card::before { content: ""; position: absolute; inset: -4px; border-radius: 50%; } /* 押せる範囲を 48px に */
.fav-btn--card:hover { border-color: #1B7FE6; }
.fav-btn--card.is-saved { background: #1B7FE6; border-color: #1B7FE6; color: #fff; }
.hv2-job:not(.hv2-job--photo) > .fav-btn--card { top: 14px; left: auto; right: 14px; }
.hv2-job:not(.hv2-job--photo) .hv2-job-head { padding-right: 48px; }
.fav-btn--detail {
  display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: 10px;
  border: 2px solid #1B7FE6; background: var(--bg-primary); color: #1B7FE6; font-weight: 800;
}
.fav-btn--detail:hover { background: #EAF3FD; color: #1466BD; border-color: #1466BD; }
.fav-btn--detail.is-saved { background: #EAF3FD; }
.fav-btn-text--on { display: none; }
.fav-btn.is-saved .fav-btn-text--on { display: inline; }
.fav-btn.is-saved .fav-btn-text--off { display: none; }
:root[data-theme="dark"] .fav-btn--card { background: rgba(15, 23, 42, 0.92); border-color: #334155; color: #7DB8F5; }
:root[data-theme="dark"] .fav-btn--card.is-saved { background: #1B7FE6; border-color: #1B7FE6; color: #fff; }
:root[data-theme="dark"] .fav-btn--detail { color: #7DB8F5; border-color: #7DB8F5; }
:root[data-theme="dark"] .fav-btn--detail.is-saved, :root[data-theme="dark"] .fav-btn--detail:hover { background: rgba(27, 127, 230, 0.16); }

/* ログインのモーダル上部の案内（保存ボタンから開いたときだけ） */
.fav-login-note { display: flex; align-items: flex-start; gap: 10px; margin: 0 0 16px; padding: 12px 14px; border: 1px solid #BBD8F7; border-radius: 10px; background: #EAF3FD; color: #0F3D73; }
.fav-login-note[hidden] { display: none; }
.fav-login-note .lucide-icon, .fav-login-note svg { width: 20px; height: 20px; flex-shrink: 0; margin-top: 2px; color: #1B7FE6; }
.fav-login-note p { margin: 0; font-size: 14px; line-height: 1.7; font-weight: 700; }
.fav-login-note a { color: #1466BD; text-decoration: underline; text-underline-offset: 3px; }
:root[data-theme="dark"] .fav-login-note { background: rgba(27, 127, 230, 0.14); border-color: rgba(125, 184, 245, 0.4); color: #DCEBFB; }
:root[data-theme="dark"] .fav-login-note a { color: #7DB8F5; }

/* ヘッダー（ログイン中の求職者）: 保存した求人・閲覧履歴。狭い幅は文字を隠してアイコンだけ、スマホはメニューの中 */
.header-seeker-link { display: inline-flex; align-items: center; gap: 6px; }
@media (max-width: 1280px) { .header-seeker-link-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } }
@media (max-width: 760px) { .header-seeker-link { display: none; } }

/* 保存した求人／閲覧履歴のページ */
.fav-page-section { margin-bottom: 32px; }
.fav-page-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; }
.fav-page-head .dash-card-title { margin: 0; }
.fav-page-lead { margin: -6px 0 16px; font-size: 15px; line-height: 1.7; color: var(--text-secondary); }
.fav-page-empty { display: flex; flex-direction: column; align-items: center; gap: 14px; padding: 36px 20px; border: 1px dashed var(--border); border-radius: 14px; text-align: center; color: var(--text-secondary); }
.fav-page-empty .lucide-icon, .fav-page-empty svg { width: 36px; height: 36px; color: #1B7FE6; }
.fav-page-empty p { margin: 0; font-size: 15px; line-height: 1.7; }
.fav-page-empty .btn { min-height: 44px; }
.fav-page .hv2-jobs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 640px) { .fav-page .hv2-jobs { grid-template-columns: 1fr; } }
.history-clear-form { margin: 0; }
.history-clear-form .btn { min-height: 40px; }
body .area-profile-value { white-space: normal; overflow-wrap: anywhere; min-width: 0; line-height: 1.4; }
body .area-profile-item { justify-content: flex-start; gap: 6px; }
/* NO_LEFT_LINE_2026_10_17 産業別カードは左線なし（四辺とも線なし・背景色だけ） */
body .area-industry-item, body .area-industry-list .area-industry-item { border: 0; border-left: 0; box-shadow: none; }

/* SKILL_CARD_BLEED_2026_10_17 資格・条件別のカード: 挿絵は上・左・右いっぱいに（背景色を端まで伸ばし、余白は文字側だけ） */
.hub-card--skill { padding: 0 0 20px; overflow: hidden; gap: 8px; }
.hub-card--skill > *:not(.hub-card-illust) { margin-left: 22px; margin-right: 22px; }
.hub-card--skill > .hub-card-illust { width: 100%; margin: 0 0 6px; border-radius: 0; background: #EAF2FD; aspect-ratio: 4 / 3; object-fit: contain; }

/* CRUMB_NO_UNDERLINE_2026_10_18 パンくずのリンクは全ページ下線なし（ホバーで色だけ変える） */
body .ph-crumbs a, body .breadcrumb a, body .article-breadcrumb a, body .area-hero-breadcrumb a, body .ph-hero--plain .ph-crumbs a { text-decoration: none; }
body .ph-crumbs a:hover, body .breadcrumb a:hover, body .article-breadcrumb a:hover, body .area-hero-breadcrumb a:hover { text-decoration: none; color: #1B7FE6; }

/* COMPANY_PAGE_2026_10_18 採用担当者向けページ: ヒーローの枠ボタン／ご利用までの流れ／よくある質問のQとA
   - ヒーローは明るい水色の地なので、枠ボタンは青い枠と青い文字。ホバーは薄い青の塗りで、文字も枠もそのまま見える
   - 流れ: 数字の丸と見出しを同じ行、説明は下。カード間の矢印は隙間の中央に1つ（スマホは縦並びで下向き）
   - FAQ: Q と A は同じ大きさ（18px/900）・同じ30pxの箱・本文の1行目と同じ高さ。details型と .faq-item ボタン型の両方 */
body .ph-btn--outline { background: transparent; border: 2px solid #1B7FE6; color: #125FB3; }
body .ph-btn--outline:hover, body .ph-btn--outline:focus-visible { background: #E1EEFB; border-color: #125FB3; color: #0F4A8F; }

.step-list { gap: 28px; }
.step-list .step-item { display: grid; grid-template-columns: 40px minmax(0, 1fr); column-gap: 12px; row-gap: 10px; align-items: center; align-content: start; }
.step-list .step-body { display: contents; }
.step-list .step-number { grid-column: 1; grid-row: 1; flex: none; }
.step-list .step-body h3 { grid-column: 2; grid-row: 1; margin: 0; font-size: 17px; font-weight: 800; line-height: 1.4; }
.step-list .step-body p { grid-column: 1 / -1; grid-row: 2; margin: 0; }
.step-list .step-item:not(:last-child)::before { display: none; }
.step-list .step-item:not(:last-child)::after { content: ""; position: absolute; top: 50%; right: -20px; bottom: auto; left: auto; width: 12px; height: 12px; border-top: 3px solid #1B7FE6; border-right: 3px solid #1B7FE6; transform: translateY(-50%) rotate(45deg); opacity: 0.6; }
@media (max-width: 900px) {
  .step-list { grid-template-columns: 1fr; gap: 36px; }
  .step-list .step-item { flex-direction: unset; align-items: center; }
  .step-list .step-item:not(:last-child)::after { top: auto; bottom: -24px; right: auto; left: 50%; transform: translateX(-50%) rotate(135deg); }
}

body .faq-answer::before { left: 20px; top: 4px; width: 30px; height: 29.6px; line-height: 29.6px; text-align: center; }
body details.faq-item > .faq-question::before { width: 30px; height: 30px; background: transparent; color: #1B7FE6; font-size: 18px; font-weight: 900; line-height: 1; }
body .faq-q-icon { background: transparent; }
@media (max-width: 600px) { body .faq-answer::before { left: 14px; } body .faq-answer { padding-left: 56px; } }
/* 流れ（PC）: 4枚の見出しの行をそろえる（1枚だけ見出しが2行になっても説明の開始位置が同じ） */
@media (min-width: 901px) {
  .step-list { grid-template-rows: auto 1fr; row-gap: 0; }
  .step-list .step-item { grid-row: span 2; grid-template-rows: subgrid; row-gap: 0; }
  .step-list .step-body p { margin-top: 10px; }
}
.step-list .step-body h3 { word-break: auto-phrase; text-wrap: balance; }

/* ARTICLE_PAGE_2026_10_18 コラム一覧はPCで4カラム／記事カード（共通部品 article-card.php）の2列
   （記事ページ専用のルールは、あとから読まれる assets/css/article.css に置いた） */
@media (min-width: 1025px) { .articles-list-page .articles-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; } }
@media (min-width: 601px) and (max-width: 1024px) { .articles-list-page .articles-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.hv2-art-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 520px) { .hv2-art-grid--2 { grid-template-columns: 1fr; } }
.features-grid .feature-card .feature-card-title { word-break: auto-phrase; text-wrap: balance; }

/* HERO_TITLE_FIT_2026_10_18 ヒーロー見出し: 各行が折り返さない大きさ（PC） */
@media (min-width: 1025px) {
  body .hv2-hero--bg .hv2-title { font-size: 40px; line-height: 1.4; }
  body .hv2-hero--bg .hv2-title-line { white-space: nowrap; }
}

/* TOP_TUNE_2026_10_18 求人カード: タグは写真の左下・保存は右上／ヒーロー説明の折り返し／地域から探す／条件から探す（挿絵）／年収の帯 */
.hv2-job--photo { container-type: inline-size; }
.hv2-job--photo .hv2-job-cat { top: calc(50cqw - 12px - 28px); right: auto; left: 12px; bottom: auto; }
.hv2-job--photo > .fav-btn--card { left: auto; right: 12px; top: 12px; }
.hv2-hero--bg .hv2-sub, .hv2-hero--bg .hv2-hero-copy > p { text-wrap: pretty; }

/* 地域から探す: 地方ごとのカード（3列）・件数は小さな数字だけ */
body .hv2-regions { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; background: none; border: 0; border-radius: 0; overflow: visible; }
body .hv2-regions .hv2-region { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; padding: 18px 20px; border: 1px solid #DCE6F2; border-radius: 14px; background: #fff; }
body .hv2-regions .hv2-region:last-child { border-bottom: 1px solid #DCE6F2; }
body .hv2-regions .hv2-region-name { font-size: 16px; font-weight: 800; }
body .hv2-regions .hv2-pref { padding: 6px 10px; border-radius: 8px; font-size: 14px; background: #fff; }
body .hv2-regions .hv2-pref--has { background: #F3F8FE; border-color: #BFD6F0; }
body .hv2-regions .hv2-pref-count, body .hv2-pref-count { width: auto; min-width: 0; height: auto; padding: 0; border-radius: 0; background: none; color: #1B7FE6; font-size: 13px; font-weight: 800; }
@media (max-width: 1024px) { body .hv2-regions { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { body .hv2-regions { grid-template-columns: 1fr; } }

/* 条件から探す: 挿絵つきカード（4列） */
body .hv2-conds { gap: 14px; }
body .hv2-conds .hv2-cond { flex-direction: column; align-items: stretch; gap: 0; padding: 0; overflow: hidden; }
body .hv2-cond-illust { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: contain; background: #EAF2FD; }
body .hv2-cond-row { display: flex; align-items: center; gap: 8px; padding: 12px 14px; min-width: 0; }
body .hv2-cond-label { flex: 1; min-width: 0; font-size: 15px; }
body .hv2-cond-go { margin-left: auto; }

/* 年収の帯: 2つの表は少し狭く中央に・説明とボタンは中央そろえ */
body .hv2-wage-cols { max-width: 900px; margin-left: auto; margin-right: auto; }
body .hv2-wage-foot { flex-direction: column; align-items: center; justify-content: center; gap: 12px; text-align: center; margin-top: 28px; }
body .hv2-wage-source { flex: 0 1 auto; }

/* ART_BADGE_2026_10_18 記事カードのカテゴリのタグは、サムネ画像の右上に重ねる（全ページ共通の記事カード） */
.hv2-art { position: relative; }
.hv2-art .hv2-art-badge { position: absolute; top: 12px; right: 12px; z-index: 2; margin: 0; background: rgba(255,255,255,0.96); color: var(--text-primary); box-shadow: 0 2px 8px rgba(15,27,51,0.18); }

/* QUIZ_WORK_3COL_2026_10_18 希望の働き方（複数選択）は3列・縦を少し長く */
@media (min-width: 640px) {
  body .quiz .quiz-opts--chips, body .hv2-hero--bg .quiz-hero .quiz-opts--chips { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
}
body .quiz .quiz-chip-box { min-height: 56px; padding-top: 12px; padding-bottom: 12px; align-items: center; }
@media (min-width: 640px) {
  body .quiz .quiz-opts--chips, body .hv2-hero--bg .quiz-hero .quiz-opts--chips { display: grid; }
  body .quiz .quiz-opts--chips .quiz-chip { min-width: 0; }
}

/* JOBCARD_FIX_2026_10_18 タグは写真の左下の端から12px・給与のアイコンを文字の見た目の中央へ（日本語の字面は箱の中心より少し下）・サイドの検索欄は押しても青い線を出さない */
.hv2-job--photo .hv2-job-cat { top: calc(50cqw - 19px); }
.hv2-job-salary-label .lucide-icon { width: 17px; height: 17px; flex-basis: 17px; transform: translateY(1px); }
body .job-search-input:focus, body .job-search-input:focus-visible, body .job-search-wrap:focus-within, body .job-search-form .job-search-input-wrap:focus-within {
  outline: none; box-shadow: none; border-color: var(--border);
}

/* DETAIL_SIDE_2026_10_18 求人詳細のサイド: 会社名の左は公式アイコン/頭文字・タグは会社名の下・掲載元は小さく・保存ボタンは文字とアイコンを中央に */
.job-company-logo { width: 32px; height: 32px; flex: 0 0 32px; box-sizing: border-box; border-radius: 8px; object-fit: contain; background: #fff; border: 1px solid #D5DAE0; padding: 2px; }
.job-company-logo--ini { display: inline-flex; align-items: center; justify-content: center; padding: 0; border-color: transparent; color: #fff; font-size: 16px; font-weight: 800; line-height: 1; }
.job-company-logo--ini.hv2-job-logo--c0 { background: #1B7FE6; } .job-company-logo--ini.hv2-job-logo--c1 { background: #14A38B; } .job-company-logo--ini.hv2-job-logo--c2 { background: #E39A1B; }
.job-company-logo--ini.hv2-job-logo--c3 { background: #7B61D9; } .job-company-logo--ini.hv2-job-logo--c4 { background: #D8546E; } .job-company-logo--ini.hv2-job-logo--c5 { background: #4A6A8A; }
.job-company-row { display: flex; align-items: center; gap: 10px; }
.sidebar-card .spec-badges-row, .detail-main .spec-badges-row { margin: 10px 0 14px; }
.job-source-note { font-size: 12px; line-height: 1.5; color: var(--text-muted); margin: 10px 0 0; }
.fav-btn--detail { min-height: 48px; padding: 0 16px; line-height: 1; }
.fav-btn--detail .lucide-icon, .fav-btn--detail svg { display: block; width: 20px; height: 20px; flex: 0 0 20px; }
.fav-btn--detail .fav-btn-text { display: block; line-height: 1; transform: translateY(1px); }
.fav-btn--detail .fav-btn-text--on { display: none; }
.fav-btn--detail.is-saved .fav-btn-text--on { display: block; }
.fav-btn--detail.is-saved .fav-btn-text--off { display: none; }
.job-source-note { margin: 10px 0 16px; }

/* ART_COMPACT_2026_10_18 記事カードのコンパクト版（求人詳細の関連コラムなど）: 左にサムネ・右にタグと題名 */
.hv2-art-grid--compact { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.hv2-art--compact { flex-direction: row; align-items: stretch; border-radius: 12px; }
.hv2-art--compact .hv2-art-thumb { flex: 0 0 132px; width: 132px; aspect-ratio: auto; min-height: 84px; }
.hv2-art--compact .hv2-art-thumb img { width: 100%; height: 100%; object-fit: cover; }
.hv2-art--compact .hv2-art-body { gap: 6px; padding: 10px 12px; justify-content: center; min-width: 0; }
.hv2-art--compact .hv2-art-badge { position: static; align-self: flex-start; box-shadow: none; background: #E6F1FD; color: #125FB3; font-size: 11px; padding: 1px 8px; }
.hv2-art--compact .hv2-art-title { font-size: 13px; line-height: 1.5; -webkit-line-clamp: 3; }
@media (max-width: 640px) { .hv2-art-grid--compact { grid-template-columns: 1fr; } }
/* 求人詳細のサイド: 「一次情報掲載・毎週更新」の下の余白 */
.sidebar-card .sidebar-meta { margin: 14px 0 0; padding-bottom: 0; }
.sidebar-card.pc-only { padding-bottom: 18px; }
.hv2-art--compact .hv2-art-thumb { flex: 0 0 156px; width: 156px; aspect-ratio: 16 / 9; min-height: 0; align-self: center; }

/* JOBSEARCH_COMPACT_2026_10_18 求人一覧サイドの検索: 入力欄と小さめの検索ボタンを1行に */
body .joblist-sidebar .job-search-form { display: flex; flex-direction: row; align-items: stretch; gap: 8px; }
body .joblist-sidebar .job-search-input-wrap { flex: 1 1 auto; min-width: 0; }
body .joblist-sidebar .job-search-btn { flex: 0 0 auto; width: auto; min-width: 0; height: auto; padding: 0 14px; font-size: 14px; font-weight: 800; border-radius: 10px; box-shadow: none; }
body .joblist-sidebar .job-search-btn .lucide-icon { display: none; }

/* SKILL_PAGE_2026_10_18 条件ページ: 他の条件の求人もカードに挿絵・関連職種は写真つきカード・ヒーローの挿絵は小さく */
.cat-related-card--illust { padding: 0 0 16px; overflow: hidden; gap: 6px; }
.cat-related-card--illust > *:not(.cat-related-illust) { margin-left: 16px; margin-right: 16px; }
.cat-related-illust { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: contain; background: #EAF2FD; margin-bottom: 6px; }
.hv2-cats--rel { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 800px) { .hv2-cats--rel { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .hv2-cats--rel { grid-template-columns: 1fr; } }
.ph-hero-illust { width: 170px; bottom: 6px; }
.ph-hero-inner--illust > :not(.ph-hero-illust):not(.ph-crumbs) { max-width: calc(100% - 210px); }

/* LEAD_WRAP_2026_10_18 ヒーローの説明文の折り返し: 文節の途中で切らず、行の長さをそろえる */
.ph-lead, .ph-hero .ph-lead { text-wrap: pretty; word-break: auto-phrase; line-break: strict; }

/* AREA_CHIP_LABEL_2026_10_18 県・市ページ上の数字のチップ: 何の数字かを先に（上）、数字を下に */
body .area-hero-stat { display: flex; flex-direction: column; gap: 2px; align-items: flex-start; }
body .area-hero-stat-label { font-size: 12px; font-weight: 700; color: var(--text-secondary); }
/* COND_ILLUST_SHORT_2026_10_18 トップの条件から探す: 挿絵の縦を短く */
body .hv2-cond-illust { aspect-ratio: 16 / 9; object-fit: contain; }
body .hv2-cond-row { padding: 10px 14px; }

/* MAKER_LIST_2026_10_18 会社別一覧（/jobs/companies/）: 求人一覧と同じサイドバー＋会社カードの1リスト／自動生成の会社ページの小物 */
.maker-index .hub-card--maker[hidden], .maker-list-empty[hidden] { display: none; }
.maker-index .joblist-sidebar .maker-search-form { margin-bottom: 16px; }
.maker-index .maker-search-form .job-search-input { width: 100%; min-width: 0; }
.maker-index .maker-search-form .job-search-input::-webkit-search-cancel-button { cursor: pointer; }
.maker-region-filter .category-tab { display: flex; align-items: center; gap: 8px; }
.maker-region-filter .category-count { margin-left: auto; }
.maker-min-filter { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.maker-min-filter .service-tab, .maker-min-filter .service-tab:nth-child(n) { grid-column: auto; }
.maker-index .joblist-main > .search-result-bar { margin-top: 0; margin-bottom: 16px; }
.maker-list-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 1240px) { .maker-list-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .maker-list-grid { grid-template-columns: minmax(0, 1fr); } }
.maker-list-empty { display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 40px 16px; text-align: center; border: 1px dashed #CBD5E1; border-radius: 14px; color: var(--text-secondary); }
.maker-list-empty .lucide-icon { width: 32px; height: 32px; color: #94A3B8; }
.maker-list-empty p { margin: 0; }
@media (max-width: 1023px) {
  .maker-index .joblist-sidebar { margin-bottom: 20px; }
  .maker-region-filter { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .maker-region-filter .category-tab { white-space: normal; }
}
.maker-auto-quote { margin: 0; }
.maker-auto-quote-src { display: block; margin-top: 4px; font-size: 13px; color: var(--text-secondary); }

/* ART_DESC_2026_10_18 記事カード: 題名は2行までで省略（行間は少し狭く）・題名の下に説明文（2行まで） */
.hv2-art .hv2-art-title { font-size: 15px; line-height: 1.4; -webkit-line-clamp: 2; }
.hv2-art .hv2-art-desc { font-size: 13px; line-height: 1.6; color: var(--text-secondary); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.hv2-art--compact .hv2-art-title { -webkit-line-clamp: 3; }

/* COLS_RULE_2026_10_19 関連職種カード: 4枚以上は4列、3枚以下は3列 */
@media (min-width: 801px) {
  body .hv2-cats--rel.hv2-cats--n4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  body .hv2-cats--rel.hv2-cats--n3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
body .hv2-cats--rel .hv2-cat--photo .hv2-cat-name { white-space: normal; overflow: visible; text-overflow: clip; font-size: 14px; line-height: 1.35; margin-right: 12px; }
/* MAKER_CARD_SLIM_2026_10_18 会社別一覧のカード: 余白を詰める・アイコン32px・会社名は1行（長いときだけ…）・説明文の代わりに事実のチップ */
.maker-index .hub-card--maker { padding: 14px 16px; gap: 8px; min-width: 0; }
.maker-index .hub-card--maker .hub-card-head { gap: 10px; min-width: 0; }
.maker-index .hub-card--maker .hub-card-logo { width: 32px; height: 32px; flex: 0 0 32px; border-radius: 8px; padding: 2px; }
.maker-index .hub-card--maker .hub-card-logo--ini { padding: 0; font-size: 15px; }
.maker-index .hub-card--maker .hub-card-title { flex: 1 1 auto; min-width: 0; font-size: 15px; line-height: 1.4; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.maker-index .hub-card--maker .hub-card-meta { font-size: 13px; line-height: 1.5; }
.maker-index .hub-card--maker .hub-card-meta .lucide-icon { width: 14px; height: 14px; flex-basis: 14px; margin-top: 2px; }
.maker-card-chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 4px; padding: 0; list-style: none; }
.maker-card-chip { display: inline-flex; align-items: center; padding: 3px 9px; border-radius: 999px; background: #EEF4FB; color: #1E3A5F; font-size: 12px; font-weight: 700; line-height: 1.5; white-space: nowrap; }
.maker-card-chip--count { background: #FFF4E0; color: #8A4B00; }
.maker-index .hub-card--maker .hub-card-btn { min-height: 40px; padding-top: 8px; padding-bottom: 8px; font-size: 14px; }
@media (max-width: 1023px) {
  .maker-region-filter .category-tab { white-space: nowrap; font-size: 13px; padding: 8px 10px; gap: 6px; }
  .maker-region-filter .category-tab .lucide-icon { display: none; }
}

/* QUIZ_PIN_2026_10_19 トップのアンケートを画面の真ん中でいったん止める（PC。JS が .is-pin-enabled を付けたときだけ） */
body .hv2-quiz-wrap.is-pin-enabled { min-height: var(--quiz-pin-h, 120vh); }
body .hv2-quiz-wrap.is-pin-enabled .quiz-hero { position: sticky; top: var(--quiz-pin-top, 90px); }
/* SHEET_TITLE_2026_10_19 右下カードの見出しは折り返しをそろえる */
body .quiz-sheet-title { text-wrap: balance; font-size: 14px; line-height: 1.45; }

/* QUIZ_PIN_LIGHT_2026_10_19 止まっている間: 本来の1/5は薄い青で見えたまま、濃い青がその上を塗っていく */
.quiz-bar { position: relative; }
.quiz-bar-fill { position: relative; z-index: 1; }
.quiz-bar.is-pin-driving::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: var(--quiz-real, 20%); border-radius: 999px; background: #A9CDF6; }
/* QUIZ_BAR_SQUARE_2026_10_19 進み具合の濃い青の線: 右の端は丸めず直線で切る */
.quiz-bar-fill { border-radius: 999px 0 0 999px; }
.quiz-bar.is-pin-driving::before { border-radius: 999px 0 0 999px; }

/* WRAP_FIX_2026_10_16 見出しと短い説明文は、語の途中や1文字だけで折り返さない（日本語の文節で改行） */
h1, h2, h3, .ph-title, .hv2-h2, .cat-guide-title, .industry-block-title, .hv2-flow-desc, .hv2-cta-title { word-break: auto-phrase; text-wrap: pretty; }

/* SIDE_SHORT_2026_10_16 高さの低い PC 画面（〜980px・最長の求人はサイドが868px＋上の余白88px）では、求人詳細のサイドが画面に収まらず下が隠れる。
   サイドの「求人情報（勤務地・雇用形態・給与・締切）」は本文と同じ内容なので、この時だけ外して全体を見せる。
   さらに低い画面（〜700px・欄を外した最長が601px）は追従をやめ、ページと一緒に流す。 */
@media (min-width: 769px) and (max-height: 1040px) { /* 10/16 比べるボタン追加で最長935px＋88px に更新 */
    aside.sidebar-card.pc-only .sidebar-service-list { display: none; }
}
@media (min-width: 769px) and (max-height: 770px) { /* 10/16 欄を外した最長 668px＋88px に更新 */
    aside.sidebar-card.pc-only { position: static; }
}
/* 求人一覧・会社一覧の左サイド（最長680px＋上の余白80px）も、画面の高さが足りない時は追従をやめる */
@media (min-width: 769px) and (max-height: 770px) {
    .joblist-sidebar { position: static; }
}

/* STATS_IN_CARD_2026_10_16 PC（900px〜）は数字4つを「求人を探す」のカードの下段に入れる。下の帯はスマホ・タブレットだけ */
.hv2-search-stats { display: none; }
@media (min-width: 900px) {
    .hv2-search-stats { display: block; grid-column: 1 / -1; margin-top: 20px; padding-top: 6px; border-top: 1px solid var(--border); }
    .hv2-search-stats .hv2-stats-grid { border: 0; border-radius: 0; background: transparent; }
    .hv2-search-stats .hv2-stat:first-child { padding-left: 0; }
    .hv2-stats--sp { display: none; }
}

/* REGION_GRID_2026_10_16 地域から探す（PC・タブレット）: 県のボタンを4列の等幅グリッドに。
   従来は折り返す並びで、3文字の県（鹿児島・神奈川・和歌山）や件数の桁で幅が変わり、行末の右に隙間ができて左右の余白が不ぞろいだった */
@media (min-width: 641px) {
    body .hv2-regions .hv2-pref-chips { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; width: 100%; align-self: stretch; }
    body .hv2-regions .hv2-pref-chips li { min-width: 0; }
    body .hv2-regions .hv2-pref { display: flex; justify-content: center; align-items: center; gap: 3px; padding: 6px 2px; white-space: nowrap; letter-spacing: -0.02em; }
}

/* FLOW_ARROW_2026_10_16 ご利用の流れの矢印（PC）: スマホと同じ角丸に。矢印は「>」の右半分に線があって見た目が右に寄り、
   左右の隙間が不ぞろいだったので、カード間の真ん中に来るよう左へ寄せる */
@media (min-width: 901px) {
    .hv2-flow-step:not(:last-child)::after { border-top-right-radius: 5px; right: -19px; }
}
/* HOME_MOTION_2026_10_16 流れのカードのスクロール演出（js/home-motion.js が js-reveal を付ける） */
.hv2-flow-step.js-reveal { opacity: 0; transform: translateY(26px); transition: opacity 0.6s ease, transform 0.6s cubic-bezier(0.22, 1, 0.36, 1); }
.hv2-flow-step.js-reveal.is-in { opacity: 1; transform: none; }
/* 出方の別パターン（?motion=pop / slide / flip で試せる） */
.hv2-flow-step.js-reveal--pop { transform: scale(0.82); transition: opacity 0.4s ease, transform 0.55s cubic-bezier(0.34, 1.56, 0.64, 1); }
.hv2-flow-step.js-reveal--slide.js-from-l { transform: translateX(-60px); }
.hv2-flow-step.js-reveal--slide.js-from-r { transform: translateX(60px); }
.hv2-flow-step.js-reveal--slide { transition: opacity 0.6s ease, transform 0.7s cubic-bezier(0.22, 1, 0.36, 1); }
.hv2-flow-step.js-reveal--flip { transform: perspective(800px) rotateX(-70deg); transform-origin: 50% 100%; transition: opacity 0.5s ease, transform 0.7s cubic-bezier(0.22, 1, 0.36, 1); }
.hv2-flow-step.js-reveal--pop.is-in, .hv2-flow-step.js-reveal--slide.is-in, .hv2-flow-step.js-reveal--flip.is-in { opacity: 1; transform: none; }
.hv2-wage-yen { font-variant-numeric: tabular-nums; }

/* COND_PAD_2026_10_16 条件から探す（PC）: 挿絵の上下の余白を絵ごとに調整・ホバー時は白のまま枠だけ太く
   img に padding を付けると、絵が枠の中で縮んで余白が増える（aspect-ratio は枠ごと）。 */
@media (min-width: 769px) {
    .hv2-conds .hv2-cond:hover { background: #fff; border-color: #1B7FE6; box-shadow: 0 0 0 1px #1B7FE6, 0 2px 6px rgba(22, 38, 59, 0.04); }
    .hv2-cond[href$="/senior/"] .hv2-cond-illust { padding-bottom: 5%; }
    .hv2-cond[href$="/mikeiken/"] .hv2-cond-illust,
    .hv2-cond[href$="/nishu-yosei/"] .hv2-cond-illust,
    .hv2-cond[href$="/kyuyo-hosho/"] .hv2-cond-illust,
    .hv2-cond[href$="/josei/"] .hv2-cond-illust,
    .hv2-cond[href$="/yakin/"] .hv2-cond-illust { padding-top: 6%; padding-bottom: 6%; }
    .hv2-cond[href$="/inbound/"] .hv2-cond-illust { object-view-box: inset(10% 0); } /* 絵の上下を10%ずつ切って拡大（余白を減らす）。transform は背景がはみ出すので不使用 */
}

/* TRUST_ILLUST_2026_10_16 数字の出どころ: カードの上に挿絵（条件から探すと同じ淡い青の地・16:9・PCだけ） */
.hv2-trust-illust { display: none; }
@media (min-width: 769px) {
    .hv2-trust-item { gap: 10px; }
    .hv2-trust-illust { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: contain; background: #EAF2FD; border-radius: 10px; padding: 8px 0; margin-bottom: 4px; }
}
.hv2-trust-title { text-wrap: balance; word-break: auto-phrase; }

/* DOT_BG_2026_10_16 青っぽい背景の区間（地域から探す・ご利用の流れ）に、アポカク（apokaku.jp）の「アポ代行業者、こんなお悩みありませんか？」と同じ点々の地模様。
   タイルは apokaku.jp の assets/img/dot-pattern.png（4x4px）をそのまま使う */
.hv2-section--tint { background-image: url("../images/dot-pattern.png"); background-repeat: repeat; }

/* FLOW_CHEVRON_2026_10_16 ご利用の流れの「>」を、アポカク（apokaku.jp）のサービスの流れと同じ作りに。
   border を回した自作の山形をやめ、Lucide の chevron-right（線の太さ3・先端も角も丸）を背景画像で出す。色はこのサイトの青 #1B7FE6。
   PC: カード間の真ん中（隙間36px＋矢印24px＝中央は right:-30px。「>」は図形が左寄りなので2px右へ＝-32px）
   縦積み（〜900px）: 白い丸で囲ってカードの下端の隙間の中央に重ねる（アポカクのスマホと同じ） */
body .hv2-flow-steps > .hv2-flow-step:not(:last-child)::after {
    content: ""; position: absolute; pointer-events: none; z-index: 2;
    border: 0; border-radius: 0; box-shadow: none; background-color: transparent;
    background-repeat: no-repeat; background-position: center; background-size: contain;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231B7FE6' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><path d='m9 18 6-6-6-6'/></svg>");
    top: 50%; right: -32px; bottom: auto; left: auto; width: 24px; height: 24px;
    transform: translateY(-50%);
}
@media (max-width: 900px) {
    body .hv2-flow-steps > .hv2-flow-step:not(:last-child)::after {
        top: auto; left: 50%; right: auto; bottom: -29px; width: 28px; height: 28px;
        transform: translateX(-50%) rotate(90deg);
        background-color: #fff; background-size: 15px 15px;
        border: 1px solid #DCE6F2; border-radius: 50%; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
    }
}

/* COND_COL5_2026_10_16 条件から探す（PC 1025px〜）は5列・見出しの上下を広げる。条件から探すは地域から探すの直下へ移動。
   カードが細くなるので、見出しは14px・矢印との間を詰めて1行に収める */
@media (min-width: 1025px) {
    body .hv2-conds { grid-template-columns: repeat(5, minmax(0, 1fr)); }
    body .hv2-cond-label { font-size: 13.5px; letter-spacing: -0.03em; white-space: nowrap; }
    body .hv2-cond-row { gap: 6px; padding-left: 12px; padding-right: 10px; }
    body .hv2-cond-go { width: 16px; height: 16px; }
}
@media (min-width: 769px) {
    body .hv2-cond-row { padding-top: 15px; padding-bottom: 15px; }
}
/* TRUST_WHITE_2026_10_16 数字の出どころの挿絵: 背景は白（絵は不透明の白地。透過にすると顔の白まで抜けて青く見えていた） */
@media (min-width: 769px) {
    .hv2-trust-illust { background: #fff; padding: 0; }
}

/* REGION_WHITE_2026_10_16 地域から探すの各カード（北海道・東北〜九州・沖縄）の背景は白一色（写真の下地をやめる）。sp-b.css の地方別 background-image より優先 */
/* 写真の下地はそのまま使う（齊木さん 10/16「地域カードの写真はそのまま使って」）＝白一色にする指定は取り消し */

/* CENTER_2026_10_16 ①地域から探すの各カード: 地方名（関東・中部…）を中央寄せ（県のボタンは4列グリッドで左右とも均等）
   ②求人を探すのカード（PC）: 見出しを上へ・カードの中で中央に。アンケートのカードとの間を広げる（24→56px） */
/* 地方名（関東・中部…）は中央寄せ（齊木さん 10/16 指示・最終） */
body .hv2-regions .hv2-region-name { align-self: stretch; text-align: center; }
@media (min-width: 900px) {
    .hv2-search { display: block; }
    .hv2-search .hv2-search-title { justify-content: center; margin: 0 0 18px; white-space: normal; }
    .hv2-quiz-wrap + .hv2-search-wrap { margin-top: 56px; }
}

/* REGION_CHIP_2026_10_16 地域から探す: 県のボタン（茨城・栃木…）の背景は白。カードは中身の高さに合わせ、上下の余白を同じにする
   （従来は同じ行のいちばん背の高いカードに合わせて伸び、短いカードの下だけ余白が大きく見えていた） */
body .hv2-regions .hv2-pref, body .hv2-regions .hv2-pref--has { background: #fff; }
body .hv2-regions .hv2-pref:hover { background: #E6F1FD; }
/* カードの高さは同じ行でそろえる（align-items:start は取り消し・齊木さん 10/16「さっきのに戻して」） */

/* REGION_PAD_2026_10_16 地域から探すの中の上下の余白を実測してそろえる
   ・県のボタン（茨城…）: min-height 44 と行の高さ任せだった上下を、padding 13px の同じ値で明示（文字の上下の空きが同じ）
   ・カード: 見出し「関東」の文字の上の空きが約23px・ボタンの下の空きが19pxで、上が大きく見えていた → 上の padding を4px減らす */
@media (min-width: 641px) {
    body .hv2-regions .hv2-pref { min-height: 0; padding: 13px 2px; line-height: 1.3; }
    body .hv2-regions .hv2-region { padding-top: 14px; }
}

/* COND_COL6_2026_10_16 条件から探す（PC 1025px〜）は6列×2行＝12枚すべて表示（5列だと最後の行が2枚だけ余るため）。
   カードが細くなるので、右の矢印は出さず（スマホと同じ）見出しは13px・1行 */
@media (min-width: 1025px) {
    body .hv2-conds { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 12px; }
    body .hv2-cond-label { font-size: 13px; }
    body .hv2-cond-go { display: none; }
    body .hv2-cond-row { padding-left: 12px; padding-right: 8px; }
}

/* ===== ARTICLE_JOBS_2026_10_17 地域系の記事の中の求人カード＋まとめて比べる（includes/article-jobs.php） ===== */
.art-jobs { margin: 32px 0 40px; padding: 24px; background: var(--bg-secondary); border: 1px solid var(--border); border-radius: var(--radius-md); }
.art-jobs-head { margin-bottom: 16px; }
.article-body .art-jobs-title { display: flex; align-items: center; gap: 8px; margin: 0 0 6px; font-size: 19px; font-weight: 800; line-height: 1.5; color: var(--text-primary); }
.art-jobs-title .lucide-icon { width: 22px; height: 22px; color: var(--accent); flex: 0 0 auto; }
.article-body .art-jobs-lead { margin: 0; font-size: 14px; line-height: 1.7; color: var(--text-secondary); }
.article-body .art-jobs-grid { margin: 0 0 16px; padding: 0; }
/* 記事本文の見出し・箇条書き・リンクの飾りをカードの中では消す（カードはトップと同じ見た目に） */
.article-body .art-jobs .hv2-job-title { margin: 0; padding: 0; border: 0; font-size: 17px; }
.article-body .art-jobs .hv2-job ul { margin: 0; padding: 0; }
.article-body .art-jobs .hv2-job li { margin: 0; }
.article-body .art-jobs .hv2-job p { margin: 0; }
.article-body .art-jobs .hv2-job a { color: inherit; text-decoration: none; }
.article-body .art-jobs .hv2-job a:hover { color: var(--accent); }
.art-jobs-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 12px 24px; }
.article-body .art-jobs-cmp { display: inline-flex; align-items: center; gap: 8px; color: #fff; text-decoration: none; }
.article-body .art-jobs-cmp:hover { color: #fff; }
.art-jobs-cmp .lucide-icon { width: 18px; height: 18px; }
.article-body .art-jobs-more { display: inline-flex; align-items: center; gap: 4px; font-size: 15px; font-weight: 700; color: var(--accent); text-decoration: none; }
.article-body .art-jobs-more:hover { text-decoration: underline; }
.art-jobs-more .lucide-icon { width: 16px; height: 16px; }
.article-body .art-jobs-note { margin: 12px 0 0; font-size: 13px; line-height: 1.7; color: var(--text-secondary); text-align: center; }
@media (max-width: 600px) {
    .art-jobs { margin: 24px -4px 32px; padding: 18px 14px; }
    .article-body .art-jobs-title { font-size: 17px; }
    .art-jobs-actions { flex-direction: column; align-items: stretch; }
    .article-body .art-jobs-cmp { justify-content: center; }
    .article-body .art-jobs-more { justify-content: center; }
}
@media (max-width: 600px) { .article-body .art-jobs-note { text-align: left; } }

/* ================================================================
   JIDOU_JOBS_2026_10_18 自動運転の仕事の求人で足したもの（複製元 taxi-jobs には無い）
   ================================================================ */
/* ロゴの文字（旧: SVG の text に style 属性で書いていた） */
.logo-svg-text { font-family: 'Murecho', sans-serif; font-size: 168px; font-weight: 800; letter-spacing: -4px; }

/* 画像がまだ無いときの無地の箱（common/init.php の siteImg()）。画像を置けば自動で <img> に替わる */
.img-ph { display: block; width: 100%; background: #E8EEF5; border-radius: 12px; }
.img-ph--21x10 { aspect-ratio: 21 / 10; }
.img-ph--16x9  { aspect-ratio: 16 / 9; }
.img-ph--3x2   { aspect-ratio: 3 / 2; }
.img-ph--4x3   { aspect-ratio: 4 / 3; }
.img-ph--1x1   { aspect-ratio: 1 / 1; }
.img-ph--2x3   { aspect-ratio: 2 / 3; }
.hv2-hero-photo .img-ph { max-width: 560px; margin: 0 auto; border-radius: 20px; background: #EEF4FB; }
.hv2-cta-photo--illust .img-ph { max-height: 280px; }
.article-jobs-nav-photo .img-ph { max-width: 360px; margin-left: auto; }
.hv2-flow-illust.img-ph { border-radius: 50%; }
[data-theme="dark"] .img-ph { background: #22324A; }

/* 手元の確認用の見本の求人（本番には出ない） */
.sample-badge { display: inline-block; margin-bottom: 8px; padding: 2px 10px; border-radius: 999px; background: #FFF4CC; color: #7A5A00; font-size: 12px; font-weight: 700; }
.sample-notice { margin: 0 0 16px; padding: 10px 14px; border: 1px solid #F1D98A; border-radius: 10px; background: #FFF9E6; color: #7A5A00; font-size: 14px; }

/* 求人がまだ無い欄の一言 */
.hv2-empty-note { margin: 0; padding: 18px 20px; border: 1px solid #E0E5EB; border-radius: 12px; background: #fff; color: #4A5B70; font-size: 15px; }

/* ログインのモーダルの「戻る」と見出しの並び（旧: style 属性） */
.auth-modal-headrow { display: flex; align-items: center; }

/* 確認つきの送信（confirm() を使わない・assets/js/app.js）。トーストが無いときだけ出す */
.confirm-note { margin: 8px 0 0; font-size: 13px; color: #B42318; }

/* コラム一覧のカテゴリーの絞り込み（旧: articles/index.php の <style>） */
.article-filter { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 28px; }
.filter-chip { display: inline-flex; align-items: center; gap: 5px; padding: 6px 14px; border-radius: 20px; font-size: 13px; font-weight: 500; color: var(--text-secondary); background: var(--bg-secondary); text-decoration: none; transition: all var(--transition); }
.filter-chip:hover { color: var(--accent); background: var(--accent-light); }
.filter-chip.active { color: var(--text-white); background: var(--accent); }
.filter-chip .lucide-icon { width: 14px; height: 14px; }
.filter-count { font-size: 11px; background: rgba(0,0,0,0.08); padding: 1px 6px; border-radius: 10px; }
.filter-chip.active .filter-count { background: rgba(255,255,255,0.2); }
.article-card-date { font-size: 12px; color: var(--text-muted); display: flex; align-items: center; gap: 4px; margin-top: 2px; }
.article-card-date .lucide-icon { width: 12px; height: 12px; }
.empty-state { text-align: center; padding: 60px 0; color: var(--text-muted); }
.empty-icon { width: 48px; height: 48px; margin-bottom: 12px; }

/* アンケート3問目（運転歴と二種免許）: 2つの問いの間をあける */
.quiz-step[data-step="3"] .quiz-fieldset + .quiz-fieldset { margin-top: 12px; }

/* JIDOU_COND_WRAP_2026_10_19 条件の名前がタクシーより長い（「一種免許でOK（二種免許不要）」など）ため、
   スマホの「折り返さない」（sp-b.css）だとカードが画面からはみ出す → このサイトでは文節で折り返す */
@media (max-width: 768px) {
    body .hv2-conds > li { min-width: 0; }
    body .hv2-cond-label { white-space: normal; word-break: auto-phrase; line-height: 1.35; }
}

/* JIDOU_HDR_2026_10_19 スマホ: サイト名（SVG）がタクシーより短い比率で縦に伸び、ロゴの箱が広がってヘッダーが画面からはみ出していた
   → ロゴの箱を「右のボタン群（約170px）を除いた幅」までに抑える */
@media (max-width: 768px) {
    .site-header .header-logo { flex: 1 1 auto; min-width: 0; max-width: calc(100% - 172px); }
    .site-header .header-logo-svg { max-height: 20px; }
}

/* JIDOU_QUIZ_WRAP_2026_10_19 アンケートの選択肢「テストドライバー・開発ドライバー」などが1行（nowrap）のままボタンからはみ出し、
   スマホでページ全体が横に広がっていた（幅464px）→ 選択肢の文字を折り返す */
.quiz-opts--chips .quiz-chip { min-width: 0; }
.quiz-opts--chips .quiz-chip-box { white-space: normal; min-width: 0; line-height: 1.35; word-break: auto-phrase; }

/* JIDOU_GRID4_2026_10_19 職種4・地域4・条件8 と、タクシー（職種6・地域6・条件12）より数が少ない。
   3列・6列のままだと1枚だけ次の段に残り、条件の名前も途中で切れていた → PC（1025px〜）は4列にそろえる */
@media (min-width: 1025px) {
    body .hv2-cats { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    body .hv2-regions { grid-template-columns: repeat(2, minmax(0, 1fr)); } /* 4列だと県のボタンが重なる（関東は3県）→ 2×2 */
    body .hv2-conds { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
    body .hv2-conds .hv2-cond-label { white-space: normal; font-size: 15px; }
}

/* JIDOU_CATS_SP_2026_10_19 スマホ: 職種の挿絵は全体を見せる作りでカードが縦に長い（1列で4枚＝画面4つ分）→ 2列にする */
@media (max-width: 600px) {
    body .hv2-cats { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
    body .hv2-cats .hv2-cat-icon { display: none; } /* 名前に幅を回す（言葉の途中で折れないように） */
    body .hv2-cats .hv2-cat-name { font-size: 13px; line-height: 1.35; white-space: normal; word-break: auto-phrase; }
}

/* ICON3D_2026_10_19 トップの見出しのアイコンを立体（つやのある粘土風）に（齊木さんの手本3枚の質感・色は今の青）。
   画像は assets/images/icon3d/<名前>.webp（原本 ai-images/icons3d-20261019/）。角丸の地は付けない */
.hv2-h2 .hv2-h2-3d { width: 52px; height: 52px; flex-shrink: 0; margin: -6px 2px -6px -4px; object-fit: contain; }
@media (max-width: 768px) {
    .hv2-h2 .hv2-h2-3d { width: 44px; height: 44px; margin: -5px 0 -5px -4px; }
}

/* ===== FIX_2026_10_19（齊木さんの指摘・タクシーと自動運転で共通）===== */
/* 求人カードの左右の余白を少しだけ弱く（18px → 15px） */
body .hv2-job { padding-left: 15px; padding-right: 15px; }
body .hv2-job-photo { width: calc(100% + 30px); margin: 0 -15px 2px; } /* 余白を15pxにしたので、写真は左右いっぱいのまま */

/* 「口コミに頼らず、確かな資料で比べられます」の節: 上の余白が8pxしかなく、下は64px＋次の節の64pxで上下がちがった → 上下とも64pxに */
body .hv2-trust { padding: 64px 0 0; }

/* フッターの下の空き: スマホの下に貼りつくバーの分の余白（body の下の余白）が、フッターと違う色（白）で見えていた
   → 画面全体の地（html）をフッターと同じ色にする。body の中身は今までどおり body の背景色が塗る */
html { background-color: #F3F6FA; }
/* body の下の余白（バーの分）は body の背景が塗るので、body の下320px（フッターの高さより小さい）もフッターと同じ色で塗る */
body { background-image: linear-gradient(#F3F6FA, #F3F6FA); background-repeat: no-repeat; background-position: left bottom; background-size: 100% 320px; }

/* 求人の更新日: 「26年10月18日」・数字は大きく漢字は小さく（ほかの「件」「都道府県」「社」と同じ） */
body .hv2-stat-num--date { font-size: 40px; white-space: nowrap; letter-spacing: 0; }
body .hv2-stat-num--date .hv2-stat-unit { margin: 0 1px 0 2px; }
@media (max-width: 1100px) { body .hv2-stat-num--date { font-size: 34px; } }
@media (max-width: 768px) { body .hv2-stat .hv2-stat-num--date { font-size: 28px; } body .hv2-stat .hv2-stat-num--date .hv2-stat-unit { font-size: 13px; } }

/* 「別の軸から探す」「他の職種から探す」のカードの画像（includes/cat-related-img.php）: 3:2・写真は cover・挿絵は contain */
.cat-related-card--illust > .cat-related-illust--photo, .cat-related-card--illust > .cat-related-illust--illust { margin: 0 0 6px; width: 100%; aspect-ratio: 3 / 2; display: block; }
.cat-related-illust--photo { object-fit: cover; background: none; }
.cat-related-illust--illust { object-fit: contain; background: #fff; }

/* SRC_WRAP_2026_10_19 会社ページの「出典」の長いURLがスマホで横にはみ出していた→どこでも折り返す */
.cat-guide-skills li, .cat-guide-skills li a { overflow-wrap: anywhere; word-break: break-word; min-width: 0; }

/* NOAV_2026_10_19 自動運転の記載がない走行試験の求人に出す注記 */
body .hv2-job-meta li.hv2-job-meta-note { font-size: 13px; color: var(--text-secondary); }
body .hv2-job-meta li.hv2-job-meta-note .lucide-icon { color: var(--text-secondary); }

/* LONGNAME_2026_10_19 社名が長い会社（カードの社名・会社ページの見出し）がスマホで横にはみ出していた。
   カードの社名は inline-flex だと省略（…）が効かないので block にして、見出しはどこでも折り返す */
body .hv2-job-company { display: block; line-height: 28px; min-height: 0; max-width: 100%; }
body .cat-guide-title { overflow-wrap: anywhere; min-width: 0; }