/* Modal */
.clm-modal {
    opacity: 0;
    visibility: hidden;
    display: none;
}


/* Modal active */
.clm-modal.active {
    opacity: 1;
    visibility: visible;
    display: block;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    transition: .3s;
    box-sizing: border-box;
    z-index: 1002;
    width: 83%;
    max-width: 340px;
}

/* Modal Body Content */
.clm-modal .modal-body .modal-content {
    background: #fff;
    padding: 15px;
    border-radius: 2px;
}

/* Modal Banner */
.clm-modal .modal-banner {
    width: 100%;
    height: auto;
    border-radius: 2px;
}

/* Modal 閉じるボタン */
.clm-modal .modal-close {
    position: absolute;
    top: -55px;
    right: -20px;
    font-size: 40px;
    color: #fff;
    cursor: pointer;
}

/* Modal Background */

.clm-modal-background {
    background: rgba(0, 0, 0, .7);
    width: 100%;
    height: 100%;
    display: none;
    opacity: 0;
}

.clm-modal-background.active {
    opacity: 1;
    display: block;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1001;
}


/* Modal CLM遷移ボタン */
.clm-modal .modal-transition {
    background: rgb(78, 50, 125);
    background: linear-gradient(90deg, rgba(78, 50, 125, 1) 0%, rgba(58, 67, 122, 1) 50%, rgba(42, 86, 123, 1) 100%);
    color: #fff;
    width: 90%;
    margin: 6px auto 12px;
    display: block;
    padding: 12px 0;
    border-radius: 7px;
    text-align: center
}