/* swiperの記述 */

/* ============================================
   クラス名で制御できるスライダースタイル
   ============================================ */

/* 基本スタイル */
.swiper {
  width: 100%;
  height: 100%;
}

.swiper.pc {
  display: block;
}

.swiper.sp {
  display: none;
}

.swiper.pc .swiper-wrapper {
  display: flex;
  transition-property: transform;
}

.swiper .swiper-wrapper .swiper-slide {
  flex-shrink: 0;
  width: 100%;
  height: 100%;
  position: relative;
}

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

@media (max-width: 768px) {
  .swiper.pc {
    display: none;
  }

  .swiper.sp {
    display: block;
  }
}

/* ============================================
   サイズ・レイアウト制御
   ============================================ */

/* 全幅表示 */
.swiper-full-width {
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
}

/* 自動高さ */
.swiper-auto-height .swiper-wrapper {
  align-items: flex-start;
}

.swiper-auto-height .swiper-slide {
  height: auto;
}

/* 固定高さ */
.swiper-height-200 {
  height: 200px;
}

.swiper-height-300 {
  height: 300px;
}

.swiper-height-400 {
  height: 400px;
}

.swiper-height-500 {
  height: 500px;
}

.swiper-height-600 {
  height: 600px;
}

/* 最大幅制限 */
.swiper-max-width-800 {
  max-width: 800px;
  margin: 0 auto;
}

.swiper-max-width-1200 {
  max-width: 1200px;
  margin: 0 auto;
}

/* ============================================
   スライド表示数制御（CSS Grid使用）
   ============================================ */

/* 2枚表示 */
.swiper-slides-2 .swiper-wrapper {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
}

/* 3枚表示 */
.swiper-slides-3 .swiper-wrapper {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

/* 4枚表示 */
.swiper-slides-4 .swiper-wrapper {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}

/* 5枚表示 */
.swiper-slides-5 .swiper-wrapper {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 20px;
}

/* 6枚表示 */
.swiper-slides-6 .swiper-wrapper {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 20px;
}

/* スライド間隔の調整 */
.swiper-space-10 .swiper-wrapper {
  gap: 10px;
}

.swiper-space-15 .swiper-wrapper {
  gap: 15px;
}

.swiper-space-20 .swiper-wrapper {
  gap: 20px;
}

.swiper-space-30 .swiper-wrapper {
  gap: 30px;
}

.swiper-space-40 .swiper-wrapper {
  gap: 40px;
}

/* ============================================
   デザイン・装飾
   ============================================ */

/* 角丸 */
.swiper-rounded {
  border-radius: 8px;
  overflow: hidden;
}

.swiper-rounded-lg {
  border-radius: 16px;
  overflow: hidden;
}

.swiper-rounded-xl {
  border-radius: 24px;
  overflow: hidden;
}

/* 影 */
.swiper-shadow {
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.swiper-shadow-lg {
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
}

.swiper-shadow-xl {
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
}

/* ボーダー */
.swiper-border {
  border: 1px solid #e0e0e0;
}

.swiper-border-thick {
  border: 2px solid #e0e0e0;
}

/* 背景色 */
.swiper-bg-white {
  background-color: #ffffff;
}

.swiper-bg-gray {
  background-color: #f5f5f5;
}

.swiper-bg-light {
  background-color: #fafafa;
}

/* ============================================
   スライド内コンテンツの配置
   ============================================ */

/* 中央揃え */
.swiper-center .swiper-slide {
  display: flex;
  align-items: center;
  justify-content: center;
}

/* 上揃え */
.swiper-top .swiper-slide {
  display: flex;
  align-items: flex-start;
  justify-content: center;
}

/* 下揃え */
.swiper-bottom .swiper-slide {
  display: flex;
  align-items: flex-end;
  justify-content: center;
}

/* 左揃え */
.swiper-left .swiper-slide {
  display: flex;
  align-items: center;
  justify-content: flex-start;
}

/* 右揃え */
.swiper-right .swiper-slide {
  display: flex;
  align-items: center;
  justify-content: flex-end;
}

/* ============================================
   画像関連
   ============================================ */

/* 画像をスライド全体にフィット */
.swiper-image-fit .swiper-slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* 画像をアスペクト比を保ってフィット */
.swiper-image-contain .swiper-slide img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* 画像を中央配置 */
.swiper-image-center .swiper-slide img {
  display: block;
  margin: 0 auto;
}

/* ============================================
   ページネーション制御
   ============================================ */

/* ページネーションの色設定（クラス名で制御） */
.pagiwhite .swiper-pagination-bullet {
  background: #ffffff;
  opacity: 0.5;
}

.pagiwhite .swiper-pagination-bullet-active {
  background: #ffffff;
  opacity: 1;
}

.pagiblack .swiper-pagination-bullet {
  background: #000000;
  opacity: 0.5;
}

.pagiblack .swiper-pagination-bullet-active {
  background: #000000;
  opacity: 1;
}

.pagigray .swiper-pagination-bullet {
  background: #999999;
  opacity: 0.5;
}

.pagigray .swiper-pagination-bullet-active {
  background: #333333;
  opacity: 1;
}

/* ページネーション非表示 */
.swiper-no-pagination .swiper-pagination {
  display: none;
}

/* ページネーション位置調整 */
.pagitop .swiper-pagination {
  position: absolute;
  top: 10px;
  bottom: auto;
}

.pagibottom .swiper-pagination {
  position: absolute;
  bottom: 10px;
  top: auto;
}

.pagileft .swiper-pagination {
  position: absolute;
  left: 10px;
  right: auto;
  width: auto;
  height: auto;
  flex-direction: column;
}

.pagiright .swiper-pagination {
  position: absolute;
  right: 10px;
  left: auto;
  width: auto;
  height: auto;
  flex-direction: column;
}

.pagioutside .swiper-pagination {
  position: relative;
  margin-top: 20px;
}

.pagiinside .swiper-pagination {
  position: absolute;
  bottom: 20px;
  z-index: 10;
}

/* ページネーション位置の微調整 */
.pagitop10 .swiper-pagination {
  top: 10px;
}

.pagitop20 .swiper-pagination {
  top: 20px;
}

.pagitop30 .swiper-pagination {
  top: 30px;
}

.pagibottom10 .swiper-pagination {
  bottom: 10px;
}

.pagibottom20 .swiper-pagination {
  bottom: 20px;
}

.pagibottom30 .swiper-pagination {
  bottom: 30px;
}

/* ページネーションスタイル */
.swiper-pagination-dots .swiper-pagination-bullet {
  width: 8px;
  height: 8px;
  background: #999;
  opacity: 0.5;
}

.swiper-pagination-dots .swiper-pagination-bullet-active {
  opacity: 1;
  background: #333;
}

.swiper-pagination-large .swiper-pagination-bullet {
  width: 12px;
  height: 12px;
}

/* ============================================
   ナビゲーションボタン制御
   ============================================ */

/* ナビゲーションボタン非表示 */
.swiper-no-navigation .swiper-button-next,
.swiper-no-navigation .swiper-button-prev {
  display: none;
}

/* ナビゲーションボタン位置調整 */
.navoutside .swiper-button-next {
  right: -50px;
}

.navoutside .swiper-button-prev {
  left: -50px;
}

.navinside .swiper-button-next {
  right: 10px;
}

.navinside .swiper-button-prev {
  left: 10px;
}

.navtop .swiper-button-next,
.navtop .swiper-button-prev {
  top: 10px;
  bottom: auto;
  margin-top: 0;
}

.navbottom .swiper-button-next,
.navbottom .swiper-button-prev {
  bottom: 10px;
  top: auto;
  margin-top: 0;
}

.navcenter .swiper-button-next,
.navcenter .swiper-button-prev {
  top: 50%;
  transform: translateY(-50%);
  margin-top: 0;
}

/* ナビゲーションボタン位置の微調整 */
.navleft10 .swiper-button-prev,
.navleft10~.swiper-button-prev {
  left: 10px;
}

.navleft20 .swiper-button-prev,
.navleft20~.swiper-button-prev {
  left: 20px;
}

.navleft30 .swiper-button-prev,
.navleft30~.swiper-button-prev {
  left: 30px;
}

.navright10 .swiper-button-next,
.navright10~.swiper-button-next {
  right: 10px;
}

.navright20 .swiper-button-next,
.navright20~.swiper-button-next {
  right: 20px;
}

.navright30 .swiper-button-next,
.navright30~.swiper-button-next {
  right: 30px;
}

/* ナビゲーションボタンの逆方向配置（外に出した要素用） */
.navprevright10 .swiper-button-prev,
.navprevright10~.swiper-button-prev {
  right: 10px;
  left: auto;
}

.navprevright20 .swiper-button-prev,
.navprevright20~.swiper-button-prev,
.green_back .navprevright20~.swiper-button-prev {
  right: 20px;
  left: auto;
}

.navprevright30 .swiper-button-prev,
.navprevright30~.swiper-button-prev {
  right: 30px;
  left: auto;
}

.navnextleft10 .swiper-button-next,
.navnextleft10~.swiper-button-next {
  left: 10px;
  right: auto;
}

.navnextleft20 .swiper-button-next,
.navnextleft20~.swiper-button-next,
.green_back .navnextleft20~.swiper-button-next {
  left: 20px;
  right: auto;
}

.navnextleft30 .swiper-button-next,
.navnextleft30~.swiper-button-next {
  left: 30px;
  right: auto;
}

/* 外に出したページネーションとナビゲーションボタンのスタイル（一般化） */
/* 親要素にクラスを付けることで、外に出した要素を制御可能 */
.swiperoutside {
  position: relative;
}

.swiperoutside .swiper-pagination {
  position: relative;
  margin-top: 20px;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
  width: auto;
  height: auto;
}

.swiperoutside .swiper-pagination-bullet {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  display: inline-block;
  cursor: pointer;
  opacity: 1;
  margin: 0 4px;
}

.swiperoutside .swiper-button-next,
.swiperoutside .swiper-button-prev {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  margin-top: 0;
  z-index: 10;
  width: 44px;
  height: 44px;
  cursor: pointer;
}

.swiperoutside .swiper-button-next::after,
.swiperoutside .swiper-button-prev::after {
  font-size: 20px;
  font-weight: bold;
}

/* 外に出した要素の色設定（親要素のクラスで制御） */
.swiperoutside.pagiwhite .swiper-pagination-bullet {
  background: #ffffff;
  opacity: 0.5;
}

.swiperoutside.pagiwhite .swiper-pagination-bullet-active {
  background: #ffffff;
  opacity: 1;
}

.swiperoutside.navwhite .swiper-button-next,
.swiperoutside.navwhite .swiper-button-prev {
  color: #ffffff;
}

.swiperoutside.navwhite .swiper-button-next::after,
.swiperoutside.navwhite .swiper-button-prev::after {
  color: #ffffff;
}

/* 外に出した要素に対する位置調整（逆方向） */
.navprevright10 .swiper-button-prev {
  right: 10px;
  left: auto;
}

.navprevright20 .swiper-button-prev {
  right: 20px;
  left: auto;
}

.navprevright30 .swiper-button-prev {
  right: 30px;
  left: auto;
}

.navnextleft10 .swiper-button-next {
  left: 10px;
  right: auto;
}

.navnextleft20 .swiper-button-next {
  left: 20px;
  right: auto;
}

.navnextleft30 .swiper-button-next {
  left: 30px;
  right: auto;
}

.navtop10 .swiper-button-next,
.navtop10 .swiper-button-prev {
  top: 10px;
}

.navtop20 .swiper-button-next,
.navtop20 .swiper-button-prev {
  top: 20px;
}

.navbottom10 .swiper-button-next,
.navbottom10 .swiper-button-prev {
  bottom: 10px;
}

.navbottom20 .swiper-button-next,
.navbottom20 .swiper-button-prev {
  bottom: 20px;
}

/* ナビゲーションボタンスタイル */
.swiper-navigation-circle .swiper-button-next,
.swiper-navigation-circle .swiper-button-prev {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.9);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.swiper-navigation-square .swiper-button-next,
.swiper-navigation-square .swiper-button-prev {
  width: 40px;
  height: 40px;
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.9);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

/* ナビゲーションボタンの色設定（クラス名で制御） */
.navwhite .swiper-button-next,
.navwhite .swiper-button-prev {
  color: #ffffff;
}

.navwhite .swiper-button-next::after,
.navwhite .swiper-button-prev::after {
  color: #ffffff;
}

.navblack .swiper-button-next,
.navblack .swiper-button-prev {
  color: #000000;
}

.navblack .swiper-button-next::after,
.navblack .swiper-button-prev::after {
  color: #000000;
}

/* ============================================
   レスポンシブ対応
   ============================================ */

/* モバイル対応：グリッドレイアウトを1列に */
@media (max-width: 768px) {
  .swiper-responsive .swiper-wrapper {
    display: flex;
    grid-template-columns: none;
  }

  .swiper-responsive .swiper-slides-2 .swiper-wrapper,
  .swiper-responsive .swiper-slides-3 .swiper-wrapper,
  .swiper-responsive .swiper-slides-4 .swiper-wrapper,
  .swiper-responsive .swiper-slides-5 .swiper-wrapper,
  .swiper-responsive .swiper-slides-6 .swiper-wrapper {
    display: flex;
    grid-template-columns: none;
  }

  /* モバイルでナビゲーションボタン非表示 */
  .swiper-mobile-no-nav .swiper-button-next,
  .swiper-mobile-no-nav .swiper-button-prev {
    display: none;
  }

  /* モバイルでページネーション非表示 */
  .swiper-mobile-no-pagination .swiper-pagination {
    display: none;
  }
}

/* タブレット対応 */
@media (min-width: 769px) and (max-width: 1024px) {
  .swiper-tablet-slides-2 .swiper-wrapper {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
  }

  .swiper-tablet-slides-3 .swiper-wrapper {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
  }
}

/* ============================================
   その他の便利なクラス
   ============================================ */

/* オーバーフロー非表示 */
.swiper-overflow-hidden {
  overflow: hidden;
}

/* カーソルポインター */
.swiper-pointer .swiper-slide {
  cursor: pointer;
}

/* ホバーエフェクト */
.swiper-hover-scale .swiper-slide {
  transition: transform 0.3s ease;
}

.swiper-hover-scale:hover .swiper-slide {
  transform: scale(1.05);
}

/* フェードインアニメーション */
.swiper-fade-in .swiper-slide {
  opacity: 0;
  animation: fadeIn 0.5s ease-in-out forwards;
}

@keyframes fadeIn {
  to {
    opacity: 1;
  }
}