.page-title {
    background:var(--color-lightgray);
    line-height:1.1;
    padding-top:60px;
    padding-bottom:60px;
}
.page-title span {
    font-size:0.6em;
}
.page-title::after {
    background:var(--color-red);
    bottom:60px;
}

:not(form) > dl.form > div {
    border-bottom:solid 1px var(--color-lightgray);
    padding-bottom:var(--margin);
}

dt {
    width:200px;
}
form dt {
    padding-top:calc(var(--padding) / 2);
}
:not(form) > dl.form dt {
    color:var(--color-red);
}
dd {
    text-align:left !important;
    flex:1;
}
dt:has(label[for="privacy"]) {
    width:100%;
}
form dd[data-form-name="privacy"] label {
    border-top:solid 5px var(--color-lightgray);
    border-bottom:solid 5px var(--color-lightgray);
    border-left:solid 80px var(--color-lightgray);
    border-right:solid 80px var(--color-lightgray);
    background:var(--color-lightgray);
    margin:0 auto;
    display:block;
    width:fit-content;
}

form dl > div:last-of-type dt {
    display:none;
}
form dl > div:last-of-type dd {
    text-align:center !important;
}

form .button {
    padding:15px;
    min-width:300px;
}

select {
    max-width:100%;
}

.flex input {
    height:100%;
}

dd > input {
    max-width:50%;
}

dd[data-form-name="mailaddress"] input {
    max-width:20%;
    min-width:100px;
}

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

.not-null {
    display: inline-block;
    margin-left: 5px;
    color: var(--color-red);
}

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

.privacy-policy {
    max-height:200px;
    border:solid 1px var(--color-outline);
    border-radius:var(--radius-inner);
    padding:var(--padding);
    overflow-y:scroll;
    margin-top:10px;
    margin-bottom:10px;
}

form textarea {
    max-width:100%;
}

.message {
    color:var(--color-red);
    font-weight:bold;
}

.attention {
    color:var(--color-red);
    font-weight:bold;
    font-size:1.2em;
    border:solid 1px var(--color-red);
    padding:var(--padding);
    text-align:center;
}
.attention h4 {
    text-align:center;
}
.attention .button {
    background:var(--color-red);
}

:is(.form-back, .form-send) {
    width:49%;
    min-width:260px;
    display:inline-block;
}
:is(.form-back, .form-send) dt {
    display:none;
}
form dl dd[data-form-name="privacy"] > div {
    background:var(--color-red);
    color:var(--color-white);
    text-align:center;
    display:block;
    padding:10px;
}
form dl dd:last-of-type {
    text-align:center;
}
dl:last-of-type dd:last-of-type .button ,
.form-send dl dd .button ,
.button {
    background:var(--color-black);
    color:var(--color-white);
}
.form-back dl dd .button {
    background:var(--color-gray) !important;
}
.button:hover {
    filter: brightness(var(--brightness));
    color:var(--color-white);
}

form dd em {
    padding:5px 0;
    margin:0 !important;
    display:block;
    color:var(--color-red);
    font-style:normal;
}

.profile {
    width:fit-content;
    margin-left:auto;
}


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

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

}
@media (max-width:520px ){
    dt {
        width:100%;
    }

    form textarea {
        max-width:100%;
        width:100% !important;
    }

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