/* 質問のスタイル */
.dg-question-title, .custom-question-title {
    font-size: 20px;
    color: #4CAF50; /* 柔らかいグリーン */
    margin-bottom: 20px;
    font-weight: bold;
    text-align: center;
    border-bottom: 2px solid #A5D6A7; /* グリーンの下線 */
    padding-bottom: 10px;
    font-family: 'Helvetica Neue', sans-serif; /* 柔らかいフォント */
}

/* 選択肢のスタイル */
#dg-diagnosis-question-container label, .custom-answer-label {
    display: block !important;
    font-size: 16px !important; /* フォントサイズを16pxに統一 */
    padding: 8px !important;
    border-radius: 3px !important;
    border: 1px solid #d6e9ca !important; /* 緑の枠線 */
    transition: background-color 0.3s ease, border-color 0.3s ease !important;
    text-align: left !important;
    position: relative;
    cursor: pointer;
    margin-bottom: 6px !important; /* ラベル同士の余白を調整 */
}

/* 次へボタンのスタイル */
.custom-next-button, #dg-next-btn {
    padding: 12px 25px;
    background-color: #4CAF50; /* グリーン */
    color: white;
    border-radius: 30px; /* 丸みを帯びたボタン */
    border: none;
    cursor: pointer;
    font-size: 18px;
    font-family: 'Helvetica Neue', sans-serif;
    display: block;
    margin: 20px auto;
    text-align: center;
    transition: background-color 0.3s ease;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* 軽いシャドウ */
    width: 50%; /* ボタンの幅を枠内に収める */
}

.custom-next-button:hover, #dg-next-btn:hover{
    background-color: #388E3C; /* ホバー時に少し濃いグリーン */
}

/* 「もう一度診断する」ボタンのスタイル */
#dg-restart-btn {
    padding: 8px 16px; /* 小さめのサイズ */
    background-color: #ccc; /* グレー */
    color: #333; /* 文字色を少し暗めに */
    border-radius: 20px; /* 丸みを帯びたボタン */
    border: none;
    cursor: pointer;
    font-size: 14px; /* 小さめのフォントサイズ */
    display: block;
    margin: 20px auto;
    text-align: center;
    transition: background-color 0.3s ease;
}

/* ホバー時のスタイル */
#dg-restart-btn:hover {
    background-color: #bbb; /* 少し濃いグレー */
}


/* ラジオボタンのスタイル */
#dg-diagnosis-question-container input[type="radio"] {
    margin-right: 10px;
}

/* 選択された場合の背景やボーダーの色 */
#dg-diagnosis-question-container input[type="radio"]:checked + label {
    background-color: #E0F7FA; /* 選択時の背景色を変更 */
    border-color: #4CAF50; /* 選択時の枠線を濃いグリーンに */
}

/* ラジオボタンにホバー時のエフェクト */
#dg-diagnosis-question-container label:hover {
    background-color: #F1F8E9; /* ホバー時の背景色 */
    border-color: #AED581; /* ホバー時の枠線 */
}

/* 質問コンテナのスタイル */
#dg-diagnosis-question-container {
    margin: 0 auto;
    padding: 25px;
    border: 1px solid #d6e9ca; /* 薄いグリーンの枠線 */
    border-radius: 5px;
}

/* ボタンを中央に配置 */
#dg-diagnosis-question-container .dg-button-container {
    text-align: center;
}