@charset "UTF-8";
/* ==========================================================================
   slider-movie.css
   フロントページ「お客様の声」スライダー（sec5）＋「導入事例動画」セクション
   plus-test.css から分離。plus-test.css の直後に読み込むこと（カスケード順維持）
   ========================================================================== */


/* ===== sec5「お客様の声」手動横スライダー（Swiper） ===== */

.p-top-sec5__slider {
  position: relative;
  padding: 0 60px;
}

/* 既存のグリッド指定を打ち消してSwiperにレイアウトを任せる */
.p-top-sec5__slider .p-top-sec5__list {
  display: flex;
  gap: 0;
  margin-top: 0;
}

.p-top-sec5__slider .swiper-slide {
  height: auto;
  display: flex;
  flex-direction: column;
}

/* 白いカードの境界が分かる程度の細いシャドウに変更
   （元のぼかし29pxはoverflow:hiddenで切れやすいため） */
.p-top-sec5__slider .p-top-sec5__item {
  box-shadow: 0 1px 6px rgba(0, 0, 0, 0.18);
}

/* ブログ由来の画像も含めてカード画像の縦横比を統一する */
.p-top-sec5__slider .p-top-sec5__item > img {
  width: 100%;
  height: auto;
  aspect-ratio: 366 / 220;
  object-fit: cover;
}

/* 矢印ボタン
   ※Swiper CDNのCSSがplus.cssより後に読み込まれるため、
     .p-top-sec5__slider を付けて詳細度を上げて確実に勝たせる */
.p-top-sec5__slider .p-top-sec5__arrow {
  width: 44px;
  height: 44px;
  margin-top: 0;
  top: 50%;
  transform: translateY(-50%);
  border-radius: 50%;
  background: #fff;
  border: 2px solid #0055a5;
  transition: opacity 0.3s;
}

.p-top-sec5__slider .p-top-sec5__arrow::after {
  font-size: 16px;
  font-weight: 900;
  color: #0055a5;
}

.p-top-sec5__slider .p-top-sec5__arrow.swiper-button-prev {
  left: 0;
}

.p-top-sec5__slider .p-top-sec5__arrow.swiper-button-next {
  right: 0;
}

.p-top-sec5__slider .p-top-sec5__arrow.swiper-button-disabled {
  opacity: 0.3;
}

/* ページネーション（ドット） */
.p-top-sec5__slider .p-top-sec5__pagination {
  position: static;
  margin-top: 28px;
  display: flex;
  justify-content: center;
  gap: 8px;
  flex-wrap: wrap;
}

.p-top-sec5__slider .p-top-sec5__pagination .swiper-pagination-bullet {
  width: 10px;
  height: 10px;
  margin: 0;
  background: #c5d3e2;
  opacity: 1;
}

.p-top-sec5__slider .p-top-sec5__pagination .swiper-pagination-bullet-active {
  background: #0055a5;
}

/* ドラッグ中のカーソル ＋
   overflow:hiddenでカードの影が切れないよう最小限の余白を確保して相殺 */
.p-top-sec5__slider .swiper {
  cursor: grab;
  padding: 8px 8px 10px;
  margin: -8px -8px -10px;
}

.p-top-sec5__slider .swiper:active {
  cursor: grabbing;
}

/* 769〜1100pxはPC固定レイアウト（body min-width:1100px）が横にはみ出し
   矢印が画面外になるため非表示にする（スワイプ／ドラッグ＋ドットで操作） */
@media (min-width: 769px) and (max-width: 1100px) {
  .p-top-sec5__slider {
    padding: 0;
  }

  .p-top-sec5__slider .p-top-sec5__arrow {
    display: none;
  }
}

/* テーマのSP切替（max-width:768px）に合わせる */
@media (max-width: 768px) {
  /* SPレイアウトは全て可変幅のため、端数等によるわずかな横スクロールを保険で抑止 */
  body {
    overflow-x: hidden;
  }

  .p-top-sec5__slider {
    margin-top: 4.5vw;
    padding: 0;
  }

  /* SPは矢印を非表示にしてスワイプ操作のみ */
  .p-top-sec5__slider .p-top-sec5__arrow {
    display: none;
  }

  .p-top-sec5__slider .p-top-sec5__pagination {
    margin-top: 5vw;
  }
}


/* ===== 動画セクション（サムネイルクリックでポップアップ再生） ===== */

.p-top-movie {
  padding: 80px 0 30px;
}

.p-top-movie__title {
  text-align: center;
  font-size: 2.25rem;
  font-weight: 700;
  color: #333;
}

.p-top-movie__list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px 30px;
  margin-top: 48px;
  list-style: none;
  /* sec5スライダー（.p-top-sec5__slider の padding: 0 60px）とカードの左右端を揃える */
  padding: 0 60px;
}

.p-top-movie__button {
  display: block;
  position: relative;
  width: 100%;
  padding: 0;
  border: 0;
  border-radius: 14px;
  overflow: hidden;
  background: #000;
  cursor: pointer;
  transition: opacity 0.3s;
}

.p-top-movie__button:hover {
  opacity: 0.8;
}

.p-top-movie__thumb {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}

/* 再生ボタン（画像 512x390px / 背景透過） */
.p-top-movie__play {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  /* カード幅に対する比率で配置（幅が変わっても見た目の比率を保つ） */
  width: 20%;
  aspect-ratio: 512 / 390;
  background: url("../images/top/play.png") no-repeat center / contain;
  pointer-events: none;
}

/* ポップアップ（モーダル） */
.p-top-movie-modal {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: rgba(0, 0, 0, 0.8);
  justify-content: center;
  align-items: center;
  padding: 20px;
}

.p-top-movie-modal.is-open {
  display: flex;
}

.p-top-movie-modal__inner {
  position: relative;
  width: min(90vw, 960px);
}

.p-top-movie-modal__video {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  background: #000;
}

.p-top-movie-modal__video iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

.p-top-movie-modal__close {
  position: absolute;
  top: -44px;
  right: 0;
  width: 36px;
  height: 36px;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
}

.p-top-movie-modal__close::before,
.p-top-movie-modal__close::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 28px;
  height: 3px;
  background: #fff;
}

.p-top-movie-modal__close::before {
  transform: translate(-50%, -50%) rotate(45deg);
}

.p-top-movie-modal__close::after {
  transform: translate(-50%, -50%) rotate(-45deg);
}

/* sec5スライダーがこの帯で padding: 0 になるため、動画リストも合わせる */
@media (min-width: 769px) and (max-width: 1100px) {
  .p-top-movie__list {
    padding: 0;
  }
}

@media (max-width: 768px) {
  .p-top-movie {
    padding: 12vw 0 14vw;
  }

  .p-top-movie__title {
    font-size: 27px;
    line-height: 1.38;
  }

  .p-top-movie__list {
    grid-template-columns: 1fr;
    gap: 5vw;
    margin-top: 7vw;
    padding: 0;
  }

  .p-top-movie__button {
    border-radius: 3vw;
  }
}