.ecm-kanban {
  background: #fef8f7
    url(https://r.r10s.jp/evt/event/fashion/thesale/20260101/_pc/img/kanban/background.svg);
  overflow: hidden;
}

.ecm-kanban[data-layout="default"] .ecm-kanban__logo {
  transform: translateX(calc(-50% - 305px)) !important;
}

.animated-kanban {
  width: 100%;
  height: 450px;
  overflow: hidden;
}

.animated-kanban__image {
  position: absolute;
  overflow: hidden;
}

.animated-kanban__image--text {
  left: 785px;
  top: -4px;
  width: 0;
  height: 167px;
  will-change: width;
}

.animated-kanban__image--path {
  top: 255px;
  left: 109px;
  width: 0;
  height: 100px;
  overflow: hidden;
  will-change: width;
}

.animated-kanban__image--items {
  top: 0;
  margin: auto;
  opacity: 0;
}

.animated-kanban__image--sub {
  width: 392px;
  height: 0;
  left: 783px;
  will-change: height;
}

.animated-kanban--mens .animated-kanban__image--sub {
  width: 0;
  height: 526px;
  will-change: width;
}

.animated-kanban__image--main {
  width: 396px;
  height: 450px;
  left: 543px;
}

.animated-kanban__brand {
  position: absolute;
  overflow: hidden;
  width: 0;
  height: 149px;
  top: 238px;
  left: 282px;
  will-change: width;
}

.kanban-coupon {
  transform: rotate(-5deg);
  transform-origin: center center;
}

.kanban-coupon__newyear {
  display: block;
}

.js-animated-kanban--loaded .animated-kanban__image--text {
  animation: slide-text 0.8s cubic-bezier(0.76, 0, 0.24, 1) 1 0s normal forwards;
}

.js-animated-kanban--loaded .animated-kanban__image--path {
  animation: slide-path 0.9s cubic-bezier(0.76, 0, 0.24, 1) 0s 1 normal forwards;
}

.js-animated-kanban--loaded .animated-kanban__image--items {
  animation: fade-in-kanban 0.3s linear 1.5s 1 normal forwards;
}

.js-animated-kanban--loaded .kanban-coupon {
  animation: swing-coupon 1s steps(2, jump-none) 0s infinite alternate forwards;
}

.js-animated-kanban--loaded .animated-kanban__image--sub {
  animation: slide-sub 0.9s cubic-bezier(0.76, 0, 0.24, 1) 0s 1 normal forwards;
}

.js-animated-kanban--loaded
  .animated-kanban--mens
  .animated-kanban__image--sub {
  animation: slide-sub-men 0.9s cubic-bezier(0.76, 0, 0.24, 1) 0s 1 normal
    forwards;
}

.js-animated-kanban--loaded .animated-kanban__brand--first {
  /* animation: slide-brand-first 5.3s linear 1.1s infinite normal forwards; */
  animation: slide-brand-first 6.0s linear 1.1s infinite normal forwards;
}

.js-animated-kanban--loaded .animated-kanban__brand--second {
  /* animation: slide-brand-second 5.3s linear 1.1s infinite normal forwards; */
  animation: slide-brand-second 6.0s linear 1.1s infinite normal forwards;
}

@keyframes fade-in-kanban {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

@keyframes slide-text {
  0% {
    width: 0px;
  }
  100% {
    width: 416px;
  }
}

@keyframes slide-sub {
  0% {
    height: 0;
  }
  100% {
    height: 526px;
  }
}

@keyframes slide-sub-men {
  0% {
    width: 0px;
  }
  100% {
    width: 392px;
  }
}

@keyframes slide-path {
  0% {
    width: 0px;
  }
  100% {
    width: 735px;
  }
}

/* @keyframes slide-brand-first {
  0% {
    width: 0px;
  }
  5% {
    width: 312px;
  }
  35% {
    width: 312px;
  }
  40% {
    width: 0px;
  }
  100% {
    width: 0px;
  }
}

@keyframes slide-brand-second {
  0% {
    width: 0px;
  }
  50% {
    width: 0px;
  }
  55% {
    width: 312px;
  }
  85% {
    width: 312px;
  }
  90% {
    width: 0px;
  }
  100% {
    width: 0px;
  }
} */

@keyframes slide-brand-first {
  0% {
    width: 0px;
  }
  3% {
    width: 312px;
  }
  42% {
    width: 312px;
  }
  45% {
    width: 0px;
  }
  100% {
    width: 0px;
  }
}

@keyframes slide-brand-second {
  0% {
    width: 0px;
  }
  50% {
    width: 0px;
  }
  53% {
    width: 312px;
  }
  92% {
    width: 312px;
  }
  95% {
    width: 0px;
  }
  100% {
    width: 0px;
  }
}

@keyframes swing-coupon {
  0% {
    transform: rotate(-2deg);
  }
  100% {
    transform: rotate(2deg);
  }
}

.ecm-kanban__logo img {
  width: 100%;
}

.modalOpenButton_coupon {
  z-index: 2;
}
.animated-kanban__bg {
  position: absolute;
  height: 450px;
  width: auto;
  z-index: 0;
  margin: auto;
  left: 0;
  right: 0;
  top: 0;
  z-index: -1;
}

/** cmn_all.css related */
.ecm-kanban__rightButton {
  right: calc(50% - 406px);
  bottom: 18px;
}
