@charset "UTF-8";

:root{
	--body : #333;
	--link : #333;
	--primary : #100454;
}

/*--------------------------------------------
HTML
---------------------------------------------*/

@media screen and (max-width: 768px){
	html{
		font-size : calc( 10 * 100vw / 768 );
	}
}

@media print,screen and (min-width: 769px){
	html{
		font-size : 10px;
	}
}

/*--------------------------------------------
BODY
---------------------------------------------*/

body{
	background-color : #e7e7e7;
}

@media screen and (max-width: 768px){
	body{
		font-size : 2.4rem;
		min-height : 100vh;
	}
}

@media print,screen and (min-width: 769px){
	body{
		font-size : 1.6rem;
		min-width : 1200px;
	}
}

/*--------------------------------------------
WRAPPER
---------------------------------------------*/

.wrap{
	margin-left : auto;
	margin-right : auto;
}

@media screen and (max-width: 768px){
	.wrap{
		padding-left : calc( 24 * 100% / 768 );
		padding-right : calc( 24 * 100% / 768 );
	}
}

@media print,screen and (min-width: 769px){
	.wrap{
		padding-left : calc( ( 100% - 1180px ) / 2 );
		padding-right : calc( ( 100% - 1180px ) / 2 );
	}
}

@media print,screen and (min-width: 769px) and (-ms-high-contrast:none){
	.wrap{
		padding-left : calc( ( 100% - 1180.01px ) / 2 );
		padding-right : calc( ( 100% - 1180.01px ) / 2 );
	}
}

/*--------------------------------------------
HEADER
---------------------------------------------*/

@media screen and (max-width: 768px){
	#header{
		padding-left : calc( 24 * 100% / 768 );
		height : calc( 115 * 100vw / 768 );
		background : url("../images/header/bg_sp.jpg") 0 0 / auto 100% no-repeat;
		padding-top : calc( 17 * 100vw / 768 );
	}
	#header .logo{
		display : block;
	}
	#header .logo img{
		height : calc( 77 * 100vw / 768 );
	}
	#header .logo span{
        display: block;
        color: #666;
        font-size : 0.8rem;
        padding-top: calc( 3 * 100vw / 768 );
	}
}

@media print,screen and (min-width: 769px){
	#header{
		padding-left : 24px;
		padding-right : 135px;
		height : 115px;
		background : url("../images/header/bg_pc.jpg") center 0 / auto 100% repeat-x;
		display : flex;
		align-items : flex-start;
		justify-content : space-between;
		width : 100%;
	}
	#header .logo{
		display : flex;
		align-items : flex-end;
		margin-top : 32px;
		flex-grow : 1;
	}
	#header .logo img{
		height : 64px;
	}
	#header .logo span{
		color : #fff;
		font-size : 1.4rem;
		line-height : 1.2857;
		letter-spacing : .1em;
		font-weight : 500;
		margin-left : 18px;
	}
	#header ul{
		height : 100%;
		display : flex;
		width : 240px;
	}
	#header li{
		width : 80px;
	}
	#header li a{
		width : 100%;
		height : 100%;
		display : flex;
		align-items : center;
		justify-content : center;
		text-align : center;
	}
	#header .youtube img{
		height : 36px;
	}
	#header .instagram img{
		height : 31px;
	}
	#header .twitter img{
		height : 26px;
	}
	#header .ticket img{
		height : 32px;
	}
}

/*--------------------------------------------
MENU BUTTON
---------------------------------------------*/

body.is-open{
	overflow : hidden;
}

body.is-open #nav{
	max-height : 100vh;
}

body.is-open #header #menuBtn > span:nth-of-type(1) span:nth-of-type(1){
	transform : translateY( calc( 10 * 100vw / 768 ) ) scale(0);
}

body.is-open #header #menuBtn > span:nth-of-type(1) span:nth-of-type(2){
	transform : rotate(-45deg);
}

body.is-open #header #menuBtn > span:nth-of-type(1) span:nth-of-type(3){
	transform : rotate(45deg);
}

body.is-open #header #menuBtn > span:nth-of-type(1) span:nth-of-type(4){
	transform : translateY( calc( -10 * 100vw / 768 ) ) scale(0);
}

body.is-open #header #menuBtn > span:nth-of-type(1) span:nth-of-type(1){
	transform : translateY( 10px ) scale(0);
	opacity : 0;
}

body.is-open #header #menuBtn > span:nth-of-type(1) span:nth-of-type(4){
	transform : translateY( -10px ) scale(0);
	opacity : 0;
}

#menuBtn{
	z-index : 11;
	position : absolute;
}

#menuBtn span{
	font-size : 0;
}

#menuBtn > span:nth-of-type(1){
	width : 100%;
	height : 100%;
	position : relative;
	display : block;
}

#menuBtn span span{
	display : block;
	position : absolute;
	left : 0;
	transition : all .4s;
	width : 100%;
}

#menuBtn span span:nth-of-type(1){
	top : 0;
}

#menuBtn span span:nth-of-type(4){
	bottom : 0;
}

#menuBtn{
	position : fixed;
	top : 0;
	right : 0;
	z-index : 12;
	background-color : #bb0a17;
}

#menuBtn > span:nth-of-type(1) span{
	background-color : #fff;
}

#menuBtn > span:nth-of-type(2){
	text-align : center;
	transition : opacity .3s ease-in;
	-webkit-backface-visibility : hidden;
	        backface-visibility : hidden;
	will-change : opacity;
}

@media screen and (max-width: 768px){
	#menuBtn{
		width : calc( 115 * 100vw / 768 );
		height : calc( 115 * 100vw / 768 );
		padding-top : calc( 38 * 100vw / 768 );
		padding-left : calc( 37.5 * 100% / 768 );
		padding-right : calc( 37.5 * 100% / 768 );
		padding-bottom : calc( 30 * 100vw / 768 );
	}
	#menuBtn > span:nth-of-type(1){
		height : calc( 30 * 100vw / 768 );
	}
	#menuBtn > span:nth-of-type(1) span{
		height : calc( 4 * 100vw / 768 );
	}
	#menuBtn > span:nth-of-type(1) span:nth-of-type(2) , #menuBtn > span:nth-of-type(1) span:nth-of-type(3){
		top : calc( 13 * 100vw / 768 );
	}
	#menuBtn > span:nth-of-type(2){
		display : block;
		margin-top : calc( 6 * 100vw / 768 );
	}
	#menuBtn > span:nth-of-type(2) img{
		height : calc( 11 * 100vw / 768 );
	}
}

@media print,screen and (min-width: 769px){
	#menuBtn{
		width : 115px;
		height : 115px;
		padding-top : 45px;
		padding-left : 37.5px;
		padding-right : 37.5px;
		padding-bottom : 26px;
	}
	#menuBtn > span:nth-of-type(1){
		height : 26px;
	}
	#menuBtn > span:nth-of-type(1) span{
		height : 2px;
	}
	#menuBtn > span:nth-of-type(1) span:nth-of-type(2) , #menuBtn > span:nth-of-type(1) span:nth-of-type(3){
		top : 12px;
	}
	#menuBtn > span:nth-of-type(2){
		display : block;
		margin-top : 8px;
	}
	#menuBtn > span:nth-of-type(2) img{
		height : 11px;
	}
}

body.is-open #menuBtn > span:nth-of-type(2){
	opacity : 0;
}

/*--------------------------------------------
NAV
---------------------------------------------*/

#nav{
	position : fixed;
	transform : translateX( 0 );
	z-index : 11;
	transition : transform .5s ease-in;
	overflow-y : auto;
	max-height : 100vh;
	top : 0;
	left : 100%;
}

#nav .scroll{
	overflow-y : auto;
}

body.is-open #nav{
	transform : translateX( -100% );
}

#nav{
	min-height : 100vh;
}

body.is-open:before{
	content : "";
	display : block;
	position : fixed;
	top : 0;
	left : 0;
	width : 100vw;
	height : 100vh;
	background-color : rgba(0,0,0,.8);
	z-index : 5;
}

body.is-open #nav{
	transition-delay : 0s;
}

#nav{
	background-color : #bb0a17;
	transition-delay : .3s;
}

@media screen and (max-width: 768px){
	#nav{
		width : calc( 568 * 100vw / 768 );
	}
	#nav .scroll{
		height : 100vh;
		padding-top : calc( 124 * 100vw / 768 );
		padding-bottom : calc( 124 * 100vw / 768 );
		padding-left : calc( 52 * 100% / 568 );
		padding-right : calc( 52 * 100% / 568 );
	}
}

@media print,screen and (min-width: 769px){
	#nav{
		width : 700px;
	}
	#nav .scroll{
		height : 100vh;
		padding-top : 100px;
		padding-bottom : 100px;
		padding-left : 100px;
		padding-right : 100px;
        scrollbar-face-color: #ff8c00;
        scrollbar-track-color: #fff8dc;
        scrollbar-arrow-color: #ffffff;
        scrollbar-highlight-color: #fff8dc;
        scrollbar-shadow-color: #d2691e;
        scrollbar-3dlight-color: #ffebcd;
        scrollbar-darkshadow-color: #8b0000;
	}
}

/*--------------------------------------------
NAV LINKS
---------------------------------------------*/

#navGlobal , #navSNS{
	overflow : hidden;
}

#navGlobal li , #navSNS li{
	opacity : 0;
	transform : translateX( 100% );
	transition-property : opacity , transform;
	transition-duration : .3s;
	transition-timing-function : ease-in;
	transition : .3s ease-in;
}

body.is-open #navGlobal li , body.is-open #navSNS li{
	opacity : 1;
	transform : translateX(0);
}

#navGlobal li:nth-child(1){
	transition-delay : .56s;
}

#navGlobal li:nth-child(2){
	transition-delay : .55s;
}

#navGlobal li:nth-child(3){
	transition-delay : .54s;
}

#navGlobal li:nth-child(4){
	transition-delay : .53s;
}

#navGlobal li:nth-child(5){
	transition-delay : .52s;
}

#navGlobal li:nth-child(6){
	transition-delay : .51s;
}

#navGlobal li:nth-child(7){
	transition-delay : .5s;
}
#navGlobal li:nth-child(8){
	transition-delay : .5s;
}
#navGlobal li:nth-child(9){
	transition-delay : .5s;
}
#navGlobal li:nth-child(10){
	transition-delay : .5s;
}

#navGlobal a{
	color : #fff;
	font-family : "Teko", sans-serif;
	font-weight : 700;
	letter-spacing : .1em;
	display : block;
	font-size : 5rem;
}

@media screen and (max-width: 768px){
	#navGlobal li + li{
		margin-top : calc( 40 * 100vw / 768 );
	}
}

@media print,screen and (min-width: 769px){
	#navGlobal li + li{
		margin-top : 40px;
	}
}

body.is-open #navGlobal li:nth-child(1){
	transition-delay : .3s;
}

body.is-open #navGlobal li:nth-child(2){
	transition-delay : .31s;
}

body.is-open #navGlobal li:nth-child(3){
	transition-delay : .32s;
}

body.is-open #navGlobal li:nth-child(4){
	transition-delay : .33s;
}

body.is-open #navGlobal li:nth-child(5){
	transition-delay : .34s;
}

body.is-open #navGlobal li:nth-child(6){
	transition-delay : .35s;
}

body.is-open #navGlobal li:nth-child(7){
	transition-delay : .36s;
}

#navSNS{
	display : flex;
	align-items : flex-start;
}

#navSNS a{
	display : block;
}

#navSNS li:nth-child(1){
	transition-delay : .3s;
}

#navSNS li:nth-child(2){
	transition-delay : .34s;
}

#navSNS li:nth-child(3){
	transition-delay : .38s;
}

@media screen and (max-width: 768px){
	#navSNS{
		margin-top : calc( 63 * 100vw / 768 );
	}
	#navSNS li + li{
		margin-left : calc( 47 * 100% / 464 );
	}
	#navSNS .youtube img{
		height : calc( 68 * 100vw / 768 );
	}
	#navSNS .instagram{
		margin-top : calc( 4 * 100vw / 768 );
	}
	#navSNS .instagram img{
		height : calc( 58 * 100vw / 768 );
	}
	#navSNS .twitter{
		margin-top : calc( 9 * 100vw / 768 );
	}
	#navSNS .twitter img{
		height : calc( 48 * 100vw / 768 );
	}
	#navSNS .ticket{
		margin-top : calc( 9 * 100vw / 768 );
	}
	#navSNS .ticket img{
		height : calc( 60 * 100vw / 768 );
	}
}

@media print,screen and (min-width: 769px){
	#navSNS{
		margin-top : 63px;
	}
	#navSNS li + li{
		margin-left : 47px;
	}
	#navSNS .youtube img{
		height : 68px;
	}
	#navSNS .instagram{
		margin-top : 4px;
	}
	#navSNS .instagram img{
		height : 58px;
	}
	#navSNS .twitter{
		margin-top : 9px;
	}
	#navSNS .twitter img{
		height : 48px;
	}
	#navSNS .ticket{
		margin-top : 9px;
	}
	#navSNS .ticket img{
		height : 48px;
	}
}

body.is-open #navSNS li:nth-child(1){
	transition-delay : .5s;
}

body.is-open #navSNS li:nth-child(2){
	transition-delay : .54s;
}

body.is-open #navSNS li:nth-child(3){
	transition-delay : .58s;
}

/*--------------------------------------------
TITLE
---------------------------------------------*/

#title{
	background-repeat : no-repeat;
	background-position : center right;
	background-size : cover;
	display : flex;
	align-items : flex-end;
}

#title span{
	font-family : "Teko", sans-serif;
	color : #fff;
	letter-spacing : .1em;
	font-weight : 700;
}

@media screen and (max-width: 768px){
	#title{
		height : calc( 350 * 100vw / 768 );
		padding-left : calc( 26 * 100% / 768 );
		padding-bottom : calc( ( 41 - ( 100 - 65 ) * 2 / 3 ) * 100vw / 768 );
	}
	#title span{
		font-size : 10rem;
	}
}

@media print,screen and (min-width: 769px){
	#title{
		height : 320px;
		padding-bottom : calc( 48px - ( 80px - 52px ) * 2 / 3 );
	}
	#title span{
		font-size : 8rem;
	}
}

#title02{
	background-repeat : no-repeat;
	background-position : center right;
	background-size : cover;
	display : flex;
	align-items : flex-end;
}

#title02 span{
	font-family : "Teko", sans-serif;
	color : #fff;
	letter-spacing : .1em;
	font-weight : 700;
}

@media screen and (max-width: 768px){
	#title02{
		height : calc( 350 * 100vw / 768 );
		padding-left : calc( 26 * 100% / 768 );
		padding-bottom : calc( ( 41 - ( 100 - 65 ) * 2 / 3 ) * 100vw / 768 );
	}
	#title02 span{
		font-size : 10rem;
	}
}

@media print,screen and (min-width: 769px){
	#title02{
		height : 250px;
		padding-bottom : calc( 20px - ( 80px - 52px ) * 2 / 3 );
	}
	#title02 span{
		font-size : 8rem;
	}
}

#title03{
	color : #fff;
	display : flex;
	align-items : flex-start;
	justify-content : space-between;
}

#title03 h1{
	font-family : "Teko", sans-serif;
	font-weight : 700;
	letter-spacing : .1em;
}

#title03 dt span{
	display : block;
	font-weight : 700;
}

#title03 dt span:nth-of-type(1){
	font-family : "Teko", sans-serif;
}

#title03 dt span:nth-of-type(2){
	letter-spacing : .1em;
}

#title03 dd:nth-of-type(1){
	display : flex;
	align-items : flex-start;
}

#title03 dd:nth-of-type(1) span:nth-of-type(1){
	font-family : "Teko", sans-serif;
	font-weight : 600;
}

#title03 dd:nth-of-type(1) span:nth-of-type(2){
	font-weight : 500;
}

#title03 dd:nth-of-type(2){
	border-top-style : solid;
	border-top-color : #b78c1f;
}

#title03 dd:nth-of-type(2) span{
	font-weight : 500;
	letter-spacing : .1em;
}

@media screen and (max-width: 768px){
	#title03{
		background-image : url("../images/game/bg_title_sp.jpg");
		height : calc( 350 * 100vw / 768 );
	}
	#title03 h1{
		font-size : 10rem;
		margin-top : calc( ( 245 - ( 100 - 65 ) * 1 / 3 ) * 100vw / 768 );
	}
	#title03 dl{
		margin-top : calc( 34 * 100vw / 768 );
		width : calc( 347 * 100% / 720 );
		border-top : #b78c1f calc( 2 * 100vw / 768 ) solid;
	}
	#title03 dt{
		margin-top : calc( ( 15 - ( 80 - 52 ) * 1 / 3 ) * 100vw / 768 );
	}
	#title03 dt span:nth-of-type(1){
		font-size : 8rem;
	}
	#title03 dt span:nth-of-type(2){
		font-size : 3rem;
		margin-top : calc( ( 15 - ( 80 - 52 ) * 2 / 3 ) * 100vw / 768 );
	}
	#title03 dd:nth-of-type(1){
		justify-content : flex-end;
	}
	#title03 dd:nth-of-type(1) span:nth-of-type(1){
		margin-top : calc( ( -23 - ( 200 - 128 ) * 1 / 3 ) * 100vw / 768 );
		font-size : 20rem;
		margin-right : 17px;
	}
	#title03 dd:nth-of-type(1) span:nth-of-type(2){
		font-size : 4rem;
		margin-top : calc( 66 * 100vw / 768 );
	}
	#title03 dd:nth-of-type(2){
		border-top-width : calc( 2 * 100vw / 768 );
		padding-top : calc( 12 * 100vw / 768 );
		margin-top : calc( ( 13 - ( 200 - 128 ) * 2 / 3 ) * 100vw / 768 );
	}
	#title03 dd:nth-of-type(2) span{
		display : block;
		text-align : right;
		font-size : 2.2rem;
	}
	#title03 dd:nth-of-type(2) span + span{
		margin-top : calc( 10 * 100vw / 768 );
	}
}

@media print,screen and (min-width: 769px){
	#title03{
		background-image : url("../images/game/bg_title_pc.jpg");
		height : 250px;
	}
	#title03 h1{
		font-size : 8rem;
		margin-top : calc( 178px - ( 80px - 52px ) * 1 / 3 );
	}
	#title03 dl{
		margin-top : calc( 93px - ( 150px - 96px ) * 1 / 3 );
		-ms-grid-rows : auto auto;
		grid-template-rows : auto auto;
		-ms-grid-columns : auto 1fr auto;
		grid-template-columns : auto 1fr auto;
		display : -ms-grid;
		display :     grid;
		width : 490px;
	}
	#title03 dt{
		-ms-grid-row : 1;
		-ms-grid-row-span : 1;
		    grid-row : 1/2;
		-ms-grid-column : 1;
		-ms-grid-column-span : 1;
		    grid-column : 1/2;
		padding-left : 15px;
		margin-top : calc( 51px - ( 50px - 33px ) * 1 / 3 - ( 150px - 96px ) * 1 / 3 );
	}
	#title03 dt span:nth-of-type(1){
		font-size : 5rem;
		letter-spacing : .1em;
	}
	#title03 dt span:nth-of-type(2){
		font-size : 3rem;
		margin-top : calc( 12px - ( 50px - 33px ) * 2 / 3 );
	}
	#title03 dd:nth-of-type(1){
		-ms-grid-column : 3;
		-ms-grid-column-span : 1;
		    grid-column : 3/4;
		-ms-grid-row : 1;
		-ms-grid-row-span : 1;
		    grid-row : 1/2;
		padding-right : 15px;
	}
	#title03 dd:nth-of-type(1) span:nth-of-type(1){
		font-size : 15rem;
		margin-right : 4px;
	}
	#title03 dd:nth-of-type(1) span:nth-of-type(2){
		font-size : 3rem;
		margin-top : calc( 91px - ( 150px - 96px ) * 1 / 3 );
	}
	#title03 dd:nth-of-type(2){
		border-top-width : 2px;
		display : flex;
		justify-content : center;
		align-items : baseline;
		-ms-grid-row : 2;
		-ms-grid-row-span : 1;
		    grid-row : 2/3;
		-ms-grid-column : 1;
		-ms-grid-column-span : 3;
		    grid-column : 1/4;
		padding-top : 12px;
		margin-top : calc( 12px - ( 150px - 96px ) * 2 / 3 );
	}
	#title03 dd:nth-of-type(2) span{
		text-indent : -.1em;
		font-size : 1.8rem;
	}
	#title03 dd:nth-of-type(2) span + span{
		margin-left : .5em;
	}
}

/*--------------------------------------------
BREADCRUMBS
---------------------------------------------*/

@media print,screen and (min-width: 769px){
	#breadcrumbs{
		display : flex;
		align-items : flex-start;
		flex-wrap : wrap;
	}
	#breadcrumbs li{
		display : flex;
		align-items : flex-start;
	}
	#breadcrumbs li + li:before{
		content : "  /  ";
		white-space : pre;
	}
	#breadcrumbs li , #breadcrumbs a{
		color : #fff;
		font-size : 1.4rem;
		line-height : 1.7143;
		letter-spacing : .1em;
	}
}

/*--------------------------------------------
FOOTER
---------------------------------------------*/

#footer{
	border-top-style : solid;
	border-top-color : #940018;
}

#footer .copyright{
	background-color : #1b1a1a;
	color : #fff;
	font-family : "Teko", sans-serif;
}

@media screen and (max-width: 768px){
	#footer{
		border-top-width : calc( 4 * 100vw / 768 );
	}
	#footer .copyright{
		border-top : calc( 80 * 100vw / 768 ) solid #333;
		font-size : 2.6rem;
		letter-spacing : .1em;
		line-height : 1.2308;
		padding-top : calc( ( 50 - ( 26 - 17 ) * 1 / 3 ) * 100vw / 768 );
		padding-bottom : calc( 50 * 100vw / 768 );
		padding-left : calc( 24 * 100% / 768 );
	}
}

@media print,screen and (min-width: 769px){
	#footer{
		border-top-width : 1px;
	}
	#footer .urls{
		background-color : #333;
		color : #fff;
		display : flex;
		align-items : flex-start;
	}
	#footer .urls a{
		color : #fff;
	}
	#footer ol{
		padding-top : calc( 33px - 5px );
		padding-top : calc( 31px - 5px );
	}
	#footer ol li{
		font-weight : 700;
		font-size : 1.4rem;
		line-height : 1.7143;
	}
	#footer ul{
		margin-left : auto;
		flex-shrink : 0;
		display : flex;
		padding-top : calc( 34px - ( 18px - 12px ) * 1 / 3 );
	}
	#footer ul li + li{
		margin-left : 27px;
	}
	#footer ul a{
		display : block;
		letter-spacing : .1em;
		font-size : 1.8rem;
		font-family : "Teko", sans-serif;
	}
	#footer #toTop{
		display : block;
		margin-left : 20px;
		flex-shrink : 0;
	}
	#footer #toTop img{
		height : 80px;
	}
	#footer .copyright{
		padding-top : calc( 50px + ( 18px - 12px ) * 1 / 3 );
		padding-bottom : 50px;
		text-align : center;
		letter-spacing : .1em;
		text-indent : .1em;
		font-size : 1.8rem;
		line-height : 1.3333;
		display : flex;
		align-items : center;
		justify-content : center;
		text-align : center;
	}
}