CSS ANIM LAB×500

<button class="bt-sw-r">HOVER ME</button>

<style>
.bt-sw-r{
  position:relative; z-index:0; overflow:hidden;
  display:inline-block;padding:14px 38px;font-weight:700;font-size:15px;cursor:pointer;
  color:#191F2E; background:transparent;
  border:2px solid #191F2E; border-radius:8px;
  transition:color .35s;
}
.bt-sw-r::before{
  content:""; position:absolute; inset:0; z-index:-1;
  background:#3A46E8;
  transform:translateX(-101%);
  transition:transform .35s cubic-bezier(.4,0,.2,1);
}
.bt-sw-r:hover{ color:#fff; }
.bt-sw-r:hover::before{ transform:translateX(0); }
</style>

<button class="bt-sw-l">HOVER ME</button>

<style>
.bt-sw-l{
  position:relative; z-index:0; overflow:hidden;
  display:inline-block;padding:14px 38px;font-weight:700;font-size:15px;cursor:pointer;
  color:#191F2E; background:transparent;
  border:2px solid #191F2E; border-radius:8px;
  transition:color .35s;
}
.bt-sw-l::before{
  content:""; position:absolute; inset:0; z-index:-1;
  background:#3A46E8;
  transform:translateX(101%);
  transition:transform .35s cubic-bezier(.4,0,.2,1);
}
.bt-sw-l:hover{ color:#fff; }
.bt-sw-l:hover::before{ transform:translateX(0); }
</style>

<button class="bt-sw-d">HOVER ME</button>

<style>
.bt-sw-d{
  position:relative; z-index:0; overflow:hidden;
  display:inline-block;padding:14px 38px;font-weight:700;font-size:15px;cursor:pointer;
  color:#191F2E; background:transparent;
  border:2px solid #191F2E; border-radius:8px;
  transition:color .35s;
}
.bt-sw-d::before{
  content:""; position:absolute; inset:0; z-index:-1;
  background:#3A46E8;
  transform:translateY(-101%);
  transition:transform .35s cubic-bezier(.4,0,.2,1);
}
.bt-sw-d:hover{ color:#fff; }
.bt-sw-d:hover::before{ transform:translateY(0); }
</style>

<button class="bt-sw-u">HOVER ME</button>

<style>
.bt-sw-u{
  position:relative; z-index:0; overflow:hidden;
  display:inline-block;padding:14px 38px;font-weight:700;font-size:15px;cursor:pointer;
  color:#191F2E; background:transparent;
  border:2px solid #191F2E; border-radius:8px;
  transition:color .35s;
}
.bt-sw-u::before{
  content:""; position:absolute; inset:0; z-index:-1;
  background:#3A46E8;
  transform:translateY(101%);
  transition:transform .35s cubic-bezier(.4,0,.2,1);
}
.bt-sw-u:hover{ color:#fff; }
.bt-sw-u:hover::before{ transform:translateY(0); }
</style>

<button class="bt-sw-ch">HOVER ME</button>

<style>
.bt-sw-ch{
  position:relative; z-index:0; overflow:hidden;
  display:inline-block;padding:14px 38px;font-weight:700;font-size:15px;cursor:pointer;
  color:#191F2E; background:transparent;
  border:2px solid #191F2E; border-radius:8px;
  transition:color .35s;
}
.bt-sw-ch::before{
  content:""; position:absolute; inset:0; z-index:-1;
  background:#3A46E8;
  transform:scaleX(0);
  transition:transform .35s cubic-bezier(.4,0,.2,1);
}
.bt-sw-ch:hover{ color:#fff; }
.bt-sw-ch:hover::before{ transform:scaleX(1); }
</style>

<button class="bt-sw-cv">HOVER ME</button>

<style>
.bt-sw-cv{
  position:relative; z-index:0; overflow:hidden;
  display:inline-block;padding:14px 38px;font-weight:700;font-size:15px;cursor:pointer;
  color:#191F2E; background:transparent;
  border:2px solid #191F2E; border-radius:8px;
  transition:color .35s;
}
.bt-sw-cv::before{
  content:""; position:absolute; inset:0; z-index:-1;
  background:#3A46E8;
  transform:scaleY(0);
  transition:transform .35s cubic-bezier(.4,0,.2,1);
}
.bt-sw-cv:hover{ color:#fff; }
.bt-sw-cv:hover::before{ transform:scaleY(1); }
</style>

<button class="bt-sw-dg">HOVER ME</button>

<style>
.bt-sw-dg{
  position:relative; z-index:0; overflow:hidden;
  display:inline-block;padding:14px 38px;font-weight:700;font-size:15px;cursor:pointer;
  color:#191F2E; background:transparent;
  border:2px solid #191F2E; border-radius:8px;
  transition:color .35s;
}
.bt-sw-dg::before{
  content:""; position:absolute; inset:0; z-index:-1;
  background:#3A46E8;
  transform:scale(0); transform-origin:left top;
  transition:transform .35s cubic-bezier(.4,0,.2,1);
}
.bt-sw-dg:hover{ color:#fff; }
.bt-sw-dg:hover::before{ transform:scale(1); }
</style>

<button class="bt-sw-sk">HOVER ME</button>

<style>
.bt-sw-sk{
  position:relative; z-index:0; overflow:hidden;
  display:inline-block;padding:14px 38px;font-weight:700;font-size:15px;cursor:pointer;
  color:#191F2E; background:transparent;
  border:2px solid #191F2E; border-radius:8px;
  transition:color .35s;
}
.bt-sw-sk::before{
  content:""; position:absolute; inset:0; z-index:-1;
  background:#3A46E8;
  inset:0 -12%; transform:skewX(-15deg) translateX(-115%);
  transition:transform .35s cubic-bezier(.4,0,.2,1);
}
.bt-sw-sk:hover{ color:#fff; }
.bt-sw-sk:hover::before{ transform:skewX(-15deg) translateX(0); }
</style>

<a class="bt-ln-l">テキストリンク</a>

<style>
.bt-ln-l{
  position:relative; display:inline-block;
  font-weight:700; font-size:18px; color:#191F2E;
  padding-bottom:5px; cursor:pointer;
}
.bt-ln-l::after{
  content:""; position:absolute; left:0; bottom:0;
  width:100%; height:2.5px; background:#3A46E8;
  transform:scaleX(0); transform-origin:left;
  transition:transform .3s ease;
}
.bt-ln-l:hover::after{ transform:scaleX(1); }
</style>

<a class="bt-ln-c">テキストリンク</a>

<style>
.bt-ln-c{
  position:relative; display:inline-block;
  font-weight:700; font-size:18px; color:#191F2E;
  padding-bottom:5px; cursor:pointer;
}
.bt-ln-c::after{
  content:""; position:absolute; left:0; bottom:0;
  width:100%; height:2.5px; background:#3A46E8;
  transform:scaleX(0); transform-origin:center;
  transition:transform .3s ease;
}
.bt-ln-c:hover::after{ transform:scaleX(1); }
</style>

<a class="bt-ln-g">テキストリンク</a>

<style>
.bt-ln-g{
  position:relative; display:inline-block;
  font-weight:700; font-size:18px; color:#191F2E;
  padding-bottom:5px; cursor:pointer;
}
.bt-ln-g::after{
  content:""; position:absolute; left:0; bottom:0;
  width:100%; height:3px; background:linear-gradient(90deg,#3A46E8,#FF5CA0);
  transform:scaleX(0); transform-origin:left;
  transition:transform .3s ease;
}
.bt-ln-g:hover::after{ transform:scaleX(1); }
</style>

<a class="bt-ln-t">テキストリンク</a>

<style>
.bt-ln-t{
  position:relative; display:inline-block;
  font-weight:700; font-size:18px; color:#191F2E;
  padding-bottom:5px; cursor:pointer;
}
.bt-ln-t::after{
  content:""; position:absolute; left:0; bottom:0;
  width:100%; height:40%; background:rgba(255,207,63,.85);
  transform:scaleX(0); transform-origin:left;
  transition:transform .3s ease;
}
.bt-ln-t:hover::after{ transform:scaleX(1); }
</style>

<a class="bt-ln-io">テキストリンク</a>

<style>
.bt-ln-io{
  position:relative; display:inline-block;
  font-weight:700; font-size:18px; color:#191F2E;
  padding-bottom:5px; cursor:pointer;
}
.bt-ln-io::after{
  content:""; position:absolute; left:0; bottom:0;
  width:100%; height:2.5px; background:#FF5CA0;
  transform:scaleX(0);
  transform-origin:right;   /* ★ 出て行くときは右へ */
  transition:transform .35s ease;
}
.bt-ln-io:hover::after{
  transform:scaleX(1);
  transform-origin:left;    /* ★ 入るときは左から */
}
</style>

<!-- マウスが通り抜けたように見える人気テク -->

<a class="bt-ln-w">テキストリンク</a>

<style>
.bt-ln-w{
  display:inline-block;
  font-weight:700; font-size:18px; color:#191F2E;
  padding-bottom:7px; cursor:pointer;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='6'%3E%3Cpath d='M0 3 Q5 0 10 3 T20 3' fill='none' stroke='%233A46E8' stroke-width='2'/%3E%3C/svg%3E") repeat-x 0 100%;
  background-size:0 6px;
  transition:background-size .5s ease;
}
.bt-ln-w:hover{ background-size:20px 6px; animation:bt-ln-wave .6s linear infinite; }
@keyframes bt-ln-wave{ to{ background-position-x:20px; } }
</style>

<!-- SVG波線をbackgroundにして流す -->

<button class="bt-bd-draw">HOVER ME</button>

<style>
.bt-bd-draw{
  position:relative; display:inline-block;padding:14px 38px;font-weight:700;font-size:15px;cursor:pointer;
  color:#191F2E; background:transparent; border:none;
}
.bt-bd-draw::before,
.bt-bd-draw::after{
  content:""; position:absolute; width:0; height:0;
  border:2px solid transparent;
}
.bt-bd-draw::before{ top:0; left:0; }
.bt-bd-draw::after{ bottom:0; right:0; }
.bt-bd-draw:hover::before{
  width:100%; height:100%;
  border-top-color:#FF5CA0; border-right-color:#FF5CA0;
  transition:width .25s, height .25s .25s;
}
.bt-bd-draw:hover::after{
  width:100%; height:100%;
  border-bottom-color:#FF5CA0; border-left-color:#FF5CA0;
  transition:width .25s, height .25s .25s;
}
</style>

<button class="bt-bd-cn">HOVER ME</button>

<style>
.bt-bd-cn{
  position:relative; display:inline-block;padding:14px 38px;font-weight:700;font-size:15px;cursor:pointer;
  color:#191F2E; background:transparent; border:none;
}
.bt-bd-cn::before,
.bt-bd-cn::after{
  content:""; position:absolute;
  width:14px; height:14px;
  border:2.5px solid #3A46E8;
  opacity:0; transition:all .3s ease;
}
.bt-bd-cn::before{ top:6px; left:6px; border-right:none; border-bottom:none; }
.bt-bd-cn::after{ bottom:6px; right:6px; border-left:none; border-top:none; }
.bt-bd-cn:hover::before{ opacity:1; top:0; left:0; }
.bt-bd-cn:hover::after{ opacity:1; bottom:0; right:0; }
</style>

<button class="bt-bd-off">HOVER ME</button>

<style>
.bt-bd-off{
  display:inline-block;padding:14px 38px;font-weight:700;font-size:15px;cursor:pointer;
  color:#191F2E; background:#fff;
  border:2px solid #191F2E; border-radius:8px;
  outline:2px solid #191F2E;
  outline-offset:0;
  transition:outline-offset .25s ease, outline-color .25s;
}
.bt-bd-off:hover{
  outline-offset:5px;
  outline-color:#FF5CA0;
}
</style>

<!-- outline-offsetはtransition可能 -->

<button class="bt-bd-ring">HOVER ME</button>

<style>
.bt-bd-ring{
  display:inline-block;padding:14px 38px;font-weight:700;font-size:15px;cursor:pointer;
  color:#fff; background:#3A46E8;
  border:none; border-radius:999px;
  box-shadow:0 0 0 0 rgba(58,70,232,.45);
  transition:box-shadow .35s ease;
}
.bt-bd-ring:hover{
  box-shadow:0 0 0 8px rgba(58,70,232,.25);
}
</style>

<button class="bt-bd-dbl">HOVER ME</button>

<style>
.bt-bd-dbl{
  display:inline-block;padding:14px 38px;font-weight:700;font-size:15px;cursor:pointer;
  color:#191F2E; background:#FFCF3F;
  border:2px solid #191F2E; border-radius:8px;
  transition:box-shadow .25s ease;
}
.bt-bd-dbl:hover{
  /* 地の色→線の色 の順で重ねる */
  box-shadow:0 0 0 3px #F7F5EF, 0 0 0 5px #191F2E;
}
</style>

<button class="bt-sh-lift">HOVER ME</button>

<style>
.bt-sh-lift{
  display:inline-block;padding:14px 38px;font-weight:700;font-size:15px;cursor:pointer;
  color:#fff; background:#3A46E8;
  border:none; border-radius:10px;
  transition:transform .25s ease, box-shadow .25s ease;
}
.bt-sh-lift:hover{
  transform:translateY(-4px);
  box-shadow:0 10px 20px rgba(58,70,232,.4);
}
</style>

<button class="bt-sh-hard">HOVER ME</button>

<style>
.bt-sh-hard{
  display:inline-block;padding:14px 38px;font-weight:700;font-size:15px;cursor:pointer;
  color:#191F2E; background:#fff;
  border:2px solid #191F2E; border-radius:8px;
  transition:transform .2s, box-shadow .2s;
}
.bt-sh-hard:hover{
  transform:translate(-4px,-4px);
  box-shadow:4px 4px 0 #191F2E;
}
.bt-sh-hard:active{
  transform:translate(0,0);
  box-shadow:0 0 0 #191F2E;
}
</style>

<button class="bt-sh-push">PUSH!</button>

<style>
.bt-sh-push{
  display:inline-block;padding:14px 38px;font-weight:700;font-size:15px;cursor:pointer;
  color:#191F2E; background:#FFCF3F;
  border:2px solid #191F2E; border-radius:8px;
  box-shadow:0 6px 0 #191F2E;
  transition:transform .12s, box-shadow .12s;
}
.bt-sh-push:hover{ transform:translateY(2px); box-shadow:0 4px 0 #191F2E; }
.bt-sh-push:active{ transform:translateY(6px); box-shadow:0 0 0 #191F2E; }
</style>

<button class="bt-sh-neon">NEON</button>

<style>
.bt-sh-neon{
  display:inline-block;padding:14px 38px;font-weight:700;font-size:15px;cursor:pointer;
  letter-spacing:.08em;
  color:#5EE7FF; background:transparent;
  border:2px solid #5EE7FF; border-radius:8px;
  transition:all .3s;
}
.bt-sh-neon:hover{
  color:#0b0e17; background:#5EE7FF;
  box-shadow:0 0 12px #5EE7FF, 0 0 40px rgba(94,231,255,.6);
}
</style>

<button class="bt-tf-pill">HOVER ME</button>

<style>
.bt-tf-pill{
  display:inline-block;padding:14px 38px;font-weight:700;font-size:15px;cursor:pointer;
  color:#fff; background:#191F2E;
  border:none; border-radius:8px;
  transition:all .3s cubic-bezier(.3,1.3,.4,1);
}
.bt-tf-pill:hover{ border-radius:999px; }
</style>

<button class="bt-tf-skew">HOVER ME</button>

<style>
.bt-tf-skew{
  display:inline-block;padding:14px 38px;font-weight:700;font-size:15px;cursor:pointer;
  color:#191F2E; background:#FFCF3F;
  border:2px solid #191F2E; border-radius:8px;
  transition:all .3s cubic-bezier(.3,1.3,.4,1);
}
.bt-tf-skew:hover{ transform:skewX(-10deg); }
</style>

<button class="bt-tf-grow">HOVER ME</button>

<style>
.bt-tf-grow{
  display:inline-block;padding:14px 38px;font-weight:700;font-size:15px;cursor:pointer;
  color:#fff; background:#FF5CA0;
  border:none; border-radius:10px;
  transition:all .3s cubic-bezier(.3,1.3,.4,1);
}
.bt-tf-grow:hover{ transform:scale(1.1); }
</style>

<button class="bt-tf-shrink">HOVER ME</button>

<style>
.bt-tf-shrink{
  display:inline-block;padding:14px 38px;font-weight:700;font-size:15px;cursor:pointer;
  color:#fff; background:#3A46E8;
  border:none; border-radius:10px;
  transition:all .3s cubic-bezier(.3,1.3,.4,1);
}
.bt-tf-shrink:hover{ transform:scale(.93); }
</style>

<button class="bt-tf-tilt">HOVER ME</button>

<style>
.bt-tf-tilt{
  display:inline-block;padding:14px 38px;font-weight:700;font-size:15px;cursor:pointer;
  color:#191F2E; background:#fff;
  border:2px solid #191F2E; border-radius:10px;
  transition:all .3s cubic-bezier(.3,1.3,.4,1);
}
.bt-tf-tilt:hover{ transform:rotate(-3deg) scale(1.07); }
</style>

<button class="bt-ic-fly">NEXT <span class="ar"></span></button>

<style>
.bt-ic-fly{
  display:inline-flex; align-items:center; gap:10px;
  padding:14px 32px; font-weight:700; font-size:15px;
  color:#fff; background:#191F2E;
  border:none; border-radius:999px; cursor:pointer;
}
.bt-ic-fly .ar{
  position:relative; display:inline-block;
  width:1.2em; height:1em; overflow:hidden;
}
.bt-ic-fly .ar::before,
.bt-ic-fly .ar::after{
  content:"→"; position:absolute; inset:0;
  transition:transform .3s cubic-bezier(.5,0,.2,1);
}
.bt-ic-fly .ar::after{ transform:translateX(-160%); }
.bt-ic-fly:hover .ar::before{ transform:translateX(160%); }
.bt-ic-fly:hover .ar::after{ transform:translateX(0); }
</style>

<button class="bt-ic-app">MORE<span class="ar">→</span></button>

<style>
.bt-ic-app{
  display:inline-flex; align-items:center;
  padding:14px 30px; font-weight:700; font-size:15px;
  color:#191F2E; background:#FFCF3F;
  border:2px solid #191F2E; border-radius:999px; cursor:pointer;
}
.bt-ic-app .ar{
  display:inline-block; overflow:hidden;
  max-width:0; opacity:0;
  transition:max-width .35s ease, opacity .3s, margin-left .35s;
}
.bt-ic-app:hover .ar{
  max-width:1.4em; opacity:1; margin-left:8px;
}
</style>

<!-- max-widthのtransitionで幅を伸ばす -->

<button class="bt-ic-swap">
  <span class="w"><span>CONTACT</span><span>お問い合わせ</span></span>
</button>

<style>
.bt-ic-swap{
  padding:0 38px; height:52px; font-weight:700; font-size:15px;
  color:#fff; background:#3A46E8;
  border:none; border-radius:10px; cursor:pointer;
}
.bt-ic-swap .w{
  display:inline-block; height:1.5em; overflow:hidden;
  vertical-align:middle; line-height:1.5;
}
.bt-ic-swap .w span{
  display:block;
  transition:transform .35s cubic-bezier(.5,0,.2,1);
}
.bt-ic-swap:hover .w span{ transform:translateY(-100%); }
</style>

<button class="bt-ic-sp">STORY</button>

<style>
.bt-ic-sp{
  display:inline-block;padding:14px 38px;font-weight:700;font-size:15px;cursor:pointer;
  letter-spacing:.05em;
  color:#191F2E; background:transparent;
  border:2px solid #191F2E; border-radius:8px;
  transition:letter-spacing .35s ease, background .35s, color .35s;
}
.bt-ic-sp:hover{
  letter-spacing:.3em;
  background:#191F2E; color:#fff;
}
</style>

<button class="bt-ic-rot">開く <span class="pl">＋</span></button>

<style>
.bt-ic-rot{
  display:inline-flex; align-items:center; gap:8px;
  padding:13px 26px; font-weight:700; font-size:15px;
  color:#191F2E; background:#fff;
  border:2px solid #191F2E; border-radius:999px; cursor:pointer;
}
.bt-ic-rot .pl{
  display:inline-block; color:#FF5CA0;
  transition:transform .35s cubic-bezier(.3,1.4,.4,1);
}
.bt-ic-rot:hover .pl{ transform:rotate(135deg) scale(1.2); }
</style>

<button class="bt-ic-cart"><span class="ct">🛒</span> カートに入れる</button>

<style>
.bt-ic-cart{
  display:inline-flex; align-items:center; gap:9px;
  padding:13px 28px; font-weight:700; font-size:15px;
  color:#fff; background:#20B486;
  border:none; border-radius:10px; cursor:pointer;
}
.bt-ic-cart .ct{ display:inline-block; }
.bt-ic-cart:hover .ct{ animation:bt-cart-hop .5s ease; }
@keyframes bt-cart-hop{
  30%{ transform:translateY(-7px) rotate(-8deg); }
  60%{ transform:translateY(0) rotate(4deg); }
}
</style>

<button class="bt-bg-grad">GRADIENT</button>

<style>
.bt-bg-grad{
  display:inline-block;padding:14px 38px;font-weight:700;font-size:15px;cursor:pointer;
  color:#fff; border:none; border-radius:10px;
  background:linear-gradient(90deg,#3A46E8,#FF5CA0,#3A46E8);
  background-size:200% 100%;
  transition:background-position .5s ease;
}
.bt-bg-grad:hover{ background-position:100% 0; }
</style>

<button class="bt-bg-shine">HOVER ME</button>

<style>
.bt-bg-shine{
  position:relative; overflow:hidden;
  display:inline-block;padding:14px 38px;font-weight:700;font-size:15px;cursor:pointer;
  color:#fff; background:#191F2E;
  border:none; border-radius:8px;
}
.bt-bg-shine::before{
  content:""; position:absolute;
  top:0; left:-80%; width:50%; height:100%;
  background:linear-gradient(120deg,
    transparent, rgba(255,255,255,.55), transparent);
  transform:skewX(-25deg);
  transition:left .6s;
}
.bt-bg-shine:hover::before{ left:130%; }
</style>

<button class="bt-bg-stripe">SALE中！</button>

<style>
.bt-bg-stripe{
  display:inline-block;padding:14px 38px;font-weight:700;font-size:15px;cursor:pointer;
  color:#191F2E; border:2px solid #191F2E; border-radius:8px;
  /* 45度縞は「正方タイル+タイル1枚分の移動」で継ぎ目なくループする */
  background:linear-gradient(45deg,
    #FFCF3F 25%, #FFDF7A 25% 50%,
    #FFCF3F 50% 75%, #FFDF7A 75%);
  background-size:24px 24px;
}
.bt-bg-stripe:hover{
  animation:bt-stripe-go .5s linear infinite;
}
@keyframes bt-stripe-go{
  to{ background-position:24px 0; }
}
</style>

<button class="bt-bg-dots">HOVER ME</button>

<style>
.bt-bg-dots{
  position:relative; z-index:0; overflow:hidden;
  display:inline-block;padding:14px 38px;font-weight:700;font-size:15px;cursor:pointer;
  color:#fff; background:#FF5CA0;
  border:none; border-radius:10px;
}
.bt-bg-dots::before{
  content:""; position:absolute; inset:0; z-index:-1;
  background-image:radial-gradient(rgba(255,255,255,.5) 1.5px, transparent 1.5px);
  background-size:10px 10px;
  opacity:0; transform:scale(1.4);
  transition:opacity .35s, transform .35s;
}
.bt-bg-dots:hover::before{ opacity:1; transform:scale(1); }
</style>

<button class="bt-bg-split">HOVER ME</button>

<style>
.bt-bg-split{
  display:inline-block;padding:14px 38px;font-weight:700;font-size:15px;cursor:pointer;
  color:#fff; border:none; border-radius:10px;
  background:linear-gradient(-45deg,
    #FF5CA0 0 50%, #3A46E8 50% 100%);
  background-size:250% 100%;
  background-position:100% 0;
  transition:background-position .45s ease;
}
.bt-bg-split:hover{ background-position:0 0; }
</style>

<!-- 2色を斜めに敷いてbackground-positionで切替 -->

<button class="bt-sp-pulse">無料で始める</button>

<style>
.bt-sp-pulse{
  position:relative; z-index:0;
  display:inline-block;padding:14px 38px;font-weight:700;font-size:15px;cursor:pointer;
  color:#fff; background:#20B486;
  border:none; border-radius:999px;
}
.bt-sp-pulse::before{
  content:""; position:absolute; inset:0; z-index:-1;
  border-radius:999px; background:#20B486;
  animation:bt-pulse-ring 1.8s ease-out infinite;
}
@keyframes bt-pulse-ring{
  from{ transform:scale(1); opacity:.6; }
  to{ transform:scale(1.55); opacity:0; }
}
</style>

<button class="bt-sp-wobble">ぷにっ</button>

<style>
.bt-sp-wobble{
  display:inline-block;padding:14px 38px;font-weight:700;font-size:15px;cursor:pointer;
  color:#fff; background:#FF5CA0;
  border:none; border-radius:999px;
}
.bt-sp-wobble:hover{ animation:bt-wobble .5s ease; }
@keyframes bt-wobble{
  25%{ transform:scale(1.08,.92); }
  50%{ transform:scale(.94,1.06); }
  75%{ transform:scale(1.04,.96); }
}
</style>

<button class="bt-sp-ripple">CLICK ME</button>

<style>
.bt-sp-ripple{
  position:relative; overflow:hidden;
  display:inline-block;padding:14px 38px;font-weight:700;font-size:15px;cursor:pointer;
  color:#fff; background:#3A46E8;
  border:none; border-radius:10px;
}
/* 通常時=広がりきって透明(ここへの遷移がアニメになる) */
.bt-sp-ripple::after{
  content:""; position:absolute;
  inset:0; margin:auto;
  width:20px; height:20px; border-radius:50%;
  background:rgba(255,255,255,.7);
  transform:scale(9); opacity:0;
  transition:transform .5s ease-out, opacity .7s;
}
/* 押した瞬間=小さく戻す(transition:0sで即時) */
.bt-sp-ripple:active::after{
  transform:scale(0); opacity:.6;
  transition:0s;
}
</style>

<!-- クリックして「離した瞬間」に波紋が広がる。位置追従はJS版参照 -->

<button class="bt-sp-ghost">GHOST</button>

<style>
.bt-sp-ghost{
  display:inline-block;padding:14px 38px;font-weight:700;font-size:15px;cursor:pointer;
  letter-spacing:.06em;
  color:#3A46E8; background:rgba(58,70,232,0);
  border:2px solid #3A46E8; border-radius:8px;
  transition:background .5s ease, color .5s ease;
}
.bt-sp-ghost:hover{
  background:rgba(58,70,232,1); color:#fff;
}
</style>

<button class="bt-sp-heart">♥ LIKE</button>

<style>
.bt-sp-heart{
  display:inline-block;padding:14px 38px;font-weight:700;font-size:15px;cursor:pointer;
  color:#fff; background:#FF3B5C;
  border:none; border-radius:999px;
}
.bt-sp-heart:hover{
  animation:bt-heartbeat 1s ease-in-out infinite;
}
@keyframes bt-heartbeat{
  0%,100%{ transform:scale(1); }
  14%{ transform:scale(1.12); }
  28%{ transform:scale(1); }
  42%{ transform:scale(1.12); }
}
</style>

<button class="bt-sp-shake">⚠ 注意</button>

<style>
.bt-sp-shake{
  display:inline-block;padding:14px 38px;font-weight:700;font-size:15px;cursor:pointer;
  color:#191F2E; background:#FFCF3F;
  border:2px solid #191F2E; border-radius:8px;
}
.bt-sp-shake:hover{ animation:bt-shake .45s ease; }
@keyframes bt-shake{
  20%{ transform:translateX(-5px) rotate(-1.5deg); }
  40%{ transform:translateX(5px) rotate(1.5deg); }
  60%{ transform:translateX(-4px); }
  80%{ transform:translateX(4px); }
}
</style>

<button class="bt-sp-blob">ぐにゃり</button>

<style>
.bt-sp-blob{
  padding:18px 42px; font-weight:700; font-size:15px; cursor:pointer;
  color:#fff; background:linear-gradient(135deg,#3A46E8,#FF5CA0);
  border:none;
  border-radius:60% 40% 55% 45%/50% 60% 40% 50%;
  transition:border-radius .6s ease;
}
.bt-sp-blob:hover{
  border-radius:40% 60% 40% 60%/60% 35% 65% 40%;
}
</style>

<button class="bt-sp-focus">Tabキーでも試して</button>

<style>
.bt-sp-focus{
  display:inline-block;padding:14px 38px;font-weight:700;font-size:15px;cursor:pointer;
  color:#fff; background:#191F2E;
  border:none; border-radius:10px;
  outline:2px solid transparent; outline-offset:2px;
  transition:outline-color .25s, outline-offset .25s, transform .2s;
}
.bt-sp-focus:hover{ transform:translateY(-2px); }
.bt-sp-focus:focus-visible{
  outline-color:#FF5CA0; outline-offset:4px;
}
</style>

<!-- focus-visibleはキーボード操作時だけ発火 -->

<label class="bt-sp-load">
  <input type="checkbox">
  <span class="face"><span class="tx">送信する</span><span class="sp"></span></span>
</label>

<style>
.bt-sp-load{ display:inline-block; cursor:pointer; }
.bt-sp-load input{ display:none; }
.bt-sp-load .face{
  position:relative; display:grid; place-items:center;
  width:160px; height:50px; border-radius:10px;
  background:#3A46E8; color:#fff; font-weight:700;
  transition:width .35s ease, border-radius .35s;
}
.bt-sp-load .tx{ transition:opacity .2s; }
.bt-sp-load .sp{
  position:absolute; width:22px; height:22px;
  border-radius:50%;
  border:3px solid rgba(255,255,255,.3);
  border-top-color:#fff;
  opacity:0;
  animation:bt-load-spin .8s linear infinite;
}
.bt-sp-load input:checked + .face{ width:50px; border-radius:50%; }
.bt-sp-load input:checked + .face .tx{ opacity:0; }
.bt-sp-load input:checked + .face .sp{ opacity:1; }
@keyframes bt-load-spin{ to{ transform:rotate(360deg); } }
</style>

<!-- クリックで丸に縮んでスピナー化(デモはチェックボックスで再現) -->

<div class="bt-sp-glare-scene">
  <i></i><i></i>
  <button class="bt-sp-glare">GLASS</button>
</div>

<style>
/* ガラスの後ろに色を置かないとblurが見えない */
.bt-sp-glare-scene{
  position:relative; padding:26px 34px; border-radius:16px;
  overflow:hidden;
}
.bt-sp-glare-scene i{
  position:absolute; border-radius:50%;
  width:70px; height:70px; filter:blur(2px);
}
.bt-sp-glare-scene i:first-child{
  left:-6px; top:-10px; background:#FF5CA0;
  animation:bt-glare-f 4s ease-in-out infinite alternate;
}
.bt-sp-glare-scene i:nth-child(2){
  right:-10px; bottom:-14px; background:#5EE7FF;
  animation:bt-glare-f 5s ease-in-out infinite alternate-reverse;
}
@keyframes bt-glare-f{ to{ translate:14px 10px; } }
.bt-sp-glare{
  position:relative;
  display:inline-block;padding:14px 38px;font-weight:700;font-size:15px;cursor:pointer;
  letter-spacing:.08em;
  color:#fff;
  background:rgba(255,255,255,.12);
  border:1px solid rgba(255,255,255,.35);
  border-radius:12px;
  backdrop-filter:blur(6px);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.4);
  transition:background .3s, transform .3s;
}
.bt-sp-glare:hover{
  background:rgba(255,255,255,.22);
  transform:translateY(-2px);
}
</style>

<button class="bt-sp-mag"><span>DELAY</span></button>

<style>
.bt-sp-mag{
  display:inline-block;padding:14px 38px;font-weight:700;font-size:15px;cursor:pointer;
  color:#fff; background:#191F2E;
  border:none; border-radius:10px;
  transition:transform .2s ease;
}
.bt-sp-mag span{
  display:inline-block;
  transition:transform .35s cubic-bezier(.3,1.4,.4,1) .05s;
}
.bt-sp-mag:hover{ transform:translateY(-4px); }
.bt-sp-mag:hover span{ transform:translateY(-3px); }
</style>

<!-- 本体と中身のtransition遅延をずらすと柔らかい動きに -->

<span class="tx-in-up">HEADLINE</span>

<style>
.tx-in-up{
  display:inline-block;
  font-family:"Space Grotesk",sans-serif;font-weight:700; font-size:34px; color:#191F2E;
  animation:tx-in-up-in 3s ease infinite;
  /* 1回だけ再生する場合:
     animation:tx-in-up-in .7s ease both; */
}
@keyframes tx-in-up-in{
  0%{ opacity:0; transform:translateY(26px); }
  22%,80%{ opacity:1; transform:none; filter:none; }
  95%,100%{ opacity:0; transform:translateY(26px); }
}
</style>

<span class="tx-in-dn">HEADLINE</span>

<style>
.tx-in-dn{
  display:inline-block;
  font-family:"Space Grotesk",sans-serif;font-weight:700; font-size:34px; color:#191F2E;
  animation:tx-in-dn-in 3s ease infinite;
  /* 1回だけ再生する場合:
     animation:tx-in-dn-in .7s ease both; */
}
@keyframes tx-in-dn-in{
  0%{ opacity:0; transform:translateY(-26px); }
  22%,80%{ opacity:1; transform:none; filter:none; }
  95%,100%{ opacity:0; transform:translateY(-26px); }
}
</style>

<span class="tx-in-lf">HEADLINE</span>

<style>
.tx-in-lf{
  display:inline-block;
  font-family:"Space Grotesk",sans-serif;font-weight:700; font-size:34px; color:#191F2E;
  animation:tx-in-lf-in 3s ease infinite;
  /* 1回だけ再生する場合:
     animation:tx-in-lf-in .7s ease both; */
}
@keyframes tx-in-lf-in{
  0%{ opacity:0; transform:translateX(-36px); }
  22%,80%{ opacity:1; transform:none; filter:none; }
  95%,100%{ opacity:0; transform:translateX(-36px); }
}
</style>

<span class="tx-in-rt">HEADLINE</span>

<style>
.tx-in-rt{
  display:inline-block;
  font-family:"Space Grotesk",sans-serif;font-weight:700; font-size:34px; color:#191F2E;
  animation:tx-in-rt-in 3s ease infinite;
  /* 1回だけ再生する場合:
     animation:tx-in-rt-in .7s ease both; */
}
@keyframes tx-in-rt-in{
  0%{ opacity:0; transform:translateX(36px); }
  22%,80%{ opacity:1; transform:none; filter:none; }
  95%,100%{ opacity:0; transform:translateX(36px); }
}
</style>

<span class="tx-in-zi">HEADLINE</span>

<style>
.tx-in-zi{
  display:inline-block;
  font-family:"Space Grotesk",sans-serif;font-weight:700; font-size:34px; color:#191F2E;
  animation:tx-in-zi-in 3s ease infinite;
  /* 1回だけ再生する場合:
     animation:tx-in-zi-in .7s ease both; */
}
@keyframes tx-in-zi-in{
  0%{ opacity:0; transform:scale(.4); }
  22%,80%{ opacity:1; transform:none; filter:none; }
  95%,100%{ opacity:0; transform:scale(.4); }
}
</style>

<span class="tx-in-zo">HEADLINE</span>

<style>
.tx-in-zo{
  display:inline-block;
  font-family:"Space Grotesk",sans-serif;font-weight:700; font-size:34px; color:#191F2E;
  animation:tx-in-zo-in 3s ease infinite;
  /* 1回だけ再生する場合:
     animation:tx-in-zo-in .7s ease both; */
}
@keyframes tx-in-zo-in{
  0%{ opacity:0; transform:scale(1.7); }
  22%,80%{ opacity:1; transform:none; filter:none; }
  95%,100%{ opacity:0; transform:scale(1.7); }
}
</style>

<span class="tx-in-bl">HEADLINE</span>

<style>
.tx-in-bl{
  display:inline-block;
  font-family:"Space Grotesk",sans-serif;font-weight:700; font-size:34px; color:#191F2E;
  animation:tx-in-bl-in 3s ease infinite;
  /* 1回だけ再生する場合:
     animation:tx-in-bl-in .7s ease both; */
}
@keyframes tx-in-bl-in{
  0%{ opacity:0; filter:blur(10px); }
  22%,80%{ opacity:1; transform:none; filter:none; }
  95%,100%{ opacity:0; filter:blur(10px); }
}
</style>

<span class="tx-in-fx">HEADLINE</span>

<style>
.tx-in-fx{
  display:inline-block;
  font-family:"Space Grotesk",sans-serif;font-weight:700; font-size:34px; color:#191F2E;
  animation:tx-in-fx-in 3s ease infinite;
  /* 1回だけ再生する場合:
     animation:tx-in-fx-in .7s ease both; */
}
@keyframes tx-in-fx-in{
  0%{ opacity:0; transform:perspective(400px) rotateX(90deg); }
  22%,80%{ opacity:1; transform:none; filter:none; }
  95%,100%{ opacity:0; transform:perspective(400px) rotateX(90deg); }
}
</style>

<span class="tx-in-fy">HEADLINE</span>

<style>
.tx-in-fy{
  display:inline-block;
  font-family:"Space Grotesk",sans-serif;font-weight:700; font-size:34px; color:#191F2E;
  animation:tx-in-fy-in 3s ease infinite;
  /* 1回だけ再生する場合:
     animation:tx-in-fy-in .7s ease both; */
}
@keyframes tx-in-fy-in{
  0%{ opacity:0; transform:perspective(400px) rotateY(90deg); }
  22%,80%{ opacity:1; transform:none; filter:none; }
  95%,100%{ opacity:0; transform:perspective(400px) rotateY(90deg); }
}
</style>

<span class="tx-in-ro">HEADLINE</span>

<style>
.tx-in-ro{
  display:inline-block;
  font-family:"Space Grotesk",sans-serif;font-weight:700; font-size:34px; color:#191F2E;
  animation:tx-in-ro-in 3s ease infinite;
  /* 1回だけ再生する場合:
     animation:tx-in-ro-in .7s ease both; */
}
@keyframes tx-in-ro-in{
  0%{ opacity:0; transform:rotate(-12deg) scale(.6); }
  22%,80%{ opacity:1; transform:none; filter:none; }
  95%,100%{ opacity:0; transform:rotate(-12deg) scale(.6); }
}
</style>

<span class="tx-st-rise"><span>あ</span><span>に</span><span>め</span><span>だ</span><span>よ</span><span>！</span></span>

<style>
.tx-st-rise span{
  display:inline-block;
  font-family:"Space Grotesk",sans-serif;font-weight:700; font-size:30px; color:#191F2E;
  animation:tx-st-rise-go 3.4s ease infinite;
}
.tx-st-rise span:nth-child(2){ animation-delay:.09s; }
.tx-st-rise span:nth-child(3){ animation-delay:.18s; }
.tx-st-rise span:nth-child(4){ animation-delay:.27s; }
.tx-st-rise span:nth-child(5){ animation-delay:.36s; }
.tx-st-rise span:nth-child(6){ animation-delay:.45s; }
@keyframes tx-st-rise-go{
  0%{ opacity:0; transform:translateY(16px); }
  15%,78%{ opacity:1; transform:none; }
  92%,100%{ opacity:0; }
}
</style>

<span class="tx-st-drop"><span>あ</span><span>に</span><span>め</span><span>だ</span><span>よ</span><span>！</span></span>

<style>
.tx-st-drop span{
  display:inline-block;
  font-family:"Space Grotesk",sans-serif;font-weight:700; font-size:30px; color:#191F2E;
  animation:tx-st-drop-go 3.4s ease infinite;
}
.tx-st-drop span:nth-child(2){ animation-delay:.09s; }
.tx-st-drop span:nth-child(3){ animation-delay:.18s; }
.tx-st-drop span:nth-child(4){ animation-delay:.27s; }
.tx-st-drop span:nth-child(5){ animation-delay:.36s; }
.tx-st-drop span:nth-child(6){ animation-delay:.45s; }
@keyframes tx-st-drop-go{
  0%{ opacity:0; transform:translateY(-30px); }
  15%,78%{ opacity:1; transform:none; }
  92%,100%{ opacity:0; }
}
</style>

<span class="tx-st-pop"><span>あ</span><span>に</span><span>め</span><span>だ</span><span>よ</span><span>！</span></span>

<style>
.tx-st-pop span{
  display:inline-block;
  font-family:"Space Grotesk",sans-serif;font-weight:700; font-size:30px; color:#191F2E;
  animation:tx-st-pop-go 3.4s ease infinite;
}
.tx-st-pop span:nth-child(2){ animation-delay:.09s; }
.tx-st-pop span:nth-child(3){ animation-delay:.18s; }
.tx-st-pop span:nth-child(4){ animation-delay:.27s; }
.tx-st-pop span:nth-child(5){ animation-delay:.36s; }
.tx-st-pop span:nth-child(6){ animation-delay:.45s; }
@keyframes tx-st-pop-go{
  0%{ opacity:0; transform:scale(0); }
  15%{ transform:scale(1.25); }
  22%,78%{ opacity:1; transform:scale(1); }
  92%,100%{ opacity:0; }
}
</style>

<span class="tx-st-spin"><span>あ</span><span>に</span><span>め</span><span>だ</span><span>よ</span><span>！</span></span>

<style>
.tx-st-spin span{
  display:inline-block;
  font-family:"Space Grotesk",sans-serif;font-weight:700; font-size:30px; color:#191F2E;
  animation:tx-st-spin-go 3.4s ease infinite;
}
.tx-st-spin span:nth-child(2){ animation-delay:.09s; }
.tx-st-spin span:nth-child(3){ animation-delay:.18s; }
.tx-st-spin span:nth-child(4){ animation-delay:.27s; }
.tx-st-spin span:nth-child(5){ animation-delay:.36s; }
.tx-st-spin span:nth-child(6){ animation-delay:.45s; }
@keyframes tx-st-spin-go{
  0%{ opacity:0; transform:rotate(180deg) scale(.4); }
  18%,78%{ opacity:1; transform:none; }
  92%,100%{ opacity:0; }
}
</style>

<span class="tx-st-blur"><span>あ</span><span>に</span><span>め</span><span>だ</span><span>よ</span><span>！</span></span>

<style>
.tx-st-blur span{
  display:inline-block;
  font-family:"Space Grotesk",sans-serif;font-weight:700; font-size:30px; color:#191F2E;
  animation:tx-st-blur-go 3.4s ease infinite;
}
.tx-st-blur span:nth-child(2){ animation-delay:.09s; }
.tx-st-blur span:nth-child(3){ animation-delay:.18s; }
.tx-st-blur span:nth-child(4){ animation-delay:.27s; }
.tx-st-blur span:nth-child(5){ animation-delay:.36s; }
.tx-st-blur span:nth-child(6){ animation-delay:.45s; }
@keyframes tx-st-blur-go{
  0%{ opacity:0; filter:blur(8px); }
  18%,78%{ opacity:1; filter:none; }
  92%,100%{ opacity:0; }
}
</style>

<span class="tx-st-flip"><span>あ</span><span>に</span><span>め</span><span>だ</span><span>よ</span><span>！</span></span>

<style>
.tx-st-flip span{
  display:inline-block;
  font-family:"Space Grotesk",sans-serif;font-weight:700; font-size:30px; color:#191F2E;
  animation:tx-st-flip-go 3.4s ease infinite;
}
.tx-st-flip span:nth-child(2){ animation-delay:.09s; }
.tx-st-flip span:nth-child(3){ animation-delay:.18s; }
.tx-st-flip span:nth-child(4){ animation-delay:.27s; }
.tx-st-flip span:nth-child(5){ animation-delay:.36s; }
.tx-st-flip span:nth-child(6){ animation-delay:.45s; }
@keyframes tx-st-flip-go{
  0%{ opacity:0; transform:perspective(300px) rotateX(-90deg); }
  18%,78%{ opacity:1; transform:none; }
  92%,100%{ opacity:0; }
}
</style>

<span class="tx-st-jelly"><span>あ</span><span>に</span><span>め</span><span>だ</span><span>よ</span><span>！</span></span>

<style>
.tx-st-jelly span{
  display:inline-block;
  font-family:"Space Grotesk",sans-serif;font-weight:700; font-size:30px; color:#191F2E;
  animation:tx-st-jelly-go 3.4s ease infinite;
}
.tx-st-jelly span:nth-child(2){ animation-delay:.09s; }
.tx-st-jelly span:nth-child(3){ animation-delay:.18s; }
.tx-st-jelly span:nth-child(4){ animation-delay:.27s; }
.tx-st-jelly span:nth-child(5){ animation-delay:.36s; }
.tx-st-jelly span:nth-child(6){ animation-delay:.45s; }
@keyframes tx-st-jelly-go{
  0%{ opacity:0; transform:scale(1.6,.4); }
  12%{ transform:scale(.7,1.3); }
  20%,78%{ opacity:1; transform:scale(1); }
  92%,100%{ opacity:0; }
}
</style>

<span class="tx-st-wave"><span>あ</span><span>に</span><span>め</span><span>だ</span><span>よ</span><span>！</span></span>

<style>
.tx-st-wave span{
  display:inline-block;
  font-family:"Space Grotesk",sans-serif;font-weight:700; font-size:30px; color:#191F2E;
  animation:tx-st-wave-go 1.6s ease infinite;
}
.tx-st-wave span:nth-child(2){ animation-delay:.09s; }
.tx-st-wave span:nth-child(3){ animation-delay:.18s; }
.tx-st-wave span:nth-child(4){ animation-delay:.27s; }
.tx-st-wave span:nth-child(5){ animation-delay:.36s; }
.tx-st-wave span:nth-child(6){ animation-delay:.45s; }
@keyframes tx-st-wave-go{
  0%,60%,100%{ transform:translateY(0); }
  30%{ transform:translateY(-14px); }
}
</style>

<span class="tx-hv-marker">ここにマウスを乗せてみて</span>

<style>
.tx-hv-marker{
  font-size:22px; font-weight:700; cursor:default;
  background:linear-gradient(transparent 62%,
    #FFCF3F 62%, #FFCF3F 92%, transparent 92%);
  background-size:0% 100%;
  background-repeat:no-repeat;
  transition:background-size .6s ease;
}
.tx-hv-marker:hover{ background-size:100% 100%; }
</style>

<span class="tx-hv-strike">¥19,800</span> <b style="font-size:22px;color:#FF3B5C">¥9,800</b>

<style>
.tx-hv-strike{
  position:relative; font-size:22px; font-weight:700;
  color:#5A6072; cursor:default;
}
.tx-hv-strike::after{
  content:""; position:absolute;
  left:0; top:52%; height:2.5px; width:100%;
  background:#FF3B5C;
  transform:scaleX(0); transform-origin:left;
  transition:transform .4s ease;
}
.tx-hv-strike:hover::after{ transform:scaleX(1); }
</style>

<span class="tx-hv-pop">POP!</span>

<style>
.tx-hv-pop{
  font-family:"Space Grotesk",sans-serif;font-weight:700; font-size:36px;
  color:#FFCF3F;
  -webkit-text-stroke:2px #191F2E;
  cursor:default;
  transition:transform .25s, text-shadow .25s;
}
.tx-hv-pop:hover{
  transform:translate(-4px,-4px);
  text-shadow:5px 5px 0 #191F2E;
}
</style>

<span class="tx-hv-fill">FILL</span>

<style>
.tx-hv-fill{
  font-family:"Space Grotesk",sans-serif;font-weight:700; font-size:40px;
  color:transparent;
  -webkit-text-stroke:2px #3A46E8;
  background:linear-gradient(#3A46E8,#3A46E8) no-repeat 0 100%;
  background-size:100% 0%;
  -webkit-background-clip:text;
  background-clip:text;
  transition:background-size .5s ease;
  cursor:default;
}
.tx-hv-fill:hover{ background-size:100% 100%; }
</style>

<span class="tx-hv-sp">BREATH</span>

<style>
.tx-hv-sp{
  font-family:"Space Grotesk",sans-serif;font-weight:700; font-size:30px; color:#191F2E;
  letter-spacing:.04em; cursor:default;
  transition:letter-spacing .6s ease, color .6s;
}
.tx-hv-sp:hover{ letter-spacing:.35em; color:#3A46E8; }
</style>

<span class="tx-hv-blur">FOCUS ME</span>

<style>
.tx-hv-blur{
  font-family:"Space Grotesk",sans-serif;font-weight:700; font-size:32px; color:#191F2E;
  filter:blur(4px); opacity:.6; cursor:default;
  transition:filter .4s ease, opacity .4s;
}
.tx-hv-blur:hover{ filter:blur(0); opacity:1; }
</style>

<span class="tx-hv-split">COLOR SLIDE</span>

<style>
.tx-hv-split{
  font-family:"Space Grotesk",sans-serif;font-weight:700; font-size:30px;
  background:linear-gradient(90deg, #FF5CA0 50%, #191F2E 50%);
  background-size:200% 100%;
  background-position:100% 0;
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent; cursor:default;
  transition:background-position .5s ease;
}
.tx-hv-split:hover{ background-position:0 0; }
</style>

<span class="tx-hv-flip">
  <span class="in"><i>DESIGN</i><i>デザイン</i></span>
</span>

<style>
.tx-hv-flip{
  display:inline-block; perspective:400px;
  font-family:"Space Grotesk",sans-serif;font-weight:700; font-size:30px; cursor:default;
}
.tx-hv-flip .in{
  position:relative; display:inline-block;
  transform-style:preserve-3d;
  transition:transform .6s cubic-bezier(.4,.1,.2,1);
}
.tx-hv-flip i{
  display:block; font-style:normal;
  backface-visibility:hidden; color:#191F2E;
}
.tx-hv-flip i:last-child{
  position:absolute; inset:0;
  transform:rotateX(180deg); color:#FF5CA0;
}
.tx-hv-flip:hover .in{ transform:rotateX(180deg); }
</style>

<span class="tx-hv-glitch" data-text="HOVER">HOVER</span>

<style>
.tx-hv-glitch{
  position:relative; font-family:"Space Grotesk",sans-serif;font-weight:700; font-size:34px;
  color:#fff; cursor:default;
}
.tx-hv-glitch::before,
.tx-hv-glitch::after{
  content:attr(data-text);
  position:absolute; inset:0; opacity:0;
}
.tx-hv-glitch:hover::before{
  color:#0ff; opacity:1;
  animation:tx-gl-a .3s infinite steps(1);
}
.tx-hv-glitch:hover::after{
  color:#f0f; opacity:1;
  animation:tx-gl-b .3s infinite steps(1);
}
@keyframes tx-gl-a{
  0%{ transform:translate(-3px,-2px); clip-path:inset(0 0 60% 0); }
  50%{ transform:translate(3px,1px); clip-path:inset(55% 0 0 0); }
}
@keyframes tx-gl-b{
  0%{ transform:translate(3px,2px); clip-path:inset(50% 0 20% 0); }
  50%{ transform:translate(-3px,-1px); clip-path:inset(10% 0 55% 0); }
}
</style>

<span class="tx-hv-jump"><span>T</span><span>O</span><span>U</span><span>C</span><span>H</span></span>

<style>
.tx-hv-jump span{
  display:inline-block;
  font-family:"Space Grotesk",sans-serif;font-weight:700; font-size:32px; color:#191F2E;
  transition:transform .25s cubic-bezier(.3,1.6,.4,1), color .25s;
  cursor:default;
}
.tx-hv-jump span:hover{
  transform:translateY(-12px) rotate(-6deg);
  color:#FF5CA0;
}
</style>

<!-- spanごとに:hoverを付けるだけ -->

<span class="tx-lp-grad">GRADIENT</span>

<style>
.tx-lp-grad{
  font-family:"Space Grotesk",sans-serif;font-weight:700; font-size:38px;
  background:linear-gradient(90deg,
    #3A46E8, #FF5CA0, #FFCF3F, #3A46E8);
  background-size:300% 100%;
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
  animation:tx-grad-flow 4s linear infinite;
}
@keyframes tx-grad-flow{
  to{ background-position:300% 0; }
}
</style>

<span class="tx-lp-glitch" data-text="GLITCH">GLITCH</span>

<style>
.tx-lp-glitch{
  position:relative; font-family:"Space Grotesk",sans-serif;font-weight:700; font-size:36px; color:#fff;
}
.tx-lp-glitch::before,
.tx-lp-glitch::after{
  content:attr(data-text);
  position:absolute; inset:0;
}
.tx-lp-glitch::before{ color:#0ff; animation:tx-lpg-a 2.4s infinite steps(1); }
.tx-lp-glitch::after{ color:#f0f; animation:tx-lpg-b 2.4s infinite steps(1); }
@keyframes tx-lpg-a{
  0%,89%,100%{ transform:none; clip-path:none; }
  90%{ transform:translate(-3px,-2px); clip-path:inset(0 0 62% 0); }
  93%{ transform:translate(3px,1px); clip-path:inset(58% 0 0 0); }
  96%{ transform:translate(-2px,2px); clip-path:inset(28% 0 42% 0); }
}
@keyframes tx-lpg-b{
  0%,88%,100%{ transform:none; clip-path:none; }
  91%{ transform:translate(3px,2px); clip-path:inset(52% 0 0 0); }
  94%{ transform:translate(-3px,-1px); clip-path:inset(0 0 55% 0); }
  97%{ transform:translate(2px,-2px); clip-path:inset(30% 0 35% 0); }
}
</style>

<span class="tx-lp-type">Hello, CSS Animation!</span>

<style>
.tx-lp-type{
  font-family:"JetBrains Mono",monospace;
  font-size:19px; font-weight:600;
  width:22ch; white-space:nowrap; overflow:hidden;
  border-right:3px solid #3A46E8;
  animation:
    tx-typing 3.2s steps(22) infinite alternate,
    tx-caret .7s step-end infinite;
}
@keyframes tx-typing{
  0%,10%{ width:0; }
  90%,100%{ width:22ch; }
}
@keyframes tx-caret{ 50%{ border-color:transparent; } }
</style>

<!-- 等幅フォント必須。widthのchは文字数に合わせる -->

<span class="tx-lp-neon">OPEN</span>

<style>
.tx-lp-neon{
  font-family:"Space Grotesk",sans-serif;font-weight:700; font-size:34px; letter-spacing:.08em;
  color:#FFE9F4;
  text-shadow:0 0 6px #fff, 0 0 20px #FF5CA0, 0 0 55px #FF5CA0;
  animation:tx-flick 3.4s infinite;
}
@keyframes tx-flick{
  0%,17%,20%,24%,54%,57%,100%{ opacity:1; }
  18%,22%,55%{ opacity:.3; }
}
</style>

<svg class="tx-lp-circle" viewBox="0 0 200 200">
  <defs><path id="tx-circ" d="M100,100 m-72,0 a72,72 0 1,1 144,0 a72,72 0 1,1 -144,0"/></defs>
  <text><textPath href="#tx-circ">CSS ANIM LAB ・ PURE CSS ・ NO JS ・</textPath></text>
</svg>

<style>
.tx-lp-circle{
  width:150px; height:150px;
  animation:tx-circ-spin 14s linear infinite;
}
.tx-lp-circle text{
  font-family:"Space Grotesk",sans-serif;
  font-size:19px; font-weight:700;
  letter-spacing:3px; fill:#191F2E;
}
@keyframes tx-circ-spin{
  to{ transform:rotate(360deg); }
}
</style>

<span class="tx-lp-hue">RAINBOW</span>

<style>
.tx-lp-hue{
  font-family:"Space Grotesk",sans-serif;font-weight:700; font-size:36px;
  color:#FF3B5C;
  animation:tx-hue-go 4s linear infinite;
}
@keyframes tx-hue-go{
  to{ filter:hue-rotate(360deg); }
}
</style>

<!-- filter:hue-rotateは要素まるごと色相を回せる -->

<span class="tx-lp-shine">PREMIUM</span>

<style>
.tx-lp-shine{
  font-family:"Space Grotesk",sans-serif;font-weight:700; font-size:34px; letter-spacing:.06em;
  background:linear-gradient(110deg,
    #9aa0b4 30%, #ffffff 50%, #9aa0b4 70%);
  background-size:250% 100%;
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
  animation:tx-shine-go 2.8s linear infinite;
}
@keyframes tx-shine-go{
  to{ background-position:-250% 0; }
}
</style>

<span class="tx-lp-rot-wrap">WEBは
<span class="tx-lp-rotator"><span>楽しい</span><span>奥深い</span><span>自由だ</span><span>楽しい</span></span></span>

<style>
.tx-lp-rot-wrap{ font-size:26px; font-weight:700; display:inline-flex; gap:8px; }
.tx-lp-rotator{
  display:inline-block; height:1.5em; overflow:hidden;
  vertical-align:bottom; line-height:1.5; color:#3A46E8;
}
.tx-lp-rotator span{
  display:block;
  animation:tx-rot-go 6s cubic-bezier(.6,0,.2,1) infinite;
}
/* 最後は1語目の複製で継ぎ目を消す */
@keyframes tx-rot-go{
  0%,26%{ transform:translateY(0); }
  33%,59%{ transform:translateY(-100%); }
  66%,92%{ transform:translateY(-200%); }
  100%{ transform:translateY(-300%); }
}
</style>

<span class="tx-lp-cursor">入力待ち</span>

<style>
.tx-lp-cursor{
  font-family:"JetBrains Mono",monospace;
  font-size:22px; font-weight:600;
}
.tx-lp-cursor::after{
  content:"";
  display:inline-block;
  width:.55em; height:1.1em;
  margin-left:4px; vertical-align:-.15em;
  background:#3A46E8;
  animation:tx-cur-blink 1s step-end infinite;
}
@keyframes tx-cur-blink{ 50%{ opacity:0; } }
</style>

<span class="tx-lp-ticker">
  <span class="d"><span class="r r1">0123456789</span></span>
  <span class="d"><span class="r r2">0123456789</span></span>
  <span class="d"><span class="r r3">0123456789</span></span>
</span>

<style>
.tx-lp-ticker{ display:inline-flex; gap:4px; }
.tx-lp-ticker .d{
  display:inline-block; height:1.2em; overflow:hidden;
  font-family:"Space Grotesk",sans-serif;
  font-size:42px; font-weight:700; line-height:1.2;
  color:#3A46E8;
}
/* 1ch幅+break-allで0-9を縦積みにする */
.tx-lp-ticker .r{
  display:block; width:1ch;
  word-break:break-all;
  text-align:center;
}
.tx-lp-ticker .r1{ animation:tx-tick 3s cubic-bezier(.7,0,.2,1) infinite alternate; --n:2; }
.tx-lp-ticker .r2{ animation:tx-tick 3.4s cubic-bezier(.7,0,.2,1) infinite alternate; --n:5; }
.tx-lp-ticker .r3{ animation:tx-tick 3.8s cubic-bezier(.7,0,.2,1) infinite alternate; --n:9; }
@keyframes tx-tick{
  0%,15%{ transform:translateY(0); }
  85%,100%{ transform:translateY(calc(var(--n) * -1.2em)); }
}
</style>

<!-- 0123456789を縦書きにして1桁分ずつ送る。--nが止まる数字 -->

<div class="tx-lp-marq"><div class="tk">
  <span>BREAKING NEWS — CSSだけでここまで動く — </span><span>BREAKING NEWS — CSSだけでここまで動く — </span>
</div></div>

<style>
.tx-lp-marq{
  width:100%; max-width:300px; overflow:hidden;
  border-block:2px solid #191F2E; background:#FFCF3F;
}
.tx-lp-marq .tk{
  display:flex; width:max-content; padding:8px 0;
  animation:tx-marq-go 10s linear infinite;
}
.tx-lp-marq span{
  font-weight:700; font-size:15px; white-space:nowrap;
}
@keyframes tx-marq-go{
  to{ transform:translateX(-50%); }
}
</style>

<!-- 中身は2セット並べて-50%でループ -->

<span class="tx-lp-breath">DEEP BREATH</span>

<style>
.tx-lp-breath{
  font-family:"Space Grotesk",sans-serif;font-weight:700; font-size:30px; color:#191F2E;
  animation:tx-breath 4s ease-in-out infinite;
}
@keyframes tx-breath{
  0%,100%{ transform:scale(1); opacity:.75; }
  50%{ transform:scale(1.07); opacity:1; }
}
</style>

<span class="tx-fx-3d">3D</span>

<style>
.tx-fx-3d{
  font-family:"Space Grotesk",sans-serif;font-weight:700; font-size:56px; color:#FFCF3F;
  text-shadow:
    1px 1px 0 #191F2E, 2px 2px 0 #191F2E,
    3px 3px 0 #191F2E, 4px 4px 0 #191F2E,
    5px 5px 0 #191F2E, 6px 6px 0 #191F2E;
  animation:tx-3d-float 2.6s ease-in-out infinite;
}
@keyframes tx-3d-float{
  0%,100%{ transform:translate(0,0); }
  50%{ transform:translate(-3px,-3px);
    text-shadow:
      1px 1px 0 #191F2E, 3px 3px 0 #191F2E,
      5px 5px 0 #191F2E, 7px 7px 0 #191F2E,
      9px 9px 0 #191F2E, 11px 11px 0 #191F2E; }
}
</style>

<span class="tx-fx-long">LONG</span>

<style>
.tx-fx-long{
  font-family:"Space Grotesk",sans-serif;font-weight:700; font-size:48px; color:#fff;
  text-shadow:
    2px 2px 0 #3A46E8, 4px 4px 0 #3A46E8,
    6px 6px 0 #3A46E8, 8px 8px 0 #3A46E8,
    10px 10px 0 #3A46E8, 12px 12px 0 #3A46E8,
    14px 14px 0 #3A46E8;
}
</style>

<!-- フラットデザイン全盛期の定番。SassのループでN段生成すると楽 -->

<span class="tx-fx-outline">WOW</span>

<style>
.tx-fx-outline{
  font-family:"Space Grotesk",sans-serif;font-weight:700; font-size:48px; color:#F7F5EF;
  /* 4方向シャドウ×2周で二重縁取り */
  text-shadow:
    3px 0 0 #191F2E, -3px 0 0 #191F2E,
    0 3px 0 #191F2E, 0 -3px 0 #191F2E,
    3px 3px 0 #191F2E, -3px -3px 0 #191F2E,
    3px -3px 0 #191F2E, -3px 3px 0 #191F2E,
    6px 6px 0 #FF5CA0;
}
</style>

<span class="tx-fx-emboss">EMBOSS</span>

<style>
.tx-fx-emboss{
  font-family:"Space Grotesk",sans-serif;font-weight:700; font-size:42px;
  color:#E7E4DA;
  text-shadow:
    -1.5px -1.5px 1px rgba(255,255,255,.9),
    2px 2px 3px rgba(25,31,46,.35);
}
</style>

<!-- 背景色に近い文字色+明暗2つの影で彫れる -->

<span class="tx-fx-spot">SPOTLIGHT</span>

<style>
.tx-fx-spot{
  font-family:"Space Grotesk",sans-serif;font-weight:700; font-size:34px;
  background:radial-gradient(circle 60px at 20% 50%,
    #fff 20%, #3d4358 70%) no-repeat 0 0 / 250% 100%;
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
  animation:tx-spot-go 3s ease-in-out infinite alternate;
}
/* sizeを250%に広げてpositionで往復させる */
@keyframes tx-spot-go{
  to{ background-position:100% 0; }
}
</style>

<!-- radial-gradientの位置をbackground-positionで動かせるようbackground-sizeを広げてもOK -->

<span class="tx-fx-mirror">MIRROR</span>

<style>
.tx-fx-mirror{
  font-family:"Space Grotesk",sans-serif;font-weight:700; font-size:40px; color:#3A46E8;
  -webkit-box-reflect:below 2px
    linear-gradient(transparent 30%, rgba(0,0,0,.28));
}
</style>

<!-- -webkit-box-reflectはChrome/Safari対応。1行で鏡面 -->

<span class="tx-fx-fire">FIRE</span>

<style>
.tx-fx-fire{
  font-family:"Space Grotesk",sans-serif;font-weight:700; font-size:42px; color:#fff;
  animation:tx-fire-go 1.6s ease-in-out infinite alternate;
}
@keyframes tx-fire-go{
  from{
    text-shadow:0 0 8px #fff, 0 0 16px #FFCF3F,
      0 0 32px #F59E0B, 0 0 52px #FF3B5C;
  }
  to{
    text-shadow:0 0 10px #fff, 0 0 24px #FFCF3F,
      0 0 48px #F59E0B, 0 0 80px #FF3B5C;
  }
}
</style>

<span class="tx-fx-slice" data-text="SLICE">SLICE</span>

<style>
.tx-fx-slice{
  position:relative; font-family:"Space Grotesk",sans-serif;font-weight:700; font-size:44px;
  color:transparent;
}
.tx-fx-slice::before,
.tx-fx-slice::after{
  content:attr(data-text);
  position:absolute; inset:0; color:#191F2E;
  transition:transform .3s ease;
}
.tx-fx-slice::before{ clip-path:inset(0 0 52% 0); }
.tx-fx-slice::after{ clip-path:inset(48% 0 0 0); }
.tx-fx-slice:hover::before{ transform:translateX(-6px); color:#3A46E8; }
.tx-fx-slice:hover::after{ transform:translateX(6px); color:#FF5CA0; }
</style>

<span class="tx-fx-shadowdance">SHADOW</span>

<style>
.tx-fx-shadowdance{
  font-family:"Space Grotesk",sans-serif;font-weight:700; font-size:38px; color:#191F2E;
  animation:tx-shdance 3s ease-in-out infinite;
}
@keyframes tx-shdance{
  0%,100%{ text-shadow:6px 6px 0 rgba(58,70,232,.35); }
  25%{ text-shadow:-6px 6px 0 rgba(255,92,160,.35); }
  50%{ text-shadow:-6px -6px 0 rgba(255,207,63,.6); }
  75%{ text-shadow:6px -6px 0 rgba(32,180,134,.35); }
}
</style>

<!-- 本体は動かさず影の位置だけを回す -->

<span class="tx-fx-pattern">STRIPE</span>

<style>
.tx-fx-pattern{
  font-family:"Space Grotesk",sans-serif;font-weight:700; font-size:46px;
  background:linear-gradient(45deg,
    #3A46E8 25%, #5EE7FF 25% 50%,
    #3A46E8 50% 75%, #5EE7FF 75%);
  background-size:28px 28px;
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
  animation:tx-pat-go 1s linear infinite;
}
@keyframes tx-pat-go{
  to{ background-position:28px 0; }
}
</style>

<div class="im-zm-in"><img class="ph" src="01.jpg" alt=""></div>

<style>
.im-zm-in{
  position:relative; width:200px; height:140px;
  border-radius:10px; overflow:hidden; cursor:pointer;
}
.im-zm-in .ph{
  display:block;
  width:100%; height:100%;
  object-fit:cover;
}
.im-zm-in .ph{ transition:transform .5s ease; }
.im-zm-in:hover .ph{ transform:scale(1.15); }
</style>

<!-- サンプル画像01〜03.jpgはHTMLと同じ階層に置く。実案件ではsrcを差し替えるだけ -->

<div class="im-zm-out"><img class="ph" src="01.jpg" alt=""></div>

<style>
.im-zm-out{
  position:relative; width:200px; height:140px;
  border-radius:10px; overflow:hidden; cursor:pointer;
}
.im-zm-out .ph{
  display:block;
  width:100%; height:100%;
  object-fit:cover;
}
.im-zm-out .ph{ transform:scale(1.14); transition:transform .5s ease; }
.im-zm-out:hover .ph{ transform:scale(1); }
</style>

<!-- サンプル画像01〜03.jpgはHTMLと同じ階層に置く。実案件ではsrcを差し替えるだけ -->

<div class="im-zm-rot"><img class="ph" src="01.jpg" alt=""></div>

<style>
.im-zm-rot{
  position:relative; width:200px; height:140px;
  border-radius:10px; overflow:hidden; cursor:pointer;
}
.im-zm-rot .ph{
  display:block;
  width:100%; height:100%;
  object-fit:cover;
}
.im-zm-rot .ph{ transition:transform .55s ease; }
.im-zm-rot:hover .ph{ transform:scale(1.18) rotate(4deg); }
</style>

<!-- サンプル画像01〜03.jpgはHTMLと同じ階層に置く。実案件ではsrcを差し替えるだけ -->

<div class="im-zm-blur"><img class="ph" src="01.jpg" alt=""></div>

<style>
.im-zm-blur{
  position:relative; width:200px; height:140px;
  border-radius:10px; overflow:hidden; cursor:pointer;
}
.im-zm-blur .ph{
  display:block;
  width:100%; height:100%;
  object-fit:cover;
}
.im-zm-blur .ph{ filter:blur(3px); transform:scale(1.1);
  transition:filter .5s, transform .5s; }
.im-zm-blur:hover .ph{ filter:blur(0); transform:scale(1.02); }
</style>

<!-- サンプル画像01〜03.jpgはHTMLと同じ階層に置く。実案件ではsrcを差し替えるだけ -->

<div class="im-zm-pan"><img class="ph" src="01.jpg" alt=""></div>

<style>
.im-zm-pan{
  position:relative; width:200px; height:140px;
  border-radius:10px; overflow:hidden; cursor:pointer;
}
.im-zm-pan .ph{
  display:block;
  width:100%; height:100%;
  object-fit:cover;
}
.im-zm-pan .ph{ transform:scale(1.25); transform-origin:left center;
  transition:transform 2.2s ease; }
.im-zm-pan:hover .ph{ transform:scale(1.25) translateX(-14%); }
</style>

<!-- サンプル画像01〜03.jpgはHTMLと同じ階層に置く。実案件ではsrcを差し替えるだけ -->

<div class="im-zm-tilt"><img class="ph" src="01.jpg" alt=""></div>

<style>
.im-zm-tilt{
  position:relative; width:200px; height:140px;
  border-radius:10px; overflow:hidden; cursor:pointer;
}
.im-zm-tilt .ph{
  display:block;
  width:100%; height:100%;
  object-fit:cover;
}
.im-zm-tilt .ph{ transition:transform .45s cubic-bezier(.3,1.2,.4,1); }
.im-zm-tilt:hover .ph{ transform:scale(1.16) rotate(-3deg); }
</style>

<!-- サンプル画像01〜03.jpgはHTMLと同じ階層に置く。実案件ではsrcを差し替えるだけ -->

<div class="im-fl-mono"><img class="ph" src="01.jpg" alt=""></div>

<style>
.im-fl-mono{
  position:relative; width:200px; height:140px;
  border-radius:10px; overflow:hidden; cursor:pointer;
}
.im-fl-mono .ph{
  display:block;
  width:100%; height:100%;
  object-fit:cover;
}
.im-fl-mono .ph{ filter:grayscale(1); transition:filter .45s ease; }
.im-fl-mono:hover .ph{ filter:grayscale(0); }
</style>

<!-- サンプル画像01〜03.jpgはHTMLと同じ階層に置く。実案件ではsrcを差し替えるだけ -->

<div class="im-fl-sepia"><img class="ph" src="01.jpg" alt=""></div>

<style>
.im-fl-sepia{
  position:relative; width:200px; height:140px;
  border-radius:10px; overflow:hidden; cursor:pointer;
}
.im-fl-sepia .ph{
  display:block;
  width:100%; height:100%;
  object-fit:cover;
}
.im-fl-sepia .ph{ filter:sepia(1); transition:filter .45s ease; }
.im-fl-sepia:hover .ph{ filter:sepia(0); }
</style>

<!-- サンプル画像01〜03.jpgはHTMLと同じ階層に置く。実案件ではsrcを差し替えるだけ -->

<div class="im-fl-sat"><img class="ph" src="01.jpg" alt=""></div>

<style>
.im-fl-sat{
  position:relative; width:200px; height:140px;
  border-radius:10px; overflow:hidden; cursor:pointer;
}
.im-fl-sat .ph{
  display:block;
  width:100%; height:100%;
  object-fit:cover;
}
.im-fl-sat .ph{ filter:saturate(.25); transition:filter .45s ease; }
.im-fl-sat:hover .ph{ filter:saturate(1.4); }
</style>

<!-- サンプル画像01〜03.jpgはHTMLと同じ階層に置く。実案件ではsrcを差し替えるだけ -->

<div class="im-fl-hue"><img class="ph" src="01.jpg" alt=""></div>

<style>
.im-fl-hue{
  position:relative; width:200px; height:140px;
  border-radius:10px; overflow:hidden; cursor:pointer;
}
.im-fl-hue .ph{
  display:block;
  width:100%; height:100%;
  object-fit:cover;
}
.im-fl-hue .ph{ filter:hue-rotate(120deg); transition:filter .45s ease; }
.im-fl-hue:hover .ph{ filter:hue-rotate(0deg); }
</style>

<!-- サンプル画像01〜03.jpgはHTMLと同じ階層に置く。実案件ではsrcを差し替えるだけ -->

<div class="im-fl-inv"><img class="ph" src="01.jpg" alt=""></div>

<style>
.im-fl-inv{
  position:relative; width:200px; height:140px;
  border-radius:10px; overflow:hidden; cursor:pointer;
}
.im-fl-inv .ph{
  display:block;
  width:100%; height:100%;
  object-fit:cover;
}
.im-fl-inv .ph{ filter:invert(1); transition:filter .45s ease; }
.im-fl-inv:hover .ph{ filter:invert(0); }
</style>

<!-- サンプル画像01〜03.jpgはHTMLと同じ階層に置く。実案件ではsrcを差し替えるだけ -->

<div class="im-fl-br"><img class="ph" src="01.jpg" alt=""></div>

<style>
.im-fl-br{
  position:relative; width:200px; height:140px;
  border-radius:10px; overflow:hidden; cursor:pointer;
}
.im-fl-br .ph{
  display:block;
  width:100%; height:100%;
  object-fit:cover;
}
.im-fl-br .ph{ filter:brightness(.55); transition:filter .45s ease; }
.im-fl-br:hover .ph{ filter:brightness(1.08); }
</style>

<!-- サンプル画像01〜03.jpgはHTMLと同じ階層に置く。実案件ではsrcを差し替えるだけ -->

<div class="im-fl-con"><img class="ph" src="01.jpg" alt=""></div>

<style>
.im-fl-con{
  position:relative; width:200px; height:140px;
  border-radius:10px; overflow:hidden; cursor:pointer;
}
.im-fl-con .ph{
  display:block;
  width:100%; height:100%;
  object-fit:cover;
}
.im-fl-con .ph{ filter:contrast(.5) brightness(1.15); transition:filter .45s ease; }
.im-fl-con:hover .ph{ filter:contrast(1); }
</style>

<!-- サンプル画像01〜03.jpgはHTMLと同じ階層に置く。実案件ではsrcを差し替えるだけ -->

<div class="im-fl-duo"><img class="ph" src="01.jpg" alt=""></div>

<style>
.im-fl-duo{
  position:relative; width:200px; height:140px;
  border-radius:10px; overflow:hidden; cursor:pointer;
}
.im-fl-duo .ph{
  display:block;
  width:100%; height:100%;
  object-fit:cover;
}
.im-fl-duo::after{
  content:""; position:absolute; inset:0;
  background:#3A46E8;
  mix-blend-mode:color;   /* 画像を単色トーンに */
  transition:opacity .45s ease;
}
.im-fl-duo:hover::after{ opacity:0; }
</style>

<!-- mix-blend-mode:colorで色を支配→ホバーで解除。サンプル画像01〜03.jpgはHTMLと同じ階層に置く。実案件ではsrcを差し替えるだけ -->

<figure class="im-cp-up"><img class="ph" src="01.jpg" alt=""><figcaption>作品タイトル / 2026</figcaption></figure>

<style>
.im-cp-up{
  position:relative; width:200px; height:140px;
  border-radius:10px; overflow:hidden; cursor:pointer;
}
.im-cp-up .ph{
  display:block;
  width:100%; height:100%;
  object-fit:cover;
}
.im-cp-up figcaption{
  position:absolute; inset:auto 0 0 0;
  padding:10px 14px; font-size:13px; font-weight:700;
  color:#fff; background:rgba(10,12,20,.78);
  transform:translateY(100%);
  transition:transform .35s ease, opacity .35s ease;
}
.im-cp-up:hover figcaption{ transform:none; opacity:1; }
</style>

<!-- サンプル画像01〜03.jpgはHTMLと同じ階層に置く。実案件ではsrcを差し替えるだけ -->

<figure class="im-cp-dn"><img class="ph" src="01.jpg" alt=""><figcaption>作品タイトル / 2026</figcaption></figure>

<style>
.im-cp-dn{
  position:relative; width:200px; height:140px;
  border-radius:10px; overflow:hidden; cursor:pointer;
}
.im-cp-dn .ph{
  display:block;
  width:100%; height:100%;
  object-fit:cover;
}
.im-cp-dn figcaption{
  position:absolute; inset:0 0 auto 0;
  padding:10px 14px; font-size:13px; font-weight:700;
  color:#fff; background:rgba(10,12,20,.78);
  transform:translateY(-100%);
  transition:transform .35s ease, opacity .35s ease;
}
.im-cp-dn:hover figcaption{ transform:none; opacity:1; }
</style>

<!-- サンプル画像01〜03.jpgはHTMLと同じ階層に置く。実案件ではsrcを差し替えるだけ -->

<figure class="im-cp-lf"><img class="ph" src="01.jpg" alt=""><figcaption>作品タイトル / 2026</figcaption></figure>

<style>
.im-cp-lf{
  position:relative; width:200px; height:140px;
  border-radius:10px; overflow:hidden; cursor:pointer;
}
.im-cp-lf .ph{
  display:block;
  width:100%; height:100%;
  object-fit:cover;
}
.im-cp-lf figcaption{
  position:absolute; inset:auto auto 0 0; right:0;
  padding:10px 14px; font-size:13px; font-weight:700;
  color:#fff; background:rgba(10,12,20,.78);
  transform:translateX(-100%);
  transition:transform .35s ease, opacity .35s ease;
}
.im-cp-lf:hover figcaption{ transform:none; opacity:1; }
</style>

<!-- サンプル画像01〜03.jpgはHTMLと同じ階層に置く。実案件ではsrcを差し替えるだけ -->

<figure class="im-cp-rt"><img class="ph" src="01.jpg" alt=""><figcaption>作品タイトル / 2026</figcaption></figure>

<style>
.im-cp-rt{
  position:relative; width:200px; height:140px;
  border-radius:10px; overflow:hidden; cursor:pointer;
}
.im-cp-rt .ph{
  display:block;
  width:100%; height:100%;
  object-fit:cover;
}
.im-cp-rt figcaption{
  position:absolute; inset:auto 0 0 auto; left:0;
  padding:10px 14px; font-size:13px; font-weight:700;
  color:#fff; background:rgba(10,12,20,.78);
  transform:translateX(100%);
  transition:transform .35s ease, opacity .35s ease;
}
.im-cp-rt:hover figcaption{ transform:none; opacity:1; }
</style>

<!-- サンプル画像01〜03.jpgはHTMLと同じ階層に置く。実案件ではsrcを差し替えるだけ -->

<figure class="im-cp-fd"><img class="ph" src="01.jpg" alt=""><figcaption>作品タイトル / 2026</figcaption></figure>

<style>
.im-cp-fd{
  position:relative; width:200px; height:140px;
  border-radius:10px; overflow:hidden; cursor:pointer;
}
.im-cp-fd .ph{
  display:block;
  width:100%; height:100%;
  object-fit:cover;
}
.im-cp-fd figcaption{
  position:absolute; inset:0; display:grid; place-items:center; text-align:center;
  padding:10px 14px; font-size:13px; font-weight:700;
  color:#fff; background:rgba(10,12,20,.78);
  opacity:0;
  transition:transform .35s ease, opacity .35s ease;
}
.im-cp-fd:hover figcaption{ transform:none; opacity:1; }
</style>

<!-- サンプル画像01〜03.jpgはHTMLと同じ階層に置く。実案件ではsrcを差し替えるだけ -->

<figure class="im-cp-zm"><img class="ph" src="01.jpg" alt=""><figcaption>作品タイトル / 2026</figcaption></figure>

<style>
.im-cp-zm{
  position:relative; width:200px; height:140px;
  border-radius:10px; overflow:hidden; cursor:pointer;
}
.im-cp-zm .ph{
  display:block;
  width:100%; height:100%;
  object-fit:cover;
}
.im-cp-zm figcaption{
  position:absolute; inset:0; display:grid; place-items:center;
  padding:10px 14px; font-size:13px; font-weight:700;
  color:#fff; background:rgba(10,12,20,.78);
  opacity:0; transform:scale(1.4);
  transition:transform .35s ease, opacity .35s ease;
}
.im-cp-zm:hover figcaption{ transform:none; opacity:1; }
</style>

<!-- サンプル画像01〜03.jpgはHTMLと同じ階層に置く。実案件ではsrcを差し替えるだけ -->

<div class="im-ov-circle"><img class="ph" src="01.jpg" alt=""></div>

<style>
.im-ov-circle{
  position:relative; width:200px; height:140px;
  border-radius:10px; overflow:hidden; cursor:pointer;
}
.im-ov-circle .ph{
  display:block;
  width:100%; height:100%;
  object-fit:cover;
}
.im-ov-circle::after{
  content:"VIEW";
  position:absolute; inset:0;
  display:grid; place-items:center;
  color:#fff; font-weight:700; letter-spacing:.12em;
  background:rgba(25,31,46,.72);
  clip-path:circle(0% at 50% 50%);
  transition:clip-path .45s ease;
}
.im-ov-circle:hover::after{ clip-path:circle(75% at 50% 50%); }
</style>

<!-- サンプル画像01〜03.jpgはHTMLと同じ階層に置く。実案件ではsrcを差し替えるだけ -->

<div class="im-ov-diamond"><img class="ph" src="01.jpg" alt=""></div>

<style>
.im-ov-diamond{
  position:relative; width:200px; height:140px;
  border-radius:10px; overflow:hidden; cursor:pointer;
}
.im-ov-diamond .ph{
  display:block;
  width:100%; height:100%;
  object-fit:cover;
}
.im-ov-diamond::after{
  content:"VIEW";
  position:absolute; inset:0;
  display:grid; place-items:center;
  color:#fff; font-weight:700; letter-spacing:.12em;
  background:rgba(25,31,46,.72);
  clip-path:polygon(50% 50%,50% 50%,50% 50%,50% 50%);
  transition:clip-path .45s ease;
}
.im-ov-diamond:hover::after{ clip-path:polygon(50% -60%,160% 50%,50% 160%,-60% 50%); }
</style>

<!-- サンプル画像01〜03.jpgはHTMLと同じ階層に置く。実案件ではsrcを差し替えるだけ -->

<div class="im-ov-wipe"><img class="ph" src="01.jpg" alt=""></div>

<style>
.im-ov-wipe{
  position:relative; width:200px; height:140px;
  border-radius:10px; overflow:hidden; cursor:pointer;
}
.im-ov-wipe .ph{
  display:block;
  width:100%; height:100%;
  object-fit:cover;
}
.im-ov-wipe::after{
  content:"VIEW";
  position:absolute; inset:0;
  display:grid; place-items:center;
  color:#fff; font-weight:700; letter-spacing:.12em;
  background:rgba(25,31,46,.72);
  clip-path:polygon(0 0,0 0,-30% 100%,-30% 100%);
  transition:clip-path .45s ease;
}
.im-ov-wipe:hover::after{ clip-path:polygon(0 0,130% 0,100% 100%,-30% 100%); }
</style>

<!-- サンプル画像01〜03.jpgはHTMLと同じ階層に置く。実案件ではsrcを差し替えるだけ -->

<div class="im-ov-iris"><img class="ph" src="01.jpg" alt=""></div>

<style>
.im-ov-iris{
  position:relative; width:200px; height:140px;
  border-radius:10px; overflow:hidden; cursor:pointer;
}
.im-ov-iris .ph{
  display:block;
  width:100%; height:100%;
  object-fit:cover;
}
.im-ov-iris::after{
  content:"VIEW";
  position:absolute; inset:0;
  display:grid; place-items:center;
  color:#fff; font-weight:700; letter-spacing:.12em;
  background:rgba(25,31,46,.72);
  clip-path:inset(50% 50%);
  transition:clip-path .45s ease;
}
.im-ov-iris:hover::after{ clip-path:inset(0); }
</style>

<!-- サンプル画像01〜03.jpgはHTMLと同じ階層に置く。実案件ではsrcを差し替えるだけ -->

<div class="im-ov-fade"><img class="ph" src="01.jpg" alt=""></div>

<style>
.im-ov-fade{
  position:relative; width:200px; height:140px;
  border-radius:10px; overflow:hidden; cursor:pointer;
}
.im-ov-fade .ph{
  display:block;
  width:100%; height:100%;
  object-fit:cover;
}
.im-ov-fade::after{
  content:"VIEW";
  position:absolute; inset:0;
  display:grid; place-items:center;
  color:#fff; font-weight:700; letter-spacing:.12em;
  background:rgba(25,31,46,.72);
  opacity:0;
  transition:opacity .45s ease;
}
.im-ov-fade:hover::after{ opacity:1; }
</style>

<!-- サンプル画像01〜03.jpgはHTMLと同じ階層に置く。実案件ではsrcを差し替えるだけ -->

OPEN

<div class="im-ov-doorh"><img class="ph" src="01.jpg" alt=""><i class="dl"></i><i class="dr"></i><b>OPEN</b></div>

<style>
.im-ov-doorh{
  position:relative; width:200px; height:140px;
  border-radius:10px; overflow:hidden; cursor:pointer;
}
.im-ov-doorh .ph{
  display:block;
  width:100%; height:100%;
  object-fit:cover;
}
.im-ov-doorh .dl,
.im-ov-doorh .dr{
  position:absolute; top:0; bottom:0; width:51%;
  background:rgba(25,31,46,.85);
  transition:transform .45s ease;
}
.im-ov-doorh .dl{ left:0; }
.im-ov-doorh .dr{ right:0; }
.im-ov-doorh b{
  position:absolute; inset:0;
  display:grid; place-items:center;
  color:#fff; letter-spacing:.14em;
  opacity:0; transition:opacity .3s;
}
.im-ov-doorh:hover .dl{ transform:translateX(-101%); }
.im-ov-doorh:hover .dr{ transform:translateX(101%); }
.im-ov-doorh:hover b{ opacity:0; }
.im-ov-doorh .dl,.im-ov-doorh .dr{ transform:translateX(0); }
.im-ov-doorh:not(:hover) b{ opacity:1; }
</style>

<!-- 最初は閉じていてホバーで開く。サンプル画像01〜03.jpgはHTMLと同じ階層に置く。実案件ではsrcを差し替えるだけ -->

<div class="im-ov-doorv"><img class="ph" src="01.jpg" alt=""><i class="du"></i><i class="dd"></i></div>

<style>
.im-ov-doorv{
  position:relative; width:200px; height:140px;
  border-radius:10px; overflow:hidden; cursor:pointer;
}
.im-ov-doorv .ph{
  display:block;
  width:100%; height:100%;
  object-fit:cover;
}
.im-ov-doorv .du,
.im-ov-doorv .dd{
  position:absolute; left:0; right:0; height:51%;
  background:rgba(25,31,46,.85);
  transition:transform .45s ease;
}
.im-ov-doorv .du{ top:0; }
.im-ov-doorv .dd{ bottom:0; }
.im-ov-doorv:hover .du{ transform:translateY(-101%); }
.im-ov-doorv:hover .dd{ transform:translateY(101%); }
</style>

<!-- サンプル画像01〜03.jpgはHTMLと同じ階層に置く。実案件ではsrcを差し替えるだけ -->

<div class="im-ov-blind"><img class="ph" src="01.jpg" alt=""></div>

<style>
.im-ov-blind{
  position:relative; width:200px; height:140px;
  border-radius:10px; overflow:hidden; cursor:pointer;
}
.im-ov-blind .ph{
  display:block;
  width:100%; height:100%;
  object-fit:cover;
}
.im-ov-blind::before{
  content:""; position:absolute; inset:0;
  background:repeating-linear-gradient(90deg,
    rgba(25,31,46,.85) 0 20px,
    rgba(25,31,46,.6) 20px 40px);
  transform:scaleY(0); transform-origin:top;
  transition:transform .4s ease;
}
.im-ov-blind::after{
  content:"DETAIL"; position:absolute; inset:0;
  display:grid; place-items:center;
  color:#fff; font-weight:700; letter-spacing:.14em;
  opacity:0; transition:opacity .3s .15s;
}
.im-ov-blind:hover::before{ transform:scaleY(1); }
.im-ov-blind:hover::after{ opacity:1; }
</style>

<!-- サンプル画像01〜03.jpgはHTMLと同じ階層に置く。実案件ではsrcを差し替えるだけ -->

<div class="im-ov-dot"><img class="ph" src="01.jpg" alt=""></div>

<style>
.im-ov-dot{
  position:relative; width:200px; height:140px;
  border-radius:10px; overflow:hidden; cursor:pointer;
}
.im-ov-dot .ph{
  display:block;
  width:100%; height:100%;
  object-fit:cover;
}
.im-ov-dot::before{
  content:""; position:absolute; inset:0;
  background-image:radial-gradient(#191F2E 1.3px, transparent 1.3px);
  background-size:7px 7px;
  opacity:0; transition:opacity .4s;
}
.im-ov-dot::after{
  content:"GALLERY →"; position:absolute;
  left:14px; bottom:12px;
  color:#fff; font-weight:700; font-size:13px;
  opacity:0; transform:translateY(8px);
  transition:opacity .3s .1s, transform .3s .1s;
}
.im-ov-dot:hover::before{ opacity:.55; }
.im-ov-dot:hover::after{ opacity:1; transform:none; }
</style>

<!-- サンプル画像01〜03.jpgはHTMLと同じ階層に置く。実案件ではsrcを差し替えるだけ -->

<div class="im-ov-sweep"><img class="ph" src="01.jpg" alt=""></div>

<style>
.im-ov-sweep{
  position:relative; width:200px; height:140px;
  border-radius:10px; overflow:hidden; cursor:pointer;
}
.im-ov-sweep .ph{
  display:block;
  width:100%; height:100%;
  object-fit:cover;
}
/* 光沢スイープとの違い: 幕が「通過して消える」のではなく
   「塗り広がって留まり」文字が浮かぶ */
.im-ov-sweep::after{
  content:"GALLERY →";
  position:absolute; inset:0;
  display:grid; place-items:center;
  color:#fff; font-weight:700; letter-spacing:.14em;
  background:linear-gradient(105deg,
    rgba(58,70,232,.75), rgba(255,92,160,.75));
  clip-path:polygon(0 0, 0 0, -25% 100%, -25% 100%);
  transition:clip-path .55s cubic-bezier(.6,0,.3,1);
}
.im-ov-sweep:hover::after{
  clip-path:polygon(0 0, 125% 0, 100% 100%, -25% 100%);
}
</style>

<!-- サンプル画像01〜03.jpgはHTMLと同じ階層に置く。実案件ではsrcを差し替えるだけ -->

<div class="im-bd-frame"><img class="ph" src="01.jpg" alt=""></div>

<style>
.im-bd-frame{
  position:relative; width:200px; height:140px;
  border-radius:10px; overflow:hidden; cursor:pointer;
}
.im-bd-frame .ph{
  display:block;
  width:100%; height:100%;
  object-fit:cover;
}
.im-bd-frame::after{
  content:""; position:absolute; inset:10px;
  border:2px solid #fff;
  opacity:0; transform:scale(1.12);
  transition:opacity .35s, transform .35s;
}
.im-bd-frame:hover::after{ opacity:1; transform:scale(1); }
</style>

<!-- サンプル画像01〜03.jpgはHTMLと同じ階層に置く。実案件ではsrcを差し替えるだけ -->

<div class="im-bd-corner"><img class="ph" src="01.jpg" alt=""></div>

<style>
.im-bd-corner{
  position:relative; width:200px; height:140px;
  border-radius:10px; overflow:hidden; cursor:pointer;
}
.im-bd-corner .ph{
  display:block;
  width:100%; height:100%;
  object-fit:cover;
}
.im-bd-corner::before,
.im-bd-corner::after{
  content:""; position:absolute;
  width:22px; height:22px;
  border:3px solid #fff; opacity:0;
  transition:all .35s ease;
}
.im-bd-corner::before{ top:18px; left:18px; border-right:none; border-bottom:none; }
.im-bd-corner::after{ bottom:18px; right:18px; border-left:none; border-top:none; }
.im-bd-corner:hover::before{ opacity:1; top:10px; left:10px; }
.im-bd-corner:hover::after{ opacity:1; bottom:10px; right:10px; }
</style>

<!-- サンプル画像01〜03.jpgはHTMLと同じ階層に置く。実案件ではsrcを差し替えるだけ -->

<div class="im-bd-offset"><img class="ph" src="01.jpg" alt=""></div>

<style>
.im-bd-offset{
  position:relative; width:200px; height:140px; cursor:pointer;
}
.im-bd-offset .ph{
  position:relative; z-index:1;
  display:block;
  width:100%; height:100%; object-fit:cover;
  border-radius:10px;
  background:linear-gradient(135deg,#FF5CA0,#FFCF3F);
  transition:transform .3s ease;
}
.im-bd-offset::after{
  content:""; position:absolute; inset:0;
  border:2px solid #191F2E; border-radius:10px;
  transform:translate(8px,8px);
  transition:transform .3s ease;
}
.im-bd-offset:hover .ph{ transform:translate(-4px,-4px); }
.im-bd-offset:hover::after{ transform:translate(4px,4px); }
</style>

<!-- 本体と枠が逆方向に動いてズレが強調される。サンプル画像01〜03.jpgはHTMLと同じ階層に置く。実案件ではsrcを差し替えるだけ -->

<div class="im-bd-glow"><img class="ph" src="01.jpg" alt=""></div>

<style>
.im-bd-glow{
  position:relative; width:200px; height:140px;
  border-radius:10px; overflow:hidden; cursor:pointer;
}
.im-bd-glow .ph{
  display:block;
  width:100%; height:100%;
  object-fit:cover;
}
.im-bd-glow{
  transition:box-shadow .4s ease, transform .4s;
}
.im-bd-glow:hover{
  transform:translateY(-4px);
  box-shadow:0 0 0 3px rgba(94,231,255,.9),
    0 0 30px rgba(94,231,255,.5);
}
</style>

<!-- サンプル画像01〜03.jpgはHTMLと同じ階層に置く。実案件ではsrcを差し替えるだけ -->

<div class="im-bd-march"><img class="ph" src="01.jpg" alt=""></div>

<style>
.im-bd-march{
  position:relative; width:200px; height:140px;
  padding:5px; cursor:pointer;
  background:
    repeating-linear-gradient(90deg,#191F2E 0 8px,transparent 8px 16px) 0 0/100% 3px no-repeat,
    repeating-linear-gradient(90deg,#191F2E 0 8px,transparent 8px 16px) 0 100%/100% 3px no-repeat,
    repeating-linear-gradient(0deg,#191F2E 0 8px,transparent 8px 16px) 0 0/3px 100% no-repeat,
    repeating-linear-gradient(0deg,#191F2E 0 8px,transparent 8px 16px) 100% 0/3px 100% no-repeat;
}
.im-bd-march:hover{ animation:im-march-go .5s linear infinite; }
@keyframes im-march-go{
  to{ background-position:16px 0, -16px 100%, 0 -16px, 100% 16px; }
}
.im-bd-march .ph{
  display:block;
  width:100%; height:100%; object-fit:cover;
  border-radius:6px;
  background:linear-gradient(135deg,#20B486,#5EE7FF);
}
</style>

<!-- 4辺のrepeating-gradientをずらして「アリの行進」。サンプル画像01〜03.jpgはHTMLと同じ階層に置く。実案件ではsrcを差し替えるだけ -->

<div class="im-bd-pola"><img class="ph" src="01.jpg" alt=""></div>

<style>
.im-bd-pola{
  position:relative; width:200px; height:140px;
  border-radius:10px; overflow:hidden; cursor:pointer;
}
.im-bd-pola .ph{
  display:block;
  width:100%; height:100%;
  object-fit:cover;
}
.im-bd-pola{
  overflow:visible;
  transition:transform .3s cubic-bezier(.3,1.6,.4,1), box-shadow .3s;
}
.im-bd-pola .ph{ border-radius:10px; }
.im-bd-pola:hover{
  transform:rotate(-3deg) scale(1.06);
  box-shadow:8px 10px 0 rgba(25,31,46,.85);
}
</style>

<!-- サンプル画像01〜03.jpgはHTMLと同じ階層に置く。実案件ではsrcを差し替えるだけ -->

<div class="im-3d-tilt-wrap"><div class="im-3d-tilt"><img class="ph" src="01.jpg" alt=""></div></div>

<style>
.im-3d-tilt-wrap{ perspective:700px; }
.im-3d-tilt{
  position:relative; width:200px; height:140px;
  border-radius:10px; overflow:hidden; cursor:pointer;
}
.im-3d-tilt .ph{
  display:block;
  width:100%; height:100%;
  object-fit:cover;
}
.im-3d-tilt{
  transition:transform .35s ease, box-shadow .35s;
}
.im-3d-tilt:hover{
  transform:rotateY(-14deg) rotateX(7deg) scale(1.04);
  box-shadow:-14px 14px 26px rgba(25,31,46,.3);
}
</style>

<!-- マウス追従版は+JS上級編を参照。サンプル画像01〜03.jpgはHTMLと同じ階層に置く。実案件ではsrcを差し替えるだけ -->

商品名¥12,800

<div class="im-3d-flip"><div class="in">
  <div class="f front"><img class="ph" src="01.jpg" alt=""></div>
  <div class="f back"><b>商品名</b><span>¥12,800</span></div>
</div></div>

<style>
.im-3d-flip{
  width:200px; height:140px; perspective:800px; cursor:pointer;
}
.im-3d-flip .in{
  position:relative; width:100%; height:100%;
  transform-style:preserve-3d;
  transition:transform .65s cubic-bezier(.4,.2,.2,1);
}
.im-3d-flip:hover .in{ transform:rotateY(180deg); }
.im-3d-flip .f{
  position:absolute; inset:0;
  border-radius:10px; overflow:hidden;
  backface-visibility:hidden;
}
.im-3d-flip .front .ph{
  display:block;
  width:100%; height:100%; object-fit:cover;
  background:linear-gradient(135deg,#3A46E8,#FF5CA0);
}
.im-3d-flip .back{
  display:grid; place-content:center; gap:4px; text-align:center;
  background:#191F2E; color:#fff;
  transform:rotateY(180deg);
}
</style>

<!-- サンプル画像01〜03.jpgはHTMLと同じ階層に置く。実案件ではsrcを差し替えるだけ -->

NEW

<div class="im-3d-pop"><img class="ph" src="01.jpg" alt=""><b>NEW</b></div>

<style>
.im-3d-pop{
  position:relative; width:200px; height:140px;
  border-radius:10px; cursor:pointer;
  transform-style:preserve-3d; perspective:600px;
}
.im-3d-pop .ph{
  display:block;
  width:100%; height:100%; object-fit:cover;
  border-radius:10px;
  background:linear-gradient(135deg,#F59E0B,#FF5CA0);
}
.im-3d-pop b{
  position:absolute; top:10px; left:10px;
  padding:4px 12px; border-radius:6px;
  background:#FFCF3F; border:2px solid #191F2E;
  font-size:12px;
  transition:transform .35s cubic-bezier(.3,1.4,.4,1), box-shadow .35s;
}
.im-3d-pop:hover b{
  transform:translate(-6px,-8px) rotate(-5deg) scale(1.15);
  box-shadow:4px 5px 0 rgba(25,31,46,.5);
}
</style>

<!-- サンプル画像01〜03.jpgはHTMLと同じ階層に置く。実案件ではsrcを差し替えるだけ -->

<div class="im-3d-swing"><img class="ph" src="01.jpg" alt=""></div>

<style>
.im-3d-swing{
  position:relative; width:200px; height:140px;
  border-radius:10px; overflow:hidden; cursor:pointer;
}
.im-3d-swing .ph{
  display:block;
  width:100%; height:100%;
  object-fit:cover;
}
.im-3d-swing{
  transform-origin:top center;
}
.im-3d-swing:hover{
  animation:im-swing-go 1s ease-in-out;
}
@keyframes im-swing-go{
  20%{ transform:rotate(5deg); }
  40%{ transform:rotate(-4deg); }
  60%{ transform:rotate(2.5deg); }
  80%{ transform:rotate(-1.5deg); }
}
</style>

<!-- 上辺を軸に振り子のように揺れる。サンプル画像01〜03.jpgはHTMLと同じ階層に置く。実案件ではsrcを差し替えるだけ -->

<div class="im-fx-shine"><img class="ph" src="01.jpg" alt=""></div>

<style>
.im-fx-shine{
  position:relative; width:200px; height:140px;
  border-radius:10px; overflow:hidden; cursor:pointer;
}
.im-fx-shine .ph{
  display:block;
  width:100%; height:100%;
  object-fit:cover;
}
.im-fx-shine::after{
  content:""; position:absolute;
  top:0; left:-80%; width:50%; height:100%;
  background:linear-gradient(120deg,
    transparent, rgba(255,255,255,.5), transparent);
  transform:skewX(-25deg);
}
.im-fx-shine:hover::after{
  left:130%;
  transition:left .65s ease;
}
</style>

<!-- サンプル画像01〜03.jpgはHTMLと同じ階層に置く。実案件ではsrcを差し替えるだけ -->

<div class="im-fx-scan"><img class="ph" src="01.jpg" alt=""></div>

<style>
.im-fx-scan{
  position:relative; width:200px; height:140px;
  border-radius:10px; overflow:hidden; cursor:pointer;
}
.im-fx-scan .ph{
  display:block;
  width:100%; height:100%;
  object-fit:cover;
}
.im-fx-scan::after{
  content:""; position:absolute; left:0; right:0; top:-20%;
  height:18%;
  background:linear-gradient(rgba(255,255,255,0),
    rgba(255,255,255,.55), rgba(255,255,255,0));
  opacity:0;
}
.im-fx-scan:hover::after{
  opacity:1;
  animation:im-scan-go 1.1s linear infinite;
}
@keyframes im-scan-go{
  to{ top:110%; }
}
</style>

<!-- サンプル画像01〜03.jpgはHTMLと同じ階層に置く。実案件ではsrcを差し替えるだけ -->

<div class="im-fx-vig"><img class="ph" src="01.jpg" alt=""></div>

<style>
.im-fx-vig{
  position:relative; width:200px; height:140px;
  border-radius:10px; overflow:hidden; cursor:pointer;
}
.im-fx-vig .ph{
  display:block;
  width:100%; height:100%;
  object-fit:cover;
}
.im-fx-vig::after{
  content:""; position:absolute; inset:0;
  background:radial-gradient(circle,
    transparent 40%, rgba(25,31,46,.75) 100%);
  opacity:0; transition:opacity .45s ease;
}
.im-fx-vig:hover::after{ opacity:1; }
</style>

<!-- サンプル画像01〜03.jpgはHTMLと同じ階層に置く。実案件ではsrcを差し替えるだけ -->

<div class="im-fx-lift"><img class="ph" src="01.jpg" alt=""></div>

<style>
.im-fx-lift{
  position:relative; width:200px; height:140px;
  border-radius:10px; overflow:hidden; cursor:pointer;
}
.im-fx-lift .ph{
  display:block;
  width:100%; height:100%;
  object-fit:cover;
}
.im-fx-lift{
  transition:transform .3s ease, box-shadow .3s ease;
}
.im-fx-lift:hover{
  transform:translateY(-8px);
  box-shadow:0 16px 28px rgba(25,31,46,.28);
}
</style>

<!-- サンプル画像01〜03.jpgはHTMLと同じ階層に置く。実案件ではsrcを差し替えるだけ -->

<div class="im-gp-gray"><img class="ph" src="01.jpg" alt=""><img class="ph" src="02.jpg" alt=""><img class="ph" src="03.jpg" alt=""></div>

<style>
.im-gp-gray{
  display:flex; gap:10px; cursor:pointer;
}
.im-gp-gray .ph{
  display:block;
  width:86px; height:110px; object-fit:cover;
  border-radius:8px;
  transition:filter .35s ease;
}
.im-gp-gray:hover .ph{ filter:grayscale(1); }
.im-gp-gray .ph:hover{ filter:grayscale(0); }
</style>

<!-- 親hoverで全員グレー→ホバー中の1枚だけ解除、の2段構え。サンプル画像01〜03.jpgはHTMLと同じ階層に置く。実案件ではsrcを差し替えるだけ -->

<div class="im-gp-dim"><img class="ph" src="01.jpg" alt=""><img class="ph" src="02.jpg" alt=""><img class="ph" src="03.jpg" alt=""></div>

<style>
.im-gp-dim{
  display:flex; gap:10px; cursor:pointer;
}
.im-gp-dim .ph{
  display:block;
  width:86px; height:110px; object-fit:cover;
  border-radius:8px;
  transition:opacity .35s ease;
}
.im-gp-dim:hover .ph{ opacity:.35; }
.im-gp-dim .ph:hover{ opacity:1; }
</style>

<!-- ギャラリーの定番。フォーカス感が出る。サンプル画像01〜03.jpgはHTMLと同じ階層に置く。実案件ではsrcを差し替えるだけ -->

<div class="im-gp-scale"><img class="ph" src="01.jpg" alt=""><img class="ph" src="02.jpg" alt=""><img class="ph" src="03.jpg" alt=""></div>

<style>
.im-gp-scale{
  display:flex; gap:10px; cursor:pointer;
}
.im-gp-scale .ph{
  display:block;
  width:86px; height:110px; object-fit:cover;
  border-radius:8px;
  transition:transform .35s ease;
}
.im-gp-scale:hover .ph{ transform:scale(.92); }
.im-gp-scale .ph:hover{ transform:scale(1.12); }
</style>

<!-- サンプル画像01〜03.jpgはHTMLと同じ階層に置く。実案件ではsrcを差し替えるだけ -->

<div class="im-fx-ken"><img class="ph" src="01.jpg" alt=""></div>

<style>
.im-fx-ken{
  position:relative; width:200px; height:140px;
  border-radius:10px; overflow:hidden; cursor:pointer;
}
.im-fx-ken .ph{
  display:block;
  width:100%; height:100%;
  object-fit:cover;
}
.im-fx-ken .ph{
  transition:transform 6s ease-out;
}
.im-fx-ken:hover .ph{
  transform:scale(1.3) translate(4%,-4%);
}
</style>

<!-- transitionを超スロー(6s)にするだけで映像風に。サンプル画像01〜03.jpgはHTMLと同じ階層に置く。実案件ではsrcを差し替えるだけ -->

<div class="im-fx-ring"><img class="ph" src="01.jpg" alt=""></div>

<style>
.im-fx-ring{
  position:relative; width:200px; height:140px;
  border-radius:10px; overflow:hidden; cursor:pointer;
}
.im-fx-ring .ph{
  display:block;
  width:100%; height:100%;
  object-fit:cover;
}
.im-fx-ring::after{
  content:""; position:absolute;
  inset:0; margin:auto;
  width:30px; height:30px; border-radius:50%;
  border:3px solid #fff;
  opacity:0; transform:scale(.5);
}
.im-fx-ring:hover::after{
  animation:im-ring-go .9s ease-out infinite;
}
@keyframes im-ring-go{
  from{ opacity:.9; transform:scale(.5); }
  to{ opacity:0; transform:scale(4); }
}
</style>

<!-- サンプル画像01〜03.jpgはHTMLと同じ階層に置く。実案件ではsrcを差し替えるだけ -->

SOLD
OUT

<div class="im-fx-stamp"><img class="ph" src="01.jpg" alt=""><b>SOLD<br>OUT</b></div>

<style>
.im-fx-stamp{
  position:relative; width:200px; height:140px;
  border-radius:10px; overflow:hidden; cursor:pointer;
}
.im-fx-stamp .ph{
  display:block;
  width:100%; height:100%;
  object-fit:cover;
}
.im-fx-stamp b{
  position:absolute; inset:0; margin:auto;
  width:86px; height:56px;
  display:grid; place-items:center; text-align:center;
  font-size:15px; line-height:1.2; color:#FF3B5C;
  border:3px solid #FF3B5C; border-radius:8px;
  background:rgba(255,255,255,.85);
  opacity:0; transform:rotate(-14deg) scale(2.2);
}
.im-fx-stamp:hover b{
  opacity:1; transform:rotate(-14deg) scale(1);
  transition:transform .25s cubic-bezier(.3,1.5,.5,1), opacity .15s;
}
</style>

<!-- ズドンと押される感はイージング(バウンス系)が9割。サンプル画像01〜03.jpgはHTMLと同じ階層に置く。実案件ではsrcを差し替えるだけ -->

<div class="ld-dt-jump"><span></span><span></span><span></span></div>

<style>
.ld-dt-jump{ display:flex; gap:10px; }
.ld-dt-jump span{
  width:14px; height:14px; border-radius:50%;
  background:#3A46E8;
  animation:ld-dt-jump-go 1.2s ease-in-out infinite;
}
.ld-dt-jump span:nth-child(2){ animation-delay:.15s; background:#FF5CA0; }
.ld-dt-jump span:nth-child(3){ animation-delay:.3s; background:#FFCF3F; }
@keyframes ld-dt-jump-go{
  0%,60%,100%{ transform:translateY(0); }
  30%{ transform:translateY(-16px); }
}
</style>

<div class="ld-dt-fade"><span></span><span></span><span></span></div>

<style>
.ld-dt-fade{ display:flex; gap:10px; }
.ld-dt-fade span{
  width:14px; height:14px; border-radius:50%;
  background:#3A46E8;
  animation:ld-dt-fade-go 1.2s ease-in-out infinite;
}
.ld-dt-fade span:nth-child(2){ animation-delay:.15s; background:#FF5CA0; }
.ld-dt-fade span:nth-child(3){ animation-delay:.3s; background:#FFCF3F; }
@keyframes ld-dt-fade-go{
  0%,60%,100%{ opacity:.2; }
  30%{ opacity:1; }
}
</style>

<div class="ld-dt-scale"><span></span><span></span><span></span></div>

<style>
.ld-dt-scale{ display:flex; gap:10px; }
.ld-dt-scale span{
  width:14px; height:14px; border-radius:50%;
  background:#3A46E8;
  animation:ld-dt-scale-go 1.2s ease-in-out infinite;
}
.ld-dt-scale span:nth-child(2){ animation-delay:.15s; background:#FF5CA0; }
.ld-dt-scale span:nth-child(3){ animation-delay:.3s; background:#FFCF3F; }
@keyframes ld-dt-scale-go{
  0%,60%,100%{ transform:scale(.55); }
  30%{ transform:scale(1.25); }
}
</style>

<div class="ld-dt-flip"><span></span><span></span><span></span></div>

<style>
.ld-dt-flip{ display:flex; gap:10px; }
.ld-dt-flip span{
  width:14px; height:14px; border-radius:50%;
  background:#3A46E8;
  animation:ld-dt-flip-go 1.4s ease-in-out infinite;
}
.ld-dt-flip span:nth-child(2){ animation-delay:.15s; background:#FF5CA0; }
.ld-dt-flip span:nth-child(3){ animation-delay:.3s; background:#FFCF3F; }
@keyframes ld-dt-flip-go{
  0%,70%,100%{ transform:rotateY(0); }
  35%{ transform:rotateY(180deg) scale(1.2); }
}
</style>

<div class="ld-dt-fall"><span></span><span></span><span></span></div>

<style>
.ld-dt-fall{ display:flex; gap:10px; }
.ld-dt-fall span{
  width:14px; height:14px; border-radius:50%;
  background:#3A46E8;
  animation:ld-dt-fall-go 1.3s cubic-bezier(.5,0,.5,1) infinite;
}
.ld-dt-fall span:nth-child(2){ animation-delay:.15s; background:#FF5CA0; }
.ld-dt-fall span:nth-child(3){ animation-delay:.3s; background:#FFCF3F; }
@keyframes ld-dt-fall-go{
  0%,100%{ transform:translateY(-14px); }
  50%{ transform:translateY(10px) scale(1.1,.8); }
}
</style>

<div class="ld-dt-orbit"></div>

<style>
.ld-dt-orbit{
  position:relative; width:54px; height:54px;
  animation:ld-orbit-spin 1.4s linear infinite;
}
.ld-dt-orbit::before,
.ld-dt-orbit::after{
  content:""; position:absolute; left:50%;
  width:13px; height:13px; margin-left:-6.5px;
  border-radius:50%;
}
.ld-dt-orbit::before{ top:0; background:#3A46E8; }
.ld-dt-orbit::after{ bottom:0; background:#FFCF3F; }
@keyframes ld-orbit-spin{ to{ transform:rotate(360deg); } }
</style>

<div class="ld-dt-newton"><i></i><i></i></div>

<style>
.ld-dt-newton{ display:flex; gap:2px; }
.ld-dt-newton i{
  width:16px; height:16px; border-radius:50%;
}
.ld-dt-newton i:first-child{
  background:#3A46E8;
  animation:ld-nw-l 1s ease-in-out infinite;
}
.ld-dt-newton i:last-child{
  background:#FF5CA0;
  animation:ld-nw-r 1s ease-in-out infinite;
}
@keyframes ld-nw-l{
  0%,50%,100%{ transform:translateX(0); }
  25%{ transform:translateX(-16px); }
}
@keyframes ld-nw-r{
  0%,50%,100%{ transform:translateX(0); }
  75%{ transform:translateX(16px); }
}
</style>

<!-- ニュートンのゆりかご風。交互に弾く -->

<div class="ld-dt-wave5"><i></i><i></i><i></i><i></i><i></i></div>

<style>
.ld-dt-wave5{ display:flex; gap:7px; }
.ld-dt-wave5 i{
  width:11px; height:11px; border-radius:50%;
  background:#20B486;
  animation:ld-w5-go 1.2s ease-in-out infinite;
}
.ld-dt-wave5 i:nth-child(2){ animation-delay:.1s; }
.ld-dt-wave5 i:nth-child(3){ animation-delay:.2s; }
.ld-dt-wave5 i:nth-child(4){ animation-delay:.3s; }
.ld-dt-wave5 i:nth-child(5){ animation-delay:.4s; }
@keyframes ld-w5-go{
  0%,55%,100%{ transform:translateY(0); }
  28%{ transform:translateY(-13px); }
}
</style>

<div class="ld-dt-grid"><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i></div>

<style>
.ld-dt-grid{
  display:grid; grid-template-columns:repeat(3,12px); gap:7px;
}
.ld-dt-grid i{
  width:12px; height:12px; border-radius:3px;
  background:#3A46E8;
  animation:ld-grid-go 1.4s ease-in-out infinite;
}
/* 対角線ごとに遅延 → 波が斜めに走る */
.ld-dt-grid i:nth-child(2),.ld-dt-grid i:nth-child(4){ animation-delay:.12s; }
.ld-dt-grid i:nth-child(3),.ld-dt-grid i:nth-child(5),.ld-dt-grid i:nth-child(7){ animation-delay:.24s; }
.ld-dt-grid i:nth-child(6),.ld-dt-grid i:nth-child(8){ animation-delay:.36s; }
.ld-dt-grid i:nth-child(9){ animation-delay:.48s; }
@keyframes ld-grid-go{
  0%,60%,100%{ opacity:.15; transform:scale(.6); }
  30%{ opacity:1; transform:scale(1); }
}
</style>

<div class="ld-dt-carousel"><i></i><i></i><i></i></div>

<style>
.ld-dt-carousel{ position:relative; width:56px; height:20px; }
.ld-dt-carousel i{
  position:absolute; top:4px; left:22px;
  width:12px; height:12px; border-radius:50%;
  background:#FF5CA0;
  animation:ld-car-go 1.5s linear infinite;
}
.ld-dt-carousel i:nth-child(2){ animation-delay:-.5s; background:#3A46E8; }
.ld-dt-carousel i:nth-child(3){ animation-delay:-1s; background:#FFCF3F; }
/* 前後にスケール差をつけて回転体に見せる */
@keyframes ld-car-go{
  0%{ transform:translateX(-22px) scale(.6); z-index:0; }
  25%{ transform:translateX(0) scale(1.1); z-index:1; }
  50%{ transform:translateX(22px) scale(.6); z-index:0; }
  75%{ transform:translateX(0) scale(.3); z-index:-1; opacity:.5; }
  100%{ transform:translateX(-22px) scale(.6); }
}
</style>

<div class="ld-rg-basic"></div>

<style>
.ld-rg-basic{
  width:48px; height:48px; border-radius:50%;
  border:5px solid rgba(58,70,232,.18);
  border-top-color:#3A46E8;
  animation:ld-rg-spin .9s linear infinite;
}
@keyframes ld-rg-spin{ to{ transform:rotate(360deg); } }
</style>

<div class="ld-rg-dual"></div>

<style>
.ld-rg-dual{ position:relative; width:56px; height:56px; }
.ld-rg-dual::before,
.ld-rg-dual::after{
  content:""; position:absolute; border-radius:50%;
  border:4px solid transparent;
}
.ld-rg-dual::before{
  inset:0;
  border-top-color:#3A46E8; border-bottom-color:#3A46E8;
  animation:ld-dual-a 1.1s linear infinite;
}
.ld-rg-dual::after{
  inset:9px;
  border-left-color:#FF5CA0; border-right-color:#FF5CA0;
  animation:ld-dual-b .9s linear infinite;
}
@keyframes ld-dual-a{ to{ transform:rotate(360deg); } }
@keyframes ld-dual-b{ to{ transform:rotate(-360deg); } }
</style>

<div class="ld-rg-dash"></div>

<style>
.ld-rg-dash{
  width:48px; height:48px; border-radius:50%;
  border:4px dashed #FF5CA0;
  animation:ld-dash-spin 3s linear infinite;
}
@keyframes ld-dash-spin{ to{ transform:rotate(360deg); } }
</style>

<div class="ld-rg-conic"></div>

<style>
.ld-rg-conic{
  width:50px; height:50px; border-radius:50%;
  background:conic-gradient(transparent 15%, #3A46E8);
  /* 中央をくり抜いてリング化 */
  -webkit-mask:radial-gradient(farthest-side,
    transparent calc(100% - 6px), #000 calc(100% - 5px));
  mask:radial-gradient(farthest-side,
    transparent calc(100% - 6px), #000 calc(100% - 5px));
  animation:ld-conic-spin 1s linear infinite;
}
@keyframes ld-conic-spin{ to{ transform:rotate(360deg); } }
</style>

<!-- conic-gradient+maskで尻尾が消えるリング -->

<div class="ld-rg-sonar"></div>

<style>
.ld-rg-sonar{
  position:relative; width:18px; height:18px;
  border-radius:50%; background:#20B486;
}
.ld-rg-sonar::before,
.ld-rg-sonar::after{
  content:""; position:absolute; inset:0;
  border-radius:50%; border:2px solid #20B486;
  animation:ld-sonar-go 1.8s ease-out infinite;
}
.ld-rg-sonar::after{ animation-delay:.9s; }
@keyframes ld-sonar-go{
  from{ transform:scale(1); opacity:.9; }
  to{ transform:scale(3.4); opacity:0; }
}
</style>

<div class="ld-rg-planet"><i></i></div>

<style>
.ld-rg-planet{
  position:relative; width:54px; height:54px;
  border-radius:50%;
  background:radial-gradient(circle at 35% 35%, #7B5CFF, #3A46E8);
}
.ld-rg-planet i{
  position:absolute; inset:-10px;
  animation:ld-pl-spin 1.6s linear infinite;
}
.ld-rg-planet i::before{
  content:""; position:absolute;
  top:0; left:50%; margin-left:-5px;
  width:10px; height:10px; border-radius:50%;
  background:#FFCF3F;
}
@keyframes ld-pl-spin{ to{ transform:rotate(360deg); } }
</style>

<div class="ld-rg-eclipse"></div>

<style>
.ld-rg-eclipse{
  width:44px; height:44px; border-radius:50%;
  background:#FFCF3F;
  box-shadow:inset -12px -4px 0 0 #191F2E;
  animation:ld-ecl-spin 1.6s linear infinite;
}
@keyframes ld-ecl-spin{ to{ transform:rotate(360deg); } }
</style>

<!-- inset shadowを回すだけの三日月 -->

<svg class="ld-rg-arc" viewBox="0 0 50 50">
  <circle cx="25" cy="25" r="20" fill="none" stroke="#FF5CA0" stroke-width="5" stroke-linecap="round"/>
</svg>

<style>
.ld-rg-arc{
  width:50px; height:50px;
  animation:ld-arc-rot 1.8s linear infinite;
}
.ld-rg-arc circle{
  stroke-dasharray:1 125;
  animation:ld-arc-dash 1.4s ease-in-out infinite;
}
@keyframes ld-arc-rot{ to{ transform:rotate(360deg); } }
/* 線の長さ自体を伸縮させる(マテリアル風) */
@keyframes ld-arc-dash{
  0%{ stroke-dasharray:1 125; stroke-dashoffset:0; }
  50%{ stroke-dasharray:90 35; stroke-dashoffset:-30; }
  100%{ stroke-dasharray:1 125; stroke-dashoffset:-124; }
}
</style>

<!-- Googleマテリアルのスピナーと同じ原理 -->

<div class="ld-rg-ripple"><i></i><i></i></div>

<style>
.ld-rg-ripple{ position:relative; width:56px; height:56px; }
.ld-rg-ripple i{
  position:absolute; inset:0;
  border:4px solid #3A46E8; border-radius:50%;
  opacity:0;
  animation:ld-rip-go 1.6s cubic-bezier(0,.2,.6,1) infinite;
}
.ld-rg-ripple i:last-child{ animation-delay:.8s; }
@keyframes ld-rip-go{
  0%{ transform:scale(.1); opacity:1; }
  100%{ transform:scale(1); opacity:0; }
}
</style>

<div class="ld-rg-blade"><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i></div>

<style>
.ld-rg-blade{ position:relative; width:48px; height:48px; }
.ld-rg-blade i{
  position:absolute; left:50%; top:0;
  width:5px; height:13px; margin-left:-2.5px;
  border-radius:3px; background:#5A6072;
  transform-origin:2.5px 24px;
  animation:ld-blade-go 1s linear infinite;
}
.ld-rg-blade i:nth-child(1){ transform:rotate(0deg); animation-delay:-.875s; }
.ld-rg-blade i:nth-child(2){ transform:rotate(45deg); animation-delay:-.75s; }
.ld-rg-blade i:nth-child(3){ transform:rotate(90deg); animation-delay:-.625s; }
.ld-rg-blade i:nth-child(4){ transform:rotate(135deg); animation-delay:-.5s; }
.ld-rg-blade i:nth-child(5){ transform:rotate(180deg); animation-delay:-.375s; }
.ld-rg-blade i:nth-child(6){ transform:rotate(225deg); animation-delay:-.25s; }
.ld-rg-blade i:nth-child(7){ transform:rotate(270deg); animation-delay:-.125s; }
.ld-rg-blade i:nth-child(8){ transform:rotate(315deg); animation-delay:0s; }
@keyframes ld-blade-go{
  from{ opacity:1; } to{ opacity:.12; }
}
</style>

<div class="ld-br-eq"><i></i><i></i><i></i><i></i><i></i></div>

<style>
.ld-br-eq{ display:flex; gap:6px; align-items:center; height:40px; }
.ld-br-eq i{
  width:7px; height:100%; border-radius:4px;
  background:#20B486;
  animation:ld-eq-go 1s ease-in-out infinite;
}
.ld-br-eq i:nth-child(2){ animation-delay:.1s; }
.ld-br-eq i:nth-child(3){ animation-delay:.2s; }
.ld-br-eq i:nth-child(4){ animation-delay:.3s; }
.ld-br-eq i:nth-child(5){ animation-delay:.4s; }
@keyframes ld-eq-go{
  0%,100%{ transform:scaleY(.3); }
  50%{ transform:scaleY(1); }
}
</style>

<div class="ld-br-inde"></div>

<style>
.ld-br-inde{
  position:relative; width:180px; height:8px;
  border-radius:99px; background:#E7E4DA; overflow:hidden;
}
.ld-br-inde::before{
  content:""; position:absolute; inset:0;
  width:40%; border-radius:99px; background:#3A46E8;
  animation:ld-inde-go 1.2s ease-in-out infinite;
}
@keyframes ld-inde-go{
  from{ transform:translateX(-110%); }
  to{ transform:translateX(290%); }
}
</style>

<div class="ld-br-barber"></div>

<style>
.ld-br-barber{
  width:180px; height:16px; border-radius:99px;
  border:2px solid #191F2E; overflow:hidden;
  background:linear-gradient(45deg,
    #FFCF3F 25%, #fff 25% 50%,
    #FFCF3F 50% 75%, #fff 75%);
  background-size:28px 28px;
  animation:ld-barber-go .6s linear infinite;
}
@keyframes ld-barber-go{
  to{ background-position:28px 0; }
}
</style>

<div class="ld-br-steps"><i></i><i></i><i></i><i></i></div>

<style>
.ld-br-steps{ display:flex; gap:6px; align-items:flex-end; height:44px; }
.ld-br-steps i{
  width:12px; border-radius:3px; background:#FF5CA0;
  animation:ld-steps-go 1.6s ease-in-out infinite;
}
.ld-br-steps i:nth-child(1){ height:25%; animation-delay:0s; }
.ld-br-steps i:nth-child(2){ height:50%; animation-delay:.12s; }
.ld-br-steps i:nth-child(3){ height:75%; animation-delay:.24s; }
.ld-br-steps i:nth-child(4){ height:100%; animation-delay:.36s; }
@keyframes ld-steps-go{
  0%,70%,100%{ opacity:1; }
  35%{ opacity:.2; }
}
</style>

<div class="ld-br-seg"><i></i><i></i><i></i><i></i><i></i></div>

<style>
.ld-br-seg{ display:flex; gap:5px; }
.ld-br-seg i{
  width:22px; height:10px; border-radius:3px;
  background:#E7E4DA;
  animation:ld-seg-go 1.5s linear infinite;
}
.ld-br-seg i:nth-child(2){ animation-delay:.15s; }
.ld-br-seg i:nth-child(3){ animation-delay:.3s; }
.ld-br-seg i:nth-child(4){ animation-delay:.45s; }
.ld-br-seg i:nth-child(5){ animation-delay:.6s; }
@keyframes ld-seg-go{
  0%,60%,100%{ background:#E7E4DA; }
  20%,40%{ background:#20B486; }
}
</style>

<div class="ld-br-battery"><i></i></div>

<style>
.ld-br-battery{
  position:relative; width:70px; height:34px;
  border:3px solid #191F2E; border-radius:7px; padding:3px;
}
.ld-br-battery::after{
  content:""; position:absolute;
  right:-9px; top:50%; margin-top:-7px;
  width:6px; height:14px;
  background:#191F2E; border-radius:0 3px 3px 0;
}
.ld-br-battery i{
  display:block; height:100%; border-radius:3px;
  background:#20B486;
  animation:ld-batt-go 2.4s ease-in-out infinite;
}
@keyframes ld-batt-go{
  0%{ width:8%; }
  85%,100%{ width:100%; }
}
</style>

<div class="ld-br-skew"><i></i><i></i><i></i><i></i></div>

<style>
.ld-br-skew{ display:flex; gap:7px; }
.ld-br-skew i{
  width:9px; height:34px;
  transform:skewX(-20deg);
  background:#3A46E8;
  animation:ld-skew-go 1s ease-in-out infinite;
}
.ld-br-skew i:nth-child(2){ animation-delay:.12s; }
.ld-br-skew i:nth-child(3){ animation-delay:.24s; }
.ld-br-skew i:nth-child(4){ animation-delay:.36s; }
@keyframes ld-skew-go{
  0%,60%,100%{ opacity:.2; }
  30%{ opacity:1; }
}
</style>

<div class="ld-sq-morph"></div>

<style>
.ld-sq-morph{
  width:44px; height:44px; background:#FF5CA0;
  animation:ld-morph-go 1.6s ease-in-out infinite;
}
@keyframes ld-morph-go{
  0%{ border-radius:6px; transform:rotate(0); }
  50%{ border-radius:50%; transform:rotate(180deg); background:#3A46E8; }
  100%{ border-radius:6px; transform:rotate(360deg); }
}
</style>

<div class="ld-sq-flip"></div>

<style>
.ld-sq-flip{
  width:40px; height:40px; background:#FF5CA0;
  animation:ld-flip-go 1.6s cubic-bezier(.5,.1,.5,.9) infinite;
}
@keyframes ld-flip-go{
  0%{ transform:perspective(160px) rotateX(0) rotateY(0); }
  50%{ transform:perspective(160px) rotateX(-180deg) rotateY(0); }
  100%{ transform:perspective(160px) rotateX(-180deg) rotateY(-180deg); }
}
</style>

<div class="ld-sq-grid9"><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i></div>

<style>
.ld-sq-grid9{
  display:grid; grid-template-columns:repeat(3,14px); gap:4px;
}
.ld-sq-grid9 i{
  width:14px; height:14px; background:#3A46E8;
  animation:ld-g9-go 1.3s ease-in-out infinite;
}
.ld-sq-grid9 i:nth-child(2),.ld-sq-grid9 i:nth-child(4){ animation-delay:.1s; }
.ld-sq-grid9 i:nth-child(3),.ld-sq-grid9 i:nth-child(5),.ld-sq-grid9 i:nth-child(7){ animation-delay:.2s; }
.ld-sq-grid9 i:nth-child(6),.ld-sq-grid9 i:nth-child(8){ animation-delay:.3s; }
.ld-sq-grid9 i:nth-child(9){ animation-delay:.4s; }
@keyframes ld-g9-go{
  0%,70%,100%{ transform:scale(1); }
  35%{ transform:scale(.1); }
}
</style>

<div class="ld-sq-shuffle"><i></i><i></i><i></i><i></i></div>

<style>
.ld-sq-shuffle{
  position:relative; width:40px; height:40px;
  animation:ld-shuf-rot 1.8s steps(1) infinite;
}
.ld-sq-shuffle i{
  position:absolute; width:17px; height:17px; border-radius:4px;
}
.ld-sq-shuffle i:nth-child(1){ top:0; left:0; background:#3A46E8; }
.ld-sq-shuffle i:nth-child(2){ top:0; right:0; background:#FF5CA0; }
.ld-sq-shuffle i:nth-child(3){ bottom:0; right:0; background:#FFCF3F; }
.ld-sq-shuffle i:nth-child(4){ bottom:0; left:0; background:#20B486; }
@keyframes ld-shuf-rot{}
.ld-sq-shuffle{ animation:ld-shuf-go 1.6s cubic-bezier(.6,0,.3,1) infinite; }
@keyframes ld-shuf-go{
  0%{ transform:rotate(0); }
  25%{ transform:rotate(90deg); }
  50%{ transform:rotate(180deg); }
  75%{ transform:rotate(270deg); }
  100%{ transform:rotate(360deg); }
}
</style>

<!-- 90度ずつカクカク回すのがポイント -->

<div class="ld-sq-travel"><i></i></div>

<style>
.ld-sq-travel{
  position:relative; width:44px; height:44px;
  border:3px solid #E7E4DA; border-radius:8px;
}
.ld-sq-travel i{
  position:absolute; top:-7px; left:-7px;
  width:12px; height:12px; border-radius:50%;
  background:#FF5CA0;
  animation:ld-trv-go 2s cubic-bezier(.6,.1,.4,.9) infinite;
}
@keyframes ld-trv-go{
  0%{ top:-7px; left:-7px; }
  25%{ top:-7px; left:39px; }
  50%{ top:39px; left:39px; }
  75%{ top:39px; left:-7px; }
  100%{ top:-7px; left:-7px; }
}
</style>

<div class="ld-sq-domino"><i></i><i></i><i></i><i></i></div>

<style>
.ld-sq-domino{ display:flex; gap:9px; }
.ld-sq-domino i{
  width:9px; height:34px; border-radius:2px;
  background:#191F2E;
  transform-origin:bottom right;
  animation:ld-dom-go 1.6s ease-in-out infinite;
}
.ld-sq-domino i:nth-child(2){ animation-delay:.12s; }
.ld-sq-domino i:nth-child(3){ animation-delay:.24s; }
.ld-sq-domino i:nth-child(4){ animation-delay:.36s; }
@keyframes ld-dom-go{
  0%,15%{ transform:rotate(0); }
  35%,60%{ transform:rotate(38deg); }
  80%,100%{ transform:rotate(0); }
}
</style>

<div class="ld-sq-stack"><i></i><i></i><i></i></div>

<style>
.ld-sq-stack{ position:relative; width:46px; height:46px; }
.ld-sq-stack i{
  position:absolute; inset:0; border-radius:8px;
  border:3px solid #3A46E8;
  animation:ld-stk-go 1.8s ease-out infinite;
  opacity:0;
}
.ld-sq-stack i:nth-child(2){ animation-delay:.6s; }
.ld-sq-stack i:nth-child(3){ animation-delay:1.2s; }
@keyframes ld-stk-go{
  0%{ transform:scale(1.6); opacity:0; }
  40%{ opacity:1; }
  100%{ transform:scale(.6); opacity:0; }
}
</style>

<!-- 外から内へ吸い込まれるトンネル型 -->

<div class="ld-sq-bounce"><i class="b"></i><i class="s"></i></div>

<style>
.ld-sq-bounce{
  display:flex; flex-direction:column; align-items:center; gap:6px;
  height:60px; justify-content:flex-end;
}
.ld-sq-bounce .b{
  width:22px; height:22px; border-radius:50%;
  background:#F59E0B;
  animation:ld-ball-go .6s cubic-bezier(.3,0,.6,1) infinite alternate;
}
.ld-sq-bounce .s{
  width:26px; height:6px; border-radius:50%;
  background:rgba(25,31,46,.25);
  animation:ld-shadow-go .6s cubic-bezier(.3,0,.6,1) infinite alternate;
}
@keyframes ld-ball-go{
  from{ transform:translateY(-30px); }
  to{ transform:translateY(0) scale(1.15,.85); }
}
@keyframes ld-shadow-go{
  from{ transform:scaleX(.5); opacity:.4; }
  to{ transform:scaleX(1); opacity:1; }
}
</style>

<!-- 影も一緒に伸縮させると接地感が出る -->

<div class="ld-fn-pac"><i class="p"></i><i class="d"></i><i class="d"></i><i class="d"></i></div>

<style>
.ld-fn-pac{ display:flex; align-items:center; gap:10px; }
.ld-fn-pac .p{
  width:0; height:0;
  border:20px solid #FFCF3F;
  border-right-color:transparent;
  border-radius:50%;
  animation:ld-pac-mouth .5s ease-in-out infinite alternate;
}
@keyframes ld-pac-mouth{
  from{ transform:rotate(0); }
  to{ transform:rotate(35deg); }
}
.ld-fn-pac .d{
  width:10px; height:10px; border-radius:50%;
  background:#191F2E;
  animation:ld-pac-eat 1.2s linear infinite;
}
.ld-fn-pac .d:nth-child(3){ animation-delay:.4s; }
.ld-fn-pac .d:nth-child(4){ animation-delay:.8s; }
@keyframes ld-pac-eat{
  to{ transform:translateX(-42px); opacity:0; }
}
</style>

<!-- 口はborderの三角、開閉はrotate -->

<div class="ld-fn-heart">❤️</div>

<style>
.ld-fn-heart{
  font-size:44px; line-height:1;
  animation:ld-heart-go 1.1s ease-in-out infinite;
}
@keyframes ld-heart-go{
  0%,100%{ transform:scale(1); }
  15%{ transform:scale(1.25); }
  30%{ transform:scale(1); }
  45%{ transform:scale(1.18); }
}
</style>

<div class="ld-fn-yin"></div>

<style>
.ld-fn-yin{
  width:48px; height:48px; border-radius:50%;
  background:linear-gradient(#191F2E 50%, #F7F5EF 50%);
  border:2px solid #191F2E;
  position:relative;
  animation:ld-yin-spin 1.4s linear infinite;
}
.ld-fn-yin::before,
.ld-fn-yin::after{
  content:""; position:absolute; top:50%;
  width:24px; height:24px; margin-top:-12px;
  border-radius:50%;
}
.ld-fn-yin::before{ left:0; background:radial-gradient(circle at center, #F7F5EF 22%, #191F2E 26%); }
.ld-fn-yin::after{ right:0; background:radial-gradient(circle at center, #191F2E 22%, #F7F5EF 26%); }
@keyframes ld-yin-spin{ to{ transform:rotate(360deg); } }
</style>

<div class="ld-fn-clock"><i class="h"></i><i class="m"></i></div>

<style>
.ld-fn-clock{
  position:relative; width:50px; height:50px;
  border-radius:50%; border:3px solid #191F2E; background:#fff;
}
.ld-fn-clock i{
  position:absolute; left:50%; bottom:50%;
  transform-origin:bottom center;
  background:#191F2E; border-radius:2px;
}
.ld-fn-clock .h{
  width:3.5px; height:13px; margin-left:-1.75px;
  animation:ld-clock-spin 6s linear infinite;
}
.ld-fn-clock .m{
  width:2.5px; height:18px; margin-left:-1.25px;
  animation:ld-clock-spin .5s linear infinite;
}
@keyframes ld-clock-spin{ to{ transform:rotate(360deg); } }
</style>

<div class="ld-fn-radar"></div>

<style>
.ld-fn-radar{
  position:relative; width:64px; height:64px; border-radius:50%;
  border:2px solid rgba(94,231,255,.5);
  background:
    radial-gradient(circle, transparent 58%, rgba(94,231,255,.15) 60%, transparent 62%),
    radial-gradient(circle, transparent 28%, rgba(94,231,255,.15) 30%, transparent 32%);
  overflow:hidden;
}
.ld-fn-radar::before{
  content:""; position:absolute; inset:0;
  background:conic-gradient(rgba(94,231,255,0) 82%, rgba(94,231,255,.7));
  animation:ld-radar-spin 1.8s linear infinite;
}
@keyframes ld-radar-spin{ to{ transform:rotate(360deg); } }
</style>

<span class="ld-tx-dots">Loading</span>

<style>
.ld-tx-dots{
  font-family:"JetBrains Mono",monospace;
  font-size:19px; font-weight:600;
}
.ld-tx-dots::after{
  content:""; display:inline-block;
  width:3ch; text-align:left;
  animation:ld-txd-go 1.4s steps(1) infinite;
}
@keyframes ld-txd-go{
  0%{ content:""; }
  25%{ content:"."; }
  50%{ content:".."; }
  75%{ content:"..."; }
}
</style>

<!-- content自体をアニメーションできる -->

<span class="ld-tx-jump"><i>L</i><i>O</i><i>A</i><i>D</i><i>I</i><i>N</i><i>G</i></span>

<style>
.ld-tx-jump i{
  display:inline-block; font-style:normal;
  font-family:"Space Grotesk",sans-serif;
  font-size:22px; font-weight:700; color:#3A46E8;
  animation:ld-txj-go 1.4s ease-in-out infinite;
}
.ld-tx-jump i:nth-child(2){ animation-delay:.08s; }
.ld-tx-jump i:nth-child(3){ animation-delay:.16s; }
.ld-tx-jump i:nth-child(4){ animation-delay:.24s; }
.ld-tx-jump i:nth-child(5){ animation-delay:.32s; }
.ld-tx-jump i:nth-child(6){ animation-delay:.4s; }
.ld-tx-jump i:nth-child(7){ animation-delay:.48s; }
@keyframes ld-txj-go{
  0%,55%,100%{ transform:translateY(0); }
  25%{ transform:translateY(-10px); color:#FF5CA0; }
}
</style>

<span class="ld-tx-shim">NOW LOADING</span>

<style>
.ld-tx-shim{
  font-family:"Space Grotesk",sans-serif;
  font-size:22px; font-weight:700; letter-spacing:.1em;
  background:linear-gradient(100deg,
    #C9CBD4 40%, #191F2E 50%, #C9CBD4 60%);
  background-size:250% 100%;
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
  animation:ld-shim-go 2s linear infinite;
}
@keyframes ld-shim-go{
  to{ background-position:-250% 0; }
}
</style>

<span class="ld-tx-pct"></span>

<style>
@property --ld-pct{
  syntax:"<integer>"; initial-value:0; inherits:false;
}
.ld-tx-pct{
  font-family:"Space Grotesk",sans-serif;
  font-size:36px; font-weight:700; color:#3A46E8;
  counter-reset:pct var(--ld-pct);
  animation:ld-pct-go 3s linear infinite;
}
.ld-tx-pct::before{ content:counter(pct); }
.ld-tx-pct::after{ content:"%"; font-size:20px; color:#FF5CA0; }
@keyframes ld-pct-go{
  from{ --ld-pct:0; }
  to{ --ld-pct:100; }
}
</style>

<!-- @propertyで整数を登録するとアニメ可能に(Chrome/Edge) -->

<div class="ld-tx-skel">
  <i class="sk av"></i>
  <i class="sk l1"></i>
  <i class="sk l2"></i>
</div>

<style>
.ld-tx-skel{
  display:grid; grid-template-columns:48px 1fr;
  gap:10px; align-items:center; width:220px;
}
.ld-tx-skel .sk{
  position:relative; overflow:hidden;
  background:#E7E4DA; border-radius:6px;
}
.ld-tx-skel .av{ width:48px; height:48px; border-radius:50%; grid-row:span 2; }
.ld-tx-skel .l1{ height:13px; width:75%; }
.ld-tx-skel .l2{ height:11px; }
.ld-tx-skel .sk::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(90deg,
    transparent, rgba(255,255,255,.8), transparent);
  transform:translateX(-100%);
  animation:ld-skel-go 1.4s infinite;
}
@keyframes ld-skel-go{
  to{ transform:translateX(100%); }
}
</style>

<div class="ld-fn-hour">⏳</div>

<style>
.ld-fn-hour{
  font-size:42px; line-height:1;
  animation:ld-hour-go 2s ease-in-out infinite;
}
/* 待つ→くるっと反転、を繰り返す */
@keyframes ld-hour-go{
  0%,70%{ transform:rotate(0); }
  85%,100%{ transform:rotate(180deg); }
}
</style>

<div class="ld-fn-coin">¥</div>

<style>
.ld-fn-coin{
  width:46px; height:46px; border-radius:50%;
  display:grid; place-items:center;
  font-family:"Space Grotesk",sans-serif;
  font-size:24px; font-weight:700; color:#8a6d00;
  background:radial-gradient(circle at 35% 30%, #ffe9a3, #FFCF3F 60%, #e0a800);
  border:2.5px solid #c99700;
  animation:ld-coin-go 1.4s cubic-bezier(.5,.05,.5,.95) infinite;
}
@keyframes ld-coin-go{
  to{ transform:rotateY(360deg); }
}
</style>

<div class="ld-fn-gear"><i>⚙️</i><i>⚙️</i></div>

<style>
.ld-fn-gear{ display:flex; align-items:center; }
.ld-fn-gear i{
  font-style:normal; line-height:1;
  animation:ld-gear-a 2.4s linear infinite;
}
.ld-fn-gear i:first-child{ font-size:44px; }
.ld-fn-gear i:last-child{
  font-size:30px; margin-left:-6px; margin-top:24px;
  animation-name:ld-gear-b;
  animation-duration:1.65s;   /* 歯数比っぽく速度を変える */
}
@keyframes ld-gear-a{ to{ transform:rotate(360deg); } }
@keyframes ld-gear-b{ to{ transform:rotate(-360deg); } }
</style>

<svg class="ld-fn-inf" viewBox="0 0 100 50">
  <path d="M25 25 C25 10 45 10 50 25 C55 40 75 40 75 25 C75 10 55 10 50 25 C45 40 25 40 25 25 Z"
    fill="none" stroke="#3A46E8" stroke-width="6" stroke-linecap="round"/>
</svg>

<style>
.ld-fn-inf{ width:90px; height:46px; }
.ld-fn-inf path{
  stroke-dasharray:44 160;
  animation:ld-inf-go 1.6s linear infinite;
}
/* 短い線分をパスに沿って走らせる */
@keyframes ld-inf-go{
  to{ stroke-dashoffset:-204; }
}
</style>

<!-- stroke-dashoffsetを回すとパス上を光が走る -->

<div class="ld-fn-wind"><i></i><i></i><i></i><i></i></div>

<style>
.ld-fn-wind{
  position:relative; width:54px; height:54px;
  animation:ld-wind-spin 1.6s cubic-bezier(.5,.1,.5,.9) infinite;
}
.ld-fn-wind i{
  position:absolute; top:50%; left:50%;
  width:24px; height:24px;
  border-radius:0 70% 0 70%;
  transform-origin:0 0;
}
.ld-fn-wind i:nth-child(1){ background:#3A46E8; transform:rotate(0deg); }
.ld-fn-wind i:nth-child(2){ background:#FF5CA0; transform:rotate(90deg); }
.ld-fn-wind i:nth-child(3){ background:#FFCF3F; transform:rotate(180deg); }
.ld-fn-wind i:nth-child(4){ background:#20B486; transform:rotate(270deg); }
@keyframes ld-wind-spin{ to{ transform:rotate(360deg); } }
</style>

<!-- border-radiusの対角70%で花びら型を作る -->

<label class="ui-sw-ios"><input type="checkbox"><span class="tr"></span></label>

<style>
.ui-sw-ios{ position:relative; display:inline-block; width:70px; height:38px; cursor:pointer; }
.ui-sw-ios input{ display:none; }
.ui-sw-ios .tr{
  position:absolute; inset:0; border-radius:999px;
  background:#C9CBD4; border:2px solid #191F2E;
  transition:background .3s;
}
.ui-sw-ios .tr::before{
  content:""; position:absolute; top:2px; left:2px;
  width:28px; height:28px; border-radius:50%;
  background:#fff; border:2px solid #191F2E; box-sizing:border-box;
  transition:translate .3s cubic-bezier(.3,1.5,.5,1);
}
.ui-sw-ios input:checked + .tr{ background:#20B486; }
.ui-sw-ios input:checked + .tr::before{ translate:32px 0; }
</style>

<label class="ui-sw-mat"><input type="checkbox"><span class="tr"></span></label>

<style>
.ui-sw-mat{ position:relative; display:inline-block; width:52px; height:20px; cursor:pointer; }
.ui-sw-mat input{ display:none; }
.ui-sw-mat .tr{
  position:absolute; inset:0; border-radius:999px;
  background:#C9CBD4; transition:background .3s;
}
/* つまみがトラックからはみ出すタイプ */
.ui-sw-mat .tr::before{
  content:""; position:absolute; top:-4px; left:0;
  width:28px; height:28px; border-radius:50%;
  background:#fff; box-shadow:0 2px 6px rgba(25,31,46,.4);
  transition:translate .25s ease, background .25s;
}
.ui-sw-mat input:checked + .tr{ background:rgba(58,70,232,.4); }
.ui-sw-mat input:checked + .tr::before{ translate:24px 0; background:#3A46E8; }
</style>

<label class="ui-sw-day"><input type="checkbox"><span class="tr"><i>☀️</i><i>🌙</i></span></label>

<style>
.ui-sw-day{ position:relative; display:inline-block; width:84px; height:42px; cursor:pointer; }
.ui-sw-day input{ display:none; }
.ui-sw-day .tr{
  position:absolute; inset:0; border-radius:999px; overflow:hidden;
  background:linear-gradient(#7cc4ff,#dff1ff);
  border:2px solid #191F2E;
  transition:background 1s;
}
.ui-sw-day .tr i{
  position:absolute; top:5px; left:6px;
  font-style:normal; font-size:24px; line-height:1;
  transition:translate .5s cubic-bezier(.3,1.3,.4,1), opacity .3s;
}
.ui-sw-day .tr i:last-child{ opacity:0; translate:0 30px; }
.ui-sw-day input:checked + .tr{ background:linear-gradient(#0b1030,#2a3160); }
.ui-sw-day input:checked + .tr i:first-child{ translate:42px -34px; opacity:0; }
.ui-sw-day input:checked + .tr i:last-child{ translate:42px 0; opacity:1; }
</style>

<!-- 太陽が沈んで月が昇る -->

<label class="ui-sw-txt"><input type="checkbox"><span class="tr"><b>OFF</b><b>ON</b><i></i></span></label>

<style>
.ui-sw-txt{ position:relative; display:inline-block; width:96px; height:38px; cursor:pointer; }
.ui-sw-txt input{ display:none; }
.ui-sw-txt .tr{
  position:absolute; inset:0; display:flex;
  border-radius:10px; overflow:hidden;
  border:2px solid #191F2E; background:#fff;
  font-family:"Space Grotesk",sans-serif; font-size:12px; font-weight:700;
}
.ui-sw-txt b{ flex:1; display:grid; place-items:center; z-index:1; transition:color .3s; }
.ui-sw-txt i{
  position:absolute; top:0; bottom:0; left:0; width:50%;
  background:#C9CBD4;
  transition:translate .3s ease, background .3s;
}
.ui-sw-txt input:checked + .tr i{ translate:100% 0; background:#20B486; }
.ui-sw-txt input:checked + .tr b:last-of-type{ color:#fff; }
.ui-sw-txt input:not(:checked) + .tr b:first-of-type{ color:#3d4358; }
</style>

<label class="ui-sw-jelly"><input type="checkbox"><span class="tr"></span></label>

<style>
.ui-sw-jelly{ position:relative; display:inline-block; width:72px; height:38px; cursor:pointer; }
.ui-sw-jelly input{ display:none; }
.ui-sw-jelly .tr{
  position:absolute; inset:0; border-radius:999px;
  background:#C9CBD4; transition:background .35s;
}
.ui-sw-jelly .tr::before{
  content:""; position:absolute; top:4px; left:4px;
  width:30px; height:30px; border-radius:50%;
  background:#fff; box-shadow:0 2px 5px rgba(25,31,46,.35);
  transition:all .35s cubic-bezier(.3,1.4,.4,1);
}
/* 移動中に横に伸びる */
.ui-sw-jelly:active .tr::before{ width:40px; }
.ui-sw-jelly input:checked + .tr{ background:#FF5CA0; }
.ui-sw-jelly input:checked + .tr::before{ left:calc(100% - 34px); }
</style>

<!-- :activeで幅を伸ばすとゼリー感が出る -->

<label class="ui-sw-check"><input type="checkbox"><span class="tr"></span></label>

<style>
.ui-sw-check{ position:relative; display:inline-block; width:70px; height:38px; cursor:pointer; }
.ui-sw-check input{ display:none; }
.ui-sw-check .tr{
  position:absolute; inset:0; border-radius:999px;
  background:#C9CBD4; transition:background .3s;
}
.ui-sw-check .tr::before{
  content:"✕"; display:grid; place-items:center;
  position:absolute; top:3px; left:3px;
  width:32px; height:32px; border-radius:50%;
  background:#fff; color:#9aa0b4;
  font-size:14px; font-weight:700;
  box-shadow:0 2px 4px rgba(25,31,46,.3);
  transition:translate .3s ease, color .3s;
}
.ui-sw-check input:checked + .tr{ background:#20B486; }
.ui-sw-check input:checked + .tr::before{
  content:"✓"; translate:32px 0; color:#20B486;
}
</style>

<label class="ui-ck-draw">
  <input type="checkbox">
  <span class="box"><svg viewBox="0 0 24 24"><path d="M4 12.5l5 5L20 6.5"/></svg></span>
  利用規約に同意する
</label>

<style>
.ui-ck-draw{
  display:inline-flex; gap:10px; align-items:center;
  cursor:pointer; font-weight:700; font-size:14px; user-select:none;
}
.ui-ck-draw input{ display:none; }
.ui-ck-draw .box{
  width:26px; height:26px;
  border:2px solid #191F2E; border-radius:7px;
  display:grid; place-items:center; background:#fff;
  transition:background .25s, transform .15s;
}
.ui-ck-draw .box svg{ width:16px; height:16px; }
.ui-ck-draw .box path{
  stroke:#fff; stroke-width:3.5; fill:none;
  stroke-linecap:round; stroke-linejoin:round;
  stroke-dasharray:26; stroke-dashoffset:26;
  transition:stroke-dashoffset .3s ease .05s;
}
.ui-ck-draw input:checked ~ .box{ background:#20B486; transform:scale(1.08); }
.ui-ck-draw input:checked ~ .box path{ stroke-dashoffset:0; }
</style>

<label class="ui-ck-pop"><input type="checkbox"><span class="box">✓</span> 通知を受け取る</label>

<style>
.ui-ck-pop{
  display:inline-flex; gap:10px; align-items:center;
  cursor:pointer; font-weight:700; font-size:14px; user-select:none;
}
.ui-ck-pop input{ display:none; }
.ui-ck-pop .box{
  width:26px; height:26px;
  display:grid; place-items:center;
  border:2px solid #191F2E; border-radius:7px;
  background:#fff; color:transparent; font-size:14px;
  transition:all .2s cubic-bezier(.3,1.6,.4,1);
}
.ui-ck-pop input:checked + .box{
  background:#3A46E8; color:#fff;
  transform:scale(1.15) rotate(6deg);
}
</style>

<label class="ui-ck-heart"><input type="checkbox"><span class="h">♥</span></label>

<style>
.ui-ck-heart{ display:inline-block; cursor:pointer; }
.ui-ck-heart input{ display:none; }
.ui-ck-heart .h{
  position:relative; display:inline-block;
  font-size:44px; line-height:1; color:#C9CBD4;
  transition:color .2s, transform .2s;
}
.ui-ck-heart input:checked + .h{
  color:#FF3B5C;
  animation:ui-heart-pop .45s cubic-bezier(.3,1.6,.4,1);
}
/* 放射する破線リング */
.ui-ck-heart .h::before{
  content:""; position:absolute; inset:-8px;
  border-radius:50%;
  border:3px dotted #FF3B5C;
  opacity:0; transform:scale(.4);
}
.ui-ck-heart input:checked + .h::before{
  animation:ui-heart-burst .5s ease-out;
}
@keyframes ui-heart-pop{
  0%{ transform:scale(0); } 60%{ transform:scale(1.3); } 100%{ transform:scale(1); }
}
@keyframes ui-heart-burst{
  0%{ opacity:1; transform:scale(.4); }
  100%{ opacity:0; transform:scale(1.5); }
}
</style>

<span class="ui-ck-radio">
  <label><input type="radio" name="uir1" checked><i></i>プランA</label>
  <label><input type="radio" name="uir1"><i></i>プランB</label>
</span>

<style>
.ui-ck-radio{ display:flex; gap:20px; font-weight:700; font-size:14px; }
.ui-ck-radio label{ display:inline-flex; gap:8px; align-items:center; cursor:pointer; }
.ui-ck-radio input{ display:none; }
.ui-ck-radio i{
  width:24px; height:24px; border-radius:50%;
  border:2px solid #191F2E; background:#fff;
  display:grid; place-items:center;
}
.ui-ck-radio i::before{
  content:""; width:12px; height:12px; border-radius:50%;
  background:#3A46E8;
  transform:scale(0);
  transition:transform .25s cubic-bezier(.3,1.6,.4,1);
}
.ui-ck-radio input:checked + i::before{ transform:scale(1); }
</style>

<span class="ui-ck-ring">
  <label><input type="radio" name="uir2" checked><i></i>毎日</label>
  <label><input type="radio" name="uir2"><i></i>週1</label>
</span>

<style>
.ui-ck-ring{ display:flex; gap:20px; font-weight:700; font-size:14px; }
.ui-ck-ring label{ display:inline-flex; gap:8px; align-items:center; cursor:pointer; }
.ui-ck-ring input{ display:none; }
.ui-ck-ring i{
  width:24px; height:24px; border-radius:50%;
  border:2px solid #C9CBD4; box-sizing:border-box;
  transition:border .25s ease;
}
/* 枠線の太さで塗る */
.ui-ck-ring input:checked + i{
  border:8px solid #FF5CA0;
}
</style>

<div class="ui-ck-star">
  <input type="radio" name="uist" id="uist5"><label for="uist5">★</label>
  <input type="radio" name="uist" id="uist4"><label for="uist4">★</label>
  <input type="radio" name="uist" id="uist3"><label for="uist3">★</label>
  <input type="radio" name="uist" id="uist2"><label for="uist2">★</label>
  <input type="radio" name="uist" id="uist1"><label for="uist1">★</label>
</div>

<style>
/* DOMは5→1の逆順で置くのがトリック */
.ui-ck-star{ display:flex; flex-direction:row-reverse; gap:6px; }
.ui-ck-star input{ display:none; }
.ui-ck-star label{
  font-size:34px; color:#D6D3C6; cursor:pointer;
  transition:color .2s, transform .2s;
}
/* ~ は後続にしか効かないので逆順DOMにする */
.ui-ck-star label:hover,
.ui-ck-star label:hover ~ label,
.ui-ck-star input:checked ~ label{ color:#FFCF3F; }
.ui-ck-star label:hover{ transform:scale(1.25) rotate(8deg); }
</style>

<span class="ui-tp-top" data-tip="data-tip属性の中身です">hover</span>

<style>
.ui-tp-top{
  position:relative; display:inline-block;
  padding:10px 22px; font-weight:700; font-size:14px;
  border:1.5px dashed #3A46E8; border-radius:8px;
  color:#3A46E8; cursor:help;
}
.ui-tp-top::before{
  content:attr(data-tip);
  position:absolute; bottom:calc(100% + 10px); left:50%;
  white-space:nowrap; padding:7px 14px;
  font-size:12px; font-weight:500;
  color:#fff; background:#191F2E; border-radius:6px;
  opacity:0; pointer-events:none;
  translate:-50% 6px;
  transition:opacity .25s, translate .25s;
}
.ui-tp-top:hover::before{ opacity:1; translate:-50% 0; }
</style>

<span class="ui-tp-btm" data-tip="data-tip属性の中身です">hover</span>

<style>
.ui-tp-btm{
  position:relative; display:inline-block;
  padding:10px 22px; font-weight:700; font-size:14px;
  border:1.5px dashed #3A46E8; border-radius:8px;
  color:#3A46E8; cursor:help;
}
.ui-tp-btm::before{
  content:attr(data-tip);
  position:absolute; top:calc(100% + 10px); left:50%;
  white-space:nowrap; padding:7px 14px;
  font-size:12px; font-weight:500;
  color:#fff; background:#191F2E; border-radius:6px;
  opacity:0; pointer-events:none;
  translate:-50% -6px;
  transition:opacity .25s, translate .25s;
}
.ui-tp-btm:hover::before{ opacity:1; translate:-50% 0; }
</style>

<span class="ui-tp-lf" data-tip="data-tip属性の中身です">hover</span>

<style>
.ui-tp-lf{
  position:relative; display:inline-block;
  padding:10px 22px; font-weight:700; font-size:14px;
  border:1.5px dashed #3A46E8; border-radius:8px;
  color:#3A46E8; cursor:help;
}
.ui-tp-lf::before{
  content:attr(data-tip);
  position:absolute; right:calc(100% + 10px); top:50%;
  white-space:nowrap; padding:7px 14px;
  font-size:12px; font-weight:500;
  color:#fff; background:#191F2E; border-radius:6px;
  opacity:0; pointer-events:none;
  translate:6px -50%;
  transition:opacity .25s, translate .25s;
}
.ui-tp-lf:hover::before{ opacity:1; translate:0 -50%; }
</style>

<span class="ui-tp-rt" data-tip="data-tip属性の中身です">hover</span>

<style>
.ui-tp-rt{
  position:relative; display:inline-block;
  padding:10px 22px; font-weight:700; font-size:14px;
  border:1.5px dashed #3A46E8; border-radius:8px;
  color:#3A46E8; cursor:help;
}
.ui-tp-rt::before{
  content:attr(data-tip);
  position:absolute; left:calc(100% + 10px); top:50%;
  white-space:nowrap; padding:7px 14px;
  font-size:12px; font-weight:500;
  color:#fff; background:#191F2E; border-radius:6px;
  opacity:0; pointer-events:none;
  translate:-6px -50%;
  transition:opacity .25s, translate .25s;
}
.ui-tp-rt:hover::before{ opacity:1; translate:0 -50%; }
</style>

<span class="ui-tp-pop" data-tip="ぽよん🎈">hover</span>

<style>
.ui-tp-pop{
  position:relative; display:inline-block;
  padding:10px 22px; font-weight:700; font-size:14px;
  border:1.5px dashed #FF5CA0; border-radius:8px;
  color:#FF5CA0; cursor:help;
}
.ui-tp-pop::before{
  content:attr(data-tip);
  position:absolute; bottom:calc(100% + 10px); left:50%;
  white-space:nowrap; padding:7px 14px;
  font-size:12px; color:#fff; background:#FF5CA0; border-radius:8px;
  opacity:0; pointer-events:none;
  translate:-50% 0; transform:scale(.3);
  transform-origin:bottom center;
  transition:opacity .25s,
    transform .35s cubic-bezier(.3,1.8,.4,1) .1s;
}
.ui-tp-pop:hover::before{ opacity:1; transform:scale(1); }
</style>

<div class="ui-tb-radio">
  <input type="radio" name="uitab" id="uitab1" checked>
  <input type="radio" name="uitab" id="uitab2">
  <input type="radio" name="uitab" id="uitab3">
  <div class="bar">
    <label for="uitab1">HTML</label><label for="uitab2">CSS</label><label for="uitab3">豆知識</label>
  </div>
  <div class="panelbox">
    <div class="p1">radioを隠してlabelをタブに見せかける構造です。</div>
    <div class="p2">:checked ~ で対応パネルだけ表示します。</div>
    <div class="p3">name属性を揃えると排他選択になるradioの仕様を利用。</div>
  </div>
</div>

<style>
.ui-tb-radio{ width:100%; max-width:300px; }
.ui-tb-radio input{ display:none; }
.ui-tb-radio .bar{ display:flex; gap:6px; }
.ui-tb-radio .bar label{
  flex:1; text-align:center; padding:8px 4px;
  font-size:13px; font-weight:700; cursor:pointer;
  border:1.5px solid #191F2E; border-bottom:none;
  border-radius:10px 10px 0 0; background:#EDEAE0;
  transition:background .25s, transform .25s;
}
.ui-tb-radio .panelbox{
  border:1.5px solid #191F2E; border-radius:0 10px 10px 10px;
  background:#fff; padding:14px; font-size:13px; min-height:76px;
}
.ui-tb-radio .panelbox > div{ display:none; animation:ui-tab-fade .35s ease; }
#uitab1:checked ~ .bar label[for="uitab1"],
#uitab2:checked ~ .bar label[for="uitab2"],
#uitab3:checked ~ .bar label[for="uitab3"]{
  background:#FFCF3F; transform:translateY(-3px);
}
#uitab1:checked ~ .panelbox .p1,
#uitab2:checked ~ .panelbox .p2,
#uitab3:checked ~ .panelbox .p3{ display:block; }
@keyframes ui-tab-fade{ from{ opacity:0; transform:translateY(6px); } }
</style>

<div class="ui-tb-under">
  <input type="radio" name="uitu" id="uitu1" checked>
  <input type="radio" name="uitu" id="uitu2">
  <input type="radio" name="uitu" id="uitu3">
  <div class="bar">
    <label for="uitu1">概要</label><label for="uitu2">仕様</label><label for="uitu3">価格</label>
    <i class="ind"></i>
  </div>
</div>

<style>
.ui-tb-under{ width:260px; }
.ui-tb-under input{ display:none; }
.ui-tb-under .bar{
  position:relative; display:flex;
  border-bottom:2px solid #E7E4DA;
}
.ui-tb-under label{
  flex:1; text-align:center; padding:10px 0;
  font-size:14px; font-weight:700; color:#5A6072;
  cursor:pointer; transition:color .3s;
}
/* 下線は1本だけ置いて位置をスライド */
.ui-tb-under .ind{
  position:absolute; bottom:-2px; left:0;
  width:33.33%; height:3px; background:#3A46E8;
  border-radius:2px;
  transition:translate .3s cubic-bezier(.4,0,.2,1);
}
#uitu2:checked ~ .bar .ind{ translate:100% 0; }
#uitu3:checked ~ .bar .ind{ translate:200% 0; }
#uitu1:checked ~ .bar label[for="uitu1"],
#uitu2:checked ~ .bar label[for="uitu2"],
#uitu3:checked ~ .bar label[for="uitu3"]{ color:#3A46E8; }
</style>

<div class="ui-tb-pill">
  <input type="radio" name="uitp" id="uitp1" checked>
  <input type="radio" name="uitp" id="uitp2">
  <input type="radio" name="uitp" id="uitp3">
  <div class="seg">
    <label for="uitp1">月間</label><label for="uitp2">年間</label><label for="uitp3">買切</label>
    <i class="th"></i>
  </div>
</div>

<style>
.ui-tb-pill input{ display:none; }
.ui-tb-pill .seg{
  position:relative; display:flex;
  border:2px solid #191F2E; border-radius:999px;
  background:#fff; padding:4px; width:240px;
}
.ui-tb-pill label{
  flex:1; z-index:1; text-align:center; padding:7px 0;
  font-size:13px; font-weight:700; cursor:pointer;
  transition:color .3s;
}
.ui-tb-pill .th{
  position:absolute; top:4px; bottom:4px; left:4px;
  width:calc((100% - 8px) / 3);
  background:#191F2E; border-radius:999px;
  transition:translate .3s cubic-bezier(.4,0,.2,1);
}
#uitp2:checked ~ .seg .th{ translate:100% 0; }
#uitp3:checked ~ .seg .th{ translate:200% 0; }
#uitp1:checked ~ .seg label[for="uitp1"],
#uitp2:checked ~ .seg label[for="uitp2"],
#uitp3:checked ~ .seg label[for="uitp3"]{ color:#fff; }
</style>

<div class="ui-ac-grid">
  <div class="item">
    <input type="checkbox" id="uiacc1" checked>
    <label for="uiacc1">CSSだけで開閉できますか?</label>
    <div class="body"><div>grid-template-rowsを0fr→1frにすると、中身の高さが不定でも滑らかに開閉できます。</div></div>
  </div>
  <div class="item">
    <input type="checkbox" id="uiacc2">
    <label for="uiacc2">max-height方式との違いは?</label>
    <div class="body"><div>max-heightは高さの決め打ちが必要で速度も不自然になりがち。grid方式は中身に完全追従します。</div></div>
  </div>
</div>

<style>
.ui-ac-grid{ width:100%; max-width:300px; }
.ui-ac-grid .item{
  border:1.5px solid #191F2E; border-radius:10px;
  background:#fff; margin-bottom:10px; overflow:hidden;
}
.ui-ac-grid input{ display:none; }
.ui-ac-grid label{
  display:flex; justify-content:space-between; align-items:center;
  padding:12px 15px; font-weight:700; font-size:13.5px; cursor:pointer;
}
.ui-ac-grid label::after{
  content:"+"; font-size:20px; color:#3A46E8;
  transition:transform .3s;
}
/* ★ 0fr→1fr で高さ不定でも滑らかに */
.ui-ac-grid .body{
  display:grid; grid-template-rows:0fr;
  transition:grid-template-rows .35s ease;
}
.ui-ac-grid .body > div{ overflow:hidden; font-size:12.5px; color:#5A6072; padding:0 15px; }
.ui-ac-grid input:checked ~ .body{ grid-template-rows:1fr; }
.ui-ac-grid input:checked ~ .body > div{ padding-bottom:13px; }
.ui-ac-grid input:checked ~ label::after{ transform:rotate(45deg); }
</style>

<details class="ui-ac-details">
  <summary>クリックで開く<span class="ar">▾</span></summary>
  <div class="in">detailsタグはHTML標準の開閉UI。JSゼロ・アクセシブルで、::details-content対応ブラウザなら開閉アニメも付けられます。</div>
</details>

<style>
.ui-ac-details{
  width:100%; max-width:300px;
  border:1.5px solid #191F2E; border-radius:10px;
  background:#fff; overflow:hidden;
}
.ui-ac-details summary{
  display:flex; justify-content:space-between; align-items:center;
  padding:12px 15px; font-weight:700; font-size:13.5px;
  cursor:pointer; list-style:none; user-select:none;
}
.ui-ac-details summary::-webkit-details-marker{ display:none; }
.ui-ac-details .ar{ transition:transform .3s; color:#3A46E8; }
.ui-ac-details[open] .ar{ transform:rotate(-180deg); }
.ui-ac-details .in{
  padding:0 15px 13px; font-size:12.5px; color:#5A6072;
  animation:ui-det-in .3s ease;
}
@keyframes ui-det-in{
  from{ opacity:0; translate:0 -6px; }
}
</style>

<div class="ui-in-float">
  <input type="text" id="uifl1" placeholder=" ">
  <label for="uifl1">お名前</label>
</div>

<style>
.ui-in-float{ position:relative; width:220px; }
.ui-in-float input{
  width:100%; padding:13px 12px;
  border:2px solid #191F2E; border-radius:8px;
  font-size:14px; background:#fff; outline:none;
  font-family:inherit;
  transition:border-color .2s;
}
.ui-in-float input:focus{ border-color:#3A46E8; }
.ui-in-float label{
  position:absolute; left:12px; top:13px;
  font-size:13.5px; color:#5A6072; pointer-events:none;
  background:#fff; padding:0 5px;
  transition:top .2s, font-size .2s, color .2s;
}
/* placeholder=" "(半角スペース)が必須 */
.ui-in-float input:focus ~ label,
.ui-in-float input:not(:placeholder-shown) ~ label{
  top:-9px; font-size:11px; color:#3A46E8; font-weight:700;
}
</style>

<div class="ui-in-line">
  <input type="text" placeholder="メールアドレス">
  <i></i>
</div>

<style>
.ui-in-line{ position:relative; width:220px; }
.ui-in-line input{
  width:100%; padding:11px 4px;
  border:none; border-bottom:2px solid #C9CBD4;
  font-size:14px; background:transparent; outline:none;
  font-family:inherit;
}
.ui-in-line i{
  position:absolute; left:0; bottom:0;
  width:100%; height:2px; background:#3A46E8;
  transform:scaleX(0); transform-origin:center;
  transition:transform .35s ease;
}
.ui-in-line input:focus ~ i{ transform:scaleX(1); }
</style>

<!-- フォーカスで中央から青い線が伸びる -->

<input class="ui-in-glow" type="text" placeholder="検索キーワード">

<style>
.ui-in-glow{
  width:220px; padding:13px 14px;
  border:2px solid #191F2E; border-radius:10px;
  font-size:14px; outline:none; font-family:inherit;
  transition:box-shadow .3s ease, border-color .3s;
}
.ui-in-glow:focus{
  border-color:#3A46E8;
  box-shadow:0 0 0 4px rgba(58,70,232,.18);
}
</style>

<label class="ui-in-search">
  <span class="ic">🔍</span>
  <input type="text" placeholder="検索...">
</label>

<style>
.ui-in-search{
  display:inline-flex; align-items:center;
  border:2px solid #191F2E; border-radius:999px;
  background:#fff; padding:6px 10px; cursor:text;
}
.ui-in-search .ic{ font-size:16px; }
.ui-in-search input{
  width:36px; padding:4px 0 4px 8px;
  border:none; outline:none; background:transparent;
  font-size:14px; font-family:inherit;
  transition:width .4s cubic-bezier(.4,0,.2,1);
}
/* フォーカス中は開いたまま維持 */
.ui-in-search:hover input,
.ui-in-search input:focus{ width:150px; }
</style>

<!-- 虫眼鏡ホバー/クリックで入力欄が伸びる -->

<input class="ui-in-valid" type="email" placeholder="email@example.com" required>

<style>
.ui-in-valid{
  width:230px; padding:13px 14px;
  border:2px solid #191F2E; border-radius:10px;
  font-size:14px; outline:none; font-family:inherit;
  transition:border-color .3s, box-shadow .3s;
}
/* 入力があって不正な形式のときだけ赤 */
.ui-in-valid:not(:placeholder-shown):invalid{
  border-color:#FF3B5C;
  box-shadow:0 0 0 4px rgba(255,59,92,.15);
}
.ui-in-valid:not(:placeholder-shown):valid{
  border-color:#20B486;
  box-shadow:0 0 0 4px rgba(32,180,134,.15);
}
</style>

<!-- :valid/:invalid疑似クラス。JSなしで形式チェック連動 -->

<input class="ui-in-range" id="uiRangeIn" type="range" min="0" max="100" value="60">

<style>
.ui-in-range{
  -webkit-appearance:none; appearance:none;
  width:220px; height:8px; border-radius:99px;
  background:linear-gradient(90deg,#3A46E8 var(--p,60%), #E7E4DA var(--p,60%));
  outline:none; cursor:pointer;
}
.ui-in-range::-webkit-slider-thumb{
  -webkit-appearance:none; appearance:none;
  width:24px; height:24px; border-radius:50%;
  background:#fff; border:3px solid #3A46E8;
  transition:transform .2s, box-shadow .2s;
}
.ui-in-range::-webkit-slider-thumb:hover{
  transform:scale(1.2);
  box-shadow:0 0 0 6px rgba(58,70,232,.15);
}
.ui-in-range::-moz-range-thumb{
  width:22px; height:22px; border-radius:50%;
  background:#fff; border:3px solid #3A46E8;
}
</style>

<script>
(function(){
  var r = document.getElementById('uiRangeIn');
  function paint(){ r.style.setProperty('--p', r.value + '%'); }
  r.addEventListener('input', paint); paint();
})();
</script>

<!-- トラックの塗り分けはJSでCSS変数--pを更新(3行) -->

<nav class="ui-mn-drop">
  <span class="parent">サービス ▾
    <span class="dd">
      <a>Web制作</a><a>SEO対策</a><a>保守運用</a>
    </span>
  </span>
</nav>

<style>
.ui-mn-drop .parent{
  position:relative; display:inline-block;
  padding:11px 22px; font-weight:700; font-size:14px;
  background:#191F2E; color:#fff; border-radius:8px;
  cursor:pointer;
}
.ui-mn-drop .dd{
  position:absolute; top:calc(100% + 6px); left:0;
  min-width:150px; display:flex; flex-direction:column;
  background:#fff; border:2px solid #191F2E; border-radius:10px;
  padding:6px; z-index:5;
  opacity:0; translate:0 8px; visibility:hidden;
  transition:opacity .25s, translate .25s, visibility .25s;
}
.ui-mn-drop .parent:hover .dd{
  opacity:1; translate:0 0; visibility:visible;
}
.ui-mn-drop .dd a{
  padding:9px 12px; border-radius:6px;
  font-size:13px; color:#191F2E; cursor:pointer;
  transition:background .2s, padding-left .2s;
}
.ui-mn-drop .dd a:hover{
  background:#F2F0E8; padding-left:18px; color:#3A46E8;
}
</style>

<!-- visibilityも遷移させるとホバーが途切れない -->

<label class="ui-mn-burger">
  <input type="checkbox">
  <span class="lines"><i></i><i></i><i></i></span>
</label>

<style>
.ui-mn-burger{ display:inline-block; cursor:pointer; }
.ui-mn-burger input{ display:none; }
.ui-mn-burger .lines{
  display:flex; flex-direction:column;
  justify-content:space-between;
  width:44px; height:32px;
}
.ui-mn-burger .lines i{
  height:4px; border-radius:2px; background:#191F2E;
  transition:transform .35s, opacity .25s;
}
.ui-mn-burger input:checked + .lines i:nth-child(1){
  transform:translateY(14px) rotate(45deg); background:#FF5CA0;
}
.ui-mn-burger input:checked + .lines i:nth-child(2){
  opacity:0; transform:scaleX(0);
}
.ui-mn-burger input:checked + .lines i:nth-child(3){
  transform:translateY(-14px) rotate(-45deg); background:#FF5CA0;
}
</style>

<label class="ui-mn-kebab">
  <input type="checkbox">
  <span class="dots"><i></i><i></i><i></i></span>
  <span class="menu"><a>編集</a><a>複製</a><a class="dg">削除</a></span>
</label>

<style>
.ui-mn-kebab{ position:relative; display:inline-block; }
.ui-mn-kebab input{ display:none; }
.ui-mn-kebab .dots{
  display:flex; flex-direction:column; gap:4px;
  padding:10px 14px; cursor:pointer;
  border:2px solid #191F2E; border-radius:10px; background:#fff;
}
.ui-mn-kebab .dots i{
  width:5px; height:5px; border-radius:50%; background:#191F2E;
}
.ui-mn-kebab .menu{
  position:absolute; top:calc(100% + 6px); left:0; z-index:5;
  min-width:120px; display:flex; flex-direction:column;
  background:#fff; border:2px solid #191F2E; border-radius:10px;
  padding:5px; font-size:13px;
  opacity:0; transform:scale(.85);
  transform-origin:top left;
  visibility:hidden;
  transition:all .22s cubic-bezier(.3,1.3,.4,1);
}
.ui-mn-kebab input:checked ~ .menu{
  opacity:1; transform:scale(1); visibility:visible;
}
.ui-mn-kebab .menu a{ padding:8px 10px; border-radius:6px; cursor:pointer; }
.ui-mn-kebab .menu a:hover{ background:#F2F0E8; }
.ui-mn-kebab .menu .dg{ color:#FF3B5C; }
</style>

<nav class="ui-mn-navline">
  <a>HOME</a><a>ABOUT</a><a>WORKS</a><a>CONTACT</a>
</nav>

<style>
.ui-mn-navline{ display:flex; gap:22px; }
.ui-mn-navline a{
  position:relative; padding:6px 2px;
  font-family:"Space Grotesk",sans-serif;
  font-size:14px; font-weight:700; color:#191F2E;
  cursor:pointer;
}
.ui-mn-navline a::after{
  content:""; position:absolute; left:0; bottom:0;
  width:100%; height:2px; background:#3A46E8;
  transform:scaleX(0); transform-origin:right;
  transition:transform .3s ease;
}
.ui-mn-navline a:hover::after{
  transform:scaleX(1); transform-origin:left;
}
</style>

<nav class="ui-mn-icon">
  <a><i>🏠</i><b>ホーム</b></a>
  <a><i>🔍</i><b>検索</b></a>
  <a><i>❤️</i><b>お気に入り</b></a>
</nav>

<style>
.ui-mn-icon{ display:flex; gap:10px; }
.ui-mn-icon a{
  display:inline-flex; align-items:center;
  padding:10px 14px; border-radius:999px;
  background:#fff; border:2px solid #191F2E;
  cursor:pointer;
}
.ui-mn-icon i{ font-style:normal; font-size:18px; line-height:1; }
.ui-mn-icon b{
  max-width:0; overflow:hidden; white-space:nowrap;
  font-size:13px;
  transition:max-width .35s ease, margin-left .35s;
}
.ui-mn-icon a:hover{ background:#FFCF3F; }
.ui-mn-icon a:hover b{ max-width:90px; margin-left:8px; }
</style>

<nav class="ui-mn-page">
  <a>‹</a><a class="on">1</a><a>2</a><a>3</a><a>›</a>
</nav>

<style>
.ui-mn-page{ display:flex; gap:8px; }
.ui-mn-page a{
  width:38px; height:38px;
  display:grid; place-items:center;
  border:2px solid #191F2E; border-radius:10px;
  background:#fff; font-weight:700; font-size:14px;
  cursor:pointer;
  transition:all .2s ease;
}
.ui-mn-page a:hover{
  background:#191F2E; color:#fff;
  transform:translateY(-3px);
  box-shadow:0 5px 0 rgba(25,31,46,.25);
}
.ui-mn-page .on{ background:#3A46E8; color:#fff; border-color:#3A46E8; }
</style>

<button class="ui-fb-modal-open" popovertarget="uiModal">モーダルを開く</button>
<div class="ui-fb-modal" id="uiModal" popover>
  <h4>HTMLのpopover属性</h4>
  <p>JSゼロで開閉・背景・Escキー対応まで揃います。</p>
  <button popovertarget="uiModal" popovertargetaction="hide">閉じる</button>
</div>

<style>
.ui-fb-modal-open{
  padding:12px 26px; font-weight:700; font-size:14px;
  color:#fff; background:#3A46E8;
  border:none; border-radius:8px; cursor:pointer;
  transition:transform .2s;
}
.ui-fb-modal-open:hover{ transform:scale(1.05); }
.ui-fb-modal[popover]{
  width:min(88vw,340px);
  border:2px solid #191F2E; border-radius:16px;
  padding:26px; box-shadow:8px 8px 0 rgba(25,31,46,.25);
  opacity:0; transform:translateY(24px) scale(.96);
  transition:opacity .3s, transform .3s,
    overlay .3s allow-discrete, display .3s allow-discrete;
}
.ui-fb-modal[popover]:popover-open{ opacity:1; transform:none; }
@starting-style{
  .ui-fb-modal[popover]:popover-open{
    opacity:0; transform:translateY(24px) scale(.96);
  }
}
.ui-fb-modal::backdrop{
  background:rgba(25,31,46,.5); backdrop-filter:blur(3px);
}
.ui-fb-modal h4{ margin-bottom:8px; }
.ui-fb-modal p{ font-size:13px; color:#5A6072; margin-bottom:14px; }
.ui-fb-modal button{
  padding:9px 20px; font-weight:700;
  background:#FFCF3F; border:1.5px solid #191F2E;
  border-radius:8px; cursor:pointer;
}
</style>

<!-- @starting-styleでふわっと出現(Chrome/Edge/Safari新) -->

<div class="ui-fb-flip"><div class="in">
  <div class="f front">おもて</div>
  <div class="f back">う ら</div>
</div></div>

<style>
.ui-fb-flip{ width:180px; height:120px; perspective:900px; cursor:pointer; }
.ui-fb-flip .in{
  position:relative; width:100%; height:100%;
  transform-style:preserve-3d;
  transition:transform .7s cubic-bezier(.4,.2,.2,1);
}
.ui-fb-flip:hover .in{ transform:rotateY(180deg); }
.ui-fb-flip .f{
  position:absolute; inset:0;
  display:grid; place-items:center;
  border-radius:12px; font-weight:700;
  backface-visibility:hidden;
  border:2px solid #191F2E;
}
.ui-fb-flip .front{ background:#FFCF3F; }
.ui-fb-flip .back{ background:#3A46E8; color:#fff; transform:rotateY(180deg); }
</style>

<div class="ui-fb-alert">
  <input type="checkbox" id="uialert">
  <div class="box">
    <span>⚠ 保存されていない変更があります</span>
    <label for="uialert">✕</label>
  </div>
</div>

<style>
.ui-fb-alert input{ display:none; }
.ui-fb-alert .box{
  display:flex; align-items:center; gap:14px;
  padding:12px 16px; border-radius:10px;
  background:#FFF3D6; border:2px solid #F59E0B;
  font-size:13px; font-weight:700;
  transition:opacity .35s, transform .35s;
}
.ui-fb-alert label{
  cursor:pointer; font-weight:700; color:#8a6d00;
  padding:2px 6px; border-radius:6px;
  transition:background .2s;
}
.ui-fb-alert label:hover{ background:rgba(0,0,0,.08); }
.ui-fb-alert input:checked + .box{
  opacity:0; transform:translateX(30px) scale(.95);
  pointer-events:none;
}
</style>

<!-- checkboxで閉じる。完全に消すにはdisplay遷移かJSで -->

<span class="ui-fb-chips">
  <span class="chip"><input type="checkbox" id="uichip1">CSS<label for="uichip1">✕</label></span>
  <span class="chip"><input type="checkbox" id="uichip2">HTML<label for="uichip2">✕</label></span>
  <span class="chip"><input type="checkbox" id="uichip3">JS<label for="uichip3">✕</label></span>
</span>

<style>
.ui-fb-chips{ display:flex; gap:8px; }
.ui-fb-chips input{ display:none; }
.ui-fb-chips .chip{
  display:inline-flex; align-items:center; gap:7px;
  padding:7px 8px 7px 14px;
  border:2px solid #191F2E; border-radius:999px;
  background:#fff; font-size:13px; font-weight:700;
  transition:all .3s ease;
}
.ui-fb-chips label{
  display:grid; place-items:center;
  width:18px; height:18px; border-radius:50%;
  background:#E7E4DA; font-size:10px; cursor:pointer;
  transition:background .2s, transform .2s;
}
.ui-fb-chips label:hover{ background:#FF5CA0; color:#fff; transform:rotate(90deg); }
.ui-fb-chips .chip:has(input:checked){
  opacity:0; transform:scale(.6); pointer-events:none;
  margin-right:-8px; max-width:0; padding:0; border-width:0;
}
</style>

<!-- :has()でチップ自身を消す(モダンCSS) -->

<div class="ui-fb-avatar">
  <i>🦊</i><i>🐻</i><i>🐸</i><i>🐰</i><b>+5</b>
</div>

<style>
.ui-fb-avatar{ display:flex; cursor:pointer; }
.ui-fb-avatar i,
.ui-fb-avatar b{
  display:grid; place-items:center;
  width:44px; height:44px; border-radius:50%;
  background:#fff; border:2.5px solid #191F2E;
  font-size:20px; font-style:normal;
  margin-left:-14px;
  transition:margin .35s cubic-bezier(.3,1.3,.4,1), transform .25s;
}
.ui-fb-avatar i:first-child{ margin-left:0; }
.ui-fb-avatar b{ font-size:12px; font-weight:700; background:#FFCF3F; }
.ui-fb-avatar:hover i,
.ui-fb-avatar:hover b{ margin-left:4px; }
.ui-fb-avatar i:hover{ transform:translateY(-6px); }
</style>

<div class="ui-fb-badge">🔔<b>3</b></div>

<style>
.ui-fb-badge{ position:relative; font-size:44px; line-height:1; }
.ui-fb-badge b{
  position:absolute; top:-4px; right:-10px;
  min-width:22px; height:22px; padding:0 5px;
  border-radius:999px; background:#FF3B5C; color:#fff;
  font-size:12px; display:grid; place-items:center;
  border:2px solid #fff;
  animation:ui-badge-pop 2.6s infinite;
}
.ui-fb-badge b::after{
  content:""; position:absolute; inset:-2px;
  border-radius:999px; border:2px solid #FF3B5C;
  animation:ui-badge-ring 2.6s infinite;
}
@keyframes ui-badge-pop{
  0%,20%,100%{ transform:scale(1); }
  5%{ transform:scale(1.4); } 10%{ transform:scale(.88); } 15%{ transform:scale(1.12); }
}
@keyframes ui-badge-ring{
  0%{ transform:scale(1); opacity:.8; }
  45%,100%{ transform:scale(2.2); opacity:0; }
}
</style>

<div class="ui-fb-prog"><i style="width:65%"></i></div>

<style>
.ui-fb-prog{
  width:220px; height:18px; border-radius:99px;
  border:2px solid #191F2E; overflow:hidden; background:#fff;
}
.ui-fb-prog i{
  display:block; height:100%;
  background:linear-gradient(45deg,
    #3A46E8 25%, #5866f0 25% 50%,
    #3A46E8 50% 75%, #5866f0 75%);
  background-size:28px 28px;
  animation:ui-prog-go .7s linear infinite;
  border-radius:99px;
}
@keyframes ui-prog-go{
  to{ background-position:28px 0; }
}
</style>

<!-- widthはstyle属性やJSで制御 -->

<div class="ui-fb-ring" style="--p:72"><b>72%</b></div>

<style>
.ui-fb-ring{
  --p:72;   /* パーセント */
  position:relative; width:90px; height:90px;
  border-radius:50%;
  display:grid; place-items:center;
  background:conic-gradient(#20B486 calc(var(--p) * 1%), #E7E4DA 0);
  animation:ui-ring-in 1.2s ease both;
}
.ui-fb-ring::before{
  content:""; position:absolute; inset:9px;
  border-radius:50%; background:#fff;
}
.ui-fb-ring b{
  position:relative;
  font-family:"Space Grotesk",sans-serif; font-size:18px;
}
@property --p2{ syntax:"<number>"; initial-value:0; inherits:false; }
@keyframes ui-ring-in{
  from{ background:conic-gradient(#20B486 0%, #E7E4DA 0); }
}
</style>

<!-- conic-gradientで円グラフ。--pを変えるだけ -->

<span class="ui-fb-kbd"><kbd>Ctrl</kbd> + <kbd>C</kbd></span>

<style>
.ui-fb-kbd{ font-size:14px; font-weight:700; display:inline-flex; gap:8px; align-items:center; }
.ui-fb-kbd kbd{
  display:inline-block; padding:8px 14px;
  font-family:"JetBrains Mono",monospace; font-size:13px;
  background:#fff; border:2px solid #191F2E; border-radius:8px;
  box-shadow:0 4px 0 #191F2E;
  cursor:pointer; user-select:none;
  transition:transform .1s, box-shadow .1s;
}
.ui-fb-kbd kbd:active{
  transform:translateY(4px);
  box-shadow:0 0 0 #191F2E;
}
</style>

<div class="ui-fb-fab">
  <input type="checkbox" id="uifab">
  <a class="mini m1">✎</a><a class="mini m2">📷</a><a class="mini m3">🔗</a>
  <label for="uifab">＋</label>
</div>

<style>
.ui-fb-fab{ position:relative; width:56px; height:56px; }
.ui-fb-fab input{ display:none; }
.ui-fb-fab label{
  position:relative; z-index:2;
  display:grid; place-items:center;
  width:56px; height:56px; border-radius:50%;
  background:#FF5CA0; color:#fff;
  font-size:24px; cursor:pointer;
  border:2px solid #191F2E;
  transition:transform .35s cubic-bezier(.3,1.4,.4,1);
}
.ui-fb-fab input:checked ~ label{ transform:rotate(135deg); }
.ui-fb-fab .mini{
  position:absolute; left:9px; top:9px; z-index:1;
  display:grid; place-items:center;
  width:38px; height:38px; border-radius:50%;
  background:#fff; border:2px solid #191F2E;
  font-size:15px; cursor:pointer;
  transition:translate .35s cubic-bezier(.3,1.4,.4,1), opacity .3s;
  opacity:0;
}
.ui-fb-fab input:checked ~ .m1{ translate:0 -54px; opacity:1; }
.ui-fb-fab input:checked ~ .m2{ translate:-42px -36px; opacity:1; transition-delay:.05s; }
.ui-fb-fab input:checked ~ .m3{ translate:-56px 4px; opacity:1; transition-delay:.1s; }
</style>

<!-- ＋が回って×になり、子ボタンが扇形に出る -->

<label class="ui-fb-sort">
  <input type="checkbox">
  <span class="btn">価格 <i>▲</i></span>
</label>

<style>
.ui-fb-sort{ display:inline-block; cursor:pointer; }
.ui-fb-sort input{ display:none; }
.ui-fb-sort .btn{
  display:inline-flex; align-items:center; gap:8px;
  padding:10px 18px; border-radius:8px;
  border:2px solid #191F2E; background:#fff;
  font-size:14px; font-weight:700;
}
.ui-fb-sort i{
  font-style:normal; font-size:11px; color:#3A46E8;
  transition:transform .3s cubic-bezier(.3,1.3,.4,1);
}
.ui-fb-sort input:checked + .btn i{ transform:rotate(180deg); }
</style>

<label class="ui-fb-copy">
  <input type="checkbox">
  <span class="btn"><b class="a">📋 コピー</b><b class="b">✓ 完了!</b></span>
</label>

<style>
.ui-fb-copy{ display:inline-block; cursor:pointer; }
.ui-fb-copy input{ display:none; }
.ui-fb-copy .btn{
  position:relative; display:inline-block;
  width:120px; height:44px; overflow:hidden;
  border:2px solid #191F2E; border-radius:10px;
  background:#fff; font-size:14px; font-weight:700;
}
.ui-fb-copy b{
  position:absolute; inset:0;
  display:grid; place-items:center;
  transition:translate .3s cubic-bezier(.4,0,.2,1);
}
.ui-fb-copy .b{ translate:0 100%; background:#20B486; color:#fff; }
.ui-fb-copy input:checked + .btn .a{ translate:0 -100%; }
.ui-fb-copy input:checked + .btn .b{ translate:0 0; }
</style>

<!-- 実際のクリップボード処理はJS。切替演出部分がこれ -->

<div class="ui-ex-drawer">
  <input type="checkbox" id="uidrw">
  <div class="screen">
    <label for="uidrw" class="open">☰ MENU</label>
    <p>← 開いてみて</p>
    <nav class="dr">
      <label for="uidrw" class="close">✕</label>
      <a>ホーム</a><a>会社概要</a><a>事業内容</a><a>お問い合わせ</a>
    </nav>
    <label for="uidrw" class="veil"></label>
  </div>
</div>

<style>
.ui-ex-drawer input{ display:none; }
.ui-ex-drawer .screen{
  position:relative; width:250px; height:190px;
  border:2px solid #191F2E; border-radius:12px;
  background:#fff; overflow:hidden; padding:12px;
}
.ui-ex-drawer .open{
  display:inline-block; padding:8px 14px;
  font-size:13px; font-weight:700; cursor:pointer;
  border:2px solid #191F2E; border-radius:8px; background:#FFCF3F;
}
.ui-ex-drawer .screen > p{ font-size:12px; color:#5A6072; margin-top:10px; }
.ui-ex-drawer .dr{
  position:absolute; top:0; bottom:0; left:0; width:62%;
  background:#191F2E; color:#fff; z-index:2;
  display:flex; flex-direction:column; gap:2px;
  padding:14px;
  transform:translateX(-102%);
  transition:transform .4s cubic-bezier(.4,0,.2,1);
}
.ui-ex-drawer .dr a{
  padding:8px 6px; font-size:13px; color:#fff;
  border-bottom:1px solid rgba(255,255,255,.15);
  cursor:pointer; transition:padding-left .2s, color .2s;
}
.ui-ex-drawer .dr a:hover{ padding-left:14px; color:#FFCF3F; }
.ui-ex-drawer .close{ cursor:pointer; text-align:right; font-weight:700; }
.ui-ex-drawer .veil{
  position:absolute; inset:0; z-index:1;
  background:rgba(25,31,46,.45);
  opacity:0; visibility:hidden; cursor:pointer;
  transition:opacity .4s, visibility .4s;
}
#uidrw:checked ~ .screen .dr{ transform:translateX(0); }
#uidrw:checked ~ .screen .veil{ opacity:1; visibility:visible; }
</style>

<!-- 実サイトでは.screenをbodyに読み替える -->

<div class="ui-ex-stepper">
  <div class="st done"><i>✓</i><b>入力</b></div>
  <div class="ln done"></div>
  <div class="st act"><i>2</i><b>確認</b></div>
  <div class="ln"></div>
  <div class="st"><i>3</i><b>完了</b></div>
</div>

<style>
.ui-ex-stepper{ display:flex; align-items:center; }
.ui-ex-stepper .st{
  display:flex; flex-direction:column; align-items:center; gap:5px;
}
.ui-ex-stepper .st i{
  display:grid; place-items:center;
  width:36px; height:36px; border-radius:50%;
  border:2.5px solid #C9CBD4; background:#fff;
  font-size:14px; font-weight:700; font-style:normal; color:#9aa0b4;
  transition:all .3s;
}
.ui-ex-stepper .st b{ font-size:11px; color:#5A6072; }
.ui-ex-stepper .done i{ border-color:#20B486; background:#20B486; color:#fff; }
.ui-ex-stepper .act i{
  border-color:#3A46E8; color:#3A46E8;
  animation:ui-step-pulse 1.6s infinite;
}
.ui-ex-stepper .ln{
  width:44px; height:3px; background:#E7E4DA;
  margin:0 6px 18px; border-radius:2px;
  position:relative; overflow:hidden;
}
.ui-ex-stepper .ln.done::after{
  content:""; position:absolute; inset:0;
  background:#20B486;
  animation:ui-step-fill 1s ease both;
}
@keyframes ui-step-pulse{
  0%,100%{ box-shadow:0 0 0 0 rgba(58,70,232,.35); }
  50%{ box-shadow:0 0 0 7px rgba(58,70,232,0); }
}
@keyframes ui-step-fill{ from{ transform:scaleX(0); transform-origin:left; } }
</style>

<nav class="ui-ex-crumb">
  <a>TOP</a><i>›</i><a>事業内容</a><i>›</i><b>Web制作</b>
</nav>

<style>
.ui-ex-crumb{
  display:flex; align-items:center; gap:9px;
  font-size:13.5px; font-weight:700;
}
.ui-ex-crumb i{ font-style:normal; color:#9aa0b4; }
.ui-ex-crumb b{ color:#5A6072; }
.ui-ex-crumb a{
  position:relative; color:#3A46E8; cursor:pointer;
  transition:color .25s;
}
.ui-ex-crumb a::after{
  content:""; position:absolute; left:0; bottom:-3px;
  width:100%; height:2px; background:#FF5CA0;
  transform:scaleX(0); transform-origin:right;
  transition:transform .3s;
}
.ui-ex-crumb a:hover{ color:#FF5CA0; }
.ui-ex-crumb a:hover::after{
  transform:scaleX(1); transform-origin:left;
}
</style>

<label class="ui-ex-count">
  <input type="checkbox">
  <span class="btn">👍 <b class="n"><i class="a">12</i><i class="b">13</i></b><em>+1</em></span>
</label>

<style>
.ui-ex-count{ display:inline-block; cursor:pointer; }
.ui-ex-count input{ display:none; }
.ui-ex-count .btn{
  position:relative; display:inline-flex;
  align-items:center; gap:9px;
  padding:11px 20px; font-size:15px; font-weight:700;
  border:2px solid #191F2E; border-radius:999px; background:#fff;
  transition:background .3s;
}
.ui-ex-count .n{
  display:inline-block; height:1.4em; overflow:hidden; line-height:1.4;
}
.ui-ex-count .n i{
  display:block; font-style:normal;
  transition:translate .35s cubic-bezier(.4,0,.2,1);
}
.ui-ex-count em{
  position:absolute; top:-4px; right:8px;
  font-style:normal; font-size:12px; font-weight:700; color:#FF5CA0;
  opacity:0;
}
.ui-ex-count input:checked + .btn{ background:#FFE9F4; }
.ui-ex-count input:checked + .btn .n i{ translate:0 -100%; }
.ui-ex-count input:checked + .btn em{
  animation:ui-cnt-fly .7s ease forwards;
}
@keyframes ui-cnt-fly{
  0%{ opacity:0; translate:0 4px; }
  30%{ opacity:1; }
  100%{ opacity:0; translate:0 -18px; }
}
</style>

<!-- 数字は上下2段を送るスロット式。実カウントはJSで -->

<div class="sl-at-fade"><i></i><i></i><i></i></div>

<style>
.sl-at-fade{
  position:relative; width:240px; height:150px;
  border-radius:12px; overflow:hidden;
  border:2px solid #191F2E;
}
.sl-at-fade i{
  position:absolute; inset:0;
  display:grid; place-items:center;
  font-size:40px; font-style:normal;
  animation:sl-at-fade-go 9s infinite ease-in-out;
}
.sl-at-fade i:nth-child(1){ background:url(01.jpg) center/cover; animation-delay:0s; }
.sl-at-fade i:nth-child(2){ background:url(02.jpg) center/cover; animation-delay:3s; }
.sl-at-fade i:nth-child(3){ background:url(03.jpg) center/cover; animation-delay:6s; }
@keyframes sl-at-fade-go{
  0%,29%{ opacity:1; z-index:1; }
  37%,95%{ opacity:0; z-index:0; }
  100%{ opacity:1; }
}
</style>

<!-- 3枚×3秒=9秒ループ。枚数を変える場合はdurationとdelayを枚数×3秒に。サンプル画像01〜03.jpgはHTMLと同じ階層に置く。srcを差し替えるだけで実案件に使える -->

<div class="sl-at-slx"><i></i><i></i><i></i></div>

<style>
.sl-at-slx{
  position:relative; width:240px; height:150px;
  border-radius:12px; overflow:hidden;
  border:2px solid #191F2E;
}
.sl-at-slx i{
  position:absolute; inset:0;
  display:grid; place-items:center;
  font-size:40px; font-style:normal;
  animation:sl-at-slx-go 9s infinite cubic-bezier(.6,0,.2,1);
}
.sl-at-slx i:nth-child(1){ background:url(01.jpg) center/cover; animation-delay:0s; }
.sl-at-slx i:nth-child(2){ background:url(02.jpg) center/cover; animation-delay:3s; }
.sl-at-slx i:nth-child(3){ background:url(03.jpg) center/cover; animation-delay:6s; }
@keyframes sl-at-slx-go{
  0%{ transform:translateX(100%); }
  5%,32%{ transform:translateX(0); }
  38%,100%{ transform:translateX(-100%); }
}
</style>

<!-- 3枚×3秒=9秒ループ。枚数を変える場合はdurationとdelayを枚数×3秒に。サンプル画像01〜03.jpgはHTMLと同じ階層に置く。srcを差し替えるだけで実案件に使える -->

<div class="sl-at-sly"><i></i><i></i><i></i></div>

<style>
.sl-at-sly{
  position:relative; width:240px; height:150px;
  border-radius:12px; overflow:hidden;
  border:2px solid #191F2E;
}
.sl-at-sly i{
  position:absolute; inset:0;
  display:grid; place-items:center;
  font-size:40px; font-style:normal;
  animation:sl-at-sly-go 9s infinite cubic-bezier(.6,0,.2,1);
}
.sl-at-sly i:nth-child(1){ background:url(01.jpg) center/cover; animation-delay:0s; }
.sl-at-sly i:nth-child(2){ background:url(02.jpg) center/cover; animation-delay:3s; }
.sl-at-sly i:nth-child(3){ background:url(03.jpg) center/cover; animation-delay:6s; }
@keyframes sl-at-sly-go{
  0%{ transform:translateY(100%); }
  5%,32%{ transform:translateY(0); }
  38%,100%{ transform:translateY(-100%); }
}
</style>

<!-- 3枚×3秒=9秒ループ。枚数を変える場合はdurationとdelayを枚数×3秒に。サンプル画像01〜03.jpgはHTMLと同じ階層に置く。srcを差し替えるだけで実案件に使える -->

<div class="sl-at-zoom"><i></i><i></i><i></i></div>

<style>
.sl-at-zoom{
  position:relative; width:240px; height:150px;
  border-radius:12px; overflow:hidden;
  border:2px solid #191F2E;
}
.sl-at-zoom i{
  position:absolute; inset:0;
  display:grid; place-items:center;
  font-size:40px; font-style:normal;
  animation:sl-at-zoom-go 9s infinite ease-in-out;
}
.sl-at-zoom i:nth-child(1){ background:url(01.jpg) center/cover; animation-delay:0s; }
.sl-at-zoom i:nth-child(2){ background:url(02.jpg) center/cover; animation-delay:3s; }
.sl-at-zoom i:nth-child(3){ background:url(03.jpg) center/cover; animation-delay:6s; }
@keyframes sl-at-zoom-go{
  0%{ opacity:0; transform:scale(1.25); z-index:1; }
  7%{ opacity:1; }
  29%{ opacity:1; transform:scale(1); z-index:1; }
  37%,95%{ opacity:0; z-index:0; }
  100%{ opacity:0; transform:scale(1.25); }
}
</style>

<!-- 3枚×3秒=9秒ループ。枚数を変える場合はdurationとdelayを枚数×3秒に。サンプル画像01〜03.jpgはHTMLと同じ階層に置く。srcを差し替えるだけで実案件に使える -->

<div class="sl-at-wipe"><i></i><i></i><i></i></div>

<style>
.sl-at-wipe{
  position:relative; width:240px; height:150px;
  border-radius:12px; overflow:hidden;
  border:2px solid #191F2E;
}
.sl-at-wipe i{
  position:absolute; inset:0;
  display:grid; place-items:center;
  font-size:40px; font-style:normal;
  animation:sl-at-wipe-go 9s infinite cubic-bezier(.7,0,.3,1);
}
.sl-at-wipe i:nth-child(1){ background:url(01.jpg) center/cover; animation-delay:0s; }
.sl-at-wipe i:nth-child(2){ background:url(02.jpg) center/cover; animation-delay:3s; }
.sl-at-wipe i:nth-child(3){ background:url(03.jpg) center/cover; animation-delay:6s; }
@keyframes sl-at-wipe-go{
  0%{ clip-path:inset(0 100% 0 0); z-index:1; }
  6%,32%{ clip-path:inset(0); z-index:1; }
  33%,95%{ clip-path:inset(0); z-index:0; }
  100%{ clip-path:inset(0 100% 0 0); }
}
</style>

<!-- 3枚×3秒=9秒ループ。枚数を変える場合はdurationとdelayを枚数×3秒に。サンプル画像01〜03.jpgはHTMLと同じ階層に置く。srcを差し替えるだけで実案件に使える -->

<div class="sl-at-circle"><i></i><i></i><i></i></div>

<style>
.sl-at-circle{
  position:relative; width:240px; height:150px;
  border-radius:12px; overflow:hidden;
  border:2px solid #191F2E;
}
.sl-at-circle i{
  position:absolute; inset:0;
  display:grid; place-items:center;
  font-size:40px; font-style:normal;
  animation:sl-at-circle-go 9s infinite ease-in-out;
}
.sl-at-circle i:nth-child(1){ background:url(01.jpg) center/cover; animation-delay:0s; }
.sl-at-circle i:nth-child(2){ background:url(02.jpg) center/cover; animation-delay:3s; }
.sl-at-circle i:nth-child(3){ background:url(03.jpg) center/cover; animation-delay:6s; }
@keyframes sl-at-circle-go{
  0%{ clip-path:circle(0% at 50% 50%); z-index:1; }
  7%,32%{ clip-path:circle(75% at 50% 50%); z-index:1; }
  33%,95%{ clip-path:circle(75% at 50% 50%); z-index:0; }
  100%{ clip-path:circle(0% at 50% 50%); }
}
</style>

<!-- 3枚×3秒=9秒ループ。枚数を変える場合はdurationとdelayを枚数×3秒に。サンプル画像01〜03.jpgはHTMLと同じ階層に置く。srcを差し替えるだけで実案件に使える -->

<div class="sl-kb-r"><i></i></div>

<style>
.sl-kb-r{
  width:240px; height:150px;
  border-radius:12px; overflow:hidden;
  border:2px solid #191F2E;
}
.sl-kb-r i{
  display:block;
  width:100%; height:100%;
  background:url(01.jpg) center/cover;
  animation:sl-kb-r-go 8s ease-in-out infinite alternate;
}
@keyframes sl-kb-r-go{
  from{ transform:scale(1.02); }
  to{ transform:scale(1.28) translateX(-7%); }
}
</style>

<!-- ヒーロー画像に。alternateで往復させると継ぎ目なし。サンプル画像01〜03.jpgはHTMLと同じ階層に置く。srcを差し替えるだけで実案件に使える -->

<div class="sl-kb-l"><i></i></div>

<style>
.sl-kb-l{
  width:240px; height:150px;
  border-radius:12px; overflow:hidden;
  border:2px solid #191F2E;
}
.sl-kb-l i{
  display:block;
  width:100%; height:100%;
  background:url(02.jpg) center/cover;
  animation:sl-kb-l-go 8s ease-in-out infinite alternate;
}
@keyframes sl-kb-l-go{
  from{ transform:scale(1.02); }
  to{ transform:scale(1.28) translateX(7%); }
}
</style>

<!-- ヒーロー画像に。alternateで往復させると継ぎ目なし。サンプル画像01〜03.jpgはHTMLと同じ階層に置く。srcを差し替えるだけで実案件に使える -->

<div class="sl-kb-u"><i></i></div>

<style>
.sl-kb-u{
  width:240px; height:150px;
  border-radius:12px; overflow:hidden;
  border:2px solid #191F2E;
}
.sl-kb-u i{
  display:block;
  width:100%; height:100%;
  background:url(03.jpg) center/cover;
  animation:sl-kb-u-go 8s ease-in-out infinite alternate;
}
@keyframes sl-kb-u-go{
  from{ transform:scale(1.02); }
  to{ transform:scale(1.28) translateY(6%); }
}
</style>

<!-- ヒーロー画像に。alternateで往復させると継ぎ目なし。サンプル画像01〜03.jpgはHTMLと同じ階層に置く。srcを差し替えるだけで実案件に使える -->

<div class="sl-mq-text"><div class="tk">
<span>NEW ARRIVAL — 新商品入荷 — SALE開催中 — </span><span>NEW ARRIVAL — 新商品入荷 — SALE開催中 — </span>
</div></div>

<style>
.sl-mq-text{
  width:100%; max-width:290px; overflow:hidden;
  background:#191F2E; color:#FFCF3F;
  border-radius:8px;
}
.sl-mq-text .tk{
  display:flex; width:max-content; padding:9px 0;
  animation:sl-mqt-go 12s linear infinite;
}
.sl-mq-text span{ white-space:nowrap; font-weight:700; font-size:14px; }
@keyframes sl-mqt-go{ to{ transform:translateX(-50%); } }
</style>

<!-- ★同じ中身を2セット並べて-50%まで動かすと無限ループ -->

<div class="sl-mq-duo">
  <div class="row a"><span>CSS ・ HTML ・ DESIGN ・ WEB ・ </span><span>CSS ・ HTML ・ DESIGN ・ WEB ・ </span></div>
  <div class="row b"><span>ANIMATION ・ CREATIVE ・ FUN ・ </span><span>ANIMATION ・ CREATIVE ・ FUN ・ </span></div>
</div>

<style>
.sl-mq-duo{ width:100%; max-width:290px; overflow:hidden; }
.sl-mq-duo .row{ display:flex; width:max-content; }
.sl-mq-duo span{
  white-space:nowrap; padding:4px 0;
  font-family:"Space Grotesk",sans-serif;
  font-size:22px; font-weight:700;
}
.sl-mq-duo .a{ color:#3A46E8; animation:sl-mqd-a 11s linear infinite; }
.sl-mq-duo .b{ color:#FF5CA0; animation:sl-mqd-b 11s linear infinite; }
@keyframes sl-mqd-a{ to{ transform:translateX(-50%); } }
/* 逆走は-50%スタート→0 */
@keyframes sl-mqd-b{ from{ transform:translateX(-50%); } to{ transform:translateX(0); } }
</style>

<div class="sl-mq-tilt"><div class="tk">
<span>★ SPECIAL OFFER ★ 期間限定 ★ SPECIAL OFFER ★ 期間限定 </span><span>★ SPECIAL OFFER ★ 期間限定 ★ SPECIAL OFFER ★ 期間限定 </span>
</div></div>

<style>
.sl-mq-tilt{
  width:120%; overflow:hidden;
  background:#FF5CA0; color:#fff;
  transform:rotate(-3deg);
  box-shadow:0 4px 0 rgba(25,31,46,.2);
}
.sl-mq-tilt .tk{
  display:flex; width:max-content; padding:8px 0;
  animation:sl-mqti-go 14s linear infinite;
}
.sl-mq-tilt span{ white-space:nowrap; font-weight:700; font-size:14px; letter-spacing:.05em; }
@keyframes sl-mqti-go{ to{ transform:translateX(-50%); } }
</style>

<!-- 親をrotateさせるだけ。width広めで端の欠けを防ぐ -->

<div class="sl-mq-logo"><div class="tk">
<span>🍎 ACME</span><span>🚀 SpaceY</span><span>🌊 WaveCo</span><span>🔥 FireInc</span><span>🍎 ACME</span><span>🚀 SpaceY</span><span>🌊 WaveCo</span><span>🔥 FireInc</span>
</div></div>

<style>
.sl-mq-logo{
  width:100%; max-width:290px; overflow:hidden;
  /* 端をフェードで隠す */
  -webkit-mask:linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
  mask:linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
}
.sl-mq-logo .tk{
  display:flex; gap:34px; width:max-content;
  padding:10px 0;
  animation:sl-mql-go 13s linear infinite;
}
.sl-mq-logo:hover .tk{ animation-play-state:paused; }
.sl-mq-logo span{
  white-space:nowrap; font-weight:700; font-size:17px;
  filter:grayscale(1); opacity:.55;
  transition:filter .3s, opacity .3s;
  cursor:pointer;
}
.sl-mq-logo span:hover{ filter:grayscale(0); opacity:1; }
@keyframes sl-mql-go{ to{ transform:translateX(-50%); } }
</style>

<!-- 取引先ロゴ帯の定番。maskで端をフェード+hoverで一時停止 -->

<div class="sl-mq-img"><div class="tk">
<i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i>
</div></div>

<style>
.sl-mq-img{ width:100%; max-width:290px; overflow:hidden; }
.sl-mq-img .tk{
  display:flex; gap:10px; width:max-content;
  animation:sl-mqi-go 12s linear infinite;
}
.sl-mq-img i{
  display:grid; place-items:center;
  width:92px; height:64px; font-size:26px; font-style:normal;
  border-radius:8px; border:2px solid #191F2E;
}
.sl-mq-img i:nth-child(4n+1){ background:url(01.jpg) center/cover; }
.sl-mq-img i:nth-child(4n+2){ background:url(02.jpg) center/cover; }
.sl-mq-img i:nth-child(4n+3){ background:url(03.jpg) center/cover; }
.sl-mq-img i:nth-child(4n+4){ background:url(01.jpg) center/cover; }
@keyframes sl-mqi-go{ to{ transform:translateX(-50%); } }
</style>

<!-- サンプル画像01〜03.jpgはHTMLと同じ階層に置く。srcを差し替えるだけで実案件に使える -->

<div class="sl-mq-news">
  <b>NEWS</b>
  <div class="win"><div class="list">
    <span>新オフィスに移転しました</span>
    <span>採用ページを公開しました</span>
    <span>夏季休業のお知らせ</span>
    <span>新オフィスに移転しました</span>
  </div></div>
</div>

<style>
.sl-mq-news{
  display:flex; align-items:center; gap:12px;
  width:100%; max-width:290px;
  border:2px solid #191F2E; border-radius:10px;
  background:#fff; padding:10px 14px;
}
.sl-mq-news b{
  font-family:"Space Grotesk",sans-serif; font-size:11px;
  background:#FF3B5C; color:#fff;
  padding:3px 9px; border-radius:5px;
}
.sl-mq-news .win{ height:21px; overflow:hidden; flex:1; }
.sl-mq-news .list{ animation:sl-mqn-go 9s cubic-bezier(.7,0,.2,1) infinite; }
.sl-mq-news span{
  display:block; height:21px; line-height:21px;
  font-size:13px; font-weight:700;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
/* 最後は1件目の複製でループを繋ぐ */
@keyframes sl-mqn-go{
  0%,27%{ transform:translateY(0); }
  33%,60%{ transform:translateY(-21px); }
  66%,93%{ transform:translateY(-42px); }
  100%{ transform:translateY(-63px); }
}
</style>

<div class="sl-mq-vbelt"><div class="tk">
<i></i><i></i><i></i><i></i><i></i><i></i>
</div></div>

<style>
.sl-mq-vbelt{
  height:200px; overflow:hidden;
  -webkit-mask:linear-gradient(transparent, #000 15%, #000 85%, transparent);
  mask:linear-gradient(transparent, #000 15%, #000 85%, transparent);
}
.sl-mq-vbelt .tk{
  display:flex; flex-direction:column; gap:10px;
  animation:sl-mqv-go 10s linear infinite;
}
.sl-mq-vbelt i{
  display:grid; place-items:center;
  width:130px; height:76px; font-size:26px; font-style:normal;
  border-radius:8px;
}
.sl-mq-vbelt i:nth-child(3n+1){ background:url(01.jpg) center/cover; }
.sl-mq-vbelt i:nth-child(3n+2){ background:url(02.jpg) center/cover; }
.sl-mq-vbelt i:nth-child(3n+3){ background:url(03.jpg) center/cover; }
@keyframes sl-mqv-go{ to{ transform:translateY(-50%); } }
</style>

<!-- サイドカラムの実績帯などに。サンプル画像01〜03.jpgはHTMLと同じ階層に置く。srcを差し替えるだけで実案件に使える -->

<div class="sl-mq-bounce"><div class="tk">
<i>01</i><i>02</i><i>03</i><i>04</i><i>05</i><i>06</i>
</div></div>

<style>
.sl-mq-bounce{
  width:100%; max-width:290px; overflow:hidden;
  border:2px dashed #C9CBD4; border-radius:10px; padding:8px;
}
.sl-mq-bounce .tk{
  display:flex; gap:10px; width:max-content;
  animation:sl-mqb-go 6s ease-in-out infinite alternate;
}
.sl-mq-bounce i{
  display:grid; place-items:center;
  width:64px; height:52px;
  font-family:"Space Grotesk",sans-serif;
  font-weight:700; font-style:normal;
  border-radius:8px; background:#191F2E; color:#FFCF3F;
}
/* コンテナ幅との差分だけ動かす */
@keyframes sl-mqb-go{
  to{ transform:translateX(calc(-100% + 274px)); }
}
</style>

<!-- 端で折り返すタイプ。無限ループより実装が単純 -->

<div class="sl-sn-basic"><i></i><i></i><i></i><i></i></div>

<style>
.sl-sn-basic{
  display:flex; gap:12px;
  width:250px; overflow-x:auto;
  scroll-snap-type:x mandatory;
  padding:6px 0; border-radius:10px;
  scrollbar-width:none;
}
.sl-sn-basic::-webkit-scrollbar{ display:none; }
.sl-sn-basic i{
  flex:none; display:grid; place-items:center;
  width:236px; height:120px;
  font-size:34px; font-style:normal;
  border-radius:10px; border:2px solid #191F2E;
  scroll-snap-align:center;
}
.sl-sn-basic i:nth-child(4n+1){ background:url(01.jpg) center/cover; }
.sl-sn-basic i:nth-child(4n+2){ background:url(02.jpg) center/cover; }
.sl-sn-basic i:nth-child(4n+3){ background:url(03.jpg) center/cover; }
.sl-sn-basic i:nth-child(4n+4){ background:url(01.jpg) center/cover; }
</style>

<!-- 横にドラッグ/スワイプ。JSゼロでピタッと止まるカルーセル -->

<div class="sl-sn-peek"><i></i><i></i><i></i><i></i></div>

<style>
.sl-sn-peek{
  display:flex; gap:12px;
  width:250px; overflow-x:auto;
  scroll-snap-type:x mandatory;
  padding:6px 24px; border-radius:10px;
  scrollbar-width:none;
}
.sl-sn-peek::-webkit-scrollbar{ display:none; }
.sl-sn-peek i{
  flex:none; display:grid; place-items:center;
  width:190px; height:120px;
  font-size:34px; font-style:normal;
  border-radius:10px; border:2px solid #191F2E;
  scroll-snap-align:center;
}
.sl-sn-peek i:nth-child(4n+1){ background:url(01.jpg) center/cover; }
.sl-sn-peek i:nth-child(4n+2){ background:url(02.jpg) center/cover; }
.sl-sn-peek i:nth-child(4n+3){ background:url(03.jpg) center/cover; }
.sl-sn-peek i:nth-child(4n+4){ background:url(01.jpg) center/cover; }
</style>

<!-- カード幅<コンテナ幅にして左右paddingを足すと「次がある感」が出る -->

<div class="sl-sn-multi"><i>1</i><i>2</i><i>3</i><i>4</i><i>5</i><i>6</i></div>

<style>
.sl-sn-multi{
  display:flex; gap:12px;
  width:250px; overflow-x:auto;
  scroll-snap-type:x proximity;
  padding:6px 0; border-radius:10px;
  scrollbar-width:none;
}
.sl-sn-multi::-webkit-scrollbar{ display:none; }
.sl-sn-multi i{
  flex:none; display:grid; place-items:center;
  width:110px; height:120px;
  font-family:"Space Grotesk",sans-serif;font-size:26px;font-weight:700; font-style:normal;
  border-radius:10px; border:2px solid #191F2E;
  scroll-snap-align:start;
}
.sl-sn-multi i:nth-child(4n+1){ background:url(01.jpg) center/cover; }
.sl-sn-multi i:nth-child(4n+2){ background:url(02.jpg) center/cover; }
.sl-sn-multi i:nth-child(4n+3){ background:url(03.jpg) center/cover; }
.sl-sn-multi i:nth-child(4n+4){ background:url(01.jpg) center/cover; }
</style>

<!-- align:start+proximityでゆるいスナップに -->

<div class="sl-sn-v"><i>PAGE 1</i><i>PAGE 2</i><i>PAGE 3</i></div>

<style>
.sl-sn-v{
  width:170px; height:210px; overflow-y:auto;
  scroll-snap-type:y mandatory;
  border-radius:12px; border:2px solid #191F2E;
  scrollbar-width:none;
}
.sl-sn-v::-webkit-scrollbar{ display:none; }
.sl-sn-v i{
  display:grid; place-items:center;
  height:100%; font-style:normal;
  font-family:"Space Grotesk",sans-serif;
  font-weight:700; font-size:19px; color:#fff;
  scroll-snap-align:start; scroll-snap-stop:always;
}
.sl-sn-v i:nth-child(1){ background:url(01.jpg) center/cover; }
.sl-sn-v i:nth-child(2){ background:url(02.jpg) center/cover; }
.sl-sn-v i:nth-child(3){ background:url(03.jpg) center/cover; }
</style>

<!-- snap-stop:alwaysで1画面ずつ必ず止まる -->

<div class="sl-sn-scale"><i></i><i></i><i></i><i></i><i></i></div>

<style>
.sl-sn-scale{
  display:flex; gap:12px;
  width:250px; overflow-x:auto;
  scroll-snap-type:x mandatory;
  padding:14px 60px; scrollbar-width:none;
}
.sl-sn-scale::-webkit-scrollbar{ display:none; }
.sl-sn-scale i{
  flex:none; display:grid; place-items:center;
  width:120px; height:110px;
  font-size:32px; font-style:normal;
  border-radius:12px; border:2px solid #191F2E;
  scroll-snap-align:center;
  /* ★ 自身の画面内位置に応じてスケール */
  animation:sl-snsc-go linear both;
  animation-timeline:view(x);
}
.sl-sn-scale i:nth-child(odd){ background:url(01.jpg) center/cover; }
.sl-sn-scale i:nth-child(even){ background:url(02.jpg) center/cover; }
@keyframes sl-snsc-go{
  0%{ transform:scale(.78); opacity:.55; }
  50%{ transform:scale(1.08); opacity:1; }
  100%{ transform:scale(.78); opacity:.55; }
}
</style>

<!-- animation-timeline:view(x)でカバーフロー風(Chrome/Edge) -->

<div class="sl-rd-dots">
  <input type="radio" name="slrd1" id="slrd1a" checked>
  <input type="radio" name="slrd1" id="slrd1b">
  <input type="radio" name="slrd1" id="slrd1c">
  <div class="win"><div class="belt"><i></i><i></i><i></i></div></div>
  <div class="dots">
    <label for="slrd1a"></label><label for="slrd1b"></label><label for="slrd1c"></label>
  </div>
</div>

<style>
.sl-rd-dots input{ display:none; }
.sl-rd-dots .win{
  width:240px; height:130px;
  border-radius:12px; overflow:hidden;
  border:2px solid #191F2E;
}
.sl-rd-dots .belt{
  display:flex; width:300%; height:100%;
  transition:translate .5s cubic-bezier(.6,0,.2,1);
}
.sl-rd-dots i{
  width:calc(100% / 3); display:grid; place-items:center;
  font-size:38px; font-style:normal;
}
.sl-rd-dots i:nth-child(1){ background:url(01.jpg) center/cover; }
.sl-rd-dots i:nth-child(2){ background:url(02.jpg) center/cover; }
.sl-rd-dots i:nth-child(3){ background:url(03.jpg) center/cover; }
#slrd1b:checked ~ .win .belt{ translate:-33.333% 0; }
#slrd1c:checked ~ .win .belt{ translate:-66.666% 0; }
.sl-rd-dots .dots{ display:flex; gap:8px; justify-content:center; margin-top:10px; }
.sl-rd-dots .dots label{
  width:11px; height:11px; border-radius:50%;
  background:#C9CBD4; cursor:pointer;
  transition:background .3s, transform .3s;
}
#slrd1a:checked ~ .dots label[for="slrd1a"],
#slrd1b:checked ~ .dots label[for="slrd1b"],
#slrd1c:checked ~ .dots label[for="slrd1c"]{
  background:#3A46E8; transform:scale(1.35);
}
</style>

<!-- radio+labelで完全JSレスのスライダー -->

<div class="sl-rd-arrow">
  <input type="radio" name="slrd2" id="slrd2a" checked>
  <input type="radio" name="slrd2" id="slrd2b">
  <input type="radio" name="slrd2" id="slrd2c">
  <div class="win"><div class="belt"><i>1</i><i>2</i><i>3</i></div></div>
  <label class="ar prev pa" for="slrd2c">‹</label>
  <label class="ar prev pb" for="slrd2a">‹</label>
  <label class="ar prev pc" for="slrd2b">‹</label>
  <label class="ar next na" for="slrd2b">›</label>
  <label class="ar next nb" for="slrd2c">›</label>
  <label class="ar next nc" for="slrd2a">›</label>
</div>

<style>
.sl-rd-arrow{ position:relative; width:240px; }
.sl-rd-arrow input{ display:none; }
.sl-rd-arrow .win{
  height:130px; border-radius:12px; overflow:hidden;
  border:2px solid #191F2E;
}
.sl-rd-arrow .belt{
  display:flex; width:300%; height:100%;
  transition:translate .5s cubic-bezier(.6,0,.2,1);
}
.sl-rd-arrow i{
  width:calc(100% / 3); display:grid; place-items:center;
  font-family:"Space Grotesk",sans-serif;
  font-size:40px; font-weight:700; font-style:normal; color:#fff;
}
.sl-rd-arrow i:nth-child(1){ background:#3A46E8; }
.sl-rd-arrow i:nth-child(2){ background:#FF5CA0; }
.sl-rd-arrow i:nth-child(3){ background:#20B486; }
#slrd2b:checked ~ .win .belt{ translate:-33.333% 0; }
#slrd2c:checked ~ .win .belt{ translate:-66.666% 0; }
.sl-rd-arrow .ar{
  position:absolute; top:50%; translate:0 -50%;
  width:34px; height:34px; display:none;
  place-items:center; cursor:pointer;
  background:#fff; border:2px solid #191F2E; border-radius:50%;
  font-size:18px; font-weight:700; user-select:none;
  transition:background .2s;
}
.sl-rd-arrow .ar:hover{ background:#FFCF3F; }
.sl-rd-arrow .prev{ left:-14px; }
.sl-rd-arrow .next{ right:-14px; }
/* 今のスライドに応じて対応する矢印だけ表示 */
#slrd2a:checked ~ .pa, #slrd2a:checked ~ .na{ display:grid; }
#slrd2b:checked ~ .pb, #slrd2b:checked ~ .nb{ display:grid; }
#slrd2c:checked ~ .pc, #slrd2c:checked ~ .nc{ display:grid; }
</style>

<!-- 矢印は「次/前のradioを指すlabel」を状態ごとに出し分ける -->

<div class="sl-rd-thumb">
  <input type="radio" name="slrd3" id="slrd3a" checked>
  <input type="radio" name="slrd3" id="slrd3b">
  <input type="radio" name="slrd3" id="slrd3c">
  <div class="main"><i class="m1"></i><i class="m2"></i><i class="m3"></i></div>
  <div class="ths">
    <label for="slrd3a" class="t1"></label>
    <label for="slrd3b" class="t2"></label>
    <label for="slrd3c" class="t3"></label>
  </div>
</div>

<style>
.sl-rd-thumb input{ display:none; }
.sl-rd-thumb .main{
  position:relative; width:230px; height:120px;
  border-radius:12px; overflow:hidden; border:2px solid #191F2E;
}
.sl-rd-thumb .main i{
  position:absolute; inset:0;
  display:grid; place-items:center;
  font-size:40px; font-style:normal;
  opacity:0; transform:scale(1.06);
  transition:opacity .4s ease, transform .4s;
}
.sl-rd-thumb .m1{ background:url(01.jpg) center/cover; }
.sl-rd-thumb .m2{ background:url(02.jpg) center/cover; }
.sl-rd-thumb .m3{ background:url(03.jpg) center/cover; }
#slrd3a:checked ~ .main .m1,
#slrd3b:checked ~ .main .m2,
#slrd3c:checked ~ .main .m3{ opacity:1; transform:scale(1); }
.sl-rd-thumb .ths{ display:flex; gap:8px; margin-top:9px; }
.sl-rd-thumb .ths label{
  display:grid; place-items:center;
  width:56px; height:38px; font-size:17px;
  border-radius:7px; border:2px solid #C9CBD4;
  cursor:pointer; opacity:.55;
  transition:all .25s;
}
.sl-rd-thumb .t1{ background:url(01.jpg) center/cover; }
.sl-rd-thumb .t2{ background:url(02.jpg) center/cover; }
.sl-rd-thumb .t3{ background:url(03.jpg) center/cover; }
#slrd3a:checked ~ .ths .t1,
#slrd3b:checked ~ .ths .t2,
#slrd3c:checked ~ .ths .t3{
  opacity:1; border-color:#191F2E; transform:translateY(-3px);
}
</style>

<!-- 商品ページのギャラリーがJSなしで作れる -->

<div class="sl-rd-count">
  <input type="radio" name="slrd4" id="slrd4a" checked>
  <input type="radio" name="slrd4" id="slrd4b">
  <input type="radio" name="slrd4" id="slrd4c">
  <div class="win"><div class="belt"><i></i><i></i><i></i></div></div>
  <div class="foot">
    <span class="num"><b class="n1">01</b><b class="n2">02</b><b class="n3">03</b> / 03</span>
    <span class="ctl"><label for="slrd4a">●</label><label for="slrd4b">●</label><label for="slrd4c">●</label></span>
  </div>
</div>

<style>
.sl-rd-count input{ display:none; }
.sl-rd-count .win{
  width:240px; height:120px;
  border-radius:12px; overflow:hidden; border:2px solid #191F2E;
}
.sl-rd-count .belt{
  display:flex; width:300%; height:100%;
  transition:translate .5s cubic-bezier(.6,0,.2,1);
}
.sl-rd-count i{
  width:calc(100%/3); display:grid; place-items:center;
  font-size:36px; font-style:normal;
}
.sl-rd-count i:nth-child(1){ background:url(01.jpg) center/cover; }
.sl-rd-count i:nth-child(2){ background:url(02.jpg) center/cover; }
.sl-rd-count i:nth-child(3){ background:url(03.jpg) center/cover; }
#slrd4b:checked ~ .win .belt{ translate:-33.333% 0; }
#slrd4c:checked ~ .win .belt{ translate:-66.666% 0; }
.sl-rd-count .foot{
  display:flex; justify-content:space-between; align-items:center;
  width:240px; margin-top:8px;
  font-family:"Space Grotesk",sans-serif; font-weight:700;
}
.sl-rd-count .num b{ display:none; color:#3A46E8; }
#slrd4a:checked ~ .foot .n1{ display:inline; }
#slrd4b:checked ~ .foot .n2{ display:inline; }
#slrd4c:checked ~ .foot .n3{ display:inline; }
.sl-rd-count .ctl label{
  cursor:pointer; color:#C9CBD4; font-size:11px; padding:0 3px;
  transition:color .25s;
}
#slrd4a:checked ~ .foot label[for="slrd4a"],
#slrd4b:checked ~ .foot label[for="slrd4b"],
#slrd4c:checked ~ .foot label[for="slrd4c"]{ color:#191F2E; }
</style>

<div class="sl-ac-h">
  <div class="p a"><b>MOUNTAIN</b></div>
  <div class="p b"><b>OCEAN</b></div>
  <div class="p c"><b>SAKURA</b></div>
</div>

<style>
.sl-ac-h{
  display:flex; gap:8px;
  width:260px; height:140px;
}
.sl-ac-h .p{
  position:relative; flex:1;
  border-radius:12px; overflow:hidden;
  border:2px solid #191F2E; cursor:pointer;
  transition:flex .45s cubic-bezier(.4,0,.2,1);
}
.sl-ac-h .p:hover{ flex:2.6; }
.sl-ac-h .a{ background:url(01.jpg) center/cover; }
.sl-ac-h .b{ background:url(02.jpg) center/cover; }
.sl-ac-h .c{ background:url(03.jpg) center/cover; }
.sl-ac-h b{
  position:absolute; left:10px; bottom:10px;
  color:#fff; font-size:11px; letter-spacing:.08em;
  white-space:nowrap; opacity:0;
  transition:opacity .3s .15s;
}
.sl-ac-h .p:hover b{ opacity:1; }
</style>

<!-- flex値のtransitionだけで開閉できる -->

<div class="sl-ac-v">
  <div class="p a"><b>Spring</b></div>
  <div class="p b"><b>Summer</b></div>
  <div class="p c"><b>Autumn</b></div>
</div>

<style>
.sl-ac-v{
  display:flex; flex-direction:column; gap:8px;
  width:230px; height:210px;
}
.sl-ac-v .p{
  position:relative; flex:1;
  border-radius:10px; overflow:hidden;
  border:2px solid #191F2E; cursor:pointer;
  display:flex; align-items:center; padding-left:14px;
  transition:flex .45s cubic-bezier(.4,0,.2,1);
}
.sl-ac-v .p:hover{ flex:2.4; }
.sl-ac-v .a{ background:url(01.jpg) center/cover; }
.sl-ac-v .b{ background:url(02.jpg) center/cover; }
.sl-ac-v .c{ background:url(03.jpg) center/cover; }
.sl-ac-v b{ color:#fff; font-size:13px; letter-spacing:.06em; }
</style>

<div class="sl-3d-cube"><div class="cube">
  <i class="f1">FRONT</i><i class="f2">SIDE</i>
</div></div>

<style>
.sl-3d-cube{
  width:200px; height:120px;
  perspective:800px;
}
.sl-3d-cube .cube{
  position:relative; width:100%; height:100%;
  transform-style:preserve-3d;
  animation:sl-cube-go 6s cubic-bezier(.7,0,.3,1) infinite;
}
.sl-3d-cube i{
  position:absolute; inset:0;
  display:grid; place-items:center;
  font-family:"Space Grotesk",sans-serif;
  font-weight:700; font-style:normal; color:#fff;
  border:2px solid #191F2E; border-radius:10px;
  backface-visibility:hidden;
}
/* 奥行き=幅の半分だけ手前/回転して箱にする */
.sl-3d-cube .f1{ background:#3A46E8; transform:translateZ(60px); }
.sl-3d-cube .f2{ background:#FF5CA0; transform:rotateX(-90deg) translateZ(60px); }
@keyframes sl-cube-go{
  0%,40%{ transform:rotateX(0); }
  50%,90%{ transform:rotateX(90deg); }
  100%{ transform:rotateX(0); }
}
</style>

<!-- translateZは高さの半分(120px→60px)にすると立方体が閉じる -->

<div class="sl-3d-ring"><div class="ring">
  <i>1</i><i>2</i><i>3</i><i>4</i>
</div></div>

<style>
.sl-3d-ring{
  width:160px; height:110px;
  perspective:700px;
}
.sl-3d-ring .ring{
  position:relative; width:100%; height:100%;
  transform-style:preserve-3d;
  animation:sl-ring-go 12s linear infinite;
}
.sl-3d-ring i{
  position:absolute; inset:0;
  display:grid; place-items:center;
  font-family:"Space Grotesk",sans-serif;
  font-size:30px; font-weight:700; font-style:normal; color:#fff;
  border-radius:12px; border:2px solid #191F2E;
  backface-visibility:hidden;
}
/* 4枚を90度刻みで円周に配置 */
.sl-3d-ring i:nth-child(1){ background:#3A46E8; transform:rotateY(0deg) translateZ(110px); }
.sl-3d-ring i:nth-child(2){ background:#FF5CA0; transform:rotateY(90deg) translateZ(110px); }
.sl-3d-ring i:nth-child(3){ background:#20B486; transform:rotateY(180deg) translateZ(110px); }
.sl-3d-ring i:nth-child(4){ background:#F59E0B; transform:rotateY(270deg) translateZ(110px); }
@keyframes sl-ring-go{ to{ transform:rotateY(-360deg); } }
</style>

<div class="sl-3d-deck"><i>A</i><i>B</i><i>C</i></div>

<style>
.sl-3d-deck{ position:relative; width:170px; height:120px; }
.sl-3d-deck i{
  position:absolute; inset:0;
  display:grid; place-items:center;
  font-family:"Space Grotesk",sans-serif;
  font-size:34px; font-weight:700; font-style:normal; color:#fff;
  border-radius:14px; border:2px solid #191F2E;
  animation:sl-deck-go 6s ease-in-out infinite;
}
.sl-3d-deck i:nth-child(1){ background:#3A46E8; animation-delay:0s; }
.sl-3d-deck i:nth-child(2){ background:#FF5CA0; animation-delay:2s; }
.sl-3d-deck i:nth-child(3){ background:#20B486; animation-delay:4s; }
/* 前(大)→横に抜ける→後ろに回る、を1枚ずつ位相をずらす */
@keyframes sl-deck-go{
  0%{ transform:translate(0,0) scale(1); z-index:3; opacity:1; }
  30%{ transform:translate(0,0) scale(1); z-index:3; opacity:1; }
  38%{ transform:translate(90px,-8px) rotate(9deg) scale(.95); z-index:3; opacity:1; }
  46%,100%{ z-index:1; }
  52%{ transform:translate(-8px,10px) scale(.88); opacity:.75; }
  66%{ transform:translate(-4px,5px) scale(.94); opacity:.85; z-index:2; }
  100%{ transform:translate(0,0) scale(1); opacity:1; z-index:3; }
}
</style>

<!-- z-indexもキーフレームで切り替えるのがコツ -->

<div class="sl-3d-quote">
  <blockquote>デザインが一新して問合せが増えました！<cite>— A社さま</cite></blockquote>
  <blockquote>更新作業がとても楽になりました。<cite>— B社さま</cite></blockquote>
  <blockquote>スマホ表示が見やすいと好評です。<cite>— C社さま</cite></blockquote>
</div>

<style>
.sl-3d-quote{
  position:relative; width:250px; height:110px;
}
.sl-3d-quote blockquote{
  position:absolute; inset:0; margin:0;
  display:flex; flex-direction:column; justify-content:center; gap:8px;
  padding:16px 18px;
  background:#fff; border:2px solid #191F2E; border-radius:12px;
  font-size:13.5px; font-weight:700;
  opacity:0;
  animation:sl-quote-go 9s ease-in-out infinite;
}
.sl-3d-quote blockquote::before{
  content:"“"; position:absolute; top:-14px; left:10px;
  font-family:"Space Grotesk",sans-serif;
  font-size:44px; color:#FF5CA0;
}
.sl-3d-quote cite{ font-size:11px; color:#5A6072; font-style:normal; }
.sl-3d-quote blockquote:nth-child(2){ animation-delay:3s; }
.sl-3d-quote blockquote:nth-child(3){ animation-delay:6s; }
@keyframes sl-quote-go{
  0%,4%{ opacity:0; translate:0 8px; }
  8%,29%{ opacity:1; translate:0 0; }
  36%,100%{ opacity:0; }
}
</style>

<div class="sl-3d-split">
  <div class="half top"><i></i><i></i></div>
  <div class="half btm"><i></i><i></i></div>
</div>

<style>
.sl-3d-split{
  position:relative; width:220px; height:130px;
  border-radius:12px; overflow:hidden; border:2px solid #191F2E;
}
.sl-3d-split .half{
  position:absolute; left:0; right:0; height:50%; overflow:hidden;
}
.sl-3d-split .top{ top:0; }
.sl-3d-split .btm{ bottom:0; }
.sl-3d-split i{
  position:absolute; left:0; right:0; height:200%;
  display:grid; place-items:center;
  font-size:38px; font-style:normal;
}
.sl-3d-split .top i{ top:0; }
.sl-3d-split .btm i{ bottom:0; }
.sl-3d-split i:nth-child(1){ background:url(01.jpg) center/cover; }
.sl-3d-split i:nth-child(2){ background:url(02.jpg) center/cover; }
/* 上半分は左へ、下半分は右へ抜ける */
.sl-3d-split .top i:nth-child(1){ animation:sl-sp-tl 6s ease-in-out infinite; }
.sl-3d-split .btm i:nth-child(1){ animation:sl-sp-bl 6s ease-in-out infinite; }
.sl-3d-split .top i:nth-child(2){ animation:sl-sp-tr 6s ease-in-out infinite; }
.sl-3d-split .btm i:nth-child(2){ animation:sl-sp-br 6s ease-in-out infinite; }
@keyframes sl-sp-tl{ 0%,42%{ translate:0 0; } 50%,92%{ translate:-101% 0; } 100%{ translate:0 0; } }
@keyframes sl-sp-bl{ 0%,42%{ translate:0 0; } 50%,92%{ translate:101% 0; } 100%{ translate:0 0; } }
@keyframes sl-sp-tr{ 0%,42%{ translate:101% 0; } 50%,92%{ translate:0 0; } 100%{ translate:101% 0; } }
@keyframes sl-sp-br{ 0%,42%{ translate:-101% 0; } 50%,92%{ translate:0 0; } 100%{ translate:-101% 0; } }
</style>

<!-- 上下で逆方向に抜けるとリッチな切替に見える -->

<div class="sl-ms-timer">
  <div class="win"><i></i><i></i><i></i></div>
  <div class="bar"><b></b></div>
</div>

<style>
.sl-ms-timer .win{
  position:relative; width:240px; height:120px;
  border-radius:12px; overflow:hidden; border:2px solid #191F2E;
}
.sl-ms-timer i{
  position:absolute; inset:0;
  display:grid; place-items:center;
  font-size:38px; font-style:normal; opacity:0;
  animation:sl-tmr-img 9s infinite;
}
.sl-ms-timer i:nth-child(1){ background:url(01.jpg) center/cover; animation-delay:0s; }
.sl-ms-timer i:nth-child(2){ background:url(02.jpg) center/cover; animation-delay:3s; }
.sl-ms-timer i:nth-child(3){ background:url(03.jpg) center/cover; animation-delay:6s; }
@keyframes sl-tmr-img{
  0%,29%{ opacity:1; } 37%,95%{ opacity:0; } 100%{ opacity:1; }
}
.sl-ms-timer .bar{
  width:240px; height:5px; margin-top:8px;
  border-radius:99px; background:#E7E4DA; overflow:hidden;
}
.sl-ms-timer .bar b{
  display:block; height:100%; background:#3A46E8;
  transform-origin:left;
  animation:sl-tmr-bar 3s linear infinite;
}
@keyframes sl-tmr-bar{
  from{ transform:scaleX(0); }
  to{ transform:scaleX(1); }
}
</style>

<!-- バーは3秒(=1枚分)ループ。切替と周期を揃える -->

<div class="sl-ms-ba">
  <i class="bf">BEFORE</i>
  <i class="af">AFTER</i>
  <b class="line"></b>
</div>

<style>
.sl-ms-ba{
  position:relative; width:240px; height:130px;
  border-radius:12px; overflow:hidden; border:2px solid #191F2E;
}
.sl-ms-ba i{
  position:absolute; inset:0;
  display:grid; place-items:center;
  font-family:"Space Grotesk",sans-serif;
  font-weight:700; font-style:normal; letter-spacing:.1em; color:#fff;
}
.sl-ms-ba .bf{ background:#5A6072; }
.sl-ms-ba .af{
  background:url(01.jpg) center/cover;
  clip-path:inset(0 50% 0 0);
  animation:sl-ba-clip 4s ease-in-out infinite alternate;
}
.sl-ms-ba .line{
  position:absolute; top:0; bottom:0; left:50%;
  width:3px; background:#fff;
  box-shadow:0 0 8px rgba(0,0,0,.4);
  animation:sl-ba-line 4s ease-in-out infinite alternate;
}
@keyframes sl-ba-clip{
  from{ clip-path:inset(0 80% 0 0); }
  to{ clip-path:inset(0 20% 0 0); }
}
@keyframes sl-ba-line{
  from{ left:20%; } to{ left:80%; }
}
</style>

<!-- 手動ドラッグ版は+JS上級編に -->

<div class="sl-ms-curtain">
  <i class="back">🌸 NEW</i>
  <b class="cl"></b><b class="cr"></b>
</div>

<style>
.sl-ms-curtain{
  position:relative; width:240px; height:130px;
  border-radius:12px; overflow:hidden; border:2px solid #191F2E;
}
.sl-ms-curtain .back{
  position:absolute; inset:0;
  display:grid; place-items:center;
  font-size:24px; font-weight:700; font-style:normal; color:#fff;
  background:url(02.jpg) center/cover;
}
.sl-ms-curtain b{
  position:absolute; top:0; bottom:0; width:51%;
  background:
    repeating-linear-gradient(90deg,
      #2a3160 0 14px, #3A46E8 14px 28px);
  animation:4.5s ease-in-out infinite alternate;
}
.sl-ms-curtain .cl{ left:0; animation-name:sl-cur-l; }
.sl-ms-curtain .cr{ right:0; animation-name:sl-cur-r; }
@keyframes sl-cur-l{
  0%,25%{ translate:0 0; } 75%,100%{ translate:-101% 0; }
}
@keyframes sl-cur-r{
  0%,25%{ translate:0 0; } 75%,100%{ translate:101% 0; }
}
</style>

<div class="sl-ms-film"><div class="tk">
<i></i><i></i><i></i><i></i><i></i><i></i>
</div></div>

<style>
.sl-ms-film{
  width:100%; max-width:290px;
  overflow:hidden; background:#191F2E;
  padding:16px 0; position:relative;
}
/* 上下のパーフォレーション(送り穴) */
.sl-ms-film::before,
.sl-ms-film::after{
  content:""; position:absolute; left:0; right:0; height:8px;
  background-image:radial-gradient(#F7F5EF 2.5px, transparent 2.5px);
  background-size:16px 8px;
}
.sl-ms-film::before{ top:4px; }
.sl-ms-film::after{ bottom:4px; }
.sl-ms-film .tk{
  display:flex; gap:6px; width:max-content;
  animation:sl-film-go 11s linear infinite;
}
.sl-ms-film i{
  display:grid; place-items:center;
  width:88px; height:58px; font-size:24px; font-style:normal;
}
.sl-ms-film i:nth-child(3n+1){ background:url(01.jpg) center/cover; }
.sl-ms-film i:nth-child(3n+2){ background:url(02.jpg) center/cover; }
.sl-ms-film i:nth-child(3n+3){ background:url(03.jpg) center/cover; }
@keyframes sl-film-go{ to{ transform:translateX(-50%); } }
</style>

<!-- radial-gradientでフィルムの送り穴を再現 -->

<div class="sl-ms-story">
  <div class="s live"><i>🦊</i></div>
  <div class="s"><i>🐻</i></div>
  <div class="s"><i>🐸</i></div>
  <div class="s seen"><i>🐰</i></div>
</div>

<style>
.sl-ms-story{ display:flex; gap:14px; }
.sl-ms-story .s{
  position:relative; width:56px; height:56px;
  border-radius:50%; padding:3px;
  background:conic-gradient(#FFCF3F, #FF5CA0, #3A46E8, #FFCF3F);
  cursor:pointer;
  transition:transform .25s;
}
.sl-ms-story .s:hover{ transform:scale(1.1); }
.sl-ms-story .seen{ background:#D6D3C6; }
.sl-ms-story .live{
  animation:sl-story-spin 2.6s linear infinite;
}
.sl-ms-story i{
  display:grid; place-items:center;
  width:100%; height:100%;
  border-radius:50%; border:2.5px solid #F7F5EF;
  background:#fff; font-size:22px; font-style:normal;
  animation:sl-story-unspin 2.6s linear infinite;
}
.sl-ms-story .s:not(.live) i{ animation:none; }
/* 枠だけ回して中身は逆回転で固定 */
@keyframes sl-story-spin{ to{ transform:rotate(360deg); } }
@keyframes sl-story-unspin{ to{ transform:rotate(-360deg); } }
</style>

<!-- conicグラデ枠を回し、中身を逆回転で打ち消すトリック -->

<div class="sl-ms-hero">
  <i class="im a"></i><i class="im b"></i>
  <span class="cap ca">山へ行こう。</span>
  <span class="cap cb">海へ行こう。</span>
</div>

<style>
.sl-ms-hero{
  position:relative; width:250px; height:140px;
  border-radius:12px; overflow:hidden; border:2px solid #191F2E;
}
.sl-ms-hero .im{
  position:absolute; inset:0;
  display:grid; place-items:center;
  font-size:44px; font-style:normal; opacity:0;
  animation:sl-hero-img 8s ease-in-out infinite;
}
.sl-ms-hero .a{ background:url(03.jpg) center/cover; }
.sl-ms-hero .b{ background:url(01.jpg) center/cover; animation-delay:4s; }
.sl-ms-hero .cap{
  position:absolute; left:14px; bottom:12px;
  color:#fff; font-size:17px; font-weight:900;
  text-shadow:0 2px 6px rgba(0,0,0,.35);
  opacity:0;
  animation:sl-hero-cap 8s ease-in-out infinite;
}
.sl-ms-hero .cb{ animation-delay:4s; }
@keyframes sl-hero-img{
  0%,44%{ opacity:1; } 50%,94%{ opacity:0; } 100%{ opacity:1; }
}
/* テキストは少し遅れて登場・少し早く退場 */
@keyframes sl-hero-cap{
  0%{ opacity:0; translate:0 10px; }
  6%,40%{ opacity:1; translate:0 0; }
  46%,100%{ opacity:0; }
}
</style>

<!-- 画像とテキストのkeyframe位相を数%ずらすとプロっぽい -->

<div class="sl-ms-wheel">
  <div class="win">
    <div class="list">
      <span>東京</span><span>大阪</span><span>名古屋</span><span>福岡</span><span>札幌</span><span>仙台</span><span>広島</span>
    </div>
    <b class="sel"></b>
  </div>
</div>

<style>
.sl-ms-wheel .win{
  position:relative;
  width:150px; height:190px; overflow-y:auto;
  border:2px solid #191F2E; border-radius:14px; background:#fff;
  scroll-snap-type:y mandatory;
  scrollbar-width:none;
  /* 上下をフェードさせて円筒感 */
  -webkit-mask:linear-gradient(transparent, #000 35%, #000 65%, transparent);
  mask:linear-gradient(transparent, #000 35%, #000 65%, transparent);
}
.sl-ms-wheel .win::-webkit-scrollbar{ display:none; }
.sl-ms-wheel .list{ padding:76px 0; }
.sl-ms-wheel span{
  display:block; height:38px; line-height:38px;
  text-align:center; font-size:15px; font-weight:700;
  scroll-snap-align:center;
}
.sl-ms-wheel .sel{
  position:sticky; bottom:76px;
  display:block; height:38px; margin-top:-114px;
  border-block:2px solid #3A46E8;
  pointer-events:none;
}
</style>

<!-- snap+maskでiOSのドラムロール風。スクロールしてみて -->

<div class="sl-kb-d"><i></i></div>

<style>
.sl-kb-d{
  width:240px; height:150px;
  border-radius:12px; overflow:hidden;
  border:2px solid #191F2E;
}
.sl-kb-d i{
  display:block;
  width:100%; height:100%;
  background:url(02.jpg) center/cover;
  animation:sl-kb-d-go 8s ease-in-out infinite alternate;
}
@keyframes sl-kb-d-go{
  from{ transform:scale(1.02); }
  to{ transform:scale(1.28) translateY(-6%); }
}
</style>

<!-- サンプル画像01〜03.jpgはHTMLと同じ階層に置く。srcを差し替えるだけで実案件に使える -->

<div class="sl-kb-zo"><i></i></div>

<style>
.sl-kb-zo{
  width:240px; height:150px;
  border-radius:12px; overflow:hidden;
  border:2px solid #191F2E;
}
.sl-kb-zo i{
  display:block;
  width:100%; height:100%;
  background:url(01.jpg) center/cover;
  /* 寄り(1.35)から引き(1.02)へ。ゆっくり戻る */
  animation:sl-kb-zo-go 8s ease-in-out infinite alternate;
}
@keyframes sl-kb-zo-go{
  from{ transform:scale(1.35); }
  to{ transform:scale(1.02); }
}
</style>

<!-- サンプル画像01〜03.jpgはHTMLと同じ階層に置く。srcを差し替えるだけで実案件に使える -->

<div class="sl-at-rot"><i></i><i></i><i></i></div>

<style>
.sl-at-rot{
  position:relative; width:240px; height:150px;
  border-radius:12px; overflow:hidden;
  border:2px solid #191F2E;
}
.sl-at-rot i{
  position:absolute; inset:0;
  display:grid; place-items:center;
  font-size:40px; font-style:normal;
  animation:sl-at-rot-go 9s infinite ease-in-out;
}
.sl-at-rot i:nth-child(1){ background:url(01.jpg) center/cover; animation-delay:0s; }
.sl-at-rot i:nth-child(2){ background:url(02.jpg) center/cover; animation-delay:3s; }
.sl-at-rot i:nth-child(3){ background:url(03.jpg) center/cover; animation-delay:6s; }
@keyframes sl-at-rot-go{
  0%{ opacity:0; transform:rotate(-8deg) scale(1.15); z-index:1; }
  7%,29%{ opacity:1; transform:rotate(0) scale(1); z-index:1; }
  37%,95%{ opacity:0; z-index:0; }
  100%{ opacity:0; transform:rotate(-8deg) scale(1.15); }
}
</style>

<!-- サンプル画像01〜03.jpgはHTMLと同じ階層に置く。srcを差し替えるだけで実案件に使える -->

<div class="sl-at-skew"><i></i><i></i><i></i></div>

<style>
.sl-at-skew{
  position:relative; width:240px; height:150px;
  border-radius:12px; overflow:hidden;
  border:2px solid #191F2E;
}
.sl-at-skew i{
  position:absolute; inset:0;
  display:grid; place-items:center;
  font-size:40px; font-style:normal;
  animation:sl-at-skew-go 9s infinite cubic-bezier(.7,0,.3,1);
}
.sl-at-skew i:nth-child(1){ background:url(01.jpg) center/cover; animation-delay:0s; }
.sl-at-skew i:nth-child(2){ background:url(02.jpg) center/cover; animation-delay:3s; }
.sl-at-skew i:nth-child(3){ background:url(03.jpg) center/cover; animation-delay:6s; }
@keyframes sl-at-skew-go{
  0%{ transform:translateX(110%) skewX(-8deg); }
  6%,32%{ transform:translateX(0) skewX(0); }
  38%,100%{ transform:translateX(-110%) skewX(-8deg); }
}
</style>

<!-- サンプル画像01〜03.jpgはHTMLと同じ階層に置く。srcを差し替えるだけで実案件に使える -->

<div class="sl-sn-full"><i>SLIDE 1</i><i>SLIDE 2</i><i>SLIDE 3</i></div>

<style>
.sl-sn-full{
  display:flex;
  width:250px; overflow-x:auto;
  scroll-snap-type:x mandatory;
  border-radius:12px; border:2px solid #191F2E;
  scrollbar-width:none;
}
.sl-sn-full::-webkit-scrollbar{ display:none; }
.sl-sn-full i{
  flex:none; width:100%; height:130px;
  display:grid; place-items:center;
  font-family:"Space Grotesk",sans-serif;
  font-weight:700; font-style:normal; color:#fff;
  scroll-snap-align:start;
  scroll-snap-stop:always;   /* ★ 勢いよくスワイプしても1枚で止まる */
}
.sl-sn-full i:nth-child(1){ background:#3A46E8; }
.sl-sn-full i:nth-child(2){ background:#FF5CA0; }
.sl-sn-full i:nth-child(3){ background:#20B486; }
</style>

<div class="sl-rd-fade">
  <input type="radio" name="slrf" id="slrfa" checked>
  <input type="radio" name="slrf" id="slrfb">
  <div class="win"><i class="ia"></i><i class="ib"></i></div>
  <div class="btns"><label for="slrfa">山</label><label for="slrfb">海</label></div>
</div>

<style>
.sl-rd-fade input{ display:none; }
.sl-rd-fade .win{
  position:relative; width:230px; height:120px;
  border-radius:12px; overflow:hidden; border:2px solid #191F2E;
}
.sl-rd-fade i{
  position:absolute; inset:0;
  display:grid; place-items:center;
  font-size:40px; font-style:normal;
  opacity:0; transition:opacity .6s ease;
}
.sl-rd-fade .ia{ background:url(03.jpg) center/cover; }
.sl-rd-fade .ib{ background:url(01.jpg) center/cover; }
#slrfa:checked ~ .win .ia{ opacity:1; }
#slrfb:checked ~ .win .ib{ opacity:1; }
.sl-rd-fade .btns{ display:flex; gap:8px; margin-top:9px; }
.sl-rd-fade .btns label{
  flex:1; text-align:center; padding:7px 18px;
  font-size:13px; font-weight:700; cursor:pointer;
  border:2px solid #191F2E; border-radius:999px; background:#fff;
  transition:background .25s;
}
#slrfa:checked ~ .btns label[for="slrfa"],
#slrfb:checked ~ .btns label[for="slrfb"]{ background:#FFCF3F; }
</style>

<div class="sl-mq-lane">
  <div class="row r1"><span>■ ■ ■ ■ ■ ■ ■ ■ ■ ■ ■ ■ </span><span>■ ■ ■ ■ ■ ■ ■ ■ ■ ■ ■ ■ </span></div>
  <div class="row r2"><span>● ● ● ● ● ● ● ● ● ● ● ● </span><span>● ● ● ● ● ● ● ● ● ● ● ● </span></div>
  <div class="row r3"><span>▲ ▲ ▲ ▲ ▲ ▲ ▲ ▲ ▲ ▲ ▲ ▲ </span><span>▲ ▲ ▲ ▲ ▲ ▲ ▲ ▲ ▲ ▲ ▲ ▲ </span></div>
</div>

<style>
.sl-mq-lane{ width:100%; max-width:280px; overflow:hidden; }
.sl-mq-lane .row{ display:flex; width:max-content; }
.sl-mq-lane span{
  white-space:nowrap; font-size:18px; line-height:1.7;
}
/* 速度差でパララックス感が出る */
.sl-mq-lane .r1{ color:#3A46E8; animation:sl-lane-go 7s linear infinite; }
.sl-mq-lane .r2{ color:#FF5CA0; animation:sl-lane-go 11s linear infinite; }
.sl-mq-lane .r3{ color:#FFCF3F; animation:sl-lane-go 16s linear infinite; }
@keyframes sl-lane-go{ to{ transform:translateX(-50%); } }
</style>

<div class="sl-ms-dots">
  <i></i><b></b><i></i><b></b><i></i><b></b><i></i>
</div>

<style>
.sl-ms-dots{ display:flex; align-items:center; }
.sl-ms-dots i{
  width:16px; height:16px; border-radius:50%;
  background:#E7E4DA; border:2px solid #C9CBD4;
  animation:sl-dots-on 6s linear infinite;
}
.sl-ms-dots b{
  width:42px; height:3px; background:#E7E4DA;
  position:relative; overflow:hidden;
}
.sl-ms-dots b::after{
  content:""; position:absolute; inset:0;
  background:#3A46E8; transform:scaleX(0); transform-origin:left;
  animation:sl-dots-line 6s linear infinite;
}
.sl-ms-dots i:nth-of-type(1){ animation-delay:0s; }
.sl-ms-dots b:nth-of-type(1)::after{ animation-delay:.4s; }
.sl-ms-dots i:nth-of-type(2){ animation-delay:1.5s; }
.sl-ms-dots b:nth-of-type(2)::after{ animation-delay:1.9s; }
.sl-ms-dots i:nth-of-type(3){ animation-delay:3s; }
.sl-ms-dots b:nth-of-type(3)::after{ animation-delay:3.4s; }
.sl-ms-dots i:nth-of-type(4){ animation-delay:4.5s; }
@keyframes sl-dots-on{
  0%{ background:#E7E4DA; border-color:#C9CBD4; transform:scale(1); }
  4%{ transform:scale(1.4); }
  8%,88%{ background:#3A46E8; border-color:#3A46E8; transform:scale(1); }
  95%,100%{ background:#E7E4DA; border-color:#C9CBD4; }
}
@keyframes sl-dots-line{
  0%{ transform:scaleX(0); }
  18%,88%{ transform:scaleX(1); }
  95%,100%{ transform:scaleX(0); }
}
</style>

<!-- ドット→線→ドットと順に灯すステップ演出 -->

<div class="sl-ms-flip360"><i></i></div>

<style>
.sl-ms-flip360{
  width:110px; height:110px;
  display:grid; place-items:center;
  border:2px dashed #C9CBD4; border-radius:14px;
}
.sl-ms-flip360 i{
  font-size:54px; font-style:normal;
  animation:sl-360-go 1.6s steps(1) infinite;
}
/* contentを差し替えてパラパラ漫画にする */
@keyframes sl-360-go{
  0%{ content:"🕐"; } 12.5%{ content:"🕑"; }
  25%{ content:"🕒"; } 37.5%{ content:"🕓"; }
  50%{ content:"🕔"; } 62.5%{ content:"🕕"; }
  75%{ content:"🕖"; } 87.5%{ content:"🕗"; }
}
.sl-ms-flip360 i::before{ content:"🕐"; animation:inherit; }
</style>

<!-- 実案件では連番画像をbackground-imageで差し替える(スプライトシート方式が定番) -->

<div class="sl-ms-pola">
  <i class="p1"></i><i class="p2"></i><i class="p3"></i>
</div>

<style>
.sl-ms-pola{
  position:relative; width:120px; height:120px; cursor:pointer;
}
.sl-ms-pola i{
  position:absolute; inset:0;
  display:grid; place-items:center;
  font-size:38px; font-style:normal;
  border:6px solid #fff; border-bottom-width:22px;
  border-radius:4px;
  box-shadow:0 4px 10px rgba(25,31,46,.25);
  transition:transform .45s cubic-bezier(.3,1.3,.4,1);
}
.sl-ms-pola .p1{ background:url(01.jpg) center/cover; transform:rotate(-4deg); }
.sl-ms-pola .p2{ background:url(02.jpg) center/cover; transform:rotate(3deg); }
.sl-ms-pola .p3{ background:url(03.jpg) center/cover; transform:rotate(-1deg); }
.sl-ms-pola:hover .p1{ transform:rotate(-16deg) translateX(-52px); }
.sl-ms-pola:hover .p2{ transform:rotate(1deg) translateY(-10px); }
.sl-ms-pola:hover .p3{ transform:rotate(15deg) translateX(52px); }
</style>

<!-- 重なった写真がホバーで扇形に広がる -->

<div class="sc-vi-up">
  <p class="hint">↓ この枠の中をスクロール</p>
  <div class="pad"></div>
  <div class="bx">BOX 1</div>
  <div class="bx">BOX 2</div>
  <div class="bx">BOX 3</div>
  <div class="bx">BOX 4</div>
  <div class="pad"></div>
</div>

<style>
.sc-vi-up{
  width:100%; max-width:270px; height:190px;
  overflow-y:auto; border:2px solid #191F2E;
  border-radius:12px; background:#fff;
}
.sc-vi-up .hint{
  padding:13px 14px; font-size:11.5px; color:#5A6072;
  border-bottom:1.5px dashed #E7E4DA; margin:0;
}
.sc-vi-up .bx{
  width:72%; height:64px; margin:64px auto;
  display:grid; place-items:center;
  border-radius:12px; color:#fff; font-weight:700; font-size:13px;
  animation:sc-vi-up-in linear both;
  animation-timeline:view();
  animation-range:entry 5% entry 85%;
}
.sc-vi-up .bx:nth-of-type(1){ background:#3A46E8; }
.sc-vi-up .bx:nth-of-type(2){ background:#FF5CA0; }
.sc-vi-up .bx:nth-of-type(3){ background:#20B486; }
.sc-vi-up .bx:nth-of-type(4){ background:#F59E0B; }
.sc-vi-up .pad{ height:60px; }
@keyframes sc-vi-up-in{
  from{ opacity:0; transform:translateY(46px); }
  to{ opacity:1; transform:none; filter:none;  }
}
</style>

<!-- animation-range:entryで「入ってくる間だけ」進行。animation-timelineはChrome/Edge対応。非対応ブラウザでは静的表示(最終状態)になる -->

<div class="sc-vi-dn">
  <p class="hint">↓ この枠の中をスクロール</p>
  <div class="pad"></div>
  <div class="bx">BOX 1</div>
  <div class="bx">BOX 2</div>
  <div class="bx">BOX 3</div>
  <div class="bx">BOX 4</div>
  <div class="pad"></div>
</div>

<style>
.sc-vi-dn{
  width:100%; max-width:270px; height:190px;
  overflow-y:auto; border:2px solid #191F2E;
  border-radius:12px; background:#fff;
}
.sc-vi-dn .hint{
  padding:13px 14px; font-size:11.5px; color:#5A6072;
  border-bottom:1.5px dashed #E7E4DA; margin:0;
}
.sc-vi-dn .bx{
  width:72%; height:64px; margin:64px auto;
  display:grid; place-items:center;
  border-radius:12px; color:#fff; font-weight:700; font-size:13px;
  animation:sc-vi-dn-in linear both;
  animation-timeline:view();
  animation-range:entry 5% entry 85%;
}
.sc-vi-dn .bx:nth-of-type(1){ background:#3A46E8; }
.sc-vi-dn .bx:nth-of-type(2){ background:#FF5CA0; }
.sc-vi-dn .bx:nth-of-type(3){ background:#20B486; }
.sc-vi-dn .bx:nth-of-type(4){ background:#F59E0B; }
.sc-vi-dn .pad{ height:60px; }
@keyframes sc-vi-dn-in{
  from{ opacity:0; transform:translateY(-90px); }
  to{ opacity:1; transform:none; filter:none;  }
}
</style>

<!-- animation-range:entryで「入ってくる間だけ」進行。animation-timelineはChrome/Edge対応。非対応ブラウザでは静的表示(最終状態)になる -->

<div class="sc-vi-lf">
  <p class="hint">↓ この枠の中をスクロール</p>
  <div class="pad"></div>
  <div class="bx">BOX 1</div>
  <div class="bx">BOX 2</div>
  <div class="bx">BOX 3</div>
  <div class="bx">BOX 4</div>
  <div class="pad"></div>
</div>

<style>
.sc-vi-lf{
  width:100%; max-width:270px; height:190px;
  overflow-y:auto; border:2px solid #191F2E;
  border-radius:12px; background:#fff;
}
.sc-vi-lf .hint{
  padding:13px 14px; font-size:11.5px; color:#5A6072;
  border-bottom:1.5px dashed #E7E4DA; margin:0;
}
.sc-vi-lf .bx{
  width:72%; height:64px; margin:64px auto;
  display:grid; place-items:center;
  border-radius:12px; color:#fff; font-weight:700; font-size:13px;
  animation:sc-vi-lf-in linear both;
  animation-timeline:view();
  animation-range:entry 5% entry 85%;
}
.sc-vi-lf .bx:nth-of-type(1){ background:#3A46E8; }
.sc-vi-lf .bx:nth-of-type(2){ background:#FF5CA0; }
.sc-vi-lf .bx:nth-of-type(3){ background:#20B486; }
.sc-vi-lf .bx:nth-of-type(4){ background:#F59E0B; }
.sc-vi-lf .pad{ height:60px; }
@keyframes sc-vi-lf-in{
  from{ opacity:0; transform:translateX(-60px); }
  to{ opacity:1; transform:none; filter:none;  }
}
</style>

<!-- animation-range:entryで「入ってくる間だけ」進行。animation-timelineはChrome/Edge対応。非対応ブラウザでは静的表示(最終状態)になる -->

<div class="sc-vi-rt">
  <p class="hint">↓ この枠の中をスクロール</p>
  <div class="pad"></div>
  <div class="bx">BOX 1</div>
  <div class="bx">BOX 2</div>
  <div class="bx">BOX 3</div>
  <div class="bx">BOX 4</div>
  <div class="pad"></div>
</div>

<style>
.sc-vi-rt{
  width:100%; max-width:270px; height:190px;
  overflow-y:auto; border:2px solid #191F2E;
  border-radius:12px; background:#fff;
}
.sc-vi-rt .hint{
  padding:13px 14px; font-size:11.5px; color:#5A6072;
  border-bottom:1.5px dashed #E7E4DA; margin:0;
}
.sc-vi-rt .bx{
  width:72%; height:64px; margin:64px auto;
  display:grid; place-items:center;
  border-radius:12px; color:#fff; font-weight:700; font-size:13px;
  animation:sc-vi-rt-in linear both;
  animation-timeline:view();
  animation-range:entry 5% entry 85%;
}
.sc-vi-rt .bx:nth-of-type(1){ background:#3A46E8; }
.sc-vi-rt .bx:nth-of-type(2){ background:#FF5CA0; }
.sc-vi-rt .bx:nth-of-type(3){ background:#20B486; }
.sc-vi-rt .bx:nth-of-type(4){ background:#F59E0B; }
.sc-vi-rt .pad{ height:60px; }
@keyframes sc-vi-rt-in{
  from{ opacity:0; transform:translateX(60px); }
  to{ opacity:1; transform:none; filter:none;  }
}
</style>

<!-- animation-range:entryで「入ってくる間だけ」進行。animation-timelineはChrome/Edge対応。非対応ブラウザでは静的表示(最終状態)になる -->

<div class="sc-vi-zi">
  <p class="hint">↓ この枠の中をスクロール</p>
  <div class="pad"></div>
  <div class="bx">BOX 1</div>
  <div class="bx">BOX 2</div>
  <div class="bx">BOX 3</div>
  <div class="bx">BOX 4</div>
  <div class="pad"></div>
</div>

<style>
.sc-vi-zi{
  width:100%; max-width:270px; height:190px;
  overflow-y:auto; border:2px solid #191F2E;
  border-radius:12px; background:#fff;
}
.sc-vi-zi .hint{
  padding:13px 14px; font-size:11.5px; color:#5A6072;
  border-bottom:1.5px dashed #E7E4DA; margin:0;
}
.sc-vi-zi .bx{
  width:72%; height:64px; margin:64px auto;
  display:grid; place-items:center;
  border-radius:12px; color:#fff; font-weight:700; font-size:13px;
  animation:sc-vi-zi-in linear both;
  animation-timeline:view();
  animation-range:entry 5% entry 85%;
}
.sc-vi-zi .bx:nth-of-type(1){ background:#3A46E8; }
.sc-vi-zi .bx:nth-of-type(2){ background:#FF5CA0; }
.sc-vi-zi .bx:nth-of-type(3){ background:#20B486; }
.sc-vi-zi .bx:nth-of-type(4){ background:#F59E0B; }
.sc-vi-zi .pad{ height:60px; }
@keyframes sc-vi-zi-in{
  from{ opacity:0; transform:scale(.5); }
  to{ opacity:1; transform:none; filter:none;  }
}
</style>

<!-- animation-range:entryで「入ってくる間だけ」進行。animation-timelineはChrome/Edge対応。非対応ブラウザでは静的表示(最終状態)になる -->

<div class="sc-vi-zo">
  <p class="hint">↓ この枠の中をスクロール</p>
  <div class="pad"></div>
  <div class="bx">BOX 1</div>
  <div class="bx">BOX 2</div>
  <div class="bx">BOX 3</div>
  <div class="bx">BOX 4</div>
  <div class="pad"></div>
</div>

<style>
.sc-vi-zo{
  width:100%; max-width:270px; height:190px;
  overflow-y:auto; border:2px solid #191F2E;
  border-radius:12px; background:#fff;
}
.sc-vi-zo .hint{
  padding:13px 14px; font-size:11.5px; color:#5A6072;
  border-bottom:1.5px dashed #E7E4DA; margin:0;
}
.sc-vi-zo .bx{
  width:72%; height:64px; margin:64px auto;
  display:grid; place-items:center;
  border-radius:12px; color:#fff; font-weight:700; font-size:13px;
  animation:sc-vi-zo-in linear both;
  animation-timeline:view();
  animation-range:entry 5% entry 85%;
}
.sc-vi-zo .bx:nth-of-type(1){ background:#3A46E8; }
.sc-vi-zo .bx:nth-of-type(2){ background:#FF5CA0; }
.sc-vi-zo .bx:nth-of-type(3){ background:#20B486; }
.sc-vi-zo .bx:nth-of-type(4){ background:#F59E0B; }
.sc-vi-zo .pad{ height:60px; }
@keyframes sc-vi-zo-in{
  from{ opacity:0; transform:scale(1.5); }
  to{ opacity:1; transform:none; filter:none;  }
}
</style>

<!-- animation-range:entryで「入ってくる間だけ」進行。animation-timelineはChrome/Edge対応。非対応ブラウザでは静的表示(最終状態)になる -->

<div class="sc-vi-bl">
  <p class="hint">↓ この枠の中をスクロール</p>
  <div class="pad"></div>
  <div class="bx">BOX 1</div>
  <div class="bx">BOX 2</div>
  <div class="bx">BOX 3</div>
  <div class="bx">BOX 4</div>
  <div class="pad"></div>
</div>

<style>
.sc-vi-bl{
  width:100%; max-width:270px; height:190px;
  overflow-y:auto; border:2px solid #191F2E;
  border-radius:12px; background:#fff;
}
.sc-vi-bl .hint{
  padding:13px 14px; font-size:11.5px; color:#5A6072;
  border-bottom:1.5px dashed #E7E4DA; margin:0;
}
.sc-vi-bl .bx{
  width:72%; height:64px; margin:64px auto;
  display:grid; place-items:center;
  border-radius:12px; color:#fff; font-weight:700; font-size:13px;
  animation:sc-vi-bl-in linear both;
  animation-timeline:view();
  animation-range:entry 5% entry 85%;
}
.sc-vi-bl .bx:nth-of-type(1){ background:#3A46E8; }
.sc-vi-bl .bx:nth-of-type(2){ background:#FF5CA0; }
.sc-vi-bl .bx:nth-of-type(3){ background:#20B486; }
.sc-vi-bl .bx:nth-of-type(4){ background:#F59E0B; }
.sc-vi-bl .pad{ height:60px; }
@keyframes sc-vi-bl-in{
  from{ opacity:.4; filter:blur(16px); transform:scale(1.06); }
  to{ opacity:1; transform:none; filter:none;  }
}
</style>

<!-- animation-range:entryで「入ってくる間だけ」進行。animation-timelineはChrome/Edge対応。非対応ブラウザでは静的表示(最終状態)になる -->

<div class="sc-vi-ro">
  <p class="hint">↓ この枠の中をスクロール</p>
  <div class="pad"></div>
  <div class="bx">BOX 1</div>
  <div class="bx">BOX 2</div>
  <div class="bx">BOX 3</div>
  <div class="bx">BOX 4</div>
  <div class="pad"></div>
</div>

<style>
.sc-vi-ro{
  width:100%; max-width:270px; height:190px;
  overflow-y:auto; border:2px solid #191F2E;
  border-radius:12px; background:#fff;
}
.sc-vi-ro .hint{
  padding:13px 14px; font-size:11.5px; color:#5A6072;
  border-bottom:1.5px dashed #E7E4DA; margin:0;
}
.sc-vi-ro .bx{
  width:72%; height:64px; margin:64px auto;
  display:grid; place-items:center;
  border-radius:12px; color:#fff; font-weight:700; font-size:13px;
  animation:sc-vi-ro-in linear both;
  animation-timeline:view();
  animation-range:entry 5% entry 85%;
}
.sc-vi-ro .bx:nth-of-type(1){ background:#3A46E8; }
.sc-vi-ro .bx:nth-of-type(2){ background:#FF5CA0; }
.sc-vi-ro .bx:nth-of-type(3){ background:#20B486; }
.sc-vi-ro .bx:nth-of-type(4){ background:#F59E0B; }
.sc-vi-ro .pad{ height:60px; }
@keyframes sc-vi-ro-in{
  from{ opacity:0; transform:rotate(-10deg) scale(.7); }
  to{ opacity:1; transform:none; filter:none;  }
}
</style>

<!-- animation-range:entryで「入ってくる間だけ」進行。animation-timelineはChrome/Edge対応。非対応ブラウザでは静的表示(最終状態)になる -->

<div class="sc-vi-fx">
  <p class="hint">↓ この枠の中をスクロール</p>
  <div class="pad"></div>
  <div class="bx">BOX 1</div>
  <div class="bx">BOX 2</div>
  <div class="bx">BOX 3</div>
  <div class="bx">BOX 4</div>
  <div class="pad"></div>
</div>

<style>
.sc-vi-fx{
  width:100%; max-width:270px; height:190px;
  overflow-y:auto; border:2px solid #191F2E;
  border-radius:12px; background:#fff;
}
.sc-vi-fx .hint{
  padding:13px 14px; font-size:11.5px; color:#5A6072;
  border-bottom:1.5px dashed #E7E4DA; margin:0;
}
.sc-vi-fx .bx{
  width:72%; height:64px; margin:64px auto;
  display:grid; place-items:center;
  border-radius:12px; color:#fff; font-weight:700; font-size:13px;
  animation:sc-vi-fx-in linear both;
  animation-timeline:view();
  animation-range:entry 5% entry 85%;
}
.sc-vi-fx .bx:nth-of-type(1){ background:#3A46E8; }
.sc-vi-fx .bx:nth-of-type(2){ background:#FF5CA0; }
.sc-vi-fx .bx:nth-of-type(3){ background:#20B486; }
.sc-vi-fx .bx:nth-of-type(4){ background:#F59E0B; }
.sc-vi-fx .pad{ height:60px; }
@keyframes sc-vi-fx-in{
  from{ opacity:0; transform:perspective(400px) rotateX(-88deg); transform-origin:center bottom; }
  to{ opacity:1; transform:none; filter:none;  }
}
</style>

<!-- animation-range:entryで「入ってくる間だけ」進行。animation-timelineはChrome/Edge対応。非対応ブラウザでは静的表示(最終状態)になる -->

<div class="sc-vi-sk">
  <p class="hint">↓ この枠の中をスクロール</p>
  <div class="pad"></div>
  <div class="bx">BOX 1</div>
  <div class="bx">BOX 2</div>
  <div class="bx">BOX 3</div>
  <div class="bx">BOX 4</div>
  <div class="pad"></div>
</div>

<style>
.sc-vi-sk{
  width:100%; max-width:270px; height:190px;
  overflow-y:auto; border:2px solid #191F2E;
  border-radius:12px; background:#fff;
}
.sc-vi-sk .hint{
  padding:13px 14px; font-size:11.5px; color:#5A6072;
  border-bottom:1.5px dashed #E7E4DA; margin:0;
}
.sc-vi-sk .bx{
  width:72%; height:64px; margin:64px auto;
  display:grid; place-items:center;
  border-radius:12px; color:#fff; font-weight:700; font-size:13px;
  animation:sc-vi-sk-in linear both;
  animation-timeline:view();
  animation-range:entry 5% entry 85%;
}
.sc-vi-sk .bx:nth-of-type(1){ background:#3A46E8; }
.sc-vi-sk .bx:nth-of-type(2){ background:#FF5CA0; }
.sc-vi-sk .bx:nth-of-type(3){ background:#20B486; }
.sc-vi-sk .bx:nth-of-type(4){ background:#F59E0B; }
.sc-vi-sk .pad{ height:60px; }
@keyframes sc-vi-sk-in{
  from{ opacity:0; transform:skewY(6deg) translateY(40px); }
  to{ opacity:1; transform:none; filter:none;  }
}
</style>

<!-- animation-range:entryで「入ってくる間だけ」進行。animation-timelineはChrome/Edge対応。非対応ブラウザでは静的表示(最終状態)になる -->

<div class="sc-vi-cc">
  <p class="hint">↓ この枠の中をスクロール</p>
  <div class="pad"></div>
  <div class="bx">BOX 1</div>
  <div class="bx">BOX 2</div>
  <div class="bx">BOX 3</div>
  <div class="bx">BOX 4</div>
  <div class="pad"></div>
</div>

<style>
.sc-vi-cc{
  width:100%; max-width:270px; height:190px;
  overflow-y:auto; border:2px solid #191F2E;
  border-radius:12px; background:#fff;
}
.sc-vi-cc .hint{
  padding:13px 14px; font-size:11.5px; color:#5A6072;
  border-bottom:1.5px dashed #E7E4DA; margin:0;
}
.sc-vi-cc .bx{
  width:72%; height:64px; margin:64px auto;
  display:grid; place-items:center;
  border-radius:12px; color:#fff; font-weight:700; font-size:13px;
  animation:sc-vi-cc-in linear both;
  animation-timeline:view();
  animation-range:entry 5% entry 85%;
}
.sc-vi-cc .bx:nth-of-type(1){ background:#3A46E8; }
.sc-vi-cc .bx:nth-of-type(2){ background:#FF5CA0; }
.sc-vi-cc .bx:nth-of-type(3){ background:#20B486; }
.sc-vi-cc .bx:nth-of-type(4){ background:#F59E0B; }
.sc-vi-cc .pad{ height:60px; }
@keyframes sc-vi-cc-in{
  from{ clip-path:circle(8% at 50% 50%); }
  to{ opacity:1; transform:none; filter:none; clip-path:circle(75% at 50% 50%); }
}
</style>

<!-- animation-range:entryで「入ってくる間だけ」進行。animation-timelineはChrome/Edge対応。非対応ブラウザでは静的表示(最終状態)になる -->

<div class="sc-vi-ci">
  <p class="hint">↓ この枠の中をスクロール</p>
  <div class="pad"></div>
  <div class="bx">BOX 1</div>
  <div class="bx">BOX 2</div>
  <div class="bx">BOX 3</div>
  <div class="bx">BOX 4</div>
  <div class="pad"></div>
</div>

<style>
.sc-vi-ci{
  width:100%; max-width:270px; height:190px;
  overflow-y:auto; border:2px solid #191F2E;
  border-radius:12px; background:#fff;
}
.sc-vi-ci .hint{
  padding:13px 14px; font-size:11.5px; color:#5A6072;
  border-bottom:1.5px dashed #E7E4DA; margin:0;
}
.sc-vi-ci .bx{
  width:72%; height:64px; margin:64px auto;
  display:grid; place-items:center;
  border-radius:12px; color:#fff; font-weight:700; font-size:13px;
  animation:sc-vi-ci-in linear both;
  animation-timeline:view();
  animation-range:entry 5% entry 85%;
}
.sc-vi-ci .bx:nth-of-type(1){ background:#3A46E8; }
.sc-vi-ci .bx:nth-of-type(2){ background:#FF5CA0; }
.sc-vi-ci .bx:nth-of-type(3){ background:#20B486; }
.sc-vi-ci .bx:nth-of-type(4){ background:#F59E0B; }
.sc-vi-ci .pad{ height:60px; }
@keyframes sc-vi-ci-in{
  from{ clip-path:inset(0 100% 0 0 round 12px); }
  to{ opacity:1; transform:none; filter:none; clip-path:inset(0 round 12px); }
}
</style>

<!-- animation-range:entryで「入ってくる間だけ」進行。animation-timelineはChrome/Edge対応。非対応ブラウザでは静的表示(最終状態)になる -->

<div class="sc-sc-bar">
  <i class="pg"></i>
  <p class="hint">↓ この枠の中をスクロール</p>
  <p class="tx">スクロールすると上のバーが伸びます。ページ全体で使う場合はbodyのスクロールに自動で紐づきます。</p>
  <p class="tx">JSのscrollイベントは不要。describeするだけ。</p>
  <p class="tx">これが新時代のスクロール連動です。</p>
</div>

<style>
.sc-sc-bar{
  width:100%; max-width:270px; height:190px;
  overflow-y:auto; border:2px solid #191F2E;
  border-radius:12px; background:#fff;
}
.sc-sc-bar .hint{
  padding:13px 14px; font-size:11.5px; color:#5A6072;
  border-bottom:1.5px dashed #E7E4DA; margin:0;
}
.sc-sc-bar .pg{
  position:sticky; top:0; z-index:2;
  display:block; height:6px;
  background:linear-gradient(90deg,#3A46E8,#FF5CA0);
  transform-origin:left;
  animation:sc-bar-go linear both;
  animation-timeline:scroll();   /* 最寄りのスクロールに連動 */
}
.sc-sc-bar .tx{ padding:38px 16px; font-size:13px; margin:0; }
@keyframes sc-bar-go{
  from{ transform:scaleX(0); }
  to{ transform:scaleX(1); }
}
</style>

<!-- animation-timelineはChrome/Edge対応。非対応ブラウザでは静的表示(最終状態)になる -->

<div class="sc-sc-ring">
  <i class="ring"></i>
  <p class="hint">↓ この枠の中をスクロール</p>
  <p class="tx">右上の円がスクロール量で塗られていきます。</p>
  <p class="tx">conic-gradientの角度を@propertyでアニメ可能にしてscroll()に接続。</p>
  <p class="tx">最後まで読むと一周!</p>
</div>

<style>
@property --sc-ring-a{
  syntax:"<percentage>"; initial-value:0%; inherits:false;
}
.sc-sc-ring{
  width:100%; max-width:270px; height:190px;
  overflow-y:auto; border:2px solid #191F2E;
  border-radius:12px; background:#fff;
}
.sc-sc-ring .hint{
  padding:13px 14px; font-size:11.5px; color:#5A6072;
  border-bottom:1.5px dashed #E7E4DA; margin:0;
}
.sc-sc-ring .ring{
  position:sticky; top:10px; z-index:2;
  float:right; margin-right:10px;
  width:34px; height:34px; border-radius:50%;
  background:conic-gradient(#20B486 var(--sc-ring-a), #E7E4DA 0);
  border:2px solid #191F2E;
  animation:sc-ring-go linear both;
  animation-timeline:scroll();
}
.sc-sc-ring .tx{ padding:44px 16px; font-size:13px; margin:0; }
@keyframes sc-ring-go{
  from{ --sc-ring-a:0%; }
  to{ --sc-ring-a:100%; }
}
</style>

<!-- animation-timelineはChrome/Edge対応。非対応ブラウザでは静的表示(最終状態)になる -->

<div class="sc-sc-pct">
  <i class="num"></i>
  <p class="hint">↓ この枠の中をスクロール</p>
  <p class="tx">数字がスクロール量に連動してカウントされます。</p>
  <p class="tx">@propertyで<integer>を登録し、counter()で表示するテクニック。</p>
  <p class="tx">JSゼロでこれができる時代。</p>
</div>

<style>
@property --sc-pct-n{
  syntax:"<integer>"; initial-value:0; inherits:false;
}
.sc-sc-pct{
  width:100%; max-width:270px; height:190px;
  overflow-y:auto; border:2px solid #191F2E;
  border-radius:12px; background:#fff;
}
.sc-sc-pct .hint{
  padding:13px 14px; font-size:11.5px; color:#5A6072;
  border-bottom:1.5px dashed #E7E4DA; margin:0;
}
.sc-sc-pct .num{
  position:sticky; top:10px; z-index:2;
  float:right; margin-right:10px;
  padding:5px 10px; border-radius:8px;
  background:#191F2E; color:#FFCF3F;
  font-family:"Space Grotesk",sans-serif;
  font-size:14px; font-weight:700; font-style:normal;
  counter-reset:pct var(--sc-pct-n);
  animation:sc-pct-go linear both;
  animation-timeline:scroll();
}
.sc-sc-pct .num::before{ content:counter(pct) "%"; }
.sc-sc-pct .tx{ padding:44px 16px; font-size:13px; margin:0; }
@keyframes sc-pct-go{
  from{ --sc-pct-n:0; }
  to{ --sc-pct-n:100; }
}
</style>

<!-- animation-timelineはChrome/Edge対応。非対応ブラウザでは静的表示(最終状態)になる -->

<div class="sc-sc-hue">
  <div class="bg">
    <p class="hint" style="border:none">↓ スクロールで空の色が変わる</p>
    <div class="sp"></div><div class="sp"></div><div class="sp"></div>
  </div>
</div>

<style>
.sc-sc-hue{
  width:100%; max-width:270px; height:190px;
  overflow-y:auto; border:2px solid #191F2E;
  border-radius:12px; background:#fff;
}
.sc-sc-hue .bg{
  min-height:300%;
  background:linear-gradient(#7cc4ff,#dff1ff);
  animation:sc-hue-go linear both;
  animation-timeline:scroll();
  padding:12px;
}
.sc-sc-hue .hint{ font-size:11.5px; color:rgba(25,31,46,.7); }
.sc-sc-hue .sp{ height:130px; }
@keyframes sc-hue-go{
  0%{ filter:hue-rotate(0deg) brightness(1); }
  100%{ filter:hue-rotate(250deg) brightness(.65); }
}
</style>

<!-- 昼→夜の演出などに。animation-timelineはChrome/Edge対応。非対応ブラウザでは静的表示(最終状態)になる -->

<div class="sc-sc-zoom">
  <div class="hero"><b>SCROLL DOWN</b></div>
  <p class="tx">ヒーロー画像がスクロールに合わせて縮小+角丸に。</p>
  <p class="tx">Apple製品ページ風の演出。</p>
</div>

<style>
.sc-sc-zoom{
  width:100%; max-width:270px; height:190px;
  overflow-y:auto; border:2px solid #191F2E;
  border-radius:12px; background:#fff;
}
.sc-sc-zoom .hero{
  position:sticky; top:0;
  height:120px; display:grid; place-items:center;
  background:url(01.jpg) center/cover;
  color:#fff; font-size:15px; letter-spacing:.1em;
  animation:sc-zoom-go linear both;
  animation-timeline:scroll();
  animation-range:0 160px;   /* 最初の160px分だけ */
}
.sc-sc-zoom .tx{ padding:56px 16px; font-size:13px; margin:0; position:relative; }
@keyframes sc-zoom-go{
  to{
    transform:scale(.82);
    border-radius:18px;
    box-shadow:0 12px 26px rgba(25,31,46,.3);
  }
}
</style>

<!-- animation-rangeを絞ると「最初だけ」反応する。animation-timelineはChrome/Edge対応。非対応ブラウザでは静的表示(最終状態)になる -->

<div class="sc-sc-gear">
  <i class="g">⚙️</i>
  <p class="hint">↓ この枠の中をスクロール</p>
  <div class="sp"></div><div class="sp"></div><div class="sp"></div>
</div>

<style>
.sc-sc-gear{
  width:100%; max-width:270px; height:190px;
  overflow-y:auto; border:2px solid #191F2E;
  border-radius:12px; background:#fff;
}
.sc-sc-gear .hint{
  padding:13px 14px; font-size:11.5px; color:#5A6072;
  border-bottom:1.5px dashed #E7E4DA; margin:0;
}
.sc-sc-gear .g{
  position:sticky; top:60px; z-index:2;
  display:block; width:fit-content; margin:0 auto;
  font-size:60px; font-style:normal; line-height:1;
  animation:sc-gear-go linear both;
  animation-timeline:scroll();
}
.sc-sc-gear .sp{ height:140px; }
@keyframes sc-gear-go{
  to{ transform:rotate(720deg); }
}
</style>

<!-- スクロール量=回転角。ダイヤルや文字盤にも応用可。animation-timelineはChrome/Edge対応。非対応ブラウザでは静的表示(最終状態)になる -->

<div class="sc-sc-para">
  <div class="scene">
    <i class="ly sky">☁️ ☁️</i>
    <i class="ly mt">🗻</i>
    <i class="ly tree">🌲🌲🌲</i>
    <b>PARALLAX</b>
  </div>
  <div class="tall"></div>
</div>

<style>
.sc-sc-para{
  width:100%; max-width:270px; height:190px;
  overflow-y:auto; border:2px solid #191F2E;
  border-radius:12px; background:#fff;
}
.sc-sc-para{ position:relative; }
.sc-sc-para .scene{
  position:sticky; top:0; height:190px; overflow:clip;
  background:linear-gradient(#bfe3ff,#eaf6ff);
}
.sc-sc-para .tall{ height:440px; }
.sc-sc-para .ly{
  position:absolute; left:0; right:0; text-align:center;
  font-style:normal;
  animation:linear both;
  animation-timeline:scroll();
}
/* 奥ほど小さく動かす=速度差でパララックス */
.sc-sc-para .sky{ top:16px; font-size:22px; animation-name:sc-para-slow; }
.sc-sc-para .mt{ top:52px; font-size:64px; animation-name:sc-para-mid; }
.sc-sc-para .tree{ bottom:8px; font-size:34px; animation-name:sc-para-fast; }
.sc-sc-para b{
  position:absolute; top:20px; left:0; right:0; text-align:center;
  font-family:"Space Grotesk",sans-serif;
  letter-spacing:.2em; color:rgba(25,31,46,.5);
}
@keyframes sc-para-slow{ to{ translate:0 -10px; } }
@keyframes sc-para-mid{ to{ translate:0 -75px; } }
@keyframes sc-para-fast{ to{ translate:0 -160px; } }
</style>

<!-- レイヤーごとに移動量を変えるだけ。animation-timelineはChrome/Edge対応。非対応ブラウザでは静的表示(最終状態)になる -->

<div class="sc-sc-fill">
  <p class="hint">↓ この枠の中をスクロール</p>
  <div class="sp"></div>
  <b class="t">スクロールに合わせて文字が読める色に染まっていく演出です。長文の見出しに使うと効果的。</b>
  <div class="sp"></div>
</div>

<style>
.sc-sc-fill{
  width:100%; max-width:270px; height:190px;
  overflow-y:auto; border:2px solid #191F2E;
  border-radius:12px; background:#fff;
}
.sc-sc-fill .hint{
  padding:13px 14px; font-size:11.5px; color:#5A6072;
  border-bottom:1.5px dashed #E7E4DA; margin:0;
}
.sc-sc-fill .sp{ height:150px; }
.sc-sc-fill .t{
  display:block; padding:0 18px;
  font-size:19px; font-weight:900; line-height:1.9;
  background:linear-gradient(90deg, #191F2E 50%, #D6D3C6 50%);
  background-size:200% 100%;
  background-position:100% 0;
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
  animation:sc-fill-go linear both;
  animation-timeline:view();
  animation-range:entry 60% cover 65%;
}
@keyframes sc-fill-go{
  to{ background-position:0 0; }
}
</style>

<!-- animation-timelineはChrome/Edge対応。非対応ブラウザでは静的表示(最終状態)になる -->

<div class="sc-sc-mask">
  <div class="scene"><i></i></div>
  <div class="tall"></div>
</div>

<style>
.sc-sc-mask{
  width:100%; max-width:270px; height:190px;
  overflow-y:auto; border:2px solid #191F2E;
  border-radius:12px; background:#fff;
}
.sc-sc-mask .scene{
  position:sticky; top:0; height:190px;
  display:grid; place-items:center;
}
.sc-sc-mask .tall{ height:330px; }
.sc-sc-mask i{
  display:grid; place-items:center;
  width:100%; height:100%;
  font-size:56px; font-style:normal;
  background:url(03.jpg) center/cover;
  clip-path:inset(42% 38% round 20px);
  animation:sc-mask-go linear both;
  animation-timeline:scroll();
}
@keyframes sc-mask-go{
  to{ clip-path:inset(0% 0% round 0px); }
}
</style>

<!-- 小窓→全面へ。動画セクションの導入に人気の演出。animation-timelineはChrome/Edge対応。非対応ブラウザでは静的表示(最終状態)になる -->

<div class="sc-sc-walker">
  <div class="track"><i class="man">🚶</i><b class="goal">🏁</b></div>
  <p class="hint">↓ この枠の中をスクロール</p>
  <div class="sp"></div><div class="sp"></div><div class="sp"></div>
</div>

<style>
.sc-sc-walker{
  width:100%; max-width:270px; height:190px;
  overflow-y:auto; border:2px solid #191F2E;
  border-radius:12px; background:#fff;
}
.sc-sc-walker .hint{
  padding:13px 14px; font-size:11.5px; color:#5A6072;
  border-bottom:1.5px dashed #E7E4DA; margin:0;
}
.sc-sc-walker .track{
  position:sticky; top:0; z-index:2;
  height:34px; background:#FFF8E1;
  border-bottom:2px dashed #E0C979;
}
.sc-sc-walker .man{
  position:absolute; left:4px; bottom:2px;
  font-size:22px; font-style:normal;
  animation:sc-walk-go linear both;
  animation-timeline:scroll();
}
.sc-sc-walker .goal{
  position:absolute; right:4px; bottom:2px; font-size:20px;
}
.sc-sc-walker .sp{ height:130px; }
@keyframes sc-walk-go{
  to{ left:calc(100% - 34px); }
}
</style>

<!-- 読了バーの遊び版。leftのアニメはtranslateにすると軽い。animation-timelineはChrome/Edge対応。非対応ブラウザでは静的表示(最終状態)になる -->

<div class="sc-st-shrink">
  <header>SITE LOGO</header>
  <p class="tx">下にスクロールするとヘッダーがコンパクトに。</p>
  <p class="tx">昔はJSでclassを付け外ししていた処理が、animation-rangeだけで済みます。</p>
  <p class="tx">戻ると元のサイズに。</p>
</div>

<style>
.sc-st-shrink{
  width:100%; max-width:270px; height:190px;
  overflow-y:auto; border:2px solid #191F2E;
  border-radius:12px; background:#fff;
}
.sc-st-shrink header{
  position:sticky; top:0; z-index:2;
  display:flex; align-items:center;
  height:64px; padding:0 16px;
  background:#191F2E; color:#fff;
  font-family:"Space Grotesk",sans-serif;
  font-size:19px; font-weight:700; letter-spacing:.06em;
  animation:sc-shrink-go linear both;
  animation-timeline:scroll();
  animation-range:0 120px;
}
.sc-st-shrink .tx{ padding:50px 16px; font-size:13px; margin:0; }
@keyframes sc-shrink-go{
  to{
    height:36px; font-size:13px;
    background:rgba(25,31,46,.92);
    box-shadow:0 4px 14px rgba(25,31,46,.35);
  }
}
</style>

<!-- animation-timelineはChrome/Edge対応。非対応ブラウザでは静的表示(最終状態)になる -->

<div class="sc-st-stack">
  <p class="hint">↓ この枠の中をスクロール</p>
  <div class="cd c1">CARD 1</div>
  <div class="cd c2">CARD 2</div>
  <div class="cd c3">CARD 3</div>
  <div class="pad"></div>
</div>

<style>
.sc-st-stack{
  width:100%; max-width:270px; height:190px;
  overflow-y:auto; border:2px solid #191F2E;
  border-radius:12px; background:#fff;
}
.sc-st-stack .hint{
  padding:13px 14px; font-size:11.5px; color:#5A6072;
  border-bottom:1.5px dashed #E7E4DA; margin:0;
}
.sc-st-stack .cd{
  position:sticky; top:14px;   /* ★ これだけで重なっていく */
  height:130px; margin:16px 14px;
  display:grid; place-items:center;
  border-radius:14px; border:2px solid #191F2E;
  color:#fff; font-weight:700; letter-spacing:.08em;
}
.sc-st-stack .c1{ background:#3A46E8; }
.sc-st-stack .c2{ background:#FF5CA0; top:22px; }
.sc-st-stack .c3{ background:#20B486; top:30px; }
.sc-st-stack .pad{ height:80px; }
</style>

<!-- position:stickyのtopを少しずつずらすだけの完全ピュアCSS -->

<div class="sc-st-stacksc">
  <p class="hint">↓ この枠の中をスクロール</p>
  <div class="cd c1">CARD 1</div>
  <div class="cd c2">CARD 2</div>
  <div class="cd c3">CARD 3</div>
  <div class="pad"></div>
</div>

<style>
.sc-st-stacksc{
  width:100%; max-width:270px; height:190px;
  overflow-y:auto; border:2px solid #191F2E;
  border-radius:12px; background:#fff;
}
.sc-st-stacksc .hint{
  padding:13px 14px; font-size:11.5px; color:#5A6072;
  border-bottom:1.5px dashed #E7E4DA; margin:0;
}
.sc-st-stacksc .cd{
  position:sticky; top:16px;
  height:130px; margin:16px 14px;
  display:grid; place-items:center;
  border-radius:14px; border:2px solid #191F2E;
  color:#fff; font-weight:700;
  /* 次のカードに覆われる時に縮んで沈む */
  animation:sc-sink-go linear both;
  animation-timeline:view();
  animation-range:exit-crossing 0% exit-crossing 90%;
}
.sc-st-stacksc .c1{ background:#3A46E8; }
.sc-st-stacksc .c2{ background:#FF5CA0; }
.sc-st-stacksc .c3{ background:#20B486; animation:none; }
.sc-st-stacksc .pad{ height:90px; }
@keyframes sc-sink-go{
  to{ transform:scale(.86); filter:brightness(.6); }
}
</style>

<!-- view()のexit-crossingで「覆われていく間」を検知。animation-timelineはChrome/Edge対応。非対応ブラウザでは静的表示(最終状態)になる -->

<div class="sc-st-title">
  <section><h5>あ行</h5><p>あさひ / いろは / うたげ</p><p>えがお / おと</p></section>
  <section><h5>か行</h5><p>かえで / きらら / くるみ</p><p>けやき / ことり</p></section>
  <section><h5>さ行</h5><p>さくら / しずく / すみれ</p><p>せせらぎ / そら</p></section>
</div>

<style>
.sc-st-title{
  width:100%; max-width:270px; height:190px;
  overflow-y:auto; border:2px solid #191F2E;
  border-radius:12px; background:#fff;
}
.sc-st-title h5{
  position:sticky; top:0;    /* 次の見出しに押し出される */
  margin:0; padding:8px 16px;
  background:#FFCF3F; border-block:1.5px solid #191F2E;
  font-size:13px;
}
.sc-st-title p{ padding:20px 16px; font-size:13px; margin:0; }
</style>

<!-- iOSの連絡先リスト風。stickyは親セクションの端で自然に押し出される -->

<div class="sc-st-horiz">
  <div class="pin"><div class="row">
    <i>01</i><i>02</i><i>03</i>
  </div></div>
  <div class="tall"></div>
</div>

<style>
.sc-st-horiz{
  width:100%; max-width:270px; height:190px;
  overflow-y:auto; border:2px solid #191F2E;
  border-radius:12px; background:#fff;
}
.sc-st-horiz{ position:relative; }
.sc-st-horiz .pin{
  position:sticky; top:0; height:190px; overflow:clip   /* hiddenだとスクロールコンテナ扱いになりtimelineが壊れる */;
}
.sc-st-horiz .tall{ height:380px; }
.sc-st-horiz .row{
  display:flex; height:100%; width:300%;
  animation:sc-horiz-go linear both;
  animation-timeline:scroll();
}
.sc-st-horiz i{
  width:calc(100% / 3);
  display:grid; place-items:center;
  font-family:"Space Grotesk",sans-serif;
  font-size:44px; font-weight:700; font-style:normal; color:#fff;
}
.sc-st-horiz i:nth-child(1){ background:#3A46E8; }
.sc-st-horiz i:nth-child(2){ background:#FF5CA0; }
.sc-st-horiz i:nth-child(3){ background:#20B486; }
@keyframes sc-horiz-go{
  to{ transform:translateX(-66.666%); }
}
</style>

<!-- GSAPの定番演出「横ピン」がCSSだけに。animation-timelineはChrome/Edge対応。非対応ブラウザでは静的表示(最終状態)になる -->

<div class="sc-st-snap">
  <section class="s1">SECTION 1</section>
  <section class="s2">SECTION 2</section>
  <section class="s3">SECTION 3</section>
</div>

<style>
.sc-st-snap{
  width:100%; max-width:270px; height:190px;
  overflow-y:auto; border:2px solid #191F2E;
  border-radius:12px; background:#fff;
}
.sc-st-snap{
  scroll-snap-type:y mandatory;
}
.sc-st-snap section{
  height:100%;
  display:grid; place-items:center;
  scroll-snap-align:start;
  font-family:"Space Grotesk",sans-serif;
  font-weight:700; letter-spacing:.1em; color:#fff;
}
.sc-st-snap .s1{ background:#191F2E; }
.sc-st-snap .s2{ background:#3A46E8; }
.sc-st-snap .s3{ background:#FF5CA0; }
</style>

<!-- 1画面ずつピタッと止まるページ。実サイトはhtml側に指定 -->

<div class="sc-st-footrev">
  <div class="cover">
    <p class="hint" style="border:none">↓ 最後までスクロール</p>
    <div class="sp"></div>
    <p class="tx">コンテンツの下に…</p>
    <div class="sp"></div>
  </div>
  <footer>FOOTER<br><span>© 2026 CSS ANIM LAB</span></footer>
</div>

<style>
.sc-st-footrev{
  width:100%; max-width:270px; height:190px;
  overflow-y:auto; border:2px solid #191F2E;
  border-radius:12px; background:#fff;
}
.sc-st-footrev .cover{
  position:relative; z-index:1;
  background:#fff;
  box-shadow:0 18px 24px rgba(25,31,46,.28);
  padding:12px;
}
.sc-st-footrev .hint{ font-size:11.5px; color:#5A6072; }
.sc-st-footrev .sp{ height:110px; }
.sc-st-footrev .tx{ font-size:13px; font-weight:700; }
/* フッターを下に貼り付けてコンテンツが持ち上がるように見せる */
.sc-st-footrev footer{
  position:sticky; bottom:0; z-index:0;
  height:120px; margin-top:-10px;
  display:grid; place-content:center; text-align:center;
  background:#191F2E; color:#FFCF3F;
  font-family:"Space Grotesk",sans-serif; font-weight:700;
}
.sc-st-footrev footer span{ font-size:10px; color:#9aa0b4; }
</style>

<!-- カーテンリベール。z-indexとstickyの組み合わせ -->

<div class="sc-st-note">
  <div class="grid">
    <aside>📌 ここは<br>ずっと<br>ついてくる</aside>
    <div class="body">
      <p>本文が長くても…</p><p>サイドの要素は…</p><p>stickyで追従します。</p><p>目次やCTAに最適。</p><p>親の端で止まるのも良い仕様。</p>
    </div>
  </div>
</div>

<style>
.sc-st-note{
  width:100%; max-width:270px; height:190px;
  overflow-y:auto; border:2px solid #191F2E;
  border-radius:12px; background:#fff;
}
.sc-st-note .grid{
  display:grid; grid-template-columns:88px 1fr;
  gap:12px; padding:12px;
}
.sc-st-note aside{
  position:sticky; top:12px;
  height:fit-content;
  padding:10px; border-radius:10px;
  background:#FFF3D6; border:1.5px solid #F59E0B;
  font-size:11px; font-weight:700; line-height:1.6;
}
.sc-st-note .body p{
  padding:26px 0; margin:0; font-size:13px;
  border-bottom:1px dashed #E7E4DA;
}
</style>

<!-- サイドバー追従はJS不要、position:sticky一択 -->

<div class="sc-vw-timeline">
  <p class="hint">↓ この枠の中をスクロール</p>
  <div class="tl">
    <i class="line"></i>
    <div class="ev"><b>2019</b>創業</div>
    <div class="ev"><b>2022</b>法人化</div>
    <div class="ev"><b>2024</b>移転</div>
    <div class="ev"><b>2026</b>10名体制へ</div>
  </div>
</div>

<style>
.sc-vw-timeline{
  width:100%; max-width:270px; height:190px;
  overflow-y:auto; border:2px solid #191F2E;
  border-radius:12px; background:#fff;
}
.sc-vw-timeline .hint{
  padding:13px 14px; font-size:11.5px; color:#5A6072;
  border-bottom:1.5px dashed #E7E4DA; margin:0;
}
.sc-vw-timeline .tl{ position:relative; padding:20px 16px 30px 44px; }
.sc-vw-timeline .line{
  position:absolute; left:24px; top:24px; bottom:30px;
  width:3px; background:#3A46E8; border-radius:2px;
  transform-origin:top;
  animation:sc-tl-line linear both;
  animation-timeline:scroll();
}
.sc-vw-timeline .ev{
  position:relative; padding:18px 0;
  font-size:13px;
  animation:sc-tl-ev linear both;
  animation-timeline:view();
  animation-range:entry 10% entry 80%;
}
.sc-vw-timeline .ev b{
  display:block;
  font-family:"Space Grotesk",sans-serif; color:#3A46E8;
}
.sc-vw-timeline .ev::before{
  content:""; position:absolute; left:-26px; top:24px;
  width:13px; height:13px; border-radius:50%;
  background:#FFCF3F; border:2.5px solid #3A46E8;
}
@keyframes sc-tl-line{ from{ transform:scaleY(0); } }
@keyframes sc-tl-ev{ from{ opacity:0; translate:16px 0; } }
</style>

<!-- 沿革ページの鉄板演出。animation-timelineはChrome/Edge対応。非対応ブラウザでは静的表示(最終状態)になる -->

<div class="sc-vw-zigzag">
  <p class="hint">↓ この枠の中をスクロール</p>
  <div class="pad"></div>
  <div class="it"><i></i><p>左から登場するブロック</p></div>
  <div class="it"><i></i><p>右から登場するブロック</p></div>
  <div class="it"><i></i><p>また左から</p></div>
  <div class="pad"></div>
</div>

<style>
.sc-vw-zigzag{
  width:100%; max-width:270px; height:190px;
  overflow-y:auto; border:2px solid #191F2E;
  border-radius:12px; background:#fff;
}
.sc-vw-zigzag .hint{
  padding:13px 14px; font-size:11.5px; color:#5A6072;
  border-bottom:1.5px dashed #E7E4DA; margin:0;
}
.sc-vw-zigzag .pad{ height:60px; }
.sc-vw-zigzag .it{
  display:flex; gap:12px; align-items:center;
  margin:44px 14px;
  animation:linear both;
  animation-timeline:view();
  animation-range:entry 5% entry 85%;
}
.sc-vw-zigzag .it:nth-of-type(odd){ animation-name:sc-zz-l; }
.sc-vw-zigzag .it:nth-of-type(even){
  animation-name:sc-zz-r; flex-direction:row-reverse;
}
.sc-vw-zigzag i{
  flex:none; display:grid; place-items:center;
  width:64px; height:52px; font-size:22px; font-style:normal;
  border-radius:9px; background:url(01.jpg) center/cover;
}
.sc-vw-zigzag p{ font-size:12.5px; font-weight:700; margin:0; }
@keyframes sc-zz-l{ from{ opacity:0; translate:-46px 0; } }
@keyframes sc-zz-r{ from{ opacity:0; translate:46px 0; } }
</style>

<!-- animation-timelineはChrome/Edge対応。非対応ブラウザでは静的表示(最終状態)になる -->

<div class="sc-vw-count">
  <p class="hint">↓ この枠の中をスクロール</p>
  <div class="pad"></div>
  <div class="nums">
    <div class="n a"><i></i><b>実績</b></div>
    <div class="n b"><i></i><b>顧客</b></div>
  </div>
  <div class="pad"></div>
</div>

<style>
/* inherits:trueにしないと子要素のcounter-resetからvar()が見えない */
@property --sc-cnt-a{ syntax:"<integer>"; initial-value:0; inherits:true; }
@property --sc-cnt-b{ syntax:"<integer>"; initial-value:0; inherits:true; }
.sc-vw-count{
  width:100%; max-width:270px; height:190px;
  overflow-y:auto; border:2px solid #191F2E;
  border-radius:12px; background:#fff;
}
.sc-vw-count .hint{
  padding:13px 14px; font-size:11.5px; color:#5A6072;
  border-bottom:1.5px dashed #E7E4DA; margin:0;
}
.sc-vw-count .pad{ height:150px; }
.sc-vw-count .nums{ display:flex; gap:14px; justify-content:center; }
.sc-vw-count .n{
  text-align:center; padding:14px 20px;
  border:2px solid #191F2E; border-radius:12px; background:#FFF8E1;
}
.sc-vw-count .n i{
  font-family:"Space Grotesk",sans-serif;
  font-size:30px; font-weight:700; font-style:normal; color:#3A46E8;
}
.sc-vw-count .n b{ display:block; font-size:11px; }
.sc-vw-count .a{
  animation:sc-cnt-a linear both;
  animation-timeline:view();
  animation-range:entry 30% entry 100%;
}
.sc-vw-count .a i::before{
  content:counter(na); counter-reset:na var(--sc-cnt-a);
}
.sc-vw-count .a i::after{ content:"+"; color:#FF5CA0; }
.sc-vw-count .b{
  animation:sc-cnt-b linear both;
  animation-timeline:view();
  animation-range:entry 30% entry 100%;
}
.sc-vw-count .b i::before{
  content:counter(nb); counter-reset:nb var(--sc-cnt-b);
}
.sc-vw-count .b i::after{ content:"社"; font-size:14px; }
@keyframes sc-cnt-a{ from{ --sc-cnt-a:0; } to{ --sc-cnt-a:250; } }
@keyframes sc-cnt-b{ from{ --sc-cnt-b:0; } to{ --sc-cnt-b:48; } }
</style>

<!-- JS版カウントアップの完全CSS化。--sc-cnt-*の値を実績数に。animation-timelineはChrome/Edge対応。非対応ブラウザでは静的表示(最終状態)になる -->

<div class="sc-vw-curtain">
  <p class="hint">↓ この枠の中をスクロール</p>
  <div class="pad"></div>
  <div class="fr"><i></i><b class="l"></b><b class="r"></b></div>
  <div class="pad"></div>
</div>

<style>
.sc-vw-curtain{
  width:100%; max-width:270px; height:190px;
  overflow-y:auto; border:2px solid #191F2E;
  border-radius:12px; background:#fff;
}
.sc-vw-curtain .hint{
  padding:13px 14px; font-size:11.5px; color:#5A6072;
  border-bottom:1.5px dashed #E7E4DA; margin:0;
}
.sc-vw-curtain .pad{ height:150px; }
.sc-vw-curtain .fr{
  position:relative; overflow:clip;
  width:80%; height:110px; margin:0 auto;
  border-radius:12px; border:2px solid #191F2E;
}
.sc-vw-curtain i{
  display:grid; place-items:center;
  width:100%; height:100%; font-size:40px; font-style:normal;
  background:url(02.jpg) center/cover;
}
.sc-vw-curtain b{
  position:absolute; top:0; bottom:0; width:51%;
  background:#191F2E;
  animation:linear both;
  animation-timeline:view();
  animation-range:entry 20% entry 100%;
}
.sc-vw-curtain .l{ left:0; animation-name:sc-cur-open-l; }
.sc-vw-curtain .r{ right:0; animation-name:sc-cur-open-r; }
@keyframes sc-cur-open-l{ to{ translate:-101% 0; } }
@keyframes sc-cur-open-r{ to{ translate:101% 0; } }
</style>

<!-- animation-timelineはChrome/Edge対応。非対応ブラウザでは静的表示(最終状態)になる -->

<div class="sc-vw-stagger">
  <p class="hint">↓ この枠の中をスクロール</p>
  <div class="pad"></div>
  <div class="cards"><i>A</i><i>B</i><i>C</i></div>
  <div class="pad"></div>
</div>

<style>
.sc-vw-stagger{
  width:100%; max-width:270px; height:190px;
  overflow-y:auto; border:2px solid #191F2E;
  border-radius:12px; background:#fff;
}
.sc-vw-stagger .hint{
  padding:13px 14px; font-size:11.5px; color:#5A6072;
  border-bottom:1.5px dashed #E7E4DA; margin:0;
}
.sc-vw-stagger .pad{ height:150px; }
.sc-vw-stagger .cards{
  display:flex; gap:10px; justify-content:center;
}
.sc-vw-stagger i{
  display:grid; place-items:center;
  width:64px; height:84px;
  font-family:"Space Grotesk",sans-serif;
  font-weight:700; font-style:normal; color:#fff;
  border-radius:10px;
  animation:sc-stag-in linear both;
  animation-timeline:view();
}
/* animation-rangeをずらしてstagger */
.sc-vw-stagger i:nth-child(1){ background:#3A46E8; animation-range:entry 10% entry 60%; }
.sc-vw-stagger i:nth-child(2){ background:#FF5CA0; animation-range:entry 25% entry 75%; }
.sc-vw-stagger i:nth-child(3){ background:#20B486; animation-range:entry 40% entry 90%; }
@keyframes sc-stag-in{
  from{ opacity:0; translate:0 34px; scale:.7; }
}
</style>

<!-- delayの代わりにanimation-rangeをずらすのがコツ。animation-timelineはChrome/Edge対応。非対応ブラウザでは静的表示(最終状態)になる -->

<div class="sc-vw-chart">
  <p class="hint">↓ この枠の中をスクロール</p>
  <div class="pad"></div>
  <div class="ch">
    <i style="--h:45%"></i><i style="--h:70%"></i><i style="--h:55%"></i><i style="--h:92%"></i>
  </div>
  <div class="pad"></div>
</div>

<style>
.sc-vw-chart{
  width:100%; max-width:270px; height:190px;
  overflow-y:auto; border:2px solid #191F2E;
  border-radius:12px; background:#fff;
}
.sc-vw-chart .hint{
  padding:13px 14px; font-size:11.5px; color:#5A6072;
  border-bottom:1.5px dashed #E7E4DA; margin:0;
}
.sc-vw-chart .pad{ height:150px; }
.sc-vw-chart .ch{
  display:flex; gap:12px; align-items:flex-end;
  height:120px; width:fit-content; margin:0 auto;
  border-bottom:2.5px solid #191F2E; padding:0 10px;
}
.sc-vw-chart i{
  width:30px; height:var(--h);
  border-radius:6px 6px 0 0;
  background:linear-gradient(#5EE7FF,#3A46E8);
  transform-origin:bottom;
  animation:sc-chart-go linear both;
  animation-timeline:view();
  animation-range:entry 20% entry 90%;
}
@keyframes sc-chart-go{ from{ transform:scaleY(0); } }
</style>

<!-- 高さはCSS変数--hで指定。animation-timelineはChrome/Edge対応。非対応ブラウザでは静的表示(最終状態)になる -->

<div class="sc-vw-photo">
  <p class="hint">↓ この枠の中をスクロール</p>
  <div class="pad"></div>
  <div class="fr"><i></i></div>
  <div class="pad"></div>
</div>

<style>
.sc-vw-photo{
  width:100%; max-width:270px; height:190px;
  overflow-y:auto; border:2px solid #191F2E;
  border-radius:12px; background:#fff;
}
.sc-vw-photo .hint{
  padding:13px 14px; font-size:11.5px; color:#5A6072;
  border-bottom:1.5px dashed #E7E4DA; margin:0;
}
.sc-vw-photo .pad{ height:130px; }
.sc-vw-photo .fr{
  width:78%; height:120px; margin:0 auto;
  border-radius:12px; overflow:clip; border:2px solid #191F2E;
}
.sc-vw-photo i{
  display:grid; place-items:center;
  width:100%; height:100%;
  font-size:50px; font-style:normal;
  background:url(03.jpg) center/cover;
  animation:sc-photo-go linear both;
  animation-timeline:view();
  animation-range:cover 0% cover 100%;
}
/* 画面通過中ずっと動き続ける */
@keyframes sc-photo-go{
  from{ transform:scale(1.55) translateY(14%); }
  to{ transform:scale(1.55) translateY(-14%); }
}
</style>

<!-- cover範囲=見えている間ずっと。枠内で画像だけ動く視差。animation-timelineはChrome/Edge対応。非対応ブラウザでは静的表示(最終状態)になる -->

<div class="sc-vw-marker">
  <p class="hint">↓ この枠の中をスクロール</p>
  <div class="pad"></div>
  <p><b>大事なポイントその1がここに書いてある。</b></p>
  <p><b>スクロールすると順にマーカーが引かれる。</b></p>
  <p><b>視線誘導に効く小さな演出。</b></p>
  <div class="pad"></div>
</div>

<style>
.sc-vw-marker{
  width:100%; max-width:270px; height:190px;
  overflow-y:auto; border:2px solid #191F2E;
  border-radius:12px; background:#fff;
}
.sc-vw-marker .hint{
  padding:13px 14px; font-size:11.5px; color:#5A6072;
  border-bottom:1.5px dashed #E7E4DA; margin:0;
}
.sc-vw-marker .pad{ height:120px; }
.sc-vw-marker p{ padding:16px 18px; margin:0; font-size:13.5px; }
.sc-vw-marker b{
  font-weight:700;
  background:linear-gradient(transparent 58%, #FFCF3F 58%, #FFCF3F 92%, transparent 92%);
  background-size:0% 100%; background-repeat:no-repeat;
  animation:sc-mk-go linear both;
  animation-timeline:view();
  animation-range:entry 50% cover 45%;
}
@keyframes sc-mk-go{ to{ background-size:100% 100%; } }
</style>

<!-- animation-timelineはChrome/Edge対応。非対応ブラウザでは静的表示(最終状態)になる -->

<div class="sc-vw-avatar">
  <p class="hint">↓ この枠の中をスクロール</p>
  <div class="pad"></div>
  <div class="row"><i>🦊</i><i>🐻</i><i>🐸</i><i>🐰</i><i>🐼</i></div>
  <div class="pad"></div>
</div>

<style>
.sc-vw-avatar{
  width:100%; max-width:270px; height:190px;
  overflow-y:auto; border:2px solid #191F2E;
  border-radius:12px; background:#fff;
}
.sc-vw-avatar .hint{
  padding:13px 14px; font-size:11.5px; color:#5A6072;
  border-bottom:1.5px dashed #E7E4DA; margin:0;
}
.sc-vw-avatar .pad{ height:150px; }
.sc-vw-avatar .row{ display:flex; gap:8px; justify-content:center; }
.sc-vw-avatar i{
  display:grid; place-items:center;
  width:46px; height:46px; font-size:22px; font-style:normal;
  border-radius:50%; background:#fff; border:2.5px solid #191F2E;
  animation:sc-av-in linear both;
  animation-timeline:view();
}
.sc-vw-avatar i:nth-child(1){ animation-range:entry 5% entry 45%; }
.sc-vw-avatar i:nth-child(2){ animation-range:entry 15% entry 55%; }
.sc-vw-avatar i:nth-child(3){ animation-range:entry 25% entry 65%; }
.sc-vw-avatar i:nth-child(4){ animation-range:entry 35% entry 75%; }
.sc-vw-avatar i:nth-child(5){ animation-range:entry 45% entry 85%; }
@keyframes sc-av-in{
  from{ opacity:0; scale:0; rotate:-90deg; }
}
</style>

<!-- animation-timelineはChrome/Edge対応。非対応ブラウザでは静的表示(最終状態)になる -->

<div class="sc-vw-exit">
  <p class="hint">↓ この枠の中をスクロール</p>
  <div class="pad"></div>
  <div class="bx">上に抜ける時に消えていく</div>
  <div class="bx">登場も退場もCSSだけ</div>
  <div class="pad"></div>
</div>

<style>
.sc-vw-exit{
  width:100%; max-width:270px; height:190px;
  overflow-y:auto; border:2px solid #191F2E;
  border-radius:12px; background:#fff;
}
.sc-vw-exit .hint{
  padding:13px 14px; font-size:11.5px; color:#5A6072;
  border-bottom:1.5px dashed #E7E4DA; margin:0;
}
.sc-vw-exit .pad{ height:140px; }
.sc-vw-exit .bx{
  width:75%; margin:44px auto; padding:22px 14px;
  text-align:center; border-radius:12px;
  background:#191F2E; color:#fff;
  font-size:12.5px; font-weight:700;
  animation:sc-exit-go linear both;
  animation-timeline:view();
  animation-range:exit 0% exit 100%;   /* ★ 出ていく間 */
}
@keyframes sc-exit-go{
  to{ opacity:0; transform:translateY(-24px) scale(.9); }
}
</style>

<!-- entry(入場)とexit(退場)を組み合わせると出入り両対応。animation-timelineはChrome/Edge対応。非対応ブラウザでは静的表示(最終状態)になる -->

<div class="sc-cl-anchor">
  <nav><a href="#scan1">§1</a><a href="#scan2">§2</a><a href="#scan3">§3</a></nav>
  <section id="scan1"><h5>セクション1</h5>クリックで滑らかに移動します。</section>
  <section id="scan2"><h5>セクション2</h5>scroll-behavior:smoothの1行だけ。</section>
  <section id="scan3"><h5>セクション3</h5>scroll-margin-topで固定ヘッダー分の逃げも作れます。</section>
</div>

<style>
.sc-cl-anchor{
  width:100%; max-width:270px; height:190px;
  overflow-y:auto; border:2px solid #191F2E;
  border-radius:12px; background:#fff;
}
.sc-cl-anchor{
  scroll-behavior:smooth;   /* ★ これだけ */
}
.sc-cl-anchor nav{
  position:sticky; top:0; z-index:2;
  display:flex; gap:8px; padding:9px 12px;
  background:#191F2E;
}
.sc-cl-anchor nav a{
  color:#fff; font-size:12px; font-weight:700;
  padding:4px 12px; border-radius:99px;
  background:rgba(255,255,255,.14); text-decoration:none;
  transition:background .25s;
}
.sc-cl-anchor nav a:hover{ background:#3A46E8; }
.sc-cl-anchor section{
  min-height:150px; padding:16px; font-size:12.5px;
  scroll-margin-top:44px;   /* 固定ナビの高さ分 */
}
.sc-cl-anchor h5{ margin:0 0 6px; color:#3A46E8; }
.sc-cl-anchor section:nth-of-type(even){ background:#F2F0E8; }
</style>

<div class="sc-cl-scrollbar">
  <p class="hint">↓ この枠の中をスクロール</p>
  <p class="tx">スクロールバー自体もデザインの一部。</p>
  <p class="tx">scrollbar-color(標準)と::-webkit-scrollbar(旧)の二段構えが現状の実務解。</p>
  <p class="tx">太さはscrollbar-width / widthで。</p>
</div>

<style>
.sc-cl-scrollbar{
  width:100%; max-width:270px; height:190px;
  overflow-y:auto; border:2px solid #191F2E;
  border-radius:12px; background:#fff;
}
.sc-cl-scrollbar .hint{
  padding:13px 14px; font-size:11.5px; color:#5A6072;
  border-bottom:1.5px dashed #E7E4DA; margin:0;
}
.sc-cl-scrollbar{
  /* 標準プロパティ(Firefox/Chrome121+) */
  scrollbar-color:#FF5CA0 #F2F0E8;
}
/* WebKit系 */
.sc-cl-scrollbar::-webkit-scrollbar{ width:12px; }
.sc-cl-scrollbar::-webkit-scrollbar-track{
  background:#F2F0E8; border-radius:99px;
}
.sc-cl-scrollbar::-webkit-scrollbar-thumb{
  background:linear-gradient(#FF5CA0,#3A46E8);
  border-radius:99px;
  border:3px solid #F2F0E8;
}
.sc-cl-scrollbar .tx{ padding:36px 16px; font-size:13px; margin:0; }
</style>

<div class="sc-cl-shadow">
  <p class="tx">上下に「まだ続きがある」ことを示す影が出ます。</p>
  <p class="tx">端までスクロールすると影は消えます。</p>
  <p class="tx">background-attachmentのlocalとscrollを重ねる古典テク。</p>
  <p class="tx">JSでの出し分けは不要です。</p>
</div>

<style>
.sc-cl-shadow{
  width:100%; max-width:270px; height:190px;
  overflow-y:auto; border:2px solid #191F2E;
  border-radius:12px; background:#fff;
}
.sc-cl-shadow{
  background:
    /* 影を隠すカバー(コンテンツと一緒に動く) */
    linear-gradient(#fff 30%, transparent) local,
    linear-gradient(transparent, #fff 70%) bottom local,
    /* 影本体(枠に固定) */
    radial-gradient(farthest-side at top, rgba(25,31,46,.28), transparent) scroll,
    radial-gradient(farthest-side at bottom, rgba(25,31,46,.28), transparent) bottom scroll;
  background-repeat:no-repeat;
  background-size:100% 44px, 100% 44px, 100% 16px, 100% 16px;
  background-color:#fff;
}
.sc-cl-shadow .tx{ padding:30px 16px; font-size:13px; margin:0; }
</style>

<!-- Lea Verou考案の名作テクニック -->

<div class="sc-cl-btt">
  <p class="hint">↓ この枠の中をスクロール</p>
  <div class="sp"></div><div class="sp"></div>
  <b class="btn">↑</b>
</div>

<style>
.sc-cl-btt{
  width:100%; max-width:270px; height:190px;
  overflow-y:auto; border:2px solid #191F2E;
  border-radius:12px; background:#fff;
}
.sc-cl-btt .hint{
  padding:13px 14px; font-size:11.5px; color:#5A6072;
  border-bottom:1.5px dashed #E7E4DA; margin:0;
}
.sc-cl-btt .sp{ height:170px; }
.sc-cl-btt .btn{
  position:sticky; bottom:12px;
  display:grid; place-items:center;
  width:44px; height:44px; margin-left:auto; margin-right:12px;
  border-radius:50%;
  background:#3A46E8; color:#fff;
  font-size:19px; cursor:pointer;
  /* スクロールし始めたら現れる */
  opacity:0; scale:.4;
  animation:sc-btt-in linear both;
  animation-timeline:scroll();
  animation-range:60px 200px;
}
@keyframes sc-btt-in{
  to{ opacity:1; scale:1; }
}
</style>

<!-- 従来はJSでscrollY監視していた定番機能。animation-timelineはChrome/Edge対応。非対応ブラウザでは静的表示(最終状態)になる -->

<div class="sc-cl-snapnum">
  <div class="pages"><i>1 / 3</i><i>2 / 3</i><i>3 / 3</i></div>
  <p class="cap">→ 横にスワイプ/ドラッグ</p>
</div>

<style>
.sc-cl-snapnum .pages{
  display:flex; width:250px; overflow-x:auto;
  scroll-snap-type:x mandatory;
  border-radius:12px; border:2px solid #191F2E;
  scrollbar-width:none;
}
.sc-cl-snapnum .pages::-webkit-scrollbar{ display:none; }
.sc-cl-snapnum i{
  flex:none; width:100%; height:150px;
  display:grid; place-items:center;
  scroll-snap-align:start; scroll-snap-stop:always;
  font-family:"Space Grotesk",sans-serif;
  font-size:26px; font-weight:700; font-style:normal; color:#fff;
}
.sc-cl-snapnum i:nth-child(1){ background:#3A46E8; }
.sc-cl-snapnum i:nth-child(2){ background:#FF5CA0; }
.sc-cl-snapnum i:nth-child(3){ background:#20B486; }
.sc-cl-snapnum .cap{
  margin:8px 0 0; text-align:center;
  font-size:11px; color:#5A6072;
}
</style>

<div class="sc-vw-rows">
  <p class="hint">↓ この枠の中をスクロール</p>
  <div class="pad"></div>
  <ul>
    <li>✅ 項目その1</li><li>✅ 項目その2</li><li>✅ 項目その3</li><li>✅ 項目その4</li>
  </ul>
  <div class="pad"></div>
</div>

<style>
.sc-vw-rows{
  width:100%; max-width:270px; height:190px;
  overflow-y:auto; border:2px solid #191F2E;
  border-radius:12px; background:#fff;
}
.sc-vw-rows .hint{
  padding:13px 14px; font-size:11.5px; color:#5A6072;
  border-bottom:1.5px dashed #E7E4DA; margin:0;
}
.sc-vw-rows .pad{ height:130px; }
.sc-vw-rows ul{ list-style:none; margin:0; padding:0 16px; }
.sc-vw-rows li{
  padding:11px 14px; margin-bottom:8px;
  border:1.5px solid #191F2E; border-radius:9px;
  background:#fff; font-size:12.5px; font-weight:700;
  animation:sc-rows-in linear both;
  animation-timeline:view();
  animation-range:entry 10% entry 70%;
}
@keyframes sc-rows-in{
  from{ opacity:0; translate:-30px 0; }
}
</style>

<!-- 各行が自分のview()を持つので自然に時間差になる。animation-timelineはChrome/Edge対応。非対応ブラウザでは静的表示(最終状態)になる -->

<div class="sc-sc-card3d">
  <div class="pin"><i>💳</i></div>
  <div class="tall"></div>
</div>

<style>
.sc-sc-card3d{
  width:100%; max-width:270px; height:190px;
  overflow-y:auto; border:2px solid #191F2E;
  border-radius:12px; background:#fff;
}
.sc-sc-card3d .pin{
  position:sticky; top:0; height:190px;
  display:grid; place-items:center;
  perspective:700px;
}
.sc-sc-card3d .tall{ height:340px; }
.sc-sc-card3d i{
  display:grid; place-items:center;
  width:150px; height:95px;
  font-size:34px; font-style:normal;
  border-radius:14px;
  background:linear-gradient(135deg,#191F2E,#3A46E8);
  border:2px solid #191F2E;
  box-shadow:0 14px 26px rgba(25,31,46,.35);
  animation:sc-c3d-go linear both;
  animation-timeline:scroll();
}
@keyframes sc-c3d-go{
  to{ transform:rotateY(360deg) rotateX(12deg); }
}
</style>

<!-- 商品を回して見せる演出。スクロール=回転角。animation-timelineはChrome/Edge対応。非対応ブラウザでは静的表示(最終状態)になる -->

<div class="sc-vw-letters">
  <p class="hint">↓ この枠の中をスクロール</p>
  <div class="pad"></div>
  <b class="w"><i>H</i><i>E</i><i>L</i><i>L</i><i>O</i></b>
  <div class="pad"></div>
</div>

<style>
.sc-vw-letters{
  width:100%; max-width:270px; height:190px;
  overflow-y:auto; border:2px solid #191F2E;
  border-radius:12px; background:#fff;
}
.sc-vw-letters .hint{
  padding:13px 14px; font-size:11.5px; color:#5A6072;
  border-bottom:1.5px dashed #E7E4DA; margin:0;
}
.sc-vw-letters .pad{ height:150px; }
.sc-vw-letters .w{
  display:flex; gap:4px; justify-content:center;
  font-family:"Space Grotesk",sans-serif;
  font-size:38px; color:#191F2E;
}
.sc-vw-letters i{
  font-style:normal;
  animation:sc-ltr-in linear both;
  animation-timeline:view();
}
.sc-vw-letters i:nth-child(1){ animation-range:entry 0% entry 50%; }
.sc-vw-letters i:nth-child(2){ animation-range:entry 12% entry 62%; }
.sc-vw-letters i:nth-child(3){ animation-range:entry 24% entry 74%; }
.sc-vw-letters i:nth-child(4){ animation-range:entry 36% entry 86%; }
.sc-vw-letters i:nth-child(5){ animation-range:entry 48% entry 98%; }
@keyframes sc-ltr-in{
  from{ opacity:0; translate:0 40px; rotate:20deg; scale:.4; }
}
</style>

<!-- animation-timelineはChrome/Edge対応。非対応ブラウザでは静的表示(最終状態)になる -->

<div class="sc-sc-sidebar">
  <i class="vbar"></i>
  <p class="hint">↓ この枠の中をスクロール</p>
  <p class="tx">左端の縦バーが読了率を示します。</p>
  <p class="tx">ブログ記事などに。</p>
  <p class="tx">scaleYを縦に伸ばしているだけ。</p>
</div>

<style>
.sc-sc-sidebar{
  width:100%; max-width:270px; height:190px;
  overflow-y:auto; border:2px solid #191F2E;
  border-radius:12px; background:#fff;
}
.sc-sc-sidebar .hint{
  padding:13px 14px; font-size:11.5px; color:#5A6072;
  border-bottom:1.5px dashed #E7E4DA; margin:0;
}
.sc-sc-sidebar{ position:relative; }
.sc-sc-sidebar .vbar{
  position:sticky; top:0; float:left;
  display:block; width:6px; height:190px;
  background:linear-gradient(#FF5CA0,#3A46E8);
  transform-origin:top;
  animation:sc-vbar-go linear both;
  animation-timeline:scroll();
}
.sc-sc-sidebar .tx{ padding:42px 16px 42px 24px; font-size:13px; margin:0; }
@keyframes sc-vbar-go{
  from{ transform:scaleY(0); }
  to{ transform:scaleY(1); }
}
</style>

<!-- animation-timelineはChrome/Edge対応。非対応ブラウザでは静的表示(最終状態)になる -->

<div class="sc-sc-story">
  <div class="pin">
    <i class="a">🌅 朝</i><i class="b">🌇 夕方</i><i class="c">🌃 夜</i>
  </div>
  <div class="tall"></div>
</div>

<style>
.sc-sc-story{
  width:100%; max-width:270px; height:190px;
  overflow-y:auto; border:2px solid #191F2E;
  border-radius:12px; background:#fff;
}
.sc-sc-story .pin{
  position:sticky; top:0; height:190px;
  overflow:clip   /* hiddenだとスクロールコンテナ扱いになりtimelineが壊れる */;
}
.sc-sc-story .tall{ height:420px; }
.sc-sc-story i{
  position:absolute; inset:0;
  display:grid; place-items:center;
  font-size:26px; font-weight:700; font-style:normal; color:#fff;
  animation:linear both;
  animation-timeline:scroll();
}
.sc-sc-story .a{ background:linear-gradient(#ffd08a,#ff9a5c); }
.sc-sc-story .b{
  background:linear-gradient(#ff8a7a,#7B5CFF);
  opacity:0; animation-name:sc-story-b;
}
.sc-sc-story .c{
  background:linear-gradient(#2a3160,#0b1030);
  opacity:0; animation-name:sc-story-c;
}
/* スクロール区間ごとにクロスフェード */
@keyframes sc-story-b{
  0%,25%{ opacity:0; } 45%,60%{ opacity:1; } 80%,100%{ opacity:1; }
}
@keyframes sc-story-c{
  0%,60%{ opacity:0; } 85%,100%{ opacity:1; }
}
</style>

<!-- スクロールテリング(scrollytelling)の基本形。animation-timelineはChrome/Edge対応。非対応ブラウザでは静的表示(最終状態)になる -->

<div class="pr-skel">
  <i class="sk img"></i>
  <div class="tx"><i class="sk l1"></i><i class="sk l2"></i><i class="sk l3"></i></div>
</div>

<style>
.pr-skel{
  width:220px; padding:12px; border-radius:12px;
  background:#fff; border:1.5px solid #E7E4DA;
}
.pr-skel .sk{
  display:block; border-radius:7px; background:#EDEAE0;
  position:relative; overflow:hidden;
}
.pr-skel .sk::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(90deg, transparent,
    rgba(255,255,255,.85), transparent);
  transform:translateX(-100%);
  animation:pr-skel-go 1.4s infinite;
}
.pr-skel .img{ height:96px; margin-bottom:10px; }
.pr-skel .l1{ height:13px; width:85%; margin-bottom:7px; }
.pr-skel .l2{ height:13px; width:60%; margin-bottom:7px; }
.pr-skel .l3{ height:13px; width:72%; }
@keyframes pr-skel-go{ to{ transform:translateX(100%); } }
</style>

<!-- 読み込み中のガタつき防止に。実データと同じ寸法で作るのがコツ -->

<div class="pr-toast">✓ 保存しました</div>

<style>
.pr-toast{
  padding:12px 22px; border-radius:10px;
  background:#191F2E; color:#fff;
  font-size:13.5px; font-weight:700;
  box-shadow:0 8px 20px rgba(25,31,46,.3);
  animation:pr-toast-go 3.5s ease infinite;
}
@keyframes pr-toast-go{
  0%{ opacity:0; transform:translateY(16px) scale(.95); }
  8%,75%{ opacity:1; transform:none; }
  90%,100%{ opacity:0; transform:translateY(-8px); }
}
</style>

<!-- 実運用ではJSでclassを付けてanimationを1回再生 -->

<div class="pr-cookie">
  <input type="checkbox" id="prck">
  <div class="bar">
    <span>🍪 当サイトはCookieを使用します</span>
    <label for="prck">OK</label>
  </div>
</div>

<style>
.pr-cookie{ width:100%; max-width:290px; }
.pr-cookie input{ display:none; }
.pr-cookie .bar{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  padding:12px 14px; border-radius:12px;
  background:#191F2E; color:#fff; font-size:12px;
  animation:pr-ck-in .6s cubic-bezier(.3,1.3,.4,1) both;
  transition:opacity .4s, transform .4s;
}
.pr-cookie label{
  flex:none; padding:7px 18px; border-radius:8px;
  background:#FFCF3F; color:#191F2E;
  font-weight:700; cursor:pointer;
  transition:transform .2s;
}
.pr-cookie label:hover{ transform:scale(1.06); }
.pr-cookie input:checked ~ .bar{
  opacity:0; transform:translateY(20px); pointer-events:none;
}
@keyframes pr-ck-in{ from{ opacity:0; transform:translateY(24px); } }
</style>

<div class="pr-faq">
  <details open><summary>送料はいくらですか?</summary><p>全国一律550円。5,000円以上で無料です。</p></details>
  <details><summary>返品はできますか?</summary><p>未開封のみ到着後7日以内で承ります。</p></details>
</div>

<style>
.pr-faq{ width:100%; max-width:280px; }
.pr-faq details{
  border:1.5px solid #191F2E; border-radius:10px;
  background:#fff; margin-bottom:9px; overflow:hidden;
}
.pr-faq summary{
  padding:12px 14px; font-size:13px; font-weight:700;
  cursor:pointer; list-style:none;
  display:flex; justify-content:space-between; align-items:center;
}
.pr-faq summary::-webkit-details-marker{ display:none; }
.pr-faq summary::before{ content:"Q. "; color:#3A46E8; }
.pr-faq summary::after{
  content:"+"; color:#FF5CA0; font-size:18px;
  transition:transform .3s;
}
.pr-faq details[open] summary::after{ transform:rotate(45deg); }
.pr-faq p{
  margin:0; padding:0 14px 13px; font-size:12.5px; color:#5A6072;
  animation:pr-faq-in .3s ease;
}
.pr-faq p::before{ content:"A. "; color:#FF5CA0; font-weight:700; }
@keyframes pr-faq-in{ from{ opacity:0; translate:0 -5px; } }
</style>

<div class="pr-price">
  <b class="tag">人気No.1</b>
  <h4>スタンダード</h4>
  <p class="v">¥2,980<span>/月</span></p>
  <button>選択する</button>
</div>

<style>
.pr-price{
  position:relative; width:170px; padding:24px 18px 18px;
  text-align:center; border-radius:14px;
  background:#fff; border:2.5px solid #3A46E8;
  transition:transform .3s, box-shadow .3s;
}
.pr-price:hover{
  transform:translateY(-6px);
  box-shadow:0 14px 26px rgba(58,70,232,.25);
}
.pr-price .tag{
  position:absolute; top:-13px; left:50%; translate:-50% 0;
  padding:4px 14px; border-radius:99px;
  background:#FF5CA0; color:#fff; font-size:11px;
  white-space:nowrap;
  animation:pr-price-pop 2s ease-in-out infinite;
}
.pr-price h4{ margin:4px 0 6px; font-size:14px; }
.pr-price .v{
  margin:0 0 14px;
  font-family:"Space Grotesk",sans-serif;
  font-size:27px; font-weight:700; color:#3A46E8;
}
.pr-price .v span{ font-size:12px; color:#5A6072; }
.pr-price button{
  width:100%; padding:10px; border:none; border-radius:9px;
  background:#3A46E8; color:#fff; font-weight:700; cursor:pointer;
  transition:background .25s;
}
.pr-price button:hover{ background:#2732b8; }
@keyframes pr-price-pop{
  0%,100%{ transform:rotate(-2deg); } 50%{ transform:rotate(2deg) scale(1.06); }
}
</style>

<nav class="pr-badge-nav">
  <a>ホーム</a>
  <a class="has">メッセージ<i></i></a>
  <a class="has n">通知<i data-n="9"></i></a>
</nav>

<style>
.pr-badge-nav{ display:flex; gap:10px; }
.pr-badge-nav a{
  position:relative; padding:10px 16px;
  border:2px solid #191F2E; border-radius:10px;
  background:#fff; font-size:13px; font-weight:700; cursor:pointer;
  transition:background .2s;
}
.pr-badge-nav a:hover{ background:#FFF8E1; }
.pr-badge-nav .has i{
  position:absolute; top:-5px; right:-5px;
  width:12px; height:12px; border-radius:50%;
  background:#FF3B5C; border:2px solid #fff;
  animation:pr-dot-pulse 1.6s infinite;
}
.pr-badge-nav .n i{
  width:auto; height:auto; min-width:20px;
  padding:1px 5px; font-style:normal;
  color:#fff; font-size:10.5px; text-align:center;
}
.pr-badge-nav .n i::before{ content:attr(data-n); }
@keyframes pr-dot-pulse{
  0%,100%{ box-shadow:0 0 0 0 rgba(255,59,92,.5); }
  55%{ box-shadow:0 0 0 6px rgba(255,59,92,0); }
}
</style>

<div class="pr-search-sug">
  <input type="text" placeholder="🔍 商品を検索(クリック)">
  <div class="sug"><a>ワイヤレスイヤホン</a><a>ワイヤレス充電器</a><a>ワイドモニター</a></div>
</div>

<style>
.pr-search-sug{ position:relative; width:230px; }
.pr-search-sug input{
  width:100%; padding:12px 14px;
  border:2px solid #191F2E; border-radius:11px;
  font-size:13.5px; outline:none; font-family:inherit;
}
.pr-search-sug .sug{
  position:absolute; top:calc(100% + 6px); left:0; right:0; z-index:5;
  display:flex; flex-direction:column;
  background:#fff; border:2px solid #191F2E; border-radius:11px;
  padding:5px; box-shadow:0 8px 20px rgba(25,31,46,.15);
  opacity:0; translate:0 -8px; visibility:hidden;
  transition:all .3s ease;
}
/* 子(input)にフォーカスがある間だけ表示 */
.pr-search-sug:focus-within .sug{
  opacity:1; translate:0 0; visibility:visible;
}
.pr-search-sug .sug a{
  padding:9px 11px; border-radius:7px;
  font-size:13px; cursor:pointer;
}
.pr-search-sug .sug a:hover{ background:#F2F0E8; color:#3A46E8; }
</style>

<!-- :focus-within=中の要素がフォーカス中の親。JSレスUIの主砲 -->

<div class="pr-table-sticky">
  <table>
    <thead><tr><th>商品</th><th>価格</th></tr></thead>
    <tbody>
      <tr><td>りんご</td><td>¥150</td></tr>
      <tr><td>みかん</td><td>¥100</td></tr>
      <tr><td>ぶどう</td><td>¥480</td></tr>
      <tr><td>もも</td><td>¥350</td></tr>
      <tr><td>メロン</td><td>¥1,200</td></tr>
      <tr><td>いちご</td><td>¥600</td></tr>
    </tbody>
  </table>
</div>

<style>
.pr-table-sticky{
  width:230px; height:170px; overflow-y:auto;
  border:2px solid #191F2E; border-radius:11px; background:#fff;
}
.pr-table-sticky table{
  width:100%; border-collapse:collapse; font-size:13px;
}
.pr-table-sticky th{
  position:sticky; top:0;   /* ★ 見出し固定 */
  background:#191F2E; color:#fff;
  padding:9px 12px; text-align:left; font-size:12px;
}
.pr-table-sticky td{
  padding:10px 12px; border-bottom:1px solid #EDEAE0;
}
.pr-table-sticky tbody tr{ transition:background .2s; }
.pr-table-sticky tbody tr:hover{ background:#FFF8E1; }
</style>

<!-- theadではなくth自体にstickyを掛けるのがポイント -->

<div class="pr-compare">
  <div class="fr">
    <i class="bf">BEFORE</i>
    <i class="af">AFTER</i>
    <b class="knob"></b>
  </div>
  <input type="range" min="0" max="100" value="50">
</div>

<style>
.pr-compare{ position:relative; width:240px; }
.pr-compare .fr{
  position:relative; height:130px;
  border-radius:12px; overflow:hidden; border:2px solid #191F2E;
}
.pr-compare i{
  position:absolute; inset:0;
  display:grid; place-items:center;
  font-family:"Space Grotesk",sans-serif;
  font-weight:700; font-style:normal; letter-spacing:.1em; color:#fff;
}
.pr-compare .bf{ background:#5A6072; }
.pr-compare .af{
  background:url(01.jpg) center/cover;
  clip-path:inset(0 calc(100% - var(--x,50%)) 0 0);
}
.pr-compare .knob{
  position:absolute; top:0; bottom:0; left:var(--x,50%);
  width:3px; background:#fff; pointer-events:none;
  box-shadow:0 0 8px rgba(0,0,0,.45);
}
/* rangeを透明にして全面に重ねる */
.pr-compare input{
  position:absolute; inset:0; width:100%;
  opacity:0; cursor:ew-resize;
}
</style>

<script>
(function(){
  document.querySelectorAll('.pr-compare').forEach(function(w){
    var r = w.querySelector('input');
    r.addEventListener('input', function(){
      w.querySelector('.fr').style.setProperty('--x', r.value + '%');
    });
  });
})();
</script>

<!-- range入力+CSS変数。JSは変数を渡す3行だけ -->

<div class="pr-dark">
  <label class="sw"><input type="checkbox"> 🌙 ダークモード</label>
  <div class="page"><h5>プレビュー</h5><p>カード全体の配色が切り替わります。</p></div>
</div>

<style>
.pr-dark .sw{
  display:inline-flex; gap:8px; align-items:center;
  font-size:12.5px; font-weight:700; cursor:pointer;
  margin-bottom:10px;
}
.pr-dark .page{
  width:230px; padding:16px; border-radius:12px;
  background:#fff; color:#191F2E;
  border:2px solid #191F2E;
  transition:background .5s, color .5s;
}
.pr-dark .page h5{ margin:0 0 6px; }
.pr-dark .page p{ margin:0; font-size:12.5px; }
/* ★ :has()で「中のチェック状態」を親が知る */
.pr-dark:has(input:checked) .page{
  background:#191F2E; color:#F7F5EF;
  border-color:#5EE7FF;
}
</style>

<!-- 実サイトはhtml:has(#toggle:checked)で全体を切替(+localStorage保存はJS) -->

<form class="pr-valid-btn">
  <input type="text" placeholder="お名前" required>
  <input type="email" placeholder="メールアドレス" required>
  <button type="button">送信する</button>
</form>

<style>
.pr-valid-btn{
  display:flex; flex-direction:column; gap:9px; width:220px;
}
.pr-valid-btn input{
  padding:11px 13px; border:2px solid #191F2E;
  border-radius:9px; font-size:13px; outline:none; font-family:inherit;
}
.pr-valid-btn input:focus{ border-color:#3A46E8; }
.pr-valid-btn button{
  padding:12px; border:none; border-radius:9px;
  background:#C9CBD4; color:#fff;
  font-weight:700; font-size:13.5px;
  pointer-events:none;
  transition:background .4s, transform .2s;
}
/* ★ 全input有効=form自体が:validになる */
.pr-valid-btn:valid button{
  background:#20B486; pointer-events:auto; cursor:pointer;
}
.pr-valid-btn:valid button:hover{ transform:scale(1.03); }
</style>

<!-- form:valid疑似クラス=中の必須項目が全部有効な状態。メール形式まで判定される -->

<input class="pr-shake-invalid" type="email" placeholder="メール形式で入力→外をクリック" required>

<style>
.pr-shake-invalid{
  width:250px; padding:12px 14px;
  border:2px solid #191F2E; border-radius:10px;
  font-size:13px; outline:none; font-family:inherit;
}
/* ★ :user-invalid=ユーザーが触った後に不正 */
.pr-shake-invalid:user-invalid{
  border-color:#FF3B5C;
  background:#FFF0F3;
  animation:pr-shake-go .4s ease;
}
@keyframes pr-shake-go{
  20%{ translate:-7px 0; } 40%{ translate:6px 0; }
  60%{ translate:-4px 0; } 80%{ translate:3px 0; }
}
</style>

<!-- :invalidと違い入力後にだけ発火するので初期表示が赤くならない -->

<div class="pr-chat">
  <div class="msg them">こんにちは!</div>
  <div class="msg me">お世話になります 🙌</div>
  <div class="msg them typing"><i></i><i></i><i></i></div>
</div>

<style>
.pr-chat{
  display:flex; flex-direction:column; gap:8px;
  width:230px; padding:14px; border-radius:14px;
  background:#EDEAE0;
}
.pr-chat .msg{
  max-width:75%; padding:9px 13px;
  border-radius:14px; font-size:13px;
  animation:pr-chat-in .35s cubic-bezier(.3,1.3,.4,1) both;
}
.pr-chat .them{
  align-self:flex-start; background:#fff;
  border-bottom-left-radius:4px;
}
.pr-chat .me{
  align-self:flex-end; background:#3A46E8; color:#fff;
  border-bottom-right-radius:4px;
}
.pr-chat .typing{ display:flex; gap:4px; padding:12px 14px; }
.pr-chat .typing i{
  width:7px; height:7px; border-radius:50%;
  background:#9aa0b4;
  animation:pr-type-go 1.2s ease-in-out infinite;
}
.pr-chat .typing i:nth-child(2){ animation-delay:.15s; }
.pr-chat .typing i:nth-child(3){ animation-delay:.3s; }
@keyframes pr-chat-in{ from{ opacity:0; scale:.8; } }
@keyframes pr-type-go{
  0%,60%,100%{ translate:0 0; opacity:.4; }
  30%{ translate:0 -5px; opacity:1; }
}
</style>

<div class="pr-product">
  <div class="ph">👟<b class="off">-20%</b></div>
  <div class="info">
    <h5>ランニングシューズ</h5>
    <p><s>¥12,000</s> <b>¥9,600</b></p>
  </div>
  <button>カートに入れる</button>
</div>

<style>
.pr-product{
  position:relative; width:180px; overflow:hidden;
  border:2px solid #191F2E; border-radius:14px; background:#fff;
}
.pr-product .ph{
  position:relative; height:104px;
  display:grid; place-items:center; font-size:44px;
  background:linear-gradient(135deg,#FFF3D6,#FFE3EF);
  transition:transform .4s;
}
.pr-product:hover .ph{ transform:scale(1.08); }
.pr-product .off{
  position:absolute; top:8px; left:8px;
  padding:3px 9px; border-radius:6px;
  background:#FF3B5C; color:#fff; font-size:11px;
}
.pr-product .info{ padding:11px 13px 44px; }
.pr-product h5{ margin:0 0 5px; font-size:13px; }
.pr-product p{ margin:0; font-size:12px; color:#5A6072; }
.pr-product p b{ color:#FF3B5C; font-size:15px; }
.pr-product button{
  position:absolute; left:0; right:0; bottom:0;
  padding:11px; border:none;
  background:#191F2E; color:#fff;
  font-weight:700; font-size:12.5px; cursor:pointer;
  translate:0 100%;
  transition:translate .3s cubic-bezier(.3,1.2,.4,1);
}
.pr-product:hover button{ translate:0 0; }
.pr-product button:hover{ background:#3A46E8; }
</style>

<!-- CTAは普段隠してホバーでせり上げ。タップ環境では常時表示に -->

<ul class="pr-news">
  <li><time>07.08</time><b class="new">NEW</b><a>夏季キャンペーン開始</a></li>
  <li><time>07.01</time><a>採用情報を更新しました</a></li>
  <li><time>06.24</time><a>メディア掲載のお知らせ</a></li>
</ul>

<style>
.pr-news{
  list-style:none; margin:0; padding:0;
  width:100%; max-width:280px;
}
.pr-news li{
  display:flex; align-items:center; gap:9px;
  padding:11px 4px; font-size:12.5px;
  border-bottom:1px dashed #C9CBD4;
}
.pr-news time{
  font-family:"Space Grotesk",sans-serif;
  color:#5A6072; font-size:11.5px;
}
.pr-news .new{
  padding:1.5px 7px; border-radius:5px;
  background:#FF3B5C; color:#fff; font-size:9.5px;
  animation:pr-new-blink 1.6s ease-in-out infinite;
}
.pr-news a{
  cursor:pointer;
  background:linear-gradient(#3A46E8,#3A46E8) no-repeat 0 100% / 0% 1.5px;
  transition:background-size .35s, color .25s;
}
.pr-news a:hover{ color:#3A46E8; background-size:100% 1.5px; }
@keyframes pr-new-blink{ 50%{ opacity:.35; } }
</style>

<a class="pr-tel"><i>📞</i> 0120-000-000<span>タップで発信(9:00-18:00)</span></a>

<style>
.pr-tel{
  display:inline-flex; flex-direction:column;
  align-items:center; gap:1px;
  padding:12px 30px; border-radius:14px;
  background:#20B486; color:#fff;
  font-family:"Space Grotesk",sans-serif;
  font-size:21px; font-weight:700;
  cursor:pointer; text-decoration:none;
  box-shadow:0 5px 0 #157a5a;
}
.pr-tel span{ font-size:10px; font-weight:400; opacity:.9; font-family:sans-serif; }
.pr-tel i{
  font-style:normal; display:inline-block;
  animation:pr-tel-ring 2.4s ease-in-out infinite;
}
.pr-tel:active{ translate:0 4px; box-shadow:0 1px 0 #157a5a; }
@keyframes pr-tel-ring{
  0%,12%,24%,100%{ rotate:0deg; }
  4%,16%{ rotate:-16deg; }
  8%,20%{ rotate:14deg; }
}
</style>

<div class="pr-hero-arrow">
  <span>SCROLL</span>
  <i></i>
</div>

<style>
.pr-hero-arrow{
  display:flex; flex-direction:column; align-items:center; gap:8px;
}
.pr-hero-arrow span{
  font-family:"Space Grotesk",sans-serif;
  font-size:11px; letter-spacing:.35em; color:#5A6072;
}
.pr-hero-arrow i{
  width:1.5px; height:52px;
  background:#191F2E; position:relative; overflow:hidden;
}
/* 線の中を光が落ちていく */
.pr-hero-arrow i::after{
  content:""; position:absolute; left:0; top:-40%;
  width:100%; height:40%;
  background:#FF5CA0;
  animation:pr-arrow-drop 1.6s cubic-bezier(.6,0,.4,1) infinite;
}
@keyframes pr-arrow-drop{ to{ top:110%; } }
</style>

<!-- ヒーロー下部の定番。線タイプは上品にまとまる -->

<div class="pr-logos">
  <i>🏦 BANK</i><i>🏭 KOGYO</i><i>🏥 MEDI</i><i>🏫 EDU</i>
</div>

<style>
.pr-logos{
  display:grid; grid-template-columns:repeat(2,110px); gap:10px;
}
.pr-logos i{
  display:grid; place-items:center;
  padding:14px 6px; font-style:normal;
  font-family:"Space Grotesk",sans-serif;
  font-size:13px; font-weight:700;
  background:#fff; border:1.5px solid #E7E4DA; border-radius:10px;
  filter:grayscale(1); opacity:.5;
  transition:all .35s ease;
  cursor:pointer;
}
.pr-logos i:hover{
  filter:grayscale(0); opacity:1;
  border-color:#191F2E; translate:0 -3px;
  box-shadow:0 6px 12px rgba(25,31,46,.12);
}
</style>

<div class="pr-star">
  <i class="stars" style="--rate:4.6"></i>
  <b>4.6</b><span>(214件)</span>
</div>

<style>
.pr-star{
  display:inline-flex; align-items:center; gap:8px;
  font-size:13px;
}
.pr-star b{ font-family:"Space Grotesk",sans-serif; font-size:17px; }
.pr-star span{ color:#5A6072; font-size:11.5px; }
.pr-star .stars{
  --rate:4.6;
  position:relative; font-style:normal; font-size:20px;
  letter-spacing:2px;
}
.pr-star .stars::before{
  content:"★★★★★"; color:#D6D3C6;
}
/* 上に塗り済みの星を重ねて割合でクリップ */
.pr-star .stars::after{
  content:"★★★★★";
  position:absolute; inset:0;
  color:#FFB800; overflow:hidden;
  width:calc(var(--rate) / 5 * 100%);
  white-space:nowrap;
  animation:pr-star-in 1.2s ease both;
}
@keyframes pr-star-in{ from{ width:0; } }
/* ホバーで別名の同アニメを当てて再生し直す */
.pr-star:hover .stars::after{
  animation:pr-star-in2 1s ease both;
}
@keyframes pr-star-in2{ from{ width:0; } }
</style>

<!-- 表示された瞬間とホバー時に星が伸びる。--rateで端数も表現可 -->

<div class="pr-share">
  <a class="x">𝕏</a><a class="line">LINE</a><a class="fb">f</a><a class="ig">📷</a>
</div>

<style>
.pr-share{ display:flex; gap:10px; }
.pr-share a{
  display:grid; place-items:center;
  width:46px; height:46px; border-radius:50%;
  color:#fff; font-weight:700; font-size:15px;
  cursor:pointer; border:2px solid #191F2E;
  transition:transform .25s cubic-bezier(.3,1.5,.4,1), box-shadow .25s;
}
.pr-share a:hover{
  transform:translateY(-5px) scale(1.1);
  box-shadow:0 8px 0 rgba(25,31,46,.2);
}
.pr-share .x{ background:#191F2E; }
.pr-share .line{ background:#06C755; font-size:10.5px; }
.pr-share .fb{ background:#1877F2; font-family:serif; font-size:20px; }
.pr-share .ig{
  background:radial-gradient(circle at 30% 110%,
    #fdf497 0%, #fd5949 45%, #d6249f 60%, #285AEB 90%);
}
</style>

<div class="pr-cta-bar">
  <div class="page">
    <p>ページ本文をスクロール…</p><p>してもしても…</p><p>下のバーは追従します。</p><p>コンバージョン導線の定番。</p>
  </div>
  <div class="bar"><span>今なら初月無料!</span><button>申し込む</button></div>
</div>

<style>
.pr-cta-bar{
  position:relative;
  width:250px; height:200px; overflow-y:auto;
  border:2px solid #191F2E; border-radius:12px; background:#fff;
}
.pr-cta-bar .page p{ padding:26px 14px; margin:0; font-size:13px; }
.pr-cta-bar .bar{
  position:sticky; bottom:0;
  display:flex; align-items:center; justify-content:space-between;
  gap:8px; padding:11px 13px;
  background:#191F2E; color:#fff; font-size:12px; font-weight:700;
  animation:pr-cta-in .6s ease both;
}
.pr-cta-bar button{
  flex:none; padding:8px 16px; border:none; border-radius:99px;
  background:#FFCF3F; font-weight:700; cursor:pointer;
  animation:pr-cta-pulse 2s infinite;
}
@keyframes pr-cta-in{ from{ translate:0 100%; } }
@keyframes pr-cta-pulse{
  0%,100%{ box-shadow:0 0 0 0 rgba(255,207,63,.55); }
  60%{ box-shadow:0 0 0 9px rgba(255,207,63,0); }
}
</style>

<nav class="pr-nest-menu">
  <details open>
    <summary>制作サービス</summary>
    <a>コーポレートサイト</a><a>ランディングページ</a>
    <details>
      <summary>オプション</summary>
      <a>保守運用</a><a>SEO対策</a>
    </details>
  </details>
</nav>

<style>
.pr-nest-menu{
  width:210px; padding:8px;
  border:2px solid #191F2E; border-radius:12px; background:#fff;
}
.pr-nest-menu summary{
  padding:9px 10px; font-size:13px; font-weight:700;
  cursor:pointer; list-style:none; border-radius:8px;
  display:flex; justify-content:space-between; align-items:center;
}
.pr-nest-menu summary::-webkit-details-marker{ display:none; }
.pr-nest-menu summary::after{
  content:"▸"; color:#3A46E8; transition:transform .25s;
}
.pr-nest-menu details[open] > summary::after{ transform:rotate(90deg); }
.pr-nest-menu summary:hover{ background:#F2F0E8; }
.pr-nest-menu a{
  display:block; padding:7px 10px 7px 22px;
  font-size:12.5px; border-radius:7px; cursor:pointer;
  animation:pr-nest-in .3s ease both;
}
.pr-nest-menu a:hover{ background:#EEF0FF; color:#3A46E8; }
.pr-nest-menu details details{ padding-left:12px; }
@keyframes pr-nest-in{ from{ opacity:0; translate:-6px 0; } }
</style>

<div class="pr-clamp">
  <h5>ブログ記事タイトル</h5>
  <p>長い本文がここに入ります。カードの高さを揃えたい時、文章の長さがバラバラだとレイアウトが崩れます。line-clampを使えば指定行数でピタッと省略でき、続きは「...」になります。とても便利。</p>
  <a>続きを読む →</a>
</div>

<style>
.pr-clamp{
  width:220px; padding:15px;
  border:2px solid #191F2E; border-radius:12px; background:#fff;
}
.pr-clamp h5{ margin:0 0 7px; font-size:14px; }
.pr-clamp p{
  margin:0 0 9px; font-size:12.5px; color:#5A6072; line-height:1.7;
  display:-webkit-box;
  -webkit-box-orient:vertical;
  -webkit-line-clamp:3;   /* ★ 3行で省略 */
  line-clamp:3;
  overflow:hidden;
}
.pr-clamp a{
  font-size:12px; font-weight:700; color:#3A46E8; cursor:pointer;
  transition:letter-spacing .25s;
}
.pr-clamp a:hover{ letter-spacing:.06em; }
</style>

<div class="pr-blurup"><i></i></div>

<style>
.pr-blurup{
  width:210px; height:130px;
  border-radius:12px; overflow:hidden; border:2px solid #191F2E;
}
.pr-blurup i{
  display:grid; place-items:center;
  width:100%; height:100%; font-size:44px; font-style:normal;
  background:url(01.jpg) center/cover;
  animation:pr-blur-in 2.4s ease both infinite;
}
/* ぼかし+拡大 → くっきり */
@keyframes pr-blur-in{
  0%{ filter:blur(16px) saturate(1.4); transform:scale(1.1); }
  55%,90%{ filter:blur(0); transform:scale(1); }
  100%{ filter:blur(16px); transform:scale(1.1); }
}
</style>

<!-- 実装はサムネ画像を読み込み、onloadでクラス切替(このデモはループ再生) -->

<span class="pr-help">手数料について
  <i data-tip="決済額の3.6%が別途かかります">?</i>
</span>

<style>
.pr-help{
  display:inline-flex; gap:7px; align-items:center;
  font-size:14px; font-weight:700;
}
.pr-help i{
  position:relative;
  display:grid; place-items:center;
  width:20px; height:20px; border-radius:50%;
  background:#3A46E8; color:#fff;
  font-size:12px; font-style:normal; cursor:help;
  transition:transform .2s;
}
.pr-help i:hover{ transform:scale(1.2); }
.pr-help i::after{
  content:attr(data-tip);
  position:absolute; bottom:calc(100% + 9px); left:50%;
  width:max-content; max-width:180px;
  padding:8px 12px; border-radius:8px;
  background:#191F2E; color:#fff;
  font-size:11px; font-weight:400; line-height:1.5;
  opacity:0; translate:-50% 5px; pointer-events:none;
  transition:opacity .25s, translate .25s;
}
.pr-help i:hover::after{ opacity:1; translate:-50% 0; }
</style>

<footer class="pr-footer-sns">
  <b>FOLLOW US</b>
  <div class="row"><i>🐦</i><i>📷</i><i>▶️</i><i>🎵</i></div>
</footer>

<style>
.pr-footer-sns{
  width:240px; padding:18px;
  text-align:center; border-radius:14px;
  background:#191F2E;
}
.pr-footer-sns b{
  font-family:"Space Grotesk",sans-serif;
  color:#9aa0b4; font-size:11px; letter-spacing:.3em;
}
.pr-footer-sns .row{
  display:flex; justify-content:center; gap:12px; margin-top:12px;
}
.pr-footer-sns i{
  display:grid; place-items:center;
  width:42px; height:42px; border-radius:50%;
  background:rgba(255,255,255,.1);
  font-size:17px; font-style:normal; cursor:pointer;
  transition:all .3s cubic-bezier(.3,1.4,.4,1);
}
.pr-footer-sns i:hover{
  background:#FF5CA0; transform:translateY(-5px) rotate(8deg);
}
</style>

<div class="pr-tategaki">
  <h4>春の новых특별展</h4>
  <h4 class="main">和の趣を、現代へ。</h4>
  <p>writing-mode:vertical-rl</p>
</div>

<style>
.pr-tategaki{
  display:flex; flex-direction:row-reverse;
  gap:14px; align-items:flex-start;
  height:170px; padding:16px;
  background:#fff; border:2px solid #191F2E; border-radius:12px;
}
.pr-tategaki h4{
  margin:0;
  writing-mode:vertical-rl;   /* ★ 縦書き */
  font-size:13px; color:#5A6072; font-weight:400;
  letter-spacing:.2em;
}
.pr-tategaki .main{
  font-size:21px; font-weight:900; color:#191F2E;
  animation:pr-tate-in 1.4s ease both;
}
.pr-tategaki p{
  writing-mode:vertical-rl;
  margin:0; font-size:10px; color:#9aa0b4;
  font-family:"JetBrains Mono",monospace;
}
@keyframes pr-tate-in{
  from{ opacity:0; translate:0 -14px; }
}
</style>

<!-- 和風サイト・アイキャッチに。数字はtext-combine-uprightで横中縦 -->

<p class="pr-dropcap">むかしむかし、あるところにCSSがとても得意なWeb職人がいました。彼はJavaScriptを1行も書かずに、あらゆるUIを作ってしまうのでした。</p>

<style>
.pr-dropcap{
  width:250px; margin:0;
  font-size:13px; line-height:1.9; color:#191F2E;
}
.pr-dropcap::first-letter{
  float:left;
  font-size:46px; line-height:1;
  padding:4px 10px; margin:3px 8px 0 0;
  background:#191F2E; color:#FFCF3F;
  border-radius:8px;
  font-family:"Zen Kaku Gothic New",sans-serif;
  font-weight:900;
}
</style>

<!-- ::first-letterは記事冒頭の演出に。雑誌風レイアウトの入口 -->

<p class="pr-selection">この文章をドラッグして選択してみてください。ブランドカラーの選択色になります。</p>

<style>
.pr-selection{
  width:250px; margin:0;
  font-size:14px; line-height:1.9; font-weight:700;
}
.pr-selection::selection{
  background:#FF5CA0;
  color:#fff;
}
</style>

<!-- 1行で終わる小技だが、こだわりが伝わるポイント -->

<div class="pr-ticker-tag">
  <b>期間限定</b>
  <span>全品20%OFFセール開催中</span>
  <a>詳しく →</a>
</div>

<style>
.pr-ticker-tag{
  display:flex; align-items:center; gap:10px;
  width:100%; max-width:300px;
  padding:11px 14px; border-radius:12px;
  background:linear-gradient(100deg,#3A46E8,#7B5CFF,#FF5CA0);
  background-size:200% 100%;
  color:#fff; font-size:12.5px;
  animation:pr-ticker-bg 4s linear infinite alternate;
}
.pr-ticker-tag b{
  flex:none; padding:3px 9px; border-radius:6px;
  background:rgba(255,255,255,.22); font-size:10.5px;
}
.pr-ticker-tag span{ flex:1; font-weight:700; }
.pr-ticker-tag a{
  flex:none; font-weight:700; cursor:pointer;
  transition:letter-spacing .25s;
}
.pr-ticker-tag a:hover{ letter-spacing:.08em; }
@keyframes pr-ticker-bg{ to{ background-position:100% 0; } }
</style>

<div class="pr-profile">
  <i class="av">🦊</i>
  <h5>山田 デザ子</h5>
  <p>UI Designer</p>
  <div class="sns"><a>𝕏</a><a>Bē</a><a>in</a></div>
</div>

<style>
.pr-profile{
  width:180px; padding:20px 16px 16px;
  text-align:center; border-radius:16px;
  background:#fff; border:2px solid #191F2E;
  transition:box-shadow .3s, translate .3s;
}
.pr-profile:hover{
  translate:0 -4px;
  box-shadow:8px 8px 0 rgba(25,31,46,.15);
}
.pr-profile .av{
  display:grid; place-items:center;
  width:64px; height:64px; margin:0 auto 10px;
  border-radius:50%; font-size:30px; font-style:normal;
  background:linear-gradient(135deg,#FFE3EF,#EEF0FF);
  border:2.5px solid #191F2E;
  transition:transform .4s cubic-bezier(.3,1.4,.4,1);
}
.pr-profile:hover .av{ transform:scale(1.1) rotate(-6deg); }
.pr-profile h5{ margin:0; font-size:14.5px; }
.pr-profile p{ margin:2px 0 0; font-size:11.5px; color:#5A6072; }
.pr-profile .sns{
  display:flex; justify-content:center; gap:8px;
  max-height:0; overflow:hidden; opacity:0;
  transition:max-height .4s ease, opacity .3s .1s, margin .4s;
}
.pr-profile:hover .sns{ max-height:50px; opacity:1; margin-top:12px; }
.pr-profile .sns a{
  display:grid; place-items:center;
  width:32px; height:32px; border-radius:50%;
  background:#191F2E; color:#fff;
  font-size:12px; font-weight:700; cursor:pointer;
  transition:background .25s;
}
.pr-profile .sns a:hover{ background:#3A46E8; }
</style>

<div class="pr-plan-toggle">
  <input type="checkbox" id="prpt">
  <div class="seg">
    <label for="prpt" class="m">月払い</label>
    <label for="prpt" class="y">年払い <b>-17%</b></label>
    <i class="th"></i>
  </div>
  <p class="price">
    <span class="pm">¥1,200<small>/月</small></span>
    <span class="py">¥12,000<small>/年</small></span>
  </p>
</div>

<style>
.pr-plan-toggle{ text-align:center; }
.pr-plan-toggle input{ display:none; }
.pr-plan-toggle .seg{
  position:relative; display:inline-flex;
  border:2px solid #191F2E; border-radius:999px;
  background:#fff; padding:4px;
}
.pr-plan-toggle .seg label{
  position:relative; z-index:1;
  padding:8px 18px; font-size:12.5px; font-weight:700;
  cursor:pointer; transition:color .3s;
}
.pr-plan-toggle .seg b{
  font-size:9.5px; color:#20B486;
}
.pr-plan-toggle .th{
  position:absolute; top:4px; bottom:4px; left:4px;
  width:calc(50% - 4px);
  background:#FFCF3F; border-radius:999px;
  transition:translate .35s cubic-bezier(.4,0,.2,1);
}
#prpt:checked ~ .seg .th{ translate:100% 0; }
.pr-plan-toggle .price{
  position:relative; height:44px; margin:14px 0 0;
  font-family:"Space Grotesk",sans-serif;
  font-size:30px; font-weight:700; color:#191F2E;
}
.pr-plan-toggle .price span{
  position:absolute; inset:0;
  transition:opacity .3s, translate .3s;
}
.pr-plan-toggle small{ font-size:13px; color:#5A6072; }
.pr-plan-toggle .py{ opacity:0; translate:0 10px; }
#prpt:checked ~ .price .pm{ opacity:0; translate:0 -10px; }
#prpt:checked ~ .price .py{ opacity:1; translate:0 0; }
</style>

<div class="pr-stock">
  <span class="item">人気の限定モデル</span>
  <b>🔥 残り2点</b>
</div>

<style>
.pr-stock{
  display:inline-flex; align-items:center; gap:12px;
  padding:13px 16px;
  border:2px solid #191F2E; border-radius:12px; background:#fff;
  font-size:13.5px; font-weight:700;
}
.pr-stock b{
  padding:5px 11px; border-radius:8px;
  background:#FFF0F3; color:#FF3B5C;
  border:1.5px solid #FF3B5C;
  font-size:12px;
  animation:pr-stock-urge 2.2s ease-in-out infinite;
}
@keyframes pr-stock-urge{
  0%,68%,100%{ transform:none; }
  74%{ transform:rotate(-2.5deg) scale(1.07); }
  80%{ transform:rotate(2deg) scale(1.07); }
  86%{ transform:rotate(-1deg); }
}
</style>

<!-- ずっと揺れると鬱陶しいので「時々ぶるっ」が上品 -->

<div class="pr-shipping">
  <p>あと<b>¥1,200</b>で送料無料!</p>
  <div class="bar"><i style="--p:76%"></i></div>
</div>

<style>
.pr-shipping{
  width:240px; padding:14px 16px;
  border:2px solid #191F2E; border-radius:12px; background:#FFF8E1;
}
.pr-shipping p{ margin:0 0 9px; font-size:12.5px; font-weight:700; }
.pr-shipping b{ color:#FF3B5C; font-size:15px; }
.pr-shipping .bar{
  height:12px; border-radius:99px;
  background:#fff; border:1.5px solid #191F2E; overflow:hidden;
}
.pr-shipping .bar i{
  display:block; width:var(--p); height:100%;
  border-radius:99px; position:relative; overflow:hidden;
  background:linear-gradient(90deg,#20B486,#A3E635);
  animation:pr-ship-in 1s ease both;
}
.pr-shipping .bar i::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(110deg, transparent 40%,
    rgba(255,255,255,.7) 50%, transparent 60%);
  animation:pr-ship-shine 1.8s linear infinite;
}
@keyframes pr-ship-in{ from{ width:0; } }
@keyframes pr-ship-shine{
  from{ translate:-100% 0; } to{ translate:100% 0; }
}
</style>

<!-- ECのカート内で購入単価を上げる定番UI -->

<div class="pr-coupon">
  <div class="left"><b>20%</b><span>OFF</span></div>
  <div class="right">
    <p>初回購入クーポン</p>
    <code>WELCOME20</code>
  </div>
</div>

<style>
.pr-coupon{
  display:flex; width:250px;
  border-radius:14px; overflow:hidden;
  filter:drop-shadow(0 4px 8px rgba(25,31,46,.18));
  cursor:pointer; transition:transform .25s;
}
.pr-coupon:hover{ transform:rotate(-1.5deg) scale(1.03); }
.pr-coupon .left{
  display:flex; flex-direction:column;
  align-items:center; justify-content:center;
  width:86px; padding:18px 0;
  background:#FF5CA0; color:#fff;
  font-family:"Space Grotesk",sans-serif;
}
.pr-coupon .left b{ font-size:27px; }
.pr-coupon .left span{ font-size:12px; letter-spacing:.2em; }
.pr-coupon .right{
  flex:1; padding:14px;
  background:#fff;
  /* 切り取りミシン目 */
  border-left:2.5px dashed #FF5CA0;
  position:relative;
}
.pr-coupon .right::before,
.pr-coupon .right::after{
  content:""; position:absolute; left:-8px;
  width:14px; height:14px; border-radius:50%;
  background:#F7F5EF;
}
.pr-coupon .right::before{ top:-7px; }
.pr-coupon .right::after{ bottom:-7px; }
.pr-coupon p{ margin:0 0 7px; font-size:12px; font-weight:700; }
.pr-coupon code{
  display:inline-block; padding:5px 11px;
  background:#FFF0F6; border:1.5px dashed #FF5CA0; border-radius:7px;
  font-family:"JetBrains Mono",monospace;
  font-size:12.5px; font-weight:700; color:#FF3B5C;
}
</style>

<!-- 半円の切り欠きは背景色の丸を重ねるだけ -->

<ol class="pr-ranking">
  <li class="r1"><b>1</b>プレミアムプラン<i>👑</i></li>
  <li class="r2"><b>2</b>スタンダード</li>
  <li class="r3"><b>3</b>ライトプラン</li>
</ol>

<style>
.pr-ranking{
  list-style:none; margin:0; padding:0; width:230px;
}
.pr-ranking li{
  position:relative;
  display:flex; align-items:center; gap:11px;
  padding:12px 14px; margin-bottom:8px;
  background:#fff; border:2px solid #191F2E; border-radius:11px;
  font-size:13px; font-weight:700;
}
.pr-ranking b{
  display:grid; place-items:center;
  width:28px; height:28px; border-radius:50%;
  font-family:"Space Grotesk",sans-serif; color:#fff;
}
.pr-ranking .r1 b{ background:#F5B301; }
.pr-ranking .r2 b{ background:#9aa0b4; }
.pr-ranking .r3 b{ background:#c97f4e; }
.pr-ranking .r1{
  border-color:#F5B301; background:#FFFBEB;
  overflow:hidden;
}
.pr-ranking .r1::after{
  content:""; position:absolute; top:0; left:-80%;
  width:50%; height:100%;
  background:linear-gradient(110deg, transparent,
    rgba(245,179,1,.35), transparent);
  transform:skewX(-20deg);
  animation:pr-rank-shine 2.6s ease infinite;
}
.pr-ranking .r1 i{
  margin-left:auto; font-style:normal;
  animation:pr-rank-crown 2s ease-in-out infinite;
}
@keyframes pr-rank-shine{
  0%{ left:-80%; } 45%,100%{ left:130%; }
}
@keyframes pr-rank-crown{
  0%,100%{ transform:rotate(-8deg); } 50%{ transform:rotate(8deg) translateY(-2px); }
}
</style>

<div class="pr-upload">
  <i>📁</i>
  <p>ここにファイルをドロップ<br><span>または クリックして選択</span></p>
</div>

<style>
.pr-upload{
  width:230px; padding:26px 16px;
  text-align:center; cursor:pointer;
  border:2.5px dashed #9aa0b4; border-radius:14px;
  background:#fff;
  transition:all .3s ease;
}
.pr-upload i{
  display:inline-block; font-size:34px; font-style:normal;
  animation:pr-up-float 2.4s ease-in-out infinite;
}
.pr-upload p{
  margin:8px 0 0; font-size:12.5px; font-weight:700;
}
.pr-upload span{ font-size:11px; color:#5A6072; font-weight:400; }
.pr-upload:hover{
  border-color:#3A46E8; background:#EEF0FF;
  transform:scale(1.02);
}
@keyframes pr-up-float{
  0%,100%{ translate:0 0; } 50%{ translate:0 -6px; }
}
</style>

<!-- dragover時のスタイルはJSでクラスを付けて同様に -->

<div class="pr-empty">
  <i>🗂️</i>
  <h5>まだ何もありません</h5>
  <p>最初のプロジェクトを作成しましょう</p>
  <button>+ 新規作成</button>
</div>

<style>
.pr-empty{
  width:210px; padding:26px 18px;
  text-align:center;
  border:2px solid #E7E4DA; border-radius:16px; background:#fff;
}
.pr-empty i{
  display:inline-block;
  font-size:40px; font-style:normal; opacity:.85;
  animation:pr-empty-bob 3s ease-in-out infinite;
}
.pr-empty h5{ margin:10px 0 4px; font-size:14px; }
.pr-empty p{ margin:0 0 14px; font-size:11.5px; color:#5A6072; }
.pr-empty button{
  padding:9px 20px; border:none; border-radius:99px;
  background:#3A46E8; color:#fff; font-weight:700;
  font-size:12.5px; cursor:pointer;
  transition:transform .2s, box-shadow .2s;
}
.pr-empty button:hover{
  transform:translateY(-2px);
  box-shadow:0 6px 14px rgba(58,70,232,.35);
}
@keyframes pr-empty-bob{
  0%,100%{ translate:0 0; rotate:0deg; }
  50%{ translate:0 -7px; rotate:-4deg; }
}
</style>

<div class="pr-error-banner">
  <i>⚠️</i>
  <div><b>接続エラー</b><span>ネットワークを確認してください</span></div>
  <em>再試行</em>
</div>

<style>
.pr-error-banner{
  display:flex; align-items:center; gap:11px;
  width:100%; max-width:290px;
  padding:12px 14px; border-radius:12px;
  background:#FFF0F3;
  border:2px solid #FF3B5C;
  border-left-width:7px;
  animation:pr-err-in .5s cubic-bezier(.3,1.3,.4,1) both;
}
.pr-error-banner i{ font-style:normal; font-size:19px;
  animation:pr-err-shake 3s infinite; }
.pr-error-banner b{ display:block; font-size:13px; color:#c22641; }
.pr-error-banner span{ font-size:11px; color:#5A6072; }
.pr-error-banner em{
  margin-left:auto; font-style:normal;
  font-size:12px; font-weight:700; color:#FF3B5C;
  cursor:pointer; white-space:nowrap;
  text-decoration:underline dotted;
}
@keyframes pr-err-in{ from{ opacity:0; translate:-24px 0; } }
@keyframes pr-err-shake{
  0%,88%,100%{ rotate:0deg; }
  91%{ rotate:-12deg; } 94%{ rotate:10deg; } 97%{ rotate:-6deg; }
}
</style>

<div class="pr-success">
  <svg viewBox="0 0 52 52">
    <circle cx="26" cy="26" r="23" fill="none"/>
    <path d="M15 27l7 7 15-16" fill="none"/>
  </svg>
  <p>送信が完了しました</p>
</div>

<style>
.pr-success{ text-align:center; }
.pr-success svg{
  width:76px; height:76px;
}
.pr-success circle{
  stroke:#20B486; stroke-width:3.5;
  stroke-dasharray:145; stroke-dashoffset:145;
  animation:pr-suc-circle .7s ease-out forwards infinite;
  animation-duration:2.8s;
}
.pr-success path{
  stroke:#20B486; stroke-width:4;
  stroke-linecap:round; stroke-linejoin:round;
  stroke-dasharray:34; stroke-dashoffset:34;
  animation:pr-suc-check 2.8s ease-out infinite;
}
.pr-success p{
  margin:8px 0 0; font-size:13px; font-weight:700; color:#20B486;
  animation:pr-suc-txt 2.8s ease infinite;
}
/* デモ用にループ再生(実際はforwardsで1回) */
@keyframes pr-suc-circle{
  0%{ stroke-dashoffset:145; }
  25%,85%{ stroke-dashoffset:0; }
  100%{ stroke-dashoffset:145; }
}
@keyframes pr-suc-check{
  0%,20%{ stroke-dashoffset:34; }
  40%,85%{ stroke-dashoffset:0; }
  100%{ stroke-dashoffset:34; }
}
@keyframes pr-suc-txt{
  0%,30%{ opacity:0; translate:0 6px; }
  45%,85%{ opacity:1; translate:0 0; }
  100%{ opacity:0; }
}
</style>

<!-- stroke-dashoffsetの線描画。フォーム完了画面の鉄板 -->

<div class="pr-loading-page">
  <div class="body"><h5>ようこそ!</h5><p>ページ本体のコンテンツ</p></div>
  <div class="loader"><i></i><span>LOADING</span></div>
</div>

<style>
.pr-loading-page{
  position:relative; width:230px; height:150px;
  border:2px solid #191F2E; border-radius:12px; overflow:hidden;
  background:#fff;
}
.pr-loading-page .body{
  height:100%; display:grid; place-content:center;
  text-align:center;
}
.pr-loading-page .body h5{ margin:0 0 4px; }
.pr-loading-page .body p{ margin:0; font-size:12px; color:#5A6072; }
.pr-loading-page .loader{
  position:absolute; inset:0; z-index:2;
  display:grid; place-content:center; justify-items:center; gap:10px;
  background:#191F2E;
  animation:pr-load-out 3.5s ease infinite;
}
.pr-loading-page .loader i{
  width:30px; height:30px; border-radius:50%;
  border:3.5px solid rgba(255,255,255,.2);
  border-top-color:#FFCF3F;
  animation:pr-load-spin .8s linear infinite;
}
.pr-loading-page .loader span{
  font-family:"Space Grotesk",sans-serif;
  font-size:10px; letter-spacing:.35em; color:#9aa0b4;
}
@keyframes pr-load-spin{ to{ rotate:360deg; } }
/* デモはループ。実際はbodyのloadでクラスを外す */
@keyframes pr-load-out{
  0%,55%{ opacity:1; visibility:visible; }
  75%,90%{ opacity:0; visibility:hidden; }
  100%{ opacity:1; }
}
</style>

<div class="pr-404">
  <b class="num"><i>4</i><i>0</i><i>4</i></b>
  <p>お探しのページは旅に出てしまったようです</p>
  <a>← トップへ戻る</a>
</div>

<style>
.pr-404{ text-align:center; }
.pr-404 .num{ display:flex; gap:6px; justify-content:center; }
.pr-404 .num i{
  font-family:"Space Grotesk",sans-serif;
  font-size:54px; font-weight:700; font-style:normal;
  color:#3A46E8;
  animation:pr-404-bounce 1.6s ease-in-out infinite;
}
.pr-404 .num i:nth-child(2){
  color:#FF5CA0; animation-delay:.15s;
}
.pr-404 .num i:nth-child(3){
  color:#FFCF3F; animation-delay:.3s;
  -webkit-text-stroke:1.5px #191F2E;
}
.pr-404 p{ margin:4px 0 10px; font-size:12px; color:#5A6072; }
.pr-404 a{
  font-size:13px; font-weight:700; color:#3A46E8;
  cursor:pointer; border-bottom:2px solid transparent;
  transition:border-color .25s;
}
.pr-404 a:hover{ border-color:#3A46E8; }
@keyframes pr-404-bounce{
  0%,55%,100%{ translate:0 0; }
  28%{ translate:0 -16px; }
}
</style>

<div class="pr-maint">
  <i>🔧</i>
  <h5>メンテナンス中です</h5>
  <p>7/8 2:00 - 5:00(予定)</p>
  <div class="bar"><b></b></div>
</div>

<style>
.pr-maint{
  width:220px; padding:24px 18px;
  text-align:center;
  background:#191F2E; color:#fff; border-radius:16px;
}
.pr-maint i{
  display:inline-block; font-size:38px; font-style:normal;
  transform-origin:70% 70%;
  animation:pr-maint-work 1.6s ease-in-out infinite;
}
.pr-maint h5{ margin:10px 0 3px; font-size:14px; }
.pr-maint p{ margin:0 0 14px; font-size:11px; color:#9aa0b4; }
.pr-maint .bar{
  height:7px; border-radius:99px;
  background:rgba(255,255,255,.15); overflow:hidden;
}
.pr-maint .bar b{
  display:block; width:45%; height:100%; border-radius:99px;
  background:#FFCF3F;
  animation:pr-maint-bar 1.6s ease-in-out infinite alternate;
}
@keyframes pr-maint-work{
  0%,100%{ rotate:-14deg; } 50%{ rotate:18deg; }
}
@keyframes pr-maint-bar{
  from{ translate:-60% 0; } to{ translate:200% 0; }
}
</style>

<div class="pr-tags">
  <a># CSS</a><a># HTML</a><a># デザイン</a><a># アニメ</a><a># WordPress</a><a># レスポンシブ</a>
</div>

<style>
.pr-tags{
  display:flex; flex-wrap:wrap; gap:8px;
  width:250px;
}
.pr-tags a{
  padding:6px 13px; border-radius:99px;
  background:#fff; border:1.5px solid #191F2E;
  font-size:12px; font-weight:700; cursor:pointer;
  transition:all .25s cubic-bezier(.3,1.4,.4,1);
}
.pr-tags a:hover{
  background:#191F2E; color:#FFCF3F;
  transform:translateY(-3px) rotate(-2deg);
  box-shadow:0 5px 0 rgba(25,31,46,.2);
}
</style>

<table class="pr-hours">
  <tr><td>月-金</td><td>9:00 - 18:00</td></tr>
  <tr class="today"><td>水(本日)</td><td>9:00 - 18:00 <b>営業中</b></td></tr>
  <tr><td>土日祝</td><td>定休日</td></tr>
</table>

<style>
.pr-hours{
  width:250px; border-collapse:collapse;
  font-size:12.5px; background:#fff;
  border:2px solid #191F2E; border-radius:12px;
  overflow:hidden;
}
.pr-hours td{
  padding:11px 14px; border-bottom:1px solid #EDEAE0;
}
.pr-hours td:first-child{ font-weight:700; width:40%; }
.pr-hours .today{
  background:#E9FBF4;
}
.pr-hours .today td:first-child{ color:#157a5a; }
.pr-hours b{
  display:inline-block; margin-left:6px;
  padding:2px 8px; border-radius:5px;
  background:#20B486; color:#fff; font-size:10px;
  animation:pr-open-pulse 1.8s infinite;
}
@keyframes pr-open-pulse{
  0%,100%{ opacity:1; } 50%{ opacity:.55; }
}
</style>

<!-- 「本日」行の判定はJSで曜日クラスを付ける -->

<nav class="pr-anchor-cat">
  <a class="on">すべて</a><a>ニュース</a><a>コラム</a><a>イベント</a><a>採用</a><a>技術ブログ</a>
</nav>

<style>
.pr-anchor-cat{
  display:flex; gap:8px;
  width:250px; overflow-x:auto;
  padding-bottom:6px;
  scrollbar-width:none;
  /* 右端フェードで「まだある」を示す */
  -webkit-mask:linear-gradient(90deg, #000 88%, transparent);
  mask:linear-gradient(90deg, #000 88%, transparent);
}
.pr-anchor-cat::-webkit-scrollbar{ display:none; }
.pr-anchor-cat a{
  flex:none; padding:8px 16px; border-radius:99px;
  background:#fff; border:1.5px solid #C9CBD4;
  font-size:12.5px; font-weight:700; cursor:pointer;
  transition:all .25s;
}
.pr-anchor-cat a:hover{ border-color:#191F2E; }
.pr-anchor-cat .on{
  background:#191F2E; color:#fff; border-color:#191F2E;
}
</style>

<!-- スマホのカテゴリ切替でよく見る形。横スクロール+フェード -->

<a class="pr-back-card">
  <b>実績をもっと見る</b>
  <i>→</i>
</a>

<style>
.pr-back-card{
  display:flex; align-items:center; justify-content:space-between;
  width:230px; padding:18px 20px;
  border:2px solid #191F2E; border-radius:14px;
  background:#fff; cursor:pointer;
  font-size:14px; font-weight:700;
  transition:background .3s, color .3s;
  overflow:hidden; position:relative;
}
.pr-back-card i{
  font-style:normal; font-size:18px;
  transition:translate .3s cubic-bezier(.3,1.4,.4,1);
}
.pr-back-card:hover{ background:#3A46E8; color:#fff; }
.pr-back-card:hover i{
  translate:6px 0;
  animation:pr-arrow-nudge 1s ease-in-out infinite .3s;
}
@keyframes pr-arrow-nudge{
  0%,100%{ translate:6px 0; } 50%{ translate:12px 0; }
}
</style>

<div class="pr-steps-form">
  <div class="bar"><i style="--p:66%"></i></div>
  <div class="labs"><span class="done">入力</span><span class="on">確認</span><span>完了</span></div>
</div>

<style>
.pr-steps-form{ width:240px; }
.pr-steps-form .bar{
  height:9px; border-radius:99px;
  background:#E7E4DA; overflow:hidden;
}
.pr-steps-form .bar i{
  display:block; width:var(--p); height:100%;
  border-radius:99px;
  background:linear-gradient(90deg,#3A46E8,#7B5CFF);
  animation:pr-stepbar-in .9s cubic-bezier(.3,1,.3,1) both;
}
.pr-steps-form .labs{
  display:flex; justify-content:space-between;
  margin-top:7px; padding:0 2px;
  font-size:11px; font-weight:700; color:#9aa0b4;
}
.pr-steps-form .done{ color:#20B486; }
.pr-steps-form .done::before{ content:"✓ "; }
.pr-steps-form .on{ color:#3A46E8; }
@keyframes pr-stepbar-in{ from{ width:0; } }
</style>

<!-- ステップ遷移のたびに--pを変えれば伸びるアニメが再生される -->

<div class="pr-gallery-hover">
  <figure><i></i><figcaption>作品A</figcaption></figure>
  <figure><i></i><figcaption>作品B</figcaption></figure>
  <figure><i></i><figcaption>作品C</figcaption></figure>
  <figure><i></i><figcaption>作品D</figcaption></figure>
</div>

<style>
.pr-gallery-hover{
  display:grid; grid-template-columns:repeat(2,110px); gap:8px;
}
.pr-gallery-hover figure{
  position:relative; margin:0; height:76px;
  border-radius:10px; overflow:hidden;
  border:2px solid #191F2E; cursor:pointer;
}
.pr-gallery-hover i{
  display:grid; place-items:center;
  width:100%; height:100%; font-size:26px; font-style:normal;
  transition:transform .4s, filter .4s;
}
.pr-gallery-hover figure:nth-child(1) i{ background:url(01.jpg) center/cover; }
.pr-gallery-hover figure:nth-child(2) i{ background:url(02.jpg) center/cover; }
.pr-gallery-hover figure:nth-child(3) i{ background:url(03.jpg) center/cover; }
.pr-gallery-hover figure:nth-child(4) i{ background:url(01.jpg) center/cover; }
.pr-gallery-hover figcaption{
  position:absolute; inset:auto 0 0;
  padding:6px 9px; font-size:10.5px; font-weight:700; color:#fff;
  background:linear-gradient(transparent, rgba(25,31,46,.85));
  translate:0 100%; transition:translate .3s ease;
}
.pr-gallery-hover figure:hover i{ transform:scale(1.12); filter:brightness(.85); }
.pr-gallery-hover figure:hover figcaption{ translate:0 0; }
</style>

<div class="pr-notice-close">
  <input type="checkbox" id="prnc">
  <div class="bar">
    <span>🎉 ver2.0をリリースしました</span>
    <a>詳細</a>
    <label for="prnc">✕</label>
  </div>
</div>

<style>
.pr-notice-close{ width:100%; max-width:300px; }
.pr-notice-close input{ display:none; }
.pr-notice-close .bar{
  display:flex; align-items:center; gap:10px;
  padding:10px 14px;
  background:#3A46E8; color:#fff;
  font-size:12px; font-weight:700;
  border-radius:10px;
  /* grid化のためラッパーで高さ遷移 */
  transition:opacity .4s, translate .4s, margin .4s;
}
.pr-notice-close .bar span{ flex:1; }
.pr-notice-close .bar a{
  padding:4px 12px; border-radius:99px;
  background:#FFCF3F; color:#191F2E; cursor:pointer;
  transition:transform .2s;
}
.pr-notice-close .bar a:hover{ transform:scale(1.07); }
.pr-notice-close label{
  cursor:pointer; opacity:.8; padding:2px 4px;
  transition:opacity .2s, transform .3s;
}
.pr-notice-close label:hover{ opacity:1; transform:rotate(90deg); }
#prnc:checked ~ .bar{
  opacity:0; translate:0 -14px; pointer-events:none;
}
</style>

<!-- 閉じた状態の記憶はJS+localStorage(またはCookie)で -->

<div class="wd-blob"></div>

<style>
.wd-blob{
  width:120px; height:120px;
  background:linear-gradient(135deg,#FF5CA0,#7B5CFF);
  animation:wd-blob-go 7s ease-in-out infinite;
}
/* border-radiusの8値morph */
@keyframes wd-blob-go{
  0%,100%{ border-radius:60% 40% 55% 45% / 55% 60% 40% 45%; }
  25%{ border-radius:45% 55% 40% 60% / 60% 45% 55% 40%; }
  50%{ border-radius:55% 45% 60% 40% / 40% 55% 45% 60%; }
  75%{ border-radius:40% 60% 45% 55% / 55% 40% 60% 45%; }
}
</style>

<!-- border-radiusはスラッシュ区切りで縦横別指定できる -->

<div class="wd-blob-face"><i></i><i></i></div>

<style>
.wd-blob-face{
  position:relative; width:120px; height:120px;
  display:flex; gap:16px; align-items:center; justify-content:center;
  background:linear-gradient(135deg,#20B486,#A3E635);
  animation:wd-bf-morph 6s ease-in-out infinite,
    wd-bf-bob 3s ease-in-out infinite;
}
.wd-blob-face i{
  width:14px; height:14px; border-radius:50%;
  background:#191F2E;
  animation:wd-bf-blink 3.4s infinite;
}
@keyframes wd-bf-morph{
  0%,100%{ border-radius:58% 42% 50% 50% / 50% 58% 42% 50%; }
  50%{ border-radius:45% 55% 58% 42% / 55% 45% 50% 50%; }
}
@keyframes wd-bf-bob{
  0%,100%{ translate:0 0; } 50%{ translate:0 -8px; }
}
@keyframes wd-bf-blink{
  0%,90%,100%{ transform:scaleY(1); }
  95%{ transform:scaleY(.08); }
}
</style>

<!-- まばたきはscaleYを一瞬潰すだけ -->

<div class="wd-lava"><i></i><i></i><i></i></div>

<style>
.wd-lava{
  position:relative; width:110px; height:200px;
  border-radius:55px; overflow:hidden;
  background:linear-gradient(#2a1030,#0b1030);
  border:3px solid #191F2E;
  /* ★ blur+contrastで玉同士がくっつく(グーイー効果) */
  filter:contrast(1.6);
}
.wd-lava i{
  position:absolute; left:50%; border-radius:50%;
  background:#FF5CA0;
  filter:blur(6px);
}
.wd-lava i:nth-child(1){
  width:44px; height:44px; margin-left:-22px;
  animation:wd-lava-a 6s ease-in-out infinite;
}
.wd-lava i:nth-child(2){
  width:30px; height:30px; margin-left:-28px;
  background:#FF7AB5;
  animation:wd-lava-b 7.5s ease-in-out infinite 1s;
}
.wd-lava i:nth-child(3){
  width:22px; height:22px; margin-left:2px;
  background:#FFA0CB;
  animation:wd-lava-c 5.4s ease-in-out infinite .4s;
}
@keyframes wd-lava-a{
  0%,100%{ top:75%; } 50%{ top:8%; }
}
@keyframes wd-lava-b{
  0%,100%{ top:70%; } 50%{ top:20%; }
}
@keyframes wd-lava-c{
  0%,100%{ top:65%; } 50%{ top:12%; }
}
</style>

<!-- blurした玉をcontrastで締めると液体のように融合する -->

<div class="wd-gooey"><b></b><i></i><i></i></div>

<style>
.wd-gooey{
  position:relative;
  display:grid; place-items:center;
  width:180px; height:110px;
  background:#F7F5EF;
  filter:contrast(14) blur(0px);
}
.wd-gooey b,
.wd-gooey i{
  position:absolute; width:34px; height:34px;
  border-radius:50%; background:#191F2E;
  filter:blur(7px);
}
.wd-gooey i:nth-of-type(1){ animation:wd-goo-a 2.4s ease-in-out infinite; }
.wd-gooey i:nth-of-type(2){ animation:wd-goo-b 2.4s ease-in-out infinite; }
@keyframes wd-goo-a{
  0%,100%{ translate:0 0; } 50%{ translate:-52px 0; }
}
@keyframes wd-goo-b{
  0%,100%{ translate:0 0; } 50%{ translate:52px 0; }
}
</style>

<!-- 親のcontrastを強くかけるのが肝。背景色は単色必須 -->

<div class="wd-wave"><i></i><i></i><b>SEA</b></div>

<style>
.wd-wave{
  position:relative; width:210px; height:130px;
  border-radius:14px; overflow:hidden;
  background:linear-gradient(#5EE7FF,#3A46E8);
}
.wd-wave i{
  position:absolute; left:-50%; width:200%; height:200%;
  top:52%;
  border-radius:42%;
  background:rgba(11,16,48,.5);
  animation:wd-wave-spin 7s linear infinite;
}
.wd-wave i:nth-child(2){
  border-radius:46%;
  background:rgba(11,16,48,.35);
  animation-duration:9.5s;
}
.wd-wave b{
  position:absolute; inset:0;
  display:grid; place-items:center;
  color:#fff; font-family:"Space Grotesk",sans-serif;
  letter-spacing:.25em;
}
/* 角丸の巨大な円を回すと縁が波に見える */
@keyframes wd-wave-spin{ to{ transform:rotate(360deg); } }
</style>

<!-- 「回る角丸長方形の縁=波」という有名トリック -->

<div class="wd-border-spin">BORDER</div>

<style>
.wd-border-spin{
  position:relative; z-index:0;   /* ★ 親にz-index:0が必須 */
  display:grid; place-items:center;
  width:170px; height:100px;
  border-radius:14px;
  background:#191F2E; color:#fff;
  font-family:"Space Grotesk",sans-serif; font-weight:700;
  overflow:hidden;
}
.wd-border-spin::before{
  content:""; position:absolute; z-index:-2;
  inset:-60%;
  background:conic-gradient(#3A46E8, #FF5CA0, #FFCF3F, #3A46E8);
  animation:wd-bs-spin 3.5s linear infinite;
}
.wd-border-spin::after{
  content:""; position:absolute; z-index:-1;
  inset:3px; border-radius:11px;
  background:#191F2E;
}
@keyframes wd-bs-spin{ to{ transform:rotate(360deg); } }
</style>

<!-- ::beforeを回し::afterで内側を塗り潰す3層構造 -->

<div class="wd-border-dash">DASHED</div>

<style>
.wd-border-dash{
  display:grid; place-items:center;
  width:170px; height:100px;
  font-family:"Space Grotesk",sans-serif; font-weight:700;
  border-radius:14px;
  background:
    linear-gradient(#F7F5EF,#F7F5EF) padding-box,
    repeating-conic-gradient(#191F2E 0 12deg, transparent 12deg 24deg) border-box;
  border:3px dashed transparent;
  animation:wd-bd-turn 14s linear infinite;
}
@keyframes wd-bd-turn{
  to{ background-position:0 0, 100% 100%; }
}
/* シンプル版:conicを回す */
.wd-border-dash{
  position:relative; z-index:0; overflow:hidden; border:none;
}
.wd-border-dash::before{
  content:""; position:absolute; z-index:-2; inset:-60%;
  background:repeating-conic-gradient(#191F2E 0 9deg, transparent 9deg 18deg);
  animation:wd-bd-spin 20s linear infinite;
}
.wd-border-dash::after{
  content:""; position:absolute; z-index:-1;
  inset:3.5px; border-radius:11px; background:#F7F5EF;
}
@keyframes wd-bd-spin{ to{ transform:rotate(360deg); } }
</style>

<!-- repeating-conicの回転=破線が周回して見える -->

<div class="wd-glow-pulse">GLOW</div>

<style>
.wd-glow-pulse{
  display:grid; place-items:center;
  width:160px; height:100px;
  border-radius:14px;
  background:#12162a;
  border:1.5px solid rgba(94,231,255,.5);
  color:#5EE7FF; letter-spacing:.2em;
  font-family:"Space Grotesk",sans-serif;
  animation:wd-glow-go 2.6s ease-in-out infinite;
}
@keyframes wd-glow-go{
  0%,100%{
    box-shadow:0 0 8px rgba(94,231,255,.25),
      inset 0 0 8px rgba(94,231,255,.1);
  }
  50%{
    box-shadow:0 0 28px rgba(94,231,255,.7),
      inset 0 0 16px rgba(94,231,255,.25);
  }
}
</style>

<div class="wd-holo"><b>HOLO</b><span>★ RARE ★</span></div>

<style>
.wd-holo{
  position:relative; overflow:hidden;
  display:grid; place-content:center; gap:4px;
  width:150px; height:110px; text-align:center;
  border-radius:14px; border:2px solid rgba(255,255,255,.5);
  background:linear-gradient(135deg,#1a1f3d,#3d1a3d);
  color:#fff; font-family:"Space Grotesk",sans-serif;
  transition:transform .3s;
}
.wd-holo b{ font-size:21px; }
.wd-holo span{ font-size:9px; letter-spacing:.3em; opacity:.8; }
.wd-holo::before{
  content:""; position:absolute; inset:-40%;
  background:linear-gradient(115deg,
    transparent 25%, rgba(255,0,128,.35) 40%,
    rgba(0,255,255,.35) 50%, rgba(255,255,0,.35) 60%,
    transparent 75%);
  animation:wd-holo-go 3.2s ease-in-out infinite;
}
.wd-holo:hover{ transform:rotate(-2deg) scale(1.05); }
@keyframes wd-holo-go{
  0%{ transform:translateX(-45%) rotate(10deg); }
  50%{ transform:translateX(45%) rotate(10deg); }
  100%{ transform:translateX(-45%) rotate(10deg); }
}
</style>

<!-- トレカ風。虹色の帯を斜めに往復させる -->

<div class="wd-neon-sign">CAF<i>E</i></div>

<style>
.wd-neon-sign{
  padding:16px 30px;
  border:3px solid #FF5CA0; border-radius:14px;
  font-family:"Space Grotesk",sans-serif;
  font-size:33px; font-weight:700; letter-spacing:.1em;
  color:#FFE9F4;
  text-shadow:0 0 7px #fff, 0 0 18px #FF5CA0, 0 0 42px #FF5CA0;
  box-shadow:0 0 18px rgba(255,92,160,.5),
    inset 0 0 14px rgba(255,92,160,.35);
}
/* 1文字だけ接触不良 */
.wd-neon-sign i{
  font-style:normal;
  animation:wd-neon-bad 4s infinite;
}
@keyframes wd-neon-bad{
  0%,18%,22%,61%,65%,100%{ opacity:1; }
  19%,63%{ opacity:.25; text-shadow:none; }
  20%,64%{ opacity:.9; }
  21%{ opacity:.3; }
}
</style>

<!-- 全部光らせず1文字壊すのがリアル -->

<div class="wd-aurora"><b>AURORA</b></div>

<style>
.wd-aurora{
  position:relative; overflow:hidden;
  display:grid; place-items:center;
  width:230px; height:130px; border-radius:14px;
  background:#0b1030;
}
.wd-aurora::before,
.wd-aurora::after{
  content:""; position:absolute; inset:-50%;
  background:
    radial-gradient(ellipse 40% 55% at 30% 40%, rgba(32,180,134,.55), transparent 65%),
    radial-gradient(ellipse 45% 60% at 70% 60%, rgba(123,92,255,.5), transparent 65%);
  filter:blur(14px);
  animation:wd-aur-a 9s ease-in-out infinite alternate;
}
.wd-aurora::after{
  background:
    radial-gradient(ellipse 38% 50% at 60% 30%, rgba(94,231,255,.4), transparent 65%);
  animation:wd-aur-b 7s ease-in-out infinite alternate;
}
.wd-aurora b{
  position:relative; color:#fff;
  font-family:"Space Grotesk",sans-serif; letter-spacing:.3em;
}
@keyframes wd-aur-a{
  to{ transform:rotate(30deg) scale(1.25) translateX(8%); }
}
@keyframes wd-aur-b{
  from{ transform:rotate(10deg); }
  to{ transform:rotate(-25deg) scale(1.3) translateY(-8%); }
}
</style>

<!-- ぼかした楕円グラデを複数ゆっくり回すだけ -->

<div class="wd-mesh"><b>MESH</b></div>

<style>
.wd-mesh{
  display:grid; place-items:center;
  width:230px; height:130px; border-radius:14px;
  color:#fff; font-family:"Space Grotesk",sans-serif; letter-spacing:.25em;
  background:
    radial-gradient(at 20% 30%, #FF5CA0 0, transparent 55%),
    radial-gradient(at 80% 20%, #FFCF3F 0, transparent 55%),
    radial-gradient(at 70% 85%, #5EE7FF 0, transparent 55%),
    radial-gradient(at 15% 80%, #7B5CFF 0, transparent 55%),
    #3A46E8;
  background-size:170% 170%;
  animation:wd-mesh-go 9s ease-in-out infinite alternate;
}
@keyframes wd-mesh-go{
  from{ background-position:0% 0%; }
  to{ background-position:100% 100%; }
}
</style>

<!-- radial-gradientを重ねてpositionを揺らす簡易メッシュ -->

<div class="wd-stripes"><b>SALE</b></div>

<style>
.wd-stripes{
  display:grid; place-items:center;
  width:220px; height:110px; border-radius:14px;
  border:2.5px solid #191F2E; overflow:hidden;
  background:linear-gradient(45deg,
    #FFCF3F 25%, #FFD968 25% 50%,
    #FFCF3F 50% 75%, #FFD968 75%);
  background-size:44px 44px;
  animation:wd-stripes-go 1s linear infinite;
}
.wd-stripes b{
  font-family:"Space Grotesk",sans-serif;
  font-size:29px; color:#191F2E;
  text-shadow:2px 2px 0 #fff;
}
@keyframes wd-stripes-go{
  to{ background-position:44px 0; }
}
</style>

<!-- 45度縞は正方タイル(44px)+タイル1枚分の移動で完全ループ -->

<div class="wd-checker"><b>いち松</b></div>

<style>
.wd-checker{
  display:grid; place-items:center;
  width:220px; height:110px; border-radius:14px;
  border:2.5px solid #191F2E;
  background:
    repeating-conic-gradient(#191F2E 0 25%, #F7F5EF 0 50%);
  background-size:36px 36px;
  animation:wd-checker-go 2.4s linear infinite;
}
.wd-checker b{
  padding:6px 16px; background:#FF5CA0; color:#fff;
  border-radius:8px; font-weight:700;
  border:2px solid #191F2E;
}
@keyframes wd-checker-go{
  to{ background-position:36px 36px; }
}
</style>

<!-- 市松はrepeating-conic 1行で描ける -->

<div class="wd-grid-retro"><i class="sun"></i><i class="floor"></i></div>

<style>
.wd-grid-retro{
  position:relative; overflow:hidden;
  width:230px; height:140px; border-radius:14px;
  background:linear-gradient(#1a0533 55%, #3d0a5c 55%);
}
.wd-grid-retro .sun{
  position:absolute; left:50%; top:14%;
  width:56px; height:56px; margin-left:-28px;
  border-radius:50%;
  background:linear-gradient(#FFCF3F, #FF5CA0);
  box-shadow:0 0 24px rgba(255,92,160,.8);
}
.wd-grid-retro .floor{
  position:absolute; left:-50%; right:-50%; top:55%; bottom:-40%;
  background:
    repeating-linear-gradient(90deg, rgba(94,231,255,.7) 0 1.5px, transparent 1.5px 26px),
    repeating-linear-gradient(0deg, rgba(94,231,255,.7) 0 1.5px, transparent 1.5px 22px);
  transform:perspective(90px) rotateX(50deg);
  animation:wd-retro-go 1.4s linear infinite;
}
@keyframes wd-retro-go{
  to{ background-position:0 22px, 0 22px; }
}
</style>

<!-- 80年代シンセウェーブ。perspective+rotateXで床を倒す -->

<div class="wd-snow"><i></i><i></i><b>❄ SNOW</b></div>

<style>
.wd-snow{
  position:relative; overflow:hidden;
  display:grid; place-items:center;
  width:220px; height:140px; border-radius:14px;
  background:linear-gradient(#1c2340,#39406b);
}
.wd-snow b{ color:#fff; letter-spacing:.2em; font-family:"Space Grotesk",sans-serif; }
/* 1つのドット+box-shadowの複製で雪片をばら撒く */
.wd-snow i{
  position:absolute; top:0; left:0;
  width:3px; height:3px; border-radius:50%;
  box-shadow:165px -112px 0 0px rgba(255,255,255,.5),
    72px -78px 0 0px rgba(255,255,255,.95),
    190px -114px 0 1px rgba(255,255,255,.5),
    141px -118px 0 1px rgba(255,255,255,.7),
    10px -133px 0 0px rgba(255,255,255,.95),
    61px -11px 0 1px rgba(255,255,255,.95),
    145px -90px 0 1px rgba(255,255,255,.5),
    181px -1px 0 0px rgba(255,255,255,.95),
    116px -69px 0 0px rgba(255,255,255,.95),
    180px -32px 0 0px rgba(255,255,255,.7),
    41px -85px 0 0px rgba(255,255,255,.95),
    25px -43px 0 0px rgba(255,255,255,.7),
    218px -52px 0 1px rgba(255,255,255,.7),
    208px -129px 0 1px rgba(255,255,255,.7);
  animation:wd-snow-fall 5s linear infinite;
}
.wd-snow i:nth-child(2){
  box-shadow:139px -109px 0 0px rgba(255,255,255,.95),
    143px -65px 0 1px rgba(255,255,255,.5),
    94px -91px 0 1px rgba(255,255,255,.95),
    13px -82px 0 0px rgba(255,255,255,.95),
    61px -115px 0 0px rgba(255,255,255,.7),
    118px -47px 0 0px rgba(255,255,255,.7),
    92px -87px 0 1px rgba(255,255,255,.7),
    181px -122px 0 1px rgba(255,255,255,.5),
    45px -4px 0 1px rgba(255,255,255,.95),
    43px -22px 0 0px rgba(255,255,255,.7),
    165px -84px 0 1px rgba(255,255,255,.7),
    217px -126px 0 0px rgba(255,255,255,.95),
    208px -60px 0 0px rgba(255,255,255,.7),
    18px -86px 0 1px rgba(255,255,255,.5);
  animation-duration:7.5s;
  animation-delay:-3s;
}
@keyframes wd-snow-fall{
  to{ transform:translateY(285px); }
}
</style>

<!-- box-shadowに座標を並べて粒子を量産する伝統芸 -->

<div class="wd-stars"><i></i><i></i><b>🌙</b></div>

<style>
.wd-stars{
  position:relative; overflow:hidden;
  width:220px; height:140px; border-radius:14px;
  background:linear-gradient(#0b1030,#1c2340);
}
.wd-stars b{ position:absolute; right:16px; top:12px; font-size:26px; }
.wd-stars i{
  position:absolute; top:0; left:0;
  width:2px; height:2px; border-radius:50%;
  box-shadow:82px 56px 0 rgba(255,255,255,.35),
    129px 103px 0 rgba(255,255,255,.35),
    119px 38px 0 rgba(255,255,255,.6),
    37px 65px 0 rgba(255,255,255,.35),
    145px 69px 0 rgba(255,255,255,.35),
    151px 111px 0 rgba(255,255,255,.35),
    104px 94px 0 rgba(255,255,255,.95),
    37px 132px 0 rgba(255,255,255,.6),
    25px 14px 0 rgba(255,255,255,.95),
    41px 42px 0 rgba(255,255,255,.35),
    110px 18px 0 rgba(255,255,255,.6),
    99px 121px 0 rgba(255,255,255,.35),
    66px 4px 0 rgba(255,255,255,.35),
    186px 31px 0 rgba(255,255,255,.35),
    139px 70px 0 rgba(255,255,255,.35),
    89px 30px 0 rgba(255,255,255,.6),
    113px 42px 0 rgba(255,255,255,.6);
  animation:wd-star-tw 2.6s ease-in-out infinite alternate;
}
.wd-stars i:nth-child(2){
  box-shadow:2px 69px 0 rgba(255,255,255,.35),
    197px 47px 0 rgba(255,255,255,.35),
    29px 78px 0 rgba(255,255,255,.35),
    131px 52px 0 rgba(255,255,255,.95),
    97px 43px 0 rgba(255,255,255,.35),
    201px 2px 0 rgba(255,255,255,.35),
    84px 127px 0 rgba(255,255,255,.95),
    30px 94px 0 rgba(255,255,255,.6),
    63px 16px 0 rgba(255,255,255,.95),
    147px 22px 0 rgba(255,255,255,.95),
    189px 126px 0 rgba(255,255,255,.95),
    196px 34px 0 rgba(255,255,255,.95),
    170px 123px 0 rgba(255,255,255,.35),
    44px 69px 0 rgba(255,255,255,.35),
    157px 110px 0 rgba(255,255,255,.95),
    140px 53px 0 rgba(255,255,255,.35),
    81px 104px 0 rgba(255,255,255,.35);
  animation-delay:-1.3s;
}
@keyframes wd-star-tw{
  from{ opacity:1; } to{ opacity:.25; }
}
</style>

<!-- 2グループを逆位相で明滅させると自然に見える -->

<div class="wd-rain"><b>☔ RAINY</b></div>

<style>
.wd-rain{
  position:relative; overflow:hidden;
  display:grid; place-items:center;
  width:220px; height:140px; border-radius:14px;
  background:linear-gradient(#39406b,#1c2340);
  color:#c9d4ff; letter-spacing:.15em;
}
.wd-rain::before,
.wd-rain::after{
  content:""; position:absolute; inset:-40% -20% 0;
  /* 雨粒=細長い光の筋。横周期を広げて「線」に見せる */
  background-image:linear-gradient(
    transparent 0 55%, rgba(210,225,255,.75) 55% 63%, transparent 63%);
  background-size:17px 110px;
  transform:rotate(11deg);
  animation:wd-rain-go .5s linear infinite;
}
.wd-rain::after{
  background-size:11px 55px;
  opacity:.45;
  animation-duration:.33s;
}
@keyframes wd-rain-go{
  to{ background-position:0 110px; }
}
</style>

<!-- 細長い線分のrepeat背景を落とすだけ -->

<div class="wd-crt"><b>SYSTEM OK_</b></div>

<style>
.wd-crt{
  position:relative; overflow:hidden;
  display:grid; place-items:center;
  width:220px; height:140px; border-radius:14px;
  background:radial-gradient(ellipse at center, #0d2818, #050f09);
}
.wd-crt b{
  font-family:"JetBrains Mono",monospace;
  color:#4ade80; font-size:17px;
  text-shadow:0 0 8px rgba(74,222,128,.8);
  animation:wd-crt-flicker 3s infinite;
}
/* 走査線 */
.wd-crt::before{
  content:""; position:absolute; inset:0;
  background:repeating-linear-gradient(
    rgba(0,0,0,.35) 0 1.5px, transparent 1.5px 4px);
  pointer-events:none;
}
/* 上下する明るい帯 */
.wd-crt::after{
  content:""; position:absolute; left:0; right:0; top:-30%;
  height:28%;
  background:linear-gradient(transparent,
    rgba(74,222,128,.09), transparent);
  animation:wd-crt-band 3.4s linear infinite;
}
@keyframes wd-crt-band{ to{ top:110%; } }
@keyframes wd-crt-flicker{
  0%,93%,100%{ opacity:1; } 95%{ opacity:.55; } 97%{ opacity:.85; }
}
</style>

<div class="wd-matrix"><i style="left:6px;animation-duration:2.57s;animation-delay:-1.69s">アイウ0エオ1カキ7ク</i><i style="left:30px;animation-duration:2.33s;animation-delay:-2.64s">アイウ0エオ1カキ7ク</i><i style="left:54px;animation-duration:1.8s;animation-delay:-1.99s">アイウ0エオ1カキ7ク</i><i style="left:78px;animation-duration:2.46s;animation-delay:-2.31s">アイウ0エオ1カキ7ク</i><i style="left:102px;animation-duration:1.8s;animation-delay:-2.79s">アイウ0エオ1カキ7ク</i><i style="left:126px;animation-duration:2.54s;animation-delay:-2.31s">アイウ0エオ1カキ7ク</i><i style="left:150px;animation-duration:3.03s;animation-delay:-0.42s">アイウ0エオ1カキ7ク</i><i style="left:174px;animation-duration:1.53s;animation-delay:-2.29s">アイウ0エオ1カキ7ク</i><i style="left:198px;animation-duration:2.6s;animation-delay:-2.36s">アイウ0エオ1カキ7ク</i></div>

<style>
.wd-matrix{
  position:relative; overflow:hidden;
  width:220px; height:150px; border-radius:14px;
  background:#02120a;
}
.wd-matrix i{
  position:absolute; top:-160px;
  width:16px;
  font-family:"JetBrains Mono",monospace;
  font-size:12px; font-style:normal; line-height:1.25;
  word-break:break-all;
  color:#4ade80;
  text-shadow:0 0 6px rgba(74,222,128,.9);
  /* 先頭だけ白く */
  background:linear-gradient(#0a3, #4ade80 85%, #eaffea);
  -webkit-background-clip:text; background-clip:text;
  color:transparent;
  animation:wd-mtx-fall linear infinite;
}
@keyframes wd-mtx-fall{
  to{ transform:translateY(330px); }
}
</style>

<!-- 列ごとにdurationとdelayを乱数で散らすのがリアルさの正体 -->

<div class="wd-pixel"><i></i></div>

<style>
.wd-pixel{
  position:relative;
  width:80px; height:80px;
  animation:wd-px-hop 1s steps(1) infinite;
}
/* 10px角のドット=box-shadow1個 */
.wd-pixel i{
  position:absolute;
  width:10px; height:10px; margin:-10px 0 0 -10px;
  box-shadow:20px 0px 0 #4ade80,
    50px 0px 0 #4ade80,
    30px 10px 0 #4ade80,
    40px 10px 0 #4ade80,
    10px 20px 0 #4ade80,
    20px 20px 0 #4ade80,
    30px 20px 0 #4ade80,
    40px 20px 0 #4ade80,
    50px 20px 0 #4ade80,
    60px 20px 0 #4ade80,
    0px 30px 0 #4ade80,
    10px 30px 0 #4ade80,
    30px 30px 0 #4ade80,
    40px 30px 0 #4ade80,
    60px 30px 0 #4ade80,
    70px 30px 0 #4ade80,
    0px 40px 0 #4ade80,
    10px 40px 0 #4ade80,
    20px 40px 0 #4ade80,
    30px 40px 0 #4ade80,
    40px 40px 0 #4ade80,
    50px 40px 0 #4ade80,
    60px 40px 0 #4ade80,
    70px 40px 0 #4ade80,
    0px 50px 0 #4ade80,
    20px 50px 0 #4ade80,
    30px 50px 0 #4ade80,
    40px 50px 0 #4ade80,
    50px 50px 0 #4ade80,
    70px 50px 0 #4ade80,
    0px 60px 0 #4ade80,
    20px 60px 0 #4ade80,
    50px 60px 0 #4ade80,
    70px 60px 0 #4ade80,
    30px 70px 0 #4ade80,
    40px 70px 0 #4ade80;
}
@keyframes wd-px-hop{
  0%{ transform:translate(10px,10px); }
  50%{ transform:translate(10px,14px); }
}
</style>

<!-- 1要素+box-shadowでドット絵が描ける。Pythonで生成すると楽 -->

<div class="wd-flipclock">
  <div class="card">
    <b class="up"><s>13</s></b>
    <b class="dn"><s>12</s></b>
    <i class="fl-top"><s>12</s></i>
    <i class="fl-btm"><s>13</s></i>
  </div>
</div>

<style>
.wd-flipclock .card{
  position:relative; width:90px; height:100px;
  perspective:400px;
  font-family:"Space Grotesk",sans-serif;
  font-size:47px; font-weight:700; color:#fff;
}
.wd-flipclock b, .wd-flipclock i{
  position:absolute; left:0; right:0;
  height:50%; overflow:hidden;
  background:#22283f; font-style:normal;
}
/* sに数字全体(高さ100px)を入れ、下半分は-50pxずらして表示 */
.wd-flipclock s{
  display:block; height:100px; line-height:100px;
  text-align:center; text-decoration:none;
}
.wd-flipclock .up{
  top:0; border-radius:9px 9px 0 0;
  border-bottom:2px solid #0b0e1c;
}
.wd-flipclock .dn{
  bottom:0; border-radius:0 0 9px 9px;
}
.wd-flipclock .dn s{ margin-top:-50px; }
/* 2枚フラップ方式(3D両面を使わないので描画が安定):
   1) 上フラップ(古い12)が中央軸で手前に倒れて消える
   2) 下フラップ(新しい13の下半分)が起き上がって着地する */
.wd-flipclock .fl-top{
  top:0; z-index:2;
  border-radius:9px 9px 0 0;
  border-bottom:2px solid #0b0e1c;
  transform-origin:bottom;
  backface-visibility:hidden;
  animation:wd-flip-top 3s cubic-bezier(.55,0,.45,1) infinite;
}
.wd-flipclock .fl-btm{
  bottom:0; z-index:2;
  border-radius:0 0 9px 9px;
  transform-origin:top;
  transform:rotateX(90deg);
  backface-visibility:hidden;
  animation:wd-flip-btm 3s cubic-bezier(.55,0,.45,1) infinite;
}
/* 下フラップは数字の下半分を見せる */
.wd-flipclock .fl-btm s{ margin-top:-50px; }
@keyframes wd-flip-top{
  0%,40%{ transform:rotateX(0); }
  58%,100%{ transform:rotateX(-90deg); }
}
@keyframes wd-flip-btm{
  0%,58%{ transform:rotateX(90deg); }
  76%,96%{ transform:rotateX(0); }
  100%{ transform:rotateX(90deg); }
}
}
}
</style>

<!-- 上半分だけ倒すとフリップ時計に見える(完全版はJSで数字入替) -->

<div class="wd-vhs"><b data-t="PLAY ▶">PLAY ▶</b><span>SP 0:12:34</span></div>

<style>
.wd-vhs{
  position:relative; overflow:hidden;
  display:grid; place-content:center; gap:6px;
  width:220px; height:140px; border-radius:14px;
  background:#101018;
}
.wd-vhs b{
  position:relative;
  font-family:"JetBrains Mono",monospace;
  font-size:25px; color:#fff;
  animation:wd-vhs-shift 2.2s steps(1) infinite;
}
.wd-vhs b::before,
.wd-vhs b::after{
  content:attr(data-t);
  position:absolute; inset:0; mix-blend-mode:screen;
}
.wd-vhs b::before{ color:#f0f; translate:2px 0; }
.wd-vhs b::after{ color:#0ff; translate:-2px 0; }
.wd-vhs span{
  font-family:"JetBrains Mono",monospace;
  font-size:11px; color:#ccc;
}
.wd-vhs::after{
  content:""; position:absolute; left:0; right:0;
  height:9px; top:20%;
  background:rgba(255,255,255,.14);
  animation:wd-vhs-track 2.2s steps(6) infinite;
}
@keyframes wd-vhs-shift{
  0%,88%,100%{ transform:none; } 90%{ transform:translateX(3px) skewX(-4deg); }
  94%{ transform:translateX(-2px); }
}
@keyframes wd-vhs-track{
  to{ top:95%; }
}
</style>

<div class="wd-dvd"><b>DVD</b></div>

<style>
.wd-dvd{
  position:relative; overflow:hidden;
  width:230px; height:140px; border-radius:14px;
  background:#0b0e1c; border:2px solid #191F2E;
}
.wd-dvd b{
  position:absolute; top:0; left:0;
  padding:5px 13px; border-radius:7px;
  background:#3A46E8; color:#fff;
  font-family:"Space Grotesk",sans-serif; font-size:14px;
  /* X方向とY方向を別周期のalternateにすると壁反射になる */
  animation:
    wd-dvd-x 3.1s linear infinite alternate,
    wd-dvd-y 2.3s linear infinite alternate,
    wd-dvd-hue 6s linear infinite;
}
@keyframes wd-dvd-x{ to{ left:calc(100% - 58px); } }
@keyframes wd-dvd-y{ to{ top:calc(100% - 32px); } }
@keyframes wd-dvd-hue{ to{ filter:hue-rotate(360deg); } }
</style>

<!-- XとYの周期を互いに素っぽくすると「角に当たる奇跡」が稀に起きる -->

<div class="wd-cradle">
  <i class="l"></i><i></i><i></i><i></i><i class="r"></i>
</div>

<style>
.wd-cradle{
  display:flex;
  padding-top:64px;
  border-top:4px solid #191F2E;
}
.wd-cradle i{
  position:relative;
  width:26px; height:26px; border-radius:50%;
  background:radial-gradient(circle at 35% 30%, #7c88f5, #3A46E8);
  border:2px solid #191F2E;
  margin:0 -1px;
}
/* 糸 */
.wd-cradle i::before{
  content:""; position:absolute;
  left:50%; bottom:100%;
  width:1.5px; height:64px;
  background:#191F2E;
}
.wd-cradle .l,
.wd-cradle .r{
  transform-origin:50% -64px;   /* 支点=糸の上端 */
}
.wd-cradle .l{ animation:wd-cr-l 1.4s cubic-bezier(.5,0,.5,1) infinite; }
.wd-cradle .r{ animation:wd-cr-r 1.4s cubic-bezier(.5,0,.5,1) infinite; }
@keyframes wd-cr-l{
  0%,50%{ rotate:0deg; }
  75%{ rotate:38deg; }
  100%{ rotate:0deg; }
}
@keyframes wd-cr-r{
  0%{ rotate:0deg; }
  25%{ rotate:-38deg; }
  50%,100%{ rotate:0deg; }
}
</style>

<!-- transform-originを糸の上端に置くのがポイント -->

<div class="wd-pendwave"><i></i><i></i><i></i><i></i><i></i><i></i><i></i></div>

<style>
.wd-pendwave{
  display:flex; gap:14px;
  padding-top:70px;
  border-top:4px solid #191F2E;
}
.wd-pendwave i{
  position:relative;
  width:18px; height:18px; border-radius:50%;
  background:#FF5CA0; border:2px solid #191F2E;
  transform-origin:50% -70px;
  animation:wd-pw-swing ease-in-out infinite alternate;
}
.wd-pendwave i::before{
  content:""; position:absolute; left:50%; bottom:100%;
  width:1.5px; height:70px; background:#191F2E;
}
.wd-pendwave i:nth-child(1){ animation-duration:1.10s; }
.wd-pendwave i:nth-child(2){ animation-duration:1.19s; }
.wd-pendwave i:nth-child(3){ animation-duration:1.28s; }
.wd-pendwave i:nth-child(4){ animation-duration:1.37s; }
.wd-pendwave i:nth-child(5){ animation-duration:1.46s; }
.wd-pendwave i:nth-child(6){ animation-duration:1.55s; }
.wd-pendwave i:nth-child(7){ animation-duration:1.64s; }
@keyframes wd-pw-swing{
  from{ rotate:32deg; } to{ rotate:-32deg; }
}
</style>

<!-- 周期を少しずつ変えると波紋→カオス→再同期を繰り返す -->

<div class="wd-solar">
  <b class="sun">☀️</b>
  <i class="o o1"><span>🌍</span></i>
  <i class="o o2"><span>🪐</span></i>
</div>

<style>
.wd-solar{
  position:relative; width:190px; height:190px;
  display:grid; place-items:center;
}
.wd-solar .sun{ font-size:34px; }
.wd-solar .o{
  position:absolute; border-radius:50%;
  border:1.5px dashed rgba(255,255,255,.25);
  animation:wd-solar-orbit linear infinite;
}
.wd-solar .o span{
  position:absolute; top:-11px; left:50%; margin-left:-11px;
  font-size:20px;
  animation:wd-solar-counter linear infinite;
  animation-duration:inherit;
}
.wd-solar .o1{ inset:34px; animation-duration:6s; }
.wd-solar .o2{ inset:4px; animation-duration:13s; }
@keyframes wd-solar-orbit{ to{ rotate:360deg; } }
/* 惑星は逆回転させて向きを固定 */
@keyframes wd-solar-counter{ to{ rotate:-360deg; } }
</style>

<div class="wd-seesaw">
  <div class="plank"><i>🐘</i><i>🐭</i></div>
  <b class="pivot"></b>
</div>

<style>
.wd-seesaw{
  display:flex; flex-direction:column; align-items:center;
}
.wd-seesaw .plank{
  display:flex; justify-content:space-between;
  width:190px; padding:0 8px 4px;
  border-bottom:7px solid #191F2E; border-radius:4px;
  transform-origin:center bottom;
  animation:wd-see-tilt 2.6s ease-in-out infinite;
}
.wd-seesaw i{ font-size:26px; font-style:normal; }
.wd-seesaw i:first-child{ animation:wd-see-l 2.6s ease-in-out infinite; }
.wd-seesaw i:last-child{ animation:wd-see-r 2.6s ease-in-out infinite; }
.wd-seesaw .pivot{
  width:0; height:0;
  border-left:16px solid transparent;
  border-right:16px solid transparent;
  border-bottom:26px solid #FF5CA0;
}
@keyframes wd-see-tilt{
  0%,100%{ rotate:7deg; } 50%{ rotate:-7deg; }
}
/* 乗ってる方は逆回転で水平を保つ */
@keyframes wd-see-l{
  0%,100%{ rotate:-7deg; } 50%{ rotate:7deg; }
}
@keyframes wd-see-r{
  0%,100%{ rotate:-7deg; translate:0 0; }
  50%{ rotate:7deg; translate:0 -4px; }
}
</style>

<div class="wd-balls"><i></i><i></i><i></i></div>

<style>
.wd-balls{
  display:flex; gap:20px; align-items:flex-end;
  height:90px;
  border-bottom:3px solid #191F2E; padding:0 10px;
}
.wd-balls i{
  width:26px; height:26px; border-radius:50%;
  animation:wd-balls-go 1.1s cubic-bezier(.35,0,.65,1) infinite;
}
.wd-balls i:nth-child(1){ background:#3A46E8; }
.wd-balls i:nth-child(2){ background:#FF5CA0; animation-delay:.18s; }
.wd-balls i:nth-child(3){ background:#FFCF3F; animation-delay:.36s; }
@keyframes wd-balls-go{
  0%,100%{ translate:0 0; scale:1 1; }
  10%{ scale:1.15 .8; }
  45%{ translate:0 -58px; scale:.95 1.06; }
  55%{ translate:0 -58px; }
}
</style>

<!-- 接地の瞬間に潰す(squash)と生きて見える -->

<div class="wd-cube3d"><div class="c">
  <i class="f1">1</i><i class="f2">2</i><i class="f3">3</i>
  <i class="f4">4</i><i class="f5">5</i><i class="f6">6</i>
</div></div>

<style>
.wd-cube3d{
  width:90px; height:90px; margin:34px;
  perspective:520px;
}
.wd-cube3d .c{
  position:relative; width:100%; height:100%;
  transform-style:preserve-3d;
  animation:wd-cube-spin 8s linear infinite;
}
.wd-cube3d i{
  position:absolute; inset:0;
  display:grid; place-items:center;
  font-family:"Space Grotesk",sans-serif;
  font-size:28px; font-weight:700; font-style:normal; color:#fff;
  border:2px solid rgba(255,255,255,.65);
  background:rgba(58,70,232,.5);
  backdrop-filter:blur(1px);
}
.wd-cube3d .f1{ transform:translateZ(45px); }
.wd-cube3d .f2{ transform:rotateY(180deg) translateZ(45px); }
.wd-cube3d .f3{ transform:rotateY(90deg) translateZ(45px); }
.wd-cube3d .f4{ transform:rotateY(-90deg) translateZ(45px); }
.wd-cube3d .f5{ transform:rotateX(90deg) translateZ(45px); }
.wd-cube3d .f6{ transform:rotateX(-90deg) translateZ(45px); }
@keyframes wd-cube-spin{
  to{ transform:rotateX(360deg) rotateY(360deg); }
}
</style>

<!-- 6面をtranslateZ(一辺の半分)で配置する基本形 -->

<div class="wd-tunnel"><i></i><i></i><i></i><i></i></div>

<style>
.wd-tunnel{
  position:relative; width:180px; height:140px;
  display:grid; place-items:center;
  overflow:hidden; border-radius:14px;
  background:#0b0e1c;
}
.wd-tunnel i{
  position:absolute;
  width:20px; height:16px;
  border:2.5px solid #5EE7FF; border-radius:8px;
  opacity:0;
  animation:wd-tun-go 2.8s linear infinite;
}
.wd-tunnel i:nth-child(2){ animation-delay:.7s; }
.wd-tunnel i:nth-child(3){ animation-delay:1.4s; }
.wd-tunnel i:nth-child(4){ animation-delay:2.1s; }
@keyframes wd-tun-go{
  0%{ transform:scale(.1); opacity:0; }
  25%{ opacity:1; }
  100%{ transform:scale(11); opacity:0; }
}
</style>

<!-- 同じ枠をscaleで飛ばして時間差再生するだけ -->

<div class="wd-text3d"><b>360°</b></div>

<style>
.wd-text3d{
  perspective:500px;
}
.wd-text3d b{
  display:inline-block;
  font-family:"Space Grotesk",sans-serif;
  font-size:47px; font-weight:700; color:#FFCF3F;
  -webkit-text-stroke:2px #191F2E;
  text-shadow:
    1px 1px 0 #191F2E, 2px 2px 0 #191F2E,
    3px 3px 0 #191F2E, 4px 4px 0 #191F2E,
    5px 5px 0 #191F2E;
  animation:wd-t3d-go 4s ease-in-out infinite;
}
@keyframes wd-t3d-go{
  0%,100%{ transform:rotateY(-24deg) rotateX(6deg); }
  50%{ transform:rotateY(24deg) rotateX(-6deg); }
}
</style>

<div class="wd-plane"><i>✈️</i></div>

<style>
.wd-plane{
  position:relative; width:230px; height:140px;
  border:2px dashed #C9CBD4; border-radius:14px;
}
.wd-plane i{
  position:absolute; font-size:25px; font-style:normal;
  /* ★ SVGパスに沿って移動+自動で向きも変わる */
  offset-path:path("M12,110 C60,10 150,10 214,70 C180,120 80,130 12,110");
  animation:wd-plane-go 5s ease-in-out infinite;
}
@keyframes wd-plane-go{
  to{ offset-distance:100%; }
}
</style>

<!-- offset-pathは曲線移動の決定版。rotateも進行方向に自動追従 -->

<div class="wd-dna"><i style="animation-delay:-0.00s"></i><i style="animation-delay:-0.22s"></i><i style="animation-delay:-0.44s"></i><i style="animation-delay:-0.66s"></i><i style="animation-delay:-0.88s"></i><i style="animation-delay:-1.10s"></i><i style="animation-delay:-1.32s"></i><i style="animation-delay:-1.54s"></i><i style="animation-delay:-1.76s"></i><i style="animation-delay:-1.98s"></i></div>

<style>
.wd-dna{
  display:flex; gap:8px; align-items:center;
  height:110px;
}
.wd-dna i{
  position:relative; width:9px; height:100%;
}
.wd-dna i::before,
.wd-dna i::after{
  content:""; position:absolute; left:0;
  width:9px; height:9px; border-radius:50%;
  animation:wd-dna-go 2.2s ease-in-out infinite;
  animation-delay:inherit;
}
.wd-dna i::before{ background:#5EE7FF; }
.wd-dna i::after{
  background:#FF5CA0;
  animation-name:wd-dna-go2;
}
/* 2本の鎖=同じ動きの逆位相 */
@keyframes wd-dna-go{
  0%,100%{ top:12%; scale:1.15; z-index:1; }
  50%{ top:78%; scale:.7; }
}
@keyframes wd-dna-go2{
  0%,100%{ top:78%; scale:.7; }
  50%{ top:12%; scale:1.15; }
}
</style>

<!-- 上下の入替時にscaleも変えると奥行きが出る -->

<div class="wd-prop-count"><b></b><span>DOWNLOADS</span></div>

<style>
@property --wd-cnt{
  syntax:"<integer>"; initial-value:0; inherits:false;
}
.wd-prop-count{ text-align:center; }
.wd-prop-count b{
  font-family:"Space Grotesk",sans-serif;
  font-size:47px; font-weight:700; color:#3A46E8;
  counter-reset:wdc var(--wd-cnt);
  animation:wd-cnt-go 3s cubic-bezier(.2,.6,.3,1) infinite;
}
.wd-prop-count b::before{ content:counter(wdc); }
.wd-prop-count b::after{ content:"+"; color:#FF5CA0; }
.wd-prop-count span{
  display:block; font-size:10px; letter-spacing:.3em; color:#5A6072;
}
@keyframes wd-cnt-go{
  0%{ --wd-cnt:0; }
  70%,100%{ --wd-cnt:12847; }
}
</style>

<!-- @propertyで型登録した変数は普通にアニメできる(Chrome/Edge/Safari) -->

<button class="wd-prop-angle">GRADIENT SPIN</button>

<style>
@property --wd-ang{
  syntax:"<angle>"; initial-value:0deg; inherits:false;
}
.wd-prop-angle{
  padding:15px 32px; border:none; border-radius:12px;
  font-family:"Space Grotesk",sans-serif;
  font-size:15px; font-weight:700; color:#fff; cursor:pointer;
  background:linear-gradient(var(--wd-ang), #3A46E8, #FF5CA0, #F59E0B);
  animation:wd-ang-go 3s linear infinite;
}
@keyframes wd-ang-go{
  to{ --wd-ang:360deg; }
}
</style>

<!-- グラデの「角度」は本来アニメ不可→@propertyで可能になる -->

<b class="wd-clip-text-bg">TOKYO</b>

<style>
.wd-clip-text-bg{
  font-family:"Space Grotesk",sans-serif;
  font-size:53px; font-weight:700; letter-spacing:-.02em;
  background:
    linear-gradient(rgba(0,0,0,.15), rgba(0,0,0,.15)),
    repeating-linear-gradient(115deg,
      #3A46E8 0 24px, #5EE7FF 24px 42px,
      #FF5CA0 42px 66px, #FFCF3F 66px 84px);
  background-size:auto, 300% 100%;
  -webkit-background-clip:text; background-clip:text;
  color:transparent;
  animation:wd-ctb-go 6s linear infinite;
}
@keyframes wd-ctb-go{
  to{ background-position:0 0, -260px 0; }
}
</style>

<!-- 実案件では背景を写真にすると「文字窓ムービー」に -->

<div class="wd-hypno"></div>

<style>
.wd-hypno{
  width:130px; height:130px; border-radius:50%;
  border:3px solid #191F2E;
  background:repeating-conic-gradient(
    #191F2E 0 20deg, #F7F5EF 20deg 40deg);
  animation:wd-hypno-go 3s linear infinite;
}
@keyframes wd-hypno-go{
  to{ rotate:360deg; }
}
</style>

<!-- repeating-conicの縞を回すだけ。見過ぎ注意 -->

<div class="wd-traffic"><i class="r"></i><i class="y"></i><i class="g"></i></div>

<style>
.wd-traffic{
  display:flex; gap:12px;
  padding:14px 18px; border-radius:16px;
  background:#22283f; border:2.5px solid #191F2E;
}
.wd-traffic i{
  width:34px; height:34px; border-radius:50%;
  background:#3a3f55;
}
.wd-traffic .r{ animation:wd-tf-r 6s steps(1) infinite; }
.wd-traffic .y{ animation:wd-tf-y 6s steps(1) infinite; }
.wd-traffic .g{ animation:wd-tf-g 6s steps(1) infinite; }
@keyframes wd-tf-g{
  0%{ background:#22c55e; box-shadow:0 0 16px #22c55e; }
  50%,100%{ background:#3a3f55; box-shadow:none; }
}
@keyframes wd-tf-y{
  0%,50%{ background:#3a3f55; box-shadow:none; }
  50.1%{ background:#FFCF3F; box-shadow:0 0 16px #FFCF3F; }
  66%,100%{ background:#3a3f55; }
}
@keyframes wd-tf-y2{ 0%{} }
@keyframes wd-tf-r{
  0%,66%{ background:#3a3f55; box-shadow:none; }
  66.1%{ background:#FF3B5C; box-shadow:0 0 16px #FF3B5C; }
  100%{ background:#3a3f55; }
}
</style>

<!-- steps(1)で「切り替わる」動きに。青→黄→赤の日本式サイクル -->

<div class="wd-firework"><i class="rocket"></i><i class="burst"></i></div>

<style>
.wd-firework{
  position:relative; width:150px; height:190px;
  overflow:hidden; border-radius:14px;
  background:linear-gradient(#0b1030,#1c2340);
}
.wd-firework .rocket{
  position:absolute; left:50%; bottom:0;
  width:4px; height:12px; margin-left:-2px;
  border-radius:3px; background:#FFCF3F;
  animation:wd-fw-up 2.6s ease-out infinite;
}
.wd-firework .burst{
  position:absolute; left:50%; top:34%;
  width:5px; height:5px; margin-left:-2.5px;
  border-radius:50%;
  animation:wd-fw-boom 2.6s ease-out infinite;
}
@keyframes wd-fw-up{
  0%{ translate:0 0; opacity:1; }
  38%{ translate:0 -118px; opacity:1; }
  40%,100%{ translate:0 -118px; opacity:0; }
}
@keyframes wd-fw-boom{
  0%,39%{ box-shadow:0 0 0 transparent; opacity:0; scale:.3; }
  42%{ opacity:1; scale:.5;
    box-shadow:8px 0px 0 #FFCF3F, 37px 15px 0 #FF5CA0, 37px 37px 0 #5EE7FF, 15px 37px 0 #A3E635, 0px 8px 0 #FFCF3F, -15px 37px 0 #FF5CA0, -37px 37px 0 #5EE7FF, -37px 15px 0 #A3E635, -8px 0px 0 #FFCF3F, -37px -15px 0 #FF5CA0, -37px -37px 0 #5EE7FF, -15px -37px 0 #A3E635, 0px -8px 0 #FFCF3F, 15px -37px 0 #FF5CA0, 37px -37px 0 #5EE7FF, 37px -15px 0 #A3E635; }
  70%{ opacity:1; scale:1;
    box-shadow:52px 0px 0 #FFCF3F, 37px 15px 0 #FF5CA0, 37px 37px 0 #5EE7FF, 15px 37px 0 #A3E635, 0px 52px 0 #FFCF3F, -15px 37px 0 #FF5CA0, -37px 37px 0 #5EE7FF, -37px 15px 0 #A3E635, -52px 0px 0 #FFCF3F, -37px -15px 0 #FF5CA0, -37px -37px 0 #5EE7FF, -15px -37px 0 #A3E635, 0px -52px 0 #FFCF3F, 15px -37px 0 #FF5CA0, 37px -37px 0 #5EE7FF, 37px -15px 0 #A3E635; }
  100%{ opacity:0; scale:1.15;
    box-shadow:52px 0px 0 #FFCF3F, 37px 15px 0 #FF5CA0, 37px 37px 0 #5EE7FF, 15px 37px 0 #A3E635, 0px 52px 0 #FFCF3F, -15px 37px 0 #FF5CA0, -37px 37px 0 #5EE7FF, -37px 15px 0 #A3E635, -52px 0px 0 #FFCF3F, -37px -15px 0 #FF5CA0, -37px -37px 0 #5EE7FF, -15px -37px 0 #A3E635, 0px -52px 0 #FFCF3F, 15px -37px 0 #FF5CA0, 37px -37px 0 #5EE7FF, 37px -15px 0 #A3E635; }
}
</style>

<!-- box-shadowの座標を三角関数で円形配置(Python生成) -->

<div class="wd-eq-circle"><i style="rotate:0deg;animation-delay:-0.00s"></i><i style="rotate:30deg;animation-delay:-0.22s"></i><i style="rotate:60deg;animation-delay:-0.44s"></i><i style="rotate:90deg;animation-delay:-0.66s"></i><i style="rotate:120deg;animation-delay:-0.00s"></i><i style="rotate:150deg;animation-delay:-0.22s"></i><i style="rotate:180deg;animation-delay:-0.44s"></i><i style="rotate:210deg;animation-delay:-0.66s"></i><i style="rotate:240deg;animation-delay:-0.00s"></i><i style="rotate:270deg;animation-delay:-0.22s"></i><i style="rotate:300deg;animation-delay:-0.44s"></i><i style="rotate:330deg;animation-delay:-0.66s"></i><b>♪</b></div>

<style>
.wd-eq-circle{
  position:relative; width:130px; height:130px;
  display:grid; place-items:center;
}
.wd-eq-circle b{ font-size:28px; color:#5EE7FF; }
.wd-eq-circle i{
  position:absolute;
  width:5px; height:100%;
}
.wd-eq-circle i::before{
  content:""; position:absolute; top:0; left:0;
  width:5px; height:20px; border-radius:3px;
  background:linear-gradient(#5EE7FF,#3A46E8);
  transform-origin:top;
  animation:wd-eqc-go .9s ease-in-out infinite alternate;
  animation-delay:inherit;
}
@keyframes wd-eqc-go{
  from{ scale:1 .3; } to{ scale:1 1.15; }
}
</style>

<!-- バーを放射状にrotate配置してscaleYを揺らす -->

<div class="wd-catwalk"><i></i></div>

<style>
.wd-catwalk{
  position:relative; width:230px; height:70px;
  overflow:hidden;
  border-bottom:3px solid #191F2E;
}
.wd-catwalk i{
  position:absolute; bottom:2px; left:-40px;
  font-size:34px; font-style:normal;
  animation:
    wd-cat-walk 6s linear infinite,
    wd-cat-frame .5s steps(1) infinite,
    wd-cat-bob .25s ease-in-out infinite alternate;
}
.wd-catwalk i::before{ content:"🐈"; }
@keyframes wd-cat-walk{
  to{ translate:280px 0; }
}
@keyframes wd-cat-frame{
  0%{ content:"🐈"; } 50%{ content:"🐈‍⬛"; }
}
.wd-catwalk i::before{
  animation:wd-cat-frame .5s steps(1) infinite;
}
@keyframes wd-cat-bob{
  from{ margin-bottom:0; } to{ margin-bottom:3px; }
}
</style>

<!-- 移動+コマ切替+上下ゆれの3アニメ合成 -->

<b class="wd-jelly-text">ぷるん</b>

<style>
.wd-jelly-text{
  display:inline-block;
  font-size:43px; font-weight:900; color:#FF5CA0;
  -webkit-text-stroke:2px #191F2E;
  animation:wd-jelly-go 1.6s cubic-bezier(.4,0,.2,1.4) infinite;
  transform-origin:center bottom;
}
@keyframes wd-jelly-go{
  0%,55%,100%{ transform:scale(1,1); }
  10%{ transform:scale(1.2,.75); }
  20%{ transform:scale(.85,1.2); }
  30%{ transform:scale(1.1,.9); }
  40%{ transform:scale(.96,1.05); }
}
</style>

<!-- X/Yを交互に潰す減衰スクワッシュ -->

<div class="wd-orbit-loading">
  <b></b><i class="o1"></i><i class="o2"></i><i class="o3"></i>
</div>

<style>
.wd-orbit-loading{
  position:relative; width:120px; height:120px;
}
.wd-orbit-loading b{
  position:absolute; inset:0; margin:auto;
  width:18px; height:18px; border-radius:50%;
  background:radial-gradient(circle at 35% 30%, #ffd968, #F59E0B);
  box-shadow:0 0 14px rgba(245,158,11,.8);
}
.wd-orbit-loading i{
  position:absolute; inset:0;
  border:1.5px solid rgba(94,231,255,.4);
  border-radius:50%;
  animation:wd-orb-spin linear infinite;
}
.wd-orbit-loading i::before{
  content:""; position:absolute; top:-4px; left:50%;
  width:8px; height:8px; margin-left:-4px;
  border-radius:50%; background:#5EE7FF;
}
.wd-orbit-loading .o1{ animation-duration:1.2s; transform:rotateX(66deg); }
.wd-orbit-loading .o2{ animation-duration:1.9s; transform:rotateX(66deg) rotateY(60deg); }
.wd-orbit-loading .o3{ animation-duration:2.6s; transform:rotateX(66deg) rotateY(-60deg); }
@keyframes wd-orb-spin{
  to{ transform:rotateX(66deg) rotate(360deg); }
}
.wd-orbit-loading .o2{ animation-name:wd-orb-spin2; }
.wd-orbit-loading .o3{ animation-name:wd-orb-spin3; }
@keyframes wd-orb-spin2{
  from{ transform:rotateX(66deg) rotateY(60deg) rotate(0); }
  to{ transform:rotateX(66deg) rotateY(60deg) rotate(360deg); }
}
@keyframes wd-orb-spin3{
  from{ transform:rotateX(66deg) rotateY(-60deg) rotate(0); }
  to{ transform:rotateX(66deg) rotateY(-60deg) rotate(360deg); }
}
</style>

<!-- 傾けた円軌道を3枚重ねると原子模型に -->

<button class="wd-magic-btn">✨ MAGIC <i>✦</i><i>✦</i><i>✦</i></button>

<style>
.wd-magic-btn{
  position:relative;
  padding:15px 34px; border:none; border-radius:14px;
  background:linear-gradient(135deg,#7B5CFF,#FF5CA0);
  color:#fff; font-size:15px; font-weight:700; cursor:pointer;
  transition:transform .2s;
}
.wd-magic-btn:hover{ transform:scale(1.05); }
.wd-magic-btn i{
  position:absolute; font-style:normal;
  color:#FFCF3F; font-size:13px;
  animation:wd-magic-fly 2.2s ease-in-out infinite;
}
.wd-magic-btn i:nth-of-type(1){ top:-6px; left:14%; }
.wd-magic-btn i:nth-of-type(2){ top:-11px; left:56%; animation-delay:.7s; }
.wd-magic-btn i:nth-of-type(3){ bottom:-9px; left:78%; animation-delay:1.4s; }
@keyframes wd-magic-fly{
  0%,100%{ opacity:0; scale:.3; rotate:0deg; }
  50%{ opacity:1; scale:1.15; rotate:180deg; translate:0 -7px; }
}
</style>

<div class="wd-confetti"><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><b>🎉</b></div>

<style>
.wd-confetti{
  position:relative; overflow:hidden;
  display:grid; place-items:center;
  width:220px; height:150px; border-radius:14px;
  background:#fff; border:2px solid #191F2E;
}
.wd-confetti b{ font-size:37px; }
.wd-confetti i{
  position:absolute; top:-14px;
  width:8px; height:12px;
  animation:wd-conf-fall linear infinite;
}
.wd-confetti i:nth-child(1){ left:37px; background:#3A46E8; border-radius:50%; animation-duration:4.36s; animation-delay:-1.11s; }
.wd-confetti i:nth-child(2){ left:151px; background:#FF5CA0;  animation-duration:4.17s; animation-delay:-2.11s; }
.wd-confetti i:nth-child(3){ left:210px; background:#FFCF3F;  animation-duration:2.79s; animation-delay:-2.37s; }
.wd-confetti i:nth-child(4){ left:172px; background:#20B486; border-radius:50%; animation-duration:3.45s; animation-delay:-2.28s; }
.wd-confetti i:nth-child(5){ left:123px; background:#7B5CFF;  animation-duration:2.71s; animation-delay:-0.54s; }
.wd-confetti i:nth-child(6){ left:171px; background:#3A46E8;  animation-duration:2.8s; animation-delay:-0.06s; }
.wd-confetti i:nth-child(7){ left:107px; background:#FF5CA0; border-radius:50%; animation-duration:4.2s; animation-delay:-1.09s; }
.wd-confetti i:nth-child(8){ left:31px; background:#FFCF3F;  animation-duration:2.98s; animation-delay:-3.01s; }
.wd-confetti i:nth-child(9){ left:118px; background:#20B486;  animation-duration:2.97s; animation-delay:-3.44s; }
.wd-confetti i:nth-child(10){ left:122px; background:#7B5CFF; border-radius:50%; animation-duration:4.45s; animation-delay:-3.0s; }
.wd-confetti i:nth-child(11){ left:117px; background:#3A46E8;  animation-duration:4.31s; animation-delay:-0.77s; }
.wd-confetti i:nth-child(12){ left:29px; background:#FF5CA0;  animation-duration:4.6s; animation-delay:-3.8s; }
.wd-confetti i:nth-child(13){ left:7px; background:#FFCF3F; border-radius:50%; animation-duration:4.45s; animation-delay:-0.12s; }
.wd-confetti i:nth-child(14){ left:64px; background:#20B486;  animation-duration:3.57s; animation-delay:-3.33s; }
.wd-confetti i:nth-child(15){ left:58px; background:#7B5CFF;  animation-duration:4.4s; animation-delay:-0.54s; }
.wd-confetti i:nth-child(16){ left:46px; background:#3A46E8; border-radius:50%; animation-duration:4.57s; animation-delay:-2.48s; }
.wd-confetti i:nth-child(17){ left:71px; background:#FF5CA0;  animation-duration:4.17s; animation-delay:-0.29s; }
.wd-confetti i:nth-child(18){ left:77px; background:#FFCF3F;  animation-duration:4.51s; animation-delay:-2.31s; }
@keyframes wd-conf-fall{
  0%{ translate:0 0; rotate:0deg; }
  25%{ translate:9px 45px; }
  50%{ translate:-7px 90px; rotate:180deg; }
  75%{ translate:8px 130px; }
  100%{ translate:-5px 175px; rotate:360deg; }
}
</style>

<!-- 左右に振りながら落とすと紙らしくなる(座標はPython生成) -->

<div class="wd-kaleido"></div>

<style>
.wd-kaleido{
  width:140px; height:140px; border-radius:50%;
  border:3px solid #191F2E;
  background:
    repeating-conic-gradient(from 0deg,
      #FF5CA0 0 15deg, #FFCF3F 15deg 30deg,
      #5EE7FF 30deg 45deg, #3A46E8 45deg 60deg);
  animation:wd-kal-spin 8s linear infinite,
    wd-kal-hue 5s linear infinite;
}
@keyframes wd-kal-spin{ to{ rotate:360deg; } }
@keyframes wd-kal-hue{ to{ filter:hue-rotate(360deg); } }
</style>

<!-- repeating-conic+hue-rotateの二重アニメ -->

<div class="wd-eye">
  <div class="e"><i></i></div><div class="e"><i></i></div>
</div>

<style>
.wd-eye{ display:flex; gap:10px; }
.wd-eye .e{
  display:grid; place-items:center;
  width:56px; height:64px;
  border-radius:50%;
  background:#fff; border:3px solid #191F2E;
  animation:wd-eye-blink 4.5s infinite;
}
.wd-eye i{
  width:20px; height:20px; border-radius:50%;
  background:radial-gradient(circle at 35% 32%, #4a5378, #191F2E 60%);
  animation:wd-eye-look 4.5s ease-in-out infinite;
}
@keyframes wd-eye-look{
  0%,18%{ translate:0 0; }
  25%,40%{ translate:-11px 3px; }
  48%,63%{ translate:11px -3px; }
  70%,85%{ translate:2px 8px; }
  92%,100%{ translate:0 0; }
}
@keyframes wd-eye-blink{
  0%,55%,59%,100%{ transform:scaleY(1); }
  57%{ transform:scaleY(.06); }
}
</style>

<!-- JSでマウス追従させる前段の「勝手にキョロキョロ」版 -->

.hero {  display: grid;  place-items: center;}

<div class="wd-typing-code">
  <div class="bar"><i></i><i></i><i></i></div>
  <pre><b class="l1">.hero {</b><b class="l2">  display: grid;</b><b class="l3">  place-items: center;</b><b class="l4">}</b></pre>
</div>

<style>
.wd-typing-code{
  width:220px; border-radius:12px; overflow:hidden;
  background:#161b2e; border:2px solid #191F2E;
}
.wd-typing-code .bar{
  display:flex; gap:6px; padding:9px 11px;
  background:#0d1122;
}
.wd-typing-code .bar i{
  width:10px; height:10px; border-radius:50%;
}
.wd-typing-code .bar i:nth-child(1){ background:#FF3B5C; }
.wd-typing-code .bar i:nth-child(2){ background:#FFCF3F; }
.wd-typing-code .bar i:nth-child(3){ background:#22c55e; }
.wd-typing-code pre{ margin:0; padding:12px 14px; }
.wd-typing-code b{
  display:block; overflow:hidden; white-space:nowrap;
  font-family:"JetBrains Mono",monospace;
  font-size:12.5px; font-weight:500; color:#8be9fd;
  width:0;
  animation:wd-code-type 6s steps(22) infinite;
}
.wd-typing-code .l1{ color:#ff79c6; animation-delay:0s; }
.wd-typing-code .l2{ animation-delay:.9s; }
.wd-typing-code .l3{ animation-delay:1.8s; }
.wd-typing-code .l4{ color:#ff79c6; animation-delay:2.7s; }
@keyframes wd-code-type{
  0%{ width:0; }
  16%,88%{ width:100%; }
  95%,100%{ width:0; }
}
</style>

<!-- 行ごとにdelayをずらしたタイピング。ポートフォリオの装飾に -->

<div class="wd-portal"><i></i><i></i><b>✦</b></div>

<style>
.wd-portal{
  position:relative; width:130px; height:130px;
  display:grid; place-items:center;
}
.wd-portal i{
  position:absolute; inset:0;
  border-radius:50%;
  background:conic-gradient(from 0deg,
    transparent 60%, #7B5CFF 82%, #5EE7FF 96%, transparent);
  animation:wd-portal-spin 1.6s linear infinite;
  filter:blur(1px);
}
.wd-portal i:nth-child(2){
  inset:18px;
  animation-duration:1.1s;
  animation-direction:reverse;
  background:conic-gradient(from 180deg,
    transparent 55%, #FF5CA0 80%, #FFCF3F 96%, transparent);
}
.wd-portal b{
  color:#fff; font-size:22px;
  animation:wd-portal-pulse 1.4s ease-in-out infinite alternate;
}
@keyframes wd-portal-spin{ to{ rotate:360deg; } }
@keyframes wd-portal-pulse{
  from{ scale:.8; opacity:.6; } to{ scale:1.25; opacity:1; }
}
</style>

<!-- 彗星の尾はconic-gradientの透明→色で作る -->

<div class="js-tilt" id="jsTilt"><b>TILT ME</b></div>

<style>
.js-tilt{
  display:grid; place-items:center;
  width:170px; height:110px; border:2px solid #191F2E; border-radius:12px; background:#fff;
  background:linear-gradient(135deg,#3A46E8,#7B5CFF);
  color:#fff; font-family:"Space Grotesk",sans-serif;
  transition:transform .15s ease-out;
  will-change:transform;
}
</style>

<script>
var el = document.getElementById('jsTilt');
el.addEventListener('mousemove', function(e){
  var r = el.getBoundingClientRect();
  var x = (e.clientX - r.left) / r.width - .5;
  var y = (e.clientY - r.top) / r.height - .5;
  el.style.transform =
    'perspective(500px) rotateY(' + (x * 22) + 'deg) rotateX(' + (-y * 22) + 'deg)';
});
el.addEventListener('mouseleave', function(){
  el.style.transform = 'perspective(500px)';
});
</script>

<!-- カーソル位置を-0.5〜0.5に正規化して角度へ変換 -->

<div class="js-spot" id="jsSpot"><b>探してみて</b></div>

<style>
.js-spot{
  position:relative; overflow:hidden;
  display:grid; place-items:center;
  width:210px; height:120px; border-radius:12px;
  background:#12162a; color:rgba(255,255,255,.25);
  font-weight:700;
}
.js-spot::before{
  content:""; position:absolute; inset:0;
  background:radial-gradient(circle 70px at var(--mx,-100px) var(--my,-100px),
    rgba(94,231,255,.35), transparent);
}
</style>

<script>
var sp = document.getElementById('jsSpot');
sp.addEventListener('mousemove', function(e){
  var r = sp.getBoundingClientRect();
  sp.style.setProperty('--mx', (e.clientX - r.left) + 'px');
  sp.style.setProperty('--my', (e.clientY - r.top) + 'px');
});
</script>

<!-- JSは座標をCSS変数に渡すだけ。描画はCSSに任せる -->

<button class="js-ripple" id="jsRipple">CLICK ME</button>

<style>
.js-ripple{
  position:relative; overflow:hidden;
  padding:11px 24px; border:2px solid #191F2E; border-radius:10px; background:#FFCF3F; font-weight:700; font-size:13.5px; cursor:pointer; font-family:inherit; background:#3A46E8; color:#fff; border:none;
  padding:15px 34px;
}
.js-ripple i{
  position:absolute; border-radius:50%;
  background:rgba(255,255,255,.55);
  transform:scale(0); pointer-events:none;
  animation:js-rip-go .6s ease-out forwards;
}
@keyframes js-rip-go{
  to{ transform:scale(3.2); opacity:0; }
}
</style>

<script>
document.getElementById('jsRipple').addEventListener('click', function(e){
  var r = this.getBoundingClientRect();
  var d = Math.max(r.width, r.height);
  var i = document.createElement('i');
  i.style.width = i.style.height = d + 'px';
  i.style.left = (e.clientX - r.left - d / 2) + 'px';
  i.style.top = (e.clientY - r.top - d / 2) + 'px';
  this.appendChild(i);
  setTimeout(function(){ i.remove(); }, 650);
});
</script>

<!-- マテリアルデザインの波紋。クリック座標に円を生成 -->

<div class="js-reveal" id="jsReveal">
  <p class="hint">↓ スクロール(全ブラウザ対応版)</p>
  <div class="pad"></div>
  <div class="bx">BOX 1</div>
  <div class="bx">BOX 2</div>
  <div class="bx">BOX 3</div>
  <div class="pad"></div>
</div>

<style>
.js-reveal{
  width:100%; max-width:270px; height:190px; overflow-y:auto;
  border:2px solid #191F2E; border-radius:12px; background:#fff;
}
.js-reveal .hint{ padding:13px 14px; font-size:11.5px; color:#5A6072; margin:0; }
.js-reveal .pad{ height:70px; }
.js-reveal .bx{
  width:72%; height:60px; margin:56px auto;
  display:grid; place-items:center;
  border-radius:12px; background:#FF5CA0;
  color:#fff; font-weight:700;
  opacity:0; translate:0 34px;
  transition:opacity .7s ease, translate .7s ease;
}
.js-reveal .bx.show{ opacity:1; translate:0 0; }
</style>

<script>
var root = document.getElementById('jsReveal');
var io = new IntersectionObserver(function(es){
  es.forEach(function(en){
    if(en.isIntersecting) en.target.classList.add('show');
  });
}, { root: root, threshold: .35 });
root.querySelectorAll('.bx').forEach(function(b){ io.observe(b); });
</script>

<!-- CSSのview()非対応ブラウザも含めた実務の定番。classを付けるだけ -->

<div class="js-hidehead" id="jsHideHead">
  <header>HEADER</header>
  <p>下スクロールで隠れて…</p><p>上に戻すと現れます。</p><p>スマホサイトの定番。</p><p>差分の符号だけ見れば実装できます。</p>
</div>

<style>
.js-hidehead{
  width:250px; height:190px; overflow-y:auto;
  border:2px solid #191F2E; border-radius:12px; background:#fff;
}
.js-hidehead header{
  position:sticky; top:0; z-index:2;
  padding:13px 16px;
  background:#191F2E; color:#fff;
  font-family:"Space Grotesk",sans-serif; font-weight:700;
  transition:translate .3s ease;
}
.js-hidehead header.hide{ translate:0 -110%; }
.js-hidehead p{ padding:34px 16px; margin:0; font-size:13px; }
</style>

<script>
var box = document.getElementById('jsHideHead');
var head = box.querySelector('header');
var last = 0;
box.addEventListener('scroll', function(){
  var y = box.scrollTop;
  head.classList.toggle('hide', y > last && y > 40);
  last = y;
});
</script>

<div class="js-count" id="jsCount">
  <b data-to="1284">0</b><span>DOWNLOADS</span>
  <button type="button">リプレイ</button>
</div>

<style>
.js-count{ text-align:center; }
.js-count b{
  display:block;
  font-family:"Space Grotesk",sans-serif;
  font-size:44px; font-weight:700; color:#3A46E8;
}
.js-count span{ font-size:10px; letter-spacing:.3em; color:#5A6072; }
.js-count button{
  display:block; margin:10px auto 0;
  padding:7px 18px; font-size:12px;
  padding:11px 24px; border:2px solid #191F2E; border-radius:10px; background:#FFCF3F; font-weight:700; font-size:13.5px; cursor:pointer; font-family:inherit;
}
</style>

<script>
(function(){
  var wrap = document.getElementById('jsCount');
  var num = wrap.querySelector('b');
  function run(){
    var to = +num.dataset.to, t0 = performance.now();
    function step(t){
      var p = Math.min((t - t0) / 1400, 1);
      p = 1 - Math.pow(1 - p, 3);   // easeOutCubic
      num.textContent = Math.round(to * p).toLocaleString();
      if(p < 1) requestAnimationFrame(step);
    }
    requestAnimationFrame(step);
  }
  new IntersectionObserver(function(es, ob){
    if(es[0].isIntersecting){ run(); ob.disconnect(); }
  }, { threshold:.5 }).observe(wrap);
  wrap.querySelector('button').addEventListener('click', run);
})();
</script>

<!-- rAF+イージング関数。setIntervalよりなめらか -->

<div class="js-magnet-area" id="jsMagnetArea"><button class="js-magnet">吸い付く</button></div>

<style>
.js-magnet-area{
  display:grid; place-items:center;
  width:210px; height:130px;
  border:2px dashed #C9CBD4; border-radius:12px;
}
.js-magnet{
  padding:11px 24px; border:2px solid #191F2E; border-radius:10px; background:#FFCF3F; font-weight:700; font-size:13.5px; cursor:pointer; font-family:inherit; border-radius:99px;
  transition:translate .2s cubic-bezier(.3,1.2,.4,1);
}
</style>

<script>
var area = document.getElementById('jsMagnetArea');
var btn = area.querySelector('.js-magnet');
area.addEventListener('mousemove', function(e){
  var r = btn.getBoundingClientRect();
  var dx = e.clientX - (r.left + r.width / 2);
  var dy = e.clientY - (r.top + r.height / 2);
  btn.style.translate = (dx * .3) + 'px ' + (dy * .3) + 'px';
});
area.addEventListener('mouseleave', function(){
  btn.style.translate = '0 0';
});
</script>

<!-- ボタン中心との差分×0.3だけ寄せる。離れたら戻す -->

<div class="js-trail" id="jsTrail"><b>ここで動かして</b></div>

<style>
.js-trail{
  position:relative; overflow:hidden;
  display:grid; place-items:center;
  width:230px; height:130px; border-radius:12px;
  background:#12162a; color:rgba(255,255,255,.4);
  font-size:12px; cursor:crosshair;
}
.js-trail i{
  position:absolute; pointer-events:none;
  width:9px; height:9px; border-radius:50%;
  background:#5EE7FF;
  animation:js-trail-fade .7s ease-out forwards;
}
@keyframes js-trail-fade{
  to{ scale:0; opacity:0; }
}
</style>

<script>
var tr = document.getElementById('jsTrail');
tr.addEventListener('mousemove', function(e){
  var r = tr.getBoundingClientRect();
  var i = document.createElement('i');
  i.style.left = (e.clientX - r.left - 4) + 'px';
  i.style.top = (e.clientY - r.top - 4) + 'px';
  i.style.background = 'hsl(' + (Date.now() / 8 % 360) + ' 90% 65%)';
  tr.appendChild(i);
  setTimeout(function(){ i.remove(); }, 720);
});
</script>

<!-- mousemoveごとに粒を生成→CSSアニメで消す。色相は時刻で回す -->

<div class="js-mousepara" id="jsPara">
  <i data-d="14">☁️</i><i data-d="30" class="mt">🗻</i><i data-d="55" class="tr">🌲</i>
</div>

<style>
.js-mousepara{
  position:relative; overflow:hidden;
  width:230px; height:140px; border-radius:12px;
  background:linear-gradient(#bfe3ff,#eaf6ff);
}
.js-mousepara i{
  position:absolute; font-style:normal;
  transition:translate .25s ease-out;
}
.js-mousepara i:first-child{ top:12px; left:30px; font-size:26px; }
.js-mousepara .mt{ top:38px; left:80px; font-size:60px; }
.js-mousepara .tr{ bottom:6px; left:150px; font-size:36px; }
</style>

<script>
var pa = document.getElementById('jsPara');
pa.addEventListener('mousemove', function(e){
  var r = pa.getBoundingClientRect();
  var x = (e.clientX - r.left) / r.width - .5;
  var y = (e.clientY - r.top) / r.height - .5;
  pa.querySelectorAll('i').forEach(function(i){
    var d = +i.dataset.d;
    i.style.translate = (-x * d) + 'px ' + (-y * d) + 'px';
  });
});
</script>

<!-- data-dで層ごとの移動量を変えると奥行きが出る -->

<b class="js-scramble" id="jsScramble" data-text="CREATIVE">CREATIVE</b>

<style>
.js-scramble{
  font-family:"JetBrains Mono",monospace;
  font-size:29px; font-weight:700; color:#191F2E;
  cursor:default; letter-spacing:.04em;
}
</style>

<script>
(function(){
  var el = document.getElementById('jsScramble');
  var chars = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ#$%&@!?';
  var busy = false;
  el.addEventListener('mouseenter', function(){
    if(busy) return; busy = true;
    var target = el.dataset.text, frame = 0;
    var iv = setInterval(function(){
      el.textContent = target.split('').map(function(c, i){
        return i < frame / 3 ? c
          : chars[Math.floor(Math.random() * chars.length)];
      }).join('');
      if(frame++ > target.length * 3){
        clearInterval(iv); el.textContent = target; busy = false;
      }
    }, 30);
  });
})();
</script>

<!-- 左から確定させつつ残りをランダム文字にするのがコツ -->

<b class="js-type">Webサイト制作<i id="jsType"></i></b>

<style>
.js-type{
  font-size:20px; font-weight:700;
  display:inline-flex; gap:6px;
}
.js-type i{
  font-style:normal; color:#3A46E8;
  border-right:2.5px solid #3A46E8;
  padding-right:2px;
  animation:js-type-caret .7s step-end infinite;
  min-height:1.4em;
}
@keyframes js-type-caret{ 50%{ border-color:transparent; } }
</style>

<script>
(function(){
  var el = document.getElementById('jsType');
  var words = ['はじめます。', 'たのしみます。', 'きわめます。'];
  var w = 0, c = 0, del = false;
  (function tick(){
    var word = words[w];
    c += del ? -1 : 1;
    el.textContent = word.slice(0, c);
    var wait = del ? 45 : 110;
    if(!del && c === word.length){ del = true; wait = 1400; }
    if(del && c === 0){ del = false; w = (w + 1) % words.length; wait = 350; }
    setTimeout(tick, wait);
  })();
})();
</script>

<!-- 打つ→待つ→消す→次の語、の状態機械 -->

<div class="js-clock-d"><b id="jsClockD">--:--:--</b><span id="jsClockDate">----</span></div>

<style>
.js-clock-d{
  text-align:center; padding:18px 26px;
  border-radius:14px; background:#0b0e1c;
}
.js-clock-d b{
  display:block;
  font-family:"JetBrains Mono",monospace;
  font-size:33px; color:#5EE7FF;
  text-shadow:0 0 12px rgba(94,231,255,.6);
  font-variant-numeric:tabular-nums;
}
.js-clock-d span{ font-size:11px; color:#9aa0b4; }
</style>

<script>
(function(){
  var t = document.getElementById('jsClockD');
  var d = document.getElementById('jsClockDate');
  var days = ['日','月','火','水','木','金','土'];
  function pad(n){ return String(n).padStart(2, '0'); }
  function tick(){
    var n = new Date();
    t.textContent = pad(n.getHours()) + ':' + pad(n.getMinutes()) + ':' + pad(n.getSeconds());
    d.textContent = (n.getMonth() + 1) + '/' + n.getDate() + ' (' + days[n.getDay()] + ')';
  }
  tick(); setInterval(tick, 1000);
})();
</script>

<!-- tabular-numsで数字幅を揃えるとガタつかない -->

<div class="js-clock-a" id="jsClockA">
  <i class="h"></i><i class="m"></i><i class="s"></i><b></b>
</div>

<style>
.js-clock-a{
  position:relative; width:110px; height:110px;
  border-radius:50%;
  background:#fff; border:3px solid #191F2E;
  background-image:
    radial-gradient(circle at center, transparent 82%, transparent 83%),
    repeating-conic-gradient(#191F2E 0 1.2deg, transparent 1.2deg 30deg);
  background-clip:border-box;
}
.js-clock-a::before{
  content:""; position:absolute; inset:6px;
  border-radius:50%; background:#fff;
}
.js-clock-a i{
  position:absolute; left:50%; bottom:50%;
  transform-origin:bottom center; border-radius:3px;
}
.js-clock-a .h{ width:5px; height:26px; margin-left:-2.5px; background:#191F2E; }
.js-clock-a .m{ width:3.5px; height:38px; margin-left:-1.75px; background:#191F2E; }
.js-clock-a .s{ width:2px; height:44px; margin-left:-1px; background:#FF3B5C; }
.js-clock-a b{
  position:absolute; inset:0; margin:auto;
  width:9px; height:9px; border-radius:50%;
  background:#191F2E;
}
</style>

<script>
(function(){
  var c = document.getElementById('jsClockA');
  var h = c.querySelector('.h'), m = c.querySelector('.m'), s = c.querySelector('.s');
  function tick(){
    var n = new Date();
    var sec = n.getSeconds() + n.getMilliseconds() / 1000;
    var min = n.getMinutes() + sec / 60;
    var hr = n.getHours() % 12 + min / 60;
    s.style.rotate = sec * 6 + 'deg';
    m.style.rotate = min * 6 + 'deg';
    h.style.rotate = hr * 30 + 'deg';
    requestAnimationFrame(tick);
  }
  tick();
})();
</script>

<!-- ミリ秒も混ぜてrAFで回すと秒針がスイープ運針になる -->

<div class="js-countdown" id="jsCd">
  <p>セール終了まで</p>
  <div class="row">
    <b><i id="jsCdH">00</i><span>時間</span></b>
    <b><i id="jsCdM">00</i><span>分</span></b>
    <b><i id="jsCdS">00</i><span>秒</span></b>
  </div>
</div>

<style>
.js-countdown{ text-align:center; }
.js-countdown p{ margin:0 0 8px; font-size:12px; font-weight:700; }
.js-countdown .row{ display:flex; gap:8px; }
.js-countdown b{
  display:grid; gap:1px; padding:10px 13px; min-width:58px;
  border-radius:10px; background:#191F2E; color:#fff;
}
.js-countdown i{
  font-family:"Space Grotesk",sans-serif;
  font-size:24px; font-style:normal;
  font-variant-numeric:tabular-nums;
}
.js-countdown span{ font-size:9.5px; color:#9aa0b4; }
</style>

<script>
(function(){
  var eh = document.getElementById('jsCdH'),
      em = document.getElementById('jsCdM'),
      es = document.getElementById('jsCdS');
  function pad(n){ return String(n).padStart(2, '0'); }
  function tick(){
    var now = new Date();
    var end = new Date(now); end.setHours(24, 0, 0, 0);  // 今日の24時まで
    var diff = Math.max(0, end - now) / 1000;
    eh.textContent = pad(Math.floor(diff / 3600));
    em.textContent = pad(Math.floor(diff % 3600 / 60));
    es.textContent = pad(Math.floor(diff % 60));
  }
  tick(); setInterval(tick, 1000);
})();
</script>

<!-- 締切日時をDateで持ち、差分を時分秒に分解 -->

<div class="js-tabs" id="jsTabs">
  <div class="bar">
    <button class="on" data-p="0">概要</button>
    <button data-p="1">特徴</button>
    <button data-p="2">価格</button>
  </div>
  <div class="panes">
    <div class="on">JSでclassを付け替える最少構成のタブです。</div>
    <div>data属性でボタンとパネルを対応付け。</div>
    <div>月額980円からご利用いただけます。</div>
  </div>
</div>

<style>
.js-tabs{ width:250px; }
.js-tabs .bar{ display:flex; gap:6px; }
.js-tabs .bar button{
  flex:1; padding:9px 4px;
  border:2px solid #191F2E; border-bottom:none;
  border-radius:10px 10px 0 0;
  background:#EDEAE0; font-size:12.5px; font-weight:700;
  cursor:pointer; font-family:inherit;
  transition:background .25s;
}
.js-tabs .bar button.on{ background:#3A46E8; color:#fff; }
.js-tabs .panes{
  border:2px solid #191F2E; border-radius:0 0 10px 10px;
  background:#fff; padding:14px; font-size:12.5px; min-height:56px;
}
.js-tabs .panes > div{ display:none; }
.js-tabs .panes > div.on{
  display:block;
  animation:js-tabs-in .3s ease;
}
@keyframes js-tabs-in{ from{ opacity:0; translate:0 5px; } }
</style>

<script>
(function(){
  var root = document.getElementById('jsTabs');
  var btns = root.querySelectorAll('.bar button');
  var panes = root.querySelectorAll('.panes > div');
  btns.forEach(function(b){
    b.addEventListener('click', function(){
      btns.forEach(function(x){ x.classList.remove('on'); });
      panes.forEach(function(x){ x.classList.remove('on'); });
      b.classList.add('on');
      panes[+b.dataset.p].classList.add('on');
    });
  });
})();
</script>

<div class="js-copy">
  <code id="jsCopyText">npm i css-anim-lab</code>
  <button id="jsCopyBtn">📋</button>
</div>

<style>
.js-copy{
  display:flex; align-items:center; gap:0;
  border:2px solid #191F2E; border-radius:11px; overflow:hidden;
}
.js-copy code{
  padding:12px 16px; background:#191F2E; color:#8be9fd;
  font-family:"JetBrains Mono",monospace; font-size:13px;
}
.js-copy button{
  align-self:stretch; padding:0 15px;
  border:none; background:#FFCF3F;
  font-size:16px; cursor:pointer;
  transition:background .25s;
}
</style>

<script>
(function(){
  var btn = document.getElementById('jsCopyBtn');
  btn.addEventListener('click', function(){
    navigator.clipboard.writeText(
      document.getElementById('jsCopyText').textContent
    ).then(function(){
      btn.textContent = '✅';
      setTimeout(function(){ btn.textContent = '📋'; }, 1200);
    });
  });
})();
</script>

<!-- navigator.clipboardはhttps(またはlocalhost)で動作 -->

<div class="js-tip-follow" id="jsTipArea">
  この枠の中を動かしてみて
  <i id="jsTipEl">追いかけてます 👀</i>
</div>

<style>
.js-tip-follow{
  position:relative; overflow:hidden;
  display:grid; place-items:center;
  width:240px; height:120px;
  border:2px dashed #C9CBD4; border-radius:12px;
  font-size:12.5px; color:#5A6072; cursor:crosshair;
}
.js-tip-follow i{
  position:absolute; top:0; left:0; pointer-events:none;
  padding:6px 12px; border-radius:8px;
  background:#191F2E; color:#fff;
  font-size:11px; font-style:normal; white-space:nowrap;
  opacity:0; transition:opacity .2s;
}
</style>

<script>
(function(){
  var area = document.getElementById('jsTipArea');
  var tip = document.getElementById('jsTipEl');
  area.addEventListener('mousemove', function(e){
    var r = area.getBoundingClientRect();
    tip.style.opacity = 1;
    tip.style.translate =
      (e.clientX - r.left + 14) + 'px ' + (e.clientY - r.top + 14) + 'px';
  });
  area.addEventListener('mouseleave', function(){ tip.style.opacity = 0; });
})();
</script>

<div class="js-dragscroll" id="jsDrag">
  <i>🗻</i><i>🌊</i><i>🌸</i><i>🍁</i><i>⛩️</i><i>🎑</i>
</div>

<style>
.js-dragscroll{
  display:flex; gap:10px;
  width:250px; overflow-x:auto;
  padding:6px; cursor:grab;
  scrollbar-width:none;
  border-radius:12px;
}
.js-dragscroll::-webkit-scrollbar{ display:none; }
.js-dragscroll.grabbing{ cursor:grabbing; }
.js-dragscroll i{
  flex:none; display:grid; place-items:center;
  width:100px; height:110px; font-size:32px; font-style:normal;
  border-radius:10px; border:2px solid #191F2E;
  background:linear-gradient(135deg,#EEF0FF,#FFE3EF);
  user-select:none;
}
</style>

<script>
(function(){
  var el = document.getElementById('jsDrag');
  var down = false, sx = 0, sl = 0;
  el.addEventListener('pointerdown', function(e){
    down = true; sx = e.clientX; sl = el.scrollLeft;
    el.classList.add('grabbing'); el.setPointerCapture(e.pointerId);
  });
  el.addEventListener('pointermove', function(e){
    if(down) el.scrollLeft = sl - (e.clientX - sx);
  });
  ['pointerup','pointercancel'].forEach(function(ev){
    el.addEventListener(ev, function(){
      down = false; el.classList.remove('grabbing');
    });
  });
})();
</script>

<!-- pointer系イベント+setPointerCaptureでマウスもタッチも共通化 -->

<div class="js-spy" id="jsSpy">
  <nav><a class="on">A</a><a>B</a><a>C</a></nav>
  <div class="body">
    <section>セクションA。下にスクロールするとナビが追従して切り替わります。</section>
    <section>セクションB。IntersectionObserverが交差を監視。</section>
    <section>セクションC。目次のハイライトはこの仕組みです。</section>
  </div>
</div>

<style>
.js-spy{
  display:flex; width:260px; height:190px;
  border:2px solid #191F2E; border-radius:12px; background:#fff; overflow:hidden;
}
.js-spy nav{
  display:flex; flex-direction:column; gap:6px;
  padding:10px; background:#F2F0E8;
}
.js-spy nav a{
  display:grid; place-items:center;
  width:34px; height:34px; border-radius:9px;
  font-weight:700; font-size:13px;
  background:#fff; border:1.5px solid #C9CBD4;
  transition:all .25s;
}
.js-spy nav a.on{
  background:#3A46E8; color:#fff; border-color:#3A46E8;
  scale:1.08;
}
.js-spy .body{ flex:1; overflow-y:auto; }
.js-spy section{
  min-height:100%; padding:16px; font-size:12px;
}
.js-spy section:nth-child(2){ background:#FFF8E1; }
</style>

<script>
(function(){
  var root = document.getElementById('jsSpy');
  var links = root.querySelectorAll('nav a');
  var secs = root.querySelectorAll('section');
  var io = new IntersectionObserver(function(es){
    es.forEach(function(en){
      if(en.isIntersecting){
        var idx = Array.prototype.indexOf.call(secs, en.target);
        links.forEach(function(l, i){ l.classList.toggle('on', i === idx); });
      }
    });
  }, { root: root.querySelector('.body'), threshold:.6 });
  secs.forEach(function(s){ io.observe(s); });
})();
</script>

<b class="js-split" id="jsSplit">アニメーション!</b>

<style>
.js-split{
  font-size:27px; font-weight:900; cursor:pointer;
  user-select:none;
}
.js-split span{
  display:inline-block;
  animation:js-split-in .6s cubic-bezier(.3,1.4,.4,1) both;
}
@keyframes js-split-in{
  from{ opacity:0; translate:0 26px; rotate:18deg; scale:.4; }
}
</style>

<script>
(function(){
  var el = document.getElementById('jsSplit');
  function split(){
    var text = el.textContent;
    el.innerHTML = '';
    text.split('').forEach(function(ch, i){
      var s = document.createElement('span');
      s.textContent = ch;
      s.style.animationDelay = i * 60 + 'ms';
      el.appendChild(s);
    });
  }
  split();
  el.addEventListener('click', split);
})();
</script>

<!-- JSは1文字ずつspan化してdelayを振るだけ。動きはCSS -->

<div class="js-burst" id="jsBurst">ここをクリック連打!</div>

<style>
.js-burst{
  position:relative; overflow:hidden;
  display:grid; place-items:center;
  width:240px; height:130px;
  border:2px dashed #FF5CA0; border-radius:12px;
  font-size:13px; font-weight:700; color:#FF5CA0;
  cursor:pointer; user-select:none;
}
.js-burst i{
  position:absolute; pointer-events:none;
  font-size:18px; font-style:normal;
  animation:js-burst-fly .8s ease-out forwards;
}
@keyframes js-burst-fly{
  to{
    translate:var(--dx) var(--dy);
    opacity:0; scale:1.6; rotate:var(--rot);
  }
}
</style>

<script>
(function(){
  var area = document.getElementById('jsBurst');
  var emo = ['🎉','✨','💖','⭐','🎊','🌸'];
  area.addEventListener('click', function(e){
    var r = area.getBoundingClientRect();
    for(var k = 0; k < 8; k++){
      var i = document.createElement('i');
      i.textContent = emo[Math.floor(Math.random() * emo.length)];
      i.style.left = (e.clientX - r.left - 9) + 'px';
      i.style.top = (e.clientY - r.top - 9) + 'px';
      var ang = Math.random() * Math.PI * 2, d = 40 + Math.random() * 50;
      i.style.setProperty('--dx', Math.cos(ang) * d + 'px');
      i.style.setProperty('--dy', Math.sin(ang) * d + 'px');
      i.style.setProperty('--rot', (Math.random() * 360 - 180) + 'deg');
      area.appendChild(i);
      setTimeout(function(el){ el.remove(); }.bind(null, i), 850);
    }
  });
})();
</script>

<!-- 方向はCSS変数--dx/--dyで渡してCSSに飛ばさせる -->

<div class="js-cursor" id="jsCursorArea">
  <span>この中は輪っかカーソル</span>
  <b>hover me</b>
  <i id="jsCursorEl"></i>
</div>

<style>
.js-cursor{
  position:relative; overflow:hidden; cursor:none;
  display:grid; place-content:center; gap:12px;
  justify-items:center;
  width:240px; height:140px; border-radius:12px;
  background:#12162a; color:#9aa0b4; font-size:12px;
}
.js-cursor b{
  padding:8px 20px; border-radius:99px;
  border:1.5px solid #5EE7FF; color:#5EE7FF;
  font-size:12px; cursor:none;
}
.js-cursor i{
  position:absolute; top:0; left:0; pointer-events:none;
  width:28px; height:28px; margin:-14px 0 0 -14px;
  border:2px solid #5EE7FF; border-radius:50%;
  opacity:0;
  transition:scale .25s ease, opacity .2s, background .25s;
}
.js-cursor i.big{
  scale:1.8; background:rgba(94,231,255,.18);
}
</style>

<script>
(function(){
  var area = document.getElementById('jsCursorArea');
  var cur = document.getElementById('jsCursorEl');
  area.addEventListener('mousemove', function(e){
    var r = area.getBoundingClientRect();
    cur.style.opacity = 1;
    cur.style.translate = (e.clientX - r.left) + 'px ' + (e.clientY - r.top) + 'px';
    cur.classList.toggle('big', e.target.tagName === 'B');
  });
  area.addEventListener('mouseleave', function(){ cur.style.opacity = 0; });
})();
</script>

<!-- cursor:noneで本物を消し、hover対象でサイズを変える -->

<div class="js-charcount">
  <textarea id="jsCcTa" maxlength="60" rows="3" placeholder="60文字まで入力できます"></textarea>
  <b><i id="jsCcNum">0</i> / 60</b>
</div>

<style>
.js-charcount{ width:230px; }
.js-charcount textarea{
  width:100%; padding:11px 13px; resize:none;
  border:2px solid #191F2E; border-radius:10px;
  font-size:13px; font-family:inherit; outline:none;
  box-sizing:border-box;
}
.js-charcount textarea:focus{ border-color:#3A46E8; }
.js-charcount b{
  display:block; text-align:right;
  font-size:11.5px; color:#5A6072; margin-top:4px;
  font-family:"Space Grotesk",sans-serif;
}
.js-charcount b.warn i{ color:#FF3B5C; }
.js-charcount i{ font-style:normal; transition:color .3s; }
</style>

<script>
(function(){
  var ta = document.getElementById('jsCcTa');
  var num = document.getElementById('jsCcNum');
  ta.addEventListener('input', function(){
    num.textContent = ta.value.length;
    num.parentElement.classList.toggle('warn', ta.value.length >= 50);
  });
})();
</script>

<!-- 残り少なくなったら色を変えて警告 -->

<div class="js-pwd-strength">
  <input type="password" id="jsPwsIn" placeholder="パスワードを入力">
  <div class="bar"><i id="jsPwsBar"></i></div>
  <span id="jsPwsLabel">未入力</span>
</div>

<style>
.js-pwd-strength{ width:220px; }
.js-pwd-strength input{
  width:100%; box-sizing:border-box;
  padding:11px 13px; border:2px solid #191F2E;
  border-radius:10px; font-size:13px; outline:none; font-family:inherit;
}
.js-pwd-strength .bar{
  height:8px; margin-top:8px;
  border-radius:99px; background:#E7E4DA; overflow:hidden;
}
.js-pwd-strength .bar i{
  display:block; height:100%; width:0;
  border-radius:99px; background:#FF3B5C;
  transition:width .4s ease, background .4s;
}
.js-pwd-strength span{
  font-size:11px; color:#5A6072; font-weight:700;
}
</style>

<script>
(function(){
  var inp = document.getElementById('jsPwsIn');
  var bar = document.getElementById('jsPwsBar');
  var lab = document.getElementById('jsPwsLabel');
  inp.addEventListener('input', function(){
    var v = inp.value, s = 0;
    if(v.length >= 8) s++;
    if(/[A-Z]/.test(v)) s++;
    if(/[0-9]/.test(v)) s++;
    if(/[^A-Za-z0-9]/.test(v)) s++;
    var conf = [
      ['未入力', 0, '#FF3B5C'], ['弱い', 25, '#FF3B5C'],
      ['まあまあ', 50, '#F59E0B'], ['強い', 75, '#20B486'],
      ['最強!', 100, '#20B486']
    ][v ? s : 0];
    lab.textContent = conf[0];
    bar.style.width = conf[1] + '%';
    bar.style.background = conf[2];
  });
})();
</script>

<!-- 長さ・大文字・数字・記号の4条件で加点 -->

<div class="js-pwd-toggle">
  <input type="password" id="jsPtIn" value="himitsu123">
  <button id="jsPtBtn" type="button">👁</button>
</div>

<style>
.js-pwd-toggle{
  display:flex; width:220px;
  border:2px solid #191F2E; border-radius:11px; overflow:hidden;
}
.js-pwd-toggle input{
  flex:1; min-width:0; padding:12px 13px;
  border:none; outline:none; font-size:13.5px; font-family:inherit;
}
.js-pwd-toggle button{
  padding:0 14px; border:none;
  background:#F2F0E8; cursor:pointer; font-size:15px;
  border-left:2px solid #191F2E;
}
</style>

<script>
(function(){
  var inp = document.getElementById('jsPtIn');
  var btn = document.getElementById('jsPtBtn');
  btn.addEventListener('click', function(){
    var show = inp.type === 'password';
    inp.type = show ? 'text' : 'password';
    btn.textContent = show ? '🙈' : '👁';
  });
})();
</script>

<!-- type属性をtext⇄passwordで切替 -->

<div class="js-filter">
  <input type="text" id="jsFilterIn" placeholder="🔍 都市名で絞り込み">
  <ul id="jsFilterList">
    <li>東京</li><li>大阪</li><li>名古屋</li><li>福岡</li><li>札幌</li>
  </ul>
</div>

<style>
.js-filter{ width:210px; }
.js-filter input{
  width:100%; box-sizing:border-box;
  padding:10px 13px; border:2px solid #191F2E;
  border-radius:10px; font-size:13px; outline:none; font-family:inherit;
}
.js-filter ul{
  list-style:none; margin:8px 0 0; padding:0;
}
.js-filter li{
  padding:9px 13px; margin-bottom:5px;
  background:#fff; border:1.5px solid #E7E4DA;
  border-radius:8px; font-size:13px; font-weight:700;
  transition:opacity .25s, scale .25s;
}
.js-filter li.hide{
  opacity:.18; scale:.96;
}
</style>

<script>
(function(){
  var inp = document.getElementById('jsFilterIn');
  var items = document.querySelectorAll('#jsFilterList li');
  inp.addEventListener('input', function(){
    var q = inp.value.trim();
    items.forEach(function(li){
      li.classList.toggle('hide', q && li.textContent.indexOf(q) === -1);
    });
  });
})();
</script>

<!-- display:noneではなく薄くすると位置関係が保たれて分かりやすい -->

<div class="js-todo">
  <div class="row">
    <input type="text" id="jsTodoIn" placeholder="やること">
    <button id="jsTodoAdd" type="button">＋</button>
  </div>
  <ul id="jsTodoList"><li>クリックで完了⇄戻す</li></ul>
</div>

<style>
.js-todo{ width:220px; }
.js-todo .row{ display:flex; gap:6px; }
.js-todo input{
  flex:1; min-width:0; padding:10px 12px;
  border:2px solid #191F2E; border-radius:10px;
  font-size:13px; outline:none; font-family:inherit;
}
.js-todo .row button{
  width:42px; border:2px solid #191F2E; border-radius:10px;
  background:#3A46E8; color:#fff; font-size:17px; cursor:pointer;
}
.js-todo ul{ list-style:none; margin:9px 0 0; padding:0; }
.js-todo li{
  padding:9px 12px; margin-bottom:5px;
  background:#fff; border:1.5px solid #E7E4DA; border-radius:8px;
  font-size:13px; cursor:pointer;
  animation:js-todo-in .3s cubic-bezier(.3,1.3,.4,1);
}
.js-todo li.done{
  text-decoration:line-through; color:#9aa0b4;
  background:#F2F0E8;
}
@keyframes js-todo-in{ from{ opacity:0; translate:0 -8px; } }
</style>

<script>
(function(){
  var inp = document.getElementById('jsTodoIn');
  var list = document.getElementById('jsTodoList');
  function add(){
    var v = inp.value.trim();
    if(!v) return;
    var li = document.createElement('li');
    li.textContent = v;
    list.prepend(li);
    inp.value = '';
  }
  document.getElementById('jsTodoAdd').addEventListener('click', add);
  inp.addEventListener('keydown', function(e){ if(e.key === 'Enter') add(); });
  list.addEventListener('click', function(e){
    if(e.target.tagName === 'LI') e.target.classList.toggle('done');
  });
})();
</script>

<!-- リストへのイベントはliではなくulに委譲(delegation) -->

<div class="js-smooth" id="jsSmooth">
  <div class="btns">
    <button data-t="0">TOP</button>
    <button data-t="mid">中央</button>
    <button data-t="end">末尾</button>
  </div>
  <div class="body">
    <p>ここがTOP</p><p id="jsSmoothMid" style="background:#FFF8E1">ここが中央</p><p>ここが末尾</p>
  </div>
</div>

<style>
.js-smooth{
  width:250px; height:190px; overflow:hidden;
  border:2px solid #191F2E; border-radius:12px; background:#fff; display:flex; flex-direction:column;
}
.js-smooth .btns{
  display:flex; gap:6px; padding:9px;
  background:#191F2E;
}
.js-smooth .btns button{
  flex:1; padding:7px; border:none; border-radius:8px;
  background:rgba(255,255,255,.14); color:#fff;
  font-size:11.5px; font-weight:700; cursor:pointer; font-family:inherit;
  transition:background .25s;
}
.js-smooth .btns button:hover{ background:#3A46E8; }
.js-smooth .body{ flex:1; overflow-y:auto; }
.js-smooth p{ padding:80px 16px; margin:0; font-size:13px; font-weight:700; }
</style>

<script>
(function(){
  var root = document.getElementById('jsSmooth');
  var body = root.querySelector('.body');
  root.querySelectorAll('button').forEach(function(b){
    b.addEventListener('click', function(){
      var t = b.dataset.t;
      var top = t === '0' ? 0
        : t === 'end' ? body.scrollHeight
        : document.getElementById('jsSmoothMid').offsetTop - 40;
      body.scrollTo({ top: top, behavior: 'smooth' });
    });
  });
})();
</script>

<!-- scrollTo({behavior:"smooth"})。位置計算だけJSで -->

<div class="js-lightbox" id="jsLb">
  <div class="ths"><i>🗻</i><i>🌊</i><i>🌸</i></div>
  <div class="veil" id="jsLbVeil"><b id="jsLbBig">🗻</b></div>
</div>

<style>
.js-lightbox{ position:relative; }
.js-lightbox .ths{ display:flex; gap:8px; }
.js-lightbox .ths i{
  display:grid; place-items:center;
  width:66px; height:56px; font-size:24px; font-style:normal;
  border-radius:9px; border:2px solid #191F2E;
  background:linear-gradient(135deg,#EEF0FF,#FFE3EF);
  cursor:zoom-in; transition:transform .2s;
}
.js-lightbox .ths i:hover{ transform:scale(1.08); }
.js-lightbox .veil{
  position:absolute; inset:-24px; z-index:5;
  display:grid; place-items:center;
  background:rgba(25,31,46,.82);
  border-radius:14px; cursor:zoom-out;
  opacity:0; visibility:hidden;
  transition:opacity .3s, visibility .3s;
}
.js-lightbox .veil b{
  font-size:74px;
  scale:.5; transition:scale .3s cubic-bezier(.3,1.3,.4,1);
}
.js-lightbox .veil.open{ opacity:1; visibility:visible; }
.js-lightbox .veil.open b{ scale:1; }
</style>

<script>
(function(){
  var veil = document.getElementById('jsLbVeil');
  var big = document.getElementById('jsLbBig');
  document.querySelectorAll('#jsLb .ths i').forEach(function(t){
    t.addEventListener('click', function(){
      big.textContent = t.textContent;
      veil.classList.add('open');
    });
  });
  veil.addEventListener('click', function(){ veil.classList.remove('open'); });
})();
</script>

<!-- 実案件ではimgのsrcを差し替える。開閉演出はCSS -->

<div class="js-dice">
  <b id="jsDiceFace">🎲</b>
  <button id="jsDiceBtn" type="button">振る!</button>
</div>

<style>
.js-dice{ text-align:center; }
.js-dice b{
  display:block; font-size:56px; line-height:1.1;
}
.js-dice b.roll{
  animation:js-dice-roll .5s ease;
}
.js-dice button{ padding:11px 24px; border:2px solid #191F2E; border-radius:10px; background:#FFCF3F; font-weight:700; font-size:13.5px; cursor:pointer; font-family:inherit; margin-top:8px; }
@keyframes js-dice-roll{
  25%{ transform:rotate(90deg) scale(1.15); }
  50%{ transform:rotate(200deg) scale(.9); }
  75%{ transform:rotate(300deg) scale(1.1); }
  100%{ transform:rotate(360deg); }
}
</style>

<script>
(function(){
  var face = document.getElementById('jsDiceFace');
  var faces = ['⚀','⚁','⚂','⚃','⚄','⚅'];
  document.getElementById('jsDiceBtn').addEventListener('click', function(){
    face.classList.remove('roll');
    void face.offsetWidth;   // ★ アニメを再発火させるリフロー技
    face.classList.add('roll');
    var n = 0;
    var iv = setInterval(function(){
      face.textContent = faces[Math.floor(Math.random() * 6)];
      if(++n > 8) clearInterval(iv);
    }, 55);
  });
})();
</script>

<!-- void offsetWidthで同じアニメを何度でも再生できる -->

<div class="js-range-bubble">
  <b id="jsRbBubble">50</b>
  <input type="range" id="jsRbIn" min="0" max="100" value="50">
</div>

<style>
.js-range-bubble{
  position:relative; width:220px; padding-top:36px;
}
.js-range-bubble b{
  position:absolute; top:0; left:50%;
  translate:-50% 0;
  min-width:34px; padding:4px 6px; text-align:center;
  border-radius:8px; background:#191F2E; color:#FFCF3F;
  font-family:"Space Grotesk",sans-serif; font-size:13px;
}
.js-range-bubble b::after{
  content:""; position:absolute; top:100%; left:50%;
  margin-left:-5px;
  border:5px solid transparent; border-top-color:#191F2E;
}
.js-range-bubble input{
  -webkit-appearance:none; appearance:none;
  width:100%; height:8px; border-radius:99px;
  background:#E7E4DA; outline:none; cursor:pointer;
}
.js-range-bubble input::-webkit-slider-thumb{
  -webkit-appearance:none;
  width:22px; height:22px; border-radius:50%;
  background:#fff; border:3px solid #3A46E8;
}
</style>

<script>
(function(){
  var r = document.getElementById('jsRbIn');
  var b = document.getElementById('jsRbBubble');
  function move(){
    b.textContent = r.value;
    var p = (r.value - r.min) / (r.max - r.min);
    b.style.left = 'calc(' + p * 100 + '% + ' + (11 - p * 22) + 'px)';
  }
  r.addEventListener('input', move); move();
})();
</script>

<!-- つまみ幅の分だけ補正するとバブルが正確に追従する -->

<div class="js-stopwatch">
  <b id="jsSwTime">00:00.0</b>
  <div class="row">
    <button id="jsSwStart" type="button">▶</button>
    <button id="jsSwReset" type="button">↺</button>
  </div>
</div>

<style>
.js-stopwatch{ text-align:center; }
.js-stopwatch b{
  display:block;
  font-family:"JetBrains Mono",monospace;
  font-size:33px; font-variant-numeric:tabular-nums;
}
.js-stopwatch .row{ display:flex; gap:8px; justify-content:center; margin-top:8px; }
.js-stopwatch button{
  width:52px; padding:9px 0; font-size:15px;
  padding:11px 24px; border:2px solid #191F2E; border-radius:10px; background:#FFCF3F; font-weight:700; font-size:13.5px; cursor:pointer; font-family:inherit;
}
.js-stopwatch button#jsSwReset{ background:#fff; }
</style>

<script>
(function(){
  var disp = document.getElementById('jsSwTime');
  var btn = document.getElementById('jsSwStart');
  var t0 = 0, acc = 0, raf = null;
  function fmt(ms){
    var m = Math.floor(ms / 60000), s = Math.floor(ms % 60000 / 1000);
    return String(m).padStart(2,'0') + ':' + String(s).padStart(2,'0')
      + '.' + Math.floor(ms % 1000 / 100);
  }
  function loop(){
    disp.textContent = fmt(acc + (performance.now() - t0));
    raf = requestAnimationFrame(loop);
  }
  btn.addEventListener('click', function(){
    if(raf){ acc += performance.now() - t0;
      cancelAnimationFrame(raf); raf = null; btn.textContent = '▶'; }
    else { t0 = performance.now(); loop(); btn.textContent = '⏸'; }
  });
  document.getElementById('jsSwReset').addEventListener('click', function(){
    if(raf){ cancelAnimationFrame(raf); raf = null; }
    acc = 0; btn.textContent = '▶'; disp.textContent = '00:00.0';
  });
})();
</script>

<!-- performance.now()基準なら一時停止も正確 -->

<div class="js-flipcard" id="jsFlip"><div class="in">
  <i class="f">タップ!</i><i class="b">やあ 👋</i>
</div></div>

<style>
.js-flipcard{
  width:150px; height:100px; perspective:700px; cursor:pointer;
}
.js-flipcard .in{
  position:relative; width:100%; height:100%;
  transform-style:preserve-3d;
  transition:transform .6s cubic-bezier(.4,.2,.2,1);
}
.js-flipcard.flip .in{ transform:rotateY(180deg); }
.js-flipcard i{
  position:absolute; inset:0;
  display:grid; place-items:center;
  font-style:normal; font-weight:700;
  border-radius:12px; border:2px solid #191F2E;
  backface-visibility:hidden;
}
.js-flipcard .f{ background:#FFCF3F; }
.js-flipcard .b{ background:#3A46E8; color:#fff; transform:rotateY(180deg); }
</style>

<script>
document.getElementById('jsFlip').addEventListener('click', function(){
  this.classList.toggle('flip');
});
</script>

<!-- hover版と違いタッチ端末でも確実に動く -->

<div class="js-quote">
  <blockquote id="jsQuoteText">ボタンを押してね</blockquote>
  <button id="jsQuoteBtn" type="button">🎰 引く</button>
</div>

<style>
.js-quote{ width:230px; text-align:center; }
.js-quote blockquote{
  margin:0 0 10px; padding:16px 14px;
  border-radius:12px; border:2px solid #191F2E; border-radius:12px; background:#fff;
  font-size:13px; font-weight:700; min-height:40px;
  display:grid; place-items:center;
}
.js-quote blockquote.pop{
  animation:js-quote-pop .4s cubic-bezier(.3,1.4,.4,1);
}
.js-quote button{ padding:11px 24px; border:2px solid #191F2E; border-radius:10px; background:#FFCF3F; font-weight:700; font-size:13.5px; cursor:pointer; font-family:inherit; }
@keyframes js-quote-pop{
  0%{ scale:.85; opacity:0; } 100%{ scale:1; opacity:1; }
}
</style>

<script>
(function(){
  var quotes = [
    '完璧より完成 🚀', '迷ったらシンプルな方へ',
    '動くものを毎日1つ', 'コードは読む時間の方が長い',
    'まず紙に書け ✏️'
  ];
  var q = document.getElementById('jsQuoteText');
  document.getElementById('jsQuoteBtn').addEventListener('click', function(){
    q.textContent = quotes[Math.floor(Math.random() * quotes.length)];
    q.classList.remove('pop'); void q.offsetWidth;
    q.classList.add('pop');
  });
})();
</script>

<div class="js-color" id="jsColorCard">
  <input type="color" id="jsColorIn" value="#3A46E8">
  <b id="jsColorHex">#3A46E8</b>
</div>

<style>
.js-color{
  display:flex; flex-direction:column; gap:10px;
  align-items:center;
  width:190px; padding:22px;
  border-radius:14px; border:2px solid #191F2E;
  background:#3A46E8;
  transition:background .3s;
}
.js-color input{
  width:64px; height:64px; padding:0;
  border:3px solid #fff; border-radius:50%;
  cursor:pointer; background:none;
}
.js-color b{
  padding:5px 14px; border-radius:8px;
  background:rgba(255,255,255,.92);
  font-family:"JetBrains Mono",monospace; font-size:14px;
}
</style>

<script>
(function(){
  var inp = document.getElementById('jsColorIn');
  var card = document.getElementById('jsColorCard');
  var hex = document.getElementById('jsColorHex');
  inp.addEventListener('input', function(){
    card.style.background = inp.value;
    hex.textContent = inp.value.toUpperCase();
  });
})();
</script>

<!-- input type="color"はネイティブのピッカーが開く -->

<canvas class="js-wave-canvas" id="jsWave" width="230" height="120"></canvas>

<style>
.js-wave-canvas{
  border-radius:12px;
  background:#0b1030;
  width:230px; height:120px;
}
</style>

<script>
(function(){
  var cv = document.getElementById('jsWave');
  var ctx = cv.getContext('2d');
  var t = 0;
  (function draw(){
    ctx.clearRect(0, 0, 230, 120);
    [['#5EE7FF', 1, 14, 0], ['#3A46E8', 1.6, 10, 2], ['#FF5CA0', 2.2, 7, 4]]
    .forEach(function(w){
      ctx.beginPath();
      for(var x = 0; x <= 230; x += 3){
        var y = 60 + Math.sin(x * .035 * w[1] + t + w[3]) * w[2]
                   + Math.sin(x * .012 + t * .7) * 8;
        x === 0 ? ctx.moveTo(x, y) : ctx.lineTo(x, y);
      }
      ctx.strokeStyle = w[0]; ctx.lineWidth = 2; ctx.stroke();
    });
    t += .04;
    requestAnimationFrame(draw);
  })();
})();
</script>

<!-- sin波を2つ足すと自然なゆらぎになる -->

<canvas class="js-particles" id="jsPart" width="230" height="140"></canvas>

<style>
.js-particles{
  border-radius:12px; background:#12162a;
  width:230px; height:140px;
}
</style>

<script>
(function(){
  var cv = document.getElementById('jsPart');
  var ctx = cv.getContext('2d');
  var ps = [];
  for(var i = 0; i < 16; i++){
    ps.push({ x: Math.random() * 230, y: Math.random() * 140,
      vx: (Math.random() - .5) * .7, vy: (Math.random() - .5) * .7 });
  }
  (function draw(){
    ctx.clearRect(0, 0, 230, 140);
    ps.forEach(function(p){
      p.x += p.vx; p.y += p.vy;
      if(p.x < 0 || p.x > 230) p.vx *= -1;
      if(p.y < 0 || p.y > 140) p.vy *= -1;
      ctx.fillStyle = '#5EE7FF';
      ctx.fillRect(p.x - 1.5, p.y - 1.5, 3, 3);
    });
    for(var a = 0; a < ps.length; a++){
      for(var b = a + 1; b < ps.length; b++){
        var dx = ps[a].x - ps[b].x, dy = ps[a].y - ps[b].y;
        var d = Math.hypot(dx, dy);
        if(d < 55){
          ctx.strokeStyle = 'rgba(94,231,255,' + (1 - d / 55) * .5 + ')';
          ctx.beginPath();
          ctx.moveTo(ps[a].x, ps[a].y); ctx.lineTo(ps[b].x, ps[b].y);
          ctx.stroke();
        }
      }
    }
    requestAnimationFrame(draw);
  })();
})();
</script>

<!-- 距離が近い点同士だけ線で結ぶ。透明度=距離で滑らかに -->

<div class="js-draw">
  <canvas id="jsDrawCv" width="230" height="130"></canvas>
  <button id="jsDrawClear" type="button">クリア</button>
</div>

<style>
.js-draw{ text-align:center; }
.js-draw canvas{
  border:2px solid #191F2E; border-radius:12px;
  background:#fff; cursor:crosshair;
  width:230px; height:130px;
  touch-action:none;
}
.js-draw button{
  margin-top:7px; padding:6px 18px; font-size:12px;
  padding:11px 24px; border:2px solid #191F2E; border-radius:10px; background:#FFCF3F; font-weight:700; font-size:13.5px; cursor:pointer; font-family:inherit; background:#fff;
}
</style>

<script>
(function(){
  var cv = document.getElementById('jsDrawCv');
  var ctx = cv.getContext('2d');
  ctx.lineWidth = 3; ctx.lineCap = 'round';
  var down = false;
  function pos(e){
    var r = cv.getBoundingClientRect();
    return [(e.clientX - r.left) * cv.width / r.width,
            (e.clientY - r.top) * cv.height / r.height];
  }
  cv.addEventListener('pointerdown', function(e){
    down = true;
    ctx.strokeStyle = 'hsl(' + Math.random() * 360 + ' 80% 55%)';
    ctx.beginPath(); ctx.moveTo.apply(ctx, pos(e));
  });
  cv.addEventListener('pointermove', function(e){
    if(!down) return;
    ctx.lineTo.apply(ctx, pos(e)); ctx.stroke();
  });
  window.addEventListener('pointerup', function(){ down = false; });
  document.getElementById('jsDrawClear').addEventListener('click', function(){
    ctx.clearRect(0, 0, cv.width, cv.height);
  });
})();
</script>

<!-- pointerイベントならマウス・タッチ・ペン全対応 -->

<div class="js-greeting"><b id="jsGreetIcon">☀️</b><span id="jsGreetText">こんにちは!</span></div>

<style>
.js-greeting{
  display:inline-flex; align-items:center; gap:12px;
  padding:16px 26px; border-radius:14px;
  border:2px solid #191F2E; border-radius:12px; background:#fff;
}
.js-greeting b{
  font-size:31px;
  animation:js-greet-bob 2.6s ease-in-out infinite;
}
.js-greeting span{ font-size:17px; font-weight:900; }
@keyframes js-greet-bob{
  0%,100%{ rotate:-6deg; } 50%{ rotate:6deg; translate:0 -3px; }
}
</style>

<script>
(function(){
  var h = new Date().getHours();
  var g = h < 5 ? ['🌙','夜ふかしですね…']
    : h < 11 ? ['🌅','おはようございます!']
    : h < 18 ? ['☀️','こんにちは!']
    : ['🌆','こんばんは!'];
  document.getElementById('jsGreetIcon').textContent = g[0];
  document.getElementById('jsGreetText').textContent = g[1];
})();
</script>

<!-- ファーストビューに入れると「気が利いてる感」が出る小技 -->

<div class="js-progress-all" id="jsProgAll">
  <i id="jsProgBar"></i>
  <p>CSSのanimation-timeline非対応ブラウザでも動く保険のJS版。</p>
  <p>scrollTop ÷ (scrollHeight - clientHeight) で進捗率が出ます。</p>
  <p>横幅のscaleXに反映するだけ。</p>
</div>

<style>
.js-progress-all{
  position:relative;
  width:260px; height:190px; overflow-y:auto;
  border:2px solid #191F2E; border-radius:12px; background:#fff;
}
.js-progress-all i{
  position:sticky; top:0; z-index:2;
  display:block; height:6px;
  background:linear-gradient(90deg,#20B486,#5EE7FF);
  transform-origin:left; transform:scaleX(0);
}
.js-progress-all p{ padding:34px 16px; margin:0; font-size:13px; }
</style>

<script>
(function(){
  var box = document.getElementById('jsProgAll');
  var bar = document.getElementById('jsProgBar');
  box.addEventListener('scroll', function(){
    var p = box.scrollTop / (box.scrollHeight - box.clientHeight);
    bar.style.transform = 'scaleX(' + p + ')';
  }, { passive: true });
})();
</script>

<!-- passive:trueでスクロール性能を落とさない -->

<div class="js-shake-form" id="jsShakeForm">
  <b id="jsLockIcon">🔒</b>
  <div class="row">
    <input type="text" id="jsShakeIn" placeholder="合言葉は「css」">
    <button id="jsShakeBtn" type="button">→</button>
  </div>
</div>

<style>
.js-shake-form{ text-align:center; }
.js-shake-form b{ display:block; font-size:37px; margin-bottom:8px; }
.js-shake-form .row{
  display:inline-flex;
  border:2px solid #191F2E; border-radius:11px; overflow:hidden;
}
.js-shake-form input{
  width:150px; padding:11px 13px;
  border:none; outline:none; font-size:13px; font-family:inherit;
}
.js-shake-form button{
  padding:0 16px; border:none;
  background:#191F2E; color:#fff; font-size:15px; cursor:pointer;
}
.js-shake-form .row.ng{
  animation:js-shake-ng .45s ease;
  border-color:#FF3B5C;
}
@keyframes js-shake-ng{
  20%{ translate:-8px 0; } 40%{ translate:7px 0; }
  60%{ translate:-5px 0; } 80%{ translate:3px 0; }
}
</style>

<script>
(function(){
  var row = document.querySelector('#jsShakeForm .row');
  var inp = document.getElementById('jsShakeIn');
  var icon = document.getElementById('jsLockIcon');
  function check(){
    if(inp.value.trim().toLowerCase() === 'css'){
      icon.textContent = '🔓'; row.classList.remove('ng');
    } else {
      row.classList.remove('ng'); void row.offsetWidth;
      row.classList.add('ng');
    }
  }
  document.getElementById('jsShakeBtn').addEventListener('click', check);
  inp.addEventListener('keydown', function(e){ if(e.key === 'Enter') check(); });
})();
</script>

<div class="js-slider-auto" id="jsSlider">
  <div class="win"><div class="belt"><i></i><i></i><i></i></div></div>
  <div class="dots"><b class="on"></b><b></b><b></b></div>
</div>

<style>
.js-slider-auto .win{
  width:230px; height:110px;
  border-radius:12px; overflow:hidden; border:2px solid #191F2E;
}
.js-slider-auto .belt{
  display:flex; width:300%; height:100%;
  transition:translate .55s cubic-bezier(.6,0,.2,1);
}
.js-slider-auto i{
  width:calc(100%/3); display:grid; place-items:center;
  font-size:36px; font-style:normal;
}
.js-slider-auto i:nth-child(1){ background:url(01.jpg) center/cover; }
.js-slider-auto i:nth-child(2){ background:url(02.jpg) center/cover; }
.js-slider-auto i:nth-child(3){ background:url(03.jpg) center/cover; }
.js-slider-auto .dots{
  display:flex; gap:8px; justify-content:center; margin-top:9px;
}
.js-slider-auto .dots b{
  width:10px; height:10px; border-radius:50%;
  background:#C9CBD4; cursor:pointer; transition:all .3s;
}
.js-slider-auto .dots b.on{ background:#3A46E8; scale:1.35; }
</style>

<script>
(function(){
  var root = document.getElementById('jsSlider');
  var belt = root.querySelector('.belt');
  var dots = root.querySelectorAll('.dots b');
  var cur = 0, iv;
  function go(n){
    cur = (n + 3) % 3;
    belt.style.translate = (-cur * 100 / 3) + '% 0';
    dots.forEach(function(d, i){ d.classList.toggle('on', i === cur); });
  }
  function auto(){ iv = setInterval(function(){ go(cur + 1); }, 2600); }
  dots.forEach(function(d, i){
    d.addEventListener('click', function(){
      clearInterval(iv); go(i); auto();   // 手動操作でタイマーをリセット
    });
  });
  auto();
})();
</script>

<!-- 手動操作したらタイマーを仕切り直すのが気持ちよさの秘訣 -->

<div class="js-accordion" id="jsAcc">
  <div class="it">
    <button type="button">JSで高さを測る利点は? <i>▾</i></button>
    <div class="bd"><p>scrollHeightを測ってheightに入れるので、中身が何行でもピッタリ開閉します。</p></div>
  </div>
  <div class="it">
    <button type="button">複数同時に開ける? <i>▾</i></button>
    <div class="bd"><p>この実装は独立開閉。排他にしたければ開く前に他を閉じます。</p></div>
  </div>
</div>

<style>
.js-accordion{ width:250px; }
.js-accordion .it{
  border:2px solid #191F2E; border-radius:11px;
  background:#fff; margin-bottom:8px; overflow:hidden;
}
.js-accordion button{
  display:flex; justify-content:space-between; align-items:center;
  width:100%; padding:12px 14px;
  border:none; background:none; text-align:left;
  font-size:13px; font-weight:700; cursor:pointer; font-family:inherit;
}
.js-accordion button i{
  font-style:normal; color:#3A46E8; transition:rotate .3s;
}
.js-accordion .it.open button i{ rotate:-180deg; }
.js-accordion .bd{
  height:0; overflow:hidden;
  transition:height .35s ease;
}
.js-accordion .bd p{
  margin:0; padding:0 14px 13px;
  font-size:12.5px; color:#5A6072;
}
</style>

<script>
(function(){
  document.querySelectorAll('#jsAcc .it').forEach(function(it){
    var bd = it.querySelector('.bd');
    it.querySelector('button').addEventListener('click', function(){
      var open = it.classList.toggle('open');
      bd.style.height = open ? bd.scrollHeight + 'px' : '0';
    });
  });
})();
</script>

<!-- CSSのgrid 0fr方式が使えない古い環境向けの堅実な実装 -->

<div class="js-lazy-blur" id="jsLazy">
  <p class="hint">↓ スクロールすると順に「読み込まれる」</p>
  <i class="ph a"></i>
  <i class="ph b"></i>
  <i class="ph c"></i>
</div>

<style>
.js-lazy-blur{
  width:100%; max-width:270px; height:190px; overflow-y:auto;
  border:2px solid #191F2E; border-radius:12px; background:#fff;
}
.js-lazy-blur .hint{ padding:12px 14px; font-size:11.5px; color:#5A6072; margin:0; }
.js-lazy-blur .ph{
  display:grid; place-items:center;
  width:78%; height:96px; margin:24px auto;
  border-radius:12px; font-size:34px; font-style:normal;
  filter:blur(14px); scale:1.06;
  transition:filter .9s ease, scale .9s ease;
}
.js-lazy-blur .a{ background:url(01.jpg) center/cover; }
.js-lazy-blur .b{ background:url(02.jpg) center/cover; }
.js-lazy-blur .c{ background:url(03.jpg) center/cover; }
.js-lazy-blur .ph.loaded{ filter:blur(0); scale:1; }
</style>

<script>
(function(){
  var root = document.getElementById('jsLazy');
  var io = new IntersectionObserver(function(es){
    es.forEach(function(en){
      if(en.isIntersecting){
        setTimeout(function(){ en.target.classList.add('loaded'); }, 350);
        io.unobserve(en.target);
      }
    });
  }, { root: root, threshold:.4 });
  root.querySelectorAll('.ph').forEach(function(p){ io.observe(p); });
})();
</script>

<!-- 実案件はdata-srcを本物のsrcに差し替え+blur解除 -->

<div class="js-clickcombo">
  <button id="jsComboBtn" type="button">PUSH!</button>
  <b id="jsComboNum">0 <span>combo</span></b>
</div>

<style>
.js-clickcombo{ text-align:center; }
.js-clickcombo button{
  padding:18px 38px; font-size:17px;
  border-radius:99px; padding:11px 24px; border:2px solid #191F2E; border-radius:10px; background:#FFCF3F; font-weight:700; font-size:13.5px; cursor:pointer; font-family:inherit;
  background:#FF5CA0; color:#fff; border:none;
  box-shadow:0 6px 0 #c23375;
  transition:translate .06s, box-shadow .06s;
}
.js-clickcombo button:active{
  translate:0 5px; box-shadow:0 1px 0 #c23375;
}
.js-clickcombo b{
  display:block; margin-top:12px;
  font-family:"Space Grotesk",sans-serif; font-size:27px;
  color:#3A46E8;
}
.js-clickcombo b.bump{ animation:js-combo-bump .25s ease; }
.js-clickcombo span{ font-size:12px; color:#5A6072; }
@keyframes js-combo-bump{ 40%{ scale:1.35; rotate:-4deg; } }
</style>

<script>
(function(){
  var num = document.getElementById('jsComboNum');
  var n = 0, timer;
  document.getElementById('jsComboBtn').addEventListener('click', function(){
    n++;
    num.firstChild.textContent = n + ' ';
    num.classList.remove('bump'); void num.offsetWidth;
    num.classList.add('bump');
    clearTimeout(timer);
    timer = setTimeout(function(){   // 1.2秒止まるとリセット
      n = 0; num.firstChild.textContent = '0 ';
    }, 1200);
  });
})();
</script>

<!-- setTimeoutを毎回張り直す=「途切れ判定」の基本形 -->

<div class="js-gradient-gen">
  <div class="prev" id="jsGgPrev"></div>
  <button id="jsGgBtn" type="button">🎨 ガチャ</button>
  <code id="jsGgCode">click!</code>
</div>

<style>
.js-gradient-gen{ width:220px; text-align:center; }
.js-gradient-gen .prev{
  height:86px; border-radius:12px;
  border:2px solid #191F2E;
  background:url(01.jpg) center/cover;
  transition:background .5s;
}
.js-gradient-gen button{
  margin:9px 0 6px; padding:8px 22px; font-size:13px;
  padding:11px 24px; border:2px solid #191F2E; border-radius:10px; background:#FFCF3F; font-weight:700; font-size:13.5px; cursor:pointer; font-family:inherit;
}
.js-gradient-gen code{
  display:block;
  font-family:"JetBrains Mono",monospace;
  font-size:9.5px; color:#5A6072;
  word-break:break-all;
}
</style>

<script>
(function(){
  var prev = document.getElementById('jsGgPrev');
  var code = document.getElementById('jsGgCode');
  function hsl(){
    return 'hsl(' + Math.floor(Math.random() * 360) + ' 85% 62%)';
  }
  document.getElementById('jsGgBtn').addEventListener('click', function(){
    var v = 'linear-gradient(' + Math.floor(Math.random() * 360) + 'deg, '
      + hsl() + ', ' + hsl() + ')';
    prev.style.background = v;
    code.textContent = 'background:' + v + ';';
  });
})();
</script>

<!-- 生成したCSSをそのままコピペできる小さな制作ツール -->

<div class="js-modal-demo">
  <button id="jsModalOpen" type="button">モーダルを開く</button>
  <div class="veil" id="jsModalVeil">
    <div class="box">
      <h4>JSモーダル</h4>
      <p>背景クリック・Escキー・×ボタンで閉じます。</p>
      <button id="jsModalClose" type="button">✕ 閉じる</button>
    </div>
  </div>
</div>

<style>
.js-modal-demo{ position:relative; }
.js-modal-demo > button{ padding:11px 24px; border:2px solid #191F2E; border-radius:10px; background:#FFCF3F; font-weight:700; font-size:13.5px; cursor:pointer; font-family:inherit; }
.js-modal-demo .veil{
  position:absolute; inset:-70px -40px; z-index:6;
  display:grid; place-items:center;
  background:rgba(25,31,46,.6);
  backdrop-filter:blur(2px);
  border-radius:14px;
  opacity:0; visibility:hidden;
  transition:opacity .3s, visibility .3s;
}
.js-modal-demo .veil.open{ opacity:1; visibility:visible; }
.js-modal-demo .box{
  width:200px; padding:18px;
  background:#fff; border:2px solid #191F2E; border-radius:14px;
  translate:0 16px; transition:translate .3s cubic-bezier(.3,1.3,.4,1);
}
.js-modal-demo .veil.open .box{ translate:0 0; }
.js-modal-demo h4{ margin:0 0 6px; }
.js-modal-demo p{ margin:0 0 12px; font-size:12px; color:#5A6072; }
.js-modal-demo .box button{
  padding:8px 16px; font-size:12px; padding:11px 24px; border:2px solid #191F2E; border-radius:10px; background:#FFCF3F; font-weight:700; font-size:13.5px; cursor:pointer; font-family:inherit; background:#fff;
}
</style>

<script>
(function(){
  var veil = document.getElementById('jsModalVeil');
  document.getElementById('jsModalOpen').addEventListener('click', function(){
    veil.classList.add('open');
  });
  function close(){ veil.classList.remove('open'); }
  document.getElementById('jsModalClose').addEventListener('click', close);
  veil.addEventListener('click', function(e){
    if(e.target === veil) close();   // 背景だけで閉じる
  });
  document.addEventListener('keydown', function(e){
    if(e.key === 'Escape') close();
  });
})();
</script>

<!-- e.target===veilの判定で「中身クリックでは閉じない」 -->

<div class="js-swipe-detect" id="jsSwipe"><b id="jsSwipeIcon">👆</b><span id="jsSwipeText">枠内をスワイプ/ドラッグ</span></div>

<style>
.js-swipe-detect{
  display:grid; place-content:center; gap:8px; justify-items:center;
  width:230px; height:130px;
  border:2px dashed #C9CBD4; border-radius:12px;
  touch-action:none; user-select:none; cursor:grab;
}
.js-swipe-detect b{
  font-size:34px;
  transition:translate .25s cubic-bezier(.3,1.4,.4,1);
}
.js-swipe-detect span{ font-size:11.5px; color:#5A6072; font-weight:700; }
</style>

<script>
(function(){
  var area = document.getElementById('jsSwipe');
  var icon = document.getElementById('jsSwipeIcon');
  var txt = document.getElementById('jsSwipeText');
  var sx = 0, sy = 0;
  area.addEventListener('pointerdown', function(e){ sx = e.clientX; sy = e.clientY; });
  area.addEventListener('pointerup', function(e){
    var dx = e.clientX - sx, dy = e.clientY - sy;
    if(Math.hypot(dx, dy) < 30) return;
    var dir = Math.abs(dx) > Math.abs(dy)
      ? (dx > 0 ? ['→', '右', '28px 0'] : ['←', '左', '-28px 0'])
      : (dy > 0 ? ['↓', '下', '0 20px'] : ['↑', '上', '0 -20px']);
    icon.textContent = dir[0];
    txt.textContent = dir[1] + 'スワイプ!';
    icon.style.translate = dir[2];
    setTimeout(function(){ icon.style.translate = '0 0'; }, 300);
  });
})();
</script>

<!-- down/upの座標差の大きい軸で方向を決める -->

<div class="js-sticky-add" id="jsCartDemo">
  <button id="jsCartBtn" type="button">🛒 カートに追加</button>
  <b class="cart" id="jsCartIcon">🛒<i id="jsCartNum">0</i></b>
</div>

<style>
.js-sticky-add{
  position:relative;
  display:flex; align-items:center; gap:38px;
}
.js-sticky-add button{ padding:11px 24px; border:2px solid #191F2E; border-radius:10px; background:#FFCF3F; font-weight:700; font-size:13.5px; cursor:pointer; font-family:inherit; }
.js-sticky-add .cart{
  position:relative; font-size:31px;
}
.js-sticky-add .cart i{
  position:absolute; top:-7px; right:-11px;
  min-width:20px; height:20px; padding:0 4px;
  display:grid; place-items:center;
  border-radius:99px; background:#FF3B5C; color:#fff;
  font-size:11px; font-style:normal;
  border:2px solid #F7F5EF;
}
.js-sticky-add .cart.bump{ animation:js-cart-bump .35s ease; }
.js-sticky-add .fly{
  position:absolute; z-index:3; pointer-events:none;
  font-size:17px;
  transition:all .65s cubic-bezier(.4,-.2,.7,.4);
}
@keyframes js-cart-bump{ 40%{ scale:1.3; rotate:-8deg; } }
</style>

<script>
(function(){
  var wrap = document.getElementById('jsCartDemo');
  var btn = document.getElementById('jsCartBtn');
  var cart = document.getElementById('jsCartIcon');
  var num = document.getElementById('jsCartNum');
  var n = 0;
  btn.addEventListener('click', function(){
    var f = document.createElement('b');
    f.className = 'fly'; f.textContent = '📦';
    f.style.left = '30px'; f.style.top = '8px';
    wrap.appendChild(f);
    requestAnimationFrame(function(){
      f.style.left = (cart.offsetLeft + 6) + 'px';
      f.style.top = '2px';
      f.style.opacity = '.2';
      f.style.scale = '.5';
    });
    setTimeout(function(){
      f.remove(); num.textContent = ++n;
      cart.classList.remove('bump'); void cart.offsetWidth;
      cart.classList.add('bump');
    }, 660);
  });
})();
</script>

<!-- 商品→カートへ飛ぶ演出。到着と同時にバッジをbump -->

<textarea class="js-textarea-grow" id="jsTaGrow" rows="1" placeholder="改行すると高さが伸びます…"></textarea>

<style>
.js-textarea-grow{
  width:240px; box-sizing:border-box;
  padding:12px 14px; resize:none; overflow:hidden;
  border:2px solid #191F2E; border-radius:12px;
  font-size:13.5px; line-height:1.6; font-family:inherit;
  outline:none;
  transition:border-color .2s;
}
.js-textarea-grow:focus{ border-color:#3A46E8; }
</style>

<script>
(function(){
  var ta = document.getElementById('jsTaGrow');
  ta.addEventListener('input', function(){
    ta.style.height = 'auto';           // 一旦リセットしてから
    ta.style.height = ta.scrollHeight + 'px';
  });
})();
</script>

<!-- チャットUIの必須小技。field-sizing:content(最新CSS)の代替 -->