/* -----------------------------------
 * Micromodal
 * ----------------------------------- */
.modal { display: none; }
.modal.is-open { display: block; }

.modal__overlay {
    position: fixed; top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(0, 0, 0, 0.7);
    display: flex; justify-content: center; align-items: center;
    z-index: 9998;
}

.modal__container {
    position: relative;
    box-sizing: border-box;
    max-width: 95vw; 
    max-height: 95vh;
}

.modal__content {
    width: 717px;
    height: 770px;
    max-width: 100%;
    max-height: calc(95vh - 14px); /* 上下border分 - 7px*2 */
    background-color: #fff;
    border: 7px solid #fff;
    border-radius: 15px;
    overflow: hidden;}

.modal__content iframe {
    width: 100%;
    height: 100%;
    display: block;
}

.custom-close {
    position: absolute;
    top: -15px;
    right: -15px;
	background: transparent url(../img/btn_close.png) no-repeat;
    width: 51px;
    height: 51px;
    border: none;
    cursor: pointer;
    z-index: 9999;
}

/* -----------------------------------
 * フェードアニメーション設定
 * ----------------------------------- */
.modal[aria-hidden="false"] .modal__overlay {
    animation: mmfadeIn 0.3s ease forwards;
}
.modal[aria-hidden="true"] .modal__overlay {
    animation: mmfadeOut 0.3s ease forwards;
}

@keyframes mmfadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}
@keyframes mmfadeOut {
    from { opacity: 1; }
    to { opacity: 0; }
}