@import url(http://fonts.googleapis.com/earlyaccess/notosansjp.css);

body {
    font-family: 'Noto Sans JP', sans-serif;
}

main {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

form {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.content-title {
    font-size: calc(24 / 390 * 100vw);
    font-weight: bold;
    color: #1370C6;
    text-align: center;
}

.content-title::after {
    content: '';
    display: block;
    height: calc(7 / 390 * 100vw);
    width: calc(358 / 390 * 100vw);
    background-color: #FBFC00;
    margin-top: calc(12 / 390 * 100vw);
}

.title-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100vw;
    padding-top: calc(27 / 390 * 100vw);

    .logo {
        width: calc(184 / 390 * 100vw);
    }
}

.shindan-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin-top: calc(30 / 390 * 100vw);
    gap: calc(68 / 390 * 100vw);

    .questions-container {
        display: flex;
        flex-direction: column;
        align-items: center;
        width: calc(314 / 390 * 100vw);
        padding-bottom: calc(25 / 390 * 100vw);
        border: 1px solid #C7C7C7;
        gap: calc(30 / 390 * 100vw);

        .question-container {
            display: flex;
            flex-direction: column;
            align-items: center;
            width: 100%;
            gap: calc(20 / 390 * 100vw);

            .question-title {
                display: flex;
                justify-content: center;
                align-items: center;
                font-size: calc(24 / 390 * 100vw);
                color: white;
                font-weight: bold;
                height: calc(90 / 390 * 100vw);
                width: 100%;
                background-image: url("/wp-content/themes/astra-child/images/carisearch/question-background.png");
                background-repeat: no-repeat;
                background-size: cover;
                background-position: center center;
            }

            .question-options {
                display: grid;
                width: 100%;
                grid-template-columns: repeat(auto-fit, minmax(calc(153 / 390 * 100vw), calc(153 / 390 * 100vw)));
                color: #484848;
                font-weight: bold;
                justify-content: center;
                gap: calc(18 / 390 * 100vw) calc(6 / 390 * 100vw);
            }

            .question-option {
                display: flex;
                align-items: center;
                gap: calc(20 / 390 * 100vw);
                padding-left: calc(22 / 390 * 100vw);

                input[type="radio"] {
                    width: calc(13 / 390 * 100vw);
                    height: calc(13 / 390 * 100vw);
                    appearance: none;
                    position: relative;
                    border: 1px solid #000000;
                    border-radius: 50%;
                }

                input[type="radio"]:checked {
                    background-color: white;
                }

                input[type="radio"]:checked::after {
                    content: "";
                    position: absolute;
                    inset: 0;
                    margin: auto;
                    width: calc(7 / 390 * 100vw);
                    height: calc(7 / 390 * 100vw);
                    border-radius: 50%;
                    background-color: #0062D2;
                }

                label {
                    display: block;
                    font-size: calc(16 / 390 * 100vw);
                    margin-top: calc(3 / 390 * -100vw);
                    font-weight: 400;
                }
            }
        }
    }
}

.custom-button-with-arrow {
    display: flex;
    align-items: center;
    width: calc(333 / 390 * 100vw);
    font-size: calc(24 / 390 * 100vw);
    color: white !important;
    background-color: #11C3CD;
    border-radius: calc(47 / 390 * 100vw);
    padding: calc(13 / 390 * 100vw) calc(12 / 390 * 100vw);
    box-shadow: 0 4px 4px rgba(0, 0, 0, 0.25) !important;
    text-decoration: none;
    margin-top: calc(66 / 390 * 100vw);

    .text-container {
        display: flex;
        justify-content: center;
        flex-grow: 1;
    }

    .icon-container {
        display: flex;
        justify-content: center;
        align-content: center;
        height: calc(51 / 390 * 100vw);
        width: calc(51 / 390 * 100vw);
    }
}

.footer-container {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: calc(63 / 390 * 100vw);
    background-color: #0056B8;
    margin-top: calc(74 / 390 * 100vw);

    .footer-links {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: calc(20 / 390 * 100vw);
        font-size: calc(6 / 390 * 100vw);
        font-weight: bold;
        color: white;
    }
}