@charset "utf-8";

/*
header h1 {
	width: 280px;
	height: 80px;
	margin: 0;
}
header h1 img {
	width: 280px;
	height: unset;
}
header h1 span {
	top: 60px;
	left: 20px;
	font-size: 1.2rem;
}
*/

header {
	width: 100%;
	margin: 0 auto;
	padding: 10px 0 0;
	/* padding: 20px 0; */
	color: #45B035;
	background-color:#FFFFFF;
	border-top: 10px solid #45B035;
}
.header_wrap {
	display: flex;
	justify-content: center;
	position: relative;
	width: auto;
	height: 85px;
	margin: 0 auto;
	padding: 0 40px;
}
.header_wrap .logo-metro , 
.header_wrap .header_right {
	width: calc((100% - 280px) / 2 );
}
.header_wrap .logo-metro {
	margin: 0 auto 0 0;
}
.header_wrap .logo-metro a {
	display: inline-block;
	height: auto;
}
.header_wrap .logo-metro img {
	width: 200px;
	margin: 20px 0 0;
}
.header_wrap .logo-main img {
	width: 280px;
	height: unset;
}
.header_wrap .header_right {
	display: flex;
	justify-content: right;
	margin: 0 0 0 auto;
}
.header_wrap .header_right .header_info {
	width: calc(100% - 200px - 70px - 10px);
	margin: -5px 10px 0 0;
}
.header_wrap .header_right .header_info .info_all {
	padding: 5px;
	border: 1px solid #45B035;
	background-color: #ffffff;
	position: relative;
	z-index: 1000;
}
.header_wrap .header_right .header_info .infos {
	display: none;
}
.header_wrap .header_right .header_info .infos.active {
	display: unset;
}
.info_all .info_first .info_title {
	width: 100%;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
}
.info_all .info_first .info_date , 
.info_all .infos .info_date {
	color: #45B035;
}
.info_all .info_first.active .info_title {
	overflow: unset;
	white-space: unset;
}
a.btn_info {
	position: absolute;
	right: 5px;
	display: inline-block;
}
a.btn_info img {
	width: 20px;
	height: 20px;
	transform: rotate( 90deg );
}
a.btn_info.active img {
	transform: rotate( 270deg );
}

.header_wrap .header_right .header_lan {
	width: 180px;
	/* width: 200px; */
	margin: -5px 70px 0 0;
}
.header_wrap .header_right .header_info p.title a , 
.header_wrap .header_right .header_lan p.title {
	font-weight: 700;
}
.header_wrap .header_right .header_info p.title a , 
.header_wrap .header_right .header_info a p.date {
	color: #45B035;
}
.header_menu {
	/* width: 200px; */
}

.header_text {
	display: flex;
	justify-content: center;
	color: #666666;
	font-weight: 700;
}

.header_wrap2 {
	display: flex;
	justify-content: center;
	position: relative;
	width: auto;
	margin: 0 auto;
	/* padding: 0 40px; */
}
.header_wrap2 ul {
	display: flex;
	margin: 5px 0 10px;
}
.header_wrap2 ul li {
	margin: 0 5px;
}
.header_wrap2 ul li a {
	display: flex;
	padding: 5px 10px;
	color: #ffffff;
	font-weight: 700;
	background: #45B035;
	border: solid 2px #45B035;
	border-radius: 1vh;
}
.header_wrap2 ul li a:hover {
	transform: translateY(2px);
	-webkit-box-shadow: 0 10px 15px rgba(35, 47, 85, 0.2);
}



/* MENU */
.nav{ /* MENU 展開時 */
	display: none;
	position: absolute;
	width: 330px;
	margin: 0 0 0 auto;
	padding: 140px 0 90px 5px;
	/* padding: 140px 0 90px 20px; */
	top: -50px;
	right: -40px;
	text-align: left;
	background: rgba(69,176,54,0.95);
	z-index: 10000;
}
.nav a {
	height: 50px;
	display: block;
	color: #fff;
	font-weight: bold;
	line-height: 50px;
}
/*header_sp_nav=====*/
.header_sp_nav{
	width: 50px;
	height: 50px;
	position: absolute;
	top: 10px;
	right: 40px;
	padding: 5px;
	cursor: pointer;
	color: #fff;
	background: #45B035;
	border-radius: 5px;
	z-index: 50000;
}
.header_sp_nav.active{
	background: unset;
}
/*menuボタン内側*/
.header_sp_nav span:nth-of-type(1) , 
.header_sp_nav span:nth-of-type(2) {
	display: inline-block;
	transition: all .4s;/*アニメーションの設定*/
	position: absolute;
	height: 3px;
	border-radius: 5px;
	background: #fff;
	width: 60%;
	left: 12px;
}
.header_sp_nav span:nth-of-type(1) {
	top: 12px;
}
.header_sp_nav span:nth-of-type(2) {
	top: calc(50% - 3px);
}
.header_sp_nav span:nth-of-type(3) {
	display: inline-block;
	transition: all .4s; /*アニメーションの設定*/
}
.header_sp_nav span:nth-of-type(3)::after {
	content: "";
	display: inline-block;
	background-image: url(../img/common/MENU.png);/*3つ目の要素のafterにMENU表示を指定*/
	background-size: contain;
	background-repeat: no-repeat;
	width: 50px;
	height: 14px;
	position: absolute;
	bottom: 9px;
	left: 5px;
}
/*activeクラスが付与されると線が回転して×になり、Menu⇒Closeに変更*/
.header_sp_nav.active span:nth-of-type(1) {
	top: 15px;
	left: 15px;
	transform: translateY(6px) rotate(-45deg);
	width: 50%;
}
.header_sp_nav.active span:nth-of-type(2){
	top: 27px;
	left: 15px;
	transform: translateY(-6px) rotate(45deg);
	width: 50%;
}
.header_sp_nav.active span:nth-of-type(3)::after {
	background-image: url(../img/common/CLOSE.png); /*3つ目の要素のafterにCLOSE表示を指定*/
}
/* //MENU */

.nav_list li {
	padding: 0 0 0 20px;
}
.nav_list li.current-menu-item {
	border-left: 5px solid #ffffff;
}

/* PC
-------------------------------------------------------------------------------------------------------------*/
@media screen and (max-width: 1199px) { /* 1199px以下に適用されるCSS */
	.header_wrap .header_right .header_info , 
	.header_wrap .header_right .header_lan  {
		display: none;
	}
}



/* タブレット
-------------------------------------------------------------------------------------------------------------*/
@media screen and (max-width: 780px) { /* 780px以下に適用されるCSS */
	/*
	header {
		padding: 10px 0;
	}
	*/
	.header_wrap {
		height: 70px;
		padding: 0 20px;
	}
	.header_wrap .logo-main img {
		width: 250px;
	}
	.header_wrap .logo-metro , 
	.header_wrap .header_right {
		width: calc((100% - 250px) / 2 );
	}
	.header_wrap .logo-metro img {
		width: 150px;
	}
	
	.header_text {
		margin: 5px 0 0;
	}
	/*
	.header_wrap2 {
		padding: 0 10px;
	}
	*/
	.header_wrap2 ul {
		justify-content: flex-start;
		flex-wrap: wrap;
	}
	
	.header_sp_nav{
		top: 5px;
		right: 20px;
	}
	.nav{
		width: 330px;
		padding: 140px 0 90px 5px;
	}
}



/* タブレット
-------------------------------------------------------------------------------------------------------------*/
@media screen and (max-width: 580px) { /* 580px以下に適用されるCSS */
	.header_wrap {
		height: 60px;
	}
	.header_wrap .logo-main img {
		width: 200px;
	}
	.header_wrap .logo-metro , 
	.header_wrap .header_right {
		width: calc((100% - 200px) / 2 );
	}
	.header_wrap .logo-metro img {
		width: 130px;
		margin: 15px 0 0;
	}
	
	.header_wrap2 ul li a {
		padding: 5px 3px;
	}
	
	.header_sp_nav{
		top: 0px;
	}
}


/* スマホ用
-------------------------------------------------------------------------------------------------------------*/
@media screen and (max-width: 480px) { /* 480px以下に適用されるCSS */
	/*
	header {
		padding: 15px 0;
	}
	*/
	.header_wrap {
		height: 50px;
		padding: 0 10px;
	}
	.header_wrap .logo-main img {
		width: 170px;
	}
	.header_wrap .logo-metro , 
	.header_wrap .header_right {
		width: calc((100% - 160px) / 2 );
	}
	.header_wrap .logo-metro img {
		width: 100px;
		margin: 15px 0 0;
	}
	
	.header_text {
		margin: 0;
		font-size: 0.8rem
	}
	
	/*
	.header_wrap2 {
		padding: 0 10px;
	}
	*/
	.header_wrap2 ul {
		justify-content: flex-start;
		flex-wrap: wrap;
		margin: 0 0 10px;
	}
	.header_wrap2 ul li {
		margin: 0px 5px 0 0;
		font-size: 0.85rem;
	}
	.header_wrap2 ul li:last-of-type {
		margin: 0;
	}
	
	.header_sp_nav {
		width: 40px;
		height:40px;
		top: 0;
		right: 10px;
	}
	.header_sp_nav.active {
		right: 10px;
	}
	.header_sp_nav span:nth-of-type(1) ,
	.header_sp_nav span:nth-of-type(2) {
		left: 10px;
	}
	.header_sp_nav span:nth-of-type(1) {
		top: 9px;
	}
	.header_sp_nav.active span:nth-of-type(1) {
		top: 9px;
		left: 12px;
	}
	.header_sp_nav.active span:nth-of-type(2) {
		top: 21px;
		left: 12px;
	}
	.header_sp_nav span:nth-of-type(3)::after {
		width: 50px;
		height: 11px;
		bottom: 7px;
		left: 5px;
	}
	.nav{
		width: 75%;
		padding: 140px 0 50px 35px;
		top: -80px;
	}
}