/* global */
*,
*:before,
*:after {
	-webkit-box-sizing: border-box;
	   -moz-box-sizing: border-box;
	        box-sizing: border-box;
}
body {
	/* font-family: "游ゴシック体","YuGothic","Yu Gothic","ヒラギノ角ゴ Pro W6","Hiragino Kaku Gothic Pro",Osaka,"ＭＳ Ｐゴシック", "MS PGothic", sans-serif; */
  font-style: normal;
	line-height: 2;
	font-weight: 400;
	color: #000;
	text-align: left;
}
h1, h2, h3, h4, h5, h6, figure, p {
	margin: 0;
}
a,
a:hover,
a:focus {
	text-decoration: none;
	color: #000;
}
img {
	max-width: 100%;
	height: auto!important;
}
button{
	cursor: pointer;
}
ul, ol {
	padding: 0;
	margin: 0;
	list-style: none;
}

/* layout */
main {
	font-family: 'Noto Serif JP', serif;
  letter-spacing: 0.3em;
}


@media screen and (min-width: 768px) {
	main {
		max-width: calc(1140px + 60px);
		position: relative;
		margin: 0 auto;
		padding: 100px 30px 0;
	  }
	.flex{
		display: flex;
	}
	.reverse{
		flex-direction: row-reverse;
		
	}
	p{font-size: 1rem;}
	h2,h3{
		font-size:1.3rem;
	}

}
@media screen and (max-width: 767px) {
	main {
		font-size: 14px;
		width: 100%;
		padding:70px 5.33333% 0;
	  }
	  h2,h3{
		  font-size: 23px;
	  }

  }


/* # =================================================================
  # メインヴィジュアル
   # ================================================================= */
   @media screen and (min-width: 768px) {
	   .mv{
	padding-bottom:200px;
}
   .logo{
	width: 15%;
}
.ttl{
	vertical-align: bottom;
	justify-content: space-between;
}
   h1{
	   position: relative;
	   z-index: 3;
   }
.ttl_width{
	max-width: 350px;
	width: 100%;
}
.mv__img{
	position: relative;
	margin-top: -20px;
	z-index: 1;
	width: 70%;
}
.mv_txt{
	position: relative;
}
   .greenbox{
	background-color: #016737;
	width: 50%;
	padding-top:38.7%;
	position: absolute;
	z-index:-1;
	top:400px;
	right: 30px;

}
}
@media screen and (max-width: 767px) {
	.mv{
 padding-bottom:100px;
}
.logo{
 width: 30%;
 position: relative;
 margin-top: 30px;

}
.ttl{
	display: flex;
 vertical-align: bottom;
 justify-content: space-between;
}
h1{
	position: relative;
	z-index: 3;
}
h1 img{
	width: 80%;
}
.mv__img{
 position: relative;
 margin-top: 20px;
 z-index: 1;
}
.mv_txt{
	position: relative;
padding-top: 30px;

}
.greenbox{
 background-color: #016737;
 width: 90%;
padding-top:55.5%;
 position: absolute;
 z-index:-1;
top:180px;
left: 0;
}
}
/* # =================================================================
  # トレンド
   # ================================================================= */
   @media screen and (min-width: 768px) {

article{
	padding-bottom:150px;
	margin: 0 auto;
}
.ph_img{
	flex: 1.6;
}

.article_txt{
	flex:1;
}

.sec__ttl{
	width: 75%;
}

.txt_right{
	text-align: right;
}
.ttl_right{
	margin: 0 0 0 auto;
}
.pad_right{
	padding-right:20px;
}
.pad_left{
	padding-left:20px;
}}
@media screen and (max-width: 767px) {

	article{
		padding-bottom:100px;
		margin: 0 auto;
	}
	.sec__ttl{
		width: 70%;
	}
	.ttl_right{
		margin: 0 0 0 auto;
	}
	.txt_right{
		text-align: right;
	}

	}


/* # =================================================================
  # Viewmoreボタン
   # ================================================================= */


.btn {
	position:relative;
	margin: 0 auto;
	transition: .4s;
	filter: invert(0);
	width: 215px;
	border: solid 3px #000;
	line-height:0;
margin-top: 30px;
  }
  
  @media screen and (min-width: 768px) {
  .btn:hover {
	transition: .4s;
	filter: invert(100%);
	width: 215px;
	border: solid 3px #fff;

  }
}