/* ======================
      MV
  ======================= */
.mv {
 position: relative;
 height:calc(100vh - 48px);
 overflow: hidden;
}

@media (max-width:767px) {
  .mv {
 height:80vh;
  }
}

/* 修正：flexをやめて、子要素を重ねるための基準にする */
.mv-slides {
 position: relative;
 width: 100%;
 height: 100%;
}

/* 修正：横並び（flex: 0 0 100%）をやめて、その場で絶対配置で重ねる */
.mv-slide {
 position: absolute;
 inset: 0;
 width: 100%;
 height: 100vh;
 opacity: 0;             /* 初期状態は透明 */
 visibility: hidden;     /* クリック防止 */
 transition: opacity 2s ease, visibility 2s ease; /* 元の0.6sを引き継ぎ */
}

/* 追加：JSでactiveクラスがついたスライドだけを表示する */
.mv-slide.active {
 opacity: 1;
 visibility: visible;
}

.mv-slide img {
 width: 100%;
 height: 100%;
 object-fit: cover;
}

.mv-overlay {
 position: absolute;
 inset: 0;
 display: flex;
 align-items: center;
 justify-content: center;
 text-align: center;
 color: #fff;
 z-index: 2; /* テキストが写真の下に隠れないように念のため設定 */
}
.mv-overlay-inner {
  width:1080px;
 max-width: 90%;
 position:relative;
}

.mv-dots {
 position: absolute;
 left: 50%;
 bottom: 20px;
 transform: translateX(-50%);
 display: flex;
 gap: 6px;
 z-index: 3; /* ドットが最前面に来るように */
}
.mv-dot {
 width: 8px;
 height: 8px;
 border-radius: 50%;
 background: rgba(255, 255, 255, 0.5);
}
.mv-dot.active {
 background: #fff;
}

.mv p {
  font-weight:600;
  text-align:left;
  filter: drop-shadow(0 0 0.2rem rgba(0,0,0,0.4));
}

.mv .mv-ttl {
  font-size:3.4rem;
  line-height:1.4;
 filter: drop-shadow(0 0 0.8rem rgba(0,0,0,0.8));
}

@media (max-width:768px) {
 .mv .mv-ttl {
  font-size:1.8rem;
 }
   .mv-overlay-inner {
   translate:-50% -50%;
   top:20%;
   left:50%;

  }
}

/* =================================
      SLIDE BANNER
  ================================= */
.slider-container {
 position: relative;
 width: 100%;
 overflow: hidden;
 background:var(--color-brand-1);
}

.slider-wrapper {
 display: flex;
 align-items: center;
 transition: transform 0.5s ease-in-out;
 will-change: transform;
}

.slide {
 flex: 0 0 100%; /* 初期値（後ほどJSで計算） */

 padding: 0;
 box-sizing: border-box;
 cursor: pointer;
 transition: transform 0.3s;
}

.slide-inner {
 position: relative;
 width: 100%;
 overflow: hidden;
}

.slide img {
 width: 96%;
 border-radius: 12px;
 object-fit: contain;
 transition:
  opacity 0.3s,
  transform 0.3s;
  transition:.3s;
}

.overlay {
 position: absolute;
 top: 0;
 left: 0;
 width: 100%;
 height: 100%;
 background:var(--color-brand-1);
 transition: opacity 0.3s;
 pointer-events: none;
 opacity:0.4;
}

.slide.active .overlay {
 opacity: 0;
}
.slide.active:hover img {
 scale:0.96;
}

.dots {
 position:relative;
 display: flex;
 justify-content: center;
 gap: 8px;
}
.dot {
 width: 8px;
 height: 8px;
 background: rgba(255, 255, 255, 0.5);
 border-radius: 50%;
 cursor: pointer;
}
.dot.active {
 background: #fff;
}

@media (min-width: 768px) {
 .slide {
  flex: 0 0 60%;
 }
 .slider-container {
  padding: 40px 0;
 }
 .dots {
 top:16px;
 }
}

@media (max-width: 767px) {
 .slide {
  flex: 0 0 70%;
  padding: 24px 0px;
 }
 .slide-inner {
  height: auto;
 }
 .overlay {
  display: none;
 }
 .dots {
  display:none;
 }
}

/* =================================
      WEBチラシ（Swiper）
  ================================= */
.flyer-slider-section {
 padding: 60px 0;
 width: 100%;
 overflow: hidden; /* 画面全体の横スクロールを防ぐ */
 font-family: "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;
}

.flyer-slider-wrapper {
 max-width: 1280px;
 margin: 0 auto;
 padding-left: 20px;
 position: relative;
}

.flyer-swiper {
 width: 100%;
 overflow: visible !important; /* 右側にはみ出させるために超重要 */
}

.flyer-swiper .swiper-slide {
 aspect-ratio: 1 / 1;
 max-width:300px;
 background: #fff;
 border-radius: 12px;
 box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
 overflow: hidden;
 transition: 0.3s ease;
 position:relative;
}

.flyer-swiper .swiper-slide img {
 position:absolute;
 top:50%;
 left:50%;
 translate:-50% -50%;
 width: 96%;
 height: 96%;
 object-fit: contain;
 display: block;
 border-radius: 8px;
}
.flyer-swiper .slide-link {
 display: block;
 cursor: pointer;
}
.flyer-swiper .swiper-slide:hover {
 translate:0 -4px;
}
.flyer-swiper a img:hover {
  scale:1;
}

.slider-footer {
 display: flex;
 justify-content: flex-end;
 align-items: center;
 gap: 20px;
 margin-top: 25px;
 padding-right: 20px;
}

.navigation-wrapper {
 display: flex;
 gap: 15px;
 position: relative;
 width: 120px;
 height: 50px;
 z-index:1;
}

/* Swiper標準矢印のカスタム上書き */
.swiper-navigation-icon {
 display:none!important;
}

.custom-nav-btn {
 position: static !important; /* Swiperデフォルトの絶対配置を解除 */
 width: 50px !important;
 height: 50px !important;
 background-color: #0284c7;
 border: 2px solid #0284c7;
 border-radius: 50%;
 margin-top: 0 !important;
 color: #ffffff !important;
 transition: all 0.3s ease;
}

.custom-nav-btn::after {
 font-size: 18px !important;
 font-weight: bold;
}

.custom-nav-btn:hover {
 background-color: transparent;
 color: #0284c7 !important;
}

@media (max-width: 767px) {
 .swiper-wrapper {
  display:flex;
  align-items:center;
 }
 .flyer-swiper .swiper-slide {
  max-width: 60%;
  height:100%;
 }
  .flyer-swiper .swiper-slide a {
   display:block;
  }
 .slider-footer {
  flex-direction: column-reverse;
  align-items: flex-end;
  gap: 10px;
 }
}