@charset "UTF-8";


body	{margin: 0;
	font-family: 'メイリオ', 'Hiragino Kaku Gothic Pro', sans-serif}
	
a {  overflow: hidden;
    outline: none;
}	
	
/* ナビゲーション */
.menu ul	{margin: 0;
	padding: 0;
	list-style: none}

.menu li a	{display: block;
	padding: 15px;
	color: #000000;
	font-size: 14px;
	text-decoration: none}

.menu li a:hover	{opacity: 0.8}


.menu ul:after	{content: "";
	display: block;
	clear: both}

.menu li	{float: left;
	width: auto}


.header { border-bottom: #35589a solid 5px; padding-bottom: 2px; text-align: right;}
.copyright p	{margin: 0;	color: #666666;	font-size: 12px}
span.free { color: maroon; font-size: 10px; }

.box1 { text-align: center; }
.box1 img { margin: 30px; border: none; }

.box2 a {background-color: #35589a; }
.box2 {background-color: #35589a; }
.box2 li a {color: #ffffff;}
.box2 li a:hover { color: #35589a; background-color: white}
.box4 { padding-top: 0px; }
.box5 { margin-bottom: 20px; }

.box6 { padding: 3px 0px; border-top: 2px gray solid; border-bottom: 2px solid #35589a;}




/* ボックスの左右に確保する余白 */
.box1, .header-inner, .footer-inner, .boxA, .box2, .box6-inner
	{padding-left: 10px;
	padding-right: 10px}



/*  products   */
.products	{padding: 20px;}
.products { padding-bottom: 0px; }

.products ul	{margin: 0;
	padding: 0;
	list-style: none}
	

.products li a	{
	padding: 0px;
	color: #000000;
	font-size: 14px;
	text-decoration: none;
	display: block;
	vertical-align: middle;
	}

.products li a:hover	{background-color: #eeeeee}

.products a:after	{content: "";
	display: block;
	clear: both}
	
.products img	{ border: none; }
.products .img {width: 170px; float: left; }
	
.products .text	{float: none; 
	margin-left: 170px}


/*  topics   */
.news	{padding: 20px;}

.news ul	{margin: 0;
	padding: 0;
	list-style: none}

.news li a	{display: block;
	padding: 5px;
	border-bottom: dotted 2px #dddddd;
	color: #000000;
	font-size: 14px;
	text-decoration: none;
	}

.news li a:hover	{background-color: #eeeeee}

.news time	{color: #888888;
	font-weight: bold; float: left;
	width: 100px}

.news a:after	{content: "";
	display: block;
	clear: both}


.news .text	{float: none;
	width: auto;
	margin-left: 100px}


/*  Project Canvas  */
.box5 { text-align: center; }
.box5 a { text-decoration: none; }


/* ########### 350px以下 ########### */
@media (max-width: 350px) {

	img.binder { display: none; }
	.menu li a	{padding: 10px 3px;	font-size: 8px}
	#saiyo { display: none; }
	.copyright p	{font-size: 8px}
	
}



/* ########### 599px以下 ########### */
@media (max-width: 599px) {

	img.binder { display: none; }
	.menu li a	{padding: 10px 3px;	font-size: 10px}
	#saiyo { display: none; }
}



/* ########### 600px以上～767px以下 ########### */
@media (min-width: 600px) and (max-width: 767px) {

	img.binder { display: none; }

	.menu li a	{padding: 10px 3px;	font-size: 11px}
}




/* ########### 768px以上 ########### */
@media (min-width: 768px) {


.boxA:after	{content: "";
	display: block;
	clear: both;

	}

.boxB	{float: left;
	width: 100%;
	margin-right: -350px;
	padding-right: 350px;
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
	box-sizing: border-box	
	}

.box5	{float: right;
	width: 350px}


}



/* ########### 1040px以上 ########### */
@media (min-width: 1040px) {



/* 全体の横幅を固定 */
.box6-inner, .boxA,
.box1, .header-inner, .box2-inner

	{width: 1000px;
	margin-left: auto;
	margin-right: auto}

}