@charset "UTF-8";

/*ここから変更しない*/

body {
    font-size: 16px;
}

input::-moz-placeholder {
    color: #ced4da !important;
}

input:-ms-input-placeholder {
    color: #ced4da !important;
}

input::-ms-input-placeholder {
    color: #ced4da !important;
}

input::placeholder {
    color: #ced4da !important;
}

.btn-secondary {
    background-color: #A1A8AF;
    border-color: #A1A8AF;
}

.bg-main-color {
    background: #A47864;
}

.text-main-color {
    color: #A47864;
}

.border-main-color {
    border-color: #A47864;
}

.bg-sub-color {
    background: #144766;
}

.border-sub-color {
    border-color: #144766;
}

.text-sub-color {
    color: #144766;
}

.bg-sub2-color {
    background: #AB7A78;
}

.text-sub2-color {
    color: #7c4c53;
}

.bg-tcross-color {
    background: #91aa61;
}

.text-tcross-color {
    color: #91aa61;
}

.text-tcross-color:hover {
    color: #91aa61;
}

.btn-hover:hover {
    opacity: 0.8;
}

.text-glay {
    color: #6c757d;
}

.back {
    vertical-align: middle;
}

.stripe-btn button {
    min-width: 260px;
    background: none;
    box-shadow: none;
}

.stripe-btn button:hover {
    opacity: 0.8;
}

.stripe-btn button span {
    height: 48px;
    line-height: 48px;
    background: #144766;
    border-color: #144766;
    font-size: 16px;
}

/* .border_btm::after {
    border-bottom: solid 4px #58B470;
} */

/*-------------
登録フォームの利用規約box
-------------*/
.agreement-area {
    width: 90%;
    margin: 0 auto 20px;
}

.scroll_box {
    height: 400px;
    width: 100%;
    overflow: auto;
    border: 1px solid #333;
    padding: 30px;
    margin: 0 auto 20px;
}
.scroll_box p {
    font-size: 15px;
}

/* スクロール前の無効スタイル */
.agreement-area.not-scrolled {
    opacity: 0.6;
    pointer-events: none;
}

/* スクロール完了後に有効化 */
.agreement-area.scrolled {
    opacity: 1;
    pointer-events: auto;
    transition: opacity 0.3s ease;
}

.agreement-btn {
    max-width: 340px;
    margin: 20px auto 0;
    position: relative;
}

.check-btn {
    display: block;
    width: 100%;
    background-color: #A47864;
    border: 1px solid #A47864;
    border-radius: 4px;
    color: #fff;
    font-weight: 400;
    font-size: 18px;
    padding: 10px;
    transition: color 0.15s 
    ease-in-out, background-color 0.15s 
    ease-in-out, border-color 0.15s 
    ease-in-out, box-shadow 0.15s 
    ease-in-out;
}

.check-btn:hover:not(:disabled) {
    background-color: color-mix(in srgb, #A47864 85%, black);
}

.check-btn:disabled {
    background-color: #ccc;
    border-color: #ccc;
    box-shadow: none;
    color: #eee;
}

/* ボタンが無効のとき */
.check-btn:disabled {
    background-color: #ccc;
    border-color: #ccc;
    cursor: not-allowed;
}

@media (max-width: 768px) {

    .agreement-area {
        width: 100%;
        margin: 0 auto 20px;
    }

    .scroll_box {
        height: 480px;
        width: 100%;
        overflow: auto;
        border: 1px solid #333;
        padding: 20px;
        margin: 0 auto 20px;
    }

}