/* 背景画像の設定 */
.DiagBody {
    position: relative;
}
.DiagBody::before {
    content: "";
    position: absolute;
    bottom: 5%;
    left: 50%;
    transform: translateX(-50%);
    
    height: 70%;
    aspect-ratio: 1 / 1;
    
    background-image: url('/img/DiagImg001.png');
    background-size: cover;       /* 画像をコンテナに合わせる */
    background-position: center;  /* 画像内の中心を表示 */
    filter: opacity(0.07);
    z-index: -1;
}

.DiagQuestionPage {
    display: grid;
    grid-template-rows: auto 1fr auto;
    align-items: center;
    gap: 20px;

    height: 100svh;
    max-height: 500px;

    .Hidden {
        display: none !important;
    }

    .DiagInput {
        border: 2px solid var(--SubPrimaryColor);
        border-radius: 5px;
        font-size: 20px;
        padding: 10px 20px;
    }

    .TitleBlock {
        display: grid;
        justify-content: center;
        justify-items: center;
        padding: 30px 0px;

        .SubTitle {
            color: var(--PrimaryColor);
            font-size: 25px;
            font-weight: bold;
        }
        .Title {
            color: #000;
            font-size: 50px;
            font-weight: bold;
        }
    }

    .QuestionBlock {
        display: grid;
        justify-content: center;
        justify-items: center;

        .QuestionBox {
            display: grid;
            gap: 10px;

            .Question {
                display: grid;
                grid-template-columns: auto 1fr;
                align-items: start;
                gap: 5px;

                font-size: 20px;
                font-weight: bold;
                color: var(--MainText1);
            }
            
            .Badge {
                display: inline-block;
                background-color: var(--Gray_Main2);
                color: #fff;
                font-size: 17px;
                font-weight: bold;
                padding: 3px 10px;
                border-radius: 10px;
            }

            .InputUnit {
                justify-self: center;

                display: flex;
                align-items: center;
                gap: 10px;
                font-size: 20px;
            }

            /* 複数のラジオボタンを表示するブロック */
            .RadioUnit {
                display: flex;
                flex-wrap: wrap;
                justify-content: center;
                gap: 10px;

                /* ラジオボタンそのものは隠す */
                input[type="radio"],
                input[type="checkbox"]
                {
                    display: none;
                }

                /* ラジオボタンと連動するlabelをボタンにする */
                .RadioButton,
                .CheckBoxButton
                {
                    padding: 8px 16px;
                    border: 1px solid var(--SubText2);
                    border-radius: 4px;
                    cursor: pointer;
                    background-color: #f0f0f0;
                    color: var(--SubText2);

                    input[type="radio"]:checked + &, 
                    input[type="checkbox"]:checked + &
                    {
                        background-color: var(--ActiveColor);
                        color: #fff;
                        border-color: var(--ActiveColor);
                    }
                }
            }

            .OptionQuestionBox {
                padding-top: 30px;
                display: grid;
                gap: 10px;

                .RadioUnit {
                    justify-content: start;
                }

                .InputUnit {
                    justify-self: unset;
                }
            }
        }
    }

    .ButtonBlock {
        justify-self: center;
        width: 100%;
        max-width: 400px;
        
        display: grid;
        grid-template-columns: 90px 1fr;
        gap: 20px;
        padding: 30px 0px;

        .DiagButton {
            width: 100%;
            display: flex;
            justify-content: center;
            align-items: center;
            gap: 20px;

            .Icon {
                font-size: 0.9em;
            }
        }

        .DiagQuestionBackButton {
            --ButtonColor1: var(--Gray_Main3);
            --ButtonColor2: var(--Gray_Main4);
        }
    }
}

@media (max-width: 1024px) {
    .DiagQuestionPage {

        .TitleBlock {
            .SubTitle {
                font-size: 20px;
            }
            .Title {
                font-size: 40px;
            }
        }
    
        .QuestionBlock {
            
        }
    
        .ButtonBlock {
            
        }
    }
}