/* =========================================================
   推しONE+ 側の追加・手直し（v3 デザイン）
   納品の CSS（site.css・home.css・partner.css・contact.css）は直接直さず、ここに足します。
   デザイナーから差し替えが届いても、ここはそのまま使えます。
   ========================================================= */

/* 練習用サーバーの帯（本番では出ません） */
.envbar { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; padding: 8px 20px; background: #7a4d10; color: #fff; font-size: 13px; line-height: 1.6; }
.envbar .ico { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; }

/* お知らせ・コラム：記事がまだないとき／ページ送り／下書きの帯／ほかの記事 */
.post-empty-v3 { border: 1px dashed var(--border); border-radius: 15px; padding: 40px 24px; text-align: center; }
.post-empty-v3 h2 { font-size: 18px; margin-bottom: 8px; }
.post-empty-v3 p { font-size: 13px; color: var(--muted); }
.post-pager-v3 { display: flex; align-items: center; justify-content: center; gap: 16px; margin-top: 28px; font-size: 13px; color: var(--muted); }
.draft-banner-v3 { background: #fff4d6; color: #5a3d00; font-size: 13px; padding: 10px 0; }
.article-updated { background: none !important; padding: 0 !important; }
.article-others { margin-top: 40px; }
.article-others h2 { font-size: 17px; margin-bottom: 14px; }
.article-others .post-link { padding: 18px 22px; }
.article-others .post-link h3 { font-size: 15px; line-height: 1.7; }
.article-others .post-link .meta { margin-bottom: 6px; }

/* 候補者：絞り込み（作業・エリア・日数・働き方・キーワード・並び順） */
.filter-bar--v3 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.filter-bar--v3 .filter-bar__wide { grid-column: span 2; }
.filter-bar--v3 .btn { height: 47px; }
@media (max-width: 1000px) { .filter-bar--v3 { grid-template-columns: 1fr 1fr; } }
@media (max-width: 760px) { .filter-bar--v3 { grid-template-columns: 1fr 1fr; gap: 12px; } .filter-bar--v3 .filter-bar__wide, .filter-bar--v3 .btn { grid-column: 1 / -1; } }
@media (max-width: 360px) { .filter-bar--v3 { grid-template-columns: 1fr; } }
.cand-v3-name { font-size: 19px; line-height: 1.6; }
.cand-v3-locked { margin: 16px 0 20px; padding: 12px 14px; border-radius: 8px; background: #f5f9f3; font-size: 12px; line-height: 1.8; color: #3e5a47; }
.cand-v3-reset { color: var(--blue); text-decoration: underline; text-underline-offset: 3px; }
.cand-v3-empty { text-align: center; padding: 40px 24px; }
.cand-v3-empty h2 { font-size: 19px; margin-bottom: 12px; }
.cand-v3-empty p { font-size: 14px; line-height: 1.9; color: var(--muted); margin-bottom: 20px; }
.cand-v3-empty p a { color: var(--blue); text-decoration: underline; }
.cand-v3-empty__btns { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; }
.cand-v3-list { margin: 12px 0 0; padding-left: 1.3em; list-style: disc; font-size: 14px; line-height: 2; }
.detail-aside .btn + .btn { margin-top: 10px; }

/* お仕事カード：見出しの段を変えても、納品の h3 と同じ見た目に */
.job-v3-title { font-size: 17px; line-height: 1.75; min-height: 90px; padding-bottom: 16px; border-bottom: 1px dashed #cbddeb; }
@media (max-width: 1100px) { .job-v3-title { font-size: 15px; } }
@media (max-width: 760px) { .job-v3-title { font-size: 14px; min-height: 0; } }
@media (max-width: 480px) { .job-v3-title { font-size: 17px; } }

/* お問い合わせ：contact.css は単独で読むので、共通の部品をここで補います */
.skip-link { position: absolute; left: 10px; top: -100px; background: #fff; padding: 10px; z-index: 100; }
.skip-link:focus { top: 10px; }
.v3-hp { position: absolute !important; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.v3-alert { border: 1px solid #e3a5a5; background: #fff5f5; color: #8a1f1f; border-radius: 10px; padding: 16px 18px; margin-bottom: 24px; font-size: 13px; line-height: 1.8; }
.v3-alert ul { margin: 6px 0 0; padding-left: 1.2em; list-style: disc; }
.v3-alert a { color: inherit; text-decoration: underline; }
.v3-field-error { color: #a61b1b; font-size: 12px; font-weight: 700; margin-top: 6px; }
.contact-field [aria-invalid="true"], .consent [aria-invalid="true"] { border-color: #c43b3b; }
.candidate-context span { display: block; margin-top: 4px; color: var(--muted); }
.v3-done-note { margin: 18px 0; padding: 14px 16px; border-radius: 10px; background: #fff; font-size: 13px; line-height: 1.9; }
.v3-done-tel { margin: 0 0 20px; font-size: 13px; }
.v3-done-tel a { color: var(--blue); text-decoration: underline; font-weight: 700; }

/* トップページ：候補者がまだいないときの案内・候補者一覧へのボタン */
.v3-nowrap { white-space: nowrap; }
.candidates-section .listing-card.empty .btn { margin-top: 4px; }
.candidates-section .section-action { margin-top: 28px; text-align: center; }
/* お知らせ・コラムを複数本並べる（納品は1本の想定） */
.v3-news-list { display: grid; gap: 12px; min-width: 0; }

/* =========================================================
   読みやすさの手直し（tests/a11y で測って、4.5:1・大きい文字は3:1・入力欄の枠は3:1 に届かなかったもの）
   色味はそのままに、少しだけ濃くしています。文字サイズは納品 CSS 側で 12px 未満をなくしました。
   ========================================================= */
.candidate-contact-note { color: #5a7465 !important; }
.eyebrow { color: #347498; }
.role-heading .role-caption { color: #55737f; }
.footer-bottom { color: #61778f; }
.partner-photo-message > span { color: #607b6b; }
.post-link .meta, .article-meta { color: #506e88; }
#merits .benefit-label { color: #5a788a; }
.check-badge { background: #3f7a95; }
.concern-index { color: #4f6d7d; }
.contact-current { color: #527893; }
#merits .feature-number { color: #28729f; }
#merits .feature-tile:nth-child(even) .feature-number { color: #4f744f; }
.listing-tag { color: #367298; }
.concern .num { color: #3975a0; }
.optional-label { color: #596e81; }
.sample-badge { color: #4e6f56; }
.form-progress { color: #56697a; }
.story-circle { background: #487999; }
.story-circle.green { background: #5c7c5a; }
.field input::placeholder { color: #697482; }
.contact-field input::placeholder, .contact-field textarea::placeholder { color: #667483; }
.filter-bar input::placeholder { color: #667483; }
/* 入力欄の枠（WCAG 1.4.11：まわりとの差 3:1） */
.field input, .field select, .input-unit input { border-color: #7890a6; }
.filter-bar input, .filter-bar select { border-color: #7890a6; }
.contact-field input, .contact-field select, .contact-field textarea { border-color: #7890a6; }

/* トップページの「企業の登録はこちら」：スマホで2つのボタンと横に並ぶときは、次の行に全幅で出す */
@media (max-width: 760px) and (min-width: 361px) {
  .hero-buttons { flex-wrap: wrap; }
  .hero-buttons .hero-signup { flex: 1 1 100%; }
}

/* =========================================================
   スマホで読みやすく（幅 760px 以下）
   納品のデザインは、スマホで本文を 9〜11px に縮める作りでした（12px までは上げ済み）。
   それでも本文の 9 割近くが 12〜13px で、スマホでは読みにくいため、役割ごとに大きさをそろえます。
     本文 15px ／ 補足・注記 13〜14px ／ カードの見出し 17px ／ ボタン 15px ／ 入力欄 16px（iPhone で拡大されない）
   納品 CSS は場所ごとに細かく大きさを指定しているので、ここでは !important で上書きします（大きさと行間だけ）。
   ========================================================= */
@media (max-width: 760px) {
  /* --- 本文 15px --- */
  .hero-description, .section-lead, .sub-hero .lead, .partner-hero-copy .lead,
  .feature-tile p, .flow-tile .step-description, .concern p, .partner-concern-grid article p,
  .reassure p:not(.small-lead), .story-half p, .cta-copy p, .partner-entry-copy p, .search-heading p,
  .price-tile p:not(.price-value):not(.price-label):not(.price-unit), .price-details p:not(.small),
  .calc-heading p, .partner-intro p, .partner-contact-copy p:not(.partner-contact-kicker),
  .faq-list details p, .partner-faq details p, .role-card li, .prep-list p,
  .contact-heading > p:last-child, .contact-support li, .contact-support p,
  .surface p, .surface li, .post-link p, .article-body, .article-body p, .article-body li,
  .detail-facts dd, .cand-v3-empty p, .post-empty-v3 p, .v3-done-note {
    font-size: 15px !important; line-height: 1.85 !important;
  }
  /* --- 候補者・お仕事のカード（14px） --- */
  .facts p, .cand-v3-locked, .candidate-software, .candidate-privacy p, .benefit p,
  .trial-note, .job-tile-head > p, .detail-facts dt {
    font-size: 14px !important; line-height: 1.75 !important;
  }
  /* --- 補足・注記・ラベル（13px） --- */
  .sub-note, .section-note, .calc-note, .legal__note, .price-details .small, .price-unit,
  .tags span, .skill-label, .candidate-contact-note, .sample-badge, .listing-tag, .cost-badge,
  .eyebrow, .small-lead, .partner-kicker, .partner-contact-kicker, .benefit-label, .role-caption,
  .breadcrumbs, .breadcrumbs a, .breadcrumbs span, .post-link .meta, .article-meta, .news-item time, .news-tag,
  .search-caption, .filter-status, .field-help, .contact-note, .auth-hint, .article-by,
  .partner-photo figcaption, .partner-photo-message > span, .jobs-controls p, .step-number,
  .footer-company, .footer-brand p, .footer-bottom, .hours, .phone-panel > p:first-child,
  .required-label, .optional-label, .current-fee-badge, .check-badge, .form-progress {
    font-size: 13px !important; line-height: 1.75 !important;
  }
  .footer-links a, .contact-footer-links a { font-size: 14px !important; }
  /* --- カードの見出し --- */
  .concern h3, .partner-concern-grid h3, .feature-tile h3, .flow-tile h3, .role-card h3, .prep-list h3 {
    font-size: 17px !important; line-height: 1.6 !important;
  }
  .news-item h3, .faq-list summary, .partner-faq summary, .partner-promise h2 { font-size: 15px !important; line-height: 1.7 !important; }
  /* --- 表（法定公開・プライバシーポリシー） --- */
  .legal td, .legal th, .legal__table td, .legal__table th { font-size: 14px !important; line-height: 1.75 !important; }
  /* --- 入力欄の見出しと入力欄 --- */
  .field label, .calc-field label, .contact-field label, .filter-bar label { font-size: 14px !important; }
  .contact-field input::placeholder, .contact-field textarea::placeholder, .field input::placeholder { font-size: 14px !important; }
  .field input, .field select, .contact-field input, .contact-field select, .contact-field textarea,
  .search-form input, .search-form select, .input-unit input { font-size: 16px !important; }
  /* --- ボタン --- */
  main .btn, .mobile-bar .btn { font-size: 15px !important; min-height: 48px; }
  .header-actions .btn { font-size: 14px !important; white-space: nowrap; }
  .v3-hide-sp { display: none; }
  .back-link, .more, .partner-text-link, .partner-entry-more, .link span, .reset { font-size: 14px !important; }
  /* --- 残っていた小さな文字 --- */
  .partner-concern-heading > p, .partner-concern-answer p, .sub-cta p { font-size: 15px !important; line-height: 1.8 !important; }
  .hero-lead, .brand-story > p, .partner-promise p, .partner-hero-fee, .cost-note, .consent, .consent a, .consent span:not(.required-label) {
    font-size: 14px !important; line-height: 1.75 !important;
  }
  .partner-types span, .partner-hero-fee span, .pager span, .result small, .input-unit span, .contact-current,
  .form-progress b, .prep-list .feature-number { font-size: 13px !important; }
  /* 幅 320px でも、計算欄の見出しと「事業所の登録はこちら」が右にはみ出さない */
  .calc-field label { white-space: normal !important; }
  .partner-entry-actions { flex-wrap: wrap; }
  .partner-entry-actions .btn { white-space: normal !important; }
  /* --- 並べ方：文字を大きくしたぶん、窮屈なところは1列に --- */
  .concern-grid { grid-template-columns: 1fr !important; }
  /* お悩みのカード：イラストは右上に小さく置き、下の余白をなくす */
  .concern { min-height: 0 !important; padding: 18px 18px 20px !important; }
  .concern-illustration { top: 14px; bottom: auto !important; right: 12px !important; width: 92px !important; height: 92px !important; object-position: center !important; }
  .concern .num, .concern h3 { padding-right: 100px; }
  .concern h3 { min-height: 54px; }
  .calc-form { grid-template-columns: 1fr !important; }
  .story-circle { width: 84px !important; height: 84px !important; flex: 0 0 84px; font-size: 21px !important; }
  .story-circle small { font-size: 12px !important; }
  .cta-art { display: none; }
  .jobs-controls .pager span { white-space: nowrap; }
  .jobs-controls { gap: 12px; }
  /* パソコンの幅に合わせて入れてある改行は、スマホでは外して自然に折り返す */
  .concern br, .reassure p br, .hero-description br, .section-lead br, .sub-hero .lead br, .partner-hero-copy .lead br,
  .feature-tile p br, .story-half p br, .cta-copy p br, .partner-entry-copy p br, .partner-concern-grid br,
  .partner-concern-heading br, .partner-contact-copy p br, .price-tile p br, .price-details p br,
  .calc-heading p br, .contact-heading p br, .sub-cta p br { display: none; }
  /* 見出しは、文の切れ目で折り返す（対応するブラウザだけ） */
  main h1, main h2, main h3 { word-break: auto-phrase; text-wrap: balance; }
  /* トップと福祉事業所ページの最初のボタンは、文字を大きくしたぶん縦に並べる */
  .hero-buttons { flex-direction: column !important; align-items: stretch !important; }
  .hero-buttons .btn { flex: none !important; width: 100%; white-space: normal !important; }
}
/* 幅 360px 以下：ヘッダーのボタンの矢印を外し、メニューボタンが画面からはみ出さないように */
@media (max-width: 360px) {
  .header-actions .btn .icon { display: none; }
  .header-actions .btn { padding-left: 12px !important; padding-right: 12px !important; }
}
/* 福祉事業所ページのヘッダーのボタンは、スマホでは「相談する」だけにして1行に収める */
@media (max-width: 430px) { .v3-hide-xs { display: none; } }

/* =========================================================
   トップページの候補者：横にスクロールして見る（パソコンは3枚、タブレットは2枚、スマホは1枚と次の端が見える）
   ========================================================= */
.cand-carousel { display: grid; grid-auto-flow: column; grid-auto-columns: calc((100% - 44px) / 3); gap: 22px;
  overflow-x: auto; scroll-snap-type: x mandatory; overscroll-behavior-x: contain; padding: 4px 2px 16px;
  scrollbar-width: thin; scrollbar-color: #a9cbe1 #e3f0fa; }
.cand-carousel > * { scroll-snap-align: start; min-width: 0; }
.cand-carousel:focus-visible { outline: 3px solid var(--blue); outline-offset: 4px; border-radius: 12px; }
.cand-controls { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 6px; }
.cand-controls[hidden] { display: none; }
.cand-controls p { font-size: 13px; color: var(--muted); }
.cand-controls .pager span { white-space: nowrap; }
@media (max-width: 1000px) { .cand-carousel { grid-auto-columns: calc((100% - 16px) / 2); gap: 16px; } }
@media (max-width: 760px) { .cand-carousel { grid-auto-columns: 86%; gap: 14px; } }
/* 掲載イメージ（架空の人物）は、実在の候補者と見分けがつくように */
.cand-v3-sample .sample-badge { background: #fff1c4; color: #6b5200; }
.cand-v3-sample-head { font-size: 22px; margin: 36px 0 8px; }
.cand-v3-sample-lead { font-size: 14px; color: var(--muted); margin-bottom: 18px; }

@media (max-width: 760px) {
  /* トップの写真：スマホでは帯状に切れて「女性だけの写真」が浮いて見えるので出さない（パソコンでは背景のまま） */
  .hero { padding-bottom: 28px !important; }
  .hero .hero-back { display: none; }
  /* 「推し」「ONE+」の丸：丸を大きくしたぶん、置く枠も広げて文章に重ならないように */
  .story-half, .story-half:first-child, .story-half:nth-child(2) { grid-template-columns: 88px 1fr !important; gap: 16px !important; }
  .story-circle small { letter-spacing: 0 !important; }
}

/* 掲載イメージの「支援員の声」（納品デザインの吹き出しの形） */
.cand-v3-voice { margin: 16px 0 0; flex: none; }
.cand-v3-voice p { font-size: 14px; line-height: 1.85; }
.cand-v3-voice cite { font-size: 13px; color: #4f6b58; }
.cand-v3-voice + .cand-v3-locked { margin-top: 12px; }

/* 「推し」「ONE+」の丸：英字（OSHI／ONE PLUS）が丸からはみ出さない大きさに（パソコン・スマホとも）
   納品は 62〜81px の丸に 12px の英字で、「ONE PLUS」の両端が切れていた */
.story-circle { width: 92px !important; height: 92px !important; flex: 0 0 92px; }
.story-circle small { letter-spacing: 0 !important; white-space: nowrap; }
.story-half, .story-half:first-child, .story-half:nth-child(2) { grid-template-columns: 96px 1fr !important; }

/* スマホ・タブレットのヘッダーに「ログイン」（2026-10-02 福島さんの希望）
   パソコンは白い「ログイン」ボタン。1000px 以下はそのボタンを隠しているので、
   人のアイコン＋小さな文字の形で、メニューボタンの左に置く（お問い合わせボタンを押し出さない大きさ） */
.header-login { display: none; }
@media (max-width: 1000px) {
  .header-login { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px;
    flex: none; min-width: 44px; min-height: 44px; padding: 0 2px; color: var(--deep); font-size: 12px; font-weight: 700;
    line-height: 1.2; text-decoration: none; white-space: nowrap; }
  .header-login .icon { width: 20px; height: 20px; }
  .header-login:hover span { text-decoration: underline; text-underline-offset: 3px; }
  .header-login:focus-visible { outline: 3px solid #70afe2; outline-offset: 2px; border-radius: 6px; }
}
@media (max-width: 760px) {
  .header-inner { gap: 10px !important; }
  .header-actions .btn { padding-left: 12px !important; padding-right: 12px !important; }
}
@media (max-width: 380px) {
  .header-inner { padding-left: 14px !important; padding-right: 12px !important; gap: 8px !important; }
}
@media (max-width: 360px) {
  .header-inner { padding-left: 12px !important; padding-right: 10px !important; gap: 6px !important; }
  .header-actions .btn { padding-left: 8px !important; padding-right: 8px !important; }
  .header-login { min-width: 0; padding: 0; }
}
/* タブレット（761〜1000px）：メニュー・お問い合わせ・ログインが1行に収まるように
   （もとから「候補者を見る」などが2行に折れていた。「ご利用の流れ」「料金」はトップの中ほどにあるので、ここでは外す） */
@media (max-width: 1000px) and (min-width: 761px) {
  .header .nav a:nth-child(4), .header .nav a:nth-child(5) { display: none; }
  .header .nav a { white-space: nowrap; }
  .header-actions .btn { white-space: nowrap; }
  .header-actions .v3-hide-sp { display: none; }
}

/* トップの「福祉事業所の方へ」：「サービスのご案内」を文字のリンクから白いボタンに（2026-10-02 福島さんの希望）
   隣の「事業所の登録はこちら」と同じ高さ・同じ形にそろえる */
.partner-entry-actions .partner-entry-guide { border-color: #0b5aa6; box-shadow: inset 0 0 0 1px #0b5aa6; color: var(--deep); }
.partner-entry-actions .partner-entry-guide:hover { background: #eff7ff; }
/* スマホ：2つを縦に並べて幅いっぱいに（横に並べると「事業所の登録はこちら」が2行に折れる）。
   ヒーローと同じく、黄色い登録ボタンを上に */
@media (max-width: 760px) {
  .partner-entry-actions { flex-direction: column; align-items: stretch; gap: 10px !important; }
  .partner-entry-actions .btn { width: 100%; justify-content: center; white-space: nowrap !important; }
  .partner-entry-actions .btn:not(.white) { order: -1; }
}