@charset "UTF-8";
html{
	overflow-y: scroll;
	-ms-overflow-style: none;
	scrollbar-width: none;
	-webkit-overflow-scrolling:touch;
}
html::-webkit-scrollbar {
	display:none;
}
html,
body{
	margin: 0;
	padding: 0;
	backface-visibility: hidden;
}
*{
	margin: 0;
	padding: 0;
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
}
article, aside, canvas, details, figcaption, figure,
footer, header, hgroup, menu, nav, section, summary {
	display: block;
}
body{
	background: #FFF;
	font-family: "Hiragino Kaku Gothic Pro","ヒラギノ角ゴ Pro W3","メイリオ","meiryo","MS P Gothic","ＭＳ Ｐゴシック","Osaka", sans-serif;
	text-align: center;
	-webkit-text-size-adjust: 100%;
	-moz-text-size-adjust: 100%;
	-ms-text-size-adjust: 100%;
	-o-text-size-adjust: 100%;
	text-size-adjust: 100%;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}
img{
	border: 0;
	vertical-align: top;
	outline: none;
	max-width: 100%;
	height: auto;

	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;

	vertical-align: top;

	-moz-user-select: none; 
	-webkit-user-select: none;
	-ms-user-select: none;
	user-select: none;
	-webkit-user-drag: none; 
	user-drag: none;
}

#anim_img_box{
				position: sticky;
				width: 100%;
				height: 100vh;
				top:0;
				display: flex;
				justify-content: center;
				align-items: center;
}

#anim_img{
				width: 100%;
}

.f{
	height: 100vh;
	background: #fff;
	position: relative;
	z-index: 1000;

}
.t{
	height: 100vh;
	background: #fff;
	position: relative;
	z-index: 10;
}

.wrapper{
	position: sticky;
	width: 100%;
	height: 100vh;
	top:0;
	display: flex;
	justify-content: center;
	align-items: center;
}
.wrapper i{
	position: relative;
	display: inline-block;
	width: 100%;
	padding-top: 56.25%;
	overflow: hidden;
}
.img{
		width: 100%;
		display: block;
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		opacity: 0;
		z-index: 2;
}
.on{
	opacity: 1;
	z-index: 3;
}
.def{
	opacity: 1;
	z-index: 1;
}

.t p,
.f p,
.wrp p{
	position: static;
	top: 0;
	left: 0;
	height: 100vh;
	width: 100%;
	text-align: center;
	line-height: 1;
	background: no-repeat center center #fff;;
	background-size: contain;
}
.t,
.t p{
	background-image: url("../../story_images/s1_end.png")
}



.f p{
	background-image: url("../../story_images/s1_000.png")
}
.story2 .f p{
	background-image: url("../../story_images/story2/000.png")
}
.story3 .f p{
	background-image: url("../../story_images/story3/000.png")
}
.story4 .f p{
	background-image: url("../../story_images/story4/000.png")
}
.story4 .t p{
	background-image: url("../../story_images/story4/end.png")
}

.wrp p:nth-of-type(1){ background-image: url("../../story_images/s1_001.png"); z-index: 1;}
.wrp p:nth-of-type(2){ background-image: url("../../story_images/s1_002.png"); z-index: 2;}
.wrp p:nth-of-type(3){ background-image: url("../../story_images/s1_003.png"); z-index: 3;}
.wrp p:nth-of-type(4){ background-image: url("../../story_images/s1_004.png"); z-index: 4;}
.wrp p:nth-of-type(5){ background-image: url("../../story_images/s1_005.png"); z-index: 5;}
.wrp p:nth-of-type(6){ background-image: url("../../story_images/s1_006.png"); z-index: 6;}
.wrp p:nth-of-type(7){ background-image: url("../../story_images/s1_007.png"); z-index: 7;}
.wrp p:nth-of-type(8){ background-image: url("../../story_images/s1_008.png"); z-index: 8;}
.wrp p:nth-of-type(9){ background-image: url("../../story_images/s1_009.png"); z-index: 9;}
.wrp p:nth-of-type(10){ background-image: url("../../story_images/s1_010.png"); z-index: 10;}

.wrp p:nth-of-type(11){ background-image: url("../../story_images/s1_011.png"); z-index: 11;}
.wrp p:nth-of-type(12){ background-image: url("../../story_images/s1_012.png"); z-index: 12;}
.wrp p:nth-of-type(13){ background-image: url("../../story_images/s1_013.png"); z-index: 13;}
.wrp p:nth-of-type(14){ background-image: url("../../story_images/s1_014.png"); z-index: 14;}
.wrp p:nth-of-type(15){ background-image: url("../../story_images/s1_015.png"); z-index: 15;}
.wrp p:nth-of-type(16){ background-image: url("../../story_images/s1_016.png"); z-index: 16;}
.wrp p:nth-of-type(17){ background-image: url("../../story_images/s1_017.png"); z-index: 17;}
.wrp p:nth-of-type(18){ background-image: url("../../story_images/s1_018.png"); z-index: 18;}
.wrp p:nth-of-type(19){ background-image: url("../../story_images/s1_019.png"); z-index: 19;}
.wrp p:nth-of-type(20){ background-image: url("../../story_images/s1_020.png"); z-index: 20;}


.wrp p:nth-of-type(21){ background-image: url("../../story_images/s1_021.png"); z-index: 21;}
.wrp p:nth-of-type(22){ background-image: url("../../story_images/s1_022.png"); z-index: 22;}
.wrp p:nth-of-type(23){ background-image: url("../../story_images/s1_023.png"); z-index: 23;}
.wrp p:nth-of-type(24){ background-image: url("../../story_images/s1_024.png"); z-index: 24;}
.wrp p:nth-of-type(25){ background-image: url("../../story_images/s1_025.png"); z-index: 25;}
.wrp p:nth-of-type(26){ background-image: url("../../story_images/s1_026.png"); z-index: 26;}
.wrp p:nth-of-type(27){ background-image: url("../../story_images/s1_027.png"); z-index: 27;}
.wrp p:nth-of-type(28){ background-image: url("../../story_images/s1_028.png"); z-index: 28;}
.wrp p:nth-of-type(29){ background-image: url("../../story_images/s1_029.png"); z-index: 29;}
.wrp p:nth-of-type(30){ background-image: url("../../story_images/s1_030.png"); z-index: 30;}

.wrp p:nth-of-type(31){ background-image: url("../../story_images/s1_031.png"); z-index: 31;}
.wrp p:nth-of-type(32){ background-image: url("../../story_images/s1_032.png"); z-index: 32;}
.wrp p:nth-of-type(33){ background-image: url("../../story_images/s1_033.png"); z-index: 33;}
.wrp p:nth-of-type(34){ background-image: url("../../story_images/s1_034.png"); z-index: 34;}
.wrp p:nth-of-type(35){ background-image: url("../../story_images/s1_035.png"); z-index: 35;}
.wrp p:nth-of-type(36){ background-image: url("../../story_images/s1_036.png"); z-index: 36;}
.wrp p:nth-of-type(37){ background-image: url("../../story_images/s1_037.png"); z-index: 37;}
.wrp p:nth-of-type(38){ background-image: url("../../story_images/s1_038.png"); z-index: 38;}
.wrp p:nth-of-type(39){ background-image: url("../../story_images/s1_039.png"); z-index: 39;}
.wrp p:nth-of-type(40){ background-image: url("../../story_images/s1_040.png"); z-index: 40;}

.wrp p:nth-of-type(41){ background-image: url("../../story_images/s1_041.png"); z-index: 41;}
.wrp p:nth-of-type(42){ background-image: url("../../story_images/s1_042.png"); z-index: 42;}
.wrp p:nth-of-type(43){ background-image: url("../../story_images/s1_043.png"); z-index: 43;}
.wrp p:nth-of-type(44){ background-image: url("../../story_images/s1_044.png"); z-index: 44;}
.wrp p:nth-of-type(45){ background-image: url("../../story_images/s1_045.png"); z-index: 45;}
.wrp p:nth-of-type(46){ background-image: url("../../story_images/s1_046.png"); z-index: 46;}
.wrp p:nth-of-type(47){ background-image: url("../../story_images/s1_047.png"); z-index: 47;}
.wrp p:nth-of-type(48){ background-image: url("../../story_images/s1_048.png"); z-index: 48;}
.wrp p:nth-of-type(49){ background-image: url("../../story_images/s1_049.png"); z-index: 49;}
.wrp p:nth-of-type(50){ background-image: url("../../story_images/s1_050.png"); z-index: 50;}
.wrp p:nth-of-type(51){ background-image: url("../../story_images/s1_051.png"); z-index: 51;}
.wrp p:nth-of-type(52){ background-image: url("../../story_images/s1_052.png"); z-index: 52;}
.wrp p:nth-of-type(53){ background-image: url("../../story_images/s1_053.png"); z-index: 53;}
.wrp p:nth-of-type(54){ background-image: url("../../story_images/s1_054.png"); z-index: 54;}
.wrp p:nth-of-type(55){ background-image: url("../../story_images/s1_055.png"); z-index: 55;}
.wrp p:nth-of-type(56){ background-image: url("../../story_images/s1_056.png"); z-index: 56;}
.wrp p:nth-of-type(57){ background-image: url("../../story_images/s1_057.png"); z-index: 57;}
.wrp p:nth-of-type(58){ background-image: url("../../story_images/s1_058.png"); z-index: 58;}
.wrp p:nth-of-type(59){ background-image: url("../../story_images/s1_059.png"); z-index: 59;}
.wrp p:nth-of-type(60){ background-image: url("../../story_images/s1_060.png"); z-index: 60;}

.wrp p:nth-of-type(5){
	height: 100vh;
}
.wrp p{
	position: fixed;
	opacity: 0;
	will-change: opacity;
	backface-visibility: hidden;
	transform: translate3d(0,0,0);
}

.wrp .fo{
	opacity: 1;
}
.info{
	display: flex;
	justify-content: center;
	align-items: center;
	position: fixed;
	top: 0;
	left: 0;
	bottom: 0;
	width: 100%;
	z-index: 9998;
	background: #fff url("../images/story_icon.png?0224") no-repeat center center;
	background-size: 300px auto;
}

.loading{
	display: flex;
	justify-content: center;
	align-items: center;
	position: fixed;
	top: 0;
	left: 0;
	bottom: 0;
	width: 100%;
	z-index: 9999;
	background: #fff;
}
.loading_chu{
	overflow: hidden;
}
.loading i{
	width: 200px;
}
.loading .l2{
	display: none;
}
.loading .l3{
	display: none;
}
.page_scr{
	display: block;
	position: fixed;
	bottom: 20px;
	width: 90px;
	margin-left: -45px;
	left: 50%;
	z-index: 1010;
	animation: 2s scroll infinite;
}
.page_close{
	display: block;
	position: fixed;
	top: 20px;
	width: 60px;
	right: 20px;
	z-index: 1010;
	cursor: pointer;

}
.btn_prev_ep{
	display: block;
	position: absolute;
	bottom: 20px;
	width: 60px;
	left: 20px;
	z-index: 1010;
	cursor: pointer;
}
.btn_next_ep{
	display: block;
	position: absolute;
	bottom: 20px;
	width: 60px;
	right: 20px;
	z-index: 1010;
	cursor: pointer;
}
.pagetop{
	display: none;
	position: fixed;
	bottom: 20px;
	width: 50px;
	margin-left: -25px;
	left: 50%;
	z-index: 1010;
}
.off .page_scr{
	display: none;
}
.off .pagetop{
	display: block;
}
@keyframes scroll{
	0%{
		transform: translateY(0);
		opacity: 0;
	}
	20%{
		opacity: 1;
	}
	80%{
		opacity: 1;
	}
	100%{
		opacity: 0;
		transform: translateY(10px)
	}
}
@media screen and (max-width: 768px) {
	.info{
		background-size: 250px auto;
	}
	.page_scr{
		width: 45px;
		margin-left: -27px;
	}
	.btn_prev_ep,
	.btn_next_ep,
	.page_close{
		width: 30px;

	}
	.pagetop{
		width: 25px;
		margin-left: -13px;
	}
}