/*====================================================================================================
  TOPPAGE
====================================================================================================*/

/* COMMON ITEM */
#toppage h3 { font-size:150%; font-weight:500; padding-left:100px;}
#toppage .b_more,
#toppage .b_more a {display: block; width:165px; height: 45px;}
#toppage .b_more a {
	padding: 7px 5px 5px 20px;
	color:#fff !important;
	font-weight: 500;
	text-decoration: none;
	background: #32A338 url("../img/arrow_w.svg") no-repeat 95% center;
	background-size: 25px auto;
	box-shadow: 4px 6px 0px 0px rgba(96,96,96,0.2); 
	box-sizing: border-box;
}
#toppage .b_more:hover { opacity: 0.7; }


/*** MAINIMG *******************************************************************/
#toppage .mainimg { height: 450px; position: relative;}
#toppage .mainimg .photo { width: 100%; margin: auto; }
#toppage .mainimg .photo img { 
	object-fit: cover; object-position: center; 
	width: 100%; height: 100vh; max-height: 450px; 
}
#toppage .mainimg .catch { 
	position: absolute; top: 50%; right: 0; left: 0;
	max-width: 1200px;	margin: auto; 
	transform: translateY(-50%);
}


/*** IMPORTANT NOTICE *******************************************************************/
#toppage .important_notice {
	position: relative;
	max-width: 1300px;
	width: 100%;
	/* margin:55px auto;	*/
	margin: 65px auto 105px;
	overflow: hidden;
	min-height: 5em;
}
#toppage .important_notice a { text-decoration: none; display: block;}
#toppage .important_notice h3 { position: relative; float: left; width:310px; color: #cc363e;}
#toppage .important_notice h3::before {
	content: "";
	position: absolute; top:0; left:0;
	width: 80px; height: 80px;
	background: url(../../img/notice.svg) no-repeat center;
	background-size: 100%;
}
#toppage .important_notice .news_box { 
	float: left; 
	padding-left:40px;
	width: calc(100% - 310px);
	border-left:1px solid rgba(96, 96, 96, .20);
}
#toppage .important_notice ul { position: relative; overflow: hidden;}
#toppage .important_notice ul+ul { margin-top:10px;}
#toppage .important_notice ul li { float: left;}
#toppage .important_notice ul li a { color: #222; text-decoration: underline; }
#toppage .important_notice ul li:nth-child(1) {
	width:165px;
	font-size: 88%;
	background: url("../img/arrow_r.svg") no-repeat right center;
	background-size: 25px auto;
}
#toppage .important_notice ul li:nth-child(2) { width: calc(100% - 165px); padding-left:10px;}
#toppage .important_notice ul:nth-child(n+4) { display:none; }
#toppage .important_notice ul li a:hover { color: #cc363e; }
#toppage .important_notice .b_more { position: absolute; top:40px; left:100px;}
#toppage .important_notice .b_more a { background-color:#cc363e;}


/*** AGRI WEATHER & DISASTER INFORMATION *******************************************************************/
#toppage .disaster_info { max-width: 1300px; width: 100%; margin: auto; position: relative; }
#toppage .disaster_info a {
	display: block;
	position: absolute; top: -90px; right: 0;
	width: 182px; height: 189px; 
	text-indent: -9999px;
	text-decoration: none;
	background: url(../../img/disaster_info.png) no-repeat center;
	background-size: 100%;
}
#toppage .disaster_info a:hover { opacity: 0.7; }


/*** LATEST INFORMATION *******************************************************************/
#toppage .latest_notice { padding:50px 0 90px;  background: rgba(10, 72, 62, .05); }
#toppage .latest_notice a { text-decoration: none; display: block;}
#toppage .latest_notice .box { max-width: 1300px; margin: auto; padding-bottom: 5px; overflow: hidden; }
#toppage .latest_notice h3 { 
	margin-bottom: 30px; 
	line-height: 220%;
	background: url(../../img/latest_tit.svg) no-repeat left center;
	background-size: 80px auto;
}
#toppage .latest_notice .news { position: relative; float: left; width:49%;}
#toppage .latest_notice .news a+a { margin-top: 3px;}
#toppage .latest_notice .news a:nth-child(n+6) { display:none; }
#toppage .latest_notice .news ul { 
	position: relative;
	width: 100%; 
	padding:19px;
	color: #222;
	background: #fff url("../img/arrow_g.svg") no-repeat 98% center;
	background-size: 25px auto;
	overflow: hidden;
}
#toppage .latest_notice .news ul li { float: left; line-height: 150%; }
#toppage .latest_notice .news ul li:nth-child(1) { font-size: 88%; width: 160px; }
#toppage .latest_notice .news ul li:nth-child(3) { clear: both; }
#toppage .latest_notice .news ul li.loc { 
	position: absolute; top:38%;; right: 40px;
	/* width: 105px; */
	width: 160px;
	font-size: 88%; 
	text-align: center;
}
#toppage .latest_notice .news ul li.cate div { 
	width: 79px; height: 21px;
	border: 1px solid; 
	color: #31a239;
	font-size: 88%; 
	text-align: center;
	line-height: 130%;
	background: #ecf4e8;
}
#toppage .latest_notice .news ul li:nth-child(3) {
	text-decoration: underline;
	color: #222;
	width: calc(100% - 160px);
}
#toppage .latest_notice .btn { padding-top: 10px;}
#toppage .latest_notice .btn p { float: right;}
#toppage .latest_notice .rss {
	position: relative; top: 15px;
	width: 82px; height: 30px;
	background: url(../../img/rss.svg) no-repeat center;
	background-size: 100%;
}
#toppage .latest_notice .rss a { text-indent: -9999px; padding: 1px 0; }

#toppage .latest_notice .yt { float: right; width:49%; padding:20px 20px 0; background: #fff; }
#toppage .latest_notice .youtube { position: relative; width: 100%; padding-top: 56.25%;}
#toppage .latest_notice .youtube iframe {
	position: absolute; top: 0; right: 0;
	width: 100% !important; height: 100% !important;
}
#toppage .latest_notice .yt .yt_more {
	background: #fff url("../img/arrow_b.svg") no-repeat right center;
	background-size: 25px auto;
}
#toppage .latest_notice .yt .yt_more a { 
	position: relative;
	padding:22px 10px 20px 140px;
	width: 100%;
	font-weight: 500;
	font-size: 113%; 
	color: #222; 
	background: url(../../img/yt.svg) no-repeat left center;
	background-size: 129px 44px;
}
#toppage .latest_notice .news a:hover ul li,
#toppage .latest_notice .yt .yt_more:hover a,
#toppage .latest_notice .news .rss:hover,
#toppage .latest_notice .news .b_more:hover { opacity: 0.7; }


/*** IOP & CONSULTATION CENTER *******************************************************************/
#toppage .banner1 { padding:20px; overflow: hidden; }
#toppage .banner1 .box { position:relative; float:left; width:49.9%; }
#toppage .banner1 .box+.box { margin-left:0.1%; }
#toppage .banner1 .box a { display:block; padding:25px 0; text-decoration:none; color: #FFF; }
#toppage .banner1 .box .photo {
  position:absolute; top: 0;
  width:100%; height:100%;
  overflow:hidden;
}
#toppage .banner1 .box .photo img { transition:2s; width:100%; height:100%; object-fit:cover; object-position:center; }
#toppage .banner1 .box:hover .photo img { transform:scale(1.23, 1.2); }
#toppage .banner1 .box .mid {
  font-size:200%;
  font-weight:700;
  line-height:130%;
  text-align:center;
  text-shadow:0 0 7px #222;
	position: relative; z-index: 999;
}
#toppage .banner1 .box .b_more {
	width:390px;
	margin:15px auto 0;
	background:#33A339;
	text-align:center;
	font-size:112.5%;
	font-weight:500;
	line-height:100%;
	letter-spacing:1px;
	padding: 10px 0 13px;
	position:relative;
	background: #32A338 url("../img/arrow_w.svg") no-repeat 98% center;
	background-size: 25px auto;
}
#toppage .banner1 .iop .mid {
	padding-left:116px;
	width:391px;
	margin: 0 auto;
	text-align:left;
	background:url(../../img/iop_tit.png) no-repeat left;
}


/*** LATEST EVENT INFORMATION *******************************************************************/
#toppage .info { max-width:1300px; margin:0 auto; padding:80px 0 100px; overflow: hidden; }

#toppage .event { position:relative; float:left; width:calc(100% - 550px); }
#toppage .event h3 {
    text-align:left;
    margin-bottom:22px;
    background:url(../../img/event_tit.svg) no-repeat left;
    padding:15px 0 15px 85px;
}
#toppage .event .event_list {}
#toppage .event .event_list .box { position:relative; background:rgba(10, 72, 62, 0.05); margin-top:3px; }
#toppage .event .event_list .box::before {
    position:absolute; left: 0; top: 0; content:"";
    width: 0; height: 0;
    border-style: solid;
    border-width: 22px 22px 0 0;
    border-color: #FFF transparent transparent transparent;
}
#toppage .event .event_list .box a { 
    display:block; 
    padding:43px 35px; 
    text-decoration:none; 
    color: #484544; 
    overflow: hidden; 
	background:url("../img/arrow_m.svg") no-repeat 98% center;
	background-size: 25px auto;
}
#toppage .event .event_list .box a:hover { opacity:0.7; }
#toppage .event .event_list .box .mid {
	float:left;
	font-size:87.5%;
	font-weight:300;
	line-height:180%;
	padding:3px 15px 0 0;
	border-right:1px solid rgba(34, 35, 34, 0.15);
	width: 20%;
}
#toppage .event .event_list .box .come {
	float:left;
	padding-left:20px;
	line-height:170%;
	width: 80%;
}
#toppage .event .event_list .box span { display:block; color:#33A339; }
#toppage .event .event_list .box b { color:#4C4B4B; font-size:112.5%; text-decoration:underline; }
#toppage .event .event_list .box small { display:block; font-size:87.5%; }
#toppage .event .b_more { position: absolute; top:0; right:0;}


/*** FACEBOOK *******************************************************************/
#toppage .sns_fb { float:right; width:500px; }
#toppage .sns_fb h3 {
	text-align:left;
	margin-bottom:45px;
/*	color:#306DB6; */
/*	background: url(../../img/fb_tit.svg) no-repeat left; */
	color:#e1306c;
	background: url(../../img/instagram_tit.png) no-repeat left;
}
#toppage .sns_fb .facebook { width:100%!important; height:430px; background: #eee;}
/* #toppage .sns_fb .facebook iframe { height:100%!important; } */


/*** INSTITUTION *******************************************************************/
#toppage .institution {padding:65px 0; background:rgba(10, 72, 62, 0.05); }
#toppage .institution h3 { padding: 0; text-align: center; }
#toppage .institution .institute_list { max-width:1280px; margin:45px auto 0; overflow: hidden; }
#toppage .institution dl { float:left; width:32.2%; margin-bottom:15px; }
#toppage .institution dl+dl { margin-left:20px; }
#toppage .institution dl dt {
	display:block;
	cursor:pointer;
	position:relative;
	color:#222;
	padding:15px 20px;
	font-size:112.5%;
	font-weight:500;
	background:#fff url("../img/arrow_m2.svg") no-repeat 98% center;
	background-size: 25px auto;
	box-shadow:4px 5px 0 rgba(96, 96, 96, .20);
	border:3px solid #FFF;
}
#toppage .institution dl dt:hover { border-color:#33A339; }
#toppage .institution dl.active dt { 
	color:#FFF; border-color:#33A339;
	background:#33A339 url("../img/arrow_w2.svg") no-repeat 98% center;
	background-size: 25px auto;
}
#toppage .institution ul.content { clear:both; background:#FFF; }
#toppage .institution ul.content li { display:none; padding:20px; overflow: hidden; }
#toppage .institution ul.content li p { float:left; width:29.3%; margin:20px 2%; }
#toppage .institution ul.content li p a {
	text-decoration:none;
	color: #222;
	display:block;
	padding-left:30px;
	position:relative;
	background:url("../img/arrow_m.svg") no-repeat left 5px;
	background-size: 25px auto;
}
#toppage .institution ul.content li p a:hover { color:#33A339; }
#toppage .institution ul.content li p a i { color:#33A339; top: auto; left:0; transform:initial; }


/*** BANNER *******************************************************************/
/*
#toppage .banner2 { max-width:1000px; margin:0 auto; padding:80px 0; }
*/
#toppage .banner2 { max-width:1250px; margin:0 auto; padding:80px 0; }
#toppage .banner2 ul { overflow: hidden; }
#toppage .banner2 ul li { float:left; }
#toppage .banner2 ul li+li { margin-left:7px; }

#toppage .banner2 ul li { width: 19.5%; }
#toppage .banner2 ul li img { width: 100%; }