@charset "UTF-8";

/*top_catcjh設定
---------------------------------------------------------------------------*/

/*1枚目*/
@keyframes catch1 {
	0% { opacity: 0}
    8% { opacity: 0}
	11% { opacity: 100}
	28% { opacity: 100}
    31% { opacity: 0}
    100% { opacity: 0}
}

.box_catch_1{
	position: absolute;
    width: 12%; left: 14%; top: 15%;
    -webkit-animation-duration: 24s;	/*実行する時間。「s」は秒の事。*/
	animation-duration: 24s;			/*同上*/
	-webkit-animation-iteration-count:infinite;	/*実行する回数。「infinite」は無限に繰り返す意味。*/
	animation-iteration-count:infinite;			/*同上*/
	-webkit-animation-fill-mode: both;
	animation-fill-mode: both;
    -webkit-animation-name: catch1;		/*上で設定しているキーフレーム（keyframes）の名前*/
	animation-name: catch1;
    z-index: 2;
}
.box_catch_1 img{
    width: 100%;
    height: 100%;
}
/*2枚目*/
@keyframes catch2 {
	0% { opacity: 0}
    46% { opacity: 0}
	49% { opacity: 100}
	63% { opacity: 100}
    66% { opacity: 0}
    100% { opacity: 0}
}

.box_catch_2{
	position: absolute;
    width: 5%; left: 14%; top: 10%;
    -webkit-animation-duration: 24s;	/*実行する時間。「s」は秒の事。*/
	animation-duration: 24s;			/*同上*/
	-webkit-animation-iteration-count:infinite;	/*実行する回数。「infinite」は無限に繰り返す意味。*/
	animation-iteration-count:infinite;			/*同上*/
	-webkit-animation-fill-mode: both;
	animation-fill-mode: both;
    -webkit-animation-name: catch2;		/*上で設定しているキーフレーム（keyframes）の名前*/
	animation-name: catch2;
    z-index: 2;
}
.box_catch_2 img{
    width: 100%;
    height: 100%;
}

/*3枚目*/
@keyframes catch3 {
	0% { opacity: 0}
    73% { opacity: 0}
	76% { opacity: 100}
	89% { opacity: 100}
    92% { opacity: 0}
    100% { opacity: 0}
}

.box_catch_3{
	position: absolute;
    width: 5%; left: 12%; top: 10%;
    -webkit-animation-duration: 24s;	/*実行する時間。「s」は秒の事。*/
	animation-duration: 24s;			/*同上*/
	-webkit-animation-iteration-count:infinite;	/*実行する回数。「infinite」は無限に繰り返す意味。*/
	animation-iteration-count:infinite;			/*同上*/
	-webkit-animation-fill-mode: both;
	animation-fill-mode: both;
    -webkit-animation-name: catch3;		/*上で設定しているキーフレーム（keyframes）の名前*/
	animation-name: catch3;
    z-index: 2;
}
.box_catch_3 img{
    width: 100%;
    height: 100%;
}


@media screen and (max-width:480px){
 
.box_catch_1{
	position: absolute;
    width: 80%; left: 10%; top: 5%;
    -webkit-animation-duration: 24s;	/*実行する時間。「s」は秒の事。*/
	animation-duration: 24s;			/*同上*/
	-webkit-animation-iteration-count:infinite;	/*実行する回数。「infinite」は無限に繰り返す意味。*/
	animation-iteration-count:infinite;			/*同上*/
	-webkit-animation-fill-mode: both;
	animation-fill-mode: both;
    -webkit-animation-name: catch1;		/*上で設定しているキーフレーム（keyframes）の名前*/
	animation-name: catch1;
    z-index: 2;
}
.box_catch_1 img{
    width: 100%;
    height: 100%;
}
/*2枚目*/

.box_catch_2{
	position: absolute;
    width: 85%; left: 7%; top: 5%;
    -webkit-animation-duration: 24s;	/*実行する時間。「s」は秒の事。*/
	animation-duration: 24s;			/*同上*/
	-webkit-animation-iteration-count:infinite;	/*実行する回数。「infinite」は無限に繰り返す意味。*/
	animation-iteration-count:infinite;			/*同上*/
	-webkit-animation-fill-mode: both;
	animation-fill-mode: both;
    -webkit-animation-name: catch2;		/*上で設定しているキーフレーム（keyframes）の名前*/
	animation-name: catch2;
    z-index: 2;
}
.box_catch_2 img{
    width: 100%;
    height: 100%;
}

/*3枚目*/

.box_catch_3{
	position: absolute;
    width: 85%; left: 7%; top: 5%;
    -webkit-animation-duration: 24s;	/*実行する時間。「s」は秒の事。*/
	animation-duration: 24s;			/*同上*/
	-webkit-animation-iteration-count:infinite;	/*実行する回数。「infinite」は無限に繰り返す意味。*/
	animation-iteration-count:infinite;			/*同上*/
	-webkit-animation-fill-mode: both;
	animation-fill-mode: both;
    -webkit-animation-name: catch3;		/*上で設定しているキーフレーム（keyframes）の名前*/
	animation-name: catch3;
    z-index: 2;
}
.box_catch_3 img{
    width: 100%;
    height: 100%;
}
}