@charset "utf-8";
@import url(reset.css);
@import url(base.css);
@import url(common.css);

/** common **/

.catalog{
	text-align: center;
	background: #006e9f;
	padding: 50px 0;
}
.catalog a{
	position: relative;
	color: #fff !important;
	font-size: 16px;
	line-height: 1em;
	border: 1px solid #fff;
	padding: 20px 100px;
}
.catalog a:after{
	position: absolute;
	top: 50%;
	right: 60px;
	transform: translateY(-50%);
	content: "";
	width: 8px;
	height: 16px;
	background-image: url(../image/products/common/arrow.png);
	background-size: contain;
	background-repeat: no-repeat;
	background-position: top left;
	transition: 0.2s;
}
.catalog a:hover:after{
	right: 55px;
}
.sps .catalog a{
	position: relative;
	color: #006e9f !important;
	font-size: 16px;
	line-height: 1em;
	background: #fff;
	padding: 20px 100px;
}
.sps .catalog a:after{
	background-image: url(../image/products/common/arrow_movie.png);
}

/** bg **/
.container.catcher,
.container.sps,
.container.pallet,
.container.catcherpallet,
.container.hungerpallet{
	width: 100%;
	min-height: 100vh;
	background-image: url(../image/products/catcher/bg.jpg);
	background-size: auto 100%;
	background-position: center center;
	background-attachment: fixed;
	background-repeat: no-repeat;
	padding-top: 0;
}
.container.sps{
	background-image: url(../image/products/sps/bg.jpg);
}
.container.pallet{
	background-image: url(../image/products/pallet/bg.jpg);
}
.container.catcherpallet{
	background-image: url(../image/products/catcherpallet/bg.jpg);
}
.container.hungerpallet{
	background-image: url(../image/products/hungerpallet/bg.jpg);
}

/** main_img **/
.catcher .main_img,
.sps .main_img,
.pallet .main_img,
.catcherpallet .main_img,
.hungerpallet .main_img{
	position: relative;
	background-image: url(../image/products/catcher/main_img.png);
	background-size: contain;
	background-position: top left;
	background-repeat: no-repeat;
	padding-top: 54.9887%;
}
.sps .main_img{
	background-image: url(../image/products/sps/main_img.png);
	padding-top: 54.6887%;
}
.pallet .main_img{
	background-image: url(../image/products/pallet/main_img.png);
	padding-top: 54.9987%;
}
.catcherpallet .main_img{
	background-image: url(../image/products/catcherpallet/main_img.png);
	padding-top: 54.9987%;
}
.hungerpallet .main_img{
	background-image: url(../image/products/hungerpallet/main_img.png);
	padding-top: 54.6887%;
}
.main_img .scroll{
	position: absolute;
	left: 50%;
	bottom: 20px;
	transform: translateY(-50%);
	z-index: 4;
	animation: topdown 2s ease infinite;
}
@keyframes topdown {
  0% { transform:translateY(0) }
  5% { transform:translateY(0) }
  10% { transform:translateY(0) }
  50% { transform:translateY(-8px) }
  100% { transform:translateY(0) }
}

/**  catcher bgspace **/
.catcher .bgspace,
.sps .bgspace,
.pallet .bgspace,
.hungerpallet .bgspace{
	width: 100%;
	height: 80vh;
}
.catcherpallet .bgspace{
	width: 100%;
	height: 30vh;
}


/*===============================================
  画面の横幅が1024px以下に適用(iPadPro以下)
===============================================*/
@media screen and (max-width: 1024px){

	/** container **/
	.container.catcher,
	.container.sps,
	.container.pallet,
	.container.catcherpallet,
	.container.hungerpallet{
		background: none;
		min-height: auto;
		padding-top: 75px;
	}

	/** main_img **/
	.catcher .main_img,
	.sps .main_img,
	.pallet .main_img,
	.catcherpallet .main_img,
	.hungerpallet .main_img{
		background-color: #000;
	}
	.catcher .main_img .scroll,
	.sps .main_img .scroll,
	.pallet .main_img .scroll,
	.catcherpallet .main_img .scroll,
	.hungerpallet .main_img .scroll{
		display: none;
	}
	/** bgspace **/
	.catcher .bgspace,
	.sps .bgspace,
	.pallet .bgspace,
	.catcherpallet .bgspace,
	.hungerpallet .bgspace{
		background-image: url(../image/products/catcher/bg.jpg);
		background-size: contain;
		background-repeat: no-repeat;
		height: auto;
		padding-top: 48.312%;
	}
	.sps .bgspace{
		background-image: url(../image/products/sps/bg.jpg);
		padding-top: 48.575%;
	}
	.pallet .bgspace{
		background-image: url(../image/products/pallet/bg.jpg);
		padding-top: 48.7997%;
	}
	.catcherpallet .bgspace{
		background-image: url(../image/products/catcherpallet/bg.jpg);
		padding-top: 48.7997%;
	}
	.hungerpallet .bgspace{
		background-image: url(../image/products/hungerpallet/bg.jpg);
		padding-top: 48.763%;
	}

}

/*===============================================
  画面の横幅が768px以下に適用(iPad以下)
===============================================*/
@media screen and (max-width: 768px){

}

/*===============================================
  画面の横幅が640px以下に適用(スマホ)
===============================================*/
@media screen and (max-width: 640px){

	.catalog{
		padding: 30px 0;
	}
	.catalog a{
		display: block;
		width: 92%;
		margin: 0 auto;
		padding: 20px 0;
	}
	.catalog a:after{
		right: 30px;
	}

}

/*===============================================
  画面の横幅が320px以下に適用(iphone5以下)
===============================================*/
@media screen and (max-width: 320px){

}