@charset "UTF-8";

/* DLIGHT */
.dm {}

/* ============================================================
  1. 共通スタイル (Base Styles)
  全デバイス共通の設定。メディアクエリの外に出して管理。
============================================================ */

html.lenis {
  height: auto;
}

.lenis.lenis-smooth {
  scroll-behavior: auto;
}

.lenis.lenis-smooth [data-lenis-prevent] {
  overscroll-behavior: contain;
}

.lenis.lenis-stopped {
  overflow: hidden;
}

.lenis.lenis-scrolling iframe {
  pointer-events: none;
}

/* アニメーション最適化 */
.pin-parallax-wrapper,
.js-stack-anim,
.pin-parallax-img,
.st-layer-b {
  transform: translateZ(0);
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  will-change: transform;
}

.pin-spacer {
  pointer-events: none;
}

/* ページヒーロー共通 */
.page--hero {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  z-index: -1;
  overflow: hidden;
}

.page--hero-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  filter: brightness(1);
}

.scroll-spacer {
  width: 100%;
  background-color: transparent;
  pointer-events: none;
  height: 100vh;
}

.kv-img {
  display: block;
  filter: blur(20px);
  transform: scale(1.1);
  opacity: 0;
}

.kv-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(255, 255, 255, 0.2);
  backdrop-filter: blur(10px);
  z-index: 1;
  pointer-events: none;
}

/* 横幅が広がる画像 */
.expand-section {
  display: flex;
  justify-content: center;
}

.expand-img-wrapper {
  overflow: hidden;
  clip-path: inset(0 6%);
}

.expand-img-wrapper img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* フェードイン / シャッター共通 */
.fade-item {
  position: relative;
  opacity: 0;
  transform: translateY(50px);
}

.shutter-item {
  position: relative;
  overflow: hidden;
  opacity: 0;
}

.shutter-item::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #D4D2C5;
  transform: translateX(-101%);
  z-index: 2;
}

/* パララックス共通 */
.parallax-wrapper {
  overflow: hidden;
}

.parallax-wrapper img {
  object-position: center;
}

.pin-parallax-wrapper {
  position: relative;
  width: 100%;
  height: auto;
  overflow: hidden;
}

.pin-parallax-wrapper .pin-spacer {
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);
}

.pin-parallax-img {
  position: relative;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.pin-parallax-wrapper p {
  position: absolute;
}

/* スタッキングセクション共通 */
.js-stack-anim {
  width: 100%;
  height: 100vh;
  position: relative;
  background-color: transparent;
  z-index: 1;
}

.st-stack-container {
  position: relative;
  width: 100%;
  max-width: 100%;
  margin: 0 auto;
  overflow: hidden;
  aspect-ratio: 1 / 1.16;
  z-index: 1;
}

.st-layer-a,
.st-layer-b {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: auto;
  aspect-ratio: 1 / 0.6;
}

.st-layer-a {
  z-index: 1;
}

.st-layer-b {
  z-index: 2;
  transform: translateY(100%);
}

.st-layer-a img,
.st-layer-b img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.st-layer-b-txt {
  display: none;
}

.st-layer-b-txt .text-inner p {
  text-align: left;
  color: #FFF;
}

.stack-spacer {
  position: relative;
  pointer-events: none;
  z-index: 10;
}


/* ============================================================
  SP: max-width: 768px
============================================================ */
@media (max-width: 768px) {

  .expand-img-wrapper {
    width: 100%;
    height: 70vh;
  }

  .line-draw-item {
    position: relative;
    padding-left: 20px;
  }

  .line-draw-item::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 2px;
    height: 100%;
    background-color: #000;
    transform-origin: top;
    transform: scaleY(0);
  }

  .parallax-wrapper img {
    height: 120%;
    margin-top: -10%;
  }
  
  .st-stack-container {
    aspect-ratio: 1 / 2.253;
  }
  
  .st-layer-a,
  .st-layer-b {
    aspect-ratio: 1 / 1.127;
  }

  .st-layer-b-txt .text-inner p {
    font-size: 1rem;
    line-height: 1.4;
  }

  .stack-spacer {
    margin-top: -60vh;
  }
}

/* ============================================================
  PC: min-width: 769px
============================================================ */
@media (min-width: 769px) {
  .expand-img-wrapper {
    width: 92%;
    height: 76vh;
  }

  /* 画像拡大 - PCのみの演出 */
  .img-zoom.scTarget {
    position: relative;
    overflow: hidden;
  }

  .img-zoom.scTarget img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transform: scale(0.5);
    opacity: 0;
    transition: transform 1.8s cubic-bezier(0.33, 1, 0.68, 1), opacity 1.2s ease-out;
    will-change: transform;
  }

  .img-zoom.scTarget.scTargetIn img {
    opacity: 1;
    transform: scale(1);
  }

  .parallax-wrapper img {
    height: 120%;
    margin-top: -20%;
  }

  /* ラインアニメーション - PC版の特殊指定 */
  .line-draw-item {
    position: absolute;
    width: 2px;
    height: 100%;
    left: 50%;
    top: 0;
    --line-scale: 0;
  }

  .line-draw-item::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 1px;
    height: 100%;
    background-color: #938875;
    transform-origin: top;
    transform: scaleY(var(--line-scale));
  }

  .js-stack-anim.is-custom-width .st-stack-container {
    max-width: 1352px;
  }

  .st-layer-b {
    position: relative;
  }
  
  .stack-spacer {
    height: 100vh;
  }
}