/* SP_B_2026_10_19 スマホ修正（トップ・アンケート・連絡先フォーム・アンケートモーダル・地域カード）
   スマホ判定は site-custom.css に合わせて 768px 以下（細かいものは 520px 以下）。
   site-custom.css は読み取りのみ。既存規則に勝つため body を頭に付けて詳細度を上げている。 */

/* 改行・出し分けの小道具（PC では何も変わらない） */
.sp-br { display: none; }
.sp-i { display: none; }
.qz-sp { display: none; }
.hv2-cond-li--pc { display: list-item; }
.hv2-h2-text { min-width: 0; }

@media (max-width: 768px) {
    .sp-br { display: inline; }
    .pc-i, .qz-pc, .hv2-maru { display: none; }
    .sp-i { display: inline; }
    .qz-sp { display: inline; }
    body .hv2-cond-li--pc { display: none; }

    /* ── 説明文の行間を狭く・読みやすく折る（トップ全体） ── */
    body .hv2-lead { font-size: 14px; line-height: 1.65; text-wrap: balance; }
    body .hv2-head { margin-bottom: 18px; }
    body .hv2-h2-text { text-wrap: balance; }

    /* ── ヒーロー ── */
    body .hv2-hero--bg .hv2-title { font-size: clamp(22px, 7.1vw, 30px); line-height: 1.35; }
    body .hv2-hero--bg .hv2-title-line { white-space: nowrap; }
    body .hv2-hero--bg .hv2-sub { font-size: 15px; line-height: 1.65; margin-bottom: 0; }
    body .hv2-hero--bg { padding-bottom: 44px; }
    body .hv2-quiz-wrap { margin-top: -40px; }

    /* ── アンケート共通（青枠のカード） ── */
    body .quiz-hero { padding: 14px 12px 12px; }
    body .quiz-hero-title { text-wrap: balance; font-size: 17px; line-height: 1.45; margin-bottom: 6px; }
    body .quiz-hero-sub { text-wrap: balance; font-size: 13px; line-height: 1.55; margin: 0 0 8px; }
    body .quiz-hero-badge { margin-bottom: 8px; }
    /* 進み具合の棒: 「戻る」が隠れている間は場所を取らない＝右まで全幅 */
    body .quiz .quiz-head .quiz-back[hidden] { display: none !important; }
    body .quiz .quiz-head { margin-bottom: 8px; gap: 10px; }
    body .quiz .quiz-bar { min-width: 0; }
    /* 質問の見出しに青い枠（フォーカス枠）を付けない */
    body .quiz .quiz-q:focus, body .quiz .quiz-q:focus-visible { outline: none; }
    body .quiz .quiz-q { font-size: 17.5px; line-height: 1.4; margin-bottom: 4px; }
    body .quiz .quiz-hint { font-size: 13px; line-height: 1.5; margin: 0 0 8px; }
    body .quiz .quiz-error { font-size: 13px; margin: 4px 0 0; }
    body .quiz .quiz-tap-lead { margin-bottom: 4px; }

    /* 選ばない画面は場所を取らない＝縦に余白が残らない（高さ揃えの重ね置きはスマホでは解除） */
    body .quiz .quiz-steps > .quiz-step[hidden],
    body .quiz .quiz-sub-stack > .quiz-sub[hidden] { display: none !important; }
    body .quiz .quiz-opts { margin-bottom: 8px; gap: 8px; }
    body .quiz .quiz-opts--cards { margin-bottom: 0; }

    /* 複数選択のチップ（左右の余白を詰めて1行に収める） */
    body .quiz .quiz-opts--chips { gap: 8px; }
    body .quiz .quiz-opts--chips .quiz-chip-box {
        min-width: 0; min-height: 48px; padding: 6px 8px; gap: 6px;
        font-size: 15px; letter-spacing: -0.01em; white-space: nowrap; justify-content: flex-start;
    }
    body .quiz .quiz-chip-check { width: 16px; height: 16px; }
    body .quiz .quiz-unkou { margin: 4px 0 8px; padding: 10px; }
    body .quiz .quiz-unkou .quiz-label { margin-bottom: 6px; font-size: 14px; }
    body .quiz .quiz-unkou .quiz-chip-box { min-height: 44px; padding: 0 6px; justify-content: center; font-size: 14px; letter-spacing: -0.02em; }
    body .quiz .quiz-actions { margin-top: 2px; }
    body .quiz .quiz-next { min-height: 50px; }

    /* カード型の選択肢（免許・時期）: 矢印との間を詰める・説明を折り返さない */
    body .quiz .quiz-opt.quiz-card { min-height: 56px; padding: 8px 10px; gap: 8px; }
    body .quiz .quiz-card-icon { width: 36px; height: 36px; border-radius: 10px; }
    body .quiz .quiz-card-icon .lucide-icon { width: 20px; height: 20px; }
    body .quiz .quiz-card-label { font-size: 15px; white-space: nowrap; }
    body .quiz .quiz-card-sub { font-size: 11.5px; line-height: 1.35; white-space: nowrap; letter-spacing: -0.02em; }
    body .quiz .quiz-card-go { width: 18px; height: 18px; margin-left: -2px; }

    /* 地方・都道府県の画面 */
    body .quiz .quiz-sub .quiz-opts--grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; margin-bottom: 4px; }
    body .quiz .quiz-sub .quiz-opts--grid .quiz-opt { min-height: 42px; padding: 4px 4px; font-size: 14px; white-space: nowrap; }
    body .quiz .quiz-sub > .quiz-hint { margin-bottom: 6px; }

    /* 5問目 連絡先: お名前・年代・電話・メールをすべて1カラム・縦を詰める */
    body .quiz .quiz-name-age-row,
    body .quiz .quiz-contact-row { grid-template-columns: minmax(0, 1fr); gap: 0; margin-bottom: 0; }
    body .quiz .quiz-field { margin-bottom: 8px; }
    body .quiz .quiz-label { margin-bottom: 3px; font-size: 14px; }
    body .quiz .quiz-input { min-height: 44px; padding: 8px 12px; }
    body .quiz .quiz-name-age-row .quiz-age-chips { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 4px; }
    body .quiz .quiz-name-age-row .quiz-age-chips .quiz-chip-box { height: 42px; min-height: 42px; padding: 0 2px; font-size: 12.5px; letter-spacing: -0.04em; }
    body .quiz .quiz-name-age-row .quiz-fieldset { margin-bottom: 8px; }
    body .quiz .quiz-consent { margin: 8px 0 8px; padding: 10px 12px; }
    body .quiz .quiz-consent-title { font-size: 14px; }
    body .quiz .quiz-consent-summary { font-size: 12.5px; line-height: 1.5; }
    body .quiz .quiz-consent-check { font-size: 14px; min-height: 0; padding-top: 6px; gap: 8px; align-items: center; }

    /* ── 求人を探す（検索カード）と数字の帯 ── */
    body .hv2-stats { padding-top: 20px; }
    body .hv2-stat { padding: 12px 12px; }
    body .hv2-stat-label { font-size: 13px; white-space: nowrap; gap: 4px; letter-spacing: -0.02em; }
    body .hv2-stat-label .lucide-icon { width: 16px; height: 16px; }
    body .hv2-stat-num { font-size: 32px; }
    body .hv2-stat-num--date { font-size: 19px; white-space: nowrap; letter-spacing: -0.03em; }
    body .hv2-stat-unit { font-size: 13px; }

    /* ── 職種から探す ── */
    body .hv2-cat--photo .hv2-cat-photo { aspect-ratio: 16 / 5.4; }
    body .hv2-cat--photo .hv2-cat-icon { margin-top: 10px; margin-bottom: 10px; width: 36px; height: 36px; }
    body .hv2-cat--photo .hv2-cat-name { margin-top: 10px; }
    body .hv2-cat--photo .hv2-cat-count { margin-bottom: 10px; font-size: 13px; }
    body .hv2-cat--photo .hv2-cat-num { font-size: 20px; }

    /* ── 地域から探す: 県チップは4列で幅をそろえる ── */
    body .hv2-regions .hv2-pref-chips { width: 100%; align-self: stretch; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
    body .hv2-regions .hv2-pref-chips li { min-width: 0; }
    body .hv2-regions .hv2-pref { display: flex; justify-content: center; gap: 4px; padding: 7px 2px; font-size: 13px; letter-spacing: -0.02em; white-space: nowrap; }
    body .hv2-regions .hv2-region { padding: 14px 14px; }

    /* ── 注目の求人: カードの縦を少し詰める ── */
    body .hv2-job-photo { aspect-ratio: 16 / 6.2; }
    body .hv2-job { gap: 10px; }
    body .hv2-job-meta { gap: 4px; }

    /* ── ご利用の流れ ── */
    body .hv2-flow { padding-top: 40px; padding-bottom: 40px; }
    body .hv2-flow-steps { gap: 28px; margin-bottom: 0; }
    body .hv2-flow-step:not(:last-child)::after { border-top-right-radius: 5px; width: 16px; height: 16px; bottom: -21px; }
    body .hv2-flow .hv2-center { margin-top: 28px; }

    /* ── 年収の帯 ── */
    body .hv2-wage .hv2-head { margin-bottom: 14px; }
    body .hv2-wage-cols { gap: 12px; }
    body .hv2-wage-col { padding-bottom: 6px; }

    /* ── 条件から探す ── */
    body .hv2-conds { gap: 10px; align-items: stretch; }
    body .hv2-conds > li { display: flex; }
    body .hv2-conds .hv2-cond { flex: 1; }
    body .hv2-cond-row { padding: 9px 8px 9px 10px; gap: 5px; }
    body .hv2-cond-label { font-size: 14px; letter-spacing: -0.03em; }
    body .hv2-cond-go { width: 16px; height: 16px; }

    /* ── お役立ちコラム: 横にスライド（scroll-snap・JS なし） ── */
    body .hv2-articles { padding-top: 28px; padding-bottom: 28px; }
    body .hv2-articles .hv2-head { margin-bottom: 12px; }
    body .hv2-articles .hv2-art-cats { margin-bottom: 14px; }
    body .hv2-articles .hv2-art-grid {
        display: flex; gap: 12px; overflow-x: auto; overscroll-behavior-x: contain;
        scroll-snap-type: x mandatory; scroll-padding-left: 14px;
        margin: 0 -14px; padding: 2px 14px 10px;
        -webkit-overflow-scrolling: touch; scrollbar-width: none;
    }
    body .hv2-articles .hv2-art-grid::-webkit-scrollbar { display: none; }
    body .hv2-articles .hv2-art { flex: 0 0 74%; max-width: 300px; scroll-snap-align: start; }
    body .hv2-articles .hv2-art-body { padding: 10px 12px 12px; gap: 6px; }
    body .hv2-articles .hv2-center { margin-top: 6px; }
}

/* 地域カードの背景写真（スマホ・PC 共通）。写真が無い地方は白のまま（白の薄い覆いで文字を読めるように） */
body .hv2-regions .hv2-region { background-position: center; background-size: cover; background-repeat: no-repeat; }
/* 白の覆い(上から濃→下へ少し薄く)の下に、その地方の都心部の写真。文字は覆いの上なので読める。写真が無ければ白のまま */
body .hv2-regions .hv2-region.hv2-region--hokkaido_tohoku { background-image: linear-gradient(180deg, rgba(255,255,255,0.86) 0%, rgba(255,255,255,0.74) 100%), url('../images/area/hokkaido_tohoku.webp'); }
body .hv2-regions .hv2-region.hv2-region--kanto { background-image: linear-gradient(180deg, rgba(255,255,255,0.86) 0%, rgba(255,255,255,0.74) 100%), url('../images/area/kanto.webp'); }
body .hv2-regions .hv2-region.hv2-region--chubu { background-image: linear-gradient(180deg, rgba(255,255,255,0.86) 0%, rgba(255,255,255,0.74) 100%), url('../images/area/chubu.webp'); }
body .hv2-regions .hv2-region.hv2-region--kinki { background-image: linear-gradient(180deg, rgba(255,255,255,0.86) 0%, rgba(255,255,255,0.74) 100%), url('../images/area/kinki.webp'); }
body .hv2-regions .hv2-region.hv2-region--chugoku_shikoku { background-image: linear-gradient(180deg, rgba(255,255,255,0.86) 0%, rgba(255,255,255,0.74) 100%), url('../images/area/chugoku_shikoku.webp'); }
body .hv2-regions .hv2-region.hv2-region--kyushu_okinawa { background-image: linear-gradient(180deg, rgba(255,255,255,0.86) 0%, rgba(255,255,255,0.74) 100%), url('../images/area/kyushu_okinawa.webp'); }

@media (max-width: 768px) {
    /* ── 固定フッターから開くアンケートモーダル: 1カラム・全画面・詰める ── */
    body .quiz-modal-panel { max-width: none; padding: 10px 14px calc(14px + env(safe-area-inset-bottom)); border-width: 0; }
    body .quiz-modal-body { grid-template-columns: minmax(0, 1fr); gap: 0; align-items: start; }
    body .quiz-modal-illust { display: none; }
    body .quiz-modal-main { min-width: 0; }
    body .quiz-modal-head { margin-bottom: 4px; gap: 4px; align-items: flex-start; }
    body .quiz-modal-title { font-size: 17px; line-height: 1.4; text-wrap: balance; margin: 6px 0 4px; }
    body .quiz-modal-headtext .quiz-hero-sub { font-size: 13px; line-height: 1.5; margin: 0 0 6px; text-wrap: balance; }
    body .quiz-modal-close { width: 44px; height: 44px; margin: -4px -8px 0 0; }
    body .quiz-modal .quiz-tap-lead { white-space: nowrap; flex-wrap: nowrap; }
    body .quiz .quiz-q { text-wrap: balance; }

    /* 求人カードの写真を低くした分、左下のタグ位置も合わせる（写真の高さ − 37px） */
    body .hv2-job--photo .hv2-job-cat { top: calc(38.75cqw - 23px); }
}

/* 文節で折る（対応ブラウザのみ。未対応は従来どおり） */
@media (max-width: 768px) {
    body .quiz-hero-title, body .quiz-hero-sub, body .quiz-modal-title, body .quiz .quiz-q,
    body .hv2-lead, body .hv2-sub, body .quiz .quiz-hint { word-break: auto-phrase; }
}

@media (max-width: 768px) {
    /* 条件から探す: 右の矢印を外して文字を折り返さない */
    body .hv2-cond-go { display: none; }
    body .hv2-cond-label { font-size: 13.5px; white-space: nowrap; }
}

@media (max-width: 768px) {
    /* トップ下のCTA: 画面を押す（縮める）。トップページだけ（他ページの CTA は担当Aの領域） */
    body:has(.hv2-articles) .hv2-cta2 { padding-top: 20px; padding-bottom: 28px; }
    body:has(.hv2-articles) .hv2-cta-photo.hv2-cta-photo--illust { min-height: 0; }
    body:has(.hv2-articles) .hv2-cta-photo--illust img { max-height: 130px; }
}

/* FIX_2026_10_16 スマホの共通CTAの挿絵: 全ページで小さく・上下の余白をそろえる */
@media (max-width: 768px) {
  body .hv2-cta-photo.hv2-cta-photo--illust { min-height: 0; padding: 12px 0; align-items: center; }
  body .hv2-cta-photo--illust img { max-height: 130px; }
}