/* header
=========================================================================
=========================================================================*/
header {
	position: absolute;
  top: 0;
	width: 100%;
	height: 64px;
	background: #2e2e2e;
	box-shadow: 0 0 6px rgba(0, 0, 0, .16);
	z-index: 10;
	transition: .5s;
}
header.fixed {
	position: fixed;
  top: -62px;
	left: 0;
}
header.fixed.slide {
  animation-name: slideDown;
  animation-timing-function: ease-in;
  animation-iteration-count: 1;
  animation-delay: 0s;
  transform-origin: 50% 50% 0;
  animation-duration: .5s;
  top: 0;
  background-color: #616161;
}
@keyframes slideDown {
  0% {
    top: -62px;
  }
  100% {
    top: 0;
  }
}
header .inner {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: center;
	height: 100%;
}
/* ----- logo ----- */
header .header_container {
	position: relative;
	width: 220px;
	height: 100%;
	z-index: 3;
}
header .logo {
	position: absolute;
  top: 50%;
  transform: translateY(-50%);
}
/* hamburger button
------------------------------------------------------- */
.icon_animation {
	display: none;
}
/* global navi
------------------------------------------------------- */
header nav {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: center;
	height: 100%;
}
header nav a {
  color: #000;
  text-decoration: none;
  transition: all .3s;
}
header nav a:visited { color: #000; }
header nav a:hover {
	color: #feaa00;
	text-decoration: none;
}
header nav ul.global {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: center;
}
header nav ul.global li {
	margin: 0 3em 0 0;
}
header nav ul li:last-child {
	margin: 0;
}
header nav ul.global li a {
	display: block;
	position: relative;
	height: 62px;
	font-weight: 500;
	font-size: 1.4rem;
	line-height: 62px;
	color:#dfdfdf;
}
header nav ul.global li a.active {
	pointer-events: none;
}
header nav ul.global li a::before {
	content: "";
	position: absolute;
	right: 0;
	left: 0;
	bottom: 10px;
	margin: 0 auto;
	width: 6px;
	height: 6px;
	background-color: #4A82D3;
	border-radius: 3px;
	opacity: 0;
	transition: 0.4s;
}
header nav ul.global li a:hover::before {
	opacity: 1;
}
header nav ul.global li a.active::before {
	opacity: 1;
}
/* ----- Contact Us ----- */
header nav ul.global li.contact a {
	width: 219px;
	height: 64px;
	text-align: center;
  color: #000;
	background-color: #fff;
  transition: all .3s;
}
header nav ul.global li.contact a::before {
	content: "";
	position: absolute;
	right: 0;
	left: 0;
	bottom: 10px;
	margin: 0 auto;
	width: 6px;
	height: 6px;
	background-color: #FFF;
	border-radius: 3px;
	opacity: 0;
	transition: 0.4s;
}
header nav ul.global li.contact a:hover::before {
	opacity: 1;
}
header nav ul.global li.contact a.active::before {
	opacity: 1;
}
header nav ul.global li.contact a span {
	position: relative;
	padding-right: 2em;
	/* top: 2px; */
}
header nav ul.global li.contact a span::before {
	display: block;
	content: '';
	position: absolute;
	top: 0;
	bottom: 0;
	right: 0;
	margin: auto 0;
	width: 15px;
	height: 9px;
	background: url(../img/common/icon_arrow_bk.png) center center no-repeat;
	background-size: contain;
	transform:rotate(-90deg);
	transition: 0.4s;
}
header nav ul.global li.contact a:hover span::before {
	right: -3px;
}
header nav ul.global li.contact a:visited { color: #000; }
header nav ul.global li.contact a:hover {
	color: #000;
	text-decoration: none;
}
/* langege button
------------------------------------------------------- */
header nav ul.langege_button {
	display: inline-block;
	width: 150px;
	text-align: center;
	cursor: pointer;
}
header nav ul.langege_button.unavailable {
	position: relative;
	pointer-events: none;
}
header nav ul.langege_button.unavailable::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	/* background-color: #000; */
	opacity: .7;
	z-index: 2;
}
header nav ul.langege_button li span {
	position: relative;
	display: block;
	width: 100%;
	height: 62px;
	font-weight: 500;
	font-size: 1.4rem;
	line-height: 62px;
	color: #fff;
}
header nav ul.langege_button li span::before {
	display: block;
	content: '';
	position: absolute;
	top: 0;
	bottom: 0;
	right: 0;
	margin: auto 0;
	width: 15px;
	height: 9px;
	background: url(../img/common/icon_arrow_wh.png) center center no-repeat;
	background-size: contain;
	transition: 0.4s;
}
header nav ul.langege_button.active li span::before {
	transform:rotate(180deg);
}
/* langege nav
------------------------------------------------------- */
header nav ul.langege_nav {
	display: block;
	position: absolute;
	top:  75px;
	right: 0;
	width: 150px;
	transition: all .4s;
}
@media screen and (max-width:1240px) {
	header nav ul.langege_nav {
		width: 170px;
	}
}
header nav ul.langege_nav.unavailable {
	display: none;
}
header nav ul.langege_nav li.langege_title {
	display: none;
}
/* 閉じている状態 */
header nav ul.langege_nav li.en,
header nav ul.langege_nav li.jp {
	padding-left: 3em;
	height: 28px;
	line-height: 28px;
	background-color: #f4f4f4;
	cursor: pointer;
	transform: rotateX(90deg);
}
header nav ul.langege_nav li.en {
	transition: transform .2s .2s;
}
header nav ul.langege_nav li.jp {
	transition: transform .3s;
}
/* 開いている状態 */
header nav ul.langege_nav.is_open li.en,
header nav ul.langege_nav.is_open li.jp {
	transform: rotateX(0deg);
}
header nav ul.langege_nav.is_open li.en {
	transition: transform .3s;
}
header nav ul.langege_nav.is_open li.jp {
	transition: transform .3s .15s;
}
header nav ul.langege_nav li.active {
	color: #FFF;
	background-color: #bab8b6;
	pointer-events: none;
}
header nav ul.langege_nav li.active a {
	color: #FFF;
}
header nav ul.langege_nav li.active a:visited { color: #FFF; }
header nav ul.langege_nav li a:hover {
	color: #bab8b6;
	text-decoration: none;
}
/* header(Home only)
=========================================================================*/
header.home {
	/* margin-top: 30px; */
	height: 75px;
	background: #000000c4;
	box-shadow: none;
}
/* ----- logo ----- */
header.home .header_container {
	width: 280px;
}
/* global navi
------------------------------------------------------- */
/* ----- Contact Us ----- */
header.home nav ul.global li.contact a {
	width: 165px;
	height: 43px;
	line-height: 43px;
	border-radius: 22px;
}
header.home nav ul.global li.contact a::before {
	bottom: 3px;
}

/*  1145px
=========================================================================
=========================================================================*/
@media screen and (max-width:1145px) {
	header {
		overflow: visible;
		padding: 0;
		height: 60px;
		-webkit-overflow-scrolling: touch;
	}
	header.fix::before {
		overflow-x:hidden;
		position: fixed;
		display: block;
		content: '';
		top: 0;
		left: 0;
		width: 100vw;
		height: 100vh;
		background-color: #000;
		opacity: .5;
		z-index: -1;
	}
	header .inner {
		padding: 0;
	}
	/* ----- logo ----- */
	header .header_container {
		width: 100%;
		height: 100%;
		/* background-color: #FFF; */
		box-shadow: 0 0 6px rgba(0, 0, 0, .16);
	}
	header .logo {
		margin-left: 15px;
		width: 200px;
	}
	/* hamburger button
	------------------------------------------------------- */
	.icon_animation {
		display: block;
		position: absolute;
		top: 0;
		right: 0;
		width: 60px;
		height: 60px;
		cursor: pointer;
		z-index: 4;
	}
	/* ----- line ----- */
	.icon_animation .bar {
		position: absolute;
		top: 20px;
		left: 17px;
		display: block;
		width: 26px;
		height: 2px;
		background: #b6b6b6;
		transition: all .3s;
		transform-origin: left top;
	}
	.icon_animation .bar.middle {
		top: 29px;
	}
	.icon_animation .bar.bottom {
		top: 38px;
		transform-origin: left bottom;
	}
	/* ----- line animation ----- */
	.icon_animation.is_open .bar.top {
		top: 20px;
		left: 20px;
		width: 26px;
		transform: rotate(45deg);
	}
	.icon_animation.is_open .bar.middle {
		opacity: 0;
	}
	.icon_animation.is_open .bar.bottom {
		top: 38px;
		left: 20px;
		width: 26px;
		transform: rotate(-45deg);
	}
	/* global navi
	------------------------------------------------------- */
	header nav {
		visibility: hidden;
		display: block;
		position: relative;
		-webkit-overflow-scrolling: touch;
		width: 100%;
		height: auto;
		background: #FFF;
		transform: translateY(-200%);
		transition: all .6s;
	}
	/* visible */
	header nav.is_open {
		visibility: visible;
		transform: translateY(0);
	}
	header nav ul.global {
		width: 100%;
	}
	header nav ul.global li {
		margin: 0;
		width: 100%;
		border-bottom: 1px solid #c9c6c7;
	}
	header nav ul.global li a {
		padding: 0 20px;
		height: 40px;
		font-weight: 500;
		font-size: 1.4rem;
		line-height: 40px;
		color: #000;
	}
	header nav ul.global li a::before {
		display: none;
	}
	header nav ul.global li a:hover {
		background-color: #dfdfdf;
	}
	header nav ul.global li a.active {
		color: #3670D7;
		background-color: #dfdfdf;
	}
	/* ----- Contact Us ----- */
	header nav ul.global li.contact a {
		width: 100%;
		height: 100%;
		text-align: left;
		color: #000;
		background-color: #FFF;
	}
	header nav ul.global li.contact a::before {
		display: none;
	}
	header nav ul.global li.contact a span {
		padding-right: 0;
	}
	header nav ul.global li.contact a span::before {
		display: none;
	}
	header nav ul.global li.contact a:hover {
		background-color: #dfdfdf;
	}
	header nav ul.global li.contact a:visited { color: #000; }
	header nav ul.global li.contact a:hover {
		color: #feaa00;
		background-color: #dfdfdf;
	}
	/* langege button
	------------------------------------------------------- */
	header nav ul.langege_button {
		display: none;
	}
	/* langege nav
	------------------------------------------------------- */
	header nav ul.langege_nav {
		position: relative;
		top: auto;
		padding: 0 0 40px;
		width: 100%;
	}
	header nav ul.langege_nav.unavailable {
		display: block;
	}
	header nav ul.langege_nav.unavailable::before {
		content: "";
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background-color: #FFF;
		opacity: .7;
		z-index: 2;
	}
	header nav ul.langege_nav li,
	header nav ul.langege_nav.is_open li {
		opacity: 1;
  	visibility: visible;
		padding-left: 0;
		height: 40px;
		font-weight: 500;
		font-size: 1.4rem;
		line-height: 40px;
		background-color: #FFF;
		border-bottom: 1px solid #c9c6c7;
		transform: rotateX(0deg);
	}
	header nav ul.langege_nav li.en,
	header nav ul.langege_nav li.jp {
		padding-left: 0;
		height: 40px;
		font-weight: 500;
		font-size: 1.4rem;
		line-height: 40px;
		background-color: #FFF;
		transform: rotateX(0deg);
	}
	header nav ul.langege_nav li.langege_title,
	header nav ul.langege_nav.is_open li.langege_title {
		padding-left: 20px;
		pointer-events: none;
		display: block;
		color: #FFF;
		background-color: #0f1f2e;
	}
	header nav ul.langege_nav li a,
	header nav ul.langege_nav.is_open li a {
		padding-left: 20px;
		display: block;
		width: 100%;
		height: 100%;
		transform: rotateX(0deg);
	}
	header nav ul.langege_nav li.active,
	header nav ul.langege_nav.is_open li.active {
		color: #3670D7;
		background-color: #dfdfdf;
		pointer-events: none;
	}
	header nav ul.langege_nav li.active a,
	header nav ul.langege_nav.is_open li.active a {
		color: #feaa00 !important;
	}
	header nav ul.langege_nav li.active a:visited,
	header nav ul.langege_nav li.active.is_open a:visited { color: #feaa00; }
	header nav ul.langege_nav li a:hover,
	header nav ul.langege_nav.is_open li a:hover {
		color: #feaa00;
		background-color: #dfdfdf;
		text-decoration: none;
	}
	/* header(Home only)
	=========================================================================*/
	header.home {
		margin-top: 0;
	}
	/* ----- logo ----- */
	header.home .header_container {
		width: 100%;
		background: none;
		box-shadow: none;
		transition: all .3s;
	}
	header.home .header_container.active {
		/* background-color: #FFF; */
		box-shadow: 0 0 6px rgba(0, 0, 0, .16);
	}
	/* global navi
	------------------------------------------------------- */
	/* ----- Contact Us ----- */
	header.home nav ul.global li.contact a {
		width: 100%;
		height: auto;
		line-height: auto;
		border-radius: 0;
	}

}