@charset "utf-8";

/* 
** ----------------------------------
** 前置き：
** 制作は外部なので分からないが、
** .l-, .u- 使うことから推測し、ここではFLOCSSを採用する。 
** https://github.com/hiloki/flocss
** ----------------------------------
*/

.l-service .l-structure {
  padding-top: 20px;
}
@media screen and (min-width: 768px) {
  .l-service .l-structure {
    padding-top: 0;
  }
}

.p-achievements-carousel {
  position: relative;
  background: #fff; /* 背景色がtransparentなので現状に合わせて白にしておく */
  z-index: 2;
  height: 48px;
}

@media screen and (min-width: 768px) {
  .p-achievements-carousel {
    display: flex;
    align-items: center;
    margin-top: -58px;
    height: 100px;
  }
}


/* 
* ----------------------------------
 * ブランドロゴカルーセル
 * ----------------------------------
 */
.p-achievements-carousel__logos {
  width: 100%;
  display: flex;
}
@media screen and (min-width: 768px) {
  .p-achievements-carousel__logos {
    height: 100%;
  }
}

@media screen and (min-width: 768px) {
  .p-achievements-carousel__logos {
    position: absolute;
    top: 0;
    left: 0;
  }
}

.p-achievements-carousel__logos__img {
  animation: infiniteLoopBrandLogos_sp 80s linear infinite;
  min-width: 5040px; /* 120px x 42個 */
  max-width: 5040px; /* 120px x 42個 */
}

@media screen and (min-width: 768px) {
  .p-achievements-carousel__logos__img {
    animation: infiniteLoopBrandLogos_pc 85s linear infinite;
    min-width: 6300px; /* 150px x 42個 */
    max-width: 6300px; /* 150px x 42個 */
  }
}

.p-achievements-carousel__logos__img > div {
  display: flex;
  justify-content: space-between;
}
@media screen and (min-width: 768px) {
  .p-achievements-carousel__logos__img > div {
    height: 100%;
    align-items: center;
  }
}

.p-achievements-carousel__logos__img > div > img {
  object-fit: contain;
  width: 120px;
  height: 48px;
}

@media screen and (min-width: 768px) {
  .p-achievements-carousel__logos__img > div > img {
    width: 150px;
    height: 60px;
  }
}

@keyframes infiniteLoopBrandLogos_sp {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-5040px);
  }
}

@keyframes infiniteLoopBrandLogos_pc {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-6300px);
  }
}

/* 
 * ----------------------------------
 * utility
 * ----------------------------------
 */
 .u-font-size-ss {
  font-size: 1.1rem;
 }