@charset "utf-8";
/* CSS Document */

/**********************************************************/
/** PC専用 *************************************************/
/** スライダー表示のあるページ（トップ、カテゴリ、商品ページ）　*****/
/**********************************************************/

/* 【TOPページ】用スライダー（1200x500px） */
/* 外枠：下のドットのためのスペースを確保する */
.slider-outer {
    position: relative;
    width: 100%;
    max-width: 1200px;
    margin: 5px auto;
    /* 下にドット用の空き地を作る */
    padding-bottom: 30px; 
}
/* スライダー本体：左右のバナーを隠す */
.top-main-slider {
    width: 100%;
    aspect-ratio: 1200 / 500;
    overflow: hidden; /* これで左右のはみ出しが消えます */
}
.top-main-slider img {
  width: 100%;
  height: 100%;
	object-fit: cover;
  display: block;
}

/* ドットの配置：slider-outerの下端に固定 */
.custom-pagination.swiper-pagination {
    position: absolute;
    bottom: 0 !important;
    left: 0;
	text-align: center;
	width: 100%;
	  line-height: 1;      /* 高さを整える */
	z-index: 1 !important;	/* 他の要素に被るので表示順位を下げる */
}
/* ページネーション（ドット）のカスタマイズ */
.custom-pagination .swiper-pagination-bullet {
  background: #ccc; /* 未選択の色 */
  opacity: 1;
}
.custom-pagination .swiper-pagination-bullet-active {
  background: #d4a373; /* ショップのアクセントカラーに合わせて変更してください */
  width: 20px;       /* 選択中だけ横長にすると今風でおしゃれです */
  border-radius: 4px;
	opacity: 1;
}


/* 【ヘッダー（カテゴリ・商品ページ）】用スライダー（1200x200px） */
/* .slider-outerはトップと共通のものを使用 */
/* スライダーの土台 */
.head-main-slider {
  width: 100%;
  aspect-ratio: 1200 / 200;
  overflow: hidden; /* これで左右のはみ出しが消えます */
}

.head-main-slider img {
  width: 100%;
  height: 100%;
	object-fit: cover;
  display: block;
}