@charset "utf-8";


/* ------------------------------------------------------------------------------
 Typography
-------------------------------------------------------------------------------*/
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;500;700&display=swap');
@import url('https://fonts.googleapis.com/css?family=Open%20Sans:300,400,500,700');

.min{
font-family: "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "ＭＳ 明朝", "メイリオ", Meiryo, "游ゴシック", "Yu Gothic", "游ゴシック体", "YuGothic", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", sans-serif;
}

html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary, time, mark, audio, video {
font-size: 14px;
font-weight: 400;
font-family:'Noto Sans JP', 'メイリオ', Meiryo, "游ゴシック体", "Yu Gothic","ヒラギノ角ゴPro W3", "Hiragino Kaku Gothic Pro", Osaka, Arial, Helvetica, Verdana, sans-serif;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  outline: 0;
}

body {
color: #000;
line-height: 1.3;
}


* { box-sizing: border-box; }
* { margin: 0; padding: 0; }

article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; }
ul { list-style: none; }
blockquote, q { quotes: none; }

blockquote:before, blockquote:after, q:before, q:after {
  content: '';
  content: none;
}

a {
  vertical-align: baseline;
  margin: 0;
  padding: 0;
  background: transparent;
}

img{ max-width: 100%; vertical-align: top; }

a,
a:visited,
a:hover,
a:focus {
text-decoration: none;
-moz-transition: background-color, color, 0.3s;
-o-transition: background-color, color, 0.3s;
-webkit-transition: background-color, color, 0.3s;
transition: background-color, color, 0.3s;
}

/*************************************************************************
 基本設定
*************************************************************************/



/*************************************************************************
 見出し設定
*************************************************************************/
h1,
h2,
h3,
h4,
h5,
h6 { margin: 0; padding: 0; clear: both; line-height: 1.5;}

h1 { font-size: 24px; font-weight:500; text-align: center; }
h2 { font-size: 18px; font-weight:normal; text-align: center; }
h3 { font-size: 114%; font-weight:bold; text-align: center; }
h4 { font-size: 105%;}
h5 { font-size: 105%;}
h6 { font-size: 105%;}

strong,b { font-weight:bold; }




/*
h3 {
margin: 0 0 0 0;
padding: 0 0 5px 0;
font-size: 20px;
font-weight: bold;
color: #000;
line-height: 1.5;
}
h4 {
}
*/
h5 {
/*text-transform: uppercase;*/
}




/*************************************************************************
 ブロック・インライン設定
*************************************************************************/
ul,
ol,
li { list-style: none; margin: 0; padding: 0;}

p,
dl,
table { margin: 0; padding: 0; }


p {
font-size: 1em;
line-height: 1.5;
 padding:0 0 20px 0;
}

/*************************************************************************
 レスポンシブ設定
*************************************************************************/
@media screen and (max-width: 768px) {/*768以下全部 768をspに含める*/
.pc-on { display: none  !important;}
.sp-on { display: inline-block !important; }
}

@media screen and (min-width: 769px) {/*769以上全部*/
.pc-on { display: inline-block !important; }
.sp-on { display: none !important;}
}





/* ==========================================================================
$Header nav
========================================================================== */
#header {
width: auto;
margin: 0 auto 0;
}

@media screen and (max-width: 1000px) {
#header {
 position: fixed;
 width: 100%;
 top:0;
 left: 0;
 z-index: 999;
}
}

#header img { max-height: 45px; }

#header .header-content {
position: relative;
margin: 0 auto;
padding: 0;
background: #efeadf;
height: 45px;
}

#header .logo {
 position: relative;
 padding:0 55px 0 0;
 height:30px;
 bottom: 0;
 left:0;
 z-index: 9999;
}

.navigation.open {
opacity: 0.99;
visibility: visible;
-moz-transition: opacity 0.5s;
-o-transition: opacity 0.5s;
-webkit-transition: opacity 0.5s;
transition: opacity 0.5s;
}

.navigation {
position: fixed;
top:0px;
width: 100%;
background-color: rgba(94, 88, 59, 0.99);
box-shadow: 2px 3px 2px 0px rgba(200,200,200,0.2);
z-index: 999;
}

.fixed .navigation {
position: fixed;
top: 0px;
-moz-transition: 0.5s;
-o-transition: 0.5s;
-webkit-transition: 0.5s;
transition: 0.5s;
}

.navigation ul {
display: inline-block;
margin: 0 0 0 170px;
}

.navigation li{ 
display: inline-block; 
margin: 3px ;
margin-left: 10px;
}
.navigation li a {
display: inline-block;
padding: 10px 5px;
color: #4f2e03;
}

.navigation a:hover,
.navigation a.active { font-weight: 500; }


/* -------------------------------------------------
 768以下で出てくるメニュー
------------------------------------------------- */
/*@media screen and (max-width: 768px) { 
.nav-toggle {
display: block;
}
}*/

.navigation {
position: fixed;
width: 320px;
height: 100%;
padding: 50px 15px 0;
top: 0px;
right: -340px;
z-index: 99999;
transition: all 0.35s;
-webkit-transition: all 0.35s;
transition: all 0.35s;
visibility: hidden;
opacity: 0;
-webkit-transition: opacity 0.5s, visibility 0s 0.5s;
transition: opacity 0.5s, visibility 0s 0.5s;
}


.navigation.open{
right: 0px;
transition: all 0.35s;
}


.navigation .primary-nav {
width: 100%;
position: relative;
/*
top: 45%;
-moz-transform: translateY(-45%);
-ms-transform: translateY(-45%);
-webkit-transform: translateY(-45%);
transform: translateY(-45%);
*/
}
.navigation ul { 
 height: auto; 
 margin: 0 0 10px 0;
 padding: 5px 0 5px;
 background: #fff;
 }

.navigation li {
display: block;
width:100%;
margin: 0;
padding: 0px;
text-align: center;
background: #fff;
}

.navigation li a {
display: block;
margin: 0 20px;
}

.navigation li+li a { border-top: 1px dashed #ccc; }

.navigation li { position: relative; }

.navigation li::after {
        content: ' ';
        position: absolute;
        top: 50%;
        right: 20px;
        width: 0;
        height: 0;
        border: none;
        border-right: 5px solid transparent;
        border-bottom: 5px solid transparent;
        border-left: 5px solid #AAA;
        border-top: 5px solid transparent;
    }


/* -------------------------------------------------
 ハンバーガーメニュー トグルボタン
------------------------------------------------- */
/*
@media screen and (min-width: 769px) {
.nav-toggle { display: none; }
}
*/

.nav-toggle {
width: 45px;
height: 45px;
overflow: hidden;
position: fixed;
text-indent: 100%;
top: 0px;
right: 0px;
white-space: nowrap;
z-index: 99999;
-moz-transition: all 0.3s;
-o-transition: all 0.3s;
-webkit-transition: all 0.3s;
transition: all 0.3s;
}
.nav-toggle:before, .nav-toggle:after {
border-radius: 2%;
content: "";
height: 100%;
left: 0;
position: absolute;
top: 0;
width: 100%;
-moz-transform: translateZ(0);
-ms-transform: translateZ(0);
-webkit-transform: translateZ(0);
transform: translateZ(0);
-moz-backface-visibility: hidden;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
-moz-transition-property: -moz-transform;
-o-transition-property: -o-transform;
-webkit-transition-property: -webkit-transform;
transition-property: transform;
}
.nav-toggle:before {
background-color: #605431;
-moz-transform: scale(1);
-ms-transform: scale(1);
-webkit-transform: scale(1);
transform: scale(1);
-moz-transition-duration: 0.3s;
-o-transition-duration: 0.3s;
-webkit-transition-duration: 0.3s;
transition-duration: 0.3s;
}
.nav-toggle:after {
background-color: #605431;
background-color: #f00;
-moz-transform: scale(0);
-ms-transform: scale(0);
-webkit-transform: scale(0);
transform: scale(0);
-moz-transition-duration: 0s;
-o-transition-duration: 0s;
-webkit-transition-duration: 0s;
transition-duration: 0s;
}
.nav-toggle span {
background-color: #fff;
bottom: auto;
display: inline-block;
height: 2px;
left: 50%;
position: absolute;
right: auto;
top: 50%;
width: 60%;
z-index: 10;
-moz-transform: translateX(-50%) translateY(-50%);
-ms-transform: translateX(-50%) translateY(-50%);
-webkit-transform: translateX(-50%) translateY(-50%);
transform: translateX(-50%) translateY(-50%);
}
.nav-toggle span:before, .nav-toggle span:after {
background-color: #fff;
content: "";
height: 100%;
position: absolute;
right: 0;
top: 0;
width: 100%;
-moz-transform: translateZ(0);
-ms-transform: translateZ(0);
-webkit-transform: translateZ(0);
transform: translateZ(0);
-moz-backface-visibility: hidden;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
-moz-transition: -moz-transform 0.3s;
-o-transition: -o-transform 0.3s;
-webkit-transition: -webkit-transform 0.3s;
transition: transform 0.3s;
}
.nav-toggle span:before {
top: -4px; /* 3本ライン余白 */
-moz-transform: translateY(-6px) rotate(0deg);
-ms-transform: translateY(-6px) rotate(0deg);
-webkit-transform: translateY(-6px) rotate(0deg);
transform: translateY(-6px) rotate(0deg);
}
.nav-toggle span:after {
top: 4px; /* 3本ライン余白 */
-moz-transform: translateY(6px) rotate(0deg);
-ms-transform: translateY(6px) rotate(0deg);
-webkit-transform: translateY(6px) rotate(0deg);
transform: translateY(6px) rotate(0deg);
}
.nav-toggle.close-nav:before {
-moz-transform: scale(0);
-ms-transform: scale(0);
-webkit-transform: scale(0);
transform: scale(0);
}
.nav-toggle.close-nav:after {
-moz-transform: scale(1);
-ms-transform: scale(1);
-webkit-transform: scale(1);
transform: scale(1);
}
.nav-toggle.close-nav span {
background-color: rgba(255, 255, 255, 0);
}
.nav-toggle.close-nav span:before, .nav-toggle.close-nav span:after {
background-color: #fff;
}
.nav-toggle.close-nav span:before {
top: 0px; /* 3本ライン余白 */
-moz-transform: translateY(0) rotate(45deg);
-ms-transform: translateY(0) rotate(45deg);
-webkit-transform: translateY(0) rotate(45deg);
transform: translateY(0) rotate(45deg);
}
.nav-toggle.close-nav span:after {
top: 0px; /* 3本ライン余白 */
-moz-transform: translateY(0) rotate(-45deg);
-ms-transform: translateY(0) rotate(-45deg);
-webkit-transform: translateY(0) rotate(-45deg);
transform: translateY(0) rotate(-45deg);
}

}


/* ==========================================================================
$att
.attention { 
display: inline-block;
margin: 0;
padding: 0;
    background: -webkit-linear-gradient(transparent 60%, #FFFF99 60%);
    background: -o-linear-gradient(transparent 60%, #FFFF99 60%);
    background: linear-gradient(transparent 60%, #FFFF99 60%);
}

.yellow{
  display: inline;
  padding: 0;
    background: -webkit-linear-gradient(transparent 60%, #FFFF99 60%);
    background: -o-linear-gradient(transparent 60%, #FFFF99 60%);
    background: linear-gradient(transparent 60%, #FFFF99 60%);
}

========================================================================== */

/* ------------------------------------------------------------------------------
ボタン
.btn {
display: inline-block;
margin-top: 20px;
padding: 1.5% 3%;

background: #f0f0f0;
border-radius: 0px;
border: 1px solid rgba(0, 0, 0, 0.2);

text-transform: uppercase;
color: #2a2a2a;
font-size: 16px;
font-weight: 400;
letter-spacing: 1px;
}

.btn:hover, .btn:focus {
background-color: #2a2a2a;
color: #fff;
}
-------------------------------------------------------------------------------*/


/* ------------------------------------------------------------------------------
 flex-box
-------------------------------------------------------------------------------*/
.flex-box {
display: flex;
flex-direction: row;
justify-content: center;
/*item-boxの装飾*/
 margin: 0 auto ;
 padding: 0;
}

.flex-box .fbox {
padding: 0;
width:30%;
max-width: 470px;
margin: 0 10px;
}


/* ------------------------------------------------------------------------------
各詳細ページ共通
-------------------------------------------------------------------------------*/
/*
.contents {
margin-top: -57px;
padding-top: 57px;
}
*/

.bkk{
 padding: 30px 15px;
}

.center { text-align: center; }
.left {text-align: left;}
.inline-b { display: inline-block; vertical-align: top; }



/* ------------------------------------------------------------------------------
 h1 h2
-------------------------------------------------------------------------------*/
/*
box01 強みってなんですか？
box02 施工事例
box03 3つの強み
box04 アクセス
box05 取り扱いメーカー
inq 問い合わせ
*/


#box01 h1 { color: #4f2e03; }
#box01 h2 { color: #4f2e03; font-weight: 500;}


#box02 h1 { color: #5e583b; }
#box02 h2 { color: #5e583b; margin-bottom: 40px; }

#box03 h2 { color: #386012; }
#box03 h1 { color: #6ba82d; margin-bottom: 10px; }

#box04 h1 { color: #605431; margin-bottom: 40px; }
#box04 p { color: #605431; }


/* ------------------------------------------------------------------------------
 トップ ベース設定
-------------------------------------------------------------------------------*/

#main .main-img { 
 width: 100% ;
 overflow: hidden;
 background: url('../img/main.jpg') no-repeat center bottom;
 background-size: cover;
 /*
 width: calc(100% - 320px);
 */
}
#main .inq-img img { width: 45%; margin: 0 5px 14px; }

@media screen and (max-width: 768px) {
 #main .inq-img { display: none; }
}


/* ------------------------------------------------------------------------------
 お問合せ各設定
-------------------------------------------------------------------------------*/


/*メインビジュアル部分　tellだけspan内の文字設定が違う→inq.tellで設定
----------------------------------------------------------------*/
.inq * { font-weight: 500; color: #000; }
.inq a { display: block;}

.inq span {
 display: inline-block;
 margin: 3px 0 0;
 padding: 0px 10px;
 background: rgba(255, 255, 255, 0.50);
 font-size: 14px;
 border-radius: 5px;
}

.inq.tell i:before,
.inq.mail i:before,
.inq.line i:before,
#inq .tell i:before,
#inq .mail i:before,
#inq .line i:before {
 position: absolute;
 vertical-align: middle;
 width: 40px;
 height: 40px;

 top: 0px;
 left:0px;
 margin: 5px 0 0 10px;

 background: ;
 background-size: contain;
 content: " ";
}


.mail a,
.line a,
.tell a     { position: relative; width: 100%; margin: 0px auto 10px; padding: 3px 0 5px 60px; }

.mail     a { background: #ffad33; }
.line     a { background: #38d277; }
.tell     a { background: #b4d0ef; }
.inq-hojo a { background: #f2e4ba; }

.mail     a:hover { background: #ff9f0f; }
.line     a:hover { background: #34c26e; }
.tell     a:hover { background: #9dbbe1; }
.inq-hojo a:hover { background: #f2e4ba; }

.mail     a { border-radius: 25px; }
.line     a { border-radius: 25px; }
.tell     a { border-radius: 40px; }
.inq-hojo a { border-radius: 25px; }

.mail i:before { width: 50px; height: 50px; background: url(../img/icon-mail.svg) no-repeat center top; }
.line i:before { width: 50px; height: 50px; background: url(../img/icon-line.svg) no-repeat center top; }
.tell i:before { width: 50px; height: 50px; background: url(../img/icon-tell.svg) no-repeat center top; }


.add, .add * { color: #fff; font-size: 14px; }



/* ハンバーガーメニュー内での形
----------------------------------------------------------------*/
.navigation .mail i:before,
.navigation .line i:before,
.navigation .tell i:before { width: 40px; height: 40px;}

.navigation .tell i:before { margin-top: 12px; margin-bottom: 5px; }

.navigation .inq.tell span { padding: 0px 5px 0px 5px; }



/* お問合せsectionでの形
----------------------------------------------------------------*/
#inq .box { max-width: 1166px; margin: 0 auto; padding: 0; text-align: center; }

/* 補助金画像のオンオフ */
.hojo-pc { display: none; }
.hojo-sp { display: inline-block; }


/* 補助金・電話・メール・LINEの外枠 */
#inq .inq-hojo,
#inq .inq-item {
 margin: 0 auto;
 width: 360px;
 max-width: 92%;/*黄色ラベルが左にはみ出す余白が必要なので92％より大きくしないこと*/
}
#inq .inq-hojo {
 position: relative;
 margin-bottom: 10px;
 padding-bottom: 10px;
 border: 1px solid #ccc;
}

#inq .inq-item { padding: 10px 0 0; }
/* 補助金・電話・メール・LINEの外枠 */

/* 電話にカーソル */
#inq .inq-item .here {
 position: relative;
 top: 90px;
 right: -50%;
 z-index: 9;
}
#inq .inq-item .here i {
 transform: translateY(0px) rotate(-15deg);
 font-size: 30px;
 color: #333;
}

/* 黄色い無料ラベル */
#inq .inq-item { position: relative; }
#inq .inq-item .free {
 position: absolute;
 display: inline-block;
 width: 64px;
 height: 64px;
 padding: 6px 0px 0;
 border-radius: 50px;
 top: 20px;
 right: -25px;
 background: yellow;
 z-index: 99;
 font-size: 12px;
}
#inq .inq-item .free b { font-size: 16px; }
/* 黄色い無料ラベル */


/* 電話の枠 */
#inq .tell a {
 width:480px;
 max-width: 100%;
 min-height:100px;
 padding: 18px 0 10px 0;
 margin: 0 auto 20px;text-align: center;
}
/* 電話の枠 */

/* メールとLINEと補助金ボタンの枠 */
#inq .mail ,
#inq .line { display: inline-block; width: 48%; }
#inq .mail { margin-right: 5px; }

#inq .mail a ,
#inq .line a  {
 width:100%;
 height:60px;
 margin-bottom: 20px;
 padding: 18px 0 0 40px;
 border-radius: 40px;
 font-size: 14px;
}

@media screen and (max-width: 375px) {
#inq .mail ,
#inq .line { display: block; width: 70%; margin: 0 auto 10px; }
#inq .mail { margin: 0 auto 10px; }
}


#inq .inq-hojo a {
 position: absolute;
 width:12em;
 height:50px;
 margin: 0 auto;
 padding: 15px 25px 0;

 bottom: 10px;
    left: 50%;
    transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);

 border-radius: 40px;
 font-size: 14px;
 text-align: center;
}
/* メールとLINEと補助金ボタンの枠 */

#inq .tell i:before { width: 60px; height: 60px; margin:37px 10px 0px 0; }
#inq .mail i:before { width: 40px; height: 40px; }
#inq .line i:before { width: 40px; height: 40px; }


#inq .tell i:before,
#inq .mail i:before,
#inq .line i:before { display: inline-block; margin: 10px 10px 0px 12px; }

#inq .tell i:before { width: 60px; height: 60px; margin:37px 10px 0px 0; }
#inq .mail i:before { width: 40px; height: 40px; }
#inq .line i:before { width: 40px; height: 40px; }

#inq .tell a { font-size: 18px; border-radius: 30px; }
#inq .tell b { font-size: 32px; }
#inq .tell span { margin: 3px 0 0; padding: 5px; }


/* PCの設定
----------------------------------------------------------*/
@media screen and (min-width: 769px) {
 /* 電話にカーソル 消す */
#inq .inq-item .here { display: none; }
a[href^="tel:"] { pointer-events: none; }
}


@media screen and (min-width: 1100px) {
#inq .box { max-width: 1166px; border: 1px solid #ccc; }

 
/* 補助金画像のオンオフ */
.hojo-pc { display: inline-block; }
.hojo-sp { display: none; }

/* 補助金・電話・メール・LINEの外枠 */
#inq .inq-hojo,
#inq .inq-item {
 display:inline-block;
 vertical-align: top;
 width: 580px;
 max-width: 49%;
}
#inq .inq-item { padding: 30px 0 0; }
#inq .inq-hojo { margin-bottom: 0px; border: none; }

#inq .inq-hojo a {
 height:60px;
 bottom: 16px;
 padding-top: 18px;
 }
/* 補助金・電話・メール・LINEの外枠 */



/*黄色い無料ラベル*/
#inq .inq-item .free {
 width: 100px;
 height: 100px;
 top:-20px;
 right: -20px;
 padding: 15px 15px 0;
 font-size: 16px;
}
#inq .inq-item .free b { font-size: 22px; }
/*黄色い無料ラベル*/

 
#inq i:before { }

/* メールとLINEと補助金ボタンの枠 */
#inq .mail ,
#inq .line { width:230px; }
#inq .mail a ,
#inq .line a ,
#inq .inq-hojo a { font-size: 18px; }
/* メールとLINEと補助金ボタンの枠 */

/* 電話の枠 */
 #inq .tell a { padding-bottom: 20px; }
 #inq .tell i:before { margin:40px 10px 0px 30px; }
 #inq .tell b { font-size: 38px; font-weight: 600; color: #333; }
 #inq .tell span { font-size: 100%; }
/* 電話の枠 */

}
/* PCの設定ここまで
----------------------------------------------------------*/




/* ------------------------------------------------------------------------------
 聞きました！
-------------------------------------------------------------------------------*/
#box01 .bkk { background: #fcf3e3; }

#box01 { color: #4f2e03; }

#box01 h1 img { max-height:155px; width: auto; }

#box01 .read-box { margin: 40px auto 0; text-align: center; }
#box01 .read {
 display: inline-block;
 text-align: left;
}

#box01 h2 { font-size: 20px; }
#box01 h2 {
display: inline;
margin: 0;
padding: 0 5px 5px 5px;
    background: -webkit-linear-gradient(transparent 60%, #FFFF99 10%);
    background: -o-linear-gradient(transparent 60%, #FFFF99 10%);
    background: linear-gradient(transparent 60%, #FFFF99 10%);
}

#box01 * { font-weight: 500; }

#box01 .read p { padding: 20px 0 0 5px; }

#box01 .read p.end { padding-bottom: 40px; }

#box01 .read span {

 /*
display: inline;
    background: -webkit-linear-gradient(transparent 70%, #ffffff 10%);
    background: -o-linear-gradient(transparent 70%, #ffffff 10%);
    background: linear-gradient(transparent 70%, #ffffff 10%);
 */
}
@media screen and (max-width: 600px) {
#box01 h1 img { max-height:100px; width: auto; }
}


/* ------------------------------------------------------------------------------
 Works 施工事例
-------------------------------------------------------------------------------*/

.work {
	-moz-box-shadow: 0 0 0 1px #fff;
	-webkit-box-shadow: 0 0 0 1px #fff;
	box-shadow: 0 0 0 1px #fff;
	overflow: hidden;
	position: relative;
 display: inline-block;
 width:80%;
 max-width: 300px;
 margin: 0 10px 40px;
}

.work-box a { position: relative; z-index: 0; }
.work-title { position: relative; z-index: 1; }

#cat a { display: inline-block; width: 48%; max-width: 260px; padding: 0 10px ; }
#cat a img { width:100%; }

a.all-link { display: inline-block; margin: 40px auto 10px; padding: 15px; width: 600px; max-width: 80%; background: #5e583b; color: #fff; border-radius: 50px; font-size: 22px; }

#maker img { max-width: 45%; }

/* work img 拡大の動き */
.work img {
	width: 100%;
	height: 100%;
}
.work .overlay {
	background: rgba(255, 255, 255, 0.2);
	height: 100%;
	left: 0;
	opacity: 0;
	position: absolute;
	top: 0;
	width: 100%;
	-moz-transition: opacity, 0.3s;
	-o-transition: opacity, 0.3s;
	-webkit-transition: opacity, 0.3s;
	transition: opacity, 0.3s;
}
.work .overlay-caption {
	position: absolute;
	text-align: center;
	top: 50%;
	width: 100%;
	-moz-transform: translateY(-50%);
	-ms-transform: translateY(-50%);
	-webkit-transform: translateY(-50%);
	transform: translateY(-50%);
}
.work h5, .work p, .work img {
	-moz-transition: all, 0.5s;
	-o-transition: all, 0.5s;
	-webkit-transition: all, 0.5s;
	transition: all, 0.5s;
}
.work h5, .work p {
	color: #fff;
	margin: 0;
	opacity: 0;
}
.work span {
	font-size: 45px;
}
.work h5 {
	margin-bottom: 5px;
	-moz-transform: translate3d(0, -200%, 0);
	-ms-transform: translate3d(0, -200%, 0);
	-webkit-transform: translate3d(0, -200%, 0);
	transform: translate3d(0, -200%, 0);
}
.work p {
	-moz-transform: translate3d(0, 200%, 0);
	-ms-transform: translate3d(0, 200%, 0);
	-webkit-transform: translate3d(0, 200%, 0);
	transform: translate3d(0, 200%, 0);
}
.work-box:hover img {
	-moz-transform: scale(1.2);
	-ms-transform: scale(1.2);
	-webkit-transform: scale(1.2);
	transform: scale(1.2);
}
.work-box:hover .overlay {
	opacity: 1;
}
.work-box:hover .overlay h5, .work-box:hover .overlay p {
	opacity: 1;
	-moz-transform: translate3d(0, 0, 0);
	-ms-transform: translate3d(0, 0, 0);
	-webkit-transform: translate3d(0, 0, 0);
	transform: translate3d(0, 0, 0);
}



/* ------------------------------------------------------------------------------
 3つの強み
-------------------------------------------------------------------------------*/
#box03 .bkk { background: #deeace; }
.item-box { text-align: center; }
#box03 .item-box img { max-width: 75%; }


@media screen and (min-width: 768px) {
 #box03 .item-box img { max-width: 100%; }
}




/* ------------------------------------------------------------------------------
 page-top
-------------------------------------------------------------------------------*/
#page-top {
    position: fixed;
    padding: 0;
    bottom: 0;
    right: 0px;
    z-index: 99999;
}

#page-top i { display: block; padding: 0 0 5px; font-size: 22px; }

#page-top a {
    display: block;
    padding: 15px 15px 15px;
    text-align: center;
    border: 1px solid #ccc;
    background-color: rgba( 96,84,49, 1.0 );
    color: #fff;
 font-size: 12px;
}
#page-top a:hover {
    text-decoration: none;
    background-color: rgba( 97,193,190, 0.9 );
color: #fff;
}




/* ------------------------------------------------------------------------------
	Footer
-------------------------------------------------------------------------------*/
#footer * { color: #fff; }
#footer .bkk {
 color: #fff;
 background-color: #33240b;
 line-height: 1.6;
}
.copyright { padding: 5px; }

@media screen and (min-width: 1100px) {
#footer .info-box { padding-left: 40px; }
}

#footer .par50{
 display: inline-block;
 width: auto;
 margin: 0 0 20px 10px;
 vertical-align: top;
}

#footer .par25 {
 display: inline-block;
 width: 320px;
 max-width: 100%;
 margin: 0 0 20px 10px;
 vertical-align: top;
}


@media screen and (min-width: 769px) {
#footer .par50 { width: 640px; }
}


#footer h2 { font-size: 18px; font-weight: 600; text-align: left; padding-bottom: 10px; }

.footer-logo {
    display: flex;
    align-items: flex-end
}

.footer-logo__mark,.footer-logo__shop-name {
    margin-bottom: 0
}

.footer-logo__mark {
    flex: 2;
    margin-bottom: .5rem
}

.footer-logo img {
    width: 100%;
    height: auto
}

.footer-logo__shop-name {
    flex: 3;
    padding-left: 1rem
}

address {
    text-align: center
}
.footer__heading {
 font-size: 1.8rem;
}
.list--icon_angle-right a::before {
    position: relative;
    display: inline-block;
    margin-right: .1em;
 font-family: "Font Awesome 5 Free";
 font-weight: 900;
 content: "〉";
}

.list--icon_globe a::before {
    position: relative;
    display: inline-block;
    margin-right: 0;
    font-family: "Font Awesome 5 Free";
    content: "\f0ac";
 font-weight: 600;
}

a.icon--open-blank::after {
    position: relative;
    display: inline-block;
    margin-left: .5em;
    font-family: "Font Awesome 5 Free";
    content: "\f2d2";
}

#footer .company-info {
    margin-top: 10px;
    margin-bottom: 10px;
}

dl.company-info__outline { display: ; }
dl.company-info__outline dt { display:inline-block; width: 35%; vertical-align: top; }
dl.company-info__outline dd { display:inline-block; width: 60%; vertical-align: top; }




/* ------------------------------------------------------------------------------
 レスポンシブ
-------------------------------------------------------------------------------*/
/* スマホとPCの間 */
@media screen and (min-width: 768px) {
.bkk{ padding: 60px 15px 40px; }

 #main .inq-img img { width: 30%; margin: 0 5px 14px; }
 .work { width:30%; }
 #cat a { width: 24%; max-width: 340px; }

/* -------------------------
 3つの強み 768以上は横並び
-------------------------*/
.item-box {
display: flex;
flex-direction: row;
justify-content: center;
/*item-boxの装飾*/
 margin: 0 auto ;
 padding: 0;
}

.item-box .item { 
padding: 0;
width:30%;
max-width: 470px;
margin: 0 10px;
}

/* 施工事例のメーカーリンク */
#maker img { width: 24%; max-width: 310px; }
}

/* PC用の設定 1200以上 */
@media screen and (min-width: 1200px) {
h1 { font-size: 32px; font-weight:600; text-align: center; }
h2 { font-size: 20px; font-weight:500; text-align: center; }
h3 { font-size: 114%; font-weight:bold; text-align: center; }
h4 { font-size: 105%;}
h5 { font-size: 105%;}
h6 { font-size: 105%;}

 
#main { max-height: 600px;}
#main .main-img {
 display: inline-block;
 vertical-align: top;
 width: 78% ;
 max-height: 600px;
 overflow: hidden;
 background: url('../img/main.jpg') no-repeat center bottom;
 background-size: cover;
 /*
 width: calc(100% - 320px);
 */
}

#main .inq-img {
 display: inline-block;
 vertical-align: top;
 width: 21.5%;
 padding: 0 10px;
 }

#main .inq-img img {
 width: auto;
 margin: 0;
 }

 #main .inq-img img.menu-inq { margin: 0 0 18px 0; }

/* -------------------------
 聞きました PC
-------------------------*/
#box01 .read-box {
 max-width: 1200px;
 margin: 40px auto 0;
 background: url(../img/box01-main.jpg) no-repeat right top;
 background-size: 48%;
 text-align: left;
}

#box01 .read {
 width: 55%;
 min-width: 800px;
 padding-left: 15px;
 padding-right: 20px;
}

.work {
 width: 400px;
 max-width: 30%;
 }


/* -------------------------
 施工事例 PC
-------------------------*/




}