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

#main-img{
	background-image:url(/eng/product/img/product-main-img.png);
	background-position:50% 50%;
	background-attachment:fixed;
	background-size:cover;
	background-position:50% 50%;
}

/* #　アドバンテージ
----------------------- */
#advantage .clearfix > div{
	width:30%;
	box-sizing:border-box;
	text-align:center;
	float:left;	
	margin-right:5%;
}
#advantage .clearfix > div:last-child{
	margin:0;
}
#advantage .clearfix > div img{
	width:80px;
	height:auto;
	display:block;
	margin:auto;
}
#advantage .clearfix > div h3{
	margin:10px 0;
	font-weight:700;
	letter-spacing:0.2em;
}
#advantage .clearfix > div p{
	color:#666;
	width:90%;
	margin:auto;
}

@media screen and ( max-width:1024px) {
#advantage .clearfix > div p{
	width:100%;
}
}

@media screen and (min-width:0px) and ( max-width:750px) {
#advantage .clearfix > div{
	width:100%;
	float:none;
	margin-bottom:20px;
}

#advantage .clearfix > div:after {
     content:".";
     display: block;
     height: 0;
     clear: both;
     visibility: hidden;
}

#advantage .clearfix > div div{
	float:left;
	width:40%;
}
#advantage .clearfix > div div img{
	width:40%;
	height:auto;
}

#advantage .clearfix > div h3{
	font-size:1rem;
}


#advantage .clearfix > div p{
	float:right;
	width:60%;
	text-align:left;
	font-size:0.875rem;
}

#main-img{
	background-attachment:scroll;
}

}


/* #　サーチ　バイ　カテゴリー
----------------------- */
#search{
	border-top:#09c solid 3px;
	background-color:#F0F0F0;	
	position:relative;
	margin-top:50px;
	padding-top:40px;
	padding-bottom:40px;
}
#search h2{
	background-color:#09c;
	color:#fff;
	margin:0;
	line-height:50px;
	font-size:1.3rem;
	padding:0 2em;
	position:absolute;
	bottom:100%;
	height:50px;
}
#search .clearfix a{
	display:block;
	box-sizing:border-box;
	width:20%;
	float:left;
	text-decoration:none;
	color:#000;
	margin:10px 0;
	
}

#search .clearfix a div{
	border-right:#CCC solid 1px;
    position: relative;
}
#search .clearfix a div:before {
    content:"";
    display: block;
    padding-top: 70%;
}
#search .clearfix a:first-child div,
#search .clearfix a:nth-of-type(6) div{
	border-left:#CCC solid 1px;
}
#search .clearfix a div img{
    position: absolute;
	display:block;
	
	width:auto;
	height:auto;
	max-width:70%;
	max-height:90%;
		
	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%);
}

#search .clearfix a p{
	width:80%;
	margin:auto;
	margin-top:10px;
	position:relative;
	height:auto;
	text-align:center;	
}
#search .clearfix a p:before{
	content:"\f105";
	font-family:FontAwesome;
	color:#09c;
	position:relative;
	right:10px;
}
#search .clearfix a:hover div{
	background-color:rgba(204,204,204,0.1);
}

#search .clearfix a:hover p{
	color:#09c;
}







@media screen and (min-width:686px) and ( max-width:750px) {
#search{
	padding-top:10px;
	padding-bottom:10px;
}
#search h2{
	width:95%;
	padding:0;
	font-size:1rem;
}
#search .clearfix a{
	width:50%;
}
#search .clearfix a p{
	width:70%;
	margin-top:5px;
}
#search .clearfix a div,
#search .clearfix a:first-child div,
#search .clearfix a:nth-of-type(6) div{
	border:0;
}
}

@media screen and (min-width:617px) and ( max-width:685px) {
	#search{
		padding-top:10px;
		padding-bottom:10px;
	}
	#search h2{
		width:95%;
		padding:0;
		font-size:1rem;
	}
	#search .clearfix a{
		width:50%;
	}
	#search .clearfix a p{
		width:70%;
		margin-top:5px;
		font-size:0.9rem;
	}
	#search .clearfix a div,
	#search .clearfix a:first-child div,
	#search .clearfix a:nth-of-type(6) div{
		border:0;
	}
}

@media screen and (min-width:409px) and ( max-width:616px) {
	#search{
		padding-top:10px;
		padding-bottom:10px;
	}
	#search h2{
		width:95%;
		padding:0;
		font-size:1rem;
	}
	#search .clearfix a{
		width:50%;
	}
	#search .clearfix a p{
		width:70%;
		margin-top:5px;
		font-size:1.2rem;
	}
	#search .clearfix a div,
	#search .clearfix a:first-child div,
	#search .clearfix a:nth-of-type(6) div{
		border:0;
	}
}
@media screen and (min-width:0px) and ( max-width:408px) {
	#search{
		padding-top:10px;
		padding-bottom:10px;
	}
	#search h2{
		width:95%;
		padding:0;
		font-size:1rem;
	}
	#search .clearfix a{
		width:50%;
	}
	#search .clearfix a p{
		width:70%;
		margin-top:5px;
		font-size:0.9rem;
	}
	#search .clearfix a div,
	#search .clearfix a:first-child div,
	#search .clearfix a:nth-of-type(6) div{
		border:0;
	}
}

/* #　オススメ製品
----------------------- */
#REC a {
    position: relative;
    width: 47.5%;
	margin-right:5%;
	margin-bottom:5%;
	float:left;
	display:block;
	overflow:hidden;
}
#REC a:before {
    content:"";
    display: block;
	padding-top:50%;
}
#REC a:nth-child(2),
#REC a:nth-child(4){
	margin-right:0;
}
#REC a:nth-child(3),
#REC a:nth-child(4){
	margin-bottom:0;
}

#REC a .inside {
	width:80%;
	height:auto;
    position: absolute;
    top: 10%;
	left:10%;
}
#REC a .image{
	position:absolute;
	top:0;
	left:0;
	width:100%;
	height:100%;
	background-size:cover;
	background-position:50% 50%;
	
    -webkit-transition: all .8s ease-out;
    -moz-transition: all .8s ease-out;
    -ms-transition: all .8s ease-out;
    transition: all .8s ease-out;
}
#REC a.strong01 .image{
	background-image:url(/eng/product/strong/img/01.jpg);
}
#REC a.strong02 .image{
	background-image:url(/eng/product/strong/img/02.jpg);
}
#REC a.strong03 .image{
	background-image:url(/eng/product/strong/img/03.jpg);
}
#REC a.strong04 .image{
	background-image:url(/eng/product/strong/img/04.jpg);
}
#REC a:hover .image{
    -moz-transform: scale(1.2);
    -webkit-transform: scale(1.2);
    -ms-transform: scale(1.2);
    transform: scale(1.2);
}
#REC a .inside h3{
	color:#fff;
	font-size:2rem;
	letter-spacing:0.2em;
}
#REC a .inside p{
	color:#fff;
	font-size:1.5rem;
	margin-top:30px;
	margin-top:10px;
}
#REC a .inside hr{
	width:20%;
	border:0;
	border-bottom:2px #fff solid;
	margin:30px auto 0 0;
}

@media screen and ( max-width:1024px) {
#REC a{
    width: 49%;
	margin-right:2%;
	margin-bottom:2%;
	float:left;
	display:block;
	overflow:hidden;
	text-align:center;
}
#REC a:before {
	padding-top:70%;
}
#REC a .inside hr{
	margin:auto;
	margin-top:20px;
	width:40%;
}

}

@media screen and (min-width:0px) and ( max-width:750px) {
#REC a,
#REC a:nth-child(3){
	width:100%;
	margin:0;
	margin-bottom:2.5%;
}
#REC a:before {
	padding-top:55%;
}
#REC a .inside hr{
	display:none;
}
#REC a .inside h3{
	color:#fff;
	font-size:1.5rem;
	letter-spacing:0.2em;
}
#REC a .inside p{
	color:#fff;
	font-size:1.2rem;
	margin-top:30px;
	margin-top:10px;
}
}


/* #　凉厨
----------------------- */
#suzuchu{
	background-image:url(/eng/product/suzuchu/img/ice_back.jpg); 
	background-position:50% 50%; 
	background-size:cover;
}

#suzuchu img{
	float:left;
	width:50%;
	height:auto;
}
#suzuchu div.text{
	width:45%;
	float:right;
	text-align:left;
}
#suzuchu h2{
	text-align:left;
}
#suzuchu h2 span{
	color:#09c;
}

@media screen and (min-width:0px) and ( max-width:750px) {
#suzuchu img,
#suzuchu div.text{
	width:100%;
	float:none;
}
#suzuchu h2{
	text-align:center;
}
#suzuchu p{
	text-align:center;
	margin-top:10px;
}
}


/* #　ダウンロード
----------------------- */
#download{
	background-color:#e3e3e3;
}
#download h2{
	width:30%;
	margin-bottom:0;
	line-height:50px;
	height:50px;
	text-align:left;
	margin:0;
	display:block;
	float:left;
}
#download a{
	display:block;
	color:#fff;
	background-color:#09c;
	text-decoration:none;
	width:30%;
	margin-left:5%;
	text-align:center;
	box-sizing:border-box;
	font-size:1.3rem;
	line-height:50px;
	height:50px;
	
	float:right;
	position:relative;
}
#download a:before{
	content:"\f105";
	font-family:FontAwesome;
	position:absolute;
	right:10%;
}

@media screen and (min-width:0px) and ( max-width:750px) {
#download h2,
#download a{
	text-align:center;
	width:100%;
	float:none;
	margin:0;
}
#download a{
	width:90%;
	margin:auto;
	margin-top:20px;
}
}


/* #　リンク　共通
----------------------- */
#REC a .link,
#suzuchu a.link{
    border-radius: 3px;
	padding:0 4em;
	line-height:40px;
	height:40px;

	text-decoration: none;
	-webkit-transition: 0.8s;
	-moz-transition: 0.8s;
	-o-transition: 0.8s;
	-ms-transition: 0.8s;
	transition: 0.8s;
	font-family: 'Roboto Mono', monospace;
}

#REC a .link{
	background-color:#fff;
	color:#000;
	
	position:absolute;
	bottom:10%;
	left:10%;
	z-index:500;

}
#suzuchu a.link{
	background-color:#000;
	color:#Fff;
	
	display:inline-block;
	margin-top:20px;
}


#REC a:hover .link,
#suzuchu a.link:hover{
	height:50px;
	line-height:50px;
	padding:0 5em;
}
@media screen and ( max-width:1024px){
#REC a .link,
#suzuchu a.link{
	width:50%;
	padding:0;
	text-align:center;
}
#REC a .link{
	left:25%;
}
#suzuchu a.link{
	display:block;
	margin:auto;
	margin-top:20px;
}
#REC a:hover .link,
#suzuchu a.link:hover{
	width:50%;
	padding:0;
	margin-top:10px;
}