@charset "utf-8";
/*
************************************************************************
 グローバルヘッダー
************************************************************************
*/
#page-title
{
	overflow:hidden;
	width:100%;
}

#page-title-bg
{
	position:absolute;
	top:0;
	bottom:0;
	left:0;
	right:0;

	width:100%;
	height:100%;

	-webkit-mask-image: linear-gradient(rgba(0,0,0,1.00) 75%, transparent);
		    mask-image: linear-gradient(rgba(0,0,0,1.00) 75%, transparent);
}
#page-title-bg > .blur
{
	--page-title-blur :5px;

	z-index:0;
	position: absolute;
	top: calc(-2 * var(--page-title-blur));
	bottom: calc(-2 * var(--page-title-blur));
	left: calc(-2 * var(--page-title-blur));
	right: calc(-2 * var(--page-title-blur));
	
	background-position: center center;
	background-repeat: no-repeat;
	background-size: cover;
	
	-webkit-filter: blur(var(--page-title-blur));
	-moz-filter: blur(var(--page-title-blur));
	-o-filter: blur(var(--page-title-blur));
	-ms-filter: blur(var(--page-title-blur));
	filter: blur(var(--page-title-blur));
}
#page-title-bg > .alpha
{
	z-index:1;
	position: absolute;
	top:0px;
	bottom:0px;
	left:0px;
	right:0px;
	
	background: var(--brand-color-grd);
	opacity:0.3;
}
#page-title-bg > .blur
{
	background-image:url(../../common/img/page-title-bg/001.jpg);
	background-position: center bottom;
}
.page-title-events-view #page-title-bg > .blur
{
	background-image:none;
}
.page-title-events-view  #page-title-bg> .alpha
{
	opacity:1.0;
}

#page-title-contents
{
	width:100%;

	display: flex;
	justify-content: center;
	align-items: center;
	align-content: center;

	padding:4em 0 5em 0;
}
#page-title-contents .title
{
	text-align: center;
	margin-bottom: 1.0em;
}
#page-title-contents .title .main
{
	display: block;
	
	font-size:2.0em;
	font-weight: bold;
	color:#FFFFFF;
	text-align: center;
}
#page-title-contents .title .sub
{
	display: block;
	
	font-size:1.2em;
	font-weight: bold;
	color:#FFFFFF;
}

.page-title-index #page-title-contents
{
	height:500px;
}
.page-title-index #page-title-contents .title .main
{
	display: block;
	
	font-size:1.8em;
	font-weight: bold;
	color:#FFFFFF;
}

.page-title-events-view #page-title-contents .title .main
{
	display: block;
	
	font-size:1.5em;
	font-weight: bold;
	color:#FFFFFF;
}
.page-title-events-view #page-title-contents .title .sub
{
	display: block;
	
	font-size:1.0em;
	font-weight: bold;
	color:#FFFFFF;
}


/* ################################################################################################ */
/* ## TAB						 ################################################################## */
/* ################################################################################################ */
@media screen and (max-width:1040px) {
}

/* ################################################################################################ */
/* ## スマホサイト用スタイル ###################################################################### */
/* ################################################################################################ */
@media screen and (max-width:640px) {
	#page-title-contents
	{
		height:auto;
		padding:4em 0 4em 0 ;
	}
	#page-title-contents > .blur
	{
		--page-title-blur :2px;
	
		top: calc(-2 * var(--page-title-blur));
		bottom: calc(-2 * var(--page-title-blur));
		left: calc(-2 * var(--page-title-blur));
		right: calc(-2 * var(--page-title-blur));
		
		-webkit-filter: blur(var(--page-title-blur));
		-moz-filter: blur(var(--page-title-blur));
		-o-filter: blur(var(--page-title-blur));
		-ms-filter: blur(var(--page-title-blur));
		filter: blur(var(--page-title-blur));
	}
	#page-title-contents.page-title-contents-index
	{
		height:auto;
		padding:5em 0 10em 0 ;
	}
}