@charset "utf-8";

/*--------------------------------------------------
 global Header
 ---------------------------------------------------*/
#headWrap{
	background:none;
	min-height:98px;
	height:98px;
}
* html #headWrap {
	height:105px;
	overflow: hidden;
}
	#headWrap #header{
		height:55px;
		margin:10px auto;
	}
	#headWrap #assistWrap{
		border-top:3px solid #000;
	}

	#headWrap #readArea{
		text-align:right;
		vertical-align:middle;
		margin-top:-45px;
	}
		#headWrap #readArea img{
			vertical-align:middle;
		}		
			#headWrap #readArea img.mar02{
				margin-right:280px;
			}

#snsBtn{
	position:relative;
	display:block !important;
	margin-left:650px;
	height:20px;
}
	#snsBtn li{
		display:block!important;
	}
	#snsBtn #yahoo{
		position:absolute;
		left:0;
		top:2px;
	}
	#snsBtn #hatebu{
		position:absolute;
		left:21px;
		top:0;
	}
	#snsBtn #google{
		position:absolute;
		left:48px;
		top:3px;
	}
	#snsBtn #delicious{
		position:absolute;
		left:65px;
		top:3px;
	}
	#snsBtn #liveboor{
		position:absolute;
		left:84px;
		top:2px;
	}
	#snsBtn #windows{
		position:absolute;
		left:103px;
		top:3px;
	}
	#snsBtn #twitter{
		position:absolute;
		left:107px;
		top:0;
	}
	#snsBtn #facebook{
		position:absolute;
		left:210px;
		top:0;
	}
	#snsBtn #mixi{
		position:absolute;
		left:354px;
		top:0;
	}


/*------------------------------------------------
   Default
------------------------------------------------*/
/* float */
.clearfix{ /zoom : 1; clear : both;}
.clearfix:after{
	content : '';
	display : block;
	clear : both;
}
.floatL {
	float: left;
}
.floatR {
	float: right;
}
.block {
	overflow: hidden;
	_zoom: 1;
}
/* .squash */
.squash{
	height: 0;
	padding: 0;
	overflow: hidden;
	font-size: 0;
	line-height: 0;
}
/* #footer */
#footer {
	border-top: #C7C7C7 solid 1px;
}

/* margin ---------------*/
.marginR5{ margin-right:5px !important; }
.marginL5{ margin-left:5px !important; }
.marginR10{ margin-right:10px !important; }
.marginL10{ margin-left:10px !important; }
.marginR20{ margin-right:20px !important; }
.marginL20{ margin-left:20px !important; }
.marginR30{ margin-right:30px !important; }
.marginL30{ margin-left:30px !important; }
.marginR60{ margin-right:30px !important; }
.marginL60{ margin-left:30px !important; }
.marginB0{ margin-bottom:0 !important; }
.marginB5{ margin-bottom:5px !important; }
.marginB10{ margin-bottom:10px !important; }
.marginB15{ margin-bottom:15px !important; }
.marginB20{ margin-bottom:20px !important; }
.marginB30{ margin-bottom:30px !important; }
.marginB40{ margin-bottom:40px !important; }
.marginB50{ margin-bottom:40px !important; }
.marginB60{ margin-bottom:60px !important; }
.marginT5{ margin-top:5px !important; }
.marginT10{ margin-top:10px !important; }
.marginT15{ margin-top:15px !important; }
.marginT20{ margin-top:20px !important; }
.marginT25{ margin-top:25px !important; }
.marginT30{ margin-top:30px !important; }

/*------------------------------------------------
 splash
------------------------------------------------*/
#splash {
	width: 100%;
	height: 300px;
	background: url(../img/com_splash_bg.jpg) 0 0 repeat-x;
	clear: both;
}
	#splash h2 {
		width: 960px;
		padding: 300px 0 0 0;
		margin: 0 auto;
		background: url(../img/com_splash_img.jpg) 0 20px no-repeat;
		position: relative;
	}
		#splash h2 a {
			display: block;
			width: 310px;
			height: 255px;
			position: absolute;
			top: 0;
			left: 50px;
		}
/*------------------------------------------------
 navigation
------------------------------------------------*/
.navigation {
	width: 960px;
	height: 68px;
	margin: 0 auto;
	padding-top: 10px;
}
.navigation#navBottom {
	padding: 0 0 40px 0;
}
	.navigation .parent {
	}
		.navigation .parent li {
			display: block;
			width: 314px;
			height: 68px;
			margin-right: 9px;
			float: left;
			position: relative;
			cursor: pointer !important;
		}
			.navigation .parent li .title {
				width: 314px;
				height: 0;
				overflow: hidden;
				padding-top: 68px;
				font-size: 0;
				line-height: 0;	
				display: block;
			}
			.navigation .parent .nth1 .title {
				background: url(../img/com_nav_01.gif) 0 0 no-repeat;
			}
			.navigation .parent .nth2 .title {
				background: url(../img/com_nav_02.gif) 0 0 no-repeat;
			}
			.navigation .parent .nth3 .title {
				background: url(../img/com_nav_03.gif) 0 0 no-repeat;
			}
			.navigation .parent li.active .title,
			.navigation .parent li:hover .title {
				background-position: 0 -68px;
			}
		.navigation .parent li.nth3 {
			margin-right: 0;
		}
	.navigation .child {
		padding-top: 68px;
		top: 0;
		left: 0;
		z-index: 10;
		position: absolute;
		display: none;
	}
	/*.navigation .nth1:hover .child,
	.navigation .nth2:hover .child,
	.navigation .nth3:hover .child {
		display: block;
	}*/
		.navigation .child li {
			width: auto;
			height: auto;
			float: none;
			margin: 1px 0 0 0;
			font-size: 12px;
			line-height: 1.4;
			/zoom: 1;
		}
			.navigation .child li a {
				display: block;
				text-decoration: none;
				background: #666;
				color: #FFF;
				padding: 10px 10px 10px 35px;
				/zoom: 1;
			}
			.navigation .nth1 .child li a {
				background: #666 url(../img/com_rarrow_01.gif) 10px 12px no-repeat;
			}
			.navigation .nth2 .child li a {
				background: #666 url(../img/com_rarrow_02.gif) 10px 12px no-repeat;
			}
			.navigation .nth3 .child li a {
				background: #666 url(../img/com_rarrow_03.gif) 10px 12px no-repeat;
			}
			.navigation .child li a.active,
			.navigation .child li a:hover {
				color: #000;
				background-color: #EEE;
			}

/*--------------------------------------------------
 content
 ---------------------------------------------------*/
#content {
	width: 900px;
	padding: 30px 30px 40px;
	margin: 0 auto;
	font-family: "Hiragino Kaku Gothic Pro","ヒラギノ角ゴ Pro W3","メイリオ","Meiryo","ＭＳ Ｐゴシック",sans-serif;
}	
	#content strong {
		font-weight: bold;
	}
	#content a {
		color: #000;
	}
	#content a:hover {
		text-decoration: none;
	}
	#content p {
		line-height: 1.7;
	}
	#content p.next {
		font-size: 14px;
		margin-bottom: 50px;
	}

/*--------------------------------------------------
 #indReadBlock
 ---------------------------------------------------*/
#indReadBlock {
	padding-bottom: 40px;
}
	#indReadBlock p {
		width: 901px;
		padding: 109px 0 0 0;
		background: url(../img/ind_read.jpg) 0 0 no-repeat;
	}
	
/*--------------------------------------------------
 #readBlock
 ---------------------------------------------------*/
#readBlock {
	margin-bottom: 30px;
}
	#readBlock h3,
	#readBlock p {
		margin-bottom: 1.6em;
	}
	#readBlock p {
		font-size: 14px;
	}
	
/*--------------------------------------------------
 #contentsBlock
 ---------------------------------------------------*/
#contentsBlock {
}
	#contentsBlock .section {
		padding-bottom: 20px;
	}
		#contentsBlock .section h4 {
			background: #000;
			color: #FFF;
			font-weight: bold;
			font-size: 16px;
			padding: 7px 10px 5px 10px;
			margin-bottom: 15px;
			line-height: 1.2;
			border-left: solid 5px;
		}
		.frontend #contentsBlock .section h4 {
			border-color: #A9C00F;
		}
		.ec #contentsBlock .section h4 {
			border-color: #D46B05;
		}
		.sns #contentsBlock .section h4 {
			border-color: #74A2AF;
		}
		#contentsBlock .section p {
			font-size: 12px;
			margin-bottom: 1.6em;
		}
		#contentsBlock .section .caption {
			font-size: 10px;
			color: #999;
		}
		#contentsBlock .section dl.souce {
			display: block;
			width: 625px;
			padding: 30px 15px 15px;
			margin-bottom: 5px;
			border: #A9C00F solid 1px;
			background: #EEE;
			position: relative;
		}
			#contentsBlock .section dl.souce dt {
				display: block;
				width: 80px;
				height: 15px;
				position: absolute;
				top: 0;
				left: 0;
				line-height: 0;
			}
				#contentsBlock .section dl.souce dt img {
					display: block;
					line-height: 0;
					vertical-align: bottom;
				}
			#contentsBlock .section dl.souce dd {
				white-space: pre;
				font-size: 12px;
				line-height: 1.4;
				font-family:"ＭＳ Ｐゴシック", Osaka, "ヒラギノ角ゴ Pro W3";
			}	
		#contentsBlock .section div.floatR {
			width: 216px;
			margin-left: 25px;
		}
		#contentsBlock .section div.floatR.wide {
			width: 270px;
		}
		#contentsBlock .section div.floatL {
			width: 216px;
		}
		#contentsBlock .section div.floatL.twoline,
		#contentsBlock .section div.floatR.twoline {
			width: 444px;
		}
			#contentsBlock .section div.floatR.twoline li {
				width: 216px;
			}
		#contentsBlock .section ol {
			display: block;
			width: 625px;
			padding: 15px;
			margin-bottom: 1.6em;
			line-height: 1.6;
			border: #A9C00F solid 1px;
			background: #EEE;
		}
		.sns #contentsBlock .section ol {
			border-color: #74A2AF;
		}
			#contentsBlock .section ol li {
				list-style: decimal inside;
			}

/*--------------------------------------------------
 #tocBlock
 ---------------------------------------------------*/
#tocBlock {
	padding-bottom: 20px;
}
	#tocBlock h3 {
		margin-bottom: 10px;
	}
	#tocBlock .inner {
		overflow: hidden;
		_zoom: 1;
	}
	#tocBlock .box {
		padding: 30px 0;
		margin-top: -1px;
		border-top: #EEE solid 1px;
	}
		#tocBlock .box .image {
			margin-right: 30px;
		}
		#tocBlock .box .text {
			overflow: hidden;
		}
* html #tocBlock .box .text {
			float: left;
		}

			#tocBlock .box .text h4,
			#tocBlock .box .text p {
				margin-bottom: 1em;
			}
			#tocBlock .box .text p {
				font-size: 12px;
			}
			#tocBlock .box .text ul {}
				#tocBlock .box .text ul li {
					margin-bottom: 0.2em;
					padding-left: 25px;
					line-height: 1.4;
				}
				#tocBlock .box.nth1 .text ul li{
					background: url(../img/com_rarrow_01.gif) 0 5px no-repeat;
				}
				#tocBlock .box.nth2 .text ul li{
					background: url(../img/com_rarrow_02.gif) 0 5px no-repeat;
				}
				#tocBlock .box.nth3 .text ul li{
					background: url(../img/com_rarrow_03.gif) 0 5px no-repeat;
				}
					#tocBlock .box .text ul li a {
						font-size: 14px;
					}
					#tocBlock .box .text ul li.intend{
						color: #666;
					}
					#tocBlock .box .text ul li .update {
						font-size: 10px;
						padding-left:10px;
					}
					#tocBlock .box .text ul li .new {
						padding-left: 2px;
					}
						#tocBlock .box .text ul li .new img {
							vertical-align: middle;
						}

/*--------------------------------------------------
 #columnBox
 ---------------------------------------------------*/
#columnBox {
	background: #F7F7F7;
	padding: 26px 46px 26px 26px;
	margin-bottom: 30px;
	border: #A9C00F solid 4px;
	position: relative;
}
.frontend #columnBox {
	border-color: #A9C00F;
}
.sns #columnBox {
	border-color: #74A2AF;
}
	#columnBox h5 {
		font-weight: bold;
		font-size: 14px;
		margin-bottom: 1em;
	}
	#columnBox p {
		font-size: 12px;
	}
	#columnBox .dogear {
		position: absolute;
		top: -4px;
		right: -4px;
		z-index:2;
	}

/*--------------------------------------------------
 #editorProfBlock
 ---------------------------------------------------*/
#editorProfBlock {
	border: #EEE solid 1px;
	margin-bottom: 40px;
	padding: 20px;
}
	#editorProfBlock .image {
		margin-right: 20px;
		display: inline-block;
		vertical-align: middle;
		*zoom: 1; /* for IE6-7 */
		*display: inline; /* for IE6-7 */
		float: none;
	}
		#editorProfBlock .image img {
		}
	#editorProfBlock .block {
		display: inline-block;
		vertical-align: middle;
		width:725px; /* 幅の指定がない場合、改行が必要な幅を超えるとカラム落ちします。 */
		*zoom: 1; /* for IE6-7 */
		*display: inline; /* for IE6-7 */
	}
		#editorProfBlock .block h3 {
			font-size: 10px;
			margin-bottom: 1em;
		}
		#editorProfBlock .block p {
			font-size: 12px;
			margin-bottom: 0.5em;
		}

/*--------------------------------------------------
 #denaProfBlock
 ---------------------------------------------------*/
#denaProfBlock {
	background: #EEE;
	padding: 35px 20px 10px;
	position: relative;
}
	#denaProfBlock h3 {
		width: 190px;
		padding-top: 30px;
		background: url(../img/com_dena_name.gif) 0 0 no-repeat;
		position: absolute;
		top: -10px;
		left: 20px;
	}
	#denaProfBlock .logo {
		margin-right: 10px;
	}
	#denaProfBlock .text {
		overflow: hidden;
	}
		#denaProfBlock .text p {
			margin-bottom: 1em;
			font-size: 12px;
		}


* html .ie6_w625{ width: 625px;}
* html .dogear { display: none;}