@charset "UTF-8";
/* ===================================================================
responsive design style CSS
=================================================================== */
/*
Author: hiroshige keita
*/
/* -------------------------------------------------------------------
[-- MENU :: Responsive Size Table --]

common devices
全てのデバイスで同じ共通の設定

Large devices
デスクトップ用、1200px以上
@media only screen and (min-width: 1200px)

Medium devices
デスクトップ用、992px以上 1200px未満
@media (min-width: 992px) and (max-width: 1200px)

4.Small devices
タブレット用、768px以上 992px未満
@media (min-width: 992px) and (max-width: 1200px)

5.Extra small devices
スマホ用、768px未満
@media only screen and (max-width: 768px)

5.Retina Display
------------------------------------------------------------------- */

/* ===================================================================
common devices
全てのデバイスで同じ共通の設定
=================================================================== */
.Container{
	min-width: 320px;
	width: 100%;
	margin:0 auto;
	padding:0;
	}
	.Container:before{
		content:"";
		display:block;
		}
.Header{
	width: 100%;
	}
.Footer{
	width: 100%;
}

/* ===================================================================
Large devices
デスクトップ用、1200px以上
@media only screen and (min-width: 1200px)
=================================================================== */
@media only screen and (min-width: 1200px) {
/*---- ヘッダー ----*/
.Header .Header_Inner{
	width: 960px;
	margin: 0 auto;
	position: relative;
}
/*---- コンテンツエリア ----*/
.Contents{
	width: 960px;
	margin: 0 auto;
	}
	.Contents:after {
		clear: both;
		content: " ";
		display: block;
	}
	/*メイン 左カラム*/
	.Contents .Main_Column_L{
		float: left;
		width: 620px;
		margin: 0 40px 0 0;
		}
	.Contents .Side_Column_L{
		float: right;
		width: 300px;
		}
	/*メイン 右カラム*/
	.Contents .Main_Column_R{
		float: right;
		width: 620px;
		}
	.Contents .Side_Column_R{
		float: left;
		width: 300px;
		margin: 0 40px 0 0;
		}
	/*メインのみ*/
	.Contents .Main_Column{
		width: 960px;
	}
/*---- フッター ----*/
.Footer .Footer_Inner{
	width: 960px;
	margin: 0 auto;
	position: relative;
}




}
/* ===================================================================
Medium devices
デスクトップ用、992px以上 1200px未満
@media (min-width: 992px) and (max-width: 1200px)
=================================================================== */
@media (min-width: 992px) and (max-width: 1200px) {
/*---- ヘッダー ----*/
.Header .Header_Inner{
	width: 960px;
	margin: 0 auto;
	position: relative;
}
/*---- コンテンツエリア ----*/
.Contents{
	width: 960px;
	margin: 0 auto;
	}
	.Contents:after {
		clear: both;
		content: " ";
		display: block;
	}
	/*メイン 左カラム*/
	.Contents .Main_Column_L{
		float: left;
		width: 620px;
		margin: 0 40px 0 0;
		}
	.Contents .Side_Column_L{
		float: right;
		width: 300px;
		background: #694;
		}
	/*メイン 右カラム*/
	.Contents .Main_Column_R{
		float: right;
		width: 620px;
		}
	.Contents .Side_Column_R{
		float: left;
		width: 300px;
		margin: 0 40px 0 0;
		}
	/*メインのみ*/
	.Contents .Main_Column{
		width: 960px;
	}
/*---- フッター ----*/
.Footer .Footer_Inner{
	width: 960px;
	margin: 0 auto;
	position: relative;
}




}
/* ===================================================================
1.Tablet_L
@media (min-width: 768px) and (max-width: 979px)
=================================================================== */
@media (min-width: 768px) and (max-width: 979px) {
	/*メインのみ*/
	.Contents .Main_Column{
		width: 960px;
	}





}
/* ===================================================================
2.Tablet_S
@media (min-width: 481px) and (max-width: 767px)
=================================================================== */
@media (min-width: 481px) and (max-width: 767px) {
	/*メインのみ*/
	.Contents .Main_Column{
		width: 100%;
	}




}
/* ===================================================================
5.Extra small devices
スマホ用、768px未満
@media only screen and (max-width: 768px)
=================================================================== */
@media only screen and (max-width: 768px) {


/*---- ヘッダー ----*/
.Header .Header_Inner{
	background: #fff;
	width: 100%;
	margin: 0 auto;
	position: relative;
}
/*---- コンテンツエリア ----*/
.Contents{
	width: 100%;
	margin: 0 auto;
	}
	.Contents:after {
		clear: both;
		content: " ";
		display: block;
	}
	/*メイン 左カラム*/
	.Contents .Main_Column_L{
		float: none;
		}
	.Contents .Side_Column_L{
		float: none;
		}
	/*メイン 右カラム*/
	.Contents .Main_Column_R{
		float: none;
		}
	.Contents .Side_Column_R{
		float: none;
		}
	/*メインのみ*/
	.Contents .Main_Column{
		width: 100%;
	}
/*---- フッター ----*/
.Footer .Footer_Inner{
	width: 100%;
	margin: 0 auto;
	position: relative;
}


}
/* ===================================================================
5.Retina Display
=================================================================== */
@media only screen and (-webkit-min-device-pixel-ratio: 2),
	only screen and (-moz-min-device-pixel-ratio: 2),
	only screen and (-o-min-device-pixel-ratio: 2/1),
	only screen and (min-device-pixel-ratio: 2),
	only screen and (min-resolution: 2dppx) {
}