@charset "UTF-8";
body {
  font-family: "Noto Sans JP", serif;
  font-size: 18px;
  color: #001E2A;
}

img {
  max-width: 100%;
  height: auto;
}

main h2::first-letter {
  color: #007BFF;
  font-size: 50px;

}

/* ヘッダー */
/*--------------------------------------------------------------------------
  #company_history
---------------------------------------------------------------------------*/

/* スライド内全体 */
.swiper-container {
  width: 100%;
  margin: 0 auto; /* 中央寄せ */
  padding: 0; /* 余分なパディングを削除 */
  overflow: hidden;
}
.swiper-slide {
  width: 100%;  /* 3列にする場合 */
  height: 400px;
  padding-bottom: 33.33%; /* 高さを正方形に設定 */
  background-color: #D9EDF8; /* 背景色 */
  /* display: flex; */
  /* flex-direction: column; */ /* 縦に並べる */
  /* justify-content: center; */ /* 上部に寄せる */
  /* align-items: center; */ /* 水平に中央寄せ */
  position: relative;
  border-radius: 10px; /* 角を丸くする */
  overflow: hidden;
  text-align: center;
}

/* 画像の配置 */
.swiper-slide img {
  width: 200px; /* 画像の幅を調整して中央に配置 */
  height: 150px;
  object-fit: contain;  /* 画像の縦横比を維持して、枠に収める */
  margin-top: 1em; /* 画像上部に余白 */
}

/* テキスト */
.swiper-slide.has-image .company_history_item_body {
  /* position: absolute; */
  /*bottom: 20px; */ /* 下部に配置 */
  /*left: 50%; */ /* 横方向に中央揃え */
  /*transform: translateX(-50%); */ /* 中央に正確に配置 */
  /*padding: 10px; */
  /*border-radius: 5px; */
  text-align: left;
}
.swiper-slide:not(.has-image) .company_history_item_body {
  /* position: absolute; */
  /* bottom: 50%; */ /* 下部に配置 */
  /* transform: translate(-50% -50%); /* /* 中央に正確に配置 */
  padding: 20px;
  border-radius: 5px;
  text-align: left; /* テキストを中央揃え */
  padding-top: 150px;
}
.company_history_item_title {
  font-size: 24px;
  font-weight: bold;
  margin-bottom: 5px;
  text-align: center;
}

.company_history_item_text {
  font-size: 14px;
}
.has-image .company_history_item_text{
  padding: 20px;
}
/* スライドの矢印ボタン */
.company_history_slide_nav_btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  font-size: 24px;
  background-color: rgba(0, 0, 0, 0.5);
  color: white;
  padding: 10px;
  cursor: pointer;
  border: none;
  border-radius: 5px;
}

.company_history_slide_nav_btn._prev {
  left: 10px;
}

.company_history_slide_nav_btn._next {
  right: 10px;
}

.slider-links {
  display: flex;
  justify-content: center;
  margin-top: 20px;
}
.slider-links span {
    border: solid 1px #333;

}
.slider-link {
  margin: 20px;
  text-decoration: none;
  font-size: 16px;
  color: #333;
}

.slider-link:hover {
  color: #007bff;
}
.company_history_controls {
  position: relative;
  padding-top: 70px;

}
.swiper-button-next, .swiper-button-prev {
  top: 735px;
}
.swiper-button-next{
  right: 50px;
}
.swiper-button-prev{
  left: 50px;
}
.swiper-horizontal> .swiper-scrollbar, .swiper-scrollbar.swiper-scrollbar-horizontal {
  height: 20px;
}

/* メディアクエリ（デスクトップ用） */
@media (min-width: 1024px) {
  /* アコーディオンヘッダーのアイコンとテキストを横並びに変更 */
  .accordion-header {
    flex-direction: row; /* 横並びに変更 */
    text-align: left; /* 左揃えに変更 */
  }

  .accordion-header i {
    margin-right: 10px; /* アイコンとテキストの間隔を調整 */
    margin-bottom: 0; /* 縦並びのときの余白をなくす */
  }

  .header__nav--link {
    flex-direction: row; /* アイコンとテキストを横並びに変更 */
    align-items: center; /* アイコンとテキストを中央揃えに */
  }

  .header__nav--link i {
    margin-bottom: 0; /* アイコンとテキストの間隔を調整 */
    margin-right: 10px; /* 横並びのため右側に余白を追加 */
  }
  footer {
    background-size: 100% 70%;
    font-size: 20px;
  }
  footer h3 {
    padding: 60px;
  }
  .info {
    display: flex;
    justify-content: center;
    padding-bottom: 30px;
  }
  .footer_name {
    font-weight: bold;
    font-size: 24px;
    line-height: 1.5em;
  }
  .footer_map {
    line-height: 1.5em;
    font-size: 18px;
  }
  .footer_num {
    color: #D51D51;
    font-size: 28px;
    line-height: 1.5em;
  }
  .footer_mail {
    font-size: 16px;
  }
  .header__nav--link {
    font-size: 16px;
  }
  .accordion-header {
    font-size: 16px;
  }
  .accordion-content li a {
    font-size: 16px;
  }
  .slider-link {
    font-size: 20px;
  }
  .swiper-slide {
    width: calc(33.33% - 20px);  /* 3列にする場合 */
    height: 500px;
    padding-bottom: 33.33%; /* 高さを正方形に設定 */
  }  
  .swiper-slide img {
    width: 250px; /* 画像の幅を調整して中央に配置 */
    height: 200px;
  }
  .swiper-slide:not(.has-image) .company_history_item_body {
    padding-top: 220px;
  }
  .swiper-button-next, .swiper-button-prev {
    top: 630px;
    margin-bottom: 50px;
  }
  .swiper-button-next{
    right: 130px;
  }
  .swiper-button-prev{
    left: 130px;
  }
  main h2{
    margin-bottom: 150px;
  }
}