@charset "utf-8";

/* header PC
======================================================*/

.header {
	position: fixed;
	z-index: 999;
	top: 0;
	width: 100%;
	height: 90px;
	background-color: #fff;
	box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.16);
}

.header_container_wrap {
	padding: 0 0 0 105px;
}

.header-title {
	display: flex;
	align-items: center;
	width: 340px;
	/* height: 69px; */
	height: 80px;
	font-size: 20px;
	font-weight: 700;
	margin: 0;
}

.header-title a {
	position: relative;
	display: block;
	color: #333333;
	padding-left: 60px;
	text-decoration: none;
}

.header-title a::before {
	content: "";
	display: inline-block;
	width: 50px;
	height: 65px;
	background-image: url(../img/logo.png);
	background-size: contain;
	background-repeat: no-repeat;
	position: absolute;
	left: 0;
	top: 50%;
	transform: translateY(-50%);
}

.header-title__sub {
	display: inline-block;
	font-size: 9px;
}

.header-title__main {
	display: inline-block;
}

.header nav {
	position: absolute;
	/* width: 1123px; */
	width: 800px;
	height: 90px;
	top: 0;
	right: 0;
}

.header nav ul li {
	display: inline-block;
	/* margin-right: 50px; */
	margin-right: 130px;
}

.header nav ul li a {
	display: block;
	width: 100%;
	height: 87px;
	padding-top: 30px;
	text-align: center;
	line-height: 1;
	position: relative;
	box-sizing: border-box;
	text-align: center;
}

.header nav ul li a span {
	display: block;
}

.header nav ul li a span:nth-of-type(1) {
	font-size: 16px;
	line-height: 1;
	color: #000;
}

.header nav ul li a span:nth-of-type(2) {
	font-size: 12px;
	line-height: 1;
	color: #087442;
	margin-top: 7px;
}

.header nav ul li a::after {
	content: "";
	display: block;
	position: absolute;
	top: 79px;
	left: 0px;
	width: 100%;
	height: 8px;
	background-color: #FF7A00;
	transition: height 0.3s, opacity 0.1s;
	opacity: 0;
}

.header nav ul li a:hover::after {
	height: 4px;
	opacity: 1;
}

.hd_nav01 {
	width: 96px;
}

.hd_nav02 {
	width: 96px;
}

.hd_nav03 {
	width: 64px;
}

.hd_nav04 {
	width: 85px;
}

.hd_nav05 {
	width: 112px;
}

.hd_entry {
	position: absolute;
	/* width: 210px; */
	width: 190px;
	top: 0;
	/* right: 210px; */
	right: 190px;
}

.hd_entry a {
	display: block;
	width: 100%;
	height: 90px;
	background: url(../img/icon01.svg) center top 11px no-repeat;
	background-color: #087442;
	box-sizing: border-box;
	padding-top: 58px;
	line-height: 1;
	font-weight: 700;
	font-size: 16px;
	text-align: center;
	color: #fff;
	transition: background-color 0.2s;
}

.hd_entry a:hover {
	background-color: #0C8E52;
}

.hd_jd {
	position: absolute;
	/* width: 210px; */
	width: 190px;
	top: 0;
	right: 0;
}

.hd_jd a {
	display: block;
	width: 100%;
	height: 90px;
	background: url(../img/icon02.svg) center top 15px no-repeat;
	background-color: #FF7A00;
	box-sizing: border-box;
	padding-top: 58px;
	line-height: 1;
	font-weight: 700;
	font-size: 16px;
	text-align: center;
	color: #fff;
	transition: background-color 0.2s;
}

.hd_jd a:hover {
	background-color: #FFAE15;
}

.openbtn {
	display: none;
}

.toppage .header nav ul {
	display: none;
}

.toppage .header nav ul.mini {
	display: block;
}

@media screen and (max-width: 1800px) {

	.header_container_wrap {
		/* padding: 0 0 0 30px; */
		padding: 0 0 0 10px;
	}

	.header nav {
		/* width: 943px; */
		width: 700px;
	}

	.header nav ul li {
		/* margin-right: 30px; */
		margin-right: 100px;
	}

	.hd_entry {
		position: absolute;
		width: 170px;
		right: 170px;
	}

	.hd_jd {
		position: absolute;
		width: 170px;
	}
}

@media screen and (max-width: 1600px) {

	.header nav {
		/* width: 775px; */
		width: 600px;
	}

	/* .header-title {
		width: 30.5%;
	} */

	.header-title img {
		/* width: 100%; */
		width: 94px;
		height: auto;
	}

	.header nav ul li {
		/* margin-right: 14px; */
		margin-right: 80px;
	}

	.header nav ul li a span:nth-of-type(1) {
		font-size: 14px;
	}

	.header nav ul li a span:nth-of-type(2) {
		font-size: 10px;
		margin-top: 7px;
	}

	.hd_entry {
		width: 125px;
		right: 125px;
	}

	.hd_jd {
		width: 125px;
	}

	.hd_entry a {
		background-position: top 16px center;
		background-size: 26px auto;
		padding-top: 58px;
		line-height: 1;
		font-weight: 700;
		font-size: 14px;
	}

	.hd_jd a {
		background-position: top 20px center;
		background-size: 30px auto;
		padding-top: 58px;
		line-height: 1;
		font-weight: 700;
		font-size: 14px;
	}
}

/* @media screen and (max-width: 1300px) {

	.header-title {
		width: 19%;
	}

} */

@media screen and (max-width: 1200px) {

	.header nav {
		/* width: 665px; */
		width: 480px;
	}

	.header nav ul li {
		/* margin-right: 5px; */
		margin-right: 50px;
	}

	.hd_entry {
		position: absolute;
		width: 90px;
		right: 90px;
	}

	.hd_jd {
		position: absolute;
		width: 90px;
	}

}