/* ========================================
   カラートークン（Myhome Heroes ブランド）
   ======================================== */
:root {
    /* テキスト */
    --text-primary: #000000;
    --text-inverse: #FFFFFF;
    --text-muted: #8E8E8E;
    
    /* ブランド */
    --brand-primary: #073763;
    --accent: #d67c1d;
    
    /* 背景・境界 */
    --bg: #FFFFFF;
    --surface: #FFFFFF;
    --border: rgba(0, 0, 0, 0.12);
    
    /* ステート */
    --error: #d32f2f;
    --success: #4CAF50;
    
    /* ブランドグラデーション（最小限のみ使用） */
    --brand-gradient: linear-gradient(135deg, #073763 0%, #0b4a86 100%);
}

/* ========================================
   リセット & 基本設定
   ======================================== */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    /* iOS Safari の 100vh 問題対策 */
    height: 100%;
    height: 100dvh;
    overflow: hidden;
    background: #fff !important; /* 黒背景完全除去 */
}

body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    line-height: 1.6;
    color: var(--text-primary);
    background: #f5f5f5 !important; /* RENOSY風薄いグレー */
    height: 100%;
    height: 100dvh;
    overflow: hidden;
    /* iOS Safari のタップハイライト無効化 */
    -webkit-tap-highlight-color: transparent;
    /* iOS テキスト選択の調整 */
    -webkit-user-select: none;
    user-select: none;
}

/* ========================================
   メインレイアウト（Grid）
   CRITICAL: sticky を機能させるため overflow は使わない
   ======================================== */
.page {
    display: grid;
    grid-template-rows: auto 1fr;
    height: 100%;
    height: 100dvh;
    width: 100%;
    /* overflow は絶対に付けない（sticky が死ぬ） */
}

/* ========================================
   上部：動画ヒーローエリア（sticky）
   ======================================== */
/* ========================================
   Hero: RENOSY風カードUI統一
   背景は透明、黒い余白ゼロ
   ======================================== */
.hero {
    background: transparent !important;
    padding: 4px 8px 4px; /* 最小化 */
    position: relative;
}

.hero__inner {
    max-width: 720px;
    margin: 0 auto;
    display: grid;
    gap: 8px; /* 動画を目立たせるため適度な間隔 */
}

/* 共通カードスタイル（キャンペーン＋動画） */
.mhh-card {
    background: transparent; /* 白背景完全削除 */
    border: 1px solid rgba(0,0,0,0.08);
    border-radius: 18px;
    box-shadow: 0 10px 28px rgba(0,0,0,0.06);
    overflow: hidden;
}

/* 自動再生失敗時の再生ボタン */
.hero-play-btn {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 80px;
    height: 80px;
    background: rgba(255, 255, 255, 0.9);
    border: none;
    border-radius: 50%;
    font-size: 32px;
    color: var(--text-primary);
    cursor: pointer;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
    transition: background 0.2s;
    /* iOS タップ領域の最適化 */
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.hero-play-btn:active {
    background: rgba(255, 255, 255, 1);
}

.hero-play-btn.hidden {
    display: none;
}

/* 音声トグルボタン（動画フレーム内配置） */
.hero-mute-btn {
    position: absolute;
    bottom: 16px;
    right: 16px;
    width: 48px;
    height: 48px;
    background: rgba(0, 0, 0, 0.6);
    border: none;
    border-radius: 50%;
    font-size: 24px;
    cursor: pointer;
    transition: background 0.2s;
    z-index: 20; /* overlay(10)より上 */
    /* iOS タップ領域の最適化 */
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.hero-mute-btn:hover {
    background: rgba(0, 0, 0, 0.75);
}

.hero-mute-btn:active {
    background: rgba(0, 0, 0, 0.8);
}

/* ヒーローオーバーレイ（テキスト） */
/* 🔧 修正④: .hero-overlay を完全削除（被りゼロ要件） */
/* 削除: .hero-overlay, .hero-title, .hero-subtitle */

/* ========================================
   下部：チャットエリア（スクロール）
   ======================================== */
.chat {
    /* CRITICAL: ここで overflow を設定して独立スクロール */
    overflow-y: auto;
    overflow-x: hidden;
    /* iOS の慣性スクロール */
    -webkit-overflow-scrolling: touch;
    background: #f5f5f5; /* RENOSY風薄いグレー */
}

.chat-inner {
    min-height: 100%;
    padding: 20px 16px 80px;
}

/* ========================================
   進捗バー
   ======================================== */
.progress-bar {
    position: sticky;
    top: 0;
    z-index: 15;
    height: 20px;
    background: #FFE4CC;
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: 10px;
    margin-bottom: 24px;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.progress-fill {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    background: var(--accent);
    border-radius: 10px;
    transition: width 0.4s ease;
    width: 0%;
}

/* ========================================
   チャットメッセージ
   ======================================== */
.chat-messages {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.message {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    animation: messageIn 0.3s ease;
}

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

.message.bot {
    flex-direction: row;
}

.message.user {
    flex-direction: row-reverse;
}

.message-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--brand-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    flex-shrink: 0;
    overflow: hidden;
}

.message-avatar-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
}

.message.user .message-avatar {
    background: var(--accent);
}

.message-bubble {
    max-width: 75%;
    padding: 12px 16px;
    border-radius: 18px;
    /* iOS テキスト選択許可 */
    -webkit-user-select: text;
    user-select: text;
}

.message.bot .message-bubble {
    background: #fff;
    border-bottom-left-radius: 4px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.message.user .message-bubble {
    background: var(--brand-primary);
    color: var(--text-inverse);
    border-bottom-right-radius: 4px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
}

.message-text {
    font-size: 15px;
    line-height: 1.5;
    word-wrap: break-word;
}

/* ========================================
   入力UI（選択肢・フォーム）
   ======================================== */
.input-container {
    margin-top: 16px;
    animation: inputIn 0.3s ease;
}

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

/* 選択肢ボタン */
.options {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.option-btn {
    /* iOS タップ領域：最低44px */
    min-height: 48px;
    padding: 12px 20px;
    background: #fff;
    border: 2px solid #e0e0e0;
    border-radius: 24px;
    font-size: 15px;
    font-weight: 500;
    color: var(--text-primary);
    cursor: pointer;
    transition: all 0.2s;
    text-align: left;
    /* iOS テキスト選択許可 */
    -webkit-user-select: text;
    user-select: text;
}

.option-btn:active {
    background: var(--brand-primary);
    border-color: var(--brand-primary);
    color: var(--text-inverse);
    transform: scale(0.98);
}

.option-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* 複数選択（修正：潰れ対策） */
.checkbox-option {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    min-height: 48px;
    padding: 12px 16px;
    background: #fff;
    border: 2px solid #e0e0e0;
    border-radius: 24px;
    cursor: pointer;
    transition: all 0.2s;
    /* iOS テキスト選択許可 */
    -webkit-user-select: text;
    user-select: text;
}

.checkbox-option input[type="checkbox"] {
    flex-shrink: 0;
    width: 24px;
    height: 24px;
    margin-top: 2px;
    cursor: pointer;
}

.checkbox-label-text {
    flex: 1;
    min-width: 0;
    font-size: 15px;
    font-weight: 500;
    color: var(--text-primary);
    line-height: 1.5;
    /* 長文対策 */
    overflow-wrap: anywhere;
    word-break: break-word;
    white-space: normal;
}

.checkbox-option:has(input:checked) {
    background: #e8eaf6;
    border-color: var(--brand-primary);
}

/* 同意画面専用（修正：潰れ完全防止） */
.agreement-wrapper {
    margin-bottom: 16px;
}

.agreement-label {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    min-height: 48px;
    padding: 12px 16px;
    background: #fff;
    border: 2px solid #e0e0e0;
    border-radius: 16px;
    cursor: pointer;
    transition: all 0.2s;
}

.agreement-checkbox {
    flex-shrink: 0;
    width: 24px;
    height: 24px;
    margin-top: 2px;
    cursor: pointer;
}

.agreement-text {
    flex: 1;
    min-width: 0;
    font-size: 15px;
    font-weight: 500;
    color: var(--text-primary);
    line-height: 1.6;
    /* 長文対策 */
    overflow-wrap: anywhere;
    word-break: break-word;
    white-space: normal;
}

.agreement-label:has(.agreement-checkbox:checked) {
    background: #e8f5e9;
    border-color: #4CAF50;
}

/* テキスト入力 */
.form-group {
    margin-bottom: 16px;
    box-sizing: border-box;
    width: 100%;
    max-width: 100%;
}

.form-label {
    display: block;
    font-size: 14px;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 8px;
}

.form-input {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    /* iOS タップ領域：最低44px */
    min-height: 48px;
    padding: 12px 16px;
    background: #fff;
    border: 2px solid #e0e0e0;
    border-radius: 12px;
    font-size: 16px;
    color: var(--text-primary);
    transition: border-color 0.2s;
    /* iOS の自動ズーム防止：font-size 16px以上 */
}

.form-input:focus {
    outline: none;
    border-color: var(--brand-primary);
}

.form-input.error {
    border-color: var(--error);
}

.form-error {
    display: block;
    font-size: 13px;
    color: var(--error);
    margin-top: 4px;
}

/* 日付・時間入力フィールドのレスポンシブ対応 */
input[type="date"].form-input,
input[type="time"].form-input {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
}

/* スマホでの日付・時間入力の見切れ対策 */
@media (max-width: 480px) {
    input[type="date"].form-input,
    input[type="time"].form-input {
        font-size: 16px;
        padding: 12px 8px;
    }
}

/* 日付・時間帯入力 */
.date-time-group {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin-bottom: 16px;
}

/* 送信ボタン */
.submit-btn {
    width: 100%;
    min-height: 56px;
    padding: 16px 24px;
    background: var(--brand-primary);
    border: none;
    border-radius: 28px;
    font-size: 18px;
    font-weight: 700;
    color: var(--text-inverse);
    cursor: pointer;
    transition: all 0.2s;
    box-shadow: 0 4px 16px rgba(7, 55, 99, 0.3);
}

.submit-btn:hover {
    filter: brightness(1.1);
}

.submit-btn:active {
    transform: scale(0.98);
    box-shadow: 0 2px 8px rgba(7, 55, 99, 0.4);
}

.submit-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* プルダウン選択 */
.select-container {
    width: 100%;
    padding: 12px;
}

.select-wrapper {
    position: relative;
    margin-bottom: 16px;
}

.select-input {
    width: 100%;
    min-height: 48px;
    padding: 12px 16px;
    font-size: 16px;
    border: 2px solid var(--border);
    border-radius: 12px;
    background: var(--bg-white);
    color: var(--text);
    cursor: pointer;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%23073763' d='M1.41 0L6 4.58 10.59 0 12 1.41l-6 6-6-6z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 16px center;
    padding-right: 40px;
}

.select-input:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(7, 55, 99, 0.1);
}

/* 確認ボタン */
.confirm-btn {
    width: 100%;
    min-height: 56px;
    padding: 16px 24px;
    background: var(--accent);
    border: none;
    border-radius: 28px;
    font-size: 18px;
    font-weight: 700;
    color: var(--text-inverse);
    cursor: pointer;
    transition: all 0.2s;
    box-shadow: 0 4px 16px rgba(214, 124, 29, 0.3);
}

.confirm-btn:hover {
    filter: brightness(1.1);
}

.confirm-btn:active {
    transform: scale(0.98);
    box-shadow: 0 2px 8px rgba(214, 124, 29, 0.4);
}

/* ========================================
   戻るボタン
   ======================================== */
.back-btn {
    position: fixed;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    min-height: 48px;
    padding: 12px 24px;
    background: rgba(0, 0, 0, 0.7);
    border: none;
    border-radius: 24px;
    font-size: 16px;
    font-weight: 600;
    color: #fff;
    cursor: pointer;
    transition: all 0.2s;
    z-index: 100;
    /* iOS Safari の safe area 対策 */
    bottom: calc(20px + env(safe-area-inset-bottom));
}

.back-btn:active {
    background: rgba(0, 0, 0, 0.9);
}

.back-btn.hidden {
    display: none;
}

/* ========================================
   完了画面
   ======================================== */
.completion-message {
    text-align: center;
    padding: 40px 20px;
}

.completion-icon {
    font-size: 64px;
    margin-bottom: 24px;
}

.completion-title {
    font-size: 24px;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 16px;
}

.completion-text {
    font-size: 16px;
    color: var(--text-muted);
    line-height: 1.8;
}

.line-friend-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #06C755;
    color: white;
    padding: 12px 24px;
    border-radius: 8px;
    text-decoration: none;
    font-weight: 600;
    font-size: 16px;
    margin-top: 20px;
    transition: background 0.3s ease;
}

.line-friend-button:hover {
    background: #05b34a;
}

.line-friend-button:active {
    transform: scale(0.98);
}

/* ========================================
   ユーティリティ
   ======================================== */
.hidden {
    display: none !important;
}

.loading {
    opacity: 0.6;
    pointer-events: none;
}

/* iOS Safari の bounce スクロール対策 */
body.no-bounce {
    position: fixed;
    width: 100%;
}

/* ========================================
   Bookrun予約フォームコンテナ
   ======================================== */
.bookrun-container {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.8);
    z-index: 9998;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    overflow: auto;
    -webkit-overflow-scrolling: touch;
}

.bookrun-container.hidden {
    display: none;
}

.bookrun-container > div {
    width: 100%;
    max-width: 800px;
    background: white;
    border-radius: 12px;
    padding: 20px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
}

/* ========================================
   🔧 修正: 予約モーダルCSS削除（フォーム内で面談日時入力）
   ======================================== */
/* 削除：.scheduler-modal, .scheduler-overlay, .scheduler-content 等 */

/* ========================================
   複数選択UI改善（2列レイアウト + スクロール制御）
   ======================================== */

/* 複数選択コンテナ全体 */
.checkbox-container {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

/* 質問文エリア（sticky固定） */
.checkbox-question-sticky {
    position: sticky;
    top: 0;
    background: #ffffff;
    z-index: 10;
    padding: 12px 0;
    margin-bottom: 8px;
    border-bottom: 2px solid #e0e0e0;
}

.checkbox-question-text {
    font-size: 16px;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 4px;
}

.checkbox-question-desc {
    font-size: 13px;
    color: var(--text-muted);
    line-height: 1.5;
}

/* 選択肢リスト（2列 + 内部スクロール） */
.checkbox-options-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    max-height: 50vh;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 8px 4px;
    -webkit-overflow-scrolling: touch;
}

/* 選択肢カード */
.checkbox-option-card {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 12px;
    background: white;
    border: 2px solid #e0e0e0;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.3s ease;
    min-height: 60px;
}

.checkbox-option-card:hover {
    border-color: var(--brand-primary);
    background: #f5f7ff;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(102, 126, 234, 0.15);
}

.checkbox-option-card.selected {
    background: var(--brand-primary);
    color: white;
    border-color: var(--brand-primary);
}

.checkbox-option-card input[type="checkbox"] {
    margin-top: 2px;
    width: 18px;
    height: 18px;
    cursor: pointer;
    flex-shrink: 0;
}

.checkbox-option-card .checkbox-label-text {
    flex: 1;
    font-size: 14px;
    line-height: 1.4;
    word-wrap: break-word;
    overflow-wrap: break-word;
    word-break: break-word;
    hyphens: auto;
    white-space: normal;
    max-width: 100%;
}

.checkbox-option-card.selected .checkbox-label-text {
    color: white;
}

/* 確定ボタン（sticky固定 + iPhone safe-area対応） */
.checkbox-confirm-sticky {
    position: sticky;
    bottom: 0;
    background: #ffffff;
    padding: 12px 0;
    padding-bottom: calc(12px + env(safe-area-inset-bottom));
    border-top: 2px solid #e0e0e0;
    z-index: 10;
}

/* モバイル最適化（画面幅480px以下で2列維持） */
@media (max-width: 480px) {
    .checkbox-options-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        max-height: 45vh;
        gap: 8px;
    }
    
    .checkbox-option-card {
        padding: 8px;
        min-height: 50px;
        gap: 6px;
    }
    
    .checkbox-option-card .checkbox-label-text {
        font-size: 12px;
        line-height: 1.3;
    }
    
    .checkbox-option-card input[type="checkbox"] {
        width: 16px;
        height: 16px;
    }
}

/* 非常に小さい画面（360px以下）では1列に */
@media (max-width: 360px) {
    .checkbox-options-grid {
        grid-template-columns: 1fr;
        gap: 8px;
    }
    
    .checkbox-option-card {
        padding: 10px;
    }
    
    .checkbox-option-card .checkbox-label-text {
        font-size: 13px;
        line-height: 1.4;
    }
}

/* ========================================
   同意画面（1つのチェック + 2つのリンク）
   ======================================== */
.agreement-single-container {
    padding: 16px;
    background: #ffffff;
    border-radius: 12px;
}

.agreement-links {
    margin-bottom: 16px;
    padding: 12px;
    background: var(--bg);
    border-radius: 8px;
}

.agreement-link {
    color: var(--brand-primary);
    text-decoration: underline;
    padding: 8px 4px;
    display: inline-block;
    font-size: 15px;
    font-weight: 500;
    /* iOS タップ領域確保 */
    min-height: 44px;
    line-height: 1.6;
    transition: color 0.2s;
}

.agreement-link:hover {
    color: var(--accent);
}

.agreement-link:active {
    color: var(--accent);
    filter: brightness(0.9);
}

/* モバイル最適化 */
@media (max-width: 480px) {
    .agreement-link {
        display: block;
        padding: 12px 8px;
    }
}

/* ========================================
   進捗バー上部の訴求メッセージ
   ======================================== */
.progress-tagline {
    text-align: center;
    font-size: 16px;
    font-weight: 700;
    color: #7186a6;  /* ブルー */
    padding: 12px 16px;
    margin-bottom: 16px;
    background: #f1f3f4;  /* 薄い水色 */
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

/* ========================================
   同意画面（完全版：リンク+本文+チェック）
   ======================================== */
.agreement-full-container {
    padding: 16px;
    background: #ffffff;
    border-radius: 12px;
}

.agreement-body-text {
    font-size: 14px;
    line-height: 1.8;
    color: var(--text-primary);
    margin-bottom: 16px;
}

.agreement-body-text ul {
    padding-left: 20px;
    margin: 12px 0;
}

.agreement-body-text li {
    margin-bottom: 8px;
}

.agreement-check-wrapper {
    margin-top: 24px;
    padding: 16px;
    background: var(--bg);
    border-radius: 8px;
}

/* ========================================
   budget（単一選択）2列表示 + 設問sticky
   ======================================== */
.single-choice-sticky-container {
    display: flex;
    flex-direction: column;
}

.single-choice-question-sticky {
    position: sticky;
    top: 0;
    background: #ffffff;
    z-index: 10;
    padding: 12px 0;
    margin-bottom: 12px;
    border-bottom: 2px solid #e0e0e0;
}

.single-choice-question-text {
    font-size: 16px;
    font-weight: 600;
    color: var(--text-primary);
}

.single-choice-options-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    max-height: 50vh;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 8px 4px;
    -webkit-overflow-scrolling: touch;
}

.single-choice-option-btn {
    min-height: 48px;
    padding: 12px 16px;
    background: #fff;
    border: 2px solid #e0e0e0;
    border-radius: 12px;
    font-size: 15px;
    font-weight: 500;
    color: var(--text-primary);
    cursor: pointer;
    transition: all 0.2s;
    text-align: center;
}

.single-choice-option-btn:active {
    background: var(--brand-primary);
    border-color: var(--brand-primary);
    color: var(--text-inverse);
    transform: scale(0.98);
}

/* 小さい画面では1列に */
@media (max-width: 360px) {
    .single-choice-options-grid {
        grid-template-columns: 1fr;
    }
}

/* ========================================
   「その他」記入欄（折りたたみ式）
   ======================================== */
.concerns-other-textarea-wrapper {
    transition: all 0.3s ease;
    overflow: hidden;
}

.concerns-other-input {
    transition: border-color 0.2s ease;
}

.concerns-other-input:focus {
    outline: none;
    border-color: var(--brand-primary) !important;
    box-shadow: 0 0 0 3px rgba(7, 55, 99, 0.1);
}

/* 旧スタイルは削除済み：RENOSY風カードUIに統一 */

/* ========================================
   Campaign Card: RENOSY風ミニマル高級デザイン
   ======================================== */
.promo-card {
    background: transparent;
    border: none;
    border-radius: 0;
    padding: 6px 8px; /* 読みやすいサイズ */
    box-shadow: none;
    text-align: center;
    max-width: 100%;
    margin: 0 auto;
    width: 100%;
    display: flex; /* 横並び */
    flex-direction: column;
    align-items: center;
    gap: 4px;
}

.promo-card__top {
    margin-bottom: 0;
    text-align: center;
}

/* 控えめpill */
.promo-pill {
    display: inline-flex;
    align-items: center;
    padding: 3px 8px; /* 読みやすいサイズ */
    border-radius: 999px;
    font-size: 9px; /* 読みやすい */
    font-weight: 700;
    color: #073763;
    background: rgba(7, 55, 99, 0.08);
    border: 1px solid rgba(7, 55, 99, 0.12);
}

/* 見出し：太字だが控えめ */
.promo-title {
    margin: 0;
    font-size: 10px; /* 読みやすい */
    line-height: 1.2;
    font-weight: 800;
    color: #000;
    letter-spacing: 0;
    text-align: center;
    word-wrap: break-word;
    overflow-wrap: break-word;
    display: none; /* 見出しは非表示（1行化） */
}

/* 説明文：余白重視 */
.promo-lead {
    margin: 0;
    font-size: 9px; /* 読みやすい */
    line-height: 1.3;
    color: #000;
    font-weight: 400;
    text-align: center;
    word-wrap: break-word;
    overflow-wrap: break-word;
    max-width: 100%;
    display: flex; /* 横並び */
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 3px;
}

/* 金額：30,000に視線誘導 */
.promo-money {
    display: inline-flex;
    align-items: baseline;
    margin: 0 2px;
}

.promo-money__num {
    font-size: 14px; /* 強調 */
    font-weight: 900;
    color: #d67c1d;
    letter-spacing: 0.2px;
}

.promo-money__yen {
    font-size: 9px; /* 読みやすい */
    font-weight: 800;
    color: #d67c1d;
    margin-left: 1px;
}

/* テキストボタン風リンク（下線禁止） */
.promo-link {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    padding: 4px 8px; /* 読みやすいサイズ */
    border-radius: 6px;
    background: rgba(7, 55, 99, 0.06);
    color: #073763;
    text-decoration: none;
    font-weight: 800;
    font-size: 8px; /* 読みやすい */
    transition: all 0.2s ease;
}

.promo-link__arrow {
    font-weight: 900;
    font-size: 8px;
}

.promo-link:hover {
    background: rgba(7, 55, 99, 0.10);
}

.promo-link:active {
    transform: translateY(1px);
}

/* ========================================
   Video Card (RENOSY風：黒帯完全削除)
   ======================================== */
.mhh-video {
    padding: 0;
}

.mhh-video__frame {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    background: transparent; /* 白背景完全削除 */
    overflow: hidden;
    border-radius: 18px; /* カード角丸統一 */
}

/* YouTube iframe container */
.hero-video__player {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}

/* YouTube iframe (API生成): 中央配置 + 見切れ完全防止 */
.hero-video__player iframe {
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    width: 100% !important;
    height: 100% !important;
    border: 0 !important;
    
    /* 
     * 🎯 見切れ完全防止：
     * - translate(-50%, -50%): 中央配置（厳密）
     * - scale(1.0): 原寸表示（黒帯許容）
     * - レスポンシブ微調整はJS側で実施
     */
    transform: translate(-50%, -50%) scale(var(--yt-scale, 1.0)) translateY(var(--yt-shift-y, 0px));
    transform-origin: center center;
    object-fit: cover; /* Fallback */
}

/* Fallback overlay (autoplay失敗時のみ表示) */
.mhh-video__overlay {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.92);
    color: #073763;
    font-weight: 800;
    font-size: 16px;
    border: 0;
    cursor: pointer;
    transition: opacity 0.4s ease;
    z-index: 10; /* iframe(1)より上、muteBtn(20)より下 */
}

.mhh-video__overlay[hidden] {
    display: none;
}

/* ========================================
   YouTube Scale Variables: 見切れ完全防止
   ======================================== */
:root {
    --yt-scale: 1.0;      /* デフォルトは原寸（見切れゼロ、黒帯許容） */
    --yt-shift-y: 0px;    /* 必要なら微調整 */
}

/* タブレット: 微増 */
@media (min-width: 481px) and (max-width: 768px) {
    :root {
        --yt-scale: 1.02;
    }
}

/* iPhone / in-app browser: 控えめ拡大 */
@media (max-width: 480px) {
    :root {
        --yt-scale: 1.05;
        --yt-shift-y: 0px;
    }
}

/* 小型端末（SE等）: 原寸維持 */
@media (max-width: 360px) {
    :root {
        --yt-scale: 1.0;
    }
}

/* ========================================
   Mobile Tuning (iPhone Safari / Instagram)
   ======================================== */
@media (max-width: 480px) {
    .hero {
        padding: 4px 6px 4px;
    }
    
    .hero__inner {
        gap: 6px;
    }
    
    /* プロモカードのモバイル調整 */
    .promo-card {
        padding: 4px 6px;
        max-width: 100%;
        gap: 3px;
    }
    
    .promo-pill {
        font-size: 8px; /* 読みやすく */
        padding: 2px 6px;
    }
    
    .promo-title {
        font-size: 9px; /* 非表示でも定義 */
    }
    
    .promo-lead {
        font-size: 8px; /* 読みやすく */
    }
    
    .promo-money__num {
        font-size: 12px; /* 強調 */
    }
    
    .promo-money__yen {
        font-size: 8px;
    }
    
    .promo-link {
        font-size: 7px; /* 読みやすく */
        padding: 3px 6px;
    }
    
    .promo-link__arrow {
        font-size: 7px;
    }
}