img {
	width: 100%;
}

body {
	max-width: 700px;
	width: 100%;
	margin: 0 auto;
	background-color: #D8F8FF;
}

.back {
	position: relative;
}

.up1 {
	position: absolute;
	top: 1.5%;
	left: 0;
}

.up2 {
	position: absolute;
	top: 3%;
	left: 0;
}

.up2-1 {
	position: absolute;
	top: 15%;
}

.up2-2 {
	position: absolute;
	top: 38%;
}

.up2-3 {
	position: absolute;
	top: 61%;
}

.up2-4 {
	position: absolute;
	top: 82.5%;
}

.upcta {
	position: absolute;
	top: 1.5%;
	left: 0;
}
.up3 {
	position: absolute;
	top: 15%;
	left: 0;
}
.up4 {
	position: absolute;
	top: 3%;
	left: 0;
}

.up4-1 {
	position: absolute;
	top: 12%;
}

.up4-2 {
	position: absolute;
	top: 31%;
}

.up4-3 {
	position: absolute;
	top: 50%;
}

.up4-4 {
	position: absolute;
	top: 69%;
}

.up6 {
	position: absolute;
	top: 3%;
	left: 0;
}

.up6-1 {
	position: absolute;
	top: 15%;
}

.up6-2 {
	position: absolute;
	top: 36%;
}

.up6-3 {
	position: absolute;
	top: 57%;
}

.up6-4 {
	position: absolute;
	top: 78%;
}

.upcopy {
	position: absolute;
	bottom: 1.5%;
	left: 5%;
}
.upcopy p {
	color: white;
	margin: 0 auto;
}


/* - - - - - - - - - - - - - - - - - - - - - - - - - - - 
　アニメーション関連
- - - - - - - - - - - - - - - - - - - - - - - - - - - */

/*-------------スクロールアニメーションここから---------------*/



/* ------------- スクロールフェードインDown用 ------------- */
.fadeInDown {
 -webkit-animation-fill-mode:both;
 -ms-animation-fill-mode:both;
 animation-fill-mode:both;
 -webkit-animation-duration:1s;
 -ms-animation-duration:1s;
 animation-duration:1s;
 -webkit-animation-name: fadeInDown;
 animation-name: fadeInDown;
 visibility: visible !important;
}

@-webkit-keyframes fadeInDown {
 0% { opacity: 0; -webkit-transform: translateY(50px); }
 100% { opacity: 1; -webkit-transform: translateY(0); }
}

@keyframes fadeInDown {
 0% { opacity: 0; -webkit-transform: translateY(50px); -ms-transform: translateY(50px); transform: translateY(50px); }
 100% { opacity: 1; -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); }
}
/* ------------- スクロールフェードインDown用 END ------------- */

/* ------------- スクロールフェードインUP用 ------------- */
.fadeInUp {
 -webkit-animation-fill-mode:both;
 -ms-animation-fill-mode:both;
 animation-fill-mode:both;
 -webkit-animation-duration:0.5s;
 -ms-animation-duration:0.5s;
 animation-duration:0.5s;
 -webkit-animation-name: fadeInUp;
 animation-name: fadeInUp;
 visibility: visible !important;
}
@-webkit-keyframes fadeInUp {
 0% { opacity: 0; -webkit-transform: translateY(-50px); }
 100% { opacity: 1; -webkit-transform: translateY(0); }
}
@keyframes fadeInUp {
 0% { opacity: 0; -webkit-transform: translateY(-50px); -ms-transform: translateY(-50px); transform: translateY(-50px); }
 100% { opacity: 1; -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); }
}
/* ------------- スクロールフェードインUP用 END ------------- */
/* ------------- スクロールフェードインスライド右→左 ------------- */
.righttoleft {
 -webkit-animation-fill-mode:both;
 -ms-animation-fill-mode:both;
 animation-fill-mode:both;
 -webkit-animation-duration:1s;
 -ms-animation-duration:1s;
 animation-duration:1s;
 -webkit-animation-name: righttoleft;
 animation-name: righttoleft;
 visibility: visible !important;
}
@-webkit-keyframes righttoleft {
 0% { opacity: 0; -webkit-transform: translateX(50px); }
 100% { opacity: 1; -webkit-transform: translateX(0); }
}
@keyframes righttoleft {
 0% { opacity: 0; -webkit-transform: translateX(50px); -ms-transform: translateX(50px); transform: translateX(50px); }
 100% { opacity: 1; -webkit-transform: translateX(0); -ms-transform: translateX(0); transform: translateX(0); }
}
/* ------------- スクロールフェードインスライド右→左2秒バージョン ------------- */
.righttoleft2 {
 -webkit-animation-fill-mode:both;
 -ms-animation-fill-mode:both;
 animation-fill-mode:both;
 -webkit-animation-duration:2s;
 -ms-animation-duration:2s;
 animation-duration:2s;
 -webkit-animation-name: righttoleft2;
 animation-name: righttoleft2;
 visibility: visible !important;
}
@-webkit-keyframes righttoleft2 {
 0% { opacity: 0; -webkit-transform: translateX(50px); }
 100% { opacity: 1; -webkit-transform: translateX(0); }
}
@keyframes righttoleft2 {
 0% { opacity: 0; -webkit-transform: translateX(50px); -ms-transform: translateX(50px); transform: translateX(50px); }
 100% { opacity: 1; -webkit-transform: translateX(0); -ms-transform: translateX(0); transform: translateX(0); }
}
/* ------------- スクロールフェードインスライド右→左3秒バージョン ------------- */
.righttoleft3 {
 -webkit-animation-fill-mode:both;
 -ms-animation-fill-mode:both;
 animation-fill-mode:both;
 -webkit-animation-duration:2.5s;
 -ms-animation-duration:2.5s;
 animation-duration:2.5s;
 -webkit-animation-name: righttoleft3;
 animation-name: righttoleft3;
 visibility: visible !important;
}
@-webkit-keyframes righttoleft3 {
 0% { opacity: 0; -webkit-transform: translateX(50px); }
 100% { opacity: 1; -webkit-transform: translateX(0); }
}
@keyframes righttoleft3 {
 0% { opacity: 0; -webkit-transform: translateX(50px); -ms-transform: translateX(50px); transform: translateX(50px); }
 100% { opacity: 1; -webkit-transform: translateX(0); -ms-transform: translateX(0); transform: translateX(0); }
}
/* ------------- スクロールフェードインスライド右→左 ------------- */

/* ------------- スクロールフェードインスライド右→左 END ------------- */

/* ------------- スクロールフェードインスライド左→右 ------------- */
.lefttoright {
 -webkit-animation-fill-mode:both;
 -ms-animation-fill-mode:both;
 animation-fill-mode:both;
 -webkit-animation-duration:1s;
 -ms-animation-duration:1s;
 animation-duration:1s;
 -webkit-animation-name: lefttoright;
 animation-name: lefttoright;
 visibility: visible !important;
}
@-webkit-keyframes lefttoright {
 0% { opacity: 0; -webkit-transform: translateX(-50px); }
 100% { opacity: 1; -webkit-transform: translateX(0); }
}
@keyframes lefttoright {
 0% { opacity: 0; -webkit-transform: translateX(-50px); -ms-transform: translateX(-50px); transform: translateX(-50px); }
 100% { opacity: 1; -webkit-transform: translateX(0); -ms-transform: translateX(0); transform: translateX(0); }
}
/* ------------- スクロールフェードインスライド左→右 END ------------- */

/* ------------- スクロールフェードインスライド左→右（3秒） ------------- */
.lefttoright3 {
 -webkit-animation-fill-mode:both;
 -ms-animation-fill-mode:both;
 animation-fill-mode:both;
 -webkit-animation-duration:2.5s;
 -ms-animation-duration:2.5s;
 animation-duration:2.5s;
 -webkit-animation-name: lefttoright3;
 animation-name: lefttoright3;
 visibility: visible !important;
}
@-webkit-keyframes lefttoright3 {
 0% { opacity: 0; -webkit-transform: translateX(-50px); }
 100% { opacity: 1; -webkit-transform: translateX(0); }
}
@keyframes lefttoright3 {
 0% { opacity: 0; -webkit-transform: translateX(-50px); -ms-transform: translateX(-50px); transform: translateX(-50px); }
 100% { opacity: 1; -webkit-transform: translateX(0); -ms-transform: translateX(0); transform: translateX(0); }
}
/* ------------- スクロールフェードインスライド左→右 （3秒） END ------------- */




/* ------------- スクロールフェードイン回転時計回り ------------- */
.rotation-r {
 -webkit-animation-fill-mode:both;
 -ms-animation-fill-mode:both;
 animation-fill-mode:both;
 -webkit-animation-duration:1s;
 -ms-animation-duration:1s;
 animation-duration:1s;
 -webkit-animation-name: rotation-r;
 animation-name: rotation-r;
 visibility: visible !important;
}
@-webkit-keyframes rotation-r {
 0% { opacity: 0; -webkit-transform: rotate(0deg); }
 50% { opacity:0.5; -webkit-transform: rotate(-180deg) scale(1.2);}
 100% { opacity: 1; -webkit-transform: rotate(360deg) scale(1); }
}
@keyframes rotation-r {
 0% { opacity: 0; -webkit-transform: rotate(0deg); -ms-transform: rotate(0deg); transform: rotate(0deg); }
 50% { opacity:0.5; -webkit-transform: rotate(-180deg) scale(1.2);}
 100% { opacity: 1; -webkit-transform:rotate(360deg); -ms-transform: rotate(360deg); transform: rotate(360deg) scale(1); }
}
/* ------------- スクロールフェードインスライド左→右 END ------------- */

/*-------------スクロールアニメーションここまで---------------*/

/*------------アニメーションボタンここから------------*/

.animationBtn a{
	/*---デザイン---*/
	display: block;
	width: 90%;
	text-align: center;
	margin-top: 20px;
	margin-right: auto;
	margin-bottom: 0;
	margin-left: auto;
	/*アニメーション*/
	animation: animScale 3s infinite ease-out;
	transform-origin: 50% 50%;
	animation-play-state:running;
}	

@keyframes animScale {
0% { transform: scale(0.8, 0.8); }
5% { transform: scale(1.2, 1.2); }
10% { transform: scale(1, 1); }
15% { transform: scale(1.1, 1.1); }
20% { transform: scale(1, 1); }
100% { transform: scale(1, 1); }
}

/*---ふるふる---*/
.furu{
	/*---デザイン---*/
	display: block;
	width: 100%;
	text-align: center;
	margin-top: 20px;
	margin-right: auto;
	margin-bottom: 0;
	margin-left: auto;
	/*アニメーション*/
	animation: animScale 3s ease-out;
	transform-origin: 50% 50%;
	animation-play-state:running;
	animation-delay: 1s;
}	

@keyframes animScale2 {
0% { transform: scale(0.8, 0.8); }
5% { transform: scale(1.2, 1.2); }
10% { transform: scale(1, 1); }
15% { transform: scale(1.1, 1.1); }
20% { transform: scale(1, 1); }
100% { transform: scale(1, 1); }
}


/* 点滅 */
.blinking{
    -webkit-animation:blink 1.5s ease-in-out infinite alternate;
    -moz-animation:blink 1s ease-in-out infinite alternate;
    animation:blink 1s ease-in-out infinite alternate;
}
@-webkit-keyframes blink{
    0% {opacity:0;}
    100% {opacity:1;}
}
@-moz-keyframes blink{
    0% {opacity:0;}
    100% {opacity:1;}
}
@keyframes blink{
    0% {opacity:0;}
    100% {opacity:1;}
}

/*　Swing */

@-webkit-keyframes swing {
  20% {
    -webkit-transform: rotate3d(0, 0, 1, 15deg);
    transform: rotate3d(0, 0, 1, 15deg);
  }

  40% {
    -webkit-transform: rotate3d(0, 0, 1, -10deg);
    transform: rotate3d(0, 0, 1, -10deg);
  }

  60% {
    -webkit-transform: rotate3d(0, 0, 1, 5deg);
    transform: rotate3d(0, 0, 1, 5deg);
  }

  80% {
    -webkit-transform: rotate3d(0, 0, 1, -5deg);
    transform: rotate3d(0, 0, 1, -5deg);
  }

  to {
    -webkit-transform: rotate3d(0, 0, 1, 0deg);
    transform: rotate3d(0, 0, 1, 0deg);
  }
}

@keyframes swing {
  20% {
    -webkit-transform: rotate3d(0, 0, 1, 15deg);
    transform: rotate3d(0, 0, 1, 15deg);
  }

  40% {
    -webkit-transform: rotate3d(0, 0, 1, -10deg);
    transform: rotate3d(0, 0, 1, -10deg);
  }

  60% {
    -webkit-transform: rotate3d(0, 0, 1, 5deg);
    transform: rotate3d(0, 0, 1, 5deg);
  }

  80% {
    -webkit-transform: rotate3d(0, 0, 1, -5deg);
    transform: rotate3d(0, 0, 1, -5deg);
  }

  to {
    -webkit-transform: rotate3d(0, 0, 1, 0deg);
    transform: rotate3d(0, 0, 1, 0deg);
  }
}

.swing {
  -webkit-transform-origin: top center;
  transform-origin: top center;
  animation: swing linear 2s infinite
}

/*------------アニメーションボタンここまで------------*/