/* ==========================================
   Variables & Root
   ========================================== */
:root {
  --s: calc(100vw / 1280);
  --color-black: #231815;
  --color-white: #fff;
}

/* iPad・タブレット (768px以下) */
@media screen and (max-width: 768px) {
  :root {
    --s: calc(100vw / 768);
  }
}

/* スマホ (500px以下) */
@media screen and (max-width: 500px) {
  :root {
    --s: calc(100vw / 500);
  }
}

/* ==========================================
   Base Layout
   ========================================== */
.mv-motion-graphics {
  position: relative;
  width: 100%;
  height: calc(720 * var(--s));
  overflow: hidden;
}

/* 共通のティッカースタイル */
.mv-ticker {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
}

.mv-ticker__inner {
  display: flex;
  width: max-content;
  will-change: transform;
  transform: translateX(0);
}

.mv-ticker__list {
  display: flex;
  align-items: flex-start;
}

/* ==========================================
   1. Image Group
   ========================================== */
.mv-ticker--image {
  height: 100%;
  z-index: 1;
}

.mv_pic01 {
  margin-left: calc(240 * var(--s));
  width: calc(445 * var(--s));
}
.mv_pic02 {
  margin-top: calc(345 * var(--s));
  margin-left: calc(115 * var(--s));
  width: calc(220 * var(--s));
}
.mv_pic03 {
  margin-left: calc(-45 * var(--s));
  width: calc(445 * var(--s));
}
.mv_pic04 {
  margin-top: calc(370 * var(--s));
  margin-left: calc(-80 * var(--s));
  width: calc(460 * var(--s));
}
.mv_pic05 {
  margin-top: calc(45 * var(--s));
  margin-left: calc(-250 * var(--s));
  width: calc(380 * var(--s));
}
.mv_pic06 {
  margin-left: calc(275 * var(--s));
  width: calc(325 * var(--s));
}
.mv_pic07 {
  margin-top: calc(440 * var(--s));
  margin-left: calc(-95 * var(--s));
  width: calc(355 * var(--s));
}
.mv_pic08 {
  margin-left: calc(-80 * var(--s));
  width: calc(445 * var(--s));
}
.mv_pic09 {
  margin-top: calc(380 * var(--s));
  margin-left: calc(-135 * var(--s));
  width: calc(355 * var(--s));
}
.mv_pic10 {
  margin-left: calc(80 * var(--s));
  width: calc(380 * var(--s));
}
.mv_pic11 {
  margin-top: calc(440 * var(--s));
  margin-left: calc(-225 * var(--s));
  width: calc(355 * var(--s));
}
.mv_pic12 {
  margin-left: calc(100 * var(--s));
  width: calc(445 * var(--s));
}
.mv_pic13 {
  margin-top: calc(345 * var(--s));
  margin-left: calc(110 * var(--s));
  width: calc(220 * var(--s));
}
.mv_pic14 {
  margin-left: calc(-45 * var(--s));
  width: calc(450 * var(--s));
}
.mv_pic15 {
  margin-top: calc(380 * var(--s));
  margin-left: calc(-60 * var(--s));
  width: calc(445 * var(--s));
}
.mv_pic16 {
  margin-top: calc(45 * var(--s));
  margin-left: calc(-240 * var(--s));
  width: calc(380 * var(--s));
}
.mv_pic17 {
  margin-left: calc(275 * var(--s));
  width: calc(330 * var(--s));
}
.mv_pic18 {
  margin-top: calc(440 * var(--s));
  margin-left: calc(-95 * var(--s));
  width: calc(355 * var(--s));
}
.mv_pic182 {
  margin-left: calc(-80 * var(--s));
  width: calc(445 * var(--s));
}
.mv_pic19 {
  margin-top: calc(380 * var(--s));
  margin-left: calc(-135 * var(--s));
  width: calc(355 * var(--s));
}
.mv_pic20 {
  margin-left: calc(80 * var(--s));
  width: calc(380 * var(--s));
}
.mv_pic21 {
  margin-top: calc(440 * var(--s));
  margin-left: calc(-225 * var(--s));
  width: calc(355 * var(--s));
}
.mv_pic22 {
  margin-left: calc(100 * var(--s));
  width: calc(445 * var(--s));
}
.mv_pic222 {
  margin-top: calc(345 * var(--s));
  margin-left: calc(110 * var(--s));
  width: calc(220 * var(--s));
}
.mv_pic23 {
  margin-left: calc(-45 * var(--s));
  width: calc(445 * var(--s));
}
.mv_pic24 {
  margin-top: calc(285 * var(--s));
  margin-left: calc(-80 * var(--s));
  width: calc(595 * var(--s));
}
.mv_pic25 {
  margin-top: calc(40 * var(--s));
  margin-left: calc(-367 * var(--s));
  width: calc(375 * var(--s));
}
.mv_pic26 {
  margin-left: calc(275 * var(--s));
  width: calc(320 * var(--s));
}
.mv_pic27 {
  margin-top: calc(440 * var(--s));
  margin-left: calc(-85 * var(--s));
  width: calc(350 * var(--s));
}
.mv_pic28 {
  margin-left: calc(-80 * var(--s));
  width: calc(450 * var(--s));
}
.mv_pic29 {
  margin-top: calc(380 * var(--s));
  margin-left: calc(-140 * var(--s));
  width: calc(355 * var(--s));
}
.mv_pic30 {
  margin-left: calc(80 * var(--s));
  width: calc(385 * var(--s));
}
.mv_pic31 {
  margin-top: calc(440 * var(--s));
  margin-left: calc(-230 * var(--s));
  width: calc(355 * var(--s));
}
.mv_pic32 {
  margin-left: calc(105 * var(--s));
  width: calc(440 * var(--s));
}
.mv_pic33 {
  margin-top: calc(345 * var(--s));
  margin-left: calc(115 * var(--s));
  width: calc(220 * var(--s));
}
.mv_pic34 {
  margin-left: calc(-45 * var(--s));
  width: calc(445 * var(--s));
}

/* ==========================================
   2. Illustration Group
   ========================================== */
.mv-ticker--illust {
  height: 100%;
  z-index: 2;
}

.mv-ticker--illust,
.mv-ticker--illust img {
  mix-blend-mode: multiply;
}

.mv_ill01 {
  margin-top: calc(310 * var(--s));
  margin-left: calc(175 * var(--s));
  width: calc(430 * var(--s));
}
.mv_ill02 {
  margin-top: calc(32 * var(--s));
  margin-left: calc(1380 * var(--s));
  width: calc(335 * var(--s));
}
.mv_ill03 {
  margin-top: calc(30 * var(--s));
  margin-left: calc(925 * var(--s));
  width: calc(188 * var(--s));
}
.mv_ill04 {
  margin-top: calc(230 * var(--s));
  margin-left: calc(785 * var(--s));
  width: calc(205 * var(--s));
}
.mv_ill05 {
  margin-top: calc(105 * var(--s));
  margin-left: calc(1260 * var(--s));
  width: calc(415 * var(--s));
}
.mv_ill06 {
  margin-top: 0;
  margin-left: calc(947 * var(--s));
  width: calc(327 * var(--s));
}
.mv_ill07 {
  margin-top: calc(360 * var(--s));
  margin-left: calc(565 * var(--s));
  width: calc(440 * var(--s));
}
.mv_ill08 {
  margin-top: calc(8 * var(--s));
  margin-left: calc(1268 * var(--s));
  width: calc(405 * var(--s));
}
.mv_ill09 {
  margin-top: calc(10 * var(--s));
  margin-left: calc(825 * var(--s));
  width: calc(375 * var(--s));
}
.mv_ill10 {
  margin-top: calc(223 * var(--s));
  margin-left: calc(710 * var(--s));
  margin-right: calc(755 * var(--s));
  width: calc(84 * var(--s));
}

/* ==========================================
   3. Logo Group
   ========================================== */
.mv-ticker--logo {
  top: 41.5%;
  z-index: 3;
}

.mv-ticker--logo .mv-ticker__list {
  gap: calc(300 * var(--s));
}

.mv-ticker--logo img {
  height: calc(85 * var(--s));
  width: auto;
}

.mv-ticker--logo img:first-child {
  margin-left: 50vw;
  transform: translateX(-50%);
}
.mv_logo {
  opacity: 0;
  transition: opacity 1s ease;
}
.mv_logo.is-visible {
  opacity: 1;
}

/* ==========================================
   Animation Settings
   ========================================== */
.mv-ticker__inner.is-animated {
  animation-name: ticker-loop-continuous;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
  animation-duration: initial;
}

@keyframes ticker-loop-continuous {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-50%);
  }
}

/* ==========================================
   Responsive (Media Queries)
   ========================================== */
@media screen and (max-width: 768px) {
  .mv-motion-graphics {
    height: 70svh;
    /* background: aliceblue; */
  }
  .mv-ticker--logo {
    top: 38%;
  }
  .mv-ticker--logo .mv-ticker__list {
    gap: calc(150 * var(--s));
  }
}

@media screen and (max-width: 500px) {
  .mv-motion-graphics {
    height: 80svh;
    /* background: floralwhite; */
  }
  .mv-ticker--logo {
    top: 43.5%;
  }
  .mv-ticker--logo img {
    height: calc(60 * var(--s));
  }
}