:root {
    --gray-color: #eaeaea;
    --accent-color: #1ea0a4;
}

body {
    display: flex;
    align-items: center;
    justify-content: center;
}

#page_content {
    margin-top: 25px;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 410px;
}

#page-content_wrapper {
    width: 95%;
    flex-direction: column;
    display: flex;
    gap: 18px;
}

flex {
    display: flex;
}

#title-area {
    display: flex;
    /* 垂直 */
    align-items: center;
    /*  */
    justify-content: center;

    div {
        width: fit-content;
    }
}

h1 {
    font-style: normal;
    font-weight: bold;
    font-size: 18px;
    color: #222;
    line-height: 1.9;
    font-family: Noto Sans JP;
}

h2 {
    font-style: normal;
    font-weight: bold;
    font-size: 15px;
    font-family: Noto Sans JP;
    color: #222;
}

#delivery-title {
    margin-top: 5px;
    margin-bottom: 10px;
    display: flex;
    gap: 10px;
}

.flex {
    display: flex;
}

.circle {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background-color: var(--accent-color);
}

.inner-circle {
    width: 15px;
    height: 15px;
    background-color: var(--accent-color);
    border-radius: 50%;
    position: relative;
    border: 3px solid var(--gray-color);
    top: 2.5px;
    left: 3px;
}

#payment-form {
    width: 99%;
}

#delivery_container {
    background-color: var(--gray-color);
    padding: 10px 15px 15px;
    border-radius: 4px;

    #delivery_wrap {
        border-radius: 3px;
        padding: 15px 0px 25px 20px;
        background-color: white;
        display: flex;
        flex-direction: column;
        gap: 10px;
    }
}

.common-element-title {
    font-family: Noto Sans JP;
    font-style: normal;
    /* font-weight: lighter; */
    font-size: 13px;
    width: fit-content;
}

.common-input {
    border-radius: 2.5px;
    border-width: 1px;
}

#address-name-label {
    margin-right: 20px;
}

#address-name-wrap {
    display: flex;
    flex-direction: column;

    input {
        width: 80%;
        margin-top: 3px;
        margin-left: 10px;
        padding: 2px 5px;
        text-align: left;
        height: 20px;
    }
}

#address-email-wrap {
    display: flex;
    flex-direction: column;

    input {
        width: 80%;
        margin-top: 3px;
        margin-left: 10px;
        padding: 2px 5px;
        text-align: left;
        height: 20px;
    }
}

#postal-pref-wrap {
    display: flex;
    gap: 0px;

    #postal-wrap {
        display: flex;
        flex-direction: column;
        width: 40%;

        input {
            height: 20px;
            width: 70%;
            margin-top: 2px;
            padding: 2px 5px;
            text-align: left;
        }
    }

    #pref-wrap {
        display: flex;
        flex-direction: column;

        select {
            height: 28px;
            width: 100%;
            margin-top: 2px;
            padding: 2px 5px;
            text-align: left;
        }

        div {
            display: flex;
            gap: 10px;
            align-items: center;

            #pref-button {
                height: 20px;
                width: 100px;
                font-size: 13px;
                border: 1px solid black;
                border-radius: 3px;
                background-color: var(--gray-color);
                display: flex;
                justify-content: center;

                &:hover {
                    opacity: 0.7;
                    cursor: pointer;
                    transition: all;
                    transition: 0.3s;
                    box-shadow: 0 0 0 1px gray;
                }
            }
        }
    }

}

.shipping-items-wrap {
    display: flex;
    flex-direction: column;

    input {
        width: 90%;
        height: 25px;
        margin-top: 3px;
        padding: 2px 5px;
        text-align: left;
    }
}

#delivery-address-title {
    font-family: Noto Sans JP;
    font-weight: Bold;
    color: #636B78;
    line-height: 1.9;
    font-family: Noto Sans JP;
    font-size: 16px;
}

#shipping_detail {
    margin-left: 7px;
    display: flex;
    flex-direction: column;
    gap: 5px;
}

#confirm-email {
    &::placeholder {
        font-size: 0.9em;
    }
}

/* mail attention */
.mail_attention {
    text-align: center;
    margin-top: 5px;
    padding-bottom: 50px;
}

.mail_attention p {
    font-size: 10.5px;
    font-family: Noto Sans JP;
}

.precautions {
    color: red;
    font-weight: bold;
    font-size: 12.5px;
    line-height: 1.7;
}

#proceed_payment_btn {
    line-height: 1.7;
    font-size: 16px;
    border: none;
    font-weight: bold;
    padding: 10px 0;
    width: 250px;
    border-radius: 30px;
    cursor: pointer;
    color: white;
    background-color: var(--accent-color);
}

label,
.mail_attention,
.pref-button,
.common-gray-text {
    font-family: Noto Sans JP;
    font-weight: Bold;
    color: #636B78;
    line-height: 1.9;
    font-family: Noto Sans JP;
    font-size: 12.3px;
}

div.common-gray-text {
    display: inline-block;
    font-size: 15.3px;
}

#proceed_payment_btn.disabled-btn {
    background-color: #67e2e2ff;
    cursor: not-allowed
}

/* island */
.island_consent_wrap {
    font-size: 12.3px;
    font-family: Noto Sans JP;
    font-weight: Bold;
    color: #636B78;
    width: 365px;
    margin: 0 auto;
    margin-top: 20px;
    text-align: center;
    line-height: 1.9;
}

.island_consent_wrap p {
    font-size: 9px;
    margin-bottom: 5px;
}

.island_consent_wrap span {
    display: block;
    font-size: 9px;
    color: #999;
    margin-top: 2px;
}

.island_consent_wrap input[type=checkbox] {
    transform: scale(1.5);
}

footer {
    display: flex;
    flex-direction: column;
    align-items: center;

    .mail-container {
        margin-bottom: 18px;
    }
}

@view-transition {
    navigation: auto;
}