/* 共通のフッターフォーム */
article#main-form { 
    background-color: var(--bgc);
    padding-block: var(--pad-9);
    margin-top:0;
}
#main-form .form-inner { 
    background-color: var(--color-white); 
    padding: var(--pad-7);

    ul {
        list-style: disc;
    }
}
#main-form .title-group { 
    padding: var(--pad-1) var(--pad-2); 
    width:fit-content;
    margin-inline:auto;
    text-align:center;
}
#main-form .title-group::before,
#main-form .title-group::after {
    content: '';
    display: block;
    width: 3px;
    height: 100%;
    background: url(../_img/support/common/border-dashed.svg) no-repeat top center / cover;
    position: absolute;
    inset: 0;
    margin: auto;
}
#main-form .title-group::before { right: unset; }
#main-form .title-group::after { left: unset; }
#main-form .title-group h3 { font-size: clamp(1.8em, 3vw, 2em);}

.form {
    input, textarea, select {
        border-radius:4px;
        margin:0;
    }
    input#postalcode { width:4em; }
    input#postalcode1 { width:5em; }
    input#age { width:3em; }

    .not-null {
        background:var(--color-pink);
        font-size:0.9em;
        line-height:1;
        padding:3px 10px;
        border-radius:2px;
        font-weight:normal;
        color:var(--color-white);
        white-space: nowrap;
    }
    .optional {
        background:var(--color-outline);
        font-size:0.9em;
        line-height:1;
        padding:3px 10px;
        border-radius:2px;
        font-weight:normal;
        color:var(--color-white);
        white-space: nowrap;
    }

    > div {
        display:flex;
        align-items: flex-start;
        justify-content: space-between;
        gap:10px 20px;

        dt {
            width:300px;
            padding: calc(var(--padding) / 2) 0;
            align-items: flex-start;
        }
        dd {
            flex:1;

            em {
                font-style: normal;
                font-weight:bold;
                color:var(--color-red);
                border:solid 1px var(--color-red);
                border-radius:8px;
                padding:5px 10px;
                line-height:1.2;
                margin-top:10px;
                display:block;
            }
        }
        td {
            padding: calc(var(--padding) / 2) 30px calc(var(--padding) / 2) 0;
        }
    }
    dt:has(+ dd button) {
        display:none;
    }
    dd:has(button) {
        width:100%;

        .button_animation {
            margin-inline: auto;
        }
    }
}

@media (max-width: 820px) {
    .form {
        > div {
            flex-direction: column;
            width:100%;
        }
        table, tr, td {
            display:block;
        }
        
    }
}
@media (max-width: 520px) {
    #main-form .form-inner { padding: var(--pad-3) var(--pad-2);}
}