@charset "UTF-8";
*,
::before,
::after {
  box-sizing: border-box;
  border-style: solid;
  border-width: 0;
  margin: 0;
}

body {
  font-family: "Hiragino Kaku Gothic ProN", "Hiragino Sans", sans-serif;
  overflow-x: hidden;
  color: #333333;
}

ul,ol {
  padding: 0;
  list-style: none;
}

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

h1, h2, h3, h4, h5, h6 {
  font-size: 100%;
  font-weight: 400;
}

img {
  max-width: 100%;
  display: block;
}

table {
  border-collapse: collapse;
  width: 100%;
}

/* =============================================
ヘッダーのCSSはここから
============================================= */
header {
    position: fixed;
    z-index: 900;
    top: 0;
    left: 0;
    width: 100%;
    background: #F5F5DC;
    box-sizing: border-box;
  }

  header .inner {
    width: 100%;
    height: 65px;
    margin: 0 auto;
    position: relative;
    left:0;
    display: flex;
    justify-content: space-evenly;
  }

  .logo {
    position: relative;
    margin: 0 auto;
    padding-top: 10px;
    width: 300px;
    font-size: 26px;
    font-family: "Yuji Syuku", serif;
    font-weight: 400;
    font-style: normal;
    text-align: center;
  }

  .tel {
    position: relative;
    margin: 0 auto;
    padding-top: 5px;
    width: 100%;
    text-align: left;
  }

  .tel-font {
    font-size: 24px;
    font-family: "Yusei Magic", sans-serif;
    font-weight: 400;
    font-style: normal;
    background-image:  url('../img/call.svg');
    background-repeat: no-repeat; /* 繰り返しを防ぐ */
    background-size: 20px 20px;
    background-position: left; /* 中央配置 */
    padding-left: 30px;
    color: #006400;
  }

  .time-font {
    font-size: 13px;
    padding-left: 10px;

  }

  header .header-nav {
    padding-top: 10px;
    font-size: 20px;
    display: flex;
    list-style: none;
  }

  header .header-nav li {
    margin-right: 30px;
  }


  header .header-navi li:first-child {
    margin-left: 0;
  }

  .nav-logo {
    display: none;
  }

/*========= ナビゲーションのためのCSS ===============*/

/* タブレット以下用のCSS */
@media screen and (max-width: 1025px){

header {
  height: 50px;
  padding: 0;

}
header .inner {
  width: 100%;
  height: 100%;
  padding: 0;
}

.header-logo {
  margin-left: 0.5rem;
  margin-right: auto;
}

.logo {
  width: 100%;
}

.tel {
  display: none;
}

header .header-nav {
  display: block;
  padding: 0;
}

header .header-nav li {
  margin-left: 0;
  padding-bottom: 1rem;
}

.nav-logo {
  display: block;
  font-size: 18px;
  padding-top: 3rem;
}

.sns-icon {
  margin: 0 auto;
  width: 35px;
  text-align: center;

}

    #g-nav{
      /*position:fixed;にし、z-indexの数値を大きくして前面へ*/
      position:fixed;
      z-index: 998;
      /*ナビのスタート位置と形状*/
      top:0;
      right: -120%;
      width:50%;
      height: 100vh;/*ナビの高さ*/
      background: #F5F5DC;
      /*動き*/
      transition: all 0.6s;
    }

    /*アクティブクラスがついたら位置を0に*/
    #g-nav.panelactive{
      right: 0;
    }

    /*ナビゲーションの縦スクロール*/
    #g-nav.panelactive #g-nav-list{
      /*ナビの数が増えた場合縦スクロール*/
      position: fixed;
      z-index: 999;
      width: 100%;
      height: 100vh;/*表示する高さ*/
      overflow: auto;
      -webkit-overflow-scrolling: touch;
    }

    /*ナビゲーション*/
    #g-nav ul {
      /*ナビゲーション天地中央揃え*/
      position: absolute;
      z-index: 999;
      top:25%;
      left:17%;
      transform: translate(-25%,-25%);
    }

    /*リストのレイアウト設定*/
    #g-nav li{
      list-style: none;
      text-align: center;
      align-items: center;
    }
}
    /* スマートフォン向けスタイル */
    @media (max-width: 750px) {
      #g-nav{
        /*ナビのスタート位置と形状*/
        width:100%;
      }
      #g-nav ul{
        left: 40%;
      }
      }

    /*==================================================
    　5-2-1 3本線が×に
    ===================================*/
    /* タブレット以下用のCSS */
    @media screen and (max-width: 1025px){
    /*ボタン外側※レイアウトによってpositionや形状は適宜変更してください*/
    .openbtn{
      /*ボタン内側の基点となるためrelativeを指定。
    追従するナビゲーションの場合はfixed＋top、rightといった位置をセットで指定*/
      position: fixed;
      top: 0;
      right: 0;
      background:#F5F5DC;
      cursor: pointer;
        width: 50px;
        height:50px;
        z-index: 9999;
    }

    /*ボタン内側*/
    .openbtn span{
        display: inline-block;
        transition: all .4s;/*アニメーションの設定*/
        position: absolute;
        left: 12px;
        height: 3px;
        border-radius: 2px;
        background: #333;
        width: 45%;
      }

    .openbtn span:nth-of-type(1) {
      top:15px;
    }

    .openbtn span:nth-of-type(2) {
      top:23px;
    }

    .openbtn span:nth-of-type(3) {
      top:31px;
    }

    /*activeクラスが付与されると線が回転して×に*/

    .openbtn.active span:nth-of-type(1) {
        top: 18px;
        left: 18px;
        transform: translateY(6px) rotate(-45deg);
        width: 30%;
        z-index: 999;
    }

    .openbtn.active span:nth-of-type(2) {
      opacity: 0;/*真ん中の線は透過*/
      z-index: 999;
    }

    .openbtn.active span:nth-of-type(3){
        top: 30px;
        left: 18px;
        transform: translateY(-6px) rotate(45deg);
        width: 30%;
        z-index: 999;
    }
  }

/* =============================================
リンクのCSSはここから
============================================= */
 /* 中央から下線1 */
.header-nav a.nav-link{
	text-decoration: none; /* リンクの下線を消す */
	position: relative; /* 擬似要素の基準位置を設定 */
	color: #333; /* リンクテキストの色 */
	padding-bottom: 10px; /* リンクテキスト下部の余白 */
}

 /* 中央から下線2 */
 .link-more a {
   text-decoration: none; /* リンクの下線を消す */
   position: relative; /* 擬似要素の基準位置を設定 */
   color: #006400; /* リンクテキストの色 */
   padding-bottom: 10px; /* リンクテキスト下部の余白 */
   font-weight: bold;
 }

.header-nav a.nav-link::before,
.link-more  a::before {
	content: ""; /* 擬似要素の内容は空に設定 */
	position: absolute; /* リンクを基準に絶対位置を指定 */
	left: 50%; /* 下線を中央から表示するための開始位置 */
	bottom: 0; /* リンクテキストの下に下線を配置 */
	width: 0; /* 初期の下線幅を0に設定 */
	height: 2px; /* 下線の太さ */
	background-color: #333; /* 下線の色 */
	transition: all 0.4s ease; /* ホバー時の下線アニメーション効果 */
}

.header-nav a.nav-link:hover::before,
.link-more a:hover::before {
	width: 100%; /* ホバー時に下線が全体に広がるよう設定 */
	left: 0; /* 下線の開始位置を左端に設定 */
}
/* =============================================
見出しのCSSはここから
============================================= */
h1 {
  display: block;
  padding-top: 1rem;
  margin: 0 auto;
  width: 100%;
  font-size: 2rem;
  font-weight: bold;
  text-align: center;
}

/* 見出し1 */
h1 span {
  display: inline-block;
  margin-top: 10px;
  margin-bottom: 8px;
  color: #fff;
  background-color:  #006400;
  text-align: center;
  border-radius: 50%;
  width: 60px;
  height: 60px;
  line-height: 60px;
  margin-right: 0.5rem;
  transform: rotate(-20deg);
}

/* スマートフォン向けスタイル */
@media (max-width: 480px) {
  h1 {
    font-size: 1.5rem;
  }
}

h3 {
  border-bottom: 3px solid #333;
  font-size: 1.2rem;
}

/* =============================================
波打つボトム１みどり
============================================= */
.main-visual,.slick,.map,.guidance,.area-map,.use,
.how-to-fee,.faq-main{
  overflow:hidden;
  position:relative;
  }
  .main-visual::before,.slick::before,.map::before,.guidance::before,.area-map::before,
  .use::before,.how-to-fee::before,.faq-main::before{
  content:'';
  font-family:'shape divider from ShapeDividers.com';
  position: absolute;
  bottom: -1px;
  left: -1px;
  right: -1px;
  top: -1px;
  z-index: 3;
  pointer-events: none;
  background-repeat: no-repeat;
  background-size: 100% 90px;
  background-position: 50% 100%;
  background-image: url('data:image/svg+xml;charset=utf8, <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 35.28 2.17" preserveAspectRatio="none"><path d="M35.28 1.67c-3.07-.55-9.27.41-16.15 0-6.87-.4-13.74-.58-19.13.1v.4h35.28z" fill="%2390ee90"/><path d="M35.28 1.16c-3.17-.8-7.3.4-10.04.56-2.76.17-9.25-1.47-12.68-1.3-3.42.16-4.64.84-7.04.86C3.12 1.31 0 .4 0 .4v1.77h35.28z" opacity=".5" fill="%2390ee90"/><path d="M35.28.31c-2.57.84-7.68.3-11.8.43-4.1.12-6.85.61-9.57.28C11.18.69 8.3-.16 5.3.02 2.3.22.57.85 0 .87v1.2h35.28z" opacity=".5" fill="%2390ee90"/></svg>');
  }

  @media (max-width:768px){
  .main-visual::before,.slick::before,.map::before,.guidance::before,.area-map::before,
  .use::before,.how-to-fee::before,.faq-main::before{
  background-size: 100% 90px;
  background-position: 50% 100%;
  }
  }

/* =============================================
波打つボトム1 ベージュ
============================================= */
  .main-area,.access,.prevention,.fee,.policy-main{
    overflow:hidden;
    position:relative;
    }
    .main-area::before,.access::before,.prevention::before,
    .fee::before,.policy-main::before{
    content:'';
    font-family:'shape divider from ShapeDividers.com';
    position: absolute;
    bottom: -1px;
    left: -1px;
    right: -1px;
    top: -1px;
    z-index: 3;
    pointer-events: none;
    background-repeat: no-repeat;
    background-size: 100% 90px;
    background-position: 50% 100%;
    background-image: url('data:image/svg+xml;charset=utf8, <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 35.28 2.17" preserveAspectRatio="none"><path d="M35.28 1.67c-3.07-.55-9.27.41-16.15 0-6.87-.4-13.74-.58-19.13.1v.4h35.28z" fill="%23f5f5dc"/><path d="M35.28 1.16c-3.17-.8-7.3.4-10.04.56-2.76.17-9.25-1.47-12.68-1.3-3.42.16-4.64.84-7.04.86C3.12 1.31 0 .4 0 .4v1.77h35.28z" opacity=".5" fill="%23f5f5dc"/><path d="M35.28.31c-2.57.84-7.68.3-11.8.43-4.1.12-6.85.61-9.57.28C11.18.69 8.3-.16 5.3.02 2.3.22.57.85 0 .87v1.2h35.28z" opacity=".5" fill="%23f5f5dc"/></svg>');
    }

    @media (min-width:768px){
    .main-area::before,.access::before,.prevention::before,
    .fee::before,.policy-main::before{
    background-size: 100% 90px;
    background-position: 50% 100%;
    }
    }

/* =============================================
お問い合わせのCSSはここから
============================================= */
    :root {
      --bg: #fff;
      --color: #006400;
      --font: Montserrat, Roboto, Helvetica, Arial, sans-serif;
  }

  .wrapper {
      padding: 1.5rem 0;
      filter: url('#goo');
  }

  .button {
      display: inline-block;
      text-align: center;
      background: var(--color);
      color: var(--bg);
      font-weight: bold;
      padding: 1.18em 1.32em 1.03em;
      line-height: 1;
      border-radius: 1em;
      position: relative;
      min-width: 8.23em;
      text-decoration: none;
      font-family: var(--font);
      font-size: 1.25rem;
  }

  .button:before,
  .button:after {
      width: 4.4em;
      height: 2.95em;
      position: absolute;
      content: "";
      display: inline-block;
      background: var(--color);
      border-radius: 50%;
      transition: transform 1s ease;
      transform: scale(0);
      z-index: -1;
  }

  .button:before {
      top: -25%;
      left: 20%;
  }

  .button:after {
      bottom: -25%;
      right: 20%;
  }

  .button:hover:before,
  .button:hover:after {
      transform: none;
  }
  @media screen and (min-width: 770px) {
    .button {
      display: none;
    }
  }
/* =============================================
フッターのCSSはここから
============================================= */

/* フッター01 */
footer.footer01 {
  padding: 2rem o;
  background-color: #F5F5DC;
}

.footer-container {
  display: flex;
  max-width: 800px;
  margin: 0 auto;
  padding: 2rem 0;
  align-items: center;
}

.footer-logo {
  width:300px;
  margin: 0 0 0 50px;
}

.logo-footer {
  margin: 0 auto;
  padding-top: 10px;
  width: 300px;
  font-size: 26px;
  font-family: "Yuji Syuku", serif;
  font-weight: 400;
  font-style: normal;
  text-align: left;
}

.footer-nav {
  width: 200px;
  margin-left: 1rem;
}

a.list{
  display: inline-block;
  font-size:110%;
  text-decoration:none;
  transition: .1s;
  -webkit-transform: scale(1);
  transform: scale(1);
}
a.list:hover{
  -webkit-transform: scale(1.1);
  transform: scale(1.1);
}

.sns-container {
  width: 40px;
  margin-right: 4;
}

p.copyright {
  text-align: center;
  padding-bottom: 2rem;
}

@media screen and (max-width: 480px) {
  footer.footer01 {
    padding: 1rem 1rem;
  }

  .footer-container {
    flex-wrap: wrap;
    justify-content: center;
    max-width: 340px;
    margin-bottom: 1rem;
  }

  .footer-logo {
    width: 100%;
    height: auto;
    margin: 0 auto;
    text-align: center;
  }

  .footer-nav {
    display: none;
  }

  a.list {
    text-align: center;
  }

  ul.sns-container {
    display: none;
  }
}