@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:50vh;}
.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;
	}
}


/* ----------------------------------------------------
  #mainimage
---------------------------------------------------- */
#mainimage{
  background: linear-gradient(to bottom, #fff 10%, #2dccbe 10%);
  padding-bottom: 10px;  
}
@media print, screen and (min-width: 768px) {
#mainimage{
  padding-bottom: 40px;
  }
}
@media print, screen and (min-width: 1200px) {
#mainimage{
  padding-bottom: 80px;
  }
}

/* メイン h2
---------------------------------------------------- */
@media only screen and (max-width: 767px)  {
#mainimage h2{
  position: absolute;
	z-index: 1;
	bottom: 38%;
	left: 10%;
	right:10%;
	}	
}
@media print, screen and (min-width: 768px){
#mainimage h2{
  position: absolute;
	z-index: 1;  
	top: 350px;
	left: 15%;
	right:15%;
	}	
}
@media print, screen and (min-width: 992px){
#mainimage h2{
	top: 300px;
	right: 50px;
  left:50%;
	}
}
@media print, screen and (min-width: 1200px){
#mainimage h2{
	top: 300px;
	right: 100px;
  left:60%;
	}
}

/* メイン サークル文字
---------------------------------------------------- */
#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: 14.4px;
}
@keyframes rotation {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}