@font-face {
  font-family: 'TBSGothic';
  src: url('https://www.tbs.co.jp/um/tpfonts/2e0869c1-da33-42ae-9828-55499bd42a69.woff') format("woff");
  font-weight:normal;
  font-style:normal;
/*  font-display: swap;*/
}
@font-face {
  font-family: 'TBSGothic';
  src: url('https://www.tbs.co.jp/um/tpfonts/044de588-d2c9-4010-86b0-1c026db099a2.woff') format("woff");
  font-weight:bold;
  font-style:normal;
/*  font-display: swap;*/
}

main { background-color: #FDFFEB; color: #3E3E3E;}
main h1.planting { margin: 0 auto;}
main h1.planting span { background-image: url(../img/gogreen/h1.png); background-size: contain; background-position: center top; background-repeat: no-repeat; width:100%; height:0; padding-top: -webkit-calc(140 / 615 * 100%); padding-top: calc(140 / 615 * 100%);}

.gogreen, .name { margin: 0 auto;}
.gogreen span, .name span {
  display: block;
  position: relative;
	background-size: 100%;
}
.lazy img {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
}


#mapArea {}
#mapArea #mapBlock {background-position: center center; background-repeat: no-repeat; background-size: contain; background-image: url(../img/gogreen/img_plantingmap.png); width:100%; height:0; padding-top: -webkit-calc(888 / 880 * 100%); padding-top: calc(888 / 880 * 100%); position: relative;}
#mapArea #mapBlock h2, #mapArea #mapBlock .comment{ width: 0; height: 0; text-indent: -9999px;}
#mapArea .right { text-align: right; font-weight: bold; position: absolute;}

#snsArea .hashtag{color: #FF9900;}
#snsArea h2 { color:#1E672F; }
#snsArea ul li { display: inline-block; margin: 0 12px;}
#snsArea ul li a {
border: solid 1px #1E672F;
display: block;
transition:0.5s;}
#snsArea ul li a:hover { background-color: #fff;}
#snsArea ul li a span{background-position: center center; background-repeat: no-repeat; background-size: contain; text-indent: -9999px; display: block;}
#snsArea ul li.snsX a span{ background-image: url(../img/gogreen/sns_x.png);}
#snsArea ul li.snsInstagram a span{ background-image: url(../img/gogreen/sns_instagram.png);}

.no-wrap {
    display: inline-block; /* インラインブロック化 */
}

/* ↓スマホ */
@media all and (max-width: 767px) {
	main { padding: 0px 0 25px!important; background-image: url(../img/gogreen/bg_sp.png); background-position: center top; background-repeat: repeat-y; background-size: contain;}
	main h1.planting { width: 80%; max-width: 350px; margin:0 auto; padding: 2em 0 1.5em;}
	.gogreen { width:60%; margin-bottom: 70px;}
	.name  { width:55%; margin-bottom: 100px;}
	
	.gogreen, .name {
    box-sizing: border-box;
  }
	.gogreen span {
    height: 0;
    padding: 156.662% 0 0;
    position: relative;
  }
	.name span {
    height: 0;
    padding: 26.973% 0 0;
    position: relative;
  }
	
	.txt { font-size: 0.9em; line-height: 2.2em; padding-bottom: 1.8em; }
	
	#aboutArea h2 { width: 100%; max-width: 300px; margin: 0 auto 30px;}
	#aboutArea p.txt { width: 80%; margin: 0 auto;}
	
	#mapArea {width: 90%; margin: 0 auto; padding: 2em 0 4em;}
	#mapArea .right {font-size: 0.8em; line-height: 1.4em; bottom:-2em; right:-0.5em;}
	
	#snsArea .hashtag{ padding-bottom: 1em;}
	#snsArea h2 { font-size: 0.8em;}
	#snsArea { margin: 0 10px;}
	#snsArea ul { padding: 15px 0;}
	#snsArea ul li { display: inline-block; margin: 0 0.5%; width: 45%; max-width: 140px;}
	#snsArea ul li a {
border-radius: 15px;
-webkit-border-radius: 15px;
-moz-border-radius: 15px;
	padding: 15px 0;
		background-color: #FDFFEB;
}
	#snsArea ul li a span{width: 119px; height: 22px; margin: 0 auto;}
}

/* ↑スマホ */
/* ↓PC */
@media all and (min-width: 768px) {
	main { padding: 0px 0 25px!important; background-image: url(../img/gogreen/bg.png); background-position: center top; background-repeat: repeat-y;}
	main h1.planting { width: 615px; margin: 60px auto 45px;}
	.txt { font-size: 1.1em; line-height: 2.5em; padding-bottom: 2em;}
	
	#aboutArea h2 { margin-bottom: 55px;}
	
	#mapArea {width: 880px; margin: 0 auto; padding: 60px 0;}
	#mapArea .right {font-size: 0.9em; line-height: 1.5em; bottom:50px; right:60px; }
	
	#snsArea .hashtag{ font-size: 1.1em; padding-bottom: 1em;}
	#snsArea ul { padding: 20px 0;}
	#snsArea ul li a {
border-radius: 18px;
-webkit-border-radius: 18px;
-moz-border-radius: 18px;
padding: 18px 0; width: 155px;}
	#snsArea ul li a span{width: 140px; height: 28px; margin: 0 auto;}

}
/* ↑PC */

/*	butten
============================== */
p.button{
	padding: 4px;
	position: relative;
	margin: 0 auto;
}
p.button a{
    text-align: center;
    margin: 0 auto;
	padding:0;
	font-weight: 700;
	color: #fff;
	transition:0.5s;
	background-image:  url(../img/gogreen/btn_arrow.png);
	background-repeat: no-repeat;
	background-color: #1E672F;
	display: table;
	width: 100%;
	z-index: 100;
	text-decoration: none;
}
p.button a:hover {
filter: brightness(1.1);
}

@media all and (min-width: 768px) {
	p.button {width: 350px;}
	p.button a {
	    border-radius: 20px;
    -webkit-border-radius: 20px;
    -moz-border-radius: 20px;
	background-position:right 20px center;
	background-size: 10px 17px;
	padding: 20px 0;
}
	p.button a span {padding-right: 20px; font-size: 1.1em;}
}
@media all and (max-width: 767px) {
	p.button { width: 80%; max-width: 340px;}
	p.button a {
	border-radius: 18px;
    -webkit-border-radius: 18px;
    -moz-border-radius: 18px;
	background-position:right 10px center;
	background-size: 10px 17px;
	padding: 15px 0;}
	p.button a span {padding-right: 12px; font-size: 1.0em;}
}

/*	fadein
============================== */
.fadeinD {
    opacity : 0;
    transform : translate(0, 20px);
    transition:all 1s;
  display:block;
}
.fadeinD.scrollin {
    opacity : 1;
    transform : translate(0, 0);
}