@charset "UTF-8";
@tailwind base;
.scroll_position:before {
  animation: pathmove 2.5s linear infinite;
}
@keyframes pathmove {
  0% {
    bottom: 80rem;
  }
  100% {
    top: auto;
    bottom: 0;
    /* opacity: 0; */
  }
}
.scroll_visible {
  transform: translateY(0);
  opacity: 1;
  @media only screen and (min-width: 1272px) {
    /* transform: translate(0, 0); */
  }
}


/* •·•·•·•·•·•·•·•·•·•·•·•·•·•·•·•·•·•·•·•·•·•·•·•·•·•·•·•· */


.reveal-text,
.reveal-text::after {
  animation-delay: var(--animation-delay, 2s);
  animation-iteration-count: var(--iterations, 1);
  animation-duration: var(--duration, 800ms);
  animation-fill-mode: both;
  animation-timing-function: cubic-bezier(0.0, 0.0, 0.2, 1);
}
.reveal-text-second,
.reveal-text-second::after {
  /* animation-delay: var(--animation-delay, 3s); */
  animation-delay: 0.8s; /* 基本の遅延 */
  animation-iteration-count: var(--iterations, 1);
  animation-duration: var(--duration, 800ms);
  animation-fill-mode: both;
  animation-timing-function: cubic-bezier(0.0, 0.0, 0.2, 1);
}
.reveal-text-third,
.reveal-text-third::after {
  animation-delay: var(--animation-delay, 3s);
  animation-delay: 0.8s; /* 基本の遅延 */

  animation-iteration-count: var(--iterations, 1);
  animation-duration: var(--duration, 800ms);
  animation-fill-mode: both;
  animation-timing-function: cubic-bezier(0.0, 0.0, 0.2, 1);
}
.reveal-text,.reveal-text-second,.reveal-text-third {
  --animation-delay: var(--delay, 0);
  --animation-duration: var(--duration, 800ms);
  --animation-iterations: var(--iterations, 1);
  position: relative;
  animation-name: clip-text;
  color: #FFF;
  white-space: nowrap;
  cursor: default;
  
  &::after {
    content: "";
    position: absolute;
    z-index: 999;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #C45302;
    transform: scaleX(0);
    transform-origin: 0 50%;
    pointer-events: none;
    animation-name: text-revealer;
  }
  
}


@keyframes clip-text {
  from {
    clip-path: inset(0 100% 0 0);
  }
  to {
    clip-path: inset(0 0 0 0);
  }
}


@keyframes text-revealer {
  
  0%, 50% {
    transform-origin: 0 50%;
  }
  
  60%, 100% {
    transform-origin: 100% 50%;   
  }

  
  60% {
    transform: scaleX(1);
  }
  
  100% {
    transform: scaleX(0);
  }
}


.brand_list {
  margin-top: 65px;
}
 .brand_list ul {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-flow: wrap;
  flex-flow: wrap;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
}
 .brand_list ul li {
  padding: 4px 0;
  border-left: solid 2px #616161;
  width: 20%;
}
 .brand_list ul li:last-child {
  border-right: solid 2px #616161;
}
@media only screen and (max-width: 768px) {
   .brand_list ul li:last-child {
    border: none;
  }
}
@media only screen and (max-width: 768px) {
   .brand_list ul li {
    margin-bottom: 20px;
    border-left: none;
    width: 33.3333%;
  }
   .brand_list ul li.col_2 {
    width: 40%;
  }
}
 .brand_list ul li a {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
}
 .brand_list ul li a img {
  width: auto;
}
@media only screen and (max-width: 1024px) {
   .brand_list ul li a img {
    height: 50px;
  }
}
@media only screen and (max-width: 768px) {
   .brand_list ul li a img {
    height: 64px;
  }
}
@media only screen and (max-width: 600px) {
   .brand_list ul li a img {
    height: 50px;
  }
}
@media only screen and (max-width: 480px) {
   .brand_list ul li a img {
    height: 40px;
  }
}