@charset "utf-8";
/* CSS Document */
.mt20{margin-top: 20px;}
.mb30{margin-bottom: 30px;}

ul {list-style: none;}
a img:hover{opacity: 0.7;}
.marker{background: linear-gradient(transparent 50%, #ddd95b 50%);}

h2,p,a,dt,dd,li,span{
	font-family: "source-han-sans-japanese", sans-serif;
	font-style: normal;}

h1 .mainbnr{
	text-align: center;
	background-color: #f7f7f7;
	line-height: 0;}
h1 img{
	max-width: 70%;
	margin: 0 auto;}
h2{line-height: 1.2;}
h2 span{font-size: 60%;}

#prologue .inner{
	width: 1080px;
	margin: 0 auto;
	text-align: center;}
#prologue .inner h2{
	font-size: 30px;
	color: #49a255;
	margin: 40px 0 30px;}
#prologue .inner p{
	font-size: 16px;
	margin-bottom: 40px;}


#select .inner{
	width: 1080px;
	margin: 0 auto;	
	text-align: center;}
#select .inner ul{
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;}
#select .inner ul li{width: 31%;}
#select .inner ul li a{
	font-size: 23px;
	display: block;
	padding: 10px 0;
	background-color: #49a255;
	color: #fff;
	position: relative;}
#select .inner ul li a:after{
	content: "";
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	right: 15px;
	width:0;
	height:0;
	border-style:solid;
	border-width: 16px 9px 0 9px;
	border-color: #FFFFFF transparent transparent transparent;}
#select .inner ul li a span{
	font-size: 80%;
	color: #fff;}


#product-list{margin-bottom: 80px;}
#product-list .inner{
	width: 1080px;
	margin: 0 auto;}
#product-list .inner h2{
	text-align: center;
	font-size: 30px;
	margin: 60px 0;}
#product-list .inner .product_area,
#eco .inner .biopet_series{
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-start;}
#product-list .inner .product_area .product,
#eco .inner .biopet_series .product{
	width: 22%;
	margin-right: 4%;}
#product-list .inner .product_area .product:nth-child(4n),
	#eco .inner .biopet_series .product:nth-child(4n){
	margin-right: 0;
	margin-bottom: 60px;}
#product-list .inner .product_area .product a ul,
#eco .inner .biopet_series .product a ul{
	display: flex;
	justify-content: space-between;}
#product-list .inner .product_area .product a ul li img:hover,
#eco .inner .biopet_series .product a ul li img:hover{opacity: 1;}

#product-list .inner .product_area .product a .capacity,
#eco .inner .biopet_series .product	 a .capacity{
	font-size: 22px;
	font-weight: bold;
	background-color: #4ba9cc;
	color: #fff;
	text-align: center;
	line-height: 1;
	padding: 10px 0;
	position: relative;}
#product-list .inner .product_area .product a .capacity:before,
	#eco .inner .biopet_series .product a .capacity:before{
	content: url("../img/capacity.webp");
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	left: 35px;
	line-height: 1;}
#product-list .inner .product_area .product a .price,
#eco .inner .biopet_series .product a .price{
	font-size: 25px;
	font-weight: bold;
	color: indianred;}
#product-list .inner .product_area .product a .price span,
#eco .inner .biopet_series .product a .price span{font-size: 70%;}


#eco{background-color: #f8fff5; margin: 60px auto;}
#eco .inner{
	width: 1080px;
	margin: 0 auto;
	padding: 60px 0 0;}
#eco .inner h2{
	text-align: center;
	font-size: 30px;
	padding: 0 0 60px;}
#eco .inner .biopet{
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;}
#eco .inner .biopet .left{width: 48%;}
#eco .inner .biopet .right{width: 48%; text-align: left;}
#eco .inner .biopet .right h3{
	font-size: 25px;
	color: #53ba2d;}
#eco .inner .biopet .right p{
	font-size: 16px;
	margin-bottom: 20px;
	line-height: 1.7;}
#eco .inner .biopet .right dl{
	background-color: #fff;
	font-size: 16px;
	box-sizing: border-box;
	padding: 20px;}
#eco .inner .biopet .right dt{
	font-weight: bold;
	padding-bottom: 5px;
	color: #53ba2d;}
#eco .inner .biopet .right dd{
	border-bottom: dashed 1px #53ba2d;
	margin-bottom: 10px;}
#eco .inner .biopet .right dd:last-child{
	margin-bottom: 0;}

#eco .inner .biopet_size{
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	margin-bottom: 60px;}
#eco .inner .biopet_size img{width: 100%;}
#eco .inner .biopet_size figure{width: 48%;}
#eco .inner .biopet_size dl{
	width: 48%;
	text-align: left;
	align-content: center;}
#eco .inner .biopet_size dt{
	font-size: 25px;
	color: #53ba2d;
	font-weight: bold;}
#eco .inner .biopet_size dd{font-size: 16px;}
#eco .inner .use-sample{text-align: center; padding: 80px 0;}
#eco .inner .use-sample dt{
	font-size: 30px;
	font-weight: bold;
	position: relative;
	display: inline-block;
	margin-bottom: 40px;}
#eco .inner .use-sample dt:before{
	content: "";
	width: 1px;
	height: 100%;
	background-color: #000;
	position: absolute;
	top: 50%;
	left: -20px;
	transform: rotate(-35deg) translateY(-50%);}
#eco .inner .use-sample dt:after{
	content: "";
	width: 1px;
	height: 100%;
	background-color: #000;
	position: absolute;
	top: 50%;
	right: -20px;
	transform: rotate(35deg) translateY(-50%);}


#kanren-product .inner{
	width: 1080px;
	margin: 60px auto;}
#kanren-product .inner h2{
	text-align: center;
	font-size: 30px;
	margin: 60px 0;}
#kanren-product .inner .product_area{
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;}
#kanren-product .inner .product_area a{
	width: 22%;
	text-align: center;
	font-weight: bold;
	margin-bottom: 80px;}

.spotlist_back{
	margin-top: 60px;
	text-align: center;}
.spotlist_back .inner{
	margin-bottom: 0;
	padding-bottom: 60px;
}
.spotlist_back a{
	font-size: 20px;
	border: solid 2px;
	padding: 15px 80px;
	border-radius: 7px;
	color: #000;}


@media only screen and (max-width: 768px) {}
@media (max-width: 1024px) {}
@media (max-width: 768px) {
	h1 img{max-width: 100%;}
	
	#prologue .inner,#select .inner,#product-list .inner,#eco .inner,#kanren-product .inner{width: 90%; margin: 0 auto;}
	
	#select .inner ul{display: block;}
	#select .inner ul li{width: 100%;}
	#select .inner ul li:nth-child(n+2){margin-top: 20px;}
	#select .inner ul li a{font-size: 18px;}
	
	#product-list .inner h2{font-size: 25px;}
	#product-list .inner .product_area, #eco .inner .biopet_series{justify-content: space-between;}
	#product-list .inner .product_area .product, #eco .inner .biopet_series .product{width: 47%; margin-right: 0;}
	#product-list .inner .product_area .product:nth-child(n+3), #eco .inner .biopet_series .product:nth-child(n+3){margin-top: 30px; margin-bottom: 0;}
	#product-list .inner .product_area .product a img, #eco .inner .biopet_series .product a img{width: 100%;}
	#product-list .inner .product_area .product a .capacity:before, #eco .inner .biopet_series .product a .capacity:before{left: 5%;}
	#product-list .inner .product_area .product a .capacity, #eco .inner .biopet_series .product a .capacity{font-size: 18px;}
	#product-list .inner .product_area .product a .price, #eco .inner .biopet_series .product a .price{line-height: 1.0;padding-top: 7px;}
	
	#eco .inner h2{font-size: 25px;}
	#eco .inner{padding: 60px 0;}
	#eco .inner .biopet{display: block;}
	#eco .inner .biopet .left{width: 100%;}
	#eco .inner .biopet .left img{width: 100%;}
	#eco .inner .biopet .right{width: 100%;}
	#eco .inner .biopet .right h3{font-size: 22px;}
	#eco .inner .biopet .right dl{margin-bottom: 30px;}
	#eco .inner .biopet_size{display: block;}
	#eco .inner .biopet_size dl{width: 100%; margin-bottom: 30px;}
	#eco .inner .biopet_size dt{font-size: 22px;}
	#eco .inner .biopet_size figure{width: 100%; margin-bottom: 30px;}
	#eco .inner .biopet_size figure img{width: 100%;}
	#eco .inner .use-sample{padding: 60px 0 0;}
	#eco .inner .use-sample img{width: 100%;}
	#eco .inner .use-sample dt{font-size: 22px;}
	
	#kanren-product .inner h2{margin: 40px 0;}
	#kanren-product .inner .product_area a{width: 47%;}
	#kanren-product .inner .product_area a img{width: 100%;}
}