@charset "utf-8";


h1 img{
	max-width:100%;
	height:auto;
}

.exp > img{
	width:30%;
	height:auto;
	float:left;
}
.exp .detail{
	width:68%;
	float:right;
	font-size:16px;
}

.cool-kitchen{
	width:100%;
	border:#009fe8 dashed 1px;
	padding:20px;
	box-sizing:border-box;
	background-color:rgba(0,159,232,0.08);
	border-radius:20px;
}
.cool-kitchen > img{
	width:35%; height:auto; float:left;
}
.cool-kitchen > p{
	width:63%; float:right;
}




p.trademark{
	text-align:right; margin-top:5px; color:#666; margin-right:20px;
	font-size:12px;
	line-height:25px;
}
p.trademark img{
	vertical-align:middle;
}

.exp .detail h3{
	color:#005ba8; font-size:35px;
}
.exp .detail h3:first-of-type{
	text-align:left;
	margin-top:20px;
}
.exp .detail h3:last-of-type{
	text-align:right;
	margin-bottom:20px;
}

.point{
	margin-top:20px;
	position:relative;
	width:68%;
	float:right;
}
.point > div{
	width:45%;
}
.point > div.left{
	float:left;
}
.point > div.right{
	float:right;
}

.point div h4{
	font-size:25px;
	font-weight:bold;
	border-radius:50px;
	margin-bottom:10px;
	color:#fff;
	padding:0.5em;
	text-align:center;
}
.point div.left h4{
/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#b3dced+0,29b8e5+50,bce0ee+100;Blue+Pipe */
background: #b3dced; /* Old browsers */
background: -moz-linear-gradient(left,  #b3dced 0%, #29b8e5 50%, #bce0ee 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(left,  #b3dced 0%,#29b8e5 50%,#bce0ee 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to right,  #b3dced 0%,#29b8e5 50%,#bce0ee 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#b3dced', endColorstr='#bce0ee',GradientType=1 ); /* IE6-9 */
}
.point div.right h4{
/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#efd7ba+0,f08500+50,efd7ba+100 */
background: #efd7ba; /* Old browsers */
background: -moz-linear-gradient(left,  #efd7ba 0%, #f08500 50%, #efd7ba 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(left,  #efd7ba 0%,#f08500 50%,#efd7ba 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to right,  #efd7ba 0%,#f08500 50%,#efd7ba 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#efd7ba', endColorstr='#efd7ba',GradientType=1 ); /* IE6-9 */
}
.point > div p{
	text-align:center;
}

.point > img{
    position: absolute;
	display:block;
	
	width:30px;
	height:30px;
		
	top: 50%;
	left: 50%;
	-webkit-transform: translate(-50%,-50%);
	-moz-transform: translate(-50%,-50%);
	-ms-transform: translate(-50%,-50%);
	-o-transform: translate(-50%,-50%);
	transform: translate(-50%,-50%);
}

.adv{
	background-image:url(/eng/product/suzuchu/img/ice.jpg);
	background-size:cover;
	background-position:50% 50%;
	color:#fff;
}
.adv .clearfix > div{
	width:22%;
	margin-right:4%;
	box-sizing:border-box;
	float:left;
	text-align:center;
}
.adv .clearfix > div:last-child{
	margin-right:0;
}
.adv .clearfix > div img{
	width:80px;
	height:80px;
	margin:auto;
	display:block;
}
.adv .clearfix > div h3{
	text-align:center;
	margin:10px 0;
	font-size:18px;
	letter-spacing:2px;
}
.adv .clearfix > div p{
	text-align:center;
	font-size:16px;
}

.product-link a{
	width:16.66666%;
}
.product-link a div{
	width:90%;
}
.product-link a p{
	height:auto;
	width:95%;
}

@media screen and ( max-width:1024px) {
.exp > img{
	width:40%;
}
.exp .detail{
	width:58%;
}

.cool-kitchen > img,
.cool-kitchen > p{
	width:auto;
	float:none;
	margin:auto;
	max-width:100%;
}
.cool-kitchen > p{
	margin-top:10px;
}
.exp .detail h3{
	font-size:20px;
}
.point{
	width:100%;
}
.point div.right h4{
	margin-top:20px;
}

.adv .clearfix > div{
	width:50%;
	margin:0;
	margin-top:20px;
}
.product-link a{
	width:33.333%;
}
.product-link a p{
	height:3.6em;
}
}

@media screen and (min-width:0px) and ( max-width:750px) {
.exp > img,
.exp .detail,
.point{
	width:100%;
	float:none;
}
.exp > img{
	width:50%;
	margin:auto 25%;
	margin-bottom:20px;
}

.point > div{
	width:100%;
	float:none;
}
.point > img{
	display:none;
}

.adv .clearfix > div{
	width:100%;
	margin:0;
	margin-top:20px;
}
.adv .clearfix > div:first-child{
	margin:0;
}

.product-link a{
	width:50%;
}

.product-link a p{
	height:6em;
}

}