@charset "UTF-8";

/*---------------------------------------------

Products Page CSS

for ad-world.co.jp
coded by d-spica at 2016-10-30

---------------------------------------------*/


@import url(default.css);
@import url(base.css);
@import url(parts.css);


section.summary {
	margin: 5em 0;
	text-align: center;
}

section.summary > div {
	margin: 0 auto;
	max-width: 68.6em;
}

section.summary h1 {
	margin-bottom: 1em;
	line-height: 2;
	font-size: 170%;
}

section.summary p {
	line-height: 2;
	font-size: 115%;
}

section.products {
	margin: 8em 0 -3.5em;
}

section.products > div {
	margin: 0 auto;
	max-width: 68.6em;
}

section.products > div > h1 {
	margin: 0 auto 3em;
	border-bottom: solid 4px #EEE;
	padding-bottom: 0.5em;
	max-width: 32.4em;
	text-align: center;
	font-size: 170%;
}

section.products ul {
	/*overflow: hidden;*/
	margin: -2.52% -2.52%  5em;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
}

section.products li {
	/*float: left;*/
	margin: 0 2.5% 5.5em;
	width: 45%;
}

section.products li a {
	display: block;
}

section.products li .banner {
	margin-bottom: 1em;
}

section.products li .title {
	margin-bottom: 1em;
	font-size: 85%;
}

section.products li .title em {
	display: block;
	font-size: 160%;
}

section.products li .summary {
	margin-bottom: 1.8em;
	line-height: 1.7;
	font-size: 85%;
	height: 6em;
}

section.products li .nav-more {
	position: relative;
	border: solid 1px #000;
	padding: 0.6em 1.2em;
	width: 11em;
}

section.products li a:hover .nav-more {
	border: solid 1px #666;
	color: #666;
}

section.products li .nav-more:after {
	content: url(../img/ar-bk.png);
	position: absolute;
	top: 0.1em;
	right: 0.5em;
	transform: scale(0.3);
}

section.products li a:hover .nav-more:after {
	opacity: 0.7;
}


/*20180606 追記 ここから*/

.products-top-ttl{
	position: relative;
	margin: 0 -1.5em;
}
.products-top-ttl h1 img{
	position: absolute;
	top: 50%;
	left: 50%;
	margin-top: -35px;
	margin-left: -135px;
	width: 270px;
	height: 70px;
}
.product-down a:hover img{
	opacity: 0.8;
}
.product-down .product-inner{
	max-width: 960px;
	margin: 85px auto 155px;
	text-align: center;
}
.product-down .product-inner li{
	margin-bottom: 115px;
}
.product-down .product-inner li h2.title{
	font-size: 18px;
	line-height: 2.8;
	margin-top: 15px;
}
.product-down .product-inner li .summary{
	font-size:15px;
	line-height: 2.0;
}
.product-down .product-inner li .nav-more{
	border: solid 1px #535353;
	padding: 0.8em 1.2em;
	width: 11em;
	position: relative;
	margin: 20px auto 0;
	text-align: left;
	font-size: 15px;
}
.product-down .product-inner li .nav-more::after{
	content: url(../img/ar-bk.png);
	position: absolute;
	top: 0.4em;
	right: 0.5em;
	transform: scale(0.5);
}




section.products li.twice {
	width: 100%;
}
section.products li.twice img {
	width: 100%;
}


@media screen and (max-width:640px) {
	.products-top-ttl h1 img{
		margin-top: -19px;
		margin-left: -73px;
		width: 145px;
		height: 38px;
	}
	.product-down .product-inner{
		width: 100%;
		margin: 65px auto 120px;
		text-align:left;
	}
	.product-down .product-inner li{
		margin-bottom: 60px;
	}
	.product-down .product-inner li h2.title{
		font-size: 16px;
		line-height: 2.5;
		margin-top: 10px;
	}
	.product-down .product-inner li .summary{
		font-size:13px;
		line-height: 1.5;
	}
	.product-down .product-inner li .nav-more{
		width:100%;
		box-sizing: border-box;
		font-size: 14px;
	}
}

/*20180606 追記 ここまで*/


@media screen and (max-width:987px) {
	section.summary p {
		text-align: left;
	}
}

@media screen and (max-width:640px) {
	section.summary {
		margin: 3em 0;
	}

	section.summary h1 {
		font-size: 140%;
	}

	section.summary p {
		font-size: 100%;
	}
	
	section.products {
		margin: 5em 0 -2em;
	}

	section.products > div > h1 {
		font-size: 140%;
	}

	section.products ul {
		margin-bottom:3em;
	}
	
	section.products li {
		float: none;
		width: auto;
		margin-bottom:4em;
	}
	
	section.products li .nav-more {
		padding: 1.2em;
		width: auto;
	}
	
	section.products li .nav-more:after {
		top: 0.6em;
		-moz-transform:    scale(0.3);
		-webkit-transform: scale(0.3);
		-o-transform:      scale(0.3);
		-ms-transform:     scale(0.3);
		transform:         scale(0.3);
		display:block;
	}

	section.products li .summary{
		height: auto;
	}
}

/*SEO対策追加*/
h1.back-pro-fl{
	background-image:url("../../products/flooring/img/ec-flooring_b.jpg");
}

h1.back-pro-ma{
	background-image:url(../../products/material/img/ec-material.jpg);
}

h1.back-pro-wa{
	background-image:url("../../products/wall/img/ec-wall_b.jpg");
}

section.products > div > h2 {
	margin: 0 auto 3em;
	border-bottom: solid 4px #EEE;
	padding-bottom: 0.5em;
	max-width: 32.4em;
	text-align: center;
	font-size: 170%;
}