@charset "utf-8";


/*************************************
　　cssリセット
*************************************/
html,body,h1,h2,h3,h4,ul,li,dl,dt,dd,table,tr,th,td,p{
  padding: 0;
  margin: 0;
  line-height: 1;
  font-family:"Hiragino Kaku Gothic ProN",Meiryo, sans-serif;
}

ul,li{
  list-style: none;
}

img{
  border: none;
  vertical-align: bottom;
  max-width: 100%;
  height: auto;
  display: block;
}

a{
  color: inherit;
  text-decoration: none;
}

table{
  border-collapse: collapse;
}

/*************************************
　　共通css
*************************************/
body{
  color:#44403f;
  font-size: 0.95em;
}

.container{
  margin: 0 auto;
  max-width: 960px;
  padding: 0 10px;
}

.catch,.service,.flow{
  padding: 80px 0;
}


.works{
  padding-top: 80px;
}


/*メインの固定した背景の指定*/
main{
  background:url(../img/back01.jpg)no-repeat center center/cover;
  background-attachment: fixed;
  z-index: 2;
}

/*コンテンツのタイトルh2の指定*/
.content{
  text-align: center;
  padding: 35px 0;
  margin-bottom: 30px;
  font-size: 3.5em;
  font-weight:lighter;
  font-family: 'Raleway', sans-serif;
  letter-spacing: 0.3em;
  color: #83A84A;
  background: url(../img/back_title01.png)no-repeat center center/cover;
}

/*コンテンツのh2の下の説明文の指定*/
.note{
  text-align: center;
  font-size: 1.4em;
  margin-bottom: 50px;
  letter-spacing: 0.2em;
  font-family: 'Hina Mincho', serif;
  line-height: 1.5;
}

/*brを消す*/
.sp_br{
  display: none !important;
}
.sp_br2{
  display: none !important;
}
.sp_br3{
  display: none !important;
}
.sp_br_x{
  display: none !important;
}

/*************************************
　　ヘッダー
*************************************/
.header{
  box-sizing: border-box;
  display: flex;
  justify-content: space-between;
  background-color: rgb(255, 255, 255,0.8);
  box-shadow: 0px 4px 4px #44403f;
height:90px;

  /*topに固定*/
  position: sticky;
  top: 0px;
  z-index: 5000;

}

.header_logo{
  padding: 0 30px;
  background: url(../img/back01.jpg)no-repeat left top/cover;
}

.header_logo h1{
  padding-top: 10px;
  max-width: 300px;
}
  
.site_pcnav{
  padding-top: 20px;
  margin-left: 150px;
}

.site_pcnav p{
  margin-bottom: 10px;
  text-align: right;
  font-size: 1.1em;
  font-family: 'Hina Mincho', serif;
}
/*ヘッダーのメール部分*/
.head_mail{
  color: #fff;
  background-color:#344E41;
  padding: 8px 10px 0;
}

.head_mail p{
 font-size: 0.9em;
}

.icon_head_mail{
  width: 50px;
 margin: 0 auto;
}

.head_mail:hover{

  background-color:#9B5839;
  transition: 300ms;

}


/*************************************
　　pcナビ 
*************************************/
.pcnav ul{
display: flex;
text-align: right;
}

.pcnav a{
  display: block;
  padding:5px 20px;
  font-family: 'Raleway', sans-serif;
  font-size: 1.1em;
  color:#344E41;
  position: relative;
}

.pcnav  li.current a,
.pcnav  li a:hover{
	color:#9B5839;
}

  .pcnav a::after {
    content: '';
    /*絶対配置で線の位置を決める*/
    position: absolute;
    bottom: 0;
    left: 10%;
    /*線の形状*/
    width: 80%;
    height: 2px;
    background:#9B5839;
    /*アニメーションの指定*/
    transition: all .3s;
    transform: scale(0, 1);/*X方向0、Y方向1*/
    transform-origin: center top;/*上部中央基点*/
}

.pcnav li.current a::after,
.pcnav li a:hover::after {
    transform: scale(1, 1);/*X方向にスケール拡大*/
}


/*************************************
　　spボタン
*************************************/
.spbtn{
  display: none;
}

/*************************************
　　spナビ 
*************************************/
.spnav{
  display: none;
}

/*************************************
　　TOPへ戻るボタン 
*************************************/
.topbtn{
  width:70px;
  height:70px;

  background-color: #83A84A;
  border: 2px solid #fff;
  line-height: 66px;
  text-align: center;
  font-weight: bold;
  box-sizing: border-box;
  border-radius: 50px;

  position: fixed;
  right: 20px;
  bottom: 40px;

  box-shadow: 0 0 10px #44403f;
  
  z-index: 9000;
}

.topbtn i{
  padding-top: 5px;
  font-size: 2em;
}


.topbtn a{
  display: block;
  color: #fff;
}

.topbtn:hover{
  background-color: #9B5839;
  transition: 300ms;
}



/*************************************
　　ページタイトル
*************************************/
.pege{
padding: 70px 0;
}

.pege h2{
text-align: center;
color: #fff;
font-size: 1.8em;
letter-spacing: 0.1em;
text-shadow: 2px 2px 2px #000;
font-family: 'Hina Mincho', serif;
line-height: 1.5;

}

.page_info{
  background:url(../img/title_img01.jpg) center center/cover;
}
.page_works{
  background:url(../img/title_img02.jpg) center center/cover;
}
.page_flow{
  background:url(../img/title_img03.jpg) center center/cover;
}
.page_flow{
  background:url(../img/title_img03.jpg) center center/cover;
}
.page_inquiry{
  background:url(../img/title_img04.jpg) center center/cover;
}

.page_company{
  background:url(../img/title_img05.jpg) center center/cover;
}

.page_works_niwaki{
  background:url(../img/title_img06.jpg) center center/cover;
}
.page_works_kouji{
  background:url(../img/title_img07.jpg) center center/cover;
}

/*ページリンク*/
.page_cate{
  padding: 10px;
}

.page_cate a:hover{
  color: #b65629;
}


/*************************************
　　キーヴィジュアル 
*************************************/

/*スライダーCSSを上書き*/


.slider{
  /*slickでautoplayが止まる現象の対策案*/
  pointer-events: none;
}

 .slider .keyVis{
  margin-bottom: 0;

  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  height: 90vh;
  margin: 0;



/*縦書き*/
  writing-mode: vertical-rl;
  position: relative;
   
 }






.keyVis p{
position:absolute;

top:25%;

left:80%;
transform:translate(-50%);
background: hsl(0, 0%, 100%,0.85);
padding: 15px;
line-height: 2.2rem;
letter-spacing: 0.2rem;

font-size: 1.4em;
font-family: 'Hina Mincho', serif;
}


.slider .img1{
  background:url(../img/keyVis01.jpg) no-repeat center center/cover;
}
.slider .img2{
  background:url(../img/keyVis02.jpg) no-repeat center center/cover;
}
.slider .img3{
  background:url(../img/keyVis03.jpg) no-repeat center center/cover;
}
.slider .img4{
  background:url(../img/keyVis04.jpg) no-repeat center center/cover;
}
.slider .img5{
  background:url(../img/keyVis05.jpg) no-repeat center center/cover;
}




.keyVis_jp{
  color: #fff;
letter-spacing: 0.3em;
  position: absolute;
  width:150px;

  left: 50%;
  bottom: 7vh;
  transform: translateX(-50%);
  -webkit-transform: translateX(-50%);
  -ms-transform: translateX(-50%);

  text-align: center;

  box-sizing: border-box;
  text-shadow: 3px 3px 5px #333,3px 3px 5px #333,3px 3px 5px #333;
  }
   
 .icon_arrow{
  filter: drop-shadow(3px 3px 5px #333);
}


/*************************************
　　メイン
*************************************/

/*************************************
　　catch
*************************************/
.catch,.service{
  background: url(../img/back_chach1.png)no-repeat center center/cover;
  background-attachment: fixed;
}


.catch{
  text-align: center;
  text-shadow: 0 0 5px #fff,0 0 5px #fff,0 0 5px #fff,0 0 5px #fff,0 0 5px #fff,0 0 5px #fff,0 0 5px #fff,0 0 5px #fff,0 0 5px #fff,0 0 5px #fff;
 
}

.catch_big{
  padding: 50px 0 40px 0;

  font-size: 2em;
  line-height: 1.5;
  letter-spacing: 0.1em;
  font-family: 'Hina Mincho', serif;
}

.catch_p{

  font-size: 1.1em;
  letter-spacing: 0.2em;
  line-height: 2;
}

/*************************************
　　Service
*************************************/

.serviceBox{
  display: flex;
  justify-content: space-between;
  gap: 40px;
  max-width: 100%;
}

.serviceBox h3,.serviceBox h4{
  text-align: center;
}

.serviceBox h3{
font-size: 2em;
margin: 0 auto;
letter-spacing: 0.05em;

font-family: 'Raleway', sans-serif;
}

.service .note{
text-shadow: 0 0 5px #fff,0 0 5px #fff,0 0 5px #fff,0 0 5px #fff,0 0 5px #fff,0 0 5px #fff,0 0 5px #fff;
}


.serviceBox h4{
  font-size: 1.4em;

  padding: 10px 0;
  margin: 10px 0;
  border-top: 1.5px solid #44403f;
  border-bottom: 1.5px solid #44403f;
  font-family: 'Raleway', sans-serif;
  }
  
.serviceBox p{
  line-height: 2em;
  
}

.s_niwaki,.s_kouji{
  padding: 30px;
  flex: 1;
  box-shadow: 0 0 10px #44403f;
}

.s_iconbox{
  display: flex;
 align-items: center;
}


/* Service_庭木のお手入れ*/
.s_niwaki{
  background:linear-gradient(#bed68b,#D3E0B6,#fff);
}

.s_niwaki h3{
  color: #344E41;
}

.s_icon{
  max-width: 135px;
  height: auto;
}



/* Service_庭の小規模工事*/
.s_kouji{
  background:linear-gradient(#cebe8e,#DDD5BE,#fff);

}

.s_kouji h3{
  color: #443F33;
}


/*************************************
　　TEL＆MAIL
*************************************/

.tel_mailbox{
background: -moz-linear-gradient(65deg, #a7d366, #f7e3b2); 
background: -webkit-linear-gradient(65deg, #a7d366, #f7e3b2); 
background: linear-gradient(25deg, #a7d366, #f7e3b2); 

padding: 30px 0;
margin-bottom: 50px;
}

.tel_mail{
  display: flex;
  justify-content: space-between;
}
.tel_mailbox h3{
  font-weight: lighter;
  line-height: 1.5;
  margin-bottom: 30px;
  letter-spacing: 0.05em;
  font-size: 1.2em;
  font-family: 'Noto Sans JP', sans-serif;
}


.tel_nam{
  width:  calc(100% * 500/960);
  display: block;
  align-items: center;
}

.tel_nam p{
  color: #344E41;
  font-size: 2em;
  font-weight: bold;
  padding-top: 20px;
  font-family: 'Noto Sans JP', sans-serif;
  letter-spacing: -0.1em;
}

.mail p{
  color: #fff;
  font-size: 1.2em;
  padding-top: 10px;
  line-height: 1.3;
}

.mail{
  width:  calc(100% * 350/960);
  background-color: #344E41;
  padding: 10px;
}

/*MAIL:hover*/
.mail:hover{
  background-color: #9B5839;
  transition: 300ms;
}

/*TEL＆MAILのアイコン*/
.icon_tel,.icon_mail{
  max-width: 70px;
  margin-right: 10px;
  float: left;
}

/*************************************
Works
*************************************/
/* Works_庭木・工事アイコン*/
.icon_w_niwaki,.icon_w_kouji{
  max-width: 180px;
  margin: 0 auto;
  margin-bottom: 20px;
}

/* Works共通*/
.w_niwakiBox,.w_koujiBox{
  display: flex;
  justify-content: space-between;
  align-items: center;
}

/* Worksキャッチ文*/
.w_niwaki_catch p,.w_kouji_catch p{
  font-size: 1.2em;
color: #fff;
line-height: 1.8;
padding: 10px;
background-color: rgb(0, 0, 0,0.2);
backdrop-filter: blur(5px);
text-shadow: 2px 2px 5px #000;
}


.w_niwaki,.w_kouji{
  margin-bottom: 50px;
}

.niwaki_link h3,.kouji_link h3{
  font-size: 2em;
  margin-bottom: 20px;
  font-family: 'Raleway', sans-serif;
  }

.niwaki_link h4,.kouji_link h4{
  font-size: 1.2em;

  border-top: 1.5px solid #44403f;
  border-bottom: 1.5px solid #44403f;
  padding: 10px 0;
  margin-bottom: 40px;
  font-family: 'Raleway', sans-serif;
   }
  
 /*詳しく見るのリンク*/  
.works .more{
  display: block;
  padding: 20px;
  background-color: #344E41;
  color: #fff;
  max-width:200px;
  margin: 0 auto;
  letter-spacing: 0.1em;
}

.works .more:hover{
  transition: 300ms;
  background-color: #9B5839;
}
/* Works_庭木のお手入れ*/
.niwaki_link h3{
  color: #344E41;
}

.w_niwaki{
 background: url(../img/back_work_niwaki.png)no-repeat center center/cover;
}

.niwaki_link{
  padding: 20px 30px;
  width: 280px;
  text-align: center;
}

/* Works_庭木のお手入れ・背景ホバー*/
.w_niwaki a{
  background-color: rgb(211, 224, 182,0.6);

}

.w_niwaki a:hover{
  background-color: rgb(194, 214, 152);
  transition: 300ms;
}


/* Works_庭の小規模工事*/
.kouji_link h3{
  color: #443F33;
}


.w_kouji{
  background: url(../img/back_work_kouji.png)no-repeat center center/cover;
}


.kouji_link{
  padding: 20px 30px;
  width: 280px;
  text-align: center;
  margin: 0 0 0 auto;
}


/* Works_庭の小規模工事・背景ホバー*/
.w_kouji a{
  background-color: rgb(221, 213, 190,0.6);
}

.w_kouji a:hover{
  background-color: hsl(45, 59%, 65%);
  transition: 300ms;
}


/* Works_最新の施工例*/

.icon_w_new{
  max-width: 80px;
  margin: 0 auto 20px;
}

.w_new{
  background: url(../img/back_work01.jpg)no-repeat center center/cover;
padding: 50px 0 10px;
text-align: center;
}

.w_newcate{
background-color: #fff;
box-sizing: border-box;
padding: 20px;
box-shadow: 0 0 10px #44403f;
}

.w_new h3{
  color: #0B3661;
  font-size: 2em;
  margin-bottom: 50px;

  letter-spacing: 0.2em;
  font-family: 'Raleway', sans-serif;
}

.w_newcate h4{
color: #0B3661;
font-size: 1.4em;
margin-bottom: 20px;
font-family: 'Raleway', sans-serif;
letter-spacing: 0.1em;
}


.w_newBox{
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 30px;
  padding-bottom: 50px;
  box-sizing: border-box;
}





/*************************************
　　Work Flow
*************************************/

.flow{
  background: url(../img/back_flow.jpg)center center/cover;
}
.f_content{
  color: #fff;
  text-shadow: 2px 2px 2px #000;
  background: none;
}


.f_note{
  color: #fff;
  text-shadow: 2px 2px 2px #000;
}

.flowBox{
  display: flex;
}

.f_cate{
  flex: 1;
  border: 1px solid #fff;
  padding:15px;
  margin: 0 10px;
 color: #fff;
 text-shadow: 2px 2px 2px #000;
}

.f_cate img{
 width: 75%;
 margin: 0 auto 10px;
}


.f_cate h3,.f_cate h4{
text-align: center;
}

.f_cate h3{
font-size: 4em;
font-weight: lighter;
font-family: 'Titillium Web', sans-serif;
margin-bottom: 10px;
}

.f_cate h4{
font-size: 1.4em;
line-height: 1.5;

font-family: 'Raleway', sans-serif;
margin-bottom: 10px;

border-bottom: 1.5px solid #fff;
}
  
.f_cate p{
 line-height: 1.6;
}

/*************************************
　　施工例のページ用
*************************************/
/*施工ページタイトル部分*/
.sekou{
  text-align: center;
  padding: 0 120px;
}
.sekou_logo{
  margin: 0 auto;
  max-width: 150px;
  height: auto;
}
.sekou_title{
 padding: 10px 0;
 letter-spacing: 0.1em;
 font-size: 2em;
}

.secou_summary{
 border-top: 1px solid #44403f;
 border-bottom: 1px solid #44403f;
 padding: 10px 0;
margin-bottom: 50px;
font-size: 1.3em;
	display: inline-block;
}

/*施工ページリンク*/

.sekou_link{
  display: block;
  padding: 10px 10px 30px;

  box-shadow: 0 0 10px #44403f;
  color: #fff;
  max-width:390px;
  letter-spacing: 0.1em;
 margin: 0 auto 50px;
 border-radius: 0.5em;
}

.sekou_link_kouji{
  background-color: #453F33;
}


.sekou_link_niwaki{
  background-color: #03522D;
}


.sekou_link:hover{
  background-color: #9B5839;
  transition: 300ms;
  color: #fff;
}



.sekou_linkimg{
float:left;
width: 80px;
}

.sekou_link p{
  padding-top:20px;
}


/*施工ページセクション*/
.sekou_000{
  height: auto;
  margin: 0 auto 50px;
  box-shadow: 0 0 10px #44403f;
  
}


.sekou_000 h2{
 color: #fff;
 line-height: 1.3;
 font-weight: normal;
 font-size: 1.3em;
 letter-spacing: 0.05em;
 padding: 15px 0;
}


.sekou_000_Box{

  box-sizing: border-box;
  padding: 20px 50px;
}






  
.sekou_com{
  padding: 20px 20px;
  text-align: left;
}

.sekou_com h3{
 padding-left:20px ;
 font-size: 1.2em;
 line-height: 1.5;
 margin-bottom: 10px;
 letter-spacing: 0.1em;
}

.sekou_com p{
  line-height: 1.5;
  margin-bottom: 10px;
  padding: 0 30px;
 }
  
 /*施工例_庭木用設定*/
.sekou_title_niwa{
  color:#03522D ;
}

 .sekou_niwa h2{
background-color: #03522D;
}
.sekou_niwa_Box{
  background-color: #D3E0B6;
}
 .sekou_com_niwa{
  background-color:#d3e0b65b;
}
.sekou_com_niwa h3{
  color: #03522D;
}

 /*施工例_工事用設定*/
 .sekou_title_kouji{
  color:#443F33 ;
}

 .sekou_kouji h2{
background-color: #443F33
}
.sekou_kouji_Box{
  background-color: #DDD5BE;
}
 .sekou_com_kouji{
  background-color:#ddd5be4d;
}
.sekou_com_kouji h3{
  color: #443F33;
}


/*************************************
　　問い合わせ用のページ
*************************************/
.g-form{
  max-width: 700px;
  height: auto;
  margin:0 auto;
  padding-top: 30px;
}


form{
  width: 100%;
  height: 100%;
}

/*************************************
　　会社案内ページ用、ご挨拶
*************************************/
/*ご挨拶・会社案内ボックス*/
.com_Box{
padding: 50px 0;
}

.greeting,.company{
 margin-bottom: 50px;
 padding: 0 10px;
}
.greeting_Box{
  display: flex;
  justify-content: center;
}

.greeting h2,.company h2{
  text-align: center;
  margin-bottom: 30px;
  color: #03522D;
letter-spacing: 0.2em;
}

.greeting_photo{
  max-width: 250px;
  padding: 0 15px;
}
.greeting_photo img{
border-radius: 1.2em;
}
.greeting_content{
  padding: 0 15px;
  max-width: 400px;
}

.greeting_content p{
  line-height: 2.1;
}

/*************************************
　　会社案内ページ用、会社案内
*************************************/
.company h2{
  text-align: center;
  margin-bottom: 30px;
}

.company table{
  margin: 0 auto;
  width: 550px;
}

.company th{
 width: 65px;
 background-color: #E6E6E6;
 width: 150px;
}

.company th,.company td{
 padding: 15px;
 border: 1px solid #757575;
 }

 .company td{
  line-height: 1.5;
  width: 400px;
  }


/*************************************
　　フッター
*************************************/
.footer{
  background-color: #344E41;
  color: #fff;
}

/*フッターナビ*/
.ftnav{
  padding: 20px 10px;
}
.ftnav ul{
  display: flex;
  justify-content: space-between;
}
.ftnav li{
  text-align: center;
  width: calc(100%/6);
}

.ftnav li+li{
  border-left: 1px solid #fff;
}

.ftnav a{
  display: block;
padding: 5px;
  font-family: 'Raleway', sans-serif;
  font-size: 1em;
  color:#fff;
}

.ftnav a:hover{
color: #83A84A;
}

/*フッター会社名ボックス*/
.ft_addtelBox{
  display: flex;
  justify-content: space-between;
  flex-direction: row-reverse;
  padding: 30px 10px;
}

.ft_address{
  width: 33%;
}

.ft_address p{
  line-height: 1.5;
}
.ft_tellmail{
  width: 62%;
}

/*フッター会社名と電話*/

.ft_address h2{
  width: 250px;
  margin-bottom: 30px;
}


/*フッターのTEL＆MAIL*/
.ft_tellmail h3{
  font-weight: lighter;
  line-height: 1.6;
  margin-bottom: 20px;
  letter-spacing: 0.05em;
  font-size: 1.05em;
  font-family: 'Noto Sans JP', sans-serif;

  color: #fff;
}



.ft_tel_nam{
  display: block;
  align-items: center;
  margin-bottom: 40px;
}

.ft_tel_nam p{
  color: #fff;
  font-size: 2em;
  font-weight: bold;
  padding-top: 20px;
  font-family: 'Noto Sans JP', sans-serif;
}

.ft_mail p{
  font-size: 1.2em;
  line-height: 1.3;
  padding-top: 10px;
}

.ft_mail{
  width:  55%;
  border: 2px solid #fff;
  background-color: #83A84A;
  color: #fff;
  padding: 10px 10px 20px;
}


/*フッター会社アイコン*/
.ft_icon_tel{
  width: 90%;
}

/*MAIL:hover*/
.ft_mail:hover{
  color: #fff;
  background-color: #9B5839;
  transition: 300ms;
}


/*フッターのTEL＆MAILのアイコン*/
.ft_icon_tel,.ft_icon_mail{
  max-width: 70px;
  margin-right: 10px;
  float: left;
}


/*コピーライト*/

.ft_copy{
  padding: 20px;
  background-color: #333;
  text-align: center;
}





/*************************************
　　メディアクエリー1250px以下 
*************************************/
@media screen and (max-width:1250px){

/*************************************
　　1250px以下 ヘッダー
*************************************/

.header_logo{
  padding: 0 10px;
  
}

.header_logo h1{
  padding-top: 20px;
  max-width: 230px;
}



/*************************************
　　1250px以下 pcナビ 
*************************************/

.site_pcnav{

  margin-left: 10px;
}

/*************************************/
}




/*************************************
　　メディアクエリー990px以下 
*************************************/
@media screen and (max-width:990px){



/*************************************
  990px以下 共通
*************************************/
/*brを表示させる*/
.sp_br{
  display: block !important;
}

.sp_br_x{
  display: block !important;
}


/*brを消す*/
.pc_br{
  display: none !important;
}


  /*************************************
  　　990px以下 ヘッダー
  *************************************/
  .header_logo{
    padding: 0 5px;
    
  }
  
  .header_logo h1{
    padding-top: 30px;
    max-width: 180px;
  }
  
  
  
.site_pcnav p{
  font-size: 0.9em;
}
  /*************************************
  　　990px以下 pcナビ 
  *************************************/
  .site_pcnav{
    margin-left: 0;
  }


  .pcnav a{
    font-size: 0.95em;
    padding:5px 10px;
  }

/*ヘッダーのメール部分*/

.head_mail{
  color: #fff;
  background-color:#344E41;
  padding: 14px 5px 0;
}

.head_mail p{
  font-size: 0.85em;
 }

  .icon_head_mail{
    width: 40px;
 
  }




/*************************************
  　　990px以下 Service
*************************************/
.serviceBox h3{
  font-size: 1.6em;
  letter-spacing: 0;
  }
  
  .s_icon{
    max-width: 120px;
  }
  
  .serviceBox h4{
    font-size: 1.3em;
    }
    
/*************************************
　　990px以下 TEL＆MAIL
*************************************/


.tel_mailbox h3{
  padding: 0 10px;
  margin-bottom: 15px;
}

.tel_mail {
  padding: 0 10px;
}

.tel_nam p{
  margin-bottom: 30px;
  letter-spacing: -0.25em;
}
.tel_nam{
  width:380px;
}


.mail{
 margin-right: 20px;
 width:300px;
}

/*************************************
　　990px以下 Works
*************************************/
/* Works_最新の施工例*/
.w_newcate h4{
  font-size: 1.25em;
  }
  

  
/*************************************
　　990px以下 Work Flow
*************************************/
.flowBox{
  display: block;
}

.f_cate{
  display: flex;
   margin: 30px auto;
  max-width: 530px;
  align-items: center;
}

.f_cate img{
 width: 100px;
}

.f_cate h4{
text-align: center;
box-sizing: border-box;
border-top: none;
letter-spacing: 0.5em;
  }
    
.f_cate_pBox{
  padding: 0 20px;
}

/*************************************
　　990px以下 施工例のページ用
*************************************/
.sekou{
  padding: 0 120px;
}


/*************************************
　　990px以下 フッター
*************************************/
/*フッターナビ*/
.ftnav ul{
  align-items: center;
}

.ftnav a{
  line-height: 1.3;
  font-size: 0.9em;
}

/*************************************
　　990px以下 フッター TEL＆MAIL
*************************************/


.ft_tellmail {
    width: 62%;
    padding: 0 30px;
}

.ft_tellmail h3{
  margin-bottom: 20px;

}

.ft_tel_nam p{
  font-size: 1.6em;
  text-align: center;
  margin-bottom: 30px;
}
.ft_tel_nam{
  width:400px;
}
.ft_mail{
  width:410px;

  height: 50px;
  text-align: center;
}

.ft_mail p{
  font-size: 1.2em;
  padding-top: 20px;
}

/*フッターのTEL＆MAILのアイコン*/
.ft_icon_tel,.ft_icon_mail{
  max-width: 60px;

}





  /*************************************/
  }




/*************************************
　　メディアクエリー767px以下 
*************************************/
@media screen and (max-width:767px){

/*************************************
　　767px以下 共通
*************************************/
/*sp_br2を表示させる*/
.sp_br2{
  display: block !important;
}

/*brを消す*/
.pc_br2{
  display: none !important;
}



.catch,.service,.flow{
  padding: 20px 0;
}

.works{
  padding-top: 20px;
}


/*コンテンツのタイトルh2の指定*/
.content{
  padding: 25px 0;
  margin-bottom: 10px;
}


/*コンテンツのh2の下の説明文の指定*/
.note{
  margin-bottom: 30px;
}



/*************************************
　　767px以下 ヘッダー
*************************************/
.header{
  display: block;
}
.header_logo{
  padding: 2px 30px;
box-sizing: border-box;
}


.site_pcnav p {
  display: none;
}


.header_logo h1{

  padding-top: 10px;
  max-width: 300px;

  }

/*ヘッダーのメール部分*/
.head_mail{
  padding: 15px 10px 0;
height: 90px;
 
  display: block;
  width:100px;

  position:absolute;
  top:0;
  right: 80px;
  overflow: hidden;

  z-index: 3000;
  color: #fff;
  background-color:#344E41;

  text-align: center;
  box-sizing: border-box;
 
}



/*************************************
　　767px以下 pcナビ 
*************************************/
.pcnav{
  display: none;
}


/*************************************
　　767px以下 spボタン
*************************************/

.spbtn{
  display: block;
  width:80px;


  height: 90px;
  position:absolute;
  top:0;
  right:0;
  overflow: hidden;

  z-index: 3000;
  color: #fff;
  background: #83A84A;

  text-align: center;
  }

.open{
color: #fff;
background-color: #9B5839;
border: 2px solid #9B5839;
  }
.open i:first-child{
display: none;
}
.spbtn i{
padding-top: 20px;
display: block;
font-size: 35px;
line-height: 50px;
}
   
/*************************************
　　767px以下 spナビ 
*************************************/
.spnav{
  display: block;
  position:fixed;
  width:100% ;
  top: 90px;
 left: 100%;
 transition:300ms ;
 z-index: 6000;
}

.slide{
  left:0;
}

.spnav li{
 line-height: 70px;
 text-align: center;
 font-size: 24px;
 border-top: 1px solid #fff;
}
.spnav li:last-child{
  border-bottom: 1px solid #fff;
}
   
.spnav a{
  display:block;
  color: #fff;
  text-shadow: 2px 2px 2px#344E41;
  background:rgb(131, 168, 74,0.8);
}

/*************************************
　　767px以下 キービジュアル
*************************************/

 /*縦書き*/

 .keyVis p{

  left:85%;
  padding: 8px;

  font-size: 1em;
  line-height: 1.4rem;
  }
  

/*************************************
　　767px以下 catch
*************************************/
.catch,.service{
  background: url(../img/back_chach2.png)no-repeat center center/cover;
  background-attachment: fixed;
}



     
/*************************************
　　767px以下 Service
*************************************/

.serviceBox{
  display: block;
  padding: 0 30px ;
}
.serviceBox h3{
  font-size: 2em;
  letter-spacing: 0.1em;
  }

/* Service_庭木のお手入れ*/
.s_niwaki{
  margin-bottom: 30px;
}

.s_iconbox{
  width: 380px;
  margin: 0 auto;
}


.serviceBox h4{
  font-size: 1.4em;
  }

/*************************************
　　767px以下 TEL＆MAIL
*************************************/


.tel_mail{
  display: block;
  margin: 0 auto;
}

.tel_mailbox h3 {
  text-align: center;
}

.tel_nam{
  width:380px;
  margin: 0 auto;
}

.mail{
  width:410px;
  margin: 0 auto;
  height: 60px;
  text-align: center;
}

.mail p{
  font-size: 1.2em;
  padding-top: 20px;
}



/*TEL＆MAILのアイコン*/
.icon_tel,.icon_mail{
  max-width: 60px;

}
.icon_mail{
  margin: 0 0 0 10px;

}



/*************************************
　　767px以下 Works
*************************************/

/* Works_庭木・工事共通*/
.niwaki_link h4,.kouji_link h4{
  font-size: 1em;
   }
  
/* Worksキャッチ文*/
.w_niwaki_catch p,.w_kouji_catch p{
  font-size: 1.1em;
  text-shadow: none;
}




/* Works_庭木のお手入れ*/
.niwaki_link{
  width: 230px;

}

/* Works_庭の小規模工事*/

.kouji_link{
  width: 230px;

}

  /* Works_最新の施工例*/

  .w_newcate h4{
    font-size: 1.7em;
    }

  .w_newcate{
  margin-bottom: 40px;
  padding: 20px 10px;
    }
    

  .w_newBox{
    display: block;
    padding-bottom: 10px;
  }


  


/*************************************
 　767px以下 施工例のページ用
*************************************/
.sekou{
  padding: 0 20px;
}

.sekou_000_Box{
  padding: 20px 20px;
}





/*************************************
　767px以下 フッター
*************************************/


/*フッター会社名ボックス*/
.ft_addtelBox{
  flex-direction: column-reverse;
}


.ft_address{
  width: 100%;
  margin: 0 auto;
}

.ft_tellmail{
  width: 440px;
  margin: 0 auto;
  margin-bottom: 30px;
  padding: 0;

}

.ft_address h2{
 margin: 0 auto 10px;
}
.ft_address p{
  margin: 0 auto;
  width: 250px;

}
/*************************************/
}

/*************************************
　　メディアクエリー599px以下 
*************************************/
@media screen and (max-width:599px){
/*************************************
　　599px以下 共通
*************************************/




/*brを表示させる*/
.sp_br3{
  display: block !important;
}

/*brを消す*/
.sp_br_x{
  display: none !important;
}

/*コンテンツのタイトルh2の指定*/
.content{
  font-size: 2.6em;
  letter-spacing: 0.2em;
}


/*コンテンツのh2の下の説明文の指定*/
.note{
  font-size: 1.1em;
  letter-spacing: 0.05em;
}

/*************************************
　　599px以下 spナビ 
*************************************/
.spnav{

  top: 90px;


}






/*************************************
　　599px以下 ヘッダー
*************************************/
.header_logo h1{

  padding-top: 7px;
  max-width: 218px;

  }

  .header_logo{
    padding: 14px 5px;

  }

/*ヘッダーのメール部分*/
.head_mail{
  padding: 10px 5px 0;
height: 90px;
 
  display: block;
  width:65px;

  position:absolute;
  top:0;
  right: 80px;
  overflow: hidden;

  z-index: 3000;
  color: #fff;
  background-color:#344E41;

  text-align: center;
  box-sizing: border-box;
 
}

.head_mail p {
 line-height: 1.2;
}

/*************************************
　　ページタイトル
*************************************/

.pege{
  padding: 50px 0;
  }
  

/*************************************
　　599px以下 キーヴィジュアル 
*************************************/
.slider .keyVis{
  height: 55vh;
 }

.keyVis_jp{
  display: none;
}


 /*縦書き*/

 .keyVis p{


  left:87%;
  padding: 8px;

  font-size: 1em;
  line-height: 1.2rem;
  }
  

/*************************************
　　599px以下 catch
*************************************/


.catch,.service{
  background: none;
}




.catch_big{
  padding: 10px 0 40px 0;
  font-size: 1.6em;
  letter-spacing: 0.05em;
}

.catch_p{
  font-size: 1em;
  letter-spacing: 0.05em;
  
}






/*************************************
　　599px以下 Service
*************************************/

.serviceBox{
  padding: 0 10px ;
}

.serviceBox h3{
  font-size: 1.8em;
  line-height: 1.2;
  letter-spacing: 0.05em;
  text-align: left;
  margin: 0;
  padding-left: 10px;
  }

  .serviceBox h4{
    font-size: 1.2em;
    }

.s_iconbox{
  width: 310px;
  margin: 0 auto;
}


.tel_nam{
  width:300px;
}
.tel_nam p {
  font-size: 1.5em;
  padding-top: 5px;
  margin-bottom: 20px;
  letter-spacing: -0.2em
}


.mail{
  font-size: 1.05em;
  padding: 20px 10px;
  width:330px;
  height: 40px;
  border-radius: 1.1em;
  background: linear-gradient(#1e7a3d,#83A84A);
  box-shadow: 4px 4px 4px rgba(0, 0, 0, 0.637);

  border: 2px solid #fff;
}


.mail p{
  font-size: 1.05em;
  padding-top: 10px;
}

/*TEL＆MAILのアイコン*/
.icon_tel,.icon_mail{
  max-width: 35px;
  margin-right: 5px;
}

.tel_mailbox h3{
  font-size: 1.1em;

}

.icon_mail{
  margin: 0;
padding-top: 2px;
}


/*************************************
　　599px以下 Works
*************************************/
/* Works共通*/
.w_niwakiBox,.w_koujiBox{
  display: block;
}
.w_niwakiBox{
  margin: 0 25px;
  background-color: rgb(211, 224, 182,0.8);
  padding: 20px 0;
}

/* Works共通タイトル文字*/
.niwaki_link h3, .kouji_link h3 {
  font-size: 2.1em;
letter-spacing: 0.05em;
}
.niwaki_link h4, .kouji_link h4 {
  font-size: 1.2em;
}

.w_kouji a{
  background-color:transparent;
}

.w_kouji a:hover{
  background-color:transparent;
}




.w_koujiBox{
  display: flex;
  flex-direction: column-reverse;
  margin: 0 25px;
  background-color: rgb(221, 213, 190,0.8);
  padding: 20px 0;
}


/* Worksキャッチ文*/
.w_niwaki_catch p,.w_kouji_catch p{
  font-size: 0.9em;
  color: #44403f;
  padding: 10px 5px;
  background-color:transparent;
  backdrop-filter: none;
  margin: 0 auto;
  text-align: center;
}

/* Works_庭木のお手入れ*/
.niwaki_link{
  margin: 0  auto;
  width: 80%;
}



/* Works_庭の小規模工事*/
.kouji_link{
  margin: 0  auto;
  width: 80%;
}

  /* Works_最新の施工例*/

  .w_newcate h4{
    font-size: 1.4em;
    letter-spacing: 0.05em;
    }

/*************************************
　　599px以下 Work Flow
*************************************/

.f_cate {
  max-width: 320px;
display: block;
}

.f_cate h3{
  font-size: 3em;
  }
  
  .f_cate h4{
    font-size: 1.8em;
    }





/*************************************
　　599px以下 施工例のページ用
*************************************/
.sekou{
  padding: 0;
}

.sekou_com p{
  padding: 0 5px;
 }

.sekou_000_Box{
  padding: 20px 10px;
}








/*施工ページリンク*/

.sekou_link{
  padding: 15px 10px 20px 30px;
  background: linear-gradient(#1e7a3d,#83A84A);
  max-width:280px;
 border-radius: 1em;
 
 border: 2px solid #fff;

}




.sekou_linkimg{
padding-right: 10px;
}

.sekou_link p{
  line-height: 1.3;
  text-align: left;
  padding-top:4px;
  font-size: 1.2em;
}



 


/*************************************
　　599px以下 会社案内ページ用、ご挨拶
*************************************/
/*ご挨拶・会社案内ボックス*/

.greeting_Box{
  max-width: 100%;
  display: block;
}

.greeting_photo{
  margin-bottom: 30px;
  margin: 0 auto 30px;
}

.greeting_photo img{
  width: 300px;
  height: 230px;
  object-fit: cover; 
  }

.greeting_content{
  max-width: 100%;
}






/*************************************
　　599px以下 会社案内ページ用、会社案内
*************************************/
.company table{
width: 100%;
}

.company th{
  width: 25%;
  line-height: 1.2;
 }

 .company td{
  width: 75%;
  }

 .company td{
  font-size: 0.95em;
  }




/*************************************
　599px以下 フッター
*************************************/
/*フッターナビ*/

.ftnav ul{
  display: block;
}

.ftnav li{
  width: 100%;
  letter-spacing: 0.5em;
  border-bottom: 1px solid rgb(155, 155, 155);
}

.ftnav li+li{
  border-left: 0;
}


.ftnav a {
    line-height: 1.8;
    font-size: 0.9em;
    color: #fff;
  }


/*************************************
　　599px以下 フッター TEL＆MAIL
*************************************/

.ft_tellmail {
  width:310px;
text-align: center;
}

.ft_tel_nam{
  width:300px;
}
.ft_tel_nam p {
  font-size: 1.5em;
  padding-top: 10px;
  margin-bottom: 20px;
  letter-spacing: -0.2em
}

.ft_mail {
 
  font-size: 0.9em;
  padding: 20px 5px;
  width:310px;
  height: 40px;
  border-radius: 1.1em;
  background: linear-gradient(#1e7a3d,#83A84A);
  box-shadow: 4px 4px 4px rgba(0, 0, 0, 0.637);



}





.ft_mail p {
 font-size: 1em;
  padding-top: 10px;

}

.ft_tellmail h3{
  font-size: 1em;
  letter-spacing: 0;
}

/*TEL＆MAILのアイコン*/
.ft_icon_tel,.ft_icon_mail{
  max-width: 35px;
  margin-right: 2px;
}

.ft_icon_mail{
  margin-left: 15px;
}



/*************************************/
}

/*************************************
　　メディアクエリー374px以下 
*************************************/
@media screen and (max-width:374px){
/*************************************
  　　374px以下
*************************************/
/*ヘッダーのメール部分*/
.head_mail{
 display: none;
}


.note {
  font-size: 0.9em;
}

.catch_big {
  font-size: 1.4em;
}

.catch_p {
  font-size: 0.95em;
  letter-spacing: 0;
}

.serviceBox h4 {
  font-size: 1em;
}

.s_icon {
  max-width: 100px;
}

.tel_mailbox h3 {
  font-size: 0.9em;
}

.mail p {
  font-size: 0.9em;
}

.mail {
  width: 300px;
}

.niwaki_link h4, .kouji_link h4 {
  font-size: 1em;
}

.works .more {
  padding: 30px 10px;
  font-size: 1em;
}

.niwaki_link h3, .kouji_link h3 {
  font-size: 1.9em;
}

.w_niwaki_catch p, .w_kouji_catch p {
  font-size: 0.85em;
  padding: 10px 3px;
}

.w_newcate h4 {
  font-size: 1.3em;
}


.ft_mail {
  font-size: 0.9em;
  padding: 20px 5px;
  width: 300px;
 
}

/*************************************/
}


/*************************************
　施工例のページのIDでのメインの幅指定
*************************************/

#niwaki main{
  padding: 50px 0;
}

#kouji main{
  padding: 50px 0;
}