@charset "utf-8";

@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100..900&family=Noto+Serif+JP:wght@200..900&family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap');





html,

body {

	width: 100%;

	height: 100%;

}





body {

	background: #000;

	font-family: "Noto Sans JP", sans-serif;

	font-optical-sizing: auto;

	font-weight: normal;

	font-style: normal;

	font-size: 12px;

	position: relative;

}



img {

	width: 100%;

	height: auto;

}











.fade {

	position: relative;

	opacity: 0;

	top: 50px;

	transition: all .5s ease-in-out;

}



.fade.active {

	top: 0;

	opacity: 1;

}









/* SPLASH */





#loading {

	font-family: sans-serif;

	position: fixed;

	top: 0;

	left: 0;

	width: 100%;

	height: 100%;

	background: #000;

	z-index: 100;

}



#loading>div {

	width: 100%;

	height: 100%;

	display: flex;

	justify-content: center;

	align-items: center;

	color: #fff;

}



#splash {

	position: fixed;

	top: 0;

	left: 0;

	width: 100%;

	height: 100%;

	object-fit: cover;

	overflow: hidden;

	background: #000;

	z-index: 99;

}



#splash,

#splash>video {

	width: 100%;

	height: 100%;

	object-fit: cover;

}











/* MAIN */



main {

	display: none;

	background: #000;

	color: #fff;

	position: relative;

}





/* HEADER */

header {

	position: fixed;

	width: 100%;

	height: 84px;

	display: flex;

	justify-content: space-between;

	z-index: 100;

}



header>.base {

	position: absolute;

	width: 100%;

	height: 84px;

	background: #000;

	border-bottom: 4px solid #AD0000;

	z-index: 3;

}



header>.logo {

	width: 397px;

	height: 148px;

	background: url(../images/header_bottom.svg) right bottom/397px no-repeat;

	display: flex;

	justify-content: center;

	align-items: center;

	z-index: 5;

}



header>.logo img {

	max-width: 270px;

	width: calc(100% - 60px);

}



header>#menu_button {

	display: none;

}



header>#nav {

	width: 100%;

	max-width: 1106px;

	z-index: 5;

	margin-right: 56px;

}



header>#nav>nav {

	display: flex;

	margin-top: 30px;

	width: 100%;

	max-width: 1106px;

	justify-content: space-between;

}



header>#nav>nav a {

	width: 100%;

	max-width: 118px;

	white-space: nowrap;

	padding: 0 10px;

	height: 50px;

	display: block;

	color: #fff;

	text-decoration: none;

	text-align: center;

	transition: border-color .3s ease-in-out;

	border-bottom: 4px solid #000;

}



header>#nav>nav a:hover {

	border-bottom: 4px solid #fff;

}



header>#nav>nav .en {

	font-family: "Noto Serif JP", serif;

	font-weight: bold;

	font-size: 16px;

	line-height: 1;

	color: #f5f5f5;

	margin-bottom: 3px;

}



header>#nav>nav .ja {

	font-family: "Noto Sans JP", sans-serif;

	font-weight: 500;

	font-size: 10px;

	line-height: 1;

	color: #9b9b9b;

}









/* SCROLL */

.scroll {

	width: 23px;

	position: fixed;

	bottom: 0;

	left: 59px;

	z-index: 10;



}







/* KV */

main>.content .kv {

	aspect-ratio: 1920/1080;

	background: url(../images/main.jpg) center/cover no-repeat;

	position: relative;

}



main>.content .kv .logo {

	width: 100%;

	max-width: 918px;

	position: absolute;

	bottom: 70px;

	left: 0;

	right: 0;

	margin: 0 auto;

}









/* SECTION */

section {

	padding: 224px 0 80px;

	position: relative;

}



section .header {

	position: absolute;

	top: 0;

	left: 0;

	width: 100%;

	height: 84px;

	background: #000;

	z-index: 1;

}



section .header::after {

	display: block;

	content: '';

	width: 100%;

	height: 4px;

	background: linear-gradient(to right, #000 0%, #ad0000 27.09%, #ad0000 58.47%, #ad0000 74.38%, #000 100%);

	position: absolute;

	bottom: 0;

	left: 0;

}



section .header>div {

	position: absolute;

	left: 0;

	right: 0;

	top: 0;

	height: 144px;

	width: 100%;

	max-width: 720px;

	margin: 0 auto;

	background: url(../images/section_header.svg) center bottom/720px no-repeat;

	z-index: 2;

}





section .header .en {

	font-family: "Noto Serif JP", serif;

	font-weight: normal;

	font-size: 60px;

	text-align: center;

	color: #f5f5f5;

	text-shadow: 0px 3px 6px #dc000c;



}





section .header .ja {

	font-family: "Noto Sans JP", sans-serif;

	font-weight: 500;

	font-size: 20px;

	letter-spacing: 0.1em;

	text-align: center;

	color: #9b9b9b;

}







/* cut movie */

.movie {

	width: 100%;

	aspect-ratio: 16/9;

}



.movie video {

	width: 100%;

	height: 100%;

}









/* MOVIE */

#movie {

	background: url(../images/movie_bg.jpg) center/cover no-repeat;

	text-align: center;

}



#movie #youtube {

	width: 100%;

	max-width: 951px;

	aspect-ratio: 16/9;

	margin: auto;

}



#movie #youtube iframe {

	width: 100%;

	height: 100%;

	margin: auto;

}









/* CONCEPT */

#concept {

	background: url(../images/concept_bg.jpg) center/cover no-repeat;

	text-align: center;

	color: #f5f5f5;

}



#concept .title {

	font-family: "Noto Serif JP", serif;

	font-weight: bold;

	font-size: 40px;

	letter-spacing: 0.1em;

	margin-bottom: 30px;

}



#concept .body {

	font-family: "Noto Sans JP", sans-serif;

	font-weight: 500;

	font-size: 16px;

	line-height: 40px;

}









/* POINT */

#point {

	background: url(../images/point_bg.jpg) center/cover no-repeat;

	text-align: center;

	color: #f5f5f5;

}



#point .unit {

	margin-bottom: 40px;

}



#point .frame {

	background: url(../images/point_frame.png) center/100% 100% no-repeat;

	width: 100%;

	max-width: 1400px;

	aspect-ratio: 1400/641;

	margin: 0 auto;

	position: relative;

}

#point .caption {

	margin: 24px auto 0;

	width: 100%;

	max-width: 1200px;

	font-size: 14px;

	line-height: 29px;

	color: #f5f5f5;

	text-align: left;

}



#point .frame>.inner {

	padding: calc(100% * (126 / 1400)) 7.14% calc(100% * (126 / 1400)) 10%;

}



#point .frame .point {

	background: url(../images/point_circle.svg) center/contain no-repeat;

	width: 17.79%;

	aspect-ratio: 1;

	position: absolute;

	top: 4.68%;

	left: 4.36%;

	display: flex;

	justify-content: center;

	align-items: center;

	line-height: 1;

	text-align: center;

	text-shadow: 0px 0px 21px #ad0000;

	z-index: 1;

}



#point .frame .point>div {

	font-family: "Roboto", sans-serif;

	font-weight: bold;

	font-size: 30px;

	line-height: 1;

}



#point .frame .point>div>em {

	display: block;

	margin-top: -4px;

	font-family: "Noto Serif JP", serif;

	font-weight: normal;

	font-size: 60px;

	font-style: normal;

}



#point .frame .flex {

	width: 100%;

	display: flex;

	justify-content: space-between;

	position: relative;

	z-index: 2;

}



#point .frame .flex .text {

	width: 47.84%;

	text-align: left;

	color: #f5f5f5;

	margin-top: 104px;

}



#point .frame .flex .text .title {

	font-family: "Noto Serif JP", serif;

	font-weight: bold;

	font-size: 34px;

	line-height: 1.4;

	margin-bottom: 20px;

}



#point .frame .flex .text .body {

	font-family: "Noto Sans JP", sans-serif;

	font-weight: 300;

	font-size: 16px;

	line-height: 2.2;

}





#point .frame .flex .image {

	width: 48%;

}









/* GAME FLOW */

#gameflow {

	background: url(../images/gameflow_bg.jpg) top center/100% 100% no-repeat;

	text-align: center;

	color: #f5f5f5;

	padding-bottom: 56px;

}



#gameflow .image {

	width: 100%;

	max-width: 832px;

	margin: auto;

}











/* AT FLOW */

#atflow {

	background: url(../images/atflow_bg.jpg) top center/100% 100% no-repeat;

	text-align: center;

	color: #f5f5f5;

	padding-bottom: 56px;

}



#atflow .image {

	width: 100%;

	max-width: 831px;

	margin: auto;

}













/* CONTENTS */

#contents {

	background: url(../images/contents_bg.jpg) top center/100% 100% no-repeat;

	text-align: center;

	color: #f5f5f5;

}



#contents .flex {

	max-width: 1400px;

	margin: 0 auto;

	display: flex;

	flex-wrap: wrap;

	justify-content: center;

}



#contents .flex .unit {

	width: 301px;

	height: 160px;

	background: url(../images/contents_unit.svg) center/contain no-repeat;

	color: #fff;

	margin: 0 4px 16px;

	text-align: center;

	color: #ededed;

	display: flex;

	flex-direction: column;

	justify-content: center;

	font-family: "Noto Serif JP", serif;

}



#contents .flex .unit .title {

	font-weight: bold;

	font-size: 20px;

	line-height: 24px;

	padding-bottom: 16px;

	position: relative;

}





#contents .flex .unit .title>span {

	font-size: 14px;

}



#contents .flex .unit .title::after {

	position: absolute;

	content: '';

	width: 130px;

	height: 1px;

	background: #AD0000;

	left: 0;

	right: 0;

	bottom: 0;

	margin: auto;

}





#contents .flex .unit .artist {

	margin-top: 8px;

	font-weight: 500;

	font-size: 18px;

}













/* SPEC */

#spec {

	background: url(../images/spec_bg.jpg) top center/100% 100% no-repeat;

	text-align: center;

	color: #f5f5f5;

	padding-bottom: 56px;

}



#spec .image {

	width: 100%;

	height: 100%;

	max-width: 1200px;

	margin: auto;

}



#spec .image .flex {

	display: flex;

	width: 100%;

	height: 100%;

	justify-content: space-between;

}



#spec .image .l {

	display: flex;

	flex-direction: column;

	justify-content: space-between;

	width: 62.08%;

}



#spec .image .r {

	width: 34.59%;

	flex-shrink: 0;

}













/* FOOTER */

footer {

	padding: 32px 0 0;

	background: #000;

	font-size: 14px;

	line-height: 2;

	text-align: center;

	color: #f5f5f5;

}



footer>div {

	margin-bottom: 18px;

}



footer>div>span#complete {

	display: inline-block;

	border: 1px solid rgba(245, 245, 245, .54);

	padding: 5px 10px;

	line-height: 1;

	font-size: 14px;

	color: #f5f5f5;

}



footer img {

	display: inline-block;

	vertical-align: middle;

}



footer #smaslo {

	width: 55px;

	margin-right: 10px;

}



footer #khara {

	width: 74px;

	margin-right: 16px;

}



footer #bisty {

	width: 86px;

	margin-right: 16px;

}



footer #fields {

	width: 122px;

}







footer #caution {

	margin-top: 35px;

	word-break: keep-all;

	overflow-wrap: break-word;

	background-color: rgba(220, 0, 12, 0.53);

	font-family: "Noto Sans JP", sans-serif;

	font-weight: 500;

	font-size: 14px;

	line-height: 1;

	color: #f5f5f5;

	padding: 23px;

}



































/* PC */

@media screen and (min-width: 1024px) {

	.sp {

		display: none;

	}

}









/* SP */

@media screen and (max-width: 1024px) {

	.pc {

		display: none;

	}





	/* HEADER */

	header {

		position: fixed;

		width: 100%;

		height: 50px;

		display: flex;

		justify-content: space-between;

	}



	header>.base {

		position: absolute;

		width: 100%;

		height: 50px;

		background: #000;

		border-bottom: 2px solid #AD0000;

		z-index: 3;

	}



	header>.logo {

		width: 180px;

		height: 79px;

		background: url(../images/header_bottom.svg) right bottom/180px no-repeat;

		z-index: 5;

		position: relative;

	}



	header>.logo img {

		position: absolute;

		left: 10px;

		top: 15px;

		width: 137px;

	}



	header>#menu_button {

		display: block;

		position: absolute;

		right: 20px;

		top: 14px;

		width: 18px;

		height: 18px;

		background: url(../images/icon_menu.svg) center/18px no-repeat;

		z-index: 5;

	}



	header>#menu_button.open {

		background: url(../images/icon_close.svg) center/17px no-repeat;

	}



	header>#nav {

		width: 100%;

		max-width: 1106px;

		position: absolute;

		top: -100vh;

		transition: top .3s ease-in-out;

		z-index: 1;

	}



	header>#nav.open {

		top: 50px;

	}



	header>#nav>nav {

		display: flex;

		width: 100%;

		height: 100vh;

		background: linear-gradient(#000 70%, #620000 100%), #000;

		flex-direction: column;

		justify-content: start;

		z-index: 1;

		margin-top: 0;

		margin-right: 0;

		padding-top: 29px;

	}



	header>#nav>nav a {

		text-align: center;



		width: calc(100% - 60px);

		margin-left: 30px;

		max-width: none;

		padding: 30px 0;

		height: auto;

		display: flex;

		align-items: center;

		transition: none;

		border-bottom: none;

	}



	header>#nav>nav a:hover {

		border-bottom: none;

	}



	header>#nav>nav a:not(:last-child) {

		border-bottom: 1px solid #AD0000;

	}



	header>#nav>nav a:not(:last-child):hover {

		border-bottom: 1px solid #AD0000;

	}





	header>#nav>nav .en {

		font-size: 18px;

		margin-bottom: 0;

		margin-right: 12px;

	}



	header>#nav>nav .ja {

		font-size: 14px;

	}









	/* SCROLL */

	.scroll {

		width: 17px;

		left: 16px;

	}







	/* KV */

	main>.content .kv {

		aspect-ratio: auto;

		width: 100%;

		height: 100svh;

		background: url(../images/main_sp.jpg) center/cover no-repeat;

	}



	main>.content .kv .logo {

		width: 84%;

		max-width: 315px;

		bottom: 22px;

	}









	/* SECTION */

	section {

		padding: 145px 0 40px;

		position: relative;

	}



	section .header {

		height: 84px;

	}



	section .header>div {

		height: 105px;

		max-width: 194px;

		background: url(../images/section_header_sp.svg) center bottom/194px no-repeat;

	}





	section .header .en {

		margin-top: 15px;

		font-size: 30px;

	}





	section .header .ja {

		margin-top: -2px;

		font-size: 12px;

		letter-spacing: 0.1em;

	}

























	/* MOVIE */

	#movie {

		padding-left: 40px;

		padding-right: 40px;

	}



	#movie #youtube {

		box-shadow: 0px 0px 30px rgba(220, 0, 12, 0.8);

	}











	/* CONCEPT */

	#concept {

		background: linear-gradient(rgba(0, 0, 0, 0) 70%, rgba(0, 0, 0, 1) 100%), url(../images/concept_bg.jpg) center/cover no-repeat;

		text-align: center;

		color: #f5f5f5;

	}



	#concept .title {

		font-size: 20px;

		letter-spacing: 0.1em;

		line-height: 32px;

		margin-bottom: 24px;

	}



	#concept .body {

		margin: 0 20px;

		font-size: 14px;

		line-height: 32px;

	}









	/* POINT */

	#point {

		padding-left: 20px;

		padding-right: 20px;

		padding-bottom: 14px;

	}



	#point .frame {

		background: url(../images/point_frame_sp.png) center/100% 100% no-repeat;

		width: 100%;

		aspect-ratio: auto;

		margin: 0 auto 24px;

		height: 100%;

	}



	#point .frame>.inner {

		padding: 99px 24px 79px 24px;

	}



	#point .frame .point {

		background: url(../images/point_circle.svg) center/contain no-repeat;

		width: 100px;

		top: 11px;

		left: 11px;

	}



	#point .frame .point>div {

		font-size: 12px;

	}



	#point .frame .point>div>em {

		margin-top: 0;

		font-size: 26px;

	}



	#point .frame .flex {

		display: block;

		overflow: hidden;

	}



	#point .frame .flex .text {

		width: 100%;

		margin-top: 0;

	}



	#point .frame .flex .text .title {

		font-size: 18px;

		letter-spacing: 0.1em;

		line-height: 28px;

		margin-bottom: 24px;

	}



	#point .frame .flex .text .body {

		font-weight: 500;

		font-size: 14px;

		line-height: 32px;

		margin-bottom: 83px;

	}





	#point .frame .flex .image {

		width: 243px;

		margin: auto;

	}









	/* GAME FLOW */

	#gameflow {

		background: url(../images/gameflow_bg_sp.jpg) top center/cover no-repeat;

		padding-left: 20px;

		padding-right: 20px;

		padding-bottom: 40px;

	}



	#gameflow .image {

		width: 100%;

	}











	/* AT FLOW */

	#atflow {

		background: url(../images/atflow_bg_sp.jpg) top center/cover no-repeat;

		padding-left: 20px;

		padding-right: 20px;

		padding-bottom: 40px;

	}



	#atflow .image {

		width: 100%;

	}















	/* CONTENTS */

	#contents {

		background: url(../images/contents_bg_sp.jpg) top center/cover no-repeat;

		text-align: center;

		color: #f5f5f5;

		padding-bottom: 16px;

	}



	#contents .flex {

		display: flex;

	}



	#contents .flex .unit {

		width: 170px;

		height: 117px;

		background: url(../images/contents_unit_sp.svg) center/contain no-repeat;

		margin: 0 2px 24px;

	}



	#contents .flex .unit .title {

		padding-top: 16px;

		padding-bottom: 8px;

		line-height: 16px;

		font-size: 14px;

	}



	#contents .flex .unit .title>span {

		font-size: 10px;

	}



	#contents .flex .unit .artist {

		margin-top: 6px;

		font-size: 14px;

	}













	/* SPEC */

	#spec {

		background: url(../images/spec_bg_sp.jpg) top center/cover no-repeat;

		text-align: center;

		color: #f5f5f5;

		padding-left: 20px;

		padding-right: 20px;

		padding-bottom: 40px;

	}



	#spec .image {

		width: 100%;

		margin: auto;

	}



	#spec .image .flex {

		display: block;

	}



	#spec .image .flex .l,

	#spec .image .flex .r {

		width: 100%;

		display: block;

	}



	#spec .image .flex .l .u,

	#spec .image .flex .l .d {

		margin-bottom: 32px;

	}



	#spec .image .flex .l .u {

		max-width: 506px;

		margin-right: auto;

		margin-left: auto;

	}



	#spec .image .flex .l .u img {

		width: 100%;

		max-width: none;

		margin-bottom: 20px;

	}



	#spec .image .flex .l .d {

		margin-right: auto;

		margin-left: auto;

	}



	#spec .image .flex .l .d img {

		width: 100%;

		max-width: none;

		margin-bottom: 20px;

	}



	#spec .image .flex .r {

		width: 100%;

		display: block;

		max-width: 405px;

		margin-right: auto;

		margin-left: auto;

	}



	#spec .image .flex .r img {

		max-width: 405px;

	}













	/* FOOTER */

	footer {

		padding: 24px 0 0;

		background: #000;

		font-size: 14px;

		line-height: 2;

		text-align: center;

		color: #f5f5f5;

	}



	footer>div {

		margin-bottom: 2px;

	}



	footer>div>span#complete {

		display: inline-block;

		border: 1px solid rgba(245, 245, 245, .54);

		padding: 5px 10px;

		line-height: 1;

		font-size: 14px;

		color: #f5f5f5;

	}



	footer img {

		display: inline-block;

		vertical-align: middle;

	}



	footer #smaslo {

		width: 55px;

		margin-right: 10px;

	}



	footer #khara {

		width: 74px;

		margin-right: 16px;

	}



	footer #bisty {

		width: 86px;

		margin-right: 16px;

	}



	footer #fields {

		width: 122px;

	}







	footer #caution {

		margin-top: 24px;

		font-size: 12px;

		line-height: 2;

	}





	footer #caution div {

		width: 260px;

		margin: 0 auto;

	}



}