/* header.css 共通 */

@charset "UTF-8";
#header {
	background: rgba(18, 31, 67, 0.8);
	box-shadow: 0 0 1px 0 white;
	display: block;
	position: relative;
	cursor: default;
	left: 0;
	line-height: 3.5em;
	position: fixed;
	width: 100%;
	height: 113px;
	top: 0;
	left: 0;
	z-index: 100;
	transition: all 0.3s ease 0s;
}

#header #logo-menu {
	width: 100%;
	margin: 0 auto;
	right: 0;
	left: 0;
	padding: 0;
	display: flex;
}
@media screen and (min-width: 1200px) {
	#header #logo-menu { width: 1170px; }
}

#logo{
	display:inline-block; 

}

#logo #nav{
/*
	display:inline-block; 
	width:90vh;
	position:relative; 
*/
}


#navPanel, #titleBar {
	display: none;
}
#header #logo {
	left: 0;
	width: 134px;
	height: 47px;
	position: relative;
	margin-top: 40px;
	display:inline-block;
}

.sprite{ }

#header #logo a {
	background: url("/img/header/logo.svg") 0 0 no-repeat;
	background-size: contain;
	position: relative;
	display: inline-block;
	width:100%;
	height:100%;
}


#header nav {
	display:inline-block;
	position: relative;
	top: 0px;
	right: 0;
	left: 0;
	margin-top: 50px;
	height: 100%;
	width:87%;
//border:1px solid #f00;

}

@media screen and (max-width: 1200px) {
	#logo{ margin-left:20px; }
	#header nav { width:80%; }
}



#header #logo a:hover {
	opacity: 0.6 !important;
	transition: all 0.3s ease 0s;
}

/* spw */
.glnv-ul{
	font-weight: 300;
	letter-spacing: 0.1em;
	color: #ffffff;
	font-size: 16px;
	margin: 0;
	padding: 0;
	display: flex;
}
.glnv-li{
	display: inline-block;
	line-height: 22px;
	margin-left: 10px;
	padding: 0;
	height: 22px;
	min-width:4rem;
}

#glnv-ul-r  .glnv-li{ margin-left: 10px; }
#glnv-ul-l  .glnv-li:first-child{ margin-left: 20px; }

.glnv-li-a{
	border: 0;
	color: inherit;
	display: inline-block;
	height: inherit;
	line-height: inherit;
	outline: 0;
}

.glnv-li-a:hover{ color:#fff; text-decoration:none; }

/* navPanel対応Patch */
#navPanel nav a{}

.indent-1{ display:inline-block; width:1em; }

.glnv-li-a:hover{ transition: all 0.3s ease 0s; }

#navPanel nav a span.alt-en{ display:inline; }
#navPanel nav a span.alt-ja{ display:none; }
#navPanel nav a:hover span.alt-en{ display:none; }
#navPanel nav a:hover span.alt-ja{ display:inline; }

.span-bilingual .alt-en{ display:inline; }
.span-bilingual .alt-ja{ display:none; }
.span-bilingual:hover .alt-en{ display:none; }
.span-bilingual:hover .alt-ja{ display:inline; }

.a-bilingual .alt-en{ display:inline; }
.a-bilingual .alt-ja{ display:none; }
.a-bilingual:hover .alt-en{ display:none; }
.a-bilingual:hover .alt-ja{ display:inline; }




/*
.glnv-li-a:hover {
//	opacity: 0.6 !important;
//	color: white !important;
//	transition: all 0.3s ease 0s;
}


#header #nav ul li:nth-child(6) a:hover {
	opacity: 0.6 !important;
	color: black !important;
	transition: all 0.3s ease 0s;
}

#header #nav ul li:nth-child(7) a:hover {
	opacity: 0.6 !important;
	color: black !important;
	transition: all 0.3s ease 0s;
}

#header #nav ul li:nth-child(8) #search-btn:hover {
	opacity: 0.6 !important;
	color: black !important;
	transition: all 0.3s ease 0s;
}

#header #nav ul {
	font-weight: 300;
	letter-spacing: 0.1em;
	color: #ffffff;
	font-size: 16px;
	margin: 0;
	padding: 0;
	display: flex;
}

#header #nav ul li {
	line-height: 22px;
	margin-left: 28px;
	padding: 0;
	height: 22px;
}

#header nav ul li a, #header nav ul li span {
	border: 0;
	color: inherit;
	display: inline-block;
	height: inherit;
	line-height: inherit;
	outline: 0;
}
*/


#header #nav ul li:nth-child(6) {
	margin-left: 67px;
	font-weight: bold;
	top: -3px;
	position: relative;
}

#header #nav ul li:nth-child(6) a {
	width: 100px;
}

#header #nav ul li:nth-child(7) {
	margin-left: 10px;
	font-weight: bold;
	top: -3px;
	position: relative;
}

#header #nav ul li:nth-child(7) a {
	width: 100%;
}

#header #nav ul li:nth-child(8) {
	margin-left: 10px;
	top: -3px;
	position: relative;
}

#header #nav ul li:nth-child(9) {
	margin-left: 0px;
}

/***
#navPanel a:nth-child(6) {
	margin-top: 40px;
}

#navPanel a:nth-child(8) {
	float: left;
	margin-right: 20px;
	margin-left: 23%;
}

#navPanel a:nth-child(9) {
	float: left;
	margin-right: 20px;
}

#navPanel a:nth-child(10) {
	float: left;
}

***/

#header #nav #header-button{
	color: rgba(0, 0, 0, 0.8);
	font-size: 12px;
	letter-spacing: 0.1em;
	text-align: center;
	border: solid 1px white;
	width: 100px;
	line-height: 21px;
	vertical-align: top;
	box-sizing: border-box;
	height: 21px;
}

#navPanel #header-button {
	color: rgba(0, 0, 0, 0.8);
	font-size: 12px;
	letter-spacing: 0.1em;
	text-align: center;
	border: solid 1px white;
	width: 100px;
	line-height: 21px;
	vertical-align: top;
	box-sizing: border-box;
	height: 21px;
}

#navPanel #header-button {
	position: absolute;
	width: 79%;
	height: 40px;
	line-height: 40px;
}

#header #nav #header-button #header-button-inner, #navPanel #header-button #header-button-inner {
	border: solid 1px black;
	background-color: white;
	height: 19px;
	box-sizing: border-box;
	line-height: 18px;
	display: block;
}




#navPanel #header-button #header-button-inner {
	line-height: 38px;
	height: 38px;
}

#header #nav #search {
	display: inline-block;
	background-color: rgba(255, 255, 255, 0.6);
	color: white;
	font-size: 12px;
	letter-spacing: 0.05em;
	width: 120px;
	height: 19px;
	border-radius: 0;
	border: solid 1px black;
	vertical-align: top;
	box-sizing: border-box;
}

#header #nav #search-btn {
	display: inline-block;
	position: relative;
	background-color: white;
	padding: 2px 11px;
	left: -7px;
	top: 1px;
	height: 17px;
	vertical-align: top;
}

#header #nav #search-warp {
	border: solid 1px white;
	display: inline-block;
	position: relative;
	width: 156px;
	height: 21px;
	box-sizing: border-box;
}

#header #nav input {
	display: block;
}

#header #logo-menu #menu-sns {
	display: none;
}

.noscript-header{
	position:absolute; 
	top:0; 
	left:0; 
	z-index:201;
	color:#ffffff;
}

/************************************************************
bootstrap override
*************************************************************/
@media screen and (max-width: 1200px) {
	#logo{ margin-left:20px; }
}

@media screen and (max-width: 800px) {
	body.landing #header {
		display: none;
	}

	#titleBar .title a {
		background: url("../../img/header/logo-sp.svg") 0 0 no-repeat;
		background-size: contain;
		display: inline-block;
		position: relative;
		text-indent: 100%;
		white-space: nowrap;
		overflow: hidden;
		width: 70px;
		height: 24px;
		margin-top: 10px;
	}

	#titleBar {
		background: rgba(18, 31, 67, 0.7);
	}

	#titleBar .title {
		box-shadow: 0 0 1px -2px white;
	}

	#titleBar .toggle:before {
		background: none;
		color: white;
	}

	#navPanel {
		background: rgba(18, 31, 67, 0.7);
	}

	#navPanel ul {
		margin: 25% 0 0 0;
		padding-left: 0;
	}

	#navPanel ul li {
		list-style: none;
		margin-bottom: 5%;
		font-size: 110%;
		letter-spacing: 0.12em;
	}

	#navPanel ul a {
		color: white;
		border-bottom: none;
	}

	#navPanel ul a:hover {
		opacity: 0.6 !important;
		color: white !important;
		transition: all 0.3s ease 0s;
	}

/***
	#navPanel ul li:nth-child(6) a:hover {
		opacity: 0.6 !important;
		color: black !important;
		transition: all 0.3s ease 0s;
	}

	#navPanel ul li:nth-child(7) a:hover {
		opacity: 0.6 !important;
		color: black !important;
		transition: all 0.3s ease 0s;
	}

	#navPanel ul li:nth-child(8) #search-btn:hover {
		opacity: 0.6 !important;
		color: black !important;
		transition: all 0.3s ease 0s;
	}
***/



	#navPanel #search-warp {
		border: solid 1px white;
		display: inline-block;
		position: relative;
		width: 190px;
		height: 32px;
	}

	#navPanel li #search {
		display: inline-block;
		position: absolute;
		background-color: rgba(255, 255, 255, 0.6);
		color: white;
		font-size: 16px;
		letter-spacing: 0.05em;
		width: 145px;
		height: 30px;
		border-radius: 0;
		border: solid 1px black;
		vertical-align: top;
	}

	#navPanel li #search-btn {
		display: inline-block;
		position: relative;
		background-color: white;
		padding: 6px 14px 7px 14px;
		top: 1px;
		left: 144px;
		border-radius: 0;
	}

	#navPanel ul li:nth-child(6) {
		margin-top: 30%;
	}

	#navPanel ul li:nth-child(7) {
		margin-top: 10%;
	}

	#navPanel ul li:nth-child(8) {
		margin-top: 10%;
	}

	#navPanel li #header-button {
		color: rgba(0, 0, 0, 0.8);
		font-size: 16px;
		letter-spacing: 0.05em;
		text-align: center;
		border: solid 1px white;
		width: 190px;
		line-height: 28px;
		vertical-align: top;
		display: block;
		height: 32px;
	}

	#navPanel li #header-button-inner {
		border: solid 1px black;
		background-color: white;
	}

	#navPanel li #menu-sns {
		margin-top: 8%;
	}

	#navPanel li #menu-sns a {
		margin-right: 5%;
	}

	#navPanel li #menu-sns a:last-child {
		margin-right: 0;
	}


/***
	#navPanel a:nth-child(6){
		margin-bottom: 30px;
	}
	#navPanel a:nth-child(7){
		margin-bottom: 30px;
	}
	#navPanel a:nth-child(8){
		margin-left:0;
		margin-right: 0;
		clear:both;
		float:none;
	}
	#navPanel a:nth-child(9){

	}
	#navPanel a:nth-child(10){
		margin-right: 20px;
	}
***/


	#navPanel #header-button{
		width: 190px;
	}
	#navPanel #search-warp #search {
		display: inline-block;
		background-color: rgba(255, 255, 255, 0.6);
		color: rgb(255, 255, 255);
		font-size: 12px;
		letter-spacing: 0.05em;
		width: 152px;
		height: 30px;
		border-radius: 0;
		border: solid 1px rgb(0, 0, 0);
		vertical-align: top;
		box-sizing: border-box;
	}
	#navPanel #search-warp #search-btn {
		display: block;
		position: absolute;
		background-color: rgb(255, 255, 255);
		padding: 5px 11px;
		left: auto;
		right: 1px;
		top: 1px;
		height: 17px;
		vertical-align: top;
		height: 28px;
	}

		#header{
		display: none !important;
	}

	body.navPanel-visible #navPanel {
		-moz-transform: translateX(0);
		-webkit-transform: translateX(0);
		-ms-transform: translateX(0);
		transform: translateX(0);
	}

	#titleBar .title a {
		background: url(../../img/header/logo-sp.svg) 0 0 no-repeat;
		background-size: contain;
		display: inline-block;;
		position: relative;
		text-indent: 100%;
		white-space: nowrap;
		overflow: hidden;
		width: 70px;
		height: 24px;
		margin-top: 10px;
	}

	body.navPanel-visible #titleBar{
		-moz-transform: translateX(275px);
		-webkit-transform: translateX(275px);
		-ms-transform: translateX(275px);
		transform: translateX(275px);
	}

	#titleBar{
		background: rgba(18, 31, 67, 0.7);
		-moz-backface-visibility: hidden;
		-webkit-backface-visibility: hidden;
		-ms-backface-visibility: hidden;
		backface-visibility: hidden;
		-moz-transition: -moz-transform 0.5s ease;
		-webkit-transition: -webkit-transform 0.5s ease;
		-ms-transition: -ms-transform 0.5s ease;
		transition: transform 0.5s ease;
		display: block;
		height: 44px;
		left: 0;
		position: fixed;
		top: 0;
		width: 100%;
		z-index: 10001;
		box-shadow: 0 0.125em 0.125em 0 rgba(0, 0, 0, 0.125);
	}

	#titleBar .title{
		box-shadow: 0 0 1px 0 rgba(255, 255, 255, 1);
	}

	#titleBar .toggle {
		text-decoration: none;
		height: 60px;
		left: 0;
		position: absolute;
		top: 0;
		width: 90px;
		outline: 0;
		border: 0;
	}

	#titleBar .toggle:before {
		background: rgb(228, 76, 101);
		color: rgba(255, 255, 255, 0.5);
		content: '\f0c9';
		display: block;
		font-size: 18px;
		height: 44px;
		left: 0;
		line-height: 44px;
		position: absolute;
		text-align: center;
		top: 0;
		width: 54px;
	}

	#titleBar .toggle:before{
		background-color: rgba(255, 255, 255, 0.6);
		color: rgba(255, 255, 255, 1);
	}

	#titleBar .title {
		color: rgb(255, 255, 255);
		display: block;
		font-weight: 300;
		height: 44px;
		line-height: 44px;
		text-align: center;
	}
	#titleBar .title a {
		color: inherit;
		border: 0;
	}
	#titleBar .toggle:before {
		-moz-osx-font-smoothing: grayscale;
		-webkit-font-smoothing: antialiased;
		font-family: FontAwesome;
		font-style: normal;
		font-weight: normal;
		text-transform: none !important;
		color: rgb(255, 255, 255);
		content: '\f0c9';
		display: block;
		font-size: 18px;
		height: 44px;
		left: 0;
		line-height: 44px;
		position: absolute;
		text-align: center;
		top: 0;
		width: 54px;
		background: none;
	}

	#navPanel{
		background: rgba(18, 31, 67, 0.7);
	}
	#navPanel {
		-moz-backface-visibility: hidden;
		-webkit-backface-visibility: hidden;
		-ms-backface-visibility: hidden;
		backface-visibility: hidden;
		-moz-transform: translateX(-275px);
		-webkit-transform: translateX(-275px);
		-ms-transform: translateX(-275px);
		transform: translateX(-275px);
		-moz-transition: -moz-transform 0.5s ease;
		-webkit-transition: -webkit-transform 0.5s ease;
		-ms-transition: -ms-transform 0.5s ease;
		transition: transform 0.5s ease;
		display: block;
		height: 100%;
		left: 0;
		overflow-y: auto;
		position: fixed;
		top: 0;
		width: 275px;
		z-index: 10002;
		background: rgb(24, 25, 32);
		padding: 0.75em 1.25em;
	}
	#navPanel .link.depth-0 {
		color: rgb(255, 255, 255);
		font-weight: 300;
	}
	#navPanel .link:first-child {
		border-top: 0;
	}
	#navPanel .link {
		border: 0;
		border-top: solid 1px rgba(255, 255, 255, 0.05);
		color: rgba(255, 255, 255, 1);
		display: block;
		height: 3em;
		line-height: 3em;
		text-decoration: none;
	}
	#navPanel ul{
		margin: 25% 0 0 0;
	}

	#navPanel ul li{
		list-style: none;
		margin-bottom: 5%;
		font-size: 110%;
		letter-spacing: 0.12em;
	}

	#navPanel ul a{
		color: rgba(255, 255, 255, 1);
		border-bottom: none;
	}

	#navPanel ul a:hover{
		opacity: 0.6 !important;
		color: #33ccff !important;
		transition: all 0.3s ease 0s;
	}

	#navPanel li #search{
		display: inline-block;
		background-color: #fff;
		color: #000;
		font-size: 16px;
		letter-spacing: 0.05em;
		width: 160px;
		height: 30px;
		border-radius: 0;
	}

	#navPanel li #search-btn{
		display: inline-block;
		position: relative;
		background-color: rgba(255, 255, 255, 0.6);
		border: solid 1px #fff;
		padding: 6px 7px 7px 7px;
		top: 10px;
		left: -6px;
		border-radius: 0;
	}

	#navPanel li #header-catalog{
		color: rgba(0, 0, 0, 0.8);
		font-size: 16px;
		letter-spacing: 0.05em;
		text-align: center;
		border: solid 1px rgba(255, 255, 255, 1);
		width: 190px;
		line-height: 29px;
		vertical-align: top;
		display: block;
		height: 32px;
		margin-top: 30%;
	}

	#navPanel li #header-catalog-inner{
		border: solid 1px rgba(0, 0, 0, 1);
		background-color: rgba(255, 255, 255, 0.6);
		height: 30px;
	}

	#navPanel li  #menu-sns{
		margin-top: 8%;
	}

	#navPanel li  #menu-sns a{
		margin-right: 5%;
	}

	#navPanel li  #menu-sns a:last-child{
		margin-right: 0;
	}
}


/* Dropotron 対策 */

	.dropotron {
		background: rgba(39, 40, 51, 0.965);
		border-radius: 0;
		list-style: none;
		margin-top: 2em;
//		padding: 0.5em 2em 1em 0;
		padding: 1em 2em 1em 1em;
		display:block;
	}

/* 2層目以降は真横に出す */
	.dropotron .dropotron {
		margin-top: 0;
	}

	.dropotron > .glnv-li {
		padding: 15px;
		display:block;
		color: rgba(255, 255, 255, 1);
		line-height: 2.5em;
		margin-left: 10px;
		padding: 0;
		height: auto;
		min-width:12rem;
	}


	.dropotron > li a, .dropotron > li span {
		border: 0;
		color: rgba(255, 255, 255, 1);
		text-decoration: none;
	}

	.dropotron > li.active > a, .dropotron > li.active > span {
		color: #ffffcc;
	}

	.dropotron > li a:hover, .dropotron > li a:hover span { color: #33ccff; }

	.dropotron.level-0 {
		margin-top: 1em;
	}

	body.landing .dropotron.level-0 {
		margin-top: 0;
	}