@charset "utf-8";

/* メイン
---------------------------------------------------- */
.swiper-wrapper img{margin: 0 auto;}
.swiper-container-horizontal > .swiper-pagination-bullets, .swiper-pagination-custom, .swiper-pagination-fraction{bottom: 0px!important;}
@media print, screen and (min-width: 1200px) {
.swiper-container-horizontal > .swiper-pagination-bullets, .swiper-pagination-custom, .swiper-pagination-fraction{
		bottom: 10px!important;
	}
}

@media only screen and (max-width: 767px)  {
.swiper-wrap {
  margin: 65px auto 0; /* pxは上余白 */
  width: calc(100% - 20px); /* pxは左右同じ余白合計 */
  max-width: 100vw;
  max-height: 100vh;
  position: relative;
  overflow: hidden;
  border-radius: 10px;
	}
}
@media print, screen and (min-width: 768px) {
.swiper-wrap {
  margin: 100px auto 0; /* pxは上余白 */
  width: calc(100% - 160px); /* pxは左右同じ余白合計 */
  max-width: 100vw;
  max-height: 100vh;
  position: relative;
  overflow: hidden;
  border-radius: 10px;
  }
}
@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-size: 3vw;
  font-family: serif;
  font-weight: bold;
  text-shadow: 2px 2px 8px #000;
  color: #fff;
  transform: translate(-50%,-50%);
}

@media only screen and (max-width: 767px)  {
.swiper-wrapper,
.slide-img { height: 65vh;}
.slide-img > img {
    object-fit: cover;
    width: 100%;
    height: 100%;
	}
}

@media print, screen and (min-width: 768px){
.swiper-wrapper,
.slide-img { height: 90vh;}
.slide-img img{
	object-fit: cover;
	width: 100vw;  
	height:100vh;
	}
}

@media print, screen and (min-width: 992px){
.swiper-wrapper,
.slide-img { height: 100vh;}
.slide-img img{
	object-fit: cover;
	width: 100vw;  
	height:100vh;
	}
}

/* メイン h2
---------------------------------------------------- */
@media only screen and (max-width: 767px)  {
#mainimage h2{
  position: absolute;
	z-index: 5;
	left: 5%;
  right:5%;
	bottom: 10%;
  max-width: 400px;  
  transition-duration: 300ms;
	}	
}
@media print, screen and (min-width: 768px){
#mainimage h2{
  position: absolute;
	z-index: 5;
	left: 6%;
	bottom: 10%;  
  max-width: 400px;
  transition-duration: 300ms;
	}	
}
@media print, screen and (min-width: 992px){
#mainimage h2{
  position: absolute;
	z-index: 5;
	left: 6%;
	bottom: 20%;
  max-width: 450px;  
	}	
}
@media print, screen and (min-width: 1600px){
#mainimage h2{
	left: 6%;
	bottom: 20%;  
  max-width: 500px;
	}
}

/* メイン スクロール
---------------------------------------------------- */
#mainimage{
  display: block;
  margin-bottom: 20px;
}
@media print, screen and (min-width: 768px) {
#mainimage{
  margin-bottom: 60px;
  }
}
@media print, screen and (min-width: 1200px) {
#mainimage{
  margin-bottom: 80px;
  }
}
#mainimage .mainscroll {
	font-family: "Literata", serif;
  position: absolute;
  bottom:0;
  left:20px;
  transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
	z-index: 9;
	}
#mainimage .mainscroll a{
    display: inline-block;
    position: absolute;
    bottom: 0;
    z-index: 100;
    padding: 10px 10px 220px;
    overflow: hidden;
    color: #665850;
    font-size: 18px;
    line-height: 1;
    letter-spacing: .2em;
    text-decoration: none;
    writing-mode: vertical-lr;
}
#mainimage .mainscroll a::after {
    content: '';
    position: absolute;
    bottom: 0%;
    left: 18px;
    width: 1px;
    height: 200px;
    background: #665850;
}
#mainimage .icon-icon {
  position: absolute;
  left: 5px;
  bottom: 200px;
  font-size: 22px;
  color: #eeaf1b;
  pointer-events: none;
  z-index: 2;
  animation: pawMove 2.0s ease-in-out infinite;
}
@keyframes pawMove {
  0% {
    transform: translateY(-5px);
    opacity: 0;
  }
  10% {
    opacity: 1;
  }
  70% {
    transform: translateY(200px);
    opacity: .4;
  }
  100% {
    transform: translateY(200px);
    opacity: 0;
  }
}