@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: -40px;	/*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%;	/*ロゴ画像の幅*/
}

}