@charset "UTF-8";
html {
  width: 100%;
}

#header .ticker {
  display: none;
}

.main-area {
  height: calc(calc(1120 * (100vw / 1400)) - 126px);
}

#footer {
  padding-top: 0;
}
.footer .toTop {
  display: none;
}

.footer .footer-inner .page-top {
  display: none;
}

#MO260402linen {
  --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) {
  #MO260402linen {
    --ratio: calc(var(--pc-artboard-width) / var(--sp-artboard-width));
    --variable: 1px;
  }
}

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

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

  .header .header-inner {
    background: none;
  }
}

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

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

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

#MO260402linen {
  font-feature-settings: "palt";
  --black: #000000;
  --white: #ffffff;
  --green: rgba(181, 241, 204, 0.75);
  --pink: #ffcfef;
  --font-credit: neue-haas-grotesk-display, sans-serif;
  display: block;
  position: absolute;
  width: 100%;
  height: auto;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  z-index: 1;
}

/* #MO260402linen [class*="lp-img-"][class*="--modal"] {
  width: calc(500 / 1400 * 100vw);
  max-width: calc(500 * 100vh / 984);
  max-height: calc(625 * 100vh / 984);
  aspect-ratio: 500 / 625;
  margin: calc(81 * 100vh / 984) auto 0;
  height: auto;
  display: block;
  overflow: hidden;
  background-color: var(--white);
} */

#MO260402linen [class*="lp-img-"][class*="--modal"] a {
  display: block; /* 必須：高さを親に伝える */
  width: 100%;
  height: 100%;
}
#MO260402linen .modal__credit_box {
  display: block;
  position: relative;
}
#MO260402linen .modal__credit_box ul {
  position: absolute;
  bottom: calc(-8*(100vw / 1400));
  left: 0;
}

#MO260402linen [class*="__credit"] {
  font-family: var(--font-credit);
  color: var(--black);
  font-size: calc(18 * var(--formula_pc));
  line-height: 2;
  letter-spacing: 0.05em;
  text-align: left;
  font-weight: 500;
  /* width: calc(240 * var(--formula_pc));
  padding-top: calc(536*(100vw / 1400)); */
  display: flex;
  flex-direction: column;
  white-space: nowrap;
}

/* #MO260402linen .modal-look02__credit,
#MO260402linen .modal-look04__credit,
#MO260402linen .modal-look05__credit,
#MO260402linen .modal-look08__credit,
#MO260402linen .modal-look10__credit {
  padding-top: calc(500*(100vw / 1400));
}
#MO260402linen .modal-look03__credit {
  padding-top: calc(428*(100vw / 1400));
}
#MO260402linen .modal-look07__credit,
#MO260402linen .modal-look09__credit {
  padding-top: calc(464*(100vw / 1400));
} */

#MO260402linen [class*="__credit"] li {
  display: inline-block;
}

#MO260402linen [class*="__credit"] li > a {
  display: block;
}

/* #MO260402linen [class*="lp-img-"] {
  z-index: 0;
  position: relative;
  background: var(--white);
} */

#MO260402linen .lp-main-area {
  width: 100%;
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
}
#MO260402linen .lp-main-area .look {
  width: 25%;
}

#MO260402linen .lp-footer-txt-01 {
  width: calc(90*(100vw / 1400));
  margin: 0 0 0 calc(30 * var(--formula));
}

#MO260402linen .lp-footer-txt-02 {
  width: calc(320*(100vw / 1400));
  margin: calc(116 * var(--formula)) 0 0 calc(30 * var(--formula));
}

#MO260402linen .lp-footer__staff-title {
  font-family: "montserrat", sans-serif;
  font-weight: 600;
  font-style: normal;
  color: var(--white);
  font-size: calc(18*(100vw / 1400));
  line-height: 1;
  letter-spacing: 0.05em;
}

#MO260402linen .lp-footer__staff-credit {
  font-family: var(--font-credit);
  color: var(--white);
  font-size: calc(14*(100vw / 1400));
  line-height: 1.5;
  letter-spacing: 0.05em;
  text-align: left;
  font-weight: 500;
  margin-top: calc(15 * var(--formula));
}


/* モーダル全体の背景（最初は非表示） */
#MO260402linen .lp-modal {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  background: var(--green);
  z-index: 9999;
  /* モーダル自体をスクロール可能にする */
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

/* モーダルが開いている時は背景を固定（JSで制御） */
#MO260402linen.is-modal-open {
  overflow: hidden;
}

/* コンテンツの器 */
#MO260402linen .modal__content {
  width: 100%;
  margin: 0 auto;
  position: relative;
}

/* 閉じるボタンを右上に固定 */
#MO260402linen .modal__close {
  position: fixed; /* 画面に対して固定 */
  top: calc(100*(100vw / 1400));
  right: calc(295*(100vw / 1400));
  z-index: 10000;
  background: none;
  border: none;
  cursor: pointer;
  width: calc(30*(100vw / 1400));
  height: calc(30*(100vw / 1400));
  padding: 0;
  line-height: 0;
}

#MO260402linen .modal__close img {
  width: 100%;
  height: auto;
  display: block;
}

#MO260402linen .modal_flex {
  width: calc(750*(100vw / 1400));
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  row-gap: calc(100*(100vw / 1400));
  padding-block: calc(100 * (100vw / 1400));
  pointer-events: auto !important;
}

#MO260402linen [id^="modal"] {
  width: 100%;
  margin: 0 auto;
  display: flex;
  justify-content: left;
  column-gap: calc(30*(100vw / 1400));
}

#MO260402linen [class^="modal_img"] {
  width: calc(480*(100vw / 1400));
}

@media (max-width: 767px) {
  #MO260402linen .splide {
    width: 100%;
    max-width: 100vw;
    overflow: hidden; /* 横揺れ防止 */
  }

  #MO260402linen .splide[aria-label="Looks Left 2"] {
    width: 50%;
    max-width: 50vw;
    overflow: hidden;
  }

  #MO260402linen .splide__slide {
    flex-shrink: 0;
  }
  #MO260402linen .splide__slide img {
    width: 100%;
    height: auto;
    display: block;
  }

  .main-area {
      height: calc(1333 * (100vw / 750));
  }

  #MO260402linen {
    opacity: 0;
    transition: opacity 1.5s ease 0.5s; /* MVが消え始めてから少し遅れて表示 */
  }
  #MO260402linen.is-visible {
    opacity: 1;
  }

  .lp-mv-area {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    z-index: 1000; /* ヘッダーより上、モーダルより下 */
    background: #fff;
    opacity: 1;
    visibility: visible;
    transition: opacity 1.2s ease, visibility 1.2s ease;
  }
  .lp-mv-area.is-hidden {
    opacity: 0;
    visibility: hidden;
    pointer-events: none; /* 下の階層をクリック可能にする */
  }
  .lp-mv-video video {
    width: 100%;
    height: 100%;
    object-fit: cover; /* 隙間なく表示 */
  }

  html.no-scroll {
    overflow: hidden;
    height: 100%;
  }

  .lp-mv-area .scroll_box {
    width: calc(70*(100vw / 750));
    position: absolute;
    left: calc(340 * (100vw / 750));
    bottom: calc(220 * (100vw / 750));
    z-index: 5;
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  .lp-mv-area .scroll_title {
    font-family: "montserrat", sans-serif;
    font-style: italic;
    color: #fff;
    font-size: calc(28*(100vw / 750));
    line-height: 1;
    letter-spacing: -0.005em;
    text-align: center;
    margin-bottom: calc(15 * (100vw / 750));
  }

  .lp-mv-area .scroll_line {
    width: calc(2*(100vw / 750));
    height: calc(80*(100vw / 750));
    position: relative;
    overflow: hidden; /* はみ出した線（アニメーション）を隠す */
  }

  .lp-mv-area .scroll_line::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #fff;
    
    /* 解決策1: 3Dレンダリングを強制して描画を安定させる */
    /* 解決策2: 1.0ではなく0.99〜1.01で微調整してモード切替を防ぐ */
    transform: translateZ(0); 
    backface-visibility: hidden;
    will-change: transform;

    animation: scrollLineAnim 2s ease-in-out infinite;
  }

  /* アニメーションの定義 */
  @keyframes scrollLineAnim {
    0% {
      transform: scaleY(0) translateZ(0);
      transform-origin: top;
    }
    45% {
      transform: scaleY(1) translateZ(0);
      transform-origin: top;
    }
    55% {
      transform: scaleY(1) translateZ(0);
      transform-origin: bottom;
    }
    100% {
      transform: scaleY(0) translateZ(0);
      transform-origin: bottom;
    }
  }

  #MO260402linen .lp-main-area {
    width: 100%;
  }
  #MO260402linen .lp-main-area .last_box {
    width: 50%;
  }

  #MO260402linen .lp-footer {
    width: 100%;
    display: flex;
    flex-direction: row-reverse;
    justify-content: center;
    column-gap: calc(12 * (100vw / 750));
    padding-block: calc(12 * (100vw / 750));
    background-color: var(--pink);
  }

  #MO260402linen .lp-footer-txt-01 {
    width: calc(99*(100vw / 750));
    margin: 0 auto;
  }
  #MO260402linen .lp-footer-txt-02 {
    width: calc(530*(100vw / 750));
    margin: 0 auto;
  }

  #MO260402linen .lp-footer__staff-title {
    font-size: calc(21*(100vw / 750));
  }

  #MO260402linen .lp-footer__staff-credit {
    font-size: calc(17*(100vw / 750));
    line-height: 1.4117647059;
    margin-top: calc(10*(100vw / 750));
  }

  /* 閉じるボタンを右上に固定 */
  #MO260402linen .modal__close {
    top: calc(85*(100vw / 750));
    right: calc(25*(100vw / 750));
    width: calc(35*(100vw / 750));
    height: calc(35*(100vw / 750));
  }

  #MO260402linen .modal_flex {
    width: calc(600*(100vw / 750));
    row-gap: calc(132*(100vw / 750));
    padding-block: calc(140*(100vw / 750));
  }

  #MO260402linen [id^="modal"] {
    flex-direction: column;
    column-gap: 0;
    row-gap: calc(32 * (100vw / 750));
  }

  #MO260402linen [class^="modal_img"] {
    width: 100%;
  }

#MO260402linen [class*="__credit"] {
  font-size: calc(24*(100vw / 750));
  line-height: 1.75;
  text-align: center;
  width: 100%;
  padding-top: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

#MO260402linen .modal__credit_box ul {
  position: static;
}

  /* #MO260402linen .modal-look02__credit,
  #MO260402linen .modal-look04__credit,
  #MO260402linen .modal-look05__credit,
  #MO260402linen .modal-look08__credit,
  #MO260402linen .modal-look10__credit {
    padding-top: 0;
  }
  #MO260402linen .modal-look03__credit {
    padding-top: 0;
  }
  #MO260402linen .modal-look07__credit,
  #MO260402linen .modal-look09__credit {
    padding-top: 0;
  } */

  #MO260402linen [class*="__credit"] li {
    display: flex;
    justify-content: center;
    column-gap: calc(20*(100vw / 750));
  }
  .js-splide-left .splide__slide.pc_only {
    display: none !important;
  }

}

.js-splide-right .splide__slide {
  direction: ltr;
}

@media (min-width: 768px) {
  #MO260402linen .lp-footer {
    width: 25%;
    background-color: var(--pink);
    position: relative;
    display: flex;
    align-items: center;
  }

  #MO260402linen .lp-footer .lp-footer_inner {
    width: 100%;
    height: calc(284 * (100vw / 1400));
  }

  .sp_only {
    display: none !important;
  }
  .pc_only {
    display: block;
  }
  .js-splide.is-initialized:not(.is-active) .splide__list {
    display: flex;
    flex-wrap: wrap; /* PCで横並びにする場合 */
  }

  .fade-in {
    opacity: 0;
    transition: opacity 0.8s ease;
  }
  .fade-in.is-active  {
    opacity: 1;
  }
  #MO260402linen .modal_flex {
    padding-bottom: calc(100 * (100vw / 1400));
  }
}

@media screen and (max-width: 767px) {
  .sp_only {
    display: block;
  }
  .pc_only {
    display: none;
  }
  .fade-in-sp {
    opacity: 0 !important;
    transform: translateY(0);
    transition: opacity 0.8s ease, transform 0.8s ease;
    visibility: hidden;
  }
  .fade-in-sp.is-shown  {
    opacity: 1 !important;
    transform: translateY(0);
    visibility: visible;
  }

  #footer {
    display: none;
  }

  /* JSでこのクラスが付与されたら表示する */
  #footer.is-visible {
    display: block !important;
  }
}

@media screen and (max-width: 767px) {
  /* 初期状態 */
  .fade-in-sp {
    opacity: 0;
    transform: translateY(0);
    transition: opacity 0.8s ease, transform 0.8s ease;
  }

  /* 親にクラスが付いたら表示 */
  #MO260402linen.start-animation .fade-in-sp {
    opacity: 1;
    transform: translateY(0);
  }

  /* --- 表示順の定義 (nth-of-type ではなく詳細なクラスで指定すると確実です) --- */
  
  /* 1. Looks Left (画像2枚) */
  .start-animation .look01 .fade-in-sp { transition-delay: 0.2s; }
  .start-animation .look02 .fade-in-sp { transition-delay: 0.4s; }

  /* 2. Looks Right (画像2枚) */
  .start-animation .look05 .fade-in-sp { transition-delay: 0.6s; }
  .start-animation .look06 .fade-in-sp { transition-delay: 0.8s; }

  /* 3. Looks Left 2 (画像1枚) */
  .start-animation .look09 .fade-in-sp { transition-delay: 1s; }

  /* 4. タイトル (last_box) */
  .start-animation .last_box.fade-in-sp { transition-delay: 1.2s; }

  /* 5. フッターボタン */
  .start-animation .lp-footer.fade-in-sp { transition-delay: 1.4s; }
}