@charset "UTF-8";

* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
	font-family: "ヒラギノ角ゴ ProN", "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro", "メイリオ", "Meiryo", "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
}

body {
	margin: 0;
	padding: 0;
	overflow-x: hidden;
}

.noScroll {
	overflow: hidden;
}

a {
	text-decoration: none;
}

.content-inner {
	max-width: 1200px;
	width: 95%;
	margin: auto;
}

.pre-link {
	position: fixed;
	left: 30px;
	bottom: 40px;
	z-index: 90;
}

.sns-btn {
	position: fixed;
	right: 10px;
	z-index: 100;
}

.sns-btn-fb {
	top: 100px;
}

.sns-btn-tw {
	top: 150px;
}

.sns-btn-ig {
	top: 200px;
}

#page-top {
	position: fixed;
	width: 56px;
	height: 109px;
	right: 30px;
	bottom: 30px;
	background: url(../../images/icon/top-btn.png) center center no-repeat;
	z-index: 90;
}

#page-top:hover {
	cursor: pointer;
}

.pb1 {
	padding-bottom: 1rem;
}

@media screen and (max-width: 767px) {
	.drawer--right .drawer-hamburger {
		padding: 15px 15px 27px;
		width: 36px;
	}

	.drawer-hamburger-icon:before {
		top: -12px;
	}

	.drawer-hamburger-icon:after {
		top: 12px;
	}

	.pre-link {
		left: 15px;
		width: 100px;
	}

	main>.sns-btn {
		width: 45px;
		text-align: right;
	}

	main>.sns-btn-fb {
		top: 70px;
	}

	main>.sns-btn-tw {
		top: 115px;
	}

	main>.sns-btn-ig {
		top: 160px;
	}

	#page-top {
		background-size: contain;
		width: 50px;
		height: 97px;
		right: 15px;
		bottom: 35px;
	}
}

/****************************
			mainimg
*****************************/
#mainimg {
	background: linear-gradient(#2e0a5b, #8943e0);
	width: 100%;
	height: 1200px;
	position: relative;
	overflow: hidden;
}

#mainimg .logo-area {
	text-align: center;
	margin-top: 230px;
	position: relative;
	z-index: 3;
}

#mainimg .bg-cloud {
	position: absolute;
	display: flex;
	width: 4096px;
	height: 278px;
	left: 50%;
	margin-left: -50vw;
	overflow: hidden;
}

#mainimg .bg-cloud-c {
	background: url(../../images/bgi/cloud.png) center top no-repeat;
	width: 2048px;
	height: 278px;
	display: inline-block;
}

#mainimg .bg-ster {
	position: absolute;
	top: -50%;
	left: -50%;
	width: 200%;
	height: 200%;
	opacity: 1;
}

#mainimg .bg-ster-c {
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
}

#mainimg .bg-ster-c:nth-child(1) {
	background: url(../../images/bgi/star1.png) center top no-repeat;
}

#mainimg .bg-ster-c:nth-child(2) {
	background: url(../../images/bgi/star2.png) center top no-repeat;
}

#mainimg .bg-ster-c:nth-child(3) {
	background: url(../../images/bgi/star3.png) center top no-repeat;
}

#mainimg .bg-ster-c:nth-child(4) {
	background: url(../../images/bgi/star4.png) center top no-repeat;
}

#mainimg .bg-ster-c:nth-child(5) {
	background: url(../../images/bgi/star5.png) center top no-repeat;
}

#mainimg .bg-ster-c:nth-child(6) {
	background: url(../../images/bgi/star6.png) center top no-repeat;
}

#mainimg .bg-forest {
	position: absolute;
	width: 100%;
	height: 509px;
	left: 0;
	bottom: 100px;
	background: url(../../images/bgi/forest.png) center top repeat-x;
}

#mainimg .bg-castle {
	position: absolute;
	width: 100%;
	height: 706px;
	left: 0;
	bottom: 0;
	background: url(../../images/bgi/castle.png) center top repeat-x;
}

#mainimg .bg-white {
	position: absolute;
	width: 100%;
	height: 800px;
	left: 0;
	bottom: 0px;
	background: url(../../images/bgi/white-tryangle.png) center top no-repeat;
	background-size: cover;
	z-index: 4;
}

#mainimg .bg-l-arrow, #mainimg .bg-r-arrow {
	position: absolute;
	width: 30%;
	height: 295px;
	max-width: 466px;
	bottom: 10px;
	z-index: 3;
}

#mainimg .bg-l-arrow {
	left: 0;
	background: url(../../images/bgi/gray-l-arrow.png) right bottom no-repeat;
	background-size: contain;
}

#mainimg .bg-r-arrow {
	right: 0;
	background: url(../../images/bgi/gray-r-arrow.png) left bottom no-repeat;
	background-size: contain;
}

@media screen and (max-width: 767px) {
	#mainimg {
		height: 900px;
	}

	#mainimg .logo-area {
		margin-top: 205px;
		padding: 0 5%;
	}

	#mainimg .bg-forest {
		height: 489px;
		bottom: 0;
	}

	#mainimg .bg-castle {
		height: 606px;
	}

	#mainimg .bg-l-arrow, #mainimg .bg-r-arrow {
		background-size: 100% 60%;
	}

	#mainimg .bg-white {
		height: 1400px;
		bottom: -850px;
	}
}
/* laptop */
@media only screen and (max-width: 1366px) and (orientation: landscape) {
	#loading img {
		width: 60% !important;
		margin-top: -15vh;
	}

	#mainimg .logo-area {
		width: 60%;
		margin: 15vh auto 0 !important;
	}

	#mainimg .logo-area img {
		width: 100% !important;
	}

	#mainimg .bg-forest {
		height: 64%;
	}

	#mainimg .bg-castle {
		height: 76%;
	}
}

/******    height: 546px;**********************
			story
*****************************/
.story {
	height: auto;
	text-align: center;
	position: relative;
}

#story {
	padding-top: 10%;
	background: #fff;
}


.story p {
	position: relative;
	padding-bottom: 40%;
	z-index: 10;
}

.story02, .story05, .story06, .story07 {
	padding-bottom: 38%;
}

.story02 p, .story05 p, .story06 p, .story07 p {
	padding-bottom: 3%;
}

.story10:nth-child(2) {
	padding-bottom: 0;
}

#story .story03 {
	background: url(../../images/bgi/noizy.png) center center no-repeat;
	padding: 60px 0;
	margin-bottom: 50%;
	font-size: 0;
}

.story04 p, #story .story04 {
	padding-bottom: 0;
}

#story2 {
	background: url(../../images/bgi/story.png) center center no-repeat;
	background-size: cover;
	background-attachment: scroll;
	padding-top: 6%;
	overflow: hidden;
}

.story .bg-wing-box {
	position: absolute;
	width: 100%;
	height: 100%;
	z-index: 3;
}

.story .bg-wing {
	position: fixed;
}

#story .bg-wing1 {
	left: 73.375%;
	top: 15%;
	width: 10.5625%;
	height: 13.4890061565523%;
	max-width: 162px;
	background: url(../../images/bgi/wing1.png) top center no-repeat;
	background-size: contain;
}

#story .bg-wing2 {
	left: 11.1875%;
	top: 43%;
	width: 13.625%;
	height: 13.896218117854%;
	max-width: 219px;
	background: url(../../images/bgi/wing2.png) top center no-repeat;
	background-size: contain;
}

#story .bg-wing3 {
	left: 76.5625%;
	top: 75%;
	width: 9.875%;
	height: 10.2902374670185%;
	max-width: 159px;
	background: url(../../images/bgi/wing3.png) top center no-repeat;
	background-size: contain;
}

#story2 .bg-wing4 {
	left: 77.4375%;
	top: 40.9667422524565%;
	width: 10.125%;
	height: 12.5894134477825%;
	max-width: 164px;
	background: url(../../images/bgi/wing5.png) top center no-repeat;
	background-size: contain;
}

#story2 .bg-wing5 {
	left: 19.5625%;
	top: 11%;
	width: 14.375%;
	height: 11.9456366237482%;
	max-width: 231px;
	background: url(../../images/bgi/wing6.png) top center no-repeat;
	background-size: contain;
}

#story2 .bg-wing6 {
	left: 20%;
	top: 76.276644%;
	width: 11.9375%;
	height: 7.65379113018598%;
	max-width: 187px;
	background: url(../../images/bgi/wing7.png) top center no-repeat;
	background-size: contain;
}

#story2 .bg-dorodoro-box {
	height: 22%;
	width: 100%;
	top: 0;
	left: 0;
	position: absolute;
	overflow: hidden;
}

#story2 .bg-dorodoro {
	top: -100%;
	left: 0;
	background: url(../../images/bgi/dorodoro.png) bottom center repeat-x;
	background-size: contain;
	height: 100%;
	padding: 0;
	position: absolute;
	width: 100%;
	z-index: 1;
}

#story2 .bg-dorodoro2 {
	background: url(../../images/bgi/dorodoro2.png) repeat-x;
	background-size: contain;
	height: 74%;
}

#story2 .content-inner {
	padding-top: 5%;
}

#story2 .story07 {
	padding-bottom: 20%;
}

#story3, #story5 {
	background: #000;
}

#story3:before, #story3:after {
	content: "";
	position: absolute;
	left: 0;
	width: 100%;
	height: 2.5%;
	z-index: 1;
}

#story3:before {
	top: -2%;
	background: -moz-linear-gradient(bottom, #000, rgba(0, 0, 0, 0));
	background: -webkit-linear-gradient(bottom, #000, rgba(0, 0, 0, 0));
	background: linear-gradient(to top, #000, rgba(0, 0, 0, 0));
}

#story3:after {
	bottom: -2%;
	background: -moz-linear-gradient(top, #000, rgba(0, 0, 0, 0));
	background: -webkit-linear-gradient(top, #000, rgba(0, 0, 0, 0));
	background: linear-gradient(to bottom, #000, rgba(0, 0, 0, 0));
}

#story3, #story5 .story11 {
	padding: 41% 0;
}

#story4 {
	background: url(../../images/bgi/story2.png) center center no-repeat;
	background-size: cover;
	background-attachment: scroll;
}

#story4 {
	padding: 30% 0 0;
}

#story4 .story09 {
	width: 720px;
	padding: 0;
	display: inline-block;
	text-align: left;
	top: 30px;
}

@media screen and (max-width: 769px) {
	#story4 .story09 {
		width: 100%;
		top: 0;
		padding: 0 10% 0 7%;
	}

	#story4 .story10 {
		padding-left: 10%;
		padding-right: 10%;
	}
}

#story5 .story12 {
	width: 100%;
	position: relative;
	margin-top: -13%;
}

#story5 .story12 .parts {
	background: url(../../images/rule/rule_main.png) center center no-repeat;
	background-size: contain;
	width: 100%;
	max-width: 1141px;
	padding-bottom: 72.4802805%;
	position: relative;
	margin: auto;
}

#story5 .story12 .parts>* {
	position: absolute;
	display: block;
}

#story5 .story12 .parts img {
	opacity: 0;
	margin-top: -70px;
	z-index: 14;
}

#story5 .story12 .parts .a1 {
	background: url(../../images/rule/a1.png) top center no-repeat;
	background-size: 100%;
	left: 1.577563541%;
	top: 21.88633615%;
	width: 5.609114812%;
	height: 9.673518742%;
	z-index: 1;
}

#story5 .story12 .parts .a2 {
	background: url(../../images/rule/a2.png) top center no-repeat;
	background-size: 100%;
	left: 74.14548642%;
	top: 10.20822249%;
	width: 8.588957055%;
	height: 10.64087062%;
	z-index: 2;
}

#story5 .story12 .parts .a3 {
	background: url(../../images/rule/a3.png) top center no-repeat;
	background-size: 100%;
	left: 0;
	top: 75.09068924%;
	width: 8.588957055%;
	height: 14.75211608%;
	z-index: 3;
}

#story5 .story12 .parts .a4 {
	background: url(../../images/rule/a4.png) top center no-repeat;
	background-size: 100%;
	left: 89.65819457%;
	top: 77.75090689%;
	width: 8.676599474%;
	height: 10.64087062%;
	z-index: 4;
}

#story5 .story12 .parts .b1 {
	background: url(../../images/rule/b1.png) top center no-repeat;
	background-size: 100%;
	left: 57.31814198%;
	top: 10.21281742%;
	width: 26.81858019%;
	height: 55.01813785%;
	z-index: 6;
}

#story5 .story12 .parts .b2 {
	background: url(../../images/rule/b2.png) top center no-repeat;
	background-size: 100%;
	left: 89.04469763%;
	top: 15.9286578%;
	width: 7.011393514%;
	height: 21.5235792%;
	z-index: 7;
}

#story5 .story12 .parts .b3 {
	background: url(../../images/rule/b3.png) top center no-repeat;
	background-size: 100%;
	left: 4.732690622%;
	top: 32.37363967%;
	width: 29.79842244%;
	height: 42.68440145%;
	z-index: 8;
}

#story5 .story12 .parts .b4 {
	background: url(../../images/rule/b4.png) top center no-repeat;
	background-size: 100%;
	left: 45.31113059%;
	top: 60.45949214%;
	width: 6.660823839%;
	height: 21.28174123%;
	z-index: 9;
}

#story5 .story12 .parts .b5 {
	background: url(../../images/rule/b5.png) top center no-repeat;
	background-size: 100%;
	left: 62.66432954%;
	top: 75.57436518%;
	width: 11.48115688%;
	height: 24.42563482%;
	z-index: 10;
}

#story5 .story12 .parts .c1 {
	background: url(../../images/rule/c1.png) top center no-repeat;
	background-size: 100%;
	left: 31.55127082%;
	top: 0;
	width: 40.05258545%;
	height: 51.39056832%;
	z-index: 5;
}

#story5 .story12 .parts .c2 {
	background: url(../../images/rule/c2.png) top center no-repeat;
	background-size: 100%;
	left: 75.52483772%;
	top: 58.00846433%;
	width: 13.05872042%;
	height: 20.55622733%;
	z-index: 11;
}

#story5 .story12 .parts .d1 {
	background: url(../../images/rule/d1.png) top center no-repeat;
	background-size: 100%;
	left: 22.17353199%;
	top: 9.915356711%;
	width: 12.971078%;
	height: 20.55622733%;
	z-index: 12;
}

#story5 .story12 .parts .d2 {
	background: url(../../images/rule/d2.png) top center no-repeat;
	background-size: 100%;
	left: 28.13321648%;
	top: 42.56348247%;
	width: 12.79579316%;
	height: 26.23941959%;
	z-index: 13;
}

#story5 .story12.animated .parts .chara1,
#story5 .story12.animated .parts .chara2 {
	width: 23%;
}

#story5 .story12.animated .parts .chara3,
#story5 .story12.animated .parts .chara4,
#story5 .story12.animated .parts .chara5,
#story5 .story12.animated .parts .chara6 {
	width: 10%;
}

#story5 .story12.animated .parts .chara8,
#story5 .story12.animated .parts .chara9,
#story5 .story12.animated .parts .chara10 {
	width: 11.5%;
}

#story5 .story12.animated .parts .chara12,
#story5 .story12.animated .parts .chara13 {
	width: 19%;
}

#story5 .story12.animated .parts .chara1 {
	left: 11.5%;
	top: 21%;
}

#story5 .story12.animated .parts .chara2 {
	left: 28.6%;
	top: 21%;
}

#story5 .story12.animated .parts .chara3 {
	left: 49.3%;
	top: 26%;
}

#story5 .story12.animated .parts .chara4 {
	left: 57.5%;
	top: 27.5%;
}

#story5 .story12.animated .parts .chara5 {
	left: 65.5%;
	top: 23.5%;
}

#story5 .story12.animated .parts .chara6 {
	left: 73%;
	top: 24.6%;
}

#story5 .story12.animated .parts .chara7 {
	width: 3%;
	left: 84%;
	top: 27%;
}

#story5 .story12.animated .parts .chara8 {
	left: 12.5%;
	top: 58%;
}

#story5 .story12.animated .parts .chara9 {
	left: 21%;
	top: 59%;
}

#story5 .story12.animated .parts .chara10 {
	left: 29%;
	top: 56%;
}

#story5 .story12.animated .parts .chara11 {
	width: 10%;
	left: 37.5%;
	top: 54%;
}

#story5 .story12.animated .parts .chara12 {
	left: 49%;
	top: 44%;
}

#story5 .story12.animated .parts .chara13 {
	left: 64%;
	top: 44%;
}

#story5 .story12.animated .parts .chara14 {
	width: 7.5%;
	left: 81%;
	top: 44.5%;
}

@media screen and (max-width: 767px) {
	#story {
		padding-top: 30%;
	}

	#story .content-inner {
		width: 90%;
	}

	.story p {
		padding-bottom: 120%;
	}

	#story .story02 p, #story .story04 p, #story2 .story05 p, #story2 .story06 p, #story2 .story07 p {
		padding-bottom: 10%;
	}

	#story .story03 {
		background-size: 100% 100%;
		margin-bottom: 100%
	}

	.story03 img {
		height: auto;
	}

	#story3 {
		padding: 120% 0;
	}

	#story4 {
		padding-top: 100%;
	}

	#story .story02 p img {
		width: 80%;
	}

	#story .story03 img {
		width: 1.9rem;
	}

	#story .story04 p:nth-child(2) img {
		width: 100%;
		max-width: 633px;
	}

	#story .story04 p:nth-child(3) img {
		width: 80%;
		max-width: 418px;
	}

	#story2 .story05 p:nth-child(3) img {
		width: 55%;
		max-width: 250px;
	}

	#story2 .story05 p:nth-child(4) img {
		width: 80%;
		max-width: 391px;
	}

	#story2 .story05 p:nth-child(5) img {
		width: 100%;
		max-width: 476px;
	}

	#story2 .story06 p:nth-child(1) img {
		width: 100%;
		max-width: 816px;
	}

	#story3 .story08 img {
		width: 88.25%;
		max-width: 306px;
	}

	#story4 .story10:nth-child(2) img {
		width: 96.375%;
		max-width: 837px;
	}

	#story5 .story11 img {
		width: 76.25%;
	}

	#story .bg-wing1 {
		width: 33.8%;
		left: auto;
		right: 5%;
	}

	#story .bg-wing2 {
		width: 43.6%;
	}

	#story .bg-wing {
		width: 31.6%;
		left: auto;
		right: 5%;
	}

	#story2 .bg-wing4 {
		width: 36%;
		left: 65%;
	}

	#story2 .bg-wing5 {
		width: 32.4%;
		left: 5%;
	}

	#story2 .bg-wing6 {
		width: 46%;
		left: 5%;
	}
}

/****************************
			chapter-ttl
*****************************/
.chapter-ttl {
	position: relative;
	background: #fff url(../../images/bgi/chapter.png);
	width: 100%;
	padding: 90px 0;
	overflow-x: hidden;
	height: 326px;
}

.chapter-ttl-top, .chapter-ttl-under {
	position: absolute;
	height: 8px;
	width: 0;
	background: #000;
	display: block;
}

.chapter-ttl-top:before, .chapter-ttl-under:after {
	content: "";
	display: block;
	position: absolute;
}

.chapter-ttl-top {
	top: 30px;
	left: -170px;
}

.chapter-ttl-top:before {
	width: 103px;
	height: 34px;
	top: -14px;
	right: -123px;
	background: url(../../images/chapter-top-arrow.svg) center bottom no-repeat;
	background-size: contain;
}

.chapter-ttl-under {
	bottom: 30px;
	right: -204px;
}

.chapter-ttl-under:after {
	width: 185px;
	height: 66px;
	bottom: -23px;
	left: -185px;
	background: url(../../images/chapter-under-arrow.svg) center bottom no-repeat;
	background-size: contain;
}

.chapter-ttl .chapter-ttl-img {
	position: absolute;
	display: flex;
	left: 50%;
	margin-left: -50vw;
	overflow: hidden;
}

/****************************
			character
*****************************/
#character .chapter-ttl-img {
	width: 4080px;
	height: 146px;
}

#character .chapter-ttl .chapter-ttl-img-c {
	background: url(../../images/chara-ttl.png) center top no-repeat;
	width: 1770px;
	height: 146px;
	display: inline-block;
}

@media screen and (max-width: 767px) {
	#character .chapter-ttl-img {
		width: 1770px;
		height: 73px;
	}

	#character .chapter-ttl .chapter-ttl-img-c {
		width: 1020px;
		height: 73px;
		background-size: contain;
	}

	.chapter-ttl {
		padding: 29px 0;
		height: 138px;
	}

	.chapter-ttl-top, .chapter-ttl-under {
		height: 3px;
	}

	.chapter-ttl-top {
		left: -65px;
		top: 13px;
	}

	.chapter-ttl-top:before {
		width: 52px;
		height: 17px;
		top: -7px;
		right: -62px;
	}

	.chapter-ttl-under {
		bottom: 11px;
		right: -68px;
	}

	.chapter-ttl-under:after {
		width: 67px;
		height: 24px;
		left: -67px;
		bottom: -8px;
	}
}

/****************************
			character
*****************************/
#character {
	position: relative;
	z-index: 4;
}

@media screen and (min-width:768px) {
	#character .chapter-ttl {
		z-index: 5;
	}

	#character .chapter-ttl-sub {
		z-index: 3;
		width: 100%;
		padding-bottom: 7%;
		position: relative;
		overflow-x: hidden;
	}

	#character .chapter-ttl-sub:before, #character .chapter-ttl-sub:after {
		content: "";
		position: absolute;
		display: block;
		z-index: 2;
	}

	#character .chapter-ttl-sub:before {
		width: 40%;
		height: 100%;
		bottom: 66%;
		left: -9%;
		background: #000000;
		transform: rotate(-10deg);
	}

	#character .chapter-ttl-sub:after {
		background: #000000;
		width: 85%;
		height: 100%;
		bottom: 54%;
		left: 26%;
		transform: rotate(5deg);
	}

	.chara-box {
		background: #000;
		position: relative;
		padding: 2% 0;
		overflow: hidden;
	}

	.chara-box .content-inner {
		max-width: 1600px;
	}

	.chara-box .bg-chara-box {
		position: absolute;
		content: "";
		width: 100%;
		height: 100%;
		top: 0;
		left: 0;
		background: url(../../images/character/dots_bg.png) center center;
		background-attachment: fixed;
		transform: translate3d(0, 0, 0);
	}

	.chara-box .bg-chara-box::before, .chara-box .bg-chara-box::after {
		content: "";
		position: absolute;
		z-index: 4;
		width: 150%;
		height: 3px;
		background: #000;
		transform: rotate(-5deg);
		left: -25%;
		right: 0;
	}

	.chara-box .bg-chara-box::before {
		top: 13.6%;
	}

	.chara-box .bg-chara-box::after {
		top: 69%;
	}

	.chara-box .serif {
		display: block;
		padding-left: 15.625%;
		position: relative;
	}

	.chara-box .bg-chara {
		z-index: 1;
		position: absolute;
		width: 150%;
		height: 55%;
		top: 14%;
		left: -25%;
		right: 0;
		transform: rotate(-5deg);
		overflow: hidden;
	}

	.chara-box .bg-chara1-inner {
		z-index: 3;
		height: 120%;
		position: absolute;
		top: -10%;
		left: 100%;
		right: -100%;
		transform: rotate(5deg);
	}

	.chara-box:nth-child(2n) .bg-chara1-inner {
		right: 100%;
		left: -100%;
		top: -6%;
	}

	.chara-box .bg-chara1-inner2 {
		width: 100%;
		height: 100%;
		position: fixed;
		top: 0;
		left: 0;
		bottom: 0;
		right: 0;
		margin: auto;
		transform: rotate(5deg);
		padding: 1px;
		box-sizing: content-box;
	}

	.chara-box .bar {
		content: "";
		position: absolute;
		bottom: 14.6%;
		left: -25%;
		margin: auto;
		height: 0;
		width: 150%;
		background: #000;
		z-index: 5;
		transform: rotate(-5deg);
		padding-bottom: 8%;
	}

	.chara-box .bar::before, .chara-box .bar:after {
		content: "";
		display: block;
		height: 2px;
		width: 100%;
		position: absolute;
		left: 0;
	}

	.chara-box .bar::before {
		top: 4%;
	}

	.chara-box .bar:after {
		bottom: 4%;
	}

	.chara-box .chara-inner:after {
		content: "";
		height: 403px;
		width: 25.3125%;
		max-width: 405px;
		position: absolute;
		background: url(../../images/character/gre_img.png) bottom left no-repeat;
		background-size: contain;
		bottom: 5%;
		right: 0;
		z-index: 5;
		opacity: 0.7;
	}

	.chara-box:nth-child(2n) .chara-inner:after {
		right: auto;
		left: 0;
	}

	.chara-box .class {
		position: absolute;
		bottom: 5.5%;
		left: -100%;
		z-index: 7;
		right: 100%;
		margin: auto;
	}

	.chara-box:nth-child(2n) .class {
		bottom: .5%;
	}

	.chara-box .chara-inner {
		z-index: 5;
		position: relative;
	}

	.chara-box .chara-inner:before {
		content: "";
		position: absolute;
		top: -100%;
		right: 17%;
		z-index: 6;
	}

	.chara-box:nth-child(2n) .chara-inner:before {
		right: auto;
		left: 17%;
	}

	.chara-box .name {
		position: absolute;
		width: 22.1875%;
		max-width: 355px;
		left: -150%;
		z-index: 7;
		margin: 0 auto;
		bottom: 9.5%;
	}

	.chara-box:nth-child(2n) .chara-img {
		margin-left: auto;
	}

	.chara-box:nth-child(2n) .name {
		left: auto;
		right: 11%;
		bottom: 17.7%;
	}

	.chara-box .chara-img {
		height: auto;
		box-sizing: content-box;
		position: relative;
		left: -100%;
	}

	.chara-box:nth-child(2n) .chara-img {
		right: -100%;
	}

	#character1 {
		background: url(../../images/character/luc_bg.jpg) center center no-repeat;
		background-size: cover;
		background-attachment: fixed;
		padding-top: 11%;
		margin-top: -8%;
	}

	#character1 .bg-chara1 {
		height: 49.74%;
		top: 25%;
	}

	#character1 .bg-chara1-inner2 {
		background: url(../../images/character/luc_bg02.png) center right 46% no-repeat;
	}

	#character1 .chara-inner:before {
		background: url(../images/character/luc_03.png) top center no-repeat;
		width: 12.4375%;
		max-width: 199px;
		height: 329px;
		height: 408px;
		background-size: contain;
	}

	#character1 .class {
		width: 45.625%;
		max-width: 730px;
	}

	#character1 .serif img {
		width: 46%;
	}

	#character1 .chara-img {
		width: 36.9375%;
		max-width: 598px;
		padding-left: 7.5%;
	}

	#character1 .bg-chara-box::before {
		top: 24.7%;
	}

	#character1 .bg-chara-box::afte r {
		top: 74.5%;
	}

	#character1 .bar::before, #character1 .bar:after {
		background: #482aff;
	}


	#character2 {
		background: url(../../images/character/mam_bg.jpg) center center no-repeat;
		background-attachment: fixed;
		background-size: cover;
	}

	#character2 .bg-chara1-inner2 {
		background: url(../../images/character/mam_bg02.png) center center no-repeat;
	}

	#character2 .chara-inner:before {
		background: url(../images/character/mam_03.png) top center no-repeat;
		width: 10.9375%;
		max-width: 175px;
		height: 329px;
		background-size: contain;
	}

	#character2 .class {
		width: 40.4375%;
		max-width: 647px;
		bottom: -1%;
	}

	#character2 .chara-img {
		width: 27.8125%;
		max-width: 445px;
		padding-right: 11.1875%;
	}

	#character2 .bar::before, #character2 .bar:after {
		background: #ffbc11;
	}

	#character2 .name {
		right: 26%;
		bottom: 16%;
	}

	#character2 .bg-chara-box::before {
		top: 17.8%;
	}

	#character2 .bg-chara-box::after {
		top: 73%;
	}

	#character2 .chara-inner:after {
		bottom: 2%;
	}

	#character2 .bg-chara {
		top: 18%;
	}


	#character3 {
		background: url(../../images/character/lev_bg.jpg) center center no-repeat;
		background-attachment: fixed;
		background-size: cover;
	}

	#character3 .bg-chara1-inner2 {
		background: url(../../images/character/lev_bg02.png) center center no-repeat;
	}

	#character3 .chara-inner:before {
		background: url(../images/character/lev_03.png) top center no-repeat;
		width: 12.125%;
		max-width: 194px;
		height: 327px;
		background-size: contain;
		right: 13%;
	}

	#character3 .class {
		width: 47.75%;
		max-width: 764px;
		bottom: 3%;
	}

	#character3 .chara-img {
		width: 25%;
		max-width: 400px;
		padding-left: 15%;
	}

	#character3 .bar::before, #character3 .bar:after {
		background: #ff7e00;
	}

	#character4 {
		background: url(../../images/character/sat_bg.jpg) center center no-repeat;
		background-attachment: fixed;
		background-size: cover;
	}

	#character4 .bg-chara1-inner2 {
		background: url(../../images/character/sat_bg02.png) center center no-repeat;
	}

	#character4 .chara-inner:before {
		background: url(../images/character/sat_03.png) top center no-repeat;
		width: 11.25%;
		max-width: 180px;
		height: 326px;
		background-size: contain;
	}

	#character4 .class {
		width: 47.375%;
		max-width: 758px;
		bottom: -3%;
	}

	#character4 .chara-img {
		width: 19.125%;
		max-width: 306px;
		padding-right: 15.875%;
	}

	#character4 .bar::before, #character4 .bar:after {
		background: #21c38c;
	}

	#character5 {
		background: url(../../images/character/asm_bg.jpg) center center no-repeat;
		background-attachment: fixed;
		background-size: cover;
	}

	#character5 .bg-chara1-inner2 {
		background: url(../../images/character/asm_bg02.png) center center no-repeat;
	}

	#character5 .chara-inner:before {
		background: url(../images/character/asm_03.png) top center no-repeat;
		width: 11.9375%;
		max-width: 191px;
		height: 330px;
		background-size: contain;
	}

	#character5 .class {
		width: 37.25%;
		max-width: 596px;
		bottom: 0;
	}

	#character5 .chara-img {
		width: 28.875%;
		max-width: 462px;
		padding-left: 13.125%;
	}

	#character5 .bar::before, #character5 .bar:after {
		background: #ff007e;
	}

	#character5 .name {
		left: 16%;
		bottom: 9%;
	}

	#character6 {
		background: url(../../images/character/bee_bg.jpg) center center no-repeat;
		background-attachment: fixed;
		background-size: cover;
	}

	#character6 .bg-chara1-inner2 {
		background: url(../../images/character/bee_bg02.png) center center no-repeat;
	}

	#character6 .chara-inner:before {
		background: url(../images/character/bee_03.png) top center no-repeat;
		width: 11.1875%;
		max-width: 179px;
		height: 331px;
		background-size: contain;
	}

	#character6 .class {
		width: 48.3125%;
		max-width: 773px;
		bottom: -1.5%;
	}

	#character6 .chara-img {
		width: 20.25%;
		max-width: 324px;
		padding-right: 13.75%;
	}

	#character6 .bar::before, #character6 .bar:after {
		background: #ff0024;
	}

	#character6 .name {
		right: 24%;
		bottom: 16%;
	}

	#character7 {
		background: url(../../images/character/bel_bg.jpg) center center no-repeat;
		background-attachment: fixed;
		background-size: cover;
		padding-bottom: 15%;
	}

	#character7 .bg-chara1 {
		top: 11.5%;
		height: 45.862%;
	}

	#character7 .bg-chara1-inner2 {
		background: url(../../images/character/bel_bg02.png) center center no-repeat;
	}

	#character7 .chara-inner:before {
		background: url(../images/character/bel_03.png) top center no-repeat;
		width: 11.875%;
		max-width: 190px;
		height: 331px;
		background-size: contain;
	}

	#character7 .class {
		width: 43.6875%;
		max-width: 699px;
		bottom: -3%;
	}

	#character7 .chara-img {
		width: 26.4375%;
		max-width: 423px;
		padding-left: 13.5625%;
	}

	#character7 .bg-chara-box::before {
		top: 11.3%;
	}

	#character7 .bg-chara-box::after {
		top: 57.5%;
	}

	#character7 .bar {
		bottom: 29.5%;
	}

	#character7 .bar::before, #character7 .bar:after {
		background: #9000ff;
	}
}

#character1 .bg-chara1-inner {
	background: url(../../images/character/luc_06.png) top center no-repeat;
	background-size: contain;
}

#character2 .bg-chara1-inner {
	background: url(../../images/character/mam_06.png) top 10% left 24% no-repeat;
	background-size: contain;
}

#character3 .bg-chara1-inner {
	background: url(../../images/character/lev_06.png) top center no-repeat;
	background-size: contain;
}

#character4 .bg-chara1-inner {
	background: url(../../images/character/sat_06.png) top 10% left 30% no-repeat;
	background-size: contain;
}

#character5 .bg-chara1-inner {
	background: url(../../images/character/asm_06.png) top center no-repeat;
	background-size: contain;
}

#character6 .bg-chara1-inner {
	background: url(../../images/character/bee_06.png) top 10% left 30% no-repeat;
	background-size: contain;
}

#character7 .bg-chara1-inner {
	background: url(../../images/character/bel_06.png) top center no-repeat;
	background-size: contain;
}


@media screen and (min-width: 768px) and (max-width: 1200px) {
	.chara-box:nth-child(2n) .class {
		bottom: 11.5%;
	}

	#character7 .class {
		top: 71.5%;
	}
}

@media screen and (max-width: 767px) {
	#character {
		background: url(../../images/bgi/chara.png) center center;
		padding-bottom: 10%;
		overflow: hidden;
	}

	.chara-box {
		margin-bottom: 20%;
		position: relative;
	}

	.chara-box .serif {
		padding: 0 15px 105%;
		position: relative;
		overflow: hidden;
	}

	.chara-box:nth-child(2n) .serif {
		right: 100%;
	}

	.chara-box:nth-child(2n+1) .serif {
		left: 100%;
	}

	.chara-box .serif img {
		position: absolute;
		top: 0;
		bottom: 0;
		margin: auto;
		transition: all 0.8s ease-in-out;
		left: 0;
		right: 0;
	}

	.chara-box .bg-chara1 {
		overflow: hidden;
		padding-bottom: 105%;
		position: relative;
	}

	.chara-box .bg-chara1-inner {
		width: 100%;
		background-size: cover !important;
		background-position: center center !important;
		position: absolute;
		top: 0;
		height: 100%;
	}

	.chara-box:nth-child(2n+1) .bg-chara1-inner {
		left: 100%;
	}

	.chara-box:nth-child(2n) .bg-chara1-inner {
		right: 100%;
	}

	.chara-box .chara-inner {
		width: 100%;
		padding-bottom: 105%;
		position: relative;
		overflow: hidden;
	}

	.chara-box .sp-chara-inner {
		background: #000 url(../../images/character/dots_bg.png) center center;
		padding: 30px 15px;
		position: absolute;
		text-align: center;
		top: 0;
		width: 100%;
		height: 100%;
	}

	.chara-box:nth-child(2n+1) .sp-chara-inner {
		right: 100%;
	}

	.chara-box:nth-child(2n) .sp-chara-inner {
		left: 100%;
	}

	.chara-box .sp-chara-inner:before {
		content: "";
		display: block;
		height: 95.5%;
		width: 100%;
		position: absolute;
		left: 0;
		top: 2%;
		border-bottom: #482aff 2px solid;
		border-top: #482aff 2px solid;
	}

	.chara-box .sp-chara-inner:after {
		content: "";
		height: 403px;
		width: 40%;
		max-width: 405px;
		position: absolute;
		background: url(../../images/character/gre_img.png) top left no-repeat;
		background-size: 110%;
		top: 0;
		right: 0;
		z-index: 2;
		opacity: .7;

	}

	.chara-box .class {
		margin: 0 auto 20px;
		position: absolute;
		bottom: 60%;
		left: 0;
		right: 0;
		margin: auto;
	}

	.chara-box .class img {
		position: relative;
		z-index: 3;
	}

	.chara-box .name {
		width: 92.1333333333333%;
		max-width: 691px;
		position: absolute;
		top: 55%;
		left: 0;
		right: 0;
		margin: auto;
	}

	#character1 .serif {
		background: #482aff url(../../images/character/dots_bg.png) center center;
	}

	#character1 .sp-chara-inner {
		padding: 21.2666666666667% 0;
	}

	#character1 .class {
		max-width: 495px;
		bottom: 48%;
	}

	#character2 .serif {
		background: #ffbc11 url(../../images/character/dots_bg.png) center center;
	}

	#character2 .sp-chara-inner {
		padding: 20.8666666666667% 0;
	}

	#character2 .class {
		max-width: 495px;
		bottom: 48%;
	}

	#character2 .sp-chara-inner::before {
		border-color: #ffbc11;
	}

	#character3 .serif {
		background: #ff7e00 url(../../images/character/dots_bg.png) center center;
	}

	#character3 .sp-chara-inner {
		padding: 20.1333333333333% 0;
	}

	#character3 .class {
		max-width: 495px;
		bottom: 45%;
	}

	#character3 .sp-chara-inner::before {
		border-color: #ff7e00;
	}

	#character4 .serif {
		background: #21c38c url(../../images/character/dots_bg.png) center center;
	}

	#character4 .sp-chara-inner {
		padding: 20.8% 0;
	}

	#character4 .class {
		max-width: 495px;
		bottom: 48%
	}

	#character4 .sp-chara-inner::before {
		border-color: #21c38c;
	}

	#character5 .serif {
		background: #f4288d url(../../images/character/dots_bg.png) center center;
	}

	#character5 .sp-chara-inner {
		padding: 20.8666666666667% 0;
	}

	#character5 .class {
		max-width: 495px;
		bottom: 48%
	}

	#character5 .sp-chara-inner::before {
		border-color: #ff007e;
	}

	#character6 .serif {
		background: #ea2d2d url(../../images/character/dots_bg.png) center center;
	}

	#character6 .sp-chara-inner {
		padding: 20.6666666666667% 0;
	}

	#character6 .class {
		max-width: 495px;
		bottom: 48%
	}

	#character6 .sp-chara-inner::before {
		border-color: #ff0024;
	}

	#character7 .serif {
		background: #9000ff url(../../images/character/dots_bg.png) center center;
	}

	#character7 .sp-chara-inner {
		padding: 20.6% 0;
	}

	#character7 .class {
		max-width: 495px;
		bottom: 45%
	}

	#character7 .sp-chara-inner::before {
		border-color: #9000ff;
	}
}

/****************************
			movie-area
*****************************/
.movie {
	width: 100%;
	position: relative;
	margin: -10% 0 -10%;
	padding: 6% 0 16%;
	z-index: 4;
	overflow-x: hidden;
}

.movie .bg-movie {
	z-index: 1;
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
	background: url(../../images/bgi/movie.png) center center;
	-webkit-clip-path: polygon(76% 0, 100% 4%, 100% 90%, 23% 98%, 0 89%, 0 6%);
	clip-path: polygon(76% 0, 100% 4%, 100% 90%, 23% 98%, 0 89%, 0 6%);
}

.movie:before, .movie:after {
	content: "";
	position: absolute;
	display: block;
	bottom: 5%;
	height: 30%;
}

.movie:before {
	width: 40%;
	left: -9%;
	background: #a6eedf;
	transform: rotate(-10deg);
}

.movie:after {
	background: #7d35d7;
	width: 99%;
	left: 26%;
	transform: rotate(6deg);
}

@media screen and (max-width: 767px) {
	.movie {
		margin: -10% 0 -15%;
	}
}

/****************************
			banner
*****************************/
.movie .banner-area {
	z-index: 1;
	position: relative;
	margin-bottom: 10%;
}

.movie .banner-area:before, .movie .banner-area:after {
	content: "";
	position: absolute;
	display: block;
	z-index: 0;
	background: #fff;
	width: 120%;
	height: 100%;
	left: -10%;
	transform: rotate(-1deg);
}

.movie .banner-area:before {
	top: -3%;
	height: 106%;
	background: #a6eedf;
}

.movie .banner-area:after {
	top: -0.5%;
	background: #f7fc1b;
	height: 101%;
}

.movie .banner-area-inner {
	z-index: 5;
	background: url(../../images/bgi/app_bg.jpg) center center;
	width: 100%;
	height: 100%;
	position: relative;
	/* padding: 4% 0; */
	text-align: center;
	margin-top: 4%;
}
.movie .app_bnr {
	margin: 2rem 0;
}
.movie .animated .store-area>ul {
	animation: fadeInStoreBtn 0.2s ease 0.5s 1 normal forwards;
}
@keyframes fadeInStoreBtn {
	0% {
		opacity: 0
	}

	100% {
		opacity: 1
	}
}

/****************************
			movie
*****************************/
.movie .chapter-ttl {
	margin-bottom: 2%;
	z-index: 1;
	height: 328px;
}

.movie .chapter-ttl-img {
	width: 3620px;
	height: 148px;
}

.movie .chapter-ttl .chapter-ttl-img-c {
	background: url(../images/movie-ttl.png) center top no-repeat;
	width: 1878px;
	height: 148px;
	display: inline-block;
}

.movie .movie-area {
	z-index: 1;
	position: relative;
}

.movie .movie-area .content-inner {
	max-width: 100%;
	width: 100%;
}

@media screen and (max-width: 767px) {
	.movie .chapter-ttl {
		height: 137px;
	}

	.movie .chapter-ttl-img {
		width: 1920px;
		height: 74px;
	}

	.movie .chapter-ttl .chapter-ttl-img-c {
		width: 1878px;
		height: 148px;
		background-size: contain;
	}
}

.slick-slide {
	max-width: 1000px;
}

.slider li {
	margin: 0 20px;
}

.slick-slide img {
	margin: auto;
}

@media screen and (max-width: 1000px) {
	.movie .movie-area .content-inner {
		margin: 40px 0 90px;
	}

	.slider li {
		margin: 0;
		padding: 0 20px;
	}
}

/****************************
			footer-area
*****************************/
.content-last {
	position: relative;
	background: url(../../images/bgi/footer.png) center bottom -1px no-repeat;
	background-size: cover;
	background-attachment: scroll;
	width: 100%;
	padding-top: 10%;
	z-index: 4;
}

.content-last-cover {
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	position: absolute;
	background: url(../../images/bgi/footer-cover.png) center bottom -1px no-repeat;
	background-attachment: fixed;
	background-size: cover;
}

@media screen and (max-width: 767px) {
	.content-last {
		padding-top: 15%;
	}
}

/****************************
			facebook
*****************************/
.fb-area {
	max-width: 521px;
	text-align: center;
}

.facebook {
	background: #e5e5e5;
	padding: 25px;
}

.facebook iframe {
	max-width: 100%;
}

.fb-btn-area {
	z-index: 2;
	position: relative;
	background: #aaa;
	padding: 15px 3%;
	text-align: center;
}

/****************************
			twitter
*****************************/
.tw-area {
	max-width: 521px;
	text-align: center;
}

.twitter iframe {
	max-width: 100%;
}

.tw-btn-area {
	max-width: 521px;
	z-index: 2;
	position: relative;
	background: #747575;
	padding: 15px 3%;
	text-align: center;
}

/****************************
			instagram
*****************************/
.ig-area {
	max-width: 521px;
	text-align: center;
}

.instagram iframe {
	max-width: 100%;
}

.ig-btn-area {
	max-width: 521px;
	z-index: 2;
	position: relative;
	background: #000;
	padding: 15px 3%;
	text-align: center;
}

/****************************
			footer
*****************************/
.f-logo-area {
	text-align: center;
}

.f-logo-area>img {
	display: block;
	width: auto;
	margin: auto;
}

.footer {
	color: #fff;
	z-index: 2;
	position: relative;
}

.f-logo-area>img {
	margin-top: 40px;
}

.f-chara {
	max-width: 1113px;
	padding-top: 40px;
	position: relative;
	text-align: center;
	margin: auto;
}

.f-chara img {
	margin-top: 0;
	position: absolute;
	bottom: 0;
}

.f-chara img:nth-child(1) {
	width: 27.94249775%;
	max-width: 311px;
	position: relative;
	display: block;
	margin: auto;
	box-sizing: content-box;
	padding-right: 3%;
}

.f-chara img:nth-child(2) {
	left: 24.1%;
	width: 20.9344115%;
	max-width: 233px;
	z-index: 1;
}

.f-chara img:nth-child(3) {
	left: 54.5%;
	width: 18.59838275%;
	max-width: 207px;
	bottom: -.9%;
	z-index: 2;
}

.f-chara img:nth-child(4) {
	left: 13.8%;
	width: 14.19586703%;
	max-width: 158px;
	bottom: -.9%;
}

.f-chara img:nth-child(5) {
	left: 65.68%;
	width: 21.56334232%;
	max-width: 240px;
	bottom: -.4%;
	z-index: 1;
}

.f-chara img:nth-child(6) {
	left: 0;
	width: 15.3638814%;
	max-width: 171px;
	bottom: -.5%;
}

.f-chara img:nth-child(7) {
	right: 0;
	width: 19.67654987%;
	max-width: 219px;
	bottom: -.4%;
}

.f-nav ul {
	display: flex;
	background: #000;
	padding: 10px;
	justify-content: center;
}

.f-nav ul li {
	padding: 0 30px;
	position: relative;
}

.f-nav ul li a {
	color: #fff;
	text-decoration: none;
}

.f-sns-btn {
	display: flex;
	justify-content: center;
	margin-top: 30px;
	margin-bottom: 20px;
}

.f-sns-btn a {
	padding: 0 20px;
}

.lang-area {
	margin-bottom: 60px;
}

.lang-area ul {
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
}

.lang-area ul li:not(:first-child) ::before {
	content: "／";
	margin: 0 0.2rem;
	color: #fff;
}

.lang-area ul li a {
	color: #e9ff00;
	text-decoration: none;
}

.copyright {
	font-size: 12px;
	padding-bottom: 15px;
	text-align: center;
}

.copyright .inquiries-regarding-merchandise {
	margin-bottom: 1.5%;
}

.copyright .inquiries-regarding-merchandise a {
	color: #FFFFFF;
	text-decoration: underline;
}

@media screen and (max-width: 767px) {
	.lang-area {
		margin-bottom: 100px;
	}
}

/*===============================================
	PC CSS
===============================================*/
@media screen and (min-width: 768px) {
	.f-nav ul li:after {
		position: absolute;
		content: " ";
		right: 0;
		top: 0;
		bottom: 0;
		margin: auto;
		width: 1px;
		height: 15px;
		background: #bbb;
	}

	.f-nav ul li:last-child:after {
		position: absolute;
		content: " ";
		right: 0;
		top: 0;
		bottom: 0;
		margin: auto;
		width: 1px;
		height: 15px;
		background: #000;
	}
}

/*===============================================
	SP CSS
===============================================*/
@media screen and (max-width: 767px) {
	.f-nav ul {
		display: block;
		text-align: center;
		padding: 0 20px;
	}

	.f-nav ul li:not(:last-child) {
		border-bottom: 1px solid #fff;
	}

	.f-nav ul li {
		padding: 15px;
	}
	.copyright {
		font-size: 10px;
	}

	.copyright .inquiries-regarding-merchandise {
		margin-bottom: 10%;
	}

	.copyright p:nth-of-type(3) {
		margin-bottom: 40%;
	}
}