* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  list-style: none;
  text-decoration: none;
}

body {
  background-color: #e4e0d5; /* 背景色を黄色に設定 */
}

/* ローディング画面風 */

.loading {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  z-index: 10;
  background-color: #e4e0d5;
  display: flex;
  align-items: center;
  justify-content: center;
  animation: fadeOut 2.5s 0.5s forwards;
  z-index: 1000;
}

@keyframes fadeOut {
  0% {
    opacity: 1;
  }

  100% {
    opacity: 0;
    visibility: hidden;
  }
}

.loading__logo {
  display: none;
  opacity: 0;
  animation: logo_fade 2s 0.5s forwards;
  width: 105px;
}

@keyframes logo_fade {
  0% {
    opacity: 0;
    transform: translateY(20px);
  }

  60% {
    opacity: 1;
    transform: translateY(0);
  }

  100% {
    opacity: 0;
  }
}

/* ローディング画面風ここまで */

.header_bg {
  background-color: rgba(228, 224, 213, 0.9);
  width: 100%;
  height: 80px;
  position: fixed; /* 位置を固定する */
  top: 0; /* 固定する位置を指定 */
  left: 0; /* 固定する位置を指定 */
  z-index: 10;
}

.headericon {
  width: 45px; /* 幅を指定 */
  height: auto; /* アスペクト比を保持して高さを自動調整 */
  margin-left: 2%;
}

.header_contents {
  width: 100%;
  height: 100%;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.header_nav_lists {
  display: flex;
}
.header_nav_lists li {
  margin: 0 40px 0 0;
  font-family: "Roboto", sans-serif;
  font-weight: 400;
  font-style: normal;
}
.nav_link {
  color: #2c372f;
  font-size: 14px;
}

.nav_link2 {
  padding: 0.5em 1em;
  margin: 2em 0;
  font-weight: bold;
  color: #e4e0d5; /*文字色*/
  background: #2c372f;
  border-radius: 24px; /*角の丸み*/
  font-family: "Roboto", sans-serif;
  font-weight: 400;
  font-size: 14px;
}

/* Responsive menu button */
.responsive_btn {
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  margin: 0 40px 0 0;
  cursor: pointer;
  position: relative;
  z-index: 10;
}
.menu_line {
  background: #2c382f;
  border-radius: 1px;
  width: 100%;
  height: 2px;
  margin: 4px 0;
}

/* Responsive style */
@media screen and (max-width: 768px) {
  .headericon {
    width: 45px; /* 幅を指定 */
    height: auto; /* アスペクト比を保持して高さを自動調整 */
    margin-left: 4%;
  }

  .responsive_btn {
    display: flex;
    margin-right: 5%;
  }

  .header_bg {
    position: fixed; /* 位置を固定する */
    top: 0; /* 固定する位置を指定 */
    left: 0; /* 固定する位置を指定 */
  }
  .header_nav {
    background: #e4e0d5;
    width: 100%;
    height: 100vh;
    padding: 80px 0 0 0;
    position: fixed;
    top: 0;
    right: -100%;
    transition: 0.5s;
  }
  .header_nav_lists {
    display: block;
    text-align: center;
  }
  .header_nav_lists li {
    margin: 0 0 40px;
    text-align: center;
  }
  .nav_link {
    font-size: 20px;
  }

  .nav_link2 {
    font-size: 20px;
  }
}

/* js function "menuToggle" starting only */
.menu_active {
  right: 0;
}

/* メインビジュアル  */

.mainv {
  height: 50vh;
}

.logo {
  width: 200px; /* ロゴの幅を設定 */
  /* 上下左右中央に配置するためのスタイル */
  margin-top: 250px;
  margin-left: auto;
  margin-right: auto;
}

@media screen and (max-width: 768px) {
  .mainv {
    height: 55vh;
  }
  .logo {
    width: 160px; /* ロゴの幅を設定 */
    /* 上下左右中央に配置するためのスタイル */
    margin-top: 250px;
    margin-left: auto;
    margin-right: auto;
  }
}

/* 導入項目 */

.mainline {
  margin-bottom: 100px;
}

.maintext {
  display: flex;
  flex-direction: row; /* 要素を横並びにする */
  align-items: center; /* 縦方向の中央揃え */
}

.hr1 {
  border: 0;
  height: 1.5px;
  background-color: #2c382f;
  margin-bottom: 6px;
}

.num01-container {
  margin-left: 5%; /* 必要に応じてマージン調整 */
}

.num01 {
  margin-bottom: 5px;
  margin-right: 50px;
  font-family: "IBM Plex Sans JP", sans-serif;
  font-weight: 400;
  font-style: normal;
  color: #2c382f;
  /* margin-left: 5%; 不要になったのでコメントアウト */
}

.num02-container {
  display: flex;
  margin-left: auto;
  padding-right: 5%;
}

.num02 {
  margin-bottom: 5px;
  margin-left: 10px;
  font-family: "IBM Plex Sans JP", sans-serif;
  font-weight: 400;
  font-style: normal;
  color: #2c382f;
}

.wrapper {
  text-decoration: none;
  color: #2c382f;
  font-family: "IBM Plex Sans JP", sans-serif;
  font-weight: 400;
  font-style: normal;
  overflow: hidden;
  position: relative;
  width: 100%;
  border: 1px solid #ddd;
  margin-inline: auto;
}
.loop {
  animation: loop 30s linear infinite;
  width: 100%;
}
.loop2 {
  position: absolute;
  top: 0;
  left: 0;
  animation: loop 30s -15s linear infinite;
}

@keyframes loop {
  0% {
    transform: translateX(100%);
  }
  100% {
    transform: translateX(-100%);
  }
}

@media screen and (min-width: 768px) {
  .wrapper {
    display: none;
  }
}

@media screen and (max-width: 768px) {
  .num01 {
    display: none;
  }

  .num02 {
    display: none;
  }

  .num01 {
    font-size: 12px;
    margin-right: 5px;
  }

  .num02 {
    font-size: 12px;
  }
}

/* 広島・中四国でドライガーデンなら */

/*PCでは無効（改行しない）*/
.sma {
  display: none;
}

/*スマートフォンでは有効（改行する）*/
@media screen and (max-width: 768px) {
  .sma {
    display: block;
  }
}

.contents-wrap {
  margin-bottom: 200px;
  overflow: hidden;
}

.main-move {
  opacity: 0;
  transition: opacity 0.5s ease-in-out;
}

.main-move.active {
  opacity: 1;
}

.contents-text {
  font-family: "IBM Plex Sans JP", sans-serif;
  font-weight: 400;
  font-style: normal;
  margin-top: 100px;
  margin-left: 5%;
  color: #2c382f;
}

.nichijo {
  line-height: 2em;
  font-size: 18px;
  color: #2c382f;
}

.word {
  font-size: 14px;
}

.contents-img img {
  width: 500px; /* 画像の横幅を100pxに設定 */
  height: auto; /* 高さは自動調整 */
  margin-top: -230px;
  float: right;
  border-radius: 20px 0px 0px 0px;
}

@media screen and (max-width: 768px) {
  .img-wrap {
    overflow: hidden;
    position: relative;
  }

  .img-wrap::before {
    background: #e4e0d5;
    content: "";
    inset: 0;
    pointer-events: none;
    position: absolute;
    z-index: 1;
    width: 100%;
    transition: transform 1.6s cubic-bezier(0.4, 0, 0.2, 1); /* トランジションを追加 */
    transform: translateX(0); /* 初期位置を設定 */
  }

  .img-wrap.show::before {
    transform: translateX(100%); /* 画像が現れるように右へ移動 */
  }

  .img-wrap img {
    display: block;
    width: 100%;
  }

  .contents-wrap {
    margin-bottom: 120px;
  }

  .nichijo {
    width: 95%;
    font-size: 14px;
  }

  .word {
    font-size: 11px;
  }

  .contents-img img {
    margin-top: 50px;
    float: none;
    width: 95%;
    border-radius: 0px 0px 0px 0px;
  }
}











/* Concept */












#midashi1::before {
  display: block;
  height: 8rem;
  margin-top: -8rem;
  content: "";
}

.hr2 {
  border: 0;
  height: 1.5px;
  background-color: #2c382f;
}

.concept {
  overflow: hidden;
  margin-bottom: 300px;
  color: #2c382f;
}

.concept-text {
  font-family: "IBM Plex Sans JP", sans-serif;
  font-weight: 400;
  font-style: normal;
  margin-top: 40px;
  margin-left: 5%;
  color: #2c382f;
}

.concept-text {
  display: flex;
  margin-bottom: 100px;
}

.con {
  margin-right: 20px;
}

.samazama {
  line-height: 2em;
  width: 50%;
  margin-left: auto;
  margin-right: 5%;
}

@media screen and (max-width: 768px) {
  .concept {
    overflow: hidden;
    margin-bottom: 140px;
  }

  .concept-text {
    display: block;
    font-size: 14px;
  }

  .samazama {
    margin-top: 50px;
    width: 95%;
    margin-left: 0%; /* ここをautoから5%に変更 */
    margin-right: auto; /* 右側の余白はautoで中央揃えにする */
  }
}

.swiper {
  display: flex;
  width: 60%;
}

.swiper-slide img {
  height: auto;
  width: 100%;
}

@media screen and (max-width: 768px) {
  .swiper {
    display: flex;
    width: 90%;
  }

  .swiper-slide img {
    margin-left: 5%;
    height: auto;
    width: 100%;
  }
}

/* Reference Plan */

#midashi2::before {
  display: block;
  height: 8rem;
  margin-top: -8rem;
  content: "";
}

.hr3 {
  border: 0;
  height: 1.5px;
  background-color: #2c382f;
}

.plan {
  overflow: hidden;
}

.referenceplan {
  font-family: "IBM Plex Sans JP", sans-serif;
  font-weight: 400;
  font-style: normal;
  margin-top: 40px;
  margin-left: 5%;
  color: #2c382f;
}

.referenceplan {
  display: flex;
}

.ref {
  margin-right: 20px; /* h2とpの間にスペースを設定 */
}

.risou {
  line-height: 2em;
  width: 50%;
  margin-left: auto;
  margin-right: 5%;
  color: #2c382f;
}

.dg {
  width: 30%;
  float: left;
  margin-left: 3%;
}

@media screen and (max-width: 768px) {
  .referenceplan {
    font-size: 14px;
    display: block;
  }

  .risou {
    margin-top: 50px;
    width: 95%;
    margin-left: 0%; /* ここをautoから5%に変更 */
    margin-right: auto; /* 右側の余白はautoで中央揃えにする */
  }

  .dg {
    width: 34%;
    float: right;
    margin-right: 3%;
  }
}

/* Plants Handred */

.hr4 {
  border: 0;
  height: 1.5px;
  background-color: #2c382f;
}

.handled {
  overflow: hidden;
  margin-bottom: 260px;
}

.plantshandled {
  font-family: "IBM Plex Sans JP", sans-serif;
  font-weight: 400;
  font-style: normal;
  margin-top: 40px;
  margin-left: 5%;
  margin-bottom: 100px;
  color: #2c382f;
}

.plantshandled {
  display: flex;
}

.pl {
  margin-right: 20px; /* h2とpの間にスペースを設定 */
}

.hand {
  width: 50%;
  margin-left: auto;
  margin-right: 5%;
}

@media screen and (max-width: 768px) {
  .handled {
    margin-bottom: 180px;
  }

  .plantshandled {
    display: block;
    font-size: 14px;
  }

  .hand {
    margin-top: 50px;
    width: 95%;
    margin-left: 0%; /* ここをautoから5%に変更 */
    margin-right: auto; /* 右側の余白はautoで中央揃えにする */
  }
}

.flex {
  display: grid;
  grid-template-columns: repeat(
    auto-fill,
    minmax(400px, 1fr)
  ); /* カラムの最小幅を300pxにし、フレキシブな1frで等分する */
  gap: 20px; /* グリッド間のスペース */
  justify-content: center; /* グリッドを中央に配置 */
  max-width: 90%; /* 画面の90%に制限 */
  margin: 0 auto; /* 水平方向に中央揃え */
}

@media screen and (max-width: 1200px) {
  .flex {
    grid-template-columns: repeat(
      auto-fill,
      minmax(300px, max(1fr, 2))
    ); /* 画面幅が1200px以下の場合は最大でも2列に */
  }
}

.yonwaku {
  margin: 10px;
}

.box {
  display: flex;
  border: #2c382f 2px solid; /* 境界線の指定 */
  padding: 55px;
  border-radius: 20px;
  width: 100%; /* 100%に変更 */
  height: auto;
  box-sizing: border-box;
}

.maru1 img {
  width: 150px;
  border-radius: 50%; /* 画像も正円にする */
}

.agave {
  margin-top: 20px;
  margin-left: 50px;
  color: #2c382f;
}

.maruen {
  font-family: "IBM Plex Sans JP", sans-serif;
  font-weight: 400;
  font-style: normal;
  font-size: 40px;
}

.marujp {
  font-family: "IBM Plex Sans JP", sans-serif;
  font-weight: 400;
  font-style: normal;
  font-size: 20px;
}

@media screen and (max-width: 768px) {
  .flex {
    grid-template-columns: 1fr; /* スマートフォン表示では1列に変更 */
  }

  .yonwaku {
    margin: 0px;
  }

  .box {
    padding: 30px;
    border-radius: 20px;
    margin: 0 auto; /* 中央揃えに追加 */
  }

  .agave {
    margin-top: 10px;
    margin-left: 25px;
  }

  .maru1 img {
    width: 110px;
    border-radius: 50%;
  }

  .maruen {
    font-family: "IBM Plex Sans JP", sans-serif;
    font-weight: 400;
    font-style: normal;
    font-size: 24px;
  }

  .marujp {
    font-family: "IBM Plex Sans JP", sans-serif;
    font-weight: 400;
    font-style: normal;
    font-size: 14px;
  }
}

/* ふわっとするcss */

.fuwachan {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.8s ease, transform 0.8s ease;
}

.fuwachan.visible {
  opacity: 1;
  transform: translateY(0);
}

.fuwachan2 {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.8s ease, transform 0.8s ease;
}

.fuwachan2.visible {
  opacity: 1;
  transform: translateY(0);
}

.fuwachan3 {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.8s ease, transform 0.8s ease;
}

.fuwachan3.visible {
  opacity: 1;
  transform: translateY(0);
}

.fuwachan4 {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.8s ease, transform 0.8s ease;
}

.fuwachan4.visible {
  opacity: 1;
  transform: translateY(0);
}

/* NEWS */

#midashi3::before {
  display: block;
  height: 8rem;
  margin-top: -8rem;
  content: "";
}

.hr4 {
  border: 0;
  height: 1.5px;
  background-color: #2c382f;
}

.news {
  overflow: hidden;
  margin-bottom: 300px;
}

.newstitle {
  font-family: "IBM Plex Sans JP", sans-serif;
  font-weight: 400;
  font-style: normal;
  margin-top: 40px;
  margin-left: 5%;
  margin-bottom: 90px;
  color: #2c382f;
}

.new {
  margin-right: 20px; /* h2とpの間にスペースを設定 */
}

.newhon {
  font-family: "IBM Plex Sans JP", sans-serif;
  line-height: 2em;
  margin-left: 5%;
  margin-right: 5%;
}

.newhon_container {
  display: flex;
}

.newhon_container:hover .newhon_titleback {
  background-color: #7b8b7f;
}
.newhon_container:hover .newhon_date p {
  color: #7b8b7f;
}
.newhon_container:hover .newhon_content p {
  color: #7b8b7f;
}

.newhon_date {
  width: 15%;
  padding: 4px 15px 4px 15px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: #2c382f;
}

.newhon_title {
  width: 30%;
  padding-left: 15px;
  padding-right: 15px;
}

.newhon_titleback {
  background-color: #2c372f;
  color: #e4e0d5;
  padding: 4px 8px 4px 8px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.newhon_content {
  width: 55%;
  padding: 4px 15px 4px 15px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: #2c382f;
  margin-right: 15px;
}

.newhr {
  border: 0.1px solid #7b8b7f;
  margin-top: 45px;
  margin-bottom: 45px;
}
.newhr_none {
  margin-top: 45px;
  margin-bottom: 45px;
}

.viewmore {
  font-family: "IBM Plex Sans JP", sans-serif;
  padding-top: 75px;
  color: #2c382f;
}

.viewmore_btn {
  padding-left: 3px;
  display: -webkit-box;
  display: -ms-flexbox;
  position: relative;
  font-size: 16px;
  width: 200px;
  height: 3em;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  border: 2px solid #2c382f;
  z-index: 0;
  -webkit-transition: 0.3s;
  transition: 0.3s;
  overflow: hidden;
  border-radius: 3em;
  color: #2c382f;
  margin: 0 auto;
}

.viewmore_btn:hover {
  background-color: #2c382f;
  color: #e4e0d5;
}



span.arrow {
  vertical-align:0.1em;
}

/* 投稿がない場合の表示部分 */
.el_nopost{
  font-family: "IBM Plex Sans JP", sans-serif;
  line-height: 2em;
  margin-left: 5%;
  margin-right: 5%;
}

@media screen and (max-width: 768px) {
  .newstitle {
    font-family: "IBM Plex Sans JP", sans-serif;
    display: block;
    font-size: 14px;
  }

  .news_area {
    font-family: "IBM Plex Sans JP", sans-serif;
    font-weight: 400;
    font-style: normal;
    margin-top: 40px;
    margin-left: 5%;
  }

  .newhon {
    margin-top: 50px;
    width: 95%;
    margin-left: 0%; /* ここをautoから5%に変更 */
    margin-right: auto; /* 右側の余白はautoで中央揃えにする */
  }

  .newhon_date {
    width: 40%;
    text-align: center;
  }

  .newhon_title {
    width: 60%;
    padding-left: 15px;
    padding-right: 15px;
  }

  .newhon_content {
    display: none;
  }

  .el_nopost{
    font-family: "IBM Plex Sans JP", sans-serif;
    font-size: 14px;
    width: 95%;
    margin-left: 0%; /* ここをautoから5%に変更 */
    margin-right: auto; /* 右側の余白はautoで中央揃えにする */
    color: #2c382f;
  }
}

/* footer */

.footer {
  padding: 5%;
  padding-bottom: 6%;
  font-size: 15px;
  list-style: none;
  text-decoration: none;
  color: #e4e0d5;
  background-color: #2c382f;
  font-family: "IBM Plex Sans JP", sans-serif;
  font-weight: 400;
  font-style: normal;
  border-radius: 20px 20px 0px 0px;
}

.footer-logo {
  width: 180px;
}

.footer a:hover {
  color: #48634f;
}

.rol {
  color: #e4e0d5;
  text-decoration: none;
}

@media (max-width: 767px) {
  /* スマートフォン向けのスタイル */

  .footer-logo {
    padding-top: 30px;
    margin-bottom: 20px;
  }

  .footer {
    padding-bottom: 10%;
  }

  .md-flex {
    display: flex;
    flex-direction: column; /* 縦に並ぶように変更 */
  }

  .md-flex li {
    margin-left: 0; /* 左のマージンをリセット */
    margin-bottom: 8px; /* 下のマージンを追加して要素を縦に積み重ねる */
    font-size: 14px;
  }

  .copyright {
    margin-top: 20px;
    font-size: 10px;
  }
}

@media (min-width: 768px) {
  /* PC向けのスタイル */
  .footer {
    display: flex;
    justify-content: space-between;
    align-items: flex-start; /* 縦方向の揃えを上に設定 */
  }

  .md-flex {
    flex-direction: column; /* 横に並ぶように変更 */
    margin-left: -20%;
  }

  .md-flex li {
    margin-right: 16px;
    margin-top: 8px; /* 下のマージンを追加して要素を縦に積み重ねる */
  }

  .copyright {
    margin-top: auto; /* 他の要素に余白を持たせて、下に揃える */
    font-size: 12px;
  }
}