@charset "utf-8";

.form-price-block {
    margin: 1.5em 0;
}

#pay-form-table {
    border-collapse: collapse;
    width: 100%;
}

#pay-form-table caption {
    text-align: right;
}

#pay-form-table th,
#pay-form-table td {
    border: 1px solid #cccccc;
    padding: 0.3em;
}

#pay-form-table .product-name {
    width: 70%;
}


#pay-form-table .product-amount {
    text-align: center;
}

.form-content-block {
    margin: 1.5em 0;
}

.form-action-block {
    margin: 1.5em 0;
}

.action-button {
    display: inline-block;
}

/* 個人情報の扱い同意確認 */
.personal-check-title {
    font-size: 1.1em;
    margin: 0.8em 0;
}

/* カード情報入力フォーム */
#card-form-table input {
    border-radius: 3px;
    padding: 0.2em;
    width: 100%
}

#card-form-table input::placeholder {
    color: #cccccc;
}


.form-line {
    margin-bottom: 0.5em;
    width: 100%;
}

.input-title {
    display: inline-block;
    padding: 0.2em;
    width: 16%;
}

#card-input-error {
    color: red;
}

.input-number,
.input-sign {
    display: inline-block;
    width: 79%;
}

.card-number {
    display: inline-block;
    margin-right: 0.4em;
    width: 20%;
}

.input-expiration {
    display: inline-block;
    width: 30%;
}

.card-expiration {
    display: inline-block;
    margin-right: 0.4em;
    width: 40%;
}

.input-cvc {
    display: inline-block;
    width: 20%;
}

.card-sign {
    display: inline-block;
    width: 60%;
}

.mts-notice {
    margin: 2em 0;
}

#payment-notice {
    margin: 2em 0;
}

/* v2 カード情報入力フォーム */
.card-form-field {
    margin-bottom: 1.5em;
}

.card-form-field input {
    width: 96%;
}

.card-input-line {
    display: flex;
    margin-bottom: 0.5em;
}

.card-number-box {
    width: 15em;
}

.card-expiration-box {
    margin-right: 0.5em;
    width: 6em;
}

.card-cvc-box {
    width: 4.5em;
}

.card-name-box {
    width: 15em;
}

#card-name,
#card-email,
#card-phone-code,
#card-phone {
    border: none;
    font-size: 1rem;
    padding: 0;
}

.card-email-box {
    width: 15em;
}

.card-phone-code-box {
    margin-right: 0.5em;
    width: 5em;
}

.card-phone-box {
    width: 9.5em;
}

.card-input-item {
    background-color: white;
    border: 1px solid #bbbbbb;
    border-radius: 5px;
    line-height: 1;
    padding: 0.3em;
}

.card-input-item input,
.card-input-item input:focus {
    outline: none;
}