/* スマホ最適化（原口先生の調査向け）
   対象は乳幼児を育てた親御さんで、回答はスマホが中心。
   既定テーマ（fruity_twentythree）は responsive だが、
   6 件法のラジオがタップしづらく、設問文と選択肢の区別も弱い。 */

/* --- 1. タップ領域を広げる ------------------------------------------- */
/* 既定はラベル部分しか反応せず、指では外しやすい。行全体を押せるようにする。 */
.answer-item label,
.question-container .form-check-label {
    display: block;
    width: 100%;
    padding: 0.85rem 0.6rem 0.85rem 2.6rem;
    margin: 0;
    min-height: 3rem;          /* 指で押せる最小の高さ */
    line-height: 1.5;
    border-radius: 8px;
    cursor: pointer;
}
.answer-item { margin-bottom: 0.35rem; }

/* ラジオ・チェックボックス自体も大きく */
.answer-item input[type="radio"],
.answer-item input[type="checkbox"] {
    width: 1.35rem;
    height: 1.35rem;
    margin-top: 0.85rem;
    margin-left: 0.6rem;
}

/* 選択中を見て分かるように */
.answer-item input:checked + label,
.answer-item label:has(input:checked) {
    background: #e8f1fb;
    font-weight: 600;
}

/* --- 2. 設問と選択肢のコントラストを上げる --------------------------- */
.question-title-container,
.question-text {
    font-size: 1.08rem;
    line-height: 1.7;
    font-weight: 600;
    margin-bottom: 0.9rem;
}
.question-container {
    padding: 1.1rem 0.9rem;
    margin-bottom: 1.3rem;
    border-radius: 10px;
    background: #fff;
}
/* 設問どうしの境目を作る。長い尺度で今どこを答えているか見失わないため */
.question-container + .question-container {
    border-top: 6px solid #f0f2f5;
}

/* --- 3. 数値入力でテンキーを出す補助 --------------------------------- */
input[type="text"].numeric,
input[type="number"] {
    font-size: 1.1rem;
    padding: 0.7rem;
    max-width: 10rem;
}

/* --- 4. ナビゲーションを押しやすく ----------------------------------- */
#navigator-container .btn,
.navigator .btn {
    min-height: 3.2rem;
    font-size: 1.05rem;
    padding: 0.8rem 1.2rem;
}

/* --- 5. 画面幅を使い切る（既定は左右の余白が大きい） ----------------- */
@media (max-width: 640px) {
    .col-centered, #main-col, .space-col { padding-left: 0.5rem; padding-right: 0.5rem; }
    .question-container { padding-left: 0.7rem; padding-right: 0.7rem; }
    body { font-size: 1rem; }
}

/* --- 6. 長い選択肢（治療方針の 4 択）の折り返し ---------------------- */
.answer-item label { word-break: break-word; overflow-wrap: anywhere; }