@charset "UTF-8";
/* CSS Document */

#main_area{
	position:relative;
	width:100%;
	height:auto;
	
	padding:125px 40px 10px 40px;
	
	background-color:#e3f2db;
	
	display:-webkit-box;
	display: -webkit-flex;
	display:-ms-flexbox;
	display: flex;
	-webkit-flex-wrap:nowrap;
	-ms-flex-wrap:nowrap;
	flex-wrap:nowrap;
	
	justify-content: space-between;
	
	opacity: 0;
	
	animation-name: main_anime;
	animation-duration: 1s;
	animation-timing-function: ease-in;
	animation-delay: 0;
	animation-fill-mode:forwards;

}

@keyframes main_anime {
  0% {
	  transform: translateY(20px);
	  opacity: 0;
  }
  100% {
	  transform: translateX(0px);
	  opacity: 1;
  }
}


#main_area #copy_block{
	position:relative;
	width:45%;
	
	padding:40px 40px;
	margin:20px 0;
	
	display:-webkit-box;
	display: -webkit-flex;
	display:-ms-flexbox;
	display: flex;
	-webkit-flex-wrap:wrap;
	-ms-flex-wrap:wrap;
	flex-wrap:wrap;
	
	justify-content: center;
	align-content: center;
	
}

#main_area #copy_block .cate_box{
	font-size:18px;
	font-weight:300;
	line-height:20px;
	color:#000;
	letter-spacing: 0.1em; 
	text-align:center;
	
	padding:25px;
	margin:0 0 40px 0;
	
	border-bottom:solid 2px #000;
	
}

#main_area #copy_block .logo_box{
	text-align:center;
	padding:0 30px;
	margin:20px 0 80px 0;
	
	width:90%;
}

#main_area #copy_block .logo_box h1{
	margin:0;
	padding:0;
}

#main_area #copy_block .logo_box h1 img{
	position:relative;
	width:100%;
	height:100%;
	object-fit: scale-down;
}

#main_area #copy_block .copy_box{
	width:100%;
}


#main_area #copy_block .copy_box h2{
	font-size:16px;
	font-weight:400;
	line-height:24px;
	color:#4ab40d;
	letter-spacing: 0.01em; 
	text-align:left;
	
	margin:0 0 25px 0;
	
}

#main_area #copy_block .copy_box p{
	font-size:14px;
	font-weight:300;
	line-height:27px;
	color:#000;
	letter-spacing: 0.01em; 
	text-align:left;
}

#main_area #photo_block{
	position:relative;
	width:55%;
	
	padding:0;
	
	display:-webkit-box;
	display: -webkit-flex;
	display:-ms-flexbox;
	display: flex;
	-webkit-flex-wrap:wrap;
	-ms-flex-wrap:wrap;
	flex-wrap:wrap;
	
	justify-content: center;
	align-content: center;
	
}

#main_area #photo_block img{
	position:relative;
	width:100%;
	height:100%;
	object-fit: scale-down;
}

.contents{
	opacity: 0;
	transition: all 0.5s ease-out;
}

.contents.active{
	opacity: 1;
}

.details_area{
	position:relative;
	width:100%;
	height:auto;
	
	padding:70px 80px 0 80px;
		
	display:-webkit-box;
	display: -webkit-flex;
	display:-ms-flexbox;
	display: flex;
	-webkit-flex-wrap:nowrap;
	-ms-flex-wrap:nowrap;
	flex-wrap:nowrap;
	
	align-items:flex-start;
	
	justify-content: space-between;
}

.details_area .photo_block{
	position:relative;
	width:510px;
	height:auto;
}

.details_area .photo_block img{
	position:relative;
	width:100%;
	height:100%;
	object-fit: scale-down;
}

.details_area .copy_block{
	position:relative;
	width:calc(100% - 510px);
	
	padding:0 0 0 70px;
	margin:0;
	
}

.details_area .copy_block h3{
	font-size:16px;
	font-weight:400;
	line-height:24px;
	color:#4ab40d;
	letter-spacing: 0.01em; 
	text-align:left;
	
	margin:0 0 30px 0;
	
}

.details_area .copy_block p{
	font-size:14px;
	font-weight:300;
	line-height:27px;
	color:#000;
	letter-spacing: 0.01em; 
	text-align:left;
}
.details_area .copy_block .caution{
	font-size:12px;
	font-weight:300;
	line-height:20px;
	color:#000;
	letter-spacing: 0.01em; 
	text-align:left;
	display:block;
}

.btn_area{
	position:relative;
	width:100%;
	height:auto;
	
	padding:70px 80px 0 80px;
		
	display:-webkit-box;
	display: -webkit-flex;
	display:-ms-flexbox;
	display: flex;
	-webkit-flex-wrap:nowrap;
	-ms-flex-wrap:nowrap;
	flex-wrap:nowrap;
	
	justify-content: flex-end;
}

.btn_area .link_block{
	position:relative;
	width:calc(100% - 510px);
	
	padding:0 0 0 70px;
	margin:0;
	
}

.btn_area .link_block a{
	color:#fff;
	background-color:#75bd4b;
	padding:12px 60px;
	font-size:14px;
	line-height:2.0;
	letter-spacing: 0.1em;
	border-bottom:none;
	position:relative;
}

.btn_area .link_block a:after{
	content: "";
	position: absolute;
	top:0;
	bottom:0;
	right:0;
	
	width:47px;
	height:4px;
	
	margin:auto;
	
	background-repeat:no-repeat;
	background-size:47px 4px;
	background-position: right 5px center;
	background-image:url("../common/btm_arrow.png");
}


@keyframes logo_anime {
  0% {
	  transform: translateX(40px);
	  opacity: 0;
  }
  100% {
	  transform: translateX(0px);
	  opacity: 1;
  }
}
@media screen and (max-width:767px) {
	#main_area{
	padding:100px 5% 10px 5%;
		
	display:-webkit-box;
	display: -webkit-flex;
	display:-ms-flexbox;
	display: flex;
	-webkit-flex-wrap:wrap;
	-ms-flex-wrap:wrap;
	flex-wrap:wrap;
	
	justify-content: space-between;
	}

	#main_area #copy_block{
	position:relative;
	width:100%;
	
	padding:0 0 20px 0;
	margin:10px auto;
	
	display:-webkit-box;
	display: -webkit-flex;
	display:-ms-flexbox;
	display: flex;
	-webkit-flex-wrap:wrap;
	-ms-flex-wrap:wrap;
	flex-wrap:wrap;
	
	justify-content: center;
	align-content: center;
	
	-webkit-box-ordinal-group:2;
  	-ms-flex-order:2;
  	-webkit-order:2;
  	order:2;
	
	}

	#main_area #copy_block .cate_box{
	font-size:15px;
	
	padding:15px 25px 15px 25px;
	margin:0 0 10px 0;
	}

	#main_area #copy_block .logo_box{
	padding:0 30px;
	margin:10px 0 50px 0;
	
	width:90%;
	}

	#main_area #copy_block .logo_box h1{
	}

	#main_area #copy_block .logo_box h1 img{
	}

	#main_area #copy_block .copy_box{
	width:100%;
	}

	#main_area #copy_block .copy_box h2{
	font-size:14px;
	margin:0 0 25px 0;
	
	}

	#main_area #copy_block .copy_box p{
	
	}

	#main_area #photo_block{
	position:relative;
	width:100%;
	
	padding:0;
	
	-webkit-box-ordinal-group:1;
  	-ms-flex-order:1;
  	-webkit-order:1;
  	order:1;
	
	}

	#main_area #photo_block img{
	}

	.contents{
	}

	.contents.active{
	}

	.details_area{
	position:relative;
	width:100%;
	height:auto;
	
	padding:30px 5% 0 5%;
		
	display:-webkit-box;
	display: -webkit-flex;
	display:-ms-flexbox;
	display: flex;
	-webkit-flex-wrap:wrap;
	-ms-flex-wrap:wrap;
	flex-wrap:wrap;
	
	align-items:flex-start;
	
	justify-content: space-between;
}

.details_area .photo_block{
	position:relative;
	width:100%;
	height:auto;
	margin-bottom:10px;
	-webkit-box-ordinal-group:2;
  	-ms-flex-order:2;
  	-webkit-order:2;
  	order:2;
}

.details_area .photo_block img{
	position:relative;
	width:100%;
	height:100%;
	object-fit: scale-down;
}

.details_area .copy_block{
	position:relative;
	width:100%;
	
	padding:0;
	margin:0 0 20px 0;
	
	-webkit-box-ordinal-group:1;
  	-ms-flex-order:1;
  	-webkit-order:1;
  	order:1;
}

.details_area .copy_block h3{
	font-size:16px;
	font-weight:400;
	line-height:24px;
	color:#4ab40d;
	letter-spacing: 0.01em; 
	text-align:left;
	
	margin:0 0 20px 0;
	
}

.details_area .copy_block p{
	font-size:14px;
	font-weight:300;
	line-height:27px;
	color:#000;
	letter-spacing: 0.01em; 
	text-align:left;
}
.details_area .copy_block .caution{
	font-size:12px;
	font-weight:300;
	line-height:20px;
	color:#000;
	letter-spacing: 0.01em; 
	text-align:left;
	display:block;
}

.btn_area{
	position:relative;
	width:100%;
	height:auto;
	
	padding:70px 80px 0 80px;
		
	display:-webkit-box;
	display: -webkit-flex;
	display:-ms-flexbox;
	display: flex;
	-webkit-flex-wrap:nowrap;
	-ms-flex-wrap:nowrap;
	flex-wrap:nowrap;
	
	justify-content: flex-end;
}

.btn_area .link_block{
	position:relative;
	width:calc(100% - 510px);
	
	padding:0 0 0 70px;
	margin:0;
	
}

.btn_area .link_block a{
	color:#fff;
	background-color:#75bd4b;
	padding:12px 60px;
	font-size:14px;
	line-height:2.0;
	letter-spacing: 0.1em;
	border-bottom:none;
	position:relative;
}

.btn_area .link_block a:after{
	content: "";
	position: absolute;
	top:0;
	bottom:0;
	right:0;
	
	width:47px;
	height:4px;
	
	margin:auto;
	
	background-repeat:no-repeat;
	background-size:47px 4px;
	background-position: right 5px center;
	background-image:url("../common/btm_arrow.png");
}
}