@charset "UTF-8";
/* ////////////////////////////////////////
PC,SP
//////////////////////////////////////// */
/*タイトル*/
#title-section{
	padding-top:130px;
	padding-bottom:40px;
}
#news-detail{
	padding-top:150px;
	padding-bottom:40px;
}
.main-title-wrap:before{
	position: absolute;
	z-index: 0;
	content:'';
	background-image: url("../img/news/en-news.png");
	background-repeat: no-repeat;
	background-size: contain;
	width:330px;
	height:84px;
	left:50%;
	margin-left:-165px;
	top:-70px;
}
/*昆虫画像*/
.head-insect:before{
	position:absolute;
	content:'';
	background-image: url("../img/news/head-insect.png");
	background-size: contain;
	background-repeat: no-repeat;
	width:187px;
	height:116px;
	right:-50px;
	top:-100px;
}
/*サブメニュー*/
#submenu{
	padding-top:36px;
	padding-bottom:20px;
}
#submenu ul {
  display: flex;
  flex-wrap: wrap;
  justify-content: center; /* これで中央寄せOK */
  gap: 1.25%;              /* 要素間の余白を自動で調整 */
  width: 100%;
  padding: 0;
  margin: 0;
  list-style: none;
}
#submenu li {
  flex: 0 0 32.5%; /* 3つで横幅いっぱい */
  margin-top: 10px;
  position: relative;
  background: #eee; /* 確認用 */
	border-radius:10px;
}
#submenu li:nth-child(3n){
	margin-right:0;
}
#submenu li .subtitle{
	display: block;
	background-color: #fff;
	color:#5EAF00;
	transition: 0.3s;
}
#submenu li .maintitle{
	display: block;
	background-image: url("../img/common/arrow-down-green.png");
	background-size: 24px 24px;
	background-repeat: no-repeat;
	background-position: center right 10px;
	padding:5px 36px 10px 10px;
	transition: 0.3s;
}
#submenu li a{
	height:100%;
	display: block;
	line-height: 1.5em;
	background-color: #5EAF00;
	border-radius:10px;
	border:3px solid #fff;
	padding:7px 7px 0 7px;
	text-align: center;
	color:#fff;
	transition: 0.3s;
}
#submenu li a:hover{
	background-color: #fff;
	border:3px solid #5EAF00;
	color:#5EAF00;
}
#submenu li a:hover .maintitle{
	background-image: url("../img/common/arrow-down-green-over.png");
}
#submenu li a:hover .subtitle{
	background-color: #5EAF00;
	color:#fff;
}
/*2カラム*/
.col2-wrap dd{
	margin-bottom:0;
}
.col2-wrap figure{
	max-width:355px;
	margin-left:auto;
	margin-right:auto;
}
/*赤背景のサブタイトル*/
.subtitle{
	margin-bottom:10px;
	width:161px;
	text-align: center;
	padding:0 5px;
	display: inline-block;
	color:#fff;
	background-color: #E3002D;
}
/*本文*/
#news .news-list li{
	padding:10px 0;
	display: table;
	width:100%;
	border-bottom:1px dashed #ADADAD;
}
#news .news-list li:first-child{
	padding-top:0;
}
#news .news-list li:last-child{
	padding-bottom:0;
	border-bottom:none;
}
#news .thumbnail-box,#news .news-text-box{
	display: table-cell;
	vertical-align: middle;
}
#news .thumbnail-box{
	margin-bottom:0;
	width:147px;
}
#news .news-text-box{
	width:calc(100% - 147px);
}
#news .news-list li a{
	display: block;
}
#news .news-list li a .news-title{
	text-decoration: underline;
}
#news .news-list li a .news-text-box time{
	color:#1E1715;
}
#news .news-list li a:hover .news-title{
	text-decoration: none;
}
/*詳細ボタン*/
#news-detail .arrow-btn.detail-btn{
	max-width: 500px;
	margin-left:auto;
	margin-right:auto;
}
#news-detail .arrow-btn.detail-btn a{
	padding:20px 56px;
}
/*一覧ボタン*/
#news-detail .arrow-btn.list-btn{
	max-width: 300px;
	margin-left:auto;
	margin-right:auto;
}
#news-detail .arrow-btn.list-btn a{
	text-align: center;
	border-radius:50px;
	display: block;
	padding:12px 20px 12px 20px;
	border:4px solid #fff;
	color:#fff;
	background-color: #5EAF00;
	background-image: url("../img/common/arrow-right-green.png");
}
#news-detail .arrow-btn.list-btn a:hover{
	background-image: url("../img/common/arrow-right-green-over.png");
	background-color: #fff;
	color: #5EAF00;
	border:4px solid #5EAF00;
}
/*画像の比率保つ*/
#news .main-img-box{
	overflow: hidden;
	position: relative;
	width: 100%;
}
#news .main-img-box:before {
	content: "";
	display: block;
	padding-top: 60%;
}
#news .main-img{
	position: absolute;
	margin:0;
	top: 0;
	left: 0;
	bottom: 0;
	right: 0;
}
#news .main-img img{
	width:100%;
	height:100%;
}
/*/画像の比率保つ*/
/*////////////////////////////////////////
印刷時　PC・タブレットのみ
//////////////////////////////////////// */
@media screen and (min-width:768px) , print{
	/*コンテンツ量が少ない時*/
	.contents-bg{
		min-height: calc(100vh - 70px - 80px);
	}
	/*本文*/
	#news .news-text-box{
		padding-left:20px;
	}
}
/* ////////////////////////////////////////
印刷時　PCのみ
//////////////////////////////////////// */
@media screen and (min-width:1100px) , print{	
	/*2カラム*/
	.col2-wrap {
		display: table;
		width:100%;
	}
	.col2-wrap>*{
		display: table-cell;
		vertical-align: top;
	}
	.col2-wrap dt{
		width:38%;
	}
	.col2-wrap dd{
		width:63%;
		padding-left:20px;
	}
}
@media screen and (min-width:1100px) and (max-width: 1600px) , print{
}
@media screen and (min-width:1600px) , print{
}
/* ////////////////////////////////////////
タブレット・SPのみ
//////////////////////////////////////// */
@media screen and (max-width: 1100px) {
	#news-detail{
		padding-top:130px;
		padding-bottom:20px;
	}
	/*昆虫画像*/
	.head-insect:before{
		width:160px;
		height:99px;
		top:-80px;
		right:-10px;
	}
	/*タイトル*/
	.main-title-wrap:before{
		background-position: center bottom;
		width:177px;
		height:45px;
		margin-left:-88.5px;
		left:50%;
		top:-16px;
	}
}
/* ////////////////////////////////////////
タブレットのみ
//////////////////////////////////////// */
@media screen and (min-width: 767px) and (max-width: 1100px) {
	/*タイトル*/
	.main-title-wrap:before{
		width:236px;
		height:60px;
		margin-left:-118px;
		top:-52px;
	}
	/*サブメニュー*/
	#submenu li {
    	flex: 0 0 48%; /* タブレットでは2列 */
	}
}
/* ////////////////////////////////////////
SPのみ
//////////////////////////////////////// */
@media screen and (max-width: 767px){
	#title-section{
		padding-top:65px;
	}
	.pankuz-news{
		top:90px!important;
	}
	#news-detail{
		padding-top:140px;
	}
	/*昆虫画像*/
	.head-insect:before{
		width:120px;
		height:75px;
		top:-55px;
		right:-10px;
	}
	/*サブメニュー*/
	#submenu{
		padding-top:20px;
		padding-bottom:20px;
	}
	#submenu li{
		flex: 0 0 100%; /* スマホでは1列 */
	}
	/*本文*/
	#news .news-text-box{
		padding-left:15px;
	}
	#news .thumbnail-box{
		width:100px;
	}
	#news .news-text-box{
		width:calc(100% - 100px);
	}
}
@media screen and (max-width: 410px){
}
/* ////////////////////////////////////////
スライド調整用　sm(540px以上)
//////////////////////////////////////// */
@media screen and (min-width:540px) {
}