@charset "utf-8";
html, body, div, span, applet, object, iframe,h1, h2, h3, h4, h5, h6, p, blockquote, pre,a, abbr, acronym, address, big, cite, code,del, dfn, em, img, ins, kbd, q, s, samp,small, strike, strong, sub, sup, tt, var,b, u, i, center,dl, dt, dd, ol, ul, li,fieldset, form, label, legend,table, caption, tbody, tfoot, thead, tr, th, td,article, aside, canvas, details, embed,figure, figcaption, footer, header, hgroup,menu, nav, output, ruby, section, summary,time, mark, audio, video {
margin: 0;padding: 0;border: 0;font-style:normal;font-weight: normal;font-size: 100%;vertical-align: baseline;}
html {font-size: 62.5%;}
body {font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", "Segoe UI", 'Hiragino Sans', 'Hiragino Kaku Gothic ProN', '游ゴシック Medium', Meiryo, sans-serif;
color: #fff;letter-spacing: .13em;font-feature-settings: "palt" 1;font-kerning: auto;-webkit-font-smoothing: antialiased;background: #000;min-width: 1200px;}
ol ,ul {list-style: none;}
a:link ,a:visited {color: #fff;text-decoration: none;}
img {width: 100%;vertical-align: bottom;}
.mask {
	position: absolute;top: -25%;left: -25%;
	width: 150%;height: 150%;
	z-index: 999;
	background: url(../img/mask.png) center;
	pointer-events: none;
	animation: rumble .2s linear infinite;
	opacity: .33;
}
.mask_obi {
	position: absolute;top: -25%;left: -25%;
	width: 150%;height: 150%;
	z-index: 999;
	background: #000;
	opacity: 0.6;
}
.mask_obi::before {
	content: "";
	position: absolute;top: -25%;left: -25%;
	width: 150%;height: 150%;
	z-index: 999;
	background: url(../img/mask.png) center;
	pointer-events: none;
	animation: rumble .2s linear infinite;
	opacity: .33;
}
@keyframes rumble {
	0% { transform:translate(0, 0) rotate(0)}
	16% { transform:translate(25px, -50px) rotate(-5deg)}
	33% { transform:translate(50px, 15px) rotate(2deg)}
	49% { transform:translate(7px, 5px) rotate(1deg)}
	66% { transform:translate(-25px, -40px) rotate(7deg)}
	83% { transform:translate(-50px, 25px) rotate(-3deg)}
	100% { transform:translate(5px, 7px) rotate(-8deg)}
}

header {
	height: 100vh;position: relative;overflow: hidden;
	background: url(../img/back/top@2x.jpg) center 60px;
	background-size: cover;
	--time-anim: 3s;
	--delay-anim: 1s;
	--gap-horizontal: 10px;
	--gap-vertical: 5px;
	--blend-mode-1: none;
	--blend-mode-2: none;
	--blend-mode-3: none;
	--blend-mode-4: none;
	--blend-mode-5: overlay;
	--blend-color-1: transparent;
	--blend-color-2: transparent;
	--blend-color-3: transparent;
	--blend-color-4: transparent;
	--blend-color-5: #312D2D;
}
header nav {
	background: url(../img/back/header_back@2x.png) #000 no-repeat;
	background-size: 100%;height: 60px;margin: 0 auto;position: relative;z-index: 1000;
}
header .back {background: url(../img/back/top@2x.jpg) no-repeat 50% 80%;}
header.is-fixed nav {position: fixed;z-index: 10000;width: 100%;}
header nav .wrap {width: 1200px;margin: 0 auto;position: relative;}
header h1 {width: 146px;position: absolute;top: 8px;left: 0;}
header nav ul {
	height: 34px;width: 1200px;text-align: center;padding: 13px 0 0;
}
header nav ul li {margin: 0 0 0 30px;display: inline-block;}
header nav ul li:hover img {opacity: .7;transition: opacity .2s;}
header nav ul li img {width: auto;height: 33px;}
header label {display: none;}
header input {display: none;}
header a.btn {
	width: 218px;display: inline-block;
	position: fixed;bottom: 0;right: 0;
	z-index: 10000;
}
header a.btn::before {
	content: "";width: 137px;height: 213px;display: block;
	position: absolute;bottom: -33px;left: 4px;
	background: url(../img/icon/float_btn2@2x.png) no-repeat;
	background-size: 100%;
	z-index: 1;
}
header a.btn:hover:before {animation: jump .4s ease alternate;}
@keyframes jump{
	0% {transform: translateY(0px);}
	25% {transform: translateY(-10px);}
	50% {transform: translateY(0px);}
	75% {transform: translateY(-1px);}
	100% {transform: translateY(0px);}
}
header ul.shop {
	position: absolute;top: 10px;right: 0;padding: 0;
	width: auto;display: inline-block;
}
header ul.shop li {margin: 0 20px 0 0;}
header ul.shop li.steam {transform: translateY(-8px);margin: 0;}
header ul.shop li.switch img {height: 39px;}
header ul.shop li.steam img {height: 23px;}
header .icon {
	width: 643px;text-align: center;
	position: absolute;left: -100%;right: -100%;margin: 0 auto;
	bottom: 20px;z-index: 10;
}
header .icon img.coming {width: 490px;display: inline-block;margin: 5px 0 0;}
header .lead {
	background: url(../img/icon/lead.png) no-repeat;background-size: 100%;
	width: 75px;height: 316px;position: absolute;right: 30px;top: 120px;z-index: 10;
}
.wrap {width: 1200px;margin: 0 auto;position: relative;}
section {position: relative;z-index: 100;}
section .box {position: relative;width: 960px;margin: 0 auto;z-index: 10;}
section .box2 {position: relative;width: 690px;margin: 0 auto;}

section p {
	font-size: 1.6em;line-height: 2.375;
	text-shadow: black 2px 0px, black -2px 0px,
	black 0px -2px, black 0px 2px,
	black 2px 2px , black -2px 2px,
	black 2px -2px, black -2px -2px,
	black 1px 2px,  black -1px 2px,
	black 1px -2px, black -1px -2px,
	black 2px 1px,  black -2px 1px,
	black 2px -1px, black -2px -1px;
}
/*LOADING*/
#loading {
	position:fixed;left:0;top:0;right:0;bottom:0;
	z-index:10002;background:#000;
}
#loading p {
	width:643px;height: 178px;
	max-width:60%;
	background:url(../img/icon/logo_title@2x.png) no-repeat center center / contain;
	position:absolute;
	left:50%;
	top:50%;
	transform:translate(-50%,-50%);
	opacity:0;
	transition:all 0.5s ease;
}
#loading.su p {
	opacity:1;
}

section.about {
	overflow: hidden;padding: 0 0 100px;z-index: 1000;
	background: url(../img/back/about_back@2x.png) no-repeat top;background-size: 100%;
}
section.about::before {
	content: "";width: 100vw;height: 35vw;
	background: url(../img/back/about_back1@2x.png) center no-repeat;
	background-size: 100%;
	position: absolute;top: 15px;left: 0;
}
section.about .news {background: rgba(131,103,149,.6);position: relative;z-index: 10;}
section.about .news dl {font-size: 1.6em;padding: 0 0 0 168px;position: relative;height: 48px;}
section.about .news dl::before {
	content: "";width: 99px;height: 34px;
	background: url(../img/title/news@2x.png) no-repeat;background-size: 100%;
	position: absolute;left: 7px;top: 7px;
}
section.about .news dl div {overflow: hidden;}
section.about .news dl dt ,
section.about .news dl dd {float: left;line-height: 1;padding: 1em;}
section.about .news dl dd a {text-decoration: underline;}
section.about h1 {
	color: rgba(0,0,0,0);height: 67px;
	position: relative;padding: 93px 0 30px;margin: 0 auto;z-index:5000;
}
section.about h1::before {
	content: "";width: 114px;height: 67px;position: absolute;top:93px;left: -100%;right: -100%;
	background: url(../img/title/about@2x.png) no-repeat;
	background-size: 100%;margin: 0 auto;
}
section.about .movie iframe {
	width: 960px;height: 540px;
	box-sizing: border-box;border: solid 20px #212121;
	box-shadow: -114px 33px 100px -10px #000;
}
section.about .bg-movie {
	width: 130%;height: 45vw;overflow: hidden;
	position: absolute;bottom: 20vw;left: -15%;z-index: 0;
	transform: rotate(-20deg);
}
.bg-moviein {
	position: relative;
	width: 100%;
	padding-top:56.25%;
	transform:translateY(-20%);
}
.bg-movie video {
	position: absolute;
	left:0;
	top:0;
	height: 100%;
	width:100%;
}
section.about .lead {
	width: 813px;height: 152px;
	background: url(../img/title/about_lead@2x.png) no-repeat;
	background-size: 100%;
	display: block;margin: 40px auto;
}
section.about p {width: 830px;margin: 0 auto;}

section.story {
	margin: -48vw 0 -29vw;padding: 48vw 0 27vw;
	overflow: hidden;
	background: url(../img/back/story_back@2x.png) no-repeat;background-size: 100%;
	background-position: 0 800px;
}
section.story h1 {
	color: rgba(0,0,0,0);width: 110px;height: 67px;right: 7.5vw;top: 48vw;
	position: absolute;padding: 0;margin: 0;
}
section.story h1::before {
	content: "";width: 110px;height: 67px;position: static;
	background: url(../img/icon/story@2x.png) no-repeat;
	background-size: 100%;display: block;
}
section.story::before {
	content: "";width: 100%;height: 90vw;
	position: absolute;top: 0;left: 0;
	background: url(../img/back/story_back1@2x.png) no-repeat top right;background-size: 88%;
}
section.story::after {
	content: "";width: 130%;height: 720px;overflow: hidden;
	position: absolute;top: 48vw;left: -15%;z-index: -10;
	transform: rotate(20deg);
	background: rgba(0,119,109,.4);
}
section.story .circle {position: relative;
	transform:perspective(350px) rotateY(12deg);
	transform-origin: center;width: 1200px;margin: 0 auto;
}
section.story .circle::before {
	content: "";width: 400px;height: 400px;display: inline-block;position: absolute;top: 0;left: 50px;
	background: url(../img/back/circle01_01.png) no-repeat;background-size: 100%;
	z-index: -1;animation: spin 20s infinite linear;
	transform-origin: center;
}
@-webkit-keyframes spin {
	0% {
		transform: rotate(0);
		transform-origin: center;
	}
	100% {
		transform: rotate(360deg);
		transform-origin: center;
	}
}
section.story input {display: none}
section.story img.lead {width: 595px;}
section.story label {width: 595px;margin: 50px 0;display: block;position: relative;cursor: pointer;}
section.story label::before {
	content: "";width: 10px;height: 19px;pointer-events: none;
	background: url(../img/icon/arrow@2x.png) no-repeat;
	background-size: 100%;
	position: absolute;top: 20px;left: 225px;
}
section.story label:hover::before {
	transform: rotate3d(0, 1, 0, 360deg);
	transition: transform .4s;
}
section.story .storyBox {
	display:none;
}
section.story p {margin: 0 0 20px;}

section.add {
	overflow: hidden;padding: 17% 0 35%;margin: -17% 0 0;
	background: url(../img/back/add_back@2x.png) no-repeat center;background-size: 100%;
}
section.add .circle {position: relative;
	transform:perspective(450px) rotateY(168deg) rotateX(2deg);
	transform-origin: center;width: 1200px;margin: 0 auto;
}
section.add .circle::before {
	content: "";width: 520px;height: 520px;display: inline-block;position: absolute;top: 0;
	background: url(../img/back/circle02_01.png) no-repeat;background-size: 100%;
	z-index: -1;animation: spin 20s infinite linear;
	transform-origin: center;
}
section.add::after {
	content: "";width: 130%;height: 720px;overflow: hidden;
	position: absolute;top: 50%;left: -15%;z-index: -101;
	transform: rotate(20deg);
	background: rgba(222,0,255,.2);
}
section.add h1 {
	color: rgba(0,0,0,0);width: 312px;height: 67px;left: 72px;top: 0;
	position: relative;padding: 0;margin: 0;
}
section.add h1::before {
	content: "";width: 312px;height: 67px;position: static;
	background: url(../img/title/add@2x.png) no-repeat;
	background-size: 100%;display: block;
}
section.add img.lead {
	width: 502px;display: block;margin: 60px 72px;
}
section.add ul {
	width: 980px;
	margin: 0 auto;overflow: hidden;position: relative;z-index: 1000;
}
section.add ul li {
	width: 47%;float: left;position: relative;overflow: hidden;
	box-sizing: border-box;border: solid 10px #212121;
}
section.add ul li::after {
	content: "";width: 47px;height: 47px;
	background: url(../img/icon/zoom@2x.png) center #212121 no-repeat;
	background-size: 50%;
	position: absolute;bottom: -10px;right: -10px;
}
section.add ul li a {display: block;cursor: pointer;background: #000;}
section.add ul li a:hover img {
	opacity: .7;transform: scale3d(1.02,1.02,1.02);
	transition: all .2s;
}
section.add ul li img {vertical-align: bottom;transition: all .2s;}
section.add ul li:last-child {
	margin: 10vw 0 0 6%;
}
section.add ol {overflow: hidden;margin: -50px auto 0;max-width: 1090px;}
section.add ol li {
	width: 45%;float: left;margin: 0;padding: 0 0 130px;
	height: 20em;
}
section.add ol li:nth-of-type(2) {
	margin: 0 5% 0 0;float: right;padding: 130px 0 0;
}
section.add ol li:nth-of-type(3) {
	margin: 0 0 0 5%;float: left;padding: 0 0 110px;
}
section.add ol li:nth-of-type(4) {
	margin: 0 0 0 5%;float: right;padding: 60px 0 0;
}
section.add ol li img {
	height: 54px;width: auto;
}
section.add ol li p {
	padding: 0 0 0 110px;margin: 3px 0 0;
	letter-spacing: .28em;line-height: 2;text-shadow: none;
}
section.add ol li:nth-of-type(4) p {margin: 15px 0 0;}
section.add .bg-movie {
	width: 130%;height: 45vw;overflow: hidden;
	position: absolute;top: 17%;left: -15%;z-index: -100;
	transform: rotate(-20deg);
}

section.character h1 {
	color: rgba(0,0,0,0);width: 245px;height: 68px;top: 0;
	position: relative;padding: 0;margin: 0 auto 90px;z-index: 1001;
}
section.character h1::before {
	content: "";width: 245px;height: 68px;position: static;
	background: url(../img/title/character@2x.png) no-repeat;
	background-size: 100%;display: block;
}

.modal-overlay {
	z-index: 10001;position: fixed;top: 0;left: 0;
	display: none;width: 100%;height: 120%;
	background: rgba(0,0,0,.9);
}
.modal-content {
	z-index: 10002;position: fixed;
	display: none;max-width: 960px;max-height: 560px;min-height: 300px;
	border: solid 10px #212121;margin: 0 0 124px;
}
.modal-content.select {
	display: none;width: 960px;max-width: none;max-height: none;min-height: auto;
	background: rgb(114,233,255);border :none;
	background: linear-gradient(88deg, rgba(114,233,255,1) 0%, rgba(245,100,209,1) 100%);
	box-sizing: border-box;text-align: center;
	margin: 0 0 124px;padding: 10px;
}
.modal-content.select .language {margin: 0 0 30px;}
.modal-content.select .language::before {
	content: "";width: 354px;height: 41px;position: static;
	background: url(../img/title/select@2x.png) no-repeat center center;
	background-size: 100%;display: block;margin: auto;
}
.modal-content.select img.logo {width: 633px;display: inline-block;margin: 66px 0 50px;}
.modal-content.select .b_in {background: #000;}
.modal-content.select .specBox {padding: 0 98px 65px;}
.modal-content.select .specBox a.link {
	margin: 20px 0 0;
}
.modal-content.chara {
	z-index: 10002;position: fixed;top: 0;bottom: 0;left: 0;right: 0;overflow-y: scroll;overflow-x: auto;
	display: none;min-width: auto;max-height: none;max-width: none;width: auto;
	border: none;text-align: center;margin: 0;
}
.modal-content.chara .b_in {
	position: relative;left: 0;top: 0;
	width: 100%;height: 100%;min-width: 1200px;min-height: 900px;max-height: 900px;
	max-width: 1200px;padding: 0 0 124px;margin: 0 auto;
}
.modal-content button.modal-cl {
	background: url(../img/icon/close@2x.png) no-repeat center;background-size: 194px;
	border:none;box-shadow: none;cursor: pointer;
	width: 194px;height: 54px;padding: 54px 0 0;box-sizing: border-box;
	position: absolute;right: -100%;left: -100%;bottom: -124px;margin: 0 auto;
}
.modal-content.chara button.modal-cl {bottom: 35px;}
@-webkit-keyframes glitch {
	0% {
		-moz-transform: skewX(0deg);
		-ms-transform: skewX(0deg);
		-webkit-transform: skewX(0deg);
		transform: skewX(0deg);
	}
	5% {
		-moz-transform: skewX(.3deg);
		-ms-transform: skewX(.3deg);
		-webkit-transform: skewX(.3deg);
		transform: skewX(.3deg);
		opacity: 0.75;
	}
	10% {
		-moz-transform: skewX(0deg);
		-ms-transform: skewX(0deg);
		-webkit-transform: skewX(0deg);
		transform: skewX(0deg);
		opacity: 1;
	}
	15% {
		-moz-transform: skewX(-.5deg);
		-ms-transform: skewX(-.5deg);
		-webkit-transform: skewX(-.5deg);
		transform: skewX(-.5deg);
		opacity: 0.75;
	}
	20% {
		-moz-transform: skewX(0deg);
		-ms-transform: skewX(0deg);
		-webkit-transform: skewX(0deg);
		transform: skewX(0deg);
		opacity: 1;
	}
	45% {
		-moz-transform: skewX(.4deg);
		-ms-transform: skewX(.4deg);
		-webkit-transform: skewX(.4deg);
		transform: skewX(.4deg);
		opacity: 0.75;
	}
	50% {
		-moz-transform: skewX(0deg);
		-ms-transform: skewX(0deg);
		-webkit-transform: skewX(0deg);
		transform: skewX(0deg);
		opacity: 1;
	}
	55% {
		-moz-transform: skewX(0deg);
		-ms-transform: skewX(0deg);
		-webkit-transform: skewX(0deg);
		transform: skewX(0deg);
		opacity: 0.75;
	}
	60% {
		-moz-transform: skewX(0deg);
		-ms-transform: skewX(0deg);
		-webkit-transform: skewX(0deg);
		transform: skewX(0deg);
		opacity: 1;
	}
	75% {
		-moz-transform: skewX(.3deg);
		-ms-transform: skewX(.3deg);
		-webkit-transform: skewX(.3deg);
		transform: skewX(.3deg);
	}
	80% {
		-moz-transform: skewX(0deg);
		-ms-transform: skewX(0deg);
		-webkit-transform: skewX(0deg);
		transform: skewX(0deg);
	}
	85% {
		-moz-transform: skewX(-.5deg);
		-ms-transform: skewX(-.5deg);
		-webkit-transform: skewX(-.5deg);
		transform: skewX(-.5deg);
		opacity: 0.75;
	}
	90% {
		-moz-transform: skewX(0deg);
		-ms-transform: skewX(0deg);
		-webkit-transform: skewX(0deg);
		transform: skewX(0deg);
		opacity: 1;
	}
	100% {
		-moz-transform: skewX(0deg);
		-ms-transform: skewX(0deg);
		-webkit-transform: skewX(0deg);
		transform: skewX(0deg);
	}
}

.modal-content button.modal-cl:hover {
	-webkit-animation: glitch .5s infinite;
}
.modal-content button.modal-cl span.b_in {padding: 0;}
.modal-content button.modal-cl span:last-of-type {
	display: inline-block;margin: 10px 0 0;padding: 0;
	font-weight: 700;
}
.modal-content button.modal-cl:focus {border: 0;outline: 0;}
.thumb span.zoom {
	position: absolute;bottom: 4px;right: 4px;z-index: 0;
	width: 24px;height: 24px;pointer-events: none;
	background: url(../img/icon/zoom@2x.png) no-repeat;background-size: 100%;
}
.thumb:hover img {-webkit-animation: glitch .5s infinite;}
.thumb {overflow: hidden;}

section.character {
	margin: -28% 0 0;z-index: 101;
	--time-anim: 1.2s;
	--delay-anim: .2s;
	--gap-horizontal: 10px;
	--gap-vertical: 5px;
	--blend-mode-1: none;
	--blend-mode-2: none;
	--blend-mode-3: none;
	--blend-mode-4: none;
	--blend-mode-5: overlay;
	--blend-color-1: transparent;
	--blend-color-2: transparent;
	--blend-color-3: transparent;
	--blend-color-4: transparent;
	--blend-color-5: #312D2D;
}
section.character article {
	position: relative;height: 880px;
	overflow: hidden;outline : none;
}
section.character .slick {
	z-index: 1000;width: 1200px;margin: 0 auto;
}
section.character article img.mainImg ,
.modal-content.chara img.mainImg {
	max-width: 246px;margin: auto;z-index: 13;
}
.modal-content.chara img.mainImg {
	width: auto;max-height: 760px;
	display: inline-block;
}
section.character article img.nameImg ,
.modal-content.chara img.nameImg {
	width: 150px;margin: 0;z-index: 12;
	position: absolute;top: 120px;left: 250px;
}
.modal-content.chara a.arrow {
	width: 70px;height: 70px;background: #b55cad;cursor: pointer;
	display: block;position: absolute;top: 50%;margin: -35px 0 0;
	left: 0;z-index: 10;
}
.modal-content.chara a.arrow.next {right: 0;left: auto;}
@media all and (max-width:1200px) {
	.modal-content.chara a.arrow.next {right: auto;left: 1200px;}
}
.modal-content.chara a.arrow::before {
	content: "";width: 21px;height: 10px;display: block;
	background: url(../img/icon/arrow2@2x.png) no-repeat;
	background-size: 100%;pointer-events: none;
	position: relative;top: 30px;left: 22px;
}
.modal-content.chara a.arrow.next::before {
	transform: rotate3d(0, 1, 0, 180deg);;left: 27px;
}
.modal-content.chara a.arrow:hover::before {
	transform: rotate3d(1, 0, 0, 360deg);
	transition: transform .4s;
}
.modal-content.chara a.arrow.next:hover::before {
	transform: rotate3d(0, 1, 10, 180deg);
	transition: transform .4s;
}
.modal-content.chara p {
	width: 24em;font-size: 1.6em;line-height: 2;text-align: left;
	position: absolute;top: 500px;right: 30px;z-index: 14;
}
.modal-content.chara img.img {
	max-width: 340px;
	width: 28vw;border: solid 10px #212121;
	box-sizing: border-box;z-index: 11;
	position: absolute;top: 475px;left: 120px;
}
section.character article a.modal-op {
	cursor: pointer;display: block;height: 100%;width: 100%;
	outline : none;
}
section.character article img.check {
	width: 168px;margin: 0;display: block;cursor: pointer;
	position: absolute;bottom: 190px;left: 280px;
}
section.character article a.modal-op:hover img.check {
	opacity: .8;transition: opacity .2s;
}
.modal-content.chara .imgBox {
	width: 723px;height: 800px;position: absolute;top: 56px;left: 0;
	background: url(../img/character/miki2@2x.png) no-repeat left top;
	background-size: 723px 800px;
}
#character2.modal-content.chara .imgBox {
	width: 756px;height: 815px;top: 41px;
	background: url(../img/character/ahactna2@2x.png) no-repeat left top;
	background-size: 756px 815px;
}
#character3.modal-content.chara .imgBox {
	width: 803px;height: 793px;top: 63px;
	background: url(../img/character/orga2@2x.png) no-repeat left top;
	background-size: 803px 793px;
}
#character4.modal-content.chara .imgBox {
	width: 760px;height: 805px;top: 51px;
	background: url(../img/character/chloe2@2x.png) no-repeat left top;
	background-size: 760px 805px;
}
#character5.modal-content.chara .imgBox {
	width: 820px;height: 832px;top: 24px;
	background: url(../img/character/itoka2@2x.png) no-repeat left top;
	background-size: 820px 832px;
}
section.character article:nth-of-type(2) img.mainImg ,
#character2.modal-content.chara img.mainImg {max-width: 276px;}
section.character article:nth-of-type(2) img.nameImg ,
#character2.modal-content.chara img.nameImg {width: 221px;left: 220px;}
section.character article:nth-of-type(3) img.mainImg ,
#character3.modal-content.chara img.mainImg {max-width: 345px;}
section.character article:nth-of-type(3) img.nameImg ,
#character3.modal-content.chara img.nameImg {width: 152px;left: 245px;}
section.character article:nth-of-type(4) img.mainImg ,
#character4.modal-content.chara img.mainImg {max-width: 261px;}
section.character article:nth-of-type(4) img.nameImg ,
#character4.modal-content.chara img.nameImg {width: 151px;left: 246px;}
section.character article:nth-of-type(5) img.mainImg ,
#character5.modal-content.chara img.mainImg {max-width: 388px;padding: 0 0 0 60px;}
section.character article:nth-of-type(5) img.nameImg ,
#character5.modal-content.chara img.nameImg {width: 221px;left: 220px;}

section.character ul.slick-dots {
	width: 810px;
	overflow: hidden;height: 85px;
	margin: 0 auto;padding: 0 2vw;
}
section.character ul.slick-dots li {
	width: 19%;float: left;height: 85px;position: relative;
	text-align: center;margin: 0 0 0 1%;box-sizing: border-box;
	background: #cd4643;overflow: hidden;opacity: .6;
	transform:skewX(-15deg);cursor: pointer;
}
section.character ul.slick-dots li::after {
	content: "";position: absolute;top: -25%;left: -25%;
	width: 150%;height: 150%;z-index: 999;
	background: url(../img/mask.png) center;
	pointer-events: none;
	animation: rumble .2s linear infinite;
	opacity: 1;
}
section.character ul.slick-dots li.slick-active {opacity: 1;}
section.character ul.slick-dots li:nth-of-type(2) {background: #ff3bc1;}
section.character ul.slick-dots li:nth-of-type(3) {background: #72e9ff;}
section.character ul.slick-dots li:nth-of-type(4) {background: #ffb400;}
section.character ul.slick-dots li:nth-of-type(5) {background: #efe8b4;}
section.character ul.slick-dots li img {
	width: 105%;position: absolute;z-index: 1000;
	transform:skewX(15deg);left: -35%;right: -100%;margin: 0 auto;top: -10px;
}
section.character ul.slick-dots li:nth-of-type(2) img {
	width: 120%;top: -25px;
}
section.character ul.slick-dots li:nth-of-type(3) img {
	width: 160%;left: -20%;
}
section.character ul.slick-dots li:nth-of-type(5) img {
	width: 160%;top: -20px;
}
.imgloaded section.character .back:nth-child(2) {
	background-color: var(--blend-color-2);
	background-blend-mode: var(--blend-mode-2);
	animation-name: glitch-anim-4;
}
.imgloaded section.character .back:nth-child(3) {
	background-color: var(--blend-color-3);
	background-blend-mode: var(--blend-mode-3);
	animation-name: glitch-anim-5;
}
.imgloaded section.character .back:nth-child(4) {
	background-color: var(--blend-color-4);
	background-blend-mode: var(--blend-mode-4);
	animation-name: glitch-anim-6;
}

/* Glitch styles */
section.character .glitch {
	background: url(../img/back/chara_back@2x.png) no-repeat;
	background-color: var(--blend-color-1);
	background-size: cover;
}
.wrapper {position: relative;}
.glitch {
	top: 0;left: 0;position: absolute;
	width: 100%;height: 100%;
	overflow: hidden;
}
.back {
	position: absolute;opacity: 0;
	width: 100%;height: 100%;
	background: url(../img/back/chara_back@2x.jpg) no-repeat 50% 80%;
	background-color: var(--blend-color-1);
	background-size: cover;
	transform: translate3d(0,0,0);
	background-blend-mode: var(--blend-mode-1);
}
.back:nth-child(n+2) {opacity: 0;}
.imgloaded .back:nth-child(n+2) {
	animation-duration: var(--time-anim);
	animation-delay: var(--delay-anim);
	animation-timing-function: linear;
	animation-iteration-count: infinite;
}
.imgloaded .back:nth-child(2) {
	background-color: var(--blend-color-2);
	background-blend-mode: var(--blend-mode-2);
	animation-name: glitch-anim-1;
}
.imgloaded .back:nth-child(3) {
	background-color: var(--blend-color-3);
	background-blend-mode: var(--blend-mode-3);
	animation-name: glitch-anim-2;
}
.imgloaded .back:nth-child(4) {
	background-color: var(--blend-color-4);
	background-blend-mode: var(--blend-mode-4);
	animation-name: glitch-anim-3;
}
.imgloaded .back:nth-child(5) {
	background-color: var(--blend-color-5);
	background-blend-mode: var(--blend-mode-5);
	animation-name: glitch-anim-flash;
}

/* Animations */
@keyframes glitch-anim-1 {
	0% {
		opacity: 1;
		transform: translate3d(var(--gap-horizontal),0,0);
		-webkit-clip-path: polygon(0 2%, 100% 2%, 100% 5%, 0 5%);
		clip-path: polygon(0 2%, 100% 2%, 100% 5%, 0 5%);
	}
	2% {
		-webkit-clip-path: polygon(0 15%, 100% 15%, 100% 15%, 0 15%);
		clip-path: polygon(0 15%, 100% 15%, 100% 15%, 0 15%);
	}
	4% {
		-webkit-clip-path: polygon(0 10%, 100% 10%, 100% 20%, 0 20%);
		clip-path: polygon(0 10%, 100% 10%, 100% 20%, 0 20%);
	}
	6% {
		-webkit-clip-path: polygon(0 1%, 100% 1%, 100% 2%, 0 2%);
		clip-path: polygon(0 1%, 100% 1%, 100% 2%, 0 2%);
	}
	8% {
		-webkit-clip-path: polygon(0 33%, 100% 33%, 100% 33%, 0 33%);
		clip-path: polygon(0 33%, 100% 33%, 100% 33%, 0 33%);
	}
	10% {
		-webkit-clip-path: polygon(0 44%, 100% 44%, 100% 44%, 0 44%);
		clip-path: polygon(0 44%, 100% 44%, 100% 44%, 0 44%);
	}
	12% {
		-webkit-clip-path: polygon(0 50%, 100% 50%, 100% 20%, 0 20%);
		clip-path: polygon(0 50%, 100% 50%, 100% 20%, 0 20%);
	}
	14% {
		-webkit-clip-path: polygon(0 70%, 100% 70%, 100% 70%, 0 70%);
		clip-path: polygon(0 70%, 100% 70%, 100% 70%, 0 70%);
	}
	16% {
		-webkit-clip-path: polygon(0 80%, 100% 80%, 100% 80%, 0 80%);
		clip-path: polygon(0 80%, 100% 80%, 100% 80%, 0 80%);
	}
	18% {
		-webkit-clip-path: polygon(0 50%, 100% 50%, 100% 55%, 0 55%);
		clip-path: polygon(0 50%, 100% 50%, 100% 55%, 0 55%);
	}
	20% {
		-webkit-clip-path: polygon(0 70%, 100% 70%, 100% 80%, 0 80%);
		clip-path: polygon(0 70%, 100% 70%, 100% 80%, 0 80%);
	}
	21.9% {
		opacity: 1;
		transform: translate3d(var(--gap-horizontal),0,0);
	}
	22%, 100% {
		opacity: 0;
		transform: translate3d(0,0,0);
		-webkit-clip-path: polygon(0 0, 0 0, 0 0, 0 0);
		clip-path: polygon(0 0, 0 0, 0 0, 0 0);
	}
}
@keyframes glitch-anim-2 {
	0% {
		opacity: 1;
		transform: translate3d(calc(-1 * var(--gap-horizontal)),0,0);
		-webkit-clip-path: polygon(0 25%, 100% 25%, 100% 30%, 0 30%);
		clip-path: polygon(0 25%, 100% 25%, 100% 30%, 0 30%);
	}
	3% {
		-webkit-clip-path: polygon(0 3%, 100% 3%, 100% 3%, 0 3%);
		clip-path: polygon(0 3%, 100% 3%, 100% 3%, 0 3%);
	}
	5% {
		-webkit-clip-path: polygon(0 5%, 100% 5%, 100% 20%, 0 20%);
		clip-path: polygon(0 5%, 100% 5%, 100% 20%, 0 20%);
	}
	7% {
		-webkit-clip-path: polygon(0 20%, 100% 20%, 100% 20%, 0 20%);
		clip-path: polygon(0 20%, 100% 20%, 100% 20%, 0 20%);
	}
	9% {
		-webkit-clip-path: polygon(0 40%, 100% 40%, 100% 40%, 0 40%);
		clip-path: polygon(0 40%, 100% 40%, 100% 40%, 0 40%);
	}
	11% {
		-webkit-clip-path: polygon(0 52%, 100% 52%, 100% 59%, 0 59%);
		clip-path: polygon(0 52%, 100% 52%, 100% 59%, 0 59%);
	}
	13% {
		-webkit-clip-path: polygon(0 60%, 100% 60%, 100% 60%, 0 60%);
		clip-path: polygon(0 60%, 100% 60%, 100% 60%, 0 60%);
	}
	15% {
		-webkit-clip-path: polygon(0 75%, 100% 75%, 100% 75%, 0 75%);
		clip-path: polygon(0 75%, 100% 75%, 100% 75%, 0 75%);
	}
	17% {
		-webkit-clip-path: polygon(0 65%, 100% 65%, 100% 40%, 0 40%);
		clip-path: polygon(0 65%, 100% 65%, 100% 40%, 0 40%);
	}
	19% {
		-webkit-clip-path: polygon(0 45%, 100% 45%, 100% 50%, 0 50%);
		clip-path: polygon(0 45%, 100% 45%, 100% 50%, 0 50%);
	}
	20% {
		-webkit-clip-path: polygon(0 14%, 100% 14%, 100% 33%, 0 33%);
		clip-path: polygon(0 14%, 100% 14%, 100% 33%, 0 33%);
	}
	21.9% {
		opacity: 1;
		transform: translate3d(calc(-1 * var(--gap-horizontal)),0,0);
	}
	22%, 100% {
		opacity: 0;
		transform: translate3d(0,0,0);
		-webkit-clip-path: polygon(0 0, 0 0, 0 0, 0 0);
		clip-path: polygon(0 0, 0 0, 0 0, 0 0);
	}
}
@keyframes glitch-anim-3 {
	0% {
		opacity: 1;
		transform: translate3d(0, calc(-1 * var(--gap-vertical)), 0) scale3d(-1,-1,1);
		-webkit-clip-path: polygon(0 1%, 100% 1%, 100% 3%, 0 3%);
		clip-path: polygon(0 1%, 100% 1%, 100% 3%, 0 3%);
	}
	1.5% {
		-webkit-clip-path: polygon(0 10%, 100% 10%, 100% 9%, 0 9%);
		clip-path: polygon(0 10%, 100% 10%, 100% 9%, 0 9%);
	}
	2% {
		-webkit-clip-path: polygon(0 5%, 100% 5%, 100% 6%, 0 6%);
		clip-path: polygon(0 5%, 100% 5%, 100% 6%, 0 6%);
	}
	2.5% {
		-webkit-clip-path: polygon(0 20%, 100% 20%, 100% 20%, 0 20%);
		clip-path: polygon(0 20%, 100% 20%, 100% 20%, 0 20%);
	}
	3% {
		-webkit-clip-path: polygon(0 10%, 100% 10%, 100% 10%, 0 10%);
		clip-path: polygon(0 10%, 100% 10%, 100% 10%, 0 10%);
	}
	5% {
		-webkit-clip-path: polygon(0 30%, 100% 30%, 100% 25%, 0 25%);
		clip-path: polygon(0 30%, 100% 30%, 100% 25%, 0 25%);
	}
	5.5% {
		-webkit-clip-path: polygon(0 15%, 100% 15%, 100% 16%, 0 16%);
		clip-path: polygon(0 15%, 100% 15%, 100% 16%, 0 16%);
	}
	7% {
		-webkit-clip-path: polygon(0 40%, 100% 40%, 100% 39%, 0 39%);
		clip-path: polygon(0 40%, 100% 40%, 100% 39%, 0 39%);
	}
	8% {
		-webkit-clip-path: polygon(0 20%, 100% 20%, 100% 21%, 0 21%);
		clip-path: polygon(0 20%, 100% 20%, 100% 21%, 0 21%);
	}
	9% {
		-webkit-clip-path: polygon(0 60%, 100% 60%, 100% 55%, 0 55%);
		clip-path: polygon(0 60%, 100% 60%, 100% 55%, 0 55%);
	}
	10.5% {
		-webkit-clip-path: polygon(0 30%, 100% 30%, 100% 31%, 0 31%);
		clip-path: polygon(0 30%, 100% 30%, 100% 31%, 0 31%);
	}
	11% {
		-webkit-clip-path: polygon(0 70%, 100% 70%, 100% 69%, 0 69%);
		clip-path: polygon(0 70%, 100% 70%, 100% 69%, 0 69%);
	}
	13% {
		-webkit-clip-path: polygon(0 40%, 100% 40%, 100% 41%, 0 41%);
		clip-path: polygon(0 40%, 100% 40%, 100% 41%, 0 41%);
	}
	14% {
		-webkit-clip-path: polygon(0 80%, 100% 80%, 100% 75%, 0 75%);
		clip-path: polygon(0 80%, 100% 80%, 100% 75%, 0 75%);
	}
	14.5% {
		-webkit-clip-path: polygon(0 50%, 100% 50%, 100% 51%, 0 51%);
		clip-path: polygon(0 50%, 100% 50%, 100% 51%, 0 51%);
	}
	15% {
		-webkit-clip-path: polygon(0 90%, 100% 90%, 100% 90%, 0 90%);
		clip-path: polygon(0 90%, 100% 90%, 100% 90%, 0 90%);
	}
	16% {
		-webkit-clip-path: polygon(0 60%, 100% 60%, 100% 60%, 0 60%);
		clip-path: polygon(0 60%, 100% 60%, 100% 60%, 0 60%);
	}
	18% {
		-webkit-clip-path: polygon(0 100%, 100% 100%, 100% 99%, 0 99%);
		clip-path: polygon(0 100%, 100% 100%, 100% 99%, 0 99%);
	}
	20% {
		-webkit-clip-path: polygon(0 70%, 100% 70%, 100% 71%, 0 71%);
		clip-path: polygon(0 70%, 100% 70%, 100% 71%, 0 71%);
	}
	21.9% {
		opacity: 1;
		transform: translate3d(0, calc(-1 * var(--gap-vertical)), 0) scale3d(-1,-1,1);
	}
	22%, 100% {
		opacity: 0;
		transform: translate3d(0,0,0);
		-webkit-clip-path: polygon(0 0, 0 0, 0 0, 0 0);
		clip-path: polygon(0 0, 0 0, 0 0, 0 0);
	}
}
@keyframes glitch-anim-4 {
	0% {
		opacity: 1;
		transform: translate3d(var(--gap-horizontal),0,0);
		-webkit-clip-path: polygon(0 2%, 100% 2%, 100% 5%, 0 5%);
		clip-path: polygon(0 2%, 100% 2%, 100% 5%, 0 5%);
	}
	4% {
		-webkit-clip-path: polygon(0 15%, 100% 15%, 100% 15%, 0 15%);
		clip-path: polygon(0 15%, 100% 15%, 100% 15%, 0 15%);
	}
	8% {
		-webkit-clip-path: polygon(0 10%, 100% 10%, 100% 20%, 0 20%);
		clip-path: polygon(0 10%, 100% 10%, 100% 20%, 0 20%);
	}
	12% {
		-webkit-clip-path: polygon(0 1%, 100% 1%, 100% 2%, 0 2%);
		clip-path: polygon(0 1%, 100% 1%, 100% 2%, 0 2%);
	}
	16% {
		-webkit-clip-path: polygon(0 33%, 100% 33%, 100% 33%, 0 33%);
		clip-path: polygon(0 33%, 100% 33%, 100% 33%, 0 33%);
	}
	20% {
		-webkit-clip-path: polygon(0 44%, 100% 44%, 100% 44%, 0 44%);
		clip-path: polygon(0 44%, 100% 44%, 100% 44%, 0 44%);
	}
	24% {
		-webkit-clip-path: polygon(0 50%, 100% 50%, 100% 20%, 0 20%);
		clip-path: polygon(0 50%, 100% 50%, 100% 20%, 0 20%);
	}
	28% {
		-webkit-clip-path: polygon(0 70%, 100% 70%, 100% 70%, 0 70%);
		clip-path: polygon(0 70%, 100% 70%, 100% 70%, 0 70%);
	}
	32% {
		-webkit-clip-path: polygon(0 80%, 100% 80%, 100% 80%, 0 80%);
		clip-path: polygon(0 80%, 100% 80%, 100% 80%, 0 80%);
	}
	36% {
		-webkit-clip-path: polygon(0 50%, 100% 50%, 100% 55%, 0 55%);
		clip-path: polygon(0 50%, 100% 50%, 100% 55%, 0 55%);
	}
	40% {
		-webkit-clip-path: polygon(0 70%, 100% 70%, 100% 80%, 0 80%);
		clip-path: polygon(0 70%, 100% 70%, 100% 80%, 0 80%);
	}
	43.9% {
		opacity: 1;
		transform: translate3d(var(--gap-horizontal),0,0);
	}
	44%, 100% {
		opacity: 0;
		transform: translate3d(0,0,0);
		-webkit-clip-path: polygon(0 0, 0 0, 0 0, 0 0);
		clip-path: polygon(0 0, 0 0, 0 0, 0 0);
	}
}
@keyframes glitch-anim-5 {
	0% {
		opacity: 1;
		transform: translate3d(calc(-1 * var(--gap-horizontal)),0,0);
		-webkit-clip-path: polygon(0 25%, 100% 25%, 100% 30%, 0 30%);
		clip-path: polygon(0 25%, 100% 25%, 100% 30%, 0 30%);
	}
	6% {
		-webkit-clip-path: polygon(0 3%, 100% 3%, 100% 3%, 0 3%);
		clip-path: polygon(0 3%, 100% 3%, 100% 3%, 0 3%);
	}
	10% {
		-webkit-clip-path: polygon(0 5%, 100% 5%, 100% 20%, 0 20%);
		clip-path: polygon(0 5%, 100% 5%, 100% 20%, 0 20%);
	}
	14% {
		-webkit-clip-path: polygon(0 20%, 100% 20%, 100% 20%, 0 20%);
		clip-path: polygon(0 20%, 100% 20%, 100% 20%, 0 20%);
	}
	18% {
		-webkit-clip-path: polygon(0 40%, 100% 40%, 100% 40%, 0 40%);
		clip-path: polygon(0 40%, 100% 40%, 100% 40%, 0 40%);
	}
	22% {
		-webkit-clip-path: polygon(0 52%, 100% 52%, 100% 59%, 0 59%);
		clip-path: polygon(0 52%, 100% 52%, 100% 59%, 0 59%);
	}
	26% {
		-webkit-clip-path: polygon(0 60%, 100% 60%, 100% 60%, 0 60%);
		clip-path: polygon(0 60%, 100% 60%, 100% 60%, 0 60%);
	}
	30% {
		-webkit-clip-path: polygon(0 75%, 100% 75%, 100% 75%, 0 75%);
		clip-path: polygon(0 75%, 100% 75%, 100% 75%, 0 75%);
	}
	34% {
		-webkit-clip-path: polygon(0 65%, 100% 65%, 100% 40%, 0 40%);
		clip-path: polygon(0 65%, 100% 65%, 100% 40%, 0 40%);
	}
	38% {
		-webkit-clip-path: polygon(0 45%, 100% 45%, 100% 50%, 0 50%);
		clip-path: polygon(0 45%, 100% 45%, 100% 50%, 0 50%);
	}
	40% {
		-webkit-clip-path: polygon(0 14%, 100% 14%, 100% 33%, 0 33%);
		clip-path: polygon(0 14%, 100% 14%, 100% 33%, 0 33%);
	}
	43.9% {
		opacity: 1;
		transform: translate3d(calc(-1 * var(--gap-horizontal)),0,0);
	}
	44%, 100% {
		opacity: 0;
		transform: translate3d(0,0,0);
		-webkit-clip-path: polygon(0 0, 0 0, 0 0, 0 0);
		clip-path: polygon(0 0, 0 0, 0 0, 0 0);
	}
}
@keyframes glitch-anim-6 {
	0% {
		opacity: 1;
		transform: translate3d(0, calc(-1 * var(--gap-vertical)), 0) scale3d(-1,-1,1);
		-webkit-clip-path: polygon(0 1%, 100% 1%, 100% 3%, 0 3%);
		clip-path: polygon(0 1%, 100% 1%, 100% 3%, 0 3%);
	}
	1.5% {
		-webkit-clip-path: polygon(0 10%, 100% 10%, 100% 9%, 0 9%);
		clip-path: polygon(0 10%, 100% 10%, 100% 9%, 0 9%);
	}
	2% {
		-webkit-clip-path: polygon(0 5%, 100% 5%, 100% 6%, 0 6%);
		clip-path: polygon(0 5%, 100% 5%, 100% 6%, 0 6%);
	}
	2.5% {
		-webkit-clip-path: polygon(0 20%, 100% 20%, 100% 20%, 0 20%);
		clip-path: polygon(0 20%, 100% 20%, 100% 20%, 0 20%);
	}
	6% {
		-webkit-clip-path: polygon(0 10%, 100% 10%, 100% 10%, 0 10%);
		clip-path: polygon(0 10%, 100% 10%, 100% 10%, 0 10%);
	}
	10% {
		-webkit-clip-path: polygon(0 30%, 100% 30%, 100% 25%, 0 25%);
		clip-path: polygon(0 30%, 100% 30%, 100% 25%, 0 25%);
	}
	11% {
		-webkit-clip-path: polygon(0 15%, 100% 15%, 100% 16%, 0 16%);
		clip-path: polygon(0 15%, 100% 15%, 100% 16%, 0 16%);
	}
	14% {
		-webkit-clip-path: polygon(0 40%, 100% 40%, 100% 39%, 0 39%);
		clip-path: polygon(0 40%, 100% 40%, 100% 39%, 0 39%);
	}
	16% {
		-webkit-clip-path: polygon(0 20%, 100% 20%, 100% 21%, 0 21%);
		clip-path: polygon(0 20%, 100% 20%, 100% 21%, 0 21%);
	}
	18% {
		-webkit-clip-path: polygon(0 60%, 100% 60%, 100% 55%, 0 55%);
		clip-path: polygon(0 60%, 100% 60%, 100% 55%, 0 55%);
	}
	21% {
		-webkit-clip-path: polygon(0 30%, 100% 30%, 100% 31%, 0 31%);
		clip-path: polygon(0 30%, 100% 30%, 100% 31%, 0 31%);
	}
	22% {
		-webkit-clip-path: polygon(0 70%, 100% 70%, 100% 69%, 0 69%);
		clip-path: polygon(0 70%, 100% 70%, 100% 69%, 0 69%);
	}
	26% {
		-webkit-clip-path: polygon(0 40%, 100% 40%, 100% 41%, 0 41%);
		clip-path: polygon(0 40%, 100% 40%, 100% 41%, 0 41%);
	}
	28% {
		-webkit-clip-path: polygon(0 80%, 100% 80%, 100% 75%, 0 75%);
		clip-path: polygon(0 80%, 100% 80%, 100% 75%, 0 75%);
	}
	29% {
		-webkit-clip-path: polygon(0 50%, 100% 50%, 100% 51%, 0 51%);
		clip-path: polygon(0 50%, 100% 50%, 100% 51%, 0 51%);
	}
	30% {
		-webkit-clip-path: polygon(0 90%, 100% 90%, 100% 90%, 0 90%);
		clip-path: polygon(0 90%, 100% 90%, 100% 90%, 0 90%);
	}
	32% {
		-webkit-clip-path: polygon(0 60%, 100% 60%, 100% 60%, 0 60%);
		clip-path: polygon(0 60%, 100% 60%, 100% 60%, 0 60%);
	}
	36% {
		-webkit-clip-path: polygon(0 100%, 100% 100%, 100% 99%, 0 99%);
		clip-path: polygon(0 100%, 100% 100%, 100% 99%, 0 99%);
	}
	40% {
		-webkit-clip-path: polygon(0 70%, 100% 70%, 100% 71%, 0 71%);
		clip-path: polygon(0 70%, 100% 70%, 100% 71%, 0 71%);
	}
	43.9% {
		opacity: 1;
		transform: translate3d(0, calc(-1 * var(--gap-vertical)), 0) scale3d(-1,-1,1);
	}
	44%, 100% {
		opacity: 0;
		transform: translate3d(0,0,0);
		-webkit-clip-path: polygon(0 0, 0 0, 0 0, 0 0);
		clip-path: polygon(0 0, 0 0, 0 0, 0 0);
	}
}
@keyframes glitch-anim-flash {
	0%, 5% {
		opacity: 0.2;
		transform: translate3d(var(--gap-horizontal), var(--gap-vertical), 0);
	}
	5.5%, 100% {
		opacity: 0;
		transform: translate3d(0, 0, 0);
	}
}

section.system {overflow: hidden;padding: 40% 0 0;margin: -40% 0 0;}
section.system .bg-movie {
	width: 130%;height: 45vw;overflow: hidden;
	position: absolute;top: 20%;left: -15%;z-index: 0;
	transform: rotate(-20deg);
}
section.system::before {
	content: "";width: 100%;height: 90vw;
	position: absolute;top: 25%;left: 0;z-index: -101;
	background: url(../img/back/system_back@2x.png) no-repeat center right;background-size: 88%;
}
section.system::after {
	content: "";width: 130%;height: 720px;overflow: hidden;
	position: absolute;top: 45%;left: -15%;z-index: -100;
	transform: rotate(20deg);
	background: rgba(0,114,255,.3);
}
section.system h1::before {
	content: "";width: 165px;height: 67px;display: block;
	background: url(../img/title/system@2x.png) no-repeat;
	background-size: 100%;margin: 0 auto;
}
section.system h1 ,
section.system h2 {
	color: rgba(0,0,0,0);height: 67px;
	position: relative;padding: 93px 0 30px;margin: 0 auto;
}
section.system h2 {
	height: 44px;padding: 0 0 50px;
}
section.system h2::before {
	content: "";width: 435px;height: 44px;display: block;
	background: url(../img/title/system_title1@2x.png) no-repeat;
	background-size: 100%;margin: 0 auto;
}
section.system article:nth-of-type(2) h2::before {
	width: 217px;
	background: url(../img/title/system_title2@2x.png) no-repeat;
	background-size: 100%;
}
section.system article:nth-of-type(3) h2::before {
	width: 258px;
	background: url(../img/title/system_title3@2x.png) no-repeat;
	background-size: 100%;
}
section.system article {margin: 0 0 80px}
section.system article .box {overflow: hidden;}
section.system article .box a {
	width: 48.2%;float: left;box-sizing: border-box;position: relative;background: #000;
	border: solid 10px #212121;display: block;cursor: pointer;overflow: hidden;
}
section.system article .box a::after {
	content: "";width: 47px;height: 47px;pointer-events: none;
	background: url(../img/icon/zoom@2x.png) center #212121 no-repeat;
	background-size: 50%;
	position: absolute;bottom: -10px;right: -10px;
}
section.system article .box a:last-child {margin: 0 0 0 3.6%;}
section.system article .box a:hover img {
	opacity: .7;transform: scale3d(1.02,1.02,1.02);
	transition: all .2s;
}
section.add ul li img {vertical-align: bottom;transition: all .2s;}
section.system article p {
	width: 960px;
	margin: 30px auto;position: relative;
}

section.spec .box {
	padding: 10px;margin:0 auto;position: relative;
	background: rgb(114,233,255);
	background: linear-gradient(88deg, rgba(114,233,255,1) 0%, rgba(245,100,209,1) 100%);
	box-sizing: border-box;
}
section.spec img.logo {
	width: 643px;display: block;margin: 0 auto;padding: 60px 0 25px;
}
section.spec .column2 {
	overflow: hidden;position: relative;
	padding: 50px;
}
section.spec .column2 img {
	width: 27%;position: absolute;
	background: #474747;
}
section.spec .column2 dl {width: 70%;float: right;}
section.spec dl div {overflow: hidden;margin: 0 0 20px;}
section.spec dl dt {
	font-size: 1.2em;line-height: 2.2;text-align: right;
	float: left;width: 30%;position: relative;
	color: #f564d1;font-feature-settings: initial;letter-spacing: 0;
}
section.spec dl dt::after {
	content: "：";color: #f564d1;padding: 0 .2em;
}
section.spec dl dd {
	font-size: 1.6em;line-height: 1.8;letter-spacing: 0;
	float: left;width: 70%;font-feature-settings: initial;
}
section.spec dl dd a {
	color: #f564d1;text-decoration: underline;
}
section.spec dl dd span {
	font-size: 1.2rem;display: inline-block;padding: 
}
section.spec h1 ,
section.spec h2 ,
section.spec h3 ,
section.spec h4 {
	color: rgba(0,0,0,0);height: 67px;
	position: relative;padding: 93px 0 30px;margin: 0 auto;
}
section.spec h1 {padding: 0 0 30px;}
section.spec h1::before ,
section.spec h2::before ,
section.spec h3::before ,
section.spec h4::before {
	content: "";width: 108px;height: 67px;display: block;
	background: url(../img/title/spec@2x.png) no-repeat;
	background-size: 100%;margin: 0 auto;
}
section.spec h2 {height: 34px;padding: 40px 0;}
section.spec h2::before {
	width: 221px;height: 34px;
	background: url(../img/title/spec_title1@2x.png) no-repeat;
	background-size: 100%;
}
section.spec h3 {height: 33px;padding: 70px 0 35px;}
section.spec h3::before {
	width: 349px;height: 33px;
	background: url(../img/title/spec_title2@2x.png) no-repeat;
	background-size: 100%;
}
section.spec h3.title5::before {
	width: 246px;
	background: url(../img/title/spec_title5@2x.png) no-repeat;
	background-size: 100%;
}
section.spec h4 {height: 22px;padding: 0 0 28px;}
section.spec h4::before {
	width: 195px;height: 22px;
	background: url(../img/title/spec_title3@2x.png) no-repeat;
	background-size: 100%;
}
section.spec h4.title4::before {
	width: 216px;
	background: url(../img/title/spec_title4@2x.png) no-repeat;
	background-size: 100%;
}
section.spec .specBox {background: #000;}
section.spec .specBox.buy {text-align: center;padding: 0 75px 70px;}
.specBox .linkBox {overflow: hidden;margin: 0 0 45px;display: flex}
.specBox .linkBox a {/*float: left;*/width: 33%;display: flex;align-items: center;flex-wrap: wrap;justify-content: center}
.specBox .linkBox a:nth-of-type(2) {margin: 0 1%;width: 32%;}
.specBox a.link {
	border: solid 2px #b55cad;padding: .7em 0 .6em;
	font-size: 2em;line-height: 1;color: #b55cad;box-sizing: border-box;
	position: relative;transition: all .2s;
}
.specBox a.link span {
	font-size: 12px;
	width:100%;
	display: block;
	padding-top:5px;
}
.specBox a.link:hover {
	background: #b55cad;transition: all .2s;
	border: solid 2px #b55cad;color: #fff;
}
.specBox a.link::after {
	content: "";position: absolute;top: 50%;right: 1.6rem;
	width: 0;height: 0;
	margin-top:-3px;
	border-style: solid;border-width: 3px 0 3px 6px;
	border-color: transparent transparent transparent #b55cae;
}
.specBox a.link:hover::after ,
.specBox a.link.blue:hover::after {
	border-color: transparent transparent transparent #fff;
}
.specBox a.blue {color: #5c8ab5;border: solid 2px #5c8ab5;display: flex;justify-content: center;}
.specBox a.link.blue:hover {
	background: #5c8ab5;transition: all .2s;
	border: solid 2px #5c8ab5;color: #fff;
}
.specBox a.link.blue::after {
	border-color: transparent transparent transparent #5c8ab5;
}
.specBox a.linkOff {
	border: solid 2px #939393;padding: .7em 0 .6em;
	font-size: 2em;line-height: 1;color: #939393;box-sizing: border-box;
	position: relative;transition: all .2s;
	pointer-events: none;
	display:flex;
	justify-content: center;
	width:100%;
}
.specBox a.linkOff.rr {
	width:33%
}
.specBox h4 {padding: 0 0 30px;}

ul.share {margin: 70px auto;overflow: hidden;width: 310px;}
ul.share li {float: left;width: 20%;text-align: center;}
ul.share li a {display: block;}
ul.share li a:hover img {opacity: .8;transition: opacity .2s;}
ul.share li img {height: 47px;width: auto;}
ul.share li:nth-of-type(2) {margin: 0 20%;}

footer {
	text-align: center;color: #616161;position: relative;
	background: #111;padding: 60px 0;
}
footer a.scrollTop {
	display: block;width: 70px;height: 70px;
	position: absolute;bottom: 0;left: 0;z-index: 10000;
	background: #b55cad;
}
footer.is-fixed a.scrollTop {position: fixed;}
footer a.scrollTop::before {
	content: "";width: 10px;height: 21px;display: block;
	background: url(../img/icon/arrow3@2x.png) no-repeat;
	background-size: 100%;pointer-events: none;
	position: relative;top: 25px;left: 30px;
}
footer a.scrollTop:hover::before {
	transform: rotate3d(0, 1, 0, 360deg);
	transition: transform .4s;
}
footer ul {margin: 0 auto 45px;overflow: hidden;width: 650px}
footer ul li {float: left;width: 210px;}
footer ul li:nth-of-type(2) {margin: 0 10px;}
footer ul li a {display: block;}
footer ul li a:hover img {opacity: .8;transition: opacity .2s;}
footer p {font-size: 1.2em;line-height: 2;margin: 0 0 30px;}
footer small {font-size: 1.4em;line-height: 2;}

@media all and (max-width:480px) {
	/* スマホ */
	body {min-width: auto;}
	html {font-size: calc(62.5% + 4 * (100vw - 320px) / 150);}
	header {
		height: 150vw;margin: 50px 0 0;
		background: url(../img/back/header_back-sp@2x.jpg) center no-repeat;
		background-size: cover;
	}
	header .back {background: url(../img/back/header_back-sp@2x.jpg) no-repeat 50% 80%;}
	.mask {
		position: absolute;top: -25%;left: -25%;
		width: 150%;height: 150%;
		z-index: 999;
		background: url(../img/mask.png) center;
		pointer-events: none;
		animation: rumble .2s linear infinite;
		opacity: .33;
	}
	.mask_obi {
		position: absolute;top: -25%;left: -25%;
		width: 150%;height: 150%;
		z-index: 999;

	}
	.mask_obi::before {
		content: "";
		position: absolute;top: -25%;left: -25%;
		width: 150%;height: 150%;
		z-index: 0;
		background: url(../img/mask.png) center;
		pointer-events: none;
		animation: rumble .2s linear infinite;
		opacity: .33;
	}
	header nav {
		background: url(../img/back/header_back@2x.png) #000 no-repeat;
		background-size: 100%;width: 100%;height: 50px;position: fixed;top: 0;z-index: 10001;
	}
	header h1 {width: 115px;position: relative;top: 6px;margin: 0 auto;left: 0;}
	header label {display: block;width: 36px;height: 12px;}
	header nav .wrap {width: auto;margin: 0 auto;position: relative;}
	header nav ul.main {
		opacity: 0;position: absolute;top: 50px;right: 0;z-index: 10001;
		background: #000;width: 100%;height: 100vh;padding: 58px 0 0;
		transform: scale3d(.95,.95,1);pointer-events: none;
		transition: transform 0.4s cubic-bezier(.63,.32,.35,.63),
		opacity 0.4s cubic-bezier(.63,.32,.35,.63);
	}
	header nav.is-fixed {z-index: 10001;}
	header label.menu {position: absolute;top:18px;right: 14px;width: 36px;height: 12px;z-index: 1001;transition: all .4s;}
	header input#nav:checked ~ ul {
		opacity: 1;transform: scale3d(1,1,1);pointer-events: all;
		transition: transform 0.4s cubic-bezier(.65,.32,.35,.65),
		opacity 0.4s cubic-bezier(.65,.32,.35,.65);
	}
	header nav ul li {margin: 0 58px 20px;display: block;text-align: left;}
	header nav ul.main li img {display: none;}
	header nav ul.main li a {position: relative;display: block;}
	header nav ul.main li a::before {
		content: "";position: relative;width: 208px;height: 55px;display: block;
		background: url(../img/title/nav01-sp.png) no-repeat;background-size: 100%;
		pointer-events: none;
	}
	header nav ul.main li:nth-of-type(2) a::before {
		background: url(../img/title/nav02-sp.png) no-repeat;background-size: 100%;
	}
	header nav ul.main li:nth-of-type(3) a::before {
		background: url(../img/title/nav03-sp.png) no-repeat;background-size: 100%;
	}
	header nav ul.main li:nth-of-type(4) a::before {
		background: url(../img/title/nav04-sp.png) no-repeat;background-size: 100%;
	}
	header nav ul.main li:nth-of-type(5) a::before {
		background: url(../img/title/nav05-sp.png) no-repeat;background-size: 100%;
	}
	header nav ul.main li:nth-of-type(6) a::before {
		background: url(../img/title/nav06-sp.png) no-repeat;background-size: 100%;
	}
	header nav ul.main li:nth-of-type(7) a::before {
		background: url(../img/title/nav07.png) no-repeat;background-size: 100%;
	}
	header a.btn {width: 108px;}
	header a.btn::before {width: 64px;height: 106px;bottom: -18px;left: 2px;}
	header ul.shop {
		position: absolute;top: 12px;left: 14px;padding: 0;
		width: auto;display: inline-block;text-align: left;
	}
	header ul.shop li {margin: 0 10px 0 0;display: inline-block;}
	header ul.shop li.steam {transform: translateY(-4px);}
	header ul.shop li.switch img {height: 25px;}
	header ul.shop li.steam img {height: 16px;}
	header .icon {
		width: 100%;box-sizing: border-box;
		bottom: 40px;padding: 0 28px;
	}
	header .icon img.coming {width: 80%;margin: 15px 0 0;}
	header .lead {
		background: url(../img/icon/lead-sp@2x.png) no-repeat;background-size: 100%;
		width: 17px;height: 350px;right: 14px;top: 45px;
	}
	section .box {position: relative;width: auto;margin: 0 25px;z-index: 10;}
	section .box2 {position: relative;padding: 0 25px;width: 100%;margin: 0 auto;box-sizing: border-box;transform:perspective(20000px) translateZ(500px);}
	section p {
		font-size: 1.2em;line-height: 2.375;
		text-shadow: black 2px 0px, black -2px 0px,
		black 0px -2px, black 0px 2px,
		black 2px 2px , black -2px 2px,
		black 2px -2px, black -2px -2px,
		black 1px 2px,  black -1px 2px,
		black 1px -2px, black -1px -2px,
		black 2px 1px,  black -2px 1px,
		black 2px -1px, black -2px -1px;
	}
	/*LOADING*/
	#loading {
		position:fixed;left:0;top:0;right:0;bottom:0;
		z-index:10002;background:#000;
	}
	#loading p {
		width:100%;height: 178px;
		max-width:60%;
		background:url(../img/icon/logo_title@2x.png) no-repeat center center / contain;
		position:absolute;
		left:50%;
		top:50%;
		transform:translate(-50%,-50%);
		opacity:0;
		transition:all 0.5s ease;
	}
	#loading.su p {
		opacity:1;
	}

	section.about {
		overflow: hidden;padding: 0 0 13.5vw;z-index: 1000;
		background: none;background-size: 100%;
	}
	section.about::before {
		content: "";width: 245px;height: 178px;
		background: url(../img/back/about_back1-sp.png) center no-repeat;
		background-size: 100%;
		position: absolute;top: 100px;left: 0;
	}
	section.about::after {
		content: "";width: 150%;height: 50vw;overflow: hidden;
		position: absolute;top: 0;left: -25%;z-index: -10;
		transform: rotate(25deg);
		background: rgba(48,48,48,.7);
	}
	section.about .news {background: none;position: relative;z-index: 10;margin: 50px 25px 0;}
	section.about .news dl {font-size: 1.2em;padding: 0 0 0 76px;position: relative;height: 48px;}
	section.about .news dl::before {
		content: "";width: 53px;height: 17px;
		background: url(../img/title/news@2x.png) no-repeat;background-size: 100%;
		position: absolute;left: 7px;top: 7px;
	}
	section.about .news dl div {overflow: hidden;}
	section.about .news dl dt ,
	section.about .news dl dd {float: none;line-height: 1;padding: .3em 0;}
	section.about .news dl dd a {text-decoration: underline;}
	section.about h1 {
		height: 35px;
		position: relative;padding: 93px 0 15px;margin: 0 auto;
	}
	section.about h1::before {
		content: "";width: 57px;height: 35px;position: absolute;top:93px;left: -100%;right: -100%;
		background: url(../img/title/about@2x.png) no-repeat;
		background-size: 100%;margin: 0 auto;
	}
	section.about .movie iframe {
		width: 100%;height: 50vw;
		box-sizing: border-box;border: solid 10px #212121;
		box-shadow: -114px 33px 100px -10px #000;
	}
	section.about .bg-movie {
		width: 150%;height: 80vw;
		position: absolute;left: -25%;
	}
	section.about .lead {
		width: 100%;height: 30vw;margin: 20px 0;
		background: url(../img/title/about_lead-sp.png) no-repeat;
		background-size: 100%;
	}
	section.about p {width: 100%;margin: 0 auto;}

	section.story {
		margin: -48vw 0 -43vw;padding: 48vw 0 43vw;
		overflow: hidden;
		background: none;
		background-position: 0 90%;
	}
	section.story .circle {
		transform:perspective(200px) rotateY(12deg) rotateX(1deg);
		transform-origin: center;width: 100%;
	}
	section.story .circle::before {
		content: "";width: 250px;height: 250px;display: inline-block;position: absolute;top: -60px;left: -40px;
		background: url(../img/back/circle01_01.png) no-repeat;background-size: 100%;
		z-index: -1;animation: spin 20s infinite linear;
		transform-origin: center;
	}
	section.story h1 {
		color: rgba(0,0,0,0);width: 55px;height: 34px;right: auto;top: 0;
		position: relative;padding: 15px 0 30px;margin: 0 auto;
	}
	section.story h1::before {
		content: "";width: 55px;height: 34px;position: static;
		background: url(../img/icon/story@2x.png) no-repeat;
		background-size: 100%;
	}
	section.story::before {
		content: "";width: 100%;height: 90vw;
		position: absolute;top: 0;left: 0;
		background: url(../img/back/story_back1@2x.png) no-repeat top right;background-size: 88%;
	}
	section.story::after {
		content: "";width: 150%;height: 90vw;overflow: hidden;
		position: absolute;top: 55vw;left: -25%;z-index: -10;
		transform: rotate(20deg);
		background: rgba(0,119,109,.4);
	}
	section.story input {display: none}
	section.story img.lead {width: 100%;}
	section.story label {width: 100%;margin: 22px 0;display: block;position: relative;cursor: pointer;}
	section.story label::before {
		content: "";width: 5px;height: 9px;pointer-events: none;
		background: url(../img/icon/arrow@2x.png) no-repeat;
		background-size: 100%;
		position: absolute;top: 10px;left: 37%;
	}
	section.story label:hover::before {
		transform: rotate3d(0, 1, 0, 360deg);
		transition: transform .4s;
	}
	section.story .storyBox {display:none;}
	section.story p {margin: 0 0 20px;}

	section.add {
		overflow: hidden;padding: 84vw 0 29%;margin: -27vw 0 0;
		background: none;
	}

	section.add .circle {
		transform:perspective(240px) rotateY(168deg) rotateX(1deg) translateZ(-10px);
		transform-origin: center;z-index: 0;width: 100%;
		position:relative;
		z-index:5;
	}
	section.add .circle::before {
		content: "";width: 350px;height: 350px;display: inline-block;position: absolute;top: -50vw;right: 150px;
		background: url(../img/back/circle02_01.png) no-repeat;background-size: 100%;
		z-index: -100;animation: spin 20s infinite linear;
		transform-origin: center;
	}
	section.add::after {
		content: "";width: 150%;height: 90vw;overflow: hidden;
		position: absolute;top: 30%;left: -25%;z-index: -101;
		transform: rotate(20deg);
		background: rgba(222,0,255,.2);
	}
	section.add h1 {
		color: rgba(0,0,0,0);width: 156px;height: 34px;left: 25px;top: 0;
		position: relative;padding: 0;margin: 0;
		position: relative;
		z-index:50;
		transform:perspective(5001px) translateZ(500px);
	}
	section.add h1::before {
		content: "";width: 100%;height: 34px;position: static;
		background: url(../img/title/add@2x.png) no-repeat;
		background-size: 100%;display: block;

	}
	section.add img.lead {
		width: 67%;display: block;margin: 30px auto;
		position: relative;
		z-index:500;
		transform:perspective(5001px) translateZ(500px);
	}
	section.add ul {
		width: calc(100% - 50px);
		margin: 0 25px 30px;overflow: hidden;position: relative;z-index: 1000;
	}
	section.add ul li {
		width: 60%;float: left;position: relative;z-index: 10;
		box-sizing: border-box;border: solid 5px #212121;
	}
	section.add ul li::after {
		content: "";width: 23px;height: 23px;
		background: url(../img/icon/zoom@2x.png) center #212121 no-repeat;
		background-size: 50%;
		position: absolute;bottom: -5px;right: -5px;
	}
	section.add ul li a {display: block;}
	section.add ul li:last-child {
		margin: 23vw 0 0 -20%;z-index: 5;
	}
	section.add ol {overflow: hidden;margin: 0 25px;}
	section.add ol li {
		width: 100%;float: none;margin: 0;padding: 0 0 30px;
		height: auto;
	}
	section.add ol li:nth-of-type(2) {
		margin: 0;float: none;padding: 0 0 30px;
	}
	section.add ol li:nth-of-type(3) {
		margin: 0;float: none;padding: 0 0 30px;
	}
	section.add ol li:nth-of-type(4) {
		margin: 0;float: none;padding: 0 0 30px;
	}
	section.add ol li img {
		height: 28px;width: auto;
	}
	section.add ol li p {padding: 0 0 0 15vw;letter-spacing: .2em;line-height: 1.6;}
	section.add .bg-movie {
		width: 150%;height: 80vw;overflow: hidden;
		position: absolute;top: 8%;left: -25%;z-index: -100;
		transform: rotate(-20deg);
	}
	.bg-moviein {
		transform:scale(1.4) translateY(0);
		display: none;
	}
	section.character h1 {
		color: rgba(0,0,0,0);width: 122px;height: 34px;top: 0;
		position: relative;padding: 0;margin: 0 auto;z-index: 1001;
	}
	section.character h1::before {
		content: "";width: 122px;height: 34px;position: static;
		background: url(../img/title/character@2x.png) no-repeat;
		background-size: 100%;display: block;
	}

	.modal-overlay {
		z-index: 10001;position: fixed;top: 0;left: 0;
		display: none;width: 100%;height: 120%;
		background: rgba(0,0,0,.9);
	}
	.modal-content {
		z-index: 10002;position: fixed;
		display: none;max-width: 100%;
		border: solid 10px #212121;
		margin: 0 25px;min-height: auto;
	}
	.modal-content.select {width: 100%;}
	.modal-content.select .language {margin: 0 0 18px;}
	.modal-content.select .language::before {
		content: "";width: 175px;height: 19px;position: static;
		background: url(../img/title/select@2x.png) no-repeat center center;
		background-size: 100%;display: block;margin: auto;
	}
	.modal-content.select img.logo {width: calc(100% - 40px);margin: 32px 20px;}
	.modal-content.select .specBox {padding: 0 20px 32px;}
	.modal-content.select .specBox a.link {
		margin: 10px 0 0;
	}
	.modal-content.chara {
		z-index: 10002;position: fixed;
		display: none;max-width: 100%;
		border: none;
	}
	.modal-content button.modal-cl {
		background: url(../img/icon/close@2x.png) no-repeat center;background-size: 194px;
		border:none;box-shadow: none;cursor: pointer;
		width: 86px;height: 27px;padding: 27px 0 0;box-sizing: border-box;
		position: absolute;right: -100%;left: -100%;bottom: -57px;
	}
	.modal-content button.modal-cl:hover {
		-webkit-animation: glitch .5s infinite;
	}
	.modal-content button.modal-cl span.b_in {padding: 0;}
	.modal-content button.modal-cl span:last-of-type {
		display: inline-block;margin: 10px 0 0;padding: 0;
		font-weight: 700;
	}
	.modal-content button.modal-cl:focus {border: 0;outline: 0;}
	.thumb span.zoom {
		position: absolute;bottom: 4px;right: 4px;z-index: 0;
		width: 24px;height: 24px;pointer-events: none;
		background: url(../img/icon/zoom@2x.png) no-repeat;background-size: 100%;
	}
	.thumb:hover img {-webkit-animation: glitch .5s infinite;}
	.thumb {overflow: hidden;}

	section.character {
		margin: -20vw 0 0;z-index: 101;
		--time-anim: 3s;
		--delay-anim: 1s;
		--gap-horizontal: 10px;
		--gap-vertical: 5px;
		--blend-mode-1: none;
		--blend-mode-2: none;
		--blend-mode-3: none;
		--blend-mode-4: none;
		--blend-mode-5: overlay;
		--blend-color-1: transparent;
		--blend-color-2: transparent;
		--blend-color-3: transparent;
		--blend-color-4: transparent;
		--blend-color-5: #312D2D;
	}
	section.character article {
		position: relative;height: 130vw;
		overflow: hidden;
	}
	section.character .slick {
		z-index: 1000;width: 100%;margin: 0 auto;
	}
	.modal-content.chara .b_in {
		height: auto;
		min-width: auto;max-width: auto;
		min-height: auto;max-height: auto;
		padding: 0 0 67px;
	}
	section.character article img.mainImg ,
	.modal-content.chara img.mainImg {
		width: 33vw;margin: auto;z-index: 13;
		position: absolute;top: -100%;bottom: -100%;left: -60%;right: -100%;
	}
	.modal-content.chara img.mainImg {
		width: 33vw;top: -121%;
		max-width: auto;max-height: 100%;
	}
	section.character article img.nameImg ,
	.modal-content.chara img.nameImg {
		width: 20vw;margin: 0;z-index: 12;
		position: absolute;top: 120px;left: 20vw;
	}
	.modal-content.chara img.nameImg {top: 21%;}
	.modal-content.chara a.arrow {
		width: 35px;height: 35px;
		background: url(../img/icon/_arrow2.png) #b55cad no-repeat;
		background-size: 11px 5px;background-position: center;
		cursor: pointer;
		display: block;position: absolute;top: 50%;margin: -17px auto 0;
		left: 0;
	}
	.modal-content.chara a.arrow.next {right: 0;left: auto;}
	.modal-content.chara a.arrow::before {display: none;}
	.modal-content.chara a.arrow.next {
		transform: rotate3d(0, 1, 0, 180deg);
	}
	.modal-content.chara {width: 100vw;height: calc( var(--vh) * 100 );}
	.modal-content.chara p {
		width: calc(100% - 50px);font-size: 1.2em;line-height: 1.8;
		position: relative;top: -13vw;left: 10%;z-index: 14;
	}
	section.character article img.check {
		width: 84px;margin: 0;display: block;
		position: absolute;bottom: 120px;left: -5px;
	}
	.modal-content.chara .imgBox {
		width: 100%;height: 122vw;position: relative;top: 0;left: 0;
		background: url(../img/character/miki2-sp.png) no-repeat top;
		background-size: 81%;background-position: -1vw;margin: 20% 0 0;
	}
	#character2.modal-content.chara .imgBox {
		width: 100%;height: 120vw;top: 0;left: 0;
		background: url(../img/character/ahactna2-sp.png) no-repeat;
		background-size: 81%;background-position: -1vw;
	}
	#character3.modal-content.chara .imgBox {
		width: 100%;height: 115vw;top: 0;left: 0;
		background: url(../img/character/orga2-sp.png) no-repeat;
		background-size: 81%;background-position: -1vw;
	}
	#character4.modal-content.chara .imgBox {
		width: 100%;height: 118vw;top: 0;left: 0;
		background: url(../img/character/chloe2-sp.png) no-repeat;
		background-size: 81%;background-position: -1vw;
	}
	#character5.modal-content.chara .imgBox {
		width: 100%;height: 115vw;top: 0;left: 0;
		background: url(../img/character/itoka2-sp.png) no-repeat;
		background-size: 81%;background-position: -1vw;
	}
	section.character article:nth-of-type(2) img.mainImg ,
	#character2.modal-content.chara img.mainImg {width: 38vw;}
	section.character article:nth-of-type(2) img.nameImg ,
	#character2.modal-content.chara img.nameImg {width: 30vw;left: 15vw;}
	section.character article:nth-of-type(3) img.mainImg ,
	#character3.modal-content.chara img.mainImg {width: 45vw;}
	section.character article:nth-of-type(3) img.nameImg ,
	#character3.modal-content.chara img.nameImg {width: 20vw;left: 18vw;}
	section.character article:nth-of-type(4) img.mainImg ,
	#character4.modal-content.chara img.mainImg {width: 35vw;}
	section.character article:nth-of-type(4) img.nameImg ,
	#character4.modal-content.chara img.nameImg {width: 20vw;left: 18vw;}
	section.character article:nth-of-type(5) img.mainImg ,
	#character5.modal-content.chara img.mainImg {width: 53vw;left: -78%;}
	section.character article:nth-of-type(5) img.nameImg ,
	#character5.modal-content.chara img.nameImg {width: 30vw;left: 15vw;}

	section.character ul.slick-dots {
		width: 80%;box-sizing: border-box;
		overflow: hidden;height: auto;text-align: center;
		margin: 0 auto;padding: 0 2vw;
	}
	section.character ul.slick-dots li {
		width: 30%;float: none;height: 15vw;position: relative;
		text-align: center;margin: 0 0 1% 2%;box-sizing: border-box;
		background: #cd4643;overflow: hidden;opacity: .6;
		transform:skewX(-15deg);display: inline-block;
	}
	section.character ul.slick-dots li::after {
		content: "";position: absolute;top: -25%;left: -25%;
		width: 150%;height: 150%;z-index: 999;
		background: url(../img/mask.png) center;
		pointer-events: none;
		animation: rumble .2s linear infinite;
		opacity: 1;
	}
	section.character ul.slick-dots li.slick-active {opacity: 1;}
	section.character ul.slick-dots li:nth-of-type(2) {background: #ff3bc1;}
	section.character ul.slick-dots li:nth-of-type(3) {background: #72e9ff;}
	section.character ul.slick-dots li:nth-of-type(4) {background: #ffb400;}
	section.character ul.slick-dots li:nth-of-type(5) {background: #efe8b4;}
	section.character ul.slick-dots li img {
		width: 105%;position: absolute;z-index: 1000;
		transform:skewX(15deg);left: -35%;right: -100%;margin: 0 auto;top: -5px;
	}
	section.character ul.slick-dots li:nth-of-type(2) img {
		top: -5px;
	}
	section.character ul.slick-dots li:nth-of-type(3) img {
		left: -20%;
	}
	section.character ul.slick-dots li:nth-of-type(5) img {
		top: -5px;
	}

	/* Glitch styles */
	.glitch {
		top: 0;left: 0;position: absolute;
		width: 100%;height: 100%;
		overflow: hidden;
	}
	section.character .glitch {
		background: url(../img/back/chara_back-sp.png) no-repeat;
		background-color: var(--blend-color-1);
		background-size: cover;
	}
	.back {
		position: absolute;opacity: 0;
		width: 100%;height: 100%;
		background: url(../img/back/chara_back-sp.png) no-repeat 50% 80%;
		background-color: var(--blend-color-1);
		background-size: cover;
		transform: translate3d(0,0,0);
		background-blend-mode: var(--blend-mode-1);
	}
	.back:nth-child(n+2) {
		opacity: 0;
	}
	.imgloaded .back:nth-child(n+2) {
		animation-duration: var(--time-anim);
		animation-delay: var(--delay-anim);
		animation-timing-function: linear;
		animation-iteration-count: infinite;
	}
	.imgloaded .back:nth-child(2) {
		background-color: var(--blend-color-2);
		background-blend-mode: var(--blend-mode-2);
		animation-name: glitch-anim-1;
	}

	.imgloaded .back:nth-child(3) {
		background-color: var(--blend-color-3);
		background-blend-mode: var(--blend-mode-3);
		animation-name: glitch-anim-2;
	}

	.imgloaded .back:nth-child(4) {
		background-color: var(--blend-color-4);
		background-blend-mode: var(--blend-mode-4);
		animation-name: glitch-anim-3;
	}

	.imgloaded .back:nth-child(5) {
		background-color: var(--blend-color-5);
		background-blend-mode: var(--blend-mode-5);
		animation-name: glitch-anim-flash;
	}

	section.system {overflow: hidden;padding: 40% 0 0;margin: -40% 0 0;}
	section.system .bg-movie {
		width: 150%;height: 90vw;overflow: hidden;
		position: absolute;top: 10%;left: -25%;z-index: 0;
		transform: rotate(-20deg);
	}
	section.system::before {
		content: "";width: 100%;height: 90vw;
		position: absolute;top: 25%;left: 0;z-index: -101;
		background: none;
	}
	section.system::after {
		content: "";width: 150%;height: 90vw;overflow: hidden;
		position: absolute;top: 30%;left: -25%;z-index: -100;
		transform: rotate(20deg);
		background: rgba(0,114,255,.3);
	}
	section.system h1::before {
		content: "";width: 83px;height: 34px;display: block;
		background: url(../img/title/system@2x.png) no-repeat;
		background-size: 100%;margin: 0 auto;
	}
	section.system h1 ,
	section.system h2 {
		color: rgba(0,0,0,0);height: 34px;
		position: relative;padding: 93px 0 30px;margin: 0 auto;
	}
	section.system h2 {
		height: 22px;padding: 0 0 30px;
	}
	section.system h2::before {
		content: "";width: 214px;height: 22px;display: block;
		background: url(../img/title/system_title1@2x.png) no-repeat;
		background-size: 100%;margin: 0 auto;
	}
	section.system article:nth-of-type(2) h2::before {
		width: 107px;
		background: url(../img/title/system_title2@2x.png) no-repeat;
		background-size: 100%;
	}
	section.system article:nth-of-type(3) h2::before {
		width: 175px;
		background: url(../img/title/system_title3@2x.png) no-repeat;
		background-size: 100%;
	}
	section.system article {margin: 0 25px 40px}
	section.system article .box {overflow: hidden;margin: 0;}
	section.system article .box a {
		width: 60%;float: left;box-sizing: border-box;position: relative;
		border: solid 5px #212121;display: block;cursor: pointer;z-index: 10;
	}
	section.system article .box a::after {
		content: "";width: 24px;height: 24px;pointer-events: none;
		background: url(../img/icon/zoom@2x.png) center #212121 no-repeat;
		background-size: 50%;
		position: absolute;bottom: -5px;right: -5px;
	}
	section.system article .box a:last-child {
		margin: 20vw 0 0 -20%;z-index: 9;
	}
	section.system article p {
		width: 100%;line-height: 1.6;
		margin: 30px auto;position: relative;
	}

	section.spec .box {
		padding: 5px;margin:0 auto;position: relative;
		background: rgb(114,233,255);
		background: linear-gradient(88deg, rgba(114,233,255,1) 0%, rgba(245,100,209,1) 100%);
		box-sizing: border-box;
	}
	section.spec img.logo {
		width: calc(100% - 40px);display: block;margin: 0 20px;padding: 30px 0 25px;
	}
	section.spec .column2 {
		overflow: hidden;position: relative;
		padding: 5vw;
	}
	section.spec .column2 img {
		width: 73%;height: 40%;position: static;top: 5vw;left: 5vw;
		background: #474747;display: block;margin: 0 auto 20px;
	}
	section.spec .column2 dl {width: 100%;float: none;}
	section.spec dl div {overflow: hidden;margin: 0 0 20px;}
	section.spec dl dt {
		font-size: 1em;line-height: 1.54;text-align: left;
		float: left;width: 30%;position: relative;
		color: #f564d1;
	}
	section.spec dl dt::after {
		content: "：";color: #f564d1;padding: 0 .2em;
	}
	section.spec dl dd {
		font-size: 1.2em;line-height: 1.54;
		float: left;width: 70%;
	}
	section.spec dl dd a {
		color: #f564d1;text-decoration: underline;
		font-size: 1rem;
	}
	section.spec dl dd span {
		font-size: 1rem;display: inline-block;
	}
	section.spec dl dd strong {display: block;}
	section.spec h1 ,
	section.spec h2 ,
	section.spec h3 ,
	section.spec h4 {
		color: rgba(0,0,0,0);height: 34px;
		position: relative;padding: 93px 0 30px;margin: 0 auto;
	}
	section.spec h1 {padding: 0 0 30px;}
	section.spec h1::before ,
	section.spec h2::before ,
	section.spec h3::before ,
	section.spec h4::before {
		content: "";width: 54px;height: 34px;display: block;
		background: url(../img/title/spec@2x.png) no-repeat;
		background-size: 100%;margin: 0 auto;
	}
	section.spec h2 {height: 17px;padding: 20px 0;}
	section.spec h2::before {
		width: 111px;height: 17px;
		background: url(../img/title/spec_title1@2x.png) no-repeat;
		background-size: 100%;
	}
	section.spec h3 {height: 17px;padding: 40px 0 20px;}
	section.spec h3::before {
		width: 174px;height: 17px;
		background: url(../img/title/spec_title2@2x.png) no-repeat;
		background-size: 100%;
	}
	section.spec h3.title5::before {
		width: 123px;
		background: url(../img/title/spec_title5@2x.png) no-repeat;
		background-size: 100%;
	}
	section.spec h4 {height: 11px;padding: 0 0 15px;}
	section.spec h4::before {
		width: 120px;height: 12px;
		background: url(../img/title/spec_title3@2x.png) no-repeat;
		background-size: 100%;
	}
	section.spec h4.title4::before {
		width: 120px;
		background: url(../img/title/spec_title4@2x.png) no-repeat;
		background-size: 100%;
	}
	section.spec .specBox {background: #000;}
	section.spec .specBox.buy {text-align: center;padding: 0 25px 40px;}
	.specBox .linkBox {overflow: hidden;margin: 0 0 25px;flex-wrap: wrap;}
	.specBox .linkBox a {width: 50%;margin: 0 0 1%;}
	.specBox .linkBox a:nth-of-type(2) {margin: 0 0 1% 0;width: 100%;}
	.specBox a.link {
		display: flex;border: solid 1px #b55cad;padding: 1em 0;letter-spacing: 0;
		font-size: 1.2em;line-height: 1;color: #b55cad;box-sizing: border-box;
		width:100%;
	}
	.specBox a.link::after {
		content: "";position: absolute;top: 50%;right: 1.5rem;
		margin-top:-3px;
		width: 0;height: 0;
		border-style: solid;border-width: 3px 0 3px 6px;
		border-color: transparent transparent transparent #b55cae;
	}
	.specBox a.blue {color: #5c8ab5;border: solid 1px #5c8ab5;}
	.specBox a.linkOff {
		display: flex;border: solid 1px #939393;padding: 1em 0;letter-spacing: 0;
		font-size: 1.2em;line-height: 1;color: #939393;box-sizing: border-box;
		pointer-events: none;
		width: 100%;
		
		justify-content: center;
		align-items: center;
		}
	.specBox a.linkOff.rr {
	width:50%;
	min-height:64px;
}
	.specBox h3 {padding: 65px 0 45px;}
	.specBox h4 {padding: 0 0 30px;}

	ul.share {margin: 40px auto;overflow: hidden;width: 155px;}
	ul.share li {float: left;width: 20%;text-align: center;}
	ul.share li img {height: 22px;width: auto;}
	ul.share li:nth-of-type(2) {margin: 0 20%;}

	footer {
		text-align: center;color: #616161;
		background: #111;padding: 40px 0 100px;
	}
	footer a.scrollTop {
		display: block;width: 45px;height: 45px;
		position: absolute;bottom: 0;right: 0;z-index: 10000;
		background: #b55cad;
	}
footer.is-fixed a.scrollTop {position: fixed;}
	footer a.scrollTop::before {
		content: "";width: 7px;height: 14px;display: block;
		background: url(../img/icon/arrow3@2x.png) no-repeat;
		background-size: 100%;pointer-events: none;
		position: relative;top: 15px;left: 19px;
	}
	footer ul {margin: 0 25px 45px;overflow: hidden;width: calc(100% - 50px)}
	footer ul li {float: left;width: 33%;}
	footer ul li:nth-of-type(2) {margin: 0 1%;width: 32%;}
	footer p {
		font-size: 1em;line-height: 2;letter-spacing: 0;
		margin: 0 -15% -6vw;transform: scale(.7);transform-origin: center;
	}
	footer p span {display: block;}
	footer small {
		display: block;
		font-size: 1em;line-height: 2;letter-spacing: 0;
		transform: scale(.7);transform-origin: center;
	}
}

@media all and (min-width:770px) and (max-width:979px) {
	/* タブレット */
}

.fvWrap{
}
.fullWrap{
	opacity: 0;
	/*display: none;*/
	transition:  all 0.5s ease;
}
.fullWrap .on{
	display: inline!important;
	transition: all 0.5s;
}
.fullWrap .on2{
	opacity: 1!important;
	transition: all 0.5s;
}
.fvWrap{
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
transition: all 0.3s;
z-index: 100000;
opacity: 0;
}
.fv {
/*    display: none;*/
    width: 960px;
    max-width: none;
    max-height: none;
    min-height: auto;
    background: rgb(114,233,255);
    border: none;
    background: linear-gradient(88deg, rgba(114,233,255,1) 0%, rgba(245,100,209,1) 100%);
    box-sizing: border-box;
    text-align: center;
    margin: 0 0 124px;
    padding: 10px;
}
.fv .language {margin: 0 0 30px;}
.fv .language::before {
	content: "";width: 354px;height: 41px;position: static;
	background: url(../img/title/select@2x.png) no-repeat center center;
	background-size: 100%;display: block;margin: auto;
}
.fv img.logo {
    width: 633px;
    display: inline-block;
    margin: 66px 0 50px;
}
.fv .specBox {
    padding: 0 98px 65px;
}
.fv .specBox a.link {
    margin: 20px 0 0;
}
.fv .b_in{
	background: #000;
}
.fvWrap button.modal-cl {
    background: url(../img/icon/close@2x.png) no-repeat center;
    background-size: 194px;
    border: none;
    box-shadow: none;
    cursor: pointer;
    width: 194px;
    height: 54px;
    padding: 54px 0 0;
    box-sizing: border-box;
    position: absolute;
    right: -100%;
    left: -100%;
    bottom: -124px;
    margin: 0 auto;
}
.fv .fv-close{
	cursor: pointer;
}

@media all and (max-width:480px) {
/*SmartPhone*/
	.fvWrap {
	    position: fixed;
	    top: 50%;
	    left: 0;
	    transform: translateY(-55%);
	    transition: all 0.5s;
	    z-index: 100000;
	}
	.fv{
		width: 100%;
		margin-bottom: 0;
	}
	.fv img.logo {
		width: calc(100% - 40px);
		margin: 32px 20px;
	}
	.fv .language{
		margin: 0 0 18px;
	}
	.fv .language::before {
	    content: "";
	    width: 175px;
	    height: 19px;
	    position: static;
	    background: url(../img/title/select@2x.png) no-repeat center center;
	    background-size: 100%;
	    display: block;
	    margin: auto;
	}
	.fv .specBox{
		padding: 0 20px 32px;
	}
	.fv .specBox a.link {
	    display: flex;
	    border: solid 1px #b55cad;
	    padding: 1em 0;
	    letter-spacing: 0;
	    font-size: 1.2em;
	    line-height: 1;
	    color: #b55cad;
	    box-sizing: border-box;
	    width: 100%;
	}
	.fv .specBox a.blue{
		color: #5c8ab5;
    border: solid 1px #5c8ab5;
	}
	.fvWrap button.modal-cl {
	    background: url(../img/icon/close@2x.png) no-repeat center;
	    background-size: 194px;
	    border: none;
	    box-shadow: none;
	    cursor: pointer;
	    width: 86px;
	    height: 27px;
	    padding: 27px 0 0;
	    box-sizing: border-box;
	    position: absolute;
	    right: -100%;
	    left: -100%;
	    bottom: -57px;
	}
}