.loading {
	position: fixed;
	width: 100%;
	height: 100%;
	background-color: #F2F2F2;
}
.loading .circle {
	position: relative;
	top: calc(50% - 100px);
	width: 100px;
	height: 100px;
	margin: auto;
	border: 8px solid #4C444D;
	border-top: 7px solid #F06060;
	border-radius: 100px;
	/**
	 * loading：定義名（keyframesで使用）
	 * 700ms：一回にかかる時間
	 * linear：アニメーションの速度（一定の速度で始まって終わる）
	 * 0ms：アニメーションの開始タイミング
	 * infinite：再生回数（無限ループ）
	 * normal：再生方向（初期値：通常方向）
	 * both：再生前後の状態（再生前は@keyframes(0%)、再生後は@keyframes(100%)を適用）
	 */
	animation: loading 1250ms linear 0ms infinite normal both;
}
@keyframes loading {
	/* 右回りの回転を指定 */
	/* アニメーション開始時 */
	0% { transform: rotate( 0deg ); }
	/* アニメーション終了時 */
	100% { transform: rotate( 360deg ); }
}