/* lp-voice-demo を lp.delne.jp/trial のデザインに寄せる上書き。
   .voice-demo-page-lp スコープ限定のため /voice-demo/(public) には影響しない。
   browser_voice_demo.css の後に読み込むこと（上書きのため）。 */

.voice-demo-page-lp {
    /* LP配色: ネイビー基調 + オレンジアクセント。背景は白一色（二段階表示にしない） */
    --voice-demo-public-navy: #0e2f54;
    --voice-demo-public-ink: #1f3a5f;
    --voice-demo-public-page: #ffffff;
    --lp-navy: #0e2f54;
    --lp-orange-top: #efab46;
    --lp-orange-bottom: #df8f1f;
    --lp-orange-strong: #d6862a;

    /* ヘッダを最上部に積むため縦並びへ */
    flex-direction: column;
    align-items: center;
    /* 固定ヘッダ(64px)分のオフセット。border-box で min-height:100vh に padding を含める */
    box-sizing: border-box;
    padding-top: 64px;
}

/* ===== 上部ヘッダ（/auth/portal/ と同一。サブタイトル「音声デモ体験」のみ追加） ===== */
.portal-topbar {
    position: fixed; top: 0; left: 0; right: 0; z-index: 1000;
    height: 64px; background: #002c5b;
    display: flex; align-items: center; padding: 0;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.10);
}
/* LP の `container mx-auto px-4`（中央寄せ・レスポンシブ最大幅＋左右16px）を再現 */
.portal-topbar-inner {
    width: 100%; margin: 0 auto; padding: 0 16px;
    display: flex; align-items: center; gap: 10px;
}
@media (min-width: 640px)  { .portal-topbar-inner { max-width: 640px;  } }
@media (min-width: 768px)  { .portal-topbar-inner { max-width: 768px;  } }
@media (min-width: 1024px) { .portal-topbar-inner { max-width: 1024px; } }
@media (min-width: 1280px) { .portal-topbar-inner { max-width: 1280px; } }
@media (min-width: 1536px) { .portal-topbar-inner { max-width: 1536px; } }
.portal-topbar .portal-topbar-logo {
    height: 48px; width: auto; display: block;
}
/* ロゴ右隣のサブタイトル（音声デモ体験） */
.portal-topbar .lp-demo-subtitle {
    color: #ffffff;
    font-weight: 600;
    font-size: 0.95rem;
    letter-spacing: 0.04em;
}

/* 固定ヘッダ分だけ phone の最小高さを調整 */
.voice-demo-page-lp .voice-demo-public-phone {
    min-height: calc(100vh - 64px);
}

/* PC: カード(phone)を800pxに広げて余裕を持たせる（モバイルは従来どおり） */
@media (min-width: 768px) {
    .voice-demo-page-lp .voice-demo-public-phone {
        max-width: 800px;
    }

    /* PC版: 終了画面のrecap表示幅を画面(カード)の7割に */
    .voice-demo-page-lp .voice-demo-public-recap {
        width: 70%;
        margin-left: auto;
        margin-right: auto;
    }
}

/* ボタン幅は現状維持: カードが広がっても伸ばさず、中央寄せでキャップ */
.voice-demo-page-lp .voice-demo-public-button {
    max-width: 372px;
    margin-left: auto;
    margin-right: auto;
}

/* カード内の重複ロゴは非表示（ヘッダにロゴがあるため） */
.voice-demo-page-lp .voice-demo-public-intro-logo {
    display: none;
}

/* lead の margin-top:auto（下寄せ）を解除。カード位置はステージ共通の
   .lp-demo-card（margin）で全フェーズ揃えるため、intro個別の上余白指定は持たない。 */
.voice-demo-page-lp .voice-demo-public-screen[data-public-stage="intro"] .voice-demo-public-lead {
    margin-top: 0;
}

/* タイトル(電話に出られない…)を中央寄せ */
.voice-demo-page-lp #voice-demo-title {
    text-align: center;
}

/* リード文も中央寄せ */
.voice-demo-page-lp .voice-demo-public-sub {
    text-align: center;
}

/* 特徴リストの横幅を画面幅の70%にして中央寄せ */
.voice-demo-page-lp .voice-demo-public-facts {
    width: 70%;
    margin-left: auto;
    margin-right: auto;
}

/* マイク許可画面: mic-stage の flex:1（縦伸長）を解除（位置はカード共通marginで統一） */
.voice-demo-page-lp .voice-demo-public-screen[data-public-stage="mic"] .voice-demo-public-mic-stage {
    flex: 0 0 auto;
    justify-content: flex-start;
}

/* マイク許可画面: 戻るボタンと「マイクを許可して始める」ボタンの間を30px空ける */
.voice-demo-page-lp .voice-demo-public-screen[data-public-stage="mic"] .voice-demo-public-backlink {
    padding-top: 30px;
}

/* ===== アクセントをオレンジへ ===== */
.voice-demo-page-lp .voice-demo-public-eyebrow,
.voice-demo-page-lp .voice-demo-public-lead em,
.voice-demo-page-lp .voice-demo-public-ended em {
    color: var(--lp-orange-strong);
}

.voice-demo-page-lp .voice-demo-public-fact span {
    background: rgba(232, 155, 52, 0.16);
}

.voice-demo-page-lp .voice-demo-public-fact span::after {
    border-left-color: var(--lp-orange-strong);
    border-bottom-color: var(--lp-orange-strong);
}

/* 特徴は入れ子ボックスにせずフラットに（カードと同じ白一色＝二段階表示にしない） */
.voice-demo-page-lp .voice-demo-public-fact {
    background: transparent;
    border: none;
    border-radius: 0;
    padding: 6px 0;
    box-shadow: none;
}

/* ===== 全フェーズ共通カード（切替時に枠を動かさず連続表示） ===== */
/* 各ステージの内側コンテナを同一カードに揃える。max-width / min-height / margin / padding を
   固定し、フェーズ切替で枠がぶれず中身だけ差し替わるようにする。 */
.voice-demo-page-lp .lp-demo-card {
    /* 幅・高さ・位置をフェーズ間で固定（min-height ではなく固定 height）。
       内容がはみ出す場合はカード内スクロールにして枠サイズを変えない。 */
    width: 100%;
    max-width: 560px;
    height: 540px;
    overflow-y: auto;
    overflow-x: hidden;
    margin: 24px auto;
    box-sizing: border-box;
    /* 縦flex: 操作ボタン群を margin-top:auto でカード下部に固定し、位置をフェーズ間で一定に */
    display: flex;
    flex-direction: column;
    /* カード背景は添付（lp.delne.jp の体験カード）と同系の淡いブルー（上が明るい微グラデーション） */
    background: linear-gradient(180deg, #e9f1fa 0%, #dce8f4 100%);
    border: 1px solid #d7e4f1;
    border-radius: 16px;
    box-shadow: 0 8px 28px rgba(15, 23, 42, 0.08);
    padding: 28px 22px 26px;
}

/* フェーズ切替を連続的に見せる: せり上がりアニメ無効化＋カードを上寄せ・中央に統一 */
.voice-demo-page-lp .voice-demo-public-screen {
    justify-content: flex-start;
    align-items: center;
    animation: none;
}

/* 各フェーズの操作ボタン群をカード下部に固定（位置をフェーズ間で一定に）。
   intro/mic は .voice-demo-public-cta、active は .voice-demo-public-endbar。 */
.voice-demo-page-lp .lp-demo-card .voice-demo-public-cta,
.voice-demo-page-lp .lp-demo-card .voice-demo-public-endbar {
    margin-top: auto;
}

/* カードタイトル「1分でわかる無料体験デモ」（eyebrow → 見出しへ昇格） */
.voice-demo-page-lp .lp-demo-card-title {
    margin: 0 0 16px;
    color: var(--lp-navy);
    font-size: 1.4rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-align: center;
}

/* カード内では特徴リストを全幅にして余白を最適化（外側の70%指定を上書き） */
.voice-demo-page-lp .lp-demo-card .voice-demo-public-facts {
    width: 100%;
}

/* ===== CTA(primary) を LP のオレンジ・ピル・矢印＋立体プレス演出に ===== */
.voice-demo-page-lp .voice-demo-public-button-primary {
    background: linear-gradient(180deg, var(--lp-orange-top) 0%, var(--lp-orange-bottom) 100%);
    color: #ffffff;
    border-radius: 999px;
    /* 下方向の濃いオレンジで立体的な厚み + ソフトな影 */
    box-shadow: 0 6px 0 #b86f1f, 0 12px 18px -7px rgba(214, 134, 42, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.4);
    transition: transform 0.08s ease, box-shadow 0.08s ease, background 0.15s ease;
}

.voice-demo-page-lp .voice-demo-public-button-primary::after {
    content: "\2192"; /* → */
    margin-left: 10px;
    font-weight: 800;
}

/* ホバー: 厚みを縮めて沈み込ませる（押し込む演出） */
.voice-demo-page-lp .voice-demo-public-button-primary:hover:not(:disabled),
.voice-demo-page-lp .voice-demo-public-button-primary:focus-visible:not(:disabled) {
    transform: translateY(3px);
    box-shadow: 0 3px 0 #b86f1f, 0 6px 12px -6px rgba(214, 134, 42, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.4);
}

.voice-demo-page-lp .voice-demo-public-button-primary:active:not(:disabled) {
    transform: translateY(6px);
    box-shadow: 0 0 0 #b86f1f, inset 0 1px 0 rgba(255, 255, 255, 0.35);
}

/* ===== 戻るボタン: 青の立体ボタン（スクリーンショット準拠）＋押し込み演出 ===== */
.voice-demo-page-lp .voice-demo-public-backlink {
    /* 戻るボタンと「AIと会話を始める」ボタンの間の余白を従来(24px)の1/3に */
    margin-top: 0;
    padding-top: 8px;
}

.voice-demo-page-lp .voice-demo-public-backlink a,
.voice-demo-page-lp .voice-demo-public-backlink button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 13px 30px;
    border: 0;
    border-bottom: 0;
    border-radius: 999px;
    color: #ffffff;
    font-size: 1rem;
    font-weight: 700;
    text-decoration: none;
    cursor: pointer;
    background: linear-gradient(180deg, #5ea0e6 0%, #3f86d6 100%);
    box-shadow: 0 5px 0 #2e6cb0, 0 8px 14px rgba(47, 108, 176, 0.35);
    transition: transform 0.08s ease, box-shadow 0.08s ease, background 0.15s ease;
}

.voice-demo-page-lp .voice-demo-public-backlink a::before,
.voice-demo-page-lp .voice-demo-public-backlink button::before {
    content: "\2190"; /* ← */
    font-weight: 800;
}

.voice-demo-page-lp .voice-demo-public-backlink a:hover,
.voice-demo-page-lp .voice-demo-public-backlink a:focus-visible,
.voice-demo-page-lp .voice-demo-public-backlink button:hover,
.voice-demo-page-lp .voice-demo-public-backlink button:focus-visible {
    transform: translateY(3px);
    box-shadow: 0 2px 0 #2e6cb0, 0 4px 8px rgba(47, 108, 176, 0.3);
}

.voice-demo-page-lp .voice-demo-public-backlink a:active,
.voice-demo-page-lp .voice-demo-public-backlink button:active {
    transform: translateY(5px);
    box-shadow: 0 0 0 #2e6cb0, 0 2px 5px rgba(47, 108, 176, 0.3);
}

/* 見出し（ネイビー）はベースの --voice-demo-public-ink 上書きで反映 */