/* =======================================
共通
======================================== */
.section-box .sec-title {
  font-weight: 700;
  font-family: "Poppins";
  color: #00b98f;
  font-size: 80px;
  line-height: 1;
  letter-spacing: 0;
  margin-bottom: 60px;
}

.section-box .sub-title {
  font-size: 20px;
  line-height: 1;
  color: #00b98f;
}

@media (max-width: 1500px) {
  .section-box .sec-title {
    font-weight: 700;
    font-family: "Poppins";
    color: #00b98f;
    font-size: min(calc(48px + (80 - 48) * (100vw - 992px) / (1500 - 992)),
        80px);
    line-height: 1;
    letter-spacing: 0;
    margin-bottom: min(calc(40px + (60 - 40) * (100vw - 992px) / (1500 - 992)),
        60px);
  }
}

@media (max-width: 991px) {
  .section-box .sec-title {
    font-size: min(calc(40px + (60 - 40) * (100vw - 320px) / (991 - 320)),
        60px);
    margin-bottom: min(calc(20px + (40 - 20) * (100vw - 320px) / (991 - 320)),
        40px);
  }

  .section-box .sub-title {
    font-size: min(calc(14px + (20 - 14) * (100vw - 320px) / (991 - 320)),
        20px);
  }
}

/* =======================================
メインビジュアル
======================================== */
.splide__slide img {
  height: auto;
  width: 100%;
}

.main-visual-area {
  margin-top: 100px;
}

.main-visual-area .slide-photo {
  aspect-ratio: auto;
  height: calc(100vh - 100px);
  min-height: 580px;
}

.main-visual-area .slide-photo img {
  max-width: inherit;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.main-visual-area .splide__slide {
  padding-left: 7.5vw !important;
}

.main-text {
  position: absolute;
  top: 50%;
  left: 2vw;
  transform: translateY(-50%);
  text-align: center;
  color: #fff;
  z-index: 10;
}

.gradient-box {
  display: block;
  /* 行ごとに縦積み */
  margin: 0.8em 0;
  padding: 0.7em;
  background-color: #fff;
  /* 白い枠線 */
  width: fit-content;
  line-height: 1;
  /* テキスト幅に合わせる（画面幅いっぱいにしたいなら100%） */
}

.gradient-box span {
  line-height: 1;
  display: inline-block;
  /* グラデ文字はインラインブロック */
  font-size: 64px;
  font-weight: 700;
  background: linear-gradient(90deg, #00b98f, #00c851);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  color: transparent;
}



.main-visual-area .scroll {
  position: absolute;
  right: 30px;
  bottom: 240px;
  writing-mode: vertical-rl;
  z-index: 2;
  color: #fff;
  font-family: "Poppins", sans-serif;
  font-weight: 700;
  font-size: 12px;
}

.main-visual-area .scroll::before {
  animation: scroll 2s infinite;
  background-color: #fff;
  bottom: -215px;
  content: "";
  height: 200px;
  left: 0;
  margin: auto;
  position: absolute;
  right: 0;
  width: 2px;
  z-index: 2;
}

.main-visual-area .scroll::after {
  background-color: var(--main-color);
  bottom: -215px;
  content: "";
  height: 200px;
  left: 0;
  margin: auto;
  position: absolute;
  right: 0;
  width: 2px;
}

.gradient-box {
  display: block;
  background-color: transparent; /* ←最初は透明 */
  position: relative;
  overflow: hidden;
}

/* カーテン */
.gradient-box .curtain {
  position: absolute;
  inset: 0;
  background: var(--main-color); /* カーテン色 */
  transform-origin: left center;
  z-index: 1;
}

/* テキスト */
.gradient-box span:not(.curtain) {
  position: relative;
  z-index: 2;
  opacity: 0;
  transform: translateY(0.6em);
  display: inline-block;
}

@media screen and (max-width: 1500px) {
  .gradient-box span {
    font-size: min(calc(48px + (64 - 48) * (100vw - 992px) / (1500 - 992)),
        64px);

  }
}

@media screen and (max-width: 991px) {
  .main-visual-area {
    margin-top: 70px;
    position: relative;
  }

  /* ← ここを“比率ベース”に切り替え */
  .main-visual-area .slide-photo {
    /* 端末幅に合わせて拡大縮小（高さは比率で決まる） */
    width: 100%;
    /* 16:9前提。必要なら 3/2, 4/3 などに変更 */
    height: 60vh;
    /* 明示的に高さ固定をやめる */
    min-height: 0;
    /* PC用min-heightの影響を打ち消す */
    pointer-events: none;
  }

  .main-visual-area .slide-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* はみ出しをトリミングして見せたい場合 */
    /* 画像全体を必ず見せたいなら ↓ に変更
       object-fit: contain; background-color:#000; （余白が出ます） */
  }

  .gradient-box {
    display: block;
    margin: 0.4em 0;
    background-color: #fff;
    width: fit-content;
    padding: 0.4em;
  }

  .gradient-box span {
    font-size: min(calc(18px + (48 - 18) * (100vw - 320px) / (991 - 320)),
        48px);
  }

  
  .main-visual-area .splide__slide {
    padding-left: 5.5vw !important;
  }

  .main-visual-area .scroll {
    bottom: 105px;
  }

  .main-visual-area .scroll::before {
    bottom: -105px;
    height: 100px;
  }

  .main-visual-area .scroll::after {
    bottom: -105px;
    height: 100px;
  }
}

@keyframes scroll {
  0% {
    transform: scale(1, 0);
    transform-origin: 0 0;
  }

  50% {
    transform: scale(1, 1);
    transform-origin: 0 0;
  }

  51% {
    transform: scale(1, 1);
    transform-origin: 0 100%;
  }

  100% {
    transform: scale(1, 0);
    transform-origin: 0 100%;
  }
}

@media screen and (max-width: 575px) {
  .main-visual-area .scroll {
    display: none;
  }
}

/* =======================================
ABOUT
======================================== */

.about-area {
  padding-top: min(calc(48px + 152 * ((100vw - 320px) / 1080)),
      200px);
  margin-bottom: 148px;
}

.sub-title {
  color: #00a89c;
  /* 青緑っぽい色 */
  font-size: 14px;
  margin-bottom: 10px;
}

/* 画像の調整 */
.about-col-photo img {
  width: 100%;
  height: auto;
  display: block;
}

/* 右の写真カラムを「1カラム分+30px」縮める */
.about-photo {
  max-width: calc((100% / 12 * 7) - 30px);
  /* 7カラム分 - 30px */
  flex: 0 0 calc((100% / 12 * 7) - 30px);
  margin-left: auto;
  /* ← 右寄せ */
}

.about-text-box p {
  font-size: 18px;
  line-height: 2;
  letter-spacing: 0.1em;
}

.about-photo-box {
  justify-content: flex-end;
  margin-left: auto;
  display: flex;
  gap: 0 30px;
  margin-left: auto;
}

.about-photo {
  max-width: 340px;
  width: 100%;
  margin-left: 0;
}

.about-photo+.about-photo {
  margin-top: 120px;
}

.about-photo {
  flex: 0 0 340px;
  max-width: 340px;
}

@media (max-width: 1500px) {
  .about-area {
    padding-top: min(calc(150px + (200 - 150) * (100vw - 992px) / (1500 - 992)),
        200px);
    margin-bottom: min(calc(70px + (148 - 70) * (100vw - 320px) / (1500 - 320)),
        148px);
  }

  .about-area .container {
    padding-left: calc(15px + 50 * (100vw - 320px) / 1180);
    padding-right: calc(15px + 50 * (100vw - 320px) / 1180);
  }

  .about-photo {
    flex: 1 1 auto;
    /* ←縮めOKに切り替え */
    max-width: 100%;
    /* 親幅に応じて自然に縮む */
  }


  .about-photo-box {
    padding-left: min(calc(20px + (140 - 20) * ((100vw - 992px) / (1500 - 992))),
        140px);
  }

  .about-photo+.about-photo {
    margin-top: 120px;
  }
}

@media (max-width: 991px) {
  .about-area {
    padding-top: min(calc(40px + (150 - 40) * (100vw - 320px) / (991 - 320)),
        150px);
    margin-bottom: min(calc(70px + (148 - 70) * (100vw - 320px) / (991 - 320)),
        148px);
  }
  .about-text-box p {
    font-size: min(calc(14px + (16 - 14) * (100vw - 320px) / (991 - 320)),
        16px);
  }

  .about-photo-box {
    max-width: 600px;
    width: 100%;
    margin: 0 auto;
  }

  .about-right-box {
    margin-top: min(calc(30px + (60 - 30) * (100vw - 320px) / (991 - 320)),
        60px);
  }

  .about-photo+.about-photo {
    margin-top: min(calc(60px + (120 - 60) * (100vw - 320px) / (991 - 320)),
        120px);
  }

}

/* =======================================
STRENGTH
======================================== */
.strength-area {
  margin-bottom: 200px;
}

.strength-text-box {
  padding: 30px;
  background-size: cover;
  background-image: url('../images/common/txt_bg.png');
}

.strength-text-box p {
  font-size: 18px;
}

.catch-box {
  padding-left: 16px;
}

.catch-box h4 {
  background: linear-gradient(90deg, #00b98f, #00c851);
  -webkit-background-clip: text;
  font-size: 40px;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  letter-spacing: 0;
  font-weight: 700;
  text-align: left;
}

.catch-box h4+h4 {
  margin-top: 15px;
}
/* ベタ塗りに近いマーカー */
.yellow-maker{
  background: linear-gradient(transparent 62%, #fffccc 0); /* 下62%から黄色 */
  padding: .05em .15em;                                   /* 文字に余白 */
  border-radius: .2em;                                    /* 角を少し丸く */
  -webkit-box-decoration-break: clone;
          box-decoration-break: clone;                    /* 折り返しでも途切れない */
}

@media (max-width: 1500px) {
  .strength-area {
    margin-bottom: min(calc(140px + (200 - 140) * (100vw - 992px) / (1500 - 992)),
        200px);
  }

  .strength-area .container {
    padding-left: calc(15px + 50 * (100vw - 320px) / 1180);
    padding-right: calc(15px + 50 * (100vw - 320px) / 1180);
  }

  .catch-box {
    padding-left: 10px;
  }

  .catch-box h4 {
    font-size: min(calc(30px + (38 - 30) * (100vw - 992px) / (1500 - 992)),
        38px);
  }

  .strength-text-box {
    padding: min(calc(20px + (30 - 20) * (100vw - 992px) / (1500 - 992)),
        30px);
    margin-top: min(calc(30px + (60 - 30) * (100vw - 992px) / (1500 - 992)),
        60px);

  }

  .strength-text-box p {
    font-size: min(calc(16px + (18 - 16) * (100vw - 992px) / (1500 - 992)),
        18px);
  }
}

@media (max-width: 991px) {
  .strength-text-box p {
    font-size: min(calc(14px + (16 - 14) * (100vw - 320px) / (991 - 320)),
        16px);
  }
  .strength-text-box {
    margin-top: min(calc(25px + (30 - 25) * (100vw - 320px) / (991 - 320)),
        30px);

  }
}

/* =======================================
SERVICE
======================================== */

.service-area .service-title,
.service-area h3 {
  text-align: center;
}

.service-area .service-title {
  margin-bottom: -40px;
  line-height: 1;
}

.service-box {
  padding-top: 110px;
  margin: 0 auto 150px;
  padding-bottom: 100px;
  max-width: 1600px;
  width: 100%;
  background-color: #f0fcf6;
}

.service-img {
  width: 100%;
  max-width: 200px;
  margin: 0 auto;
}

.service-list {
  gap: 0 min(calc(16px + (30 - 16) * (100vw - 992px) / (1600 - 992)),
      30px);
  display: flex;
  margin-bottom: 60px;
}

.service-box .number {
  font-weight: 700;
  font-family: "Poppins";
  color: #00c851;
  font-size: 40px;
  line-height: 1;
  letter-spacing: 0;
  margin-bottom: 60px;
  position: absolute;
}

.service-img img {
  width: 100%;
}

.service-item {
  max-width: 300px;
  width: 100%;
  position: relative;
}

.service-box .text {
  margin-top: 20px;
  color: #00c851;
  font-size: 20px;
  font-weight: 700;
  line-height: 1;
  padding: 15px 0;
  width: 100%;
  text-align: center;
  background-color: #fff;
}

.more-btn {
  display: block;
  width: 100%;
  text-align: center;
  color: #fff;
  font-weight: 400;
  line-height: 1;
  border-radius: 30px;
  overflow: hidden;
}

.more-btn {
  margin: 0 auto;
  max-width: 320px;
  display: block;
  width: 100%;
  text-align: center;
  color: #fff;
  font-size: 18px;
  padding: 21px 0;
  /*
  background:
    url('../images/common/white-right-arrow.png') no-repeat right 24px center / 16px 14px,
    linear-gradient(90deg, #00b98f, #00c851);
  */
  font-size: 18px;
  font-weight: 400;
  line-height: 1;
  border-radius: 30px;
  position: relative;
}

/* 下地：最初から“見える”グラデ（ここが初期表示） */
.more-btn {
  background: linear-gradient(90deg, #00b98f 0%, #00c851 100%);
}

.more-btn .fa-arrow-right {
  position: absolute;
  right: 24px;
}

/* 逆向きのグラデを上にかぶせて、opacityだけアニメーション */
.more-btn::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, #00c851 0%, #00b98f 100%);
  opacity: 0;
  /* 初期は非表示 → 下地が見える */
  transition: opacity 1.2s;
  /* ← ここで“ゆっくり” */
  /* 背景の上、文字・矢印の下 */
  z-index: 1;
}

.more-btn:hover::before {
  opacity: 1;
}

.more-btn span {
  display: block;
  width: 100%;
  position: relative;
  z-index: 2;
}

/* テキストも最前面に固定（被らない） */
.more-btn__label {
  z-index: 3;
  letter-spacing: 0.1em;
}

/* 動きを控えたい環境向け */
@media (prefers-reduced-motion: reduce) {
  .more-btn::before {
    transition: none;
  }
}

@media (max-width: 1500px) {
  .service-box {
    margin-bottom: min(calc(48px + 102 * ((100vw - 320px) / 1080)), 150px);
  }

  .service-area .container {
    padding-left: calc(15px + 50 * (100vw - 320px) / 1180);
    padding-right: calc(15px + 50 * (100vw - 320px) / 1180);
  }
  
  .service-area .service-title {
    margin-bottom: calc(-30px + (-40 - -30) * ((100vw - 992px) / (1500 - 992)));
  }

  .service-box .number {
    font-size: min(calc(30px + (40 - 30) * (100vw - 992px) / (1500 - 992)),
        40px);
  }

  .service-img {
    max-width: min(calc(160px + (200 - 160) * (100vw - 992px) / (1500 - 992)),
        200px);
  }

  .service-box .text {
    font-size: min(calc(15px + (20 - 15) * (100vw - 992px) / (1500 - 992)),
        20px);
  }

  .more-btn {
    max-width: min(calc(280px + (320 - 280) * (100vw - 992px) / (1500 - 992)),
        320px);
    display: block;
    width: 100%;
    text-align: center;
    color: #fff;
    padding: min(calc(16px + (21 - 16) * (100vw - 992px) / (1500 - 992)),
        21px) 0;
    font-size: min(calc(16px + (18 - 16) * (100vw - 992px) / (1500 - 992)),
        18px);
    font-weight: 400;
    line-height: 1;
    border-radius: 30px;
    overflow: hidden;
  }
}

@media (max-width: 991px) {
  .section-box .sec-title {
    font-size: min(calc(40px + (60 - 40) * (100vw - 320px) / (991 - 320)),
        60px);
    margin-bottom: min(calc(20px + (60 - 20) * (100vw - 320px) / (991 - 320)),
        60px);
  }

  .service-area .service-title {
    margin-bottom: calc(-20px + (-30 - -20) * ((100vw - 320px) / (991 - 320)));
    line-height: 1;
  }

  .service-box {
    padding-top: calc(60px + (110 - 60) * ((100vw - 320px) / (991 - 320)));
    margin: 0 auto 150px;
    padding-bottom: calc(60px + (100 - 60) * ((100vw - 320px) / (991 - 320)));
    margin-bottom: min(calc(48px + 102 * ((100vw - 320px) / 1080)), 150px);
    max-width: 1600px;
    width: 100%;
    background-color: #f0fcf6;
  }

  .service-list {
    gap: 25px calc(16px + (30 - 16) * ((100vw - 991px) / (1400 - 991)));
    flex-wrap: wrap;
    justify-content: center;
    max-width: 991px;
    margin: 0 auto min(calc(30px + (60 - 30) * (100vw - 320px) / (991 - 320)),
        60px);
    width: 100%;
  }


  .more-btn {
    max-width: min(240px,
        calc(240px + (280 - 240) * ((100vw - 320px) / (991 - 320))),
        280px);
    padding: min(calc(14px + (16 - 14) * (100vw - 320px) / (991 - 320)),
        16px) 0;
    font-size: min(calc(15px + (16 - 15) * (100vw - 320px) / (991 - 320)),
        16px)
  }

  .service-box .text {
    font-size: 15px;

    padding: clamp(16px,
        /* 👈 最小値 */
        calc(8px + (16 - 8) * (100vw - 992px) / (1600 - 992)),
        16px
        /* 👈 最大値 */
      );
  }
}

@media (max-width: 668px) {

  .service-item {
    max-width: 250px;
    margin: 0 auto;
    width: 100%;
    position: relative;
  }
}


/* =======================================
RECRUIT
======================================== */
.recruit-area {
  padding-top: 150px;
  padding-bottom: 150px;
  width: 100%;
  background: linear-gradient(90deg, #00b98f, #00c851);
}

.recruit-area .sub-title,
.recruit-area .sec-title {
  color: #fff;
  text-align: center;
}

.recruit-area .sec-title {
  margin-bottom: 30px;
}

.recruit-area .catch {
  display: block;
  margin: 0 auto;
  /* 行ごとに縦積み */
  font-size: 0;
  line-height: 1;
  margin: 0.8em auto;
  background-color: #fff;
  /* 白い枠線 */
  margin-bottom: 40px;
  width: fit-content;
  /* テキスト幅に合わせる（画面幅いっぱいにしたいなら100%） */
}

.recruit-area .catch span {
  display: inline-block;
  /* グラデ文字はインラインブロック */
  font-size: 40px;
  padding: 10px 16px;
  font-weight: 700;
  background: linear-gradient(90deg, #00b98f, #00c851);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  letter-spacing: 0;
  color: transparent;
}

.recruit-area .center {
  text-align: center;
  color: #fff;
  font-size: 18px;
  line-height: 2;
  margin-bottom: 44px;
}

.more-btn.white {
  margin: 0 auto;
  width: 100%;
  text-align: center;
  color: #00b98f;
  background-position: right 24px center;
  background-repeat: no-repeat;
  background: none !important;
  /*background-image: url('../images/common/green-right-arrow.png');*/
  font-weight: 400;
  background-color: #fff !important;
  line-height: 1;
  border-radius: 30px;
  border: 1px solid #fff;
  transition: 0.7s;
}

.more-btn.white::after,
.more-btn.white::before {
  content: none;
}

.more-btn.white:hover {
  /* background-image: url('../images/common/white-right-arrow.png'); */
  background-color: #00b98f !important;
  color: #fff;
}

@media (max-width: 1500px) {

  .recruit-area .catch span {
    font-size: min(calc(30px + (40 - 30) * (100vw - 992px) / (1500 - 992)),
        40px);
  }

  .recruit-area .center {
    font-size: min(calc(16px + (18 - 16) * (100vw - 992px) / (1500 - 992)),
        18px);
  }

  .recruit-area .catch {
    margin-bottom: min(calc(30px + (40 - 30) * (100vw - 991px) / (1500 - 991)),
        40px);
  }
}

@media (max-width: 991px) {
  .recruit-area .catch {
    margin-bottom: min(calc(20px + (30 - 20) * (100vw - 320px) / (991 - 320)),
        30px);
  }
  .recruit-area .center {
    font-size: min(calc(14px + (16 - 14) * (100vw - 320px) / (991 - 320)),
        16px);
  }
}

/* =======================================
縦ループ（左右レーン）
======================================== */
.recruit-area.loop_vertical {
  position: relative;
}

.recruit-area.loop_vertical .loop_pic_vertical_left,
.recruit-area.loop_vertical .loop_pic_vertical_right {
  position: absolute;
  top: 0;
  bottom: 0;
  z-index: 1;
  pointer-events: none;
  display: block;
}
.recruit-area.loop_vertical .loop_pic_vertical_left { left: 0; }
.recruit-area.loop_vertical .loop_pic_vertical_right { right: 0; }

/* Swiperが高さを持たないと止まるので必須 */
.loop-rail .swiper { height: 100%; }

/* 等速スクロール */
.loop-rail .swiper-wrapper {
  transition-timing-function: linear !important;
}

/* -------------------------
   2000px → 1500px の間
   横幅:400→300 / 高さ:300→200
------------------------- */
@media (min-width: 1500px) {
  .recruit-area.loop_vertical .loop_pic_vertical_left,
  .recruit-area.loop_vertical .loop_pic_vertical_right {
    width: min(
      calc(300px + (400 - 300) * (100vw - 1500px) / (2000 - 1500)),
      400px
    );
  }
  .loop-rail .swiper-slide {
    height: min(
      calc(200px + (300 - 200) * (100vw - 1500px) / (2000 - 1500)),
      300px
    );
    overflow: hidden;
  }
}

/* -------------------------
   1500px → 320px の間
   横幅:300→140 / 高さ:200→110
------------------------- */
@media (max-width: 1499px) {
  .recruit-area.loop_vertical .loop_pic_vertical_left,
  .recruit-area.loop_vertical .loop_pic_vertical_right {
    width: min(
      calc(140px + (300 - 140) * (100vw - 320px) / (1500 - 320)),
      300px
    );
  }
  .loop-rail .swiper-slide {
    height: min(
      calc(110px + (200 - 110) * (100vw - 320px) / (1500 - 320)),
      200px
    );
    overflow: hidden;
  }
}

.loop-rail .swiper-slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

@media (max-width: 991px) {
  .recruit-area.loop_vertical .loop_pic_vertical_left,
  .recruit-area.loop_vertical .loop_pic_vertical_right {
    position: absolute;
    left: 0;
    right: 0;
    width: 100%;   /* 横いっぱい */
    height: auto;
  }

  .recruit-area.loop_vertical .loop_pic_vertical_left { top: 0; }
  .recruit-area.loop_vertical .loop_pic_vertical_right { bottom: 0; top: auto; }

  /* 中央の本文を前面に */
  .recruit-area.loop_vertical > :not(.loop_pic_vertical_left):not(.loop_pic_vertical_right) {
    position: relative;
    z-index: 2;
  }
  /* 帯の“高さ”だけここで決める（110→130） */
  .loop-rail .swiper {
    height: min(
      calc(110px + (130 - 110) * (100vw - 320px) / (992 - 320)),
      130px
    );
    overflow: hidden;
  }

  /* スライドは画像サイズに追従させる */
  .loop-rail .swiper-slide {
    width: auto;     /* ← 画像の横幅 = スライド幅になる */
    height: 100%;    /* ← 帯の高さに合わせる */
    overflow: hidden;
  }

  /* ★ 画像だけに横幅のfluidを適用（120→160）＋高さは帯にフィット */
  .loop-rail .swiper-slide img {
    width: min(
      calc(140px + (160 - 140) * (100vw - 320px) / (992 - 320)),
      160px
    );
    height: 100%;            /* 帯の高さに揃える */
    object-fit: cover;
    display: block;
  }

}


/* =======================================
横ループ（左右レーン）
======================================== */


.loop_box { overflow: hidden; }

.loop_pic .swiper-wrapper {
  transition-timing-function: linear !important;
}

.loop_pic .swiper-slide {
  flex-shrink: 0;
  width: auto;  /* ← width:100%にしない！ */
  height: auto;
}

.loop_pic img {
  width: min(
    calc(140px + (300 - 140) * (100vw - 320px) / (1500 - 320)),
    300px
  );
  height: min(
    calc(110px + (200 - 110) * (100vw - 320px) / (1500 - 320)),
    200px
  );
  object-fit: cover;
  display: block;
}


.loop_box {
  position: relative;
  overflow: visible;
  z-index: 0;
}

.loop_box .loop_pic {
  position: absolute;
  bottom: 30px;
  right: 0;
  left: 0;
  z-index: -1;
  display: flex;
  gap: 15px;
  animation: loop-slide 20s linear infinite;
}

@media print,
screen and (max-width: 991px) {
  .loop_box .loop_pic {
    margin-top: 30px;
    bottom: 15px;
    position: static;
  }
}

@media screen and (max-width: 575px) {
  .loop_box .loop_pic {
    bottom: 5px;
  }
}