@charset "UTF-8";

/* ==============================================
   Register Pages (特典引き換え系ページ共通)
=============================================== */

.page-register {
    padding-block: 24px clamp(62px, calc(62px + 18 * ((100vw - 375px) / 393)), 80px);
}

.page-register__inner {
}

.page-register__header {
    margin-bottom: 30px;
}

.page-register__title {
    font-weight: 900;
    line-height: 1.4;
}

.page-register__subtitle {
    font-weight: 900;
    line-height: 1.6;
}

.page-register__lead {
    color: var(--color-text-base);
    font-weight: 700;
}

/* ==============================================
   ステップインジケーター
=============================================== */
.step-indicator {
    display: flex;
    align-items: center;
    justify-content: center;
    max-width: 384px;
    margin-left: auto;
    margin-right: auto;
}

.step-indicator__item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    position: relative;
    z-index: 2;
    width: 64px;
}

.step-indicator__circle {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height:auto;
    border-radius: 50%;
    background-color: var(--color-white);
    border: 2px solid var(--color-primary);
    color: var(--color-primary);
    font-size:32px;
    aspect-ratio:1/1;
}

.step-indicator__item.is-active .step-indicator__circle {
    background-color: var(--color-primary);
    color: var(--color-white);
}

.step-indicator__text {
    font-size:12px;
    white-space: nowrap;
}

.step-indicator__item.is-active .step-indicator__text {
    font-weight: 900;
}

.step-indicator__line {
    flex: 1;
    height: 4px;
    background-color: var(--color-primary);
    margin-bottom: 28px;
}

/* ==============================================
   フォームパネル
=============================================== */
.register-panel {
    background-color: var(--color-white);
    border: 1px solid var(--color-border);
    border-radius: 8px;
    margin-left: auto;
    margin-right: auto;
    overflow: hidden;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}

.register-panel__header {
    background-color: var(--color-primary);
    color: var(--color-white);
    padding: 16px 24px;
}

.register-panel__body {
    padding: clamp(24px, calc(24px + 32 * ((100vw - 375px) / 393)), 56px);
}

/* --- ラジオボタンカード --- */
.register-radio-group {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.register-radio-card {
    display: block;
    cursor: pointer;
}

.register-radio-card__input {
    display: none;
}

.register-radio-card__box {
    display: flex;
    align-items: center;
    padding: clamp(16px, calc(16px + 8 * ((100vw - 375px) / 393)), 24px);
    border: 1px solid var(--color-border);
    border-radius: 4px;
    transition: all 0.2s ease;
}

.register-radio-card:hover .register-radio-card__box {
    border-color: var(--color-primary);
}

/* 選択時のカードスタイル */
.register-radio-card__input:checked + .register-radio-card__box {
    border-color: var(--color-primary);
    background-color: var(--color-feature-bg-light); /* 薄い青背景 */
}

/* 擬似ラジオボタンの丸 */
.register-radio-card__circle {
    flex-shrink: 0;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    border: 2px solid var(--color-border);
    margin-right: 8px;
    background-color: var(--color-white);
    transition: all 0.2s ease;
    box-sizing: border-box;
}

/* 選択時の丸のアニメーション（青い枠線が太くなって中が白く残る表現） */
.register-radio-card__input:checked + .register-radio-card__box .register-radio-card__circle {
    border: 7px solid var(--color-primary);
}

.register-radio-card__content {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.color-text-muted {
    color: var(--color-text-muted);
}

/* --- アクションボタン --- */
.register-btn {
    width: 100%;
    max-width: 360px;
    padding: 16px;
    border-radius: 4px;
    transition: all 0.3s;
}

/* 初期状態（未選択・disabled）のデザイン */
[class*="register-btn"].is-disabled {
    background-color: #8CAbFF; /* デザインカンプの薄い青色 */
    color: var(--color-white);
    pointer-events: none;
}

/* アクティブ時（選択・disabled解除）のデザイン */
[class*="register-btn"].is-active {
    background-color: var(--color-accent);
    color: var(--color-white);
    pointer-events: auto;
    cursor: pointer;
}

.register-btn.is-active:hover {
    background-color: var(--color-accent-hover);
}

/* --- 注意事項 --- */
.register-notes {
    background-color: var(--color-feature-bg-light);
    padding: 24px;
}

.register-notes__title-wrapper {
    text-align: center;
    margin-bottom:16px;
    padding: 0 0 12px;
    border-bottom: 1px solid var(--color-primary);
}

.register-notes__title {
    margin: 0;
}

.register-notes__text span {
    color: var(--color-primary);
    font-weight: 700;
}

.register-notes__list {
}

.register-alt-link {
    margin-top:32px;
    padding-top:32px;
    border-top:1px solid var(--color-border);
}

/* ==============================================
   STEP 2: 書籍認証
=============================================== */

/* トランプのマーク色 */
.color-red { color: #E60012 !important; }
.color-black { color: #111111 !important; }

/* クイズリスト領域 */
.register-quiz-list {
    border: 1px solid #E5E7EB;
}

.register-quiz-item {
    padding: 24px;
    border-bottom: 1px solid #E5E7EB;
}
.register-quiz-item:nth-child(odd) {
    background:#F2F3F6
}
.register-quiz-item__options {
    display: flex;
    justify-content: center;
    gap: 16px;
}

.register-mark-card {
    display: block;
    cursor: pointer;
    flex: 1;
    max-width: 140px;
}

.register-mark-card__input {
    display: none;
}

.register-mark-card__box {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    background-color: var(--color-white);
    border: 2px solid var(--color-border);
    border-radius: 4px;
    transition: all 0.2s ease;
}

.register-mark-card:hover .register-mark-card__box {
    border-color: var(--color-primary);
}

.register-mark-card__input:checked + .register-mark-card__box {
    border-color: var(--color-primary);
    background-color: var(--color-feature-bg-light);
}

.register-mark-card__input:checked + .register-mark-card__box .register-radio-card__circle {
    border: 6px solid var(--color-primary);
}

.register-mark-card__icon {
    line-height: 1;
}

/* 戻る・進むボタンのグループ */
.register-action-group {
    display: flex;
    gap: 16px;
    justify-content: center;
}

.register-action-group > * {
    flex: 1;
    max-width: 340px;
    padding: 16px;
}

.register-btn-outline {
    background-color: var(--color-white);
    color: var(--color-accent);
    border: 2px solid var(--color-accent);
}
.register-btn-outline:hover {
    background-color: var(--color-accent-bg);
}

/* エラーメッセージ */
.register-error-msg {
    background-color: var(--color-bg-error);
    border: 1px solid var(--color-text-error);
    color: var(--color-text-error);
    padding: 24px;
    border-radius: 4px;
}

/* サクセス（ローディング）画面 */
.register-success-view {
    padding: clamp(60px, calc(60px + 60 * ((100vw - 375px) / 393)), 120px) 20px;
}

.register-success-view__title {
    color: #4CAF50; /* Figma画像に近い成功の緑色 */
}

/* ドットローディングのアニメーション */
.register-success-view__loader {
    display: flex;
    justify-content: center;
    gap: 12px;
}

.register-success-view__loader .dot {
    width: 16px;
    height: 16px;
    background-color: #388E3C; /* 濃い緑 */
    border-radius: 50%;
    animation: loadingDots 1.4s infinite ease-in-out both;
}

.register-success-view__loader .dot:nth-child(1) { animation-delay: -0.32s; }
.register-success-view__loader .dot:nth-child(2) { animation-delay: -0.16s; }

@keyframes loadingDots {
    0%, 80%, 100% { transform: scale(0); opacity: 0.3; }
    40% { transform: scale(1); opacity: 1; }
}

@media screen and (max-width: 1024px) {
    .register-action-group {
        flex-direction: column-reverse;
    }
    .register-action-group > * {
        max-width: 100%;
    }
    .register-quiz-item__options {
        flex-wrap: wrap;
        gap: 16px;
    }
    .register-mark-card {
        flex:none;
        width:calc((100% - 16px) / 2);
        max-width:none;
    }
    .register-mark-card__box {
        padding-inline: 4px;
    }
    .register-radio-card__circle {
        margin-right: 8px;
    }
}

/* ==============================================
   Subscribe Pages (サブスク申込系ページ共通)
=============================================== */
/* --- レイアウト（2カラム） --- */
.subscribe-layout {
    display: flex;
    gap: 40px;
    align-items: flex-start;
    margin-inline: auto;
}
.subscribe-layout__sidebar {
    width: 360px;
    flex-shrink: 0;
}
.subscribe-layout__sidebar-title {
    font-size: clamp(24px, calc(24px + 6 * ((100vw - 375px) / 393)), 30px);
    font-weight: 900;
    color: var(--color-primary);
    margin-bottom: 16px;
}
.subscribe-layout__main {
    flex: 1;
    padding-left: 40px;
    min-width: 0;
    border-left: 1px solid var(--color-border);
}
.subscribe-layout__main-title {
    font-size: clamp(24px, calc(24px + 6 * ((100vw - 375px) / 393)), 30px);
    font-weight: 900;
    color: var(--color-primary);
    margin-bottom: 16px;
}

/* --- プラン詳細カード --- */
.plan-detail-card {
    background-color: var(--color-white);
    border-radius: 4px;
}
.plan-detail-card__header {
    background-color: var(--color-primary);
    color: var(--color-white);
    padding: 24px clamp(16px, calc(16px + 8 * ((100vw - 375px) / 393)), 24px);
    text-align: center;
}
.plan-detail-card__header-title {
    font-size: 26px;
    font-weight: 900;
}
.plan-detail-card__header-sub {
    font-size: 16px;
    font-weight: 700;
}
.plan-detail-card__body {
    padding: 24px clamp(16px, calc(16px + 8 * ((100vw - 375px) / 393)), 24px);
}
.plan-detail-card__section-title {
    font-size: clamp(18px, calc(18px + 2 * ((100vw - 375px) / 393)), 20px);
    font-weight: 700;
    color: var(--color-primary);
    margin-bottom: 8px;
}

/* 注文内容（完了画面用） */
.plan-detail-card__order-info {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 24px;
}
.plan-detail-card__order-title {
    font-size: 24px;
    font-weight: 900;
    color: var(--color-primary);
}
.plan-detail-card__order-plan {
    font-size: clamp(24px, calc(24px + 2 * ((100vw - 375px) / 393)), 26px);
    font-weight: 700;
    text-align: right;
}
.plan-detail-card__order-sub {
    font-size: 18px;
    font-weight: 700;
    color: var(--color-text-base);
    text-align: right;
}

.plan-detail-card__list {
    background-color: var(--color-feature-bg-light);
    padding: 16px;
    border-radius: 4px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-bottom: 24px;
}
.plan-detail-card__item {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 16px;
    font-weight: 500;
}
.plan-detail-card__item .material-symbols-outlined {
    color: var(--color-primary);
    font-size: 24px;
}
.plan-detail-card__price-wrap {
    border-top: 1px solid var(--color-border);
    border-bottom: 1px solid var(--color-border);
    padding-block: 24px;
    margin-bottom: 24px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}
.plan-detail-card__price-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.plan-detail-card__label {
    font-size: clamp(16px, calc(16px + 2 * ((100vw - 375px) / 393)), 18px);
    font-weight: 700;
    color: var(--color-primary);
}
.plan-detail-card__value {
    font-size: clamp(22px, calc(22px + 2 * ((100vw - 375px) / 393)), 24px);
    font-weight: 700;
}
.plan-detail-card__total {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 24px;
}
.plan-detail-card__total-label {
    font-size: clamp(16px, calc(16px + 2 * ((100vw - 375px) / 393)), 18px);
    font-weight: 700;
    color: var(--color-primary);
    line-height: 1.2;
}
.plan-detail-card__total-value {
    font-size: clamp(28px, calc(28px + 8 * ((100vw - 375px) / 393)), 36px);
    font-weight: 900;
}
.plan-detail-card__auto-renew {
    display: flex;
    flex-direction: column;
    gap: 4px;
    background-color: var(--color-corporate-bg);
    padding: 16px;
    border-radius: 4px;
}
.plan-detail-card__auto-renew-header {
    display: flex;
    align-items: center;
    gap: 4px;
}
.plan-detail-card__auto-renew-header .material-symbols-outlined {
    font-size: 32px;
}
.plan-detail-card__auto-renew-title {
    font-size: 14px;
    font-weight: 700;
    color: var(--color-primary);
}
.plan-detail-card__auto-renew-text {
    font-size: 14px;
    color: var(--color-text-base);
}

/* --- フォームエリア --- */
.subscribe-form-section {
    background-color: var(--color-white);
    border-radius: 4px;
    padding: 24px clamp(16px, calc(16px + 8 * ((100vw - 375px) / 393)), 24px);
    margin-bottom: 24px;
}
.subscribe-form-header {
    display: flex;
    align-items: center;
    gap: 4px;
    color: var(--color-primary);
    margin-bottom: 24px;
}
.subscribe-form-title {
    font-size: clamp(20px, calc(20px + 4 * ((100vw - 375px) / 393)), 24px);
    font-weight: 700;
    line-height: 1.4;
}
.subscribe-form-desc {
    font-size: 16px;
    color: var(--color-text-base);
    margin-bottom: 24px;
}
.subscribe-form-body {
    display: flex;
    flex-direction: column;
    gap: 24px; /* 各入力項目の余白を制御 */
}
.subscribe-form-group {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.subscribe-form-label {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 16px;
    font-weight: 700;
    color: var(--color-primary);
}
.subscribe-form-note {
    font-size: 14px;
    color: var(--color-text-base);
}
.subscribe-input {
    width: 100%;
    padding: 16px;
    border: 2px solid var(--color-border);
    border-radius: 4px;
    font-size: 16px;
    font-weight: 500;
    color: var(--color-text-base);
    outline: none;
    transition: border-color 0.2s;
}
.subscribe-input:focus {
    border-color: var(--color-primary);
}
.subscribe-input::placeholder {
    color: var(--color-border);
}
.subscribe-form-row {
    display: flex;
    gap: 16px;
}
.subscribe-form-row > * {
    flex: 1;
}

/* 同意チェックボックス */
.subscribe-consent {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: 24px;
}
.subscribe-consent-label {
    display: flex;
    align-items: center;
    gap: 16px;
    padding-block: 16px;
    cursor: pointer;
    font-size: 16px;
    font-weight: 500;
}
.subscribe-consent-link {
    display: inline-flex;
    align-items: center;
    color: var(--color-link);
    text-decoration: underline;
}
.subscribe-checkbox {
    width: 20px;
    height: 20px;
    cursor: pointer;
    accent-color: var(--color-accent);
}

/* 決済ボタンエリア */
.subscribe-submit-area {
    text-align: center;
}
.subscribe-submit-btn {
    display: flex;
    gap:5px;
    max-width: 400px;
    width: 100%;
    margin-inline:auto;
    padding: 16px;
    font-size: 16px;
    font-weight: 700;
    margin-bottom: 8px;
}
.subscribe-submit-note {
    font-size: 14px;
    color: var(--color-text-base);
}
.spinner-border.hidden {
    display: none;
}

/* --- 完了画面：ヒーロー＆ステップ --- */
.subscribe-complete-hero {
    text-align: center;
    margin-bottom: clamp(24px, calc(24px + 16 * ((100vw - 375px) / 393)), 40px);
}
.subscribe-complete-title {
    font-size: clamp(28px, calc(28px + 12 * ((100vw - 375px) / 393)), 40px);
    font-weight: 900;
    color: #22C55E; /* green-500 */
    margin-bottom: 8px;
}
.subscribe-complete-subtitle {
    font-size: 18px;
    font-weight: 700;
    color: var(--color-text-base);
}
.subscribe-step-section {
    margin-bottom: clamp(48px, calc(48px + 16 * ((100vw - 375px) / 393)), 64px);
}
.subscribe-step-section-title {
    font-size: clamp(24px, calc(24px + 8 * ((100vw - 375px) / 393)), 32px);
    font-weight: 900;
    color: var(--color-primary);
    text-align: center;
    margin-bottom: 24px;
}
.subscribe-step-flow {
    display: flex;
    flex-direction: column;
}
.subscribe-step-item {
    display: flex;
    border: 1px solid var(--color-primary);
    border-radius: 4px;
}
.subscribe-step-item__left {
    background-color: var(--color-primary);
    color: var(--color-white);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 4px;
    width: clamp(64px, calc(64px + 16 * ((100vw - 375px) / 393)), 80px);
    flex-shrink: 0;
}
.subscribe-step-item__step {
    font-family: 'Oswald', sans-serif;
    font-size: 18px;
    line-height: 1;
}
.subscribe-step-item__num {
    font-family: 'Oswald', sans-serif;
    font-size: 32px;
    line-height: 1;
}
.subscribe-step-item__right {
    padding: 16px clamp(16px, calc(16px + 8 * ((100vw - 375px) / 393)), 24px);
    flex: 1;
}
.subscribe-step-item__title {
    font-size: clamp(18px, calc(18px + 2 * ((100vw - 375px) / 393)), 20px);
    font-weight: 700;
    color: var(--color-primary);
    margin-bottom: 8px;
}
.subscribe-step-item__text {
    font-size: 14px;
    color: var(--color-text-base);
}
.subscribe-step-arrow {
    text-align: center;
}

/* --- 完了画面：サポートボックス --- */
.subscribe-support {
    background-color: #E2E8F0; /* slate-200 */
    border-radius: 4px;
    padding: clamp(24px, calc(24px + 8 * ((100vw - 375px) / 393)), 32px);
    text-align: center;
}
.subscribe-support__title {
    font-size: clamp(24px, calc(24px + 8 * ((100vw - 375px) / 393)), 32px);
    font-weight: 900;
    color: var(--color-primary);
    margin-bottom: 8px;
}
.subscribe-support__text {
    font-size: 16px;
    color: var(--color-text-base);
    margin-bottom: 8px;
}

@media screen and (max-width: 1279px) {
}

/* --- モバイル版 (max-width: 1024px) の調整 --- */
@media screen and (max-width: 1024px) {
    .subscribe-layout {
        flex-direction: column;
    }
    .subscribe-layout__sidebar {
        width: 100%;
    }
    .subscribe-layout__main {
        width: 100%;
        padding-top:40px;
        padding-left: 0;
        border-top:1px solid var(--color-border);
        border-left: none;
    }
    .subscribe-form-row {
        flex-direction: column;
        gap: 24px;
    }
    .subscribe-layout__sidebar-title {
        text-align: center;
    }
    .plan-detail-card__header {
        text-align: left;
    }
    .plan-detail-card__order-info {
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        align-items: center;
    }
}

/* ==============================================
   追加: サブスク申込 - 特典適用ステート
=============================================== */
.color-success {
    color: #4CAF50;
}

.plan-detail-card__note {
    font-size: 16px;
    font-weight: 500;
    color: var(--color-text-base);
    text-align: right;
    margin-bottom: 24px;
}

.plan-detail-card__benefit-alert {
    background-color: #F0FDF4; /* green-50 */
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.plan-detail-card__benefit-title {
    display: flex;
    align-items: center;
    gap: 4px;
    color: #4CAF50;
    font-size: 14px;
    font-weight: 700;
}

.plan-detail-card__benefit-text {
    font-size: 14px;
    color: var(--color-text-base);
}

/* ==============================================
   追加: サブスク申込 - エラーステート
=============================================== */
.subscribe-global-error {
    background-color: var(--color-bg-error); /* rose-100 */
    border: 2px solid var(--color-text-error); /* orange-600 */
    color: var(--color-text-error);
    font-size: 16px;
    font-weight: 700;
    text-align: center;
    padding: 24px;
    border-radius: 4px;
    margin-bottom: 40px;
}

.subscribe-input.is-error {
    background-color: var(--color-bg-error);
    border-color: var(--color-text-error);
    color: var(--color-text-base);
}

.subscribe-error-text {
    display: flex;
    align-items: center;
    gap: 4px;
    color: var(--color-text-error);
    font-size: 16px;
    font-weight: 700;
}

.subscribe-error-text .material-symbols-outlined {
}

.subscribe-consent__item {
    display: flex;
    flex-direction: column;
    align-items: center;
}

#status-details.hidden {
    display: none;
}