@charset "utf-8";



/*ロゴアニメーション。全体で100コマあるアニメーションだと思って設定して下さい。
---------------------------------------------------------------------------*/

@keyframes logo {


/*0コマ目(最初)のキーフレーム*/

0% {

	left: -3%;
	/*headerブロックに対して左から-3%の場所に配置*/

	bottom: 200px;
	/*headerブロックに対して下から200pxの場所に配置*/

	animation-timing-function: ease-in;
	/*ゆっくり動き出して、加速する設定*/

	transform: rotate(40deg);
	/*回転する角度*/
}
/*80コマ目のキーフレーム*/

70% {

	bottom: -20px;
	/*headerブロックに対して下から-20pxの場所に配置*/

}

/*90コマ目のキーフレーム*/

80% {
	bottom: -40px;
	/*headerブロックに対して下から-40pxの場所に配置*/

}

/*100コマ目(最後)のキーフレーム*/

90% {

	bottom: -30px;
	/*headerブロックに対して下から-30pxの場所に配置*/

}

100% {

	bottom: -55px;
	/*headerブロックに対して下から-40pxの場所に配置*/

	transform: rotate(-20deg);
	/*回転する角度*/

}


}


/*トップページのロゴ画像追加設定（※style.cssにも設定があります）
---------------------------------------------------------------------------*/

#top #logo {

	position: absolute;

	left: -3%;
	/*ヘッダーブロックに対して左から-3%の場所に配置*/

	animation-name: logo;
	/*上のアニメーションで指定しているkeyframesの名前（logo）*/

	animation-duration: 1.4S;
	/*アニメーションの実行時間*/

	animation-fill-mode: forwards;
	/*アニメーションの完了後、最後のキーフレームを維持する*/

	width: 25%;
	/*ロゴ画像の幅*/

	transform: rotate(-20deg);
	/*回転する角度*/
}



/*画面幅1200px以上の設定
------------------------------------------------------------------------------------------------------------------------------------------------------*/

@media screen and (min-width:1200px){


#top #logo {

	width: 20%;
	/*ロゴ画像の幅*/

}


}




/*画面幅600px以下の設定
------------------------------------------------------------------------------------------------------------------------------------------------------*/

@media screen and (max-width:600px){


#top #logo {

	width: 30%;
	/*ロゴ画像の幅*/

}


}



/*画面幅380px以下の設定
------------------------------------------------------------------------------------------------------------------------------------------------------*/

@media screen and (max-width:380px){


#top #logo {

	width: 40%;
	/*ロゴ画像の幅*/

}


}