@charset "utf-8";
/* スワイパー　基本
---------------------------------------------------- */
.swiper-wrapper img {
  margin: 0 auto;
}
.swiper-wrap {
  position: relative;
  overflow: hidden;
  margin: 0 calc(50% - 50vw);
  max-width: 100vw;
}
.swiper-container-horizontal > .swiper-pagination-bullets, .swiper-pagination-custom, .swiper-pagination-fraction {
  bottom: 0 !important;
}
@media print, screen and (min-width: 1200px) {
  .swiper-container-horizontal > .swiper-pagination-bullets, .swiper-pagination-custom, .swiper-pagination-fraction {
    bottom: 10px !important;
  }
}
.swiper-button-next, .swiper-button-prev {
  position: absolute !important;
  z-index: 200 !important;
}
@keyframes zoom-in {
  0% {
    transform: scale(1.2);
  }
  100% {
    transform: scale(1);
  }
}

/* スライド画像のアニメーション
---------------------------------------------------- */
.swiper-slide-active .slide-img, .swiper-slide-duplicate-active .slide-img, .swiper-slide-prev .slide-img {
  animation: zoom-in 10s linear 0s 1 normal both;
}

/* スライドテキスト
---------------------------------------------------- */
.slide-text {
  position: absolute;
  top: 50%;
  left: 50%;
  font-family: serif;
  font-weight: bold;
  font-size: 3vw;
  color: #fff;
  text-shadow: 2px 2px 8px #000;
  transform: translate(-50%, -50%);
}

/* モバイル
---------------------------------------------------- */
@media only screen and (max-width: 767px) {
  .swiper-wrapper, .slide-img {
    height: 70vh;
  }
  .slide-img > img {
    object-fit: cover;
    object-position: 60% center;
    width: 100%;
    height: 100%;
  }
}

/* タブレット～PC
---------------------------------------------------- */
@media print, screen and (min-width: 768px) {
  .swiper-wrapper, .slide-img {
    height: 100vh;
  }
  .slide-img img {
    width: 100vw;
    height: 100vh;
    object-fit: cover;
    object-position: 60% center; /* 表示位置 */
  }
}

/* PC　小画面
---------------------------------------------------- */
@media print, screen and (min-width: 1200px) {
  .swiper-wrapper, .slide-img {
    height: 100vh;
  }
  .slide-img img {
    height: 100vh;
    object-position: 0% center; /* 表示位置 */
  }
}
/* PC　大画面
---------------------------------------------------- */
@media print, screen and (min-width: 1400px) {
  .swiper-wrapper, .slide-img {
    height: 100vh;
  }
  .slide-img img {
    height: 100vh;
    object-position: 0% center; /* 表示位置 */
  }
}

/* メイン
---------------------------------------------------- */
#mainimage {
  position: relative;
}

/* メインテキスト
---------------------------------------------------- */
@media only screen and (max-width: 767px) {
.title01 {
  position: absolute;
  z-index: 1;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 87%;
  text-align: center;
  max-width: 574px;
  transition-duration: 300ms;
  }
}
@media print, screen and (min-width: 768px) {
.title01 {
  position: absolute;
  z-index: 1;
  top: auto;
  transform: none;    
  bottom: 275px;
  left: 110px;
  width: 600px;
  text-align: left;
  transition-duration: 300ms;  
  }
}
@media print, screen and (min-width: 992px) {
.title01 {
	bottom: 260px;
	left: 140px;
  width: 700px;
  }
}
@media print, screen and (min-width: 1200px) {
.title01 {
	bottom: 250px;
	left: 180px;
  width: 800px;
  }
}
@media print, screen and (min-width: 1400px) {
.title01 {
	bottom: 235px;
	left: 200px;
  width: 838px;  
  }
}

/* メインテキスト　アニメーション
---------------------------------------------------- */
.title01 {
  opacity: 0;
}

/* --- body.appear がついたらアニメーションを開始 --- */
body.appear .title01 {
  animation-name: CopyAnimeAppear;
  animation-duration: 1.0s;      /* 1.0秒かけてじわっと表示 */
  animation-delay: 0.6s;         /* 少し待ってからスタート */
  animation-fill-mode: forwards; /* アニメーション終了時の状態（opacity:1）をキープ */
}

/* --- キャッチコピー用のアニメーション（少し下から上に浮き上がる） --- */
@keyframes CopyAnimeAppear {
  0% {
    opacity: 0;
    transform: translate(0, 40px); /* 40px下に下げておく */
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);    /* 本来の位置に戻る */
  }
}

/* ※モバイル環境（もともと中央配置のためにtranslate(-50%, -50%)を使っている場合）のバグを防ぐ記述 */
@media only screen and (max-width: 767px) {
  @keyframes CopyAnimeAppear {
    0% {
      opacity: 0;
      transform: translate(-50%, -30%); /* 中央配置を維持しつつ、少し下から */
    }
    100% {
      opacity: 1;
      transform: translate(-50%, -50%); /* 元の中央位置へ */
    }
  }
}