@charset "utf-8";

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

/* ################################################################################################ */
/* ## PC                         ################################################################## */
/* ################################################################################################ */
#body-title
{
	/*
	background-position:center center;
	background-repeat:repeat;
	background-size:cover;
	*/
	
	background-position:right top;
	background-repeat:no-repeat;
	background-size:auto 100%;
	background-image:url(../../img/page-title.svg);
	
	padding:2.0em;
}
#body-title .title
{
	padding:0em 1em;
}
#body-title .title .main
{
	display:block;
	
	line-height:1.2;
	font-size:1.5em;
	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:hover
{
	text-decoration:underline;
}
#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
{
	width:100%;
	background:none;
	
	padding:0.0em;
	padding-top:calc(33.33333% + 50px);
	/* padding-top:56.25%; */
	
	z-index:-1;
	border:none;
}
#body-title.mv > video
{
	display:block;
	
	position:absolute;
	top:50%;
	left:0;
	right:0;
	
	width:100%;
	height:auto;
	
	transform:translateY(-50%);
}
#body-title.mv > .overlay
{
	display:block;
	
	position:absolute;
	top:0;
	bottom:0;
	left:0;
	right:0;
	
	opacity:0.7;
}
#body-title.mv > .waveSvg
{
	position:absolute;
	bottom:0;
	left:0;
	right:0;
	
	width:100%;
}
#body-title.mv .slide-show
{
	display:block;
	
	position:absolute;
	top:0;
	bottom:0;
	left:0;
	right:0;
	
	padding:0;
	margin:0;
	list-style:none;
}
#body-title.mv .slide-show .slide-show-item
{
	width:100%;
	height:100%;
	
	padding:0;
	margin:0;
	list-style:none;
}
#body-title.mv .slide-show .slide-show-item .visual
{
	position:absolute;
	top:calc(50% - 0px);
	left:50%;
	
	transform:translate(-50%, -50%);
	
	width:1000px;
	
    display:flex;
    flex-direction:row;
    flex-wrap:nowrap;
    justify-content:flex-start;
    align-items:center ;
    align-content:stretch;
}
#body-title.mv .slide-show .slide-show-item .visual .eyecatch
{
	width:50%;
    padding:0em 4em;
}
#body-title.mv .slide-show .slide-show-item .visual .copy
{
	width:50%;
	line-height:1.4;
}
#body-title.mv .slide-show .slide-show-item .visual .copy .main
{
	font-size:3.0rem;
}
#body-title.mv .slide-show .slide-show-item .visual .copy .sub
{
	margin-top:0.5em;
	font-size:2.0rem;
}


/* ################################################################################################ */
/* ## TAB                        ################################################################## */
/* ################################################################################################ */
@media screen and (max-width:1100px) {
	#body-title.mv .slide-show .slide-show-item .visual
	{
		width:90%;
	}
}

/* ################################################################################################ */
/* ## スマホサイト用スタイル ###################################################################### */
/* ################################################################################################ */
@media screen and (max-width:640px) {
	#body-title
	{
		padding:2.0em;
	}
	#body-title .title
	{
		padding:0em 1em;
	}
	#body-title .title .main
	{
		font-size:1.5em;
	}
	#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
	{
		padding-top:130%;
	}
	#body-title.mv > video
	{
		display:block;
		
		position:absolute;
		top:50%;
		left:-39vw;
		right:-39vw;
		
		max-width:230vw;
		width:230vw;
		height:130vw;
		
		transform:translateY(-50%);
	}
	#body-title.mv .slide-show .slide-show-item .visual
	{
		position:absolute;
		top:50%;
		left:50%;
		
		transform:translate(-50%, -50%);
		
		width:90vw;
		
	    display:flex;
	    flex-direction:row;
	    flex-wrap:wrap;
	    justify-content:flex-start;
	    align-items:center ;
	    align-content:stretch;
	}
	#body-title.mv .slide-show .slide-show-item .visual .eyecatch
	{
		width:100%;
		margin-bottom:1em;
	}
	#body-title.mv .slide-show .slide-show-item .visual .eyecatch img
	{
		width:100%;
		display:block;
		margin: 0 auto;
	}
	#body-title.mv .slide-show .slide-show-item .visual .copy
	{
		width:100%;
		line-height:1.4;
	}
	#body-title.mv .slide-show .slide-show-item .visual .copy .main
	{
		font-size:3.5rem;
	}
	#body-title.mv .slide-show .slide-show-item .visual .copy .sub
	{
		margin-top:0.5em;
		font-size:2.4rem;
	}
}