@charset "UTF-8";

/* gallery */
.wrap-gallery {position: relative;}
.wrap-gallery .frame {position: relative;}
.wrap-gallery .title {position: absolute; left:0; top:0; z-index: 2; }
.wrap-gallery .title h2 {padding:0.5rem 1.5rem; background:#734C4C; font-family: psb; font-size: 1.8rem; color:#fff;}
.wrap-gallery .slider {overflow:hidden;}
.wrap-gallery .img-box img {width: 100%;}
.wrap-gallery .text-box {position: absolute; bottom:0; left:0; display: flex; align-items: center; width: 100%; height:7rem; padding:0 16rem 0 2rem; background:rgba(255,255,255,0.9);}
.wrap-gallery .text-box p { overflow:hidden; display:-webkit-box; -webkit-line-clamp:1; -webkit-box-orient:vertical; font-family: psb; font-size: 1.8rem; color:#222;}
.wrap-gallery .playstop {display: none;}
.wrap-gallery .prevnext {position: absolute; right:0; bottom:0; z-index: 1; font-size: 0;}
.wrap-gallery .prevnext button {position: relative; width: 7rem; height:7rem; background-color:#000; text-indent: -9999rem; transition:background .3s; }
.wrap-gallery .prevnext button:hover {background-color:#F2778D;}
.wrap-gallery .prevnext .prev::after {content:''; position: absolute; left:50%; top:50%; width: 3.4rem; height:0.9rem; background-image:url('../images/ic-prev.png'); background-size:cover; background-position: center; background-repeat: no-repeat; transform:translate(calc(-50% + 0.05rem),calc(-50% + 0.05rem))}
.wrap-gallery .prevnext .next::after {content:''; position: absolute; left:50%; top:50%; width: 3.4rem; height:0.9rem; background-image:url('../images/ic-next.png'); background-size:cover; background-position: center; background-repeat: no-repeat; transform:translate(calc(-50% + 0.05rem),calc(-50% + 0.05rem))}

@media screen and (max-width:1200px) {
    .wrap-gallery .frame {position: relative; max-width:81rem; margin:0 auto;}
}
@media screen and (max-width:768px) {
    .wrap-gallery .prevnext button {width:4rem; height:5rem;}
    .wrap-gallery .text-box {bottom:-1px; height:5rem; padding:0 10.5rem 0 1.5rem;}
    .wrap-gallery .text-box p {font-size: 1.6rem;}
    .wrap-gallery .prevnext {bottom:-1px;}
    .wrap-gallery .prevnext .prev {right:-1px;}
    .wrap-gallery .prevnext .prev::after {width: 2rem; height:0.7rem; background-position:left bottom;}
    .wrap-gallery .prevnext .next::after {width: 2rem; height:0.7rem; background-position:right bottom;}
}