/* ==================================================================== */
/* 全体共通・基本スタイル */
/* ==================================================================== */

:root {
    /* カラーパレット */
    --primary-color: #007bff;        /* 青系: 主要なアクション色 (例: 次へ、開始、送信ボタン、フォーカス時の枠線、プログレスバー、選択済みチェック/ラジオ) */
    --secondary-color: #6c757d;      /* グレー系: 二次的な要素色 (例: 戻るボタンの背景、ラジオ/チェックボックスの枠線) */
    --accent-color: #007bff;         /* 青系: 主要なアクション色と統一 (送信ボタンなど) */

    --background-color: #f8f9fa;     /* 白に近いグレー: 全体の背景色 */
    --card-background-color: #ffffff;/* 白: カードの背景色 */
    --border-color: #e0e0e0;         /* 薄いグレー: 境界線の色 */
    --text-color: #212529;           /* 濃いグレー: 通常のテキスト色 */
    --light-text-color: #6c757d;     /* 中間のグレー: 補助的なテキスト色 */
    --focus-shadow-color: rgba(0, 123, 255, 0.25); /* 青の透明色: フォーカス時のシャドウ色 */
}

body {
    font-family: 'Segoe UI', 'BIZ UDPGothic', 'Hiragino Kaku Gothic ProN', Meiryo, sans-serif;
    line-height: 1.6;
    color: var(--text-color);
    background-color: var(--background-color);
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    padding-bottom: 80px;
}

.container {
    max-width: 900px;
    margin: 20px auto;
    padding: 0 15px;
    box-sizing: border-box;
}

li {
    overflow-wrap: anywhere; /* ボックスからはみ出す場合に単語の途中で改行 */
}

/* ルビの表示調整 */
/* ruby要素全体の設定 */
ruby {
    line-height: 1; /* ルビ要素自体の行高を1に設定し、余分なスペースをなくす */
    vertical-align: baseline; /* ルビ要素全体のベースラインを周囲のテキストと合わせる */
    /*display: inline-block; /* インラインブロックとして扱い、より厳密な制御を可能にする */
}
rt {
    font-size: 0.4em; /* ルビの文字を親文字の40%のサイズにする */
    line-height: 1;   /* ルビの行高を1に設定 */
    text-align: center; /* ルビのテキストを中央揃えにする */
    position: relative; /* 相対位置指定を有効に */
    top: -0.1em; /* ルビと親文字の距離を微調整し、少し上に詰める */
}

/* ラベル内のテキストのベースラインを揃えるための調整（必要に応じて） */
.option-list label,
.checkbox-group label,
.radio-group label {
    display: flex; /* Flexboxを使って内容を垂直方向中央に揃える */
    align-items: flex-start; /* アイテムを垂直方向中央に揃える */
    line-height: 1.5; /* ラベル全体の行高を設定して安定させる */
    flex-wrap: wrap;
}

/* ラジオボタンやチェックボックスの入力要素とテキストの間の余白調整 */
.option-list input[type="radio"],
.checkbox-group input[type="checkbox"],
.radio-group input[type="radio"],
.radio-group input[type="checkbox"] {
    margin-right: 8px; /* 入力要素とテキストの間に余白を追加 */
    vertical-align: middle;
}

/* ==================================================================== */
/* セクションとカードのスタイル */
/* ==================================================================== */

.section {
    display: none;
    padding: 20px 0;
}

.section.active {
    display: block;
}

.card {
    background-color: var(--card-background-color);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 25px;
    margin-bottom: 20px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.05);
}

h2, h3 {
    color: var(--text-color); /* 見出しも濃いグレーに */
    font-weight: 600;
    margin-top: 0;
    margin-bottom: 15px;
    line-height: 1.4;
}

h2 {
    font-size: 1.8rem;
}

h3 {
    font-size: 1.4rem;
}

p {
    font-size: 1rem;
    margin-bottom: 15px;
    color: var(--light-text-color);
}

/* ==================================================================== */
/* プログレスバーのスタイル */
/* ==================================================================== */

.fixed-progress-header {
    position: fixed; /* 画面に固定 */
    bottom: 0;
    left: 0;
    width: 100%;
    background-color: var(--card-background-color); /* 白い背景 */
    padding: 10px 15px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* 軽い影 */
    z-index: 1000; /* 他の要素より手前に表示 */
    box-sizing: border-box;
}

.progress-labels {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 5px;
    font-size: 0.85rem;
    color: var(--light-text-color);
}

.progress-text {
    font-weight: bold;
    color: var(--primary-color);
}

.progress-container {
    width: 100%;
    background-color: #e9ecef; /* 少し濃い目のグレー */
    border-radius: 5px;
    height: 10px;
    overflow: hidden; /* プログレスバーの丸みを維持 */
}

.progress-bar {
    height: 100%;
    width: 0%;
    background-color: var(--primary-color); /* 青 */
    border-radius: 5px;
    transition: width 0.4s ease-in-out;
}

/* bodyのパディングを調整して、固定ヘッダーでコンテンツが隠れないようにする */
body {
    padding-top: 70px; /* fixed-progress-headerの高さに合わせて調整 */
    /* その他の既存のbodyスタイルは維持 */
    font-family: 'Segoe UI', 'BIZ UDPGothic', 'Hiragino Kaku Gothic ProN', Meiryo, sans-serif;
    line-height: 1.6;
    color: var(--text-color);
    background-color: var(--background-color);
    margin: 0;
    /* padding: 0; <-- ここは削除または上書きされます */
    box-sizing: border-box;
}

@media (max-width: 767px) {
    .fixed-progress-header {
        padding: 8px 10px;
    }

    body {
        padding-top: 65px; /* モバイルでの調整 */
    }
}

/* ==================================================================== */
/* ボタンのスタイル */
/* ==================================================================== */

.navigation-buttons {
    display: flex;
    justify-content: space-between;
    gap: 15px;
    margin-top: 25px;
}

.navigation-buttons button {
    padding: 12px 25px;
    border: none;
    border-radius: 5px;
    font-size: 1.1rem;
    cursor: pointer;
    transition: background-color 0.3s ease, transform 0.2s ease;
    flex-grow: 1;
    min-width: 120px;
}

.navigation-buttons button:hover {
    transform: translateY(-2px);
}

.navigation-buttons .prev-section-button {
    background-color: var(--secondary-color); /* グレー */
    color: white;
}

.navigation-buttons .prev-section-button:hover {
    background-color: #5a6268; /* 濃いグレー */
}

.navigation-buttons .next-section-button {
    background-color: var(--primary-color); /* 青 */
    color: white;
}

.navigation-buttons .next-section-button:hover {
    background-color: #0056b3; /* 濃い青 */
}

#startSurveyButton,
#submitSurveyButton {
    background-color: var(--accent-color); /* 青 */
    color: white;
    width: 100%;
    padding: 12px 25px;
    border: none;
    border-radius: 5px;
    font-size: 1.1rem;
    cursor: pointer;
    transition: background-color 0.3s ease, transform 0.2s ease;
    margin-top: 20px;
}

#startSurveyButton:hover,
#submitSurveyButton:hover {
    background-color: #0056b3; /* 濃い青 */
    transform: translateY(-2px);
}

/* ==================================================================== */
/* フォーム要素のスタイル統一 */
/* ==================================================================== */

/* テキスト入力フィールド (input[type="text"]) */
input[type="text"],
input[type="number"],
input[type="email"],
input[type="password"] {
    width: 100%;
    padding: 12px 15px;
    margin-bottom: 20px;
    border: 1px solid var(--border-color);
    border-radius: 5px;
    font-size: 1rem;
    box-sizing: border-box;
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
    background-color: var(--card-background-color); /* 背景色を白に統一 */
    color: var(--text-color); /* テキスト色を統一 */
}

input[type="text"]:focus,
input[type="number"]:focus,
input[type="email"]:focus,
input[type="password"]:focus {
    border-color: var(--primary-color); /* 青 */
    box-shadow: 0 0 0 3px var(--focus-shadow-color);
    outline: none;
}

/* テキストエリア (textarea) */
textarea {
    width: 100%;
    padding: 12px 15px;
    margin-bottom: 20px;
    border: 1px solid var(--border-color);
    border-radius: 5px;
    font-size: 1rem;
    line-height: 1.5;
    background-color: var(--card-background-color); /* 白 */
    resize: vertical;
    min-height: 100px;
    box-sizing: border-box;
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
    font-family: inherit;
    color: var(--text-color); /* テキスト色を統一 */
}

textarea:focus {
    border-color: var(--primary-color); /* 青 */
    box-shadow: 0 0 0 3px var(--focus-shadow-color);
    outline: none;
}

/* プルダウン (select) */
select {
    width: 100%;
    padding: 12px 15px;
    margin-bottom: 20px;
    border: 1px solid var(--border-color);
    border-radius: 5px;
    font-size: 1rem;
    line-height: 1.5;
    background-color: var(--card-background-color); /* 白 */
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    /* カスタム矢印アイコンの色をグレーに調整 */
    background-image: url('data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%236c757d%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-25.7-1.4L146.2%20174.4%2034.4%2068a17.6%2017.6%200%200%0%200-25.7%201.4c-7.7%207.7-7.7%2020.3%200%2028l118.4%20118.4c4.7%204.7%2010.9%207%2017.1%207s12.4-2.3%2017.1-7l118.4-118.4c7.7-7.7%207.7-20.3%200-28z%22%2F%3E%3C%2Fsvg%3E');
    background-repeat: no-repeat;
    background-position: right 15px center;
    background-size: 12px;
    cursor: pointer;
    box-sizing: border-box;
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
    color: var(--text-color); /* テキスト色を統一 */
}

select:focus {
    border-color: var(--primary-color); /* 青 */
    box-shadow: 0 0 0 3px var(--focus-shadow-color);
    outline: none;
}

/* ==================================================================== */
/* ラジオボタンとチェックボックスのスタイル統一 */
/* ==================================================================== */

/* ラジオボタンとチェックボックスのグループ */
.radio-group,
.checkbox-group {
    list-style: none;
    padding: 0;
    margin: 0 0 20px 0;
}

.radio-group li,
.checkbox-group li {
    margin-bottom: 8px;
}

.radio-group label,
.checkbox-group label {
    display: flex;
    align-items: baseline;
    padding: 12px 15px;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    cursor: pointer;
    background-color: var(--card-background-color); /* 白 */
    transition: background-color 0.2s ease, border-color 0.2s ease;
    color: var(--text-color); /* テキスト色を統一 */
}

.radio-group label:hover,
.checkbox-group label:hover {
    background-color: #f5f5f5; /* 少し薄いグレー */
    border-color: #cccccc; /* 中間グレー */
}

/* ul class="option-list" にリストマーカーを削除するスタイル */
/* その他のラジオボタン/チェックボックスのスタイルも適用できるように調整 */
.option-list {
    list-style: none; /* リストのデフォルトのマークを削除 */
    padding: 0;
    margin: 0 0 20px 0;
}

.option-list li {
    margin-bottom: 8px;
}

.option-list label {
    display: flex;
    align-items: baseline;
    padding: 12px 15px;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    cursor: pointer;
    background-color: var(--card-background-color); /* 白 */
    transition: background-color 0.2s ease, border-color 0.2s ease;
    color: var(--text-color); /* テキスト色を統一 */
}

.option-list label:hover {
    background-color: #f5f5f5; /* 少し薄いグレー */
    border-color: #cccccc; /* 中間グレー */
}

/* option-list 内のラジオボタンとチェックボックスの共通スタイル */
.option-list input[type="radio"],
.option-list input[type="checkbox"] {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    width: 22px;
    height: 22px;
    border: 2px solid var(--secondary-color); /* グレー */
    border-radius: 50%; /* ラジオボタンは丸く */
    margin-right: 12px;
    display: grid;
    place-content: center;
    flex-shrink: 0;
    transition: all 0.2s ease;
}

/* チェックボックスの形 */
.option-list input[type="checkbox"] {
    border-radius: 4px; /* チェックボックスは角丸の四角 */
}

/* ラジオボタンが選択された時のスタイル */
.option-list input[type="radio"]:checked {
    background-color: var(--primary-color); /* 青 */
    border-color: var(--primary-color); /* 青 */
    place-content: center;
}

.option-list input[type="radio"]:checked::before {
    content: "";
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background-color: white; /* 内側の白い丸 */
    transform: scale(1);
    transition: transform 0.2s ease;
}

/* チェックボックスが選択された時のスタイル */
.option-list input[type="checkbox"]:checked {
    background-color: var(--primary-color); /* 青 */
    border-color: var(--primary-color); /* 青 */
    place-content: center;
}

.option-list input[type="checkbox"]:checked::before {
    content: "";
    width: 12px;
    height: 12px;
    box-shadow: inset 1em 1em white; /* 内側の白いチェックマーク */
    clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 85% 0%, 39% 56%);
    transform: scale(1);
    transition: transform 0.2s ease;
}

/* 未選択時の内側の要素は非表示 */
.option-list input[type="radio"]::before,
.option-list input[type="checkbox"]::before {
    transform: scale(0);
}

/* 選択済みのテキストの強調（任意） */
/* 選択済みの項目を太字で強調 */
.option-list label:has(input[type="radio"]:checked),
.option-list label:has(input[type="checkbox"]:checked) {
    font-weight: 600;
    color: var(--text-color);
}

/* その他入力欄の基本的なスタイル */
.other-text-input {
    width: calc(100% - 20px); /* 親要素のパディングを考慮 */
    margin-top: 10px; /* 上の要素との間隔 */
    padding: 10px;
    border: 1px solid var(--border-color);
    border-radius: 5px;
    box-sizing: border-box; /* パディングとボーダーを幅に含める */
    resize: vertical; /* 縦方向のみリサイズ可能にする */
    font-size: 0.95rem;
    color: var(--text-color);
}

.other-text-input:focus {
    outline: none;
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px var(--focus-shadow-color);
}

/* ==================================================================== */
/* 特定の質問のスタイル調整 */
/* ==================================================================== */

/* 質問18の動的に生成されるプルダウンとテキストエリアのコンテナ */
#dissatisfactionDetails > div {
    margin-top: 15px;
    padding-top: 15px;
    border-top: 1px dashed var(--border-color);
}
#dissatisfactionDetails > div:first-child {
    border-top: none;
    margin-top: 0;
    padding-top: 0;
}

/* カードをグレーアウトして無効にするスタイル */
.card.disabled-card {
    background-color: #f0f0f0; /* 少し明るめのグレー */
    color: #a0a0a0; /* テキストを薄いグレーに */
    pointer-events: none; /* クリックイベントを無効にする */
    opacity: 0.8; /* 少し透明度を加えてグレーアウト感を出す */
}

/* disabled状態のチェックボックス/ラジオボタンを少し薄くする */
.card.disabled-card input[type="checkbox"],
.card.disabled-card input[type="radio"],
.card.disabled-card textarea {
    opacity: 0.6; /* 入力要素も少し薄くする */
    cursor: not-allowed; /* カーソルを「禁止」マークに */
}


/* ==================================================================== */
/* レスポンシブデザインのためのメディアクエリ */
/* ==================================================================== */

/* スマートフォン (〜767px) */
@media (max-width: 767px) {
    body {
        font-size: 0.95rem;
    }

    .container {
        margin: 10px auto;
        padding: 0 10px;
    }

    .card {
        padding: 18px;
        margin-bottom: 15px;
    }

    h2 {
        font-size: 1.5rem;
    }

    h3 {
        font-size: 1.2rem;
    }

    .navigation-buttons {
        flex-direction: column;
        gap: 10px;
    }

    .navigation-buttons button,
    #startSurveyButton,
    #submitSurveyButton {
        width: 100%;
        font-size: 1rem;
        padding: 10px 20px;
    }

    input[type="text"], textarea, select,
    .radio-group label, .checkbox-group label {
        padding: 10px 12px;
        font-size: 0.95rem;
    }

    .radio-group input[type="radio"],
    .checkbox-group input[type="checkbox"] {
        width: 20px;
        height: 20px;
        margin-right: 10px;
    }
}

/* タブレット (768px 〜 1023px) */
@media (min-width: 768px) and (max-width: 1023px) {
    .container {
        padding: 0 20px;
    }

    .card {
        padding: 22px;
    }

    h2 {
        font-size: 1.6rem;
    }

    h3 {
        font-size: 1.3rem;
    }

    .navigation-buttons {
        flex-direction: row;
        gap: 20px;
    }
}

/* デスクトップ (1024px以上) */
@media (min-width: 1024px) {
    /* 必要であれば、デスクトップ固有のスタイルをここに記述 */
}

/* 無効化されたカードのスタイルをさらに明確化 */
.card.disabled-card {
    background-color: #f0f0f0; /* 少し明るめのグレー */
    color: #a0a0a0; /* カード内の直接のテキスト色 */
    pointer-events: none; /* クリックイベントを無効にする */
    opacity: 0.8; /* 少し透明度を加えてグレーアウト感を出す */
}

/* disabled-card 内の入力要素のスタイルを強制 */
.card.disabled-card input[type="text"],
.card.disabled-card input[type="number"],
.card.disabled-card input[type="email"],
.card.disabled-card input[type="password"],
.card.disabled-card textarea,
.card.disabled-card select {
    opacity: 0.6 !important; /* 不透明度を強制 */
    cursor: not-allowed !important; /* カーソルを禁止マークに強制 */
    background-color: #e9ecef !important; /* 灰色の背景色を強制 */
    border-color: #d0d0d0 !important; /* 灰色の枠線を強制 */
}

/* 無効化されたラベルのスタイルをさらに明確化 */
/* .radio-group label, .checkbox-group label よりも詳細度を高く設定 */
.radio-group label.disabled-label,
.checkbox-group label.disabled-label,
.option-list label.disabled-label {
    color: #a0a0a0 !important; /* テキストの色を薄い灰色に強制 */
    cursor: not-allowed !important; /* カーソルを禁止マークに強制 */
    background-color: #f8f8f8 !important; /* 背景色を少し明るいグレーに強制 */
    border-color: #e0e0e0 !important; /* 枠線の色を強制 */
}

/* 無効化されたラベル内のラジオ/チェックボックス入力要素のスタイルを強制 */
.radio-group label.disabled-label input[type="radio"],
.checkbox-group label.disabled-label input[type="checkbox"],
.option-list label.disabled-label input[type="radio"],
.option-list label.disabled-label input[type="checkbox"] {
    border-color: #a0a0a0 !important; /* 枠線を薄い灰色に強制 */
    background-color: #e9ecef !important; /* 背景色を灰色の強制 */
}

/* 無効化された状態でチェックされているラジオ/チェックボックスの内側の印のスタイルを強制 */
.radio-group label.disabled-label input[type="radio"]:checked::before,
.checkbox-group label.disabled-label input[type="checkbox"]:checked::before,
.option-list label.disabled-label input[type="radio"]:checked::before,
.option-list label.disabled-label input[type="checkbox"]:checked::before {
    background-color: #cccccc !important; /* 内側の印を灰色に強制 */
    box-shadow: none !important; /* シャドウを削除 */
    opacity: 0.7 !important; /* 不透明度を強制 */
}

/* 無効化された入力フィールドのブラウザデフォルトスタイルを一部上書き */
input:disabled,
textarea:disabled,
select:disabled {
    /* ブラウザによってはdisabled時に独自のスタイルが適用されるため、必要に応じて上書き */
    -webkit-opacity: 1; /* iOS Safariなどで opacity が低くなるのを防ぐ */
    opacity: 1; /* opacity は上で設定しているので、ここでは1に戻し、上で設定したopacityを優先させる */
}

/* 無効化されてチェックされているラジオ/チェックボックスのスタイルを強制 */
input[type="radio"]:checked:disabled,
input[type="checkbox"]:checked:disabled {
    background-color: #cccccc !important; /* チェック時の背景色を灰色に強制 */
    border-color: #cccccc !important; /* チェック時の枠線を灰色に強制 */
}

/* ==================================================================== */
/* 【A-2】未回答項目のハイライト                                        */
/* script.js が .error-border を付与するがCSS未定義だったため追加。      */
/* 色のみに依存しないよう「未回答」ラベルも併記する。                    */
/* ==================================================================== */
.error-border {
    border: 2px solid #d93025 !important;
    background-color: #fdf3f2;
    box-shadow: 0 0 0 3px rgba(217, 48, 37, 0.15);
}

.error-border::before {
    content: "未回答";
    display: inline-block;
    margin-bottom: 8px;
    padding: 2px 10px;
    font-size: 0.8rem;
    font-weight: bold;
    color: #ffffff;
    background-color: #d93025;
    border-radius: 3px;
}

/* ==================================================================== */
/* 【A-10】キーボード操作時のフォーカス表示                             */
/* ラジオ・チェックボックス・ボタンは outline が消されており、           */
/* キーボードでの現在位置が分からなかったため追加。                      */
/* :focus-visible なのでマウス操作時には枠は出ない。                    */
/* ==================================================================== */
.option-list input[type="radio"]:focus-visible,
.option-list input[type="checkbox"]:focus-visible,
.radio-group input[type="radio"]:focus-visible,
.checkbox-group input[type="checkbox"]:focus-visible,
button:focus-visible {
    outline: 3px solid #1a73e8;
    outline-offset: 2px;
}

.option-list label:focus-within {
    background-color: #eaf1fb;
}

/* 【A-6】ログインIDの記載場所ヒント */
.id-hint {
    display: inline-block;
    margin-top: 4px;
    font-size: 0.85rem;
    font-weight: normal;
    color: #5f6368;
}

/* ==================================================================== */
/* 【B-18】上部の不要な余白を除去                                       */
/* 進捗バーは position:fixed; bottom:0 で画面下部に固定されているのに、  */
/* body に padding-top が入っていたため、全ページ上部に65〜70pxの        */
/* 空白ができていた。下部の padding-bottom は必要なので残す。            */
/* ==================================================================== */
body {
    padding-top: 0;
}

@media (max-width: 767px) {
    body {
        padding-top: 0;
    }
}

/* ==================================================================== */
/* 【B-17】320px幅（iPhone SE 第1世代など）での横スクロールを解消      */
/* 表題に white-space:nowrap が付いており、323pxになって画面に収まらず  */
/* 横スクロールが発生していた。広い画面では従来どおり1行で表示する。    */
/* 文言は変更していない。                                              */
/* ==================================================================== */
.survey-title {
    white-space: nowrap;
}

@media (max-width: 360px) {
    .survey-title {
        white-space: normal;
    }
}