@charset "utf-8";

/* ------------
     modal
------------ */
body.is_modal_show {
    overflow: hidden;
}
.modal_content {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 20;
    opacity: 0;
    transform: translateY(100%);
    background: rgba(0, 0, 0, 0.75);
    transition:
        opacity 0.3s 0s,
        transform 0s 0.3s;
}
.modal_content.is_modal_show {
    opacity: 1;
    transform: translateY(0%);
    transition:
        opacity 0.3s 0s,
        transform 0s 0s;
}
.modal_scroll {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    overflow-x: hidden;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    text-align: center;
    letter-spacing: -0.5em;
}
.modal_scroll_inner {
    text-align: center;
    margin: auto;
    width: 100%;
    letter-spacing: normal;
    line-height: 1.5;
}
.modal_inner {
    background-color: #fff;
    position: relative;
    opacity: 0;
    transition:
        opacity 0.3s,
        transform 0.3s;
}
.is_modal_show .modal_inner {
    opacity: 1;
}
/* centering */
.modal_scroll_inner,
.modal_scroll:after {
    display: inline-block;
    vertical-align: middle;
}
.modal_scroll:after {
    content: '';
    height: 100%;
}
/* close */
.modal_close {
    border: none;
    border-radius: 50%;
    background-color: var(--color-white);
    position: absolute;
}
.modal_close::before,
.modal_close::after {
    content: '';
    margin-inline: auto;
    background-color: var(--color-red);
    display: block;
    inset: 0;
}
.modal_close::before {
    rotate: 45deg;
}
.modal_close::after {
    rotate: -45deg;
}

/* animation */
.modal_scaleIn {
    transform: scale(0.7);
}
.modal_content.is_modal_show .modal_scaleIn {
    transform: scale(1);
}
.modal_slideInRight {
    transform: translateX(50%);
}
.modal_content.is_modal_show .modal_slideInRight {
    transform: translateX(0%);
}
.modal_txt,
.modal_btn,
.culture_content_item_body_main_img_set_cover_modal_txt {
    color: inherit;
    font-family: inherit;
}
@media (min-width: 769px) {
    .modal_scroll_inner {
        padding: 120px 40px;
        max-width: 900px;
    }
    .modal_inner > img {
        width: 100%;
    }
    /* close */
    .modal_close {
        width: 77px;
        height: 77px;
        top: -40px;
        right: -40px;
    }
    .modal_close::before,
    .modal_close::after {
        width: 20px;
        height: 2px;
    }

    .modal_trigger_sp {
        pointer-events: none;
    }
}
@media (max-width: 768px) {
    .modal_txt {
        width: 100%;
        margin-top: 32rem;
        padding-bottom: 40rem;
        font-weight: 400;
        font-size: 14rem;
        text-align: center;
        border: none;
        position: relative;
    }
    .modal_txt_icon {
        width: 28rem;
        height: 28rem;
        margin: auto;
        border-radius: 50%;
        background-color: #f07e87;
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
    }
    .modal_txt_icon::before,
    .modal_txt_icon::after {
        content: '';
        width: 10rem;
        height: 2rem;
        margin: auto;
        background-color: var(--color-white);
        position: absolute;
        inset: 0;
    }
    .modal_txt_icon::after {
        rotate: 90deg;
    }

    .modal_scroll_inner {
        padding: 53rem 20rem;
    }
    /* close */
    .modal_close {
        width: 38rem;
        height: 38rem;
        top: -53rem;
        right: 0;
    }
    .modal_close::before,
    .modal_close::after {
        width: 10rem;
        height: 2rem;
        transform-origin: 40%;
    }
}