@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;500;700;900&display=swap');


/* ============================================================
   色（カラーパレット）
   manabyブランドイメージ：水色＋オレンジのアクセント
   ページ全体＝淡い背景色／質問＆選択肢＝白カード、の2層構造
============================================================= */.mfi-scope {
    --blue: #4fb3d9;
    --blue-dark: #1f7a99;    /* リンク等の文字色用（白背景でWCAG AA 4.5:1以上を確保） */
    --blue-pale: #eaf6fa;
    --orange: #f0873a;       /* 進捗バー・枠線など装飾用（文字色には使わない） */
    --orange-dark: #a8560e;  /* 必須バッジ等の文字色用（淡いオレンジ背景でAA相当を確保） */
    --orange-pale: #fdeedd;
    --orange-btn: #f0873a;       /* 主要ボタンの背景（元の色に戻した。白文字とのコントラストはAA基準未達 -- 要相談） */
    --orange-btn-shadow: #d96f24;
    --ink: #3a3a3a;
    --sub: #767676;
    --border: #e3e6e8;
    --gray-dot: #d9d9d9;
    --page-bg: rgb(252, 250, 245);      /* ページ全体：指定色（旧: #e6eef1 淡いブルーグレー） */
    --card-bg: #ffffff;      /* 質問カード：白 */
    --option-bg: #ffffff;    /* 選択肢カード：白（またはごく薄いグレー #f8f7f4） */
    --radius-lg: 28px;
    --radius-md: 16px;
    --radius-sm: 12px;
}.mfi-scope * { box-sizing: border-box; }

/* hidden属性は必ず非表示にする（.btn-primaryのdisplay:flexが競合して上書きしてしまうのを防ぐ） */.mfi-scope [hidden] { display: none !important; }

/* 視覚的には隠すがスクリーンリーダーには読ませる要素用 */.mfi-scope .sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
}

/* ============================================================
   レイアウト全体
   1. ページ全体：淡い背景色
   2. 質問・選択肢：白いカード（.question-card）
   3. 「次へ進む」ボタン・補足文：白いカードの外側
   基準幅375pxのSPファースト設計。PCでは中央にフォームを表示するレスポンシブ対応
   ※ html/body への指定はページ全体（フォーム以外の部分）に影響するため、
     .mf-page（フォームの一番外側の要素）だけに背景・フォント・文字色を適用する
============================================================= */.mfi-scope.mf-page {
    width: 100vw;
    position: relative;
    left: 50%;
    right: 50%;
    margin-left: -50vw;
    margin-right: -50vw;
    min-height: 100vh;
    display: flex;
    justify-content: center;
    background: var(--page-bg);
    padding: 28px 16px 40px;
    font-family: 'Noto Sans JP', -apple-system, BlinkMacSystemFont, 'Hiragino Kaku Gothic ProN', sans-serif;
    color: var(--ink);
}.mfi-scope .content-wrap {
    width: 100%;
    max-width: 420px;
    display: flex;
    flex-direction: column;
}

/* ============================================================
   STEP：進捗表示（画面数が多いため「現在 / 全体」＋プログレスバー）
   白いカードの外側（淡い背景の上）に配置
============================================================= */.mfi-scope .progress { margin-bottom: 18px; }.mfi-scope .progress-label {
    text-align: right;
    font-size: 12px;
    font-weight: 700;
    color: var(--orange-dark);
    margin: 0 0 8px;
}.mfi-scope .progress-track {
    width: 100%;
    height: 6px;
    border-radius: 999px;
    background: #d7dfe2;
    overflow: hidden;
}.mfi-scope .progress-fill {
    height: 100%;
    background: var(--orange);
    border-radius: 999px;
    transition: width 0.25s ease;
}

/* ============================================================
   パネル・質問カード（白）
============================================================= */.mfi-scope .panel { display: block; }.mfi-scope .mfi-step { display: none; }.mfi-scope .mfi-step.active { display: block; animation: fadeIn 0.25s ease; }

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(6px); }
    to { opacity: 1; transform: translateY(0); }
}

/* 質問文＋選択肢をまとめる白いカード枠 */.mfi-scope .question-card {
    background: var(--card-bg);
    border-radius: 14px;           /* 12〜16px */
    padding: 22px 20px;            /* 20〜24px */
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.04); /* ごく薄い影 */
}.mfi-scope .q-title {
    font-size: 18px;
    font-weight: 700;
    line-height: 1.6;
    text-align: center;   /* 質問文はカード上部中央 */
    margin: 0 0 18px;
}
/* 画面切り替え時にJSでスクリーンリーダー向けにフォーカスを当てているだけで、
   tabindex="-1"のためキーボード操作では到達しない＝見た目の枠線は不要 */.mfi-scope .q-title:focus { outline: none; }.mfi-scope .required {
    display: inline-block;
    margin-left: 8px;
    font-size: 11px;
    font-weight: 700;
    color: var(--orange-dark);
    background: var(--orange-pale);
    border-radius: 999px;
    padding: 2px 8px;
    vertical-align: middle;
}.mfi-scope .q-note { font-size: 14px; color: var(--sub); text-align: center; margin: -8px 0 14px; }.mfi-scope .q-note-sub { font-size: 12px; margin-left: 4px; }

/* 任意項目バッジ（.requiredと対になる、目立たせすぎない配色） */.mfi-scope .optional {
    display: inline-block;
    margin-left: 8px;
    font-size: 11px;
    font-weight: 700;
    color: var(--sub);
    background: #eef0f1;
    border-radius: 999px;
    padding: 2px 8px;
    vertical-align: middle;
}

/* 画面1「在職中」選択時・画面4の任意項目群など、主質問の下に続くサブ質問の余白 */.mfi-scope .sub-question { margin-top: 18px; }.mfi-scope .textarea-input {
    width: 100%;
    padding: 14px 14px;
    border-radius: var(--radius-sm);
    border: 1px solid var(--border);
    background: #ffffff;
    font-size: 16px;
    font-family: inherit;
    color: var(--ink);
    resize: vertical;
    min-height: 96px;
}.mfi-scope .textarea-input:focus { outline: 2px solid var(--blue); background: #fff; }.mfi-scope .textarea-input::placeholder { color: #8b96a0; }

/* ============================================================
   選択肢：カード型ボタン（単一選択／複数選択共通）
   背景は白／ごく薄いグレー、ページ背景色は使わない
   選択中のみオレンジの枠線・淡いオレンジ背景で分かりやすく
============================================================= */.mfi-scope .grid { display: grid; gap: 13px; }   /* 選択肢間 12〜14px */.mfi-scope .grid-1 { grid-template-columns: 1fr; }.mfi-scope .card-select { margin-bottom: 4px; }.mfi-scope .option-card {
    width: 100%;
    text-align: center;         /* テキストは中央寄せ */
    border: 1px solid var(--border);
    background: var(--option-bg);
    border-radius: 10px;        /* 8〜10px */
    padding: 14px 16px;
    font-size: 15px;
    font-weight: 500;
    font-family: inherit;
    color: var(--ink);
    cursor: pointer;
    min-height: 64px;           /* 60〜68px：タップ領域全体がクリック可能 */
    display: flex;
    align-items: center;
    justify-content: center;
    transition: border-color 0.15s ease, background 0.15s ease;
}.mfi-scope .option-card:active { transform: scale(0.99); }

/* 選択肢内に画像を先頭配置して横並び表示するバリエーション（画面1） */.mfi-scope .option-card-media {
    justify-content: flex-start;
    text-align: left;
    gap: 14px;
    padding: 10px 16px;
}.mfi-scope .option-icon {
    width: 88px;
    height: 88px;
    object-fit: contain;
    flex-shrink: 0;
}.mfi-scope .option-label { flex: 1; }.mfi-scope .option-card.selected {
    border-color: var(--orange);
    background: var(--orange-pale);
    font-weight: 700;
    color: var(--orange-dark);
}

/* ============================================================
   補足文・イラスト：白い質問カードの外側（淡い背景の上）
   ボックス枠なし・プレーンに表示
============================================================= */.mfi-scope .reassure-block {
    margin-top: 22px;
    text-align: center;
}.mfi-scope .reassure-img {
    width: 100px;
    height: auto;
    margin-bottom: 8px;
}.mfi-scope .reassure-img-sm {
    width: 96px;
    height: auto;
    margin-bottom: 0;
    flex-shrink: 0;
}.mfi-scope .reassure-text {
    font-size: 13px;
    color: var(--sub);
    margin: 0;
    line-height: 1.6;
}.mfi-scope .reassure-block-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    text-align: left;
}

/* ============================================================
   画面4：郵便番号入力
============================================================= */.mfi-scope .field-label {
    display: block;
    font-size: 13px;
    color: var(--sub);
    margin: 0 0 8px;
}.mfi-scope .text-input {
    width: 100%;
    padding: 14px 14px;
    border-radius: var(--radius-sm);
    border: 1px solid var(--border);
    background: #ffffff;
    font-size: 16px;
    font-family: inherit;
    color: var(--ink);
    min-height: 48px;
}.mfi-scope .text-input:focus { outline: 2px solid var(--blue); background: #fff; }.mfi-scope .text-input::placeholder { color: #8b96a0; }.mfi-scope .text-input.input-error { outline: 2px solid #e05555; background: #fff5f5; }

/* 画面4：都道府県／市区町村セレクト */.mfi-scope .select-wrap { margin-bottom: 16px; }.mfi-scope .select-input {
    width: 100%;
    padding: 14px 14px;
    border-radius: var(--radius-sm);
    border: 1px solid var(--border);
    background: #ffffff;
    font-size: 16px;
    font-family: inherit;
    color: var(--ink);
    min-height: 48px;
    appearance: none;
    background-image: linear-gradient(45deg, transparent 50%, var(--sub) 50%), linear-gradient(135deg, var(--sub) 50%, transparent 50%);
    background-position: calc(100% - 22px) center, calc(100% - 16px) center;
    background-size: 6px 6px, 6px 6px;
    background-repeat: no-repeat;
}
/* outline-offsetをマイナスにして枠線を要素の内側に描画する（.accordion-bodyのoverflow:hiddenで下端が切れるのを防ぐ） */.mfi-scope .select-input:focus { outline: 2px solid var(--blue); outline-offset: -2px; background-color: #fff; }
/* 未入力の状態(#fff)と区別できるよう、無効時のみ明確にグレーの背景にする */.mfi-scope .select-input:disabled { background: #eef0f1; color: #8b96a0; cursor: not-allowed; }.mfi-scope .field-note { font-size: 12px; color: var(--sub); margin: 8px 0 18px; }.mfi-scope .link-toggle {
    display: block;
    width: 100%;
    background: none;
    border: none;
    text-align: left;
    padding: 12px 2px;
    font-size: 13px;
    color: var(--blue-dark);
    cursor: pointer;
    font-family: inherit;
}.mfi-scope .link-toggle-text { text-decoration: underline; }.mfi-scope .link-toggle .chev { text-decoration: none; color: var(--orange); font-weight: 700; margin-left: 4px; }

/* 「希望事業所と日時を入力する」トグル：元のformrunフォームに合わせ、
   カード枠＋中央寄せタイトル＋常時表示の説明文というデザインにする */.mfi-scope .card-toggle {
    position: relative;
    display: block;
    width: 100%;
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    padding: 16px 20px 16px 8px;
    margin-bottom: 4px;
    text-align: center;
    cursor: pointer;
    font-family: inherit;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.04);
}.mfi-scope .card-toggle-title {
    display: block;
    font-size: 15px;
    font-weight: 700;
    color: var(--ink);
    margin-bottom: 6px;
}.mfi-scope .card-toggle-desc { display: block; }.mfi-scope .card-toggle-desc-main {
    display: block;
    font-size: 9.5px;
    color: var(--sub);
    line-height: 1.5;
}.mfi-scope .card-toggle-desc-note {
    display: block;
    font-size: 8.2px;
    color: var(--sub);
    line-height: 1.5;
    margin-top: 3px;
}.mfi-scope .card-toggle-chev {
    position: absolute;
    top: 18px;
    right: 14px;
    color: var(--orange);
    font-weight: 700;
    transition: transform 0.2s ease;
}.mfi-scope .card-toggle[aria-expanded="true"] .card-toggle-chev { transform: rotate(180deg); }.mfi-scope .accordion-body {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.25s ease;
    font-size: 13px;
    color: var(--sub);
}.mfi-scope .accordion-body.open { max-height: 1200px; padding-top: 12px; }

/* ============================================================
   画面4：個人情報入力前のメリット訴求（離脱防止）
============================================================= */.mfi-scope .eyebrow {
    display: inline-block;
    font-size: 11px;
    font-weight: 700;
    color: var(--orange-dark);
    background: var(--orange-pale);
    border-radius: 999px;
    padding: 3px 10px;
    margin: 0 0 10px;
}

/* ============================================================
   カンタン30秒バッジ（小さめ・グラデーションリング＋アイコン）
============================================================= */.mfi-scope .kantan30-wrap { text-align: center; margin: 0 0 14px; }.mfi-scope .kantan30-badge {
    position: relative;
    display: inline-flex;
    overflow: hidden;
    padding: 2px;
    border-radius: 999px;
    background: linear-gradient(135deg, var(--orange), var(--orange-btn-shadow));
    box-shadow: 0 2px 5px -1px rgba(217, 111, 36, 0.35), 0 1px 2px rgba(0, 0, 0, 0.06);
}.mfi-scope .kantan30-badge::before {
    content: "";
    position: absolute;
    top: 0;
    left: -60%;
    width: 40%;
    height: 100%;
    background: linear-gradient(to right, rgba(255,255,255,0) 0%, rgba(255,255,255,0.55) 50%, rgba(255,255,255,0) 100%);
    transform: skewX(-20deg);
    animation: kantan30Shine 3.2s infinite;
}
@keyframes kantan30Shine {
    0% { left: -60%; }
    25% { left: 130%; }
    100% { left: 130%; }
}.mfi-scope .kantan30-badge__inner {
    display: flex;
    align-items: center;
    gap: 5px;
    background: var(--card-bg);
    border-radius: 999px;
    padding: 4px 12px 4px 10px;
}.mfi-scope .kantan30-badge__icon { width: 13px; height: 13px; color: var(--orange); flex-shrink: 0; }.mfi-scope .kantan30-badge__text { display: flex; flex-direction: column; line-height: 1.05; }.mfi-scope .kantan30-badge__label { font-size: 8px; color: var(--orange-dark); font-weight: 700; letter-spacing: 0.06em; }.mfi-scope .kantan30-badge__main { font-size: 12.5px; font-weight: 900; color: var(--orange-dark); }.mfi-scope .kantan30-badge__main small { font-size: 10.5px; font-weight: 700; }
@media (prefers-reduced-motion: reduce) {.mfi-scope .kantan30-badge::before { animation: none; }
}.mfi-scope .benefit-list {
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
    margin-top: 20px;
}.mfi-scope .benefit-card {
    background: var(--blue-pale);
    border-radius: var(--radius-md);
    padding: 14px 16px;
    text-align: center;
}.mfi-scope .benefit-icon-img { width: 68px; height: 68px; object-fit: contain; display: block; margin: 0 auto 6px; }.mfi-scope .benefit-title { font-size: 15px; font-weight: 700; margin: 0 0 6px; }.mfi-scope .benefit-text { font-size: 13px; color: var(--sub); line-height: 1.6; margin: 0; }.mfi-scope .step4-footnote {
    text-align: center;
    font-size: 12px;
    color: var(--sub);
    margin: 20px 0 0;
}

/* ============================================================
   画面6：お客様情報・バリデーション表示
   正常入力→チェックマーク／未入力・形式エラー→エラーメッセージ
============================================================= */.mfi-scope .field-group { margin-bottom: 18px; }.mfi-scope .input-wrap { position: relative; }.mfi-scope .input-wrap .text-input { padding-right: 40px; }.mfi-scope .input-check {
    position: absolute;
    right: 14px;
    top: 50%;
    transform: translateY(-50%);
    color: #2fa860;
    font-size: 18px;
    font-weight: 700;
    opacity: 0;
    transition: opacity 0.15s ease;
}.mfi-scope .input-check.show { opacity: 1; }.mfi-scope .field-error {
    font-size: 12px;
    color: #c23b3b;
    margin: 6px 0 0;
    min-height: 14px;
}

/* 同意チェックは廃止し、リンク付きの注意書きのみ表示する */.mfi-scope .agree-notice {
    font-size: 12.5px;
    line-height: 1.7;
    color: var(--sub);
    margin: 14px 0 0;
    padding: 12px 14px;
    background: var(--blue-pale);
    border-radius: var(--radius-md);
}.mfi-scope .agree-notice a {
    color: var(--blue-dark);
    font-weight: 700;
    text-decoration: none;
    border-bottom: 1px solid rgba(46, 147, 184, 0.35);
    transition: border-color 0.15s ease;
}.mfi-scope .agree-notice a:hover, .mfi-scope .agree-notice a:focus-visible { border-bottom-color: var(--blue-dark); }

/* ============================================================
   ボタン：質問カードの外側に独立配置
   「次へ進む」＝オレンジ・太字・大きめ／「戻る」＝弱く小さく
============================================================= */.mfi-scope .nav-row {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-top: 20px;   /* 白いカードから十分な余白を空ける */
}.mfi-scope .btn-back {
    width: auto;   /* テーマ側のCSS(button{width:100%})に上書きされて「次へ進む」が極端に狭くなるのを防ぐ */
    background: none;
    border: none;
    font-size: 14px;
    color: var(--sub);
    padding: 12px 14px;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    cursor: pointer;
    font-family: inherit;
    flex-shrink: 0;
}.mfi-scope .btn-back[disabled] { opacity: 0.35; pointer-events: none; }.mfi-scope .btn-primary {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    background: var(--orange-btn);
    box-shadow: 0 4px 0 var(--orange-btn-shadow); /* ボタン下部に濃いオレンジで立体感 */
    color: #fff;
    border: none;
    border-radius: 10px;    /* 8〜12px */
    padding: 14px 0;        /* 高さ56〜64px相当（2行時は自然に広がる） */
    font-family: inherit;
    min-height: 58px;
    transition: opacity 0.15s ease;
}.mfi-scope .btn-primary[disabled] {
    opacity: 0.45;
    box-shadow: 0 4px 0 rgba(0,0,0,0.08);
    cursor: not-allowed;
}
/* 最終画面のみ「上記に同意して」を小さく添えて2行表示 */.mfi-scope .btn-caption {
    font-size: 11px;
    font-weight: 500;
    opacity: 0.9;
}.mfi-scope .btn-main-row {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 16px;
    font-weight: 700;
}.mfi-scope .btn-primary .arrow { font-size: 15px; }

/* ============================================================
   レスポンシブ微調整
============================================================= */
@media (max-width: 360px) {.mfi-scope .question-card { padding: 20px 16px; }.mfi-scope .q-title { font-size: 17px; }
}
/* =============================================================
   /inquiry/ ページ専用のリセット。
   body.mfi-inquiry-active が付いている時だけ効く。
   LP10側のページには mfi-inquiry-active クラスが付かないため、
   このCSSはLP10のページには一切影響しない。
============================================================= */
body.mfi-inquiry-active .header { display: none; }
body.mfi-inquiry-active .sub-fv { margin-top: 0; margin-bottom: 0; padding-bottom: 0; }
body.mfi-inquiry-active .sub-fv--inner { margin-bottom: 0; padding-bottom: 0; }
body.mfi-inquiry-active .contact-form--wrapper {
    padding: 0 !important;
    margin: 0 !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}
body.mfi-inquiry-active .footer { display: none; }
body.mfi-inquiry-active .ch--display--pc { display: none; }

/* 親要素（.ch--container等）の横幅制限・余白に関係なく、背景だけ画面いっぱいに広げる */
body.mfi-inquiry-active .contact-form.ch--common--bg,
body.mfi-inquiry-active .contact-form .ch--container {
    padding: 0 !important;
    margin: 0 !important;
    max-width: none !important;
    background: transparent !important;
}