@charset "UTF-8";

/*------------------------------------*\
    $CONTENTS
\*------------------------------------*/
/**
 * CONTENTS............目次
 */





/*------------------------------------*\
    $CONTENTS
\*------------------------------------*/
.form {
    margin-bottom: 41px;
    border-bottom: 2px solid var(--neutralColor-100);
    font-family: var(--font);
}

    .form__block {
        display: flex;
        flex-wrap: wrap;
        column-gap: max(12px, 1.40625%);
        row-gap: 12px;
        padding-block: 15px;
        border-top: 2px solid var(--neutralColor-100);
        font-weight: 500;
    }

        .form__label {
            display: flex;
            flex-grow: 1;
            column-gap: 12px;
            width: max(240px, 23.59375%);
            padding-block: 8px;
            padding-left: 13px;
            border-left: 4px solid var(--primaryColor-800);
            font-size: clamp(1.4rem, calc(100vw * (16 / var(--innerContainerSize))), 1.6rem);
        }

            .form__icon {
                aspect-ratio: 1 / 1;
                display: block;
                height: min(100%, calc(1.5em + clamp(.25em, calc(100vw * (12 / var(--innerContainerSize))), .75em)));
                background-repeat: no-repeat;
                background-position: 50% 50%;
                background-size: contain;
            }
            .form__icon.is-user { background-image: url(../images/common/form/icon-user.svg) }
            .form__icon.is-email { background-image: url(../images/common/form/icon-email.svg) }
            .form__icon.is-tel { background-image: url(../images/common/form/icon-tel.svg) }
            .form__icon.is-msg { background-image: url(../images/common/form/icon-msg.svg) }

            .form__label label {
                display: flex;
                flex-grow: 1;
                justify-content: space-between;
                column-gap: 12px;
                margin-block: clamp(.25em, calc(100vw * (12 / var(--innerContainerSize))), .75em);
                line-height: 1.5;
            }
            .form__label label::after {
                content: "任意";
                display: block;
                width: calc(1em * (60 / 14));
                height: calc(1em * (24 / 14));
                margin-block: auto;
                border-radius: 99px;
                background-color: var(--primaryColor-500);
                color: white;
                font-size: 0.875em;
                line-height: calc(24 / 14);
                text-align: center;
            }
            .form__label label.is-required::after {
                content: "必須";
                background-color: var(--accentColor-100);
            }
            .form__label label.is-none::after { display: none }


        .form__content {
            flex-grow: 1;
            width: 75%;
            padding-block: 8px;
            font-size: 1.6rem;
        }

            .form__content :is(input, textarea, select) {
                width: min(896px, 100%);
                padding-inline: 1em;
                border-radius: 6px;
                background-color: var(--primaryColor-100);
            }
            .form__content input { height: 3em }
            .form__content select {
                height: 3em;
                line-height: 3em;
            }
            .form__content textarea {
                resize: none;
                height: 16em;
                padding-block: .75em;
                line-height: 1.5;
            }

            .form__content p {
                padding-block: .75em;
                line-height: 1.5;
            }