@charset "utf-8";

#top_animetion .pc {
	display: unset;
}

#top_animetion .sp {
	display: none;
}

#top_animetion {
	position: relative;
	width: 100%;
	overflow: hidden;
	/* border:1px solid #c00; */
}

#top_animetion #animetion_in {
	position: relative;
	width: 100%;
	height: 0;
	padding-top: 56.285714285714286%;
	background-color: #0c131a;
	overflow: hidden;
	z-index: 0;
	will-change: animation;
}

#top_animetion #animetion_in>div {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 0;
	padding-top: 56.285714285714286%;
}

#animetion_in>div video,
#animetion_in>div img,
#animetion_in>div p,
#animetion_in>div div,
#animetion_in>div a,
#animetion_in>div figure {
	opacity: 0;
}

#animetion_in>div figure>img,
#animetion_in>div figure>p {
	opacity: 1;
}

/* キャプション */
[id^="scene_"] [id*="cap_"] {
	position: absolute;
	bottom: 5px;
	right: 5px;
	/*    left: 5px;*/
	color: #fff;
	font-size: 12px;
	font-family: "游明朝 Medium", YuMincho Medium, "ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro", "ＭＳ Ｐ明朝", "MS PMincho", serif;
	-webkit-transform: rotate(.028deg);
	-ms-transform: rotate(.028deg);
	transform: rotate(.028deg);
	font-feature-settings: normal;
	letter-spacing: 1px;
	/*	text-shadow: 2px 0 2px #fff,-2px 0 2px #fff,0 2px 2px #fff,0 -2px 2px #fff;*/
	z-index: 25;
}

/* 各シーン設定 */
#top_animetion #animetion_in>#scene_1 .scene1_img01 {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	z-index: 11;
}

#top_animetion #animetion_in>#scene_1 .scene1_img02,
#top_animetion #animetion_in>#scene_1 .scene1_img03,
#top_animetion #animetion_in>#scene_1 .scene1_img04 {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	z-index: 12;
}

#top_animetion #animetion_in>#scene_1 .scene1_img05 {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	z-index: 13;
}

#top_animetion #animetion_in>#scene_1 .scene1_img06,
#top_animetion #animetion_in>#scene_1 .scene1_img07,
#top_animetion #animetion_in>#scene_1 .scene1_img08 {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
}

#top_animetion #animetion_in>#scene_1 .scene1_img06 {
	z-index: 14;
}

#top_animetion #animetion_in>#scene_1 .scene1_img07 {
	z-index: 15;
}

#top_animetion #animetion_in>#scene_1 .scene1_img08 {
	z-index: 16;
}


#btnSkip,
#btnReplay {
	position: absolute;
	bottom: 6px;
	left: 10px;
	width: calc(90px* 1.1);
	height: calc(20px* 1.1);
	cursor: pointer;
	display: none;
}


/*=============================
spから
=============================*/
@media screen and (max-width: 767px) {

	#top_animetion .pc {
		display: none;
	}

	#top_animetion .sp {
		display: unset;
	}

	#top_animetion #animetion_in,
	#top_animetion #animetion_in>div {
		padding-top: 109.285714285714286%;
	}

	#top_animetion #animetion_in>#scene_1 .scene1_img01 {
		position: absolute;
		top: 0;
		left: 0;
		filter: drop-shadow(1px 1px 3px black);
	}

	#top_animetion #animetion_in>#scene_2 .scene2_img01 {
		position: absolute;
		top: 0;
		left: 0;
		filter: drop-shadow(1px 1px 3px black);
	}

	#top_animetion #animetion_in>#scene_3 .scene3_img01 {
		position: absolute;
		top: 0;
		left: 0;
		filter: drop-shadow(1px 1px 3px black);
	}


	#btnSkip,
	#btnReplay {
		width: calc(90px * 0.7);
		height: calc(20px * 0.7);
		transform: translate(0, -50%);
	}
}