@charset "UTF-8";

/* --------------------------------------------------
 Base
-------------------------------------------------- */
body,ol,ul,dl,li,dt,dd,table,th,td,input,textarea,select,h1,h2,h3,h4,h5,h6{
color:#222;
font-weight:normal;
font-family:"メイリオ", Meiryo, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
letter-spacing:0.05em;
}

body{
min-width:1000px;
background:#fff;
font-size:16px;
line-height:1.6;
word-wrap:break-word;
}

input,
select{
padding:2px;
}

textarea{
padding:3px;
border:#aaa solid 1px;
}

a:link,
a:visited{
color:#222;
text-decoration:underline;
}

a:hover,
a:active{
color:#222;
text-decoration: none;
}

strong{
font-style:normal;
font-weight:bold;
}

/* 一般ボックス --------------- */
.blcComm{
display:block;
width:1000px;
margin:0 auto;
}

/* 一般シャドウ --------------- */
.shadowComm {
position: relative;
min-height:20px;
box-shadow:rgba(0,0,0,0.2) 0 0 5px;
}

.shadowComm:before, .shadowComm:after{
position:absolute;
width:49%;
height:10px;
left:10px;
bottom:17px;
content:"";
box-shadow:rgba(0,0,0,0.3) 0 20px 15px;
transform: rotate(-0.5deg);
z-index:-1;
}

.shadowComm:after{
left:auto;
right:10px;
transform:rotate(0.5deg);
}

/* クリアーフィックス --------------- */
.clearFix:after{
content: "";
clear: both;
display: block;
}

/* クリアー ------------------------ */
.clear{
clear:both;
}

/* フォーカスで変形 --------------- */
.boxExpand {
transition: all 1s ease-in-out;
border:solid 1px lightgrey;
background:white;
border:#aaa solid 1px;
}

.boxExpand:focus {
outline:none;
border:solid 1px #39c;
box-shadow:#39C 0px 0px 5px;
transition: all 0.5s ease-in-out;
}


/* --------------------------------------------------
 Header
-------------------------------------------------- */
#header{
position:fixed;
top:0;
left:0;
width:100%;
height:60px;
background:#2b5807;
z-index:100;
}

#header > div{
position:relative;
width:1000px;
margin:0 auto;
text-align:left;
}

#header h1{
float:left;
padding-top:8px;
}

#header #hTel{
float:right;
padding-top:8px;
}


/* --------------------------------------------------
 catchBlc
-------------------------------------------------- */
#catchBlc{
position:relative;
padding-top:60px;
height:560px;
background:url(../img/catch_bg.jpg) no-repeat center 60px;
box-shadow:rgba(0,0,0,0.15) 0 5px 7px;
z-index:-1;
}

#catchBlc h1,
#catchBlc p,
#catchBlc ul{
width:1000px;
margin:0 auto;
}

#catchBlc h1{
padding:40px 0 30px;
}

#catchBlc li:nth-child(1){
margin-left:8px;
}

#catchBlc li:nth-child(2){
position:relative;
margin:-260px 0 0 188px;
z-index:10;
}

@media screen and (max-width:1000px) {

#catchBlc li:nth-child(2){
margin:-260px 0 0 170px;
}
}

#catchBlc .area{
margin-top:-185px;
}

#catchBlc .area img{
margin-left:338px;
}


/* --------------------------------------------------
 contactBlc
-------------------------------------------------- */
.contactBlc{
width:960px;
height:250px;
margin:40px auto;
background:url(../img/contact_base.png);
overflow:hidden;
text-align:center;
line-height:1;
}

.contactBlc h1{
padding:28px 0 18px;
}

.contactBlc .guarantee{
float:left;
padding:26px 0 0 30px;
}

.contactBlc .btn{
float:right;
padding:26px 30px 0 0;
}


/* --------------------------------------------------
 attentionBlc
-------------------------------------------------- */
#attentionBlc{
height:677px;
margin-top:-8px;
background:url(../img/attention_bg.jpg) no-repeat center top;
box-shadow:rgba(0,0,0,0.15) 0 5px 7px;
text-align:center;
}

#attentionBlc .catch{
margin-top:6px;
}

#attentionBlc .txt{
width:1000px;
margin:140px auto 0;
text-align:left;
color:#000;
}

#attentionBlc .txt img{
display:block;
margin:28px 0 0 -8px;
}


/* --------------------------------------------------
 partBlc
-------------------------------------------------- */
#partBlc h1{
position:relative;
margin-top:32px;
text-align:center;
z-index:1;
}

#partBlc .txt{
width:860px;
height:200px;
margin:-29px auto 0;
padding:80px 70px 70px;
background:url(../img/part_bg.jpg);
text-align:left;
}


/* --------------------------------------------------
 itemBlc
-------------------------------------------------- */
#itemBlc{
position:relative;
margin-top:60px;
}

#itemBlc h1{
height:170px;
background:#2b5807;
text-align:center;
}

#itemBlc h1 img{
padding-top:21px;
}

#itemBlc .catch{
width:1000px;
margin:-198px auto 126px;
text-align:right;
}

#itemBlc .arrow{
position:absolute;
margin-left:-118px;
top:400px;
left:50%;
z-index:10;
}

#itemBlc .arrow li{
margin-bottom:190px;
}

#itemBlc .flow{
padding:30px 0 80px;
background:url(../img/item_bg.gif);
}

#itemBlc .flow li{
width:1000px;
margin:0 auto 65px;
z-index:1;
}

#itemBlc .flow li:last-child{
margin-bottom:0;
}

#itemBlc .flow li:last-child > div{
padding:40px 60px 60px;
background:url(../img/item04_bg.png) no-repeat center 10px rgba(255,255,255,0.8);
}

#itemBlc .flow li:last-child > div > img{
display:block;
margin:0 auto 40px;
}

#itemBlc .flow li .att{
margin-top:20px;
font-size:75%;
}


/* --------------------------------------------------
 pointBlc
-------------------------------------------------- */
#pointBlc{
background:url(../img/point_bg.jpg) no-repeat center 170px;
text-align:center;
}

#pointBlc > h1{
margin-bottom:50px;
padding:20px 0;
background:#2b5807;
}

#pointBlc ul{
margin-top:45px;
}

#pointBlc li{
width:1000px;
margin:0 auto 30px;
z-index:1;
}

#pointBlc li > div{
background-color:rgba(255,255,255,0.8);
background-image:url(../img/point_frm_edge.png),url(../img/point_frm_edge.png),url(../img/point_frm_bg.png);
background-repeat:no-repeat,no-repeat,repeat-y;
background-position:left top,left bottom,left top;
}

#pointBlc li .img{
float:left;
padding:35px 0 35px 40px;
}

#pointBlc li .txt{
float:right;
width:680px;
padding:40px 30px 40px 0;
text-align:left;
}


#pointBlc+.contactBlc{
margin-top:0;
}


/* --------------------------------------------------
 greetingBlc
-------------------------------------------------- */
#greetingBlc{
margin-top:-50px;
padding:70px 0 30px;
background-image:url(../img/greeting_bg2.png),url(../img/greeting_bg.jpg);
background-repeat:no-repeat,no-repeat;
background-position:left bottom,center 25px;
box-shadow:rgba(0,0,0,0.15) 0 5px 7px;
}


@media screen and (max-width:1000px) {

#greetingBlc{
margin-top:-50px;
padding:70px 0 30px;
background-image:url(../img/greeting_bg2.png),url(../img/greeting_bg.jpg);
background-repeat:no-repeat,no-repeat;
background-position:-100px bottom,center 25px;
box-shadow:rgba(0,0,0,0.15) 0 5px 7px;
}

}

#greetingBlc h1{
text-align:center;
}

#greetingBlc .txt{
width:640px;
margin:68px 0 0 auto;
padding:0 0 30px 30px;
background:rgba(255,255,255,0.5);
border-radius:10px;
}


/* --------------------------------------------------
 introBlc
-------------------------------------------------- */
#introBlc{
margin-top:-26px;
}

#introBlc > h1{
position:relative;
padding:26px 0 114px;
text-align:center;
background:url(../img/intro_stamp.png) no-repeat left top;
z-index:1;
}

#introBlc > div{
margin-top:-90px;
padding:50px 0;
background:url(../img/intro_bg.jpg);
}

/* お客様の声 --------------- */
#introBlc .voice{
position:relative;
width:980px;
margin:0 auto 40px;
padding-left:20px;
z-index:1;
}

#introBlc .voice li{
float:left;
width:250px;
margin-right:30px;
padding:20px 25px;
background-image:url(../img/voice_frm_edge.png),url(../img/voice_frm_edge.png),url(../img/voice_frm_bg.png);
background-repeat:no-repeat,no-repeat,repeat-y;
background-position:left top,left bottom,left top;
box-shadow:rgba(0,0,0,0.2) 0 5px 5px;
line-height:1.4;
}

#introBlc .voice li:last-child{
margin-right:0;
}

#introBlc .voice li > img{
display:block;
margin-bottom:20px;
border:#fff solid 5px;
box-shadow:rgba(0,0,0,0.2) 0 2px 5px;
}

#introBlc .voice .name{
margin-top:20px;
text-align:right;
}

/* 雨どい工事事例 --------------- */
#introBlc .case ul{
width:960px;
margin:-13px auto 0;
padding:30px 0 50px;
background:url(../img/case_bg.gif);
box-shadow:rgba(0,0,0,0.2) 0 0 7px;
}

#introBlc .case li{
text-align:center;
}

#introBlc .case li:first-child:after{
padding:20px 0 10px;
content:url(../img/case_arrow.png);
}

#introBlc .case li img{
display:block;
margin:0 auto;
}

#introBlc .case li img:nth-child(2){
float:left;
margin:20px 0 0 70px;
border:#fff solid 5px;
box-shadow:rgba(0,0,0,0.2) 0 2px 5px;
}

#introBlc .case li img:nth-child(3){
float:right;
margin:20px 70px 0 0;
border:#fff solid 5px;
box-shadow:rgba(0,0,0,0.2) 0 2px 5px;
}

/* レポート --------------- */
#introBlc .report{
position:relative;
width:960px;
margin:40px auto;
z-index:1;
}

#introBlc .report > section{
padding:40px 50px;
background-image:url(../img/case_frm_edge.png),url(../img/case_frm_edge.png),url(../img/case_frm_bg.png);
background-repeat:no-repeat,no-repeat,repeat-y;
background-position:left top,left bottom,left top;
}

#introBlc .report h1{
float:right;
width:460px;
margin-bottom:15px;
padding-left:15px;
border-left:#2b5807 solid 5px;
font-size:140%;
line-height:1;
}

#introBlc .report dl{
float:right;
width:460px;
}

#introBlc .report dt{
float:left;
padding-bottom:10px;
}

#introBlc .report dd{
padding:0 0 10px 6em;
}

#introBlc .report dd li{
display:inline-block;
}

#introBlc .report dd li:before{
content:"・";
}

#introBlc .list li{
display:none;
}

#introBlc .list li:first-child{
display:block;
}

/* 推薦 --------------- */
#introBlc .recommend{
width:960px;
margin:40px auto;
z-index:1;
}

#introBlc .recommend > section{
padding:40px 50px;
background-image:url(../img/case_frm_edge.png),url(../img/case_frm_edge.png),url(../img/case_frm_bg.png);
background-repeat:no-repeat,no-repeat,repeat-y;
background-position:left top,left bottom,left top;
}

#introBlc .recommend h1{
float:right;
width:640px;
margin-bottom:20px;
}

#introBlc .recommend .catch{
float:right;
width:640px;
margin-bottom:20px;
}

#introBlc .recommend .txt{
float:right;
width:640px;
}

#introBlc .recommend > section > img{
display:block;
margin-top:-20px;
}


/* --------------------------------------------------
 discountBlc
-------------------------------------------------- */
#discountBlc{
padding:45px 0;
background:url(../img/discount_bg.jpg) no-repeat center top;
text-align:center;
}

#discountBlc img{
margin-top:35px;
}

#discountBlc h1 img{
margin-top:0;
}


/* --------------------------------------------------
 formBlc
-------------------------------------------------- */
#formBlc{
width:950px;
margin:0 auto;
padding:45px 0 30px;
border:#6f8d56 solid 5px;
border-radius:8px;
background:url(../img/form_bg.jpg) no-repeat center top #274f06;
text-align:center;
}

#formBlc h1{
margin-bottom:22px;
}

#formBlc .txt img{
margin-bottom:25px;
}

#formBlc .att{
color:#fff;
}

#formBlc .att img{
padding-right:10px;
vertical-align:middle;
}

#formBlc table{
width:895px;
margin:30px auto;
}

#formBlc th{
width:30%;
padding:10px 20px;
border:#ccc solid 1px;
vertical-align:middle;
}

#formBlc .required{
background:url(../img/form_icon_required.png) no-repeat 90% center #f7f7f7;
}

#formBlc .option{
background:url(../img/form_icon_option.png) no-repeat 90% center #f7f7f7;
}

#formBlc td{
padding:10px 20px;
background:#fff;
border:#ccc solid 1px;
vertical-align:middle;
font-size:85%;
}

#formBlc td li{
float:left;
margin-right:5px;
padding-top:10px;
}

#formBlc td p{
margin-top:3px;
color:#999;
}

/* テキストボックス */
#formBlc .name,
#formBlc .mail{
width:320px;
}
#formBlc .name:focus,
#formBlc .mail:focus{
width:420px;
}

#formBlc .add{
width:320px;
}
#formBlc .add:focus{
width:420px;
}

#formBlc .postcode,
#formBlc .tel{
width:80px;
}
#formBlc .postcode:focus,
#formBlc .tel:focus{
width:140px;
}

#formBlc .rule{
width:895px;
margin:30px auto;
text-align:left;
color:#fff;
}

#formBlc .rule a{
color:#fff;
}


/* --------------------------------------------------
 companyBlc
-------------------------------------------------- */
#companyBlc h1{
margin:50px 0 30px;
text-align:center;
}

#companyBlc table{
width:960px;
margin:0 auto;
}

#companyBlc th{
padding:13px 18px;
border:#d5d5d5 solid 1px;
background:#f7f7f7;
}

#companyBlc td{
padding:13px 18px;
border:#d5d5d5 solid 1px;
}


/* --------------------------------------------------
 Footer
-------------------------------------------------- */
#footer{
clear:both;
margin-top:50px;
padding:40px 0 60px;
background:#000;
font-size:85%;
color:#fff;
text-align:center;
}

#btmPageTop a{
display:block;
position:fixed;
width:117px;
height:75px;
right:20px;
bottom:20px;
z-index:100;
}


/* --------------------------------------------------
 confirmBlc
-------------------------------------------------- */
#confirmBlc{
position:relative;
width:960px;
margin:50px auto;
padding-top:60px;
text-align:center;
}

#confirmBlc h1{
font-size:200%;
margin-bottom:30px;
color:#2b5807;
}

#confirmBlc .txt{
margin:30px 0;
}

#confirmBlc table{
width:960px;
margin:50px auto;
}

#confirmBlc th{
width:30%;
padding:13px 18px;
border:#d5d5d5 solid 1px;
vertical-align:middle;
}

#confirmBlc .required{
background:url(../img/form_icon_required.png) no-repeat 90% center #f7f7f7;
}

#confirmBlc .option{
background:url(../img/form_icon_option.png) no-repeat 90% center #f7f7f7;
}

#confirmBlc td{
padding:13px 18px;
border:#d5d5d5 solid 1px;
vertical-align:middle;
}

#confirmBlc .error{
width:480px;
margin:50px auto;
padding:30px;
box-shadow:rgba(0,0,0,0.3) 0 0 7px;
border-radius:10px;
text-align:left;
}

#confirmBlc .error li{
margin-left:20px;
list-style-type:disc;
}

#confirmBlc .tel{
width:480px;
margin:50px auto;
padding:30px;
box-shadow:rgba(0,0,0,0.3) 0 0 7px;
border-radius:10px;
}


/* --------------------------------------------------
 SPサイトへ
-------------------------------------------------- */
#spLinkBlockInPc{
display:none;
}

#spLinkBlockInPc a{
display:block;
background:-moz-linear-gradient(center top,#ffffff 0%,#dcdcdc 100%);
background:-webkit-gradient(linear,center top, center bottom,from(#ffffff),to(#dcdcdc));
background:linear-gradient(to bottom,#ffffff 0%,#dcdcdc 100%);
width:100%;
height:200px;
line-height:260px;
font-size:50px;
font-weight:bold;
color:#222 !important;
text-decoration:none;
text-align:center;
}