@layer legacy {[data-static-html] .content {
  width: 300px;
  height: 225px;
}
[data-static-html] .content:nth-child(1) {
  background-color: tomato;
}
[data-static-html] .content:nth-child(2) {
  background-color: orange;
}
[data-static-html] .content:nth-child(3) {
  background-color: blue;
}
[data-static-html] .content:nth-child(4) {
  background-color: green;
}
/* スライドレールの枠 */
[data-static-html] .wrap {
  overflow: hidden;
  display: flex;
  align-items: center;
  height: 340px;
  margin-bottom: 100px;
}
/* content4つをまとめたスライドブロック */
[data-static-html] .slideshow {
  display: flex;
  -webkit-animation: loop-slide 20s infinite linear 1s both;
  animation: loop-slide 20s infinite linear 1s both;
}
@-webkit-keyframes loop-slide {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-100%);
  }
}
@keyframes loop-slide {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-100%);
  }
}
/* ホバー時に動きを止める（パターン2・3）*/
[data-static-html] .slide-paused:hover .slideshow {
  -webkit-animation-play-state: paused;
  animation-play-state: paused;
}
/* ホバー時の装飾（パターン3） */
[data-static-html] .content-hover {
  transition: all 0.4s;
  margin-right: 20px;
}
[data-static-html] .content-hover:hover {
  transform: translateY(-20px);
  border-radius: 10% 10%;
  box-shadow: 0 3px 10px 0 #333;
  opacity: 0.8;
  cursor: pointer;
  overflow:		hidden;
  position:		relative;
}


/* ホバー効果<div class="sample1"><img src="./fruit.jpg" alt="フルーツ寄せ集め" /><div class="mask"><div class="caption">It's fresh !</div></div></div>*/
[data-static-html] .sample1 {
	width:			300px;
	height:			225px;
	overflow:		hidden;
	position:		relative;	/* 相対位置指定 */
}
[data-static-html] .sample1 .caption {
	font-size:		130%;
	text-align: 		center;
	padding-top:		80px;
	color:			#fff;
}
[data-static-html] .sample1 .mask {
	width:			100%;
	height:			100%;
	position:		absolute;	/* 絶対位置指定 */
	top:			0;
	left:			0;
	opacity:		0;	/* マスクを表示しない */
	background-color:	rgba(0,0,0,0.7);	/* マスクは半透明 */
	-webkit-transition:	all 0.2s ease;
	transition:		all 0.2s ease;
}
[data-static-html] .sample1:hover .mask {
	opacity:		1;	/* マスクを表示する */
}
}