.swiper{z-index:3;}

/*トップスライド*/

#index-topimg{
background:#6c689a;
padding:0;
}
#index-topimg .swiper-slide{
	width:90%;
	max-width:980px;
	
	}
#index-topimg .slide-media a{
	display:block;
	position:relative;
	padding:2rem 0;
}
/*
#index-topimg .slide-media a:after{
	content:"";
	position:absolute;
	z-index:-1;
	left:0;
	top:2rem;
	width:100%;
	height:calc(100% - 4rem);
	background:#333;
	border-radius:80px;
	filter: drop-shadow(0 0px 10px rgba(0, 0, 0, 0.3));
}*/
#index-topimg .slide-media img{
	filter:drop-shadow(5px 5px 5px rgba(0,0,0,0.5));
}

#index-topimg .swiper-slide-prev img,
#index-topimg .swiper-slide-next img{filter: brightness(0.3) drop-shadow(5px 5px 5px rgba(0,0,0,0.5));}

@media only screen and (min-width: 481px) {
#index-topimg .slide-media img.sp{display:none;}
}
@media only screen and (max-width: 480px) {
#index-topimg .slide-media img.pc{display:none;}
}

@media screen and (max-width: 640px){
	#index-topimg .swiper-slide{width:80%;}
}


/*ゆっくり*/


  .card05 {
    overflow: hidden;
  }
	.card05 a:hover{opacity:1;}
  .card05 .swiper {
    overflow: visible;
  }
  .card05 .swiper-wrapper {
    -webkit-transition-timing-function: linear !important;
            transition-timing-function: linear !important;
  }
	
  .card05 .swiper-slide {
    width: -webkit-max-content;
    width: -moz-max-content;
    width: max-content;
  }
  .card05 .slide {
    overflow: hidden;
    width: 18rem;/*スライド画像サイズ変更はここ*/
  }
  .card05 .slide-media img {
		aspect-ratio: 4 / 3;
  object-fit: cover;
	filter: brightness(0.8);
  }
  .card05{
padding:0 ;
/*background:#63b041;*/
}
.card05.renga-bg:before,
.card05.renga-bg:after{
	height:130px;
}
.card05 .slide-media{
/*clip-path: polygon(
  20px 0, calc(100% - 20px) 0,
  100% 20px, 100% calc(100% - 20px),
  calc(100% - 20px) 100%, 20px 100%,
  0 calc(100% - 20px), 0 20px
);*/
    
position: relative;
}
.card05 .slide-media span{
	position:absolute;
	z-index: 4;
	color: #fff;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	font-size: clamp(12px, 2vw, 21px);
	font-weight:bold;
	filter: drop-shadow(2px 2px 3px black);
	width: 100%;
    text-align: center;
}
.card05 .swiper:hover .slide:hover img{filter: brightness(1);}
.card05 .swiper:hover .slide:not(:hover) img{filter: brightness(0.6);}

  @media only screen and (max-width: 599px) {
   /* html {
      font-size: 50%;
    }
    .pc-tab {
      display: none !important;
    }*/
    .card05 .slide {
      width: 10rem;
    }
		.card05.renga-bg:before,
.card05.renga-bg:after{
	height:80px;
}
  }

  @media only screen and (min-width: 1025px) {
    /*.tab-sp {
      display: none !important;
    }
    .swiper-button-prev::before, .swiper-button-next::before {
      -webkit-transition: var(--transition);
      transition: var(--transition);
    }
    .swiper-button-prev:hover::before, .swiper-button-next:hover::before {
      -webkit-transform: scale(1.2);
              transform: scale(1.2);
    }*/
    .card05 .slide {
      webkit-transition: var(--transition);
      transition: var(--transition);
    }
    .card05 .slide img {
      -webkit-transition: var(--transition);
      transition: var(--transition);
    }
	
    .card05 .slide:hover {
     
    }
    .card05 .slide:hover img {
      -webkit-transform: translateY(0);
              transform: translateY(0);
    }
    .card05 .swiper:hover .slide:not(:hover) {
      /*opacity: 0.6;*/
    }	/**/
  }

  @media only screen and (max-width: 480px) {
		 /*.card05 .slide-media{
clip-path: polygon(
  10px 0, calc(100% - 10px) 0,
  100% 10px, 100% calc(100% - 10px),
  calc(100% - 10px) 100%, 10px 100%,
  0 calc(100% - 10px), 0 10px
);
}
   .sp {
      display: none !important;
    }*/
  }


.room-swiper {
	margin-bottom:2rem;
}
.room-swiper .item-img-wrap {
  max-width: 800px;
  margin: 0 auto;
}

.room-swiper .main-swiper img {
  width: 100%;
  height: auto;
  display: block;
	aspect-ratio: 16 / 9;
    object-fit: cover;
}

.room-swiper .thumb-swiper {
  margin-top: 10px;
}

.room-swiper .thumb-swiper .swiper-slide {
  width: calc((100% - 20px) / 5); /* 5枚並ぶ時の均等幅 */
  opacity: 0.5;
  cursor: pointer;
}

.room-swiper .thumb-swiper .swiper-slide-thumb-active {
  opacity: 1;
}


.swiper-button-next, .swiper-button-prev{color:#9388bc;}


@media only screen and (max-width: 768px) {
:root{--swiper-navigation-size: 34px;}

	}

  @media only screen and (max-width: 480px) {
:root{--swiper-navigation-size: 24px;}

	}