@charset "utf-8";

/*

************************************************************************

 グローバルヘッダー

************************************************************************

*/

#page-title

{
	margin-top: -15px;
	overflow:hidden;



}

#page-title-contents > .mv-bg

{

	position: absolute;

	top:0px;

	bottom:0px;

	left:0px;

	right:0px;



	-webkit-mask-image: linear-gradient(rgba(0,0,0,1.00) 80%, transparent);

		    mask-image: linear-gradient(rgba(0,0,0,1.00) 80%, transparent);

}

#page-title-contents > .mv-bg > .blur

{

	z-index:0;

	position: absolute;

	top: calc(-2 * var(--mv-bg-blur));

	bottom: calc(-2 * var(--mv-bg-blur));

	left: calc(-2 * var(--mv-bg-blur));

	right: calc(-2 * var(--mv-bg-blur));



	background-position: center center;

	background-repeat: no-repeat;

	background-size: cover;

	background-image:var(--mv-bg);



	-webkit-filter: blur(var(--mv-bg-blur));

	-moz-filter: blur(var(--mv-bg-blur));

	-o-filter: blur(var(--mv-bg-blur));

	-ms-filter: blur(var(--mv-bg-blur));

	filter: blur(var(--mv-bg-blur));

}



#page-title-contents > .mv-bg > .alpha

{

	z-index:1;

	position: absolute;

	top:0px;

	bottom:0px;

	left:0px;

	right:0px;



	background-color:var(--mv-bg-color);

	opacity:var(--mv-bg-alpha);

}

#page-title-contents > .mv-wrapper

{

	z-index:2;

	width:100%;

	/*max-width:1000px;*/



	margin:0 auto;

}

#page-title-contents > .mv-wrapper > .mv

{

	width:100%;

	text-align: center;

	/* padding-top:52.5%; */

	/*
	padding-top:56.25%;

	background-position: center center;

	background-repeat: no-repeat;

	background-size: contain;

	background-image:var(--mv-image-pc);

	*/

}

#page-title-contents > .mv-wrapper > .mv .overlay {
	position: absolute;
	left: 50%;
	transform: translateX(-50%);

	width: 32.5vw;
	top: 20%;

	text-align: center;
}

#mv-logo {
	width: 40%;
	margin: 0 auto 3em auto;
}

#page-title-contents > .mv-wrapper > .mv > .title-wrapper

{

    display:none;

}



#page-title-contents > .mv-wrapper.textMode > .mv

{

	background-image:none;

}

#page-title-contents > .mv-wrapper.textMode > .mv > .title-wrapper

{

	position:absolute;

	top:0;

	bottom:0;

	left:0;

	right:0;



	width:100%;

	height:100%;



	display: flex;

	justify-content: center;

	align-items: center;

	align-content: center;

}

#page-title-contents > .mv-wrapper > .mv > .title-wrapper > .title-frame

{

	padding:2em;

	border-radius: var(--mv-title-frame-radius);

	border:var(--mv-title-frame-size) solid var(--mv-title-frame-color);

	width:80%;

}

#page-title-contents > .mv-wrapper > .mv > .title-wrapper > .title-frame > .catch-copy

{

	margin-bottom:0.5em;

}

#page-title-contents > .mv-wrapper > .mv > .title-wrapper > .title-frame > .main-title

{

	line-height:1.3;

	margin-bottom:0.5em;

}

#page-title-contents > .mv-wrapper > .mv > .title-wrapper > .title-frame > .main-title > .main

{

	font-size:2.4em;

	font-weight:bold;

}


#page-title-contents .bg-page-title {

}
#page-title-contents .bg-page-title::before {
	content: "";
	display: inline-block;
	position: absolute;
	width: 2000px;
	height: 300px;
	background-image: url(../../img/flare/bg-title.png);
	background-position: 50% 0;
	background-repeat: no-repeat;
	background-size: cover;
	mix-blend-mode: overlay;

	top: 0;
	left: 50%;
	transform:translateX(-50%);

}
#page-title-contents .bg-page-title .page-title {
	background-position: 100% 90%;
	background-repeat: no-repeat;
}
#page-title-contents .page-title {
	color: #fff;
	padding: 5em 0;
	text-align: center;
}
#page-title-contents .page-title .en {
	display: block;
	font-size: 5em;
	font-weight: bold;
	line-height: 1.2;
}
#page-title-contents .page-title .main {
	display: block;
	font-size: 1.25em;
	letter-spacing: 0.25em;
}


#page-title-contents.page_stage .bg-page-title {
	background-color: #F93559;
}
#page-title-contents.page_stage .bg-page-title .page-title {
	background-image: url(../../icon/stage.png);
}

#page-title-contents.page_shop .bg-page-title {
	background-color: #21ddee;
}
#page-title-contents.page_shop .bg-page-title .page-title {
	background-image: url(../../icon/shop.png);
}


#page-title-contents.page_news .bg-page-title,
#page-title-contents.page_event .bg-page-title {
	background-image: url(../../img/header/title/bg-news.png);
}
#page-title-contents.page_news .bg-page-title .page-title {
	background-image: url(../../icon/news.png);
}
#page-title-contents.page_event .bg-page-title .page-title {
	background-image: url(../../icon/event.png);
}

#page-title-contents.page_archive .bg-page-title {
	background-color: #cba8f0;
}
#page-title-contents.page_archive .bg-page-title .page-title {
	background-image: url(../../icon/archive.png);
}

#page-title-contents.page_contact .bg-page-title {
	background-color: #fcbe5c;
}
#page-title-contents.page_contact .bg-page-title .page-title {
	background-image: url(../../icon/qa.png);
}


#page-title-contents.page_about .bg-page-title {
	background-color: #fcbe5c;
}
#page-title-contents.page_about .bg-page-title .page-title {
	background-image: url(../../icon/event.png);
}





@media screen and (max-width:640px) {
	#page-title-contents .page-title {
		padding: 6em 0 3em 0;
	}
	#page-title-contents .bg-page-title .page-title {
		background-position: 90% 100%;
		background-size: 15vw auto;
	}
}


/* ################################################################################################ */

/* ## TAB						 ################################################################## */

/* ################################################################################################ */

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

	#page-title-contents > .mv-wrapper

	{

		max-width:1040px;

	}

}



/* ################################################################################################ */

/* ## スマホサイト用スタイル ###################################################################### */

/* ################################################################################################ */

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


	#page-title-contents > .mv-wrapper > .mv

	{

		/*
		padding-top:100%;

		background-image:var(--mv-image-sp);
		*/

	}
	#page-title-contents > .mv-wrapper > .mv .overlay {
		width: 80vw;
		top: 10vw;

	}
	#page-title-contents .page-title .en {
		font-size: 3em;
	}

}