:root {
    --pc-h3:  "noto-sans-cjk-jp", sans-serif;
    --font-size-xs: 0.75rem;
    --font-size-23xl: 2.625rem;
    --color1: #002c44;
    --color-darkgray-100: #989898;
    --gap-xs: 0.75rem;
    --gap-11xs: 0.125rem;
    --gap-41xl: 3.75rem;
    --padding-101xl: 7.5rem;
    --padding-181xl: 12.5rem;
    --padding-21xl: 2.5rem;
}




/* Extracted root variables required for the `other-section.css` */
:root {
    --font-family-open_sans: "Open Sans", Helvetica , sans-serif;
    --font-family-noto_sans:"noto-sans-cjk-jp", Helvetica , sans-serif;
    --woodsmoke: #101010;
    --black-pearl: #081a26;
    --font-size-s: 12px;
    --font-size-m: 15px;
    --font-size-l: 16px;
    --font-size-xl: 18px;
    --font-size-xxl: 23px;
    --font-size-xxxl: 26px;
    --font-size-xxxxl: 42px;
    --material-themeextendedcustom-color-1light-high-contraston-color: #ffffff;
}





/* ---------------

mood-sectionのCSS 

---------------------*/
.mood-section-inner.company {
    padding: var(--padding-101xl) var(--padding-181xl) 0;
    gap: var(--gap-41xl);
    margin-top: 7rem;
}
.mood-section.company,
.mood-section-inner.company {
    align-self: stretch;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    row-gap: 1rem;
}
/* 他のmood-section, mood__img__content, page-titlecontent関連クラス */
.mood__img__content {
    align-self: stretch;
    align-items: flex-end;
    gap: var(--gap-xs);
    margin-top: -3rem;
}
.mood__img__content--wrap {
    margin: calc(50% - 50vw);
    width: 100vw;
    margin-top: .3rem;
}

.mood__img__content--inner {
    align-self: stretch;
    height: 21.563rem;
    position: relative;
    border-radius: var(--br-5xs);
    flex-shrink: 0;
    object-fit: cover;
    width: 100%;
    overflow: hidden;


  }

  .mood__img__content--inner img {
    width: 100%;
  
    object-position: center;
    position: relative;
    object-fit: cover;
    object-position: center;
    transform: translateY(-30%);
    opacity: .8;
  }

  /* 企業情報ページ */
  .mood-section.company   .mood__img__content--inner img  {
    transform: translateY(-15%) scale(1.3);
  }

  /* circle*/

  .mood-section.circle   .mood__img__content--inner img  {
    transform: translateY(-15%);
  }
  /* missionページ */
  .mood-section.mission   .mood__img__content--inner img  {
    transform: translateY(-25%) scale(1.0);
  }
    /* overview */

    .mood-section.overview   .mood__img__content--inner img  {
      transform: translateY(3%) scale(1.2);
    }
      /* top messageページ */
      .mood-section.topMessage   .mood__img__content--inner img  {
        transform: translateY(-11%) scale(1.3);
      }

/* service */
  .mood-section.service   .mood__img__content--inner img  {
    transform: translateY(-65%);
  }



/* 
  .mood__img-pc {
    display: block;
  }

  .mood__img-sp {
    display: none;
  } */

  .mood__img__content--inner::after {
    content: "";
    /* background: #000000;
    opacity: .2; */
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    border-radius: var(--br-5xs);
  }


  @media screen and (max-width: 1024px) {
    .mood__img__content {
      margin-top: -1rem;
  }
  }
  @media screen and (max-width: 768px) {

￥
    .mood-section-inner.company {
      gap: 2rem;
  }
  .mood__img__content {
    margin-top: -.7rem;
}

  .mood__img__content--wrap {
    padding: 0 .3rem;
}



  }

/*--------------

page-title

----------------- */
.page-titlecontent-deco {
    position: relative;
    color: #00547D;
    letter-spacing: 0.05625rem;
    font-size: 1.125rem;
    font-style: normal;
    font-weight: 700;

}
.page-titlecontent-main {
    margin: 0;
    position: relative;
    font-size: var(--font-size-23xl);
    letter-spacing: 0.05rem;
    font-weight: 700;
    font-family: var(--pc-h3);
    color: #002C44;
}
.page-titlecontent {
    overflow: hidden;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    z-index: 10;
}

@media screen and (max-width: 1024px) {
  .page-titlecontent-main {
font-size: 2.375rem;
font-style: normal;
font-weight: 700;
line-height: 2.75rem; /* 115.789% */
letter-spacing: 0.0475rem;
}

.page-titlecontent-deco {

font-family: var(--font--openSans);
font-weight: 700;
letter-spacing: 0.04rem;
font-size: 1rem;

}



}

@media screen and (max-width: 768px) {
  .page-titlecontent-main {
  font-size: 2.5rem;
font-style: normal;
font-weight: 700;
line-height: 2.75rem; /* 146.667% */
letter-spacing: 0.0375rem;
margin-bottom: 1.2rem;
  }

  .page-titlecontent-deco {
font-family: var(--font--openSans);
font-weight: 700;
letter-spacing: 0.04rem;
font-size: 1rem;
  }
}

/*--------------

page-nation

----------------- */
.breadcrumb {
    margin-top: 2rem;
    display: flex;
    align-items: flex-start;
    text-align: left;
    font-size: var(--font-size-xs);
    color: var(--color-darkgray-100);
    font-family: var(--pc-h3);
}

.third-section .breadcrumb {
  margin-top: 2rem;
  margin-bottom: 2rem;
}
.breadcrumb.third {
  margin-top: 0;
  margin-right: auto;
  margin-bottom: 2.2rem;
}
.breadcrumb-content {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-start;
    gap: var(--gap-11xs);
}

/* ::markerの削除 */
.breadcrumb-content ul {
  list-style: none; /* デフォルトのリストスタイルを無効化 */
}
.breadcrumb-content li::marker  {
  content: none;
}



.breadcrumb-content li {
    color: var(--color-darkgray-100);
    font-size: 0.82rem;
    transition: .3s ease all;
    display: flex;
    align-items: center;
}
.breadcrumb-content li a {
  color: var(--color-darkgray-100);
}
.breadcrumb-content li span {
  text-decoration: underline;
  white-space: nowrap;
  line-height: 1.4;
}

/* border bottom をテキストにのみ追加 */
.breadcrumb-content li.current-item span {
  text-decoration: none;
  /* テキストを折り返す */
  white-space: wrap;
}

/* ・をリストの後に追加 */
.breadcrumb-content li:not(li.current-item)::after {
  content: "・";
  color: var(--color-darkgray-100);
  font-size: 0.75rem;
  padding: 0 .3rem;
  border-bottom: none;
}



.breadcrumb-content li:not(li.current-item):hover {
  opacity: .6;
}





/* section layout */

.second-wrapper {
  margin: 7.6rem auto 0;
  padding-top: 11rem;
}

.second-section {
      max-width: 1200px;
      margin: 0 auto ;
      padding: 0 2rem 0;
}



@media screen and (max-width: 1024px) {
  .second-section {
    padding: 0 3.8rem 0;
    margin: 0 auto;
}

    .mood__img__content--inner {
      align-self: stretch;
      width: auto;
      height: 17.8125rem;
    }
    .mood-section-inner.company {
        padding-left: var(--padding-21xl);
        padding-right: var(--padding-21xl);
        box-sizing: border-box;
      }

      .breadcrumb {
        margin-top: 1.5rem;
        display: flex;
        align-items: flex-start;
        text-align: left;
        font-size: var(--font-size-xs);
        color: var(--color-darkgray-100);
        font-family: var(--pc-h3);
    }
    .mood__img__content--inner img {
      transform: translateY(0);
    }
        /* missionページ */
        .mood-section.mission   .mood__img__content--inner img  {
          transform: translateY(-20%) scale(1.0);
        }

        /* contact privacyページ */
        .mood-section.contact   .mood__img__content--inner img  {
          transform: translateY(-20%) scale(1.0);
        }

        /* circle */
        .mood-section.circle .mood__img__content--inner img {
          transform: translateY(14%) scale(1.3);
        }

            /* overview */

    .mood-section.overview   .mood__img__content--inner img  {
      transform: translateY(16%) scale(1.4);
    }
      /* top messageページ */
      .mood-section.topMessage   .mood__img__content--inner img  {
        transform: translateY(11%) scale(1.3);
      }

          /* ethicalページ */
    .mood-section.ethical   .mood__img__content--inner img  {
      transform: translateY(-16%) scale(1.15);
    }
      
        /* news */

        .mood-section.news   .mood__img__content--inner img  {
          transform: translateY(-11%) scale(1.0);
        }
        /* service */
  .mood-section.service   .mood__img__content--inner img  {
    transform: translateY(-45%);
  }

  
}


@media (max-width: 768px) {
  .second-section {
    padding: 0 1.8rem 0;
    margin: 0 auto ;
}


.mood-section-inner.company {
  padding-left: 1.8rem;
  padding-right: 1.8rem;
  margin-top: .8rem;
}

.mood__img__content--inner img {
  width: 100%;
  height: 100%;
}

  .mood__img__content--inner {
    align-self: stretch;
    width: auto;
    height: 15.3125rem;
  }
  .mood__img__content--inner img { 
    transform: translateY(0) scale(1.0);
  }

    /* missionページ */
    .mood-section.mission   .mood__img__content--inner img  {
      transform: translateY(11%) scale(1.3);
    }


        /* contact privacyページ */
        .mood-section.contact   .mood__img__content--inner img  {
          transform: translateY(0) scale(1.0);
        }

    /* circle*/

    .mood-section.circle   .mood__img__content--inner img  {
      transform: translateY(0%) scale(1.0);
    }

       /* top messageページ */
       .mood-section.topMessage   .mood__img__content--inner img  {
        transform: translateY(0) scale(1.0);
      }

                /* ethicalページ */
    .mood-section.ethical   .mood__img__content--inner img  {
      transform: translateY(0) scale(1.2);
    }

           /* news */

           .mood-section.news   .mood__img__content--inner img  {
            transform: translateY(0%) scale(1.2);
          }
/* service */
.mood-section.service   .mood__img__content--inner img  {
  transform: translateY(0%);
}
    

  /* .mood__img-pc {
    display: none;
  }

  .mood__img-sp {
    display: block;
  } */

}




/* Section Title Styles */
.section-header.other {
  text-align: left;
  margin-bottom: 2.5rem;
  padding-top: 5rem;
  border-top: 0.01rem solid #707070;
  padding-top: 5rem;
}


.section-title-en {
  color: #00547D;
  font-family: 'Open Sans', sans-serif;
  display: block;
    font-weight: 700;
    letter-spacing: 0.04rem;
    font-size: 1rem;
}
.other-section {
  position: relative;
  padding: 0 2rem;
  margin: 4rem auto 0;
  max-width: 1200px;
}



.section-title-ja {
  color: #002C44;
  font-family:  "noto-sans-cjk-jp", sans-serif;
  font-size: 2.625rem;
  font-style: normal;
  font-weight: 700;
  line-height: 2.75rem; /* 104.762% */
  letter-spacing: 0.0525rem;
}

.other-links {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.25rem;
  margin-top: 2.5rem;
}

.other-links.card__content {
  gap:2rem;
  
}

.other-link {
  text-decoration: none;
  color: inherit;
  display: block;
  border-radius: 10px;
  overflow: hidden;
  position: relative;
  aspect-ratio: 5 / 3;
}


/* 表示しているページのリンクを非表示にするため追加 */
.other-link.none {
  display: none;
}

.other-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s ease;
}

.other-link:hover .other-image {
  transform: scale(1.1);
}

.other-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: flex-end;
  padding: 1.6rem;
  z-index: 0;
}

.other-overlay::after {
  content: "" ;
  position: absolute; 
  opacity: .5;
  top: 0; 
  left: 0; 
  right: 0; bottom: 0; background: rgba(0, 0, 0, 0.25); z-index: 1;
  background: 
  linear-gradient(to right ,
   rgba(30, 30, 30, 0) 0%,
  rgba(27, 27, 27, 0.2) 50%,
  rgba(25, 25, 25, 0.5)100%);
  background-blend-mode: multiply;
  z-index: -1;
}

.overlay-content {
  color: #FFF;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  z-index: 3;
}

.overlay-en {
  font-family: "Open Sans", sans-serif;
  font-size: 0.75rem;
  font-style: normal;
  font-weight: 600;
  line-height: 100%; /* 0.75rem */
  letter-spacing: 0.015rem;
}

.overlay-content h3 {
  color: #FFF;
  font-family:  "noto-sans-cjk-jp", sans-serif;
font-size: 1.625rem;
font-style: normal;
font-weight: 700;
line-height: 1.2; /* 1.625rem */
letter-spacing: 0.065rem;
}

.overlay-content .overlay-arrow {
  position: absolute;
  right: 1.8rem;
  bottom: 1.6rem;
  font-size: 1.5rem;
  transition: transform .3s 0.1s ease;
}

.other-link:hover .overlay-arrow {
  transform: translateX(10px);
}





@media (max-width: 1024px) {

  .second-wrapper {
    margin: 5rem auto 0;
  }
  .second-wrapper.service {
    padding-top: 7rem;
  }

  .section-title-ja {
    font-size: 2.375rem;
    font-style: normal;
    font-weight: 700;
    line-height: 1.5; /* 115.789% */
    letter-spacing: 0.0475rem;
  }

  .other-links {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.25rem;
    margin-top: 2.5rem;
  }

  .other-links.card__content {
    gap: 1.26rem;
    grid-template-columns: repeat(3, 1fr);
  }
  .other-section {
    padding: 0 3.8rem;
  }
  
}

@media (max-width: 768px) {
  .other-section {
    padding: 0 1.8rem;
  }

}













/* -----------------

Styles for the `.section other` content 

-------------------------*/
 .section.other {
    align-items: flex-start;
    align-self: stretch;
    display: flex;
    flex: 0 0 auto;
    flex-direction: column;
    gap: 10px;
    padding: 0px 99px;
    position: relative;
    width: 100%;
  }
  
   .other__content {
    align-items: center;
    gap: 80px;
  }
  
   .border-other__content {
    border: .7px solid #ccc; /* 必要に応じてボーダー色を調整 */
    box-sizing: border-box;
    width: 100%; /* .other__content__inner と同じ幅に設定 */
    margin: 0 auto;
  }
  
   .other__content__inner {
    align-items: center;
    align-self: stretch;
    display: flex;
    flex: 0 0 auto;
    flex-direction: column;
    position: relative;
    width: 100%;
  }
  
   .other__content-wrap {
    align-items: flex-start;
    gap: 57px;
    padding: 0px 100px;
  }
  
   .content__title-wrap-inner-1 {
    height: 64px;
    position: relative;
    width: 392px;
  }
  
   .content__titlewrap-container {
    height: 64px;
    position: relative;
    width: 388px;
  }
  
   .content__title-wrap-main-2 {
    left: 0;
    position: absolute;
    top: 20px;
    width: 388px;
  }
  
   .content__title-wrap-deco-2 {
    color: #00547d;
    font-weight: 600;
    left: 2px;
    position: absolute;
    top: 0;
  }
  
   .other__content__item-wrap {
    align-items: center;
    align-self: stretch;
    display: flex;
    flex: 0 0 auto;
    gap: 33px;
    justify-content: center;
    position: relative;
    width: 100%;
  }
  
   .other__content__item {
    flex: 1;
    flex-grow: 1;
    height: 196.99px;
    position: relative;
    border-radius: 8px;
  }
  
  
   .overlap-group {
    align-items: flex-end;
    border-radius: 8px;
    display: flex;
    height: 197px;
    justify-content: flex-start;
    min-width: 300px;
    padding: 25.0px 23.0px;
    border-radius: 8px; /* 必要に応じてradiusを調整 */
    overflow: hidden;
    width: 100%;
    transition: .3s ease all;
    position: relative;
  }
  
   .overlap-group::after {
    content: "";
    background: linear-gradient(to right,rgba(30, 30, 30, 0) 0%, rgba(27, 27, 27, 0.2) 50.54%, rgba(25, 25, 25, 0.73) 100%);
    background-size: cover;
    width: 100%;
    height: 100%;
    pointer-events: none;
    position: absolute;
    top: 0;
    left: 0;
    border-radius: 8px;
    transition: .5s ease all;
  }
  
   .overlap-group.president::before {
    content: "";
    background-image: url(../../img/second/second-bottomImg-topMessage.png);
    background-position: 50% 50%;
    background-size: cover;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    pointer-events: none;
    border-radius: 8px;
    transition: .3s ease all;
  }
  
  
   .overlap-group.staff::before {
    content: "";
    background-image: url(../../img/second/aboutUs-staff.png);
    background-position: 50% 50%;
    background-size: cover;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    pointer-events: none;
    border-radius: 8px;
    transition: .3s ease all;
  }
   .overlap-group.circle::before {
    content: "";
    background-image: url(../../img/second/secibd-bottomImg-circle.png);
    background-position: 50% 50%;
    background-size: cover;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    pointer-events: none;
    border-radius: 8px;
    transition: .3s ease all;
  }
  
  
   .other__content__title {
    align-items: flex-start;
    display: flex;
    flex-direction: column;
    gap: 8px;
    position: relative;
    width: 100%;
    z-index: 3;
  }
  
   .other__content__title-deco {
    align-self: stretch;
    letter-spacing: 0.24px;
    line-height: 12px;
    margin-top: -1.00px;
    opacity: 0.9;
    position: relative;
  }
  
   .other__content__title__main-wrap {
    align-items: center;
    display: flex;
    flex: 0 0 auto;
    justify-content: space-between;
    position: relative;
    width: 100%;
  }
  
   .other__content__title-main {
    flex: 1;
    letter-spacing: 1.04px;
    line-height: 26px;
    margin-top: -1.00px;
    position: relative;
  }
  
   .arrow-w {
    height: 1rem;
    margin-left: 0px;
    margin-right: 13px;
    position: relative;
    width: 1rem;
    transition: .3s ease all;
  }
  
   .other__content__item-1 {
    background-image: url(../img/img-first-1@2x.png);
    background-position: 50% 50%;
    background-size: cover;
    height: 196.99px;
    position: relative;
    width: 300px;
  }
  
   .content__title-wrap-deco-3 {
    font-family: var(--font-family-open_sans);
    font-size: var(--font-size-l);
    letter-spacing: 0.80px;
    line-height: normal;
  }
  
   .content__title-wrap-main-3 {
    letter-spacing: 0.84px;
    line-height: 44px;
  }
  
   .other__content-1 {
    align-self: stretch;
    display: flex;
    flex: 0 0 auto;
    flex-direction: column;
    position: relative;
    width: 100%;
  }
  
   .phirosophy__text-content-1 {
    align-self: stretch;
    color: var(--woodsmoke);
    position: relative;
  }
  
   .vision__content-1 {
    align-self: stretch;
    position: relative;
    z-index: 2;
  }
  
  
  /* hover */
  
   .other__content__item:hover .overlap-group::before {
    background-size: 110%;
    transform: scale(1.1);
  }
   .other__content__item:hover  .arrow-w {
    transform: translate(30%, 0);
  }
  
   .other__content__item:hover .overlap-group::after {
    opacity: 0.7;
  }


  @media (max-width: 1300px) {
     .other__content-wrap {
      padding: 0;
    }
    
    @media (max-width: 1200px) {
       .other__content__item-wrap {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 20px;
    }
    }
    }


    @media (max-width: 1024px) {

         .other__content__item-wrap {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 20px;
        }
    

         .other__content-wrap {
            padding: 0;
          }

          /* other__content__item のスタイル */
     .other__content__item {
        display: inline-block;
        transition: opacity 0.3s ease;
      }
       .other__content__item:hover {
        opacity: 0.7;
      }
    }


    /* Mobile Responsive Design */
@media (max-width: 767px) {
     .section.other {
        padding: 0 30px;
      }

        /* other__content__item のスタイル */
   .other__content__item {
    display: block;
    width: 100%;
    transition: opacity 0.3s ease;
  }
   .other__content__item:hover {
    opacity: 0.7;
  }


  .second-mission .other__content__item-wrap {
    display: flex;
    flex-direction: column;
    gap: 20px; /* Space between each item */
}

   .overlap-group {

    justify-content: flex-start;
    border-radius: 8px; /* 必要に応じてradiusを調整 */
    overflow: hidden;
  }


}


.notosans-bold-woodsmoke-42px {
    color: var(--woodsmoke);
    font-family: var(--font-family-noto_sans);
    font-size: var(--font-size-xxxxl);
    font-style: normal;
    font-weight: 700;
  }
  
  .opensans-semi-bold-white-12px {
    color: var(--material-themeextendedcustom-color-1light-high-contraston-color);
    font-family: var(--font-family-open_sans);
    font-size: var(--font-size-s);
    font-style: normal;
    font-weight: 600;
  }
  
  .notosans-bold-white-26px {
    color: var(--material-themeextendedcustom-color-1light-high-contraston-color);
    font-family: var(--font-family-noto_sans);
    font-size: var(--font-size-xxxl);
    font-style: normal;
    font-weight: 700;
  }
  



.content__title-wrap-deco-3 {
    font-family: var(--font-family-open_sans);
    font-size: var(--font-size-l);
    letter-spacing: 0.80px;
    line-height: normal;
  }




  /* section title */

  .section-title {
    margin-bottom: 2rem;
  }
  
  .section-title-en {
    display: block;
    color: #00547D;
    font-family: "Open Sans", sans-serif;
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: 0.05rem;


    
  }
  
  .section-title-ja {
    color: #002C44;
    font-family:  "noto-sans-cjk-jp", sans-serif;
    font-size: 2.625rem;
    font-style: normal;
    font-weight: 700;
    line-height: 2.75rem; /* 104.762% */
    letter-spacing: 0.0525rem;
  }
  
  .section-title-en.white {
    color: #78D3FF;
  }
  .section-title-ja.white {
    color: #FFF;
  }

  @media (max-width: 1024px) {
    .section-title-en {
font-weight: 700;
letter-spacing: 0.04rem;
font-size: 1rem;
line-height: .8;
    }
  
    .section-title-ja {
      font-size: 2.375rem;
      font-style: normal;
      font-weight: 700;
      line-height: 1.5; /* 115.789% */
      letter-spacing: 0.0475rem;
    }
    
  }





@media (max-width: 768px) {
  .second-wrapper {
    margin: 7rem auto 0;
    padding-top: 0;
  }
  .other-links {
    grid-template-columns: 1fr;
  }

  .section-title-ja {
    font-size: 2.5rem;
    font-weight: 700;
  }
  .section-title-en {
    color: #00547D;
    margin-bottom: 0;
font-family: var(--font--openSans);
font-weight: 700;
letter-spacing: 0.04rem;
font-size: 1rem;
  }

  .other-links.card__content {
    row-gap: 3.9rem;
    grid-template-columns: 1fr;
  }
}







/* Pagination */
.pagination {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 2.5rem;
  margin-top: 4rem;
}

.pagination.third {
  justify-content: flex-end;
}

.pagination-numbers {
  display: flex;
  gap: 2rem;
  align-items: center;
}

.page-numbers {
  color: #B5B5B5;
  cursor: pointer;
  font-family: "Open Sans", sans-serif;
font-size: 0.9375rem;
font-style: normal;
font-weight: 400;
line-height: 1.875rem; 
  transition: color 0.3s ease;

}



.page-numbers.current {
  color: #0297E0;
}

.page-numbers:hover {
  color: #0297E0;
}

.next,
.prev {
  border-radius: 50%;
  width: 2.8125rem;
  height: 2.8125rem;
  background: var(--circleBtn--BG);
  transition: .4s ease all;
  transform-origin: center;
  display: flex;
  align-items: center;
  justify-content: center;
}

.next::after {
  content: "";
  background: url("../../img/common/icon-arrow-w.svg") no-repeat;  
  width: 0.7rem;
  height: 0.7rem;
  background-size: contain;
  transition: .2s  .2s ease all;
  transform: translate(0,0);
  pointer-events: none;
}
.prev::after {
  content: "";
  background: url("../../img/common/icon-arrow-w-left.svg") no-repeat;  
  width: 0.7rem;
  height: 0.7rem;
  background-size: contain;
  transition: .2s  .2s ease all;
  transform: translate(0,0);
  pointer-events: none;
}


.next:hover ,
.prev:hover   {
    transform: scale(1.2);
}
.next:hover::after{
  transform: translate(30%,0);
}

.prev:hover::after {
  transform: translate(-30%,0);
}




/* Responsive Design */
@media (max-width: 1024px) {
  .pagination {
    margin-top: 3.75rem;
    gap: 2.5rem;
  }

}

@media (max-width: 768px) {
  
  .pagination {
    gap: 2.5rem;
  }
  
  .pagination-numbers {
    gap: 1.4rem;
  }
  
  .pagination-arrow {
    width: 3rem;
    height: 3rem;
  }
}



  /* Fade In Animation */
  .fade-in {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.6s ease, transform 0.6s ease;
  }
  
  .fade-in.visible {
    opacity: 1;
    transform: translateY(0);
  }