@charset "utf-8";

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

/* ################################################################################################ */
/* ## PC                         ################################################################## */
/* ################################################################################################ */
#body-title
{
	background-position:center center;
	background-repeat:no-repeat;
	background-size:cover;
	
	padding:2em;
}
#body-title:before
{
	content:"";
	position:absolute;
	display:block;
	
	top:0;
	bottom:0;
	left:0;
	right:0;
}
#body-title .title
{
	padding:0em 1em;
}
#body-title .title .main
{
	display:block;
	
	line-height:1.2;
	font-size:1.8em;
	font-weight:bold;
}
#body-title .title .sub
{
	display:block;
	
	line-height:1.2;
	font-size:1.0em;
	font-weight:normal;
	
	margin-top:0.5em;
}
#body-title .anchor
{
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	
	padding:0em;
	
	margin:-0.5em;
	margin-top:1.0em;
}
#body-title .anchor a
{
	padding-left:0.8em;
	margin:0.5em;
}
#body-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;
}

#body-title.mv-slide
{
	padding:0;
	display:none;
}
#body-title.mv-slide ul
{
	list-style:none;
	margin:0;
	padding:0;
}
#body-title.mv-slide ul .slide-item
{
	list-style:none;
	margin:0;
	padding:0;
	
	width:1000px;
	padding-top:562px;
	
	overflow:hidden;
}
#body-title.mv-slide ul .slide-item .visual
{
	position:absolute;
	display:block;
	
	top:0;
	bottom:0;
	left:0;
	right:0;
	
	background-position:center center;
	background-repeat:no-repeat;
	background-size:cover;
	
	filter:brightness(50%) blur(5px);
	transform:scale(1.1);
}
#body-title.mv-slide ul .slide-item .visual:before
{
	content:"";
	position:absolute;
	display:block;
	
	top:0;
	bottom:0;
	left:0;
	right:0;
	
	background-color:#666666;
	opacity:0.3;
}
#body-title.mv-slide ul .slide-item.slick-active .visual
{
	filter:brightness(100%);
}
#body-title.mv-slide ul .slide-item .catchcopy
{
	position:absolute;
	display:block;
	
	top:50%;
	left:50%;
	
	transform:translate(-50%, -50%);
	
	width:100%;
	
	padding:3em;
	
	filter:brightness(50%) blur(5px);
	
	text-shadow: 5px 5px 5px rgba(0,0,0,0.6);
}
#body-title.mv-slide ul .slide-item.slick-active .catchcopy
{
	filter:brightness(100%);
}
#body-title.mv-slide ul .slide-item .catchcopy .main
{
	display:block;
	font-size:2.8em;
	font-weight:bold;
	line-height:1.2;
}
#body-title.mv-slide ul .slide-item .catchcopy .sub
{
	display:block;
	font-size:1.2em;
	line-height:1.2;
	margin-top:0.5em;
}
#body-title.mv-slide .slick-prev,
#body-title.mv-slide .slick-next
{
	z-index:100;
	
	overflow:hidden;
	position:absolute;

	top:50%;

	width:2.5em;
	height:2.5em;

	line-height:0;
	color:transparent;
	
	background-color:rgba(0,0,0,0.6);
	border-radius:100%;
	border:0px solid transparent;
	
	transition-duration:0.3s;
	transition-property:all;
	transition-timing-function:ease;
}
#body-title.mv-slide .slick-prev
{
	left:calc(50% - 500px);
	transform:translate(-50%, -50%);
}
#body-title.mv-slide .slick-next
{
	right:calc(50% - 500px);
	transform:translate(50%, -50%);
}
#body-title.mv-slide .slick-prev:before,
#body-title.mv-slide .slick-next:before
{
	content:"";
	display:block;
	
	position:absolute;
	top:50%;
	left:50%;
	
	
	width:1em;
	height:1em;
	
	background-colro:transparent;
	border:0px solid transparent;
}
#body-title.mv-slide .slick-prev:before
{
	border-bottom:1px solid #FFFFFF;
	border-left:1px solid #FFFFFF;
	transform:translate(-30%, -50%) rotate(45deg);
}
#body-title.mv-slide .slick-next:before
{
	border-top:1px solid #FFFFFF;
	border-right:1px solid #FFFFFF;
	transform:translate(-70%, -50%) rotate(45deg);
}
#body-title.mv-slide .slick-prev:hover,
#body-title.mv-slide .slick-next:hover
{
}

#body-title.mv-static
{
	width:100%;
	overflow:hidden;
	padding:0;
	margin:0;
}
#body-title.mv-static .blur
{
	display:block;
	position:absolute;
	top:-10px;
	bottom:-10px;
	left:-10px;
	right:-10px;
	
	width:calc(100% + 20px);
	height:calc(100% + 20px);
	
	background-position:center center;
	background-repeat:no-repeat;
	background-size:cover;
	-ms-filter: blur(10px);
	filter: blur(10px);
}
#body-title.mv-static .org
{
	display:block;
	max-width:1000px;
	width:100%;
	margin:0 auto;
}
#body-title.mv-static .visual-wraper
{
	width:800px;
	margin:0 auto;
}
#body-title.mv-static .visual-wraper .visual
{
	width:100%;
	padding-top:52.5%;
	
	margin:0 auto;
	background-position:center center;
	background-repeat:no-repeat;
	background-size:cover;
}
#body-title.mv-static .visual-wraper .catchcopy
{
	position:absolute;
	display:block;
	
	top:50%;
	left:50%;
	
	transform:translate(-50%, -50%);
	
	width:1200px;
	
	padding:3em;
	
	text-shadow: 5px 5px 5px rgba(0,0,0,0.6);
}
#body-title.mv-static .visual-wraper .catchcopy .main
{
	display:block;
	font-size:2.8em;
	font-weight:bold;
	line-height:1.2;
}
#body-title.mv-static .visual-wraper .catchcopy .sub
{
	display:block;
	font-size:1.2em;
	line-height:1.2;
	margin-top:0.5em;
}

/* ################################################################################################ */
/* ## TAB                        ################################################################## */
/* ################################################################################################ */
@media screen and (max-width:1100px) {
	#body-title.mv-slide ul .slide-item
	{
		width:100vw;
		padding-top:56.2vw;
	}
	#body-title.mv-static .visual-wraper
	{
		width:100vw;
	}
	#body-title.mv-static
	{
		padding:0 0;
		background-image:url(../../img/mv.jpg);
		background-repeat:repeat-x;
		background-size:cover;
	}
}

/* ################################################################################################ */
/* ## スマホサイト用スタイル ###################################################################### */
/* ################################################################################################ */
@media screen and (max-width:640px) {
	#body-title
	{
		padding:1.5em;
	}
	#body-title .title
	{
		padding:0em 1em;
	}
	#body-title .title .main
	{
		font-size:2.2em;
	}
	#body-title .title .sub
	{
		font-size:1.0em;
		margin-top:0.5em;
	}
	#body-title .anchor
	{
		padding:0em;
		margin:-0.5em;
		margin-top:1.0em;
	}
	#body-title .anchor a
	{
		margin:0.5em;
	}
	#body-title.mv-slide ul .slide-item
	{
		width:100vw;
		padding-top:100vw;
	}
	#body-title.mv-slide ul .slide-item .catchcopy
	{
		padding:2em;
	}
	#body-title.mv-slide ul .slide-item .catchcopy .main
	{
		font-size:2.5em;
	}
	#body-title.mv-slide ul .slide-item .catchcopy .sub
	{
		font-size:1.2em;
	}
	#body-title.mv-slide .slick-prev
	{
		display:none;
	}
	#body-title.mv-slide .slick-next
	{
		display:none;
	}
	#body-title.mv-slide .slick-prev:before,
	#body-title.mv-slide .slick-next:before
	{
		width:0.8em;
		height:0.8em;
	}
	#body-title.mv-static
	{
		padding:0 0;
		background-image:url(../../img/mv.jpg);
		background-repeat:repeat-x;
		background-size:cover;
	}
}