@charset "utf-8";

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

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

#header
{
	width: 100%;
}
#header-contents
{

	width: 100%;
	margin: 0 auto;
}
.header-top {
	max-width: 1200px;
	width: 100%;
	margin: 0 auto;
}
.navigation .navigation-title
{
	padding:1.0em 1.5em;
	float: left;
}
.navigation .menu-list
{
	width: 100%;
	background-color: #009AE3;
}
.navigation .menu-list .menu-scroll {
	max-width: 1200px;
	width: 100%;
	margin: 0 auto;
}
.navigation .menu-list > hr
{
	margin:1.5em auto;
	height:0px;
	border:0px solid transparent;
	border-bottom:1px solid;
}
.navigation .menu-list ul
{
	display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: flex-start;;

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

	font-size:1.6rem;


}
.navigation .menu-list ul li
{
	width: calc(16.66666%);
    text-align: center;
    list-style: none;

	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: #002F98;

	font-size: 1.25em;
	font-weight: bold;

	background-image: url(../../img/common/header-border.svg);
	background-position: 100% 20px;
	background-repeat: repeat-y;
	background-size: 4px auto;

}
.navigation .menu-list ul li:last-child {
	background: none;
}

.navigation .menu-list ul li a
{
	display:inline-block;
	padding-left: 0.5em;
	padding-right:0.5em;
	text-align: center;

}
.navigation .menu-list ul li a:hover {
	text-decoration: none;
}
.navigation .menu-list ul li a > span
{
}
.navigation .menu-list ul li a .icon {
	width: 60px;
	display: block;
	padding: 0;
	margin: 0 auto 0.25em auto;
}
.navigation .menu-list ul li a .icon.on,
.navigation .menu-list ul li a:hover .icon {
	display: none;
}
.navigation .menu-list ul li a:hover .icon.on {
	display: block;
}




.navigation .menu-list ul li a .jp {
	display: block;
	color: #fff;
	font-size: 1em;
	font-weight: bold;
	margin-bottom: 0.25em;
}
.navigation .menu-list ul li a .en {
	display: block;
	color: #F7C700;
	font-size: 9px;
}
.navigation .menu-list ul li a:hover .jp {
	color: #F7C700;
}



#header .header-right {
	float: right;
	padding-right: 2em;
	color: #009BE4;
}
#header .header-right .header-contact {
	float: left;
}
#header .header-right .phone-number:before {
	content: "";
	display: inline-block;
	background-image: url(../../img/common/ic-tel.svg);
	background-position: 0 50%;
	background-repeat: no-repeat;

	width: 1em;
	height: 1em;
}
#header .header-right .phone-number {
	font-size: 1.9em;
	font-weight: bold;
	padding-left: 0.2em;
	vertical-align: middle;
}
#header .header-right .header-contact .text {
	font-size: 1.125em;
	text-align: right;
}
#header .header-right .header-icon {
	float: right;
	text-align: center;
	padding: 1em 1em;

}
#header .header-right .header-icon a {
	display: inline-block;
	text-align: center;
	background-image: url(../../img/common/mail-border.svg);
	background-repeat: repeat-y;
	background-position: 0 0;
	background-size: 4px auto;
	padding: 0 0 0 2em;
}
#header .header-right .header-icon.header-icon-line a {
	background-image: none;
	padding: 0;
}

#header .header-right .header-icon a:hover {
	text-decoration: none;

}
#header .header-right .header-icon a span {
	display: block;
	color: #009BE4;
}
#header .header-right .header-icon a:hover span {
	color: #F7C700;
}
#header .header-right .header-icon a span:before {
	content: "";
	display: block;
	background-image: url(../../img/common/ic-mail.svg);
	background-position: 50% 50%;
	background-repeat: no-repeat;
	margin: 0 auto;
	width: 2em;
	height: 2em;
	background-size: contain;
}
#header .header-right .header-icon.header-icon-line a span:before {
	content: "";
	display: block;
	background-image: url(../../img/common/ic-line.svg);
	background-position: 50% 50%;
	background-repeat: no-repeat;
	margin: 0 auto;
	width: 2em;
	height: 2em;
	background-size: contain;
}


#header .header-right .header-icon a:hover span:before {
	background-image: url(../../img/common/ic-mail-yellow.svg);
}
#header .header-right .header-icon.header-icon-line a:hover span:before {
	background-image: url(../../img/common/ic-line.svg);
}


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

	width:100%;
	height:100%;

	cursor: pointer;
}
.btnMobileMenu > span.border
{
	display:block;
	position:absolute;

	left:20%;
	right:20%;

	width:60%;
	height:0px;

	border:2px solid #009AE3;
	border-radius: 5px;
}
.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:0px;
	}
	#header
	{
		position:relative;
		top:0;
		bottom:auto;
		left:0;
		right:0;

	}
	.eyecathe {
		padding: 10vw 0 15vw 0;
	}
	.navigation .navigation-title
	{
		padding:1.5em;

	}
	#header .navigation-title {
		display: flex;
	}
	#header .navigation-title .logo
	{
		flex-grow:2;
		padding: 0.8em 0 0 0.8em;
	}
	#header .navigation-title .logo img
	{
		height:80px;
		width:160px;
	}
	#header .navigation-title .ope
	{
		height:80px;
		width:80px;
	}
	#header .header-right {
		padding: 1em 0 1em 0;
	}
	#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
	{
		display: inline-block;
		font-size: 1.0em;
	}
	#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;
		background-color: rgba(255,255,255,0.9);
		overflow-y: scroll;
	}
	#header.showMenu #header-contents
	{
		height:100%;
	}
	#header.showMenu .navigation
	{
		height:100%;
	}
	#header.showMenu .navigation .menu-list
	{
		display:block;
	}
	.navigation .menu-list ul li.arrow:after {
		border-color: #FF9E36;
	}
	.header-icon {
	}
	.header-icon a {
		display: inline-block;
	}
	.header-icon .icon-tel {
		width: 6vw;
		margin-right: 2vw;
	}
	.header-icon .icon-mail {
		width: 8vw;
		margin-right: 1vw;
	}
	.header-icon .icon-line {
		width: 8vw;
		margin-right: 1vw;
	}
}

/* ################################################################################################ */
/* ## スマホサイト用スタイル ###################################################################### */
/* ################################################################################################ */
@media screen and (max-width:640px) {
	#header {
		position: fixed;
	}
	#body
	{
		margin-top:15vw;
	}

	.eyecathe {
		padding: 30vw;
	}
	.navigation .navigation-title
	{
		width: 100%;
		height:15vw;
		padding: 0;
		float: none;
		background-color: #fff;
	}
	#header .navigation {
		background-color: #009AE3;
	}
	#header .header-icon {
		padding-top: 4vw;
	}
	#header .navigation-title .logo img
	{
		height:auto;
		width:50vw;
	}
	#header .navigation-title .ope
	{
		height:15vw;
		width:15vw;
	}
	#header .navigation .menu-list
	{
		width:100vw;
		padding: 0em;
		margin: 0;
	}
	#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:2rem;
		padding: 0;

	}
	#header .navigation .menu-list ul li {
		width: 50%;
		font-size: 1.4em;
		padding: 1em 0 1em 0;
		border-bottom: 1px solid #fff;
		border-right: 1px solid #fff;
		background: none;
	}
	#header .navigation .menu-list ul li:nth-child(even) {
		border-right: none;
	}
	#header .navigation .menu-list ul li a {
	}
	#header .navigation .menu-list ul li.mail,
	#header .navigation .menu-list ul li.tel,
	#header .navigation .menu-list ul li.facebook {
		padding-left: 1.5em;
	}
	#header .navigation .menu-list ul li.mail a,
	#header .navigation .menu-list ul li.tel a,
	#header .navigation .menu-list ul li.facebook a {
		border-left: none;
		padding-left: 0;
	}

	#header .navigation .menu-list ul li.mail .icon-mail {
		width: 7.8125vw;
		margin-right: 1em;
	}
	#header .navigation .menu-list ul li.tel .icon-tel {
		width: 6.25vw;
		margin-right: 1em;
	}
	#header .navigation .menu-list ul li.facebook .icon-fb {
		width: 6.25vw;
		margin-right: 1em;
	}

	#header .navigation .menu-list ul li.accordion ul.accordion-contents.on
	{
		font-size:2.0rem;
	}

	#header .menu-contact {
		padding-bottom: 2em;
	}
	#header .menu-contact .contact-tel {
		padding: 1em 0;
	}
	#header .menu-contact .contact-tel a {
		color: #fff;
		text-align: center;
		display: inline-block;
		width: 100%;
	}
	#header .menu-contact .contact-tel .text {
		font-size: 1.2em;
		font-weight: bold;
	}
	#header .menu-contact .contact-tel .telno {
		line-height: 1;
		margin-bottom: 0.2em;
		color: #F7C700;
		font-size: 3em;
		font-weight: bold;
	}
	#header .menu-contact .contact-tel .time {
		font-weight: bold;
	}
	#header .menu-contact .contact-form {
		margin: 0 -0.5em;
		padding: 0 1em;
		display: flex;
		flex-direction: row;
		flex-wrap: nowrap;
		justify-content: center;
	}
	#header .menu-contact .contact-form a {
		margin: 0 0.5em;
		padding: 1em;
		border-radius: 0.5em;
		display: block;
		width: 50%;
		font-size: 0.8em;
	}
	#header .menu-contact .contact-form a.mailform {
		background-color: #F7C700;
		color: #fff;
	}
	#header .menu-contact .contact-form a.line {
		background-color: #00B900;
		color: #fff;
	}

	#header .menu-contact .contact-form .main {
		font-size: 1.8em;
		font-weight: bold;
		text-align: center;
		display: block;
		line-height: 1;
		padding: 0.25em 0 0.25em 1em;
	}
	#header .menu-contact .contact-form .main:before {
	    content: "";
	    display: inline-block;
	    background-image: url(../../img/common/ic-mail-wh.svg);
	    background-position: 0 50%;
	    background-repeat: no-repeat;
	    width: 1.5em;
	    height: 1.5em;
	    background-size: contain;

	}
}