@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:1060px;
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:86px;
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;
z-index:-1;
}

#catchBlc .inner{
padding-top:60px;
height:550px;
background:url(../img/catch_bg.jpg) no-repeat center 60px;
box-shadow:rgba(0,0,0,0.15) 0 5px 7px;
}

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

#catchBlc h1{
padding:38px 0 8px;
}

#catchBlc ul{
margin-top:-80px;
}

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

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

#catchBlc .area{
margin-top:-240px;
padding-right:20px;
text-align:right;
}

/* --------------------------------------------------
followBlc
-------------------------------------------------- */

#followBlc{
position:relative;
padding:0 0 20px 60px;
height:420px;
}

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


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

#catchBlc+.contactBlc{
margin-top:-43px;
}

.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:630px;
margin-top:-8px;
background:url(../img/attention_bg.jpg) no-repeat center top;
text-align:center;
}

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

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


/* --------------------------------------------------
 ownerBlc
-------------------------------------------------- */
#ownerBlc{
background:url(../img/owner_bg.jpg) no-repeat 130% 5px;
}

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

#ownerBlc{
background-position:200% 5px;
}

}

#ownerBlc > h1{
position:relative;
margin-bottom:65px;
padding:24px;
background:#2b5807;
text-align:center;
box-shadow:rgba(0,0,0,0.18) 0 5px 6px;
}

#ownerBlc > h1:after{
position:absolute;
width:0;
height:0;
left:50%;
bottom:-40px;
margin-left:-10px;
content:"";
border:solid 20px transparent;
border-top:#2b5807 solid 20px;
}

#ownerBlc > p{
width:992px;
margin:0 auto 36px;
}

#ownerBlc > ul{
width:920px;
margin:0 auto 36px;
padding:30px 40px;
background-image:url(../img/owner_txt_frm_edge.png),url(../img/owner_txt_frm_edge.png),url(../img/owner_txt_frm_bg.png);
background-repeat:no-repeat,no-repeat,repeat-y;
background-position:left top,left bottom,left top;
}

#ownerBlc .stop{
height:464px;
}

#ownerBlc .stop .inner{
width:1000px;
margin:0 auto;
}

#ownerBlc .stop h1{
padding:15px 0 0 108px;
}

#ownerBlc .stop p{
padding:22px 0 0 40px;
}


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

#pointBlc > h1{
position:relative;
padding:16px 0;
background:#407c0a;
}

#pointBlc > h1:after{
position:absolute;
width:0;
height:0;
left:50%;
bottom:-33px;
margin-left:-9px;
content:"";
border:solid 18px transparent;
border-top:#407c0a solid 15px;
z-index:1;
}

#pointBlc .catch{
margin-bottom:45px;
padding:30px 0 25px;
background:#2b5807;
}

#pointBlc section{
position:relative;
width:1000px;
margin:0 auto 30px;
text-align:left;
box-shadow:rgba(0,0,0,0.2) 0 0 5px;
}

#pointBlc section:before, #pointBlc section: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;
}

#pointBlc section:after{
left:auto;
right:10px;
transform:rotate(0.5deg);
}

#pointBlc section > div{
position:relative;
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;
z-index:2;
}

#pointBlc section > div > h1{
margin-left:-10px;
padding-top:10px;
}

#pointBlc section > div .txt{
padding:25px 0 50px 50px;
}

#pointBlc section:nth-of-type(1) h1,
#pointBlc section:nth-of-type(1) .txt{
float:left;
width:600px;
}

#pointBlc section:nth-of-type(1) ul{
padding:20px 0 10px;
z-index:10;
}

#pointBlc section:nth-of-type(1) li{
display:none;
}

#pointBlc section:nth-of-type(1) li:first-child{
display:block;
}

#pointBlc section:nth-of-type(2) h1,
#pointBlc section:nth-of-type(2) .txt{
width:600px;
}

#pointBlc section:nth-of-type(2) .img{
position:absolute;
top:14px;
right:-20px;
}

#pointBlc section:nth-of-type(3) h1,
#pointBlc section:nth-of-type(3) .txt{
float:left;
width:560px;
}

#pointBlc section:nth-of-type(3) .img{
padding:40px 18px 10px 0;
text-align:right;
}

#pointBlc .staff_arrow{
position:relative;
z-index:1;
}

#pointBlc .staff{
margin-top:-50px;
background:#fff;
text-align:center;
}

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


/* --------------------------------------------------
 methodBlc
-------------------------------------------------- */
#methodBlc{
position:relative;
margin-top:60px;
background:url(../img/method_bg.gif);
z-index:-2;
}

#methodBlc > h1{
padding:28px 0;
background:#2b5807;
text-align:center;
}

#methodBlc > section{
position:relative;
width:940px;
margin:50px auto 65px;
padding:30px;
background:#fff;
box-shadow:rgba(0,0,0,0.2) 0 0 5px;
}

#methodBlc > section:before, #methodBlc > section: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;
}

#methodBlc > section:after{
left:auto;
right:10px;
transform:rotate(0.5deg);
}

#methodBlc > section > div:after{
position:absolute;
width:0;
height:0;
left:50%;
bottom:-180px;
margin-left:-120px;
content:"";
border:solid 120px transparent;
border-top:#2b5807 solid 60px;
}

#methodBlc .img img{
border:#fff solid 5px;
box-shadow:rgba(0,0,0,0.3) 0 0 5px;
}

#methodBlc .img li:nth-of-type(2){
margin:-20px 0 0 10px;
}

#methodBlc .img li:nth-of-type(3){
margin:-50px 0 0 113px;
}

#methodBlc .img li:nth-of-type(2) img:last-child,
#methodBlc .img li:nth-of-type(3) img:last-child{
margin-top:5px;
border:none;
box-shadow:none;
}

#methodBlc > section h1{
float:right;
width:610px;
}

#methodBlc > section .txt{
float:right;
width:610px;
margin-top:20px;
}

#methodBlc > section .txt p{
margin-bottom:20px;
}

#methodBlc > section .txt p:last-of-type{
margin-bottom:0;
}

#methodBlc .last{
margin:90px 0 55px;
padding-top:60px;
background:#fff;
text-align:center;
}


/* --------------------------------------------------
 gainaBlc
-------------------------------------------------- */
#gainaBlc{
height:1388px;
padding:30px 0 50px;
background:url(../img/gaina_bg.jpg) no-repeat center top #061e32;
box-shadow:rgba(0,0,0,0.2) 0 3px 7px;
text-align:center;
}

#gainaBlc > h1{
margin-bottom:90px;
}

#gainaBlc > h1+p{
margin:40px 0;
}

#gainaBlc .catch{
position:relative;
display:inline-block;
margin-top:40px;
padding:0 10px;
font-size:18px;
font-weight:bold;
color:#fff;
background:#061e32;
z-index:1;
}

#gainaBlc .img{
width:920px;
margin:-15px auto 20px;
padding-top:30px;
border-top:#fff solid 1px;
}

#gainaBlc .img img{
border:#fff solid 5px;
}

#gainaBlc .img li{
float:left;
margin-right:10px;
}

#gainaBlc .img li:last-child{
margin-right:0;
}

#gainaBlc .txt li{
margin:35px 0;
color:#fff;
}

#gainaBlc .txt li:last-child{
padding-bottom:0;
}


/* --------------------------------------------------
 managerBlc
-------------------------------------------------- */
#managerBlc{
margin-top:60px;
}

#managerBlc .inner{
position:relative;
width:1000px;
margin:0 auto;
}

#managerBlc p{
text-align:center;
}


/* --------------------------------------------------
 greetingBlc
-------------------------------------------------- */
#greetingBlc{
padding:70px 0 55px;
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:1200px) {

#greetingBlc{
background-position:-100px bottom,center 25px;
}

}

#greetingBlc h1{
padding-left:30px;
text-align:center;
}

#greetingBlc .txt{
width:640px;
margin:75px 0 0 auto;
}


/* --------------------------------------------------
 introduction
-------------------------------------------------- */
#introductionBlc{
margin-top:30px;
text-align:center;
}


/* --------------------------------------------------
 endorseBlc
-------------------------------------------------- */
#endorseBlc{
background:url(../img/endorse_bg.png) repeat-x left 235px;
}

#endorseBlc > h1{
text-align:center;
}

#endorseBlc .frm{
width:922px;
margin:-40px auto 0;
padding:40px;
background:url(../img/endorse_frm_top.png), url(../img/endorse_frm_btm.png),url(../img/endorse_frm_bg.png);
background-repeat:no-repeat, no-repeat, repeat-y;
background-position:left top, left bottom, left top;
}

#endorseBlc section h1{
float:right;
width:555px;
margin-top:-10px;
}

#endorseBlc .txt{
float:right;
width:500px;
padding:20px 0 30px;
}

#endorseBlc .img{
width:360px;
text-align:center;
}

#endorseBlc .img img:first-child{
margin-bottom:10px;
border:#fff solid 5px;
box-shadow:rgba(0,0,0,0.2) 1px 2px 5px;
}


/* --------------------------------------------------
 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{
text-align:center;
}

#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{
float:left;
width:390px;
text-align:center;
}

#introBlc .case li:first-child{
margin:0 5px 0 60px;
padding-right:45px;
background:url(../img/case_arrow.png) no-repeat right 160px;
}

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

/* 防水工事手順 --------------- */
#introBlc .flow{
text-align:center;
}

#introBlc .flow .inner{
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;
text-align:left;
}

#introBlc .flow .list{
width:880px;
margin:0 auto;
padding:10px;
background-image:url(../img/flow_frm_edge.png),url(../img/flow_frm_edge.png),url(../img/flow_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.25) 0 1px 6px;
}

#introBlc .flow table{
width:100%;
}

#introBlc .flow tr:nth-child(even){
background:#e7eddc;
}

#introBlc .flow th{
width:3%;
background:#f39d22;
border-bottom:#fff solid 1px;
text-align:center;
vertical-align:middle;
font-size:15px;
font-weight:bold;
color:#fff;
}

#introBlc .flow td{
width:22%;
}

#introBlc .flow td a{
display:block;
padding:4px 12px 4px 8px;
background:url(../img/flow_arrow.png) no-repeat 97% center;
font-size:13px;
text-decoration:none;
}

#introBlc .flow tr:nth-child(3) td:last-child a{
font-size:11px;
letter-spacing:0;
}

/* 防水工事手順ギャラリー --------------- */
#introBlc .gallery{
width:880px;
margin:20px auto 0;
padding:10px;
background-image:url(../img/flow_frm_edge.png),url(../img/flow_frm_edge.png),url(../img/flow_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.25) 0 1px 6px;
}

/* 推薦 --------------- */
#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;
}

/* --------------------------------------------------
 FOOTER LINK追加
-------------------------------------------------- */
#footer a {
color: #fff !important;
}
#footer ul {
list-style-type: none;
}
#footer li {
display: inline-block;
margin-left: 3px;
margin-right: 3px;
margin-bottom: 5px;
}


/* --------------------------------------------------
 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;
margin-bottom:-60px;
line-height:260px;
font-size:50px;
font-weight:bold;
color:#222 !important;
text-decoration:none;
text-align:center;
}