@charset "UTF-8";

/* c-header
----------------------------------------*/
.c-header {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	background: rgba(255,255,255,.8);
	z-index: 1110;
	transition: all .3s;
}
.c-header:hover {
	background: #fff;
}
.c-header__container {
	width: 1100px;
	margin: 0 auto;
}
.c-header__logo {
	padding: 30px 0 20px 1px;
	width: 212px;
	float: left;
}
.c-header__logo img {
	width: 212px;
	height: 32px;
}
.c-header__various {
	background: url(../img/common/bg-mark.png) no-repeat right -6px top 29px;
	background-size: 71px auto;
	padding: 30px 85px 19px 0;
	float: right;
}
.c-header__english {
	width: 138px;
	float: left;
	margin-right: 20px;
}
.c-header__english a {
	display: block;
	background: #E0F4FC;
	color: #00A0E9;
	font-size: 1.5rem;
	font-weight: bold;
	line-height: 33px;
	height: 32px;
	letter-spacing: 1.3px;
	text-align: center;
	text-decoration: none;
	padding: 0 6px;
}
.c-header__search {
	width: 220px;
	float: left;
	z-index: 1111;
}
.c-header__search-input-text {
	display: block;
	background: #E0F4FC;
	height: 32px;
	border-radius: 16px;
	overflow: hidden;
}
.c-header__search-input-text input {
	display: block;
	background: #E0F4FC;
	border: #E0F4FC;
	-webkit-appearance: none;
	font-size: 1.6rem;
	padding: 5px 40px 5px 10px;
}
.c-header__search-input-text input:focus {
	outline: 0;
	border: #E0F4FC;
}
.c-header__search-btn {
	position: absolute;
	top: 0;
	right: 0;
}
.c-header__search-btn input {
	background: url(../img/common/btn-search.svg) no-repeat 3px center;
	background-size: 20px auto;
	border: none;
	-webkit-appearance: none;
	appearance: none;
	width: 35px;
	height: 32px;
	text-indent:  -100px;
	overflow: hidden;
}
.c-header__menu,
.c-header__search-sp,
.c-header__search-close {
	display: none;
}
@media only screen and (max-width: 767px) {
	.c-header {
		border-bottom: solid 1px #b4c4d6;
	}
	.c-header__container {
		width: auto;
		padding: 0 6.666%;
	}
	.c-header__logo {
		padding: 24px 0 25px;
		width: 176px;
	}
	.c-header__logo img {
		width: 176px;
		height: auto;
	}
	.c-header__various {
		float: none;
		padding: 0;
		background: none;
		position: static;
	}
	.c-header__english {
		display: none;
	}
	.c-header__menu {
		display: block;
		width: 23px;
		height: 23px;
		position: absolute;
		top: 28px;
		right: 6.666%;
		cursor: pointer;
	}
	.c-header__menu span {
		width: 23px;
		height: 3px;
		display: block;
		margin: 10px 0 0;
		background: #002f7b;
	}
	.c-header__menu::before,
	.c-header__menu::after {
		content: "";
		width: 23px;
		height: 3px;
		background: #002f7b;
		display: block;
		position: absolute;
		top: 0;
		left: 0;
		transition: all .3s;
	}
	.c-header__menu::after {
		top: 20px;
	}
	.c-header__search-sp {
		display: block;
		width: 23px;
		height: 23px;
		position: absolute;
		top: 27px;
		right: 6.666%;
		margin-right: 48.5px;
	}
	.c-header__menu.open span {
		display: none;
	}
	.c-header__menu.open::before,
	.c-header__search-sp.open::before {
		content: "";
		background: #002f7b;
		display: block;
		-webkit-transform: rotate(45deg);
		transform: rotate(45deg);
		position: absolute;
		top: 10px;
		width: 30px;
		height: 3px;
		left: -3px;
	}
	.c-header__menu.open::after,
	.c-header__search-sp.open::after {
		content: "";
		background: #002f7b;
		display: block;
		-webkit-transform: rotate(135deg);
		transform: rotate(135deg);
		position: absolute;
		top: 10px;
		width: 30px;
		height: 3px;
		left: -3px;
	}
	.c-header__search-sp.open img {
		display: none;
	}
	.c-header__search-input-text {
		background: #fff;
		border: solid 1px #7f7f7f;
		height: 50px;
		border-radius: 0;
	}
	.c-header__search-input-text input {
		background: #fff;
		height: 50px;
		width: 100%;
		border: none;
		padding: 5px 40px 5px 10px;
	}
	.c-header__search-input-text input:focus {
		border: none;
	}
	.c-header__search-btn input {
		background: url(../img/common/btn-search-g.svg) no-repeat right 17px center;
		background-size: 23px 23px;
		width: 50px;
		height: 50px;
	}
	.c-header__search {
		position: absolute;
		top: 100%;
		left: 0;
		right: 0;
		margin-top: 1px;
		background: #eaeaea;
		width: 100%;
		float: none;
		padding: 26px 6.666% 49px;
		display: none;
	}
	.c-header__search-close {
		display: block;
		background: #002f7b;
		color: #fff;
		padding: 13px;
		text-align: center;
		font-size: 1.6rem;
		font-weight: bold;
		margin-top: 25px;
	}
}