@charset "utf-8";

/*
************************************************************************
* ページタイトル
* @copyright Revolme Inc.
************************************************************************
*/

/* ################################################################################################ */
/* ## PC                         ################################################################## */
/* ################################################################################################ */
#page-title
{
	background-position:center center;
	background-repeat:no-repeat;
	background-size:cover;
}
#page-title .title
{
	padding:2em;
}
#page-title .title .main
{
	display:block;

	line-height:1.2;

	font-size:2.0em;
	font-weight:bold;
}
#page-title .title .sub
{
	display:block;

	line-height:1.2;

	font-size:1.0em;
	font-weight:normal;

	margin-top:0.5em;
}
#page-title .anchor
{
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;

	padding:2em;
	padding-top:0em;

	margin:-0.5em;
}
#page-title .anchor a
{
	padding-left:0.8em;
	margin:0.5em;
}
#page-title .anchor a:before
{
	content:"";
	display:inline-block;
	position:absolute;
	top:calc(50% - 0.125em);
	left:0;

	width:0;
	height:0;

	border:0.25em solid transparent;
}

#index-mv
{
}
#index-mv .mv
{
	height:70vh;
	min-height:560px;

	overflow: hidden;
	background-image:url(../../img/top/mv.jpg);
	background-position:center center;
	background-repeat:no-repeat;
	background-size:contain;
	background-blend-mode:color;
}
#index-mv .mv:before
{
	content: '';
	background: inherit;
	background-size:cover;
	-webkit-filter: blur(20px);
	-moz-filter: blur(20px);
	-o-filter: blur(20px);
	-ms-filter: blur(20px);
	filter: blur(20px);
	position: absolute;
	top: -20px;
	left: -20px;
	right: -20px;
	bottom: -20px;
	z-index: -2;
}
#index-mv .mv:after
{
	content: '';
	background: inherit;
	z-index: -1;
	position: absolute;
	top: 0px;
	left: 0px;
	right: 0px;
	bottom: 0px;
}

#index-mv .title
{
	position:absolute;
	top:50%;
	left:50%;
	transform:translate(-50%, -50%);
	width:50%;
}
#index-mv .title .main
{
	display:block;
	font-size:2.4em;
	font-weight:bold;
}
#index-mv .title .sub
{
	display:block;
	margin-top:1em;
}

#movie-mv
{
	width:100%;
	padding-top:56.25%;
}
#movie-mv > video,
#movie-mv > .shield
{
	position:absolute;
	top:0;
	bottom:0;
	left:0;
	right:0;

	width:100%;
	height:100%;
}
#movie-mv > .catchcopy
{
	position:absolute;
	top:50%;
	left:50%;

	transform:translate(-50%,-50%);

	width:80%;
	min-width:640px;
	height:auto;

	padding:2em;
}
#movie-mv > .catchcopy .main
{
	display:block;
	font-size:2.4em;
	font-weight:bold;
	line-height:1.2;
}
#movie-mv > .catchcopy .sub
{
	display:block;
	margin-top:1em;
	line-height:1.2;
}

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

}

/* ################################################################################################ */
/* ## スマホサイト用スタイル ###################################################################### */
/* ################################################################################################ */
@media screen and (max-width:640px) {
	#index-mv .mv
	{
		height:100vw;
		max-height:none;
		min-height:auto;
	}
	#index-mv .title
	{
		width:80%;
	}

	#movie-mv
	{
		width:100%;
		padding-top:56.25%;
	}
	#movie-mv > video,
	#movie-mv > .shield
	{
	}
	#movie-mv > .catchcopy
	{
		position:absolute;
		top:50%;
		left:50%;

		transform:translate(-50%,-50%);

		width:80%;
		min-width:auto;
		height:auto;

		padding:2em;
	}
	#movie-mv > .catchcopy .main
	{
		font-size:1.4em;
	}
	#movie-mv > .catchcopy .sub
	{
		font-size:0.9em;
	}
}