/************************************
** スライドショー「swiper」設定
************************************/
/*トップページ*/
.swiper-container{
  width: 95%;
  /*max-width: 1440px;mac大画面用に外した*/
  height: 90vh;
  background-color: #e3e8ee;
  border-top-left-radius: 50px;
  border-top-right-radius: 50px;
  border-bottom-right-radius: 50px;
  border-bottom-left-radius: 50px;
}
.swiper-wrapper .swiper-slide img{
  object-fit: cover;
  width: 100%;
  height: 100%;
}
/*画像内側の枠線*/
.swiper-slide .img-offset_parent{
  position: absolute;
  display: table;
  width: 100%;
  height: 90vh;
  text-align: center;
}
.swiper-slide .img-offset-top {
  position: absolute;
  display: table-cell;
  width: 60%;
  height: 90vh;
  top: 30px;
  border-top: 1px solid #FDFBFB;
  right:8%;
}
.swiper-slide .img-offset-bottom {
  position: relative;
  display: table-cell;
  width: 85%;
  height: 90vh;
  bottom: 30px;
  border-bottom: 1px solid #FDFBFB;
}
.swiper-slide .img-offset-right {
  position: absolute;
  display: table-cell;
  width: 100%;
  height: 70%;
  right: 30px;
  border-right: 1px solid #FDFBFB;
  top:15%;
}
.swiper-slide .img-offset-left {
  position: absolute;
  display: table-cell;
  width: 100%;
  height: 40%;
  left: 30px;
  border-left: 1px solid #FDFBFB;
  bottom: 15%;
}


/*スライドショーに重なる文字アニメーション*/
.s-fade-text {
  position: absolute;
  top: 35%;
  left: 0;
  width: 100%;
  text-align: center;
  color: #FDFBFB;
  font-weight: 500;
  font-size: 5.0rem;
  text-shadow:1px 1px 3px #808080;
}
.swiper-slide .s-fade-text {
  animation: slideTextFade 1.75s ease 0s 1 normal;
}

@keyframes slideTextFade {
  0%,25% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

/*ページネーション*/
/* 全体のスタイル */
.swiper-pagination-bullet {
  position: relative;
  display: block;
	width: 15px; /* 幅 */
	height: 15px; /* 高さ */
	background: #FDFBFB; /* 色：緑 */
	opacity: 0.5; /* 半透明（デフォルトでは0.2） */
  -ms-writing-mode: tb-rl;
  writing-mode: vertical-rl;
  bottom: 100px;
  left: 5px;
  line-height: 150%;
}
/* 現在のスライドのスタイル */
.swiper-pagination-bullet-active {
	width: 15px; /* 幅 */
	height: 15px; /* 高さ */
	background: #6981A4; /* 色：黄色 */
	opacity: 1; /* 不透明 */
  -ms-writing-mode: tb-rl;
  writing-mode: vertical-rl;
}

/*ナビゲーションカスタマイズ*/
.swiper-button-prev,.swiper-button-next{
  background-color: #FDFBFB;
  width: 1.8em;
  height:1.8em;
  border-radius: 100%;
}

.swiper-button-next::after, 
.swiper-button-prev::after{
    font-family: FontAwesome;
    font-weight: 900;
    font-size: 2.5em;
    color: #69A481;
}
.swiper-button-next::after{
    content: "\f0a9";
}
.swiper-button-prev::after{
    content: "\f0a8";
}
.swiper-button-prev:hover::after,.swiper-button-next:hover::after{
  color: #A46969;
}

/*1023px以下*/
@media screen and (max-width: 1023px){
/*スライドショーに重なる文字アニメーション*/
  .s-fade-text {
    position: absolute;
    top: 45%;
    left: 0;
    width: 100%;
    text-align: center;
    color: #FDFBFB;
    font-size: 4.5rem;
  }
  .swiper-slide .img-offset-top {
    width: 50%;
    height: 90vh;
    top: 30px;
    right:15%;
  }
  .swiper-slide .img-offset-bottom {
    width: 75%;
    height: 90vh;
    bottom: 30px;
  }
  .swiper-slide .img-offset-right {
    width: 100%;
    height: 70%;
    right: 30px;
    top:15%;
  }
  .swiper-slide .img-offset-left {
    width: 100%;
    height: 65%;
    left: 30px;
    bottom: 15%;
  }
}

/*834px以下*/
@media screen and (max-width: 834px){
/*スライドショーに重なる文字アニメーション*/
  .s-fade-text {
    position: absolute;
    top: 40%;
    left: 0;
    width: 100%;
    text-align: center;
    color: #FDFBFB;
    font-size: 3.5rem;
  }
  .swiper-slide .img-offset-top {
    width: 50%;
    height: 90vh;
    top: 30px;
    right:15%;
  }
  .swiper-slide .img-offset-bottom {
    width: 75%;
    height: 90vh;
    bottom: 30px;
  }
  .swiper-slide .img-offset-right {
    width: 100%;
    height: 70%;
    right: 30px;
    top:15%;
  }
  .swiper-slide .img-offset-left {
    width: 100%;
    height: 65%;
    left: 30px;
    bottom: 15%;
  }
}

/*480px以下*/
@media screen and (max-width: 480px){
/*スライドショーに重なる文字アニメーション*/
  .s-fade-text {
    position: absolute;
    top: 35%;
    left: 0;
    width: 100%;
    text-align: center;
    color: #FDFBFB;
    font-size: 2.0rem;
  }
  .swiper-slide .img-offset-top {
    width: 50%;
    height: 90vh;
    top: 30px;
    right:15%;
  }
  .swiper-slide .img-offset-bottom {
    width: 75%;
    height: 90vh;
    bottom: 30px;
  }
  .swiper-slide .img-offset-right {
    width: 100%;
    height: 70%;
    right: 30px;
    top:15%;
  }
  .swiper-slide .img-offset-left {
    width: 100%;
    height: 65%;
    left: 30px;
    bottom: 15%;
  }
}