@charset "UTF-8";
body {
	background-color: #000000;
	margin: 0px;
	padding: 0px;
	font-size: 12px;
	line-height: 24px;
	
	background-position: center top;
	color: #999999;
	font-family: 'メイリオ', 'Hiragino Kaku Gothic Pro', sans-serif
}
h1 {
	font-size: 9px;
	color: #CCCCCC;
	line-height: 10px;
	padding-top: 10px;
	margin-left: 15%;
}



h2 {
	font-size: 12px;
	color: #FFFFFF;
	font-weight: normal;
	line-height: 20px;
	padding-top: 15px;
	padding-left: 3%;

}

h3 {
	font-size: 12px;
	color: #a01b0f;
	font-weight: normal;
	line-height: 20px;
	padding-top: 15px;
	padding-left: 3%;

}

img {
	max-width: 100%;
	hight: auto;
	border: none;
	
}
/* ボックスイメージテキストまわりこみ*/	

.box5-1 {
	float: left;
	width: 35%
}
.box5-2 {
	float: left;
	width: 65%
}
/* ボックスの左右 フォント*/
.box4 {
	padding-left: 15px;
	padding-right: 15px

}
.box7 {
	padding-left: 15px;
	padding-right: 15px
}
.box7 a {
	color: #cccccc
}
/* ボックスの上下 */

.box4-1, .box4-2, .box4-3 {
	padding-bottom: 10px;
	
	}
.box7-1, .box7-2, .box7-3 {
	padding-bottom: 10px
}
	
	
			 	
/* ########### 479px以下 ########### */
@media only screen and (max-width: 479px) {
#wrapper {
	width: 300px
}
img {
	max-width: 100%;
	hight: auto;
	border: none
}
/* ナビゲーション */
.menu li a {
	padding: 18px 18px;
	font-size: 11px
}
}



/* ########### 480px〜767px ########### */

@media only screen and (min-width: 480px) and (max-width: 767px) {
#wrapper {
	width: 420px;
}
img {
	max-width: 100%;
	hight: auto;
	border: none
}
/* ナビゲーション */
.menu li a {
	padding: 10px 7px;
	font-size: 11px
}
/* BOX4-1、BOX4-2、BOX4-3を横に並べる設定 */
.box4:after {
	content: "";
	display: block;
	clear: both
}
.box4-1 {
	float: left;
	width: 32%;
	margin-right: 2%
}
.box4-2 {
	float: left;
	width: 32%;
	margin-right: 2%
}
.box4-3 {
	float: left;
	width: 32%
}
/* BOX7-1、BOX7-2、BOX7-3を横に並べる設定 */

.box7:after {
	content: "";
	display: block;
	clear: both
}
.box7-1 {
	float: left;
	width: 32%;
	margin-right: 2%
}
.box7-2 {
	float: left;
	width: 32%;
	margin-right: 2%
}
.box7-3 {
	float: right;
	width: 30%;
	margin-right: 2%
}
}


/* ########### 768px〜959px タブレット　########### */
@media only screen and (min-width: 768px) and (max-width: 959px) {
#wrapper {
	width: 728px;
}
img {
	max-width: 100%;
	hight: auto;
	border: none
}
/* BOX1とBOX2を横に並べる設定 */

.boxA:after {
	content: "";
	display: block;
	clear: both
}
.box1 {
	float: left;
	width: 50%
}
.box2 {
	float: right;
	width: 50%
}
/* BOX4-1、BOX4-2、BOX4-3を横に並べる設定 */

.box4:after {
	content: "";
	display: block;
	clear: both
}
.box4-1 {
	float: left;
	width: 32%;
	margin-right: 2%
}
.box4-2 {
	float: left;
	width: 32%;
	margin-right: 2%
}
.box4-3 {
	float: right;
	width: 32%
}
/* BOX5とBOX6を横に並べる設定 */

.boxB:after {
	content: "";
	display: block;
	clear: both
}
.box5 {
	float: left;
	width: 75%;
	margin-right: 3%
}
.box6 {
	float: right;
	width: 22%;
}
/* BOX7-1、BOX7-2、BOX7-3を横に並べる設定 */

.box7:after {
	content: "";
	display: block;
	clear: both
}
.box7-1 {
	float: left;
	width: 32%;
	margin-right: 2%
}
.box7-2 {
	float: left;
	width: 32%;
	margin-right: 2%
}
.box7-3 {
	float: right;
	width: 32%
}
}

/* ########### 960px以上　PC　########### */
@media only screen and (min-width: 960px) {
/* BOX1とBOX2を横に並べる設定 */

.boxA:after {
	content: "";
	display: block;
	clear: both
}
.box1 {
	float: left;
	width: 50%
}
.box2 {
	float: right;
	width: 50%
}
/* BOX4-1、BOX4-2、BOX4-3を横に並べる設定 */

.box4:after {
	content: "";
	display: block;
	clear: both
}
.box4-1 {
	float: left;
	width: 32%;
	margin-right: 2%
}
.box4-2 {
	float: left;
	width: 32%;
	margin-right: 2%
}
.box4-3 {
	float: right;
	width: 32%
}
/* BOX5とBOX6を横に並べる設定 */

.boxB:after {
	content: "";
	display: block;
	clear: both
}
.box5 {
	float: left;
	width: 75%;
	margin-right: 3%
}
.box6 {
	float: right;
	width: 22%;
}
/* BOX7-1、BOX7-2、BOX7-3を横に並べる設定 */

.box7:after {
	content: "";
	display: block;
	clear: both
}
.box7-1 {
	float: left;
	width: 32%;
	margin-right: 2%
}
.box7-2 {
	float: left;
	width: 32%;
	margin-right: 2%
}
.box7-3 {
	float: right;
	width: 32%
}
}