@charset "utf-8";

/*
************************************************************************
* ヘッダー
* @copyright Revolme Inc.
************************************************************************
*/

/* ################################################################################################ */
/* ## PC                         ################################################################## */
/* ################################################################################################ */

.mv-about {
    background-image: url(../img/wave.png), url(../img/mv-about.png);
    background-repeat:repeat-x, repeat-x;
    background-position: 0 120%, 50% 0%;
    background-size: auto,contain;
}
.mv-contact {
    background-image: url(../../img/common/wave.png), url(../../img/common/mv-contact.png);
    background-repeat:repeat-x, repeat-x;
    background-position: 0 120%, 50% 0%;
    background-size: auto,contain;
}
.mv-blog {
    background-image: url(../img/wave.png), url(../img/mv-blog.png);
    background-repeat:repeat-x, repeat-x;
    background-position: 0 120%, 50% 0%;
    background-size: auto,contain;
}


/*
.bg-wave {
    background-image: url(../../img/common/wave.png);
    background-repeat: repeat-x;
    background-position: 0 100%;
}
*/


.eyecathe {
    padding: 250px 0;
    text-align: center;
}

#header
{
	width: 100%;
}
#header-contents
{
	max-width: 1920px;
	width: 100%;
	margin: 0 auto;
}
.navigation .navigation-title
{
	padding:1.0em 1.5em;
	float: left;
}
.navigation .menu-list
{
	float: right;
	margin: 1em 1.2em;
}
.navigation .menu-list > hr
{
	margin:1.5em auto;
	height:0px;
	border:0px solid transparent;
	border-bottom:1px solid;
}
.navigation .menu-list ul
{
	list-style:none;
	margin:0;
	padding:0;

	font-size:1.6rem;
}
.navigation .menu-list ul li
{
	display:inline-block;

	list-style:none;
	margin:0;
	padding:0;

	margin-bottom:1.5em;
	line-height:1.0;

	-ms-user-select: none; /* IE 10+ */
	-moz-user-select: -moz-none;
	-khtml-user-select: none;
	-webkit-user-select: none;
	user-select: none;
	color: #fff;

	font-size: 1.25em;
}
.navigation .menu-list ul li a
{
	display:inline-block;
	padding-right:0.5em;

}
.navigation .menu-list ul li a > span
{
}
.navigation .menu-list ul li.arrow:after
{
	content:"";

	display:block;
	position:absolute;

	top:50%;
	right:0.5em;

	transform:translate(0%, -50%) rotate(-45deg);

	width:0.6em;
	height:0.6em;

	border:0px solid transparent;
	border-right:1px solid #999999;
	border-bottom:1px solid #999999;

	transition-duration:0.2s;
	transition-property:all;
	transition-timing-function:ease;
}
.navigation .menu-list ul li.fb {
	margin-left: 0.5em;
}
.navigation .menu-list ul li.tel {
	margin-left: 2em;
}
.navigation .menu-list ul li.arrow:hover:after
{
	right:0;
}
.navigation .menu-list ul li.ext:after
{
    content: "";

    position:absolute;
    top:50%;
	right:0.5em;
    transform:translateY(-50%);

    display:block;
    width:0.8em;
    height:0.8em;

    background-position: center center;
    background-repeat: no-repeat;
    background-size: contain;

    background-image: url(../../icon/ext-link.svg);

	transition-duration:0.2s;
	transition-property:all;
	transition-timing-function:ease;
}
.navigation .menu-list ul li.ext:hover:after
{
	top:30%;
}
.navigation .menu-list ul li.accordion > a:before,
.navigation .menu-list ul li.accordion > a:after
{
	content:"";

	display:block;
	position:absolute;

	top:50%;
	right:0.2em;

	width:0.8em;
	height:0.0em;

	border:0px solid transparent;
	border-bottom:1px solid #999999;

	transition-duration:0.2s;
	transition-property:all;
	transition-timing-function:ease;
}
.navigation .menu-list ul li.accordion > a:before
{
    transform:rotate(90deg);
}
.navigation .menu-list ul li.accordion > a.on:before
{
    transform:rotate(0deg);
}
.navigation .menu-list ul li.accordion ul.accordion-contents
{
	display:none;
	margin:0.0em 0.0em 0.0em 0.5em;
}
.navigation .menu-list ul li.accordion ul.accordion-contents.on
{
	display:block;
	font-size:1.3rem;
}
.navigation .menu-list ul li.accordion ul.accordion-contents li
{
	margin:1.2em auto;
}
.navigation .menu-list ul li.accordion ul.accordion-contents li:last-child
{
	margin-bottom:0.0em;
}


.btnMobileMenu
{
	border:0px solid transparent;
	background: none;
	color:#fff;

	width:100%;
	height:100%;
}
.btnMobileMenu > span.border
{
	display:block;
	position:absolute;

	left:20%;
	right:20%;

	width:60%;
	height:0px;

	border:1px solid #fff;
}
.btnMobileMenu > span
{
	transition-duration:0.3s;
	transition-property:all;
	transition-timing-function:ease;
	transform: translate3d(0,0,0);
}
.btnMobileMenu > span.border:nth-child(1){top:20%;}
.btnMobileMenu > span.border:nth-child(2){top:40%;}
.btnMobileMenu > span.border:nth-child(3){top:60%;}
.btnMobileMenu > span.label
{
	display:block;
	position:absolute;
	bottom:5%;
	left:0%;
	right:0%;

	font-size:0.6em;
	text-align:center;
}
#header.showMenu .btnMobileMenu > span.border:nth-child(1)
{
	transform:rotate(45deg);
	top:40%;
}
#header.showMenu .btnMobileMenu > span.border:nth-child(2)
{
	filter:alpha(opacity=0);
	-moz-opacity: 0.0;
	opacity: 0.0;
}
#header.showMenu .btnMobileMenu > span.border:nth-child(3)
{
	transform:rotate(-45deg);
	top:40%;
}



/* ################################################################################################ */
/* ## TAB                        ################################################################## */
/* ################################################################################################ */
@media screen and (max-width:1320px) {
	#body
	{
		margin-top:80px;
	}
	#header
	{
		position:fixed;
		top:0;
		bottom:auto;
		left:0;
		right:0;
		background-color: #FF9E36;
		box-shadow:0px 2px 5px 0px rgba(0,0,0,0.3);
		transform: translate3d(0,0,0);


		/*
		transition-duration:0.3s;
		transition-property:all;
		transition-timing-function:ease;
		*/
	}
	.eyecathe {
		padding: 10vw 0 15vw 0;
	}
	.navigation .navigation-title
	{
		padding:1.5em;
		height:80px;
	}
	#header .navigation-title {
		display: flex;
	}
	#header .navigation-title .logo
	{
		flex-grow:2;
		padding-left:1em;
	}
	#header .navigation-title .logo img
	{
		padding: 2px 0 0 0;
	}
	#header .navigation-title .ope
	{
		height:80px;
		width:80px;
	}
	#header .navigation .menu-list
	{

	}
	#header .navigation .menu-list .menu-scroll
	{
		overflow-y:scroll;
		overflow-x:hidden;
		height:100%;
		padding:0.5em;
	}
	#header .navigation .menu-list ul
	{
		font-size:2.2rem;
	}
	#header .navigation .menu-list ul li
	{
		margin-bottom:1.2em;
		display: inline-block;
		font-size: 0.9em;
	}
	#header .navigation.tab-navigation .menu-list ul li.accordion ul.accordion-contents.on
	{
		font-size:2.0rem;
	}
	.navigation .menu-list ul li a > span {
		font-weight: bold;
	}

	#header.showMenu
	{
		height:100%;
		bottom:0;
	}
	#header.showMenu #header-contents
	{
		height:100%;
	}
	#header.showMenu .navigation
	{
		height:100%;
	}
	#header.showMenu .navigation .menu-list
	{
		display:block;
		background-color: #fff;
	}
	.navigation .menu-list ul li.arrow:after {
		border-color: #FF9E36;
	}
}

/* ################################################################################################ */
/* ## スマホサイト用スタイル ###################################################################### */
/* ################################################################################################ */
@media screen and (max-width:640px) {
	#body
	{
		margin-top:15vw;
	}
	.eyecathe {
		padding: 30vw;
	}
	.navigation .navigation-title
	{
		width: 100%;
		height:15vw;
		padding: 0;
	}
	#header .navigation-title .logo img
	{
	}
	#header .navigation-title .ope
	{
		height:15vw;
		width:15vw;
	}
	#header .navigation .menu-list
	{
		top:10vw;
		width:90vw;
		padding: 1em;
	}
	#header .navigation .menu-list > hr
	{
		margin:1.5em auto;
		height:0px;
		border:0px solid transparent;
		border-bottom:1px solid #999999;
	}
	#header .navigation .menu-list ul
	{
		font-size:2.4rem;
	}
	#header .navigation .menu-list ul li {
		width: 100%;
		font-size: 1.4em;
	}
	#header .navigation .menu-list ul li.accordion ul.accordion-contents.on
	{
		font-size:2.0rem;
	}
	#header .navigation .menu-list .sp-tel {
		padding-top: 3.125vw;
		border-top: 1px solid #FF9E36;
	}
	#header .navigation .menu-list .sp-tel .tel {
		margin-bottom: 3.125vw;
	}
	#header .navigation .menu-list .sp-tel .fb {
		margin: 0 auto;
		text-align: center;
	}
	
	.mv-about,
	.mv-blog,
	.mv-contact {
		background-position: 0 110%, auto 50%;
		background-size: 30vw, cover;
	}
}