@charset "UTF-8";

/*------------------------------------*\
    $CONTENTS
\*------------------------------------*/
/**
 * CONTENTS............目次
 * UNDER_BANNER........下部バナー
 * CONTENTS............コンテンツ
 */





/*------------------------------------*\
    $CONTENTS
\*------------------------------------*/
.contact {
    padding-top: clamp(48px, calc(100vw * (100 / var(--innerContainerSize))), 100px);
    padding-bottom: clamp(96px, calc(100vw * (138 / var(--innerContainerSize))), 138px);
}

    .contact__type {
        display: flex;
        align-items: center;
        column-gap: calc(100% * (44 / 716));
        width: min(716px, 100%);
        margin-inline: auto;
        font-family: var(--font);
    }
    .contact__type::before {
        content: "";
        aspect-ratio: 232 / 231;
        display: block;
        width: calc(100% * (231 / 716));
        background-image: url(../images/contact/image-contact.jpg);
        background-image:
            image-set(
                url(../images/contact/image-contact.jpg) 1x,
                url(../images/contact/image-contact@2x.jpg) 2x
            );
        background-image:
            -webkit-image-set(
                url(../images/contact/image-contact.jpg) 1x,
                url(../images/contact/image-contact@2x.jpg) 2x
            );
        background-repeat: no-repeat;
        background-position: 50% 100%;
        background-size: contain;
    }

        .contact__type__inner { padding-bottom: 7px }

            .contact__type__name {
                margin-bottom: 8px;
                color: var(--primaryColor-800);
                font-size: clamp(1.6rem, calc(100vw * (18 / var(--innerContainerSize))), 1.8rem);
                font-weight: 900;
                line-height: calc(24 / 18);
                letter-spacing: .1em;
            }

                .contact__type__name > label.is-required {
                    display: flex;
                    flex-direction: column;
                    row-gap: calc(1em * (21 / 18));
                }
                .contact__type__name > label.is-required::after {
                    content: "必須";
                    width: calc(1em * (64 / 14));
                    padding-left: .1em;
                    border-radius: 99px;
                    background-color: var(--accentColor-100);
                    color: white;
                    font-size: calc(1em * (14 / 18));
                    font-weight: 500;
                    line-height: calc(24 / 18);
                    letter-spacing: .1em;
                    text-align: center;
                }


            .contact__type__content .contact__radio { color: var(--primaryColor-800) }


    .contact__agree {
        margin-top: -9px;
        margin-bottom: 36px;
    }

        .contact__agree__details { margin-bottom: 29px }
        @media screen and (min-width: 768px) {
            .contact__agree__details { padding-left: 25% }
        }

            .contact__agree__details dt {
                margin-bottom: .5em;
                color: var(--primaryColor-800);
                font-family: var(--font);
                font-size: clamp(1.6rem, calc(100vw * (18 / var(--innerContainerSize))), 1.8rem);
                font-weight: 500;
                line-height: calc(24 / 18);
                letter-spacing: .1em;
            }

            .contact__agree__details dd {
                font-size: 1.2rem;
                line-height: 2;
                letter-spacing: .05em;
            }


        .contact__agree__content {
            display: flex;
            justify-content: center;
        }


    .contact__radio {
        display: flex;
        column-gap: .5em;
        padding-block: 0.3125em;
        font-size: 1.6rem;
        font-weight: 500;
        line-height: 1.5;
        letter-spacing: .1em;
        cursor: pointer;
    }

        .contact__radio input[type=radio] {
            display: block;
            width: 1.5em;
            height: 1.5em;
            border: 2px solid var(--primaryColor-800);
            border-radius: 100%;
            background-color: white;
        }
        .contact__radio input[type=radio]:checked {
            background-image: radial-gradient(var(--primaryColor-800) 0%, var(--primaryColor-800) 48%, white 52%);
            background-repeat: no-repeat;
            background-position: 50% 50%;
            background-size: contain;
        }