@charset "UTF-8";

  * {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
  }


  .top-container {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    align-items: stretch;
    position: relative; /* 子要素のabsolute配置の基準とする */
    padding-bottom: 40px; /* PC用paginationのためのスペースを確保 */
  }

  .top-left {
    width: 43.3%;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative; /* SPでpaginationを画像内に重ねるため */
  }

  .top-left img {
    width: 100%;
    height: auto;
    display: block;
  }

  .top-right {
    width: 56.7%;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .swiper {
    width: 100%;
    position: relative;
  }

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

  /* 共通paginationスタイル */
  .pagination-common {
    position: absolute; /* 親要素のposition:relativeを基準とする */
    display: flex;
    gap: 10px;
    justify-content: center;
    z-index: 10;
  }
 
  .swiper-pagination-sp { /* SP専用のpaginationクラス */
    display: none; /* PC時は非表示 */
  }
.swiper-pagination-pc {
  display: block;
}
@media (min-width: 768px) { 
	
  .swiper-pagination-bullet {
    width: 10px;
    height: 10px;
    background: #fff !important; 
    border-radius: 50%;opacity:1 !important; /* Swiperのデフォルトopacityを上書き */
  }

  .swiper-pagination-bullet-active {
	background: #444 !important;
  }
	}
	
  /* スマホ時：左画像内の上部に表示 */
  @media (max-width: 768px) {
	  
	  .pagination-common {
    position: absolute; /* 親要素のposition:relativeを基準とする */
    display: flex;
    gap: 8px;
    justify-content: center;
    z-index: 1;
  }
	  
    .top-container {
      flex-direction: column-reverse;
      padding-bottom: 0; /* SPではpaginationが画像内に入るため、padding不要 */
    }

    .top-left,
    .top-right {
      width: 100%;
    }

    .swiper-pagination-pc {
      display: none; /* SP時はPC用を非表示 */
    }
.swiper-pagination-sp {
    display: block;
  }
    .swiper-pagination-sp { /* SP専用のpaginationクラス */
      position: absolute; /* top-leftが基準 */
      top: 6px; /* top-leftの画像の上端から10px */
      left: 6px; /* 左端から10px */
      transform: none; /* PC用のtransform指定を解除 */
      bottom: auto; /* PC用のbottom指定を解除 */
      display: flex; /* SP時のみ表示 */
    }
	  .swiper-pagination-bullet {
    width: 6px;
    height: 6px;
    background: rgba(0, 0, 0, 0.3); /* 50%透過の黒 */
    border-radius: 50%;
    opacity: 1; /* Swiperのデフォルトopacityを上書き */
  }

  .swiper-pagination-bullet-active {
    background: #555 !important; 
  }
  }