.DiagnosticQuestionsContainer {
    display: grid;
    gap: 30px;
    width: 100%;
    max-width: 700px;
    margin: auto;

    .DiagCard {
        background-color: #fff;
        border-radius: 10px;

        width: 100%;
        max-width: 700px;
        margin: auto;
        padding: 20px;

        display: grid;
        gap: 20px;

        .Number {
            color: #777;
        }
        .Question {
            font-size: 1.2em;
        }
        .QuestionSubText {
            font-size: 0.9em;
            color: #777;
        }
        .Badge {
            font-size: 0.8em;
            color: #777;
            padding: 3px 10px;
            border-radius: 5px;
            border: 1px solid #ccc;
            width: fit-content;
        }
        .Badge.Required {
            border: none;
            background-color: var(--NoticeColor);
            color: #fff;
        }
        .Answer {
            display: grid;
            gap: 10px;
            /* grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); */

            .AnswerOption {
                display: grid;
                cursor: pointer;
                position: relative;

                input {
                    /* display: none; */

                    /* reportValidityのターゲットとして動作させるため */
                    position: absolute;
                    left: -10000px;
                }

                .ContentBox {
                    display: grid;
                    gap: 15px;
                    grid-template-columns: 20px 1fr;
                    padding: 10px;
                    border-radius: 5px;
                    background-color: #eee;
                    transition: all 0.2s;

                    .Label {
                        color: #fff;
                        font-size: 25px;
                        font-weight: bold;
                        text-align: center;
                        align-self: center;
                    }
    
                    .Text {
                        color: #555;
                    }
                }

                .ContentBox:hover {
                    background-color: #ddd;
                }
            }

            /* AnswerOptionの中のinputがcheckedの場合 */
            .AnswerOption input:checked + .ContentBox {
                background-color: var(--Blue12);

                .Text{
                    color: #fff;
                }
            }
        }
        .DiagTextInput {
            border: 1px solid #ccc;
            border-radius: 5px;
            padding: 10px 10px;
        }
        .DiagTextarea {
            border: 1px solid #ccc;
            border-radius: 5px;
            padding: 10px 10px;
            resize: none;
        }
    }

    .SubmitButton {
        
    }
}