@charset "utf-8";
/*-----modal----- */

/*モーダルが開いたときの背景*/
.m-image{
    cursor: zoom-in;
}
/*モーダルが開いたときの背景*/
.modal-wrapper {
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    left: 0;
    background: rgba(0,0,0,0.5);
    pointer-events: none;
    opacity: 0;
    transition: 0.25s ease-out;
    cursor: zoom-out;
    z-index: 99;
}
.modal-wrapper.show {
    opacity: 1;
    pointer-events: all;
}
/*モーダルが開いたときの画像*/
.modal-image {
    position: absolute;
    max-width: 80%;
    max-height: 80%;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    object-fit: cover;
    opacity: 0;
    transition: 0.5s ease-out;
    z-index: 999;
}
.modal-image.show {
    opacity: 1;
    pointer-events: all;
}
/*モーダルが開いたときの背景2*/
.describe-modal {
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    left: 0;
    background: rgba(0,0,0,0.5);
    pointer-events: none;
    opacity: 0;
    transition: 0.25s ease-out;
    z-index: 99;
}
.describe-modal.show {
    opacity: 1;
    pointer-events: all;
}
.describe-text{
    width: 600px;
    height: auto;
    background: #fff;
    margin: 30px auto 0px;
}