@charset "UTF-8";

#products-header {background-image: url(../img/products-header.jpg);}
#contents{padding: 90px 0 20px;}

.pl{padding-bottom: 50px;position: relative;}
.pl h2{letter-spacing: 0.18em;}
.pl h2,.pl .lead{margin-bottom: 40px;}
.pl ul{position: relative;}
.pl li{width: 31.25%;margin-bottom: 30px;}
.pl li a{display: block;color: #111;text-decoration: none;}
.pl li a:hover{background-color: #fff;opacity: 0.6}
.pl li a h3{font-size: 21px;font-size: 2.1rem;margin-bottom: 10px;color: #333;letter-spacing: 0.12em;}
.pl-img {width: 100%;padding-top: 55.692307692308%;position: relative;overflow: hidden;margin-bottom: 10px;}
.pl-img img{width: 100%;position: absolute;top: 0;left: 0;}
.pl-img span{position: absolute;right: 0;bottom: 0;width: 100px;font-size: 14px;font-size: 1.4rem;padding: 1px 10px 2px;}
.pl ul::after{content:"";display: block;width:30%;}
@media (max-width: 767px) {
	.pl li{width: 48%;margin-bottom: 20px;}
	.pl li p{line-height: 1.5;}
	.pl li a h3,.pl-img{margin-bottom: 5px;}
	.pl-img span{font-size: 1.2rem;width: 50%;}
}

#pl-system{background-color: #fff;padding: 80px 0 100px;}
#pl-system h2{font-size: 21px;font-size: 2.1rem;margin-bottom: 40px;letter-spacing: 0.12em;}

#design-link {padding: 80px 0 0;}
#design-link a {
	color: #fff;
	text-decoration: none;
	position: relative;
	display: block;
	width: 100%;
	background: url(../img/products-01.jpg) no-repeat center center;
	background-size: cover;
	text-align: center;
	padding: 102px 20px 101px;
}
#design-link a h2{margin-bottom: 32px;position: relative;color: #fff;}
#design-link a p{line-height: 1.5;font-size: 16px;font-size: 1.6rem;margin-bottom: 33px;letter-spacing: 0.09em;position: relative;}
#design-link a img{position: relative;}
#design-link a::before {content: '';display: block;position: absolute;left: 0;top: 0;width: 100%;height: 100%;opacity: 0.65;background-color: #003F8D;}
#design-link a:hover::before{opacity: 0.8;}
@media (max-width: 960px) {
	#design-link a{padding: 60px 15px 60px;}
}