/* # =================================================================
   # header
   # ================================================================= */

#fv .swiper-container {
  max-width: 100vw;
}

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

@media screen and (max-width:768px){
	#fv .swiper-container {
		max-width: 100vw;
		margin-top:0;
	}
	.slide-img img{
		object-fit: cover;
		height: 100vh;
		width: 100%;
	}
}

@media (orientation: landscape){
	.slide-img img{
		object-fit: cover;
		height: 100vh;
		width: 100%;
	}	
}

@media screen and (max-width:599px){
	.slide-img img{
		object-fit: cover;
		height:100vh;
		width: 100%;
	}
}


/* # =================================================================
   # index voice
   # ================================================================= */
#bana-voice{
	width: 100%;
	position: relative;
}


#bana-voice .swiper-container {
	width: 85%;
	margin-left:auto;
	margin-right:auto;
    padding-bottom: 80px;
}

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

#bana-voice .swiper-pagination{
	text-align:center;
}


#bana-voice .swiper-pagination-bullet {
  margin: 0 5px!important;
  width: 8px;
  height: 8px;
	background: var(--color-gray1);
	opacity: 0.3;
}

#bana-voice .swiper-pagination-bullet-active {
  background: var(--color-gray1);
  opacity: 1;
}

/* 前へ次への矢印カスタマイズ */
#bana-voice .swiper-button-prev,
#bana-voice .swiper-button-next {
  height: 50px;
  width: 50px;
}

#bana-voice .swiper-button-prev,
#bana-voice .swiper-button-next {
	width:  60px; /* ボタンの幅 */
	height: 60px; /* ボタンの高さ */
	background-size: 60px 60px; /* 背景画像としてのサイズ（＝表示したい画像サイズ） */
	margin-top: -60px; /* 縦中央配置用：ボタンの高さの半分のネガティブマージン（top:50%がすでに設定されている） */
	z-index:9999;
}

/* 前への矢印カスタマイズ */
#bana-voice .swiper-button-prev {
  background-image: url(../img/swiper_yaji_r.svg);
}
/* 次への矢印カスタマイズ */
#bana-voice .swiper-button-next {
  background-image: url(../img/swiper_yaji_l.svg);z
}

@media screen and (max-width:768px){
	#bana-voice .swiper-container {width: 90%;}
}


/* # =================================================================
   # index mcm
   # ================================================================= */
#bana-mcm .swiper-container {
	width: 100%;
	margin-left:auto;
	margin-right:auto;
    padding-bottom: 80px;
}

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

#bana-mcm .swiper-pagination{
	text-align:center;
}


#bana-mcm .swiper-pagination-bullet {
  margin: 0 5px!important;
  width: 8px;
  height: 8px;
	background: var(--color-gray1);
	opacity: 0.3;
}

#bana-mcm .swiper-pagination-bullet-active {
	background: var(--color-gray1);
  opacity: 1;
}


/* # =================================================================
   # index news
   # ================================================================= */
#bana-news .swiper-container {
	width: 100%;
	margin-left:auto;
	margin-right:auto;
    padding-bottom: 80px;
}

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

#bana-news .swiper-pagination{
	text-align:center;
}


#bana-news .swiper-pagination-bullet {
  margin: 0 5px!important;
  width: 8px;
  height: 8px;
	background: var(--color-gray1);
	opacity: 0.3;
}

#bana-news .swiper-pagination-bullet-active {
  background: var(--color-gray1);
  opacity: 1;
}