@charset "utf-8";



/*############################################################################*/
/*

各ページ向けエレメント設定

●ローカルからwpには
../img/　→　common/img/

*/
/*############################################################################*/


/*
=============================================

共通向け

=============================================
*/



/*
ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー

PC向け

ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー
*/
@media all and (min-width: 1000px) {

/*========================================*/
/* top */
/*========================================*/

.fv {
margin-bottom: 100px;
}

.fv .product_photo {
	position: absolute;
	top: -20px;
	right: 14%;
	width:380px;
	z-index:1;
}

.fv h1 {
	position: absolute;
	left: 50%;
	top: 250px;
	z-index: 1;
	display: block;
	overflow: hidden;
	margin-left: -450px;
	padding-top: 90px;
	height: 0 !important;
	line-height: 250%;
	width: 500px;
	background: url(../img/product/washer/top_product_title.svg) center center no-repeat;
	background-size: auto 80px;
}

.fv h2 {
	position: absolute;
	left: 50%;
	top: 350px;
	z-index: 1;
	margin-left: -430px;
	display: block;
	width: 500px;
}

.fv_start h1,.fv_start h2 {
	opacity: 0;
	animation: fv_h_start_anime 1s forwards .8s;
}

@keyframes fv_h_start_anime {
0% { transform: translate(0px, -40px); opacity: 0; }
100% { transform: translate(0px, 0px); opacity: 1; }
}

.fv_start img {
	opacity: 0;
	animation: fv_start_anime 1s forwards 1s;
}

@keyframes fv_start_anime {
0% { transform: translate(-40px, 0px); opacity: 0; }
100% { transform: translate(0px, 0px); opacity: 1; }
}


/*説明*/

.bgcolor_blue_color{
	background-color: #0052a4;
	padding:60px 0px 0px 0px;
	margin-bottom: 8em;
	color:#ffffff;
}

.bgcolor_blue_color .column{
padding-bottom: 0;
}

.bgcolor_blue_color .info_text{
margin:0px 0px 0px 200px;
	width:400px;
	text-align: center;
}


.bgcolor_blue_color h3 {
	display: block;
	overflow: hidden;
	margin: 0 auto;
padding:120px 0px 0px 0px;
	height: 0 !important;
	line-height: 250%;
	width: 400px;
	background: url(../img/product/washer/top_image_text_1.svg) center center no-repeat;
	background-size: 100%;
}


}/*PC向け　ここまで*/








/*
ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー

タブレット向けの調整

ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー
*/
@media all and (min-width: 640px) and (max-width: 1000px) {

/*========================================*/
/* top */
/*========================================*/

.fv {
margin-bottom: 100px;
}

.fv .product_photo {
	position: absolute;
	top: 60px;
	right: 20px;
	width:340px;
	z-index:1;
}

.fv h1 {
	position: absolute;
	left: 20px;
	top: 250px;
	z-index: 1;
	display: block;
	overflow: hidden;
	margin-left: 0px;
	padding-top: 90px;
	height: 0 !important;
	line-height: 250%;
	width: 500px;
	background: url(../img/product/washer/top_product_title.svg) center center no-repeat;
	background-size: auto 80px;
}

.fv h2 {
	position: absolute;
	left: 30px;
	top: 350px;
	z-index: 1;
	display: block;
	width: 500px;
}

.fv_start h1,.fv_start h2 {
	opacity: 0;
	animation: fv_h_start_anime 1s forwards .8s;
}

@keyframes fv_h_start_anime {
0% { transform: translate(0px, -40px); opacity: 0; }
100% { transform: translate(0px, 0px); opacity: 1; }
}

.fv_start img {
	opacity: 0;
	animation: fv_start_anime 1s forwards 1s;
}

@keyframes fv_start_anime {
0% { transform: translate(-40px, 0px); opacity: 0; }
100% { transform: translate(0px, 0px); opacity: 1; }
}


/*説明*/

.bgcolor_blue_color{
	background-color: #0052a4;
	padding:60px 0px 0px 0px;
	margin-bottom: 8em;
	color:#ffffff;
	overflow: hidden;
}

.bgcolor_blue_color .use_image{
margin:0px 0px 0px -30%;
padding:0px 0px 0px 0px;
width:150%;
}

.bgcolor_blue_color .column{
padding-bottom: 0;
}

.bgcolor_blue_color .info_text{
margin:0px 0px 0px 40px;
	width:400px;
	text-align: center;
}


.bgcolor_blue_color h3 {
	display: block;
	overflow: hidden;
	margin: 0 auto;
padding:120px 0px 0px 0px;
	height: 0 !important;
	line-height: 250%;
	width: 400px;
	background: url(../img/product/washer/top_image_text_1.svg) center center no-repeat;
	background-size: 100%;
}



}/*タブレット向け　ここまで*/





/*
ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー

スマホ向け

ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー
*/
@media all and (max-width: 640px) {



.fv {
margin-bottom: 100px;
}

.fv .product_photo {
	position: absolute;
	top: 60px;
	right: 0px;
	width:240px;
}

.fv h1 {
	position: absolute;
	left: 10px;
	top: 20px;
	z-index: 1;
	display: block;
	overflow: hidden;
	margin-left: 0px;
	padding-top: 30px;
	height: 0 !important;
	line-height: 250%;
	width: 300px;
	background: url(../img/product/washer/top_product_title.svg) center center no-repeat;
	background-size: 100%;
}

.fv h2 {
	position: absolute;
	left: 10px;
	top: 70px;
	z-index: 1;
	display: block;
	width: 220px;
	font-size: 120%;
	font-weight: bold;
}

.fv_start h1,.fv_start h2 {
	opacity: 0;
	animation: fv_h_start_anime 1s forwards .8s;
}

@keyframes fv_h_start_anime {
0% { transform: translate(0px, -40px); opacity: 0; }
100% { transform: translate(0px, 0px); opacity: 1; }
}

.fv_start img {
	opacity: 0;
	animation: fv_start_anime 1s forwards 1s;
}

@keyframes fv_start_anime {
0% { transform: translate(-40px, 0px); opacity: 0; }
100% { transform: translate(0px, 0px); opacity: 1; }
}


/*説明*/

.bgcolor_blue_color{
	background-color: #0052a4;
	padding:60px 0px 0px 0px;
	margin-bottom: 8em;
	color:#ffffff;
	overflow: hidden;
}

.bgcolor_blue_color .use_image{
margin:0px 0px 0px -30%;
padding:0px 0px 0px 0px;
width:150%;
}

.bgcolor_blue_color .column{
padding-bottom: 0;
}

.bgcolor_blue_color .info_text{
margin:0px auto 0px auto;
	width:300px;
	text-align: center;
}


.bgcolor_blue_color h3 {
	display: block;
	overflow: hidden;
	margin: 0 auto;
padding:80px 0px 0px 0px;
	height: 0 !important;
	line-height: 250%;
	width: 300px;
	background: url(../img/product/washer/top_image_text_1.svg) center center no-repeat;
	background-size: 100%;
}


}/*スマホ向け　ここまで*/