/* ============================================================
   予約フォーム - スタイルシート
   ============================================================ */

/* --- LINE Seed JP (=フヤセルブランドフォント・SIL OFL) ---
   G1 タイマー(日付/時刻/eyebrow/数字セル)に限定使用。本体UIは既存システムフォント維持 */
@font-face {
    font-family: 'LINESeedJP';
    src: url('fonts/LINESeedJP_OTF_Bd.woff2') format('woff2');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

/* --- 変数定義 --- */
:root {
    --c-slate-50: #f8fafc;
    --c-slate-100: #f1f5f9;
    --c-slate-200: #e2e8f0;
    --c-slate-300: #cbd5e1;
    --c-slate-400: #94a3b8;
    --c-slate-500: #64748b;
    --c-slate-600: #475569;
    --c-slate-700: #334155;
    --c-slate-800: #1e293b;
    --c-red-500: #ef4444;
    --c-blue-500: #3b82f6;
    --c-pink-300: #f9a8d4;
    --c-pink-500: #ec4899;
    --c-amber-500: #f59e0b;
    --c-amber-600: #d97706;
    --c-green-100: #dcfce3;
    --c-green-500: #22c55e;
    --c-line-green: #06C755;
    --c-line-green-dark: #05a847;
    --c-cal-circle: #38bdf8;
    --c-brand: #CC0000;
    --c-brand-dark: #A30000;
    --c-brand-light: rgba(204, 0, 0, 0.08);
}

/* --- リセット --- */
*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    -webkit-tap-highlight-color: transparent;
}

button:focus {
    outline: none;
}

html {
    scroll-behavior: smooth;
    font-size: 16px;
}

body {
    font-family: 'Hiragino Kaku Gothic ProN', 'Hiragino Sans', 'Noto Sans JP', 'Yu Gothic', 'Meiryo', sans-serif;
    color: var(--c-slate-800);
    background-color: #fff;
    display: flex;
    justify-content: center;
    -webkit-font-smoothing: antialiased;
}

/* --- レイアウト --- */
.app-container {
    width: 100%;
    max-width: 500px;
    background-color: #fff;
    min-height: 100vh;
    position: relative;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.15);
}

/* --- ヘッダー --- */
.header {
    position: sticky;
    top: 0;
    z-index: 50;
    background-color: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--c-slate-200);
}

.header-inner {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 20px;
}

.header-logo {
    height: 24px;
    width: auto;
}

.header-title {
    font-weight: 700;
    font-size: 0.875rem;
    color: var(--c-slate-500);
}

/* --- ステップインジケーター --- */
.stepper {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 12px 24px 14px;
    border-top: 1px solid var(--c-slate-100);
}

.stepper-item {
    display: flex;
    align-items: center;
    gap: 6px;
}

.stepper-capsule {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid var(--c-slate-300);
    background: #fff;
    color: var(--c-slate-400);
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
}

.stepper-num {
    font-size: 0.6875rem;
    font-weight: 700;
    line-height: 1;
}

.stepper-check {
    display: none;
    position: absolute;
}

.stepper-label {
    font-size: 0.6875rem;
    font-weight: 500;
    color: var(--c-slate-400);
    transition: all 0.3s;
}

/* 現在のステップ */
.stepper-item.is-active .stepper-capsule {
    background: var(--c-brand);
    border-color: var(--c-brand);
    color: #fff;
    box-shadow: 0 0 0 4px var(--c-brand-light);
}

.stepper-item.is-active .stepper-label {
    color: var(--c-brand);
    font-weight: 700;
}

/* 完了したステップ */
.stepper-item.is-done .stepper-capsule {
    background: var(--c-green-500);
    border-color: var(--c-green-500);
    color: #fff;
    box-shadow: none;
    animation: none;
}

.stepper-item.is-done .stepper-num {
    display: none;
}

.stepper-item.is-done .stepper-check {
    display: block;
    animation: iconPop 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
}

.stepper-item.is-done .stepper-label {
    color: var(--c-green-500);
    font-weight: 700;
}

/* 接続線 */
.stepper-line {
    width: 40px;
    height: 2px;
    background: var(--c-slate-200);
    margin: 0 8px;
    border-radius: 1px;
    overflow: hidden;
}

.stepper-line-fill {
    width: 0%;
    height: 100%;
    background: var(--c-green-500);
    border-radius: 1px;
    transition: width 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

.stepper-line.is-filled .stepper-line-fill {
    width: 100%;
}

/* --- メインコンテンツ --- */
main {
    padding-bottom: 128px;
}

.step-section {
    padding: 32px 20px;
    border-bottom: 12px solid var(--c-slate-50);
    scroll-margin-top: 5rem;
}

.section-lead {
    margin-bottom: 16px;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
}

.section-lead-title {
    font-size: 1.125rem;
    font-weight: 700;
    margin-bottom: 0;
}

/* --- 選び方タブ (RSV-PICK-1043) --- */
.picker-tabs {
    display: flex;
    gap: 4px;
    background: var(--c-slate-100);
    border-radius: 10px;
    padding: 4px;
    margin-bottom: 12px;
}
.picker-tab {
    flex: 1;
    padding: 9px 8px;
    background: transparent;
    border: none;
    border-radius: 8px;
    font-size: 0.82rem;
    font-weight: 700;
    color: var(--c-slate-600);
    cursor: pointer;
    font-family: inherit;
    transition: background 0.15s, color 0.15s;
}
.picker-tab:hover:not(.is-active) {
    color: var(--c-slate-700);
}
.picker-tab.is-active {
    background: #fff;
    color: var(--c-slate-800);
    box-shadow: 0 1px 3px rgba(0,0,0,0.08);
}
.picker-pane[hidden] { display: none; }

/* 時間帯チップ (RSV-PICK-1044: 朝/昼/夕の絞り込み・複数選択トグル)
   赤系は警告と区別がつかないため、選択中=緑+✓マークで「これを選んでます」を直感表現 */
.time-bucket-chips {
    display: flex;
    gap: 6px;
    margin-bottom: 12px;
}
.time-chip {
    flex: 1;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1px;
    padding: 10px 4px 8px;
    background: #fff;
    border: 1.5px solid var(--c-slate-200);
    border-radius: 10px;
    cursor: pointer;
    font-family: inherit;
    transition: border-color 0.15s, background 0.15s, color 0.15s;
    color: var(--c-slate-400);
}
.time-chip:hover {
    border-color: var(--c-slate-300);
}
.time-chip.is-active {
    background: #f0fdf4;
    border-color: #16a34a;
    color: #14532d;
}
/* 選択中マーク (✓) */
.time-chip::before {
    content: '';
    position: absolute;
    top: 4px;
    right: 6px;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: var(--c-slate-200);
    transition: background 0.15s;
}
.time-chip.is-active::before {
    background: #16a34a;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'><polyline points='20 6 9 17 4 12'/></svg>");
    background-size: 10px 10px;
    background-position: center;
    background-repeat: no-repeat;
}
.time-chip-label {
    font-size: 0.95rem;
    font-weight: 700;
}
.time-chip-range {
    font-size: 0.7rem;
    font-weight: 500;
    opacity: 0.85;
}

/* 「空き枠から選ぶ」縦リスト (RSV-PICK-1043) */
.next-avail-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-bottom: 12px;
}
.next-avail-empty {
    padding: 32px 16px;
    text-align: center;
    color: var(--c-slate-500);
    font-size: 0.875rem;
}
.next-avail-loading {
    padding: 24px 16px;
    text-align: center;
    color: var(--c-slate-500);
    font-size: 0.875rem;
}
.next-avail-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    background: #fff;
    border: 1px solid var(--c-slate-200);
    border-radius: 10px;
    cursor: pointer;
    transition: border-color 0.15s, box-shadow 0.15s;
    font-family: inherit;
    text-align: left;
    width: 100%;
}
.next-avail-row:hover {
    border-color: var(--c-brand);
    box-shadow: 0 0 0 1px var(--c-brand);
}
.next-avail-date {
    flex: 1;
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--c-slate-800);
}
.next-avail-status {
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--c-cal-circle);
}
.next-avail-arrow {
    color: var(--c-slate-400);
    font-size: 1.1rem;
    line-height: 1;
}
.next-avail-more {
    width: 100%;
    padding: 12px;
    background: #fff;
    border: 1px dashed var(--c-slate-300);
    border-radius: 10px;
    color: var(--c-slate-600);
    font-size: 0.85rem;
    font-weight: 700;
    cursor: pointer;
    font-family: inherit;
    transition: background 0.15s;
}
.next-avail-more:hover {
    background: var(--c-slate-50);
}

/* --- 日付グリッド (RSV-PICK-1042: 5列×2行=10セル/9日+カレンダー) --- */
.date-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 6px;
    margin-bottom: 16px;
}

.date-btn {
    padding: 8px 0;
    border-radius: 10px;
    aspect-ratio: 4 / 5;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border: 2px solid var(--c-slate-200);
    background-color: #fff;
    color: var(--c-slate-700);
    cursor: pointer;
    transition: all 0.2s;
    font-family: inherit;
}

.date-btn.is-active,
.date-btn.is-active:focus {
    background-color: var(--c-brand);
    color: #fff;
    border-color: var(--c-brand);
    outline: none;
}

.date-label {
    font-size: 0.65rem;
    font-weight: 700;
    margin-bottom: 4px;
}

.date-number {
    font-size: 1.25rem;
    font-weight: 700;
    line-height: 1;
}

.text-red { color: var(--c-red-500); }
.text-blue { color: var(--c-blue-500); }
.is-active .text-red,
.is-active .text-blue { color: var(--c-slate-300); }

/* RSV-PICK-1042 改訂(2026-04-25): 「明日」強調を全廃。意味階層がお客様(初見)に伝わらず混乱の原因。
   選択中(赤背景)を唯一の強調とし、祝日は「(祝)」ラベル+数字赤のみで表現。 */
.date-btn.is-holiday:not(.is-active) .date-number {
    color: var(--c-red-500);
}

/* RSV-PICK-1045 撤廃(2026-04-25): セル内マーク3つは「凡例なしで意味不明」のため削除。
   お客様(初見)は記号で「察する」ことを強要されるUIに困惑する。
   既存の○/△/× (全体マーク)で十分。 */

/* --- カレンダーボタン (RSV-PICK-1042: 5列セル比率に揃える) --- */
.calendar-wrapper {
    position: relative;
    width: 100%;
    aspect-ratio: 4 / 5;
}

.calendar-btn {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    padding: 8px 0;
    border-radius: 10px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border: 2px dashed var(--c-slate-300);
    background-color: var(--c-slate-50);
    color: var(--c-slate-500);
    transition: all 0.2s;
    cursor: pointer;
    font-family: inherit;
}

.calendar-btn.is-active,
.calendar-btn.is-open {
    background-color: var(--c-slate-800);
    color: #fff;
    border-color: var(--c-slate-800);
    border-style: solid;
}

.calendar-icon-wrap {
    margin-bottom: 4px;
    opacity: 0.5;
}

.calendar-btn.is-active .calendar-icon-wrap,
.calendar-btn.is-open .calendar-icon-wrap {
    opacity: 1;
}

/* --- カスタムカレンダー --- */
.custom-calendar {
    display: none;
    border: 1px solid var(--c-slate-200);
    border-radius: 12px;
    background: #fff;
    margin-bottom: 32px;
    overflow: hidden;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05);
    animation: slideDown 0.3s ease-out forwards;
    transform-origin: top;
}

.custom-calendar.is-show {
    display: block;
}

@keyframes slideDown {
    from { opacity: 0; transform: scaleY(0.95); }
    to { opacity: 1; transform: scaleY(1); }
}

.cal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px;
    background-color: var(--c-slate-50);
    border-bottom: 1px solid var(--c-slate-200);
}

.cal-nav-btn {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: 1px solid var(--c-slate-300);
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: var(--c-slate-600);
}

.cal-title {
    font-weight: 700;
    font-size: 1rem;
    color: var(--c-slate-800);
}

.cal-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    background-color: var(--c-slate-200);
    gap: 1px;
    border-bottom: 1px solid var(--c-slate-200);
}

.cal-day-name {
    background-color: #fff;
    text-align: center;
    padding: 12px 0;
    font-size: 0.65rem;
    font-weight: 700;
    color: var(--c-slate-600);
}

.cal-day-name.sun { color: var(--c-red-500); }
.cal-day-name.sat { color: var(--c-blue-500); }

.cal-cell {
    background-color: #fff;
    aspect-ratio: 1 / 1.1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s;
    position: relative;
}

.cal-cell.is-empty {
    background-color: var(--c-slate-50);
    cursor: default;
}

.cal-cell.is-disabled {
    background-color: #fafafa;
    cursor: not-allowed;
}

.cal-cell.is-disabled .cal-date-num {
    color: var(--c-slate-400);
}

.cal-cell.is-selected {
    background-color: var(--c-brand);
    color: #fff;
}

.cal-date-num {
    font-size: 0.875rem;
    font-weight: 700;
    margin-bottom: 4px;
    color: var(--c-slate-700);
}

.cal-cell.sun:not(.is-disabled) .cal-date-num { color: var(--c-red-500); }
.cal-cell.sat:not(.is-disabled) .cal-date-num { color: var(--c-blue-500); }
.cal-cell.is-selected .cal-date-num { color: #fff; }

.cal-mark {
    font-size: 1.25rem;
    font-weight: 400;
    line-height: 1;
    margin-bottom: 2px;
}

.cal-mark.circle { color: var(--c-cal-circle); font-size: 1.125rem; }
.cal-mark.cross { color: var(--c-slate-300); font-size: 1.5rem; font-weight: 300; }
.cal-mark.triangle { color: var(--c-amber-500); font-size: 1.125rem; }

.cal-remain {
    font-size: 0.65rem;
    color: var(--c-amber-500);
    font-weight: 700;
    margin-top: -2px;
}

.cal-cell.is-selected .cal-remain { color: rgba(255, 255, 255, 0.8); }
.cal-cell.is-selected .cal-mark { color: #fff; }

.cal-legend {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    padding: 12px;
    background: #fff;
    font-size: 0.75rem;
    color: var(--c-slate-600);
}

.legend-item {
    display: flex;
    align-items: center;
    gap: 4px;
    font-weight: 500;
}

.legend-mark { font-size: 1.125rem; }
.legend-mark.circle { color: var(--c-cal-circle); }
.legend-mark.triangle { color: var(--c-amber-500); }
.legend-mark.cross { color: var(--c-slate-400); font-weight: 300; }

/* --- 時間帯選択 --- */
.time-section {
    transition: opacity 0.3s;
    margin-top: 16px;
}

.time-section.is-disabled {
    opacity: 0.5;
    pointer-events: none;
}

.time-section-title {
    font-size: 1.125rem;
    font-weight: 700;
    text-align: center;
    margin-bottom: 20px;
    color: var(--c-slate-800);
}

.time-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px 8px;
}

.time-col-header {
    text-align: center;
    font-size: 0.9375rem;
    font-weight: 700;
    color: var(--c-slate-600);
    margin-bottom: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
}

.time-btn-col {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.time-btn {
    padding: 10px 4px;
    border-radius: 8px;
    border: 1px solid var(--c-slate-200);
    background-color: var(--c-slate-100);
    color: var(--c-slate-800);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
    cursor: pointer;
    transition: all 0.2s;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    font-family: inherit;
}

.time-btn:hover:not(:disabled) {
    background-color: var(--c-slate-200);
}

.time-btn.is-active,
.time-btn.is-active:focus {
    background-color: var(--c-brand);
    color: #fff;
    border-color: var(--c-brand);
    outline: none;
}

.time-btn:focus-visible {
    outline: 2px solid var(--c-brand);
    outline-offset: 2px;
}

.time-btn:disabled {
    background-color: transparent;
    border-color: transparent;
    color: var(--c-slate-300);
    box-shadow: none;
    cursor: not-allowed;
}

.time-val {
    font-size: 1.125rem;
    font-weight: 700;
    line-height: 1;
    letter-spacing: 0.025em;
}

.time-status {
    font-size: 0.7rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: 2px;
}

.time-status.is-circle { color: var(--c-cal-circle); }
.time-status.is-triangle { color: var(--c-amber-500); }
.time-status.is-cross { color: var(--c-slate-400); }

.time-btn:disabled .time-val,
.time-btn:disabled .time-status { color: var(--c-slate-300); }
.time-btn.is-active .time-val,
.time-btn.is-active .time-status { color: #fff; }

/* --- 選択結果表示 --- */
.selected-display {
    display: none;
    margin-top: 32px;
    border-top: 1px solid var(--c-slate-200);
    padding: 40px 20px 32px;
    text-align: center;
    animation: fadeIn 0.4s ease-out forwards;
    scroll-margin-top: 106px; /* ヘッダー+ステッパー高さ分 */
}

.selected-display.is-show {
    display: block;
}

.selected-label {
    font-size: 0.8125rem;
    color: var(--c-slate-500);
    margin-bottom: 8px;
    letter-spacing: 0.1em;
}

.selected-value {
    font-size: 1.375rem;
    font-weight: 700;
    color: var(--c-slate-800);
    letter-spacing: -0.025em;
    line-height: 1.4;
}

.change-datetime-btn {
    display: inline-block;
    margin-top: 16px;
    background: none;
    border: 1px solid var(--c-slate-300);
    color: var(--c-slate-500);
    font-size: 0.75rem;
    font-weight: 500;
    padding: 6px 16px;
    border-radius: 9999px;
    cursor: pointer;
    font-family: inherit;
    transition: all 0.2s;
}

.change-datetime-btn:hover {
    border-color: var(--c-slate-500);
    color: var(--c-slate-700);
}

/* --- フローティングラベル入力フィールド --- */
.floating-group {
    position: relative;
    margin-bottom: 24px;
}

.input-wrapper {
    position: relative;
}

.floating-input {
    width: 100%;
    padding: 28px 16px 12px 48px;
    background-color: var(--c-slate-50);
    border: 1.5px solid var(--c-slate-200);
    border-radius: 10px;
    font-size: 1.125rem;
    font-weight: 700;
    color: var(--c-slate-800);
    outline: none;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    font-family: inherit;
    min-height: 60px;
}

.floating-label {
    position: absolute;
    left: 48px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 1rem;
    font-weight: 700;
    color: var(--c-slate-500);
    pointer-events: none;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    display: flex;
    align-items: center;
}

.floating-placeholder {
    position: absolute;
    left: 48px;
    bottom: 12px;
    transform: translateX(10px);
    font-size: 1.125rem;
    font-weight: 700;
    color: var(--c-slate-300);
    pointer-events: none;
    opacity: 0;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    transition-delay: 0.1s;
    line-height: 1;
}

.floating-input:focus ~ .floating-label,
.floating-input.has-value ~ .floating-label {
    top: 16px;
    transform: translateY(-50%) scale(0.72);
    transform-origin: left top;
    color: var(--c-slate-700);
}

.floating-input:focus:not(.has-value) ~ .floating-placeholder {
    opacity: 1;
    transform: translateX(0);
}

.floating-input:focus {
    background-color: #fff;
    border-color: var(--c-brand);
    box-shadow: 0 0 0 3px var(--c-brand-light);
}

.input-icon {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    padding-left: 16px;
    display: flex;
    align-items: center;
    color: var(--c-slate-400);
    pointer-events: none;
    transition: color 0.3s;
}

.input-icon svg {
    width: 20px;
    height: 20px;
}

.input-icon-check {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    padding-left: 16px;
    display: none;
    align-items: center;
    color: var(--c-green-500);
    pointer-events: none;
}

.input-icon-check svg {
    width: 22px;
    height: 22px;
}

.floating-input:focus ~ .input-icon {
    color: var(--c-brand);
}

.badge-required {
    display: inline-block;
    border: 1px solid var(--c-pink-300);
    color: var(--c-pink-500);
    font-size: 0.75rem;
    padding: 2px 8px;
    border-radius: 4px;
    font-weight: 700;
    margin-left: 8px;
}

/* --- 年齢入力の「歳」サフィックス (REV-LIST-002改) --- */
.age-unit {
    position: absolute;
    right: 52px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--c-slate-500);
    pointer-events: none;
}

.badge-optional {
    display: inline-block;
    background-color: var(--c-slate-200);
    color: var(--c-slate-600);
    font-size: 0.75rem;
    padding: 2px 8px;
    border-radius: 4px;
    font-weight: 700;
    margin-left: 8px;
}

/* --- バリデーション状態 --- */
.floating-group.is-success .floating-input {
    border-color: var(--c-green-500);
    background-color: #fff;
}

.floating-group.is-success .input-icon {
    display: none;
}

.floating-group.is-success .input-icon-check {
    display: flex;
}

@keyframes shakeError {
    0%, 100% { transform: translateX(0); }
    20%, 60% { transform: translateX(-4px); }
    40%, 80% { transform: translateX(4px); }
}

.floating-group.is-error .floating-input {
    border-color: var(--c-red-500);
    background-color: #fff;
    animation: shakeError 0.4s ease-in-out;
}

.floating-group.is-error .floating-label {
    color: var(--c-red-500);
}

.floating-group.is-error .input-icon {
    color: var(--c-red-500);
}

@keyframes iconPop {
    0% { transform: scale(0.5) rotate(-45deg); opacity: 0; }
    50% { transform: scale(1.2) rotate(10deg); }
    100% { transform: scale(1) rotate(0deg); opacity: 1; }
}

.floating-group.is-success .input-icon-check svg {
    animation: iconPop 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
}

/* --- エラーメッセージ --- */
.error-message {
    display: none;
    color: var(--c-red-500);
    font-size: 0.8125rem;
    font-weight: 500;
    margin-top: 8px;
    padding-left: 48px;
}

.floating-group.is-error .error-message {
    display: block;
}

/* --- メールサジェスト --- */
.email-suggests {
    display: flex;
    gap: 8px;
    margin-top: 8px;
    overflow-x: auto;
    scrollbar-width: none;
    opacity: 0;
    transform: translateY(-10px);
    transition: all 0.3s;
    pointer-events: none;
    position: absolute;
    z-index: 10;
    width: 100%;
}

.email-suggests::-webkit-scrollbar {
    display: none;
}

.email-suggests.is-show {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
    position: relative;
}

.suggest-chip {
    padding: 6px 14px;
    border-radius: 9999px;
    background-color: var(--c-slate-800);
    color: #fff;
    font-size: 0.75rem;
    font-weight: 700;
    border: none;
    cursor: pointer;
    white-space: nowrap;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
    transition: transform 0.1s;
    font-family: inherit;
}

.suggest-chip:active {
    transform: scale(0.95);
}

/* --- 確認画面 --- */
.confirm-screen {
    display: none;
    padding: 32px 20px 128px;
    animation: fadeIn 0.4s ease-out forwards;
}

.confirm-screen.is-show {
    display: block;
}

.confirm-content {
    max-width: 500px;
    margin: 0 auto;
}

.confirm-title {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--c-slate-800);
    text-align: center;
    margin-bottom: 4px;
}

.confirm-subtitle {
    font-size: 0.8125rem;
    color: var(--c-slate-500);
    text-align: center;
    margin-bottom: 28px;
}

/* 日時カード */
.confirm-datetime-card {
    display: flex;
    align-items: center;
    gap: 12px;
    background-color: var(--c-brand);
    color: #fff;
    border-radius: 12px;
    padding: 16px 20px;
    margin-bottom: 16px;
}

.confirm-datetime-icon {
    flex-shrink: 0;
    opacity: 0.5;
}

.confirm-datetime-text {
    flex: 1;
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: -0.01em;
}

.confirm-edit-link {
    flex-shrink: 0;
    background: none;
    border: 1px solid rgba(255, 255, 255, 0.3);
    color: rgba(255, 255, 255, 0.8);
    font-size: 0.6875rem;
    font-weight: 500;
    padding: 4px 12px;
    border-radius: 9999px;
    cursor: pointer;
    font-family: inherit;
    transition: all 0.2s;
}

.confirm-edit-link:hover {
    background: rgba(255, 255, 255, 0.1);
    color: #fff;
}

/* お客様情報カード */
.confirm-info-card {
    background: #fff;
    border: 1px solid var(--c-slate-200);
    border-radius: 12px;
    overflow: hidden;
    margin-bottom: 20px;
}

.confirm-info-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 20px;
    background: var(--c-slate-50);
    border-bottom: 1px solid var(--c-slate-200);
    font-size: 0.8125rem;
    font-weight: 700;
    color: var(--c-slate-600);
}

.confirm-info-header .confirm-edit-link {
    border-color: var(--c-slate-300);
    color: var(--c-slate-500);
}

.confirm-info-header .confirm-edit-link:hover {
    border-color: var(--c-slate-500);
    color: var(--c-slate-700);
    background: var(--c-slate-100);
}

.confirm-info-row {
    display: flex;
    padding: 14px 20px;
    border-bottom: 1px solid var(--c-slate-100);
}

.confirm-info-row:last-child {
    border-bottom: none;
}

.confirm-info-label {
    width: 100px;
    flex-shrink: 0;
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--c-slate-500);
    padding-top: 2px;
}

.confirm-info-value {
    flex: 1;
    font-size: 0.875rem;
    font-weight: 700;
    color: var(--c-slate-800);
    word-break: break-all;
}

/* 注意事項 */
.confirm-notice {
    background: var(--c-slate-50);
    border-radius: 12px;
    padding: 16px 20px;
    margin-bottom: 24px;
}

.confirm-notice-title {
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--c-slate-600);
    margin-bottom: 10px;
}

.confirm-notice-list {
    list-style: none;
    padding: 0;
}

.confirm-notice-list li {
    font-size: 0.75rem;
    color: var(--c-slate-500);
    line-height: 1.6;
    padding-left: 14px;
    position: relative;
}

.confirm-notice-list li::before {
    content: '・';
    position: absolute;
    left: 0;
}

/* プライバシーポリシー同意 */
.confirm-agree {
    margin-bottom: 24px;
}

.confirm-agree-label {
    display: flex;
    align-items: center;
    gap: 14px;
    font-size: 1rem;
    font-weight: 500;
    color: var(--c-slate-700);
    cursor: pointer;
    user-select: none;
    background: var(--c-slate-50);
    border: 2px solid var(--c-slate-200);
    border-radius: 12px;
    padding: 18px 20px;
    transition: all 0.2s;
}

.confirm-agree-label:active {
    transform: scale(0.98);
}

.confirm-agree-checkbox {
    display: none;
}

.confirm-agree-checkbox:checked ~ span {
    color: var(--c-slate-800);
    font-weight: 700;
}

.confirm-agree-check-icon {
    width: 32px;
    height: 32px;
    border: 2px solid var(--c-slate-300);
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    flex-shrink: 0;
}

.confirm-agree-checkbox:checked ~ .confirm-agree-check-icon {
    background: var(--c-line-green);
    border-color: var(--c-line-green);
    animation: iconPop 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.confirm-agree-checkbox:checked ~ .confirm-agree-check-icon::after {
    content: '';
    width: 8px;
    height: 14px;
    border: solid #fff;
    border-width: 0 3px 3px 0;
    transform: rotate(45deg);
    margin-top: -3px;
}

.confirm-agree-link {
    background: none;
    border: none;
    color: var(--c-blue-500);
    text-decoration: underline;
    text-underline-offset: 2px;
    font-size: inherit;
    font-family: inherit;
    cursor: pointer;
    padding: 0;
}

/* プライバシーポリシーを読むボタン（同意チェックとは独立） */
.confirm-agree-policy-btn {
    display: block;
    width: 100%;
    margin-top: 10px;
    padding: 12px 16px;
    background: #fff;
    border: 1.5px solid var(--c-slate-200);
    border-radius: 10px;
    color: var(--c-slate-600);
    font-size: 0.9rem;
    font-weight: 500;
    font-family: inherit;
    cursor: pointer;
    text-align: center;
    transition: all 0.2s;
}

.confirm-agree-policy-btn:hover {
    background: var(--c-slate-50);
    border-color: var(--c-slate-300);
    color: var(--c-slate-700);
}

.confirm-agree-policy-btn:active {
    transform: scale(0.99);
}

/* 修正するボタン */
.confirm-back-btn {
    margin-top: 12px;
    padding: 18px;
    font-size: 1rem;
    border-radius: 12px;
}

/* 確定ボタン */
.confirm-submit-btn {
    width: 100%;
    position: relative;
    overflow: hidden;
    background-color: var(--c-slate-300);
    color: #fff;
    border-radius: 12px;
    padding: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    border: none;
    font-size: 1.125rem;
    font-weight: 700;
    cursor: not-allowed;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    font-family: inherit;
}

.confirm-submit-btn.is-enabled {
    background-color: var(--c-line-green);
    cursor: pointer;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
}

.confirm-submit-btn.is-enabled:hover {
    background-color: var(--c-line-green-dark);
    transform: translateY(-2px);
}

.confirm-submit-btn.is-enabled:active {
    transform: translateY(0) scale(0.98);
}

.confirm-submit-btn .shimmer-effect {
    display: none;
}

.confirm-submit-btn.is-enabled .shimmer-effect {
    display: block;
}

/* --- 送信ボタン --- */
.submit-wrapper {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    display: flex;
    justify-content: center;
    padding: 16px 16px 32px;
    background: linear-gradient(to top, rgba(255, 255, 255, 1), rgba(255, 255, 255, 0.9), transparent);
    pointer-events: none;
    transform: translateY(100px);
    opacity: 0;
    transition: all 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
    z-index: 40;
}

.submit-wrapper.is-show {
    transform: translateY(0);
    opacity: 1;
    pointer-events: auto;
}

.submit-inner {
    width: 100%;
    max-width: 460px;
}

.submit-btn {
    width: 100%;
    position: relative;
    overflow: hidden;
    background-color: var(--c-line-green);
    color: #fff;
    border-radius: 12px;
    padding: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    border: none;
    font-size: 1.125rem;
    font-weight: 700;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
    cursor: pointer;
    transition: all 0.2s;
    font-family: inherit;
}

.submit-btn:hover {
    background-color: var(--c-line-green-dark);
    transform: translateY(-2px);
}

.submit-btn:active {
    transform: translateY(0) scale(0.98);
}

.submit-btn:disabled {
    opacity: 0.8;
    pointer-events: none;
}

.submit-text {
    position: relative;
    z-index: 10;
    letter-spacing: 0.025em;
}

.submit-icon {
    position: relative;
    z-index: 10;
    opacity: 0.7;
    transition: transform 0.2s;
    display: flex;
}

.submit-btn:hover .submit-icon {
    transform: translateX(4px);
}

.shimmer-effect {
    position: absolute;
    inset: 0;
    transform: translateX(-100%);
    background: linear-gradient(to right, transparent, rgba(255, 255, 255, 0.2), transparent);
    animation: shimmer 1.5s infinite;
}

@keyframes shimmer {
    100% { transform: translateX(100%); }
}

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

/* --- プライバシーポリシーモーダル --- */
.modal-overlay {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 100;
    background: rgba(0, 0, 0, 0.5);
    align-items: flex-end;
    justify-content: center;
    animation: fadeIn 0.2s ease-out;
}

.modal-overlay.is-show {
    display: flex;
}

.modal-container {
    width: 100%;
    max-width: 500px;
    max-height: 85vh;
    background: #fff;
    border-radius: 16px 16px 0 0;
    display: flex;
    flex-direction: column;
    animation: slideUp 0.3s ease-out;
}

@keyframes slideUp {
    from { transform: translateY(100%); }
    to { transform: translateY(0); }
}

.modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    border-bottom: 1px solid var(--c-slate-200);
    flex-shrink: 0;
}

.modal-title {
    font-size: 1rem;
    font-weight: 700;
    color: var(--c-slate-800);
}

.modal-close {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: none;
    background: var(--c-slate-100);
    color: var(--c-slate-600);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background 0.2s;
}

.modal-close:hover {
    background: var(--c-slate-200);
}

.modal-body {
    flex: 1;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    padding: 20px;
}

.modal-footer {
    padding: 14px 20px 20px;
    border-top: 1px solid var(--c-slate-200);
    background: #fff;
    flex-shrink: 0;
}

.privacy-close-btn-bottom {
    width: 100%;
    padding: 14px 20px;
    font-size: 1rem;
    font-weight: 600;
    color: var(--c-slate-700);
    background: var(--c-slate-100);
    border: 1px solid var(--c-slate-200);
    border-radius: 10px;
    cursor: pointer;
    transition: background 0.2s;
    font-family: inherit;
}

.privacy-close-btn-bottom:hover,
.privacy-close-btn-bottom:active {
    background: var(--c-slate-200);
}

.privacy-content {
    color: var(--c-slate-700);
    font-size: 0.875rem;
    line-height: 1.75;
}

.privacy-intro {
    margin: 0 0 20px;
    font-size: 0.875rem;
    line-height: 1.8;
}

.privacy-section {
    margin-bottom: 20px;
}

.privacy-section h3 {
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--c-slate-800);
    margin: 0 0 8px;
    padding: 0 0 6px;
    border-bottom: 1px solid var(--c-slate-200);
}

.privacy-section p {
    margin: 0 0 8px;
}

.privacy-section ul {
    margin: 4px 0 8px;
    padding-left: 22px;
}

.privacy-section li {
    margin-bottom: 4px;
}

.privacy-contact {
    background: var(--c-slate-50, #f8fafc);
    padding: 12px 14px;
    border-radius: 8px;
    margin-top: 10px;
}

.privacy-contact p {
    margin: 0 0 4px;
    font-size: 0.85rem;
}

/* --- 完了画面 --- */
.success-screen {
    display: none;
    min-height: 100vh;
    background-color: #fff;
    position: absolute;
    inset: 0;
    z-index: 50;
    padding: 0;
}

.success-screen.is-show {
    display: block;
}

.success-content {
    width: 100%;
    max-width: 500px;
    margin: 0 auto;
    padding: 24px 20px 48px;
    text-align: center;
}

.success-logo-wrap {
    margin-bottom: 24px;
}

.success-logo {
    height: 28px;
    width: auto;
}

.success-icon-wrap {
    width: 72px;
    height: 72px;
    background-color: var(--c-green-100);
    color: var(--c-green-500);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 16px;
}

.success-title {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--c-slate-800);
    margin-bottom: 20px;
}

.success-receipt {
    background-color: var(--c-brand);
    border-radius: 12px;
    padding: 22px 20px;
    margin-bottom: 20px;
    text-align: center;
    color: #fff;
}

.success-receipt-label {
    font-size: 0.9375rem;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.95);
    margin-bottom: 8px;
    letter-spacing: 0.1em;
}

.success-receipt-number {
    font-size: 2.75rem;
    font-weight: 700;
    letter-spacing: 0.2em;
    line-height: 1;
}

/* ステップ説明文（赤枠外） */
.success-step-text {
    font-size: 1rem;
    font-weight: 600;
    color: #111;
    line-height: 1.55;
    margin: 0 0 10px;
    text-align: center;
}

/* 番号を控える ボタン */
.success-copy-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    padding: 14px 16px;
    background: #fff;
    color: #111;
    border: 2px solid #111;
    border-radius: 10px;
    font-size: 1.0625rem;
    font-weight: 700;
    cursor: pointer;
    transition: background-color 0.15s, color 0.15s;
    margin-bottom: 6px;
    font-family: inherit;
}

.success-copy-btn:hover {
    background: #111;
    color: #fff;
}

.success-copy-btn.is-copied {
    background: #065f46;
    border-color: #065f46;
    color: #fff;
}

.success-copy-hint {
    font-size: 0.875rem;
    color: #6b7280;
    text-align: center;
    margin: 0 0 20px;
}

.success-line-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    padding: 16px;
    background-color: var(--c-line-green);
    color: #fff;
    border-radius: 12px;
    border: none;
    font-size: 1.0625rem;
    font-weight: 700;
    text-decoration: none;
    cursor: pointer;
    font-family: inherit;
    transition: all 0.2s;
    box-shadow: 0 4px 12px rgba(6, 199, 85, 0.3);
    margin-bottom: 24px;
}

.success-line-btn:hover {
    background-color: var(--c-line-green-dark);
    transform: translateY(-2px);
}

.success-line-btn:active {
    transform: translateY(0) scale(0.98);
}

.success-line-logo {
    flex-shrink: 0;
}

.success-summary {
    background: #fff;
    border: 1px solid var(--c-slate-200);
    border-radius: 12px;
    overflow: hidden;
    margin-bottom: 20px;
    text-align: left;
}

.success-summary-header {
    padding: 12px 16px;
    background: var(--c-slate-50);
    border-bottom: 1px solid var(--c-slate-200);
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--c-slate-500);
    letter-spacing: 0.05em;
}

.success-summary-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 16px;
    border-bottom: 1px solid var(--c-slate-100);
    color: var(--c-slate-400);
}

.success-summary-row:last-child {
    border-bottom: none;
}

.success-summary-value {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--c-slate-700);
}

.success-footer {
    padding-top: 4px;
}

.success-footer-text {
    font-size: 0.75rem;
    color: var(--c-slate-400);
    line-height: 1.8;
}

.btn-secondary {
    width: 100%;
    padding: 16px;
    background-color: var(--c-slate-100);
    color: var(--c-slate-700);
    font-weight: 700;
    border-radius: 12px;
    border: none;
    cursor: pointer;
    transition: background-color 0.2s;
    font-size: 1rem;
    font-family: inherit;
}

.btn-secondary:hover {
    background-color: var(--c-slate-200);
}

/* HEAR-8004: 予約完了画面の事前ヒアリング誘導ボタン */
.success-hearing-btn {
    display: block;
    width: 100%;
    margin: 16px 0 4px;
    padding: 18px 20px;
    background: linear-gradient(135deg, #fff5f5 0%, #ffe8e8 100%);
    border: 2px solid #CC0000;
    border-radius: 14px;
    text-decoration: none;
    color: #2d0000;
    transition: transform .12s ease, box-shadow .12s ease;
    text-align: left;
    box-shadow: 0 4px 14px rgba(204,0,0,.12);
}
.success-hearing-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 8px 20px rgba(204,0,0,.18);
}
.success-hearing-btn .hearing-cta-title {
    font-size: 1rem;
    font-weight: 700;
    color: #CC0000;
    margin-bottom: 6px;
}
.success-hearing-btn .hearing-cta-desc {
    font-size: 0.82rem;
    line-height: 1.6;
    color: #4a2323;
    margin-bottom: 10px;
}
.success-hearing-btn .hearing-cta-arrow {
    font-size: 0.9rem;
    font-weight: 700;
    color: #CC0000;
    text-align: right;
}

/* ===== 予約失敗エラーモーダル(大きく・自動消去なし) ===== */
.rsv-error-modal-bg {
    position: fixed; inset: 0; background: rgba(0,0,0,.5);
    display: flex; align-items: center; justify-content: center;
    z-index: 9999; opacity: 0; transition: opacity .2s;
    padding: 20px;
}
.rsv-error-modal-bg.is-show { opacity: 1; }
.rsv-error-modal {
    background: #fff; border-radius: 16px;
    max-width: 460px; width: 100%;
    padding: 32px 24px 24px;
    box-shadow: 0 20px 50px rgba(0,0,0,.3);
    position: relative;
    border-top: 6px solid #CC0000;
    animation: rsvErrorSlide .25s ease-out;
}
@keyframes rsvErrorSlide {
    from { transform: translateY(20px); opacity: 0; }
    to { transform: translateY(0); opacity: 1; }
}
.rsv-error-close {
    position: absolute; top: 8px; right: 8px;
    width: 36px; height: 36px;
    border: none; background: transparent;
    font-size: 24px; color: #888;
    cursor: pointer; border-radius: 50%;
    line-height: 1;
}
.rsv-error-close:hover { background: #f3f4f6; color: #333; }
.rsv-error-icon {
    width: 56px; height: 56px;
    background: #CC0000; color: #fff;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 32px; font-weight: 700;
    margin: 0 auto 16px;
}
.rsv-error-title {
    text-align: center; font-size: 1.15rem;
    color: #333; margin: 0 0 20px;
    font-weight: 700;
}
.rsv-error-section {
    background: #fef2f2;
    border-left: 4px solid #CC0000;
    padding: 12px 14px; margin-bottom: 12px;
    border-radius: 4px;
}
.rsv-error-label {
    font-size: 0.78rem; font-weight: 700;
    color: #CC0000; margin-bottom: 4px;
    letter-spacing: 0.05em;
}
.rsv-error-text {
    font-size: 0.95rem; line-height: 1.6;
    color: #333;
}
.rsv-error-btn-primary {
    display: block; width: 100%; margin: 18px 0 12px;
    padding: 14px;
    background: #CC0000; color: #fff;
    border: none; border-radius: 8px;
    font-size: 1rem; font-weight: 700;
    cursor: pointer;
}
.rsv-error-btn-primary:hover { background: #A30000; }
.rsv-error-contact {
    text-align: center; font-size: 0.82rem;
    color: #555; line-height: 1.5;
}
.rsv-error-contact a {
    color: #CC0000; font-weight: 700;
    text-decoration: underline;
}

/* ============================================================
   Phase 4: 受付開始予告(scheduled状態)
   60代主体顧客向け = 大きく・はっきり・動く数字は最低限
   ============================================================ */

/* hidden属性をdisplay:flex等で上書きされないよう明示 */
.release-banner[hidden],
.release-update[hidden],
.notify-modal[hidden] {
    display: none !important;
}

/* 上部バナー(=既存LPの祝言トーンに揃えた・白 × 深紅 × 墨 × 米紙)
   reservation_form/ 配色語彙: #C80000 / #231815 / #F6F0D9 / #FFF */
.release-banner {
    position: relative;
    margin: 16px 16px 28px;
    padding: 28px 22px 24px;
    background: #ffffff;
    border: 1px solid rgba(35, 24, 21, 0.10);
    border-radius: 14px;
    box-shadow: 0 8px 24px rgba(35, 24, 21, 0.08), 0 1px 2px rgba(35, 24, 21, 0.04);
    color: #231815;
    text-align: center;
    overflow: hidden;
}
/* 深紅の細いトップアクセント (=既存LP冒頭の朱ラインと統一) */
.release-banner::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 3px;
    background: linear-gradient(90deg, transparent 0%, #C80000 20%, #C80000 80%, transparent 100%);
}

.release-banner-eyebrow {
    font-family: 'LINESeedJP', system-ui, sans-serif;
    font-size: 12px;
    font-weight: 700;
    color: #C80000;
    letter-spacing: 0.28em;
    margin-bottom: 20px;
}

/* 日付ブロック(=2段組・SVGロゴ化対応で line1/time は SVG画像も受け入れる) */
.release-banner-title {
    margin-bottom: 22px;
}
.release-banner-line1 {
    font-family: 'LINESeedJP', system-ui, sans-serif;
    font-size: 32px;
    font-weight: 700;
    color: #231815;
    letter-spacing: 0.03em;
    line-height: 1.15;
    font-feature-settings: "palt" 1;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 36px;
}
.release-banner-divider {
    width: 44px;
    height: 1px;
    background: rgba(200, 0, 0, 0.35);
    margin: 12px auto;
}
.release-banner-line2 {
    line-height: 1.3;
    display: flex;
    align-items: baseline;
    justify-content: center;
    gap: 8px;
}
.release-banner-time {
    font-family: 'LINESeedJP', system-ui, sans-serif;
    color: #C80000;
    font-size: 28px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.04em;
    display: inline-flex;
    align-items: center;
}
.release-banner-from {
    color: #5b4a45;
    font-size: 14px;
    font-weight: 500;
}
.release-banner-date { color: #231815; }

/* セグメント型カウントダウン (=4セル米紙カード+深紅top accent) */
.release-countdown {
    display: flex;
    justify-content: center;
    align-items: stretch;
    gap: 6px;
    margin: 0 auto;
    max-width: 340px;
}
.cd-cell {
    position: relative;
    flex: 1 1 0;
    background: #FFFBF2;
    border: 1px solid rgba(200, 0, 0, 0.28);
    border-radius: 8px;
    padding: 13px 4px 10px;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 6px rgba(35, 24, 21, 0.08);
    overflow: hidden;
}
.cd-cell::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 2px;
    background: #C80000;
}
.cd-num {
    display: block;
    font-family: 'LINESeedJP', system-ui, sans-serif;
    font-size: 32px;
    font-weight: 700;
    color: #231815;
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum" 1;
    letter-spacing: 0.02em;
    line-height: 1;
}
.cd-label {
    display: block;
    font-size: 11px;
    font-weight: 600;
    color: #6b5d58;
    letter-spacing: 0.06em;
    margin-top: 8px;
}
.cd-sep {
    color: rgba(200, 0, 0, 0.35);
    font-size: 18px;
    font-weight: 300;
    line-height: 1;
    align-self: center;
    padding-bottom: 14px;
    user-select: none;
    flex: 0 0 auto;
}
.release-countdown-srfallback { display: none; }
.release-notify-cta {
    width: 100%;
    background: #fff;
    color: #92400e;
    border: 2px solid #f59e0b;
    border-radius: 10px;
    padding: 14px 18px;
    font-size: 16px;
    font-weight: 700;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    transition: background 0.15s, transform 0.05s;
}
.release-notify-cta:hover {
    background: #fef3c7;
}
.release-notify-cta:active {
    transform: scale(0.98);
}

/* 解禁時の更新ボタン */
.release-update {
    margin: 16px;
    padding: 24px 22px;
    background: linear-gradient(135deg, #d1fae5 0%, #a7f3d0 100%);
    border: 2px solid #10b981;
    border-radius: 12px;
    text-align: center;
    box-shadow: 0 6px 18px rgba(16, 185, 129, 0.22);
}
.release-update-mark {
    width: 64px;
    height: 64px;
    background: #10b981;
    color: #fff;
    border-radius: 50%;
    margin: 0 auto 12px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.release-update-title {
    font-size: 22px;
    font-weight: 800;
    color: #065f46;
    margin-bottom: 14px;
}
.release-update-btn {
    width: 100%;
    min-height: 64px;
    background: #10b981;
    color: #fff;
    border: none;
    border-radius: 12px;
    font-size: 19px;
    font-weight: 800;
    cursor: pointer;
    box-shadow: 0 4px 12px rgba(16, 185, 129, 0.4);
    animation: release-update-pulse 1.4s ease-in-out infinite;
}
.release-update-btn:hover {
    background: #059669;
}
.release-update-btn:active {
    transform: scale(0.98);
}
@keyframes release-update-pulse {
    0%, 100% { box-shadow: 0 4px 12px rgba(16, 185, 129, 0.4); }
    50% { box-shadow: 0 4px 20px rgba(16, 185, 129, 0.7); }
}

/* 日付ボタン: scheduled状態 (=白カード+深紅細枠・既存LP配色・「まもなく」UX表示) */
.date-btn.is-scheduled {
    background: #ffffff !important;
    border: 1.5px solid #C80000 !important;
    box-shadow: 0 0 0 3px rgba(200, 0, 0, 0.08) !important;
    opacity: 1 !important;
    color: #231815 !important;
    position: relative;
    /* 「13」を上寄り+「受付待機中」と数字の間に余裕 */
    justify-content: flex-start;
    padding-top: 12px;
    padding-bottom: 22px;
}
.date-btn.is-scheduled .date-label,
.date-btn.is-scheduled .date-number {
    color: #231815 !important;
}
/* 「5月12日 12:00〜」赤文字ラベルは G1 タイマーで十分なので撤去
   (=各カード5回繰り返しで美しい正方形が崩れていた問題の解消) */
.date-avail.is-scheduled {
    display: none !important;
}
/* 「まもなく」UXラベル(=赤枠だけだと予約可能と誤読される問題の解消)
   控えめに10px・深紅・letter-spacing大で「待ち状態」を視覚化 */
.date-btn.is-scheduled::after {
    content: "受付待機中";
    position: absolute;
    bottom: 8px;
    left: 0;
    right: 0;
    text-align: center;
    font-family: 'LINESeedJP', system-ui, sans-serif;
    font-size: 10px;
    font-weight: 700;
    color: #C80000;
    letter-spacing: 0.14em;
    pointer-events: none;
}

/* カレンダーセル: scheduled状態 (=月間カレンダーも同配色) */
.cal-cell.is-scheduled {
    background: #ffffff;
    cursor: not-allowed;
    border: 1.5px solid #C80000;
    box-shadow: inset 0 0 0 1px rgba(200, 0, 0, 0.05);
    position: relative;
}
.cal-cell.is-scheduled .cal-date-num {
    color: #231815;
    font-weight: 700;
}
.cal-mark.scheduled {
    display: none;
}
.cal-cell.is-scheduled::after {
    content: "受付待機中";
    position: absolute;
    bottom: 2px;
    left: 0;
    right: 0;
    text-align: center;
    font-family: 'LINESeedJP', system-ui, sans-serif;
    font-size: 7px;
    font-weight: 700;
    color: #C80000;
    letter-spacing: 0.02em;
    pointer-events: none;
    white-space: nowrap;
}

/* 通知申込モーダル */
.notify-modal {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
}
.notify-modal[hidden] {
    display: none;
}
.notify-modal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(2px);
}
.notify-modal-card {
    position: relative;
    background: #fff;
    border-radius: 14px;
    padding: 28px 24px 24px;
    width: 100%;
    max-width: 460px;
    max-height: 90vh;
    overflow-y: auto;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.35);
}
.notify-modal-close {
    position: absolute;
    top: 12px;
    right: 12px;
    width: 36px;
    height: 36px;
    background: #f3f4f6;
    border: none;
    border-radius: 50%;
    cursor: pointer;
    color: #6b7280;
    display: flex;
    align-items: center;
    justify-content: center;
}
.notify-modal-close:hover {
    background: #e5e7eb;
    color: #1f2937;
}
.notify-modal-title {
    font-size: 22px;
    font-weight: 800;
    color: #111827;
    margin: 0 0 12px;
    padding-right: 36px;
}
.notify-modal-lead {
    font-size: 16px;
    color: #4b5563;
    line-height: 1.6;
    margin: 0 0 20px;
}
.notify-modal-lead #notifyModalDate {
    color: #b91c1c;
    font-weight: 700;
}
.notify-modal-field {
    margin-bottom: 16px;
}
.notify-modal-label {
    display: block;
    font-size: 14px;
    font-weight: 700;
    color: #374151;
    margin-bottom: 6px;
}
.notify-modal-input {
    width: 100%;
    padding: 12px 14px;
    font-size: 17px;
    border: 1.5px solid #d1d5db;
    border-radius: 8px;
    background: #fff;
    box-sizing: border-box;
}
.notify-modal-input:focus {
    border-color: #f59e0b;
    outline: 2px solid rgba(245, 158, 11, 0.2);
}
.notify-modal-submit {
    width: 100%;
    padding: 14px 18px;
    background: #f59e0b;
    color: #fff;
    border: none;
    border-radius: 10px;
    font-size: 17px;
    font-weight: 800;
    cursor: pointer;
    margin-top: 4px;
    transition: background 0.15s;
}
.notify-modal-submit:hover {
    background: #d97706;
}
.notify-modal-submit:disabled {
    background: #9ca3af;
    cursor: not-allowed;
}
.notify-modal-note {
    font-size: 13px;
    color: #6b7280;
    line-height: 1.6;
    margin-top: 12px;
    text-align: center;
}

/* スマホ調整 */
@media (max-width: 480px) {
    .release-banner { padding: 22px 14px 18px; margin: 12px; }
    .release-banner-eyebrow { font-size: 11px; letter-spacing: 0.20em; margin-bottom: 14px; }
    .release-banner-title { margin-bottom: 18px; }
    .release-banner-line1 { font-size: 26px; }
    .release-banner-divider { width: 32px; margin: 8px auto; }
    .release-banner-time { font-size: 21px; }
    .release-banner-from { font-size: 13px; }
    .release-countdown { gap: 4px; max-width: 100%; }
    .cd-cell { padding: 12px 2px 8px; }
    .cd-num { font-size: 28px; }
    .cd-label { font-size: 11px; letter-spacing: 0.04em; margin-top: 6px; }
    .cd-sep { font-size: 16px; padding-bottom: 12px; }
    .release-update-title { font-size: 19px; }
    .release-update-btn { font-size: 17px; min-height: 60px; }
    .notify-modal-title { font-size: 19px; }
}

/* ============================================================
   全日程不可時の代替メッセージ(Phase 4)
   ============================================================ */
.no-bookable-notice {
    margin: 16px;
    padding: 22px 24px;
    background: #f8fafc;
    border: 1.5px solid #cbd5e1;
    border-radius: 12px;
    display: flex;
    align-items: flex-start;
    gap: 16px;
}
.no-bookable-notice[hidden] { display: none !important; }
.no-bookable-icon {
    flex-shrink: 0;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: #94a3b8;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
}
.no-bookable-body { flex: 1; }
.no-bookable-title {
    font-size: 18px;
    font-weight: 800;
    color: #0f172a;
    margin-bottom: 8px;
    line-height: 1.4;
}
.no-bookable-sub {
    font-size: 15px;
    color: #475569;
    line-height: 1.7;
}
.no-bookable-sub b {
    color: #b91c1c;
    font-weight: 700;
}

/* stepper grey-out (step2/3 が無効化されたとき) */
.stepper-item.is-greyed .stepper-capsule {
    background: #f1f5f9 !important;
    color: #cbd5e1 !important;
    border-color: #e2e8f0 !important;
}
.stepper-item.is-greyed .stepper-label {
    color: #cbd5e1 !important;
}