@import "contact.css";

.step {
    display:flex;
    align-items: center;
    justify-content: space-between;
    gap:20px;
    overflow-x: auto;
    padding-bottom:10px;
}
.step li {
    display:block;
    border:solid 1px var(--color-gray);
    border-radius:6px;
    padding:calc(var(--padding) / 2) var(--padding);
    text-align:center;
    color:var(--color-gray);
    min-width:160px;
    flex:1;
}
.step li.current {
    color:var(--color-green);
	border:solid 1px var(--color-green);
}
.step li.complete {
    color:var(--color-black);
    background:var(--color-lightgray);
}
.step li:not(:last-of-type)::after {
    content:'';
    display:block;
    width:8px;
    height:14px;
    clip-path: polygon(0 0, 100% 50%, 0 100%);
    background:var(--color-gray-2);
    font-size:0.8em;
    position:absolute;
    top:calc(50% - 7px);
    right:-16px;
}

.floor {
    text-align:center;
    padding:var(--padding);
}
.floor img {
    max-width:600px;
    min-width:auto;
}

main .amount-box {
    padding:0;
    padding-bottom:40px;
    margin-inline:calc(var(--padding) * 2);
    border-bottom:solid 1px var(--color-gray);
}
main .amount-box > div {
    display:flex;
    flex-direction: column;
    justify-content: space-between;
}
main table.amount {
    border:none;
    box-shadow:none;
    border-radius:0;
}
main table.amount thead :is(th, td) {
    color:var(--color-green);
    border-bottom:solid 1px var(--color-gray);
    background:none;
    border-radius:0 !important;
    font-size:1.2em;
    padding-inline:0;
}
main table.amount td {
    text-align:right;
    width:5em;
}
main table.amount tbody :is(th, td) {
    border:none;
    padding:0;
    padding-top:20px;
}
main .amount-box .withdrawal-date {
    color:var(--color-green);
    font-size:1.2em;
    border:solid 1px var(--color-gray);
    border-radius:var(--radius-inner);
    padding:var(--padding);
}

main .agree div span {
    font-size:2em;
    color:var(--color-gray);
}
main .agree div span.checked {
    color:var(--color-green);
}
main .agree div button {
    flex:1;
}
main .agree div input {
    display:none;
}
main dialog .privacy-policy {
    border-radius:4px;
}

main .normal-fee {
    border:solid 1px var(--color-black);
    border-radius:var(--radius-inner);
    padding:var(--padding);
}
main .normal-fee h3 {
    top:-0.7em;
    left:50%;
    translate: -50% 0;
    margin:0;
    background:var(--color-white);
    padding:0 20px;
    width:fit-content;
    position:absolute;
    white-space: nowrap;
}
main .normal-fee table.amount {
    margin-top:0;
}


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

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

}
@media (max-width:520px ){
    .radio small {
        display:block;
        margin-top:5px;
    }

    main .amount-box {
        margin-inline:var(--padding);
    }

}