@charset "utf-8";

.wrap-visual .loading{padding-bottom: 94rem;}
.wrap-visual .swiper-slide{position: relative;}
/*.wrap-visual .swiper-slide .visual-image{background-color: #000000; padding-bottom: 94rem; position: relative;}*/
.wrap-visual .swiper-slide .visual-image{background-color: white; padding-bottom: 94rem; position: relative;}
/*.wrap-visual .swiper-slide img{opacity: .65; position: absolute; left: 0; top: 0; width: 100%; height: 100%; object-fit: cover;}*/
.wrap-visual .swiper-slide img{opacity: 1; position: absolute; left: 0; top: 0; width: 100%; height: 100%; object-fit: cover;}
.wrap-visual .swiper-slide .visual-content{position: absolute; left: 0; top: 38rem; width: 100%; z-index: 2; text-align: center;}
.wrap-visual .visual-content h1{font-size: 8rem; color: #ffffff; font-family: pbl; position: relative; top: -10rem; opacity: 0; filter: blur(.5rem); transition: all .75s;}
.wrap-visual .visual-content p{font-size: 2.4rem; line-height: 3.2rem; color: white; font-family: pm; margin-top: 1.4rem; position: relative; top: -10rem; opacity: 0; filter: blur(.5rem); transition: all .75s; transition-delay: .75s;}
.wrap-visual .visual-control{position: absolute; left: 50%; transform: translateX(-50%); bottom: 6rem; z-index: 2; display: flex; align-items: center; background-color: rgba(0,0,0,.6); border-radius: 2rem; padding: .9rem 2rem; opacity: 0; filter: blur(.5rem); transition: all .35s; transition-delay: 1.5s;}
.wrap-visual .visual-control .prev,
.wrap-visual .visual-control .next{width: .7rem; height: 1.2rem; text-indent: -9999rem;}
.wrap-visual .visual-control .prev{background: url(../images/btn-visual-prev.png) no-repeat center center / cover; margin-right: .9rem;}
.wrap-visual .visual-control .next{background: url(../images/btn-visual-next.png) no-repeat center center / cover; margin-left: .9rem;}
.wrap-visual .visual-control .visual-playstop{margin: 0 1rem;}
.wrap-visual .visual-control .visual-playstop button{display: none; width: .6rem; height: .8rem; text-indent: -9999rem;}
.wrap-visual .visual-control .visual-playstop button.on{display: block;}
.wrap-visual .visual-control .visual-playstop button.play{background: url(../images/btn-visual-play.png) no-repeat center center / cover;}
.wrap-visual .visual-control .visual-playstop button.stop{background: url(../images/btn-visual-stop.png) no-repeat center center / cover;}
.wrap-visual .visual-control .now,
.wrap-visual .visual-control .total{font-size: 1.4rem; color: white; font-family: pb; font-variant-numeric: tabular-nums;}

@media screen and (max-width: 1200px) {
    .wrap-visual .swiper-slide .visual-content{top: 31.5rem;}
    .wrap-visual .loading,
	.wrap-visual .swiper-slide .visual-image{padding-bottom: 74rem;}
	.wrap-visual .visual-content h1{font-size: 6rem;}
    .wrap-visual .visual-control{bottom: 4rem;}
}

@media screen and (max-width: 768px) {
    .wrap-visual .loading,
    .wrap-visual .swiper-slide .visual-image{padding-bottom: 54rem;}
    .wrap-visual .swiper-slide .visual-content{top: 20.5rem;}
	.wrap-visual .visual-content h1{font-size: 4.2rem;}
	.wrap-visual .visual-content p{font-size: 1.6rem; line-height: 2.2rem;}
    .wrap-visual .visual-control{bottom: 3rem;}
}

/* [S] Animation */
.wrap-visual.ani .visual-content h1,
.wrap-visual.ani .visual-content p{opacity: 1; filter:blur(0); top: 0;}
.wrap-visual.ani .visual-control{opacity: 1; filter:blur(0);}
/* [E] Animation */