/* CUBELANDのCCS */

/* 背景色出す（デバッグ用）
div#left{
	background-color:pink;
}
div#right{
	background-color:red;
}
div.imgBox{
	background-color:purple;
}
div.guideBox{
	background-color:lightblue;
}
*/

/* まずcssをリセット */
html,body,div,h1,p{
	margin:0;
	padding:0;
}

html{
	height:100%;
}

/* BODY */
body{
	width:100%;
	
	/* ブラウザによっては一番下が余白ないので、戻るが押しやすいように開ける。*/
	margin-bottom:20px;
	
	/* iPhoneで文字サイズがいろいろ変ってしまう問題の対策 */
	/* 参考http://tech.nitoyon.com/ja/blog/2013/02/14/text-size-adjust/ */
	-webkit-text-size-adjust: 100%;
	
	text-align:center;
	line-height:1.5;
	
	color:black;
	font-size:15px;/* ほとんどのブラウザはデフォルトで16pxだそうだ */
	
	background-color:#f2f9ff;
	
	/* 上に背景画像を敷いて、タイトルバーエリアとする。*/
	background-image:url("http://curahome.net/imgs/sky.png");
	background-repeat:repeat-x;
	background-position:center top;

	/* 一応いろいろとフォント設定 */
	/* http://www.webdlab.com/stylesheet/font_text/font-family.php */
	font-family:"ヒラギノ角ゴ ProN W3","Hiragino Kaku Gothic ProN",Osaka,"ＭＳ Ｐゴシック","MS PGothic", sans-serif;
}

/* pは、上下に10pxの空きを。*/
p{
	margin:10px 0;
}

/* リンク画像は枠を非表示 */
a img{
	border-style:none;
}

/* リストスタイル */
ul,li{
	margin:0;
	padding:0;
}

/* リンクスタイル */
/* ブラウザによってはアンダーラインないかもしれないからつけとくか */
A:link{color:blue;text-decoration:underline;}
A:visited{color:blue;text-decoration:underline;}
A:hover{color:red;text-decoration:underline;}
A:active{color:red;text-decoration:underline;}

/* 線の基本スタイル（破線です！） */
hr{
	border-width:1px 0 0 0;
	border-style:dashed;
	border-color:gray;
	height:1px;/* IE用？ */
	
	margin-top:0px;
	margin-bottom:0px;

}

/* パンくずリストのスタイル */
div#pankuzu{
	padding:10px;
}

div#pankuzu li{
	display:inline;
}

/* テーブルの基本スタイル */
table,td{
	border-style:none;
}

/* タイトルバー */
div#title_container{

	width:900px;
	height:130px;
	
	margin:0 auto;

}

table#title_table{

	width:900px;
	height:130px;

}

/* タイトルバーの左（タイトルロゴが入る）*/
td#title_left_td{

	width:250px;
	height:130px;
	
	/* タテにも中央ぞろえ */
	vertical-align:middle;
	
}

td#title_right_td{

	text-align:left;

	width:630px;/* 900px-250px-20px(margin) = 630px */
	height:130px;
	
	margin-left:20px;
	
	/* タテにも中央ぞろえ */
	vertical-align:middle;
	
}

table#title_right_table{

	margin-left:20px;
	
}

table#title_right_table,table#title_right_table td{

	text-align:left;
	
}

/* タイトルバーより下の、全体の入れ物 */
div#container{

	background-color:white;
	width:900px;
	
	margin:0 auto;

	text-align:left;

	/*影*/
	box-shadow: 3px 3px 6px #000;
	-moz-box-shadow: 3px 3px 6px #000;
	-webkit-box-shadow: 3px 3px 6px #000;

}

/* その中身 */
div#container div#container_div{

	margin-top:0;
	
	/* 背景画像を敷く。左上から下にリピートすることで、
	leftボックスが一番下まで伸びているようにみせる。*/
	background-image:url("http://curahome.net/imgs/left_background.png");
	background-repeat:repeat-y;
	background-position:left top;
	
}


/*左半分の入れ物*/
div#left{

	float:left;
	width:250px;

}

/*更新履歴*/
div#update{

	background-color:#f5f5f5;
	
	width:250px;
	height:250px;
	
	margin:0 0 10px 0;
	overflow:auto;

}
/*更新履歴の中身*/
div#update div{
	padding:0 20px 0 20px;
}

/* ステップ（トップ以外で使用）*/
div#step{

	background-color:#f5f5f5;

	width:250px;
}

div#step div{

	padding:10px;
	
}

/* BBSエリア,LINKエリア */
div#bbs,div#link{
	padding:20px;
}

/* ブログのバー */
div#blog_bar{

	width:250px;
	height:30px;

	/* 背景としてバー表示 */
	background-image:url("imgs/box_header/bar.png");
	background-repeat:no-repeat;
	background-position:left top;
	
	text-align:center;
	/* タテにも中央ぞろえ */
	display:table-cell;
	vertical-align:middle;
}

div#blog{

	margin-bottom:10px;
	padding:0 20px 10px 20px;

}

/*右半分の入れ物*/
div#right{

	float:left;
	width:630px;

	margin-left:20px;

}

/* 各コンテンツのバー */
div.contents_bar{

	width:610px;
	height:30px;
	
	border:solid 3px #ff80c0;
	
	background-color:#ffc4e2;

	/* 背景としてバー表示
	background-image:url("imgs/box_header/bar.png");
	background-repeat:repeat-x;
	background-position:left top;
 */
	/* タテにも中央ぞろえ */
	display:table-cell;
	vertical-align:middle;
	
}

/* バーの文字（リンク）をインデント */
div.contents_bar > div{
	margin-left:10px;
}

/*コンテンツ箱（画像が左に来てコンテンツ紹介する箱）*/
div.contentsBox{

	width:630px;
	margin:0;
}

/* 内容をインデント。 */
div.contents{
	width:600px;
	margin-left:10px;
	margin-right:0px;
}

/*コンテンツのサムネ画像のボックス*/
div.imgBox{
	float:left;
	width:117px;
	margin-left:10px;
}

/*コンテンツのサムネ画像のボックスの中身*/
div.imgBox img{
	padding:20px 0 20px 0;
}

/*コンテンツの説明文のボックス*/
div.guideBox{
	float:left;
	width:100%;
	margin:20px 10px 20px 20px;
}

/*フッター
div#footer{
	clear:left;
	width:100%;
	text-align:center;
}
*/

.clearfix:after{
	display:block;
	clear:both;
	height:0;
	line-height:0;
	visibility:hidden;
	content:".";
	font-size:0.1em;
}
.clearfix{
	display:inline-block;
}