@charset "UTF-8";

/*
https://irodori-design-web.com/blog/blog-2576/
【WordPress】記事内の画像を完全自動でポップアップする方法
*/

/* #################################################################################################################### */
/* #################################################################################################################### */
/* ▼完全自動での画像拡大 css
*/

.popup_main_text .target_images img{
    cursor: pointer;
    transition: .3s all ease-in-out;
}
.popup_main_text .target_images img:hover{
    opacity: .9;
}
.popup_image_area{
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,.75);
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    z-index: 998;
    position: fixed;
    display: flex;
    align-items: center;
    justify-content: center;
    visibility: hidden;
    opacity: 0;
    transition: .3s all ease-in-out;

}
.popup_image_area.-on{
    opacity: 1;
    visibility: visible;
}
.popup_image_area__outer{
    width: 96%;
    height: 96%;

    display: flex;
    align-items: center;
    justify-content: center;
    transition: .3s all ease-in-out;

}
.popup_image_area__inner{
    width: 100%;
    height: 100%;

    position: relative;
}
.popup_image_area__close{
    z-index: 999;
    width: 3rem;
    height: 3rem;
    border-radius: 50%;
    background: #000;
    border: 2px solid #fff;
    left: 1rem;
    top: 1rem;
    position: absolute;
    box-shadow: 0 0 1.5rem rgba(0,0,0,.25);
    transition: .3s all ease-in-out;
    cursor: pointer;
}
.popup_image_area__close:hover{
    transform: scale(.9);
}
.popup_image_area__close::before,
.popup_image_area__close::after{
    width: 1.2rem;
    height: 2px;
    position: absolute;
    left: 0;
    right: 0;
    top: calc(50% - 1px);
    margin: 0 auto;
    background: #fff;
    display: block;
    content: "";
}
.popup_image_area__close::before{
    transform: rotate(45deg);
}
.popup_image_area__close::after{
    transform: rotate(-45deg);
}
.popup_image_area__image{
    width: 100%;
    height: 100%;
}
.popup_image_area__image img{
    width: 100%;
    height: 100%;
    object-fit: contain;
}