@charset "utf-8";

@import "base_layout.css";
@import "common_parts.css";

body{
	background: url(../../img/toppage/bg_mainph.jpg) no-repeat top 135px center;
}
@media screen and (max-width: 979px) {

body{
	background: url(../../img/toppage/bg_mainph.jpg) no-repeat top 50% center;
}
}
/*common
************************************************************************************/

section{
	padding: 15px 0;
}

/*pick upと森林学会共通*/
.frame_Menu{
	width: 100%;
	margin: 0;
	display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flex;
    display: -o-flex;
    display: flex;
	-webkit-justify-content:space-between;
	-moz-justify-content:space-between;
	justify-content:space-between;
	-webkit-flex-flow: row wrap;
	flex-flow: row wrap;
}
.frame_Menu .item{
	display: block;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	-o-box-sizing: border-box;
	-ms-box-sizing: border-box;
	box-sizing: border-box;
	margin-bottom: 25px;
}


/**/
.more{
	text-align: right;
	padding: 1.2em;
	font-size: 13px;
}
.more a{
	color: #000;
	text-decoration: none;
	display: inline-block;
	background: #f2f9ec;
	padding: 5px 15px;
}

@media screen and (min-width: 980px) {
.scroll{
	height: 250px;
	overflow-y: scroll;
	}
}
@media screen and (max-width: 979px) {
	/* 追加しました 2021/8/31 */
	.more {
		margin: 15px 10px 0 auto;
	}
}

/*mainph
************************************************************************************/
#MainPhoto{
	width: 100%;
	height: 250px;
	position: relative;
	background: url(../../img/toppage/mainphoto.jpg) no-repeat center center;
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
	text-align: center;
}
#MainPhoto .frameSlide {
  width: 100%;
  height: 240px;
  display: flex;
  justify-content: center;
  align-items: center;
  padding-top: 10px;
}	
	
@media screen and (min-width: 980px) {
#MainPhoto .frameSlide img.pc {
  width: 1100px;
	height: auto;
	display: block;
	margin: auto !important;
}
#MainPhoto .frameSlide img.sp{
	display: none !important;
	width: 0;
}
}
@media screen and (max-width: 979px) {
#MainPhoto .frameSlide img.pc{
	display: none;
	width: 0
}
#MainPhoto .frameSlide img.sp {
  width: auto;
	height: auto;
	/* 追加します 2021/8/31 */
	max-width: 100%;
	display: block !important;
	margin: auto;
}	

#MainPhoto{
	width: 100%;
	height: auto;
	position: static;
	background: none;
	padding: 30px 0;
}
#MainPhoto .frameSlide {
  width: 100%;
  height: auto;
  padding-top: 0;
}
	
}
@media screen and (max-width: 768px){
}
@media screen and (max-width: 620px) {
/*sp*/
}
@media screen and (max-width: 480px){
}


/*box-menu
************************************************************************************/
.box-menu-top .wrapper{
	display: -webkit-flex;
	display: flex;
	-webkit-flex-flow: row wrap;
	flex-flow: row wrap;
	-webkit-justify-content: left;
	justify-content: left;
}
.box-menu-top .wrapper .frame_Menu{
	width: calc(100% - 355px);
}
.box-menu-top .wrapper .frame_Twitter{
	width: 340px;
	margin-left: 15px;
}

#pickup h1{
	position: relative;
	padding: 0;
	margin-bottom: 30px;
	text-align: center;
}
#pickup h1:before {
	position: absolute;
	top: calc(50% - 2px);
	left: 0;
	width: 100%;
	height: 4px;
	content: '';
	background: #008326;
	border-radius: 3px;
	-webkit-border-radius: 3px;
	-moz-border-radius: 3px;
}
#pickup h1 span {
	position: relative;
	padding: 0 1.5em;
	background: #fff;
	color: #008326;
	font-size: 30px;
}

#pickup h2 {
	position: relative;
	text-align: center;
	padding: 0 0 10px 0;
	margin: 10px 0;
	font-size: 18px;
	color: #009e39;
}

#pickup h2:before {
  position: absolute;
  bottom: 0;
  left: calc(50% - 0.5em);
  width: 1em;
  height: 3px;
  content: '';
  background: #009e39;
}

#pickup h2 a{
	color: #009e39;
	text-decoration: none;
}
#pickup h2 a:after{
	content: "もっと見る »";
	text-align: right;
	font-size: 13px;
	color: #000;
	text-decoration: none;
	display: inline-block;
	background: #f2f9ec;
	padding: 5px 15px;
	text-decoration: none;
	line-height: 1.2;
	margin: -3px 0 0 5px;
}


ul.publish{
	width: 100%;
	display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flex;
    display: -o-flex;
    display: flex;
	-webkit-justify-content: center;
	-moz-justify-content: center;
	justify-content: center;
	margin-top: 30px;
}
ul.publish li{
	display: block;
	width: 30%;
	text-align: center;
}
ul.publish li .ph img{
	max-width: 100%;
	height: auto;
	margin: 0 auto;
}
ul.publish li .book_title{
	margin: 10px 0;
	font-size: 12px;
}

.frame_Menu .item{
	width: 355px;
	padding: 0;
	border: 1px solid #e7e7e7;
}
.item .ttl{
	padding: 0;
	margin-bottom: 0px;
	text-align: center;
}
.item .ttl img{
	max-width: 100%;
	height: auto;
	margin: 0 auto;
	display: block;
}
.frame_Menu .item.wide{
	width: 49%;
}
.frame_Menu .item.trisect{
	width: 32%;
}
.item .cmt{
	padding: 7px 20px;
	line-height: 1.4;
}

@media screen and (min-width: 980px) {
}
@media screen and (max-width: 979px) {
		/* 追加します 2021/8/31 */
		.frame_Menu .item {
			width: 50%;
		}
		.item .ttl img{
			width: 100%;
		}
.box-menu-top .wrapper .frame_Menu{
	width: 100%;
}
.box-menu-top .wrapper .frame_Twitter{
	width: 100%;
	margin: 15px 0;
}
}
@media screen and (max-width: 768px){
	  /* 追加します 2021/8/31 */
	.frame_Menu .item.wide,
	.frame_Menu .item.trisect{
		width: 100%;
	}
	.frame_Menu .item {
		width: 50%;
	}
}
@media screen and (max-width: 480px){
  /* 追加します 2021/8/31 */
	.frame_Menu .item {
		width: 100%;
	}
}

/*about*/
#about .bot_green{
	margin: 10px 0;
	padding: 10px 0;
	text-align: center;
	border: 1px solid #008326;
	border-radius: 3px;
	-webkit-border-radius: 3px;
	-moz-border-radius: 3px;
}
#about .bot_green a{
	color: #008326;
	text-decoration: none;
}


#about ul.line{
	padding: 7px 20px;
}
#about ul.line li{
	margin: 0 0 7px 0;
	padding: 0 0 0 30px;
	background: url("../../img/common/ar_line.png") no-repeat left center;
}
#about ul.line li a{
	color: #000;
	text-decoration: none;
}




/*Banner 仮で設置　210720
************************************************************************************/
#banner{
	padding: 0 0 60px 0;
}

#banner .wrapper {
	background: #e7e7e7;
	width: 100%;
}
#banner h1 {
  position: relative;
  padding:  0 0 0.5em 0;
  text-align: center;
}

#banner h1:before {
  position: absolute;
  bottom: 0;
  left: calc(50% - 0.5em);
  width: 1em;
  height: 3px;
  content: '';
  border-radius: 3px;
  background: #333;
}

#banner h1 span {
	position: relative;
	padding: 0 1em;
	color: #333;
	font-size: 28px;
	font-weight: 400;
}
.box-menu-top #banner .wrapper{
	display: block;
}
.box-menu-top #banner .wrapper .frame_Menu{
	width: 100%;
	align-items: center;
}
#banner .frame_Menu .item{
	width: 31%;
	margin: 10px 1%;
	padding: 0;
	border: none;
}
#banner .frame_Menu .item img{
	width: 100%;
	height: auto;
	margin: 0 auto;
}


/*news
************************************************************************************/
#news,
#mail-archives{
	width: 100%;
	background: #f2f9ec;
}
#news h1,
#mail-archives h1{
	font-size: 26px;
	font-weight: 400;
	padding: 30px 30px 30px 120px;
	margin: -50px auto 30px 0;
	position: relative;
	background: #d2eedb;
	width: 40%;
}
#news h1 span,
#mail-archives h1 span{
	font-size: 16px;
	padding-left: 20px;
}
#news h1:before,
#mail-archives h1:before{
	position: absolute;
	left: 20px;
	top: 50%;
	-webkit-transform: translateY(-50%);
	transform: translateY(-50%);
	content: "";
	display: block;
	width: 80px;
	height: 1px;
	background: #000;
}
.archives ul.topics li{
	width: 100%;
	display: table;
	padding: 10px 0;
}
.archives ul.topics li .date{
	width: 7em;
	display: table-cell;
	color: #616161;
}
.archives ul.topics li .cate{
	width: 12em;
	text-align: center;
	display: table-cell;
	font-size: 12px;
}
.archives ul.topics li .cate span{
	display: block;
	border: 1px solid #666;
	color: #666;
}
.archives ul.topics li .cate span.effort{
	border: 1px solid #09ba00;
	color: #09ba00;
}
.archives ul.topics li .cate span.infor{
	border: 1px solid #0069c2;
	color: #0069c2;
}
.archives ul.topics li .cate span.topic{
	border: 1px solid #d10d77;
	color: #d10d77;
}
.archives ul.topics li .cate span.meetings{
	border: 1px solid #fbbd00;
	color: #fbbd00;
}
.archives ul.topics li .cate span.event{
	border: 1px solid #ffa800;
	color: #ffa800;
}
.archives ul.topics li .cate span.members{
	border: 1px solid #ca1bbc;
	color: #ca1bbc;
}

.archives ul.topics li .ttl{
	display: table-cell;
}
.archives ul.topics li .ttl a{
	color: #000;
	text-decoration: none;
	background: url(../../img/common/ar_gray.svg) no-repeat right center;
	-moz-background-size: 7px auto;
	background-size: 7px auto;
	padding: 0 30px 0 20px;
	display: block;
}
.bot_more{
	margin: 20px 0 0 auto;
	text-align: right;
}

#mail-archives.archives ul.topics li .cate{
	width: 14em;
}


@media screen and (min-width: 980px) {
}
@media screen and (max-width: 979px) {
	/* 追加します 2021/8/31 */
	.logo {
		width: 256px;
		margin: auto;
	}
	.office {
		width: 300px;
		margin: auto;
	}
	#footer .address .office p {
		display: block;
	}
	#footer .address .btn_login a {
		margin: auto;
		margin-top: 20px;
	}
}
@media screen and (max-width: 768px){
}
@media screen and (max-width: 620px) {
}
@media screen and (max-width: 480px){
		/* 追加します 2021/8/31 */
	#news h1,
	#mail-archives h1{
		padding: 20px 20px 20px 60px;
		width: 100%;
		box-sizing: border-box;
	}
	#news h1 span,
	#mail-archives h1 span{
		display: block;
		padding-left: 0;
	}
	#news h1:before,
	#mail-archives h1:before{
		width: 30px;
	}
	.topics {
		padding: 0 3%;
		box-sizing: border-box;
	}

	.archives ul.topics li{
		display: block;
		padding: 10px 0;
	}
	.archives ul.topics li .date{
		width: auto;
		display: inline-block;
	}
	.archives ul.topics li .cate{
		width: auto;
		display: inline-block;
	}
	.archives ul.topics li .ttl{
		display: block;
	}

}