html {
    font-size: calc((9 / 1260) * 315vw);
}
form {
    padding: 0 3.5rem;
    font-weight: var(--font-noto-regular);
    color: #585657;
    .radio {
        display: inline-flex;
        gap: 1rem;
        flex-wrap: wrap;
        padding: 3.5rem 0;
        .inner {
            display: flex;
            flex-direction: column;
            gap: .75rem;
        }
        .radio-group {
            display: flex;
            align-items: center;
            gap: .5rem;
        }
        input[type="radio"] {
            appearance: none;
            display: flex;
            align-items: center;
            &::before {
                content: "";
                display: inline-block;
                width: 1.75rem;
                height: 1.75rem;
                background: url(../images/form-radio.svg);
                background-size: contain;
                background-repeat: no-repeat;
                background-position: center;
            }
            &:checked::before {
                background: url(../images/form-radio-active.svg);
                background-size: contain;
                background-repeat: no-repeat;
                background-position: center;
            }
        }
    }
    .icon {
        background: #B4B4B4;
        font-size: 1.3rem;
        color: #fff;
        padding: 0 1.3rem;
        border-radius: .25rem;
        height: 2rem;
        display: inline-block;
        &.required {
            background: var(--primary-color);
        }
    }
    .input {
        margin-bottom: 1.8rem;
        .inner {
            display: flex;
            align-items: center;
            gap: .75rem;
        }
        input {
            width: 100%;
            border-radius: 10rem;
            border: .1rem solid #C8C8C8;
            padding: 1.25rem 2rem 1.1rem;
            font-size: 1.6rem;
            box-sizing: border-box;
            margin-top: .75rem;
            color: var(--text-color);
            &::placeholder {
                color: #B4B4B4;
                font-size: 1.5rem;
                font-weight: var(--font-noto-light);
                font-family: "noto-sans-cjk-jp", sans-serif;
            }
        }
    }
    .textarea {
        textarea {
            width: 100%;
            border-radius: 2.5rem;
            border: .1rem solid #C8C8C8;
            padding: 1.25rem 2rem;
            font-size: 1.6rem;
            box-sizing: border-box;
            margin-top: .75rem;
            color: var(--text-color);
            resize: vertical;
        }
    }
    .checkbox {
        display: flex;
        align-items: center;
        gap: 1rem;
        margin-top: 1rem;
        input[type="checkbox"] {
            cursor: pointer;
            appearance: none;
            display: flex;
            align-items: center;
            &::before {
                content: "";
                display: inline-block;
                width: 1.8rem;
                height: 1.8rem;
                background: url(../images/form-check.svg);
                background-size: contain;
                background-repeat: no-repeat;
                background-position: center;
            }
            &:checked::before {
                background: url(../images/form-check-active.svg);
                background-size: contain;
                background-repeat: no-repeat;
                background-position: center;
            }
        }
        label {
            cursor: pointer;
        }
        a {
            /* text-decoration: none; */
            color: var(--text-color);
        }
    }
    .submit {
        padding: 3rem 0 4rem;
        input[type="button"] {
            border: none;
            display: block;
            margin: 1.5rem auto 0;
            color: #585657;
            cursor: pointer;
            font-size: 1.5rem;
            background: transparent;
            &:hover {
                text-decoration: underline;
            }
        }
    }
    .button {
        background: var(--primary-color);
        width: 80%;
        border: none;
        color: #fff;
        display: block;
        padding: 1.75rem 0;
        border-radius: 10rem;
        font-weight: var(--font-noto-light);
        font-size: 1.5rem;
        margin: 0 auto;
        cursor: pointer;
        text-align: center;
        text-decoration: none;
        &:hover {
            background: #db6300;
        }
    }
}
#confirm {
    input[type="radio"]:checked::before {
        background: url(../images/form-radio-disabled.svg);
        background-size: contain;
        background-repeat: no-repeat;
        background-position: center;
    }
    input[type="checkbox"]:checked::before {
        background: url(../images/form-check-disabled.svg);
        background-size: contain;
        background-repeat: no-repeat;
        background-position: center;
    }
    .radio-group:not(.checked) {
        opacity: .5;
    }
    input[type="text"]:disabled,
    textarea:disabled {
        background: #dcdcdc;
    }
}
#thanks {
    .head {
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        gap: 2rem;
        margin: 8rem 0 5rem;
        .image {
            width: 27%;
            img {
                width: 100%;
            }
        }
        p {
            font-size: 2.3rem;
            font-weight: var(--font-noto-bold);
        }
    }
    .text {
        font-size: 1.7rem;
        line-height: 3.5rem;
    }
    .button {
        margin-top: 5rem;
    }
}