@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: "Yu Gothic", YuGothic, "Helvetica Neue", "Segoe UI", 'Hiragino Sans', 'Hiragino Kaku Gothic ProN', Meiryo, sans-serif;
background: url(../img/bg_pc.png) #000;color: #fff;letter-spacing: 0;font-feature-settings: "palt" 1;font-kerning: auto;-webkit-font-smoothing: antialiased;}
ul {list-style: none;}
main {display: block;}
a:link ,a:visited {color: #fff;text-decoration: none;}
img {width: 100%;vertical-align: bottom;}
.raj {font-family: 'Rajdhani';}
::selection {
	background: #eef9ff;color: #0f1d2d;
}
#mask {
	position: fixed;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)}
}
.brackets::before,
.brackets::after,
.brackets .b_in::before,
.brackets .b_in::after {
	position: absolute;z-index: 10;
	content: '';width: 7px;height: 7px;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
}
.brackets::before {
	top: 0;left: 0;
	border-top: 1px solid #fff;
	border-left: 1px solid #fff;
}
.brackets::after {
	bottom: 0;right: 0;
	border-bottom: 1px solid #fff;
	border-right: 1px solid #fff;
}
.brackets .b_in::before {
	top: 0;right: 0;
	border-top: 1px solid #fff;
	border-right: 1px solid #fff;
}
.brackets .b_in::after {
	bottom: 0;left: 0;
	border-bottom: 1px solid #fff;
	border-left: 1px solid #fff;
}

header {
	width: 100%;height: 99.5vh;display: flex;margin: 0 0 66px;position: relative;
	padding: 4px;box-sizing: border-box;
	--time-anim: 4s;
	--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;
}
header .img {position: relative;display: inline-block;width: 100%;height: 100%;overflow: hidden;}
header .img .b_in {width: 100%;height: 100%;padding: 3px;box-sizing: border-box;}
p.scrollTo span ,
header ul span {
	-ms-writing-mode: tb-rl;
	writing-mode: vertical-rl;font-weight: 700;font-size: 1.4em;line-height: 1;
}
header .logo {
	width: 360px;
	position: absolute;top: 15%;right: -100%;left: -100%;
	margin: 0 auto;padding: 15px 0 0;
}
header h1 {
	width: 360px;height: 234px;
	margin: 0 auto;
}
header p.lead {position: absolute;}
header p.lead {
	width: 40px;height: 392px;top: 15%;right: 13%;
	padding: 40px 16px;
	background: url(../img/lead@2x.png) center no-repeat;background-size: 40px 392px;
}
header p.lead span {color: rgba(0,0,0,0);}
header p.coming {
	font-size: 48px;font-weight: 700;text-align: center;
	width: 6em;height: 1em;padding: 0 0 15px;
	margin: auto;
}
p.scrollTo ,
header ul.share {
	width: 72px;height: 312px;box-sizing: border-box;
	position: relative;margin: auto 12px auto 4px;
}
p.scrollTo:hover span {-webkit-animation: glitch .5s infinite;}
p.scrollTo a {padding: 45px 24px;box-sizing: border-box;}
header ul.share {padding: 65px 24px;margin: auto 4px auto 12px;}
header ul.share span {display: inline-block;margin: 0 0 0 2px;}
header ul.share a {display: block;width: 100%;height: 100%;}
header ul.share li:hover {-webkit-animation: glitch .5s infinite;}
ul.share li {width: 20px;height: 20px;margin: 20px 0 30px;}
ul.share li.tw {background: url(../img/icon/tw.svg) no-repeat;background-size: 100%;}
ul.share li.fb {background: url(../img/icon/fb.svg) no-repeat;background-size: 100%;}
ul.share li.ln {background: url(../img/icon/ln.svg) no-repeat;background-size: 100%;}

/* Glitch styles */
.glitch {
	top: 0;left: 0;position: relative;
	width: 100%;height: 100%;
	overflow: hidden;
}
.back {
	position: absolute;
	width: calc(100% - 6px);
	height: calc(100% - 6px);
	background: url(../img/visual@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;
}
.imgloaded header p.coming {
	animation-delay: calc(var(--delay-anim) + var(--time-anim) * 0.2);
	animation-name: glitch-anim-text;
	animation-duration: var(--time-anim);
	animation-timing-function: linear;
	animation-iteration-count: infinite;
}

/* 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-text {
	0% {
		transform: translate3d(calc(-1 * var(--gap-horizontal)),0,0) scale3d(-1,-1,1);
		-webkit-clip-path: polygon(0 20%, 100% 20%, 100% 21%, 0 21%);
		clip-path: polygon(0 20%, 100% 20%, 100% 21%, 0 21%);
	}
	2% {
		-webkit-clip-path: polygon(0 33%, 100% 33%, 100% 33%, 0 33%);
		clip-path: polygon(0 33%, 100% 33%, 100% 33%, 0 33%);
	}
	4% {
		-webkit-clip-path: polygon(0 44%, 100% 44%, 100% 44%, 0 44%);
		clip-path: polygon(0 44%, 100% 44%, 100% 44%, 0 44%);
	}
	5% {
		-webkit-clip-path: polygon(0 50%, 100% 50%, 100% 20%, 0 20%);
		clip-path: polygon(0 50%, 100% 50%, 100% 20%, 0 20%);
	}
	6% {
		-webkit-clip-path: polygon(0 70%, 100% 70%, 100% 70%, 0 70%);
		clip-path: polygon(0 70%, 100% 70%, 100% 70%, 0 70%);
	}
	7% {
		-webkit-clip-path: polygon(0 80%, 100% 80%, 100% 80%, 0 80%);
		clip-path: polygon(0 80%, 100% 80%, 100% 80%, 0 80%);
	}
	8% {
		-webkit-clip-path: polygon(0 50%, 100% 50%, 100% 55%, 0 55%);
		clip-path: polygon(0 50%, 100% 50%, 100% 55%, 0 55%);
	}
	9% {
		-webkit-clip-path: polygon(0 70%, 100% 70%, 100% 80%, 0 80%);
		clip-path: polygon(0 70%, 100% 70%, 100% 80%, 0 80%);
	}
	9.9% {
		transform: translate3d(calc(-1 * var(--gap-horizontal)),0,0) scale3d(-1,-1,1);
	}
	10%, 100% {
		transform: translate3d(0,0,0) scale3d(1,1,1);
		-webkit-clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);
		clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);
	}
}
@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);
	}
}

p.scrollTo a {
	position: relative;display: block;overflow: hidden;
	width: 100%;height: 100%;
}
p.scrollTo a > span:last-of-type {
	position: absolute;bottom: 45px;right: 30px;overflow: hidden;line-height: 1;
	width: 1px;height: 160px;background: #666;display: block;
}
p.scrollTo a > span:last-of-type::before {
	content: "";width: 1px;height: 80%;
	position: absolute;right: 0;
	background: #fff;
	animation: btmTo 1.7s ease-in-out infinite;
}
p.scrollTo.btm a > span:last-of-type::before {
	animation: topTo 1.7s ease-in-out infinite;
}
@keyframes topTo {
	0% { bottom: -100%;}
	100% { bottom: 100%;}
}
@keyframes btmTo {
	0% { bottom: 100%;}
	100% { bottom: -100%;}
}

main#top section {margin: 0 0 63px;}
main#top section h1 {
	font-size: 1.4em;line-height: 1;font-weight: 700;text-align: center;
	position: relative;
}
main#top section h1::after {
	content: "";width: 100%;height: 1px;background: #fff;
	position: absolute;top: -100%;bottom: -100%;left: 0;
	margin: auto 0;
}
main#top section h1 span {
	display: inline-block;position: relative;z-index: 10;font-weight: 700;
	background: #000;padding: 0 1em;
}
main#top section h1 span::before ,
main#top section h1 span::after {
	content: "";width: 1px;height: .5em;background: #fff;
	position: absolute;top: .3em;left: 0;
}
main#top section h1 span::after {left: auto;right: 0;}
main#top ul {
	display: flex;justify-content: center;align-items: center;
	margin: 12px auto;width: 100%;flex-wrap: wrap;
}
main#top ul li {width: 20%;padding: 5px;position: relative;box-sizing: border-box;}
main#top ul li.brackets::before {
	top: 5px;left: 5px;
}
main#top ul li.brackets::after {
	bottom: 5px;right: 5px;
}
main#top ul li.brackets .b_in::before {
	top: 5px;right: 5px;
}
main#top ul li.brackets .b_in::after {
	bottom: 5px;left: 5px;
}
main#top ul li a {display: block;padding: 4px;cursor: pointer;}
.modal-overlay {
	z-index: 998;position: fixed;top: 0;left: 0;
	display: none;width: 100%;height: 120%;
	background: url(../img/bg_pc.png) #000;
}
.modal-content {
	z-index: 1001;position: fixed;
	display: none;max-width: 872px;margin: 0 76px 0 0;
}
.modal-content .b_in {padding: 4px;}
.modal-content button.modal-cl {
	background: url(../img/icon/close.svg) no-repeat center;background-size: 56px;
	border:none;box-shadow: none;cursor: pointer;
	color: #fff;font-size: 1.4em;font-weight: 700;line-height: 1;
	width: 72px;height: 72px;padding: 72px 0 0;box-sizing: border-box;
	position: absolute;right: -76px;top: 0;
}
.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;}
@-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);
	}
}


footer {position: relative;height: 312px;padding: }
footer .logo {
	width: 126px;height: 48px;
	position: absolute;left: 40px;bottom: 95px;
}
footer .logo:hover {-webkit-animation: glitch .5s infinite;}
footer small {
	font-size: 12px;
	display: block;padding: 192px 0 0;text-align: center;
}
footer p.scrollTo {
	position: absolute;bottom: 4px;right: 0;
}
footer p.scrollTo a {
	padding: 220px 28px 0;
	box-sizing: border-box;
}
footer p.scrollTo a > span:last-of-type {
	top: 45px;bottom: 0;right: 37px;
}

@media all and (max-width:480px) {
	/* スマホ */
	html {font-size: calc(62.5% + 4 * (100vw - 375px) / 150);}
	#mask {opacity: .25;}
	body {background: url(../img/bg_sp.png) #000;background-size: 100%;}
	.brackets::before,
	.brackets::after,
	.brackets .b_in::before,
	.brackets .b_in::after {width: 5px;height: 5px;}
	header {height: 85vh;display: block;margin: 0 0 10vh;}
	header .img {height: 90%;}
	p.scrollTo span ,
	header ul span {writing-mode: inherit;font-size: 1.1em;display: block;}
	header .logo {width: 61%;top: 12%;}
	header h1 {width: 87.5%;height: 35vw;}
	header p.lead {
		width: 20px;height: 245px;top: 12%;bottom: auto;right: 4px;left: auto;
		margin: auto;padding: 25px 16px;
		background-size:  20px 196px;
	}
	header p.coming {font-size: 3.1em;}
	p.scrollTo ,
	header ul.share {
		width: 30%;height: 10%;margin: 0;
		position: absolute;bottom: 0;left: 4px;
	}
	header ul.share {
		right: 4px;width: 67%;overflow: hidden;left: auto;
		padding: 6.3% 8%;
	}
	p.scrollTo a {padding: 21% 0 20% 50%;}
	ul.share span {float: left;padding: 0 5.5vw 0 0;display: block;}
	ul.share li {width: 6vw;height: 6vw;margin: -1.5vw 5.5vw 0 0;float: left;}
	p.scrollTo a > span:last-of-type {
		bottom: 5%;right: auto;left: 27%;
		height: 90%;
	}
	p.scrollTo a > span:last-of-type::before {height: 70%;}

	main#top section {margin: 0 0 100px;}
	main#top section:last-child {margin: 0 0 70px;}
	main#top section h1 {font-size: 1.1em;}
	main#top section h1 span {padding: 0 .8em;}
	main#top section h1 span::before ,
	main#top section h1 span::after {top: .2em;}
	main#top ul li {width: 50%;padding: 3px;}
	main#top ul li.brackets::before {top: 3px;left: 3px;}
	main#top ul li.brackets::after {bottom: 3px;right: 3px;}
	main#top ul li.brackets .b_in::before {top: 3px;right: 3px;}
	main#top ul li.brackets .b_in::after {bottom: 3px;left: 3px;}
	.modal-overlay {
			background: url(../img/bg_sp.png) #000;background-size: 100%;
	}
	.modal-content {
		z-index: 1001;position: fixed;margin: 4px;
		display: none;width: calc(100% - 8px);box-sizing: border-box;
	}
	.modal-content .b_in {padding: 4px;}
	.modal-content button.modal-cl {
		background: url(../img/icon/close.svg) no-repeat center;background-size: 43px;
		border:none;box-shadow: none;cursor: pointer;
		color: #fff;font-size: 1.4em;font-weight: 700;line-height: 1;
		width: 57px;height: 57px;padding: 57px 0 0;box-sizing: border-box;
		position: absolute;right: 0;top: calc(50% - 50vh);
	}
	.modal-content button.modal-cl span.b_in {padding: 0;}
	.modal-content button.modal-cl span:last-of-type {
		display: inline-block;margin: 0;padding: 0;
		font-weight: 700;left: -3.5em;
		position: absolute;top: 42%;
	}
	.thumb span.zoom {
		position: absolute;bottom: 3px;right: 3px;z-index: 0;
	}
	main#top ul li a {padding: 3px;}
	footer {position: relative;height: 122px;}
	footer .logo {
		width: 26%;height: 11vw;
		left: 2em;bottom: 50px;
	}
	footer small {padding: 115px 0 20px;}
	footer p.scrollTo {
		height: 48%;bottom: 50px;right: 4px;left: auto;
	}
	footer p.scrollTo a {
		padding: 6.3vw 0 6vw 20%;
	}
	footer p.scrollTo a > span:last-of-type {
		bottom: 5%;left: auto;right: 21%;top: auto;
		height: 90%;
	}
}

@media all and (min-width:980px) {
	/* PC */
}

/*LOADING*/
#loading {
	position:fixed;
	left:0;
	top:0;
	right:0;
	bottom:0;
	z-index:5000;
	background:#000;
}
#loading p {
	width:360px;
	height:234px;
	max-width:60%;
	background:url(../img/logo.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;
}