html { font-size: calc((10 / 1300) * 150vw); }
html.sp { font-size: calc((10 / 375) * 95vw); }

form {
    .category {
        margin-bottom: 4.5rem;
        border: none;
        legend {
            background-color: #BABABA;
            color: #fff;
            font-size: 1.3rem;
            padding: .5rem 1.5rem;
            border-radius: 100px;
            letter-spacing: .1rem;
            span {
                display: none;
            }
        }
        .checkbox-group {
            display: flex;
            flex-wrap: wrap;
            gap: 2rem;
            color: #646464;
            font-size: 1.8rem;
            margin-top: 2rem;
            label {
                display: flex;
                align-items: center;
                gap: 1rem;
                input[type="checkbox"] {
                    appearance: none;
                    -webkit-appearance: none;
                    width: 2rem;
                    height: 2rem;
                    border: none;
                    background-image: url(../images/contact_form_icon.svg);
                    background-size: 1.9rem;
                    background-repeat: no-repeat;
                    background-position: center;
                    &:checked {
                        background-image: url(../images/contact_form_icon_checked.svg);
                    }
                }
            }
        }
    }
    .form-group {
        margin-top: 3.5rem;
        font-weight: var(--font-weight-m-plus-1-regular);
        font-family: var(--font-m-plus-1);
        color: #646464;
        &.is-hidden {
            display: none;
        }
        .label-group {
            display: flex;
            align-items: center;
            gap: 1rem;
            font-size: 1.8rem;
            span {
                background-color: #178BD3;
                color: #fff;
                font-size: 1.1rem;
                display: inline-block;
                padding: .5rem 1.25rem;
                border-radius: calc(var(--border-radius) / 6);
                letter-spacing: .1rem;
                &.opt {
                    background-color: #646464;
                }
            }
        }
        .hint {
            font-size: 1.4rem;
            margin-top: 1rem;
        }
        .privacy {
            line-height: 2.25rem;
            font-size: 1.4rem;
            a {
                text-decoration: underline;
            }
        }
    }
    .text {
        input,
        textarea {
            display: block;
            width: 100%;
            margin-top: 1.5rem;
            border: none;
            padding: 1.75rem 1.5rem;
            font-size: 1.7rem;
            color: #646464;
            background-color: #EBEBEB;
            border-radius: var(--border-radius);
            box-sizing: border-box;
            font-weight: var(--font-weight-m-plus-1-regular);
            font-family: var(--font-m-plus-1);
            &::placeholder {
                font-weight: var(--font-weight-m-plus-1-regular);
                font-family: var(--font-m-plus-1);
                color: #B4B4B4;
                font-size: 1.7rem;
            }
        }
        textarea {
            resize: vertical;
            padding: 2rem 3rem;
        }
    }
    .radio {
        .radio-group {
            display: flex;
            gap: 3rem;
            label {
                display: flex;
                align-items: center;
                gap: 1rem;
                width: 100%;
                margin-top: 1.5rem;
                border: none;
                padding: 1.75rem 2.5rem;
                font-size: 1.7rem;
                color: #646464;
                background-color: #EBEBEB;
                border-radius: 100px;
                input[type="radio"] {
                    appearance: none;
                    -webkit-appearance: none;
                    width: 2rem;
                    height: 2rem;
                    border: none;
                    background-image: url(../images/contact_form_icon.svg);
                    background-size: 1.9rem;
                    background-repeat: no-repeat;
                    background-position: center;
                    &:checked {
                        background-image: url(../images/contact_form_icon_checked.svg);
                    }
                }
            }
        }
    }
    .actions {
        text-align: center;
        button {
            color: #fff;
            background-color: var(--primary-color);
            display: inline-block;
            padding: 1.75rem 0;
            width: 25rem;
            border-radius: 100px;
            font-size: 1.7rem;
            border: none;
            margin: 10rem auto 5rem;
            cursor: pointer;
            @media (max-width: 700px) {
                margin: 5rem auto 5rem;
            }
        }
    }
    .submit {
        padding: 3rem 0 4rem;
        text-align: center;
        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 {
        color: #fff;
        background-color: var(--primary-color);
        display: inline-block;
        padding: 1.75rem 0;
        width: 25rem;
        border-radius: 100px;
        font-size: 1.7rem;
        border: none;
        margin: 3rem auto 1rem;
        text-align: center;
        text-decoration: none;
        cursor: pointer;
        &:hover {
            opacity: .9;
        }
    }
}
.sp {
    form {
        .category {
            .checkbox-group {
                @media (max-width: 700px) {
                    flex-direction: column;
                    gap: 1rem;
                }
            }
        }
        .text {
            @media (max-width: 700px) {
                input {
                    border-radius: 10rem;
                }
            }
        }
        .radio {
            .radio-group {
                @media (max-width: 700px) {
                    flex-direction: column;
                    gap: 1rem;
                }
                label {
                    @media (max-width: 700px) {
                        box-sizing: border-box;
                    }
                }
            }
        }
        .actions {
            button {
                @media (max-width: 700px) {
                    margin: 5rem auto 5rem;
                }
            }
        }
    }
}
#confirm {
    .category {
        label {
            opacity: .5;
            &.checked {
                opacity: 1;
                input[type="checkbox"] {
                    background-image: url(../images/contact_form_icon_checked.svg);
                }
            }
        }
    }
    .demo_place {
        .radio-group {
            label {
            opacity: .5;
            &.checked {
                opacity: 1;
                input[type="radio"] {
                    background-image: url(../images/contact_form_icon_checked.svg);
                }
            }
        }
        }
    }
    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;
    }
    input[type="text"]:disabled,
    textarea:disabled {
        background: #dcdcdc;
    }
}
#thanks {
    letter-spacing: 0;
    .head {
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        gap: 2rem;
        padding: 5rem 0 5rem;
        .image {
            width: 15%;
            @media (max-width: 700px) {
                width: 25%;
            }
            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: 3rem;
    }
}
.sp {
    #thanks {
        .head {
            .image {
                @media (max-width: 700px) {
                    width: 25%;
                }
            }
        }
    }
}