@charset "utf-8";
/* ------------------------------------------------------------------
/////////////////////////////////////////////////////////////////////
page_title
/////////////////////////////////////////////////////////////////////
------------------------------------------------------------------ */

section#page_title {
width: 980px;
height: 337px;
overflow: hidden;
margin: -96px auto 0;
padding: 0;
background: url(http://www.nakagawa-gumi.jp/img/works/bg_page.jpg);
}
section#page_title h2 {
margin: 156px 0 0;
text-align: center;
}
section#page_title p.description {
margin: 40px 0 0;
text-align: center;
text-shadow: 1px 1px 2px #FFF, -1px -1px 2px #FFF, -1px 0px 2px #FFF, 0px -1px 2px #FFF, 1px 0px 2px #FFF, 0px 1px 2px #FFF;
}


/* ------------------------------------------------------------------
/////////////////////////////////////////////////////////////////////
layout
/////////////////////////////////////////////////////////////////////
------------------------------------------------------------------ */

div#container {
height: 100%;
overflow: hidden;
margin: 0 auto;
padding: 0;
background: url(http://www.nakagawa-gumi.jp/img/common/bg_05.gif);
border-top: #CCC solid 1px;
border-bottom: #CCC solid 1px;
clear: both;
}
div#container div.wrapper {
width: 978px;
height: 100%;
overflow: hidden;
margin: 0 auto;
padding: 0 0 100px;
background: #FFF;
border-left: #CCC solid 1px;
border-right: #CCC solid 1px;
}


/* ------------------------------------------------------------------
/////////////////////////////////////////////////////////////////////
contents
/////////////////////////////////////////////////////////////////////
------------------------------------------------------------------ */

div#container div.wrapper h3 img {
vertical-align: bottom;
}
div#container div.wrapper p.intro {
margin: 40px 0 0 40px;
display: inline;
float: left;
}
div#container div.wrapper div.banner {
width: 238px;
height: 72px;
overflow: hidden;
margin: 40px 40px 3px 0;
display: inline;
float: right;
}
div#container div.wrapper div.banner a:hover img {
opacity:0.7;
filter: alpha(opacity=70);
-ms-filter: "alpha( opacity=70 )";
}

/* タブ */
ul#tabs {
height: 38px;
overflow: hidden;
margin: 0;
padding: 0 40px;
background: url(../img/common/bg_07.gif) bottom repeat-x;
clear: both;
}
ul#tabs li {
height: 38px;
overflow: hidden;
margin: 0 10px 0 0;
padding: 0;
font-size: 16px;
line-height: 1.2;
display: inline;
float: left;
background: #f6f6f6;
}
ul#tabs li a {
height: 20px;
padding: 8px 30px;
color: #333;
display: block;
border: #CCC solid 1px;
}
ul#tabs li a:hover {
text-decoration: none;
background: #FFF;
border-top: #CCC solid 1px;
border-right: #CCC solid 1px;
border-left: #CCC solid 1px;
border-bottom: #FFF solid 1px;
}
ul#tabs li.active a {
background: #FFF;
border-top: #CCC solid 1px;
border-right: #CCC solid 1px;
border-left: #CCC solid 1px;
border-bottom: #FFF solid 1px;
}

/* タイトル */
h3.cate {
margin: 40px 40px 10px;
font-size: 24px;
font-weight: normal;
font-family: "ヒラギノ明朝 Pro W3","Hiragino Mincho Pro","メイリオ","Meiryo","ＭＳ Ｐ明朝","MS PMincho",serif;
line-height: 1.2;
}

/* 施工事例リスト */
ul#archives {
width: 958px;
height: 100%;
overflow: hidden;
margin: 0 0 0 20px;
padding: 0;
}
ul#archives li {
width: 219px;
height: 100%;
margin: 30px 20px 0 0;
padding: 0;
display: inline;
float: left;
position: relative;
}
ul#archives li div {
width: 219px;
height: 164px;
overflow: hidden;
margin: 0;
padding: 0;
background: #f6f6f6;
position: relative;
}
img.centering {
position: absolute;
}
ul#archives li p.cate {
margin: 10px 0 0;
padding: 2px 20px;
color: #FFF;
font-size: 13px;
display: inline-block;
border-radius: 10px;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
}
ul#archives li p.c_01 {background: #5322cc;}
ul#archives li p.c_02 {background: #0f801b;}
ul#archives li p.c_03 {background: #d2bd58;}
ul#archives li p.c_04 {background: #d1565f;}
ul#archives li p.title {
margin: 5px 0 0;
}
ul#archives li p.title a {
color: #0a2c99;
text-decoration: none;
}
ul#archives li p.dp {
margin: 5px 0 0;
}
ul#archives li.bl-hover {
opacity:0.7;
filter: alpha(opacity=70);
-ms-filter: "alpha( opacity=70 )";
}
ul#archives li p.badge {
position: absolute;
top: -12px;
right: -13px;
}


/* ------------------------------------------------------------------
/////////////////////////////////////////////////////////////////////
個別ページ
/////////////////////////////////////////////////////////////////////
------------------------------------------------------------------ */

div#works_s {
width: 898px;
height: 100%;
margin: 40px auto 0;
padding: 0;
}
div#works_s h3.title {
overflow: hidden;
margin: 0;
padding: 0;
font-size: 30px;
font-weight: normal;
line-height: 1.2;
}
div#works_s h3.title span.name {
font-family: "ヒラギノ明朝 Pro W3","Hiragino Mincho Pro","メイリオ","Meiryo","ＭＳ Ｐ明朝","MS PMincho",serif;
float: left;
}
div#works_s h3.title span.cate {
margin: 10px 0 0 40px;
padding: 2px 20px;
color: #FFF;
font-size: 13px;
font-family: 'Meiryo UI', 'Meiryo', 'メイリオ', 'ヒラギノ角ゴ Pro W3', 'Hiragino Kaku Gothic Pro', 'ＭＳ Ｐゴシック', Verdana, sans-serif;
display: inline-block;
float: left;
border-radius: 10px;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
}
div#works_s h3.title span.c_01 {background: #5322cc;}
div#works_s h3.title span.c_02 {background: #0f801b;}
div#works_s h3.title span.c_03 {background: #d2bd58;}
div#works_s h3.title span.c_04 {background: #d1565f;}
div#works_s dl {
width: 276px;
height: 100%;
overflow: hidden;
margin: 40px 0 0;
padding: 0;
display: inline;
float: left;
clear: both;
}
div#works_s dl dt {
width: 276px;
overflow: hidden;
margin: 0;
padding: 0;
}
div#works_s dl dt img {
float: left;
}
div#works_s dl dd {
margin: 5px 0 15px;
padding: 0 0 10px;
border-bottom: #CCC solid 1px;
}
div.image_box {
width: 600px;
height: 450px;
margin: 40px 0 28px 20px;
padding: 0;
text-align: center;
display: inline;
float: left;
position: relative;
}
div.image_box img.badge {
position: absolute;
top: -20px;
right: -20px;
}
div.thumb_box {
width: 898px;
height: 100;
overflow: hidden;
margin: 0;
padding: 0;
}
div.thumb_box p img {
vertical-align: bottom;
}
div.thumb_box ul {
width: 880px;
height: 100%;
overflow: hidden;
margin: 0;
padding: 0 0 0 10px;
list-style: none;
border-bottom: #CCC solid 4px;
border-right: #CCC solid 4px;
border-left: #CCC solid 4px;
}
div.thumb_box ul li {
width: 100px;
height: 100px;
overflow: hidden;
margin: 0 10px 10px 0;
padding: 0;
display: inline;
float: left;
background: #f6f6f6;
position: relative;
}
div.thumb_box ul li img {
position: absolute;
}
div.thumb_box ul li a:hover img {
opacity:0.7;
filter: alpha(opacity=70);
-ms-filter: "alpha( opacity=70 )";
}
div.free {
width: 898px;
height: 100;
overflow: hidden;
margin: 34px 0 0;
padding: 0;
}
div.free p img {
vertical-align: bottom;
}
div.free div.wrap {
width: 870px;
height: 100%;
overflow: hidden;
margin: 0;
padding: 0 0 20px 20px;
border-bottom: #CCC solid 4px;
border-right: #CCC solid 4px;
border-left: #CCC solid 4px;
}
div#works_s p.back {
margin: 40px 0 0;
text-align: center;
}
div#works_s p.back a:hover img {
opacity:0.7;
filter: alpha(opacity=70);
-ms-filter: "alpha( opacity=70 )";
}