@charset "UTF-8";
#footer {
  padding-top: 0;
}
#MO260226theme {
  --pc-width: 1400;
  --sp-width: 750;
  --pc-artboard-width: 490;
  --sp-artboard-width: 750;
  --formula: calc(var(--variable) * var(--ratio));
  --formula_pc: calc(var(--variable) * 1);
}

@media (min-width: 1401px) {
  #MO260226theme {
    --ratio: calc(var(--pc-artboard-width) / var(--sp-artboard-width));
    --variable: 1px;
  }
}

@media (min-width: 768px) and (max-width: 1400px) {
  #MO260226theme {
    --ratio: calc(var(--pc-artboard-width) / var(--sp-artboard-width));
    --variable: calc(100vw / var(--pc-width));
  }
}

@media (max-width: 767px) {
  #MO260226theme {
    --ratio: 1;
    --variable: calc(100vw / var(--sp-width));
  }
}

#MO260226theme img {
  display: block;
  width: 100%;
  height: auto;
}

#MO260226theme h2,
#MO260226theme h3,
#MO260226theme p,
#MO260226theme li {
  margin-block: calc((1em - 1lh) / 2);
}

#MO260226theme .invisible-heading {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
}

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

#MO260226theme {
  font-feature-settings: "palt";
  --black: #000000;
  --lime: #cae983;
  --sky-blue: #bbe0ef;
  --pink: #f075ae;
  --yellow: #faf6be;
  --font-credit: neue-haas-grotesk-display, sans-serif;
  display: flex;
  background-color: color-mix(
    in srgb,
    var(--current-bg, var(--lime)),
    white 60%
  );

  /* 色の切り替わりを滑らかにする */
  transition: background-color 0.8s ease;
}
#MO260226theme .lp-modal[data-current-color="lime"] {
  --current-bg: var(--lime);
}
#MO260226theme .lp-modal[data-current-color="sky-blue"] {
  --current-bg: var(--sky-blue);
}
#MO260226theme .lp-modal[data-current-color="pink"] {
  --current-bg: var(--pink);
}
#MO260226theme .lp-modal[data-current-color="yellow"] {
  --current-bg: var(--yellow);
}
#MO260226theme .splide__slide[class*="modal-look"] {
  display: flex;
  flex-direction: column;
  align-items: start;
  position: relative;
  gap: calc(40 * var(--formula));
  width: calc(500 / 1400 * 100vw);
}

#MO260226theme [class*="lp-img-"][class*="--modal"] {
  /* 1. 基本の横幅（vw基準） */
  width: calc(500 / 1400 * 100vw);

  /* 2. 【重要】高さ制限に連動した横幅の上限（vh基準） */
  /* これを入れることで、画面が横に長くても高さが溢れる前に横幅にブレーキがかかります */
  max-width: calc(500 * 100vh / 984);

  /* 3. 高さ制限 */
  max-height: calc(625 * 100vh / 984);

  /* 4. アスペクト比 */
  aspect-ratio: 500 / 625;
  margin: calc(81 * 100vh / 984) auto 0;
  height: auto;
  display: block;
  /* overflow: hidden は念のため残しておきますが、これで切り抜かれることはなくなります */
  overflow: hidden;
  background-color: #fff;
}

#MO260226theme [class*="lp-img-"][class*="--modal"] a {
  display: block; /* 必須：高さを親に伝える */
  width: 100%;
  height: 100%;
}
#MO260226theme [class*="__credit"] {
  font-family: var(--font-credit);
  color: var(--black);
  font-size: calc(14 * var(--formula_pc));
  line-height: 2;
  letter-spacing: 0.02em;
  text-align: left;
  font-weight: 500;
  width: calc(500 / 1400 * 100vw);
  max-width: calc(500 * 100vh / 984);
  margin: 0 auto 0;
}
#MO260226theme [class*="__credit"] li {
  display: flex;
  gap: calc(12 * var(--formula));
}

#MO260226theme [class*="lp-img-"] {
  z-index: 0;
  position: relative;
  background: #fff;
}

@keyframes footerColorShift {
  0% {
    background-color: var(--lime); /* 開始時の色（例：薄いグレー） */
  }
  25% {
    background-color: var(--sky-blue); /* 変化する色1（例：淡いブルー） */
  }
  50% {
    background-color: var(--pink); /* 変化する色2（例：淡いピンク） */
  }
  75% {
    background-color: var(
      --yellow
    ); /* 最後に開始色に戻すことでループを滑らかに */
  }
  100% {
    background-color: var(
      --lime
    ); /* 最後に開始色に戻すことでループを滑らかに */
  }
}
#MO260226theme .lp-mv-area {
  /* width: calc(540 * (100vw / 1400)); */
  flex: 1;
  display: flex;
  justify-content: center;
  position: sticky;
  height: 100vh;
  top: 0;
}
#MO260226theme .lp-mv-video {
  position: relative;
  width: calc(540 * (100vw / 1400));
  overflow: hidden;
}

#MO260226theme #js-mv-video {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

/* サウンドボタン */
#MO260226theme .video-sound-btn {
  position: absolute;
  bottom: calc(20 * var(--formula)); /* 位置は調整してください */
  right: calc(20 * var(--formula));
  width: calc(45 * var(--formula));
  height: calc(45 * var(--formula));
  background: 0; /* 背景を少し透過させるのがおすすめ */
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10;
  padding: 0;
}

/* 初期状態：ONアイコンを隠す */
#MO260226theme .video-sound-btn[data-state="off"] .icon-on {
  display: none;
}
#MO260226theme .video-sound-btn[data-state="off"] .icon-off {
  display: block;
}

/* 音声ON状態：OFFアイコンを隠す */
#MO260226theme .video-sound-btn[data-state="on"] .icon-on {
  display: block;
}
#MO260226theme .video-sound-btn[data-state="on"] .icon-off {
  display: none;
}
#MO260226theme .lp-main-area {
  display: flex;
  flex-direction: column;
  /* gap: 20px; */
  margin: calc(20 * var(--formula)) 0 0 0;
  flex: 1;
  display: flex;
  align-items: center;
}
#MO260226theme .lp-main-area > * {
  width: calc(490 * var(--formula_pc));
}

#MO260226theme .lp-main-area > *:not(:last-child):not(:nth-last-child(2)) {
  margin-bottom: calc(20 * var(--formula));
}

#MO260226theme [id^="look"] .splide__pagination {
  top: calc(24 * var(--formula)); /* 位置は適宜調整してください */
  padding: 0;
  opacity: 0;
  bottom: unset;
  right: unset;
  left: calc(17 * var(--formula));
  z-index: 1;
  pointer-events: none; /* 透明な間はクリックできないようにする */
  transition: opacity 0.4s ease-in 0.4s; /* 0.4s待ってから0.4sかけて表示 */
}

#MO260226theme .splide:has(.is-revealed) .splide__pagination {
  opacity: 1;
  pointer-events: auto;
}

/* 通常時（非アクティブ）の長方形 */
#MO260226theme [id^="look"] .splide__pagination__page {
  width: calc(48 * var(--formula));
  height: calc(2 * var(--formula));
  background: var(--black);
  opacity: 0.4; /* 非アクティブ時は透過 */
  border-radius: 0;
  margin: 0 calc(4 * var(--formula));
  padding: 0;
  border: none;
  position: relative;
  overflow: hidden;
  transition: opacity 0.3s;
}

/* アクティブ時のベース */
#MO260226theme [id^="look"] .splide__pagination__page.is-active {
  opacity: 1;
  background: rgba(0, 0, 0, 0.1); /* ゲージが動く背景を薄く敷く */
  transform: scale(1);
}

/* ゲージ（動く部分）の実装 */
#MO260226theme [id^="look"] .splide__pagination__page.is-active::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 0;
  background: var(--black);
  /* 3秒かけてゲージを伸ばす */
  animation: splide-gauge 2s linear forwards;
}

/* ゲージのアニメーション定義 */
@keyframes splide-gauge {
  0% {
    width: 0;
  }
  100% {
    width: 100%;
  }
}
#MO260226theme .look01 {
}

#MO260226theme .js-modal-open {
  padding: 0;
  position: relative;
  cursor: pointer;
}

#MO260226theme .modal-open-01 {
  position: absolute;
  width: calc(36 * var(--formula));
  bottom: calc(16 * var(--formula));
  right: calc(16 * var(--formula));
  z-index: 5;
  opacity: 0;
  transition: opacity 0.3s linear 0.4s;
}

#MO260226theme .is-revealed .modal-open-01 {
  opacity: 1;
}
#MO260226theme .lp-img-01 {
  width: calc(750 * var(--formula));
}

#MO260226theme .lp-img-02 {
  width: calc(750 * var(--formula));
}

#MO260226theme .lp-img-03 {
  width: calc(750 * var(--formula));
}

#MO260226theme .look04 {
  margin-top: calc(-1 * var(--formula));
}

#MO260226theme .lp-img-04 {
  width: calc(750 * var(--formula));
}

#MO260226theme .look05 {
  margin-top: calc(-1 * var(--formula));
}

#MO260226theme .lp-img-05 {
  width: calc(750 * var(--formula));
}

#MO260226theme #lp-modal .splide__track {
  overflow: hidden;
}

#MO260226theme .lp-img-06 {
  width: calc(750 * var(--formula));
}

#MO260226theme .lp-img-07 {
  width: calc(750 * var(--formula));
}

#MO260226theme .look08 {
  margin-top: calc(-2 * var(--formula));
}

#MO260226theme .lp-img-08 {
  width: calc(750 * var(--formula));
}

#MO260226theme .lp-img-09 {
  width: calc(750 * var(--formula));
}

#MO260226theme .look10 {
  margin-top: calc(-1 * var(--formula));
}

#MO260226theme .lp-img-10 {
  width: calc(750 * var(--formula));
}

#MO260226theme .lp-img-11 {
  width: calc(750 * var(--formula));
}

#MO260226theme .look12-13 {
  margin-top: calc(-1 * var(--formula));
}

#MO260226theme .lp-img-12 {
  width: calc(750 * var(--formula));
}

#MO260226theme .lp-img-13 {
  width: calc(750 * var(--formula));
}

#MO260226theme .look14 {
  margin-top: calc(-3 * var(--formula));
}

#MO260226theme .lp-img-14 {
  width: calc(750 * var(--formula));
}

#MO260226theme .lp-img-15 {
  width: calc(750 * var(--formula));
}

#MO260226theme .lp-img-16 {
  width: calc(750 * var(--formula));
}

#MO260226theme .lp-img-17 {
  width: calc(750 * var(--formula));
}

#MO260226theme .look18 {
  margin-top: calc(-3 * var(--formula));
}

#MO260226theme .lp-img-18 {
  width: calc(750 * var(--formula));
}

#MO260226theme .lp-img-19 {
  width: calc(750 * var(--formula));
}

#MO260226theme .lp-img-20 {
  width: calc(750 * var(--formula));
}

#MO260226theme .look21 {
  margin-top: calc(-1 * var(--formula));
}

#MO260226theme .lp-img-21 {
  width: calc(750 * var(--formula));
}

#MO260226theme .lp-footer {
  animation: footerColorShift 12s infinite ease-in-out;
  padding: 0 0 calc(295 * var(--formula)) 0;
}

#MO260226theme .lp-footer-txt-01 {
  width: calc(692 * var(--formula));
  margin: calc(49 * var(--formula)) 0 0 calc(30 * var(--formula));
}

#MO260226theme .lp-footer-txt-02 {
  width: calc(77 * var(--formula));
  margin: calc(63 * var(--formula)) 0 0 calc(30 * var(--formula));
}

#MO260226theme .lp-footer__staff-credit {
  font-family: var(--font-credit);
  color: var(--black);
  font-size: calc(23 * var(--formula));
  line-height: 1;
  letter-spacing: 0.05em;
  text-align: left;
  font-weight: 500;
  display: flex;
  flex-direction: column;
  margin: calc(25 * var(--formula)) 0 0 calc(29 * var(--formula));
  gap: calc(18 * var(--formula));
}
#MO260226theme [class^="lp-img-"] {
  position: relative;
  overflow: hidden;
  background-color: transparent;
}
#MO260226theme .js-modal-open [class^="lp-img-"] img {
  height: auto;
  transform: scale(0.9);
  transition: transform 0.5s cubic-bezier(0.09, 0.25, 0.38, 0.99);
  transform-origin: center;
}

#MO260226theme .reveal-curtain {
  position: absolute;
  top: 0;
  left: 0;
  width: 100.5%; /* 100%だと稀に1pxの隙間が出るので、極わずかに大きく設定 */
  height: 100.5%;
  z-index: 2;
  pointer-events: none;
  z-index: 10;
  transform: scale(0.9); /* 画像と同じサイズで待機 */
  opacity: 1;

  transition:
    transform 0.5s cubic-bezier(0.09, 0.25, 0.38, 0.99),
    opacity 0.2s linear 0.3s;

  transform-origin: center;
}

/* --- 4. アニメーション発火時（.is-revealed） --- */

#MO260226theme .js-modal-open.is-revealed [class^="lp-img-"] img {
  transform: scale(1);
}

/* カーテンを 1.0 に戻して消す */
#MO260226theme .is-revealed .reveal-curtain {
  transform: scale(1);
  opacity: 0;
}

#MO260226theme .lp-modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  pointer-events: none; /* これで下の要素がクリック可能になります */
  transition:
    opacity 0.3s,
    visibility 0.3s;
}
#MO260226theme .lp-modal.is-active {
  opacity: 1;
  visibility: visible;
  pointer-events: auto; /* モーダル内の操作を有効化 */
}
#MO260226theme .modal__overlay {
  position: absolute;
  width: 100%;
  height: 100%;
  background-color: var(--current-bg, var(--lime));
  transition: background-color 0.4s ease; /* 色の切り替わりを滑らかに */
}

#MO260226theme .modal__content {
  position: relative;
  width: calc(500 * 100vh / 984);
  overflow: visible;
}

#MO260226theme .modal__close {
  width: calc(30 * var(--formula_pc));
  height: calc(30 * var(--formula_pc));
  position: absolute;
  top: calc(18 * var(--formula));
  right: calc(-107 * var(--formula));
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  z-index: 5;
}

#MO260226theme #modal-slider .splide__arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: calc(16 * var(--formula_pc));
  height: calc(43 * var(--formula_pc));
  background-repeat: no-repeat;
  background-size: contain;
  background-color: transparent;
  border: none;
  opacity: 1;
  pointer-events: auto;
}

#MO260226theme #modal-slider .splide__arrow--next {
  right: calc(-75 * var(--formula_pc));
  background-image: url(../img/modal-next-01.svg);
}
#MO260226theme #modal-slider .splide__arrow--prev {
  left: calc(-75 * var(--formula_pc));
  background-image: url(../img/modal-prev-01.svg);
}
#MO260226theme #modal-slider .splide__arrow svg {
  display: none;
}

@media (max-width: 767px) {
  #MO260226theme {
    flex-direction: column;
    background: #ffffff;
  }

  #MO260226theme .lp-mv-video {
    width: 100%;
  }
  #MO260226theme .lp-mv-area {
    position: relative;
    height: auto;
    top: 0;
  }
  #MO260226theme .lp-main-area > * {
    width: 100%;
  }
  #MO260226theme [class*="lp-img-"][class*="--modal"] {
    width: calc(700 / 750 * 100vw);
    /* ★重要：SP用のブレーキに書き換える */
    max-width: calc(700 * 100vh / 1333);
    max-height: calc(875 * 100vh / 1333);

    aspect-ratio: 700 / 875;
    margin: calc(-5 * var(--formula)) auto 0; /* 中央寄せ */
    height: auto;
  }
  #MO260226theme #modal-slider .splide__arrows {
    position: absolute;
    top: calc(82 * 100vh / 984); /* 画像のmargin-topと合わせる */
    left: 50%;
    transform: translateX(-50%);
    width: calc(500 / 1400 * 100vw);
    max-width: calc(500 * 100vh / 984);
    aspect-ratio: 500 / 625;
    pointer-events: none;
    z-index: 10;
  }
  #MO260226theme [class*="__credit"] {
    /* width: calc(700 * 100vh / 1333); */
    font-size: calc(24 * var(--formula));
    margin: 0;
    max-width: unset;
    width: unset;
  }
  #MO260226theme .modal__content {
    position: static;
    width: calc(700 / 750 * 100vw);
    max-width: calc(0.8 * (875 / 1333 * 100vh));
  }
  #MO260226theme .lp-main-area {
    width: 100%;
  }
  #MO260226theme #js-mv-video {
    width: 100%;
    height: auto;
    display: block;
  }
  #MO260226theme #modal-slider .splide__arrows {
    top: 0; /* SPの画像marginに合わせて調整 */
    width: calc(700 / 750 * 100vw);
    max-width: calc(700 * 100vh / 1333);
    aspect-ratio: 700 / 875;
  }
  #MO260226theme #modal-slider .splide__arrow {
    width: calc(18 * var(--formula)); /* SP用変数に修正 */
    height: calc(49 * var(--formula));
  }
  #MO260226theme .splide__slide[class*="modal-look"] {
    gap: calc(40 * var(--formula));
  }

  #MO260226theme .modal__close {
    width: calc(40 * var(--formula_pc));
    height: calc(40 * var(--formula_pc));
    position: absolute;
    top: calc(30 * var(--formula));
    right: calc(25 * var(--formula));
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
    z-index: 5;
  }
  #MO260226theme #modal-slider .splide__arrow--next {
    right: calc(14 * var(--formula_pc));
  }
  #MO260226theme #modal-slider .splide__arrow--prev {
    left: calc(14 * var(--formula_pc));
  }
  #footer {
    padding-top: 0;
    margin-top: calc(-110 * (100vw / 750));
    position: relative;
  }
}