@charset "utf-8";
html,
body {
    background: #FFF;
    font-size: 100%;
}

body {
    color: #574D43;
    font-size: 16px;
    line-height: 1.5;
    background: #FFF;
}

.container {
    padding: 40px;
    max-width: 100%;
    border: 0;
    background: #FFF;
    min-height: auto !important;/*これを入れないと確認画面で高さが崩れる*/
}

.form-column-heading h2 {
    font-size: clamp(1.25rem, 0.688rem + 1.17vw, 1.438rem);
    font-weight: 500;
}

.form-column, .form-column-zip-code-autofill .form-column {
    margin-inline: 0;
    grid-template-columns: 1fr;
}

input[type="text"], input[type="email"], input[type="tel"], input[type="url"], input[type="date"],
input, button, textarea, select {
    margin-block-start: 14px;
    background-color: #E8F4FF;
    border-radius: 5px;
    border: none;
}

input[type="date"] {
    max-width: 200px;
}

.label {
    font-weight: 500;
}

.badge.badge-required {
    background-color: #E6DE51;
    border-radius: 5px;
    color: #574D43;
    font-size: 14px;
    font-weight: 600;
}

.form-column-date .input-group {
    align-items: flex-end;
}

.form-column-80c0947c-0976-445a-9ca3-f6a3393405d0, .form-column-7f824478-d096-4b10-bf66-33e2a9512ad7, .form-column-6fce9b7a-1b80-4f56-8321-588624476337 {
    display: block;
}

.form-column-6fce9b7a-1b80-4f56-8321-588624476337 {
    display: inline-block;
}

.form-column-80c0947c-0976-445a-9ca3-f6a3393405d0 .label {
    font-weight: 500;
}

.form-column-zip-code-autofill {
    width: 100%;
    grid-template-columns: 1fr 1fr;
    gap: 1em;
}

.form-column-zip-code-autofill .form-column, form-column-prefecture-jp {
    grid-template-columns: 1fr;
}

.button-confirm {
    padding: 16px 20px;
    width: min(100%, 448px);
    border-radius: 50px;
    background-color: #00529B;
    border: 1px solid #00529B;
    display: block;
    text-align: center;
    position: relative;
    font-size: clamp(1rem, 0.072rem + 1.45vw, 1.25rem);
    font-weight: 600;
    color: #FFFFFF;
}
.button-confirm:hover, .button-confirm:active, .button-confirm:focus {
    background-color: #00529B;
    border: 1px solid #00529B;
    opacity: .7;
}
button.button-submit {
    padding: 16px 20px;
    width: min(100%, 295px);
    border-radius: 50px;
    background-color: #00529B;
    border: 1px solid #00529B;
    display: block;
    text-align: center;
    position: relative;
    font-size: clamp(1rem, 0.072rem + 1.45vw, 1.25rem);
    font-weight: 600;
    color: #FFFFFF;
}
.button-submit:hover, button.button-submit:active, button.button-submit:focus {
    background-color: #00529B;
    border: 1px solid #00529B;
    opacity: .7;
}
.button-back {
    padding: 16px 20px;
    width: min(100%, 240px);
    border-radius: 50px;
    background-color: #C4E3FF;
    border: 1px solid #C4E3FF;
    display: block;
    text-align: center;
    position: relative;
    font-size: clamp(1rem, 0.072rem + 1.45vw, 1.25rem);
    font-weight: 600;
    color: #574D43;
}
.button-back:hover, .button-back:active, .button-back:focus {
    background-color: #C4E3FF;
    border: 1px solid #C4E3FF;
    opacity: .7;
}

@media screen and (max-width: 1024px) {
    .card {
        padding-inline: 30px;
    }
}

@media (max-width: 768px) {
    .container {
        padding: 20px;
    }
    .form-column {
        margin: 0 0 2em;
        padding: 0;
        display: block;
    }
    .form-column-zip-code-autofill .form-column, form-column-prefecture-jp {
        margin-block-end: 2em;
    }
}

.content-confirmation .preview-block {
    padding: 12px;
    margin-block-start: 14px;
    background-color: #e6ebf1;
    border-radius: 5px;
    border: none;
}

.message-block-complete {
    border: none;
    padding: 0;
    text-align: left;
}