@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: 0 10px 10px 10px;
	}
}
@media print, screen and (min-width: 768px) {
.swiper-wrap {
  margin: 85px auto 0; /* pxは上余白 */
  width: calc(100% - 160px); /* pxは左右同じ余白合計 */
  max-width: 100vw;
  max-height: 100vh;
  position: relative;
  overflow: hidden;
  border-radius: 0 10px 10px 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: 1;
	bottom: 40px;
	left: 20px;
	right: 20px;
  max-width: 350px;
  min-width: 200px;
	}	
}
@media print, screen and (min-width: 768px){
#mainimage h2{
  position: absolute;
	z-index: 1;  
	top: 200px;
	left: 60px;
	bottom: 0%;
	}	
}
@media print, screen and (min-width: 992px){
#mainimage h2{
	top: 300px;
	left: 100px;
	}
}

/* メイン サークル文字
---------------------------------------------------- */
#mainimage .circleText_area {
  width: 80px;
  height: 80px;
  margin: auto;
}

@media only screen and (max-width: 767px) {
#mainimage .circleText_area{
  position: absolute;
	z-index: 1;
	left: 20px;
	bottom: 170px;
	}
}

@media print, screen and (min-width: 768px){
#mainimage .circleText_area {
  position: absolute;
	z-index: 1; 
  width: 100px;
  height: 100px;
}
#mainimage .circleText_area{
	top: -630px;
	left: 40px;
	bottom: 0%;
	}	
}

@media print, screen and (min-width: 992px){
#mainimage .circleText_area {
  width: 150px;
  height: 150px;
}
#mainimage .circleText_area{
	top: -380px;
	left: 60px;
	bottom: 0%;
	}	
}

#mainimage .circleText {
  overflow: visible;
  animation: rotation 24s linear infinite; /*数値が大きいとスピードが遅くなる */
 }
#mainimage .circleText__circle {
  fill: none;
}
#mainimage .circleText__text {
  fill: #d2b07f;
  font-family: "Literata", serif;  
  font-size: 11px;
}
@keyframes rotation {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

/* メイン スクロール
---------------------------------------------------- */
#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: #412214;
    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: #d2b07f;
}
#mainimage .paw-icon {
  position: absolute;
  left: 5px;
  bottom: 200px;
  font-size: 22px;
  color: #d2b07f;
  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;
  }
}