@charset "utf-8";

.wrap{ width:1060px; margin:0 auto;}
.bg-sand{ background:#fbf8f1}
h2{ font-size:28px; color:#333; letter-spacing:2px; margin-bottom:50px;}
.linkbtn{ display:block; margin:0 auto; width:240px; height:40px; line-height:38px; border:2px #555 solid; color:#555; font-weight:bold; -webkit-border-radius:20px; border-radius:20px; background:url(../img/icon-arrow-darkgray.png) right center no-repeat;}

.header{}
.header-lb{ padding:10px;}
.head-logo{ float:left;}
.head-btn{ float:right;}

.gnavi{ background:#fbf8f1;}
.gnavi li{ display:inline-block; width:150px;}
.gnavi li+li{ margin-left:32px;}
.gnavi li a{ display:block; height:80px; text-align:center; padding-top:14px;}
.gnavi span{ display:block; padding-top:8px; letter-spacing:1px; color:#261f0e;}
.gnavi li:hover{ background:#f7efdb;}

.top-mainimg{ position:relative}
.top-mainimg-copy{ position:absolute; top:0; right:0; bottom:0; left:0; margin:auto; z-index:10;}
#slide{ position:relative; z-index:1;}

section{ padding:50px 0 70px; text-align:center;}

.top-cat-panel{ margin:-15px 0 -15px}
.top-cat-panel li{ display:inline-block; vertical-align:top; width:300px; margin:15px; line-height:1px;}
.top-cat-panel li a{ display:block;}
.top-cat-panel li a img{ width:100%; height:auto;}
.top-cat-panel div{ height:66px; border:1px #ddd solid; border-top:none; text-align:left; padding:10px 16px 0; background:url(../img/icon-arrow-maru.png) right center no-repeat;}
.top-cat-panel li b,.top-cat-panel li span{ display:block; line-height:25px; font-weight:bold; font-size:18px; color:#222;}
.top-cat-panel li span{ line-height:16px; font-size:12px; color:#f50; font-weight:normal;}

.top-faq{}
.faq-list{ width:800px; margin:0 auto;}
.faq-list li{ text-align:left;}
.faq-list li+li{ border-top:1px solid #ccc;}
.faq-list li a{ display:block; font-size:14px; font-weight:bold; padding:15px 0; color:#333; background:url(../img/icon-arrow-gray.png) right center no-repeat; cursor:pointer;}
.faq-list-cat-orange,.faq-list-cat-blue{ color:#fff; display:inline-block; width:94px; height:26px; line-height:26px; font-size:13px; background:#f50; text-align:center; -webkit-border-radius:2px; border-radius:2px; margin-right:25px;}
.faq-list-cat-blue{ background:#4862c3;}

.top-company{ width:860px; margin:0 auto;}
.company-profile{ width:400px; float:left;}
.company-profile li{ padding:13px 0 11px 10px; text-align:left; line-height:20px;}
.company-profile li+li{ border-top:1px solid #ccc;}
.company-profile li span{ display:block; font-size:13px; font-weight:bold; color:#ff5805; margin:0 0 5px -10px;}
.company-map{ float:right; margin-top:20px;}

footer{ background:#ff5602; text-align:center;}
.makerlogo{ padding:20px; background:#fbf8f1;}
.makerlogo li{ display:inline-block;}
.makerlogo-img{ margin:10px;}
.copyright{ padding:15px; color:#fff; font-weight:bold; letter-spacing:2px;}


/* bottom */
.bold-red{ color:#fe3b3b;}
.pt40{ padding-top:40px;}
.mb40{ margin-bottom:40px;}
.center{ text-align:center;}
.right{ text-align:right;}
#bd{ margin:10px 10px 40px; line-height:14px;}
#bd ul li{ display:inline; font-size:11px;}
#bd ul li span{ margin:0 7px;}
.bd-icon{ margin:0 4px -1px 0;}

.con-wrap{ margin-bottom:70px;}
.con-wrap h2{ text-align:center;}
.con-wrap section{ width:900px; margin:0 auto; padding:35px 45px 45px; text-align:left; background:#fffdf2; -webkit-border-radius:20px; border-radius:20px;}
.con-wrap section+section{ margin-top:40px;}
.con-wrap h3{ background:url(../img/icon-bottomtitle.png) left center no-repeat; padding:12px 0 10px 17px; font-size:20px; border-bottom:1px solid #ff4e00; margin-bottom:30px;}
.con-wrap h4{ border-left:5px solid #ff4e00; padding:2px 0 0 13px; margin-bottom:20px;}
.con-wrap section p{ line-height:24px;}
.con-wrap section p+p{ margin-top:20px;}
.coution{ background:#fff; -webkit-border-radius:20px; border-radius:20px; padding:30px 35px 15px; margin-top:20px; border:1px solid #fff4aa;}
.coution p{ margin:10px !important;}

.procedure-img-l{ float:left; margin:0 40px 10px 0;}
.procedure-flow{}
.procedure-flow+.procedure-flow{ margin-top:50px;}
.procedure-flow h4{ font-size:18px; margin:0 auto 25px; border:none; padding:0;}
.procedure-flow h4 span{ background:#ff4e00; padding:2px 10px; color:#fff; -webkit-border-radius:5px; border-radius:5px; margin-right:13px; font-size:16px;}
.procedure-flow-li li{ list-style-type:circle; margin:3px 20px 16px; font-weight:bold; line-height:24px;}

.payment-how{ text-align:center; margin-top:20px;}
.payment-how li{ display:inline-block; width:350px; margin:5px 20px 15px; padding:25px 30px; background:#fff; -webkit-border-radius:15px; border-radius:15px; vertical-align:top; text-align:left;}
.payment-how li img{ width:100%; height:auto; margin-bottom:20px;}

h3#rinnai,h3#noritz,h3#purpose{ width:96%; margin:0 auto 20px;}
.error-code{ border-spacing:0; border:1px solid #ccc; width:96%; margin:0 auto 40px;}
.error-code th{ width:12%; padding:10px 0; border:1px solid #ccc; background:#333; color:#fff;}
.error-code th:nth-child(2){ width:35%;}
.error-code th:nth-child(3){ width:53%;}
.error-code td,.error-code2 td{ padding:10px; border:1px solid #ccc;}
.error-code tr td:nth-child(1),.error-code2 tr td:nth-child(1){ text-align:center;}
.error-code tr:nth-child(odd),.error-code tr:nth-child(odd){ background:#f5f5f5;}

.error-code2{ border-spacing:0; border:1px solid #ccc; width:96%; margin:0 auto 40px;}
.error-code2 th{ width:26%; padding:10px 0; border:1px solid #ccc; background:#333; color:#fff;}
.error-code2 tr:nth-child(1) th:nth-child(2){ width:30%;}
.error-code2 tr:nth-child(1) th:nth-child(3){ width:44%;}
.error-code2 tr:nth-child(2) th{ width:17%;}
.error-code2 tr:nth-child(2) th:nth-child(2){ width:9%;}

.anser{ display:block; width:100%; background:#fff; margin:0 auto 30px; padding:20px 30px; display:none; -webkit-border-radius:20px; border-radius:20px; border:1px solid #fff4aa; line-height:24px;}

/* wp,sp */
#wp-nav{ position:fixed; top:-200px; left:0; z-index:100; background:#fff; box-shadow:0 0 15px rgba(0,0,0,0.15)}
#wp-nav.scroll{ top:0;}

.sp{ display:none !important;}


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

.pc{ display:none;}
.sp{ display:block !important;}
.wrap{ width:100%;}
#wp-nav{ top:-119px;}

h2{ font-size:28px; color:#333; letter-spacing:2px; margin-bottom:40px;}

.header-lb{ padding:3px 10px;}
.head-logo img,.head-btn img{ height:50px; width:auto;}

.gnavi{ background:#fbf8f1;}
.gnavi li{ width:33.3%; border-bottom:1px #e7ddc6 solid; border-right:1px #e7ddc6 solid;}
.gnavi li+li{ margin:0;}
.gnavi li a{ height:24px; text-align:left; padding:0 0 0 4px; line-height:24px; font-size:11px;}
.gnavi li a img{ height:10px; width:auto; margin-right:3px;}
.gnavi span{ display:inline; padding-top:0; letter-spacing:0; color:#7f3f00;}

.top-mainimg img{ width:160%; height:auto; margin:0 -30%;}
.top-mainimg-copy{ width:80% !important; margin:auto !important;}

section{ padding:50px 0;}

.top-cat-panel{ margin:-25px 0;}
.top-cat-panel li{ width:43%; display:inline-block; margin:2%;}
.top-cat-panel div{  padding:10px 0 0 5px; background-size:18px; height:58px}
.top-cat-panel li b,.top-cat-panel li span{ line-height:20px; font-size:14px;}
.top-cat-panel li span{ line-height:14px; font-size:8px;}

.top-faq{ padding:50px 0 70px; text-align:center;}
.top-faq h2 img{ width:70%; height:auto;}
.faq-list{ width:85%; padding-bottom:30px;}
.faq-list li{ padding:5px 0 5px 10px; line-height:18px;}
.faq-list li a{ display:block; font-size:14px; font-weight:bold; padding:10px 20px 10px 0; color:#333; background-size:15px;}
.faq-list-cat-orange,.faq-list-cat-blue{ color:#fff; display:block; width:80px; height:18px; line-height:18px; font-size:10px; margin-bottom:7px; margin-left:-10px;}

.top-company{ width:100%;}
.company-profile{ width:85%; float:none; margin:0 auto;}
.company-profile li{ padding:13px 10px 11px; text-align:left; line-height:20px;}
.company-profile li+li{ border-top:1px solid #ccc;}
.company-profile li span{ display:block; font-size:13px; font-weight:bold; color:#ff5805; margin:0 0 5px -10px;}
.company-map{ float:none; margin-top:0;}
.company-map img{ width:65%; height:auto; margin-top:-30px;}

.makerlogo{ padding:20px 2%;}
.makerlogo li{ width:30%; margin:0 1%;}
.makerlogo-img{ margin:0; width:100%; height:auto;}


/* bottom */
.img100{ width:100%; height:auto;}
#bd{ margin:6px 7px 40px; line-height:14px;}
#bd ul li{ display:inline; font-size:11px;}
#bd ul li span{ margin:0 5px;}

.con-wrap{ margin-bottom:50px;}
.con-wrap h2{}
.con-wrap section{ width:96%; padding:20px 30px 30px;}
.con-wrap section+section{ margin-top:40px;}
.coution{ padding:25px 25px 20px;}

.procedure-img-l{ float:none; margin:0 auto 20px; width:100%; height:auto;}
.procedure-flow h4{ font-size:18px; margin-bottom:25px;}
.procedure-flow h4 span{ display:block; width:80px; letter-spacing:2px; text-align:center; font-size:15px; margin:0 0 10px -10px;}

.payment-how{ text-align:center; margin-top:20px;}
.payment-how li{ display:block; width:100%; margin:5px auto 15px; padding:25px 30px;}


}