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


/* ============================================================
   色（カラーパレット）
   manabyブランドイメージ：水色＋オレンジのアクセント
   ページ全体＝淡い背景色／質問＆選択肢＝白カード、の2層構造
============================================================= */.lp5-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: #FFF6EA;      /* ページ全体 */
    --card-bg: #ffffff;      /* 質問カード：白 */
    --option-bg: #ffffff;    /* 選択肢カード：白（またはごく薄いグレー #f8f7f4） */
    --radius-lg: 28px;
    --radius-md: 16px;
    --radius-sm: 12px;
}.lp5-scope * { box-sizing: border-box; }

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

/* 視覚的には隠すがスクリーンリーダーには読ませる要素用 */.lp5-scope .sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
}.lp5-scope, .lp5-scope {
    margin: 0;
    padding: 0;
    font-family: 'Noto Sans JP', -apple-system, BlinkMacSystemFont, 'Hiragino Kaku Gothic ProN', sans-serif;
    color: var(--ink);
}

/* ============================================================
   レイアウト全体
   1. ページ全体：淡い背景色
   2. 質問・選択肢：白いカード（.question-card）
   3. 「次へ進む」ボタン・補足文：白いカードの外側
   基準幅375pxのSPファースト設計。PCでは中央にフォームを表示するレスポンシブ対応
============================================================= */.lp5-scope.page {
    min-height: 100vh;
    display: flex;
    justify-content: center;
    background: var(--page-bg);
    padding: 28px 16px 40px;
}.lp5-scope .content-wrap {
    width: 100%;
    max-width: 420px;
    display: flex;
    flex-direction: column;
}

/* ============================================================
   所要時間の安心訴求：進捗バーの上に、吹き出し（スピーチバブル）で配置
   「小さい文字→大きい強調数字→小さい文字」の訴求バナーでよく使われる型。
   数字だけを大きく・太く・ブランドカラーにして視線を集め、残りは控えめに添える。
============================================================= */.lp5-scope .speed-bubble {
    position: relative;
    align-self: center;
    margin: 0 0 2px;
    padding: 8px 20px;
    background: #ffffff;
    border: 2px solid var(--orange);
    border-radius: 999px;
    box-shadow: 0 2px 8px rgba(240, 135, 58, 0.18);
}.lp5-scope .speed-bubble-tail {
    position: absolute;
    left: 50%;
    bottom: -8px;
    width: 14px;
    height: 14px;
    background: #ffffff;
    border-right: 2px solid var(--orange);
    border-bottom: 2px solid var(--orange);
    border-radius: 0 0 3px 0;
    transform: translateX(-50%) rotate(45deg);
}.lp5-scope .speed-badge {
    display: inline-flex;
    align-items: baseline;
    gap: 3px;
    margin: 0;
}.lp5-scope .speed-badge-num {
    font-size: 30px;
    line-height: 1;
    font-weight: 900;
    color: var(--orange);
    letter-spacing: -0.02em;
}.lp5-scope .speed-badge-unit {
    font-size: 15px;
    font-weight: 800;
    color: var(--orange);
    margin-left: 1px;
}.lp5-scope .speed-badge-post {
    font-size: 14px;
    font-weight: 700;
    color: var(--ink);
    letter-spacing: 0.01em;
}.lp5-scope .speed-badge-mascot {
    width: 30px;
    height: 30px;
    object-fit: contain;
    align-self: center;
    margin-left: 3px;
    flex-shrink: 0;
}

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

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

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

/* 質問文＋選択肢をまとめる白いカード枠 */.lp5-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); /* ごく薄い影 */
}.lp5-scope .q-title {
    font-size: 18px;
    font-weight: 700;
    line-height: 1.6;
    text-align: center;   /* 質問文はカード上部中央 */
    margin: 0 0 18px;
}.lp5-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;
}.lp5-scope .q-note { font-size: 14px; color: var(--sub); text-align: center; margin: -8px 0 14px; }.lp5-scope .q-note-sub { font-size: 12px; margin-left: 4px; }

/* ============================================================
   選択肢：カード型ボタン（単一選択／複数選択共通）
   背景は白／ごく薄いグレー、ページ背景色は使わない
   選択中のみオレンジの枠線・淡いオレンジ背景で分かりやすく
============================================================= */.lp5-scope .grid { display: grid; gap: 13px; }   /* 選択肢間 12〜14px */.lp5-scope .grid-1 { grid-template-columns: 1fr; }.lp5-scope .card-select { margin-bottom: 4px; }.lp5-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;
}.lp5-scope .option-card:active { transform: scale(0.99); }

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

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

/* ============================================================
   画面4：郵便番号入力
============================================================= */.lp5-scope .field-label {
    display: block;
    font-size: 13px;
    color: var(--sub);
    margin: 0 0 8px;
}.lp5-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;
}.lp5-scope .text-input:focus { outline: 2px solid var(--blue); background: #fff; }.lp5-scope .text-input::placeholder { color: #8b96a0; }.lp5-scope .text-input.input-error { outline: 2px solid #e05555; background: #fff5f5; }

/* 画面4：都道府県／市区町村セレクト */.lp5-scope .select-wrap { margin-bottom: 16px; }.lp5-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;
}.lp5-scope .select-input:focus { outline: 2px solid var(--blue); background-color: #fff; }
/* 未入力の状態(#fff)と区別できるよう、無効時のみ明確にグレーの背景にする */.lp5-scope .select-input:disabled { background: #eef0f1; color: #8b96a0; cursor: not-allowed; }.lp5-scope .field-note { font-size: 12px; color: var(--sub); margin: 8px 0 18px; }.lp5-scope .link-toggle {
    display: block;
    width: 100%;
    background: none;
    border: none;
    text-align: left;
    padding: 12px 2px;
    font-size: 13px;
    color: var(--blue-dark);
    text-decoration: underline;
    cursor: pointer;
    font-family: inherit;
}.lp5-scope .link-toggle .chev { text-decoration: none; color: var(--orange); font-weight: 700; }.lp5-scope .accordion-body {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.25s ease;
    font-size: 13px;
    color: var(--sub);
}.lp5-scope .accordion-body.open { max-height: 320px; padding-top: 12px; }

/* ============================================================
   画面5：個人情報入力前のメリット訴求（離脱防止）
============================================================= */.lp5-scope .mascot-cameo {
    width: 92px;
    height: 92px;
    margin: 0 auto 12px;
    border-radius: 50%;
    overflow: hidden;
}.lp5-scope .mascot-cameo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 50% 8%;
}.lp5-scope .eyebrow {
    display: inline-block;
    font-size: 13px;
    font-weight: 700;
    color: var(--orange-dark);
    background: var(--orange-pale);
    border-radius: 999px;
    padding: 6px 14px;
    margin: 0 0 10px;
}.lp5-scope .benefit-list {
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
    margin-top: 20px;
}.lp5-scope .benefit-card {
    background: var(--blue-pale);
    border-radius: var(--radius-md);
    padding: 14px 16px;
    text-align: center;
}.lp5-scope .benefit-icon-img { width: 68px; height: 68px; object-fit: contain; display: block; margin: 0 auto 6px; }.lp5-scope .benefit-title { font-size: 15px; font-weight: 700; margin: 0 0 6px; }.lp5-scope .benefit-text { font-size: 13px; color: var(--sub); line-height: 1.6; margin: 0; }.lp5-scope .step4-footnote {
    text-align: center;
    font-size: 12px;
    color: var(--sub);
    margin: 20px 0 0;
}

/* ============================================================
   画面6：お客様情報・バリデーション表示
   正常入力→チェックマーク／未入力・形式エラー→エラーメッセージ
============================================================= */.lp5-scope .field-group { margin-bottom: 18px; }.lp5-scope .input-wrap { position: relative; }.lp5-scope .input-wrap .text-input { padding-right: 40px; }.lp5-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;
}.lp5-scope .input-check.show { opacity: 1; }.lp5-scope .field-error {
    font-size: 12px;
    color: #c23b3b;
    margin: 6px 0 0;
    min-height: 14px;
}

/* 同意チェックは廃止し、リンク付きの注意書きのみ表示する */.lp5-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);
}.lp5-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;
}.lp5-scope .agree-notice a:hover, .lp5-scope .agree-notice a:focus-visible { border-bottom-color: var(--blue-dark); }

/* ============================================================
   ボタン：質問カードの外側に独立配置
   「次へ進む」＝オレンジ・太字・大きめ／「戻る」＝弱く小さく
============================================================= */.lp5-scope .nav-row {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-top: 20px;   /* 白いカードから十分な余白を空ける */
}.lp5-scope .btn-back {
    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;
}.lp5-scope .btn-back[disabled] { opacity: 0.35; pointer-events: none; }.lp5-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;
}.lp5-scope .btn-primary[disabled] {
    opacity: 0.45;
    box-shadow: 0 4px 0 rgba(0,0,0,0.08);
    cursor: not-allowed;
}
/* 最終画面のみ「上記に同意して」を小さく添えて2行表示 */.lp5-scope .btn-caption {
    font-size: 11px;
    font-weight: 500;
    opacity: 0.9;
}.lp5-scope .btn-main-row {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 16px;
    font-weight: 700;
}.lp5-scope .btn-primary .arrow { font-size: 15px; }

/* ============================================================
   レスポンシブ微調整
============================================================= */
@media (max-width: 360px) {.lp5-scope .question-card { padding: 20px 16px; }.lp5-scope .q-title { font-size: 17px; }
}

/* 広いビューポートでは中央のカードだけが浮いて見えないよう、背景にごく淡いグラデーションを添える
   （.content-wrapのmax-widthは変更しない＝現状の複数カラム化バグの再発を避けるため） */
@media (min-width: 900px) {.lp5-scope.page {
        background: radial-gradient(circle at 50% -10%, #fffcf5 0%, var(--page-bg) 55%);
    }
}