.swipe-wrap{overflow:hidden;}

/* # =================================================================
   # swiper-button-prev/swiper-button-next
   # ================================================================= */

/* 共通設定 */
.swiper-button-prev,
.swiper-button-next {
  width: 60px;          /* 画像サイズに合わせる */
  height: 60px;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}

/* デフォルトの矢印を消す */
.swiper-button-prev::after,
.swiper-button-next::after {
  display: none;
}

/* 前へ */
.swiper-button-prev {
  background-image: url("../img/swip_prev.svg");
}

/* 次へ */
.swiper-button-next {
  background-image: url("../img/swip_next.svg");
}

/* 前へボタン */
.swiper-button-prev {
  left: 50px;   /* 数値を大きくすると内側へ */
}

/* 次へボタン */
.swiper-button-next {
  right: 50px;  /* 数値を大きくすると内側へ */
}

.swiper-button-prev,
.swiper-button-next {
  top: calc(50% - 20px); /* 20px分上へ */
}

.swiper-button-prev,
.swiper-button-next {
  opacity: 1;
  transition: opacity 0.3s ease;
}

.swiper-button-prev:hover,
.swiper-button-next:hover {
  opacity: 0.7; /* 好きな透明度に */
}


.swiper-button-prev.swiper-button-disabled,
.swiper-button-next.swiper-button-disabled {
  opacity:0;
  pointer-events: none;
}

@media only screen and (max-width: 768px) {
.swiper-button-prev,
.swiper-button-next {
    display: none;
  }
}


/* # =================================================================
   # index service
   # ================================================================= */


#bana-service .swiper-container {
    -webkit-box-sizing: border-box;
            box-sizing: border-box;  /* ★ここを content-box → border-box に変更 */
    width: 100%;
    margin: 0 auto;
    padding-left: calc((100vw - min(1400px, 85vw)) / 2);
	padding-right: 2rem;
	padding-bottom: 50px;
	position: relative;
}

#bana-service .swiper-slide {
	height: auto;
}

#bana-service .swiper-pagination {
  --active-left: 0%;
  --active-width: 0%;

	bottom:-30px;
  position: relative;
  height: 1px;
  background: var(--color-gray5);
  border-radius: 2px;
}

/* 本来のドットは非表示 */
#bana-service .swiper-pagination-bullet {
  display: none;
}

/* アクティブバー */
#bana-service .swiper-pagination::before {
  content: "";
  position: absolute;
  top: 0;
  left: var(--active-left);
  width: var(--active-width);
  height: 1px;
  background: var(--color-bk);
  border-radius: 2px;
  transition: all 0.3s ease;
}


@media only screen and (max-width: 768px) {
	#bana-service .swiper-container {padding-left: calc((100vw - min(1400px, 90vw)) / 2);}
}


/* # =================================================================
   # index farm
   # ================================================================= */


#bana-farm .swiper-container {
    -webkit-box-sizing: border-box;
            box-sizing: border-box;  /* ★ここを content-box → border-box に変更 */
    width: 100%;
    margin: 0 auto;
    padding-left: calc((100vw - min(1400px, 85vw)) / 2);
	padding-right: 2rem;
	padding-bottom: 50px;
	position: relative;
}

#bana-farm .swiper-slide {
	height: auto;
}

#bana-farm .swiper-pagination {
  --active-left: 0%;
  --active-width: 0%;

	bottom:-30px;
  position: relative;
  height: 1px;
  background:rgba(255,255,255,0.3);
  border-radius: 2px;
}

/* 本来のドットは非表示 */
#bana-farm .swiper-pagination-bullet {
  display: none;
}

/* アクティブバー */
#bana-farm .swiper-pagination::before {
  content: "";
  position: absolute;
  top: 0;
  left: var(--active-left);
  width: var(--active-width);
  height: 1px;
  background: var(--color-white);
  border-radius: 2px;
  transition: all 0.3s ease;
}

#bana-farm .swiper-button-prev,
#bana-farm .swiper-button-next {
  top: calc(50% - 80px); /* 20px分上へ */
}



@media only screen and (max-width: 768px) {
	#bana-farm .swiper-container {padding-left: calc((100vw - min(1400px, 90vw)) / 2);}
}

/* # =================================================================
   # index food
   # ================================================================= */


#bana-food .swiper-container {
    -webkit-box-sizing: border-box;
            box-sizing: border-box;  /* ★ここを content-box → border-box に変更 */
    width: 100%;
    margin: 0 auto;
    padding-left: calc((100vw - min(1400px, 85vw)) / 2);
	padding-right: 2rem;
	padding-bottom: 50px;
	position: relative;
}

#bana-food .swiper-slide {
	height: auto;
}

#bana-food .swiper-pagination {
  --active-left: 0%;
  --active-width: 0%;

	bottom:-30px;
  position: relative;
  height: 1px;
  background:rgba(255,255,255,0.3);
  border-radius: 2px;
}

/* 本来のドットは非表示 */
#bana-food .swiper-pagination-bullet {
  display: none;
}

/* アクティブバー */
#bana-food .swiper-pagination::before {
  content: "";
  position: absolute;
  top: 0;
  left: var(--active-left);
  width: var(--active-width);
  height: 1px;
  background: var(--color-white);
  border-radius: 2px;
  transition: all 0.3s ease;
}

#bana-food .swiper-button-prev,
#bana-food .swiper-button-next {
  top: calc(50% - 80px); /* 20px分上へ */
}


@media only screen and (max-width: 768px) {
	#bana-food .swiper-container {padding-left: calc((100vw - min(1400px, 90vw)) / 2);}
}


/* # =================================================================
   # index office
   # ================================================================= */


#bana-office .swiper-container {
    -webkit-box-sizing: border-box;
            box-sizing: border-box;  /* ★ここを content-box → border-box に変更 */
    width: 100%;
    margin: 0 auto;
    padding-left: calc((100vw - min(1400px, 85vw)) / 2);
	padding-right: 2rem;
	padding-bottom: 50px;
	position: relative;
}

#bana-office .swiper-slide {
	height: auto;
}

#bana-office .swiper-pagination {
  --active-left: 0%;
  --active-width: 0%;

	bottom:-30px;
  position: relative;
  height: 1px;
  background:var(--color-gray4);
  border-radius: 2px;
}

/* 本来のドットは非表示 */
#bana-office .swiper-pagination-bullet {
  display: none;
}

/* アクティブバー */
#bana-office .swiper-pagination::before {
  content: "";
  position: absolute;
  top: 0;
  left: var(--active-left);
  width: var(--active-width);
  height: 1px;
  background: var(--color-bk);
  border-radius: 2px;
  transition: all 0.3s ease;
}

#bana-office .swiper-button-prev,
#bana-office .swiper-button-next {
  top: calc(50% - 35px); /* 20px分上へ */
}


@media only screen and (max-width: 768px) {
	#bana-office .swiper-container {padding-left: calc((100vw - min(1400px, 90vw)) / 2);}
}

/* # =================================================================
   # subpage common
   # ================================================================= */


#bana-subcommon .swiper-container {
    -webkit-box-sizing: border-box;
            box-sizing: border-box;  /* ★ここを content-box → border-box に変更 */
    width: 100%;
    margin: 0 auto;
    padding-left: calc((100vw - min(1400px, 85vw)) / 2);
	padding-right: 2rem;
	padding-bottom: 50px;
	position: relative;
}

#bana-subcommon .swiper-slide {
	height: auto;
}

#bana-subcommon .swiper-pagination {
  --active-left: 0%;
  --active-width: 0%;

	bottom:-30px;
  position: relative;
  height: 1px;
  background:rgba(255,255,255,0.3);
  border-radius: 2px;
}

/* 本来のドットは非表示 */
#bana-subcommon .swiper-pagination-bullet {
  display: none;
}

/* アクティブバー */
#bana-subcommon .swiper-pagination::before {
  content: "";
  position: absolute;
  top: 0;
  left: var(--active-left);
  width: var(--active-width);
  height: 1px;
  background: var(--color-white);
  border-radius: 2px;
  transition: all 0.3s ease;
}




@media only screen and (max-width: 768px) {
	#bana-subcommon .swiper-container {padding-left: calc((100vw - min(1400px, 90vw)) / 2);}
}


/* # =================================================================
   # hotel画像
   # ================================================================= */
#bana-hotel .swiper-container{
	width: 100%;
	overflow: hidden;
}

#bana-hotel .swiper_hotelimg{
	padding-bottom:15px;
}

#bana-hotel .thumbnail_hotelimg .swiper-slide{
	opacity: 0.5;
	cursor: pointer;
}
#bana-hotel .thumbnail_hotelimg .swiper-slide-thumb-active{
	opacity: 1;
}
#bana-hotel .thumbnail_hotelimg img{
	vertical-align:bottom;
}

#bana-hotel .slide-img-box{overflow:hidden;aspect-ratio: 16 / 9;border-radius:10px;}
#bana-hotel .slide-img-box img{
	width:100%;
	height:100%;
	object-fit: cover;
	object-position: center;
	transition: all .5s;
}

@media screen and (max-width: 599px) {
#bana-hotel .swiper_hotelimg{
	padding-bottom:10px;
}
}