/* CSS Document */
/* =========================================================
     共通
========================================================= */
@import url('https://fonts.googleapis.com/css2?family=M+PLUS+1p:wght@700;800;900&family=M+PLUS+U:wght@100..900&display=swap');
/* 共通
--------------------------------------------------------- */
body {
   /* background: url(https://jonetz.com/img/common/bg.png) repeat 0 0 ;*/
	color: #111;
	font-size: 18px;
	line-height: 1.5;
	font-family: 'M PLUS 1p', "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", YuGothic , "Yu Gothic medium", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", "sans-serif";
	font-weight: 800!important;
}
h2 {
    font-weight: 800;
}
.inner {
	max-width: 1200px;
	margin: 0 ;
	/*background: #fff;*/
	padding: 30px 50px;
}
.inner_1000 {
	max-width: 1000px;
	margin: 0 auto;
}
h2.h2_line {
	border-bottom: 1px solid #e4b967;
	border-top: 1px solid #e4b967;
	padding: 35px 0;
	margin-bottom: 40px;
}
.inline_B {
	display: inline-block;
}
.small {
	font-size: 85%;
}
img {
    vertical-align: bottom;
    max-width: 100%;
	width: auto;
}
section {
	scroll-margin-top: 120px!important;
}
.manga_line {
	background: #000;
	margin-bottom: 30px;
	padding: 8px;
	overflow: hidden;
}
.manga_line .manga_line_inner {
	background: #fff;
	overflow: hidden;
}
.red {
    color: #D2111A;
}
.manga_line.last_tyle {
	margin-bottom: 0;
}
#container_Aria {
	overflow: hidden;
}
/* PC only
--------------------------------------------------------- */
#pc_aria {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	display: flex;
	justify-content: space-between;
	width: 100vw;
	height: 100vh;
    background: url(https://jonetz.com/img/common/bg.png) repeat 0 0 ;
	align-items: center;
}
#pc_aria .left_box {
	width: calc(( 100% - 1200px ) );
	padding: 50px 50px 50px 0;
}
#pc_aria .mokuzi_ttl {
    font-size: 42px;
    margin-bottom: 20px;
    border-bottom: 3px solid #000;
    line-height: 1;
    padding-bottom: 20px;
}
#pc_aria ul.pc_anchor {
	
}
#pc_aria ul.pc_anchor li {
	margin-bottom: 10px;
}
#pc_aria ul.pc_anchor li a {
	display: flex;
	justify-content: space-between;
	font-size: 26px;
	color: #111;
	font-weight: 900;
	transition: 0.2s;
}
#pc_aria ul.pc_anchor li a .text {
	margin-right: 0.5em;
}
#pc_aria ul.pc_anchor li a .page_border {
	border-bottom: dotted 6px #111;
    display: block;
    margin-bottom: 9px;
	transition: 0.2s;
	
}
#pc_aria ul.pc_anchor li a:hover {
	color: #fabe00;
}
#pc_aria ul.pc_anchor li a:hover .page_border {
	border-color: #fabe00;
}
#pc_aria ul.pc_anchor li.anchor_01 a .page_border {
    width: calc( 100% - 19.5em );
}
#pc_aria ul.pc_anchor li.anchor_02 a .page_border {
    width: calc( 100% - 14.5em );
}
#pc_aria ul.pc_anchor li.anchor_03 a .page_border {
    width: calc( 100% - 15.5em );
}
#pc_aria ul.pc_anchor li.anchor_04 a .page_border {
    width: calc( 100% - 10.5em );
}
#pc_aria ul.pc_anchor li.anchor_05 a .page_border {
    width: calc( 100% - 17.5em );
}


#pc_aria .manga_img {
	margin-top: 50px;
	text-align: center;
}
#pc_aria .manga_img img {
	max-height: calc( 100vh - 500px) ;
}
/* PC only
--------------------------------------------------------- */
#container_Aria {
	position: relative;
	z-index: 100;
}

/* header
--------------------------------------------------------- */

#header {
}
#header .top_box {
	padding: 80px 80px 60px;
}
#header .second_box {
	display: flex;
	justify-content: space-between;
	align-items: flex-end;
	margin: 30px 0;
}
#header .second_box .img_01 {
	width: 17%;
}
#header .second_box .scroll {
    /* padding: 30px; */
    background: #fabe00;
    width: 70%;
    height: 0;
    padding-top: 20%;
	position: relative;
	overflow: hidden;
}
#header .second_box .scroll .scroll-inner {
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	margin: auto;
	display: flex;
	width: 200%;
	text-align: center;
}

#header .second_box .scroll .scroll-inner img {
    width: 45%;
    margin: 0 2.5%;
    display: inline-block;
}
#header .second_box .img_03 {
	width: 8%;
    margin-left: -2%;
}
#header .third_box {
	display: flex;
	justify-content: space-between;
	align-items: center;
	border-bottom: 3px solid #000;
}
#header .third_box .left_box {
    width: 75%;
    border-right: 2px solid #000;
    padding: 0 40px 30px 0px;
}
#header .third_box .right_box {
    width: 25%;
    padding: 0 15px 0 20px;
}
#header .bottom_box .text_box {
    text-align: center;
    position: relative;
    z-index: 1;
    font-weight: 900;
    margin: -20px 0 10px;
    font-size: 32px;
    letter-spacing: 0.02em;
	line-height: 1.2;
}
#header .bottom_box .text_box .asterisk {
    font-size: 22px;
    font-weight: 800;
    margin-top: 15px;
}
#header .bottom_box .text_box .gray {
    background: #ddd;
    padding: 6px 10px 10px 10px;
    line-height: 1;
    display: inline-block;
}
#header .bottom_box .text_box .dot {
    margin: 0 -0.2em;
}
#header .bottom_box .text_box .small {
	font-size: 80%;
}
#header .bottom_box .text_box .big {
    font-size: 140%;
    font-weight: 800;
    margin-right: 0.1em;
}
#header .bottom_box .img_box {
	position: relative;
	width: 100%;
}
#header .bottom_box .img_box #manga_01-01 {
    width: 150%;
	margin-left: -1px;
    max-width: initial;
}
#header .bottom_box .img_box #manga_01-02 {
    position: absolute;
    top: -5%;
	left: 0;
	right: 0;
	margin: auto;
}
#header .bottom_box .img_box #manga_01-03 {
    position: absolute;
    width: 12.5%;
    top: 0;
    bottom: -5%;
    right: 6%;
    margin: auto;
}

/* coma_01
--------------------------------------------------------- */
#coma_01{
}
#coma_01 .coma_01_box {
	background: #D2111A url(../img/coma_01_bg.svg) no-repeat center center / 120% ;
	padding: 100px 50px 95px;
	color: #fff;
	text-align: center;
	font-weight: 800;
	line-height: 1;
	text-shadow: #D2111A 2px 0px 0px, #D2111A -2px 0px 0px,
				#D2111A 0px -2px 0px, #D2111A 0px 2px 0px,
				#D2111A 2px 2px 0px, #D2111A -2px 2px 0px,
				#D2111A 2px -2px 0px, #D2111A -2px -2px 0px,
				#D2111A 1px 2px 0px, #D2111A -1px 2px 0px,
				#D2111A 1px -2px 0px, #D2111A -1px -2px 0px,
				#D2111A 2px 1px 0px, #D2111A -2px 1px 0px,
				#D2111A 2px -1px 0px, #D2111A -2px -1px 0px,
				#D2111A 1px 1px 0px, #D2111A -1px 1px 0px,
				#D2111A 1px -1px 0px, #D2111A -1px -1px 0px;

}

#coma_01 .text_1 {
    font-size: 44px;
}
#coma_01 .text_2 {
    font-size: 110px;
    margin: 3% 0 3.5%;
}
#coma_01 .text_2 .asterisk {
    font-size: 30%;
    margin-left: 0.25em;
}
#coma_01 .text_3 {
    font-size: 56px;
}
#coma_01 .text_4 {
    font-size: 20px;
    margin-top: 2%;
}

/* coma_02
--------------------------------------------------------- */
#coma_02 {
	clip-path: polygon(0 0, 100% 0, 100% calc(100% - 100px), 0 100%);
	overflow: hidden;
}
#coma_02 .manga_line_inner {
	clip-path: polygon(0 0, 100% 0, 100% calc(100% - 100px), 0 100%);
	background: #000;
}
#coma_02 .coma_02_box {
	position: relative;
}
#coma_02 .coma_02_box #manga_02-01 {
	width: 110%;
	max-width: inherit;
	margin: -1px;
}
#coma_02 .coma_02_box #manga_02-02 {
    position: absolute;
    width: 53%;
    right: -12%;
    top: -20%;
    bottom: -10%;
    margin: auto;
}
#coma_02 .coma_02_box #manga_02-03 {
    position: absolute;
    width: 8.5%;
    right: 10.5%;
    top: -10%;
    bottom: 0;
    margin: auto;
}

/* coma_02-03
--------------------------------------------------------- */

#coma_02-03 {
	position: relative;
}
#coma_02-03::after {
    content: "";
    position: absolute;
    right: -4px;
    bottom: -74px;
    width: 25%;
    height: 0;
    padding-top: 21%;
    background: url(../img/dododo_01.svg) no-repeat center center / contain;
    z-index: 100;
    animation-name:  dododo_anim;
    animation-timing-function: ease-in-out;
    animation-iteration-count: infinite;
    animation-direction: alternate;
    animation-duration: 2s;
}
#coma_04-05 {
	position: relative;
}
#coma_04-05::after {
    content: "";
    position: absolute;
    left: 30px;
    bottom: -90px;
    width: 20%;
    height: 0;
    padding-top: 21%;
    background: url(../img/dododo_02.svg) no-repeat center center / contain;
    z-index: 100;
    animation-name:  dododo_anim;
    animation-timing-function: ease-in-out;
    animation-iteration-count: infinite;
    animation-direction: alternate;
    animation-duration: 2s;
}
#coma_08-09 {
	position: relative;
}
#coma_08-09::after {
    content: "";
    position: absolute;
    right: -19px;
    bottom: -50px;
    width: 35%;
    height: 0;
    padding-top: 21%;
    background: url(../img/dododo_03.svg) no-repeat center center / contain;
    z-index: 100;
    animation-name:  dododo_anim;
    animation-timing-function: ease-in-out;
    animation-iteration-count: infinite;
    animation-direction: alternate;
    animation-duration: 2s;
}

@keyframes dododo_anim {
    0% {
        transform: translate(0,4%);
    }
    100% {
        transform: translate(0,-6%)
    }
}



.top-dododo {
	opacity: 0;
	position: relative;
	z-index: 999;
}
.top-dododo.active {
    animation-name: coma_01_anim_01;
    animation-timing-function: ease-in-out;
    animation-iteration-count: 1;
    animation-direction: normal;
    animation-delay: 0.6s;
    animation-duration: 0.5s;
    transform: scale(0);
	animation-fill-mode: forwards;

}
@keyframes coma_01_anim_01 {
    0% { transform: scale(0); opacity: 0;}
    100% { transform: scale(1); opacity: 1;}
}

/* coma_03
--------------------------------------------------------- */
#coma_03_over,
#coma_03 {
    margin-top: -100px;
	clip-path: polygon( 0 100px, 100% 0, 100% 100%, 0 100%);
	overflow: hidden;
	position: relative;
}
#coma_03 {
    margin-top: 0!important;
}
#coma_03 .manga_line_inner {
	clip-path: polygon( 0 100px, 100% 0, 100% 100%, 0 100%);
}

#coma_03 h2 {
	border-bottom: 3px solid #000;
	text-align: left;
    font-size: 84px;
    font-weight: 800;
    line-height: 1;
    padding-bottom: 30px;
    margin-bottom: 30px;
}
#coma_03 .manga_line_inner .text_box {
	padding: 170px 80px 80px;
}
#coma_03 .manga_line_inner .img_box {
	overflow: hidden;
}
#coma_03 .manga_line_inner .img_box img {
	margin: -1px;
	width: 102%;
    max-width: inherit;
}

#coma_03 h2 .top {
	display: flex;
	align-items: flex-end;
	margin-bottom: 10px;
}
#coma_03 h2 .red {
}
#coma_03 h2 .scroll {
    /* padding: 30px; */
    background: #fabe00;
    width: 55%;
    height: 0;
    padding-top: 15%;
	position: relative;
	overflow: hidden;
    margin-right: 1.5%;
}
#coma_03 h2 .scroll .scroll-inner {
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	margin: auto;
	display: flex;
	width: 200%;
}
#coma_03 h2 .scroll .scroll-inner img {
    width: 45%;
    margin: 0 2.5%;
    display: inline-block;
}

#coma_03 .com3_text {
    font-size: 40px;
    margin-bottom: 20px;
	letter-spacing: 0.02em;
}
#coma_03 .com3_text img {
	height: 66px;
	display: inline-block;
}
#coma_03 .com3_text img#d_01{
	margin: 0.2em 0.15em 0.15em 0;
}
#coma_03 .com3_text img#d_02 {
	margin: 0.2em 0.15em 0 0;
}
#coma_03 .com3_text span.text_deco {
	font-size: 130%;
	letter-spacing: normal;
}
#coma_03 .com3_text span#span_01 {
	color: #0B318F;
	font-size: 100%;
}
#coma_03 .com3_text span#span_02 {
	color: #E83828;
}
#coma_03 .com3_text span#span_03 {
	color: #EA5514;
	font-size: 100%;
}
#coma_03 .com3_text span#span_04 {
	color: #E4007F;
}
#coma_03 .com3_text span#span_05 {
	color: #009944;
}


#coma_03 .item_img { 
	max-width: 948px;
	margin: 0 auto;
	position: relative;
}
#coma_03 .item_img .bold_item {
	display: block;
	height: 0;
	background: #fff;
	position: absolute;
}
#coma_03  .item_img #bold_01 {
    width: 39%;
    padding-bottom: 43%;
	left: 0;
    bottom: 44%;
}
#coma_03  .item_img #bold_02 {
    width: 17%;
    padding-bottom: 43%;
    left: 40%;
    bottom: 44%;
}
#coma_03  .item_img #bold_03 {
    width: 42%;
    padding-bottom: 25%;
    left: 58%;
    bottom: 67.8%;
}
#coma_03  .item_img #bold_04 {
    width: 64%;
    padding-bottom: 32.5%;
    left: 0;
    bottom: 0;
}
#coma_03  .item_img #bold_05 {
    width: 35%;
    padding-bottom: 50.5%;
    left: 65%;
    bottom: 0;
}


/* coma_04
--------------------------------------------------------- */
#coma_04 {
	clip-path: polygon(0 0, 100% 0, 100% calc(100% - 100px), 0 100%);
	overflow: hidden;
}
#coma_04 .manga_line_inner {
	clip-path: polygon(0 0, 100% 0, 100% calc(100% - 100px), 0 100%);
}
#coma_04 .coma_04_box {
	padding: 80px 80px 170px;
}


#coma_04 h2 {
	font-size: 114px;
    line-height: 1.2;
    margin-bottom: 30px;
}

#coma_04 h2 .scroll {
    text-align: center;
    line-height: 1;
    width: 100%;
    background: #fabe00;
    display: block;
    margin: 10px auto 20px;
    padding: 10px 0 20px;
	overflow: hidden;
}
#coma_04 h2 .scroll .scroll_inner {
	width: 200%;
	display: inline-block;
}
#coma_04 h2 .scroll .item {
	width: 50%;
	display: inline-block;
}
#coma_04 .text_box {
	line-height: 1.3;
	text-align:justify;
	text-align-last:justify;
}
#coma_04 .text_box p{
	margin-bottom: 20px;
}
#coma_04 .text_1 {
    font-size: 34px;
}
#coma_04 .text_2 {
    font-size: 50px;
}
#coma_04 .text_3 {
    font-size: 74px;
	display: flex;
	justify-content: space-between;
    align-items: center;
	line-height: 1;
	margin: 30px 0 0!important;
}



#coma_04 .text_3 .scroll {
    text-align: center;
    line-height: 1;
    width: 60%;
    background: #fabe00;
    padding: 10px 0 15px;
	overflow: hidden;
	display: block;
}
#coma_04 .text_3 .scroll .scroll_inner {
	width: 200%;
	display: inline-block;
}
#coma_04 .text_3 .scroll .item {
    width: calc(50% - 2%);
    margin: 0 1%;
	display: inline-block;
}
#coma_04 .text_3 .right {
    margin-right: -0.25em;
}

/* coma_05
--------------------------------------------------------- */
#coma_05 {
    margin-top: -100px;
	clip-path: polygon( 0 100px, 100% 0, 100% 100%, 0 100%);
	overflow: hidden;
}
#coma_05 .manga_line_inner {
	clip-path: polygon( 0 100px, 100% 0, 100% 100%, 0 100%);
}

#coma_05 .coma_05_box {
	position: relative;
}
#coma_05 .coma_05_box #manga_03-01 {
	width: 110%;
	max-width: inherit;
	margin: -1px;
}
#coma_05 .coma_05_box #manga_03-02 {
    position: absolute;
    width: 40%;
    right: 3%;
    top: 0;
    bottom: -5%;
    margin: auto;
}
#coma_05 .coma_05_box #manga_03-03 {
    position: absolute;
    width: 14%;
    right: 14%;
    top: 5%;
    bottom: 0;
    margin: auto;
}
/* coma_06
--------------------------------------------------------- */
#coma_06 {
	clip-path: polygon(0 0, 100% 0, 100% calc(100% - 100px), 0 100%);
	overflow: hidden;
}
#coma_06 .manga_line_inner {
	clip-path: polygon(0 0, 100% 0, 100% calc(100% - 100px), 0 100%);
	background: #D2111A;
}
#coma_06 .coma_06_box {
	padding: 100px 100px 170px;
	color: #fff;
}
#coma_06 h2 {
    font-size: 82px;
    border-bottom: 3px solid #fff;
	display: flex;
	align-items: flex-end;
    line-height: 1;
	padding-bottom: 25px;
	margin-bottom: 25px;
}
#coma_06 h2 .rel2 {
    display: block;
    font-size: 50%;
}
#coma_06 h2 .main {
	margin: 0 0.05em;
	letter-spacing: -0.02em;
}
#coma_06 h2 .small {
    font-size: 60%;
}
#coma_06 .text {
    font-size: 46px;
	font-weight: 600;
}
/* coma_07
--------------------------------------------------------- */
#coma_07 {
    margin-top: -100px;
	clip-path: polygon( 0 100px, 100% 0, 100% 100%, 0 100%);
	overflow: hidden;
}
#coma_07 .manga_line_inner {
	clip-path: polygon( 0 100px, 100% 0, 100% 100%, 0 100%);
	background: #000;
}

#coma_07 .coma_07_box {
	position: relative;
}
#coma_07 .coma_07_box #manga_04-01 {
	width: 110%;
	max-width: inherit;
	margin: -1px;
}
#coma_07 .coma_07_box #manga_04-02 {
    position: absolute;
    width: 67%;
    left: -21%;
    top: 0;
    bottom: -5%;
    margin: auto;
}
#coma_07 .coma_07_box #manga_04-03 {
    position: absolute;
    width: 5%;
    left: 10.8%;
    top: 6%;
    bottom: 0;
    margin: auto;
}

/* coma_08
--------------------------------------------------------- */
#coma_08 {
	clip-path: polygon(0 0, 100% 0, 100% calc(100% - 100px), 0 100%);
	overflow: hidden;
	position: relative;
	z-index: 1;
}
#coma_08 .manga_line_inner {
	clip-path: polygon(0 0, 100% 0, 100% calc(100% - 100px), 0 100%);
	background: #000;
}
#coma_08 .coma_08_box {
}

#coma_08 .coma_08_box {
	position: relative;
}
#coma_08 .coma_08_box #manga_05-01 {
	width: 110%;
	max-width: inherit;
	margin: -1px -1px -1px -3%;
}
#coma_08 .coma_08_box #manga_05-02 {
    position: absolute;
    width: 12%;
    right: 6%;
    top: 16%;
}
/* coma_09
--------------------------------------------------------- */
#coma_09 {
    margin-top: -100px;
	clip-path: polygon( 0 100px, 100% 0, 100% 100%, 0 100%);
	overflow: hidden;
}
#coma_09 .manga_line_inner {
	clip-path: polygon( 0 100px, 100% 0, 100% 100%, 0 100%);
	background: #FABE00;
    padding: 190px 110px 90px 120px;
}
#coma_09 ul.button_list {
}
#coma_09 ul.button_list li:not(:last-of-type) {
	margin-bottom: 20px;
}

br.br_1800 {
	display: none;
}

/* page_top
--------------------------------------------------------- */

#page_top{
	display: none;
    position: fixed;
	right: 20px;
	bottom: 20px;
	z-index: 99999;
}
#page_top a {
    position: relative;
	display: none;
	width: 50px;
	height: 50px;
    text-decoration: none;
    background: #fff url(../img/page_top.png) no-repeat center center / auto 60% ;
	border: 2px solid #000;
}
/* ==============================
     1800px
============================== */
@media screen and (max-width:1800px){
	/* coma_07
	--------------------------------------------------------- */
	.inner {
		max-width: 1160px;
		padding: 30px 30px;
	}
	/* coma_07
	--------------------------------------------------------- */

	#pc_aria .manga_img img {
		max-height: calc( 100vh - 550px) ;
	}
	br.br_1800 {
		display: block;
	}
	#pc_aria .left_box {
		width: calc(( 100% - 1160px ) );
		padding: 30px 50px 30px 20px;
	}
	#pc_aria ul.pc_anchor li {
		margin-bottom: 15px;
	}
	#pc_aria ul.pc_anchor li a {
		font-size: 24px;
		line-height: 1.2;
		align-items: center;
	}
	#pc_aria ul.pc_anchor li a .page_border {
		margin: 0;
    	border-bottom: dotted 4px #111;
	}
	#pc_aria ul.pc_anchor li.anchor_01 a .page_border {
		width: calc( 100% - 11.5em );
	}
	#pc_aria ul.pc_anchor li.anchor_02 a .page_border {
		width: calc( 100% - 11.5em );
	}
	#pc_aria ul.pc_anchor li.anchor_03 a .page_border {
		width: calc( 100% - 9.5em );
	}
	#pc_aria ul.pc_anchor li.anchor_04 a .page_border {
		width: calc( 100% - 10.5em );
	}
	#pc_aria ul.pc_anchor li.anchor_05 a .page_border {
		width: calc( 100% - 13.5em );
	}

}
@media screen and (min-width: 1201px) and (max-width: 1600px) {
	.inner {
		max-width: 900px;
		padding: 20px 20px;
	}
	#pc_aria {
		align-items: center;
	}
	#pc_aria .left_box {
		width: calc(( 100% - 900px ) );
		padding: 30px 30px 30px 10px;
	}
	#pc_aria ul.pc_anchor li {
		margin-bottom: 20px;
	}
	#pc_aria ul.pc_anchor li a {
		font-size: 20px;
		line-height: 1.2;
		letter-spacing: -0.04em;
		font-weight: 800;
	}
	#pc_aria ul.pc_anchor li a .page_num {
		font-size: 16px;
	}
	#pc_aria .mokuzi_ttl {
		font-size: 36px;
		margin-bottom: 15px;
		border-bottom: 2px solid #000;
		padding-bottom: 15px;
	}
	#pc_aria ul.pc_anchor li a .text {
		margin-right: 0.25em;
	}
	
	
	#pc_aria ul.pc_anchor li.anchor_01 a .page_border {
		width: calc( 100% - 10.5em );
	}
	#pc_aria ul.pc_anchor li.anchor_02 a .page_border {
		width: calc( 100% - 10.5em );
	}
	#pc_aria ul.pc_anchor li.anchor_03 a .page_border {
		width: calc( 100% - 8.5em );
	}
	#pc_aria ul.pc_anchor li.anchor_04 a .page_border {
		width: calc( 100% - 9.5em );
	}
	#pc_aria ul.pc_anchor li.anchor_05 a .page_border {
		width: calc( 100% - 12.5em );
	}
	
	#pc_aria .manga_img img {
		max-height: calc( 100vh - 550px) ;
	}
	#header .top_box {
		padding: 70px 70px 50px;
	}
	#header .bottom_box .text_box {
		font-size: 24px;
	}
	#coma_01 .text_1 {
		font-size: 35px;
	}
	#coma_01 .text_3 {
		font-size: 44px;
	}
	#coma_01 .text_4 {
		font-size: 15px;
		margin-top: 3%;
	}
	.manga_line {
		margin-bottom: 10px;
	}
	#coma_03 .manga_line_inner .text_box {
		padding: 150px 70px 70px;
	}
	#coma_03 h2 {
		font-size: 64px;
		font-weight: 800;
		padding-bottom: 25px;
		margin-bottom: 20px;
	}
	#coma_03 .com3_text {
		font-size: 30px;
	}
	#coma_04 .coma_04_box {
		padding: 70px 70px 150px;
	}
	#coma_04 h2 {
		font-size: 86px;
		margin-bottom: 20px;
	}
	#coma_04 .text_1 {
		font-size: 28px;
	}
	#coma_04 .text_2 {
		font-size: 38px;
	}
	#coma_04 .text_3 {
    	font-size: 55px;
    	margin: 25px 0 0!important;
	}
	#coma_04 .text_box p {
		margin-bottom: 15px;
	}
	#coma_06 .coma_06_box {
		padding: 70px 70px 150px;
	}
	#coma_06 h2 {
		font-size: 65px;
	}
	#coma_06 .text {
    	font-size: 37px;
	}


	
}
/* ==============================
     1200px
============================== */
@media screen and (max-width:1200px){
	body {
		background: url(https://jonetz.com/img/common/bg.png) repeat 0 0 ;
	}
	.inner {
		padding: 3vw;
		margin: 0 auto;
	}
	.manga_line {
		margin-bottom: 2vw;
		padding: 0.8vw;
	}
	#pc_aria {
		display: none;
	}
	/* header
	--------------------------------------------------------- */
	#header .top_box {
		padding: 5vw;
	}
	#header .bottom_box .text_box {
		margin: -2vw 0 2vw;
		font-size: 2.85vw;
	}
	#header .second_box {
		margin: 3vw 0;
	}
	#header .third_box .left_box {
		padding: 0 4vw 3vw 0px;
	}
	#header .third_box .right_box {
		padding: 0 1.5vw 0 2vw;
	}
	#header .bottom_box .text_box .asterisk {
		font-size: 2.2vw;
		margin-top: 1vw;
	}
	/* coma_01
	--------------------------------------------------------- */
	
	#coma_08,
	#coma_06,
	#coma_04,
	#coma_02 {
		clip-path: polygon(0 0, 100% 0, 100% calc(100% - 80px), 0 100%);
	}
	#coma_08 .manga_line_inner ,
	#coma_06 .manga_line_inner ,
	#coma_04 .manga_line_inner ,
	#coma_02 .manga_line_inner {
		clip-path: polygon(0 0, 100% 0, 100% calc(100% - 80px), 0 100%);
	}
	
	
	#coma_03_over,
	#coma_09 ,
	#coma_07 ,
	#coma_05 ,
	#coma_03 {
		margin-top: -80px;
		clip-path: polygon( 0 80px, 100% 0, 100% 100%, 0 100%);
	}
	#coma_09 .manga_line_inner ,
	#coma_07 .manga_line_inner ,
	#coma_05 .manga_line_inner ,
	#coma_03 .manga_line_inner {
		clip-path: polygon( 0 80px, 100% 0, 100% 100%, 0 100%);
	}
	/* coma_01
	--------------------------------------------------------- */
	#coma_01 .coma_01_box {
    	padding: 9vw 5vw 8.5vw;
	}
	#coma_01 .text_1 {
		font-size: 4.2vw;
	}
	#coma_01 .text_3 {
		font-size: 5.2vw;
	}
	#coma_01 .text_2 {
		font-size: 12vw;
		margin: 4.0% 0 4.5%;
	}
	#coma_01 .text_4 {
		font-size: 1.8vw;
		margin-top: 2%;
	}
	/* coma_03
	--------------------------------------------------------- */
	#coma_03 .manga_line_inner .text_box {
		padding: 12vw 5vw 5vw;
	}
	#coma_03 h2 {
		font-size: 7.5vw;
		padding-bottom: 3vw;
		margin-bottom: 2.3vw;
	}
	#coma_03 .com3_text {
		font-size: 3.5vw;
   		margin-bottom: 2vw;
	}
	#coma_03 .com3_text img {
		height: 6.6vw;
	}
	#coma_03 .com3_text img#d_01 {
		margin: 0.2em 0.15em 0.15em 0.1em;
	}
	#coma_03 .com3_text img#d_02 {
		margin: 0.2em 0.15em 0 0.2em;
	}
	/* coma_04
	--------------------------------------------------------- */
	#coma_04 .coma_04_box {
		padding: 5vw 5vw 12vw;
	}
	#coma_04 h2 {
    	font-size: 10.1vw;
		margin-bottom: 20px;
	}
	#coma_04 .text_1 {
		font-size: 3.0vw;
	}
	#coma_04 .text_2 {
		font-size: 4.7vw;
	}
	#coma_04 .text_3 {
    	font-size: 6.5vw;
	}
	/* coma_04
	--------------------------------------------------------- */
	#coma_06 .coma_06_box {
		padding: 5vw 5vw 12vw;
	}
	#coma_06 h2 {
		font-size: 7.6vw;
		padding-bottom: 30px;
		margin-bottom: 20px;
	}
	#coma_06 .text {
		font-size: 4.3vw;
	}
	
	/* coma_09
	--------------------------------------------------------- */
	#coma_09 .manga_line_inner {
		padding: 15vw 6vw 6.8vw 7vw;
	}
}
/* ==============================
     1100px
============================== */
@media screen and (max-width:1100px){
	#coma_03 h2 {
	}
	#coma_03 .com3_text {
    	font-size: 3.7vw;
	}
}
/* ==============================
     1000px
============================== */
@media screen and (max-width:1000px){
	/* coomon
	--------------------------------------------------------- */
	#coma_08,
	#coma_06,
	#coma_04,
	#coma_02 {
		clip-path: polygon(0 0, 100% 0, 100% calc(100% - 60px), 0 100%);
	}
	#coma_08 .manga_line_inner ,
	#coma_06 .manga_line_inner ,
	#coma_04 .manga_line_inner ,
	#coma_02 .manga_line_inner {
		clip-path: polygon(0 0, 100% 0, 100% calc(100% - 60px), 0 100%);
	}
	
	
	#coma_03_over,
	#coma_09 ,
	#coma_07 ,
	#coma_05 ,
	#coma_03 {
		margin-top: -60px;
		clip-path: polygon( 0 60px, 100% 0, 100% 100%, 0 100%);
	}
	#coma_09 .manga_line_inner ,
	#coma_07 .manga_line_inner ,
	#coma_05 .manga_line_inner ,
	#coma_03 .manga_line_inner {
		clip-path: polygon( 0 60px, 100% 0, 100% 100%, 0 100%);
	}
	
	
	/* coma_04
	--------------------------------------------------------- */
	#coma_04 h2 .scroll {
		width: 100%;
		margin: 1vw auto 3vw;
		padding: 1vw 0 2vw;
	}
	#coma_04 .text_box p {
		margin-bottom: 1vw;
	}
	#coma_04 .text_3 {
		margin: 2.5vw 0 0!important;
	}
	#coma_06 h2 {
		padding-bottom: 3vw;
		margin-bottom: 2vw;
	}
}
/* ==============================
     767px
============================== */
@media screen and (max-width:767px){
	#coma_02-03::after {
		right: -5px;
		bottom: -14px;
		width: 28%;
	}
	#coma_04-05::after {
		left: 10px;
		bottom: -45px;
		width: 23%;
	}
	#coma_08-09::after {
		right: -5px;
		bottom: -20px;
		width: 40%;
	}
	
	@keyframes dododo_anim {
		0% {
			transform: translate(0,2%);
		}
		100% {
			transform: translate(0,-4%)
		}
	}
	/* coomon
	--------------------------------------------------------- */
	#coma_08,
	#coma_06,
	#coma_04,
	#coma_02 {
		clip-path: polygon(0 0, 100% 0, 100% calc(100% - 40px), 0 100%);
	}
	#coma_08 .manga_line_inner ,
	#coma_06 .manga_line_inner ,
	#coma_04 .manga_line_inner ,
	#coma_02 .manga_line_inner {
		clip-path: polygon(0 0, 100% 0, 100% calc(100% - 40px), 0 100%);
	}
	
	
	#coma_03_over,
	#coma_09 ,
	#coma_07 ,
	#coma_05 ,
	#coma_03 {
		margin-top: -40px;
		clip-path: polygon( 0 40px, 100% 0, 100% 100%, 0 100%);
	}
	#coma_09 .manga_line_inner ,
	#coma_07 .manga_line_inner ,
	#coma_05 .manga_line_inner ,
	#coma_03 .manga_line_inner {
		clip-path: polygon( 0 40px, 100% 0, 100% 100%, 0 100%);
	}
	
	
	.inner {
		padding: 1.5vw;
	}
	.manga_line {
		margin-bottom: 1.5vw;
		padding: 1vw;
	}
	/* header
	--------------------------------------------------------- */
	#header .top_box {
		padding: 5vw 5vw 3vw;
	}
	#header .bottom_box .text_box {
		margin: 1vw 5vw 2vw;
   		font-size: 3.8vw;
		line-height: 1.3;
	}
	
	#header .bottom_box .text_box br {
		display: none;
	}
	#header .bottom_box .text_box .gray {
		background: #ddd;
		padding: 1.5vw 1.5vw 2vw;
		line-height: 1;
		display: inline-block;
		margin-bottom: 0.25em;
	}
	#header .bottom_box .text_box .big {
    	font-size: 145%;
	}
	#header .bottom_box .text_box .asterisk {
		font-size: 2.5vw;
		margin-top: 2vw;
	}
	#header .bottom_box .img_box #manga_01-03 {
		width: 13.5%;
		bottom: -4%;
		right: 5%;
	}
	/* coma_01
	--------------------------------------------------------- */
	#coma_01 .coma_01_box {
		background-size: 150%;
	}
	#coma_01 .text_4 {
		font-size: 2.8vw;
		margin-top: 3%;
		line-height: 1.3;
	}
	#coma_01 .coma_01_box {
		padding: 12vw 5vw 11vw;
	}
	#coma_01 .text_2 {
		font-size: 17vw;
		margin: 6% 0 7.5%;
	}
	#coma_01 .text_1 {
		font-size: 4.2vw;
	}
	#coma_01 .text_3 {
		font-size: 5.6vw;
	}
	/* coma_03
	--------------------------------------------------------- */
	#coma_02 .coma_02_box #manga_02-03 {
		width: 9.5%;
		top: -11%;
	}
	/* coma_03
	--------------------------------------------------------- */
	#coma_03 h2 {
		font-size: 7.8vw;
		padding-bottom: 4.5vw;
		margin-bottom: 3vw;
	}
	#coma_03 .manga_line_inner .text_box {
		padding: 14vw 5vw 7vw;
	}
	#coma_03 .com3_text br.sp_none {
		display: none;
	}
	#coma_03 .com3_text {
		font-size: 5vw;
	}
	#coma_03 .com3_text p {
		margin-bottom: 0.45em;
	}
	#coma_03 .com3_text span.text_deco {
    	font-size: 150%;
		line-height: 1;
	}
	#coma_03 .com3_text img {
		height: 8vw;
	}
	/* coma_04
	--------------------------------------------------------- */
	#coma_04 .coma_04_box {
		padding: 7vw 5vw 14vw;
	}
	#coma_04 h2 {
		margin-bottom: 2vw;
	}
	
	/* coma_05
	--------------------------------------------------------- */
	#coma_05 .coma_05_box #manga_03-03 {
		width: 16%;
		right: 13%;
		top: 3%;
	}
	/* coma_06
	--------------------------------------------------------- */
	#coma_06 .coma_06_box {
		padding: 7vw 5vw 14vw;
	}
    #coma_06 h2 {
        font-size: 7.85vw;
    }
	/* coma_07
	--------------------------------------------------------- */
	#coma_07 .coma_07_box #manga_04-03 {
		width: 6%;
		left: 10.5%;
		top: 6%;
	}
	/* coma_08
	--------------------------------------------------------- */
	#coma_08 .coma_08_box #manga_05-02 {
		width: 13%;
		right: 5%;
		top: 10%;
	}
	/* coma_09
	--------------------------------------------------------- */
	#coma_09 ul.button_list li:not(:last-of-type) {
		margin-bottom: 10px;
	}
	#coma_09 .manga_line_inner {
		padding: 24vw 5vw 20vw 6vw;
	}
	
	#page_top a,
	#page_top{
		display: block;
	}
}
/* ==============================
     480px
============================== */
@media screen and (max-width:480px){
}



/* =========================================================
     アニメーション
========================================================= */

.item_anim.top_slide  {
    opacity: 0;
    transition: 1s;
}
.item_anim.top_slide.active {
}
.item_anim.top_slide.active {
  	animation : top_slide 1s;
	opacity: 1;
}

@keyframes top_slide {
    0% { transform:translateY(200px); opacity: 0;}
    100% { transform:translateY(0px); opacity: 1;}
}

/* header
--------------------------------------------------------- */
.first_anim {
	
}

#header .first_box {
    animation-name: head_first_box;
    animation-timing-function: ease-in-out;
    animation-iteration-count: 1;
    animation-direction: normal;
    animation-delay: 0.5s;
    animation-duration: 0.35s;
    transform: scale(0);
	animation-fill-mode: forwards;
}
#header .second_box {
    animation-name: head_first_box;
    animation-timing-function: ease-in-out;
    animation-iteration-count: 1;
    animation-direction: normal;
    animation-delay: 0.9s;
    animation-duration: 0.35s;
    transform: scale(0);
	animation-fill-mode: forwards;
}
#header .third_box {
    animation-name: head_first_box;
    animation-timing-function: ease-in-out;
    animation-iteration-count: 1;
    animation-direction: normal;
    animation-delay: 1.4s;
    animation-duration: 0.35s;
    transform: scale(0);
	animation-fill-mode: forwards;
}
@keyframes head_first_box {
  0%   { transform: scale(0); }
  90% { transform: scale(1.1); }
  100% { transform: scale(1); }
}



#header .second_box .scroll .scroll-inner {
  	animation : scrollAnime 11s 1.7s linear infinite;
}

@keyframes scrollAnime{
    0% { transform: translateX(0)}
  100% { transform: translateX(-50%)}
}




#header #manga_01-01 {
  animation: manga_01-01 0.1s linear infinite;
}
 
@keyframes manga_01-01 {
  0%   { transform: translateX(-0.2%); }
  50% { transform: translateX(0); }
  100% { transform: translateX(-0.2%); }
}

#header .bottom_box.item_anim.active #manga_01-03 {
    animation-name: manga_01-03;
    animation-timing-function: ease-in-out;
    animation-iteration-count: 1;
    animation-direction: normal;
    animation-delay: 0.4s;
    animation-duration: 0.5s;
    transform: scale(0);
	animation-fill-mode: forwards;

}

@keyframes manga_01-03 {
    0% { transform: rotate(0deg) scale(0);}
    100% { transform: rotate(360deg) scale(1);}
}

/* coma_01
--------------------------------------------------------- */
#coma_01.item_anim.top_slide .coma_01_box {
	overflow: hidden;
}
#coma_01.item_anim.top_slide .coma_01_box > div {
    transform: scale(0);
}
#coma_01.item_anim.top_slide.active .coma_01_box > div {
    animation-name: coma_01_anim_01;
    animation-timing-function: ease-in-out;
    animation-iteration-count: 1;
    animation-direction: normal;
    animation-delay: 0.5s;
    animation-duration: 0.7s;
    transform: scale(0);
	animation-fill-mode: forwards;

}

@keyframes coma_01_anim_01 {
    0% { transform: scale(0);}
    94% { transform: scale(1.2);}
    100% { transform: scale(1);}
}
#coma_01.active .coma_01_box {
  animation: coma_01_bg 0.09s linear infinite;
}
@keyframes coma_01_bg {
    0% { background-size: 120%;}
    50% { background-size: 200%;}
    100% { background-size: 120%;}
}

@media screen and (max-width:767px){
	@keyframes coma_01_bg {
		0% { background-size: 150%;}
		50% { background-size: 220%;}
		100% { background-size: 150%;}
	}
}
/* coma_02
--------------------------------------------------------- */
#coma_02.active #manga_02-02, 
#coma_02.active #manga_02-03 {
  animation: manga_02-02 0.5s ;
    animation-timing-function: infinite;
	animation-fill-mode: forwards;
    animation-iteration-count: 1;
    animation-delay: 1.5s;
	 transform: rotateY(0deg) scale(0); 
}
 
@keyframes manga_02-02 {
  0%   { transform: rotateY(180deg) scale(0); }
  100% { transform: rotateY(360deg) scale(1); }
}

#coma_02.active #manga_02-01 {
	animation: manga_02-01;
	animation-fill-mode: forwards;
	animation-iteration-count: 1;
    animation-delay: 0.5s;
    animation-duration: 1.0s ;
	transform: translateX(-10%); 
	opacity: 0;
    z-index: -1;
    position: relative;
}
@keyframes manga_02-01 {
    0% { transform: translateX(-10%); opacity: 0;}
    100% { transform: translateX(0); opacity: 1;}
}

/* coma_03
--------------------------------------------------------- */

#coma_03 .item_img.active .bold_item {
	animation-fill-mode: forwards!important;
	animation-iteration-count: 1!important;
    animation-duration: 0.4s!important;
}
#coma_03 .item_img.active #bold_01 {
	animation: coma_03_item_01;
    animation-delay: 0;
}
@keyframes coma_03_item_01 {
    0% { }
    100% { padding-bottom: 0; }
}
#coma_03 .item_img.active #bold_02 {
	animation: coma_03_item_02;
    animation-delay: 0.4s;
}
@keyframes coma_03_item_02 {
    0% { }
    100% { padding-bottom: 0; }
}
#coma_03 .item_img.active #bold_03 {
	animation: coma_03_item_03;
    animation-delay: 0.8s;
}
@keyframes coma_03_item_03 {
    0% { }
    100% { padding-bottom: 0; }
}
#coma_03 .item_img.active #bold_04 {
	animation: coma_03_item_04;
    animation-delay: 1.2s;
}
@keyframes coma_03_item_04 {
    0% { }
    100% { padding-bottom: 0; }
}
#coma_03 .item_img.active #bold_05 {
	animation: coma_03_item_05;
    animation-delay: 1.6s;
}
@keyframes coma_03_item_05 {
    0% { }
    100% { padding-bottom: 0; }
}



#coma_03 h2 .top {
	
}
#coma_03 h2 .bottom {
	
}


/* coma_03
--------------------------------------------------------- */

#coma_03.active h2 .top {
  	animation : coma_03_h2-top 0.7s 0.4s forwards;
	transform:translateY(100px);
	opacity: 0;
}

@keyframes coma_03_h2-top {
    0% { transform:translateY(100px); opacity: 0;}
    100% { transform:translateY(0px); opacity: 1;}
}


#coma_03.active h2 .scroll .scroll-inner {
  	animation : scrollAnime_2 11s 2.9s linear infinite;
	text-align: center;
}
@keyframes scrollAnime_2 {
    0% { transform: translateX(-50)}
  100% { transform: translateX(0)}
}

#coma_03 h2 .bottom {
	overflow: hidden;	/*必須*/
	white-space: nowrap;	/*必須*/
	width: 100%;
	display: block;
	height: 1em;
	line-height: 1;
}
@media screen and (max-width:481px){
	#coma_03 h2 .bottom {
		width: 100%;
	}
}
#coma_03.active h2 .bottom {
	animation: coma_03_bottom_opacity_01 1.1s forwards, coma_03_bottom_typing 1.65s 1.0s steps(11), coma_03_bottom_blink_01 0.7s 1.0s step-end infinite alternate;	/*アニメーション関連*/
	height: 1em;
	line-height: 1;
}

@keyframes coma_03_bottom_opacity_01 {
	0% {opacity: 0;}
	99% {opacity: 0;}
	100% {opacity: 1;}
}
@keyframes coma_03_bottom_typing {
	from {
		width: 0;
	}
}
@keyframes coma_03_bottom_blink_01 {
	50% {
		border-color: transparent;		/*点滅風に見せる*/
	}
}

#coma_03.active .com3_text {
  	animation : coma_03_textbox 0.7s 3.0s forwards;
	transform:translateY(100px);
	opacity: 0;
}

@keyframes coma_03_textbox {
    0% { transform:translateY(100px); opacity: 0;}
    100% { transform:translateY(0px); opacity: 1;}
}

/* coma_04
--------------------------------------------------------- */

#coma_04 h2 #typing_anim_01 {
	letter-spacing: 0.02em;
    height: 1.2em;
	overflow: hidden;	/*必須*/
	white-space: nowrap;	/*必須*/
	width: 100%;
	display: block;
}
#coma_04.active h2 #typing_anim_01 {
	animation: opacity_01 0.5s forwards, typing_anim_01 1.2s 0.4s steps(8), blink_01 .2s 0.4s step-end infinite alternate;	/*アニメーション関連*/
}

@keyframes opacity_01 {
	0% {opacity: 0;}
	99% {opacity: 0;}
	100% {opacity: 1;}
}
@keyframes typing_anim_01 {
	from {
		width: 0;
	}
}
@keyframes blink_01 {
	50% {
		border-color: transparent;		/*点滅風に見せる*/
	}
}

@media screen and (max-width:767px){
	#coma_04 h2 #typing_anim_01 {
		letter-spacing: 0.06em;
	}
}



#coma_04.active h2 .scroll {
    animation-name: coma_04_h2_scroll;
    animation-timing-function: ease-in-out;
    animation-iteration-count: 1;
    animation-direction: normal;
    animation-delay: 1.5s;
    animation-duration: 0.35s;
    transform: scale(0);
	animation-fill-mode: forwards;
}
@keyframes coma_04_h2_scroll {
  0%   { transform: scale(0); }
  100% { transform: scale(1); }
}


#coma_04.active h2 .scroll .scroll_inner {
  	animation : scrollAnime_3 11s 2.5s linear infinite;
}
#coma_04.active .text_box .scroll .scroll_inner {
  	animation : scrollAnime_3 8s 3s linear infinite;
}
@keyframes scrollAnime_3 {
    0% { transform: translateX(0)}
  100% { transform: translateX(-50%)}
}


#coma_04.active .text_box {
  	animation : coma_04_textbox 0.7s 2.0s forwards;
	transform:translateY(100px);
	opacity: 0;
}

@keyframes coma_04_textbox {
    0% { transform:translateY(100px); opacity: 0;}
    100% { transform:translateY(0px); opacity: 1;}
}


/* coma_06
--------------------------------------------------------- */
#coma_06.active h2 {
	
}
#coma_06.active h2 {
	
}

#coma_06.active h2 .rel2 {
  	animation : coma_06_h2_rel2 0.7s 0.5s forwards;
	transform:translateY(50px);
	opacity: 0;
    width: 2em;
}
@keyframes coma_06_h2_rel2 {
    0% { transform:translateY(50px); opacity: 0;}
    100% { transform:translateY(0px); opacity: 1;}
}


#coma_06 h2 .main {
	width: calc(100% - 3em);
	overflow: hidden;	/*必須*/
	white-space: nowrap;	/*必須*/
    line-height: 1.1;
}
#coma_06.active h2 .main {
	animation: opacity_02 1.3s  forwards, typing_anim_02 1.4s 1.2s steps(8), blink_02 1.2s 1.2s step-end infinite alternate;	/*アニメーション関連*/
	opacity: 0;
}
@keyframes opacity_02 {
	0% {opacity: 0;}
	99% {opacity: 0;}
	100% {opacity: 1;}
}
@keyframes typing_anim_02 {
	from {
		width: 0;
	}
}
@keyframes blink_02 {
	50% {
		border-color: transparent;		/*点滅風に見せる*/
	}
}
#coma_06 h2 .small {
	width: 3em;
	overflow: hidden;	/*必須*/
	white-space: nowrap;	/*必須*/
    line-height: 1.1;
}
#coma_06.active h2 .small {
	animation: opacity_03 2.9s  forwards, typing_anim_03 0.45s 2.8s steps(3), blink_03 0.2s 2.8s step-end infinite alternate;	/*アニメーション関連*/
	opacity: 0;
}
@keyframes opacity_03 {
	0% {opacity: 0;}
	99% {opacity: 0;}
	100% {opacity: 1;}
}
@keyframes typing_anim_03 {
	from {
		width: 0;
	}
}
@keyframes blink_03 {
	50% {
		border-color: transparent;		/*点滅風に見せる*/
	}
}

#coma_06.active .text {
  	animation : coma_04_textbox 0.7s 4.0s forwards;
	transform:translateY(100px);
	opacity: 0;
}

@keyframes coma_06_textbox {
    0% { transform:translateY(100px); opacity: 0;}
    100% { transform:translateY(0px); opacity: 1;}
}

/* coma_07
--------------------------------------------------------- */

/*#manga_04-02 {
  animation: manga_04-02 0.1s linear infinite;
}
 
@keyframes manga_04-02 {
  0%   { transform: translateX(-0.3%);}
  50% { transform: translateX(0);}
  100% { transform: translateX(-0.3%);}
}
*/
#coma_07.active .coma_07_box {
	animation: coma_07_box;
	animation-fill-mode: forwards;
	animation-iteration-count: 1;
    animation-delay: 0.3s;
    animation-duration: 0.7s ;
	opacity: 0;
}
@keyframes coma_07_box {
    0% { opacity: 0;}
    100% { opacity: 1;}
}
#coma_07.active #manga_04-01 {
	animation: manga_04-01;
	animation-fill-mode: forwards;
	animation-iteration-count: 1;
    animation-delay: 1s;
    animation-duration: 2s ;
	transform: translateX(10%);
	opacity: 0; 
}
@keyframes manga_04-01 {
    0% { transform: translateX(-10%); opacity: 0; }
    100% { transform: translateX(0); opacity: 1; }
}

#coma_07.active #manga_04-02 ,
#coma_07.active #manga_04-03 {
	animation: manga_04-02;
	animation-fill-mode: forwards;
	animation-iteration-count: 1;
    animation-delay: 0.7s;
    animation-duration: 0.7s ;
	transform: scale(0);
}
@keyframes manga_04-02 {
    0% {transform: rotate(0deg) scale(0);}
    100% {transform:rotate(360deg) scale(1);}
}
/* coma_05
--------------------------------------------------------- */

#manga_03-01 {
	animation: manga_03-01 1.8s linear infinite;
	transform-origin: left bottom;
	transform: rotate(0) translateY(5%);
}
 
@keyframes manga_03-01 {
  0% {transform: rotate(0) translateY(5%);}
  10% { transform: rotate(-3deg) translateY(5%);}
  20% {transform: rotate(0) translateY(5%);}
  30% { transform: rotate(-2deg) translateY(5%);}
  40% {transform: rotate(0) translateY(5%);}
  50% { transform: rotate(-1deg) translateY(5%);}
  60% {transform: rotate(0) translateY(5%);}
  100% {transform: rotate(0) translateY(5%);}
}

/* coma_08
--------------------------------------------------------- */
#coma_08.active .coma_08_box {
	animation: coma_08_box;
	animation-fill-mode: forwards;
	animation-iteration-count: 1;
    animation-delay: 0.5s;
    animation-duration: 1.5s;
	 opacity: 0;
}

@keyframes coma_08_box {
    0% { opacity: 0; transform:translateX(-10%);}
    100% { opacity: 1; transform:translateX(0); }
}

/*#manga_05-01 {
  animation: manga_05-01 0.2s linear infinite;
	overflow: hidden;
}
 
@keyframes manga_05-01 {
  0%   { transform: translateX(-0.2%); }
  50% { transform: translateX(0); }
  100% { transform: translateX(-0.2%); }
}
*/
#coma_08.active #manga_05-02 {
    animation-name: coma_01_anim_01;
    animation-timing-function: ease-in-out;
    animation-iteration-count: 1;
    animation-direction: normal;
    animation-delay: 2s;
    animation-duration: 0.5s;
    transform: scale(0);
	animation-fill-mode: forwards;

}
@keyframes coma_01_anim_01 {
    0% { transform: scale(3); opacity: 0;}
    100% { transform: scale(1); opacity: 1;}
}