/* **************************************************

  		　　漫画

************************************************** */

.manga_img {
	width:70vh;
	max-width:100%;
	margin:0em auto 0;
	padding:5em 0em 0;
	background:#fff;
}
.manga_img li {
	width:100%;
	height:auto;
}
.manga_img li img {
	margin:0;
	padding:0;
	vertical-align:bottom;
}


#page_01,
#page_02,
#page_03,
#page_04,
#page_05,
#page_06,
#page_07,
#page_08,
#page_09 {
	position:relative;
	margin-bottom:3em;
}

:root {
    --page-02-width:5569;
    --page-02-height:9144;
}

#page_02_zoon {
	position:absolute;
	left:calc(2574 / var(--page-02-width) * 100%);
	top:calc(539 / var(--page-02-height) * 100%);
	width:calc(684 / var(--page-02-width) * 100%);
	height:auto;
	opacity:0;
}

.page_02_zoon_anime {
    animation-name:zoon_02;
    animation-fill-mode: forwards;
    animation-duration:1s; 
    animation-delay: 0.5s;
}
@keyframes zoon_02 {
	0% {
		opacity: 0;
		transform: translateY(2em);
	}
	100% {
		opacity: 1;
		transform: translateY(0);
	} 
}

#page_02_anta {
	position:absolute;
	left:calc(19 / var(--page-02-width) * 100%);
	top:calc(6501 / var(--page-02-height) * 100%);
	width:calc(796 / var(--page-02-width) * 100%);
	height:auto;
	opacity:0;
}
.page_02_anta_anime {
    animation-name:anta_02;
    animation-fill-mode: forwards;
    animation-duration:0.3s; 
    animation-delay: 0.5s;
}
@keyframes anta_02 {
	0% {
		opacity: 0;
		transform: translateX(-0.2em);
	}
	100% {
		opacity: 1;
		transform: translateX(0);
	} 
}

:root {
    --page-03-width:5560;
    --page-03-height:8972;
}

#page_03_e {
	position:absolute;
	left:calc(1838 / var(--page-03-width) * 100%);
	top:calc(20 / var(--page-03-height) * 100%);
	width:calc(3702 / var(--page-03-width) * 100%);
	height:auto;
	z-index:10;
}

#page_03_sorya {
	position:absolute;
	left:calc(1690 / var(--page-03-width) * 100%);
	top:calc(2093 / var(--page-03-height) * 100%);
	width:calc(1301 / var(--page-03-width) * 100%);
	height:auto;
	opacity:0;
}
.page_03_sorya_anime {
    animation-name:sorya_03;
    animation-fill-mode: forwards;
    animation-duration:0.3s; 
    animation-delay: 0.5s;
}
@keyframes sorya_03 {
	0% {
		opacity: 0;
		transform: translateX(1em);
	}
	100% {
		opacity: 1;
		transform: translateX(0);
	} 
}

#page_03_kao {
	position:absolute;
	left:calc(207 / var(--page-03-width) * 100%);
	top:calc(3466 / var(--page-03-height) * 100%);
	width:calc(2555 / var(--page-03-width) * 100%);
	height:auto;
	opacity:0;
}
.page_03_kao_anime {
    animation-name:kao_03;
    animation-fill-mode: forwards;
    animation-duration:0.3s; 
    animation-delay: 1.5s;
}
@keyframes kao_03 {
	0% {
		opacity: 0;
		transform: translateY(1em);
	}
	100% {
		opacity: 1;
		transform: translateX(0);
	} 
}

#page_03_kao_voice {
	position:absolute;
	left:calc(386 / var(--page-03-width) * 100%);
	top:calc(3468 / var(--page-03-height) * 100%);
	width:calc(1456 / var(--page-03-width) * 100%);
	height:auto;
}
#page_03_kami {
	position:absolute;
	left:calc(47 / var(--page-03-width) * 100%);
	top:calc(3536 / var(--page-03-height) * 100%);
	width:calc(339 / var(--page-03-width) * 100%);
	height:auto;
	opacity:0;
}
.page_03_kami_anime {
    animation-name:kami_03;
    animation-fill-mode: forwards;
    animation-duration:0.3s; 
    animation-delay: 2.5s;
}
@keyframes kami_03 {
	0% {
		opacity: 0;
	}
	100% {
		opacity: 1;
	} 
}

#page_03_akuma {
	position:absolute;
	left:calc(2753 / var(--page-03-width) * 100%);
	top:calc(6556 / var(--page-03-height) * 100%);
	width:calc(804 / var(--page-03-width) * 100%);
	height:auto;
	opacity:0;
}
.page_03_akuma_anime {
    animation-name:akuma_03;
    animation-fill-mode: forwards;
    animation-duration:0.5s; 
    animation-delay: 1.5s;
}
@keyframes akuma_03 {
	0% {
		opacity: 0;
	}
	100% {
		opacity: 1;
	} 
}

#page_03_akuma_voice {
	position:absolute;
	left:calc(2650 / var(--page-03-width) * 100%);
	top:calc(6959 / var(--page-03-height) * 100%);
	width:calc(271 / var(--page-03-width) * 100%);
	height:auto;
	opacity:0;
}
.page_03_akuma_voice_anime {
    animation-name:akuma_voice_03;
    animation-fill-mode: forwards;
    animation-duration:0.5s; 
    animation-delay: 1.8s;
}
@keyframes akuma_voice_03 {
	0% {
		opacity: 0;
	}
	100% {
		opacity: 1;
	} 
}

#page_03_tenshi {
	position:absolute;
	left:calc(1768 / var(--page-03-width) * 100%);
	top:calc(6792 / var(--page-03-height) * 100%);
	width:calc(898 / var(--page-03-width) * 100%);
	height:auto;
	opacity:0;
}
.page_03_tenshi_anime {
    animation-name:tenshi_03;
    animation-fill-mode: forwards;
    animation-duration:0.5s; 
    animation-delay: 2.8s;
}
@keyframes tenshi_03 {
	0% {
		opacity: 0;
	}
	100% {
		opacity: 1;
	} 
}

#page_03_tenshi_voice {
	position:absolute;
	left:calc(1774 / var(--page-03-width) * 100%);
	top:calc(6933 / var(--page-03-height) * 100%);
	width:calc(257 / var(--page-03-width) * 100%);
	height:auto;
	opacity:0;
}
.page_03_tenshi_voice_anime {
    animation-name:tenshi_voice_03;
    animation-fill-mode: forwards;
    animation-duration:0.5s; 
    animation-delay: 3.1s;
}
@keyframes tenshi_voice_03 {
	0% {
		opacity: 0;
	}
	100% {
		opacity: 1;
	} 
}

:root {
    --page-04-width:5560;
    --page-04-height:8964;
}
#page_04_eye1 {
	position:absolute;
	left:calc(696 / var(--page-04-width) * 100%);
	top:calc(1377 / var(--page-04-height) * 100%);
	width:calc(503 / var(--page-04-width) * 100%);
	height:auto;
	opacity:0;
}
.page_04_eye1_anime {
    animation-name:eye1_04;
    animation-fill-mode: forwards;
    animation-duration:0.1s; 
    animation-delay: 1s;
}
@keyframes eye1_04 {
	0% {
		opacity: 0;
	}
	100% {
		opacity: 1;
	} 
}

#page_04_price1 {
	position:absolute;
	left:calc(2348 / var(--page-04-width) * 100%);
	top:calc(3280 / var(--page-04-height) * 100%);
	width:calc(921 / var(--page-04-width) * 100%);
	height:auto;
	opacity:0;
}
.page_04_price1 {
    animation-name:price1_04;
    animation-fill-mode: forwards;
    animation-duration:0.5s; 
    animation-delay: 3s;
}
@keyframes price1_04 {
	0% {
		opacity: 0;
		transform: translateY(-1em);
	}
	100% {
		opacity: 1;
		transform: translateX(0);
	} 
}

#page_04_price2 {
	position:absolute;
	left:calc(2126 / var(--page-04-width) * 100%);
	top:calc(4379 / var(--page-04-height) * 100%);
	width:calc(1136 / var(--page-04-width) * 100%);
	height:auto;
	opacity:0;
}
.page_04_price2 {
    animation-name:price2_04;
    animation-fill-mode: forwards;
    animation-duration:0.5s; 
    animation-delay: 3s;
}
@keyframes price2_04 {
	0% {
		opacity: 0;
		transform: translateY(1em);
	}
	100% {
		opacity: 1;
		transform: translateX(0);
	} 
}

#page_04_hinako {
	position:absolute;
	left:calc(3196 / var(--page-04-width) * 100%);
	top:calc(3336 / var(--page-04-height) * 100%);
	width:calc(682 / var(--page-04-width) * 100%);
	height:auto;
}
#page_04_dotti {
	position:absolute;
	left:calc(1455 / var(--page-04-width) * 100%);
	top:calc(3287 / var(--page-04-height) * 100%);
	width:calc(1074 / var(--page-04-width) * 100%);
	height:auto;
}
#page_04_eye2 {
	position:absolute;
	left:calc(762 / var(--page-04-width) * 100%);
	top:calc(3984 / var(--page-04-height) * 100%);
	width:calc(490 / var(--page-04-width) * 100%);
	height:auto;
	opacity:0;
}
.page_04_eye2_anime {
    animation-name:eye2_04;
    animation-fill-mode: forwards;
    animation-duration:0.1s; 
    animation-delay:3s;
}
@keyframes eye2_04 {
	0% {
		opacity: 0;
	}
	100% {
		opacity: 1;
	} 
}

#page_04_titi {
	position:absolute;
	left:calc(1469 / var(--page-04-width) * 100%);
	top:calc(6191 / var(--page-04-height) * 100%);
	width:calc(2400 / var(--page-04-width) * 100%);
	height:auto;
	opacity:0;
}
.page_04_titi_anime {
    animation-name:titi_04;
    animation-fill-mode: forwards;
    animation-duration:2s; 
    animation-delay: 2s;
}
@keyframes titi_04 {
	0% {
		opacity: 0;
	}
	100% {
		opacity: 1;
	} 
}

#page_04_marude {
	position:absolute;
	left:calc(4536 / var(--page-04-width) * 100%);
	top:calc(6376 / var(--page-04-height) * 100%);
	width:calc(383 / var(--page-04-width) * 100%);
	height:auto;
	opacity:0;
}
.page_04_marude_anime {
    animation-name:marude_04;
    animation-fill-mode: forwards;
    animation-duration:2s; 
    animation-delay: 5s;
}
@keyframes marude_04 {
	0% {
		opacity: 0;
	}
	100% {
		opacity: 1;
	} 
}

:root {
    --page-05-width:5560;
    --page-05-height:8426;
}
#page_05_titi {
	position:absolute;
	left:calc(2202 / var(--page-05-width) * 100%);
	top:calc(3558 / var(--page-05-height) * 100%);
	width:calc(1239 / var(--page-05-width) * 100%);
	height:auto;
}

#page_05_dousuru1 {
	position:absolute;
	left:calc(4918 / var(--page-05-width) * 100%);
	top:calc(3282 / var(--page-05-height) * 100%);
	width:calc(159 / var(--page-05-width) * 100%);
	height:auto;
	opacity:0;
}
.page_05_dousuru1_anime {
    animation-name:dousuru1_05;
    animation-fill-mode: forwards;
    animation-duration:1s; 
    animation-delay: 2s;
}
@keyframes dousuru1_05 {
	0% {
		opacity: 0;
	}
	100% {
		opacity: 1;
	} 
}

#page_05_otousan {
	position:absolute;
	left:calc(2943 / var(--page-05-width) * 100%);
	top:calc(3002 / var(--page-05-height) * 100%);
	width:calc(2161 / var(--page-05-width) * 100%);
	height:auto;
	opacity:0;
}
.page_05_otousan_anime {
    animation-name:otousan_05;
    animation-fill-mode: forwards;
    animation-duration:1s; 
    animation-delay: 4s;
}
@keyframes otousan_05 {
	0% {
		opacity: 0;
	}
	100% {
		opacity: 1;
	} 
}

#page_05_dousuru2 {
	position:absolute;
	left:calc(3165 / var(--page-05-width) * 100%);
	top:calc(3270 / var(--page-05-height) * 100%);
	width:calc(180 / var(--page-05-width) * 100%);
	height:auto;
	opacity:0;
}
.page_05_dousuru2_anime {
    animation-name:dousuru2_05;
    animation-fill-mode: forwards;
    animation-duration:1s; 
    animation-delay: 6s;
}
@keyframes dousuru2_05 {
	0% {
		opacity: 0;
	}
	100% {
		opacity: 1;
	} 
}

#page_05_yasuihou {
	position:absolute;
	left:calc(1101 / var(--page-05-width) * 100%);
	top:calc(3017 / var(--page-05-height) * 100%);
	width:calc(1437 / var(--page-05-width) * 100%);
	height:auto;
	opacity:0;
}
.page_05_yasuihou_anime {
    animation-name:yasuihou_05;
    animation-fill-mode: forwards;
    animation-duration:1s; 
    animation-delay: 8s;
}
@keyframes yasuihou_05 {
	0% {
		opacity: 0;
	}
	100% {
		opacity: 1;
	} 
}

#page_05_dousuru3 {
	position:absolute;
	left:calc(719 / var(--page-05-width) * 100%);
	top:calc(3272 / var(--page-05-height) * 100%);
	width:calc(222 / var(--page-05-width) * 100%);
	height:auto;
	opacity:0;
}
.page_05_dousuru3_anime {
    animation-name:dousuru3_05;
    animation-fill-mode: forwards;
    animation-duration:1s; 
    animation-delay:10s;
}
@keyframes dousuru3_05 {
	0% {
		opacity: 0;
	}
	100% {
		opacity: 1;
	} 
}

:root {
    --page-06-width:5560;
    --page-06-height:8924;
}

#page_06_unmei {
	position:absolute;
	left:calc(638 / var(--page-06-width) * 100%);
	top:calc(260 / var(--page-06-height) * 100%);
	width:calc(4668 / var(--page-06-width) * 100%);
	height:auto;
}

#page_06_houritsu {
	position:absolute;
	left:0;
	top:0;
	width:calc(2290 / var(--page-06-width) * 100%);
	height:auto;
	opacity:0;
}
.page_06_houritsu_anime {
    animation-name:houritsu_06;
    animation-fill-mode: forwards;
    animation-duration:2s; 
    animation-delay:0.5s;
}
@keyframes houritsu_06 {
	0% {
		opacity: 0;
	}
	100% {
		opacity: 1;
	} 
}

#page_06_titi {
	position:absolute;
	left:calc(2566 / var(--page-06-width) * 100%);
	top:calc(3574 / var(--page-06-height) * 100%);
	width:calc(2967 / var(--page-06-width) * 100%);
	height:auto;
	opacity:0;
}
.page_06_titi_anime {
    animation-name:titi_06;
    animation-fill-mode: forwards;
    animation-duration:0.5s; 
    animation-delay:2s;
}
@keyframes titi_06 {
	0% {
		opacity: 0;
		transform: translateX(1em);
	}
	100% {
		opacity: 1;
		transform: translateX(0);
	} 
}

#page_06_musume {
	position:absolute;
	left:calc(158 / var(--page-06-width) * 100%);
	top:calc(3650 / var(--page-06-height) * 100%);
	width:calc(2585 / var(--page-06-width) * 100%);
	height:auto;
	opacity:0;
}
.page_06_musume_anime {
    animation-name:musume_06;
    animation-fill-mode: forwards;
    animation-duration:0.5s; 
    animation-delay:3s;
}
@keyframes musume_06 {
	0% {
		opacity: 0;
		transform: translateX(-1em);
	}
	100% {
		opacity: 1;
		transform: translateX(0);
	} 
}

:root {
    --page-07-width:5564;
    --page-07-height:8651;
}
#page_07_musume {
	position:absolute;
	left:calc(518 / var(--page-07-width) * 100%);
	top:calc(5778 / var(--page-07-height) * 100%);
	width:calc(858 / var(--page-07-width) * 100%);
	height:auto;
	opacity:0;
}
.page_07_musume_anime {
    animation-name:musume_07;
    animation-fill-mode: forwards;
    animation-duration:0.5s; 
    animation-delay:1s;
}
@keyframes musume_07 {
	0% {
		opacity: 0;
		transform: translateX(1em);
	}
	100% {
		opacity: 1;
		transform: translateX(0);
	} 
}

#page_07_titi {
	position:absolute;
	left:calc(248 / var(--page-07-width) * 100%);
	top:calc(7451 / var(--page-07-height) * 100%);
	width:calc(560 / var(--page-07-width) * 100%);
	height:auto;
	opacity:0;
}
.page_07_titi_anime {
    animation-name:titi_07;
    animation-fill-mode: forwards;
    animation-duration:0.5s; 
    animation-delay:2s;
}
@keyframes titi_07 {
	0% {
		opacity: 0;
		transform: translateX(-1em);
	}
	100% {
		opacity: 1;
		transform: translateX(0);
	} 
}

:root {
    --page-08-width:5560;
    --page-08-height:8991;
}
#page_08_musume {
	position:absolute;
	left:calc(1525 / var(--page-08-width) * 100%);
	top:calc(516 / var(--page-08-height) * 100%);
	width:calc(1853 / var(--page-08-width) * 100%);
	height:auto;
	opacity:0;
}
.page_08_musume_anime {
    animation-name:musume_08;
    animation-fill-mode: forwards;
    animation-duration:0.5s; 
    animation-delay:0.5s;
}
@keyframes musume_08 {
	0% {
		opacity: 0;
		transform: translateX(-1em);
	}
	100% {
		opacity: 1;
		transform: translateX(0);
	} 
}

#page_08_titi {
	position:absolute;
	left:calc(3305 / var(--page-08-width) * 100%);
	top:calc(430 / var(--page-08-height) * 100%);
	width:calc(2231 / var(--page-08-width) * 100%);
	height:auto;
	opacity:0;
}
.page_08_titi_anime {
    animation-name:titi_08;
    animation-fill-mode: forwards;
    animation-duration:0.5s; 
    animation-delay:0.5s;
}
@keyframes titi_08 {
	0% {
		opacity: 0;
		transform: translateX(1em);
	}
	100% {
		opacity: 1;
		transform: translateX(0);
	} 
}

#page_08_arigatou {
	position:absolute;
	left:calc(1818 / var(--page-08-width) * 100%);
	top:calc(3163 / var(--page-08-height) * 100%);
	width:calc(3386 / var(--page-08-width) * 100%);
	height:auto;
	opacity:0;
}
.page_08_arigatou_anime {
    animation-name:arigatou_08;
    animation-fill-mode: forwards;
    animation-duration:0.5s; 
    animation-delay:0.5s;
}
@keyframes arigatou_08 {
	0% {
		opacity: 0;
		transform: scale(0.5);
	}
	100% {
		opacity: 1;
		transform: scale(1);
	} 
}

#page_08_sosite {
	position:absolute;
	left:calc(1204 / var(--page-08-width) * 100%);
	top:calc(4091 / var(--page-08-height) * 100%);
	width:calc(3298 / var(--page-08-width) * 100%);
	height:auto;
	opacity:0;
}
.page_08_sosite_anime {
    animation-name:sosite_08;
    animation-fill-mode: forwards;
    animation-duration:2s; 
    animation-delay:1s;
}
@keyframes sosite_08 {
	0% {
		opacity: 0;
	}
	100% {
		opacity: 1;
	} 
}

#page_08_rakka {
	position:absolute;
	left:calc(1382 / var(--page-08-width) * 100%);
	top:calc(4890 / var(--page-08-height) * 100%);
	width:calc(1381 / var(--page-08-width) * 100%);
	height:auto;
	opacity:0;
}
.page_08_rakka_anime {
    animation-name:rakka_08;
    animation-fill-mode: forwards;
    animation-duration:0.5s; 
    animation-delay:3s;
}
@keyframes rakka_08 {
	0% {
		opacity: 0;
		transform: translateY(-1em);
	}
	100% {
		opacity: 1;
		transform: translateX(0);
	} 
}

:root {
    --page-09-width:5641;
    --page-09-height:8418;
}
#page_09_musume {
	position:absolute;
	left:calc(3038 / var(--page-09-width) * 100%);
	top:calc(5041 / var(--page-09-height) * 100%);
	width:calc(2574 / var(--page-09-width) * 100%);
	height:auto;
	opacity:0;
}
.page_09_musume_anime {
    animation-name:musume_09;
    animation-fill-mode: forwards;
    animation-duration:0.5s; 
    animation-delay:1s;
}
@keyframes musume_09 {
	0% {
		opacity: 0;
		transform: translateY(1em);
	}
	100% {
		opacity: 1;
		transform: translateX(0);
	} 
}

#page_09_titi {
	position:absolute;
	left:calc(635 / var(--page-09-width) * 100%);
	top:calc(5945 / var(--page-09-height) * 100%);
	width:calc(2751 / var(--page-09-width) * 100%);
	height:auto;
	opacity:0;
}
.page_09_titi_anime {
    animation-name:titi_09;
    animation-fill-mode: forwards;
    animation-duration:0.5s; 
    animation-delay:1.5s;
}
@keyframes titi_09 {
	0% {
		opacity: 0;
		transform: translateY(1em);
	}
	100% {
		opacity: 1;
		transform: translateX(0);
	} 
}

#page_09_end {
	position:absolute;
	left:calc(312 / var(--page-09-width) * 100%);
	top:calc(5653 / var(--page-09-height) * 100%);
	width:calc(1613 / var(--page-09-width) * 100%);
	height:auto;
	opacity:0;
}
.page_09_end_anime {
    animation-name:end_09;
    animation-fill-mode: forwards;
    animation-duration:2s; 
    animation-delay:3s;
}
@keyframes end_09 {
	0% {
		opacity: 0;
	}
	100% {
		opacity: 1;
	} 
}

#choice_manga {
	position:relative;
	margin-top:0vh;
	overflow:hidden;
}
#choice_manga ul {
	padding-top:0em;
}

#akuma_manga {
	position:absolute;
	left:0;
	top:0;
	z-index:5;
}

.mask {
	position:absolute;
	left:0;
	top:0;
	width:100%;
	height:100%;
	background:#fff;
	z-index:6;
}

#modal {
	display:none;
	position:fixed;
	top:0;
	left:0;
	width:100%;
	height:100%;
	z-index:10;
	background:rgba(0,0,0,0.8);
}

#modal_inner {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translateY(-50%) translateX(-50%);
	background:#fff;
	padding:2em;
	width:70vh;
	max-width:90%;
	font-size:0.5em;
}
#page_choice p {
	text-align:center;
	margin-bottom:16%;
}
#choice_btn {
	display:flex;
	text-align:center;
	justify-content:space-between;

}
#choice_btn div {
	flex-basis:48%;
}

#tenshi_btn {
	position:relative;
}
#tenshi_img {
	position:absolute;
	left:0;
	top:-50%;
	width:30%;
	height:auto;
}
#akuma_btn {
	position:relative;
}
#akuma_img {
	position:absolute;
	right:0;
	top:-50%;
	width:30%;
	height:auto;
}

.tenshi_anime {
	animation: tenshi_move .5s infinite alternate ease-in-out;
}
@keyframes tenshi_move {
  from {
    transform: translateY(0);
  }
  to {
    transform: translateY(0.3em);
  }
}
.akuma_anime {
	animation: akuma_move .5s infinite alternate ease-in-out;
}
@keyframes akuma_move {
  from {
    transform: translateY(0.3em);
  }
  to {
    transform: translateY(0);
  }
}
.manga_com {
	margin:3em auto;
	color:#000;
	font-size:0.45em;
	padding:2em;
}
.manga_com p {
	text-align:center;
	margin-bottom:5em;
}


.retry {
	width:50%;
	height:auto;
	display:block;
	margin:0 auto;
}

.twitter {
	width:11.5%;
	height:auto;
	display:block;
	margin:10em auto 0;
}


/* **************************************************

　　　　　　　　　　CSS振り分け

************************************************** */
@media only screen and (min-width: 640px) {

	#modal_inner {
		font-size:1em;
	}

	.manga_com {
		font-size:1em;
	}
}