/* 企業 */
.section2 {
  position: relative;
  scroll-snap-stop: always;
.carousel_1 {
    display: flex;
    overflow-x: auto;
    padding: 0 calc((100% - var(--img-width)) / 2);
    scroll-snap-type: x mandatory;
    scroll-snap-stop: always;
    scroll-snap-align: center;
    scroll-behavior: smooth; 
    &::scroll-button(*) {                           /* スクロールボタン */
      position: absolute;                           /* カルーセルの親要素に対して */
      top: 50%;
      width: 50px;                                  /* ボタンの横幅 */
      height: 50px;                                 /* ボタンの高さ */
      border-radius: 50%;                           /* 丸型ボタンにする */
      border: none;   
      background-color: #e6e6e6;
    }
    &::scroll-button(*):hover {
      background-color: #d8d0d8;                      /* マウスを乗せると少し透明度を変える */
    }
    &::scroll-button(right) {                       /* 右ボタン */
      right: 6%;                                  /* 右端から少し内側に配置 */
      content: "\025b6";                             /* 右矢印(U+21E8) */
    }
    &::scroll-button(left) {                        /* 左ボタン */
      left: 6%;                                   /* 左端から少し内側に配置 */
      content: "\025c0";                             /* 左矢印(U+21E6) */
    }
    scroll-marker-group: after;                     /* マーカーを下部に表示する */
    &::scroll-marker-group {                        /* マーカーグループ */
      margin-top: 10px;
      display: flex;
      justify-content: center;
      gap: 10px;
      position: relative;
      top: 14%;
    }
    .sec_1 {
      &::scroll-marker {                            /* 個々のマーカーアイテム */
        content: "";
        width: 20px;
        height: 10px;
        border: 1px solid #ccc;
      }
      &::scroll-marker:target-current {             /* 表示中のマーカースタイル */
        background-color: #d8d0d8;
      }
    }
}
}
/* 実績 */
.section3 {
  position: relative;
  scroll-snap-stop: always;
.carousel_2 {
    display: flex;
    overflow-x: auto;
    padding: 0 calc((100% - var(--img-width)) / 2);
    scroll-snap-type: x mandatory;
    scroll-snap-stop: always;
    scroll-snap-align: center;
    scroll-behavior: smooth; 
    &::scroll-button(*) {                           /* スクロールボタン */
      position: absolute;                           /* カルーセルの親要素に対して */
      top: 50%;
      width: 50px;                                  /* ボタンの横幅 */
      height: 50px;                                 /* ボタンの高さ */
      border-radius: 50%;                           /* 丸型ボタンにする */
      border: none;   
      background-color: #e6e6e6;
    }
    &::scroll-button(*):hover {
      background-color: #d8d0d8;                      /* マウスを乗せると少し透明度を変える */
    }
    &::scroll-button(right) {                       /* 右ボタン */
      right: 6%;                                  /* 右端から少し内側に配置 */
      content: "\025b6";                             /* 右矢印(U+21E8) */
    }
    &::scroll-button(left) {                        /* 左ボタン */
      left: 6%;                                   /* 左端から少し内側に配置 */
      content: "\025c0";                             /* 左矢印(U+21E6) */
    }
    scroll-marker-group: after;                     /* マーカーを下部に表示する */
    &::scroll-marker-group {                        /* マーカーグループ */
      margin-top: 10px;
      display: flex;
      justify-content: center;
      gap: 10px;
    }
    .sec_2 {
      &::scroll-marker {                            /* 個々のマーカーアイテム */
        content: "";
        width: 20px;
        height: 10px;
        border: 1px solid #ccc;
      }
      &::scroll-marker:target-current {             /* 表示中のマーカースタイル */
        background-color: #d8d0d8;
      }
    }
}
}

.carousel_1 {
    position: relative;
        top: 11%;
 scroll-marker-group: after;                     /* マーカーを下部に表示する */
    &::scroll-marker-group {
      position: relative;
      top: 14%;
    }
} 
/* スマホ向け（画面幅が600px以下） */
@media (max-width: 600px) {
  .carousel_1 {
    position: relative;
        top: 20%;
    scroll-marker-group: after;                     /* マーカーを下部に表示する */
    &::scroll-marker-group {
      position: relative;
      top: 21%;
    }
  } 
  .carousel_2 {
    position: relative;
        top: 13%;
    scroll-marker-group: after;                     /* マーカーを下部に表示する */
    &::scroll-marker-group {
      position: relative;
      top: 14%;
    }
  } 
}
/* スマホ向け（画面縦が720px以下） */
@media (max-height: 720px) {
  .carousel_1 {
    position: relative;
        top: 15%;
    scroll-marker-group: after;                     /* マーカーを下部に表示する */
    &::scroll-marker-group {
      position: relative;
      top: 14%;
    }
  }
  .carousel_2 {
    position: relative;
        top: 17%;
    scroll-marker-group: after;                     /* マーカーを下部に表示する */
    &::scroll-marker-group {
      position: relative;
      top: 18%;
    }
  }
}
/* タブレット向け（画面幅が601pxから900px） */
@media (min-width: 601px) and (max-width: 900px) {
  .carousel_1 {
    position: relative;
        top: 30%;
    scroll-marker-group: after;                     /* マーカーを下部に表示する */
    &::scroll-marker-group {
      position: relative;
      top: 31%;
    }
  }
  .carousel_2 {
    position: relative;
        top: 32%;
    scroll-marker-group: after;                     /* マーカーを下部に表示する */
    &::scroll-marker-group {
      position: relative;
      top: 33%;
    }
  }
}
/* タブレット向け（画面幅が901pxから1024px） */
@media (min-width: 901px) and (max-width: 1024px) {
  .carousel_1 {
    position: relative;
        top: 29%;
    scroll-marker-group: after;                     /* マーカーを下部に表示する */
    &::scroll-marker-group {
      position: relative;
      top: 31%;
    }
  }
  .carousel_2 {
    position: relative;
        top: 30%;
    scroll-marker-group: after;                     /* マーカーを下部に表示する */
    &::scroll-marker-group {
      position: relative;
      top: 31%;
    }
  }
}
/* タブレット向け（画面縦が600px以下）*/
@media (max-height: 600px) {
  .carousel_1 {
    position: relative;
        top: 13%;
    scroll-marker-group: after;                     /* マーカーを下部に表示する */
    &::scroll-marker-group {
      position: relative;
      top: 14%;
    }
  }
  .carousel_2 {
    position: relative;
        top: 13%;
    scroll-marker-group: after;                     /* マーカーを下部に表示する */
    &::scroll-marker-group {
      position: relative;
      top: 14%;
    }
  }
}
/* タブレット向け（画面幅が1025pxから1280px） */
@media (min-width: 1025px) and (max-width: 1280px) {
  .carousel_1 {
    position: relative;
        top: 16%;
    scroll-marker-group: after;                     /* マーカーを下部に表示する */
    &::scroll-marker-group {
      position: relative;
      top: 17%;
    }
  }
  .carousel_2 {
    position: relative;
        top: 16%;
    scroll-marker-group: after;                     /* マーカーを下部に表示する */
    &::scroll-marker-group {
      position: relative;
      top: 17%;
    }
  }
}