/* =========================
   Hero Movie Slider (clean)
   ========================= */

/* 画面高に合わせる親ボックス（必要なら使う） */
.movie-box {
  height: 100svh;
  padding-top: 60px;
  background: #EFE8DC;
  overflow: hidden;
}
@media screen and (min-width: 640px) {
  .movie-box {
    height: 100svh;
    padding-top: 127px;
  }
}

.Hero-splide {
  --narrow: 8vw;  /* サイドの細い幅 */
  --wide:  84vw;  /* 拡大時の幅   */
  position: relative;
}

@media screen and (min-width: 640px) {
  .Hero-splide {
    --narrow: 12vw;  /* サイドの細い幅 */
    --wide:  78vw;  /* 拡大時の幅   */
  }
}

/* Splideのトラック/リスト：位置固定＆フレックス横並び */
.Hero-splide .splide__track {
  overflow: hidden;
}
.Hero-splide .splide__list {
  display: flex;
  column-gap: .25em;
  justify-content: space-between;
  transform: none !important;     /* ← Splideの移動を無効化 */
  transition: none !important;
}
@media screen and (min-width: 640px) {
  .Hero-splide .splide__list {
    column-gap: .5em;
  }
}

/* 各スライド：デフォは細幅、拡大時は太幅。
   カーテン風に見せるなら clip-path を使ってもOK（今回は width で演出） */
.Hero-splide .splide__slide {
  width: var(--narrow) !important;       /* autoWidth上書き */
  overflow: hidden;
  position: relative;
  transition: width 3s cubic-bezier(0.16, 1, 0.5, 1);
}
.Hero-splide .splide__slide.is-expanded {
  width: var(--wide) !important;
  pointer-events: none;
}

/* スライド内：動画とテキストのレイヤー */
.Hero-videoWrapper {
  position: relative;
  width: 100%;
  height: calc(100dvh - 60px);  /* ヒーロー高さに合わせる */
  background: #46320F;
  cursor: pointer;
  overflow: hidden;
}
@media screen and (min-width: 640px) {
  .Hero-videoWrapper {
    height: calc(100dvh - 118px);  /* ヒーロー高さに合わせる */
  }
}

.Hero-video {
  width: 100%;
  height: 100%;
  object-fit: cover; 
}

/* テキストを動画の上に重ねる */
.Hero-videoCopyWrapper {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
}
.Hero-videoSubCopy {
  color: #EFE8DC;
  font-size: 4.4vw;
  line-height: 1.6;
  font-weight: 700;
  text-shadow: 3px 3px 10px #333333;
  opacity: 0.85;
  display: flex;
  height: 100%;
  width: 100%;
  justify-content: center;
  align-items: center;
  place-items: center;
  bottom: 20px;
  position: relative;
}

@media screen and (min-width: 640px) {
  .Hero-videoSubCopy {
    font-size: clamp(32px, 4vw, 56px);
    line-height: 1;
  }
}

.fade {
  filter: blur(200px);
}

.show {
  animation-name: show;
  animation-duration: 2.5s;
  filter: blur(0);
}

@keyframes show {
  0% {
    filter: blur(200px);
  }

  20% {
    filter: blur(100px);
  }

  100% {
    filter: blur(0);
  }
}

/* 初期ロードだけトランジションなし（JSで .no-transition を一瞬付与） */
.Hero-splide.no-transition .splide__slide {
  transition: none !important;
}

/* アニメが苦手なユーザー配慮（任意） */
@media (prefers-reduced-motion: reduce) {
  .Hero-splide .splide__slide {
    transition: none !important;
  }
}

.splideWorks { width: 100%; }                    /* まずは親を100% */
.splideWorks .splide__track { overflow: visible; }
.splideWorks .splide__list  { margin: 0; padding: 0; }
.splideWorks .splide__slide { margin: 0; display: flex; justify-content: center;}
.splideWorks .card{
  width: 80vw;
  height: fit-content;
  background:#EFE8DC;
  border-radius:.25rem;
  transform: scale(0.9);
  filter: brightness(0.5);
  transition: transform 0.7s cubic-bezier(0.16, 1, 0.3, 1), filter .7s cubic-bezier(0.16, 1, 0.3, 1);
}

@media screen and (min-width: 768px) {
  .splideWorks .card{
    width: 605.333px;
    height: fit-content;
  }
}

.splideWorks .is-active .card {
  transform: scale(1);
  filter: brightness(1);
}

.splideWorks .is-center .card{
  transform: scale(1);
  filter: brightness(1);
  transition: transform 0.7s cubic-bezier(0.16, 1, 0.3, 1), filter .7s cubic-bezier(0.16, 1, 0.3, 1);
}