@charset "UTF-8";

/* --- デフォルトCSS設定 --- */

#Foot .footer {

  padding-top: 0px;

}

#Foot .footer .toTop {

  position: relative;

  z-index: 50;

}

#MO260423SS2 {

  --pc-width: 1200;

  --sp-width: 750;

  --pc-artboard-width: 394;

  --sp-artboard-width: 750;

  --formula: calc(var(--variable) * var(--ratio));

  --formula_pc: calc(var(--variable) * 1);

}

/* 

@media (min-width: 1201px) {

  #MO260423SS2 {

    --ratio: calc(var(--pc-artboard-width) / var(--sp-artboard-width));

    --variable: 1px;

  }

} */



@media (min-width: 768px) {

  #MO260423SS2 {

    --ratio: calc(var(--pc-artboard-width) / var(--sp-artboard-width));

    --variable: calc(100vw / var(--pc-width));

  }

}



@media (max-width: 767px) {

  #MO260423SS2 {

    --ratio: 1;

    --variable: calc(100vw / var(--sp-width));

  }

}



#MO260423SS2 img,

#MO260423SS2 video {

  display: block;

  width: 100%;

  height: auto;

}



#MO260423SS2 h2,

#MO260423SS2 h3,

#MO260423SS2 p,

#MO260423SS2 li {

  margin-block: calc((1em - 1lh) / 2);

}

#MO260423SS2 a {

  display: block;

}

#MO260423SS2 .invisible-heading {

  position: absolute;

  width: 1px;

  height: 1px;

  margin: -1px;

  padding: 0;

  overflow: hidden;

  clip: rect(0, 0, 0, 0);

  border: 0;

}



/* --- 抽出されたCSS（上から順） --- */



#MO260423SS2 {

  position: relative;

  min-width: 100%;

  font-feature-settings: "palt";

  display: flex;

  flex-direction: column;

  --font-light: 300;

  --font-credit: rival-sans, sans-serif;

  --color-white: #ffffff;

  --color-sec1: #c60a22;

  --color-sec2: #34aacb;

  --color-sec3: #c8c79b;

  --color-sec3b: #453939;

  --color-sec4: #282c4b;

  --color-sec6: #cfd1d1;

  --color-sec7: #262529;

  background: var(--color-sec1);

}

#MO260423SS2 [class*="--absolute"] {

  position: relative;

}

#MO260423SS2 [class*="--vertical"] {

  display: flex;

  flex-direction: column;

  align-items: center;

  position: relative;

}

#MO260423SS2 [class*="__credit"] {

  display: flex;

  flex-direction: column;

  align-items: start;

  gap: calc(7 * var(--formula));

}

#MO260423SS2 [class*="__credit"] li {

  display: flex;

  font-family: var(--font-credit);

  color: var(--color-white);

  font-size: calc(22 * var(--formula));

  line-height: calc(29.45 / 22);

  letter-spacing: 0;

  text-align: left;

  font-weight: var(--font-light);

  gap: calc(16 * var(--formula));

}



#MO260423SS2 [class*="__credit-cont"] {

  position: absolute;

  top: calc(1098 * var(--formula));

  right: 0;

  transform: translateY(-50%);

  z-index: 10;

  display: grid;

  place-items: center end;

}

#MO260423SS2 [class*="__credit-cont"] .credit-trigger {

  width: calc(100 * var(--formula));

  height: calc(190 * var(--formula));

  cursor: pointer;

  border: none;

  background-color: transparent;

  background-repeat: no-repeat;

  background-size: contain;

  background-position: center;

  z-index: 1;

  position: relative;

  grid-area: 1 / 1;

}



#MO260423SS2 .credit-body {

  width: calc(750 * var(--formula));

  height: calc(190 * var(--formula));

  display: flex;

  flex-direction: column;

  z-index: 2;

  pointer-events: none;

  grid-area: 1 / 1;

  transition: clip-path 0.5s ease;

  clip-path: inset(0 0 0 100%);

  padding: calc(22 * var(--formula)) 0 calc(15 * var(--formula))

    calc(20 * var(--formula));

  justify-content: space-between;

  box-sizing: border-box;

}

#MO260423SS2 [class*="__credit-cont"].is-open .credit-body {

  clip-path: inset(0 0 0 0);

  pointer-events: auto;

}

#MO260423SS2 [class*="-img-"] {

  background: var(--color-white);

}



#MO260423SS2 .lp-pc-video {

  width: 100%;

  height: 100vh;

  background-color: var(--color-white);

  position: relative;

  overflow: hidden;

}

#MO260423SS2 .lp-pc-video a {

  width: 100%;

  height: 100%;

}

#MO260423SS2 .lp-sp-video a video,

#MO260423SS2 .lp-pc-video a video {

  width: calc(100% + 4px);

  height: calc(100% + 4px);

  position: absolute;

  top: -1px;

  left: -1px;

  object-fit: cover;

  background-color: transparent;

  clip-path: inset(0 2px 0 0);

  filter: drop-shadow(0px 0px rgba(0, 0, 0, 0));

  outline: none;

  border: none;

}



#MO260423SS2 .contents-cont {

  position: relative;

  display: flex;

}

#MO260423SS2 .lp-left {

  width: calc(684 * var(--formula_pc));

}

#MO260423SS2 .lp-left,

#MO260423SS2 .lp-right {

  position: sticky;

  height: 100vh;

  top: 0;

}



#MO260423SS2 .lp-main {

  width: calc(394 * var(--formula_pc));

  overflow-x: clip;

}

#MO260423SS2 .lp-pc-txt-01 {

  width: calc(381 * var(--formula_pc));

  top: calc(62 * var(--formula_pc));

  position: absolute;

  left: calc(50 * var(--formula_pc));

}



#MO260423SS2 .lp-pc-txt-02 {

  width: calc(274 * var(--formula_pc));

  position: absolute;

  bottom: calc(68 * var(--formula_pc));

  left: calc(52 * var(--formula_pc));

}



#MO260423SS2 .sec-set {

  display: flex;

  flex-direction: column;

  align-items: center;

  position: sticky;

  width: 100%;

}



#MO260423SS2 .lp-sp-video {

  width: calc(750 * var(--formula));

  height: calc(1330 * var(--formula));

  position: relative;

  overflow: hidden;

  background-color: var(--color-white);

}



#MO260423SS2 #js-video-sound {

  position: absolute;

  z-index: 5;

  bottom: 0;

  height: calc(40 * var(--formula));

  width: calc(40 * var(--formula));

  right: calc(12 * var(--formula));

  bottom: calc(8 * var(--formula));

  padding: calc(10 * var(--formula));

  box-sizing: content-box;

  cursor: pointer;

}



#MO260423SS2 .video-sound-btn[data-state="off"] .icon-on {

  display: none;

}

#MO260423SS2 .video-sound-btn[data-state="off"] .icon-off {

  display: block;

}



/* 音声ON状態：OFFアイコンを隠す */

#MO260423SS2 .video-sound-btn[data-state="on"] .icon-on {

  display: block;

}

#MO260423SS2 .video-sound-btn[data-state="on"] .icon-off {

  display: none;

}



#MO260423SS2 .teaser-cont--absolute h2 {

  position: absolute;

  z-index: 5;

  top: calc(41 * var(--formula));

  left: calc(33 * var(--formula));

}

#MO260423SS2 .teaser-txt-01 {

  width: calc(529 * var(--formula));

}

#MO260423SS2 .teaser-cont--absolute h3 {

  position: absolute;

  z-index: 5;

  bottom: calc(42 * var(--formula));

  right: calc(35 * var(--formula));

}

#MO260423SS2 .teaser-txt-02 {

  width: calc(144 * var(--formula));

}



#MO260423SS2 .teaser-bg-01 {

  width: calc(750 * var(--formula));

  z-index: 1;

  position: relative;

}



#MO260423SS2 .sec1 {

  background: var(--color-sec1);

  top: calc(100vh - (3695 * var(--formula)));

  z-index: 1;

}



#MO260423SS2 .splide {

  width: calc(750 * var(--formula));

  z-index: 1;

  background: var(--color-white);

}



#MO260423SS2 .splide__slide {

  width: calc(750 * var(--formula));

}



#MO260423SS2 .sec1__credit-cont .credit-body {

  background: var(--color-sec1);

}

#MO260423SS2 .sec1__credit-cont .credit-trigger {

  background-image: url(../img/sec1-obj-01.svg);

}



#MO260423SS2 .sec1-img-03 {

  width: calc(750 * var(--formula));

}



#MO260423SS2 .sec1__credit3 {

  margin: calc(544 * var(--formula)) 0 calc(33 * var(--formula)) 0;

}



#MO260423SS2 .sec1-img-04 {

  width: calc(750 * var(--formula));

}



#MO260423SS2 .sec2 {

  background: var(--color-sec2);

  top: calc(100vh - (3692 * var(--formula)));

  z-index: 2;

}



#MO260423SS2 .sec2__credit-cont .credit-body {

  background: var(--color-sec2);

  height: calc(220 * var(--formula));

  padding: calc(22 * var(--formula)) 0 calc(16 * var(--formula))

    calc(20 * var(--formula));

}

#MO260423SS2 .sec2__credit-cont .credit-trigger {

  background-image: url(../img/sec2-obj-01.svg);

}



#MO260423SS2 .sec2-img-03 {

  width: calc(750 * var(--formula));

}



#MO260423SS2 .sec2__credit3 {

  margin: calc(544 * var(--formula)) 0 calc(31 * var(--formula)) 0;

}



#MO260423SS2 .sec2-img-04 {

  width: calc(750 * var(--formula));

}



#MO260423SS2 .sec3 {

  background: var(--color-sec3);

  top: calc(100vh - (3692 * var(--formula)));

  z-index: 3;

}



#MO260423SS2 .sec3-img-01 {

  width: calc(750 * var(--formula));

  z-index: 1;

  position: relative;

}



#MO260423SS2 .sec3__credit-cont .credit-trigger {

  background-image: url(../img/sec3-obj-01.svg);

}

#MO260423SS2 .sec3__credit-cont .credit-body {

  background: var(--color-sec3b);

  padding: calc(22 * var(--formula)) 0 calc(18 * var(--formula))

    calc(20 * var(--formula));

}

#MO260423SS2 .sec3__credit-cont::backdrop {

  background-image: url(../img/sec3-obj-01.svg);

}



#MO260423SS2 .sec3__credit3 {

  margin: calc(548 * var(--formula)) 0 calc(26 * var(--formula))

    calc(19 * var(--formula));

}



#MO260423SS2 .sec3-img-04 {

  width: calc(750 * var(--formula));

}



#MO260423SS2 .sec4 {

  background: var(--color-sec4);

  top: calc(100vh - (3698 * var(--formula)));

  z-index: 4;

}



#MO260423SS2 .sec4__credit-cont .credit-body {

  background: var(--color-sec4);

  height: calc(260 * var(--formula));

  padding: calc(23 * var(--formula)) 0 calc(20 * var(--formula))

    calc(20 * var(--formula));

}

#MO260423SS2 .sec4__credit-cont .credit-trigger {

  background-image: url(../img/sec4-obj-01.svg);

}



#MO260423SS2 .sec4-img-03 {

  width: calc(750 * var(--formula));

}



#MO260423SS2 .sec4__credit3 {

  margin: calc(551 * var(--formula)) 0 calc(29 * var(--formula)) 0;

}



#MO260423SS2 .sec4-img-04 {

  width: calc(750 * var(--formula));

}



#MO260423SS2 .sec5 {

  background: var(--color-sec1);

  top: calc(100vh - (3695 * var(--formula)));

  z-index: 5;

}



#MO260423SS2 .sec5-img-03 {

  width: calc(750 * var(--formula));

}



#MO260423SS2 .sec5__credit-cont .credit-body {

  background: var(--color-sec1);

}

#MO260423SS2 .sec5__credit-cont .credit-trigger {

  background-image: url(../img/sec5-obj-01.svg);

}



#MO260423SS2 .sec5__credit3 {

  margin: calc(542 * var(--formula)) 0 calc(35 * var(--formula)) 0;

}



#MO260423SS2 .sec5-img-04 {

  width: calc(750 * var(--formula));

}



#MO260423SS2 .sec6 {

  background: var(--color-sec6);

  top: calc(100vh - (3696 * var(--formula)));

  z-index: 6;

}



#MO260423SS2 .sec6-img-01 {

  width: calc(750 * var(--formula));

}



#MO260423SS2 .sec6-img-02 {

  width: calc(750 * var(--formula));

}



#MO260423SS2 .sec6__credit-cont .credit-body {

  background: var(--color-sec2);

  height: calc(220 * var(--formula));

  padding: calc(19 * var(--formula)) 0 calc(19 * var(--formula))

    calc(22 * var(--formula));

}

#MO260423SS2 .sec6__credit-cont .credit-trigger {

  background-image: url(../img/sec6-obj-01.svg);

}



#MO260423SS2 .sec6__credit3 {

  margin: calc(554 * var(--formula)) 0 calc(24 * var(--formula))

    calc(5 * var(--formula));

}



#MO260423SS2 .sec6-img-03 {

  width: calc(750 * var(--formula));

}



#MO260423SS2 .sec7 {

  background: var(--color-sec7);

  z-index: 7;

  position: relative;

}



#MO260423SS2 .sec7-img-01 {

  width: calc(750 * var(--formula));

}



#MO260423SS2 .sec7-img-02 {

  width: calc(750 * var(--formula));

}



#MO260423SS2 .sec7__credit-cont .credit-body {

  background: var(--color-sec7);

  padding: calc(22 * var(--formula)) 0 calc(17 * var(--formula))

    calc(20 * var(--formula));

}

#MO260423SS2 .sec7__credit-cont .credit-trigger {

  background-image: url(../img/sec7-obj-01.svg);

}



#MO260423SS2 .sec7__staff-credit {

  margin: calc(329 * var(--formula)) 0 calc(42 * var(--formula))

    calc(10 * var(--formula));

  font-family: var(--font-credit);

  color: var(--color-white);

  font-size: calc(30.6 * var(--formula));

  line-height: calc(31.33 / 30.62);

  letter-spacing: 0;

  text-align: center;

  font-weight: var(--font-light);

}



#MO260423SS2 .sec7-img-03 {

  width: calc(753 * var(--formula));

  position: relative;

  z-index: 1;

}



#MO260423SS2 .sec7-txt-01 {

  width: calc(253 * var(--formula));

  position: absolute;

  z-index: 5;

  bottom: calc(172 * var(--formula));

  left: 51%;

  transform: translateX(-50%);

}



#MO260423SS2 .lp-right {

  flex: 1;

}



#MO260423SS2 .progress-cont {

  width: calc(9 * var(--formula_pc));

  height: calc(472 * var(--formula_pc));

  position: absolute;

  background-image: url(../img/lp-pc-obj-01.svg);

  top: calc(107 * var(--formula_pc));

  right: calc(53 * var(--formula_pc));

  background-size: cover;

}



#MO260423SS2 .progress-dot {

  background: var(--color-white);

  width: calc(8 * var(--formula_pc));

  height: calc(8 * var(--formula_pc));

  position: absolute;

  border-radius: 50%;

  left: 53%;

  transform: translate(-50%, -50%);

}

@media (max-width: 767px) {

  #MO260423SS2 .lp-pc-video {

    display: none;

  }



  #MO260423SS2 .lp-left,

  #MO260423SS2 .lp-right {

    display: none;

  }



  #MO260423SS2 .lp-main {

    width: 100%;

    margin: 0 0 calc(0 * var(--formula)) 0;

  }

  #Foot .footer {

    padding-top: 0;

    margin-top: calc(-110 * (100vw / 750));

  }

}