@charset "utf-8";

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

/* ################################################################################################ */
/* ## PC                         ################################################################## */
/* ################################################################################################ */
#header
{
	background-color:#FFFFFF;
	/*border-right: 1px solid #404040;*/
}
#header-contents
{
	padding: 50px 40px;
}
#header #logo {
	display: block;
	margin-bottom: 40px;
}
.navigation li {
	list-style: none;
	text-align: left;
	margin-left: 0;
	margin-bottom: 1em;
}
.navigation a {
	color: #404040;
	font-size: 0.8em;
	font-weight: 500;
}
#header .pc-navigation .page-navigation a:hover {
	color: #3885ff;
	text-decoration: none;
}

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

/* ################################################################################################ */
/* ## モバイル用スタイル ###################################################################### */
/* ################################################################################################ */
@media screen and (max-width:1320px) {


	#header .mobile-navigation .navigation-title {
		display: flex;
		justify-content: space-between;
		height:15vw;
	}


	#header #logo img {

	}
	#header .navigation li {
		margin-bottom: 0;
	}
	#header .navigation a {
		font-weight: bold;
	}

	#header .mobile-navigation #tel {
		width: 15.625vw;
	}
	#header .mobile-navigation #tel img {
		position: absolute;
		top: 25%;
		left: 3.90625vw;
		width: 6vw;
		height: 4.6875vw;
	}
	#header .mobile-navigation #tel .text {
		position: absolute;
		top:calc(25% + 4.6875vw + 1px);
		font-size: 1.7rem;
		left: 3.90625vw;
	}
	#header .mobile-navigation #web {
		width: 15.625vw;
	}
	#header .mobile-navigation #web img {
		position: absolute;
		top: 10%;
		left: 30%;
		width: 30%;
		height: 60%;
	}
	#header .mobile-navigation #web .text {
		position: absolute;
		top:70%;
		font-size: 1.7rem;
		left: 15%;
	}

	#header .mobile-navigation .btnMenu {
		display: block;
		width: 100%;
		height: 100%;
		border-radius: 0;
		border: 0px solid transparent;
		background-color: transparent;
	}

	#header .mobile-navigation .btnMobileMenu {
		width: 15.625vw;
	}

	#header .mobile-navigation .btnMobileMenu > span
	{
		display:block;
		width:7.8125vw;
		height:2px;
		background-color:#404040;

		transition-duration:0.3s;
		transition-property:all;
		transition-timing-function:ease;
	}

	#header .mobile-navigation .btnMobileMenu > span:nth-child(1)
	{
		position:absolute;
		top:25%;
		right: 3.90625vw;
	}
	#header .mobile-navigation .btnMobileMenu > span:nth-child(2)
	{
		position:absolute;
		top:calc(35% + 1.0px);
		right: 3.90625vw;
	}
	#header .mobile-navigation .btnMobileMenu > span:nth-child(3)
	{
		position:absolute;
		top:calc(45% + 3.0px);
		right: 3.90625vw;
	}
	#header .mobile-navigation .btnMobileMenu > .text {
		position: absolute;
		left: 0;
		right: 0;
		top:calc(55%);
		color: #040404;
		font-size: 2.0rem;
		letter-spacing: 0.22em;
		text-align: center;
	}
	#header .mobile-navigation .btnMobileMenu > .text.text-opne {
		display: inline-block;
	}
	#header .mobile-navigation .btnMobileMenu > .text.text-close {
		display: none;
	}
	#header.showMenu .mobile-navigation .btnMobileMenu > span:nth-child(1){
		transform: rotate(45deg);
		top: 35%;
	}
	#header.showMenu .mobile-navigation .btnMobileMenu > span:nth-child(2){
		display: none;
	}
	#header.showMenu .mobile-navigation .btnMobileMenu > span:nth-child(3){
		transform: rotate(-45deg);
		top: 35%;
	}
	#header.showMenu .mobile-navigation .btnMobileMenu > .text.text-open {
		display: none;
	}
	#header.showMenu .mobile-navigation .btnMobileMenu > .text.text-close {
		display: inline-block;
	}


	.navigation.mobile-navigation .menu-list
	{
		display:none;
		overflow-y:scroll;

		position:absolute;
		top:15vw;
		bottom:0px;
		left:0px;
		right:0px;

		height:100%;
	}

	#header.showMenu
	{
		transition-duration:0.3s;
		transition-property:all;
		transition-timing-function:ease;

		height:100%;
		bottom:0;
	}
	#header.showMenu #header-contents
	{
		height:100%;
	}
	#header.showMenu .navigation.mobile-navigation
	{
		height:100%;
	}
	#header.showMenu .navigation.mobile-navigation .menu-list
	{
		display:block;
		color: #404040;
		font-size: 2.5rem;
		font-weight: bold;
		padding: 0 3.90625vw;
		padding-bottom: 15vw;
		border-top: 1px solid #707070;
	}
	#header.showMenu .navigation.mobile-navigation .menu-list li.menu-list-item {
		border-bottom: 1px solid #707070;
		margin-bottom: 0;
	}
	#header.showMenu .navigation.mobile-navigation .menu-list li.menu-list-item-2-column {
		width: 50%;
		float: left;
		box-sizing: border-box;
	}
	#header.showMenu .navigation.mobile-navigation .menu-list li.menu-list-item-2-column:nth-child(1) {
		border-right: 1px solid #707070;
		border-bottom: 1px solid #707070;
	}
	#header.showMenu .navigation.mobile-navigation .menu-list li.menu-list-item-2-column:nth-child(2) {
		padding-left: 3.125vw;
		border-bottom: 1px solid #707070;
	}
	#header.showMenu .navigation.mobile-navigation .menu-list li.menu-list-item a {
		padding: 3.125vw 0;
		display: block;
		font-size: 0.85em;
	}
	#header.showMenu .navigation.mobile-navigation .menu-list li.menu-list-item a:after {
		content: "";
		display: block;
		position: absolute;
		top: calc(50% - 0.35em);
		right: 1.0em;
		width: 0.7em;
		height: 0.7em;
		transform: rotate(-45deg) skew(10deg, 10deg);
		border-right: 1px solid #404040;
		border-bottom: 1px solid #404040;
		transition-duration: 0.3s;
		transition-property: all;
		transition-timing-function: ease;
	}
	#header.showMenu .navigation.mobile-navigation .menu-list li.menu-list-item a.no-arrow:after {
		display: none;
	}
	#header.showMenu .navigation.mobile-navigation .menu-list li.menu-list-triger > a:before,
	#header.showMenu .navigation.mobile-navigation .menu-list li.menu-list-triger > a:after {
		content: "";
		display: block;
		position: absolute;
		top: calc(50%);
		right: 0.5em;
		width: 3.75vw;
		height: 0px;
		border: none;
		border-bottom: 1px solid #404040;
		transition-duration: 0.3s;
		transition-property: all;
		transition-timing-function: ease;
	}
	#header.showMenu .navigation.mobile-navigation .menu-list li.menu-list-triger > a:after {
		transform: rotate(90deg);
	}
	#header.showMenu .navigation.mobile-navigation .menu-list li.menu-list-triger > a.on:after {
		transform: rotate(0deg);
	}
	#header.showMenu .navigation.mobile-navigation .menu-list .sub-menu-list
	{
		display:none;
	}
	#header.showMenu .navigation.mobile-navigation .menu-list .sub-menu-list.on
	{
		display:block;
		border-top: 1px solid #D1D1D1;
	}
	#header.showMenu .navigation.mobile-navigation .menu-list .sub-menu-list li {
		width: 50%;
		float: left;
		border-bottom: none;
		border-bottom: 1px solid #D1D1D1;
	}
	#header.showMenu .navigation.mobile-navigation .menu-list .sub-menu-list li:nth-child(1),
	#header.showMenu .navigation.mobile-navigation .menu-list .sub-menu-list li:nth-child(2),
	#header.showMenu .navigation.mobile-navigation .menu-list .sub-menu-list li:nth-child(5),
	#header.showMenu .navigation.mobile-navigation .menu-list .sub-menu-list li:nth-child(6),
	#header.showMenu .navigation.mobile-navigation .menu-list .sub-menu-list li:nth-child(9),
	#header.showMenu .navigation.mobile-navigation .menu-list .sub-menu-list li:nth-child(10){
		background-color: #EFEFEF;
	}
	#header.showMenu .navigation.mobile-navigation .menu-list .sub-menu-list li.menu-list-item:nth-child(odd) {
		border-right: 1px solid #D1D1D1;
	}
	#header.showMenu .navigation.mobile-navigation .menu-list .sub-menu-list li:last-child {
		border-bottom: none;
	}
	#header.showMenu .navigation.mobile-navigation .menu-list .sub-menu-list li.menu-list-item a {
		padding-left: 3.125vw;
	}
	#header.showMenu .navigation.mobile-navigation .menu-list li.menu-list-item.menu-list-item-reserve {
		background-color: #3885ff;
		padding-left: 0;
	}
	#header.showMenu .navigation.mobile-navigation .menu-list li.menu-list-item-2-column.menu-list-item-reserve:nth-child(1) {
		border-right: 1px solid #fff;
	}
	#header.showMenu .navigation.mobile-navigation .menu-list li.menu-list-item.menu-list-item-reserve a {
		color: #fff;
		text-align: center;
	}
	#header.showMenu .navigation.mobile-navigation .menu-list li.menu-list-item.menu-list-item-reserve a:after {
		border-right: 1px solid #fff;
		border-bottom: 1px solid #fff;
	}
	#header.showMenu .navigation.mobile-navigation .menu-list .sub-menu-list.sub-menu-list-rental li.menu-list-item {
	}


	#header .menu-list .sns-icon {
		text-align: center;
		padding: 3.125vw 0;
		border-bottom: 1px solid #707070;
	}
	#header .menu-list .sns-icon li {
		display: inline-block;
		margin: 0 auto;
	}
	#header .menu-list .sns-icon li:nth-child(2) {
		margin: 0 8.75vw;
	}
	#header .menu-list .instagram {
		width: 5.9375vw;
	}
	#header .menu-list .facebook {
		width: 3.125vw;
	}
	#header .menu-list .line {
		width: 6.25vw;
	}
	.sp-navigation-end {
		text-align: center;
		height: 15vw;
	}
	.sp-navigation-end .btnMobileMenu {
		height: 100%;
	}
}

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

	#body
	{
		margin-top:100px;
	}
	#header
	{
		position:fixed;
		top:0;
		bottom:auto;
		left:0;
		right:0;

		box-shadow:0px 2px 5px 0px rgba(0,0,0,0.3);

		transition-duration:0.3s;
		transition-property:all;
		transition-timing-function:ease;

		height: 100px;
	}
	#header #header-contents {
		padding: 0;
	}
	#header .navigation.tab-navigation .navigation-title
	{
		height:100px;
	}
	.navigation.tab-navigation .menu-list
	{
		display:none;
		overflow-y:scroll;

		position:absolute;
		top:100px;
		bottom:0px;
		left:0px;
		right:0px;

		height:100%;
	}
	#header #logo {
		width: 40%;
		padding-top: 1.5em;
	}
	#header .navigation.tab-navigation .navigation-title {
		height: 100px;
	}
	#header.showMenu
	{
		height:100%;
		bottom:0;
	}
	#header.showMenu #header-contents
	{
		height:100%;
	}
	#header.showMenu .navigation.tab-navigation
	{
		height:100%;
	}
	#header.showMenu .navigation.tab-navigation .menu-list
	{
		display:block;
	}
	#header.showMenu .navigation.tab-navigation .menu-list li.menu-list-item a {
		padding: 1em 0;
	}
}


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

		box-shadow:0px 2px 5px 0px rgba(0,0,0,0.3);

		transition-duration:0.3s;
		transition-property:all;
		transition-timing-function:ease;

		border-right: none;
		height: 15vw;
	}
	#header #logo {
		text-align: center;
		width: 55vw;
		padding-top: 4vw;
		margin-bottom: 0;
		margin-left: 22vw;
	}

	#header #header-contents {
		padding: 0;
	}
	#header.showMenu .navigation.mobile-navigation .menu-list
	{
		font-size: 2.2rem;
	}
	#header .navigation-title #tel {
		display: none;
	}
}