@charset "UTF-8";
/*
 * トップページ FV スライダー用（front-page.php でだけ読み込む）
 * 2026-11-06 作成
 *
 * スライダーの JS は Swiper 10.2.0、CSS は header.php の Swiper 3.4.1 のまま。
 * front-page.php の初期化で containerModifierClass:'swiper-container-' を指定しているので、
 * クラス名は 3.x と同じ（.swiper-container-horizontal など）。
 *
 * 読み込みは front-page.php の <link>（?ver= にファイルの更新日時が自動で付く）。
 * このファイルを上書きすれば、ブラウザのキャッシュに関係なくすぐ反映される。
 */

/* Swiper の CSS（header.php で非同期読み込み）が届く前から崩れないよう、最低限をここで指定 */
.slider-box .swiper-wrapper {
  box-sizing: content-box;
  display: flex;
  transition-property: transform;
}
.slider-box .swiper-slide {
  flex-shrink: 0;
  width: 100%;
}

/* スワイプのかくつき対策：Swiper 10 は CSS の touch-action:pan-y が前提（3.4.1 の CSS には無い）。
   無いと、指を動かし始めた直後にブラウザがスワイプを取り上げて（pointercancel）、スライドが途中で止まる */
.slider-box .swiper-container-horizontal {
  touch-action: pan-y;
}

/* Swiper 10 の CSS と同じ、なめらかに動かすための指定 */
.slider-box .swiper-container-backface-hidden .swiper-slide {
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  transform: translateZ(0);
}

/* アローとドットは、Swiper の CSS（非同期）が届くまで普通に並んでしまい、スライダーの高さがずれる
   → 最初から浮かせておく（位置は Swiper 3.4.1 の CSS と同じ） */
.slider-box .swiper-button-prev,
.slider-box .swiper-button-next {
  cursor: pointer;
  margin-top: -22px;
  position: absolute;
  top: 50%;
  z-index: 10;
}
.slider-box .swiper-pagination {
  position: absolute;
  text-align: center;
  z-index: 10;
}

/* PC：動画の枠（margin-top:-20px）がドットに重なるので、トップだけ 0 に */
body.home .youtube-wrap_box_top {
  margin-top: 0;
}

/* 左右のグラデーション（style1.css の .carousel::before/::after）がアローの上に重なってタップできないので、タップを通す */
.slider-box .carousel::before,
.slider-box .carousel::after {
  pointer-events: none;
}

@media screen and (max-width: 768px) {
  /* SP：アロー（style2.css で display:none にしている）を表示。位置は画像の縦中央（下 50px はドット用の余白） */
  .slider-box .carousel .swiper-button-prev,
  .slider-box .carousel .swiper-button-next {
    -webkit-background-size: 28px 28px;
    background-size: 28px 28px;
    display: block;
    height: 28px;
    margin-top: 0;
    top: calc(50% - 25px);
    transform: translateY(-50%);
    width: 28px;
  }
  .slider-box .carousel .swiper-button-prev {
    left: 6px;
    right: auto;
  }
  .slider-box .carousel .swiper-button-next {
    left: auto;
    right: 6px;
  }
}

@media screen and (max-width: 767px) {
  /* SP：固定ヘッダーの高さ分の余白は、main ではなくスライダーの上に付ける。
     正確な値は front-page.php の JS（fitSlider）で入れ直す。ここはそれまでの仮の値 */
  body.home main {
    padding-top: 0 !important;
  }
  .slider-box {
    padding-top: clamp(70px, calc(60px + 4vw), 81px);
  }
  /* SP：左右に隣のスライドがはみ出して見えないように（余白は外側の .inner に移す） */
  .slider-box .inner {
    box-sizing: border-box;
    padding-left: 4%;
    padding-right: 4%;
  }
  .slider-box .carousel .swiper-container {
    overflow: hidden;
    padding-left: 0;
    padding-right: 0;
  }
}