@charset "utf-8";

/*	┏━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┓
	┃　
	┃　■ 初版 1.0.0
	┃　
	┗━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┛*/

/* CSS Document */

/*	┏━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┓
	┃　
	┃　■ 浮遊感
	┃　
	┗━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┛*/

/*	┌──────────────────────────────────────────────────────────┐
	│　
	│　□ ふわふわ1
	│　
	└──────────────────────────────────────────────────────────┘*/

.anime-floatObject-01 {
  animation: float_1 3s linear infinite;
  transform-origin: 50% 50%;
}
 
@keyframes float_1 {
  0% { transform: translateY(0) }
  33.33333% { transform: translateY(-6px) }
  66.66667% { transform: translateY(-3px) }
  100% { transform: translateY(0) }
}

/*	┌──────────────────────────────────────────────────────────┐
	│　
	│　□ ふわふわ2
	│　
	└──────────────────────────────────────────────────────────┘*/

.anime-floatObject-02 {
  animation: float_2 4s linear infinite;
  transform-origin: 50% 50%;
}
 
@keyframes float_2 {
  0% { transform: translateY(0) }
  33.33333% { transform: translateY(-12px) }
  66.66667% { transform: translateY(-6px) }
  100% { transform: translateY(0) }
}

/*	┏━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┓
	┃　
	┃　■ 画像が徐々に、小さくなる js不要CSSのみ
	┃　
	┗━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┛*/

.anime-zoomOut-01 {
	animation-name: anime_zoomOut_01;
	animation-duration: 5s;
	animation-delay: 0s;
	animation-iteration-count: 1;
		-webkit-animation: anime_zoomOut_01 5s 0s 1;
	}

@keyframes anime_zoomOut_01 {
  0% {
		/* opacity: 0; */
        transform: scale(1.1) ;
    }
    8% {
		/* opacity: 1; */
    }
    17% {
		/* opacity: 1; */
    }
    25% {
		/* opacity: 0; */
        /* z-index:9; */
    }
    100% {
		/* opacity: 0 */
        transform: scale(1.0) ;
		}
}
/*	┏━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┓
	┃　
	┃　■ バックグラウンド画像をアニメーション！
	┃
	┃　 Javascript不要で、CSSのみ
	┃　ディゾルブで切り替わり
	┃
	┃　参考URL
	┃　https://renoji.com/IT.php?Contents=Program_CSS/Ref_BackgroundImage_Slide.html
	┃　
	┗━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┛*/

.anime-Bg-01{
	background-color: #E6E3DA;
	background-image:url("/assets/images/animation02/bg1.png");
	background-position: left 35%;
	background-size: cover;
	background-repeat: no-repeat; /* */
	/* background-attachment: fixed; */

	animation: anime-Bg-01-kf 15s ease 0s infinite normal;
	-webkit-animation: anime-Bg-01-kf 15s ease 0s infinite normal;
	
	/* box-shadow:0px 3px 6px 6px rgba(0, 0, 0, 0.2); ボックスシャドウ*/
	padding:3rem 0;
	margin-bottom:5rem;
}
.anime-Bg-01 section {margin-bottom:0;}

@keyframes anime-Bg-01-kf {
0% {
	background-image: url('/assets/images/animation02/bg1.png');
	opacity: 1;
	}
25% {
	background-image: url('/assets/images/animation02/bg2.png');
	opacity: 1;
	}
50% {
	background-image: url('/assets/images/animation02/bg3.png');
	opacity: 1;
	}
75% {
	background-image: url('/assets/images/animation02/bg4.png');
	opacity: 1;
	}
100% {

	}
}