@charset "utf-8";

#sp-top {
    padding-top: 0px;
}

.bg-sp-top {
	background-color: #FFF;

}
.bg-sp-inner {
	width: 100%;
	margin: auto;
	position: relative;
}

#main-img-area {
	position: relative;
}
#main-logo {
    width: 150px;
	position: absolute;
	left: 30px;
	top: 30px;
}
#main-img {
	width: 100%;
	min-height: 500px;
}
#main-catch {
	position: absolute;
	width: 100%;
	bottom: 0px;
	left: 0;
	right: 0;
	margin: auto;
	padding-left: 0px;
	animation: SlideInY 1.4s ease-out;
}
@media only screen and (min-device-width:390px) {
	#main-catch {
		position: absolute;
	}
}
@media only screen and (min-device-width:411px), screen and (min-device-width:414px) {
	#main-catch {
		position: absolute;
	}
}
@media only screen and (min-device-width:428px) {
	#main-catch {
		position: absolute;
	}
}
@media only screen and (min-device-width:768px) {
	#main-catch {
	}
}
@keyframes SlideInY {
	0% {
		opacity: 0;
		transform: translateY(50px);
	}
	100% {
		opacity: 1;
		transform: translateY(0);
	}
}
.sp-top-inner {
	padding: 0px 0 20px;
	background-color: #f3f3f3;
}
.sp-main-contents {
	color: #737373;
}


/* [Str] page5 */
#sp-p5-pk01 {

}
.sp-p5-album_link {
	position: absolute;
	display: block;
	width: 260px;
	height: 260px;
	left: 0;
	right: 0;
	top: 0;
	margin: auto;
	z-index: 9999;
}

@media only screen and (min-device-width:390px) {
	.sp-p5-album_link {width: 270px; height: 270px;}
}
@media only screen and (min-device-width:411px), screen and (min-device-width:414px) {
	.sp-p5-album_link {width: 288px; height: 286px;}
}
@media only screen and (min-device-width:428px) {
	.sp-p5-album_link {width: 296px; height: 296px;}
}

.sp-ani-img {
	position: absolute;
}



/* 2023-01 special   375px*/

#sp-p2-pk01 .swiper-slide {
	width: 100% !important;
}
#sp-p2-pk11 .swiper-slide {
	width: 30% !important;
	padding: 0 3px 20px;
}

/*背景*/
.back_img{
	/*background-image:url("/special/assets/img/2023/02/special/back.png");*/
	/*background-color: #388ec8;*/
}

	#sp-p2-pk01-img-area {height: 710px;}
	#sp-p2-pk02-img-area {height: 710px;}
	#sp-p2-pk03-img-area {height: 750px;}
	#sp-p2-pk04-img-area {height: 780px;}
	#sp-p2-pk05-img-area {height: 285px;}
	#sp-p2-pk06-img-area {height: 480px;}

	
	/* link */
	.sp-p2-link {
		position: absolute;
		display: block;
	}

	.sp-p2-link-pk01-1{
		bottom: 6%;
		left: 10%;
		width: 23%;
		height: 4%;
		z-index: 2;
	} 

	.sp-p2-link-pk01-2{
		bottom: 6%;
		left: 40%;
		width: 25%;
		height: 4%;
		z-index: 2;
	} 

	.sp-p2-link-pk01-3{
		bottom: 6%;
		left: 69%;
		width: 25%;
		height: 4%;
		z-index: 2;
	} 

	.sp-p2-link-pk02-1{
		bottom: 25.5%;
		left: 38%;
		width: 25%;
		height: 2%;
		z-index: 2;
	} 

	.sp-p2-link-pk02-2{
		bottom: 11.5%;
		left: 55%;
		width: 8%;
		height: 2%;
		z-index: 2;
	} 

	.sp-p2-link-pk02-3{
		bottom: 7%;
		left: 38%;
		width: 25%;
		height: 2%;
		z-index: 2;
	} 

	.sp-p2-link-pk03-1{
		bottom: 24.5%;
		left: 36%;
		width: 30%;
		height: 2%;
		z-index: 2;
	} 

	.sp-p2-link-pk03-2{
		bottom: 11.5%;
		left: 55%;
		width: 8%;
		height: 2%;
		z-index: 2;
	} 

	.sp-p2-link-pk03-3{
		bottom: 7%;
		left: 38%;
		width: 25%;
		height: 2%;
		z-index: 2;
	} 

	.sp-p2-link-pk04-1{
		bottom: 28.5%;
		left: 36%;
		width: 30%;
		height: 2%;
		z-index: 2;
	} 

	.sp-p2-link-pk04-2{
		bottom: 15.5%;
		left: 55%;
		width: 8%;
		height: 2%;
		z-index: 2;
	} 

	.sp-p2-link-pk04-3{
		bottom: 11%;
		left: 38%;
		width: 25%;
		height: 2%;
		z-index: 2;
	} 

	.sp-p2-link-pk05-1{
		top: 19%;
		left: 10%;
		width: 80%;
		height: 58%;
		z-index: 2;
	} 

	.sp-p2-link-pk06-1{
		top: 37%;
		left: 32%;
		width: 35%;
		height: 3%;
		z-index: 2;
	} 

	div.anchor{
		display: block;
		padding-top: 40px;
		margin-top: -40px;
	}
	

@media only screen and (min-device-width:390px) {
	#sp-p2-pk01-img-area {height: 739px;}
	#sp-p2-pk02-img-area {height: 737px;}
	#sp-p2-pk03-img-area {height: 778px;}
	#sp-p2-pk04-img-area {height: 815px;}
	#sp-p2-pk05-img-area {height: 312px;}
	#sp-p2-pk06-img-area {height: 502px;}
}

@media only screen and (min-device-width:411px), screen and (min-device-width:414px) {
	#sp-p2-pk01-img-area {height: 779px;}
	#sp-p2-pk02-img-area {height: 777px;}
	#sp-p2-pk03-img-area {height: 820px;}
	#sp-p2-pk04-img-area {height: 858px;}
	#sp-p2-pk05-img-area {height: 335px;}
	#sp-p2-pk06-img-area {height: 530px;}
}

@media only screen and (min-device-width:428px) {
	#sp-p2-pk01-img-area {height: 818px;}
	#sp-p2-pk02-img-area {height: 810px;}
	#sp-p2-pk03-img-area {height: 857px;}
	#sp-p2-pk04-img-area {height: 890px;}
	#sp-p2-pk05-img-area {height: 365px;}
	#sp-p2-pk06-img-area {height: 560px;}
}

@media only screen and (min-device-width:768px) {
	#sp-p2-pk01-img-area {height: 710px;}
	#sp-p2-pk02-img-area {height: 710px;}
	#sp-p2-pk03-img-area {height: 750px;}
	#sp-p2-pk04-img-area {height: 780px;}
	#sp-p2-pk05-img-area {height: 285px;}
	#sp-p2-pk06-img-area {height: 480px;}
}


/* [str] page3 */


	.box{
		opacity: 0;
	}
	
	
	.fadeUp {
	animation-name:fadeUpAnime;
	animation-duration:1s;
	animation-fill-mode:forwards;
	opacity: 0;
	}
	@keyframes fadeUpAnime{
	  from {
		opacity: 0;
		transform: translateY(100px);
	  }
	
	  to {
		opacity: 1;
		transform: translateY(0);
	  }
	}

	.aniDelay0s{ animation-delay: 0s;}
	.aniDelay1s{ animation-delay: 1s;}
	.aniDelay2s{ animation-delay: 2s;}
	.aniDelay3s{ animation-delay: 3s;}
	.aniDelay4s{ animation-delay: 4s;}
	.aniDelay5s{ animation-delay: 5s;}
	.aniDelay6s{ animation-delay: 6s;}

	

/* common */

.bk-bd-area {
	width: 340px;
	margin: auto;
}
.gray-bd-area {
    border: 1px solid #737373;
    color: #737373;
	width: 270px;
	margin: auto;
}

@media only screen and (min-device-width:390px) {
	.gray-bd-area {
		border: 1px solid #737373;
		color: #737373;
		width: 280px;
		margin: auto;
	}
}

@media only screen and (min-device-width:411px), screen and (min-device-width:414px) {
	.gray-bd-area {
		border: 1px solid #737373;
		color: #737373;
		width: 295px;
		margin: auto;
	}
}

@media only screen and (min-device-width:428px) {
	.gray-bd-area {
		border: 1px solid #737373;
		color: #737373;
		width: 307px;
		margin: auto;
	}
}

.gray-bd-badge {
	background-color: #737373;
	color: #FFF;
}
.gray-bd-area a {
    color: #737373;
}

.video-js .vjs-big-play-button {
    font-size: 3.0em;
    line-height: 50px;
    height: 50px;
    width: 50px;
    display: block;
    position: absolute;
    top: 10px;
    left: 10px;
    padding: 0;
    cursor: pointer;
    opacity: 0.75;
    border: 0.06666em solid #fff;
    background-color: transparent;
	color: #fff;
    border-radius: 25px;
    transition: all 0.4s;
}

.vjs-big-play-centered .vjs-big-play-button {
    top: 47%;
    left: 62%;
}


/* [Str]  movie */
.sp2-p4-file-block {
	/*padding-left: 10px;*/
	padding-left: 0px;
}
.sp2-page4-block-bd a {
	display: block;
	color: #656565;
	height: 20px;
	width: 330px;
	margin-bottom: 15px;
}
.sp2-page4-block-bd a span{
	display: block;
	float: left;
}
.sp2-page4-block-bd a span.moveLinkUnder {
	padding: 0px 5px 0 3px;
	border-bottom: 1px solid #656565;
}

.sp3-p6-file-block a {
	width: 300px;
}
.sp2-page4-block-bd-inner {
	padding-top: 10px;
}
.sp2-page4-block-bd-inner p {
	color: #656565;
}
.badge-sp2-p4 {
    background-color: #656565;
}

.sp-p5-pk00-block-bg a {
    font-size: 0.95em !important;
}
.sp-p5-pk00-block-bg {
    background-image: url(/special/assets/img/2025/07/movie/pickup_00_file_bg.png);
    background-size: 350px 290px;
    px;
    height: 350px;
}
.sp-p5-pk00-block-bg .sp2-page4-block-bd {
	padding: 60px 10px 0px;
}

.sp-p5-pk01-block-bg {
    background-image: url(/special/assets/img/2025/07/movie/pickup_01_file_bg.png);
    background-size: 350px 440px;
    height: 440px;
}
.sp-p5-pk02-block-bg {
    background-image: url(/special/assets/img/2025/07/movie/pickup_02_file_bg.png);
    background-size: 350px 375px;
    height: 375px;
}
.sp-p5-pk03-block-bg {
    background-image: url(/special/assets/img/2025/07/movie/pickup_03_file_bg.png);
    background-size: 350px 560px;
    height: 560px;
}

.sp-p5-pk04-block-bg {
    background-image: url(/special/assets/img/2025/07/movie/pickup_04_file_bg.png);
    background-size: 350px 370px;
    height: 370px;
}

.sp-p5-pk05-block-bg {
    background-image: url(/special/assets/img/2025/07/movie/pickup_05_file_bg.png);
    background-size: 350px 545px;
    height: 545px;
}

.sp-p5-pk06-block-bg {
    background-image: url(/special/assets/img/2025/07/movie/pickup_06_file_bg.png);
    background-size: 350px 480px;
    height: 480px;
}




.sp-p5-pk01 { background-color: #2db9ca; color:#fff; }
.sp-p5-pk02 { background-color: #1fa09d; color:#fff; }
.sp-p5-pk03 { background-color: #f72c9b; color:#fff; }
.sp-p5-pk04 { background-color: #e7bf62; color:#fff; }
.sp-p5-pk05 { background-color: #f70000; color:#fff; }
.sp-p5-pk06 { background-color: #000000; color:#fff; }



#sp-p5-pickup01 .sp2-page4-block-text {
	background-image: url(/special/assets/img/2025/07/movie/pickup_01_sub_bg.png);
    background-repeat: no-repeat;
	background-position: 180px 20px;
    background-size: 160px;
}

#sp-p5-pickup02 .sp2-page4-block-text {
	background-image: url(/special/assets/img/2025/07/movie/pickup_02_sub_bg.png);
    background-repeat: no-repeat;
	background-position: 160px;
	background-size: 180px;
}

#sp-p5-pickup03 .sp2-page4-block-text {
    background-image: url(/special/assets/img/2025/07/movie/pickup_03_sub_bg.png);
    background-repeat: no-repeat;
	background-position: 20px 20px;
	background-size: 160px;
}

#sp-p5-pickup04 .sp2-page4-block-text {
	background-image: url(/special/assets/img/2025/07/movie/pickup_04_sub_bg.png);
    background-repeat: no-repeat;
    background-position: 30px center;
    background-size: 180px;
}

#sp-p5-pickup05 .sp2-page4-block-text {
	background-image: url(/special/assets/img/2025/07/movie/pickup_05_sub_bg.png);
    background-repeat: no-repeat;
    background-position: 150px 20px;
    background-size: 170px;
}

#sp-p5-pickup06 .sp2-page4-block-text {
	background-image: url(/special/assets/img/2025/07/movie/pickup_06_sub_bg.png);
    background-repeat: no-repeat;
    background-position: 150px 20px;
    background-size: 170px;
}





/*------------------------------------------------------*/

/*p2 動画*/
.video-js .vjs-big-play-button {
    font-size: 3.0em;
    line-height: 50px;
    height: 50px;
    width: 50px;
    display: block;
    position: absolute;
    top: 10px;
    left: 10px;
    padding: 0;
    cursor: pointer;
    opacity: 0.75;
    border: 0.06666em solid #fff;
    background-color: #FFF;
	color: #000;
    border-radius: 25px;
    transition: all 0.4s;
}

.vjs-big-play-centered .vjs-big-play-button {
    top: 47%;
    left: 56%;
}

#sp-p2-pk17-movie-1 {
	width: 320px;
	height: 180px;
	margin: auto;
}

#sp-p2-pk17-movie-2 {
	width: 320px;
	height: 180px;
	margin: auto;
}