.mask_wrap{
  display: table;
  overflow: hidden;
}
.mask-wrap .mask{
  display: table;
  position: relative;
  margin-bottom: .25em;
  left: -100%;
  overflow: hidden;
}
.mask-wrap .mask-bg{
  display: block;
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: #eaeaea;
}

.image-wrapper {
  overflow: hidden;
 /* height: 400px; /* 任意の高さに合わせて調整 */
}

.slide-in-image {
  width: 100%;
  height: 100%;
  object-fit: cover;

  /* 初期状態：クリップして非表示 */
  clip-path: inset(100% 0 0 0); 
  transition: clip-path 1s ease-out;
}







/* btn animation */
a img.arrow_img {
	width: 0.8rem;
	height: auto;
}

a.btn_float {
	border: 1px solid #A09A91;
	border-radius: 60px;
	background-color: #fff;
	padding: 15px 25px;
	display: inline-block;
  transition: all .3s;
  font-size: 0.8rem;
}
a.btn_more img {
	margin-left: 2rem;
}
/*hoverをしたらボックスに影がつく*/
.btn_float:hover {
  box-shadow: 2px 5px 10px #A09A91;
  border-color: transparent;
}

.hover_zoom {
  transition: 1s all;
  border-radius: 5px;
}
.hover_zoom .img_zone {
  overflow: hidden;
  transition: 0.5s;
  width: 20rem;
  transition: 1s all;
  border-radius: 5px;
}
.hover_zoom:hover .img_zone img {
  transform: scale(1.05);
  transition: 1s all;
}

.next-arrow,
.prev-arrow {
  width: 19px !important;
	height: auto !important;
  
}


/**====================
lightbox
====================**/
.lightbox {
  position: absolute;
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%, -50%);
}