@charset "UTF-8";

body {
	-webkit-text-size-adjust: 100%;
	position: relative;
	text-align: center;
}


p, li, dt, dd, select, input, textarea {
    font-family: 'ヒラギノ角ゴ Pro W3','Hiragino Kaku Gothic Pro','メイリオ',Meiryo,'ＭＳ Ｐゴシック','MS P Gothic','sans-serif';
	line-height: 1.6;
}
th, td {
    font-family: 'ヒラギノ角ゴ Pro W3','Hiragino Kaku Gothic Pro','メイリオ',Meiryo,'ＭＳ Ｐゴシック','MS P Gothic','sans-serif';
	line-height: 1.6;
}


/*Sample1 index.html*/
.hoko1 {
	position: absolute;
	top: 200px;
	right: 200px;
	width: 150px;
	height: 170px;
}

.float1 {
  animation-name: float_1; /*キーフレームの指定*/
  animation-duration: 5s; /*アニメーション一回分の時間の長さ*/
  animation-timing-function: linear; /*どのようなアニメーションするか*/
  animation-iteration-count: infinite; /*繰り返す回数*/
  transform-origin: 50% 50%; /*変形する要素の中心点*/
}
@keyframes float_1 {
  0% { transform: translateY(0) }
  50% { transform: translateY(-20px) } /*上下の動き*/
  100% { transform: translateY(0) }
}



/*Sample2 index2.html*/
.hoko2 {
	position: absolute;
	top: 200px;
	right: 50px;
	width: 150px;
	height: 170px;
}

.float2{
  animation-name: float_2; /*キーフレームの指定*/
  animation-direction: alternate; /*反転再生*/
  animation-duration: 8s; /*アニメーション一回分の時間の長さ*/
  animation-timing-function: linear; /*どのようなアニメーションするか*/
  animation-iteration-count: infinite; /*繰り返す回数*/
  transform-origin: 50% 50%; /*変形する要素の中心点*/
}
@keyframes float_2 {
  0% { transform: translateY(0) }
  50% { transform: translateY(-20px) } /*上下の動き*/
  100% { transform: translateY(0) }
}

.side2 {
    animation-name: side_2; /*キーフレームの指定*/
    animation-duration: 50s; /*アニメーション一回分の時間の長さ*/
    animation-iteration-count: infinite; /*繰り返す回数*/
}
@keyframes side_2 {
    0% { transform: translate(0px, 0); }
    50% { transform: translate(-300px, 0); } /*左右の動き*/
    100% { transform: translate(0, 0); }
}



/*Sample3 index3.html*/
.hoko3 {
	position: absolute;
	top: 200px;
	right: 50px;
	width: 150px;
	height: 170px;
}

.float3{
  animation-name: float_2;/*キーフレームの指定*/
  animation-duration: 4s; /*アニメーション一回分の時間の長さ*/
  animation-timing-function: linear; /*どのようなアニメーションするか*/
  animation-iteration-count: infinite; /*繰り返す回数*/
  transform-origin: 50% 50%; /*変形する要素の中心点*/
}
@keyframes float_3 {
  0% { transform: translateY(0) }
  50% { transform: translateY(-20px) } /*上下の動き*/
  100% { transform: translateY(0) }
}

.side3 {
  animation-name: side_3; /*キーフレームの指定*/
  animation-direction: alternate; /*反転再生*/
  animation-duration: 10s; /*アニメーション一回分の時間の長さ*/
  animation-timing-function: linear; /*どのようなアニメーションするか*/
  animation-iteration-count: 1; /*繰り返す回数*/
  animation-fill-mode: forwards;　/*アニメーション実行前・実行後の状態*/
}
@keyframes side_3 {
    0% { transform: translate(0px, 0); }
    60% { transform: translate(-300px, 0) ; } /*左右の動き*/
    100% { transform:translate(-300px, 0) scale(1.2); } /*左右の動き+拡大縮小*/
}



@media screen and (max-width: 768px){
	.hoko3 {
    position: absolute;
    top: 135px;
    right: -25%;
    width: 90px;
    height: auto;
}

.hoko3 {
	position: absolute;
	top: 140px;
	right: 25px;
	width: 120px;
	height: 130px;
}
.side3 {
  animation-name: side_4; /*キーフレームの指定*/
  animation-direction: alternate; /*反転再生*/
  animation-duration: 10s; /*アニメーション一回分の時間の長さ*/
  animation-timing-function: linear; /*どのようなアニメーションするか*/
  animation-iteration-count: 1; /*繰り返す回数*/
  animation-fill-mode: forwards;　/*アニメーション実行前・実行後の状態*/
}


}