@charset "utf-8";

/** NEWS INDEX **/
.Inpage_head{
	width: 100%;
	/*padding-top: 16.667%;*/
	height: 202px;
	position: relative;
	background: url(../img/news/news_bg.png) no-repeat center center / cover;
}
#news .Inpage_head{
	margin-bottom: 23px;
}
.Inpage_logo{
	width: 287px;
	height: 138px;
	background: url(../img/common/logo.png)no-repeat center center / contain;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%,-50%);
}
.Inpage_title{
	position: absolute;
	left: 50%;
	transform: translateX(-50%);
}
.news_h2{
	width: 106px;
	height: 46px;
	bottom: -23px;
	background: url(../img/news/news_logo.png) no-repeat center center / contain;
}

@media screen and (max-width:768px) {
	.Inpage_head{
		height: 300px;
		background: url(../img/news/news_bg_sp.jpg) no-repeat center center / cover;
	}
	#news .Inpage_head{
		margin-bottom: 31px;
	}
	.Inpage_logo{
		width: 313px;
		height: 151px;
	}
	.news_h2{
		width: 158px;
		height: 62px;
		bottom: -31px;
	}
}

.newsWrap{
	width: 100%;
	background: url(../img/news/newslist_bg.png) no-repeat center top / 100%;
	padding-top: 88px;
	min-height: calc(100vh - 225px);
}
.newsLists{
	width: 1040px;
	margin: 0 auto;
}
.newsList{
	display: flex;
	font-size: 18px;
	line-height: 46px;
	font-weight: normal;
	margin-bottom: 32px;
	line-height: 2.2;
}
.newsList:last-child{
	margin-bottom: 0;
}
.newsList--date{
	width: 220px;
	font-size: 18px;
	color: #c3d82d;
}
.newsList--title{
	width: 820px;
	color: #fff;
}
.newsList--title a{
	color: #fff;
	text-decoration: none;
	position: relative;
	overflow: hidden;
}
.newsList--title a span {
	background: linear-gradient(#fff, #fff) right bottom/0 1px no-repeat;
	transition: background-size 0.3s cubic-bezier(0.215, 0.61, 0.355, 1);
	/*transition: background-size 0.4s ease;*/
}
.newsList--title a:hover span {
	background-position: left bottom;
	background-size: 100% 1px;
}
@media screen and (max-width:768px) {
	.newsWrap{
		min-height: calc(100vh - 331px);
		padding-top: 70px;
	}
	.newsLists{
		width: 650px;
	}
	.newsList{
		font-size: 20px;
		line-height: 46px;
		margin-bottom: 40px;
	}
	.newsList--date{
		width: 160px;
	}
	.newsList--title{
		width: 490px;
	}
	.newsList--title a span{
		background-size: 100% 1px;
	}
}
.paging{
	width: 1200px;
	margin: 0 auto;
	display: flex;
	justify-content: center;
	padding: 80px 0;
}
.paging li{
	width: 45px;
	height: 45px;
	margin: 0 5px;
	display: flex;
	align-items: center;
	justify-content: center;
}
.paging li a{
	width: 100%;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	font-size: 18px;
	border: 1px solid #c3d82d;
	text-decoration: none;
	transition: .3s ease;
}
.paging li a:hover{
	background-color: #c3d82d;
	color: #000;
}
.paging .pageactive{
	width: 100%;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	border: 1px solid #c3d82d;
	border-radius: 50%;
	background-color: #c3d82d;
	color: #000;
}
@media screen and (max-width:768px){
	.paging{
		width: 100%;
	}
}

/* newsdetail */
.newsDetail{
	width: 1040px;
	margin: 0 auto;
}
.newsDetail h3{
	display: flex;
	font-size: 18px;
	font-weight: normal;
	margin-bottom: 64px;
	line-height: 2.2;
	color: #c3d82d;
}
.newsDetail--date{
	width: 220px;
}
.newsDetail--title{
	width: 820px;
	text-decoration: underline;
}
.newsDetailIn{
	padding-left: 220px;
	font-size: 16px;
	font-weight: normal;
	line-height: 2;
}
.newsDetailIn img{
	max-width: 100%;
}
.toNewsLists{
	width: 45px;
	height: 45px;
	margin: 80px auto;
}
.toNewsLists a{
	width: 100%;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	border: 1px solid #c3d82d;
	text-decoration: none;
	transition: .3s ease;
}
.toNewsLists a:hover{
	background-color: #c3d82d;
	color: #000;
}
.toNewsLists a div{
	background: url(../img/news/news_back_arrow.png)no-repeat center center / contain;
	width: 8px;
	height: 12px;
}
.toNewsLists a:hover div{
	background: url(../img/news/news_back_arrow_h.png)no-repeat center center / contain;
}
@media screen and (max-width:768px){
	.newsDetail{
		width: 650px;
	}
	.newsDetail h3{
		font-size: 20px;
		line-height: 46px;
		margin-bottom: 70px;
	}
	.newsDetail--date{
		width: 160px;
	}
	.newsDetail--title{
		width: 490px;
	}
	.newsDetailIn{
		padding-left: 0;
		font-size: 20px;
		line-height: 46px;
	}
}