@charset   "UTF-8";
/* --- ★エクステリア用　施工例★ --- */


/* --- パンくずエリア --- */
.pnav {
width: 100%;
height:17px;
text-align: left;
vertical-align:bottom;
margin: 0 ;
}
.pnav img {
text-align: right;
margin: 0 2px;
border: 0;
}
.pnav p {
margin: 0;
padding: 0 2px;
text-align: right;
font-family: "Meiryo UI",sans-serif;
font-size: 75%;
color: #666;
}
.pnav a:link { color: #666;text-decoration: none;}
.pnav a:visited { color: #666;}
.pnav a:hover { color: #3c0;}


/* --- タイトルエリア --- */

div.ext-md {/* 各施工例見出しber */
  position : relative;
  width : 100%;
  color : white;
  background-color : black;
  vertical-align : middle;
  padding-left : 10px;
  margin : 0 0 15px 0px;
}
div.ext-md h2 {/* 各施工例見出し書体 */
  width : inherit;
height: 25px;
  margin : 1px 0px;
  padding : 0;
  color : white;
  font-size : 100%;
  font-weight : normal;
  line-height : normal;
}

/* --- 内容エリア --- */
div.ext-rei01 {/* 各施工例ー大画像 */
  position : relative;
  width : 650px;
  text-align : center;
  vertical-align : top;
  margin : 10px 0px;
  padding : 0px auto;
}
div.ext-rei01 h3 {/* 各施工例ー大画像見出し */
  line-height : 1.5em;
  text-align : left;
  color : #333;
  margin : 0 0 5px 15px;
  padding : 0px;
  width : 600px;
}
div.ext-rei01 p {/* コメント共通 */
font-family: "Meiryo UI",sans-serif;
font-size: 85%;
color: #333;
}
p.com1 {/* 大画像コメント  */
  width : 580px;
  text-align : left;
  margin : 0px auto 10px;
  padding : 2px;
}
div.ext-rei01 table {
  margin : 0 auto 15px;
}
.ext-rei-td1 {/* 各施工例ー小画像左・中 */
  text-align : left;
  vertical-align : top;
  padding : 0 15px 10px 0;
}
.ext-rei-td2 {/* 各施工例ー小画像右 */
  text-align : left;
  vertical-align : top;
  padding : 0 0 10px 0;
}
.com2 {/* 各施工例ーコメントBOX */
  background-color : #e7de8d;
  padding : 8px;
  margin : 0px;
  text-align : left;
}

table.data1 {
margin : 5px;
font-family: "Meiryo UI",sans-serif;
font-size: 85%;
color: #333;
}





/* --- 施工例一覧ページ --- */

/* --- リストエリア --- */
ul.reimn {
width: 670px; /* リストエリアの幅 */
margin: 0;
padding: 20px 0 0; /* リストエリアのパディング（上、左右、下） */
list-style-type: none;
}

/* --- リスト項目 --- */
ul.reimn li {
width: 24.9%; /* 項目の幅 */
float: left;
}

/* --- 項目内容 --- */
ul.reimn dl {
width: 142px; /* 内容の幅 */
margin: 0; /* 内容のセンタリング */
font-size: 80%;
}

/* --- 写真エリア --- */
ul.reimn dt {
/* height: 102px; */ /* 写真エリアの高さ（dt要素の高さを指定する場合） */
margin-bottom: 1px; /* 写真エリアの下マージン */
}
ul.reimn dt img {
border: 1px #999 solid; /* 写真の境界線 */
}

/* --- キャプションエリア --- */
ul.reimn dd {
margin: 0;
height: 3em; /* エリアの高さ・行間 */
line-height: 100%;
font-family: "Meiryo UI",sans-serif;
font-size: 90%;
color: #333;
}
ul.reimn a:link { color: #333;text-decoration: none;}
ul.reimn a:visited { color: #333;}
ul.reimn a:hover { color: #3c0;}

/* --- clearfix --- */
.clearFix:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
.clearFix {
min-height: 1px;
}

/* --- パンくずエリア2 --- */
div.pnav1 {
position: relative;
top: 0px;
left:0px;
width: 100%;
height: 28px;
margin: 0 ;
}
div.pnav2{
position: relative;
top: 12px;
left:0px;
width: 450px;
height: 17px;
margin: 0;
vertical-align:bottom;
}
div.pnav2 img {
text-align: right;
margin: 0 2px;
border: 0;
}
div.pnav2 p {
margin: 0;
padding: 0 2px;
text-align: left;
font-family: "Meiryo UI",sans-serif;
font-size: 75%;
color: #666;
vertical-align:bottom;
}
.pnav2 a:link { color: #666;text-decoration: none;}
.pnav1 a:visited { color: #666;}
.pnav1 a:hover { color: #3c0;}

div.pnav3{
position: absolute;
top: 0px;
right:3px;
width: 150px;
height: 28px;
margin: 0;
vertical-align:bottom;
text-align: right;
}
div.pnav3 img {
text-align: right;
margin: 0 0 0 10px;
border: 0;
}