@charset "UTF-8";

:root {
  --scene-width: 1920px;
  --scene-height: 3438px;
  --content-left: 460px;
  --content-top: 430px;
  --content-width: 1000px;
  --content-height: 2894px;
  --content-scale: 1;
  --scroll-gap: 22px;
  --scroll-duration: 40s;
  --scroll-step: 2016px;
}

html, body {
  overflow-x: hidden;
}

body {
  background: #fff;
}

.bt,
.navimg{
  display:block;
  line-height:0;
}

.bt img,
.navimg img{
  pointer-events:none;
}
.saga-page {
  overflow: hidden;
}

.saga-lp {
  width: 100%;
  overflow: hidden;
  position: relative;
}

.scene {
  width: var(--scene-width);
  height: var(--scene-height);
  margin: 0;
  position: relative;
  left: 50%;
  transform: translateX(-50%);
  overflow: hidden;
}

.bg,
.bg-overlay,
.title-image,
.scroll-copy,
.asset,
.link {
  position: absolute;
  display: block;
}

.bg0 {
  inset: 0;
  width: 1920px;
  height: 3438px;
  z-index: 1;
}

.scroll-row {
  position: absolute;
  top: 0;
  left: 0;
  width: 1920px;
  height: 473px;
  overflow: hidden;
  z-index: 8;
}

.scroll-track {
  position: absolute;
  top: 0;
  left: 0;
  display: flex;
  align-items: flex-start;
  gap: var(--scroll-gap);
  width: max-content;
  animation: sagaScroll var(--scroll-duration) linear infinite;
  will-change: transform;
}

.scroll-track img {
  width: 314px;
  height: 473px;
  flex: 0 0 auto;
  display: block;
}

.scroll-copy {
  top: 0;
  left: 1182px;
  width: 123px;
  height: 473px;
  z-index: 12;
  pointer-events: none;
}

.title-image {
  top: 310px;
  left: 579px;
  width: 757px;
  height: 304px;
  z-index: 14;
}

.content-frame {
  position: absolute;
  top: var(--content-top);
  left: var(--content-left);
  width: calc(var(--content-width) * var(--content-scale));
  height: calc(var(--content-height) * var(--content-scale));
  z-index: 10;
  margin-top: 62px;
}

.content-shell {
  position: absolute;
  top: 0;
  left: 0;
  width: 1000px;
  height: 2894px;
  transform: scale(var(--content-scale));
  transform-origin: top left;
}

.asset,
.link {
  display: block;
}
.asset img,
.link img {
  display: block;
  width: 100%;
  height: 100%;
}

.bg2 {
  left: 0;
  top: 0;
  width: 1000px;
  height: 2465px;
  z-index: 1;
}

.inner {
  position: relative;
  width: 1000px;
  z-index: 4;
}

.inner-top {
  height: 572px;
  margin-top: 93px;
}
.inner-play {
  height: 465px;
  margin-top: 0px;
}
.inner-view {
  height: 465px;
  margin-top: 3px;
}
.inner-food {
  height: 392px;
  margin-top: -23px;
}
.inner-hot {
  height: 392px;
  margin-top: 68px;
}
.inner-bottom {
  height: 411px;
  margin-top: 16px;
}

.con1, .con2, .con3, .con4, .con5 {
  left: 0;
  top: 0;
  width: 1000px;
}

.con3 {
  margin-top: -22px;
}

.con6 {
  left: 265px;
  top: -20px;
  width: 469px;
  height: 79px;
  z-index: 5;
}
.con7 {
  left: 167px;
  top: 217px;
  width: 667px;
  height: 17px;
  z-index: 5;
}
.con8 {
  left: 146px;
  top: 441px;
  width: 707px;
  height: 16px;
  z-index: 5;
}

.link,
.link-hit {
  z-index: 6;
}
.link img {
  width: 100%;
  height: 100%;
  display: block;
}

/* top block */
.top-bt1 { left: 73px; bottom: 110px; width: 416px; height: 50px; }
.top-bt2 { left: 503px; bottom: 110px; width: 416px; height: 50px; }
.top-bt3 { left: 73px; bottom: 55px; width: 416px; height: 50px; }
.top-bt4 { left: 503px; bottom: 55px; width: 416px; height: 50px; }

/* play block */
.bt5 { left: 116px; top: 129px; width: 433px; height: 324px; }
.bt6 { left: 681px; top: 57px; width: 290px; height: 209px; }
.bt7 { left: 558px; top: 196px; width: 322px; height: 252px; }

/* view block */
.bt8 { left: 243px; top: 134px; width: 286px; height: 289px; }
.bt9 { left: 25px; top: 46px; width: 345px; height: 289px; }
.bt10 { left: 537px; top: 94px; width: 355px; height: 297px; }

/* hot block */
.bt11 { left: 303px; top: -73px; width: 413px; height: 48px; }
.bt12 { left: 29px; top: 34px; width: 201px; height: 293px; }
.bt13 { left: 242px; top: 56px; width: 201px; height: 293px; }
.bt14 { left: 455px; top: 76px; width: 201px; height: 293px; }
.bt15 { left: 667px; top: 94px; width: 201px; height: 293px; }

/* bottom block */
.bt1 { left: 73px; top: 100px; width: 416px; height: 50px; }
.bt2 { left: 503px; top: 100px; width: 416px; height: 50px; }
.bt3 { left: 73px; top: 153px; width: 416px; height: 50px; }
.bt4 { left: 503px; top: 153px; width: 416px; height: 50px; }
.bt16 { left: 73px; top: 250px; width: 421px; height: 78px; }
.bt17 { left: 501px; top: 250px; width: 421px; height: 78px; }
.bt18 { left: 289px; top: 333px; width: 421px; height: 78px; }

.bg-overlay {
  z-index: 18;
  pointer-events: none;
}
.bg3 { left: 98px; top: 646px; width: 425px; height: 263px; }
.bg4 { left: 1456px; top: 945px; width: 301px; height: 187px; }
.bg5 { left: 202px; top: 1592px; width: 308px; height: 170px; }
.bg6 { left: 1404px; top: 2052px; width: 268px; height: 193px; }

.link:hover {
  opacity: 0.7;
}

@keyframes sagaScroll {
  from { transform: translate3d(0, 0, 0); }
  to { transform: translate3d(calc(var(--scroll-step) * -1), 0, 0); }
}


@media (max-width: 1000px) {
  :root {
    --scene-height: 3500px;
  }

  .title-image {
    width: 64vw;
    height: auto;
    left: 50%;
    transform: translateX(-50%);
    top: 17vw;
  }

  .scene {
    width: 100vw;
    max-width: 100vw;
    height: calc(24.6354vw + 277.824vw + 15vw);
    min-height: calc(24.6354vw + 277.824vw + 12vw);
    left: 0;
    transform: none;
    background: url("../images/bg0sp.png") top center / 100% auto no-repeat;
    overflow: hidden;
    clip-path: inset(0);
  }

  .bg0,
  .bg-overlay {
    display: none;
  }

  .scroll-row {
    width: 100vw;
    height: 24.6354vw;
  }

  .scroll-track {
    gap: 1.1458vw;
    animation: sagaScrollSp var(--scroll-duration) linear infinite;
  }

  .scroll-track img {
    width: 16.3542vw;
    height: 24.6354vw;
  }

  .scroll-copy {
    left: 67.5625vw;
    width: 6.4063vw;
    height: 24.6354vw;
  }

  .content-frame {
    top: 24.6354vw;
    left: 50%;
    transform: translateX(-50%);
    width: 96vw;
    height: 277.824vw;
    overflow: hidden;
    clip-path: inset(0);
  }

  .content-shell {
    width: 1000px;
    height: 2894px;
    transform: scale(calc(96vw / 1000px)); 
    transform-origin: top left;
  }

  .content-shell img {
    max-inline-size: none;
    max-block-size: none;
  }

}  /* ← @media の閉じ括弧 */

@keyframes sagaScrollSp {
  from { transform: translate3d(0, 0, 0); }
  to { transform: translate3d(-105vw, 0, 0); }
}