@charset "utf-8";

/* ----------------------------------------------------------------------- 
 netsuko floor index hero animation
-------------------------------------------------------------------------*/

.page-netsuko.netsuko-floor .hero {
	padding:60px 0 100px;
	background-color: #f6f6f6;
}
.page-netsuko.netsuko-floor .hero .section {
    margin: 0 auto;
	width: 974px;
	height: 480px;
	position: relative;
}
.page-netsuko.netsuko-floor .hero .section .copy {
	position: absolute;
	top: 35px;
	left: 50%;
	transform: translateX(-50%);
	z-index: 90;
}
.page-netsuko.netsuko-floor .hero .section .airyell {
	position: absolute;
	bottom: 20px;
	right: 20px;
	z-index: 90;
	transition-property: all;
	transition-timing-function: ease-out;
}
.page-netsuko.netsuko-floor .hero .section .product {
	position: absolute;
	bottom: -70px;
	left: 50%;
	transform: translateX(-50%);
	z-index: 95;
	width:146px;
}
.page-netsuko.netsuko-floor .hero .section .product img {
	width:100%;
}
.page-netsuko.netsuko-floor .hero .section .product_shadow {
	position: absolute;
	bottom: -70px;
	left: 50%;
	transform: translateX(-28%);
	z-index: 90;
}
.page-netsuko.netsuko-floor .hero .section .keyvisual {
	position: absolute;
    bottom: 0;
    left: 0;
    width: 974px;
    height: 480px;
    overflow: hidden;
}
.page-netsuko.netsuko-floor .hero .section .keyvisual .image {
	position: absolute;
	width: 974px;
	height: 480px;
	transition-property: all;
	transition-timing-function: linear;
	animation-fill-mode:forwards;
}
.page-netsuko.netsuko-floor .hero .section .kv01 .image {
	background: url('/hvac-cc/biz/products/fan/netsuko/floor/img/index/keyvisual/photo_a.jpg') no-repeat;
	background-size: cover;
}
.page-netsuko.netsuko-floor .hero .section .kv02 .image {
	background: url('/hvac-cc/biz/products/fan/netsuko/floor/img/index/keyvisual/photo_b.jpg') no-repeat;
	background-size: cover;
}
.page-netsuko.netsuko-floor .hero .section .kv03 .image {
	background: url('/hvac-cc/biz/products/fan/netsuko/floor/img/index/keyvisual/photo_c.jpg') no-repeat;
	background-size: cover;
}

@keyframes kv_in {
	0%{
		opacity: 0;
		transform: scale(1,1);
	}
	20% {
		opacity: 1;
	}
	100% {
		transform: scale(1.05,1.05);
	}
}
@keyframes kv_out {
	100% {
		opacity: 0;
		transform: scale(1,1);
	}
}

/* SP Responsive (netsuko floor index hero animation)
---------------------------------------------------------------*/
@media only screen and (max-device-width: 1280px) and (max-width: 640px) {
	.page-netsuko.netsuko-floor .hero {
		padding:22px 18px 45px;
	}
	.page-netsuko.netsuko-floor .hero .section {
		margin: 0 auto;
		width: 100%;
		height: 280px;
		position: relative;
	}
	.page-netsuko.netsuko-floor .hero .section .copy {
		position: absolute;
		top: 1.2em;
		width: 95%;
	}
	.page-netsuko.netsuko-floor .hero .section .airyell {
		bottom: 8px;
		right: 6px;
		width: 15%;
	}
	.page-netsuko.netsuko-floor .hero .section .product {
		position: absolute;
		bottom: -2em;
		left: 50%;
		transform: translateX(-50%);
		z-index: 125;
		width: 20%;
		max-width: 64px;
	}
	.page-netsuko.netsuko-floor .hero .section .product_shadow {
		position: absolute;
		bottom: -2em;
		transform: translateX(-28%);
		width: 33%;
		max-width: 96px;
	}
	.page-netsuko.netsuko-floor .hero .section .keyvisual {
		position: absolute;
		bottom: 0;
		left: 0;
		width: 100%;
		height: 280px;
		overflow: hidden;
		background-size: cover;
	}
	.page-netsuko.netsuko-floor .hero .section .keyvisual .image{
		width: 100%;
		height: 100%;
	}
	.page-netsuko.netsuko-floor .hero .section .kv01 .image{
		background: url('/hvac-cc/biz/products/fan/netsuko/floor/img/index/keyvisual/photo_a_sp.jpg') no-repeat;
		background-size: cover;
	}
	.page-netsuko.netsuko-floor .hero .section .kv02 .image {
		background: url('/hvac-cc/biz/products/fan/netsuko/floor/img/index/keyvisual/photo_b_sp.jpg') no-repeat;
		background-size: cover;
	}
	.page-netsuko.netsuko-floor .hero .section .kv03 .image {
		background: url('/hvac-cc/biz/products/fan/netsuko/floor/img/index/keyvisual/photo_c_sp.jpg') no-repeat;
		background-size: cover;
	}
}

@media only screen and  (max-width: 480px) {
	.page-netsuko.netsuko-floor .hero .section {
		height: 235px;
	}
	.page-netsuko.netsuko-floor .hero .section .keyvisual {
		height: 235px;
	}
}