:is(#login, #account) main {
    background-image: linear-gradient(-20deg, #e9defa 0%, #fbfcdb 100%);
}
.login {
    display: grid;
    place-content: center;
    height:100%;
    flex:1;
}
.login form {
    border-radius:var(--radius);
    padding:var(--padding);
    background:var(--color-light-glass);
    box-shadow:var(--shadow-light);
}
.login form .button {
    width:100%;
}

input[name="postalcode"] {
    width:8em;
}
input[name="phone"] {
    width:14em;
}

form dd:has(> button) {
    display:flex;
    align-items: center;
    justify-content: center;
}
form button:is(.Confirm, .Send) {
    background:var(--color-blue);
    color:var(--color-white) !important;
}

.form-back {
    width:49%;
    float:left;
}
.form-back + div {
    margin-left:50%;
}

dd table.none td {
    border:none;
    background:none;
}

.not-null {
    background:var(--color-red);
    font-size:0.8em;
    color:var(--color-white);
    padding:5px;
    border-radius:4px;
    line-height:1;
}

.privacy-policy {
    height:200px;
    overflow-y: auto;
    scrollbar-width:none;
    border:solid 1px var(--color-border);
    border-radius:var(--radius-inner);
    padding:var(--padding);
    font-size:0.8em;
    margin-bottom:10px;
}
.privacy-policy section {
    padding:0;
}

.button[disabled=disabled] {
    background:var(--color-dark-glass) !important;
    color:var(--color-lightgray) !important;
}

main form :is(.message, dd em) {
	position:absolute;
	background:var(--color-red);
	color:var(--color-white);
	min-width:300px;
	padding:5px 10px;
	border-radius:var(--radius-inner);
	top:calc(100% + 8px);
	left:20px;
	z-index:3;
    margin:0 !important;
    animation: 0.4s linear 3s message forwards;
}
main form :is(.message, dd em)::before {
	content:'';
	width:10px;
	height:10px;
	background:var(--color-red);
	position:absolute;
	top:-9px;
	left:20px;
	clip-path: polygon(0% 100%, 50% 0%, 100% 100%);
}
main form :is(.message, dd em).pass ,
main form :is(.message, dd em).pass::before {
    background:var(--color-blue);
}

@keyframes message {
    from {
        opacity:1;
        display:block;
    }
    to {
        opacity:0;
        display:none;
    }
}


/* Addable */
.addable button:is(.add, .del) {
    border: none;
    background: none;
    font-size: 1.6em;
    cursor: pointer;
    transition: var(--transition);
}
.addable button:is(.add, .del):hover {
    filter: brightness(1.1);
}
.addable button.add {
    color: var(--color-blue);
}
.addable button.del {
    color: var(--color-red);
}


/* カード情報ダイアログ */
#card-form iframe {
	min-height:auto;
}
#card-form div {
	margin-top:0;
}
#card-form .input {
	margin-top:5px;
	margin-bottom:10px;
	padding:calc(var(--padding) / 2);
	border:solid 1px var(--color-gray);
	border-radius:var(--radius-inner);
	font-size:1.2em;
}

#card-form #card-errors p {
	background:var(--color-red);
	color:var(--color-white);
	padding:5px 10px;
	border-radius:var(--radius-inner);
	margin:5px 0;
}
#card-form #card-errors p::before {
	content:'';
	width:10px;
	height:10px;
	background:var(--color-red);
	position:absolute;
	top:-9px;
	left:20px;
	clip-path: polygon(0% 100%, 50% 0%, 100% 100%);
}


@media (max-width:720px ) {
    dd table.none ,
    dd table.none tr ,
    dd table.none td {
        display:block;
        padding:0;
    }
}
@media (max-width:520px ) {
    .form-back {
        width:100%;
        float:none;
    }
    .form-send {
        margin-left:0;
        margin-top:0;
    }
}