/**
 * 統合ベースCSS - Survey System
 * 全テーマで共通の構造・レイアウト・アニメーション
 */

/* ===== カスタマイズ可能な変数（デフォルト値） ===== */
:root {
    /* === テーマカスタマイザー制御用基準値（ハードコード） === */
    /* 全テーマ共通の基準値 - テーマカスタマイザーのスライダー1.0の時の値 */
    --base-font-size: 16px;
    /* ベースフォントサイズ */
    --base-card-padding: 1.8rem;
    /* カード内余白の基準値 */
    --base-border-radius: 12px;
    /* 角丸サイズの基準値 */
    --base-line-height: 1.6;
    /* 行間の基準値 */
    --base-spacing: 1rem;
    /* 要素間余白の基準値 */
    --base-button-padding-y: 0.875rem;
    /* ボタン縦パディング基準値 */
    --base-button-padding-x: 1.75rem;
    /* ボタン横パディング基準値 */

    /* === ユーザーカスタマイズ可能なスケール変数 === */
    /* テーマカスタマイザーで制御される倍率（デフォルト1.0） */
    --font-size-scale: 1.0;
    --spacing-scale: 1.0;
    --card-padding-scale: 1.0;
    --border-radius-scale: 1.0;
    --button-size-scale: 1.0;
    --line-height-scale: 1.0;

    /* === 計算されたフォントサイズ（基準値 × スケール） === */
    --font-size-xs: calc(0.75 * var(--base-font-size) * var(--font-size-scale));
    /* 12px */
    --font-size-sm: calc(0.875 * var(--base-font-size) * var(--font-size-scale));
    /* 14px */
    --font-size-base: calc(var(--base-font-size) * var(--font-size-scale));
    /* 16px */
    --font-size-large: calc(1.125 * var(--base-font-size) * var(--font-size-scale));
    /* 18px */
    --font-size-xl: calc(1.25 * var(--base-font-size) * var(--font-size-scale));
    /* 20px */
    --font-size-2xl: calc(1.5 * var(--base-font-size) * var(--font-size-scale));
    /* 24px */
    --font-size-hero: calc(2 * var(--base-font-size) * var(--font-size-scale));
    /* 48px */

    /* === 計算された要素間余白（基準値 × スケール） === */
    --spacing-xs: calc(0.5 * var(--base-spacing) * var(--spacing-scale));
    --spacing-sm: calc(0.75 * var(--base-spacing) * var(--spacing-scale));
    --spacing-md: calc(var(--base-spacing) * var(--spacing-scale));
    --spacing-lg: calc(1.5 * var(--base-spacing) * var(--spacing-scale));
    --spacing-xl: calc(2 * var(--base-spacing) * var(--spacing-scale));
    --spacing-2xl: calc(2.5 * var(--base-spacing) * var(--spacing-scale));
    --spacing-3xl: calc(3 * var(--base-spacing) * var(--spacing-scale));
    --spacing-4xl: calc(4 * var(--base-spacing) * var(--spacing-scale));

    /* === 計算された角丸サイズ（基準値 × スケール） === */
    --border-radius-sm: calc(0.67 * var(--base-border-radius) * var(--border-radius-scale));
    /* 8px */
    --border-radius-md: calc(var(--base-border-radius) * var(--border-radius-scale));
    /* 12px */
    --border-radius-lg: calc(1.33 * var(--base-border-radius) * var(--border-radius-scale));
    /* 16px */
    --border-radius-xl: calc(1.67 * var(--base-border-radius) * var(--border-radius-scale));
    /* 20px */
    --border-radius-2xl: calc(2 * var(--base-border-radius) * var(--border-radius-scale));
    /* 24px */
    --border-radius-full: 50px;
    /* 固定値 */

    /* === 計算されたカード・ボタンサイズ === */
    --card-padding: calc(var(--base-card-padding) * var(--card-padding-scale));
    --card-margin: var(--spacing-lg);
    --button-padding-y: calc(var(--base-button-padding-y) * var(--button-size-scale) * var(--card-padding-scale));
    --button-padding-x: calc(var(--base-button-padding-x) * var(--button-size-scale) * var(--card-padding-scale));

    /* === 計算された行間（基準値 × スケール） === */
    --line-height-xs: calc(0.9 * var(--base-line-height) * var(--line-height-scale));
    --line-height-sm: calc(0.95 * var(--base-line-height) * var(--line-height-scale));
    --line-height-base: calc(var(--base-line-height) * var(--line-height-scale));
    --line-height-large: calc(1.05 * var(--base-line-height) * var(--line-height-scale));
    --line-height-xl: calc(1.1 * var(--base-line-height) * var(--line-height-scale));
    --line-height-2xl: calc(1.15 * var(--base-line-height) * var(--line-height-scale));
    --line-height-hero: calc(1.2 * var(--base-line-height) * var(--line-height-scale));

    /* === カード内余白（card-padding-scale依存） === */
    --form-padding-x: calc(1.5 * var(--base-spacing) * var(--card-padding-scale));
    --form-padding-profile: calc(1.2 * var(--base-spacing) * var(--card-padding-scale));
    --question-container-padding: calc(2.0 * var(--base-spacing) * var(--card-padding-scale));
    --question-block-padding: calc(2 * var(--base-spacing) * var(--card-padding-scale));
    --question-option-padding: calc(var(--base-spacing) * var(--card-padding-scale));
    --container-padding: calc(var(--base-spacing) * var(--card-padding-scale));
    --progress-padding: calc(1.5 * var(--base-spacing) * var(--card-padding-scale));
    --step-info-padding-y: calc(0.5 * var(--base-spacing) * var(--card-padding-scale));
    --step-info-padding-x: calc(0.75 * var(--base-spacing) * var(--card-padding-scale));
    --button-large-padding-y: calc(1.125 * var(--base-button-padding-y) * var(--button-size-scale) * var(--card-padding-scale));
    --button-large-padding-x: calc(2.5 * var(--base-button-padding-x) * var(--button-size-scale) * var(--card-padding-scale));

    /* === 要素間の余白（spacing-scale依存） === */
    --page-margin: calc(2 * var(--base-spacing) * var(--spacing-scale));
    --page-margin-small: calc(2.5 * var(--base-spacing) * var(--spacing-scale));
    --navigation-gap: calc(1.5 * var(--base-spacing) * var(--spacing-scale));
    --navigation-margin-top: calc(2.5 * var(--base-spacing) * var(--spacing-scale));
    --step-navigation-margin: calc(2 * var(--base-spacing) * var(--spacing-scale));
    --progress-gap: calc(2 * var(--base-spacing) * var(--spacing-scale));
    --progress-step-margin: calc(var(--base-spacing) * var(--spacing-scale));
    --question-container-margin: calc(2 * var(--base-spacing) * var(--spacing-scale));

    /* === 複合的なパディング・サイズ計算 === */
    /* 上記のカード内余白セクションで既に定義済み */

    /* === その他の基準値 === */
    --line-height-tight: calc(1.25 * var(--line-height-scale));
    --line-height-relaxed: calc(1.75 * var(--line-height-scale));

    /* === AI画像生成用カラーパレット === */
    --ai-palette-primary: var(--primary-color);
    --ai-palette-primary-dark: var(--primary-dark);
    --ai-palette-secondary: var(--secondary-color);
    --ai-palette-accent: var(--accent-color);
    --ai-palette-warm: var(--warning-color);
    --ai-palette-neutral: "var(--neutral-300)";

    /* === AI画像生成用テーマ情報 === */
    --ai-theme-name: "modern";
    --ai-theme-description: "Modern and stylish theme";
    --ai-color-scheme: "professional gradient";

    /* === 追加の実用的な変数 === */
    /* パディング専用変数（カード内余白として管理） */
    --padding-xs: calc(0.4 * var(--base-spacing) * var(--card-padding-scale));
    --padding-sm: calc(0.5 * var(--base-spacing) * var(--card-padding-scale));
    --padding-md: calc(var(--base-spacing) * var(--card-padding-scale));
    --padding-lg: calc(1.5 * var(--base-spacing) * var(--card-padding-scale));
    --padding-xl: calc(2 * var(--base-spacing) * var(--card-padding-scale));
    --padding-2xl: calc(2.5 * var(--base-spacing) * var(--card-padding-scale));
    --padding-3xl: calc(3 * var(--base-spacing) * var(--card-padding-scale));

    /* 高さ専用変数（要素間余白として管理） */
    --height-xs: calc(0.375 * var(--base-spacing) * var(--spacing-scale));
    --height-sm: calc(0.5 * var(--base-spacing) * var(--spacing-scale));
    --height-md: calc(0.75 * var(--base-spacing) * var(--spacing-scale));
    --height-lg: calc(var(--base-spacing) * var(--spacing-scale));
    --height-xl: calc(1.25 * var(--base-spacing) * var(--spacing-scale));
    --height-2xl: calc(1.5 * var(--base-spacing) * var(--spacing-scale));

    /* 最小高さ変数 */
    --min-height-sm: calc(2.75 * var(--base-spacing) * var(--button-size-scale));
    --min-height-md: calc(3.25 * var(--base-spacing) * var(--button-size-scale));
    --min-height-container: calc(15.625 * var(--base-spacing) * var(--spacing-scale));
    --min-height-container-lg: calc(18.75 * var(--base-spacing) * var(--spacing-scale));
    --min-height-profile: calc(12.5 * var(--base-spacing) * var(--card-padding-scale));
    --min-height-question: calc(15.625 * var(--base-spacing) * var(--spacing-scale));

    /* ギャップ・間隔変数（要素間余白として管理） */
    --gap-xs: calc(0.6 * var(--base-spacing) * var(--spacing-scale));
    --gap-sm: calc(0.75 * var(--base-spacing) * var(--spacing-scale));
    --gap-md: calc(var(--base-spacing) * var(--spacing-scale));
    --gap-lg: calc(1.5 * var(--base-spacing) * var(--spacing-scale));

    /* 複合padding変数（カード内余白として管理） */
    --button-padding: calc(var(--base-button-padding-y) * var(--button-size-scale) * var(--card-padding-scale)) calc(var(--base-button-padding-x) * var(--button-size-scale) * var(--card-padding-scale));
    --button-padding-large: calc(1.125 * var(--base-button-padding-y) * var(--button-size-scale) * var(--card-padding-scale)) calc(2.5 * var(--base-button-padding-x) * var(--button-size-scale) * var(--card-padding-scale));
    --button-padding-sm: calc(0.5 * var(--base-button-padding-y) * var(--button-size-scale) * var(--card-padding-scale)) calc(0.75 * var(--base-button-padding-x) * var(--button-size-scale) * var(--card-padding-scale));
    --button-padding-xs: calc(0.4 * var(--base-button-padding-y) * var(--button-size-scale) * var(--card-padding-scale)) calc(0.6 * var(--base-button-padding-x) * var(--button-size-scale) * var(--card-padding-scale));

    /* フォーム用複合padding（カード内余白として管理） */
    --form-padding: calc(var(--base-spacing) * var(--card-padding-scale)) calc(1.5 * var(--base-spacing) * var(--card-padding-scale));
    --form-padding-large: calc(1.2 * var(--base-spacing) * var(--card-padding-scale)) calc(1.5 * var(--base-spacing) * var(--card-padding-scale));
    --form-padding-profile: calc(var(--base-spacing) * var(--card-padding-scale)) calc(1.25 * var(--base-spacing) * var(--card-padding-scale));

    /* セクション用複合padding（カード内余白として管理） */
    --section-padding: var(--padding-lg) 0;
    --section-padding-large: var(--padding-xl) 0;

    /* 最小幅変数 */
    --min-width-button: calc(8.75 * var(--base-spacing) * var(--spacing-scale));
    --min-width-button-lg: calc(11.25 * var(--base-spacing) * var(--spacing-scale));
    --min-width-text: calc(3.75 * var(--base-spacing) * var(--spacing-scale));

    /* 最大幅変数 */
    --max-width-form-sm: calc(25 * var(--base-spacing) * var(--spacing-scale));
    --max-width-form-md: calc(37.5 * var(--base-spacing) * var(--spacing-scale));
    --max-width-mobile: calc(18.75 * var(--base-spacing) * var(--spacing-scale));

    /* 固定値（スケール適用しない） */
    --border-width-thin: 1px;
    --border-width-medium: 2px;
    --border-width-thick: 3px;
    --border-width-accent: 4px;
    --border-radius-small: 4px;
    /* 小さな角丸は固定 */
    --progress-height-thin: calc(8px * var(--spacing-scale));
    --progress-height-medium: calc(12px * var(--spacing-scale));
}

/* ===== ベースリセット ===== */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: var(--font-family-primary);
    background: linear-gradient(135deg, var(--primary-color) 0%, var(--primary-dark) 100%);
    background-attachment: fixed;
    color: var(--text-primary);
    line-height: var(--line-height-base);
    min-height: 100vh;
    font-size: var(--font-size-base);
}

/* ===== 基本的なHTML要素のスタイル ===== */
h1 {
    font-size: var(--font-size-hero);
    font-weight: 800;
    line-height: var(--line-height-tight);
    margin-bottom: var(--spacing-lg);
    color: var(--text-primary);
}

h2 {
    font-size: var(--font-size-2xl);
    font-weight: 700;
    line-height: var(--line-height-tight);
    margin-bottom: var(--spacing-lg);
    color: var(--text-primary);
}

h3 {
    font-size: var(--font-size-xl);
    font-weight: 600;
    line-height: var(--line-height-tight);
    margin-bottom: var(--spacing-md);
    color: var(--text-primary);
}

h4 {
    font-size: var(--font-size-large);
    font-weight: 600;
    line-height: var(--line-height-tight);
    margin-bottom: var(--spacing-md);
    color: var(--text-primary);
}

h5 {
    font-size: var(--font-size-base);
    font-weight: 600;
    line-height: var(--line-height-base);
    margin-bottom: var(--spacing-sm);
    color: var(--text-primary);
}

h6 {
    font-size: var(--font-size-base);
    font-weight: 500;
    line-height: var(--line-height-base);
    margin-bottom: var(--spacing-sm);
    color: var(--text-secondary);
}

p {
    font-size: var(--font-size-base);
    line-height: var(--line-height-base);
    margin-bottom: var(--spacing-xs);
    color: var(--text-primary);
}

span {
    font-size: inherit;
    line-height: inherit;
    color: inherit;
}

/* ===== 画像関連の基本スタイル ===== */
img {
    max-width: 100%;
    height: auto;
    border-radius: var(--border-radius-md);
    /* box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); */
    /* transition: all 0.3s ease; */
}

/* 画像コンテナ */
.intro-image-section {
    /* margin: 0 0 var(--spacing-xl) 0; */
    display: flex;
    justify-content: center;
    align-items: center;
}

.intro-image-container {
    max-width: 100%;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    border-radius: var(--border-radius-lg);
    background: rgba(var(--primary-color-rgb, 102, 126, 234), 0.0);
    padding: var(--spacing-md) 0 0 0;
}

/* メイン画像（イントロページ） */
.intro-main-image {
    max-width: 100%;
    max-height: 400px;
    width: auto;
    height: auto;
    object-fit: cover;
    border-radius: var(--border-radius-md);
}


/* 質問画像 */
.question-image {
    max-width: 100%;
    max-height: 300px;
    width: auto;
    height: auto;
    object-fit: cover;
    border-radius: var(--border-radius-md);
    margin: var(--spacing-md) 0;
}

/* 質問画像コンテナ */
.question-image-container {
    display: flex;
    justify-content: center;
    align-items: center;
    margin: var(--spacing-lg) 0;
    padding: var(--spacing-sm);
    background: rgba(var(--primary-color-rgb, 102, 126, 234), 0.0);
    border-radius: var(--border-radius-lg);
    border: 1px solid rgba(var(--primary-color-rgb, 102, 126, 234), 0.1);
    overflow: hidden;
}


.question-image-container .question-image {
    margin: 0;
    max-height: 250px;
    border-radius: var(--border-radius-md);
}

/* 結果画像 */
.result-image {
    max-width: 100%;
    max-height: 350px;
    width: auto;
    height: auto;
    object-fit: cover;
    border-radius: var(--border-radius-md);
    margin: var(--spacing-md) 0;
}

/* 汎用画像コンテナ */
.image-container {
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    border-radius: var(--border-radius-lg);
    background: var(--background-overlay);
    padding: var(--spacing-sm);
    margin: var(--spacing-md) 0;
}

/* 管理画面用画像プレビュー */
.image-preview {
    max-width: 100%;
    max-height: 200px;
    width: auto;
    height: auto;
    object-fit: cover;
    border-radius: var(--border-radius-sm);
}

/* テキストサイズユーティリティクラス */
.text-xs {
    font-size: var(--font-size-xs);
}

.text-sm {
    font-size: var(--font-size-sm);
}

.text-lg {
    font-size: var(--font-size-large);
}

.text-xl {
    font-size: var(--font-size-xl);
}

.text-2xl {
    font-size: var(--font-size-2xl);
}

.text-hero {
    font-size: var(--font-size-hero);
}


/* ===== メインヒーロー（イントロページ） ===== */
.survey-hero {
    background: var(--background-light);
    backdrop-filter: blur(20px);
    border-radius: var(--border-radius-xl);
    color: var(--text-primary);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
    padding: var(--card-padding);
    text-align: center;
    margin: var(--card-margin) auto;
    max-width: 64rem;
    border: 1px solid rgba(255, 255, 255, 0.3);
}

.survey-hero h1 {
    font-size: var(--font-size-hero);
    font-weight: 800;
    margin-bottom: var(--spacing-lg);
    background: linear-gradient(135deg, var(--primary-color) 0%, var(--primary-dark) 100%);
    background-clip: text;
    -webkit-background-clip: text;
    color: transparent;
    letter-spacing: -0.025em;
    line-height: var(--line-height-tight);
    font-family: var(--font-family-heading);
}

/* イントロページ専用クラス */
.intro-title {
    font-size: var(--font-size-hero);
    font-weight: 800;
    margin-bottom: var(--spacing-lg);
    background: linear-gradient(135deg, var(--primary-color) 0%, var(--primary-dark) 100%);
    background-clip: text;
    -webkit-background-clip: text;
    color: transparent;
    letter-spacing: -0.025em;
    line-height: var(--line-height-tight);
    font-family: var(--font-family-heading);
}

.intro-description {
    font-size: var(--font-size-large);
    /* margin-bottom: var(--spacing-2xl); */
    color: var(--text-secondary);
    font-weight: 400;
    line-height: var(--line-height-base);
}

.survey-hero .description {
    font-size: var(--font-size-xl);
    margin-bottom: var(--spacing-2xl);
    color: var(--text-secondary);
    font-weight: 400;
    line-height: var(--line-height-base);
}

.survey-hero .question-count {
    display: flex;
    align-items: center;
    justify-content: center;
    width: fit-content;
    margin: 0 auto var(--spacing-2xl) auto;
    background: linear-gradient(135deg, var(--primary-color) 0%, var(--primary-dark) 100%);
    color: white;
    border-radius: var(--border-radius-full);
    padding: var(--step-info-padding-y) var(--form-padding-x);
    font-size: var(--font-size-large);
    box-shadow: 0 10px 20px rgba(102, 126, 234, 0.3);
    font-weight: 600;
}

.survey-hero .question-count::before {
    content: "📝";
    margin-right: var(--spacing-sm);
}

/* ===== カード共通スタイル ===== */
.card,
.survey-card {
    background: var(--background-light);
    backdrop-filter: blur(20px);
    border-radius: var(--border-radius-xl);
    padding: var(--card-padding);
    margin: var(--card-margin) auto;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.3);
    width: 100%;
    /* 親の幅を最大活用 */
    max-width: 100%;
    /* 親を超えない */
    min-width: 18rem;
    /* 最小幅を保証 */
}

.btn:active,
.survey-btn:active {
    transform: translateY(0);
    box-shadow: 0 5px 10px rgba(102, 126, 234, 0.3);
}

/* ===== フォーム要素 ===== */
.form-group {
    margin-bottom: var(--spacing-xl);
}

.form-label {
    display: block;
    color: var(--text-primary);
    font-size: var(--font-size-sm);
    font-weight: 700;
    margin-bottom: var(--spacing-sm);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.form-input {
    width: 100%;
    border: 2px solid rgba(var(--primary-color-rgb, 102, 126, 234), 0.2);
    border-radius: var(--border-radius-md);
    padding: var(--form-padding-x);
    font-size: var(--font-size-large);
    transition: all 0.3s ease;
    background: var(--background-light);
    backdrop-filter: blur(10px);
    font-family: inherit;
}

.form-input:focus {
    border-color: var(--primary-color);
    outline: none;
    background: white;
    box-shadow: 0 0 0 4px rgba(var(--primary-color-rgb, 102, 126, 234), 0.1);
    transform: translateY(-2px);
}

.form-select {
    width: 100%;
    border: 2px solid rgba(var(--primary-color-rgb, 102, 126, 234), 0.2);
    border-radius: var(--border-radius-md);
    padding: var(--question-option-padding) var(--form-padding-x);
    font-size: var(--font-size-large);
    background: var(--background-light);
    backdrop-filter: blur(10px);
    transition: all 0.3s ease;
    font-family: inherit;
}

.form-select:focus {
    border-color: var(--primary-color);
    outline: none;
    background: white;
    box-shadow: 0 0 0 4px rgba(var(--primary-color-rgb, 102, 126, 234), 0.1);
    transform: translateY(-2px);
}

/* ===== ボタン統一スタイル ===== */
button,
input[type="submit"],
input[type="button"] {
    border-radius: var(--border-radius-full) !important;
}

form button,
form input[type="submit"],
form input[type="button"] {
    border-radius: var(--border-radius-full) !important;
}

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-sm);
    padding: var(--button-padding-y) var(--button-padding-x);
    border-radius: var(--border-radius-full);
    font-weight: 700;
    text-decoration: none;
    text-align: center;
    transition: all 0.4s ease;
    border: none;
    cursor: pointer;
    font-size: var(--font-size-base);
    line-height: var(--line-height-base);
    min-height: var(--min-height-sm);
    box-sizing: border-box;
    position: relative;
    overflow: hidden;
    min-width: var(--min-width-button);
    font-family: inherit;
}

.btn-primary {
    background: linear-gradient(135deg, var(--primary-color) 0%, var(--primary-dark) 100%);
    color: white;
    box-shadow: 0 6px 15px rgba(var(--primary-color-rgb, 102, 126, 234), 0.3);
}

.btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 25px rgba(var(--primary-color-rgb, 102, 126, 234), 0.4);
}

.btn-large {
    padding: var(--button-large-padding-y) var(--button-large-padding-x);
    font-size: var(--font-size-large);
    font-weight: 800;
    min-height: var(--min-height-md);
    min-width: var(--min-width-button-lg);
}

.btn-full {
    width: 100%;
    justify-content: center;
}

.btn:disabled {
    background: var(--neutral-300);
    color: var(--neutral-500);
    box-shadow: none;
    cursor: not-allowed;
    transform: none;
}

.btn:disabled:hover {
    transform: none;
    box-shadow: none;
}

/* ===== 質問スタイル ===== */
.question-block {
    margin-bottom: 0;
    padding: var(--question-block-padding);
    border: 1px solid rgba(var(--primary-color-rgb, 102, 126, 234), 0.2);
    border-radius: var(--border-radius-md);
    background: var(--background-overlay);
    backdrop-filter: blur(10px);
    transition: all 0.3s ease;
}

.question-block:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
}

.question-title {
    font-size: var(--font-size-2xl);
    font-weight: 700;
    margin-bottom: var(--spacing-lg);
    color: var(--text-primary);
    background: linear-gradient(135deg, var(--primary-color) 0%, var(--primary-dark) 100%);
    background-clip: text;
    -webkit-background-clip: text;
    color: transparent;
}

.question-options {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);
}

.question-option {
    display: flex;
    align-items: center;
    padding: var(--question-option-padding);
    border: 2px solid rgba(var(--primary-color-rgb, 102, 126, 234), 0.2);
    border-radius: var(--border-radius-md);
    cursor: pointer;
    transition: all 0.3s ease;
    background: var(--background-overlay);
    backdrop-filter: blur(10px);
}

.question-option:hover {
    border-color: var(--primary-color);
    background: white;
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(var(--primary-color-rgb, 102, 126, 234), 0.2);
}

.question-option input[type="radio"] {
    margin-right: var(--spacing-md);
    accent-color: var(--primary-color);
    transform: scale(1.2);
}

.question-option-text {
    font-size: var(--font-size-large);
    font-weight: 600;
    color: var(--text-primary);
}

/* ===== 進捗バー ===== */
.progress-bar {
    background: var(--background-light);
    backdrop-filter: blur(20px);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
    padding: var(--progress-padding) 0;
    border-bottom: 1px solid rgba(var(--primary-color-rgb, 102, 126, 234), 0.2);
}

.progress-container {
    max-width: 64rem;
    margin: 0 auto;
    padding: 0 var(--container-padding);
}

.progress-steps {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--progress-gap);
}

.progress-step {
    display: flex;
    align-items: center;
}

.progress-step-icon {
    width: 3rem;
    height: 3rem;
    border-radius: 50%;
    border: 3px solid var(--neutral-300);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    font-weight: 700;
    margin-right: var(--progress-step-margin);
    background: white;
    transition: all 0.3s ease;
}

.progress-step.active .progress-step-icon {
    border: none;
    background: linear-gradient(135deg, var(--primary-color) 0%, var(--primary-dark) 100%);
    box-shadow: 0 5px 15px rgba(var(--primary-color-rgb, 102, 126, 234), 0.4);
}

.progress-step.completed .progress-step-icon {
    border: none;
    background: linear-gradient(135deg, var(--accent-color) 0%, var(--accent-dark) 100%);
    box-shadow: 0 5px 15px rgba(72, 187, 120, 0.4);
}

.progress-step-text {
    font-size: var(--font-size-sm);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

/* ===== ナビゲーション ===== */
.step-navigation {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: var(--navigation-margin-top);
    gap: var(--navigation-gap);
    flex-wrap: wrap;
    flex-direction: row;
}

.step-navigation .btn {
    min-width: var(--min-width-button);
}

.final-submit {
    display: none;
    text-align: center;
    margin-top: var(--step-navigation-margin);
}

.final-submit.show {
    display: block;
}

.final-submit .btn {
    background: linear-gradient(135deg, var(--primary-color) 0%, var(--primary-dark) 100%) !important;
    color: white !important;
    box-shadow: 0 6px 15px rgba(var(--primary-color-rgb, 102, 126, 234), 0.3) !important;
    border-radius: var(--border-radius-full) !important;
    padding: var(--button-large-padding-y) var(--button-large-padding-x) !important;
    font-weight: 800 !important;
    font-size: var(--font-size-large) !important;
    min-height: var(--min-height-md) !important;
    transition: all 0.4s ease !important;
    min-width: var(--min-width-button-lg) !important;
    border: none !important;
}

.final-submit .btn:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 10px 25px rgba(var(--primary-color-rgb, 102, 126, 234), 0.4) !important;
}

/* ===== プロフィール・質問ページ共通 ===== */
.step-progress-container {
    display: flex;
    align-items: center;
    gap: var(--progress-step-margin);
    margin-bottom: var(--step-navigation-margin);
}

.step-progress {
    flex: 1;
    width: 100%;
    height: var(--progress-height-thin);
    background-color: rgba(var(--primary-color-rgb, 102, 126, 234), 0.2);
    border-radius: var(--border-radius-small);
    overflow: hidden;
    margin-bottom: 0;
}

.step-progress-bar {
    height: 100%;
    background: linear-gradient(135deg, var(--primary-color) 0%, var(--primary-dark) 100%);
    border-radius: var(--border-radius-small);
    transition: width 0.3s ease;
    width: 0%;
}

.step-info {
    flex-shrink: 0;
    font-size: var(--font-size-sm);
    color: var(--text-secondary);
    font-weight: 600;
    background: rgba(var(--primary-color-rgb, 102, 126, 234), 0.1);
    padding: var(--step-info-padding-y) var(--step-info-padding-x);
    border-radius: 20px;
    min-width: 60px;
    text-align: center;
    margin-bottom: 0;
    white-space: nowrap;
}

.question-container.active {
    display: flex !important;
    opacity: 1;
    transform: translateY(0);
}

.question-container.all-mode {
    display: flex !important;
    opacity: 1;
    transform: translateY(0);
}

.survey-page .page-container,
.results-page .page-container {
    max-width: 48rem;
    margin: 2rem auto;
    padding: 0 1rem;
    min-height: calc(100vh - 4rem);
}

/* ===== プロフィールページ専用スタイル ===== */
.profile-header {
    text-align: center;
    /* margin-bottom: var(--spacing-lg); */
    padding: var(--spacing-lg) 0 var(--spacing-lg) 0;
}

.profile-title {
    font-size: var(--font-size-hero);
    font-weight: 800;
    margin-bottom: var(--spacing-md);
    background: linear-gradient(135deg, var(--primary-color) 0%, var(--primary-dark) 100%);
    background-clip: text;
    -webkit-background-clip: text;
    color: transparent;
}

.profile-subtitle {
    color: var(--text-secondary);
    font-size: var(--font-size-large);
    font-weight: 400;
    margin-bottom: 0;
}

.profile-description {
    font-size: var(--font-size-base);
    color: var(--text-secondary);
    margin-bottom: var(--spacing-lg);
    line-height: var(--line-height-base);
    font-weight: 400;
}

.profile-content .question-container.active,
.profile-content .question-container {
    padding: var(--question-container-padding) !important;
    min-height: var(--min-height-profile) !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    align-items: center !important;
    text-align: center !important;
    background: var(--background-light) !important;
    border-radius: var(--border-radius-lg) !important;
    border: 1px solid rgba(var(--primary-color-rgb, 102, 126, 234), 0.2) !important;
    margin-bottom: var(--spacing-lg) !important;
}

.step-form-label {
    display: block;
    font-size: var(--font-size-xl);
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: var(--spacing-md);
    text-align: center;
    line-height: 1.3;
}

.profile-badge {
    font-size: var(--font-size-xs);
    padding: 4px 12px;
    border-radius: var(--border-radius-full);
    margin-left: var(--spacing-sm);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    display: inline-block;
    vertical-align: middle;
}

.required-badge {
    background: linear-gradient(135deg, var(--error-color) 0%, var(--error-dark) 100%);
    color: white;
}

.optional-badge {
    background: linear-gradient(135deg, var(--cyan-color) 0%, var(--cyan-dark) 100%);
    color: white;
}

.date-inputs {
    display: flex;
    gap: var(--spacing-md);
    justify-content: center;
    max-width: 400px;
    margin: 0 auto;
    width: 100%;
}

.date-inputs .form-select {
    flex: 1;
    min-width: 0;
}

.profile-form-group {
    margin-bottom: 0);
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
    width: 100%;
}

.profile-content .profile-form-group .form-input,
.profile-content .profile-form-group .form-select {
    width: 100%;
    max-width: 400px;
    margin: 0 auto;
    display: block;
    font-size: var(--font-size-large);
    padding: var(--form-padding-x);
    border-radius: var(--border-radius-lg);
    border: 2px solid rgba(var(--primary-color-rgb, 102, 126, 234), 0.2);
    background: rgba(255, 255, 255, 0.9);
    transition: all 0.3s ease;
    text-align: center;
}

.profile-content .profile-form-group .form-input:focus,
.profile-content .profile-form-group .form-select:focus {
    border-color: var(--primary-color);
    outline: none;
    background: white;
    box-shadow: 0 0 0 4px rgba(var(--primary-color-rgb, 102, 126, 234), 0.1);
    transform: translateY(-2px);
}

.profile-content .profile-form-group .form-input::placeholder {
    color: var(--text-muted);
    text-align: center;
    font-style: italic;
}

/* ===== 結果ページ専用クラス ===== */
.result-card {
    text-align: center;
    padding: var(--card-padding);
}

.result-title {
    font-size: var(--font-size-hero);
    font-weight: 800;
    margin-bottom: var(--spacing-md);
    background: linear-gradient(135deg, var(--primary-color) 0%, var(--primary-dark) 100%);
    background-clip: text;
    -webkit-background-clip: text;
    color: transparent;
    font-family: var(--font-family-heading);
}

.result-description {
    font-size: var(--font-size-base);
    color: var(--text-secondary);
    line-height: var(--line-height-base);
}

.result-hero {
    background: linear-gradient(135deg, var(--primary-color) 0%, var(--primary-dark) 100%);
    border-radius: var(--border-radius-2xl);
    color: white;
    padding: var(--card-padding);
    margin-bottom: var(--spacing-2xl);
    box-shadow: 0 20px 40px rgba(var(--primary-color-rgb, 102, 126, 234), 0.3);
    position: relative;
    overflow: hidden;
}

.result-hero:before {
    content: '';
    position: absolute;
    top: -50%;
    right: -50%;
    width: 100%;
    height: 100%;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.1) 0%, transparent 70%);
}

.result-hero h3 {
    font-size: var(--font-size-2xl);
    font-weight: 800;
    margin-bottom: var(--spacing-lg);
    position: relative;
}

.result-info {
    background: var(--background-overlay);
    backdrop-filter: blur(20px);
    border-radius: var(--border-radius-lg);
    padding: var(--card-padding);
    margin-bottom: var(--spacing-2xl);
    border: 1px solid rgba(var(--primary-color-rgb, 102, 126, 234), 0.2);
}

.result-info h4 {
    font-size: var(--font-size-large);
    font-weight: 700;
    margin-bottom: var(--spacing-md);
    color: var(--text-primary);
}

.result-actions {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: var(--spacing-2xl);
    margin-top: var(--spacing-2xl);
}

.result-header {
    text-align: center;
    /* margin-bottom: var(--spacing-xl); */
    padding: var(--spacing-lg) 0 var(--spacing-lg) 0;
}

.results-page .result-header {
    text-align: center;
    margin-bottom: var(--spacing-xl);
    padding: var(--spacing-lg) 0 var(--spacing-lg) 0;
}

.result-value {
    text-align: center;
    margin: var(--spacing-xs) 0;
    padding: var(--card-padding);
    background: linear-gradient(135deg,
            rgba(255, 255, 255, 0.95) 0%,
            rgba(248, 250, 252, 0.95) 100%);
    border-radius: var(--border-radius-xl);
    border: 1px solid rgba(var(--primary-color-rgb, 102, 126, 234), 0.1);
    box-shadow:
        0 4px 6px rgba(0, 0, 0, 0.05),
        0 10px 20px rgba(var(--primary-color-rgb, 102, 126, 234), 0.05);
    backdrop-filter: blur(10px);
}

.results-page .result-value {
    text-align: center;
    margin: var(--spacing-2xl) 0;
    padding: var(--card-padding);
    background: linear-gradient(135deg,
            rgba(255, 255, 255, 0.95) 0%,
            rgba(248, 250, 252, 0.95) 100%);
    border-radius: var(--border-radius-xl);
    border: 1px solid rgba(var(--primary-color-rgb, 102, 126, 234), 0.1);
    box-shadow:
        0 4px 6px rgba(0, 0, 0, 0.05),
        0 10px 20px rgba(var(--primary-color-rgb, 102, 126, 234), 0.05);
    backdrop-filter: blur(10px);
}

.results-page .level-indicator {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--step-info-padding-y);
    margin: var(--progress-step-margin) 0;
}

.results-page .level-icon {
    font-size: 1.5rem;
}

.results-page .level-text {
    font-size: var(--font-size-xl);
    font-weight: 700;
}

.results-page .percentage-value {
    font-size: var(--font-size-hero);
    font-weight: 800;
    background: linear-gradient(135deg, var(--primary-color) 0%, var(--primary-dark) 100%);
    background-clip: text;
    -webkit-background-clip: text;
    color: transparent;
    margin: var(--progress-step-margin) 0;
}

.results-page .grade-badge {
    display: inline-block;
    padding: var(--step-info-padding-y) var(--progress-step-margin);
    border-radius: 50px;
    color: white;
    font-weight: 700;
    font-size: var(--font-size-large);
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

.results-page .score-value {
    font-size: var(--font-size-hero);
    font-weight: 800;
    margin: 0 var(--step-info-padding-y);
}

.result-subtitle {
    font-size: var(--font-size-large);
    color: var(--text-secondary);
    margin: 0;
}

.results-page .result-subtitle {
    font-size: var(--font-size-large);
    color: var(--text-secondary);
    margin: 0;
}

.results-page .age-value,
.results-page .score-value {
    font-size: var(--font-size-hero);
    font-weight: 800;
    margin: var(--progress-step-margin) 0;
    background: linear-gradient(135deg, var(--primary-color) 0%, var(--primary-dark) 100%);
    background-clip: text;
    -webkit-background-clip: text;
    color: transparent;
}

.results-page .type-value {
    font-size: var(--font-size-2xl);
    font-weight: 800;
    background: linear-gradient(135deg, var(--primary-color) 0%, var(--primary-dark) 100%);
    background-clip: text;
    -webkit-background-clip: text;
    color: transparent;
    margin: 0;
    padding: var(--form-padding-x);
    background-color: rgba(var(--primary-color-rgb, 102, 126, 234), 0.05);
    border-radius: var(--border-radius-lg);
    border: 2px solid rgba(var(--primary-color-rgb, 102, 126, 234), 0.2);
    text-align: center;
    position: relative;
    overflow: hidden;
}

.results-page .type-value::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg,
            rgba(var(--primary-color-rgb, 102, 126, 234), 0.03) 0%,
            transparent 50%,
            rgba(var(--primary-color-rgb, 102, 126, 234), 0.03) 100%);
    pointer-events: none;
}

.results-page .advice-section {
    background: linear-gradient(135deg,
            rgba(72, 187, 120, 0.08) 0%,
            rgba(72, 187, 120, 0.04) 100%);
    padding: var(--card-padding);
    border-radius: var(--border-radius-lg);
    border-left: 4px solid var(--accent-color);
    margin: var(--spacing-xl) 0;
    box-shadow: 0 2px 8px rgba(72, 187, 120, 0.1);
}

.results-page .characteristics h3 {
    color: var(--text-primary);
    margin-bottom: var(--spacing-lg);
    font-size: var(--font-size-xl);
    font-weight: 700;
}

.results-page .characteristics ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.results-page .characteristics li {
    padding: var(--spacing-md) 0;
    position: relative;
    padding-left: var(--spacing-xl);
    border-bottom: 1px solid rgba(var(--primary-color-rgb, 102, 126, 234), 0.1);
    transition: all 0.3s ease;
}

.results-page .characteristics li::before {
    content: '✓';
    position: absolute;
    left: 0;
    top: var(--spacing-md);
    color: var(--accent-color);
    font-weight: bold;
    font-size: var(--font-size-large);
}

.results-page .characteristics li:last-child {
    border-bottom: none;
}

.results-page .characteristics li:hover {
    background: rgba(var(--primary-color-rgb, 102, 126, 234), 0.05);
    padding-left: calc(var(--spacing-xl) + var(--spacing-xs));
}

/* ===== イントロページの高さ調整を変数化 ===== */
.intro-page .page-container {
    min-height: auto !important;
    margin: var(--progress-step-margin) auto !important;
}

.intro-page .survey-card {
    margin: 0 auto !important;
}

.intro-page body {
    min-height: auto !important;
}

/* ===== プロフィールページの高さ調整を変数化 ===== */
.profile-page .page-container {
    min-height: auto !important;
    margin: var(--progress-step-margin) auto !important;
}

.profile-page .survey-card {
    margin: 0 auto !important;
}

.profile-page body {
    min-height: auto !important;
}

/* ===== 診断結果ページの追加スタイル ===== */
/* 年齢診断の結果ラベル */
.age-result-label {
    color: var(--text-muted);
    font-size: var(--font-size-xl);
    margin-top: var(--spacing-sm);
    margin-bottom: 0;
    font-weight: 500;
    text-align: center;
}

/* スコア診断のコンテナ */
.score-diagnosis-container {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: var(--spacing-xl);
    padding: var(--spacing-lg);
    background: linear-gradient(135deg,
            rgba(var(--primary-color-rgb, 102, 126, 234), 0.05) 0%,
            rgba(255, 255, 255, 0.8) 100%);
    border-radius: var(--border-radius-lg);
    border: 1px solid rgba(var(--primary-color-rgb, 102, 126, 234), 0.1);
    margin: var(--spacing-lg) 0;
}

/* グレードバッジとラベルのコンテナ */
.grade-info-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--spacing-sm);
}

/* グレードバッジの拡張スタイル */
.results-page .grade-badge {
    padding: var(--spacing-sm) var(--spacing-lg);
    border-radius: var(--border-radius-full);
    color: white;
    font-weight: 700;
    font-size: var(--font-size-large);
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
    box-shadow:
        0 4px 12px rgba(0, 0, 0, 0.2),
        inset 0 1px 0 rgba(255, 255, 255, 0.3);
    position: relative;
    overflow: hidden;
    transition: all 0.3s ease;
}

.results-page .grade-badge::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg,
            transparent,
            rgba(255, 255, 255, 0.3),
            transparent);
    transition: left 0.6s ease;
}

.results-page .grade-badge:hover::before {
    left: 100%;
}

/* グレードラベル */
.grade-label {
    margin: 0;
    color: var(--text-muted);
    text-align: center;
    font-size: var(--font-size-base);
    font-weight: 500;
}

/* パーセンテージ診断の拡張スタイル */
.results-page .percentage-value {
    font-size: var(--font-size-hero);
    font-weight: 800;
    background: linear-gradient(135deg, var(--primary-color) 0%, var(--primary-dark) 100%);
    background-clip: text;
    -webkit-background-clip: text;
    color: transparent;
    margin: var(--spacing-md) 0;
    text-align: center;
    position: relative;
}

/* 動的カラー対応クラス */
.dynamic-color-text {
    font-weight: inherit;
    transition: all 0.3s ease;
}

/* 動的カラー対応クラスのサイズ別スタイル */
.percentage-value.dynamic-color-text {
    font-size: var(--font-size-hero) !important;
    font-weight: 800;
}

.score-value.dynamic-color-text {
    font-size: var(--font-size-hero) !important;
    font-weight: 800;
}

.level-text.dynamic-color-text {
    font-size: var(--font-size-xl) !important;
    font-weight: 700;
}

/* レベルインジケーターの拡張 */
.results-page .level-indicator {
    background: linear-gradient(135deg,
            rgba(255, 255, 255, 0.9) 0%,
            rgba(248, 250, 252, 0.9) 100%);
    padding: var(--spacing-lg);
    border-radius: var(--border-radius-lg);
    border: 1px solid rgba(var(--primary-color-rgb, 102, 126, 234), 0.1);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
    margin: var(--spacing-md) 0;
}

.results-page .level-icon {
    font-size: var(--font-size-2xl);
    margin-right: var(--spacing-sm);
    transition: transform 0.3s ease;
}

.results-page .level-indicator:hover .level-icon {
    transform: scale(1.1) rotate(5deg);
}

.results-page .level-text {
    font-size: var(--font-size-xl);
    font-weight: 700;
    text-shadow: 0 1px 2px rgba(255, 255, 255, 0.8);
}

/* スコア値の拡張スタイル */
.results-page .score-value {
    font-size: var(--font-size-hero);
    font-weight: 800;
    margin: 0;
    text-align: center;
    position: relative;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

/* 年齢値の拡張スタイル */
.results-page .age-value {
    font-size: var(--font-size-hero);
    font-weight: 800;
    margin: 0;
    background: linear-gradient(135deg, var(--primary-color) 0%, var(--primary-dark) 100%);
    background-clip: text;
    -webkit-background-clip: text;
    color: transparent;
    text-align: center;
    position: relative;
}

/* メタ情報の拡張スタイル */
.results-page .meta-info {
    text-align: center;
    color: var(--text-muted);
    font-size: var(--font-size-sm);
    margin-top: var(--spacing-2xl);
    padding: var(--question-block-padding);
    background: linear-gradient(135deg,
            rgba(248, 250, 252, 0.8) 0%,
            rgba(255, 255, 255, 0.6) 100%);
    border-radius: var(--border-radius-md);
    border: 1px solid rgba(var(--secondary-color-rgb, 113, 128, 150), 0.1);
}

.results-page .meta-info p {
    margin: var(--spacing-xs) 0;
    font-weight: 500;
}

/* アクションボタンエリアの拡張 */
.results-page .action-buttons {
    display: flex;
    justify-content: center;
    gap: var(--spacing-lg);
    margin-top: var(--spacing-xs);
    padding: var(--spacing-xl) 0;
}

.results-page .action-buttons .btn {
    min-width: 180px;
    padding: var(--question-option-padding) var(--form-padding-x);
    font-weight: 700;
    font-size: var(--font-size-large);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.results-page .action-buttons .btn:hover {
    transform: translateY(-3px);
}

/* アドバイスセクションの拡張 */
.results-page .advice-section {
    background: linear-gradient(135deg,
            rgba(72, 187, 120, 0.08) 0%,
            rgba(72, 187, 120, 0.04) 100%);
    padding: var(--card-padding);
    border-radius: var(--border-radius-lg);
    border-left: 4px solid var(--accent-color);
    margin: var(--spacing-xl) 0;
    box-shadow: 0 2px 8px rgba(72, 187, 120, 0.1);
}

.results-page .advice-section h3 {
    color: var(--text-primary);
    margin-bottom: var(--spacing-lg);
    font-size: var(--font-size-xl);
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
}

/* 特徴リストの拡張 */
.results-page .characteristics {
    background: linear-gradient(135deg,
            rgba(var(--primary-color-rgb, 102, 126, 234), 0.06) 0%,
            rgba(255, 255, 255, 0.8) 100%);
    padding: var(--card-padding);
    border-radius: var(--border-radius-lg);
    border: 1px solid rgba(var(--primary-color-rgb, 102, 126, 234), 0.15);
    margin: var(--spacing-xl) 0;
}

.results-page .characteristics h3 {
    color: var(--text-primary);
    margin-bottom: var(--spacing-lg);
    font-size: var(--font-size-xl);
    font-weight: 700;
}

.results-page .characteristics ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.results-page .characteristics li {
    padding: var(--spacing-md) 0;
    position: relative;
    padding-left: var(--spacing-xl);
    border-bottom: 1px solid rgba(var(--primary-color-rgb, 102, 126, 234), 0.1);
    transition: all 0.3s ease;
}

.results-page .characteristics li::before {
    content: '✓';
    position: absolute;
    left: 0;
    top: var(--spacing-md);
    color: var(--accent-color);
    font-weight: bold;
    font-size: var(--font-size-large);
}

.results-page .characteristics li:last-child {
    border-bottom: none;
}

.results-page .characteristics li:hover {
    background: rgba(var(--primary-color-rgb, 102, 126, 234), 0.05);
    padding-left: calc(var(--spacing-xl) + var(--spacing-xs));
}

/* 診断結果のアニメーション効果 */
.results-page .result-value:hover {
    transform: translateY(-2px);
    box-shadow:
        0 8px 12px rgba(0, 0, 0, 0.08),
        0 20px 40px rgba(var(--primary-color-rgb, 102, 126, 234), 0.1);
}

/* 診断結果のアニメーション効果 */
.result-value:hover {
    transform: translateY(-2px);
    box-shadow:
        0 8px 12px rgba(0, 0, 0, 0.08),
        0 20px 40px rgba(var(--primary-color-rgb, 102, 126, 234), 0.1);
}

/* ===== 実際のテンプレートで使用されるクラス ===== */

/* イントロヘッダー */
.intro-header {
    text-align: center;
    /* margin-bottom: var(--spacing-2xl); */
    padding: var(--spacing-lg) 0 var(--spacing-lg) 0;
}

/* イントロアイコン */
.intro-icon {
    font-size: var(--font-size-hero);
    margin-bottom: var(--spacing-lg);
    display: block;
    opacity: 0.7;
}

/* プライバシー同意セクション */
.privacy-consent-section {
    margin: var(--spacing-lg) 0;
    background: linear-gradient(135deg,
            rgba(var(--primary-color-rgb, 102, 126, 234), 0.05) 0%,
            rgba(255, 255, 255, 0.8) 100%);
    border-radius: var(--border-radius-lg);
    border: 1px solid rgba(var(--primary-color-rgb, 102, 126, 234), 0.2);
    overflow: hidden;
}

/* プライバシー切り替えヘッダー */
.privacy-toggle-header {
    padding: var(--spacing-md);
    cursor: pointer;
    background: linear-gradient(135deg,
            rgba(var(--primary-color-rgb, 102, 126, 234), 0.1) 0%,
            rgba(255, 255, 255, 0.9) 100%);
    border-bottom: 1px solid rgba(var(--primary-color-rgb, 102, 126, 234), 0.1);
    transition: all 0.3s ease;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--spacing-md);
}

.privacy-toggle-header:hover {
    background: linear-gradient(135deg,
            rgba(var(--primary-color-rgb, 102, 126, 234), 0.15) 0%,
            rgba(255, 255, 255, 0.95) 100%);
}

/* プライバシー詳細コンテンツ */
.privacy-details-content {
    padding: var(--card-padding);
}

/* メイン同意 */
.privacy-main-consent {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    flex: 1;
}

/* メイン同意ラベル */
.privacy-main-label {
    font-size: var(--font-size-base);
    font-weight: 600;
    color: var(--text-primary);
    cursor: pointer;
    margin: 0;
    text-align: left;
}

/* 詳細確認ボタン */
.privacy-details-toggle {
    background: rgba(var(--primary-color-rgb, 102, 126, 234), 0.1);
    border: 1px solid rgba(var(--primary-color-rgb, 102, 126, 234), 0.3);
    border-radius: var(--border-radius-md);
    padding: var(--spacing-sm) var(--spacing-md);
    font-size: var(--font-size-sm);
    color: var(--text-primary);
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    gap: var(--spacing-xs);
}

.privacy-details-toggle:hover {
    background: rgba(var(--primary-color-rgb, 102, 126, 234), 0.15);
}

/* プライバシーポリシー文章 */
.privacy-policy-text {
    margin-bottom: var(--spacing-xl);
}

.privacy-policy-text h5 {
    margin-bottom: var(--spacing-md);
    font-size: var(--font-size-large);
    font-weight: 600;
    color: var(--text-primary);
}

.privacy-policy-text p {
    margin-bottom: var(--spacing-md);
    font-size: var(--font-size-base);
    color: var(--text-secondary);
    line-height: var(--line-height-relaxed);
}

/* 詳細同意項目 */
.detailed-consents {
    margin-top: var(--spacing-lg);
}

/* 同意項目 */
.consent-item {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    margin-bottom: var(--spacing-md);
    padding: var(--spacing-md);
    background: rgba(255, 255, 255, 0.8);
    border-radius: var(--border-radius-md);
    border: 1px solid rgba(var(--primary-color-rgb, 102, 126, 234), 0.1);
    transition: all 0.3s ease;
}

.consent-item:hover {
    background: rgba(255, 255, 255, 0.95);
    border-color: rgba(var(--primary-color-rgb, 102, 126, 234), 0.2);
}

/* 同意チェックボックス */
.consent-checkbox,
.consent-checkbox-main {
    width: 1.2rem;
    height: 1.2rem;
    accent-color: var(--primary-color);
    margin: 0;
    cursor: pointer;
}

/* 同意項目ラベル */
.consent-item label {
    font-size: var(--font-size-base);
    color: var(--text-primary);
    cursor: pointer;
    margin: 0;
    flex: 1;
}

/* アクションボタンエリア（実際に使用されるクラス名） */
.action-buttons {
    display: flex;
    justify-content: center;
    gap: var(--spacing-2xl);
    margin-top: var(--spacing-xs);
    padding: var(--spacing-xs) 0;
}

.action-buttons .btn {
    min-width: 180px;
    padding: var(--question-option-padding) var(--form-padding-x);
    font-weight: 700;
    font-size: var(--font-size-large);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.action-buttons .btn:hover {
    transform: translateY(-3px);
}

/* 説明セクション */
.description-section {
    margin: var(--spacing-xs) 0;
    padding: var(--card-padding);
    background: linear-gradient(135deg,
            rgba(255, 255, 255, 0.9) 0%,
            rgba(248, 250, 252, 0.9) 100%);
    border-radius: var(--border-radius-lg);
    border: 1px solid rgba(var(--primary-color-rgb, 102, 126, 234), 0.1);
}

.description-section p {
    margin-bottom: 0;
    font-size: var(--font-size-large);
    line-height: var(--line-height-relaxed);
    color: var(--text-primary);
}

/* 研究論文参照情報セクション */
.research-references-section {
    margin: var(--spacing-md) 0;
    background: linear-gradient(135deg,
            rgba(var(--secondary-color-rgb, 113, 128, 150), 0.05) 0%,
            rgba(255, 255, 255, 0.8) 100%);
    border-radius: var(--border-radius-lg);
    border: 1px solid rgba(var(--secondary-color-rgb, 113, 128, 150), 0.2);
    overflow: hidden;
}

.research-toggle-header {
    padding: var(--spacing-md);
    cursor: pointer;
    background: linear-gradient(135deg,
            rgba(var(--secondary-color-rgb, 113, 128, 150), 0.1) 0%,
            rgba(255, 255, 255, 0.9) 100%);
    border-bottom: 1px solid rgba(var(--secondary-color-rgb, 113, 128, 150), 0.1);
    transition: all 0.3s ease;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.research-toggle-header:hover {
    background: linear-gradient(135deg,
            rgba(var(--secondary-color-rgb, 113, 128, 150), 0.15) 0%,
            rgba(255, 255, 255, 0.95) 100%);
}

.research-toggle-header h3 {
    margin: 0;
    font-size: var(--font-size-base);
    font-weight: 600;
    color: var(--text-primary);
}

.toggle-icon {
    font-size: var(--font-size-sm);
    color: var(--text-secondary);
    transition: transform 0.3s ease;
}

.research-content {
    padding: var(--card-padding);
}

.research-note {
    margin-bottom: var(--spacing-lg);
    font-size: var(--font-size-base);
    color: var(--text-secondary);
    font-style: italic;
}

.research-metadata {
    margin: var(--spacing-lg) 0;
    padding: var(--spacing-lg);
    background: rgba(var(--secondary-color-rgb, 113, 128, 150), 0.05);
    border-radius: var(--border-radius-md);
    border-left: 4px solid var(--secondary-color);
}

.research-metadata p {
    margin-bottom: var(--spacing-sm);
    font-size: var(--font-size-base);
    color: var(--text-primary);
}

.references-list {
    margin-top: var(--spacing-lg);
}

.reference-item {
    margin-bottom: var(--spacing-xl);
    padding: var(--spacing-lg);
    background: rgba(255, 255, 255, 0.8);
    border-radius: var(--border-radius-md);
    border: 1px solid rgba(var(--secondary-color-rgb, 113, 128, 150), 0.2);
}

.reference-item h4 {
    margin-bottom: var(--spacing-sm);
    font-size: var(--font-size-base);
    font-weight: 600;
    color: var(--text-primary);
}

.reference-authors {
    margin-bottom: var(--spacing-xs);
    font-size: var(--font-size-sm);
    color: var(--text-secondary);
    font-weight: 500;
}

.reference-year {
    margin-bottom: var(--spacing-xs);
    font-size: var(--font-size-xs);
    color: var(--text-muted);
}

.reference-doi,
.reference-journal {
    margin-bottom: var(--spacing-xs);
    font-size: var(--font-size-xs);
    color: var(--text-muted);
}

/* ===== Phase 2A移行要素: ユーティリティ・エラー・アニメーション ===== */

/* プレビューバナー */
.preview-banner {
    background: linear-gradient(135deg, var(--warning-color) 0%, var(--warning-dark) 100%);
    color: white;
    padding: var(--spacing-md) var(--spacing-lg);
    text-align: center;
    margin-bottom: var(--spacing-xl);
    border-radius: var(--border-radius-md);
    font-weight: 600;
    box-shadow: 0 4px 15px rgba(251, 191, 36, 0.3);
}

/* エラーメッセージ */
.error {
    background: linear-gradient(135deg, var(--error-color) 0%, var(--error-dark) 100%);
    color: white;
    padding: var(--spacing-md) var(--spacing-lg);
    border-radius: var(--border-radius-md);
    margin-bottom: var(--spacing-xl);
    font-weight: 600;
    box-shadow: 0 4px 15px rgba(239, 68, 68, 0.3);
    border-left: 4px solid rgba(255, 255, 255, 0.3);
}

/* アニメーション */
.fade-in {
    animation: fadeIn 1s ease-out;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(30px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.page-transition {
    transition: all 0.4s ease-in-out;
}

/* デバッグ情報 */
.debug-info {
    background: var(--warning-light);
    padding: 1rem;
    margin: 1rem 0;
    border-radius: 8px;
    font-size: 0.8rem;
    border: 1px solid var(--warning-dark);
    color: var(--warning-text);
    font-family: 'Monaco', 'Consolas', monospace;
    line-height: 1.5;
}

.debug-info strong {
    color: var(--warning-accent);
    font-weight: 600;
}

/* ===== Phase 3A移行要素: 進捗バー基本構造 ===== */

/* 進捗バー基本構造 */
.progress-container {
    max-width: 64rem;
    margin: 0 auto;
    padding: 0 1rem;
}

.progress-steps {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 2rem;
}

.progress-step {
    display: flex;
    align-items: center;
}

.progress-step-icon {
    width: 3rem;
    height: 3rem;
    border-radius: 50%;
    border: 3px solid var(--neutral-300);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    font-weight: 700;
    margin-right: 1rem;
    transition: all 0.3s ease;
}

.progress-step-text {
    font-size: 0.875rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

/* ===== Phase 3B移行要素: フッター基本構造 ===== */

/* フッター基本構造 */
.footer {
    margin-top: 3rem;
    padding: 2rem 0;
}

.footer-content {
    max-width: 64rem;
    margin: 0 auto;
    padding: 0 1rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.footer-dark .footer-content {
    justify-content: center;
}

.footer-links {
    display: flex;
    gap: 2rem;
    font-size: 0.875rem;
}

.footer-links a {
    color: inherit;
}

/* ===== Phase 4移行要素: 基本Flexboxレイアウト ===== */

/* 基本Flexコンテナ */
.survey-hero .question-count {
    display: flex;
    align-items: center;
    justify-content: center;
    width: fit-content;
}

.question-options {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);
}

.question-option {
    display: flex;
    align-items: center;
}

.result-actions {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 2rem;
    margin-top: 2rem;
}

.step-navigation {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: var(--spacing-xs);
    gap: 1.5rem;
    flex-wrap: wrap;
    flex-direction: row;
}

/* プログレス関連レイアウト */
.step-progress-container {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1rem;
}

.step-progress {
    flex: 1;
    width: 100%;
    height: var(--progress-height-thin);
    background-color: rgba(var(--primary-color-rgb, 102, 126, 234), 0.2);
    border-radius: var(--border-radius-small);
    overflow: hidden;
    margin-bottom: 0;
}

.step-progress-bar {
    height: 100%;
    background: linear-gradient(135deg, var(--primary-color) 0%, var(--primary-dark) 100%);
    border-radius: var(--border-radius-small);
    transition: width 0.3s ease;
    width: 0%;
}

.step-info {
    flex-shrink: 0;
    font-size: var(--font-size-sm);
    color: var(--text-secondary);
    font-weight: 600;
    background: rgba(var(--primary-color-rgb, 102, 126, 234), 0.1);
    padding: var(--step-info-padding-y) var(--step-info-padding-x);
    border-radius: 20px;
    min-width: 60px;
    text-align: center;
    margin-bottom: 0;
    white-space: nowrap;
}

/* 質問コンテナレイアウト */
.question-container {
    display: none;
    opacity: 0;
    transform: translateY(20px);
    transition: all 0.3s ease;
    margin-bottom: var(--question-container-margin);
    padding: 0;
    background: var(--background-overlay);
    border-radius: var(--border-radius-lg);
    border: 1px solid rgba(var(--primary-color-rgb, 102, 126, 234), 0.1);
    min-height: var(--min-height-question);
    flex-direction: column;
    justify-content: center;
    text-align: center;
}

.question-container.active {
    display: flex !important;
    opacity: 1;
    transform: translateY(0);
}

.question-container.all-mode {
    display: flex !important;
    opacity: 1;
    transform: translateY(0);
}

/* 送信ボタンレイアウト */
.final-submit {
    display: none;
    text-align: center;
    margin-top: 2rem;
}

.final-submit.show {
    display: block;
}

/* 日付入力レイアウト */
.date-inputs {
    display: flex;
    gap: var(--spacing-md);
    justify-content: center;
    max-width: 400px;
    margin: 0 auto;
    width: 100%;
}

.date-inputs .form-select {
    flex: 1;
    min-width: 0;
}

/* ===== テーマ装飾要素（共通） ===== */
/* 以下の装飾要素は全テーマで共通 */

/* ベース背景 */
body {
    background: linear-gradient(135deg, var(--primary-color) 0%, var(--primary-dark) 100%);
    background-attachment: fixed;
}

/* メインヒーロー装飾 */
.survey-hero {
    background: var(--background-light);
    backdrop-filter: blur(20px);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.3);
}

.survey-hero h1 {
    background: linear-gradient(135deg, var(--primary-color) 0%, var(--primary-dark) 100%);
    background-clip: text;
    -webkit-background-clip: text;
    color: transparent;
}

.survey-hero .description {
    color: var(--text-secondary);
}

.survey-hero .question-count {
    background: linear-gradient(135deg, var(--primary-color) 0%, var(--primary-dark) 100%);
    color: white;
    box-shadow: 0 10px 20px rgba(var(--primary-color-rgb), 0.3);
}

.survey-hero .start-button {
    background: linear-gradient(135deg, var(--primary-color) 0%, var(--primary-dark) 100%);
    color: white;
    box-shadow: 0 15px 30px rgba(var(--primary-color-rgb), 0.4);
}

.survey-hero .start-button:hover {
    transform: translateY(-3px);
    box-shadow: 0 20px 40px rgba(var(--primary-color-rgb), 0.5);
}

.survey-hero .start-button:before {
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
}

.survey-hero .start-button:hover:before {
    left: 100%;
}

/* カード装飾 */
.survey-card {
    background: var(--background-light);
    backdrop-filter: blur(20px);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.3);
}

/* フォーム装飾 */
.form-input,
.form-select {
    background: var(--background-overlay);
    backdrop-filter: blur(10px);
}

.form-input:focus,
.form-select:focus {
    border-color: var(--primary-color);
    background: white;
    box-shadow: 0 0 0 4px rgba(var(--primary-color-rgb), 0.1);
    transform: translateY(-2px);
}

/* ボタン装飾 */
.btn-primary {
    background: linear-gradient(135deg, var(--primary-color) 0%, var(--primary-dark) 100%);
    color: white;
    box-shadow: 0 6px 15px rgba(var(--primary-color-rgb), 0.3);
}

.btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 25px rgba(var(--primary-color-rgb), 0.4);
}

.btn-secondary {
    background: linear-gradient(135deg, var(--secondary-color) 0%, var(--secondary-dark) 100%);
    color: white;
    box-shadow: 0 6px 15px rgba(var(--secondary-color-rgb), 0.3);
}

.btn-secondary:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 25px rgba(var(--secondary-color-rgb), 0.4);
}

/* 質問装飾 */
.question-block:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
}

.question-title {
    background: linear-gradient(135deg, var(--primary-color) 0%, var(--primary-dark) 100%);
    background-clip: text;
    -webkit-background-clip: text;
    color: transparent;
}

.question-option {
    background: var(--background-overlay);
    backdrop-filter: blur(10px);
}

.question-option:hover {
    border-color: var(--primary-color);
    background: white;
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(var(--primary-color-rgb), 0.2);
}

.question-option-text {
    color: var(--text-primary);
}

/* 進捗バー装飾 */
.progress-bar {
    background: var(--background-light);
    backdrop-filter: blur(20px);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
}

.progress-step.active .progress-step-icon {
    background: linear-gradient(135deg, var(--primary-color) 0%, var(--primary-dark) 100%);
    box-shadow: 0 5px 15px rgba(var(--primary-color-rgb), 0.4);
}

.progress-step.completed .progress-step-icon {
    background: linear-gradient(135deg, var(--accent-color) 0%, var(--accent-dark) 100%);
    box-shadow: 0 5px 15px rgba(72, 187, 120, 0.4);
}

/* フッター装飾 */
.footer {
    background: var(--background-light);
    backdrop-filter: blur(20px);
}

.footer-dark {
    background: rgba(45, 55, 72, 0.95);
    backdrop-filter: blur(20px);
    color: var(--neutral-300);
}

.footer-links a:hover {
    color: var(--primary-color);
    transform: translateY(-2px);
}

/* ===== 共通ページコンテナ ===== */
.profile-content .page-container {
    min-height: auto !important;
    margin: var(--progress-step-margin) auto !important;
}

.intro-content .survey-card,
.profile-content .survey-card {
    margin: 0 auto !important;
}

/* ===== ページコンテナ統一（最終版） ===== */
/* すべてのページで統一された幅と余白を強制適用 */
.page-container,
.intro-page .page-container,
.survey-page .page-container,
.results-page .page-container,
.profile-page .page-container,
.intro-content .page-container,
.profile-content .page-container,
.questions-content .page-container,
.results-content .page-container {
    max-width: 48rem !important;
    min-width: 20rem !important;
    width: 100% !important;
    margin: auto !important;
    padding: 1rem !important;
    min-height: calc(100vh - 4rem) !important;
}

/* survey-cardも統一幅を強制適用 */
.survey-card,
.intro-page .survey-card,
.survey-page .survey-card,
.results-page .survey-card,
.profile-page .survey-card,
.intro-content .survey-card,
.profile-content .survey-card,
.questions-content .survey-card,
.results-content .survey-card {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 18rem !important;
    margin: 0 !important;
    box-sizing: border-box !important;
}

.survey-card,
.question-block,
.result-card {
    border: 1px solid rgba(255, 255, 255, 0.3);
}

/* ===== レスポンシブデザイン（統一版） ===== */

/* ===== モバイル（480px以下） ===== */
@media (max-width: 480px) {

    /* === 画像 === */
    .intro-main-image {
        max-height: 200px;
    }

    .question-image,
    .result-image {
        max-height: 200px;
    }

    .question-image-container {
        margin: var(--spacing-md) 0;
        padding: var(--spacing-xs);
    }

    .question-image-container .question-image {
        max-height: 180px;
    }

    .intro-image-container {
        padding: var(--spacing-sm);
    }

    /* === レイアウト === */
    .page-container,
    .intro-page .page-container,
    .survey-page .page-container,
    .results-page .page-container {
        margin: var(--spacing-sm) auto;
        padding: 0 var(--spacing-sm);
        max-width: 100%;
    }

    .survey-hero,
    .card,
    .survey-card {
        padding: var(--spacing-md);
        margin: var(--spacing-sm) auto;
    }

    /* === タイポグラフィ === */
    .survey-hero h1,
    .intro-page .intro-title,
    .result-title {
        font-size: var(--font-size-xl);
    }

    .results-page .age-value,
    .results-page .score-value {
        font-size: var(--font-size-xl);
    }

    .results-page .type-value {
        font-size: var(--font-size-large);
    }

    /* === ナビゲーション・ボタン === */
    .action-buttons {
        flex-direction: column;
        align-items: center;
        gap: var(--spacing-sm);
    }

    .action-buttons .btn {
        width: 100%;
        max-width: 280px;
    }

    .step-navigation {
        flex-direction: column;
        gap: var(--spacing-sm);
    }

    .step-navigation .btn {
        width: 100%;
        max-width: 300px;
    }

    /* === その他要素 === */
    .date-inputs {
        flex-direction: column;
        gap: var(--spacing-sm);
    }

    .date-inputs .form-select {
        width: 100%;
    }

    /* === プライバシー同意セクション === */
    .privacy-toggle-header {
        flex-direction: column;
        align-items: stretch;
        gap: var(--spacing-md);
        text-align: center;
        padding: var(--spacing-sm);
    }

    .privacy-main-consent {
        justify-content: center;
    }
}

/* ===== タブレット（768px以下） ===== */
@media (max-width: 768px) {

    /* === 画像 === */
    .intro-main-image {
        max-height: 300px;
    }

    .question-image {
        max-height: 250px;
    }

    .question-image-container {
        margin: var(--spacing-lg) 0;
        padding: var(--spacing-sm);
    }

    .question-image-container .question-image {
        max-height: 220px;
    }

    .result-image {
        max-height: 300px;
    }

    /* === レイアウト === */
    .page-container {
        padding: var(--spacing-md);
    }

    .page-container,
    .intro-page .page-container,
    .survey-page .page-container,
    .results-page .page-container {
        margin: var(--spacing-md) auto;
        padding: 0 var(--spacing-md);
        max-width: 100%;
    }

    .survey-hero,
    .card,
    .survey-card {
        padding: var(--spacing-lg);
        margin: var(--spacing-md) auto;
    }

    /* === タイポグラフィ === */
    .survey-hero h1,
    .result-title {
        font-size: var(--font-size-2xl);
    }

    .intro-page .intro-title,
    .results-page .result-title {
        font-size: var(--font-size-xl);
    }

    .results-page .age-value,
    .results-page .score-value {
        font-size: var(--font-size-2xl);
    }

    .results-page .type-value {
        font-size: var(--font-size-xl);
    }

    /* === ナビゲーション・ボタン === */
    .action-buttons {
        flex-direction: column;
        align-items: center;
        gap: var(--spacing-md);
    }

    .action-buttons .btn {
        width: 100%;
        max-width: 300px;
    }

    .intro-page .action-buttons {
        margin-top: var(--spacing-2xl);
    }

    .step-navigation {
        flex-direction: column;
        gap: var(--spacing-md);
    }

    .step-navigation .btn {
        width: 100%;
        max-width: 350px;
    }

    /* === フォーム・質問 === */
    .question-options {
        gap: var(--spacing-sm);
    }

    .question-option {
        padding: var(--spacing-md);
    }

    /* === 特定セクション === */
    .description-section {
        padding: var(--spacing-lg);
        margin: var(--spacing-lg) 0;
    }

    .research-references-section {
        margin: var(--spacing-lg) 0;
    }

    .research-toggle-header {
        padding: var(--spacing-sm);
    }

    .research-content {
        padding: var(--spacing-lg);
    }

    .reference-item {
        padding: var(--spacing-md);
        margin-bottom: var(--spacing-lg);
    }

    /* === 結果ページ === */
    .result-actions {
        flex-direction: column;
        gap: var(--spacing-md);
    }

    .results-page .action-buttons .btn {
        width: 100%;
        max-width: 280px;
    }

    /* === フッター === */
    .footer-content {
        flex-direction: column;
        gap: var(--spacing-md);
        text-align: center;
    }

    .footer-links {
        justify-content: center;
    }

    /* === プライバシー同意セクション === */
    .privacy-toggle-header {
        flex-direction: column;
        align-items: stretch;
        gap: var(--spacing-sm);
        text-align: center;
    }

    .privacy-main-consent {
        justify-content: center;
    }
}

/* ===== デスクトップ（769px以上） ===== */
@media (min-width: 769px) {

    /* === ナビゲーション === */
    .step-navigation {
        flex-direction: row !important;
        justify-content: center !important;
        align-items: center !important;
        gap: var(--spacing-lg) !important;
    }

    .step-navigation .btn {
        width: auto !important;
        min-width: var(--min-width-button) !important;
    }

    /* === 画像 === */

    /* === レイアウト === */
    .action-buttons {
        flex-direction: row;
        justify-content: center;
        gap: var(--spacing-xl);
    }

    .action-buttons .btn {
        width: auto;
        min-width: var(--min-width-button-lg);
    }

    /* === 質問 === */
    .question-options {
        gap: var(--spacing-md);
    }

    .question-option:hover {
        transform: translateY(-2px);
    }

    /* === 結果ページ === */
    .result-actions {
        flex-direction: row;
        justify-content: center;
        gap: var(--spacing-xl);
    }

    /* === その他のホバー効果 === */
    .btn:hover {
        transform: translateY(-2px);
    }

    .question-block:hover {
        transform: translateY(-2px);
    }
}