#form dl {
    padding:30px 0;
}
#form dl div {
    margin-top:0;
}
#form dl div:not(:first-of-type) dt {
    padding-top:40px;
}
#form dd {
    margin:20px 0;
}
#form dd:not(:has(> :is(p, aside))) {
    display:flex;
    align-items: center;
    justify-content: flex-start;
    gap:var(--gap);
    flex-wrap: wrap;
}

form dd[data-form-name="contact_ctg"] + dt ,
form dd[data-form-name="contact_ctg"] + dt + dd {
    display:none;
}
form dd[data-form-name="contact_ctg"] + dt.open ,
form dd[data-form-name="contact_ctg"] + dt.open + dd {
    display:block;
}
form dt:has(> label[for="visit_date_2"]) ,
form dt:has(> label[for="visit_date_3"]) ,
form dt:has(> label[for="address"]) {
    display:none;
} 

#form select {
    max-width:100%;
}

.flex input {
    height:100%;
}

#form dd > input:not([name="address"]) {
    max-width:50%;
}

#form dd :is(table, tr, th, td) {
    border:none;
}

main form :is(input, textarea, select, .privacy-policy) {
	border-radius:8px;
}
#form dd p + :is(input, textarea, select) {
    margin-top:10px;
}
#form dd:has(> button) {
    text-align:center;
}

#tel .tel {
    font-family: "EB Garamond", serif;
    font-optical-sizing: auto;
    font-weight:normal;
    font-size:3.6em;
    letter-spacing:0.1em;
    line-height:1.1;
    margin-top:40px;
}
#tel p {
    margin-top:5px;
}

.not-null {
    display: inline-block;
    margin-left: 5px;
    background: var(--color-green);
    color: var(--color-white);
    line-height: 1;
    padding: 4px 10px;
    font-size: 0.8em;
    border-radius: 4px;
    font-family: "Noto Sans", sans-serif;
}

.half-width {
    width:50%;
}
#form dd > input.half-width {
    width:20%;
}

form textarea {
    max-width:100%;
}

.message {
    color:var(--color-red);
    font-weight:bold;
}
#form dd em {
    display:block;
    font-style:normal;
    color:var(--color-white);
    background:var(--color-red);
    padding:5px 10px;
    margin-top:16px;
    border-radius:8px;
}
#form dd em::before {
    content:'';
    width:20px;
    height:15px;
    clip-path: polygon(50% 0,100% 100%, 0 100%);
    position:absolute;
    top:-14px;
    left:10%;
    background:var(--color-red);
}

#form dd table {
    background:none;
    table-layout: auto;
}
#form dd table td {
    padding:0 20px 20px 0;
    background:none;
}

main form :is(input, textarea, select, .privacy-policy) {
    border-radius: 0;
}

:is(.form-back, .form-send) {
    width:49%;
    min-width:260px;
    display:inline-block;
    margin:0;
}
:is(.form-back, .form-send) dt {
    display:none;
}
#form :is(.form-back, .form-send) dl.form {
    padding:0;
}

form .form input[name="postalcode"] {
    flex:none;
    width:10em;
    padding-left:2em;
    background: linear-gradient(transparent, transparent) no-repeat;
    background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='18' height='18'><text x='0' y='18' font-size='18'>〒</text></svg>");
    background-position: calc(var(--padding) / 2) center;
}
form .form input[type="date"] {
    flex:none;
    width:14em;
}

.form.option {
    background:var(--color-lightgray-60);
    padding:calc(var(--padding) * 2) !important;
    margin-top:20px;
}

main #form .privacy-policy {
    display:none;
    font-family: "Noto Sans", sans-serif;
}
main form .privacy-policy {
    display:block !important;
    max-height:200px;
    border:solid 1px var(--color-outline);
    background:var(--color-white);
    padding:var(--padding);
    overflow-y:scroll;
    margin:0;
    margin-bottom:10px;
}


/* Media Query */
@media (max-width:920px ) {

}
@media (max-width:720px ){

}
@media (max-width:520px ){
    #tel .tel {
        font-size:2.8em;
    }

    #form dd > input ,
    #form dd > textarea {
        max-width:100%;
    }

    .half-width {
        width:50%;
    }
    #form dd > input.half-width {
        width:50%;
    }
    #form dd > input[name="mailaddress"] {
        max-width:100%;
    }

    :is(.form-back, .form-send) {
        width:100%;
        display:block;
    }
}