@charset "UTF-8";
/* CSS Document */

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

	common css

------------------------------------------------------*/
*, *:before, *:after { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -o-box-sizing: border-box; -ms-box-sizing: border-box; box-sizing: border-box; }
html { width: 100%; overflow: scroll; overflow-x: hidden; font-size: 10px; }
body { font-family: "游ゴシック体", YuGothic, "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック", "Yu Gothic", sans-serif; color: #fff; line-height: 1.5; font-size: 1.6rem; letter-spacing: 0.025em; background-color: #030000; overflow: hidden; }
.container { width: 100%; margin-left: auto; margin-right: auto; position: relative;}
ul { list-style: none; }
ol { list-style: decimal; }
a { color: #fff; text-decoration: none; }
img { vertical-align: bottom; width: auto; max-width: 100%; height: auto; }
a.fade:hover { text-decoration: none; background-color: #fff; color: #333; -webkit-transition: all 400ms cubic-bezier(0.165, 0.84, 0.44, 1); transition: all 400ms cubic-bezier(0.165, 0.84, 0.44, 1); }

.pc { display:block; }
.sp { display:none; }

@media (min-width: 768px) {
	body{ margin-bottom: 107px; }
	.container { max-width: 1100px; }

	a:hover { text-decoration:none; }
	a img:hover { opacity: 0.8; -webkit-transition: all 400ms cubic-bezier(0.165, 0.84, 0.44, 1); transition: all 400ms cubic-bezier(0.165, 0.84, 0.44, 1); }
}

@media (max-width: 767px) {
	body{ margin-bottom: 92px; }
	.container { padding-left: 30px; padding-right: 30px; }
	.pc { display: none; }
	.sp { display: block; }

}

@media (max-width: 1099px) and (min-width: 900px) {
	body { font-size: 1.4rem; }
}

@media (max-width: 899px) and (min-width: 768px) {
	body { font-size: 1.4rem; }
}


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



------------------------------------------------------*/
.font-01 { font-family: 'Nanum Gothic', sans-serif; font-weight: 400; }

.modal { display: none; height: 100vh; position: fixed; top: 0; left: 0; right: 0; margin: 0 auto; width: 100%; z-index: 1000; }
.modal_bg { background: rgba(30,30,30,0.8); position: absolute; width: 100%; height: 100vh; }
.modal_content { left: 50%; position: absolute; top: 50%; transform: translate(-50%,-50%); background: #000; }
.modal_content .inner::before { content: ''; position: absolute; left: 0; right: 0; margin: 0 auto; background: url(/common/top/T_Gimmick_Seesaw02.png) no-repeat; background-position: bottom center; background-size: 100%; z-index: 1; }
/* .modal_content::before { content: ''; position: absolute; left: 0; right: 0; margin: 0 auto; background: url(/common/top/T_Gimmick_Seesaw02.png) no-repeat; background-position: bottom center; background-size: 100%; z-index: 1; } */
.modal_content .inner { position: relative; border: 10px solid #000; }

.modal_content .inner ul li:not(:first-child) { display: none;}
.modal_content .inner ul li { text-align: center;}
.modal_content .inner ul li img { max-height: 80vh; width: auto;}

.modal_content iframe { position: absolute; top: 0; left: 0; right: 0; margin: 0 auto; }
.modal_content .dl { display: block; width: 100%; max-width: 392px; position: absolute; bottom: -34px; left: 50%; right: 0; transform: translateX(-50%); }
/* .modal_content .dl { display: block; width: 100%; max-width: 392px; position: absolute; bottom: -34px; left: 0; right: 0; margin: 0 auto; } */
.modal .modal_close { width: 50px; height: 50px; position: absolute; top: -60px; right: -10px; z-index: 1; cursor: pointer; }
.modal .modal_close span { display: block; background: #fff; height: 1px; width: 40px; position: absolute; top: 50%; left: 0; right: 0; margin: 0 auto; }
.modal .modal_close span:first-of-type { transform: rotate( 45deg); }
.modal .modal_close span:last-of-type { transform: rotate( -45deg); }

h2{ letter-spacing: -3px;}
#story h2,#character h2,#movie h2,#special h2 { text-shadow: 0 1px 10px rgb(0 0 0 / 50%); }



html::-webkit-scrollbar {
	width: 6px;
	height: 6px;
}
html::-webkit-scrollbar-track {
	border-radius: 3px;
	box-shadow: 0 0 2px #333 inset;
}
html::-webkit-scrollbar-thumb {
	border-radius: 5px;
	background: #333;
}
/* Firefox */
@-moz-document url-prefix() {
    html{
		scrollbar-width:thin;
	}
}


@media (min-width: 768px) {
	h2 { font-size: 15rem; }

	.modal_content { width: 80%; }
	/*.modal_content::before { top: -34px; /*width: 356px;*/ /*height: 42px; }*/
	/* .modal_content::before{ width:100%; max-width:300px; } */
	.modal_content .inner::before { top: -45px; /*width: 356px;*/ height: 42px; }
	.modal_content .inner::before{ width:100%; max-width:300px; }
}

@media (max-width: 767px) {
	h2 { font-size: 7.2rem; text-shadow: 0 2px 0 rgba(0,0,0,0.5); }

	.modal_content { width: 90%; }
	/*.modal_content::before { top: -15px; /*width: 178px;*/ /*height: 21px; }*/
	/* .modal_content::before{ width:100%; max-width:180px; } */
	.modal_content .inner::before { top: -25px; /*width: 178px;*/ height: 21px; }
	.modal_content .inner::before{ width:100%; max-width:180px; }
	.modal_content .dl { /*width: 57.24%;*/ max-width: 240px; bottom: -8.99%; }
	.modal_content .inner ul li img { max-height: 60vh; }
}

@media (min-width: 1100px) {
}

@media (max-width: 1099px) and (min-width: 768px) {
	.modal_content .dl { width: 340px; bottom: -30px; }
}

@media (max-width: 1099px) and (min-width: 900px) {
	h2 { font-size: 13rem; }

}

@media (max-width: 899px) and (min-width: 768px) {
	h2 { font-size: 11rem; }
}


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

	header

------------------------------------------------------*/
header { position: fixed; bottom: 0; left: 0; width: 100%; z-index: 999; }
header nav ul li { position: relative; }
header nav ul li:not(:first-of-type)::before { content: ''; position: absolute; background-color: #fff; transform: rotate(45deg); }
header nav a { color: #fff; text-decoration: none; letter-spacing: 0.025em; font-family: 'Nanum Gothic', sans-serif; font-weight: 700; }
header nav a:hover{
	text-decoration: none;
}

@media (min-width: 768px) {
	header nav { background: #030000; padding: 32px 0 39px; }
	header nav ul { display:-webkit-box; display:-ms-flexbox; display:flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; }
	header nav ul li:not(:last-of-type) { margin-right: 50px; }
	header nav ul li:not(:first-of-type)::before { top: 50%; left: -30px; margin-top: -3px; width: 6px; height: 6px; }
	header nav a { font-size: 2.2rem; }
}

@media (max-width: 767px) {
	header { background: #424242; height: 92px; display:-webkit-box; display:-ms-flexbox; display:flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; }
	header nav { background: rgba(3, 0, 0, 0.8); padding-top: 140px; position: fixed; top: 0; right: 0; left: 0; width: 100%; height: 100%; display: none; }
	header nav .logo { max-width: 304px; margin: 0 auto 65px; }
	header nav ul { text-align: center; }
	header nav ul li { margin-bottom: 39px; }
	header nav ul li:not(:first-of-type)::before { top: -23px; left: 0; right: 0; margin-right: auto; margin-left: auto; width: 8px; height: 8px; }
	header nav a { font-size: 2.2rem; }
	header .mainLogo { max-width: 208px; margin: 0 auto; }
	header .mainLogo img { filter: drop-shadow(0px 2px 0 rgba(0,0,0,0.5)); width: 100%; }

	header .menuBtn { width: 70px; height: 70px; position: absolute; padding: 25px 20px; }
	header .menuBtn span { display: block; height: 2px; width: 30px; background: #fff; }
	header .menuBtn span:not(:last-of-type) { margin-bottom: 7px; }

	header .closeBtn { width: 105px; height: 105px; position: fixed; top: 0; right: 0; }
	header .closeBtn span { display: block; background: #e9ebef; width: 62px; height: 1px; position: absolute; top: 50%; right: 25px; }
	header .closeBtn span:not(:first-of-type) { transform: rotate(45deg); }
	header .closeBtn span:not(:last-of-type) { transform: rotate(-45deg); }
}

@media (max-width: 1099px) and (min-width: 900px) {
	header nav a { font-size: 2.2rem; }
}

@media (max-width: 899px) and (min-width: 768px) {
	header nav a { font-size: 1.9rem; }
}


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

	mainVisual

------------------------------------------------------*/
.mainVisual { background-repeat: no-repeat; background-position: center; position: relative; z-index: 0; max-width: 1500px; }
.mainVisual::before,
.mainVisual::after { content: ''; position: absolute; width: 100%; height: 100%; z-index: 1; }
.mainVisual::before { background: linear-gradient(to right, rgba(0,0,0,1), rgba(0,0,0,0) 10%); top: 0; left: 0; }
.mainVisual::after { background: linear-gradient(to left, rgba(0,0,0,1), rgba(0,0,0,0) 10%); top: 0; right: 0; }
.mainVisual .mainLogo { margin: 0 auto; position: absolute; bottom: 5px; left: 0; right: 0; }
.mainVisual .mainLogo img { filter: drop-shadow(0px 2px 0 rgba(0,0,0,0.5)); }
.mainVisual .visualBottom { margin: 0 auto; position: absolute; bottom: 0; left: 0; right: 0; z-index: 2; width: 100%; display:-webkit-box; display:-ms-flexbox; display:flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between;}
.mainVisual .visualBottom ul { display:-webkit-box; display:-ms-flexbox; display:flex; }
.mainVisual .visualBottom ul.sns li { max-width: 24px; margin-right: 8px; }
.mainVisual .visualBottom ul.lang li:not(:last-of-type)::after { content: '/'; margin: 0 7px; }
.mainVisual .visualBottom ul.lang li a { text-shadow: 0 2px 0 rgba(0,0,0,0.5); transition: all 0.3s ease; }
.mainVisual .visualBottom ul.lang li a:hover { color:#ADD8E6; }
.mainVisual .volume { fill: #fff; position: absolute; z-index: 2; cursor: pointer; }
.mainVisual .volume .play { display: none; }


@media (min-width: 1100px) {
	.mainVisual { /*height: 619px;*/ height: 844px; }
	.mainVisual .mainLogo { width: 583px; }
}

@media (max-width: 1099px) and (min-width: 768px) {
	.mainVisual { height: 450px; padding-top: 56.273%; }
	.mainVisual .mainLogo { width: 53%; }
}

@media (max-width: 1099px) and (min-width: 900px) {

}

@media (max-width: 899px) and (min-width: 768px) {

}


@media (min-width: 768px) {
	.mainVisual { background-size: cover; }
	.mainVisual .visualBottom { margin-bottom: 15px; max-width: 90.91%; }
	.mainVisual .visualBottom ul.sns li { max-width: 24px; margin-right: 8px; }
	.mainVisual .volume { right: 4.546%; bottom: 40px; width: 17px; }
}

@media (max-width: 767px) {
	.mainVisual { height: 60vw; background-size: auto 100%; }
	.mainVisual .mainLogo { display: none; }
	.mainVisual .visualBottom { font-size: 1.4rem; margin-bottom: 7px; padding: 0 20px; -webkit-box-align: end; -ms-flex-align: end; align-items: flex-end; }
	.mainVisual .visualBottom ul.sns li { max-width: 34px; margin-right: 12px; }
	.mainVisual .visualBottom ul.lang li a { font-size: 2.0rem; }
	.mainVisual .volume { right: 20px; bottom: 35px; width: 25px; }
}


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

	catch

------------------------------------------------------*/
.catch { text-align: center; font-weight: bold; }
.catch span:not(.large):not(.marker) { color: #d57db0; text-shadow: -2px 5px 0 rgba(213, 125, 176, 0.5); display: inline-block; transform: rotate(-7deg); }


@media (min-width: 768px) {
	.catch { font-size: 3.7rem; margin-bottom: 125px; }
	.catch .large { font-size: 5.0rem; }
	.catch span:not(.large):not(.marker) { font-size: 6.9rem; margin-right: 15px; }

	#story + .catch { max-width: 705px; margin-left: auto; margin-right: auto; }
}

@media (max-width: 767px) {
	.catch { font-size: 2.3rem; margin-bottom: 80px; }
	.catch .large { font-size: 3.3rem; }
	.catch span:not(.large):not(.marker) { font-size: 4.5rem; margin-right: 7px; }

	#story + .catch { max-width: 295px; margin-left: auto; margin-right: auto; }
}

@media (max-width: 1099px) and (min-width: 900px) {
	h2 { font-size: 13rem; }
	.catch { font-size: 3.5rem; }
	.catch .large { font-size: 4.8rem; }
	.catch span:not(.large):not(.marker) { font-size: 6.7rem; }

}

@media (max-width: 899px) and (min-width: 768px) {
	h2 { font-size: 11rem; }
	.catch { font-size: 3.3rem; }
	.catch .large { font-size: 4.6rem; }
	.catch span:not(.large):not(.marker) { font-size: 6.5rem; }
}


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

	NEWS

------------------------------------------------------*/
#news { position: relative; z-index: 1; text-align: center; background-color: rgba(0,0,0,0.7); }
#news ul { overflow-y: auto; display:-webkit-box; display:-ms-flexbox; display:flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-pack: start; -ms-flex-pack: start; justify-content: flex-start; }
#news ul li { text-align: left; }
#news ul li a { display:-webkit-box; display:-ms-flexbox; display:flex; transition: all 0.3s ease; }
#news ul li a span { display: block; }
#news ul li a:hover{ color: #ADD8E6; }


#news ul::-webkit-scrollbar {
	width: 6px;
	height: 6px;
}
#news ul::-webkit-scrollbar-track {
	border-radius: 3px;
	box-shadow: 0 0 2px #333 inset;
}
#news ul::-webkit-scrollbar-thumb {
	border-radius: 5px;
	background: #333;
}
/* Firefox */
@-moz-document url-prefix() {
    #news ul{
		scrollbar-width:thin;
	}
}


@media (min-width: 1100px) {
	#news { max-width: 1000px; }
}

@media (max-width: 1099px) and (min-width: 768px) {
	#news { max-width: 90.91%; }
}

@media (max-width: 1099px) and (min-width: 900px) {

}

@media (min-width: 941px) {
	#news { padding: 0 30px 40px 45px; margin-bottom: -120px; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: reverse; -ms-flex-direction: row-reverse; flex-direction: row-reverse; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; -webkit-box-align: center; -ms-flex-align: center; align-items: center; }
	#news h2 { line-height: 1; margin: 0 auto; }
	#news ul { margin-right: 30px; padding-right:10px; max-height: 150px; }
	#news ul li a { line-height: 1.3; }
	#news ul li:not(:last-of-type) { margin-bottom: 8px; }
	#news ul li a span { margin-right: 36px; }
}

@media (max-width: 940px) {
	#news { margin-bottom: 50px; }
	#news h2 { text-align: center; }
	#news ul { display: inline-block; font-size: 1.8rem; max-height: 150px; /*max-width: 500px; margin: 0 auto; font-size: 1.8rem;*/ }
	#news ul li a span { margin-right: 20px; }
}

@media (max-width: 540px) {
	#news ul li a { font-size: 0.8em; }
}



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

	STORY

------------------------------------------------------*/
#story .background { z-index: -1; }
#story > p, #story .platform p { text-shadow: 0 1px 5px rgba(0,0,0,1), 0 1px 5px rgba(0,0,0,1); }
#story .platform ul { display:-webkit-box; display:-ms-flexbox; display:flex; }
#story .platform ul li { background-color: #fff; }


@media (min-width: 768px) {
	#story { padding-left: 47px; margin-bottom: 123px; }
	#story .background { position: absolute; max-width: 63.545%; right: 5%; top: 120px; }
	#story > p { max-width: 400px; margin-bottom: 28px; }
	#story .platform p { margin-bottom: 15px; font-size: 3.0rem; }
	#story .platform ul li { max-width: 156px; margin-right: 23px; }
}

@media (max-width: 767px) {
	/* #story { margin-bottom: 70px; } */
	#story h2 { margin-bottom: -57px; text-align: center; }
	#story .background { margin-bottom: 30px; position: relative; }
	#story > p { line-height: 1.5; margin-bottom: 29px; }
	#story .platform p { font-size: 2.2rem; margin-bottom: 10px; text-align: center; }
	#story .platform ul { -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; }
	#story .platform ul li { max-width: 116px; width: 100%; margin-right: 16px; text-align: center; }
	#story .platform ul li:last-of-type a { display: block; padding-top: 5px; }
	#story .platform ul li:last-of-type img { max-width: 71px; }
}

@media (max-width: 1099px) and (min-width: 900px) {
	#story .platform p { font-size: 2.8rem; }
}

@media (max-width: 899px) and (min-width: 768px) {
	#story .platform p { font-size: 2.8rem; }
}


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

	howto

------------------------------------------------------*/
#howto { background-image: url(/common/top/bg_howto.png); background-repeat: no-repeat; background-size: cover; background-position: center; position: relative; }
#howto h2 { position: relative; z-index: 1; }
#howto h2::before { content: ''; position: absolute; background: #030000; z-index: -1; }
#howto .container { height: 100%; }
#howto .container::before { content: ''; position: absolute; top: 0; right: 0; width: 100%; height: 100%; background-image: url(/common/top/bg_flame_howto.png); background-repeat: no-repeat; background-position: center right; }
#howto .container::after { content: ''; position: absolute; top: 0; left: 95%; background: #000; width: 100vw; height: 100%; }
#howto .container > div { max-width: 1000px; position: relative; margin-left: auto; margin-right: auto; }
#howto .container > div .scaffold { display:-webkit-box; display:-ms-flexbox; display:flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; }
#howto .control,
#howto .slick-dots { font-weight: bold; display:-webkit-box; display:-ms-flexbox; display:flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; }
#howto .slick-dots li{ cursor: pointer; }
#howto .control li:not(:last-of-type)::after,
#howto .slick-dots li:not(:last-of-type)::after { content: '・'; }
/* 黄色  #efea3a */

@media (min-width: 1100px) {
	#howto { height: 633px; }
	#howto .container > div { margin-bottom: 45px; }
	#howto .container::before { background-size: 876px; }
}

@media (min-width: 768px) {
	#howto { margin-bottom: 173px; }
	#howto h2 { font-size: 5.0rem; margin-bottom: 70px; }
	#howto h2::before { width: 196px; height: 31px; top: 40px; left: 20px; }
	#howto .container { padding-top: 22px; }
	#howto .container > div .girl { max-width: 152px; margin-left: 120px; }
	#howto .container > div .scaffold .img { max-width: 290px; }
	#howto .control,
	#howto .slick-dots { font-size: 3.0rem; }

}

@media (max-width: 767px) {
	#howto { margin-bottom: 86px; }
	#howto h2 { font-size: 2.8rem; padding-left: 30px; margin-bottom: 25px; }
	#howto h2::before { width: 107px; height: 20px; top: 23px; left: 43px; }
	#howto .container { padding-top: 12px; padding-bottom: 12px; max-width: 480px; }
	#howto .container::before { background-size: auto 100%; }
	#howto .container > div { margin-bottom: 17px; }
	#howto .container > div .girl { max-width: 61px; margin-left: 90px; }
	#howto .container > div .scaffold { padding-left: 30px; }
	#howto .container > div .scaffold .img { max-width: 117px; }
	#howto .control,
	#howto .slick-dots { font-size: 1.5rem; }
}

@media (max-width: 1099px) and (min-width: 768px) {
	#howto .container { padding-bottom: 2%; }
	#howto .container::before { background-size: auto 100%; }
	#howto .container > div { max-width: 90.91%; margin-bottom: 4.5%; }
	#howto .container > div .girl { max-width: 15.2%; margin-left: 12%; }
	#howto .container > div .scaffold .img { max-width: 29%; }
}

@media (max-width: 1099px) and (min-width: 900px) {
}

@media (max-width: 899px) and (min-width: 768px) {
}




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

	CHARACTER

------------------------------------------------------*/
#character { position: relative; }
#character .container::before { content: ''; position: absolute; top: 0; background: #030000; width: 100vw; height: 100%; }
#character .container::after { content: ''; position: absolute; bottom: 0; background: url(/common/top/bg_flame_character.png) no-repeat; background-position: bottom; background-size: 100%; z-index: 0; }
#character h2 { position: relative; z-index: 1; }
#character .catch { margin-bottom: 0; }
#character .catch span { position: relative; z-index: 1; }
#character .catch span.marker::before { content: ''; position: absolute; background: #030000; z-index: -1; }
#character .catch span:not(.large):not(.marker) { color: #6d9bd2; font-weight: bold; }
#character ul { position: relative; z-index: 1; }
#character ul li { display:-webkit-box; display:-ms-flexbox; display:flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; -webkit-box-align: end; -ms-flex-align: end; align-items: flex-end; }
#character ul li dl dt { font-weight: bold; text-shadow: 0 0 10px #000,0 0 10px #000; }
#character ul li dl dt span { display: block; }
#character ul li dl dd { width: 100%; text-shadow: 0 0 10px #000,0 0 10px #000; }
#character .slick-arrow { border: none; color: transparent; background: url(/common/top/slider_arrow.png) no-repeat; background-size: 100%; position: absolute; top: 50%; cursor: pointer; }
#character .slick-prev { transform: scale(-1, 1); }

@media (max-width: 960px) {
	#character ul li .hide_br{ display: none; }
}

@media (min-width: 768px) {
	#character { /*padding-top: 116px;*/ background: url(/common/top/bg_character.png); background-repeat: no-repeat; background-size: cover; background-position: center; }
	#character .container { padding-top: 200px; }
	#character .container::before { right: 72.273%; }
	#character .container::after { width: 752px; height: 292px; left: 27.727%; }
	#character h2 { text-align: right; padding-right: 35px; position: absolute; top: -114px; right: 0; }
	#character .catch { max-width: 492px; text-align: left; position: absolute; right: 58px; top: 175px; z-index: 1; }
	#character .catch span.marker:first-of-type::before { top: 16px; left: 20px; width: 171px; height: 31px; }
	#character .catch span.marker:last-of-type::before { top: 30px; left: 29px; width: 565px; height: 31px; }
	#character .catch span:not(.large):not(.marker) { text-shadow: -2px 5px 0 rgba(109, 155, 210, 0.5); }
	#character ul { padding: 0 128px; }
	#character ul li .img { max-width: 299px; }
	#character ul li dl { width: calc( (100% - 299px) - 25px ); padding-bottom: 25px; }
	#character ul li dl dt { font-size: 3.0rem; margin-bottom: 40px; }
	#character ul li dl dt span { font-size: 1.5rem; }
	#character ul li dl dd { font-size: 1.8rem; }
	#character .slick-arrow { margin-top: -39px; width: 40px; height: 78px; }
	#character .slick-prev { left: 50px; }
	#character .slick-next { right: 50px; }
}

@media (max-width: 767px) {
	#character { margin-bottom: 235px; background-image: url(/common/top/bg_character.png); background-repeat: no-repeat; background-size: cover; background-position: center; }
	#character .container { max-width: 480px; }
	#character .container::before { right: 95.834%; }
	#character .container::after { width: 325px; height: 100%; left: -15px; }
	#character h2 { position: absolute; top: -55px; left: 0; right: 0; margin: 0 auto; text-align: center; }
	#character .catch { max-width: 275px; margin-left: auto; margin-right: auto; text-align: center; line-height: 1.25; padding-top: 75px; padding-bottom: 120px; }
	#character .catch span.marker:first-of-type { margin-right: 250px; }
	#character .catch span.marker:first-of-type::before { top: 12px; left: 11px; width: calc(100% - 5px); height: 18px; }
	#character .catch span.marker:last-of-type::before { top: 20px; left: 17px; width: calc(100% - 13px); height: 20px; }
	#character .catch span:not(.large):not(.marker) { text-shadow: -2px 3px 0 rgba(109, 155, 210, 0.5); }
	#character ul { max-width: 400px; position: absolute; bottom: -195px; left: 0; right: 0; margin: 0 auto; }
	#character ul li .img { max-width: 180px; }
	#character ul li dl { width: calc( (100% - 180px) - 20px ); padding-bottom: 35px; }
	#character ul li dl dt { font-size: 1.5rem; line-height: 1.535; margin-bottom: 7px; }
	#character ul li dl dt span { font-size: 1.3rem; }
	#character ul li dl dd { font-size: 1.2rem; }

	#character + .catch { font-size: 1.5rem; margin-bottom: 80px; padding-top: 20px; line-height: 1.8; }
	#character + .catch .large { font-size: 2.3rem; }

	#character .slick-arrow { width: 15px; height: 30px; margin-top: -15px; padding: 0; }
	#character .slick-prev { left: -20px; }
	#character .slick-next { right: -20px; }
}

@media (max-width: 1099px) and (min-width: 768px) {
	#character .container { padding-top: 285px; }
	#character ul li dl dt { font-size: 2.8rem; }

}

@media (max-width: 1099px) and (min-width: 1000px) {
	#character h2 { top: -95px; }
	#character .catch { top: 130px; }
	#character .catch span.marker:first-of-type::before { top: 14px; left: 15px; width: 165px; height: 28px; }
	#character .catch span.marker:last-of-type::before { width: 540px; }
}

@media (max-width: 999px) and (min-width: 768px) {
	#character h2 { top: -85px; }
	#character .catch { top: 130px; }
	#character .catch span.marker:first-of-type::before { top: 14px; left: 13px; width: 160px; height: 26px; }
	#character .catch span.marker:last-of-type::before { width: 520px; }
}


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

	MOVIE

------------------------------------------------------*/
#movie { margin-bottom: 300px; background: linear-gradient(rgba(3, 0, 0, 1), rgba(3, 0, 0, 0) 26%), url(/common/top/bg_movie.png) no-repeat; background-position: center; background-size: cover; }
#movie h2 { position: absolute; left: 0; right: 0; margin: 0 auto; z-index: 1; text-align: center; }
#movie ul { max-width: 822px; margin: 0 auto; position: relative; }
#movie ul::before { content: ''; position: absolute; left: 0; right: 0; margin: 0 auto; background: url(/common/top/T_Gimmick_Seesaw03.png) no-repeat; background-position: center; background-size: 100%; }
#movie ul li { position: relative; }
#movie .slick-arrow { border: none; color: transparent; background: url(/common/top/slider_arrow.png) no-repeat; background-size: 100%; position: absolute; top: 50%; cursor: pointer; }
#movie .slick-prev { transform: scale(-1, 1); }
#movie .modal_content .inner { padding-top: 56.25%; }

@media (min-width: 1100px) {
	#movie h2 { bottom: -100px; }
}

@media (max-width: 1099px) and (min-width: 768px) {
	#movie ul { max-width: 74.728%; }
}

@media (max-width: 1099px) and (min-width: 900px) {
	#movie h2 { bottom: -90px; }
}

@media (max-width: 899px) and (min-width: 768px) {
	#movie h2 { bottom: -70px; }
}

@media (min-width: 768px) {
	#movie { padding-top: 155px; padding-bottom: 190px; }
	#movie ul { border: 10px solid #030000; }
	#movie ul::before { top: -42px; width: 512px; height: 43px; }

	#movie .slick-arrow { margin-top: -39px; width: 40px; height: 78px; }
	#movie .slick-prev { left: 50px; }
	#movie .slick-next { right: 50px; }
}

@media (max-width: 767px) {
	#movie { padding-top: 75px; padding-bottom: 70px; margin-bottom: 160px; }
	#movie .container { padding: 0 20px; }
	#movie h2 { bottom: -50px; }
	#movie ul { border: 6px solid #030000; }
	#movie ul::before { top: -20px; width: 232px; height: 20px; }
	#movie .slick-arrow { width: 15px; height: 30px; padding: 0; margin-top: -15px; z-index: 1;}
	#movie .slick-prev { left: 25px; }
	#movie .slick-next { right: 25px; }
}


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

	SPECIAL

------------------------------------------------------*/
#special { position: relative; margin-bottom: 0; }
#special h2 { position: absolute; z-index: 1; }
#special > div .left { position: relative; background-image: url(/common/top/bg_special_slider.png); background-repeat: no-repeat; background-position: top 7px left 10px; }
#special > div .right p { line-height: 1; text-align: center; margin-bottom: 20px; }
#special > div .right ul { display:-webkit-box; display:-ms-flexbox; display:flex;  -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; -ms-flex-wrap: wrap; flex-wrap: wrap; }
#special > div .right ul li a { display: block; border: 1px solid rgba(255,255,255,0.3); border-radius: 3px; text-align: center; transition: all 0.3s ease; }
#special > div .right ul li a:hover {background:#ADD8E6; color: #2d2d2d; font-weight: bold;}
#special .special_slider { box-shadow: 0 5px 15px 0 rgb(0 0 0); background: #000; }
#special .slick-dots { position: absolute; bottom: -65px; left: 0; right: 0; display:-webkit-box; display:-ms-flexbox; display:flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; }
#special .slick-dots li { border: 2px solid #6d645f; border-radius: 50%; width: 14px; height: 14px; position: relative; }
#special .slick-dots li:not(:last-of-type) { margin-right: 10px; }
#special .slick-dots li button { background: none; color: transparent; border: none; width: 100%; height: 100%; cursor: pointer; position: absolute; }
#special .slick-dots .slick-active { background: #6d645f; }

#special .modal_content { max-width: 1100px;  /*width: auto;*/ background: rgba(0,0,0,0); text-align: center; }
#special .modal_content .inner { display: inline-block; }
/* #special .modal_content .inner ul { text-align: center; } */

@media (min-width: 1100px) {
	#special > div .right { width: 377px; }
	#special > div .right p { font-size: 3.0rem; }
	#special > div .right ul li a { width: 180px; }
}

@media (max-width: 1099px) and (min-width: 768px) {
	#special > div .right { width: 37.034%; }
	#special > div .right p { font-size: 3.0rem; }
	#special > div .right ul li { width: calc(50% - 8px ); }
	#special > div .right ul li a { width: 100%; }
}

@media (max-width: 1099px) and (min-width: 900px) {
	#special > div .right p { font-size: 2.8rem; }
}

@media (max-width: 899px) and (min-width: 768px) {
	#special > div .right p { font-size: 2.6rem; }
}

@media (min-width: 768px) {
	#special { padding-top: 145px; }
	#special h2 { right: 50px; top: 100px; }
	#special > div:not(.modal) { padding: 0 50px 0 32px; display:-webkit-box; display:-ms-flexbox; display:flex;  -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; }
	#special > div .left { min-height: 356px; width: 58.35%; padding-right: 5.01%; background-size: 100%; }
	#special > div .right { padding-top: 17.192%; }
	#special > div .right ul li { margin-bottom: 17px; }
	#special > div .right ul li a { height: 42px; line-height: 42px; }
	#special .slick-dots { padding-left: 30px; }
}

@media (max-width: 767px) {
	#special { padding-top: 145px; }
	#special h2 { right: 0; left: 0; top: 90px; text-align: center; }
	#special > div .left { max-width: 100%; margin: 0 auto; padding-right: 6.819%; background-size: 100%; background-position: top 10px left 10px; }
	#special > div .left { padding-bottom: 50px; margin-bottom: 35px; }
	#special > div .right p { font-size: 2.4rem; }
	#special > div .right ul li { margin-bottom: 14px; width: calc( 50% - 8px ); }
	#special > div .right ul li a { font-size: 1.4rem; width: 100%; height: 44px; line-height: 44px; }
	#special .slick-dots li button { outline: none; }
}


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

	SEPC / STAFF

------------------------------------------------------*/
#detail { position: relative; background: linear-gradient(rgba(3, 0, 0, .7), rgba(3, 0, 0, .7)), url(/common/top/bg_detail.png); background-size: cover; background-repeat: no-repeat; background-position: center; }
#detail .container { display:-webkit-box; display:-ms-flexbox; display:flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; }
#detail section { margin-bottom: 0; width: 100%; }
#detail section dl { text-shadow: 0 2px 0 rgba(0,0,0,1); }
#detail section:first-of-type dl { display:-webkit-box; display:-ms-flexbox; display:flex; line-height: 1.25}
#detail section:first-of-type dl dd { text-align: right; }
#detail section:last-of-type > div { display:-webkit-box; display:-ms-flexbox; display:flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; }
#detail section:last-of-type dl { line-height: 1.5; }
#detail section:last-of-type dl:not(:last-of-type) { margin-bottom: 15px; }
#detail section:last-of-type dl dt { font-weight: bold; }


@media (min-width: 1099px) {
	#detail .container{ padding: 0 65px;}
}

@media (min-width: 901px) {
	#detail { padding-top: 35px; padding-bottom: 93px; }
	/*#detail::before { content: ''; position: absolute; left: 0; right: 0; top: 50%; transform: translate(-50%, -50%); margin: auto; width: 1px; height: calc(100% - 160px); background: #fff; }*/
	#detail .container { /*padding: 0 85px;*/ padding: 0 30px; }
	#detail section { /*width: 50%;*/ }
	#detail section:first-of-type { padding-right: 53px; width: 46%; position: relative; }
	#detail section:first-of-type::after { content :''; height: calc(100% - 30px); width: 1px; background-color: #fff; display: block; position: absolute; right: 0; top: 44px; }
	#detail section:first-of-type h2 { text-align: right; }
	#detail section:first-of-type dl { -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; }
	#detail section:last-of-type { padding-left: 53px; width: 54%; }

}

@media (max-width: 900px) {
	#detail { /*padding-top: 5px;*/ padding: 60px 0 70px 0; }
	#detail .container { -webkit-box-orient: vertical; -webkit-box-direction: reverse; -ms-flex-direction: column-reverse; flex-direction: column-reverse; }
	#detail h2 { text-align: center; margin-bottom: 5px; }
	#detail section { max-width: 480px; margin: 0 auto; }
	#detail section:first-of-type dl { margin-bottom: 10px; }
	#detail section:first-of-type dl dt { width: 165px; }
	#detail section:first-of-type dl dd { width: calc( 100% - 165px ); }
	#detail section:last-of-type { margin-bottom: 33px; }
}


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

	footer

------------------------------------------------------*/
footer .copy { border-bottom: 1px solid rgba(255,255,255,0.3); text-align: center; padding: 16px; }
footer .container > .img { margin-left: auto; margin-right: auto; }
footer .container > p { text-align: center; line-height: 1.58; font-size: 11px;}
footer .container > div:not(.img) { display:-webkit-box; display:-ms-flexbox; display:flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; }
footer .container > div:not(.img) img { width: 100%; }
footer .container h1 { max-width: 583px; margin: 0 auto; }
@media (min-width: 1100px) {
}

@media (max-width: 1099px) and (min-width: 768px) {
}

@media (max-width: 1099px) and (min-width: 900px) {
	footer .container h1 { max-width: 400px; }
}

@media (max-width: 899px) and (min-width: 768px) {
	footer .container h1 { max-width: 400px; }
}

@media (min-width: 768px) {
	footer { margin-bottom: 100px; }
	footer .copy { margin-bottom: 60px; }
	footer .container > .img { max-width: 122px; margin-bottom: 15px; }
	footer .container > p { margin-bottom: 60px; }
	footer .container > div:not(.img) { margin-bottom: 53px; }
	footer .container > div:not(.img) .img:first-of-type { max-width: 80px; margin-right: 25px; }
	footer .container > div:not(.img) .img:last-of-type { max-width: 100px; }
}

@media (max-width: 767px) {
	footer { margin-bottom: 90px; }
	footer .copy { font-size: 1.1rem; margin-bottom: 30px; }
	footer .container > .img { max-width: 64px; margin-bottom: 7px; }
	footer .container > p { margin-bottom: 30px; }
	footer .container > div:not(.img) { margin-bottom: 29px; }
	footer .container > div:not(.img) .img:first-of-type { max-width: 42px; margin-right: 13px; }
	footer .container > div:not(.img) .img:last-of-type { max-width: 52px; }
	footer .container h1 { max-width: 306px; }
}


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

	footer

------------------------------------------------------*/
.toBottom { max-width: 78px; display: block; position: fixed; top: 38px; right: 30px; z-index: 3; }

@media (min-width: 768px) {

}

@media (max-width: 767px) {

}


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

	how to

------------------------------------------------------*/
#bg_layer {}
.drawarea { position: absolute; left: 0; width: 100%; height: auto; z-index: -1;}
.drawarea svg:not(.active) { opacity: 0;}
.drawarea::before ,
.drawarea::after { content: ''; position: absolute; width: 100%; height: 100%; z-index: 1; }
.drawarea::before { background: linear-gradient(to right, rgba(0,0,0,1), rgba(0,0,0,0) 10%); top: 0; left: 0; }
.drawarea::after { background: linear-gradient(to left, rgba(0,0,0,1), rgba(0,0,0,0) 10%); top: 0; right: 0; }

/*
.mainVisual::before,
.mainVisual::after { content: ''; position: absolute; width: 100%; height: 100%; z-index: 1; }
.mainVisual::before { background: linear-gradient(to right, rgba(0,0,0,1), rgba(0,0,0,0) 10%); top: 0; left: 0; }
.mainVisual::after { background: linear-gradient(to left, rgba(0,0,0,1), rgba(0,0,0,0) 10%); top: 0; right: 0; }
*/

.canvas_area { width: 100%; max-width: 1000px; text-align: center; margin-bottom: 30px; margin-left:auto; margin-right: auto; position:relative;}
.canvas_area canvas { width: 100%;}
canvas.layer { position: absolute; left: 0; top: 0; right: 0; margin-left: auto; margin-right: auto; }

#howto .slick-dots { margin-top: 10px;}
#howto .slick-dots .slick-active { color: #efea3a; position: relative;}
#howto .slick-dots .slick-active::after { color: #fff;}
#howto .slick-dots .slick-active::before { content: ''; position: absolute; width: 24px; height: 20px; border-left: 12px solid transparent; border-right: 12px solid transparent; border-top: 20px solid #efea3a; transform: rotate(180deg); left: -1em; right: 0; top: calc(1em + 30px); margin: auto; animation: arrow_anim 1.0s infinite; }
#howto .slick-dots li:last-child.slick-active::before { left: 0;}


  @keyframes arrow_anim {
	0% {
		top: calc(1em + 30px);
	}

	50% {
		top: calc(1em + 20px);
	}

	100% {
		top: calc(1em + 30px);
	}
  }

@media (min-width: 768px) {
	.drawarea { max-width: 1920px; left: 0; right: 0; margin-left: auto; margin-right: auto;}
	.drawarea:last-child {}
}


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

  loading

------------------------------------------------------*/
#loading { position: fixed; width: 100%; height: 100%; left: 0; top: 0; z-index: 1000; background-color:#000;}
#loading .front ,
#loading .back ,
#loading .fade { position: absolute; left: 0; top: 0; right: 0; bottom: 0; margin: auto; width: 100%; height: 100%;}
#loading .front { background-color: #000; z-index: 1; }
#loading .fade { opacity: 0; background: rgb(0,0,0); background: radial-gradient(circle, rgba(0,0,0,0.8029586834733894) 0%, rgba(0,0,0,0.8981967787114846) 15%, rgba(0,0,0,1) 50%); }
#loading .back.active { animation: anim 3.0s forwards; }
#loading .fade.active { animation: fade_anim 2.0s forwards; }
#loading p { font-size: 2.4rem; color: #fff; text-align: center; position: absolute; left: 0; right: 0; top: 0; bottom: 0; margin: auto; height: 1.5em;}

#fall_char { position: fixed; left: 0; right: 0; top: -100vh; bottom: auto; text-align: center; z-index: 1000; }
#fall_char img {}
#fall_char.active { animation: fall_anim 3.0s forwards; }

@keyframes anim {
	0% {
		background-size: auto 180%;
	}

	100% {
	background-size: auto 100%;
	}
  }

  @keyframes fade_anim {
	0% {
	opacity:0;
	}

	30% {
	opacity:0;
	}

	100% {
	opacity:1;
	}
  }

  @keyframes fall_anim {
	0% {
		top: -100vh;
	}

	70% {
		top: -10vh;
	}

	100% {
		top:100vh;
	}
  }