@charset "UTF-8";
/* css [globalnavi] */

/* ==========================================================================
   Globals
   ========================================================================== */
/* Most of these initial styles are global resets and defining fonts. More than likely you will be removing this section of the stylesheet */

#main-nav a {
	text-decoration: none;
	cursor: pointer;
	font-family: 'Noto Sans JP', sans-serif;
	font-weight: 500;
}

#main-nav ul {
	list-style: none;
	-webkit-box-sizing: border-box; 
	-ms-box-sizing: border-box; 
	box-sizing: border-box;
}

#main-nav li {
	-webkit-box-sizing: border-box; 
	-ms-box-sizing: border-box; 
	box-sizing: border-box;
}

/* ==========================================================================
   Menu Variables
   ========================================================================== */
/* The maximum width of the menu, usually set to the max width of your webpage. */
/* The count of all of the top level navigation items */
/* The point when the menu transitions from full to mobile */
/* Sets the fly-out menu's column width in relation to the width of its parent. Supports pixel sizes, but will be less responsive. */
/* Set the width of fixed sized columns. Setting this to 100% 
/* Height of menu in non-mobile form. Due to the vertically centered multiline text, we must set an explicit height of the main menu */
/* values:
  mega: Sets the dropdown menu to be a mega menu flyout;
  standard: Sets the dropdown menu to have a standard nested flyout;
  ! NOTE - this is a standard list menu, it will no longer support large blocks of content !
*/
/* Set the Menu Colors */
/* ==========================================================================
   Menu Design: Assigns the menu colors
   ========================================================================== */
#main-nav a {
	color: #1d1e1f;
	-webkit-transition: color .25s ease-in-out, background .25s ease-in-out;
	-ms-transition: color .25s ease-in-out, background .25s ease-in-out;
	transition: color .25s ease-in-out, background .25s ease-in-out;
}

#main-nav {
	color: #1d1e1f;
}

#main-nav ul {
	background: transparent;
}

#main-nav ul li {
	background: transparent;
	-webkit-transition: background .25s ease-in-out;
	-ms-transition: background .25s ease-in-out;
	transition: background .25s ease-in-out;
}

#main-nav > ul > li > ul {
	background: #199971;
	-webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, .2);
	box-shadow: 0 1px 2px rgba(0, 0, 0, .2);
}

#main-nav ul li a:hover {
	color: #199971;
}

#main-nav > ul > li:hover > ul > li a, #main-nav > ul > li:hover > ul > li:hover a {
	color: #fff;
}

/* ==========================================================================
   Full Page Layout: Styles only applied to the full size media query
   ========================================================================== */
/* ==========================================================================
   MOBILE LAYOUT: Styles only applied to the mobile media query;
   ========================================================================== */
/* ==========================================================================
   Media Queries
   ========================================================================== */

/* Full Page */
@media only screen and (min-width: 960px) {
	#content-wrap {
	  overflow: hidden;
	}
	
	/* Hide elements on mobile */
	.mobile-only {
		display: none!important;
		visibility: hidden;
		overflow: hidden;
		width: 0;
		height: 0;
	}
	
	#main-nav {
		position: relative;
		z-index: 100;
		margin: 0;
		max-width: 100%;
	}
	
	/* Global menu styles that will cascade into child menus */
	#main-nav ul {
		width: 100%;
		margin: 0;
		padding: 0;
	}
  
 	#main-nav ul li {
		position: relative;
		cursor: pointer;
	}
	
	#main-nav ul li a {
		width: auto;
		/*height: 100%;*/
		display: block;
		padding: 0;
		font-size: 15px;
		text-align: center;
		position: relative;
	}
	
	#main-nav ul li ul li a {
		text-align: left;
	}

	/* Initial rollover styles */
	#main-nav > ul {
		width: 100%;
		z-index: 100;
		display: -webkit-box;
		display: -ms-flexbox;
		display: flex;
		-webkit-box-orient: horizontal;
		-webkit-box-direction: normal;
		-ms-flex-direction: row;
		flex-direction: row;
		-ms-flex-wrap: nowrap;
		flex-wrap: nowrap;
		-webkit-box-pack: end;
		-ms-flex-pack: end;
		justify-content: flex-end;
	}
	
	#main-nav > ul > li {
		height: 65px;
		margin-right: 13px;
		margin-left: 13px;
		white-space: nowrap;
	}
	
	#main-nav > ul > li:before, #main-nav > ul > li.last:after {
		content: "";
		width: 1px;
		height: 25px;
		background-color: #cdcdcd;
		position: absolute;
		top: 20px;
		left: -13px;
		display: block;
		webkit-transition: background-color .25s ease-in-out;
		-moz-transition: background-color .25s ease-in-out;
		-o-transition: background-color .25s ease-in-out;
		-ms-transition: background-color .25s ease-in-out;
		transition: background-color .25s ease-in-out;
	}
	
	#main-nav > ul > li.pcFirst:before {
		content: "";
		width: 0;
	}
	
	#main-nav > ul > li:last-child {
		margin-right: 0;
	}
	
	#main-nav > ul > li > a {
		font-size: 17px;
		font-weight: 600;
		width: 100%;
		text-align: center;
		webkit-transition: all .25s ease-in-out;
		-ms-transition: all .25s ease-in-out;
		transition: all .25s ease-in-out;
		display: -webkit-box;
		display: -ms-flexbox;
		display: flex;
		-webkit-box-orient: horizontal;
		-webkit-box-direction: normal;
		-ms-flex-direction: row;
		flex-direction: row;
		-ms-flex-wrap: nowrap;
		flex-wrap: nowrap;
		-webkit-box-align: center;
		-ms-flex-align: center;
		align-items: center;
		-webkit-box-sizing: border-box;
		-ms-box-sizing: border-box;
		box-sizing: border-box;
	}
	
	#main-nav > ul > li > a span {
		padding-top: 19px;
	}
	
	#main-nav > ul > li:after {
		content: "";
		width: 0;
		margin-right: auto;
		margin-left: auto;
		border-bottom: 3px solid rgba(25, 153, 113, 0);/* #199971 */
		position: absolute;
		bottom: 0;
		right: 0;
		left: 0;
		webkit-transition: all .25s ease-in-out;
		-ms-transition: all .25s ease-in-out;
		transition: all .25s ease-in-out;
	}
	
	#main-nav > ul > li:hover:after {
		width: 100%;
		border-bottom: 3px solid #199971;
	}
	
	/* Menu content formatting */
	nav#main-nav .menu-content {
		padding: 0.5em;
	}
	
	/* Menu-transitions */
	#main-nav > ul > li a {
		-webkit-transition: background-color 0.25s ease-in-out;
		-ms-transition: background-color 0.25s ease-in-out;
		transition: background-color 0.25s ease-in-out;
	}
	
	#main-nav > ul > li > ul {
		opacity: 0;
		-webkit-transition: opacity 0.25s ease-in-out;
		-ms-transition: opacity 0.25s ease-in-out;
		transition: opacity 0.25s ease-in-out;
	}
	
	#main-nav > ul > li:hover > ul {
		opacity: 1;
	}
	
	/* Created unlimited rollover functionality */
	#main-nav ul li {
		position: relative;
	}
  
	#main-nav ul > li:hover > ul {
		left: 0;
		top: 65px;
	}
	
	#main-nav ul ul {
		position: absolute;
		left: -9999px;
		white-space: nowrap;
		width: 100%;
		min-width: 100%;
		width: auto;
		-webkit-border-radius: 0 0 3px 3px;
		-ms-border-radius: 0 0 3px 3px;
		border-radius: 0 0 3px 3px;
	}
	
	#main-nav ul ul li {
		min-width: 100%;
		height: 38px;
		min-height: 38px;
		display: table;
		position: relative;
	}
	
	#main-nav ul ul li:last-child {
		-webkit-border-radius: 0 0 3px 3px;
		-ms-border-radius: 0 0 3px 3px;
		border-radius: 0 0 3px 3px;
	}
	
	#main-nav ul ul li:hover {
		background-color: #35c296;
	}
	
	#main-nav ul ul li a {
		font-size: 15px;
		display: table-cell;
		vertical-align: middle;
		padding-right: 2em;
		padding-left: 1em;
		position: relative;
		-webkit-transition: all 0.25s ease-in-out;
		-ms-transition: all 0.25s ease-in-out;
		transition: all 0.25s ease-in-out;
	}
	
	#main-nav ul ul li:last-child a {
		-webkit-border-radius: 0 0 3px 3px;
		-ms-border-radius: 0 0 3px 3px;
		border-radius: inherit;
	}
	
	#main-nav ul ul li a:before {
		content: "\f105";
		font: 12px "Font Awesome 5 Free";
		font-weight: 900;
		color: rgba(255, 255, 255, .5);
		margin-right: .5em;
		-webkit-transition: color 0.25s ease-in-out;
		-ms-transition: color 0.25s ease-in-out;
		transition: color 0.25s ease-in-out;
	}
	
	#main-nav ul ul li a:hover:before {
		color: rgba(255, 255, 255, 1);
	}
	
	#main-nav ul ul li:hover ul {
		left: 100%;
		top: 0;
	}
	
	/* Creates support for menu items to flyout left instead of right */
	#main-nav > ul > li.end-menu-item:hover > ul {
		right: 0;
		left: auto;
	}
	
	#main-nav > ul > li.end-menu-item > ul li:hover ul {
		right: 100%;
		left: auto;
	}
	
	/* Overwrites the mobile styles, fixes bug if user toggles menu in mobile then scales up to full */
	
	#main-nav ul {
		margin-left: 0px !important;
		/*display: block !important;*/
	}
	
	/* Strictly Look and Feel */
	#placeholder-content {
		font-size: 14px;
	}
	
}

/*-- mobile media query --*/
@media only screen and (max-width: 959px) {
	#content-wrap {
		overflow: hidden;
	}
	
	/*-- " vertical-align: top; " KEEP THIS STYLE, the JS anchors onto this to keep a consistant experience between script and style, the overflow is to stop unwanted x scolling on mobile. --*/
	
	body {
		overflow-x: hidden;
		vertical-align: top;
	}
	
	body.lock {
		overflow: hidden;
	}
	
	body.lock #placeholder-content {
		overflow: hidden;
	}
	
	.mobile-only {
		/*display: block;*/
		visibility: visible !important;
		width: 100%;
		height: auto;
	}
    
	/* Create page slide transition */
	#page-wrap {
		width: 100%;
		padding-top: 46px;
		position: relative;
		right: 0;
		/*overflow-x: hidden; */
		-webkit-overflow-scrolling: touch;
		-webkit-transition: right 0.25s ease-in-out;
		-ms-transition: right 0.25s ease-in-out;
		transition: right 0.25s ease-in-out;
	}
	
	#page-wrap.active, #page-wrap.active #mobile-header {
		right: 250px;
	}
	
	#page-wrap:before {
		content: "";
		width: 0;
		height: 100%;
		background-color: rgba(255, 255, 255, .9);
		position: absolute;
		top: 0;
		right: 0;
		z-index: 2;
		opacity: 0;
		-webkit-transition: all .25s ease-in-out;
		-ms-transition: all .25s ease-in-out;
		transition: all .25s ease-in-out;
	}
	
	#page-wrap.active:before {
		width: 100%;
		opacity: 1;
	}
	
	#page-wrap.active #mobile-header {
		background-color: rgba(255, 255, 255, .95)
	}
	
	#page-wrap #main-nav {
		width: 250px;
		height: 100%;
		padding-bottom: 0;
		position: fixed;
		top: 0;
		right: -250px;
		overflow-x: hidden;
		overflow-y: auto;
		background-color: #199971;
		-webkit-transition: right 0.25s ease-in-out;
		-ms-transition: right 0.25s ease-in-out;
		transition: right 0.25s ease-in-out;
	}
	
	#page-wrap.active #main-nav {
		right: 0;
	}
	
	#page-wrap #main-nav > ul {
		-webkit-transition: margin-left 0.25s ease-in-out;
		-ms-transition: margin-left 0.25s ease-in-out;
		transition: margin-left 0.25s ease-in-out;
	}
	
	/* Styles the mobile menu */
	#mobile-header {
		line-height: 46px;
		width: 100%; 
		height: 46px;
		padding: 0 6px 0 15px;
		position: fixed;
		top: 0;
		right: 0;
		background-color: rgba(255, 255, 255, .9);
		display: -webkit-box;
		display: -ms-flexbox;
		display: flex;
		-webkit-box-orient: horizontal;
		-webkit-box-direction: normal;
		-ms-flex-direction: row;
		flex-direction: row;
		-ms-flex-wrap: nowrap;
		flex-wrap: nowrap;
		-webkit-box-pack: justify;
		-ms-flex-pack: justify;
		justify-content: space-between;
		-webkit-box-align: center;
		-ms-flex-align: center;
		align-items: center;
		-webkit-box-sizing: border-box; 
		-ms-box-sizing: border-box; 
		box-sizing: border-box;
		-webkit-box-shadow: 0 0 2px 0 rgba(0, 0, 0, .3);
		-ms-box-shadow: 0 0 2px 0 rgba(0, 0, 0, .3);
		box-shadow: 0 0 2px 0 rgba(0, 0, 0, .3);
		-webkit-transition: right 0.25s ease-in-out;
		-ms-transition: right 0.25s ease-in-out;
		transition: right 0.25s ease-in-out;
	}
	
	/* Navigation Area */
	.nav-area {
		text-align: center;
		width: calc(100% - 200px); /*  mobile-page-title deduct from full width. */
		display: -webkit-box;
		display: -ms-flexbox;
		display: flex;
		-webkit-box-orient: horizontal;
		-webkit-box-direction: normal;
		-ms-flex-direction: row;
		flex-direction: row;
		-ms-flex-wrap: nowrap;
		flex-wrap: nowrap;
		-webkit-box-pack: end;
		-ms-flex-pack: end;
		justify-content: flex-end;
	}
  
 /* ************************************************ [ h1 ] */
	#mobile-page-title {
 		text-align: left;
 		width: 200px;
 		height: 46px;
 		padding: 0;
	}
 	
 	#mobile-page-title .logoMark_sp {
 		height: 100%;
 		margin: 0;
 		padding: 0;
 	}
 	
 	#mobile-page-title .logoMark_sp a {
 		width: 100%;
 		height: 0;
 		margin: 0;
 		padding: 46px 0 0;
 		display: block;
 		overflow: hidden;
 		background: url(../images/logo_sp.png) 0 50% no-repeat;
 		background-size: 200px auto;
 	}

/* ==========================================================================
   Nav-Area Navigation
   ========================================================================== */
	
/************************************************* [ Links ] */
	 #mobile-links-btn {
 		width: 46px;
 		height: 46px;
	}
	
 	#mobile-header #mobile-links-btn #mobile-links-reservation {
 		width: 46px;
 		height: 46px;
 	}
 	
 	#mobile-header #mobile-links-btn #mobile-links-reservation a {
 		width: 100%;
 		height: 0;
 		margin: 0;
 		padding: 46px 0 0 0;
 		display: block;
 		overflow: hidden;
 		background: url(../images/mobile-btn_reservation.png) 50% 50% no-repeat;
 		background-size: 46px 46px;
 		/*background-image: -webkit-linear-gradient(left, #2f95d6 0%, #27c5dc 100%);
		background-image: -ms-linear-gradient(left, #2f95d6 0%, #27c5dc 100%);
		background-image: linear-gradient(to right, #2f95d6 0%, #27c5dc 100%);*/
		background-color: #2f95d6;
 	}
 	
 	#mobile-header #mobile-links-btn #mobile-links-reservation a:hover {
 		background-color: #27c5dc;
 	}
	
 	#mobile-header #mobile-links-btn #mobile-links-reservation a b {
 		display: none;
		/*padding: 0;
		margin: 0;
		color: #fff;
		font-family: 'Noto Sans JP', sans-serif;
		font-size: 11px;
		font-weight: 600;
		text-align: center;*/
 	}
	
/************************************************* [ Menu ] */
 	#mobile-menu-nav {
 		width: 46px;
	}
 	
 	#mobile-header #mobile-menu-btn {
 		width: 46px;
 		height: 0;
 		padding-top: 46px;
 		overflow: hidden;
 		display: block;
 		background: url(../images/menu-toggle_sphone.png) 0 0 no-repeat;
 		-webkit-background-size: 92px 92px;
 		-moz-background-size: 92px 92px;
 		-o-background-size: 92px 92px;
 		background-size: 92px 92px;
 		-webkit-transition: background-color 0.15s ease-in-out;
 		-ms-transition: background-color 0.15s ease-in-out;
 		transition: background-color 0.15s ease-in-out;
 	}
 	
 	#mobile-header #mobile-menu-btn.active {
 		background-position: 0px -46px;
 	}
	
	#mobile-header .nav-area a b {
		color: #a3a8ad;
		font: normal normal 9px/1 "Open Sans", "Lucida Grande", Arial, sans-serif;
		margin: 0;
		padding: 0;
		display: block;
		position: absolute;
		right: 0;
		left: 0;
		bottom: 7px;
	}

  
 /* Mobile menu styling */
#main-nav > ul > li > ul {
	background-color: #199971 !important;
	height: auto;
	-webkit-box-shadow: 0 0 rgba(0, 0, 0, 0);
	-moz-box-shadow: 0 0 rgba(0, 0, 0, 0);
	box-shadow: 0 0 rgba(0, 0, 0, 0);
}

#main-nav {
	overflow-x: hidden;
}

#main-nav ul {
	position: absolute;
	width: 100%;
	background-color: #199971;
	padding-bottom: 30px;
}

#main-nav ul li {
	width: 100%;
	border-bottom: 1px solid rgba(255, 255, 255, .2);
}
#main-nav ul li a {
	height: 46px;
	padding: 0em 1.5em 0em 2em;
	text-overflow: ellipsis;
	white-space: nowrap;
	line-height: 46px;
	display: block;
	position: relative;
	color: #fff;
}

#main-nav ul li a:hover {
	color: #fff;
	background-color: #38c096;
}

#main-nav ul li a:before {
	content: "\f0c8";
	font: 10px "Font Awesome 5 Free";
	font-weight: 900;
	line-height: 46px;
	position: relative;
	bottom: 1px;
	color: #edfcf7;
	margin-right: 5px;
	-webkit-transition: all .25s ease-in-out;
	-ms-transition: all .25s ease-in-out;
	transition: all .25s ease-in-out;
}

#main-nav ul li.mobile-child-nav a:before {
 	content: "";
 	left: 0;
}
 
#main-nav ul li a i {
	display: none;
}

#main-nav ul ul {
	width: 250px;
	position: absolute;
	display: none;
	left: 250px;
	top: -1px;
}

#main-nav li.parent.active ul {
	display: block;
}

#main-nav li.parent > a:after {
	content: "\f138";
	font-family: "Font Awesome 5 Free";
	font-weight: 900;
	position: absolute;
	right: 1em;
	color: rgba(255, 255, 255, .7);
}

#main-nav ul li a:hover:before {
	color: rgba(255, 255, 255, .7);
}

#main-nav li.parent > a:hover:after {
	color: rgba(255, 255, 255, 1);
}

/* Company Information */
#main-nav > ul > li.comp-logo {
	padding-top: 25px;
	padding-bottom: 25px;
	background-color: #077c58;
}

#main-nav > ul > li.comp-logo .logoMark_comp {
	text-align: center;
	padding: 0;
	margin: 0 auto;
}

#main-nav > ul > li.comp-logo .logoMark_comp a {
	width: 180px;
	height: 0;
	margin: 0 auto;
	padding: 28px 0 0 0;
	display: block;
	overflow: hidden;
	background: url(../images/comp-logo_sp.png) 0 0 no-repeat;
	background-size: auto 28px;
}

#main-nav > ul > li.comp-logo .logoMark_comp a:hover {
	background-color: transparent;
}

/*== Tel ==*/
#main-nav > ul > li.comp-logo h3 {
	padding: 0;
	margin: 8px auto 0 auto;
	width: 80%;
	height: auto;
	-webkit-box-sizing: border-box; 
	-moz-box-sizing: border-box; 
	-o-box-sizing: border-box; 
	-ms-box-sizing: border-box; 
	box-sizing: border-box;
}

#main-nav > ul > li.comp-logo h3 a.phone {
	padding: 8px 1em;
	margin: 0;
	width: 100%;
	height: auto;
	font-size: 15px;
	font-weight: 600;
	color: rgba(255, 255, 255, .85);
	text-align: center;
	text-overflow: ellipsis;
	white-space: nowrap;
	line-height: normal;
	display: block;
	border: 1px solid rgba(255, 255, 255, .3);
	-webkit-border-radius: 4px;
	-moz-border-radius: 4px;
	-ms-border-radius: 4px;
	-o-border-radius: 4px;
	border-radius: 4px;
	-webkit-box-sizing: border-box; 
	-moz-box-sizing: border-box; 
	-o-box-sizing: border-box; 
	-ms-box-sizing: border-box; 
	box-sizing: border-box;
}

#main-nav > ul > li.comp-logo h3 a.phone:before {
	display: none;
}

#main-nav > ul > li.comp-logo h3 a.phone img {
	padding: 0;
	margin: 0 3px 0 0;
	margin-top: -3px;
	width: 13px;
	height: 13px;
	display: inline-block;
}

  
  /* Mobile specific content styling */
  #main-nav .menu-content {
    padding: 1em;
  }
  
  /* Styles back button/toggled link */
  #main-nav ul li.mobile-child-nav {
    overflow: hidden;
  }
  
  #main-nav ul li.mobile-child-nav a {
		font-size: 15px;
		font-weight: bold;
	}
  
  #main-nav ul li.mobile-child-nav .mobile-nav-back {
    position: absolute;
    top: 0;
    left: 0;
		padding: 0;
    float: left;
    width: 46px;
    height: 46px;
    display: block;
    background: url(../images/menu-toggle_sphone.png) -46px 0px no-repeat rgba(255, 255, 255, .07);
		background-size: 92px 92px;
		-webkit-background-size: 92px 92px;
    -moz-background-size: 92px 92px;
    -o-background-size: 92px 92px;
	}
	
  #main-nav ul li.mobile-child-nav .mobile-nav-back:hover {
  	background: url(../images/menu-toggle_sphone.png) -46px -46px no-repeat rgba(255, 255, 255, .07);
  	background-size: 92px 92px;
  	-webkit-background-size: 92px 92px;
  	-moz-background-size: 92px 92px;
  	-o-background-size: 92px 92px;
  }
  
  #main-nav ul li.mobile-child-nav .mobile-clicked-link {
    overflow: hidden;
    text-overflow: ellipsis;
    width: 204px;
    margin-left: 46px;
    float: left;
    -webkit-box-sizing: border-box; 
    -moz-box-sizing: border-box; 
    -o-box-sizing: border-box; 
    -ms-box-sizing: border-box; 
    box-sizing: border-box;
	}
	
  /* Strictly Look and Feel */
  #placeholder-content {
    font-size: 14px;
  }
}


.lt-ie9 #main-nav ul li {
  float: left;
  position: relative;
}
.lt-ie9 #main-nav ul ul {
  position: absolute;
  left: -9999px;
}
.lt-ie9 #main-nav ul > li:hover > ul {
  left: 0;
}
.lt-ie9 #main-nav ul ul {
  left: -9999px;
  width: 120%;
}
.lt-ie9 #main-nav ul ul li {
  width: 100%;
}
.lt-ie9 #main-nav ul ul li:hover ul {
  left: 100%;
  top: 0;
}