@charset "UTF-8";

.oseibo2025 .sea-c-kanban {
  position: relative;
  max-width: 1920px;
  height: 345px;
  margin: 0 auto;
  overflow: hidden;
  background-image: url(https://r.r10s.jp/evt/event/oseibo/2025/_pc/img/top/kanban/kanban_bg.png?v=202510301615);
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
}
.oseibo2025 .sea-c-kanban__thumbnail {
  position: absolute;
  top: 0;
  left: 0;
  height: 0;
  overflow: hidden;
}
.oseibo2025 .sea-c-kanban__main {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 1;
  width: 389px;
  height: 305px;
  background-image: url(https://r.r10s.jp/evt/event/oseibo/2025/_pc/img/top/kanban/kanban_noshi.png?v=202510301615);
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  transform: translate(-50%, -50%);
}
.oseibo2025 .sea-c-kanban__main::after {
  position: absolute;
  top: 40px;
  right: 50px;
  width: 24px;
  height: 32px;
  content: "";
  background-image: url(https://r.r10s.jp/evt/event/oseibo/2025/_pc/img/top/kanban/kanban_treat_rhombus.png?v=202510301615);
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
}
.oseibo2025 .sea-c-kanban__treat {
  position: relative;
  width: 100%;
  height: 100%;
}
.oseibo2025 .sea-c-kanban__treat-ribon {
  position: absolute;
  top: 136px;
  left: 50%;
  width: 74px;
  height: 46px;
  transform: translateX(-50%);
}
.oseibo2025 .sea-c-kanban__treat-line {
  position: absolute;
  top: 156px;
  width: 104px;
  height: 10px;
  overflow: hidden;
}
.oseibo2025 .sea-c-kanban__treat-line img {
  opacity: 0;
  animation: opacity 2.5s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}
.oseibo2025 .sea-c-kanban__treat-line::before {
  position: absolute;
  top: 50%;
  left: 0;
  z-index: 1;
  display: block;
  width: 100%;
  height: 150%;
  pointer-events: none;
  content: "";
  background: #ffffff;
  transform: translateX(0%) translateY(-50%);
}
.oseibo2025 .sea-c-kanban__treat-line--left {
  left: 58px;
}
.oseibo2025 .sea-c-kanban__treat-line--left::before {
  animation: hide-left 2s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}
.oseibo2025 .sea-c-kanban__treat-line--right {
  right: 58px;
}
.oseibo2025 .sea-c-kanban__treat-line--right::before {
  animation: hide-right 2s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}
.oseibo2025 .sea-c-kanban__text {
  position: absolute;
  left: 50%;
  overflow: hidden;
  transform: translateX(-50%);
}
.oseibo2025 .sea-c-kanban__text--upper {
  top: 54px;
  width: 221px;
}
.oseibo2025 .sea-c-kanban__text--upper img {
  opacity: 0;
  animation: fadeInFromBottom 2s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.5s
    forwards;
}
.oseibo2025 .sea-c-kanban__text--lower {
  top: 187px;
  width: 250px;
}
.oseibo2025 .sea-c-kanban__text--lower img {
  opacity: 0;
  animation: fadeInFromTop 2s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.5s forwards;
}
@keyframes fadeInFromTop {
  0% {
    opacity: 0;
    transform: translateY(-50%);
  }
  60% {
    opacity: 0;
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes fadeInFromBottom {
  0% {
    opacity: 0;
    transform: translateY(50%);
  }
  60% {
    opacity: 0;
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes hide-left {
  100% {
    transform: translateX(-100%) translateY(-50%);
  }
}
@keyframes hide-right {
  100% {
    transform: translateX(100%) translateY(-50%);
  }
}
@keyframes opacity {
  100% {
    opacity: 1;
  }
}