@charset "utf-8";

/*==========================================
File name: layout.css
Editors: IT-Probe
Last Editor: IT-Probe
Date: 2012.12.04
========================================== */

/* ▼▼▼ メインコンテンツのレイアウトに関する設定　ここから ▼▼▼ */

/* ---要素配置領域の決定 --- */

.left_block,
.left_float,
.right_block,
.right_float,
.quarter,
.third,
.half,
.half_left_block,
.half_right_block

{
		width: 735px; /* --- mainの幅に揃える --- */
		overflow: hidden;
		margin-bottom:15px;
}


.left_block_in,
.left_float_in,
.right_block_in,
.right_float_in,
.quarter_in,
.third_in,
.half_in,
.half_left_block_in,
.half_right_block_in

{
		width: 718px; /* --- mainの幅に揃える --- */
		overflow: hidden;
		margin-bottom:15px;
}


/*▼ 画像左・テキスト右・回りこみ無し ▼*/

.left_block{
	margin: 0 0 30px 0;
	overflow: hidden;
	
}

.left_block img{
	float: left;
	margin: 0 0 0 0;
}

.left_block p{
	float: right;
	width: 430px;/* ---テキスト領域の幅を確定する --- */
}

.left_block .element_01{
	float: right;
	width: 430px;/* ---領域の幅を確定する --- */
}


/*▼ 画像左・テキスト右・回りこみ有 ▼*/

.left_float{
	margin: 0 0 25px 0;
}

.left_float img{
	float: left;
	margin: 0 15px 15px 0;
}


/*▼ 画像右・テキスト左・回りこみ無し ▼*/

.right_block{
	margin: 0 0 30px 0;
}

.right_block img{
	float: right;
	margin: 0 0 0 0;
}

.right_block p{
	float: left;
	width: 430px;/* ---テキスト領域の幅を確定する --- */
}

.left_block .element_01{
	float: left;
	width: 430px;/* ---領域の幅を確定する --- */
}

/*▼ 画像右・テキスト左・回りこみ有 ▼*/

.right_float{
	margin: 0 0 25px 0;
}

.right_float img{
	float: right;
	margin: 0 0 15px 15px;
}


/*▼ 領域　横4つ ▼*/

.quarter .element_01,
.quarter .element_02{
	width: 160px;
	/* min-height: 200px;領域の高さを揃える */
	/* height: auto !important;
	/* height: 200px;	min-heightに揃える */
}

.quarter .element_01 img,
.quarter .element_02 img{
	margin: 0 0 10px 0;
}

.quarter .element_01{
	float: left;
	margin: 0 10px 0 0;
}

.quarter .element_02{
	float: right;
}

/** in ****/
.quarter_in .element_01,
.quarter_in .element_02{
	width: 169px;
}

.quarter_in .element_01 img,
.quarter_in .element_02 img{
	margin: 0 0 10px 0;
}

.quarter_in .element_01{
	float: left;
	margin: 0 14px 0 0;
}

.quarter_in .element_02{
	float: right;
}



/*▼ 領域　横3つ ▼*/

.third .element_01,
.third .element_02{
	width: 227px;
	/* min-height: 200px; 領域の高さを揃える */
	/* height: auto !important; */
	/* height: 200px;	min-heightに揃える */
}

.third .element_01 img,
.third .element_02 img,
.third_in .element_01 img,
.third_in .element_02 img{
	margin: 0 0 10px 0;
}

.third .element_01,
.third_in .element_01{
	float: left;
	margin: 0 14px 0 0;
}

.third .element_02,
.third_in .element_02{
	float: right;
}

/*in*/
.third_in .element_01,
.third_in .element_02{
	width: 230px;
}


/*▼ 領域　横2つ ▼*/

.half{
	overflow: hidden;
}

.half .element_01,
.half .element_02{
	width: 360px;
	/* min-height: 200px; 領域の高さを揃える */
	/* height: auto !important; */
	/* height: 200px;	/* min-heightに揃える */
}

.half .element_01 img,
.half .element_02 img{
	margin: 0 0 10px 0;
}

.half .element_01{
	float: left;
	margin: 0 15px 0 0;
}

.half .element_02{
	float: right;
}


/*▼ 領域 横2つ 画像左・テキスト右 ▼*/
/*▼ 領域 横2つ 画像右・テキスト左 ▼*/

.half_left_block .element_01,
.half_left_block .element_02,
.half_right_block .element_01,
.half_right_block .element_02{
	width: 324px;
	/* min-height: 150px; 領域の高さを揃える */
	/* height: auto !important; */
	/* height: 150px;	min-heightに揃える */
}

.half_left_block .element_01 p,
.half_left_block .element_02 p,
.half_right_block .element_01 p,
.half_right_block .element_02 p{
	width: 154px;
}


.half_left_block .element_01,
.half_right_block .element_01{
	float: left;
	margin: 0 10px 0 0;
}

.half_left_block .element_02,
.half_right_block .element_02{
	float: right;
}

/* 画像左・テキスト右 */

.half_left_block .element_01 img,
.half_left_block .element_02 img{
	float: left;
}


.half_left_block .element_01 p,
.half_left_block .element_02 p{
	float: right;
}


/* 画像右・テキスト左 */

.half_right_block .element_01 img,
.half_right_block .element_02 img{
	float: right;
}


.half_right_block .element_01 p,
.half_right_block .element_02 p{
	float: left;
}

.w-half,
.w-half .area_01,
.w-half .area_02{
	overflow: hidden;
}

.w-half{
	width: 900px;
	display: block;
	margin: 0 auto;
}

.w-half .area_01,
.w-half .area_02{
	width: 440px;
}

.w-half .area_01 img,
.w-half .area_02 img{
	width: 100%;
	height: auto;
	margin-bottom: 10px;
}

.w-half .area_01{
	float: left;
}

.w-half .area_02{
	float: right;
}

/*▼ table 上部TH center, 最右TD right ▼*/

table .price_set th+th{
	text-align: center;
}/*　上部TH 2つめから有効 */

table .price_set th+td+td{
	text-align: right;
}/* 最右が3つめの場合 */



/*▼ リストの最初の仕切り線を消去 ▼*/

.lined_list ul{
    _zoom: 1;
    overflow: hidden;
	margin: 0 0 0 0!important;
}

.lined_list ul li{
	margin: -1px 0 0 0!important;
	padding: 5px;
	border-top: 1px dotted #999;
}


/*▼ 矢じりmarkイメージ付きリスト ▼*/

.arrow_list ul{
	margin: 0 0 0 0;
}

.arrow_list ul li{
	list-style-type: none!important;
	background:url(../images/common/li.gif) no-repeat top left;
	padding-left: 18px;
	margin: 0 0 8px 0;
}



/*▼ 領域　枠囲い ▼*/

.s_waku{
	width: 240px;
	border: #FF6 1px solid;
	margin: 0 0 15px 0;
	background-color: #CCC;
}

.s_waku_in{
	width: 220px;
	margin: 10px auto;
}


/* ---------------------------
 共通メニュー
--------------------------- */

#sec_solution ul li,
.sec_makers ul li{
	list-style-type: none;
}

#sec_solution ul li{
	clear: both;
	overflow: hidden;
	border-bottom: dotted 1px #999;
	padding: 0 0 10px 0;
	margin: 0 0 10px 0;
}

#sec_solution ul li dt{
	width: 150px;
	float: left;
}

#sec_solution ul li dt a{
	display: block;
	background: #0066FF;
	border: double 3px #FFF;
	color: #FFF;
	width: 150px;
	line-height: 26px;
	text-decoration: none;
	text-align: center;
	vertical-align: middle;
}

#sec_solution ul li dd{
	width: 540px;
	float: right;
	font-weight: bold;
}


#sec_solution ul li a:hover{
	background: #428DFF;
}

.sec_makers ul li{
	margin: 0 0 5px 0;
	line-height: 25px;
}

#sec_solution ul li p{
	float: right;
}


.sec_makers ul li a{
	display: block;
	height: 25px;
	padding-left: 32px;
	background: url(../images/common/bg_maker_list.jpg) no-repeat top left;
	color: #333;
	text-decoration: none;
}

.sec_makers ul li a:hover{
	background: url(../images/common/bg_o_maker_list.jpg) no-repeat top left;
}

.sec_makers_bg_short a{
	width:126px !important;
	background: url(../images/common/bg_maker_list02.jpg) no-repeat top left !important;}
.sec_makers_bg_short a:hover{	background: url(../images/common/bg_o_maker_list02.jpg) no-repeat top left !important;}

#list-use .element_01,
#list-use .element_02{
	width: 110px;
}

#list-use .element_01{
	float: left;
	margin: 0 12px 0 22px;
}

#list-use .element_02{
	float: right;
}

#list-use a{
	display: block;
	width: 100px;
	height: 39px;
	line-height: 39px;
	color: #333;
	font-weight: bold;
	font-size: 1.2em;
	text-align: center;
	text-decoration: none;
	border: solid 4px #CCC;
	background: #FFF;
}

#list-use a:hover{
	background: #D7E7FF;
}