.heading__lv2 {
    margin-block-end: .5lh;
}

.link__list {
    display: grid;
    row-gap: .25lh;
    margin-top: 1lh;

    :is(li) {

    }

    :is(a) {
        display: grid;
        grid-template-columns: min(1.8vw, 4px) auto min(4.8vw, 16px);
        column-gap: .25em;
        justify-content: flex-start;
        text-decoration: underline;

        &::before {
            content: '';
            background: #ff0066;
            aspect-ratio: 1;
            align-self: flex-start;
            position: relative;
            top: .45lh;
        }

        &::after {
            content: '';
            aspect-ratio: 1;
            background: url(ic_blank.svg) no-repeat center center / contain;
            display: block;
        }
    }
}

.attention__list {
    display: grid;
    row-gap: .25lh;
    margin-top: 1lh;
    font-size: .9em;
    :is(li) {
        display: grid;
        grid-template-columns: 1em 1fr;
        color: #808080;
        &::before {
            content: '※';

        }
    }
}

#contact_form {

    --max-frame-size: 533px;
    --max-inline-size: 485px;
    --inline-gap: calc( ( var(--max-frame-size) - var(--max-inline-size) ) / 2 );
    --main-color: #ff0066;
    --alert-color: #F00;

    .form-layout {
        display: grid;
        row-gap: .5lh;
        margin-top: 1.25lh;
    }
    
    .form-error__message {
        color: var(--alert-color);
        border: 1px solid currentColor;
        padding: .5em .5lh;
        margin-top: .25lh;
        border-radius: 4px; 
        background: #ffedf4;
        font-size: .9em;

        &:empty {
            display: none;
        }
    }

    .form-layout__field {
        display: grid;
        row-gap: .5lh;
        border-bottom: 1px solid #ddd;
        padding-bottom: 1lh;

        dt {
            font-weight: 500;

            &:has(span) {
                display: grid;
                grid-template-columns: 1fr auto;
                column-gap: .5em;
                align-items: baseline;
            } 

            :is(span) {
                color: var(--alert-color);
                border: 1px solid currentColor;
                padding: .2lh 1em;
                font-size: .8em;
                line-height: 1;
            }
        }

        dd {
            input,
            textarea  {
                width: 100%;
                padding: .25lh .5em;
                border: 1px solid #8c9ca6;
                background: #f4fbff;
                border-radius: 4px;
            }
        }
    }

    .form-layout__inputs {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        column-gap: var(--inline-gap);
    }

    .form-layout__memo {
        font-size: .9em;
        color: #808080;
        margin-top: .75lh;
        line-height: 1.32;
    }

    .form-layout-policy {
        display: grid;
        place-content: center center;
        border: 1px solid #808080;
        padding: 1lh 1em;
        margin-top: 1lh;
    }

    .form-layout-policy__check {
        margin-inline: auto;
        max-inline-size: fit-content;

        :is(a) {
            text-decoration: underline;
            display: grid inline;
            grid-template-columns: auto min(4.8vw, 16px);
            column-gap: .25em;
            justify-content: flex-start;
            align-items: center;
            margin-block: .5lh;
            font-size: .9em;

            &::after {
                content: '';
                aspect-ratio: 1;
                background: url(ic_blank.svg) no-repeat center center / contain;
                display: block;
            }
        }
    }

    .form-layout-action {
        display: grid;
        margin: 1lh 0;
        grid-template-columns: repeat(auto-fit, minmax(
            min(
                100%,
                calc( (var(--max-inline-size) - var(--inline-gap))  / 2 )
            ),
            1fr
        ));
        gap: var(--inline-gap);

        :is(input) {
            font-size: 1.08em;
            padding: .5lh 1em;
            border: 0;
            border-radius: 4px;
            appearance: none;
            cursor: pointer;

            &:focus-visible {
                opacity: .7;
            }

            @media (any-hover: hover) {
                &:hover {
                    opacity: .7;
                }
                
            }

            &[type="submit"] {
                background: var(--main-color);
                color: #fff;
            }

            &[type="reset"],
            &[name="button[return]"] {
                background: #efefef;
                color: #808080;
            }
        }
    }

}