@import url('//fonts.googleapis.com/css?family=Cormorant+Upright');
/*
 * iweb52-style26
 *
 * Copyright 2017, TANK
 * 
 * 
 * 2016 / 01 / 25
 */


/* + productWrap
*----------------------------------------------------------------------------*/
#productWrap {
	margin: 50px 0 0;
}

#productWrap ul {
	overflow: hidden;
}

#productWrap ul li {
	overflow: hidden;
	position: relative;
	float: left;
	width: 25%;
	animation-name: fadeInUp;
	-webkit-animation-name: fadeInUp;
}

#productWrap ul li .productPhoto {
	overflow: hidden;
	width: 100%;
	height: 100%;
}

#productWrap ul li .productPhoto a.photo {
	background-size: cover;
	-webkit-transition: -webkit-transform 1s;
	-moz-transition: -moz-transform 1s;
	transition: transform 1s;
}

#productWrap ul li:hover .productPhoto a.photo {
	transform: scale(1.1);
}

#productWrap ul li .info {
	position: absolute;
	width: 100%;
	height: 100%;
	left: 0;
	top: -100%;
	background: rgba(0, 0, 0, 0.4);
	-webkit-transition:  all 0.4s ease;
	-moz-transition:  all 0.4s ease;
	transition:  all 0.4s ease;
}

#productWrap ul li:hover .info {
	top: 0;
}

#productWrap ul li .info a {
	padding: 45% 0;
	display: block;
	text-align: center;
	color: #fff;
}

#productWrap ul li .info a strong {
	display: block;
	font-size: 25px;
}

#productWrap ul li .info a b ,
#aboutWrap a {
	margin-top: 15px;
	padding: 5px 20px;
	display: inline-block;
	border: 2px #286eab solid;
	border-radius: 30px;
	color: #286eab;
}

#productWrap ul li:hover .info a b {
	background: #286eab;
	color: #fff;
}


/* + newsWrap
*----------------------------------------------------------------------------*/
#newsWrap {
	padding: 40px;
	background: #fff;
}

#newsWrap ul {
	overflow: hidden;
}

#newsWrap ul li {
	margin: 30px 0;
	float: left;
	width: 33%;
}

#newsWrap ul li h3 ,
#newsWrap ul li article {
	overflow: hidden;
	margin-right: 20px;
	height: 24px;
	text-overflow: ellipsis;
	display: -webkit-box;
	-webkit-line-clamp: 1;
	-webkit-box-orient: vertical;
}

#newsWrap ul li h3 a {
	font-size: 18px;
	font-weight: bold;
	color: #525252;
}

#newsWrap ul li article {
	margin-top: 15px;
	height: 50px;
	-webkit-line-clamp: 2;
	color: #848383;
}


/* + aboutWrap
*----------------------------------------------------------------------------*/
#aboutWrap {
	position: relative;
	padding: 70px 0;
	background-size: cover;
	text-align: center;
}

#aboutWrap:before {
	position: absolute;
	width: 100%;
	height: 100%;
	background: rgba(0, 0, 0, 0.5);
	top: 0;
	left: 0;
	content: "";
	z-index: 1;
}

#aboutWrap article {
	position: relative;
	margin: 0 auto 10px;
	width: 45%;
	line-height: 200%;
	font-size: 18px;
	text-align: center;
	color: #fff;
	z-index: 2;
}

#aboutWrap p {
	position: relative;
	margin-top: 30px;
	padding: 30px 20px 0;
	border-top: 1px #fc6 solid;
	display: inline-block;
	z-index: 2;
}

#aboutWrap p a {
	border: 1px #fff solid;
	color: #fff;
}

#aboutWrap p a:hover {
	background: #fff;
	color: #000;
}


/* + contactWrap
*----------------------------------------------------------------------------*/
#contactWrap {
	padding: 50px 0;
	background: #252425;
}

#contactWrap h2 {
	text-align: center;
	font-weight: normal;
	font-family: 'Cormorant Upright', serif;
	font-size: 50px;
	color: #fff;
}

#contactWrap .linkIcon {
	margin: 40px 0;
	width: 24%;
	display: inline-block;
	text-align: center;
	color: #fff;
}

#contactWrap .linkIcon:hover img {
	-webkit-animation: linkIconImg 0.5s both infinite;
	-moz-animation: linkIconImg 0.5s both infinite;
	-ms-animation: linkIconImg 0.5s both infinite;
	-o-animation: linkIconImg 0.5s both infinite;
    animation: linkIconImg 0.5s both infinite;
}

@-webkit-keyframes linkIconImg {
	0% { transform:rotate(5deg); }
	25% { transform:rotate(-5deg); }
	50% { transform:rotate(5deg); }
	75% { transform:rotate(-5deg); }
	100% { transform:rotate(5deg); }
}
@-moz-keyframes linkIconImg {
	0% { transform:rotate(5deg); }
	25% { transform:rotate(-5deg); }
	50% { transform:rotate(5deg); }
	75% { transform:rotate(-5deg); }
	100% { transform:rotate(5deg); }
}
@-ms-keyframes linkIconImg {
	0% { transform:rotate(5deg); }
	25% { transform:rotate(-5deg); }
	50% { transform:rotate(5deg); }
	75% { transform:rotate(-5deg); }
	100% { transform:rotate(5deg); }	
}
@-o-keyframes linkIconImg {
	0% { transform:rotate(5deg); }
	25% { transform:rotate(-5deg); }
	50% { transform:rotate(5deg); }
	75% { transform:rotate(-5deg); }
	100% { transform:rotate(5deg); }
}
@keyframes linkIconImg {
	0% { transform:rotate(5deg); }
	25% { transform:rotate(-5deg); }
	50% { transform:rotate(5deg); }
	75% { transform:rotate(-5deg); }
	100% { transform:rotate(5deg); }
}

#contactWrap .linkIcon a {
	color: #fff;
}

#contactWrap .linkIcon b {
	margin-top: 20px;
	font-size: 18px;
	text-align: center;
	display: block;
	transition: all 0.4s ease;
}

#contactWrap .linkIcon:hover b {
	transform:scale(1.2);
}


/* + contactWrap
*----------------------------------------------------------------------------*/
#adList {
	overflow: hidden;
}

#adList .adBox {
	overflow: hidden;
	float: left;
	width: 25%;
	animation-name: fadeInDown;
	-webkit-animation-name: fadeInDown;
}

#adList .adBox a.photo {
	background-size: cover;
	transition: all 0.4s ease;
}

#adList .adBox:hover a.photo {
	transform: scale(1.1);
}


/************ = 適應性 = ************/
/* +width:1024 ↓
*----------------------------------------------------------------------------*/
@media screen and (max-width: 1024px) {
	#productWrap ul li .info a {
		padding: 35% 0;
	}
	#productWrap ul li .info a strong {
		font-size: 20px;
	}
	#aboutWrap article {
		width: 85%;
	}
	#contactWrap .linkIcon {
		width: 49%;
	}
}

/* +width:768 ↓
*----------------------------------------------------------------------------*/
@media screen and (max-width: 768px) {
	#productWrap ul li ,
	#adList .adBox ,
	#newsWrap ul li {
		width: 50%;
	}
}

/* +width:480 ↓
*----------------------------------------------------------------------------*/
@media screen and (max-width: 480px) {
	#newsWrap ul li ,
	#contactWrap .linkIcon {
		width: 100%;
	}
}

/* +width:450 ↓
*----------------------------------------------------------------------------*/
@media screen and (max-width: 450px) {
	#productWrap ul li ,
	#adList .adBox {
		width: 100%;
	}
}