@charset "utf-8";
@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+JP:wght@300&display=swap');
@font-face {
  font-family: 'A-OTF 太ゴB101 Pro';
  src: url('path/to/A-OTF-太ゴB101-Pro.woff2') format('woff2'),
       url('path/to/A-OTF-太ゴB101-Pro.woff') format('woff');
  font-weight: normal;
  font-style: normal;
}

.element {
  font-family: 'A-OTF 太ゴB101 Pro', sans-serif;
}

body {
  font-family: 'A-OTF 太ゴB101 Pro', sans-serif;
}

.container {
  object-fit: cover;
}

a {color: #53A04F;}
a:hover {opacity: 0.6; text-decoration: none;}

.relative {
  position: relative;
}


.clearfix::after {
  content: "";
  display: block;
  clear: both;
}

.no-action {pointer-events: none;  opacity: 0.5;  color: #625f5f!important;}
.lineheight{line-height:180%;}
/*MAIN BLOCK TXT*/
.abs_on {
  position: absolute;
  top:0px;
  left: 0px;
}



  main {}
main img {
  width:100%;
}

/*Navigation*/
/*========= ナビゲーションのためのCSS ===============*/
.footer_BTN {
  position: fixed;
  left: 0;
  bottom: 0;
  width: 100%;
  background: #86A068;
}

h2.title {
  font-family: "shippori-mincho-b1", sans-serif;
font-weight: 400;
font-style: normal;
color: #64843E;
}

h3.title {
  font-family: "shippori-mincho-b1", sans-serif;
font-weight: 400;
font-style: normal;
}



.title_en{
  font-family: "Apple LiGothic";
  font-weight: 400;
  font-style: normal;
  color: #64843E;
}

.separator {
  width: 80px;
  height: 1px; /* 線の太さを調整 */
  background-color: #64843E; /* 線の色 */
  margin: 10px auto; /* h2とpタグの間に適度な余白を追加 */
}
.separator_1 {
  width: 120px;
  height: 1px; /* 線の太さを調整 */
  background-color: #CCA72D; /* 線の色 */
  margin: 10px auto; /* h2とpタグの間に適度な余白を追加 */
}
.separator_2 {
  width: 120px;
  height: 1px; /* 線の太さを調整 */
  background-color: #358E1A; /* 線の色 */
  margin: 10px auto; /* h2とpタグの間に適度な余白を追加 */
}

.separator_wh {
  width: 80px;
  height: 1px; /* 線の太さを調整 */
  background-color: #fff; /* 線の色 */
  margin: 10px auto; /* h2とpタグの間に適度な余白を追加 */
}


  section.blcok01_sp {
    background-image: url(../images/BG_blco01_sp.png)!important;
    background-repeat: no-repeat;
    background-size: cover;
  }





  section.blcok01 {
    background-image: url(../images/BG_blco01.png);
    background-position: center center;
    background-repeat: no-repeat;
  }




@media screen and (min-width: 1920px) {
  section.blcok01 {
    background-size: 100% auto; /* 横幅が1920px以上の場合、拡大表示 */
  }
}

@media screen and (max-width: 1919px) {
  section.blcok01 {
    background-size: cover; /* それ以外ではトリミング */
  }
}



@media screen and (max-width: 767px){
  .center-bottom {
    position: absolute;
    bottom: -20px; /* 縦位置を一番下に固定 */
    left: 50%; /* 横位置の基準を中央に */
    transform: translateX(-50%); /* 横位置を中央に調整 */
  }
  }
  
  @media screen and (min-width: 768px){
    .center-bottom {
      position: absolute;
      bottom: -30px; /* 縦位置を一番下に固定 */
      left: 50%; /* 横位置の基準を中央に */
      transform: translateX(-50%); /* 横位置を中央に調整 */
    }
  }


@media screen and (min-width:1001px){
  .center-top {
    position: absolute;
    top: -70px; /* 縦位置を一番下に固定 */
    left: 50%; /* 横位置の基準を中央に */
    transform: translateX(-50%); /* 横位置を中央に調整 */
  }
  
  }

  @media screen and (max-width:1000px){
    .center-top {
      position: absolute;
      top: -20px; /* 縦位置を一番下に固定 */
      left: 50%; /* 横位置の基準を中央に */
      transform: translateX(-50%); /* 横位置を中央に調整 */
    }
    
    }

    @media screen and (max-width:850px){
      .center-top {
        position: absolute;
        top: 0px; /* 縦位置を一番下に固定 */
        left: 50%; /* 横位置の基準を中央に */
        transform: translateX(-50%); /* 横位置を中央に調整 */
      }
      
      }

.company dl {
  display: flex;
  flex-flow: row wrap;
  width: 100%;
  }
  .company dt {
  flex-basis: 15%;
  padding: 20px;
  border-bottom: 1px dotted #ccc;
  text-align: left!important;
  }
  .company dd {
  flex-basis: 85%;
  padding: 20px;
  border-bottom: 1px dotted #ccc;
  text-align: left!important;
  }
  @media screen and (max-width: 559px) {
  .company dl {
  flex-flow: column;
  }
  }

  .contact-section {
    position: relative;
    background-color: #86A068; /* 背景色 */
    padding: 50px 20px;
    text-align: center;
    clip-path: polygon(0 10%, 100% 0, 100% 100%, 0 100%); /* 背景を斜めに */
}

.contact-container {
    max-width: 800px;
    margin: 0 auto;
    border-radius: 10px;
    padding: 20px;
    position: relative;
    z-index: 1; /* 背景より上に表示 */
}

.contact-section::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #86A068; /* 緑の背景 */
    clip-path: polygon(0 10%, 100% 0, 100% 100%, 0 100%);
    z-index: -1; /* 背景として配置 */
}

.contact-bg {
    position: absolute;.contact-section {
      position: relative;
      background-color: #ffffff; /* 斜め部分の余白を白に */
      padding: 0; /* 全体のパディングをリセット */
      text-align: center;
  }
  

  
  /* 緑の最上部とフォームの間に余白を追加 */
  .contact-container {
    margin-top: 100px;
  }
  
  /* スマホ向けのスタイル */
  @media screen and (max-width: 767px) {
      .contact-container {
          margin-top: 50px; /* スマホ用の余白 */
      }
  }
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: -1;
    display: none;
}

.contact-bg.desktop {
    display: none;
}

.contact-bg.mobile {
    display: block;
}


.contact-content h2 {
    font-size: 24px;
    margin-bottom: 10px;
    color: #64843E;
}

.contact-content p {
    font-size: 16px;
    margin-bottom: 30px;
    color: #64843E;
}

.contact-form div,
.wpcf7-formm div {
    margin-bottom: 20px;
    text-align: left;
   
}

.contact-form label,
.wpcf7-form label {
    display: block;
    font-size: 14px;
    color: #fff;
    margin-bottom: 5px;
}

.contact-form input,
.contact-form select,
.contact-form textarea,
.wpcf7-form input,
.wpcf7-form select,
.wpcf7-form textarea {
    width: 100%;
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 5px;
    background-color: #fff;
}

.contact-form textarea,
.wpcf7-form textarea {
    height: 100px;
}

.submit-container {
    text-align: center;
}

.submit-container button {
    background-color: #64843E;
    color: #fff;
    padding: 10px 20px;
    border: none;
    border-radius: 5px;
    font-size: 16px;
    cursor: pointer;
}

.submit-container button:hover {
    background-color: #86A068;
}

/* メディアクエリでモバイルとPCの表示を切り替え */
@media screen and (min-width: 768px) {
    .contact-bg.desktop {
        display: block;
    }
    .contact-bg.mobile {
        display: none;
    }
}



footer {
  background-image: url(../images/footer_bg.png);
  background-position: top;
  color: #fff;
  background-color: #86A068;
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover; /* デフォルトではブラウザ幅に合わせて調整 */
}

@media screen and (min-width: 1920px) {
  footer {
    background-size: 100% auto; /* 横幅が1920px以上の場合、拡大表示 */
  }
}

@media screen and (max-width: 1919px) {
  footer {
    background-size: cover; /* それ以外ではトリミング */
  }
}

/* Google Mapを囲う要素 */
.map {
  position: relative;
  width: 100%;
  height: 0;
  padding-top: 75%; /* 比率を4:3に固定 */
}
 
/* Google Mapのiframe */
.map iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}