@charset "UTF-8";
/* =======================================
レスポンシブ切り替え
======================================= */
.spOnly,
.tb_pcOnly,
.sp_tbOnly,
.pcOnly {
  display: block;
}

/* 768px以下だけ表示 */
@media (min-width: 769px) {
  .spOnly {
    display: none !important;
  }
}
/* 769px以上だけ表示 */
@media (max-width: 768px) {
  .tb_pcOnly {
    display: none !important;
  }
}
/* 1000px以下だけ表示 */
@media (min-width: 1081px) {
  .sp_tbOnly {
    display: none !important;
  }
}
/* 1081px以上だけ表示 */
@media (max-width: 1080px) {
  .pcOnly {
    display: none !important;
  }
}
/* fallback */
@font-face {
  font-family: "Material Symbols Outlined";
  font-style: normal;
  font-weight: 400;
  src: url(https://fonts.gstatic.com/s/materialsymbolsoutlined/v303/kJF1BvYX7BgnkSrUwT8OhrdQw4oELdPIeeII9v6oDMzByHX9rA6RzaxHMPdY43zj-jCxv3fzvRNU22ZXGJpEpjC_1v-p_4MrImHCIJIZrDCvHOejbdhzrA.woff2)
    format("woff2");
}

.material-symbols-outlined {
  font-family: "Material Symbols Outlined";
  font-weight: normal;
  font-style: normal;
  font-size: 24px;
  line-height: 1;
  letter-spacing: normal;
  text-transform: none;
  display: inline-block;
  white-space: nowrap;
  word-wrap: normal;
  direction: ltr;
  -webkit-font-feature-settings: "liga";
  -webkit-font-smoothing: antialiased;
}

/* ===================================================
   MV 
=================================================== */
.l-mainvisual {
  position: relative;
}

.mv__ttl {
  left: 50%;
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 9.6%;
  z-index: 2;
}
.mv__ttl img {
  display: block;
  height: auto;
  width: 100%;
}

@media screen and (max-width: 768px) {
  .mv__ttl {
    width: 29.47%;
  }
}
/* ===================================================
   MV Swiper 
=================================================== */
.mvSwiper {
  aspect-ratio: 1440/810;
  overflow: hidden;
  position: relative;
  width: 100%;
  z-index: 1;
}
@media (max-width: 768px) {
  .mvSwiper {
    aspect-ratio: 375/600;
  }
}
.mvSwiper .swiper-wrapper {
  height: 100%;
  list-style: none;
  padding-left: 0;
}
.mvSwiper .swiper-slide {
  height: 100%;
  list-style: none;
  pointer-events: none;
}
.mvSwiper .swiper-slide-active {
  pointer-events: auto;
}
.mvSwiper .mv__item {
  height: 100%;
  overflow: hidden;
  position: relative;
  width: 100%;
}
.mvSwiper img.mv__img {
  -o-object-fit: cover;
  display: block;
  height: 100%;
  object-fit: cover;
  transform: none;
  width: 100%;
  will-change: object-position, transform;
}
.mvSwiper .mvSlide--01 img.mv__img {
  -o-object-position: 100% 50%;
  object-position: 100% 50%;
}
.mvSwiper {
  /* 左→右の終点=右 */
}
.mvSwiper .mvSlide--02 img.mv__img {
  transform: scale(1);
}
.mvSwiper {
  /* 縮小の終点 */
}
.mvSwiper .mvSlide--03 img.mv__img {
  -o-object-position: 50% 100%;
  object-position: 50% 100%;
}
.mvSwiper {
  /* 下→上の終点=上 */
}
.mvSwiper .mvSlide--04 img.mv__img {
  transform: scale(1.18);
  transform-origin: 50% 50%;
}
.mvSwiper .mvSlide--05 img.mv__img {
  -o-object-position: 0% 50%;
  object-position: 0% 50%;
}
.mvSwiper {
  /* 右→左の終点=左 */
  /* SPだけ：4枚目を右下基準で拡大 */
}
@media screen and (max-width: 768px) {
  .mvSwiper .mvSlide--04 img.mv__img {
    transform-origin: 0% 100%;
  }
}
.mvSwiper {
  /* フェード完了後に動かす */
  --mv-fade: 0s;
  --mv-move: 4s;
}
.mvSwiper .swiper-slide.is-anim.mvSlide--01 img.mv__img {
  animation: mv-pan-left-to-right var(--mv-move) linear both;
}
.mvSwiper .swiper-slide.is-anim.mvSlide--02 img.mv__img {
  animation: mv-zoom-out var(--mv-move) linear both;
  transform-origin: 50% 50%;
}
.mvSwiper .swiper-slide.is-anim.mvSlide--03 img.mv__img {
  animation: mv-pan-bottom-to-top var(--mv-move) linear both;
}
.mvSwiper .swiper-slide.is-anim.mvSlide--04 img.mv__img {
  animation: mv-zoom-in var(--mv-move) linear both;
}
.mvSwiper .swiper-slide.is-anim.mvSlide--05 img.mv__img {
  animation: mv-pan-right-to-left var(--mv-move) linear both;
}

/* ==========================
   1枚目：左端 → 右端
========================== */
@keyframes mv-pan-left-to-right {
  from {
    -o-object-position: 0% 50%;
    object-position: 0% 50%;
  }
  to {
    -o-object-position: 100% 50%;
    object-position: 100% 50%;
  }
}
/* ==========================
   2枚目：拡大 → 縮小
========================== */
@keyframes mv-zoom-out {
  from {
    transform: scale(1.18);
  }
  to {
    transform: scale(1);
  }
}
/* ==========================
   3枚目：下端 → 上端
========================== */
@keyframes mv-pan-bottom-to-top {
  from {
    -o-object-position: 50% 0%;
    object-position: 50% 0%;
  }
  to {
    -o-object-position: 50% 100%;
    object-position: 50% 100%;
  }
}
/* ==========================
   4枚目：拡大
========================== */
@keyframes mv-zoom-in {
  from {
    transform: scale(1);
  }
  to {
    transform: scale(1.18);
  }
}
/* ==========================
   5枚目：右端 → 左端 
========================== */
@keyframes mv-pan-right-to-left {
  from {
    -o-object-position: 100% 50%;
    object-position: 100% 50%;
  }
  to {
    -o-object-position: 0% 50%;
    object-position: 0% 50%;
  }
}
/*# sourceMappingURL=2025_12_add.css.map */