@charset "utf-8";

/* Swiperの設定 */
.top-slide {
	/*width: 900px;*/
	margin: 0 auto;
	padding: 15px 0 0;
	height: 445px;
}

.swiper-area {
  /*margin-inline: auto;
  max-width: 900px;*/
  width: 100%;
  margin: 0 auto;
  position: relative;
	overflow: hidden; 
}

.swiper-container {
	overflow: visible;
	width: 100%;
    margin: 0 auto;
}

.swiper-wrapper {
	align-items: center; /* 垂直方向の中央 */
}

.swiper-slide {
	display: flex;
	justify-content: center; /* スライドの中身（画像）を中央に */
	align-items: center;
	width: 820px; 
	opacity: 0.5; /* 左右の画像：薄くする */
    transition: opacity 0.6s; /* ふんわり変化 */
}

.swiper-slide-active {
  opacity: 1; /* 中央の画像：透過なし */
}

.swiper-slide img {
	width: 100%;
	height: 410px; /* 固定したい高さ */
	object-fit: cover; /* 画像を隙間なく埋める */
}

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

/* すべてのドット（共通） */
.swiper-pagination-bullet {
    background: #666 !important;
    opacity: 1;
	width: 10px;
	height: 10px;
	margin: 0 7px;
	transition: all 0.2s;
}

/* ホバー時のドット */
.swiper-pagination-bullet:hover {
  opacity: 1;      /* ホバー時に不透明にする */
  background: #fff!important;
}

/* アクティブ（現在表示中）のドット */
.swiper-pagination-bullet-active {
	background: #fff !important; /* アクティブ時の色 */
}

/* 共通設定：標準の矢印を消し、共通のサイズと背景色を適用 */
.swiper-button-prev::after,
.swiper-button-next::after {
	content: "" !important;
}

/*.swiper-button-prev {
    left: 180px !important;
}
.swiper-button-next {
    right: 180px !important;
}*/

.swiper-button-prev,
.swiper-button-next {
	position: absolute;
	top: 50%;
	
  width: 50px !important;    /* 幅を50pxに指定 */
  height: 36.75px !important; /* 比率を維持した高さ */
  background: #ccc;
  clip-path: polygon(0 50%, 63.2% 50%, 63.2% 0, 100% 50%, 63.2% 100%, 63.2% 50%, 0 50%);
  margin-top: -18px;         /* 縦中央寄せの補正（高さの半分） */
  z-index: 99;
}

/* 左矢印：180度回転させて向きを左にする */
.swiper-button-prev {
  left: calc(50% - 410px - 25px) !important; /* 410px + 隙間(70px) */
  right: auto !important;
  transform: rotate(180deg);
}

/* 右矢印：そのまま */
.swiper-button-next {
  right: calc(50% - 410px - 25px) !important;
  left: auto !important;
}

.swiper-button-next:hover,
.swiper-button-prev:hover {
  background: #666; /* ホバー時に少し明るく */
}