/* ==========================================================================
   ベース設定
   ========================================================================== */
html {
  box-sizing: border-box;
 font-family: "Noto Sans JP", "Helvetica Neue", Arial, sans-serif;
  /* font-family: "Shippori Mincho", "Noto Serif JP", serif; */
  font-weight: 500;
}
 *, *:before, *:after {
  box-sizing: inherit;
  margin: 0;
  padding: 0;
} 
 a {
  text-decoration: none;
  color: inherit;
}
ul {
  list-style: none;
} 
body{
  background-color: #fffefc;
}
main{
    display: flex;
    flex-direction: column;
    align-items: center;
}
/* ==========================================================================
   共通・固定パーツ
   ========================================================================== */
/* お問い合わせ固定ボタン */
.fixed-contact-btn {
  position: fixed;
  right: 0;
  top: 0px;
  background-color: #EF8200; /* デザインのオレンジ */
  color: #ffffff;
  /* writing-mode: vertical-rl; */
  padding: 20px 10px 20px 10px;
  font-weight: 400;
  font-size: 15px;
  letter-spacing: 2px;
  z-index: 100;
  /* box-shadow: -2px 2px 15px rgba(93, 93, 93, 0.27); */
  /* border: solid #EF8200 1px; */
  border-radius:0px 0 0 3px;
  border-right: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content:center;
}
.mail{
   writing-mode: vertical-rl;
    font-weight: 400;
}


/* ヘッダー */
.header {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  padding: 30px 50px;
 width: 100%;

}
@media (max-width:580px) {
  .header {
  padding: 28px 26px 0 20px;

}
}
.header_inner{
  width: 100%;
  max-width: 1280px;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  
}


.header-logo {
  display: flex;
  align-items: center;
}


.header-logo h1 {
  line-height: 1;
  display: flex;
  align-items: center;
}


.logo-img {
  height: auto;
  width: 270px;
  object-fit: contain;
  padding-top: 10px;
}

@media (max-width: 840px) {
.logo-img {
  height: auto;
  width: 230px;
  object-fit: contain;
  padding-top: 10px;
  margin-left: -10px;
}
}

@media (max-width: 580px) {
.logo-img {
  margin-left: 0px;
  width: 200px;
  margin-left: 10px;
}}
@media (max-width: 540px) {
.logo-img {
  padding-top: 0px;
  width: 230px;
  padding-left: 0px;
}
}


@media (max-width: 450px) {
.logo-img {
  padding-top: 0px;
  width: 200px;
  padding-left: 0px;
  margin-left: 0;
}
}

@media (max-width: 380px) {
.logo-img {
  padding-top: 0px;
  width: 170px;
  padding-left: 0px;
  margin-left: 0;
}
}


.pc-nav {
  display: none; 
}
@media (min-width: 1140px) {
  .pc-nav {
    display: flex;
    align-items: center;
    gap: 30px;
  }
  .pc-nav ul {
    padding-top:10px;

    display: flex;
    gap: 30px;
  }
  .pc-nav ul li a {
    font-size: 14.5px;
    font-weight: 500;
    color: #333;

    letter-spacing: 0.1em;
    padding: 5px 0;
    transition: color 0.3s;

  }
  .pc-nav ul li a.active,
  .pc-nav ul li a:hover {
    color: #07a860;;
  }
}


.sp-menu-trigger {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  width: 25px;
  height: 12px;
  background: none;
  border: none;
  cursor: pointer;
  margin-top: 15px;
}
@media (min-width: 1140px) {
  .sp-menu-trigger {
    display: none;
  }
}

@media (max-width: 540px) {
  .sp-menu-trigger {
    margin-top: 5px;
  }
}
.sp-menu-trigger span {
  display: block;
  width: 100%;
  height: 2px;
  background-color: #333;
}


/*==========================
スマホメニュー
==========================*/

.sp-nav{
  padding-top: 119px;
  position: fixed;
  inset: 0;
  background: rgba(255, 255, 255, 0.937);

  display: flex;
  justify-content: center;
  align-items: flex-start;

  opacity: 0;
  visibility: hidden;

  transition: .5s;

  z-index: 999;
}

.sp-nav.active{
  opacity: 1;
  visibility: visible;
}

.sp-nav ul{
  text-align: center;
}

.sp-nav li{
  margin: 35px 0;

  opacity: 0;
  transform: translateY(20px);
  transition: .5s;
}

.sp-nav.active li{
  opacity: 1;
  transform: translateY(0);
}

.sp-nav.active li:nth-child(1){transition-delay:.1s;}
.sp-nav.active li:nth-child(2){transition-delay:.2s;}
.sp-nav.active li:nth-child(3){transition-delay:.3s;}
.sp-nav.active li:nth-child(4){transition-delay:.4s;}
.sp-nav.active li:nth-child(5){transition-delay:.5s;}

.sp-nav a{
  font-size: 18px;
  color:#333;
  letter-spacing:.1em;
  transition:.3s;
  font-weight: 400;
}

.sp-nav a.sp-nav-home{
  color: #07a860;
  
}


.sp-nav a.sp-nav-contact{
   display: inline-block;
  /* margin-top: 50px; */
  /* border: solid 1px #07a860; */
    color: #07a860;
    /* padding: 20px 35px; */
  
}
/* 
.sp-nav-contact::before{
    content: "";
  display: inline-block;

  width: 50px;
  height: 50px;

  background-image:url("./images/メールアイコングリーン.svg");
  width: 50px;
} */
.sp-nav a:hover{
  color:#07a860;
}


/*==========================
ハンバーガー → ×
==========================*/

.sp-menu-trigger{
  position: relative;
  z-index:1001;
}

.sp-menu-trigger span{
  position:absolute;
  left:0;
  width:100%;
  transition:.4s;
}

.sp-menu-trigger span:nth-child(1){
  top:0;
}

.sp-menu-trigger span:nth-child(2){
  bottom:0;
}

.sp-menu-trigger.active span:nth-child(1){
  top:5px;
  transform:rotate(45deg);
}

.sp-menu-trigger.active span:nth-child(2){
  bottom:5px;
  transform:rotate(-45deg);
}

/* ==========================================================================
   メインビジュアル (FV) エリア
   ========================================================================== */



.fv-copywrapper{
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.catch-img-wrap{
 
  padding: 0 50px;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: 80px;
  margin-bottom: 90px;
}

@media (max-width:986px) {
  .catch-img-wrap{
  padding: 0 25px;
margin-top:60px;
 
}}

@media (max-width:697px) {
  .catch-img-wrap{
  padding: 0 5% 0 12%}
 
}

@media (max-width:426px) {
  .catch-img-wrap{
  padding: 0 3% 0 9%}
 
}


.catch-img-inner{
  max-width: 1280px;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  gap: 20px;
  padding: 0 80px 0px 20px;

  
}

@media (max-width:986px) {
.catch-img-inner{
  max-width: none;
  gap: 0px;
  padding: 0 40px 0 30px;



  
}
}

@media (max-width:830px) {
.catch-img-inner{
  max-width: none;
  gap: 15px;

  /* flex-direction: column;
  align-items:flex-start; */
  /* justify-content: center; */
  padding: 0 ;
  width: fit-content;

  
}
}

 
@media (max-width:697px) {
  .catch-img-inner{
  
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  width: 100%;
  gap: 25px;


  
}}


.catch-copy-wrapper{
  display: flex;
  flex-direction: column;
  justify-content: flex-start;

  gap: 20px;
  padding: 0 0% 0 0;
}

/* メインコピー */
.main-catch{
  font-family: 'shippori mincho';
  font-weight: 450;
  line-height: 1.6;
  letter-spacing: 0.25em;
  color: #323232;
  font-size: 52px;
}

@media (max-width:1280px) {
  .main-catch{
  font-size: 51px;}
  
}

@media (max-width:1190px) {
  .main-catch{
  font-size: 45px;}
  
}


@media (max-width:1027px) {
  .main-catch{
  font-size: 36px;}
  
}


@media (max-width:724px) {
  .main-catch{
  font-size: 33px;}
  
}

@media (max-width:697px) {
  .main-catch{
  font-size: 8vw;

  
}}


@media (max-width:350px) {
  .main-catch{
  font-size: 27px;

  
}}

@media (max-width:309px) {
  .main-catch{
  font-size: 8vw;

  
}}

/* サブコピー */
.sub-catch{
  font-size: 16px;
  line-height: 2.4;
  letter-spacing: 0.2em;
  color: #2e2e2e;
  margin-left: 5px;
 
}


@media (max-width:1280px) {
  .sub-catch{
  font-size: 17px;} 
  
}

@media (max-width:1190px) {
  .sub-catch{
  font-size: 15px;}
  
}

@media (max-width:1027px) {
  .sub-catch{
  font-size: 13px;
letter-spacing: 1.2px;}
  
}


@media (max-width:724px) {
  .sub-catch{
  font-size: 12px;
margin-left: 3px;
letter-spacing: 1px;}
  
}

@media (max-width:697px) {
  .sub-catch{
  font-size: 2.6vw;
  font-weight: 350;

  
}}

@media (max-width:600px) {
  .sub-catch{
  font-size: 14.5px;
  font-weight: 350;
  line-height: 185%

  
}}

@media (max-width:557px) {
  .sub-catch{
  font-size: 13px;

  
}}

@media (max-width:363px) {
  .sub-catch{
font-size: 12px;

  
}}

@media (max-width:371px) {
  .sub-catch{
 line-height: 190%;

  
}}

@media (max-width:322px) {
  .sub-catch{
  font-size: 4vw;

  
}}

@media (min-width:430px) {
  .fvbr{
    display: none;
  }
  
}

@media (min-width:294px) {
  .fvbr2{
    display: none;
  }
  
}


@media (max-width:294px) {
  .fvbr{
    display: none;
  }
  
}


@media (max-width:390px) {
.catch-copy-wrapper{gap: 15px;}}


/* サブコピーの改行はタブレット以下までfで */
.br{
  display: flex;
}


/* FVの導入事例ボックス */
@media (max-width:697px) {
.news-card-wrap{
display: flex;
flex-direction: column;
align-items: flex-start;
justify-content: flex-start;
width: 100%;
padding-right: 7%;

}}

/* FV導入事例のカード枠 */
.news-card{
  margin-top: 50px;
  border: solid 1px #333;
  display: flex;
  flex-direction: column;
  padding: 20px 30px;
   width: 450px;
   max-width: 450px;
}

@media (max-width:1280px) {
  .news-card{
   width: 380px;
   max-width: 380px;}
  
}

@media (max-width:1190px) {
  .news-card{
   width: 320px;
   max-width: 320px;
  padding: 15px 20px 15px 22px;}
  
}


@media (max-width:990px) {
  .news-card{
   width: 275px;
   max-width: 295px;
  padding: 12px 20px 11px 22px }
  
}@media (max-width:697px) {
  .news-card{
 
   
  

 
  padding: 17px 23px;
margin-top: 20px;
width: 100% !important; /* どうしても効かない時の最終兵器 */
    max-width: none;        /* PC側の max-width 制限を無効化する */
 
}
  
}

@media (max-width:467px) {
  .news-card{
    width: 95%;
  

   max-width: 300px;
  padding: 13px 19px 13px 19px;
margin-top: 20px;
}
  
}

@media (max-width:390px) {
  .news-card{
   
   max-width: 305px;
  padding: 14px 15px;
margin-top: 20px;
}
  
}

@media (max-width:375px) {
  .news-card{
   
   max-width: 260px;
  padding: 14px 10px 12px 16px;
margin-top: 20px;
}
  
}

/* 「導入事例見出し」と「一覧へ＞」 */
.news-header{
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}

/* 「導入事例」 */
.news-title_fv{
  font-size: 1.2rem;
  color: #0c5a25; 
  color: #069052; 


  letter-spacing: 0.07em;

  font-weight: 500;
}

/* 「一覧へ　＞」 */
.news-more-btn{
  display: flex;
  flex-direction: row;
}


@media (max-width:1280px) {
  .news-title_fv{font-size: 1.2rem;}
  .news-more-btn{font-size: 1rem;}
  
}

@media (max-width:1190px) {
.news-title_fv{font-size: 1rem;}
  .news-more-btn{font-size: 0.9rem;}
}


@media (max-width:724px) {
.news-title_fv{font-size: 0.9rem;}
  .news-more-btn{font-size: 0.8rem;}
}


@media (max-width:435px) {
.news-title_fv{font-size: 0.85rem;}
  .news-more-btn{font-size: 0.79rem;}
}

.btn-text_fv{
   padding: 0 12px 0 14px;
  font-weight: 500;
}



@media (max-width:430px) {

.btn-text_fv{
   padding: 0 5px 0 5px;

}
}


.btn-arrow_fv{
   display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 100%;
  /* border-left: 1px solid #333333; */
  font-size: 0.75rem;
  font-weight: bold;
}

/*  導入事例点線 */
.news-divider{
  border: none;
  border-top: 1px dashed #4b4b4b; /* きれいな1pxの黒い点線 */
  margin: 10px 0 18px 0;
}


@media (max-width:1190px) {
  .news-divider{
  margin: 7px 0 10px 0;
}
}


@media (max-width:375px) {
.news-divider {
        margin: 4px 0 8px 0;
    }}


/* FV導入事例ACF新規一件 */
.news-item{
  display: flex;
  flex-direction: row;
  gap: 13px;
}

/* FV導入事例 */
.news-thumb_fv{
  width: 70px;
  height: 70px;
  min-width: 70px;  /* 💡 周りの要素に潰されないように横幅をカチッと固定 */
  min-height: 70px; /* 💡 縦幅もカチッと固定 */
  flex-shrink: 0;   /* 💡 親要素がflexだった場合に縮むのを絶対に防ぐ */
  overflow: hidden;
  border-radius: 3px;
}

.news-thumb_fv_img{
  width: 100%;
  height: 100%;
  object-fit: cover;       /* 枠いっぱいに表示し、はみ出しはトリミング */
  object-position: center; /* 中央を基準に表示 */
}

@media (max-width:1190px) {
  .news-thumb_fv{
  width: 60px;
  height: 60px;
  overflow: hidden;
  border-radius: 3px;
  
}

.news-thumb_fv_img{
  width: 100%;
  height: 100%;
  object-fit: cover;      /* 枠いっぱいに表示し、はみ出しはトリミング */
  object-position: center; /* 中央を基準に表示 */
}
}

@media (max-width:990px) {
  .news-thumb_fv{
  width: 60px;
  height: 60px;
  overflow: hidden;
  border-radius: 3px;
  min-width: 45px;  /* 💡 周りの要素に潰されないように横幅をカチッと固定 */
  min-height: 45px; /* 💡 縦幅もカチッと固定 */
  flex-shrink: 0;   /* 💡 親要素がflexだった場合に縮むのを絶対に防ぐ */
  overflow: hidden;
  border-radius: 3px;
  
}

.news-thumb_fv_img{
  width: 100%;
  height: 100%;
  object-fit: cover;      /* 枠いっぱいに表示し、はみ出しはトリミング */
  object-position: center; /* 中央を基準に表示 */
}
}

.news-body{
  display: flex;
  flex-direction: column;
  justify-content: center;
  /* margin-bottom: 20px; */
  gap: 1px;
}

.categoly_fv{
  width: fit-content;
  padding: 0px 4px 1px 4px;
  color: #ffffff;
  /* color: #07a860; */
  /* border: solid 1px #3b3b3b; */
  font-size: 11.7px;
  /* display: none; */
  background-color: #07a860;
}

@media (max-width:1000px) {
  .categoly_fv{
   padding: 0px 4px 1px 4px;
   font-size: 12.1px;
}
}


@media (max-width:696px) {
  .categoly_fv{
   padding: 0px 3px 1px 3px;
   font-size: 12px;
   gap: 5px;
}
}

@media (max-width:1190px) {
  .news-body{
  margin-bottom: 0px;
}
}

.news-date{
  font-size: 13px;
  color: #b9b9b9;
  font-weight: 550;
  letter-spacing: 0.05px;
}


.news-text{
  font-size: 12.7px;
}

@media (max-width:1190px) {
  .news-text{
  font-size:12px;
}
}


@media (max-width:500px) {
  .news-text{
 line-height: 140%;
  font-size:11.5px;

}}

/* FV下の画像 */
.fv_background_img_wrap{
  width: 100%;
  
  overflow: hidden;
}
.fv_background_img{
  width: 100%;
}
/* ==========================================================================
   採用丸ボタン
   ========================================================================== */
.recruit-circle-btn {
  position: fixed;
  bottom: 20px;
  right: 4%; /* スマホ時は人物の左下に配置 */
  width: 110px;
  height: 110px;
  background-color: rgb(255, 149, 20);
  border: 1px solid rgb(255, 255, 255);
  border-radius: 50%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  box-shadow: 0 4px 12px rgba(0,0,0,0.08);
  transition: transform 0.3s, box-shadow 0.3s;
  z-index: 5;}
@media (max-width:840px) {
  .recruit-circle-btn {
     width: 100px;
  height: 100px;
}}

.recruit-circle-btn:hover {
  transform: scale(1.05);
  box-shadow: 0 6px 16px rgba(0,178,154,0.2);
}

.recruit-circle-btn .en {
  font-size: 0.75rem;
  color: #00b29a;
  font-weight: bold;
  margin-bottom: 4px;
}

.recruit-circle-btn .ja {
  font-size: 0.8rem;
  color: rgb(255, 255, 255);
  font-weight: bold;
  letter-spacing: 0.05em;
}
@media (max-width:840px) {
  .recruit-circle-btn .ja {
    font-size: 0.7rem;
  }
}
.mail_icon{
  width: 25px;
  height: auto;
}
.recruit-circle-btn .arrow {
  color: #074714;
  font-size: 0.8rem;
  margin-top: 4px;
  transform: rotate(90deg); /* 矢印を下向きっぽくする場合など調整用 */
}

/* PCサイズ時の丸ボタン位置変更 */
/* @media (min-width: 769px) {
  .recruit-circle-btn {
    bottom: 5%;
    right: 3%; 
    left: auto; 
    width: 120px;
    height: 120px;
  }
  .recruit-circle-btn .en {
    font-size: 0.3rem;
  }
  .recruit-circle-btn .ja {
    font-size: 0.9rem;
  }
} */




/* ==========================================================================
  ◎◎◎◎導入部分◎◎◎◎
   ========================================================================== */

   /* 導入部分セクション全体 */
   .about{
    display: flex;
    flex-direction: row;
    width: 100%;
    margin-top: 200px;
    align-items: center;
  }

  @media (max-width:1140px){
    .about{margin-top: 120px;
  }}

   @media (max-width:840px){
    .about{
      flex-direction: column-reverse;
      margin-top: 50px;
      
    }
    .about-inner{
      margin-bottom: 50px;}
   }

    @media (max-width:540px){
      .about{margin-top: 40px;
      padding: 0 }}



  /* 導入部分：写真 */

  .about_img_inner{
    width: 45%;
  }

  @media (max-width:840px){
    .about_img_inner{
      width: 100%;
    
    }
   }
  .about_img{
    width: 100%;
  }

    /* 導入部分：本文の枠*/
  .about_wrap{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 55%;
    padding: 0 10%;
  }

  @media (max-width:1140px){
    .about_wrap{
       padding: 0 8%;
    }
  }

   @media (max-width:840px){
    .about_wrap{
       width: 100%;
       padding: 0 45px;
       margin-top: 25px;
    }
  }

  @media (max-width:540px){
    .about_wrap{
       padding: 0 25px;
        }
  }

   /* 導入部分：見出し Ourservice*/
   .section-en {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 0.8rem;
  letter-spacing: 0.15em;
  color: #8a8a8a;
  /* color:rgb(255, 149, 20); */
  color: #07a860;
  margin-bottom: 14px;
}

.section-en::before {
  content: "";
  width: 25px;
  border-top: 1px solid #8a8a8a;
  /* border-top:1px solid rgb(255, 149, 20); */
 border-top:1px solid #07a860;
}
   /* 導入部分：本文の見出し*/
    .about_ttl{
    font-size: 31px;
    margin-bottom: 20px;
    line-height: 1.4;
    font-weight: 400;
    /* font-family: 'shippori mincho'; */
    letter-spacing: 1.7px;
    color: #242424;
   }
   @media (max-width:1140px){
    .about_ttl{
      font-size: 26px;
    }
   }

   @media (max-width:840px){
    .about_ttl{
      font-size: 30px;
    }
   }

   @media (max-width:540px){
    .about_ttl{
      font-size: 25px;
    }
   }

   /* 導入部分：本文の文章*/
   .about_lead{
    font-size: 14px;
    margin-bottom: 45px;
    line-height: 2.2;
    letter-spacing: 1.15px;
   }

   @media (max-width:840px){
    .about_lead{
      font-size: 12px;
    }
   }

   /* 会社情報ボタン*/
   .about_btn{
    display: inline-block;
    padding: 10px 25px;
    /* background-color: #0c5a25; */
    /* width: fit-content; */
    color: #07a860;;
    border: solid 1px #585858;
    font-size: 14px;
    letter-spacing: 1.2px;

   }

   @media (max-width:840px){
    .about_btn{
     padding: 10px 24px;
    }
   }

    

/* ==========================================================================
  ◎◎◎◎製品紹介◎◎◎◎
   ========================================================================== */
/* 製品紹介セクション全体 */
   .product{
    
    margin-top: 180px;
     width: 100%;
    padding: 0 5%;
    background: #fffefc;
   }
/* 製品紹介セクション：インナー; */
.product-inner{
  display: flex;
  flex-direction: column;

 
}

/* 製品紹介セクション：ヘッダー; */
.product_header{
  margin:  0 auto;
  align-items: center;
  display: flex;
  flex-direction: column;
  justify-content: center;
}


/* 製品紹介部分：ヘッダー本文の見出し*/

   .product_header{
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    width: 100%;
    padding: 0 5%;
    margin-bottom: 50px;
   }

   @media (max-width:840px) {
    .product_header{

    margin-bottom: 30px;
   }
   }

   .section-en_product{
   display: flex;
  align-items: center;
  gap: 10px;

  font-size: 0.8rem;
  letter-spacing: 0.15em;
  color: #07a860;
  margin-bottom: 10px;
   }
    .product_ttl{
    font-size: 30px;
    margin-bottom: 30px;
    line-height: 1.4;
    font-weight: 500;
    /* font-family: 'shippori mincho'; */
    letter-spacing: 1.5px;
    font-weight: 450;
    color: #363636;
    
   }


   @media (max-width:1140px){
    .product_ttl{
      font-size: 26px;
    }
   }

   @media (max-width:840px){
    .product_ttl{
      font-size: 25px;
    }
   }

   @media (max-width:540px){
    .product_ttl{
      font-size: 25px;
    }
   }

   
.section-en_product::before {
 content: "";
  display: block;
  width: 25px;
  height: 1px;
  background: #07a860;
}

/* 製品紹介:ul */
.product_ul{
  display: grid;
  grid-template-columns: repeat(3,1fr);
  gap: 30px;
}

@media (max-width:840px) {
  .product_ul{
    grid-template-columns: repeat(2,1fr);
  gap: 35px 30px;}
  
}

@media (max-width:540px) {
  .product_ul{
    grid-template-columns: repeat(1,1fr);
  gap: 45px;}
  
}
/* 製品紹介:li */
.product_li a{ 
display: flex;
flex-direction: row;
  
}
@media (min-width:1400px) {
  .product_thumnail_img.blog{
    width:75px ;
  }

.product_li.blog a {
  display: flex !important;
  flex-direction: row; /* 横に並べる */
  align-items: flex-start; /* 上揃え */
  gap: 9px; /* 左（画像）と右（テキスト）の間のすき間 */
  text-decoration: none;
  color: inherit;
}
/* 左側：サムネイル画像エリアを 50px に設定 */
.product_thumnail.blog {
  width: 119px !important;  /* 横幅を50pxに固定 */
  height: 95px;            /* 正方形にしたい場合は高さも50pxに指定 */
  flex-shrink: 0;          /* 右側の文章に押されて縮まないようにする */
  overflow: hidden;
     /* 角丸（不要なら削除してください） */
}

/* 中の画像が変形しないようにきれいに収める */
.product_thumnail_img.blog {
  width: 100%;
  height: 100%;
  object-fit: cover;       /* 縦横比を崩さずに50pxの中にキレイに収める */
  display: block;
}

.blog_cg_day_title_wrap{
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  
  
} 

}

/* 商品紹介サムネイル */
.product_thumnail {
  width: 100%;
  aspect-ratio: 5 / 3; /* 横4：縦3 */
  overflow: hidden;
}

.product_thumnail_img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}



/* 製品紹介カテゴリと日付 */
.product_categoly_day{
  display: flex;
  flex-direction: row;
  gap: 10px;
  margin-top: 7px;
  margin-bottom: 2px;
  justify-content: flex-start;
  align-items: center;
}
.product_categoly{
  padding: 2px 5px;
  color: #ffffff;
  /* color: #07a860; */
  /* border: solid 1px #3b3b3b; */
  font-size: 12px;
  /* display: none; */
  background-color: #07a860;
  font-weight: 450;
  /* border-radius: 3px; */
  letter-spacing: 1.3px;
  
}
.product_day{
  font-size: 13px;
  color: #585858;
   /* color: #07a860; */
   line-height: 150%;
}
/* 製品紹介タイトル */

 .product_title{
  font-size: 14px;
  letter-spacing: 0.0001px;
  /* color: #07a860; */
  line-height: 150%;
 }

 /* 商品紹介一覧へ */
 .product-more-btn-wrap{
  width:100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: flex-end;
 }
 .product-more-btn{
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 50px;
 }

.btn-text-product{
  font-size: 13px;
}

.btn-arrow-product{
  font-size: 13px;
}







.product-more-btn-wrap{
  display:flex;
  justify-content:center;
  margin-top:65px;
}

.product-more-btn{
  display:flex;
  align-items:center;
  gap:50px;
  padding-right:5px;
  padding-left:5px;
  padding-bottom:11px;
  border-bottom:1px dashed #4b4b4b;
    color:#222;
  text-decoration:none;
  transition:.3s;
}
@media (max-width:540px) {
  .product-more-btn{
      gap: 20px;
    padding-bottom: 6px;
  padding-left: 2px;
padding-right: 2px;}
  
}
.product-more-btn .arrow{
  transition:.3s;
}

.product-more-btn:hover{
  color:#2a2a2a;
}

.product-more-btn:hover .arrow{
  transform:translateX(6px);
}



@media (min-width:1400px) {
  
.product_thumnail.blog{
   width:75px ;
}
  .product_thumnail_img.blog{
    width:75px ;
  }}

/* ==========================================================================
  ◎◎◎◎導入事例◎◎◎◎
   ========================================================================== */


/* 製品紹介セクション全体 */
   .case_study{
    
    margin-top: 110px;
     width: 100%;
    padding: 0 5%;
    background: #FFFEFC;
   }
/* 製品紹介セクション：インナー; */
.case_study-inner{
  display: flex;
  flex-direction: column;

 
}

/* 製品紹介セクション：ヘッダー; */
.case_study_header{
  margin:  0 auto;
  align-items: center;
  display: flex;
  flex-direction: column;
  justify-content: center;
}


/* 製品紹介部分：ヘッダー本文の見出し*/

   .case_study_header{
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    padding: 0 2%;
    margin-bottom: 50px;
   }

   @media (max-width:840px) {
    .case_study_header{
    margin-top: 45px;

    margin-bottom: 30px;
   }
   }

   
   @media (min-width:515px) {
    .case_study_header{

    margin-top: 90px;
   }
   }

   .section-en_case_study{
   display: inline-block;
  align-items: center;
  gap: 10px;

  font-size: 0.8rem;
  letter-spacing: 0.15em;
  color: #07a860;
  /* color: rgb(255, 149, 20); */
  margin-bottom: 8px;
  justify-content: center;
   }
    .case_study_ttl{
    font-size: 27px;
    margin-bottom: 30px;
    line-height: 1.4;
    font-weight: 500;
    /* font-family: 'shippori mincho'; */
    letter-spacing: 1.5px;
    color: #363636;
    
   }


   @media (max-width:1140px){
    .case_study_ttl{
      font-size: 26px;
    }
   }

   @media (max-width:840px){
    .case_study_ttl{
      font-size: 25px;
    }
   }

   @media (max-width:540px){
    .case_study_ttl{
      font-size: 25px;
       margin-bottom: 2px;
    }
   }
    
.section-en_case_study::after {
  content: "";
  display: block;
  width: 25px;
  height: 1px;
  background: #07a860;
  /* background: rgb(255, 149, 20); */
  margin: 10px auto 0;
}

/* 製品紹介:ul */
.case_study_ul{
  display: grid;
  grid-template-columns: repeat(3,1fr);
  gap: 35px;
}

@media (max-width:840px) {
  .case_study_ul{
    grid-template-columns: repeat(2,1fr);
  gap: 35px 30px;}
  
}

@media (max-width:540px) {
  .case_study_ul{
    grid-template-columns: repeat(1,1fr);
  gap: 45px;}
  
}
/* 製品紹介:li */
.case_study_li{

  
}


/* 商品紹介サムネイル */
.case_study_thumnail {
  width: 100%;
  aspect-ratio: 5 / 3; /* 横4：縦3 */
  overflow: hidden;
}

.case_study_thumnail_img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* 製品紹介カテゴリと日付 */
.case_study_categoly_day{
  display: flex;
  flex-direction: row;
  gap: 10px;
  margin-top: 7px;
  margin-bottom: 2px;
  justify-content: flex-start;
  align-items: center;
}

/* カテゴリを束ねるコンテナ */
.case_study_categories {
  display: flex;
  flex-wrap: wrap; /* 入り切らない場合は折り返す */
  gap: 4px;        /* カテゴリ同士の隙間（適宜調整してください） */
}

@media (max-width:1400px) {
  .case_study_categories {
  margin-top: 5px;
margin-bottom: 2px;}
  
}
.case_study_categoly{
  padding: 0px 5px 1px 5px;
  color: #ffffff;
  /* color: #07a860; */
  /* border: solid 1px #3b3b3b; */
  font-size: 11px;
  /* display: none; */
  background-color: #07a860;
  /* background-color: rgb(255, 149, 20); */
  font-weight: 450;
  /* border-radius: 3px; */
  letter-spacing: 1.3px;
  margin-bottom: 1px;
  gap: 1px;
  
}
.case_study_day{
  font-size: 13px;
  color: #585858;
   /* color: #07a860; */
   line-height: 150%;
}
/* 製品紹介タイトル */

 .case_study_title{
  font-size: 14px;
  letter-spacing: 0.0001px;
  /* color: #07a860; */
  line-height: 150%;
 }

 /* 商品紹介一覧へ */
 .case_study-more-btn-wrap{
  width:100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: flex-end;
 }
 .case_study-more-btn{
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 50px;
 }

.btn-text-case_study{
  font-size: 13.5px;
}

.btn-arrow-case_study{
  font-size: 13px;
}







.case_study-more-btn-wrap{
  display:flex;
  justify-content:center;
  margin-top:60px;
}

.case_study-more-btn{
  display:flex;
  align-items:center;
  gap:65px;
  padding-right:12px;
  padding-left:35px;
  padding-bottom:10px;
  border-bottom:1px dashed #4b4b4b;
    color:#222;
  text-decoration:none;
  transition:.3s;
}
@media (max-width:540px) {
  .case_study-more-btn{
      gap: 40px;}
  
}
.case_study-more-btn .arrow{
  transition:.3s;
}

.case_study-more-btn:hover{
  color:#2a2a2a;
}

.case_study-more-btn:hover .arrow{
  transform:translateX(6px);
}



/* ==========================================================================
  ◎◎◎◎お問い合わせ◎◎◎◎
   ========================================================================== */
.contact{
  margin-top: 120px;
  padding: 50px 50px;
  width: 100%;
  background: url("./images/contact.png") center center / cover no-repeat;
}

@media (max-width:568px) {
  .contact{padding: 20px;}
}

.contact-inner{
  border: solid 1px #ffffff;
  display: flex;
  flex-direction: row;
  align-items: center;
  padding: 50px 6%;
  justify-content: center;
}
/* お問い合わせ見出しヘッダー */
.contact_header{
  display: flex;
  flex-direction: column;
  align-items: center;
}

.section-en_contact{
  font-size: 14px;
  font-weight: 500;
  color: #ffffff;
  margin-top: 4px;
}


.section-en_contact::after {
  content: "";
  display: block;
  width: 30px;
  height: 1px;
  background: #ffffff;
  /* background: rgb(255, 149, 20); */
  margin: 25px auto 0;
}



.contact_ttl{
  font-size: 33px;
  /* font-family: 'shippori mincho'; */
  font-weight: 400;
  color: #ffffff;
  letter-spacing: 1.5px;
}


@media (max-width:800px) {
  .contact_ttl{
  font-size: 28px;}
}

.contact_icon{
  width: 30px;
  margin-bottom: 0px;
  margin-top: 1px;
}

.contact_icon_wrap{
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

/* お問い合わせ説明文リード文 */

.contact-innner-left{
  display: flex;
  flex-direction: column;
  gap: 30px;
  align-items: center;
  width: 100%;
}
.contact_lead{
  font-size: 16px;
  color: #ffffff;
  letter-spacing: 2.3px;
  text-align: center;
  line-height: 180%;
}
@media (max-width:800px) {
  .contact_lead{font-size: 14px;}
}
.contact_mail_title{
  color: #135f26;
  font-size: 15px;
  text-align: center;
  
}
@media (max-width:800px) {
  .contact_mail_title{font-size: 14px;}
}
.contact_mail_arrow{
  color: #135f26;
}

.contact_mail_wrap{
  border: solid 1px #ffffff;
  padding: 25px  85px;
  margin-top: 30px;
  background-color: #ffffff;
  width: fit-content;
  display: flex;
  flex-direction: column;
  align-items: center;
  border-radius: 2px;
}
.contact_mail_btn{
  padding: 5px 0px;
  border-bottom: none;
  gap: 10px;
  width: 100%;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;

}
@media (max-width:568px) {

  .contact_mail_btn{
  flex-direction: column;
  align-items: center;
  gap: 5px;
}

.contact_mail_wrap{
  padding: 10px 22px 20px 22px;
}
  
}


/* ==========================================================================
  ◎◎◎◎フッター◎◎◎◎
   ========================================================================== */

   .footer {
  background: #fffefc;
  /* color: #fff; */
  padding-top: 55px;
}


.footer_inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 40px;

  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}


/* ロゴ側 */
.footer_logo_wrap {
  /* width: 300px; */
 
}


.footer_logo {
  width: 200px;
  height: auto;
   margin-left: -10px;
}

.footer_company_name{
  margin-top: 25px;
  font-size: 16px;
  line-height: 1.8;
  color: #161616;
  letter-spacing: 1.6px;
}

.footer_address {
  margin-top: 10px;
  font-size: 14px;
  line-height: 1.8;
  color: #161616;
  letter-spacing: 1.6px;
}


/* 右側 */
.footer_right_wrap {
  display: flex;
  align-items: center;
}


.footer_nav ul {
  display: flex;
  gap: 22px;
  list-style: none;
  padding: 0;
  margin: 0;
}


.footer_nav a {
  color: #333;
  font-size: 15px;
  text-decoration: none;
}

/* コピーライト */
.footer_bottom {
  margin-top: 50px;
  padding: 3px 0;
  border-top: 1px solid rgba(87, 87, 87, 0.2);
  text-align: center;
  color: #3d3d3d;
}


.footer_bottom p {
  font-size: 10px;
  margin: 0;
  color: #838383;
}

@media(max-width:768px){

  .footer_inner {
    flex-direction: column;
    gap: 40px;
    padding: 0 20px;
  }


  .footer_nav ul {
    flex-direction: column;
    gap: 15px;
  }

}
.footer_nav a.active_footer {
  color: #07a860;
}




/* ==========================================================================
  ◎◎◎◎Company◎◎◎◎
   ========================================================================== */

  .page-kv{

    /* background-image: url(./images/大自然の写真１.jpeg);
    width: 100%;
    height: 350px;
    background-size:cover;
  background-position:center;
  background-repeat:no-repeat;
 */
 margin-top: 20px;
 width: 100%;
 height: 240px;
   display: flex;
   flex-direction: row;
  align-items: flex-end;
  justify-content: center;
  overflow: hidden;
  } 

  @media (max-width:900px) {
    .page-kv{
     height: 280px;}
    
  }
  .page-title-wrap{
    padding: 30px 50px;
    /* background-color: #ffffffd1; */
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    width: fit-content;
    padding: 15px 250px 5px 230px;
    gap: 5px;
  }

  @media (max-width:1150px) {
    
  .page-title-wrap{
  padding: 15px 150px 5px 130px;
  }
  }

  
  @media (max-width:887px) {
    
  .page-title-wrap{
      padding: 15px 100px 15px 90px;
  }
  }

  
  @media (max-width:657px) {
    
  .page-title-wrap{
      padding: 15px 80px 15px 80px;
  }
  }

  
  @media (max-width:400px) {
    
  .page-title-wrap{
      padding: 15px 15px 15px 20px;
  }
  }

  .page-title-wrap.midashi{
    height: 100%;
background: linear-gradient(
  to right,
  #fafffc 0%,
  #fafffc 55%,
  rgba(250,255,252,0.99) 68%,
  rgba(250,255,252,0.96) 76%,
  rgba(250,255,252,0.90) 84%,
  rgba(250,255,252,0.78) 90%,
  rgba(250,255,252,0.60) 94%,
  rgba(250,255,252,0.38) 97%,
  rgba(250,255,252,0.15) 99%,
  rgba(250,255,252,0) 100%
);
justify-content: center;
  }

.page-title-en.midashi,.page-title.midashi{
  color: #1a1a1a;
}
.page-title-en.midashi{
  color: #0c5a25;
}
.page-title-en.midashi::before{
  color: #1e1e1e;
}


  .page-title-img-wrap{
     flex: 1;
  height: 100%;
  overflow: hidden;
  background-image: url(./images/heading-bg.jpg);
  background-size: cover;
background-position: center;
background-repeat: no-repeat;
display: flex;
align-items: center;
  }

  @media (max-width:515px) {
    .page-title-wrap.midashi{
      margin-top: 50px;
      height: fit-content;
      width: 100%;
      background: #f8f8f8;
      padding: 60px 28px 7px 28px;
    }
   .page-title-img-wrap{
      justify-content: flex-end;
      align-items: flex-end;
      margin-bottom: 5px;
  
    } 
  }
    


.page-title-img{
 width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}
  h1.page-title{
    font-size: 28px;
    letter-spacing: 4px;
    color: #202020;
    /* font-family: 'shippori mincho'; */
    font-weight: 400;
     /* writing-mode: vertical-lr; */

  }
    @media (max-width:1150px) {
      
  h1.page-title{
    font-size: 29px;
  }
    }


    
    @media (max-width:800px) {
      
  h1.page-title{
    font-size: 22px;
  }
    }



.page-title-en{
  /* writing-mode: vertical-rl; */
  font-size: 10px;
  letter-spacing: .2em;
  color: #07a860;
  position: relative;
  text-align: start;
  /* margin-top: 35px; */
  gap: 2px;
}
.page-title-en {
  position: relative;
  display: inline-block;
  padding-left: 40px; /* 線と文字の間隔 */
}

.page-title-en::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
  width: 20px;
  height: 1px;
  background-color: #07a860;
}



/* ==========================================================================
  ◎◎◎◎会社情報内容◎◎◎◎
   ========================================================================== */
.company-section{
  width: 100%;
  /* margin-top: 80px; */
  margin-bottom: 80px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.company-section-inner{
  position: relative;
  /* max-width: 1200px; */
  padding: 0 230px;
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  /* margin-left: -5px; */
}

@media (max-width:1150px) {
  .company-section-inner{
    padding: 0 130px;
  }
}


@media (max-width:887px) {
  .company-section-inner{
    padding: 0 90px;
  }
}
@media (max-width:515px) {
  .company-section-inner{
    padding: 0 28px;
  }
}
/* 製品紹介セクション：ヘッダー; */
.company_header{
  margin:  0 auto;
  align-items: center;
  display: flex;
  flex-direction: column;
  justify-content: center;
}


/* 製品紹介部分：ヘッダー本文の見出し*/

   .company_header{
    display: flex;
    flex-direction: column;
    align-items:flex-start;
    width: 100%;
    /* padding: 0 2%; */
    margin-bottom: 20px;
   }

   @media (max-width:840px) {
    .company_header{

    margin-bottom: 30px;
    margin: 0 20px ;
   }
   }

   .section-en_company{
   display: inline-block;
  align-items: center;
  gap: 10px;

  font-size: 0.8rem;
  letter-spacing: 0.15em;
  color: #07a860;
  /* color: rgb(255, 149, 20); */
  margin-bottom: 8px;
  justify-content: center;
   }
    .company_ttl{
    font-size: 29px;
    margin-bottom: 50px;
    line-height: 1.4;
    font-weight: 500;
    /* font-family: 'shippori mincho'; */
    letter-spacing: 4px;
    
   }

   .company_p{
    font-size: 14px;
    letter-spacing: 2px;
    line-height: 140%;
    padding: 0 20px;
    text-align: start;
    color: #999999;
   }

   
   @media (max-width:800px){
    .company_ttl{
      font-size: 24px;
      text-align: center;
    }
    .section-en_company{
      font-size: 0.5em;
    }
   }

   @media (max-width:1140px){
    .case_study_ttl{
      font-size: 26px;
    }
   }

   @media (max-width:840px){
    .case_study_ttl{
      font-size: 25px;
    }
   }

   @media (max-width:540px){
    .case_study_ttl{
      font-size: 20px;
    }
   }
    
.section-en_company::after {
  content: "";
  display: block;
  width: 25px;
  height: 1px;
  background: #07a860;
  /* background: rgb(255, 149, 20); */
  margin: 10px auto 0;
}


/* 会社案内リスト */

    .company-info-list {
        width: 100%;
        /* margin: 0 50px 0 50；x;； */
        border-top: 1px solid #eeeeee;
        border-bottom: 1px solid #eeeeee;
    }

    @media (max-width:860px){
      .company-info-list {
        margin: 0 30px;
    }

    }

    
    @media (max-width:431px){
      .company-info-list {
        margin: 0 ;
    }

    }

    .company-info-list li {
      width: 100%;
        display: flex;
        margin-top: 1px;
        margin-bottom: 1px;
        padding: 30px 5px;
        border-top: 1px solid #eeeeee;
        border-bottom: 1px solid #eeeeee;
        justify-content: flex-start;
    }

    @media (max-width:860px){
 .company-info-list li {
    flex-direction: column;
    margin-top: 1px;
    margin-bottom: 1px;
    padding: 30px 5px;
    border-top: 1px solid #eeeeee;
    border-bottom: 1px solid #eeeeee;
    gap: 20px
 }}

 
    @media (max-width:432px){
 .company-info-list li {

    padding: 25px 5px;
 }}

         .company-info-list li span

 {
        display: block;
        width: 13em;
        margin: 0;
        font-size: 16px;
        letter-spacing: 1.1px;
    }

        .company-info-list li div {
flex: 1;
        font-size: 16px;
         letter-spacing: 1.1px;
         line-height: 170%;
    }

      @media (max-width:860px){

        .company-info-list li span, .company-info-list li div{
          font-size: 14px;
        }


    }


    
    
    @media (max-width:450px){

        .company-info-list li span, .company-info-list li div{
          width: fit-content;
        }


    }



/* ==========================================================================
  ◎◎◎◎コンタクトフォーム◎◎◎◎
   ========================================================================== */
.contact-page-section{
  width: 100%;
  padding: 0px 0;
}

@media (max-width:768px) {
  .contact-page-section{
  padding: 0px 0;
}
}
   .contact-page-inner{
    max-width:900px;
    margin:0 auto;
}

.form-item{
    display:flex;
    border-bottom:1px solid #ddd;
    margin-left: -5px;
}

.form-label{
    width:230px;
    background:#f8f8f8;
    padding:28px 28px 28px 10px;
    font-weight:500;
    font-size: 15px;
}


@media (max-width:1052px) {

.form-label{
   width:230px;
}}

.form-input{
    flex:1;
    padding:28px;
}

.required{
    display:inline-block;
    margin-left:10px;
    padding:2px 8px;
    background:#07a860;
    color:#fff;
    font-size:12px;
    border-radius:3px;
}

.form-input input,
.form-input textarea{
    /* width:100%; */
    padding:14px;
    border:1px solid #ccc;
    border-radius:4px;
    font-size:16px;
}

.form-input input[type="text"]{
  width:100%;
}


.form-input input[type="email"]{
  width:100%;
}


.form-input input[type="tel"]{
  width:100%;
}


.form-input textarea{
  width:100%;
}
.form-input textarea{
    min-height:220px;
    resize:vertical;
}

.form-note{
    margin-top:8px;
    font-size:13px;
    color:#666;
}

.radio-group{
    display:grid;
    grid-template-columns: repeat(3,1fr);
    gap:15px;
}
@media (max-width:1052px) {
  .radio-group{
  
    grid-template-columns: repeat(3,1fr);
    gap:15px;
}
}

@media (max-width:988px) {
  .radio-group{
  
    grid-template-columns: repeat(2,1fr);
    gap:15px;
}
}

@media (max-width:466px) {
  .radio-group{
  
    grid-template-columns: repeat(1,1fr);
    gap:15px;
}
}

.radio-group label{
    display:flex;
    align-items:center;
    gap:10px;
    width: fit-content;
    font-size: 15px;
}

.form-btn{
    margin-top:60px;
    text-align:center;
}

.form-btn button{
    width:280px;
    height:60px;
    border:none;
    
    background:#07a860;
    color:#ffffff;
    font-size:18px;
    cursor:pointer;
    transition:.3s;
   
}

.form-btn button:hover{
    opacity:.8;
}

@media(max-width:768px){

.form-item{
    display:block;
}

.form-label{
    width:100%;
    /* background:none; */
    padding:10px 10px 10px;
}

.form-input{
    padding:15px 30px 30px 10px;
}

.form-btn button{
    width:100%;
}

}

.contact-form{
  width: 100%;
}
/* CF7用↓ */
/* 
    .contact-table{
    width:100%;
    border-collapse:collapse;
}

.contact-table tr{
    border-bottom:1px solid #ddd;
}

.contact-table th{
    width:240px;
    padding:28px 20px;
    text-align:left;
    vertical-align:top;
    font-weight:600;
    background:#f8f8f8;
}

.contact-table td{
    padding:20px;
}

.required{
    display:inline-block;
    margin-left:8px;
    padding:2px 8px;
    font-size:12px;
    color:#fff;
    background:#07a860;
    border-radius:3px;
}

.contact-table input[type="text"],
.contact-table input[type="email"],
.contact-table input[type="tel"],
.contact-table textarea{
    width:100%;
    padding:14px;
    border:1px solid #ccc;
    border-radius:4px;
    font-size:16px;
    transition:.3s;
}

.contact-table input:focus,
.contact-table textarea:focus{
    outline:none;
    border-color:#07a860;
}

.contact-table textarea{
    min-height:220px;
    resize:vertical;
}

.contact-note{
    margin-top:8px;
    font-size:13px;
    color:#666;
}

.contact-table .wpcf7-list-item{
    display:block;
    margin-bottom:10px;
}

.contact-submit{
    margin-top:60px;
    text-align:center;
}

.contact-submit input{
    width:300px;
    height:60px;
    background:#07a860;
    color:#fff;
    border:none;
    border-radius:50px;
    font-size:18px;
    cursor:pointer;
    transition:.3s;
}

.contact-submit input:hover{
    background:#05924d;
}

@media(max-width:768px){

.contact-table,
.contact-table tbody,
.contact-table tr,
.contact-table th,
.contact-table td{
    display:block;
    width:100%;
}

.contact-table th{
    padding:18px 0 8px;
    background:none;
    border:none;
}

.contact-table td{
    padding:0 0 25px;
}

.contact-submit input{
    width:100%;
}

} */



/* ==========================================================================
◎◎◎◎製品案内記事箇所◎◎◎◎
   ========================================================================== */
.product_blog_section{
  width: 100%;
  padding: 0 50px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  /* background-color: #fffff6; */
  margin-top: 100px;
}

@media (max-width:730px) {
  .product_blog_section{
  padding: 0 10px;
 
}}

@media (max-width:730px) {
  .product_blog_section{
  padding: 0 7px;
 
}}


.product_blog_section_inner{
  max-width: 1190px;
  width: 100%;
}

/* パンくず */
.breadcrumb {
  padding: 5px 7px 0px 0;
  margin: 0px 20px 80px 20px;
  font-size: 15px;
  line-height: 170%;
  width: 100%;
  /* border-top: solid 1px #a0a0a0; */
  /* border-bottom: solid 1px #a0a0a0; */
  
}
@media (max-width:825px) {
  .breadcrumb {margin-top: 5px;
  padding-top: 0;  margin-bottom: 60px;
font-size: 12.6px;}
}

.breadcrumb-list {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  list-style: none;
  margin: 0;
  padding: 0;
}

@media (max-width:515px) {
  .breadcrumb-list {justify-content: ;}
}

.breadcrumb-list li {
  display: flex;
  align-items: center;
}

.breadcrumb-list li + li::before {
  content: ">";
  margin: 0 10px;
  color: #999;
}

.breadcrumb-list a {
  color: #333;
  text-decoration: none;
  transition: opacity 0.3s;
}

.breadcrumb-list a:hover {
  opacity: 0.7;
}

.breadcrumb-list li:last-child {
  color: #666;
}

/* 記事とほかの製品関連部分 */
.product_blog_section_wrap{
  display: flex;
  flex-direction: row;
  align-items:center;
  justify-content: center;
  width: 100%;
  gap: 70px;

}

.product_blog_section_wrap{
flex-direction: row;
align-items: flex-start;
width: 100%;}

@media (max-width:1400px) {
  .product_blog_section_wrap {
    flex-direction: column;
    align-items: flex-start;
  }
}

.product_blog_categoly-title{
  display: flex;
  flex-direction: row-reverse;
  justify-content: flex-end;
  align-items: center;
  gap: 15px;
  /* margin-top: 10px; */
  
}

.product_blog_date.blog{
  margin-bottom: 0;
}


.product_li.blog{
  display: flex;
  flex-direction: column;
  gap: 3px;
  align-items: flex-start;
  width: 100%;

}

.blog_cg_day_title_wrap{
  display: flex;
  flex-direction: column;
  flex: 1;
  justify-content: center;
  
 width: 100%;


}

.product_thumnail.blog{
  width: 100%;
  height: auto;
  overflow: hidden;
}
.product-more-btn-wrap.blog{
  width: 100%;
  display: flex;
  flex-direction: row;
}
.product_thumnail_img.blog{
  width: 100%;

}
.product-more-btn.blog{
  padding: 10px 15px;
  gap: 20px;
}

.product_day.blog{
  
}

.blog_cg_day_title_wrap.blog{
  width: 100%;
}
.product_title.blog{
  font-size: 11px;
  /* border-bottom: solid 1px #eeebeb; */
  padding-bottom: 10px;
  line-height: 137%;
  width: 100%;
  letter-spacing: 0.5px;
  padding-left: 1px;
  margin-top: 0px;
}

.product_categoly_day.blog{
  flex-direction: row;
 align-items: center;
 justify-content: flex-start;
gap:10px;
  margin: 0;
}

.product_categoly.blog{
  font-size: 11px;
  padding: 3px 3px;
  line-height: 100%;
  margin-top: 2px;
  margin-bottom: 1px;
}

@media (max-width:1400px) {
.product_categoly.blog{
     margin-top: 7px;
     padding: 3px 3px;
  }
  
}
/* 記事ブロック */
.product_blog_inner{
  flex: 1;
  width: 100%; */
  padding: 20px 0px;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  background-color: #ffffff;
  /* box-shadow:
  0 12px 12px rgba(163, 163, 163, 0.042),
  0 12px 12px rgba(162, 162, 162, 0.096); */
  
}

.product_blog_date{
 font-size: 13px;
 color: #888888; 
 margin-bottom: 6px;
}



.product_blog_categoly{
  width: fit-content;
  padding: 2px 5px;
  color: #ffffff;
  /* color: #07a860; */
  /* border: solid 1px #3b3b3b; */
  font-size: 13px;
  /* display: none; */
  background-color: #07a860;
  /* background-color: rgb(255, 149, 20); */
  font-weight: 450;
  /* border-radius: 3px; */
  letter-spacing: 1.3px;
  margin-bottom: 5px;
  
}
.product_blog_categoly.blog{
  height: fit-content;
  margin-bottom: 0;
  padding: 1px 9px
}
.product_blog_title{
  /* margin-left: 10px; */
  font-size: 24px;
  /* font-family: 'shippori mincho'; */
  letter-spacing: 1.2px;
  font-weight: 600;
  /* margin-top: 10px; */
  /* margin-bottom: 20px; */
  line-height: 170%;
  padding-bottom: 5px;
  border-bottom: solid 1px #07a860;
}
@media (max-width:515px) {
  .product_blog_title{
    margin-top: 3px;
    font-size: 20px;
    line-height: 150%;
  }
}



/* 記事内 */
/* ==========================================================================
   ほかパト専用スタイル（画像ブロック最適化版）
   ========================================================================== */

/* ブログフリーエリア全体の基本設定 */
.product_blog_free {
  line-height: 1.7;
  color: #333;
}

/* 記事内画像ブロックの最適化 */
.product_blog_free .wp-block-image {
  margin-top: 0;
  margin-bottom: 25px;
}
.product_blog_free .wp-block-image img {
  max-width: 100%;
  height: auto;
  display: block;
}
.product_blog_free .aligncenter {
  text-align: center;
  margin-left: auto;
  margin-right: auto;
}

/* 見出し調整 */
.product_blog_free .wp-block-heading {
  /* font-size: 22px; */
  /* color: #004499; */
  /* font-weight: bold; */
  margin-top: 35px;
  margin-bottom: 15px;
  letter-spacing: 1px;
  font-size: 20px;
  font-weight: 500;
  color: #161616;
  border-bottom: solid 1px #248337;
  /* padding-bottom: 5px; */
  line-height: 140%;
}
@media (max-width:515px) {
  .product_blog_free .wp-block-heading {font-size: 16.9px;
  font-weight: 600;}
}
/* リスト調整 */
.product_blog_free .wp-block-list {
  padding-left: 20px;
  margin-bottom: 25px;
}
.product_blog_free .wp-block-list li {
  margin-bottom: 8px;
}

/* 設置写真下のキャプション */
.product_blog_free p {
  margin-top: 5px;
  margin-bottom: 15px;
  font-size: 15px;
  line-height: 1.8;          /* 1.8〜1.9 */
  letter-spacing: 0.06em;    /* 0.03em〜0.05em */
}
.product_blog_free p.caption-sub {
  font-size: 11px;
  color: #666;
  line-height: 1.3;
}

/* 特徴の青丸数字バッジ（CSSで表現） */
.product_blog_free .feature-badge-blue {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 110px;
  height: 110px;
  border-radius: 50%;
  background-color: #1565c0;
  color: #ffffff;
  text-align: center;
  margin: 0 auto 15px;
}
.product_blog_free .badge-num {
  font-size: 36px;
  font-weight: bold;
  line-height: 1;
}
.product_blog_free .badge-txt {
  font-size: 11px;
  font-weight: bold;
  line-height: 1.3;
  margin-top: 2px;
}

/* WordPress標準カラムの隙間・レスポンシブ調整 */
.product_blog_free .wp-block-columns {
  display: flex;
  margin-bottom: 20px;
  gap: 20px;
}
.product_blog_free .wp-block-column {
  flex: 1;
}

/* モバイル対応：画面が小さくなったら縦並びにする */
@media (max-width: 600px) {
  .product_blog_free .wp-block-columns {
    flex-direction: column;
    gap: 10px;
  }
}

/* ==========================================================================
  記事aside
   ========================================================================== */

/* 他の製品関連部分 */
.product_aside_inner{
   margin-top: 20px;
  max-width: 245px;
  padding-top: 0px;


  
}

@media (max-width:1200px) {
  .product_aside_inner{
    max-width: 180px;
    width: 100%;
  }
}
.product_list.blog{

padding-top: 15px;
width: 100%;
}
@media (max-width:1200px) {
  .product_list.blog{
  width: 100%;
  }
}

.product_ul.blog{
  display: grid;
  grid-template-columns: 1fr;
  gap: 15px;
  width: 100%;
  line-height: 100%;
  
}


@media (max-width:1400px) {
  
.product_ul.blog{
  display: grid;
  grid-template-columns: repeat(3,1fr);
  gap: 26px;
  
}
.product_aside_inner{
  width: 100%;
 max-width: none;
}

.product_thumnail.blog {
 width: 100%;
}
.product_title.blog {
  border-bottom: solid 0px #1565c0;
  line-height: 140%;
}
.blog_cg_day_title_wrap {
  align-items: flex-start;
  justify-content: flex-start;
}
}


@media (max-width:750px) {
  
.product_ul.blog{
  display: grid;
  grid-template-columns: repeat(2,3fr);
  gap: 20px;
  
}

}



@media (max-width:380px) {
  
.product_ul.blog{
  display: grid;
  grid-template-columns: repeat(1,6fr);
  gap: 20px;
  
}

}



.product_ttl.blog{
  font-size: 25px;
  font-weight: 500;
}

.section-en_product.blog{
  margin-bottom: 0;
  width: 100%;
  font-size: 10px;
}
/* その他バー */
.product_header.blog{
  width: 100%;
    border-bottom: solid 1px #07a860;
margin: 0;
/* border-bottom: solid 1px #d1d1d1; */
padding: 0;
/* background-color: #ffffff; */
/* margin-left: 15px; */
margin-top: 90px;}
.product_ttl.blog{
  margin-bottom: 2px;
  font-size: 20px;
  margin-top: 3px;

}

/* ページネーション */
/* ==========================================
   基本スタイル（PC・デフォルト）
   ========================================== */
.pagination-container {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 40px;
  font-family: sans-serif;
  padding: 10px 15px;
  box-sizing: border-box;
  width: fit-content;
  border-bottom: dashed 1px #4d4d4d;
  margin-top: 120px;
}

/* 共通のボタンスタイル（aでもspanでも効くように） */
.pagination-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  /* height: 54px; */
  padding: 0 0px0 15px;
  text-decoration: none;
  font-size: 13px;
  font-weight: 400;
  border-radius: 4px;
  box-sizing: border-box;
  transition: all 0.2s ease;
  color: #505050;
}

/* 戻るボタン（点線・薄いグレー） */
.pagination-btn.prev {
  color: #252525;
}

/* 次へボタン（枠線なし・黒文字） */
.pagination-btn.next {
  border: 1px solid transparent;
  color: #000;
}

.pagination-btn .arrow {
  font-size: 18px;
  font-family: monospace;
}

/* ホバーエフェクト（リンクが生きているボタンのみ） */
a.pagination-btn:hover {
  opacity: 0.7;
  background-color: #f5f5f5;
}

/* 無効化状態（1ページ目の「戻る」など） */
.pagination-btn.disabled {
  cursor: not-allowed;
  opacity: 0.4;
}

/* ページ番号 (1 / 13) */
.pagination-number {
  font-size: 13px;
  font-weight: 450;
  color: #444444;
  white-space: nowrap;
}
.pagination-number .separator {
  margin: 0 4px;
}

/* ==========================================
   レスポンシブ（800px / 500px / 350px）
   ========================================== */
@media (max-width: 800px) {
  .pagination-container { gap: 30px; }
  .pagination-btn { height: 48px; padding: 0 20px; font-size: 16px; }
  .pagination-number { font-size: 20px; }
}

@media (max-width: 500px) {
  .pagination-container { gap: 20px; }
  .pagination-btn { height: 44px; padding: 0 16px; font-size: 15px; gap: 8px; }
  .pagination-number { font-size: 18px; }
}

@media (max-width: 350px) {
  .pagination-container { gap: 10px; padding: 10px 5px; }
  .pagination-btn { height: 40px; padding: 0 10px; font-size: 14px; gap: 4px; }
  .pagination-btn .arrow { font-size: 14px; }
  .pagination-number { font-size: 16px; }
}


/* ★フォーム最上部の案内文（14px） */
.form-top-note {

  margin-left: -10px;
  letter-spacing: 1.5px;
  width: 100%;
  font-size: 15px;
  color: #444;           /* 読みやすいように少し濃いめのグレー */
  line-height: 1.9;      /* 複数行になっても読みやすい行間 */
  margin: 0 0 10px -20px;  
    /* ★ 下に30pxの余白をあけて、最初の項目と離す */
  /* padding-left: 5px; */
    padding-bottom: 15px;  /* オプション：下にうっすら線を引く場合の余白 */
    /* 1. 左側に緑色の縦棒を引く */
  border-left: 4px solid #07a860; /* ★線の「太さ」「直線」「色（緑）」を指定 */
  
  /* 2. 線と文字の間のすき間（余白）を調整 */
  padding-left: 15px;            /* ★線とテキストがくっつかないように調整 */
  padding-top: 2px;              /* 縦棒の上端と文字の高さを合わせる微調整 */
  padding-bottom: 2px;           /* 縦棒の下端と文字の高さを合わせる微調整 */
  
  /* 3. その他（もともとのデザインに合わせて微調整してください） */
  margin-bottom: 30px;           /* 下にある入力フォームとの距離 */
  line-height: 1.6;              /* 行間（読みやすさ重視） */
}

@media (max-width: 720px) {
.form-top-note {
  margin-left: -0px;
  font-size: 13px;
  padding-left: 0px;
  border-left: none;
}}

.wpcf7-form.init{
  width: 100%;
}

.wpcf7.js{
  width: 100%;
}
/* フォーム全体のコンテナ（参考） */
.form-container {
  width: 100%;
  max-width: 600px; /* フォームの最大幅（環境に合わせて調整してください） */
  margin: 0 auto;
  box-sizing: border-box;
}

/* 各項目の上下の余白（参考） */
.form-item {
 width: 100%;
}


/* ブログ内のCSS */
/* ==========================================================================
  H2：左側に緑の太線をつける（H2だけに限定）
========================================================================== */
h2.wp-block-heading,
.product_blog_free h2 {
  position: relative; /* 影武者（左線）を配置するための基準にする */
  padding: 0 0 0.4em 0.8em; /* ★左線を配置するスペース（左余白を少し調整） */
  font-size: 5rem;   /* 文字の大きさ */
  line-height: 1.4;
  font-weight: 700;
  margin-top: 2em;    /* 見出しの上の余白 */
  margin-bottom: 1em; /* 見出しの下の余白 */
}

/* 2. 左側の太い縦棒（H2だけに適用） */
h2.wp-block-heading::before,
.product_blog_free h2::before {
  content: "";       /* 必須：中身は空っぽ */
  position: absolute; /* 親（h2）を基準にして自由に配置する */
  top: 0;            /* 縦棒の上端を見出しの上端に合わせる */
  left: 0;           /* 縦棒を見出しの一番左に配置する */
  width: 6px;        /* 縦棒の太さ */
  height: 80%;       /* 縦棒の長さを全体の80%にする */
  background-color: #226c29; /* 縦棒の色（緑） */
}


/* ==========================================================================
  H3：背景を薄い灰色にする
========================================================================== */
h3.wp-block-heading,
.product_blog_free h3 {
  background-color: #f2f2f2; /* 薄い灰色背景 */
  padding: 10px 15px;         /* 内側の余白（上下 左右） */
    /* 角を少し丸くする */
  font-size: 1.5rem;      !important    /* 文字サイズ */
  font-weight: 500;
  margin-top: 1.8em;          /* 上の余白 */
  margin-bottom: 0.8em;       /* 下の余白 */
  position: static;           /* H2のrelativeを打ち消す */
  letter-spacing: 1.4px;
}

.wp-block-heading.wph3{
  font-size: 21px;
}

/* H3には緑線が出ないように擬似要素をクリア */
h3.wp-block-heading::before,
.product_blog_free h3::before {
  content: none;
}

/* 例：.entry-content の中にある h3 だけ変える */
.entry-content h3.wp-block-heading {
  color: #d9534f;
  font-size: 20px;
}

/* 親要素 + h3タグ名 + クラス名 で指定（これで勝てます） */
.product_blog_free h3.wp-block-heading {
  color: #343333; /* 変えたいスタイル */
  font-size: 17px;
  border-bottom: none;
}
@media (max-width:515px) {
  .product_blog_free h3.wp-block-heading {
    font-size: 16.5px;
  }
}

/* パンくず（company） */
.breadcrumb.company{
  margin-bottom: 50px;
  margin-top: 0;
 
}