:root {
	  --slide-w: 400px;
	  --gap: 60px;
	}
	
	.carousel-wrap {
	  position: relative;
	  margin: 0 auto;
	  width: 100%;
	}
	
	.controls {
	  display: flex;
	  justify-content: center;
	  margin-bottom: 30px;
	}
	.controls button {
	  background: #fff;
	  border: 2px solid #50accc;
	  border-radius: 999px;
	  padding: 10px 14px;
	  margin-left: 60px;
	  width: 60px;
	  height: 60px;
	  font-weight: 700;
	  color: #50accc;
	  cursor: pointer;
	}
	.controls button:first-child { margin-left:0; }
	.controls button:active { transform:scale(.98); }
	
	.viewport { overflow:hidden; }
	.track {
	  display:flex;
	  gap: var(--gap);
	  will-change: transform;
	}
	
	.slide {
	  flex-shrink:0;
	  width: var(--slide-w);
	  display:flex;
	  flex-direction: column;
	  align-items:center;
	  justify-content:flex-start;
	  text-decoration:none;
	  color:#132f4d;
	}
	.slide figure {
	  overflow:hidden;
	  border-radius: 80px 1px 80px 1px;
	  width:100%;
	  height:320px;
	}
	.slide img {
	  width:100%;
	  height:320px;
	  object-fit:cover;
	  transition:0.5s all;
	}
	.slide:hover img { transform:scale(1.2,1.2); transition:0.7s all; }
	
	.caption01 {
	  display: table;
	  padding-top: 20px;
	  margin: 0 auto 10px 0;
	  font-family: "Commissioner", sans-serif;
	  font-size:16px;
	}
	.caption01 .new { display:table-cell; background-color:#f09520; padding:2px 8px; color:white; line-height:1; }
	.caption01 .day { display:table-cell; padding-left:15px; line-height:1; }
	.caption02 {
		overflow:hidden;
		display: -webkit-box;
	  -webkit-box-orient: vertical;
	  -webkit-line-clamp: 2; /* 行数制限 */
		width: 100%;
		text-align: left;
	}
	
	.viewport {
	  position: relative;
	  overflow: hidden;
	  -webkit-mask-image: linear-gradient(to right, 
	    rgba(0,0,0,1) 70%, 
	    rgba(0,0,0,0) 100%);
	  mask-image: linear-gradient(to right, 
	    rgba(0,0,0,1) 70%, 
	    rgba(0,0,0,0) 100%);
	}

	@media screen and (max-width: 991px) {
	  :root {
	    --gap: 20px;      /* スライド間隔を狭める */
	    --slide-w: 320px; /* スライド幅も画像サイズに合わせて縮小 */
	  }
	
	  .slide figure,
	  .slide img {
	  	border-radius: 50px 1px 50px 1px;
	    width: 90%;   /* 画像幅80% */
	    height: auto; /* 高さは縦横比を維持 */
	  }
	}
	@media print {
	  :root {
	    --gap: 20px;      /* スライド間隔を狭める */
	    --slide-w: 320px; /* スライド幅も画像サイズに合わせて縮小 */
	  }
	
	  .slide figure,
	  .slide img {
	  	border-radius: 50px 1px 50px 1px;
	    width: 60% !important;   /* 画像幅80% */
	    height: auto; /* 高さは縦横比を維持 */
	  }
	}
	@media screen and (max-width: 767px) {
	  :root {
	    --gap: 10px;      /* スライド間隔を狭める */
	    --slide-w: 200px; /* スライド幅も画像サイズに合わせて縮小 */
	  }
	
	  .slide figure,
	  .slide img {
	  	border-radius: 30px 1px 30px 1px;
	    width: 80%;   /* 画像幅80% */
	    height: auto; /* 高さは縦横比を維持 */
	  }
	}