/* 汎用的なリセットと基本スタイル */
body {
  font-family: sans-serif;
  margin: 0;
  padding: 0;
  overflow-x: hidden;
  /* 画面全体の横スクロールを禁止 */
}

/* スライダーコンテナ */
.slider-container {
  position: relative;
  /* `overflow: hidden` から `overflow: visible` に変更して、はみ出したスライドを表示 */
  overflow: visible;
  width: 100%;
  /* 全幅を確保 */
  margin: 50px 0;
  /* 上下のマージン */
}

/* スライドを格納するトラック */
.slider-track {
  display: flex;
  align-items: center;
  /* 中央のスライドを垂直方向に揃える */
  transition: transform 0.5s ease-in-out;
}

/* 各スライドアイテム */
.slider-item {
  flex-shrink: 0;
  box-sizing: border-box;
  padding: 30px;
  text-align: left;
  background-color: white;
  border: 1px solid #ddd;
  border-radius: 10px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  display: flex;
  align-items: flex-start;

  /* PCサイズでの幅を指定 */
  width: 800px;
  margin: 0 50px;
  /* スライド間のマージン */
}

/* アクティブ（中央）なスライドのスタイル */
.slider-item {
  padding: 0;
  height: 470px;
}

.slider-text {
  padding: 20px;
  width: 100%;
  display: flex;
  flex-flow: column;
}

/* スライドコンテンツのスタイル */
.slider-item img {
  max-width: 50%;
  height: 100%;
  border-radius: 5px;
  object-fit: cover;
  border-radius: 10px 0px 0px 10px;
}

.slider-item > div {
  max-width: 50%;
}

.slider-text {
  border: solid orange;
  height: 100%;
  border-radius: 0px 10px 10px 0px;
  position: relative;
}

.slider-item h3 {
  font-size: 1.2em;
  margin-top: 0;
  margin-bottom: 15px;
  padding-left: 10px;
  text-align: center;
}

.slider-item p {
  font-size: 1em;
  line-height: 1.6;
}

.slider-item a {
  color: orange;
  text-decoration: none;
  font-weight: bold;
  display: inline-block;
  margin-top: 15px;
  text-decoration: underline;
}

.slider-text .company-name {
  position: absolute;
  right: 20px;
  bottom: 20px;
}

/* ナビゲーションボタン */
.slider-button-prev,
.slider-button-next {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  cursor: pointer;
  z-index: 10;
  width: 40px;
  height: 40px;
  background: rgba(0, 0, 0, 0.7);
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: background 0.3s;
}

.slider-button-prev:hover,
.slider-button-next:hover {
  background: rgba(0, 0, 0, 0.9);
}

.slider-button-prev {
  left: calc(50% - 450px);
  /* 画面の左端に配置 */
}

.slider-button-next {
  right: calc(50% - 450px);
  /* 画面の右端に配置 */
}

@media (max-width: 921px) {
  .slider-button-prev {
    left: calc(50% - 50vw);
    /* 画面の左端に配置 */
  }

  .slider-button-next {
    right: calc(50% - 50vw);
    /* 画面の右端に配置 */
  }
}

.slider-button-prev img,
.slider-button-next img {
  width: 40px;
  height: 40px;
  display: block;
}

p.company-name {
  bottom: 0px;
}

/* ページネーション */
.slider-pagination {
  text-align: center;
  margin-top: 30px;
}

.slider-pagination .dot {
  display: inline-block;
  width: 10px;
  height: 10px;
  margin: 0 5px;
  background-color: #ccc;
  border-radius: 50%;
  cursor: pointer;
  transition: background-color 0.3s;
}

.slider-pagination .dot.active {
  background-color: #007bff;
}

/* 企業選択ボタンのスタイル */
.slide-select {
  text-align: center;
  width: 85vw;
  margin: 50px auto;
}

.slide-select ul {
  list-style: none;
  padding: 0px;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  width: 100%;
}

.slide-select li {
  padding: 40px 10px;
  margin: 5px;
  border: 3px solid orange;
  border-radius: 20px;
  cursor: pointer;
  transition: background-color 0.3s, color 0.3s;
  width: 20%;
  font-size: clamp(12px, 1vw, 18px);
  font-weight: bold;
  height: 60px;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  /* ▼ 変更点: 単語単位での改行を強制 */
  word-break: keep-all;
  /* ▼ 変更点: overflow-wrapはnormalに戻すか削除 */
  overflow-wrap: normal;
}

.slide-select li.active {
  background-color: orange;
  color: white;
  border-color: orange;
  /* orengeからorangeに修正 */
}

@media (max-width: 910px) {
  .slide-select {
    margin: 50px auto;
  }

  .slide-select ul {
    padding: 0;
    flex-wrap: wrap;
    width: 100%;
    margin: 0 auto;
  }

  .slide-select li {
    padding: 5px 10px;
    margin: 5px;
    /* border: 1px solid #ccc; */
    /* 元のスタイルと重複するためコメントアウト */
    cursor: pointer;
    transition: background-color 0.3s, color 0.3s;
    width: 45%;
    height: 60px;
    display: flex;
    border: solid orange;
    font-size: clamp(11px, 2vw, 15px);
    /* ▼ 追加: SP表示でも単語単位での改行を強制 */
    word-break: keep-all;
    overflow-wrap: normal;
  }

  li.pc-none {
    display: none;
  }
}

/* スマホ対応 */
@media (max-width: 811px) {
  .slider-item {
    width: 90%;
    /* スマホでは幅を調整 */
    margin: 0 10px;
    /* スライド間のマージンを調整 */
    flex-direction: column;
    padding: 20px;
    gap: 15px;

    /* モバイルでは非アクティブ時の縮小・透明化を解除 */
    transform: scale(1) !important;
    opacity: 1 !important;
  }

  .slider-item img,
  .slider-item > div {
    max-width: 100%;
  }

  /* ナビゲーションボタンをスライダーコンテナの端に配置 */
  .slider-button-prev {
    left: calc(50% - 49.5vw);
    top: 200px;
  }

  .slider-button-next {
    right: calc(50% - 49.5vw);
    top: 200px;
  }
}

/* スラーダーアイテム内 */
@media (max-width: 811px) {
  /* 各スライドアイテム */
  .slider-item {
    flex-shrink: 0;
    box-sizing: border-box;
    padding: 30px;
    text-align: left;
    background-color: white;
    border: 1px solid #ddd;
    border-radius: 10px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    display: flex;
    align-items: flex-start;

    /* PCサイズでの幅を指定 */
    width: 90%;
    margin: 0 20px;
    /* スライド間のマージン */
  }

  /* アクティブ（中央）なスライドのスタイル */
  .slider-item {
    flex-shrink: 0;
    box-sizing: border-box;
    background-color: white;
    border: 1px solid #ddd;
    border-radius: 10px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    display: flex;
    flex-direction: column;
    /* 画像→テキストを縦並び */
    width: 90%;
    margin: 0 20px;
    overflow: hidden;
    /* はみ出しをカット */
    height: 570px;
    /* 固定の高さ */
    padding: 0px;
    gap: 0;
  }

  /* 画像を上半分に固定表示 */
  .slider-item img {
    width: 100%;
    height: 200px;
    /* 親要素の50%を高さに */
    object-fit: cover;
    /* 画像の縦横比を維持しつつはみ出しカット */
    display: block;
    border-radius: 10px 10px 0 0;
  }

  /* テキストエリア（下半分） */
  .slider-text {
    position: relative;
    padding: 20px;
    flex: 1;
    /* 残りの高さを占める */
    border: solid orange;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    background-color: #fff;
    width: 100%;
    border-radius: 0 0 10px 10px;
  }

  /* company-name を右下に固定 */
  .slider-text .company-name {
    position: absolute;
    right: 20px;
    bottom: 20px;
    margin: 0;
  }

  .slider-text .company-name a {
    color: orange;
    text-decoration: underline;
    font-weight: bold;
  }

  .slider-text h3 {
    font-size: 1em;
    margin: 0 0 15px;
    text-align: center;
  }

  .slider-text p {
    font-size: clamp(14px, 2vw, 18px);
    line-height: 1.6;
  }
}

@media (max-width: 499px) {
  .slider-item {
    flex-shrink: 0;
    box-sizing: border-box;
    background-color: white;
    border: 1px solid #ddd;
    border-radius: 10px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    display: flex;
    flex-direction: column;
    /* 画像→テキストを縦並び */
    width: 90%;
    margin: 0 20px;
    overflow: hidden;
    /* はみ出しをカット */
    height: 620px;
    /* 固定の高さ */
    padding: 0px;
    gap: 0;
  }
}

.companys-btns {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  width: 80vw;
  margin: 50px auto;
}
/* ボタン本体 */
.company-btn {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 90px;
  border: 3px solid orange;
  border-radius: 10px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
  background-color: #fff;
  color: #333;
  text-decoration: none;
  font-weight: bold;
  text-align: center;
  font-size: clamp(12px, 1.2vw, 18px);
  transition: all 0.3s ease;
  word-break: keep-all;
  overflow-wrap: normal;
}
/* ホバー時 */
.company-btn:hover {
  background-color: orange;
  color: white;
  transform: translateY(-3px);
}
/* ====== スマホ表示（910px以下） ====== */
@media (max-width: 910px) {
  .companys-btns {
    grid-template-columns: repeat(2, 1fr); /* 2列 */
    gap: 15px;
    width: 100%;          /* ← 95vwから変更！ */
    max-width: 600px;     /* ← 必要なら制限をつける */
    margin: 30px auto;    /* ← 完全中央寄せ */
    padding: 0 10px;      /* ← 端の余白確保 */
    box-sizing: border-box; /* ← パディング分を含めて中央計算 */
  }
  .company-btn {
    width: 100%; /* ← 各セルいっぱいに */
    height: 80px;
    font-size: clamp(12px, 2vw, 18px);
  }
}