@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 */

a {
  text-decoration: none;
  cursor: pointer;
}

#main-nav ul {
  list-style: none;
  -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 li {
	-webkit-box-sizing: border-box; 
	-moz-box-sizing: border-box; 
	-o-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: #fff;
}

#mobile-header {
  background-color: rgba(26, 26, 26, .97);
}

#main-nav {
  color: #fff;
}

#main-nav ul {
	background-color: rgba(26, 26, 26, 0);
	-webkit-transition: background-color 0.3s;
	-moz-transition: background-color 0.3s;
	-ms-transition: background-color 0.3s;
	-o-transition: background-color 0.3s;
	transition: background-color 0.3s;
}

/*#main-nav > ul > li > ul {
  background-color: #0069a2;
  height: auto;
	-webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, .6);
	-moz-box-shadow: 0 1px 2px rgba(0, 0, 0, .6);
	box-shadow: 0 1px 2px rgba(0, 0, 0, .6);
}*/

#main-nav ul li a:hover, #main-nav > ul > li:hover > a {
  color: #fff;
	text-decoration: none;
	background-color: #5b5b5b;
}

/* ==========================================================================
   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;
  	visibility: hidden;
  	overflow: hidden;
  	width: 0;
  	height: 0;
  }
  
  #main-nav {
    position: relative;
    z-index: 100;
		max-width: 1080px;
		margin: 0 auto;
	}
	
	#main-nav > ul > li ul {
	  background-color: #dbefdb;
	  height: auto;
		-webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, .6);
		-moz-box-shadow: 0 1px 2px rgba(0, 0, 0, .6);
		box-shadow: 0 1px 2px rgba(0, 0, 0, .6);
	}
	
	#main-nav > ul > li > ul > li > a {
		webkit-transition: all .25s ease-in-out;
		-moz-transition: all .25s ease-in-out;
		-o-transition: all .25s ease-in-out;
		-ms-transition: all .25s ease-in-out;
		transition: all .25s ease-in-out;
	}
	
	#main-nav > ul > li:hover > ul > li:hover > a {
	  color: #fff;
		text-decoration: none;
		background-color: #5b5b5b;
	}
  
  /* Global menu styles that will cascade into child menus */
  
  #main-nav ul {
		font-size: 0;
		/*width: 100%;
		margin: 0 auto;
		padding: 0 calc((100% - 1080px) / 2) 0 calc((100% - 1080px) / 2);*/
		/* border-bottom: 3px solid #5b5b5b; */
	}
  
  #main-nav ul li {
  	width: 215.5px;
		width: calc(215.5/1080*100%); /* 180px */
		/*font-size: 10px;*/
		display: inline-block;
	}
  
  /* #main-nav > ul > li:first-child {
  	width: 60px;
		width: calc(60/1080*100%);
	} */ /* 60px */
  
  #main-nav ul li a {
  	width: auto;
		height: 100%;
    display: block;
    padding: 0;
		font-size: 15px;
		text-align: center;
		//text-shadow: 0 1px 1px rgba(0, 0, 0, 0.25);
	}
	
	#main-nav ul li a i {
		font-size: 10px;
		font-weight: normal;
		font-style: normal;
		display: block;
		margin-top: .2em;
	}
		
	/* #main-nav > ul > li:first-child a {
		height: 0;
		padding-top: 48px;
		background: url(../images/logo-symbol_colored@2x.png) 50% 50% no-repeat;
		background-size: 32px 28px;
		overflow: hidden;
		display: block;
	} */
	
  #main-nav ul li ul li a {
    text-align: left;
  }

  
  /* Initial rollover styles */
  #main-nav > ul {
    min-height: 56px;
    z-index: 100;
		text-align: center;
		position: relative;
	}
  
  #main-nav > ul > li {
		position: relative;
    display: inline-block;
    height: 56px;
    min-height: 56px;
    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:before {
  	content: "";
  	width: 1px;
  	height: 80%;
  	background-color: rgba(214, 214, 214, .2);
  	position: absolute;
  	top: 10%;
  	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:nth-child(5):after {
		content: "";
		width: 1px;
		height: 80%;
		background-color: rgba(214, 214, 214, .2);
		position: absolute;
		top: 10%;
		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:before {
		left: 0;
	}*/
	
	#main-nav > ul > li:nth-child(5):after {
		right: 0;
	}
	
  
  /*#main-nav > ul > li:first-child:before {
		width: 0;
	}*/
  
  #main-nav > ul > li.sns {
	  padding: 0;
	  margin: 0;
	  display: none;
	}
	
  #main-nav > ul > li:hover {
  	background-color: #5b5b5b;
	}
  
  #main-nav > ul > li:hover:before, #main-nav > ul > li:hover + li:before, #main-nav > ul > li:hover:last-child:after {
  	background-color: transparent;
  }
  
  #main-nav > ul > li > a {
  	color: #fff;
  	width: 100%;
  	height: 56px;
  	min-height: 56px;
    padding: 0;
    text-align: center;
    display: table;
    -moz-box-sizing: border-box;
    -ms-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -khtml-box-sizing: border-box;
    box-sizing: border-box;
	}
	
	#main-nav > ul > li > a:hover {
		color: #fff;
	}
  
  #main-nav > ul > li > a > span {
    display: table-cell;
    vertical-align: middle;
    text-align: center;
		position: relative;
		top: 1px;
		webkit-transition: color .25s ease-in-out;
		-moz-transition: color .25s ease-in-out;
		-o-transition: color .25s ease-in-out;
		-ms-transition: color .25s ease-in-out;
		transition: color .25s ease-in-out;
	}
	
	/*#main-nav > ul > li:first-child > a > span {
		height: 0;
		padding-top: 34px;
		background: url(../images/globalnavi_home@2x.png) 50% 50% no-repeat;
		background-size: 20px 21px;
		display: block;
		overflow: hidden;
	}*/
  

  /* 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;
    -moz-transition: background-color 0.25s ease-in-out;
    -o-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;
    -moz-transition: opacity 0.25s ease-in-out;
    -o-transition: opacity 0.25s ease-in-out;
    transition: opacity 0.25s ease-in-out;
		border-bottom-style: none;
	}
  
  #main-nav > ul > li:hover > ul {
    opacity: 1;
  }
  
  /* Standard navigation output */
  /* Look and feel */
  #main-nav > ul > li > ul > li > a {
    font-weight: normal;
		font-style: normal;
		text-shadow: none;
	}
  
  #main-nav > ul > li > ul > li a {
		padding: 1em;
	}
	
  
  /* Created unlimited rollover functionality */
  #main-nav ul li {
    float: left;
    position: relative;
  }
  
  #main-nav ul ul {
    position: absolute;
    left: -9999px;
  }
  
  #main-nav ul > li:hover > ul {
    left: 0;
  }
  
  #main-nav ul ul {
    left: -9999px;
    //width: 120%;
    min-width: 100%;
  }
  
  #main-nav ul ul li {
    width: 100%;
	background-color: #a0a0a0;
	border-bottom: solid 1px #cfd3d5;
  }
  
  #main-nav ul ul li:hover ul {
    left: 100%;
    top: 20px;
  }
  
  #main-nav ul ul a {
  	font-size: 14px;
  	white-space: nowrap;
  }
  
  
  /* 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: 16px;
  }
  
 }


/*-- 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 !important;
  	visibility: visible !important;
  	width: 100%;
  	height: auto;
  }
    
  /* Create page slide transition */
  #page-wrap {
    width: 100%;
    -webkit-transition: right 0.25s ease-in-out;
    -moz-transition: right 0.25s ease-in-out;
    -o-transition: right 0.25s ease-in-out;
    transition: right 0.25s ease-in-out;
    position: relative;
    right: 0;
   /*overflow-x: hidden; */
    padding-top: 56px;
    -webkit-overflow-scrolling: touch;
	}
	
  #page-wrap.active,
  #page-wrap.active #mobile-header {
    right: 250px;
  }
  
  #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: #1a1a1a;
    -webkit-transition: right 0.25s ease-in-out;
    -moz-transition: right 0.25s ease-in-out;
    -o-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;
    -moz-transition: margin-left 0.25s ease-in-out;
    -o-transition: margin-left 0.25s ease-in-out;
    transition: margin-left 0.25s ease-in-out;
  }
  

  /* Styles the mobile menu */
  #mobile-header {
  	line-height: 56px;
  	width: 100%;
  	height: 56px;
  	position: fixed;
  	top: 0;
  	right: 0;
	background: linear-gradient(-135deg, #d4010e, #b9000b);
  	-webkit-box-shadow: 0 0 2px 0 rgba(0, 0, 0, .8);
  	-moz-box-shadow: 0 0 2px 0 rgba(0, 0, 0, .8);
  	box-shadow: 0 0 2px 0 rgba(0, 0, 0, .8);
    -webkit-transition: right 0.25s ease-in-out;
    -moz-transition: right 0.25s ease-in-out;
    -o-transition: right 0.25s ease-in-out;
    transition: right 0.25s ease-in-out;
	}
  
 /************************************************* [ h1 ] */
	#mobile-page-title {
 		display: inline-block;
 		text-align: left;
 		width: -webkit-calc(100% - 92px);
 		width: calc(100% - 92px);
 		height: 56px;
 		margin: 0 0 0 0.5%;
 		padding: 0;
 		float: left;
 		width: 150px;
	}
 	
 	#mobile-page-title h1 {
 		margin: 0;
 		padding: 0;
 		height: 56px;
 	}
 	
 	#mobile-page-title h1 a {
 		width: 100%;
 		height: 0;
 		margin: 0;
 		padding: 56px 0 0;
 		display: block;
 		overflow: hidden;
 		background: url(../images/common/h1_logo_sp002.png) 50% 50% no-repeat;
 		background-size: 133px 48px;
 	}
 	
 /************************************************* [ Mail ] */
 	#mobile-links-nav {
 		width: 56px;
 		height: 56px;
 		margin: 0;
 		display: inline-block;
 		float: right;
 	}
 	
 	#mobile-header #mobile-mail-btn {
 		margin: 0;
 		padding: 0;
 		//min-width: 56px;
 		height: 56px;
 	}
 	
 	#mobile-header #mobile-mail-btn a {
 		//width: 56px;
 		width: 100%;
 		height: 0;
 		margin: 0;
 		padding: 56px 0 0;
 		display: block;
 		overflow: hidden;
 		background: url(../images/menu-toggle_mail.png) 50% 0 no-repeat;
 		-webkit-background-size: 56px 112px;
 		-moz-background-size: 56px 112px;
 		-o-background-size: 56px 112px;
 		background-size: 56px 112px;
 		-webkit-transition: background-color 0.15s ease-in-out;
 		-moz-transition: background-color 0.15s ease-in-out;
 		-o-transition: background-color 0.15s ease-in-out;
 		transition: background-color 0.15s ease-in-out;
 		background-color: #5b5b5b;
 	}
 	
 	#mobile-header #mobile-mail-btn a:hover {
 		background-color: #a0a0a0;
 	}
 	
 	#mobile-header #mobile-mail-btn a:active {
 		background-position: 0px -56px;
 		background-color: #5b5b5b;
 	}

 /************************************************* [ Tel] */
 	#mobile-links-nav {
 		width: 56px;
 		height: 56px;
 		margin: 0;
 		display: inline-block;
 		float: right;
 	}
 	
 	#mobile-header #mobile-tel-btn {
 		margin: 0;
 		padding: 0;
 		//min-width: 56px;
 		height: 56px;
 	}
 	
 	#mobile-header #mobile-tel-btn a {
 		//width: 56px;
 		width: 100%;
 		height: 0;
 		margin: 0;
 		padding: 56px 0 0;
 		display: block;
 		overflow: hidden;
 		background: url(../images/menu-toggle_tel.png) 50% 0 no-repeat;
 		-webkit-background-size: 56px 112px;
 		-moz-background-size: 56px 112px;
 		-o-background-size: 56px 112px;
 		background-size: 56px 112px;
 		-webkit-transition: background-color 0.15s ease-in-out;
 		-moz-transition: background-color 0.15s ease-in-out;
 		-o-transition: background-color 0.15s ease-in-out;
 		transition: background-color 0.15s ease-in-out;
 		background-color: #c6cbd0;
 	}
 	
 	#mobile-header #mobile-tel-btn a:hover {
 		background-color: #a0a0a0;
 	}
 	
 	#mobile-header #mobile-tel-btn a:active {
 		background-position: 0px -56px;
 		background-color: #5b5b5b;
 	}
 	
 /************************************************* [ Menu ] */	 
  #mobile-menu-nav {
 		width: 56px;
 		display: inline-block;
 		float: right;
 	}
 	
 	#mobile-header #mobile-menu-btn {
 		width: 56px;
 		height: 0;
 		padding-top: 56px;
 		overflow: hidden;
 		display: block;
 		background: url(../images/menu-toggle_sphone.png) 0 0 no-repeat;
 		-webkit-background-size: 112px 112px;
 		-moz-background-size: 112px 112px;
 		-o-background-size: 112px 112px;
 		background-size: 112px 112px;
 		-webkit-transition: background-color 0.15s ease-in-out;
 		-moz-transition: background-color 0.15s ease-in-out;
 		-o-transition: background-color 0.15s ease-in-out;
 		transition: background-color 0.15s ease-in-out;
		background-color: #1a1a1a;
 	}
 	
 	#mobile-header #mobile-menu-btn:hover {
 		background-color: #a0a0a0;
 	}
 	
 	#mobile-header #mobile-menu-btn.active {
 		background-position: 0px -56px;
 		background-color: #1a1a1a;
 	}
   
 
  
 /* Mobile menu styling */
#main-nav > ul > li > ul {
	background-color: #1a1a1a !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: #1a1a1a;
	padding-bottom: 30px;
	//padding-top: 56px;
}

#main-nav ul li {
	width: 100%;
	border-bottom: 1px solid #d3dbde;
}

#main-nav ul li a {
	height: 56px;
	padding: 0em 1.5em 0em 2em;
	text-overflow: ellipsis;
	white-space: nowrap;
	line-height: 56px;
	display: block;
	position: relative;
}

#main-nav ul li a:hover {
	background-color: #5b5b5b;
}

#main-nav ul li a:before {
	content: "\f0c8";
	font: 6px/56px "FontAwesome";
	position: relative;
	bottom: 3px;
	//left: 2.5em;
	color: rgba(255, 255, 255, .75);
	margin-right: 5px;
}

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

#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: "FontAwesome";
	position: absolute;
	right: 1em;
	color: rgba(255, 255, 255, .75);
}
	
#main-nav ul li a:hover:before {
	color: rgba(255, 255, 255, .75);
}

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

  /* 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;
		text-align: left;
	}
	
  #main-nav ul li.mobile-child-nav .mobile-nav-back {
    position: absolute;
    top: 0;
    left: 0;
		padding: 0;
    float: left;
    width: 56px;
    height: 56px;
    display: block;
    background: url(../images/menu-toggle_sphone.png) -56px 0px no-repeat rgba(255, 255, 255, .07);
		background-size: 115px 115px;
		-webkit-background-size: 115px 115px;
    -moz-background-size: 115px 115px;
    -o-background-size: 115px 115px;
	}
	
  #main-nav ul li.mobile-child-nav .mobile-nav-back:hover {
  	background: url(../images/menu-toggle_sphone.png) -56px -56px no-repeat rgba(255, 255, 255, .07);
  	background-size: 115px 115px;
  	-webkit-background-size: 115px 115px;
  	-moz-background-size: 115px 115px;
  	-o-background-size: 115px 115px;
  }
  
  #main-nav ul li.mobile-child-nav .mobile-clicked-link {
    overflow: hidden;
    text-overflow: ellipsis;
    width: 204px;
    margin-left: 56px;
    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;
  }
  
  #main-nav > ul > li > ul > li > i {
	display: none;
	visibility: hidden;
}

/*== SNS ==*/
#main-nav ul li.sns {
	padding-top: 35px;
	margin: 0 auto;
	width: 100%;
	height: auto;
	border-bottom: none;
}

#main-nav ul li.sns h2 {
	padding-bottom: 3px;
	margin: 0 auto;
	width: 90%;
	border-bottom: 1px solid #d3dbde;
	color: #fff;
	font-size: 16px;
	font-weight: 600;
	text-align: center;
	line-height: 1.0;
}

#main-nav ul li.sns .icon-sns {
	padding: 0;
	margin: 0 auto;
	margin-top: 8px;
	width: 84%;
	height: auto;
	-webkit-box-sizing: border-box;
	-ms-box-sizing: border-box;
	box-sizing: border-box;
}

#main-nav ul li.sns .icon-sns h3 {
	padding: 0;
	margin: 0;
	width: 100%;
	height: auto;
	background-color: #fff;
	-webkit-box-sizing: border-box;
	-ms-box-sizing: border-box;
	box-sizing: border-box;
	-webkit-border-radius: 3px;
	-ms-border-radius: 3px;
	border-radius: 3px;
}

#main-nav ul li.sns .icon-sns h3.btn_insta a {
	padding: 0;
	margin: 0 auto;
	width: 100%;
	height: 42px;
	line-height: 42px;
	display: block;
	overflow: hidden;
	background-color: #fff;
	background: linear-gradient(to right, #5478f2 0%, #f23f79 60%, orange 100%);
	-webkit-border-radius: 3px;
	-ms-border-radius: 3px;
	border-radius: 3px;
	color: #fff;
	font-size: 14px;
	font-weight: 500;
	text-decoration: none;
	text-align: center;
}

#main-nav ul li.sns .icon-sns h3.btn_insta a .fa-instagram {
	padding: 0;
	margin-right: 6px;
	color: #fff;
	font-weight: 900;
}

#main-nav ul li.sns .icon-sns h3.btn_insta a:before {
	content: "\f16d";
	font: 900 14px/42px "Font Awesome 5 Free";
	color: #fff;
	position: relative;
	display: none;
}

#main-nav ul li.sns .icon-sns h3.btn_insta a:hover {
	opacity: .7;
	filter: alpha(opacity=70);
	text-decoration: none;
}
  
  
}

.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;
}