@charset "utf-8";

/* ---------------------------------------------------------------------------
 [ class.css ]

 クラス設定

 特定の役割を持った要素へのスタイル定義を行います。
 ただし、接頭辞として（.x-）の使用は禁止します。

 ex.) 禁止例

 li.x-example {

 }

--------------------------------------------------------------------------- */

/* ------------------------------
 共有 設定
------------------------------ */

/* タイトル */
.l_p h3 {
  margin: 0 0 10px;
  padding: 6px 12px 4px;
  font-weight: bold;
  font-size: 123.1%;
  border: 1px solid #377b71;
}

.addr_common_area h3 {
  color: #990000;
  background: url(../../images/useful_article/bg_diagonal_br.gif) repeat;
}

/* ブロック */
.addr_select_block {
  margin: 0 0 9px;
  padding: 0 10px;
}

/* エリア */
.addr_common_area {
  width: 681px;
  margin: 0 -1px 15px 0;
}

/* ボックス */
.addr_box_l {
  float: left;
  width: 339px;
  margin-right: 3px;
  background: url(../../images/useful_article/bg_addr_m.gif) repeat-y;
}

.article_block .img {
  float: left;
  width: 130px;
  margin: 0 7px 0 0;
  border: 1px solid #CCC;
}

.article_block ul li dl dt {
  margin: 0 0 5px;
  font-size: 116%;
  font-weight: bold;
}

.article_block ul li dl dd p {
  font-size: 100%;
  line-height: 1.4;
}

.article_block .article_box {
  margin: 0 0 10px;
  background-color:#fff4c6;
}

.article_block .article_box dl {
  zoom: 1;
}

.article_block dl.article dt {
  margin: 0 0 3px;
  font-weight: bold;
  font-size: 100%;
}

.article_block ul.article li  {
  margin: 0 0 3px;
  padding: 0 0 0 12px;
  font-size: 100%;
  background: url(../../images/icon_blue_r_arrow.gif) no-repeat left 0.3em;
}

.addr_box_r {
  float: left;
  width: 339px;
  background: url(../../images/useful_article/bg_addr_m.gif) repeat-y;
}

.addr_box_b {
  width: 339px;
  height: 9px;
  background: url(../../images/useful_article/bg_addr_b.gif) no-repeat;
}


/* ------------------------------
 水まわり・住まいのお役立ち情報
 設定
------------------------------ */
p.intro {
  margin: 0 0 12px;
  padding-right: 10px;
  font-size: 100%;
}

/* タイプ別・住まいの 適正診断 */
.type_area {
  margin: 7px 0 0;
  padding: 0 0 7px;
  background: url(../../images/useful_article/bg_area.png) no-repeat 1px 0;
   /* background: url(../../images/bg_dott_row.gif) repeat-y 482px; */
}

.type_area_title{
	margin: 0 0 5px 15px;
	font-size:120%;
	font-weight:bold;
}

.type_block {
  padding: 2px 9px 11px 0;
}

.type_area .visual {
  float: left;
/*  width: 203px;*/
  width: 1px;
  margin: 0 15px 0 0;
}

.type_area ul {
  float: left;
  /*width: 445px;*/
  /* width: 645px; */
}

ul.area_left { width:480px; }
ul.area_right { width:165px; }

.type_area ul li.first {
  float: left;
  width: 444px;
  margin: 7px 36px 0 0;
}

.type_area ul li dl {
  float: left;
  width: 444px;
}

.type_area ul li dl dt {
  margin: 0 0 5px;
  font-weight: bold;
  font-size: 116%;
}

.type_area ul li dl dt img {
  margin: 0 5px 0 0;
}

.type_area ul li .first_date {
  font-size: 100%;
  color: #990000;
  text-indent: 12px;
}

.type_area ul li .txt {
  font-size: 100%;
}

.type_area ul li .txt a {
  line-height: 1.4;
}

.type_area p.icon {
  float: right;
  width: 165px;
  margin: right;
  margin-bottom: 5px;
}

.type_area ul li.second {
  float: right;
  width: 165px;
}

.type_area ul li.second .txt, .type_area ul li.first .txt {
  margin: 0 0 1px;
  text-indent: 12px;
  background: url(../../images/icon_blue_r_arrow.gif) no-repeat left 0.40em;
}

.type_area ul li .second_date {
  font-size: 85%;
  color: #990000;
}

.solid_m {
  width: 681px;
  margin: 0 -1px 18px 0;
  background: url(../../images/useful_article/bg_solid_m.gif) repeat-y;
}

.solid_t {
  width: 681px;
  height: 5px;
  background: url(../../images/useful_article/bg_solid_t.gif) no-repeat;
}

.solid_b {
  width: 681px;
  height: 5px;
  background: url(../../images/useful_article/bg_solid_b.gif) no-repeat;
}

/* 住まい選び、まずはここからスタート */
.addr_select_area {
  width: 680px;
  margin: 0 0 15px;
  background: url(../../images/useful_article/bg_addr_select_m.gif) repeat-y;
}

.addr_select_area h3 {
  color: #333;
  background: url(../../images/useful_article/bg_diagonal_o.gif) repeat;
}

.addr_select_area .start_block_l {
  float: left;
  width: 332px;
  margin: 0 9px 0 0;
}

.addr_select_area .start_block_r {
  float: left;
  width: 315px;
}

.addr_select_area .start_box {
  margin: 0 0 10px;
}

.addr_select_area .start_box .img_start {
  float: left;
  width: 88px;
  margin: 0 7px 0 0;
  border: 1px solid #ccc;
}

.addr_select_area ul.intro li {
  display: inline;
}

.addr_select_area ul.intro {
  float: left;
  width: 225px;
}

.addr_select_area ul.intro_r {
  float: left;
  width: 218px;
}

.addr_select_area ul.intro dt {
  margin: 0 0 7px;
  font-size: 116%;
  font-weight: bold;
}

.addr_select_area ul.intro dd p {
  font-size: 100%;
}

.addr_select_area ul.select_list {
  clear: both;
  width: 315px;
}

.addr_select_area ul.select_list li {
  margin: 0 0 3px;
  padding: 0 0 0 12px;
  font-size: 100%;
  background: url(../../images/icon_blue_r_arrow.gif) no-repeat left 0.40em;
}

.addr_select_area ul.select_list li.clear {
  clear: both;
}

.addr_select_area ul.select_list li.first {
  margin-right: 10px;
}

.addr_select_b {
  width: 680px;
  height: 9px;
  background: url(../../images/useful_article/bg_addr_select_b.gif) no-repeat;
}

.row_border {
  background: url(../../images/useful_article/bg_dott_row_br.gif) repeat-y center;
}

/*カラム方向*/
.colClear20 {
  clear: both;
  margin-bottom: 20px;
}

.subColClear {
  clear:both;
  margin-bottom:15px;
}

.colClearDotLine,
.subColClearDotLine {
  clear: both;
  background:url(/img/dot_line.gif) 0 100% repeat-x;
  margin-bottom:15px;
  padding-bottom:15px;
}

.colLeft {
  float:left;
}

.colRight {
  float:left;
  margin-left: 10px;
}

/*カラムサイズ*/
.colSize100 {width:100px;}
.colSize106 {width:106px;}
.colSize135 {width:135px;}
.colSize138 {width:138px;}
.colSize165 {width:165px;}
.colSize188 {width:188px;}
.colSize190 {width:190px;}
.colSize195 {width:195px;}
.colSize219 {width:219px;}
.colSize240 {width:240px;}
.colSize245 {width:245px;}
.colSize260 {width:260px;}
.colSize281 {width:281px;}
.colSize285 {width:285px;}
.colSize290 {width:290px;}
.colSize294 {width:294px;}
.colSize309 {width:309px;}
.colSize310 {width:310px;}
.colSize315 {width:315px;}
.colSize317 {width:317px;}
.colSize319 {width:319px;}
.colSize320 {width:320px;}
.colSize325 {width:325px;}
.colSize335 {width:335px;}
.colSize336 {width:336px;}
.colSize337 {width:337px;}
.colSize339 {width:339px;}
.colSize342 {width:342px;}
.colSize346 {width:346px;}
.colSize360 {width:360px;}
.colSize380 {width:380px;}
.colSize385 {width:385px;}
.colSize400 {width:400px;}
.colSize454 {width:454px;}
.colSize471 {width:471px;}
.colSize490 {width:490px;}
.colSize518 {width:518px;}
.colSize520 {width:520px;}
.colSize533 {width:533px;}
.colSize536 {width:536px;}
.colSize539 {width:539px;}
.colSize540 {width:540px;}
.colSize560 {width:560px;}
.colSize570 {width:570px;}
.colSize574 {width:574px;}
.colSize576 {width:576px;}
.colSize577 {width:577px;}
.colSize579 {width:579px;}
.colSize580 {width:580px;}
.colSize583 {width:583px;}
.colSize596 {width:596px;}
.colSize600 {width:600px;}
.colSize607 {width:607px;}
.colSize635 {width:635px;}
.colSize640 {width:640px;}
.colSize673 {width:673px;}
.colSize676 {width:676px;}
.colSize696 {width:696px;}
.colSize699 {width:699px;}
.colSize754 {width:754px;}
.colSize771 {width:771px;}

/*カラム詳細*/
.colLeft img,
.colRight img {
  margin-bottom:5px;
}

.colLeft p.txtIndent,
.colRight p.txtIndent {
  text-indent:1em;
}

.colLeft span,
.colRight span {
  font-size:70%;
}

.subColClear p,
.subColClearDotLine p {
  font-size:90%;
}

.txtLeft {
  text-align:left !important;
}

.txtRight {
  text-align:right;
}

.txtCenter {
  text-align:center;
}


/* ------------------------------
 articleパターン01 設定
------------------------------ */
.article_01 h2 {
  padding: 0 0 0 39px;
  color: #333;
  font-weight: bold;
  font-size: 138.5%;
}

.article_01 h2 span.sub {
  font-size: 90%;
  line-height: 150%;
}

.article_01 h2 span.main {
  padding-left: 2em;
}

.article_01 h3 {
  font-size: 120%;
  font-weight: bold;
  margin-bottom: 10px;
}

.article_01 h4,h5 {
  font-size: 120%;
  margin-bottom: 5px;
}

.article_01 h4.b01 {
  font-weight: bold;
}

.article_01 p {
  line-height: 1.6;
  font-size: 120%;
  margin: 10px 0 20px 0;
}

.article_01 p.author {
  text-align: right;
}

.article_01 blockquote {
  font-size: 120%;
  margin: 10px 0 20px 20px;
}

.article_01 blockquote p {
  font-size: 100%;
  margin: 0;
}

.article_01 ul {
  margin: 10px 0 20px 0;
}

.article_01 li {
  font-size: 120%;
  margin-left: 1em;
  list-style-type: disc;
}

.article_01 dl.t01 {
  margin: 10px 0 20px 0;
}

.article_01 dl.t01 dt {
  font-size: 120%;
  font-weight: bold;
}

.article_01 dl.t01 dd {
  margin-left: 1em;
  margin-bottom: 10px;
  font-size: 120%;
}

.article_tbl690 dl {
  font-size: 120%;
  width: 690px;
  margin-bottom: 10px;
}

.article_tbl690 dt {
 float: left;
 padding: 3px 0 0 10px;
}

.article_tbl690 dd {
 padding: 3px 0;
}


.article_tbl920 dl {
  font-size: 120%;
  width: 920px;
  margin-bottom: 10px;
}

.article_tbl920 dt {
 float: left;
 padding: 3px 0 0 10px;
}

.article_tbl920 dd {
 padding: 3px 0;
}

.article_b_tbl920 dl {
 font-size: 120%;
 width: 920px;
 border: 1px #666 solid;
 border-top: 0;
 margin-bottom: 10px;
}

.article_b_tbl920 dt {
 float: left;
 padding: 3px 0 0 10px;
 border-top: 1px #666 solid;
}

.article_b_tbl920 dd {
 padding: 3px;
 border-top: 1px #666 solid;
 border-left: 1px #666 solid;
}

.article_b_tbl920 ul {
 font-size: 14px;
 margin: 0;
 padding: 0;
}

.article_b_tbl680 dl {
 width: 680px;
 border: 1px #666 solid;
 border-top: 0;
 margin-bottom: 10px;
}

.article_b_tbl680 dt {
 float: left;
 padding: 3px 0 0 10px;
 border-top: 1px #666 solid;
}

.article_b_tbl680 dd {
 padding: 3px;
 border-top: 1px #666 solid;
 border-left: 1px #666 solid;
}

.article_b_tbl680 ul {
 font-size: 14px;
 margin: 0;
 padding: 0;
}

.article_01 .para01 {
  margin-bottom: 15px;
}

.article_01 .para01 p {
  margin: 0;
}


.em7 dt { width: 7em; }
.em7 dd { margin-left: 7em; }
.em10 dt { width: 10em; }
.em10 dd { margin-left: 10em; }
.em12 dt { width: 12em; }
.em12 dd { margin-left: 12em; }
.em15 dt { width: 15em; }
.em15 dd { margin-left: 15em;}
.em18 dt { width: 18em; }
.em18 dd { margin-left: 18em;}
.em20 dt { width: 20em; }
.em20 dd { margin-left: 20em;}

.dt_fff9d1 dl { background-color: #fff9d1; }
.dt_fff9d1 dd { background-color: #fff; }

.centering_t p {
	display:table-cell;
	vertical-align: middle;
	margin:0;
}
/*for IE6 */  
* html .centering_t p {  
    display: inline;  
    zoom: 1;  
}  
   
/*for IE7 */  
*:first-child+html .centering_t p {  
    display: inline;  
    zoom: 1;  
}

.img_mr5 img {
	margin-right: 5px;
}

/* EoS */


/* ===========================================================================
 レスポンシブ対応 メディアクエリ
 ブレークポイント定義：
   PC（デスクトップ）：768px 以上（既存スタイルがそのまま適用）
   スマートフォン     ：767px 以下
=========================================================================== */

/* ------------------------------
 スマートフォン（767px 以下）
------------------------------ */
@media screen and (max-width: 767px) {
    /* エリア */
    .addr_common_area {
	width: 100%;
	margin: 0 0 15px 0;
    }
    
    /* ボックス */
    .addr_box_l,
    .addr_box_r {
	float: none;
	width: 100%;
	margin: 0 0 20px 0;
	border: 1px solid #111;
	background: none;
    }
    .addr_box_b {
	width: 100%;
	background: none;
    }

    .article_tbl690 dl {
	width: 100%;
    }

    .article_tbl690 dt {
	float: none;
	padding: 0;
    }

    .article_tbl920 dl {
	width: 100%;
    }

    .article_tbl920 dt {
	float: none;
	padding: 0;
    }

    .article_b_tbl920 dl {
	width: 100%;
    }

    .article_b_tbl920 dt {
	float: none;
	padding: 0;
    }

    .article_b_tbl920 dd {
    }

    .article_b_tbl680 dl {
	width: 100%;
    }

    .article_b_tbl680 dt {
	float: none;
	padding: 0;
    }

    .article_b_tbl680 dd {
    }
    
    .em7 dt,
    .em10 dt,
    .em12 dt,
    .em15 dt,
    .em18 dt,
    .em20 dt { width: 100%; }
    
    .em7 dd,
    .em10 dd,
    .em12 dd,
    .em15 dd,
    .em18 dd,
    .em20 dd { margin: 0 0 20px 0;}
}