@charset "utf-8";
/*rootsize:16px*/
html{}
body{
	margin: 0;
	min-height: 100%;
}
div,ul,ol,li,p,dl,dt,dd{
	margin:0;
	padding:0;
}
li{list-style:none;}
a{color: #fa3aa0;}/*#a00d62*/
a:hover{opacity: 0.8}
a[href^="tel:"] {
	color: inherit;
	text-decoration: none;
	pointer-events: none;
}
h1,h2,h3,h4,h5{margin: 0;}
input{margin: 0;}
article, aside, figcaption, figure, footer, header, hgroup, main, nav, section {
	display: block;
}
img{
	max-width: 100%;
	height: auto;
	border: 0;
	outline: 0;
}

/* 全体共通 */
.txt_center{text-align:center;}
.txt_right{text-align: right;}
.txt_left{text-align: left;}
.txt_left-sp{}
.txt_indent{
	padding-left: 1rem;
	text-indent: -1rem;
}
.lf{margin-bottom: 1em;}
.lf_half{margin-bottom: 0.5em;}
.lf_double{margin-bottom: 2em;}
.lf_triple{margin-bottom: 3em;}
.ffs {font-feature-settings: 'palt';}
.lh_reset{line-height: 1.5;}
.ls{letter-spacing: -0.05em;}
.color_main{color: #a00d62;}
.color_sub{color: #fa3aa0;}
.display_hide{display: none;}
.display_opa0{opacity: 0;}
.pcout{ display:block;}
	span.pcout,em.pcout,strong.pcout,sup.pcout,sub.pcout,big.pcout,small.pcout,b.pcout,i.pcout,s.pcout,u.pcout,a.pcout,img.pcout,br.pcout{display: inline}
.spout{ display:none;}
	span.spout,em.spout,strong.spout,sup.spout,sub.spout,big.spout,small.spout,b.spout,i.spout,s.spout,u.spout,a.spout,img.spout,br.spout{display: none;}
	@media screen and (max-width: 769px){
		.txt_left-sp{text-align: left;}
		.spout{ display:block;}
			span.spout,em.spout,strong.spout,sup.spout,sub.spout,big.spout,small.spout,b.spout,i.spout,s.spout,u.spout,a.spout,img.spout,br.spout{display: inline;}
		.pcout{ display:none;}
		span.pcout,em.pcout,strong.pcout,sup.pcout,sub.pcout,big.pcout,small.pcout,b.pcout,i.pcout,s.pcout,u.pcout,a.pcout,img.pcout,br.pcout{display: none}
	}

/*clearfix hack: ;
---------------------------------------------*/
.clearfix::after {
	content: "";
	clear: both;
	display: table;
}

/*common
---------------------------------------------*/
body{
	background: #382825;
	color: #fff;
	font-size: 16px;
	font-family: '游明朝体 Pr6N','Yu Mincho','游明朝',"ＭＳ Ｐ明朝",serif ;
	line-height: 1.5;
}
body *{box-sizing: border-box;}
.box_flex{
	display: flex;
	flex-wrap: wrap;
}
.box_flex.nowrap{flex-wrap: nowrap;}
.flex_sb{justify-content: space-between;}
.flex_c{justify-content: center;}
.flex_c-c{
	justify-content: center;
	align-items: center;
}
.flex_sb-c{
	justify-content: space-between;
	align-items: center;
}
.flex_nav{justify-content: space-between;}
.flex_main{
	justify-content: center;
	align-items: center;
	flex-direction: column;
}
.flex_info{justify-content: space-between;}
.flex_chara{justify-content: center;}
.flex_full{width: 100%;}
	@media screen and (max-width: 769px){
		.box_flex.sp_col{flex-direction: column;}
		.flex_nav{
			justify-content: space-between;
			align-items: flex-start;
		}
		.flex_main{
			justify-content: flex-start;
			align-items: flex-start;
			flex-direction: column;
		}
	}

/*nav
---------------------------------------------*/
header#nav {
	background: #000;
	width: 100%;
	height: 60px;
	margin : 0 auto;
	position: sticky;
	top: 0;
	left: 0;
	z-index: 50;
}
	header#nav::before{
		content: '';
		background: url(../images/nav/img_header-bg.png) repeat-x;
		width: 100%;
		height: 40px;
		position: absolute;
		bottom: -40px;
		left: 0;
	}
#nav > .inner,
#nav > .inner > div{height: 100%;}
#ttl_header-logo {
	width: 218px;
	height: 60px;
	padding-top: 20px;
}
	#ttl_header-logo a{
		width: 100%;
		height: 100%;
		line-height: 1;
		display: block;
	}
#global_nav,#nav_common {height: 100%;}
/*--navigation-----*/
#nav_common {
	line-height:1;
	display: flex;
	justify-content: flex-end;
}
#nav_common > li{
	height: calc(100% + 10px);
	position: relative;
	/*overflow: hidden;*/
}
	#nav_common > li:last-of-type{margin-left: 16px;}
	#nav_common > li.current{
		background: url(../images/nav/nav_current-bg.png) no-repeat center center;
		background-size: 64px 60px;
	}
	#nav_common > li.has_submenu{
		cursor: pointer;
		animation: anime-visibilityoff_submenu 0.8s linear none;
	}
	#nav_common > li.has_submenu:hover{animation: anime-visibility_submenu 0.3s linear forwards;}
	#nav_common > li > a,
	#nav_common > li.has_submenu{
		position: relative;
		display: block;
		-webkit-transition: all 0.5s;
		transition: all 0.5s;
	}
		#nav_common > li > a:hover,
		#nav_common > li.has_submenu:hover span{opacity: 0.6}
	#nav_common > li:not(.nav_twitter) > a,
	#nav_common > li.has_submenu{
		height: 12px;
		padding-top: 30px;
		padding-bottom: 49px;
	}
	#nav_common > li.nav_twitter > a {
		padding-top: 20px;
		padding-bottom: 20px;
	}
	#nav_common > li:not(.nav_twitter) > a > img,
	#nav_common > li.has_submenu > span > img{padding: 0 16px;}
.nav_twitter{
	width: 40px;
	height: 40px;
}
/*--navigation-sub-----*/
.nav_common-sub {
	width: 100%;
	position: absolute;
	bottom: -79px;
	left: 0;
	z-index: 5;
	visibility: hidden;
	opacity: 0;
	transform: translateY(10px);
	animation: anime-off_submenu 0.8s linear none;
}
	#nav_common > li.has_submenu:hover .nav_common-sub{
		animation: anime_submenu 0.3s linear forwards;
	}
/*animetion------*/
@keyframes anime_submenu {
	0% {
		transform: translateY(-10px);
	}
	20% {
		visibility: visible;
		opacity: 0;
	}
	100% {
		transform: translateY(0);
		visibility: visible;
		opacity: 1;
	}
}
@keyframes anime-off_submenu {
	0% {
		transform: translateY(0);
		visibility: visible;
		opacity: 1;
	}
	20% {
		transform: translateY(-10px);
		opacity: 0;
		visibility: hidden;
	}
	100% {
		transform: translateY(-10px);
		opacity: 0;
		visibility: hidden;
	}
}
@keyframes anime-visibility_submenu {
	0% {
		overflow: hidden;
	}
	20% {
		overflow: visible;
	}
	100% {
		overflow: visible;
	}
}
@keyframes anime-visibilityoff_submenu {
	0% {
		overflow: visible;
	}
	80% {
		overflow: hidden;
	}
	100% {
		overflow: hidden;
	}
}
/*---------------*/
.nav_common-sub li{
	width: 100%;
	height: 36px;
}
	.nav_common-sub li:not(:last-of-type){margin-bottom: 10px;}
	.nav_common-sub li a{
		background: #a00d62;
		width: 100%;
		height: 100%;
		color: #fff;
		line-height: 1;
		text-decoration: none;
		border-radius: 10px;
		display: flex;
		justify-content: center;
		align-items: center;
	}
.icon_nav_slide {display: none;}
#nav_common_trigger {display: none;}
	@media screen and (min-width: 770px) and (max-width: 999px){
		#nav_common > li:not(.nav_twitter) > a > img,
		#nav_common > li.has_submenu > span > img{
			height: 10px;
			padding: 0 8px;
		}
	}
	@media screen and (max-width: 769px){
		header#nav {
			height: 16vw;
			position: fixed;
		}
			header#nav::before{
				height: 10.6667vw;
				bottom: -10.6667vw;;
			}
		#ttl_header-logo {
			width: 50.9333vw;
			padding-top: 5.1333vw;
		}
		/*--navigation-----*/
		#global_nav{
			background: rgba(0, 0, 0, 0.5);
			width: 100%;
			height: calc(100vh - 21.3333vw);
			position: absolute;
			top: 21.3333vw;
			left: 0;
			opacity: 0;
			overflow: hidden;
			transform: translateY(-100vh);
			-webkit-transition: all 800ms 0ms ease;
			transition: all 800ms 0ms ease;
			/*will-change: transform,opacity;*/
		}
			#global_nav.anime_toggle{
				opacity: 1;
				transform: translateY(0);
			}
		#nav_common {
			height: 100%;
			opacity: 0;
			flex-direction: column;
			justify-content: flex-start;
			transform: translateY(-100vh);
			/*-webkit-transition: all 800ms 0ms ease;
			transition: all 800ms 0ms ease;*/
			animation: anime_sp_dropup 0.8s ease forwards;
		}
			#nav_common.anime_toggle{
				/*opacity: 1;
				transform: translateY(0);*/
				animation: anime_sp_dropdown 0.8s ease forwards;
			}
		@keyframes anime_sp_dropdown {
			0% {
				opacity: 0;
				transform: translateY(-100vh);
			}
			50% {
				opacity: 0;
			}
			100% {
				opacity: 1;
				transform: translateY(0);
			}
		}
		@keyframes anime_sp_dropup {
			0% {
				opacity: 1;
				transform: translateY(0);
			}
			50% {
				opacity: 0;
			}
			100% {
				opacity: 0;
				transform: translateY(-100vh);
			}
		}
		#nav_common > li{
			background: #a00d62;
			width: 100%;
			/*min-height: 16vw;*/
			height: 16vw;
			border-top: solid 2px #1c1c1c;
			border-bottom: solid 2px #1c1c1c;
		}
			#nav_common > li:last-of-type{margin-left: 0;}
			#nav_common > li.current{
				background: #a00d62;
				background-size: auto;
			}
			#nav_common > li.has_submenu{
				padding: 0;
				flex-direction: column;
				animation: none;
			}
			#nav_common > li.has_submenu:hover{animation: none}
			#nav_common > li.has_submenu > span{
				width: 100%;
				min-height: 16vw;
			}
			#nav_common > li > a,
			#nav_common > li.has_submenu {
				position: relative;
				display: block;
				-webkit-transition: all 0.5s;
				transition: all 0.5s;
			}
			#nav_common > li:not(.nav_twitter) > a,
			#nav_common > li.nav_twitter > a/*,
			#nav_common > li.has_submenu span*/{
				width: 100%;
				height: 100%;
				padding-top: 0;
				padding-bottom: 0;
				display: flex;
				justify-content: center;
				align-items: center;
			}
				#nav_common > li.has_submenu{height: auto;}
				#nav_common > li > a:hover,
				#nav_common > li.has_submenu:hover span{opacity: 1}
			#nav_common > li.has_submenu > span{
				display: flex;
				justify-content: center;
				align-items: center;
			}
				#nav_common > li:not(.nav_twitter) > a > img,
				#nav_common > li.has_submenu > span > img{padding: 0;}
		.nav_twitter{
			width: auto;
			height: auto;
		}
		/*--navigation-sub-----*/
		.nav_common-sub {
			width: 100%;
			position: static;
			bottom: auto;
			left: 0;
			visibility: visible;
			opacity: 1;
			transform: translateY(0);
			display: none;
			animation: none;
		}
			#nav_common > li.has_submenu:hover .nav_common-sub{
				animation: none;
			}
		.nav_common-sub li{
			background: #1c1c1c;
			height: 16vw;
		}
			.nav_common-sub li:not(:last-of-type){
				margin-bottom: 0;
				border-bottom: solid 2px #a00d62;
			}
			.nav_common-sub li a{
				background: transparent;
				padding-left: 8.2667vw;
				border-radius: 0;
				justify-content: flex-start
			}
		.icon_nav_slide {
			width: 4.2667vw;
			position: absolute;
			right: 4vw;
			top: 6.3667vw;
			display: block;
			-webkit-transition: all 0.5s;
			transition: all 0.5s;
		}
			.has_open .icon_nav_slide{transform: rotate(180deg);}
		#nav_common_trigger {
			background: url(../images/sp/nav/btn_nav-trigger_bg.png) 0 2.6667vw no-repeat;
			background-size: contain;
			width: 17.0667vw;
			/*height: calc(32vw + 2.6667vw);*/
			/*padding-top: 2.6667vw;*/
			position: relative;
			display: block;
		}
		#nav > .inner > div#nav_common_trigger{height: calc(17.0667vw + 2.6667vw);}
		#nav_common_trigger::before{
			content: '';
			background: url(../images/sp/nav/icon_nav-trigger_open.svg) 6.3vw 8.8vw no-repeat;
			background-size: 5.0667vw;
			width: 100%;
			height: 100%;
			display: block;
			/*webkit-transition: all 800ms 0ms ease;
			transition: all 800ms 0ms ease;*/
		}
		#nav_common_trigger.has_open::before{
			background: url(../images/sp/nav/icon_nav-trigger_close.svg) 6.2vw 8.8vw no-repeat;
			background-size: 5.3333vw 4.2667vw;
		}
	}

/*common_element
---------------------------------------------*/
#wrap {
	min-height: 100vh;
	padding-top: 65px;
	overflow: hidden;
	position: relative;
}
	.index #wrap,
	.introduction #wrap,
	.event #wrap,
	.ticket #wrap{
		background: url(../images/img_main-bg.png) no-repeat fixed;
		background-size: cover;
	}
	.story_1st #wrap{
		background: url(../images/under/img_story-1st_bg.png) no-repeat fixed;
		background-size: cover;
	}
	.story_2nd #wrap{
		background: url(../images/under/img_story-2nd_bg.png) no-repeat fixed;
		background-size: cover;
	}
.inner {
	width: 1000px;
	margin: 0 auto;
}
#ttl_page {
	width: auto;
	height: 30px;
	margin-bottom: 50px;
	line-height: 1;
	text-align: center;
}
.box_common {
	background: rgba(0, 0, 0, 0.7);
	margin: 0 auto;
}
.ttl_caption {
	margin-bottom: 30px;
	color: #fa3aa0;
	font-size: 24px;
	letter-spacing: 0.1em;
	line-height: 1;
	display: flex;
	align-items: center;
}
	.ttl_caption span{
		margin-right: 30px;
		white-space: nowrap;
	}
	.ttl_caption::after{
		content: '';
		background: #fa3aa0;
		width: 100%;
		height: 1px;
	}
.txt_str{font-size: 24px;}
.box_common.box_border{
	background:
		url(../images/img_boxdeco-tl.svg) no-repeat top 15px left 15px / 60px,
		url(../images/img_boxdeco-tr.svg) no-repeat top 15px right 15px / 60px,
		url(../images/img_boxdeco-bl.svg) no-repeat bottom 15px left 15px / 60px,
		url(../images/img_boxdeco-br.svg) no-repeat bottom 15px right 15px / 60px,
		rgba(0, 0, 0, 0.7);
	border: solid 5px #a00d62;
}
	.index .box_common.box_border,
	.story .box_common.box_border{
		padding: 45px 25px 95px;
	}
	.index .box_common.box_border{margin: 0;}
	.story .box_common.box_border{margin-bottom: 100px;}
	.event .box_common.box_border,
	.ticket .box_common.box_border{
		padding: 95px 45px;
		margin-bottom: 100px;
	}
.btn_buytoticket {
	width: 158px;
	height: 158px;
	line-height: 1;
	position: fixed;
	left: 50%;
	bottom: 20px;
	z-index: 5;
	opacity: 0;
	visibility: hidden;
	transform: translate(422px,10px);
	-webkit-transition: all 900ms 0s ease;
	transition: all 900ms 0s ease;
}
	.btn_buytoticket.has_display {
		opacity: 1;
		visibility: visible;
		transform: translate(422px,0);
	}
	.btn_buytoticket a{
		display: block;
		opacity: 0.7;
		-webkit-transition: all 900ms 0s ease;
		transition: all 900ms 0s ease;
	}
	.btn_buytoticket a:hover{opacity: 1;}
	@media screen and (min-width: 770px) and (max-width: 999px){
		.inner {width: 92vw;}
			.index #wrap,
			.introduction #wrap,
			.event #wrap,
			.ticket #wrap,
			.story_1st #wrap,
			.story_2nd #wrap{
				background: none;
			}
			.index #wrap::before,
			.introduction #wrap::before,
			.event #wrap::before,
			.ticket #wrap::before,
			.story_1st #wrap::before,
			.story_2nd #wrap::before{
				content: '';
				width: 100%;
				height: 100vh;
				position: fixed;
				top: 0;
				left: 0;
				z-index: -1;
				display: block;
			}
			.index #wrap::before,
			.introduction #wrap::before,
			.event #wrap::before,
			.ticket #wrap::before{
				background: url(../images/img_main-bg.png) center top no-repeat;
				background-size: cover;
			}
			.story_1st #wrap::before{
				background: url(../images/under/img_story-1st_bg.png) center top no-repeat;
				background-size: cover;
			}
			.story_2nd #wrap::before{
				background: url(../images/under/img_story-2nd_bg.png) center top no-repeat;
				background-size: cover;
			}
	}
	@media screen and (max-width: 769px){
		#wrap {padding-top: 26.6667vw;}
			/*.index #wrap,
			.introduction #wrap,
			.event #wrap,
			.ticket #wrap{
				background: url(../images/sp/img_main-bg.png) no-repeat fixed;
				background-size: cover;
			}*/
			.index #wrap,
			.introduction #wrap,
			.event #wrap,
			.ticket #wrap,
			.story_1st #wrap,
			.story_2nd #wrap{
				background: none;
			}
			.index #wrap::before,
			.introduction #wrap::before,
			.event #wrap::before,
			.ticket #wrap::before,
			.story_1st #wrap::before,
			.story_2nd #wrap::before{
				content: '';
				width: 100%;
				height: 100vh;
				position: fixed;
				top: 0;
				left: 0;
				z-index: -1;
				display: block;
			}
			.index #wrap::before,
			.introduction #wrap::before,
			.event #wrap::before,
			.ticket #wrap::before{
				background: url(../images/sp/img_main-bg.png) no-repeat;
				background-size: cover;
			}
			.story_1st #wrap::before{
				background: url(../images/sp/under/img_story-1st_bg.png) no-repeat;
				background-size: cover;
			}
			.story_2nd #wrap::before{
				background: url(../images/sp/under/img_story-2nd_bg.png) no-repeat;
				background-size: cover;
			}
		.inner {width: 92vw;}
		#ttl_page {
			height: 13.3333vw;
			margin-bottom: 8vw;
		}
		.ttl_caption {
			margin-bottom: 6vw;
			font-size: 22px;
			letter-spacing: 0.1em;
			display: block;
		}
			.ttl_caption.lh_be{
				margin-bottom: 4vw;
				line-height: 1.4;
			}
			.ttl_caption span{
				margin-right: 0;
				letter-spacing: -0.01em;
				white-space: normal;
			}
			.ttl_caption::after{
				content: '';
				background: transparent;
				width: auto;
				height: auto;
			}
		.box_common.box_border{
			background:
				url(../images/img_boxdeco-tl.svg) no-repeat top 4vw left 4vw / 16vw,
				url(../images/img_boxdeco-tr.svg) no-repeat top 4vw right 4vw / 16vw,
				url(../images/img_boxdeco-bl.svg) no-repeat bottom 4vw left 4vw / 16vw,
				url(../images/img_boxdeco-br.svg) no-repeat bottom 4vw right 4vw / 16vw,
				rgba(0, 0, 0, 0.7);
		}
			.index .box_common.box_border{padding: 12vw 6.6667vw 25.3333vw;}
			.story .box_common.box_border{
				margin-bottom: 20vw;
				padding: 12vw 0 25.3333vw;
			}
			.story .box_common.box_border{}
			.event .box_common.box_border,
			.ticket .box_common.box_border{
				padding: 25.3333vw 6.6667vw;
				margin-bottom: 20vw;
			}
		.btn_buytoticket{display: none;}
	}

/*footer
---------------------------------------------*/
#box_footer {
	background: #000;
	height: 54px;
	color: #fff;
	display: flex;
	justify-content: center;
	align-items: center;
}
.txt_copyright{
	color: #fff;
	font-size: 14px;
	line-height: 1;
}
	@media screen and (max-width: 769px){
		#box_footer {height: 14.4vw;}
	}