@charset "UTF-8";

/*
  InkSignal CSS Animation Atlas
  掲載サンプルのCSS。各コードは詳細画面から個別にコピーできます。
*/

.dialog-use-guide {
  margin: 0 0 16px;
  padding: 14px 16px;
  color: var(--text);
  background: color-mix(in srgb, var(--cyan) 9%, var(--surface));
  border: 1px solid color-mix(in srgb, var(--cyan) 42%, var(--line));
  border-radius: 12px;
}

.dialog-use-guide h3 {
  margin: 0;
  font-size: .92rem;
}

.dialog-use-guide p {
  margin: 7px 0 0;
  color: var(--muted);
  font-size: .76rem;
  line-height: 1.75;
}

.dialog-use-guide code {
  display: inline-block;
  padding: .08em .4em;
  color: var(--text);
  background: var(--surface);
  border: 1px solid var(--line-strong);
  border-radius: 5px;
  font-size: .95em;
  overflow-wrap: anywhere;
}

/* 001. フェードイン */
.is-fade-in {
  --is-duration: .8s;
  animation: is-fade-in var(--is-duration) ease-out both;
}

@keyframes is-fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* 002. ソフトフェード */
.is-fade-soft {
  --is-duration: .8s;
  animation: is-fade-soft var(--is-duration) ease-out both;
}

@keyframes is-fade-soft {
  from { opacity: 0; filter: blur(10px); }
  to   { opacity: 1; filter: blur(0); }
}

/* 003. フェードアップ */
.is-fade-up {
  --is-duration: .8s;
  animation: is-fade-up var(--is-duration) ease-out both;
}

@keyframes is-fade-up {
  from { opacity: 0; transform: translateY(var(--is-distance, 36px)); }
  to   { opacity: 1; transform: translateY(0); }
}

/* 004. フェードダウン */
.is-fade-down {
  --is-duration: .8s;
  animation: is-fade-down var(--is-duration) ease-out both;
}

@keyframes is-fade-down {
  from { opacity: 0; transform: translateY(calc(var(--is-distance, 36px) * -1)); }
  to   { opacity: 1; transform: translateY(0); }
}

/* 005. フェード・フロム・レフト */
.is-fade-left {
  --is-duration: .8s;
  animation: is-fade-left var(--is-duration) ease-out both;
}

@keyframes is-fade-left {
  from { opacity: 0; transform: translateX(calc(var(--is-distance, 42px) * -1)); }
  to   { opacity: 1; transform: translateX(0); }
}

/* 006. フェード・フロム・ライト */
.is-fade-right {
  --is-duration: .8s;
  animation: is-fade-right var(--is-duration) ease-out both;
}

@keyframes is-fade-right {
  from { opacity: 0; transform: translateX(var(--is-distance, 42px)); }
  to   { opacity: 1; transform: translateX(0); }
}

/* 007. クリップ・リビール・アップ */
.is-reveal-up {
  --is-duration: .8s;
  animation: is-reveal-up var(--is-duration) ease-out both;
}

@keyframes is-reveal-up {
  from { clip-path: inset(100% 0 0 0); }
  to   { clip-path: inset(0 0 0 0); }
}

/* 008. クリップ・リビール・レフト */
.is-reveal-left {
  --is-duration: .8s;
  animation: is-reveal-left var(--is-duration) ease-out both;
}

@keyframes is-reveal-left {
  from { clip-path: inset(0 100% 0 0); }
  to   { clip-path: inset(0 0 0 0); }
}

/* 009. フォーカスイン */
.is-focus-in {
  --is-duration: .8s;
  animation: is-focus-in var(--is-duration) ease-out both;
}

@keyframes is-focus-in {
  from { opacity: 0; filter: blur(14px); transform: scale(.96); }
  to   { opacity: 1; filter: blur(0); transform: scale(1); }
}

/* 010. フラッシュイン */
.is-flash-in {
  --is-duration: .8s;
  animation: is-flash-in var(--is-duration) ease-out both;
}

@keyframes is-flash-in {
  from { opacity: 0; filter: brightness(2.6); }
  to   { opacity: 1; filter: brightness(1); }
}

/* 011. スライドイン・レフト */
.is-slide-left {
  --is-duration: .85s;
  --is-distance: 80px;
  animation: is-slide-left var(--is-duration) cubic-bezier(.22, 1, .36, 1) both;
}

@keyframes is-slide-left {
  from { transform: translateX(calc(var(--is-distance, 80px) * -1)); }
  to   { transform: translateX(0); }
}

/* 012. スライドイン・ライト */
.is-slide-right {
  --is-duration: .85s;
  --is-distance: 80px;
  animation: is-slide-right var(--is-duration) cubic-bezier(.22, 1, .36, 1) both;
}

@keyframes is-slide-right {
  from { transform: translateX(var(--is-distance, 80px)); }
  to   { transform: translateX(0); }
}

/* 013. スライドイン・トップ */
.is-slide-top {
  --is-duration: .85s;
  --is-distance: 70px;
  animation: is-slide-top var(--is-duration) cubic-bezier(.22, 1, .36, 1) both;
}

@keyframes is-slide-top {
  from { transform: translateY(calc(var(--is-distance, 70px) * -1)); }
  to   { transform: translateY(0); }
}

/* 014. スライドイン・ボトム */
.is-slide-bottom {
  --is-duration: .85s;
  --is-distance: 70px;
  animation: is-slide-bottom var(--is-duration) cubic-bezier(.22, 1, .36, 1) both;
}

@keyframes is-slide-bottom {
  from { transform: translateY(var(--is-distance, 70px)); }
  to   { transform: translateY(0); }
}

/* 015. ダイアゴナルスライド */
.is-slide-diagonal {
  --is-duration: .85s;
  --is-distance: 70px;
  animation: is-slide-diagonal var(--is-duration) cubic-bezier(.22, 1, .36, 1) both;
}

@keyframes is-slide-diagonal {
  from { opacity: 0; transform: translate(calc(var(--is-distance, 70px) * -1), var(--is-distance, 70px)); }
  to   { opacity: 1; transform: translate(0, 0); }
}

/* 016. スキュースライド */
.is-slide-skew {
  --is-duration: .85s;
  --is-distance: 90px;
  animation: is-slide-skew var(--is-duration) cubic-bezier(.22, 1, .36, 1) both;
}

@keyframes is-slide-skew {
  from { opacity: 0; transform: translateX(calc(var(--is-distance, 90px) * -1)) skewX(14deg); }
  to   { opacity: 1; transform: translateX(0) skewX(0); }
}

/* 017. オーバーシュートスライド */
.is-slide-overshoot {
  --is-duration: .85s;
  --is-distance: 90px;
  animation: is-slide-overshoot var(--is-duration) cubic-bezier(.22, 1, .36, 1) both;
}

@keyframes is-slide-overshoot {
  0%   { opacity: 0; transform: translateX(calc(var(--is-distance, 90px) * -1)); }
  72%  { opacity: 1; transform: translateX(12px); }
  100% { transform: translateX(0); }
}

/* 018. ドロップバウンス */
.is-drop-bounce {
  --is-duration: .85s;
  --is-distance: 90px;
  animation: is-drop-bounce var(--is-duration) cubic-bezier(.22, 1, .36, 1) both;
}

@keyframes is-drop-bounce {
  0%   { opacity: 0; transform: translateY(calc(var(--is-distance, 90px) * -1)); }
  68%  { opacity: 1; transform: translateY(10px); }
  84%  { transform: translateY(-5px); }
  100% { transform: translateY(0); }
}

/* 019. ロールイン */
.is-roll-in {
  --is-duration: .85s;
  --is-distance: 90px;
  animation: is-roll-in var(--is-duration) cubic-bezier(.22, 1, .36, 1) both;
}

@keyframes is-roll-in {
  from { opacity: 0; transform: translateX(calc(var(--is-distance, 90px) * -1)) rotate(-120deg); }
  to   { opacity: 1; transform: translateX(0) rotate(0); }
}

/* 020. エラスティックスライド */
.is-elastic-slide {
  --is-duration: .85s;
  --is-distance: 110px;
  animation: is-elastic-slide var(--is-duration) cubic-bezier(.16, 1.25, .3, 1) both;
}

@keyframes is-elastic-slide {
  from { opacity: 0; transform: translateX(calc(var(--is-distance, 110px) * -1)); }
  to   { opacity: 1; transform: translateX(0); }
}

/* 021. ズームイン */
.is-zoom-in {
  --is-duration: .7s;
  --is-scale: 0.55;
  transform-origin: center;
  animation: is-zoom-in var(--is-duration) cubic-bezier(.2, .8, .25, 1.15) both;
}

@keyframes is-zoom-in {
  from { opacity: 0; transform: scale(var(--is-scale, .55)); }
  to   { opacity: 1; transform: scale(1); }
}

/* 022. ズームアウト表示 */
.is-zoom-out {
  --is-duration: .7s;
  --is-scale: 1.45;
  transform-origin: center;
  animation: is-zoom-out var(--is-duration) cubic-bezier(.2, .8, .25, 1.15) both;
}

@keyframes is-zoom-out {
  from { opacity: 0; transform: scale(var(--is-scale, 1.45)); }
  to   { opacity: 1; transform: scale(1); }
}

/* 023. ポップイン */
.is-pop-in {
  --is-duration: .7s;
  --is-scale: 1.12;
  transform-origin: center;
  animation: is-pop-in var(--is-duration) cubic-bezier(.2, .8, .25, 1.15) both;
}

@keyframes is-pop-in {
  0%   { opacity: 0; transform: scale(.35); }
  72%  { opacity: 1; transform: scale(var(--is-scale, 1.12)); }
  100% { transform: scale(1); }
}

/* 024. スクワッシュイン */
.is-squash-in {
  --is-duration: .7s;
  --is-scale: 0.15;
  transform-origin: center;
  animation: is-squash-in var(--is-duration) cubic-bezier(.2, .8, .25, 1.15) both;
}

@keyframes is-squash-in {
  from { opacity: 0; transform: scaleY(var(--is-scale, .15)); }
  to   { opacity: 1; transform: scaleY(1); }
}

/* 025. ストレッチイン */
.is-stretch-in {
  --is-duration: .7s;
  --is-scale: 0.12;
  transform-origin: center;
  animation: is-stretch-in var(--is-duration) cubic-bezier(.2, .8, .25, 1.15) both;
}

@keyframes is-stretch-in {
  from { opacity: 0; transform: scaleX(var(--is-scale, .12)); }
  to   { opacity: 1; transform: scaleX(1); }
}

/* 026. パフイン */
.is-puff-in {
  --is-duration: .7s;
  --is-scale: 1.6;
  transform-origin: center;
  animation: is-puff-in var(--is-duration) cubic-bezier(.2, .8, .25, 1.15) both;
}

@keyframes is-puff-in {
  from { opacity: 0; filter: blur(12px); transform: scale(var(--is-scale, 1.6)); }
  to   { opacity: 1; filter: blur(0); transform: scale(1); }
}

/* 027. 横方向アンフォールド */
.is-unfold-x {
  --is-duration: .7s;
  --is-scale: 1;
  transform-origin: center;
  animation: is-unfold-x var(--is-duration) cubic-bezier(.2, .8, .25, 1.15) both;
}

@keyframes is-unfold-x {
  from { opacity: 0; transform: scaleX(0); }
  to   { opacity: 1; transform: scaleX(1); }
}

/* 028. 縦方向アンフォールド */
.is-unfold-y {
  --is-duration: .7s;
  --is-scale: 1;
  transform-origin: center;
  animation: is-unfold-y var(--is-duration) cubic-bezier(.2, .8, .25, 1.15) both;
}

@keyframes is-unfold-y {
  from { opacity: 0; transform: scaleY(0); }
  to   { opacity: 1; transform: scaleY(1); }
}

/* 029. パースペクティブポップ */
.is-perspective-pop {
  --is-duration: .7s;
  --is-scale: 1;
  transform-origin: center;
  animation: is-perspective-pop var(--is-duration) cubic-bezier(.2, .8, .25, 1.15) both;
}

@keyframes is-perspective-pop {
  from { opacity: 0; transform: perspective(700px) rotateX(28deg) scale(.82); }
  to   { opacity: 1; transform: perspective(700px) rotateX(0) scale(1); }
}

/* 030. ラバーポップ */
.is-rubber-pop {
  --is-duration: .7s;
  --is-scale: 1;
  transform-origin: center;
  animation: is-rubber-pop var(--is-duration) cubic-bezier(.2, .8, .25, 1.15) both;
}

@keyframes is-rubber-pop {
  0%   { opacity: 0; transform: scale(.4); }
  55%  { opacity: 1; transform: scale(1.18, .86); }
  72%  { transform: scale(.92, 1.1); }
  86%  { transform: scale(1.04, .97); }
  100% { transform: scale(1); }
}

/* 031. 連続回転 */
.is-spin {
  --is-duration: 1.4s;
  --is-angle: 360deg;
  transform-origin: center;
  transform-style: preserve-3d;
  animation: is-spin var(--is-duration) linear infinite;
}

@keyframes is-spin {
  to { transform: rotate(var(--is-angle, 360deg)); }
}

/* 032. ステップ回転 */
.is-spin-step {
  --is-duration: 1.4s;
  --is-angle: 360deg;
  transform-origin: center;
  transform-style: preserve-3d;
  animation: is-spin-step var(--is-duration) steps(8) infinite;
}

@keyframes is-spin-step {
  to { transform: rotate(var(--is-angle, 360deg)); }
}

/* 033. 回転イン */
.is-rotate-in {
  --is-duration: .8s;
  --is-angle: -120deg;
  transform-origin: center;
  transform-style: preserve-3d;
  animation: is-rotate-in var(--is-duration) cubic-bezier(.2,.8,.25,1.1) both;
}

@keyframes is-rotate-in {
  from { opacity: 0; transform: rotate(var(--is-angle, -120deg)) scale(.6); }
  to   { opacity: 1; transform: rotate(0) scale(1); }
}

/* 034. X軸フリップイン */
.is-flip-x-in {
  --is-duration: .8s;
  --is-angle: -90deg;
  transform-origin: center;
  transform-style: preserve-3d;
  animation: is-flip-x-in var(--is-duration) ease-out both;
}

@keyframes is-flip-x-in {
  from { opacity: 0; transform: perspective(700px) rotateX(var(--is-angle, -90deg)); }
  to   { opacity: 1; transform: perspective(700px) rotateX(0); }
}

/* 035. Y軸フリップイン */
.is-flip-y-in {
  --is-duration: .8s;
  --is-angle: 90deg;
  transform-origin: center;
  transform-style: preserve-3d;
  animation: is-flip-y-in var(--is-duration) ease-out both;
}

@keyframes is-flip-y-in {
  from { opacity: 0; transform: perspective(700px) rotateY(var(--is-angle, 90deg)); }
  to   { opacity: 1; transform: perspective(700px) rotateY(0); }
}

/* 036. コインフリップ */
.is-coin-flip {
  --is-duration: 1.4s;
  --is-angle: 360deg;
  transform-origin: center;
  transform-style: preserve-3d;
  animation: is-coin-flip var(--is-duration) ease-in-out infinite;
}

@keyframes is-coin-flip {
  to { transform: rotateY(var(--is-angle, 360deg)); }
}

/* 037. キューブターン */
.is-cube-turn {
  --is-duration: 1.4s;
  --is-angle: 90deg;
  transform-origin: center;
  transform-style: preserve-3d;
  animation: is-cube-turn var(--is-duration) ease-in-out infinite alternate;
}

@keyframes is-cube-turn {
  0%, 15% { transform: perspective(700px) rotateX(0) rotateY(0); }
  45%, 60% { transform: perspective(700px) rotateX(0) rotateY(90deg); }
  85%, 100% { transform: perspective(700px) rotateX(90deg) rotateY(90deg); }
}

/* 038. ドアオープン */
.is-door-open {
  --is-duration: .8s;
  --is-angle: -88deg;
  transform-origin: left center;
  transform-style: preserve-3d;
  animation: is-door-open var(--is-duration) ease-out both;
}

@keyframes is-door-open {
  from { opacity: 0; transform: perspective(800px) rotateY(var(--is-angle, -88deg)); }
  to   { opacity: 1; transform: perspective(800px) rotateY(0); }
}

/* 039. ペンデュラム */
.is-pendulum {
  --is-duration: 1.4s;
  --is-angle: -7deg;
  transform-origin: top center;
  transform-style: preserve-3d;
  animation: is-pendulum var(--is-duration) ease-in-out infinite;
}

@keyframes is-pendulum {
  0%, 100% { transform: rotate(var(--is-angle, -7deg)); }
  50%      { transform: rotate(calc(var(--is-angle, -7deg) * -1)); }
}

/* 040. オービット */
.is-orbit {
  --is-duration: 1.4s;
  --is-angle: 360deg;
  position: relative;
  width: 86px;
  aspect-ratio: 1;
  border: 1px solid color-mix(in srgb, var(--is-color, #315b7d) 24%, transparent);
  border-radius: 50%;
  animation: is-orbit var(--is-duration) linear infinite;
}
.is-orbit span {
  position: absolute;
  top: -7px;
  left: 50%;
  width: 14px;
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--is-color, #315b7d);
  transform: translateX(-50%);
}
@keyframes is-orbit { to { transform: rotate(var(--is-angle, 360deg)); } }

/* 041. パルス */
.is-pulse {
  --is-duration: 1.8s;
  --is-strength: 1.08;

  animation: is-pulse var(--is-duration) ease-in-out infinite;
}

@keyframes is-pulse {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(var(--is-strength, 1.08)); }
}

/* 042. ハートビート */
.is-heartbeat {
  --is-duration: 1.15s;
  --is-strength: 1.18;

  animation: is-heartbeat var(--is-duration) ease-in-out infinite;
}

@keyframes is-heartbeat {
  0%, 36%, 100% { transform: scale(1); }
  14%           { transform: scale(var(--is-strength, 1.18)); }
  24%           { transform: scale(1.07); }
}

/* 043. バウンス */
.is-bounce {
  --is-duration: 1.15s;
  --is-distance: 24px;

  animation: is-bounce var(--is-duration) ease-in-out infinite;
}

@keyframes is-bounce {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(calc(var(--is-distance, 24px) * -1)); }
}

/* 044. 横シェイク */
.is-shake-x {
  --is-duration: 1.15s;
  --is-distance: 10px;

  animation: is-shake-x var(--is-duration) ease-in-out infinite;
}

@keyframes is-shake-x {
  0%, 100% { transform: translateX(0); }
  20% { transform: translateX(calc(var(--is-distance, 10px) * -1)); }
  40% { transform: translateX(var(--is-distance, 10px)); }
  60% { transform: translateX(calc(var(--is-distance, 10px) * -.6)); }
  80% { transform: translateX(calc(var(--is-distance, 10px) * .6)); }
}

/* 045. 縦シェイク */
.is-shake-y {
  --is-duration: 1.15s;
  --is-distance: 9px;

  animation: is-shake-y var(--is-duration) ease-in-out infinite;
}

@keyframes is-shake-y {
  0%, 100% { transform: translateY(0); }
  20% { transform: translateY(calc(var(--is-distance, 9px) * -1)); }
  40% { transform: translateY(var(--is-distance, 9px)); }
  60% { transform: translateY(calc(var(--is-distance, 9px) * -.55)); }
  80% { transform: translateY(calc(var(--is-distance, 9px) * .55)); }
}

/* 046. ワブル */
.is-wobble {
  --is-duration: 1.15s;
  --is-distance: 10px;

  animation: is-wobble var(--is-duration) ease-in-out infinite;
}

@keyframes is-wobble {
  0%, 100% { transform: translateX(0) rotate(0); }
  20% { transform: translateX(-10px) rotate(-4deg); }
  40% { transform: translateX(8px) rotate(3deg); }
  60% { transform: translateX(-5px) rotate(-2deg); }
  80% { transform: translateX(3px) rotate(1deg); }
}

/* 047. スイング */
.is-swing {
  --is-duration: 1.15s;
  --is-angle: 12deg;
  transform-origin: top center;
  animation: is-swing var(--is-duration) ease-in-out infinite;
}

@keyframes is-swing {
  0%, 100% { transform: rotate(0); }
  20% { transform: rotate(var(--is-angle, 12deg)); }
  40% { transform: rotate(calc(var(--is-angle, 12deg) * -.8)); }
  60% { transform: rotate(calc(var(--is-angle, 12deg) * .5)); }
  80% { transform: rotate(calc(var(--is-angle, 12deg) * -.25)); }
}

/* 048. タダ */
.is-tada {
  --is-duration: 1.15s;
  --is-distance: 12px;

  animation: is-tada var(--is-duration) ease-in-out infinite;
}

@keyframes is-tada {
  0%, 100% { transform: scale(1) rotate(0); }
  12%, 24% { transform: scale(.92) rotate(-4deg); }
  18%, 30%, 42%, 54% { transform: scale(1.08) rotate(4deg); }
  36%, 48%, 60% { transform: scale(1.08) rotate(-4deg); }
}

/* 049. ゼリー */
.is-jelly {
  --is-duration: 1.15s;
  --is-strength: 1.13;

  animation: is-jelly var(--is-duration) ease-in-out infinite;
}

@keyframes is-jelly {
  0%, 100% { transform: scale(1, 1); }
  25% { transform: scale(.9, var(--is-strength, 1.13)); }
  50% { transform: scale(var(--is-strength, 1.13), .9); }
  75% { transform: scale(.97, 1.04); }
}

/* 050. フロート */
.is-float {
  --is-duration: 1.8s;
  --is-distance: 14px;

  animation: is-float var(--is-duration) ease-in-out infinite;
}

@keyframes is-float {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(calc(var(--is-distance, 14px) * -1)); }
}

/* 051. タイプライター */
.is-typewriter {
  --is-duration: 3s;
  --is-characters: 14;
  width: 14em;
  max-width: 100%;
  overflow: hidden;
  white-space: nowrap;
  border-right: 2px solid currentColor;
  animation:
    is-typewriter var(--is-duration) steps(var(--is-characters)) both,
    is-typewriter-caret .7s step-end infinite;
}
@keyframes is-typewriter { from { width: 0; } }
@keyframes is-typewriter-caret { 50% { border-color: transparent; } }

/* 052. 流れるグラデーション文字 */
.is-gradient-text {
  --is-duration: 4s;
  color: transparent;
  background: linear-gradient(90deg, #0b2545, #4e7897, #22a6c7, #0b2545);
  background-size: 300% 100%;
  background-clip: text;
  -webkit-background-clip: text;
  animation: is-gradient-text var(--is-duration) linear infinite;
}
@keyframes is-gradient-text { to { background-position: 300% 0; } }

/* 053. ウェーブ文字 */
.is-wave-text span {
  --is-duration: 1s;
  display: inline-block;
  animation: is-wave-text var(--is-duration) ease-in-out infinite;
}
.is-wave-text span:nth-child(2) { animation-delay: .08s; }
.is-wave-text span:nth-child(3) { animation-delay: .16s; }
.is-wave-text span:nth-child(4) { animation-delay: .24s; }
.is-wave-text span:nth-child(5) { animation-delay: .32s; }
.is-wave-text span:nth-child(6) { animation-delay: .40s; }
@keyframes is-wave-text {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-12px); }
}

/* 054. 文字間隔リビール */
.is-letter-spread {
  --is-duration: 1s;
  animation: is-letter-spread var(--is-duration) ease-out both;
}
@keyframes is-letter-spread {
  from { opacity: 0; letter-spacing: .55em; }
  to   { opacity: 1; letter-spacing: .08em; }
}

/* 055. テキストブラーイン */
.is-text-blur-in {
  --is-duration: .9s;
  animation: is-text-blur-in var(--is-duration) ease-out both;
}
@keyframes is-text-blur-in {
  from { opacity: 0; filter: blur(12px); }
  to   { opacity: 1; filter: blur(0); }
}

/* 056. 文字シャイン */
.is-text-shine {
  --is-duration: 2.6s;
  color: #243b5a;
  background: linear-gradient(110deg, #243b5a 0 38%, #ffffff 47%, #087f82 52%, #243b5a 62% 100%);
  background-size: 240% 100%;
  background-position: 100% 0;
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 1px 0 rgb(255 255 255 / .35));
  animation: is-text-shine var(--is-duration) linear infinite;
}
@keyframes is-text-shine { to { background-position: -140% 0; } }

/* 057. ネオンフリッカー */
.is-neon-flicker {
  --is-duration: 2.2s;
  color: #67e8f9;
  text-shadow: 0 0 6px currentColor, 0 0 22px currentColor;
  animation: is-neon-flicker var(--is-duration) linear infinite;
}
@keyframes is-neon-flicker {
  0%, 18%, 22%, 25%, 53%, 57%, 100% { opacity: 1; }
  20%, 24%, 55% { opacity: .25; }
}

/* 058. グリッチ文字 */
.is-glitch-text {
  --is-duration: 1.8s;
  position: relative;
  display: inline-block;
}
.is-glitch-text::before,
.is-glitch-text::after {
  content: attr(data-text);
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.is-glitch-text::before {
  color: #22d3ee;
  clip-path: inset(0 0 52% 0);
  animation: is-glitch-a var(--is-duration) steps(2) infinite;
}
.is-glitch-text::after {
  color: #f43f5e;
  clip-path: inset(52% 0 0 0);
  animation: is-glitch-b var(--is-duration) steps(2) infinite;
}
@keyframes is-glitch-a {
  0%, 85%, 100% { transform: translate(0); }
  88% { transform: translate(-4px, 1px); }
  92% { transform: translate(3px, -1px); }
}
@keyframes is-glitch-b {
  0%, 82%, 100% { transform: translate(0); }
  86% { transform: translate(4px, -1px); }
  94% { transform: translate(-3px, 1px); }
}

/* 059. 中央から伸びる下線 */
.is-underline-draw {
  --is-duration: .3s;
  position: relative;
  color: inherit;
  text-decoration: none;
}
.is-underline-draw::after {
  content: "";
  position: absolute;
  right: 50%;
  bottom: -.25em;
  left: 50%;
  height: 2px;
  background: currentColor;
  transition: right var(--is-duration), left var(--is-duration);
}
.is-underline-draw:hover::after,
.is-underline-draw:focus-visible::after,
.demo-stage.is-hover-simulated .is-underline-draw::after,
.dialog-preview-stage.is-hover-simulated .is-underline-draw::after {
  right: 0;
  left: 0;
}

/* 060. テキストシャドウライズ */
.is-text-shadow-rise {
  --is-duration: .3s;
  display: inline-block;
  transition: transform var(--is-duration), text-shadow var(--is-duration);
}
.is-text-shadow-rise:hover,
.is-text-shadow-rise:focus-visible,
.demo-stage.is-hover-simulated .is-text-shadow-rise,
.dialog-preview-stage.is-hover-simulated .is-text-shadow-rise {
  transform: translateY(-4px);
  text-shadow: 0 1px 0 #b8c5cf, 0 2px 0 #a4b4c0, 0 8px 14px rgb(11 37 69 / .22);
}

/* 061. 左から塗るボタン */
.is-button-fill-left {
  --is-duration: .32s;
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: .8em 1.35em;
  color: #0b2545;
  background: transparent;
  border: 2px solid currentColor;
  border-radius: .75em;
  font: inherit;
  font-weight: 700;
  cursor: pointer;
  transition: color var(--is-duration);
}
.is-button-fill-left::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: #0b2545;
  transform: translateX(-101%);
  transition: transform var(--is-duration) ease;
}
.is-button-fill-left:hover,
.is-button-fill-left:focus-visible,
.demo-stage.is-hover-simulated .is-button-fill-left,
.dialog-preview-stage.is-hover-simulated .is-button-fill-left { color: #fff; }
.is-button-fill-left:hover::before,
.is-button-fill-left:focus-visible::before,
.demo-stage.is-hover-simulated .is-button-fill-left::before,
.dialog-preview-stage.is-hover-simulated .is-button-fill-left::before { transform: translateX(0); }

/* 062. 中央から塗るボタン */
.is-button-fill-center {
  --is-duration: .34s;
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: .8em 1.35em;
  color: #0b2545;
  background: transparent;
  border: 2px solid currentColor;
  border-radius: .75em;
  font: inherit;
  font-weight: 700;
  cursor: pointer;
  transition: color var(--is-duration);
}
.is-button-fill-center::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: #0b2545;
  transform: scaleX(0);
  transition: transform var(--is-duration) ease;
}
.is-button-fill-center:hover,
.is-button-fill-center:focus-visible,
.demo-stage.is-hover-simulated .is-button-fill-center,
.dialog-preview-stage.is-hover-simulated .is-button-fill-center { color: #fff; }
.is-button-fill-center:hover::before,
.is-button-fill-center:focus-visible::before,
.demo-stage.is-hover-simulated .is-button-fill-center::before,
.dialog-preview-stage.is-hover-simulated .is-button-fill-center::before { transform: scaleX(1); }

/* 063. 光が走るボタン */
.is-button-shine {
  --is-duration: .55s;
  position: relative;
  overflow: hidden;
  padding: .85em 1.45em;
  color: #fff;
  background: #0b2545;
  border: 0;
  border-radius: .75em;
  font: inherit;
  font-weight: 700;
  cursor: pointer;
}
.is-button-shine::after {
  content: "";
  position: absolute;
  top: -60%;
  left: -75%;
  width: 38%;
  height: 220%;
  background: rgb(255 255 255 / .5);
  transform: rotate(20deg);
  transition: left var(--is-duration) ease;
}
.is-button-shine:hover::after,
.is-button-shine:focus-visible::after,
.demo-stage.is-hover-simulated .is-button-shine::after,
.dialog-preview-stage.is-hover-simulated .is-button-shine::after { left: 135%; }

/* 064. 枠線を描くボタン */
.is-button-border-draw {
  --is-duration: .35s;
  position: relative;
  padding: .85em 1.45em;
  color: #0b5f68;
  background: #fff;
  border: 0;
  border-radius: .65em;
  box-shadow: inset 0 0 0 2px #b7c7d2;
  font: inherit;
  font-weight: 700;
  cursor: pointer;
}
.is-button-border-draw::before,
.is-button-border-draw::after {
  content: "";
  position: absolute;
  right: 50%;
  left: 50%;
  height: 4px;
  background: currentColor;
  transition: right var(--is-duration), left var(--is-duration);
}
.is-button-border-draw::before { top: 0; }
.is-button-border-draw::after { bottom: 0; }
.is-button-border-draw:hover::before,
.is-button-border-draw:hover::after,
.is-button-border-draw:focus-visible::before,
.is-button-border-draw:focus-visible::after,
.demo-stage.is-hover-simulated .is-button-border-draw::before,
.dialog-preview-stage.is-hover-simulated .is-button-border-draw::before,
.demo-stage.is-hover-simulated .is-button-border-draw::after,
.dialog-preview-stage.is-hover-simulated .is-button-border-draw::after { right: 0; left: 0; }

/* 065. リフトボタン */
.is-button-lift {
  --is-duration: .24s;
  padding: .85em 1.45em;
  color: #fff;
  background: #315b7d;
  border: 0;
  border-radius: .75em;
  box-shadow: 0 8px 18px rgb(11 37 69 / .18);
  font: inherit;
  font-weight: 700;
  cursor: pointer;
  transition: transform var(--is-duration), box-shadow var(--is-duration);
}
.is-button-lift:hover,
.is-button-lift:focus-visible,
.demo-stage.is-hover-simulated .is-button-lift,
.dialog-preview-stage.is-hover-simulated .is-button-lift {
  transform: translateY(-5px);
  box-shadow: 0 16px 28px rgb(11 37 69 / .26);
}

/* 066. プレスボタン */
.is-button-press {
  --is-duration: .12s;
  padding: .8em 1.4em;
  color: #fff;
  background: #315b7d;
  border: 0;
  border-radius: .75em;
  box-shadow: 0 6px 0 #173650;
  font: inherit;
  font-weight: 700;
  cursor: pointer;
  transition: transform var(--is-duration), box-shadow var(--is-duration);
}
.is-button-press:active {
  transform: translateY(5px);
  box-shadow: 0 1px 0 #173650;
}

/* 067. 矢印スライドボタン */
.is-button-arrow {
  --is-duration: .25s;
  display: inline-flex;
  align-items: center;
  gap: .65em;
  padding: .8em 1.25em;
  color: #0b2545;
  background: #fff;
  border: 1px solid #b9c8d3;
  border-radius: 999px;
  font: inherit;
  font-weight: 700;
  cursor: pointer;
}
.is-button-arrow b {
  display: inline-block;
  transition: transform var(--is-duration);
}
.is-button-arrow:hover b,
.is-button-arrow:focus-visible b,
.demo-stage.is-hover-simulated .is-button-arrow b,
.dialog-preview-stage.is-hover-simulated .is-button-arrow b { transform: translateX(6px); }

/* 068. 円形に塗るボタン */
.is-button-radial {
  --is-duration: .42s;
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: .85em 1.45em;
  color: #0b2545;
  background: transparent;
  border: 2px solid currentColor;
  border-radius: .75em;
  font: inherit;
  font-weight: 700;
  cursor: pointer;
  transition: color var(--is-duration);
}
.is-button-radial::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: -1;
  width: 10px;
  aspect-ratio: 1;
  background: #0b2545;
  border-radius: 50%;
  transform: translate(-50%, -50%) scale(0);
  transition: transform var(--is-duration) ease-out;
}
.is-button-radial:hover,
.is-button-radial:focus-visible,
.demo-stage.is-hover-simulated .is-button-radial,
.dialog-preview-stage.is-hover-simulated .is-button-radial { color: #fff; }
.is-button-radial:hover::before,
.is-button-radial:focus-visible::before,
.demo-stage.is-hover-simulated .is-button-radial::before,
.dialog-preview-stage.is-hover-simulated .is-button-radial::before { transform: translate(-50%, -50%) scale(22); }

/* 069. ネオンボタン */
.is-button-neon {
  --is-duration: .28s;
  padding: .8em 1.4em;
  color: #22d3ee;
  background: #071827;
  border: 2px solid currentColor;
  border-radius: .7em;
  font: inherit;
  font-weight: 800;
  letter-spacing: .08em;
  cursor: pointer;
  transition: color var(--is-duration), background var(--is-duration), box-shadow var(--is-duration);
}
.is-button-neon:hover,
.is-button-neon:focus-visible,
.demo-stage.is-hover-simulated .is-button-neon,
.dialog-preview-stage.is-hover-simulated .is-button-neon {
  color: #071827;
  background: #22d3ee;
  box-shadow: 0 0 10px #22d3ee, 0 0 30px rgb(34 211 238 / .65);
}

/* 070. 回転グラデーション枠 */
.is-button-gradient-border {
  --is-duration: 3s;
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: .85em 1.45em;
  color: #0b2545;
  background: #fff;
  border: 0;
  border-radius: .8em;
  font: inherit;
  font-weight: 700;
  cursor: pointer;
}
.is-button-gradient-border::before {
  content: "";
  position: absolute;
  inset: -120%;
  z-index: -2;
  background: conic-gradient(#22a6c7, #7c3aed, #f43f5e, #22a6c7);
  animation: is-button-gradient-border var(--is-duration) linear infinite;
}
.is-button-gradient-border::after {
  content: "";
  position: absolute;
  inset: 3px;
  z-index: -1;
  background: #fff;
  border-radius: calc(.8em - 2px);
}
@keyframes is-button-gradient-border { to { transform: rotate(1turn); } }

/* 071. リングローダー */
.is-loader-ring {
  --is-duration: .8s;
  width: 56px;
  aspect-ratio: 1;
  border: 7px solid rgb(49 91 125 / .18);
  border-top-color: #315b7d;
  border-radius: 50%;
  animation: is-loader-ring var(--is-duration) linear infinite;
}
@keyframes is-loader-ring { to { transform: rotate(1turn); } }

/* 072. デュアルリング */
.is-loader-dual-ring {
  --is-duration: 1s;
  position: relative;
  width: 66px;
  aspect-ratio: 1;
  border: 6px solid transparent;
  border-top-color: #315b7d;
  border-radius: 50%;
  animation: is-loader-dual-ring var(--is-duration) linear infinite;
}
.is-loader-dual-ring span {
  position: absolute;
  inset: 8px;
  border: 5px solid transparent;
  border-bottom-color: #22a6c7;
  border-radius: 50%;
  animation: is-loader-dual-ring calc(var(--is-duration) * .65) linear infinite reverse;
}
@keyframes is-loader-dual-ring { to { transform: rotate(1turn); } }

/* 073. バウンドドット */
.is-loader-dots-bounce { display: flex; gap: 9px; align-items: center; height: 48px; }
.is-loader-dots-bounce span {
  --is-duration: .7s;
  width: 13px;
  aspect-ratio: 1;
  background: #315b7d;
  border-radius: 50%;
  animation: is-loader-dots-bounce var(--is-duration) ease-in-out infinite alternate;
}
.is-loader-dots-bounce span:nth-child(2) { animation-delay: .14s; }
.is-loader-dots-bounce span:nth-child(3) { animation-delay: .28s; }
@keyframes is-loader-dots-bounce { to { transform: translateY(-16px); opacity: .35; } }

/* 074. パルスドット */
.is-loader-dots-pulse { display: flex; gap: 9px; }
.is-loader-dots-pulse span {
  --is-duration: .9s;
  width: 14px;
  aspect-ratio: 1;
  background: #315b7d;
  border-radius: 50%;
  animation: is-loader-dots-pulse var(--is-duration) ease-in-out infinite;
}
.is-loader-dots-pulse span:nth-child(2) { animation-delay: .15s; }
.is-loader-dots-pulse span:nth-child(3) { animation-delay: .30s; }
@keyframes is-loader-dots-pulse { 0%, 100% { transform: scale(.55); opacity: .3; } 50% { transform: scale(1); opacity: 1; } }

/* 075. バーイコライザー */
.is-loader-bars { display: flex; gap: 5px; align-items: center; height: 54px; }
.is-loader-bars span {
  --is-duration: .8s;
  width: 6px;
  height: 16px;
  background: #315b7d;
  border-radius: 999px;
  animation: is-loader-bars var(--is-duration) ease-in-out infinite alternate;
}
.is-loader-bars span:nth-child(2) { animation-delay: .1s; }
.is-loader-bars span:nth-child(3) { animation-delay: .2s; }
.is-loader-bars span:nth-child(4) { animation-delay: .3s; }
.is-loader-bars span:nth-child(5) { animation-delay: .4s; }
@keyframes is-loader-bars { to { height: 48px; } }

/* 076. ウェーブローダー */
.is-loader-wave { display: flex; gap: 7px; align-items: center; }
.is-loader-wave span {
  --is-duration: 1s;
  width: 10px;
  aspect-ratio: 1;
  background: #22a6c7;
  border-radius: 50%;
  animation: is-loader-wave var(--is-duration) ease-in-out infinite;
}
.is-loader-wave span:nth-child(2) { animation-delay: .1s; }
.is-loader-wave span:nth-child(3) { animation-delay: .2s; }
.is-loader-wave span:nth-child(4) { animation-delay: .3s; }
.is-loader-wave span:nth-child(5) { animation-delay: .4s; }
@keyframes is-loader-wave { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-12px); } }

/* 077. オービットドット */
.is-loader-orbit-dots {
  --is-duration: 1.4s;
  position: relative;
  width: 70px;
  aspect-ratio: 1;
  animation: is-loader-orbit-dots var(--is-duration) linear infinite;
}
.is-loader-orbit-dots span {
  position: absolute;
  top: 0;
  left: 50%;
  width: 12px;
  aspect-ratio: 1;
  background: #315b7d;
  border-radius: 50%;
  transform: translateX(-50%);
}
.is-loader-orbit-dots span:nth-child(2) { transform-origin: 6px 35px; transform: translateX(-50%) rotate(120deg); }
.is-loader-orbit-dots span:nth-child(3) { transform-origin: 6px 35px; transform: translateX(-50%) rotate(240deg); }
@keyframes is-loader-orbit-dots { to { transform: rotate(1turn); } }

/* 078. グリッドローダー */
.is-loader-grid { display: grid; grid-template-columns: repeat(3, 14px); gap: 6px; }
.is-loader-grid span {
  --is-duration: 1.1s;
  aspect-ratio: 1;
  background: #315b7d;
  border-radius: 3px;
  animation: is-loader-grid var(--is-duration) ease-in-out infinite;
}
.is-loader-grid span:nth-child(2), .is-loader-grid span:nth-child(4) { animation-delay: .12s; }
.is-loader-grid span:nth-child(3), .is-loader-grid span:nth-child(5), .is-loader-grid span:nth-child(7) { animation-delay: .24s; }
.is-loader-grid span:nth-child(6), .is-loader-grid span:nth-child(8) { animation-delay: .36s; }
.is-loader-grid span:nth-child(9) { animation-delay: .48s; }
@keyframes is-loader-grid { 0%, 100% { opacity: .2; transform: scale(.65); } 50% { opacity: 1; transform: scale(1); } }

/* 079. 砂時計ローダー */
.is-loader-hourglass {
  --is-duration: 1.25s;
  width: 0;
  height: 0;
  border-right: 25px solid transparent;
  border-bottom: 36px solid #315b7d;
  border-left: 25px solid transparent;
  animation: is-loader-hourglass var(--is-duration) ease-in-out infinite;
}
@keyframes is-loader-hourglass {
  0%, 12% { transform: rotate(0); }
  50%, 62% { transform: rotate(180deg); }
  100% { transform: rotate(360deg); }
}

/* 080. ストライプ進捗バー */
@property --is-loader-value {
  syntax: "<integer>";
  inherits: true;
  initial-value: 0;
}
.is-loader-progress {
  --is-duration: 3s;
  --is-loader-value: 0;
  position: relative;
  width: min(280px, 80vw);
  height: 24px;
  overflow: hidden;
  background: #dbe4eb;
  border: 2px solid #9fb3c1;
  border-radius: 999px;
  animation: is-loader-progress var(--is-duration) ease-in-out infinite;
}
.is-loader-progress span {
  display: block;
  width: calc(var(--is-loader-value) * 1%);
  height: 100%;
  background: repeating-linear-gradient(45deg, #315b7d 0 12px, #4e7897 12px 24px);
  background-size: 34px 34px;
}
.is-loader-progress::after {
  content: counter(is-loader) "%";
  counter-reset: is-loader var(--is-loader-value);
  position: absolute;
  top: 50%;
  right: 7px;
  padding: 2px 6px;
  color: #0b2545;
  background: rgb(255 255 255 / .92);
  border-radius: 999px;
  font: 800 .68rem/1 system-ui, sans-serif;
  transform: translateY(-50%);
}
@keyframes is-loader-progress {
  0%, 8% { --is-loader-value: 0; }
  88%, 100% { --is-loader-value: 100; }
}

/* 081. カードリフト */
.is-card-lift {
  --is-duration: .3s;
  padding: 1.5rem;
  background: #fff;
  border: 1px solid #d7e0e7;
  border-radius: 1rem;
  box-shadow: 0 10px 26px rgb(11 37 69 / .10);
  transition: transform var(--is-duration), box-shadow var(--is-duration);
}
.is-card-lift:hover,
.is-card-lift:focus-visible,
.demo-stage.is-hover-simulated .is-card-lift,
.dialog-preview-stage.is-hover-simulated .is-card-lift {
  transform: translateY(-9px);
  box-shadow: 0 24px 42px rgb(11 37 69 / .18);
}

/* 082. 固定チルトカード */
.is-card-tilt {
  --is-duration: .35s;
  padding: 1.5rem;
  background: #fff;
  border: 1px solid #d7e0e7;
  border-radius: 1rem;
  box-shadow: 0 12px 28px rgb(11 37 69 / .12);
  transform: perspective(800px) rotateX(0) rotateY(0);
  transition: transform var(--is-duration), box-shadow var(--is-duration);
}
.is-card-tilt:hover,
.is-card-tilt:focus-visible,
.demo-stage.is-hover-simulated .is-card-tilt,
.dialog-preview-stage.is-hover-simulated .is-card-tilt {
  transform: perspective(800px) rotateX(7deg) rotateY(-8deg) translateY(-4px);
  box-shadow: 18px 22px 38px rgb(11 37 69 / .17);
}

/* 083. 3Dフリップカード */
.is-card-flip { --is-duration: .7s; width: 220px; height: 140px; perspective: 900px; }
.is-card-flip__inner { position: relative; width: 100%; height: 100%; transform-style: preserve-3d; transition: transform var(--is-duration); }
.is-card-flip:hover .is-card-flip__inner,
.is-card-flip:focus-visible .is-card-flip__inner,
.demo-stage.is-hover-simulated .is-card-flip .is-card-flip__inner,
.dialog-preview-stage.is-hover-simulated .is-card-flip .is-card-flip__inner { transform: rotateY(180deg); }
.is-card-flip__face { position: absolute; inset: 0; display: grid; place-items: center; color: #fff; background: #315b7d; border-radius: 1rem; backface-visibility: hidden; }
.is-card-flip__back { background: #087f82; transform: rotateY(180deg); }

/* 084. カードグロー */
.is-card-glow {
  --is-duration: .35s;
  padding: 1.5rem;
  background: #fff;
  border: 2px solid #b9c8d4;
  border-radius: 1rem;
  box-shadow: 0 8px 20px rgb(11 37 69 / .1);
  transition: box-shadow var(--is-duration), border-color var(--is-duration), transform var(--is-duration);
}
.is-card-glow:hover,
.is-card-glow:focus-visible,
.demo-stage.is-hover-simulated .is-card-glow,
.dialog-preview-stage.is-hover-simulated .is-card-glow {
  border-color: #087f82;
  box-shadow: 0 0 0 5px rgb(18 167 165 / .38), 0 20px 44px rgb(11 37 69 / .24);
  transform: translateY(-4px);
}

/* 085. 画像ズーム */
.is-image-zoom { --is-duration: .55s; overflow: hidden; border-radius: 1rem; }
.is-image-zoom img { display: block; width: 100%; transition: transform var(--is-duration) ease; }
.is-image-zoom:hover img,
.is-image-zoom:focus-visible img,
.demo-stage.is-hover-simulated .is-image-zoom img,
.dialog-preview-stage.is-hover-simulated .is-image-zoom img { transform: scale(1.1); }

/* 086. 画像パン */
.is-image-pan { --is-duration: .7s; overflow: hidden; border-radius: 1rem; }
.is-image-pan img { display: block; width: 112%; max-width: none; transform: translateX(0); transition: transform var(--is-duration) ease; }
.is-image-pan:hover img,
.is-image-pan:focus-visible img,
.demo-stage.is-hover-simulated .is-image-pan img,
.dialog-preview-stage.is-hover-simulated .is-image-pan img { transform: translateX(-10%); }

/* 087. グレースケール解除 */
.is-image-grayscale { --is-duration: .45s; display: block; max-width: 100%; filter: grayscale(1); transition: filter var(--is-duration), transform var(--is-duration); }
.is-image-grayscale:hover,
.is-image-grayscale:focus-visible,
.demo-stage.is-hover-simulated .is-image-grayscale,
.dialog-preview-stage.is-hover-simulated .is-image-grayscale { filter: grayscale(0); transform: scale(1.025); }

/* 088. ぼかし解除 */
.is-image-blur { --is-duration: .45s; display: block; max-width: 100%; filter: blur(6px); transform: scale(1.04); transition: filter var(--is-duration), transform var(--is-duration); }
.is-image-blur:hover,
.is-image-blur:focus-visible,
.demo-stage.is-hover-simulated .is-image-blur,
.dialog-preview-stage.is-hover-simulated .is-image-blur { filter: blur(0); transform: scale(1); }

/* 089. クリップ画像リビール */
.is-image-clip { --is-duration: .65s; display: block; max-width: 100%; clip-path: polygon(0 0, 0 0, 0 100%, 0 100%); transition: clip-path var(--is-duration) ease; }
.is-image-clip:hover,
.is-image-clip:focus-visible,
.demo-stage.is-hover-simulated .is-image-clip,
.dialog-preview-stage.is-hover-simulated .is-image-clip { clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%); }

/* 090. ケンバーンズ */
.is-image-ken-burns { --is-duration: 9s; overflow: hidden; border-radius: 1rem; }
.is-image-ken-burns img { display: block; width: 100%; animation: is-image-ken-burns var(--is-duration) ease-in-out infinite alternate; }
@keyframes is-image-ken-burns { from { transform: scale(1) translate(0, 0); } to { transform: scale(1.18) translate(-4%, -3%); } }

/* 091. アニメーション・グラデーション */
.is-background-gradient {
  --is-duration: 8s;
  min-height: 180px;
  display: grid;
  place-items: center;
  color: #fff;
  background: linear-gradient(-45deg, #0b2545, #315b7d, #22a6c7, #7c3aed);
  background-size: 400% 400%;
  animation: is-background-gradient var(--is-duration) ease infinite;
}
@keyframes is-background-gradient { 0%, 100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } }

/* 092. 流れるストライプ */
.is-background-stripes {
  --is-duration: 1s;
  min-height: 180px;
  display: grid;
  place-items: center;
  color: #fff;
  background: repeating-linear-gradient(45deg, #315b7d 0 14px, #4e7897 14px 28px);
  background-size: 40px 40px;
  animation: is-background-stripes var(--is-duration) linear infinite;
}
@keyframes is-background-stripes { to { background-position: 40px 0; } }

/* 093. 移動グリッド */
.is-background-grid {
  --is-duration: 3s;
  min-height: 180px;
  display: grid;
  place-items: center;
  color: #0b2545;
  background-color: #eef4f8;
  background-image: linear-gradient(#b8c9d5 1px, transparent 1px), linear-gradient(90deg, #b8c9d5 1px, transparent 1px);
  background-size: 28px 28px;
  animation: is-background-grid var(--is-duration) linear infinite;
}
@keyframes is-background-grid { to { background-position: 28px 28px; } }

/* 094. ドットドリフト */
.is-background-dots {
  --is-duration: 5s;
  min-height: 180px;
  display: grid;
  place-items: center;
  color: #0b2545;
  background-color: #edf4f8;
  background-image: radial-gradient(#4e7897 2px, transparent 2px);
  background-size: 24px 24px;
  animation: is-background-dots var(--is-duration) linear infinite;
}
@keyframes is-background-dots { to { background-position: 24px -24px; } }

/* 095. 浮遊バブル */
.is-background-bubbles { position: relative; min-height: 180px; overflow: hidden; display: grid; place-items: center; color: #fff; background: linear-gradient(#22a6c7, #315b7d); }
.is-background-bubbles span { --is-duration: 4s; position: absolute; bottom: -40px; width: 26px; aspect-ratio: 1; background: rgb(255 255 255 / .32); border: 1px solid rgb(255 255 255 / .5); border-radius: 50%; animation: is-background-bubbles var(--is-duration) linear infinite; }
.is-background-bubbles span:nth-child(1) { left: 12%; }
.is-background-bubbles span:nth-child(2) { left: 36%; animation-delay: 1s; transform: scale(1.5); }
.is-background-bubbles span:nth-child(3) { left: 64%; animation-delay: 2.2s; transform: scale(.7); }
.is-background-bubbles span:nth-child(4) { left: 84%; animation-delay: .5s; transform: scale(1.2); }
@keyframes is-background-bubbles { to { translate: 0 -240px; opacity: 0; } }

/* 096. モーフィングブロブ */
.is-background-blob {
  --is-duration: 7s;
  width: 190px;
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  color: #fff;
  background: linear-gradient(135deg, #315b7d, #22a6c7);
  animation: is-background-blob var(--is-duration) ease-in-out infinite alternate;
}
@keyframes is-background-blob {
  0%   { border-radius: 42% 58% 62% 38% / 48% 42% 58% 52%; transform: rotate(0); }
  50%  { border-radius: 58% 42% 38% 62% / 38% 60% 40% 62%; transform: rotate(6deg); }
  100% { border-radius: 48% 52% 66% 34% / 62% 34% 66% 38%; transform: rotate(-5deg); }
}

/* 097. 回転するコニック枠 */
.is-border-conic { --is-duration: 3s; position: relative; isolation: isolate; overflow: hidden; padding: 3px; border-radius: 1rem; }
.is-border-conic::before { content: ""; position: absolute; inset: -100%; z-index: -2; background: conic-gradient(#22a6c7, #7c3aed, #f43f5e, #22a6c7); animation: is-border-conic var(--is-duration) linear infinite; }
.is-border-conic::after { content: ""; position: absolute; inset: 3px; z-index: -1; background: #fff; border-radius: calc(1rem - 2px); }
.is-border-conic span { display: block; padding: 2rem; }
@keyframes is-border-conic { to { transform: rotate(1turn); } }

/* 098. 流れる破線枠 */
.is-border-dashed {
  --is-duration: 1.2s;
  padding: 2rem;
  color: #0b2545;
  background: linear-gradient(90deg, #315b7d 50%, transparent 0) 0 0 / 14px 2px repeat-x, linear-gradient(90deg, #315b7d 50%, transparent 0) 0 100% / 14px 2px repeat-x, linear-gradient(0deg, #315b7d 50%, transparent 0) 0 0 / 2px 14px repeat-y, linear-gradient(0deg, #315b7d 50%, transparent 0) 100% 0 / 2px 14px repeat-y;
  animation: is-border-dashed var(--is-duration) linear infinite;
}
@keyframes is-border-dashed { to { background-position: 14px 0, -14px 100%, 0 -14px, 100% 14px; } }

/* 099. 呼吸するグロー枠 */
.is-border-glow { --is-duration: 1.8s; padding: 2rem; color: #0b2545; background: #fff; border: 2px solid #5b87a6; border-radius: 1rem; animation: is-border-glow var(--is-duration) ease-in-out infinite alternate; }
@keyframes is-border-glow { from { box-shadow: 0 0 0 2px rgb(49 91 125 / .12), 0 0 8px rgb(18 167 165 / .18); } to { box-shadow: 0 0 0 6px rgb(18 167 165 / .42), 0 0 36px rgb(18 167 165 / .82); } }

/* 100. シマーパネル */
.is-background-shimmer { --is-duration: 2s; position: relative; overflow: hidden; min-height: 160px; display: grid; place-items: center; color: #fff; background: #315b7d; }
.is-background-shimmer::after { content: ""; position: absolute; inset: 0; background: linear-gradient(105deg, transparent 35%, rgb(255 255 255 / .32) 50%, transparent 65%); transform: translateX(-100%); animation: is-background-shimmer var(--is-duration) ease-in-out infinite; }
@keyframes is-background-shimmer { 55%, 100% { transform: translateX(100%); } }

/* 101. アコーディオン */
.is-ui-accordion { --is-duration: .35s; overflow: hidden; border: 1px solid #cbd8e1; border-radius: .8rem; background: #fff; }
.is-ui-accordion summary { padding: 1rem; cursor: pointer; font-weight: 700; }
.is-ui-accordion > div { display: grid; grid-template-rows: 0fr; transition: grid-template-rows var(--is-duration) ease; }
.is-ui-accordion > div > * { min-height: 0; overflow: hidden; margin: 0; padding-inline: 1rem; }
.is-ui-accordion[open] > div { grid-template-rows: 1fr; }
.is-ui-accordion[open] > div > * { padding-bottom: 1rem; }

/* 102. ツールチップ */
.is-ui-tooltip { --is-duration: .2s; position: relative; }
.is-ui-tooltip::after { content: attr(data-tip); position: absolute; left: 50%; bottom: calc(100% + 10px); z-index: 5; padding: .45em .7em; color: #fff; background: #0b2545; border-radius: .5em; white-space: nowrap; opacity: 0; pointer-events: none; transform: translate(-50%, 6px); transition: opacity var(--is-duration), transform var(--is-duration); }
.is-ui-tooltip:hover::after, .is-ui-tooltip:focus-visible::after,
.demo-stage.is-hover-simulated .is-ui-tooltip::after,
.dialog-preview-stage.is-hover-simulated .is-ui-tooltip::after { opacity: 1; transform: translate(-50%, 0); }

/* 103. CSSドロップダウン */
.is-ui-dropdown { --is-duration: .22s; position: relative; display: inline-block; }
.is-ui-dropdown summary { padding: .7em 1em; background: #315b7d; color: #fff; border-radius: .65em; cursor: pointer; list-style: none; }
.is-ui-dropdown nav { position: absolute; top: calc(100% + 8px); left: 0; z-index: 10; min-width: 160px; padding: .45rem; background: #fff; border: 1px solid #d5e0e7; border-radius: .7rem; box-shadow: 0 14px 30px rgb(11 37 69 / .16); opacity: 0; transform: translateY(-6px) scale(.97); transform-origin: top left; transition: opacity var(--is-duration), transform var(--is-duration); }
.is-ui-dropdown[open] nav { opacity: 1; transform: translateY(0) scale(1); }
.is-ui-dropdown a { display: block; padding: .55em .7em; color: #0b2545; text-decoration: none; border-radius: .45em; }
.is-ui-dropdown a:hover,
.is-ui-dropdown a:focus-visible,
.demo-stage.is-hover-simulated .is-ui-dropdown a,
.dialog-preview-stage.is-hover-simulated .is-ui-dropdown a { background: #eef4f8; }

/* 104. トグルスイッチ */
.is-ui-toggle { --is-duration: .25s; display: inline-flex; align-items: center; gap: .7rem; cursor: pointer; }
.is-ui-toggle input { position: absolute; opacity: 0; pointer-events: none; }
.is-ui-toggle span { position: relative; width: 52px; height: 30px; background: #b8c6d0; border-radius: 999px; transition: background var(--is-duration); }
.is-ui-toggle span::after { content: ""; position: absolute; top: 4px; left: 4px; width: 22px; aspect-ratio: 1; background: #fff; border-radius: 50%; box-shadow: 0 2px 6px rgb(0 0 0 / .22); transition: transform var(--is-duration); }
.is-ui-toggle input:checked + span { background: #315b7d; }
.is-ui-toggle input:checked + span::after { transform: translateX(22px); }
.is-ui-toggle input:focus-visible + span { outline: 3px solid rgb(34 166 199 / .35); outline-offset: 3px; }

/* 105. チェック描画 */
.is-ui-checkbox { --is-duration: .22s; display: inline-flex; align-items: center; gap: .65rem; cursor: pointer; }
.is-ui-checkbox input { position: absolute; opacity: 0; inline-size: 1px; block-size: 1px; pointer-events: none; }
.is-ui-checkbox span { position: relative; width: 24px; aspect-ratio: 1; border: 2px solid #8197a8; border-radius: .35rem; transition: background var(--is-duration), border-color var(--is-duration); }
.is-ui-checkbox span::after { content: ""; position: absolute; left: 5px; top: 1px; width: 7px; height: 13px; border: solid #fff; border-width: 0 3px 3px 0; opacity: 0; transform: rotate(45deg) scale(.4); transition: opacity var(--is-duration), transform var(--is-duration); }
.is-ui-checkbox input:checked + span { background: #315b7d; border-color: #315b7d; }
.is-ui-checkbox input:checked + span::after { opacity: 1; transform: rotate(45deg) scale(1); }
.is-ui-checkbox input:focus-visible + span { outline: 3px solid rgb(34 166 199 / .35); outline-offset: 3px; }

/* 106. メニューアイコン変形 */
.is-ui-menu-icon { --is-duration: .28s; position: relative; display: grid; gap: 7px; width: 64px; padding: 12px; background:#fff; border:2px solid #9fb3c1; border-radius:.8rem; box-shadow:0 8px 18px rgb(11 37 69 / .12); cursor: pointer; }
.is-ui-menu-icon input { position: absolute; opacity: 0; inline-size: 1px; block-size: 1px; pointer-events: none; }
.is-ui-menu-icon span { display: block; height: 5px; background: #0b5f68; border-radius: 999px; transition: transform var(--is-duration), opacity var(--is-duration); }
.is-ui-menu-icon:has(input:checked) span:nth-of-type(1) { transform: translateY(12px) rotate(45deg); }
.is-ui-menu-icon:has(input:checked) span:nth-of-type(2) { opacity: 0; transform: scaleX(0); }
.is-ui-menu-icon:has(input:checked) span:nth-of-type(3) { transform: translateY(-12px) rotate(-45deg); }
.is-ui-menu-icon:has(input:focus-visible) { outline: 3px solid rgb(34 166 199 / .45); outline-offset: 4px; border-radius: .45rem; }

/* 107. フローティングラベル */
.is-ui-floating-label { --is-duration: .2s; position: relative; display: block; width: min(300px, 80vw); }
.is-ui-floating-label input { width: 100%; padding: 1.2rem .9rem .55rem; border: 1px solid #aebfcb; border-radius: .7rem; font: inherit; outline: 0; transition: border-color var(--is-duration), box-shadow var(--is-duration); }
.is-ui-floating-label span { position: absolute; left: .9rem; top: .88rem; color: #657789; pointer-events: none; transform-origin: left top; transition: transform var(--is-duration), color var(--is-duration); }
.is-ui-floating-label input:focus, .is-ui-floating-label input:not(:placeholder-shown) { border-color: #315b7d; box-shadow: 0 0 0 3px rgb(49 91 125 / .14); }
.is-ui-floating-label input:focus + span, .is-ui-floating-label input:not(:placeholder-shown) + span { color: #315b7d; transform: translateY(-.55rem) scale(.75); }

/* 108. 通知ベル */
.is-ui-bell { --is-duration: 2.4s; display: inline-block; transform-origin: top center; animation: is-ui-bell var(--is-duration) ease-in-out infinite; }
@keyframes is-ui-bell { 0%, 68%, 100% { transform: rotate(0); } 74% { transform: rotate(13deg); } 80% { transform: rotate(-11deg); } 86% { transform: rotate(7deg); } 92% { transform: rotate(-4deg); } }

/* 109. 通知バッジポップ */
.is-ui-badge { position: relative; display: inline-block; padding: .7em 1.1em; background: #fff; border: 1px solid #cad7e0; border-radius: .7em; }
.is-ui-badge b { --is-duration: 1.2s; position: absolute; top: -11px; right: -11px; display: grid; place-items: center; min-width: 26px; height: 26px; padding: 0 6px; color: #fff; background: #e11d48; border: 3px solid #fff; border-radius: 999px; animation: is-ui-badge var(--is-duration) ease-in-out infinite; }
@keyframes is-ui-badge { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.18); } }

/* 110. 進捗バー表示 */
@property --is-progress-value { syntax:"<integer>"; inherits:true; initial-value:0; }
.is-ui-progress { --is-duration: 3s; --is-progress-value:0; width: min(320px, 80vw); height: 28px; overflow: hidden; position:relative; background: #d4e0e8; border:2px solid #9fb3c1; border-radius: 999px; animation:is-ui-progress var(--is-duration) ease-in-out both; }
.is-ui-progress span { display:block; width:calc(var(--is-progress-value) * 1%); height:100%; background:linear-gradient(90deg,#315b7d,#087f82); border-radius:inherit; }
.is-ui-progress::after { content:counter(is-progress) "%"; counter-reset:is-progress var(--is-progress-value); position:absolute; right:8px; top:50%; padding:2px 6px; color:#0b2545; background:rgb(255 255 255 / .92); border-radius:999px; font:800 .68rem/1 system-ui,sans-serif; transform:translateY(-50%); }
@keyframes is-ui-progress { 0%,8%{--is-progress-value:0} 88%,100%{--is-progress-value:100} }

.demo-stage .is-ui-progress,
.dialog-preview-stage .is-ui-progress,
.demo-stage .is-loader-progress,
.dialog-preview-stage .is-loader-progress,
.demo-stage .is-loader-progress-indeterminate,
.dialog-preview-stage .is-loader-progress-indeterminate,
.demo-stage .is-loader-progress-segments,
.dialog-preview-stage .is-loader-progress-segments { max-width: 100%; }

/* 111. スクロール・フェードアップ */
.is-scroll-fade-up { opacity: 1; }
@supports (animation-timeline: view()) {
  .is-scroll-fade-up {
    animation: is-scroll-fade-up linear both;
    animation-timeline: view();
    animation-range: entry 10% cover 35%;
  }
  @keyframes is-scroll-fade-up { from { opacity: 0; transform: translateY(42px); } to { opacity: 1; transform: translateY(0); } }
}

/* 112. スクロール・スケール */
.is-scroll-scale { opacity: 1; }
@supports (animation-timeline: view()) {
  .is-scroll-scale { animation: is-scroll-scale linear both; animation-timeline: view(); animation-range: entry 5% cover 40%; }
  @keyframes is-scroll-scale { from { opacity: 0; transform: scale(.72); } to { opacity: 1; transform: scale(1); } }
}

/* 113. スクロール・ローテート */
.is-scroll-rotate { opacity: 1; }
@supports (animation-timeline: view()) {
  .is-scroll-rotate { animation: is-scroll-rotate linear both; animation-timeline: view(); animation-range: entry 0% cover 45%; }
  @keyframes is-scroll-rotate { from { opacity: 0; transform: rotate(-18deg) scale(.82); } to { opacity: 1; transform: rotate(0) scale(1); } }
}

/* 114. ページスクロール進捗 */
.is-scroll-progress { display: none; }
@supports (animation-timeline: scroll()) {
  .is-scroll-progress { position: fixed; inset: 0 0 auto; z-index: 9999; display: block; height: 4px; background: linear-gradient(90deg, #315b7d, #22a6c7); transform-origin: left; animation: is-scroll-progress linear; animation-timeline: scroll(); }
  @keyframes is-scroll-progress { from { transform: scaleX(0); } to { transform: scaleX(1); } }
}

/* 115. SVGチェック描画 */
.is-svg-check { --is-duration: .9s; width: 74px; fill: none; stroke: #22a06b; stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; }
.is-svg-check circle, .is-svg-check path { stroke-dasharray: 160; stroke-dashoffset: 160; animation: is-svg-check var(--is-duration) ease forwards; }
.is-svg-check path { animation-delay: calc(var(--is-duration) * .48); }
@keyframes is-svg-check { to { stroke-dashoffset: 0; } }

/* 116. SVGサークル描画 */
.is-svg-circle { --is-duration: 1.5s; width: 110px; transform: rotate(-90deg); }
.is-svg-circle circle { fill: none; stroke: #315b7d; stroke-width: 9; stroke-linecap: round; stroke-dasharray: 314; stroke-dashoffset: 314; animation: is-svg-circle var(--is-duration) ease-out forwards; }
@keyframes is-svg-circle { to { stroke-dashoffset: 0; } }

/* 117. SVGハート描画 */
.is-svg-heart { --is-duration: 1.8s; width: 110px; fill: transparent; stroke: #e11d48; stroke-width: 4; stroke-linejoin: round; }
.is-svg-heart path { stroke-dasharray: 310; stroke-dashoffset: 310; animation: is-svg-heart var(--is-duration) ease-in-out forwards; }
@keyframes is-svg-heart { 75% { fill: transparent; } 100% { stroke-dashoffset: 0; fill: rgb(225 29 72 / .14); } }

/* 118. 色相回転 */
.is-filter-hue { --is-duration: 5s; display: block; max-width: 100%; animation: is-filter-hue var(--is-duration) linear infinite; }
@keyframes is-filter-hue { to { filter: hue-rotate(360deg); } }

/* 119. フォーカスフィルター */
.is-filter-focus { --is-duration: .55s; display: block; max-width: 100%; filter: blur(5px) saturate(.35) brightness(.82); transform: scale(1.03); transition: filter var(--is-duration), transform var(--is-duration); }
.is-filter-focus:hover,
.is-filter-focus:focus-visible,
.demo-stage.is-hover-simulated .is-filter-focus,
.dialog-preview-stage.is-hover-simulated .is-filter-focus { filter: blur(0) saturate(1) brightness(1); transform: scale(1); }

/* 120. ドロップシャドウパルス */
.is-filter-shadow-pulse { --is-duration: 1.6s; color: #f59e0b; font-size: 72px; animation: is-filter-shadow-pulse var(--is-duration) ease-in-out infinite alternate; }
@keyframes is-filter-shadow-pulse { from { filter: drop-shadow(0 4px 4px rgb(245 158 11 / .18)); transform: scale(1); } to { filter: drop-shadow(0 12px 16px rgb(245 158 11 / .55)); transform: scale(1.08); } }


/* OSの「視差効果を減らす」を尊重する共通設定 */
@media (prefers-reduced-motion: reduce) {
  [class^="is-"], [class*=" is-"] {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
}


/* ===== 追加収録 121〜360 ===== */


/* 121. フェード・スケールアップ */
.is-fade-scale-up {
  --is-duration: 0.8s;
  animation: is-fade-scale-up var(--is-duration) cubic-bezier(.22,1,.36,1) both;
}

@keyframes is-fade-scale-up {
  from { opacity: 0; transform: scale(.72); }
  to   { opacity: 1; transform: scale(1); }
}


/* 122. フェード・スケールダウン */
.is-fade-scale-down {
  --is-duration: 0.8s;
  animation: is-fade-scale-down var(--is-duration) cubic-bezier(.22,1,.36,1) both;
}

@keyframes is-fade-scale-down {
  from { opacity: 0; transform: scale(1.3); }
  to   { opacity: 1; transform: scale(1); }
}


/* 123. フェード回転・左 */
.is-fade-rotate-left {
  --is-duration: 0.8s;
  animation: is-fade-rotate-left var(--is-duration) cubic-bezier(.22,1,.36,1) both;
}

@keyframes is-fade-rotate-left {
  from { opacity: 0; transform: rotate(-16deg) scale(.92); }
  to   { opacity: 1; transform: rotate(0) scale(1); }
}


/* 124. フェード回転・右 */
.is-fade-rotate-right {
  --is-duration: 0.8s;
  animation: is-fade-rotate-right var(--is-duration) cubic-bezier(.22,1,.36,1) both;
}

@keyframes is-fade-rotate-right {
  from { opacity: 0; transform: rotate(16deg) scale(.92); }
  to   { opacity: 1; transform: rotate(0) scale(1); }
}


/* 125. フェードスキュー・左 */
.is-fade-skew-left {
  --is-duration: 0.8s;
  --is-distance: 34px;
  animation: is-fade-skew-left var(--is-duration) cubic-bezier(.22,1,.36,1) both;
}

@keyframes is-fade-skew-left {
  from { opacity: 0; transform: translateX(-34px) skewX(-18deg); }
  to   { opacity: 1; transform: translateX(0) skewX(0); }
}


/* 126. フェードスキュー・右 */
.is-fade-skew-right {
  --is-duration: 0.8s;
  --is-distance: 34px;
  animation: is-fade-skew-right var(--is-duration) cubic-bezier(.22,1,.36,1) both;
}

@keyframes is-fade-skew-right {
  from { opacity: 0; transform: translateX(34px) skewX(18deg); }
  to   { opacity: 1; transform: translateX(0) skewX(0); }
}


/* 127. ブラー・フェードアップ */
.is-fade-blur-up {
  --is-duration: 0.8s;
  --is-distance: 34px;
  animation: is-fade-blur-up var(--is-duration) cubic-bezier(.22,1,.36,1) both;
}

@keyframes is-fade-blur-up {
  from { opacity: 0; filter: blur(14px); transform: translateY(34px); }
  to   { opacity: 1; filter: blur(0); transform: translateY(0); }
}


/* 128. ブラー・フェードダウン */
.is-fade-blur-down {
  --is-duration: 0.8s;
  --is-distance: 34px;
  animation: is-fade-blur-down var(--is-duration) cubic-bezier(.22,1,.36,1) both;
}

@keyframes is-fade-blur-down {
  from { opacity: 0; filter: blur(14px); transform: translateY(-34px); }
  to   { opacity: 1; filter: blur(0); transform: translateY(0); }
}


/* 129. クリップ・リビール・右 */
.is-reveal-right {
  --is-duration: 0.8s;
  animation: is-reveal-right var(--is-duration) cubic-bezier(.22,1,.36,1) both;
}

@keyframes is-reveal-right {
  from { clip-path: inset(0 0 0 100%); }
  to   { clip-path: inset(0); }
}


/* 130. クリップ・リビール・ダウン */
.is-reveal-down {
  --is-duration: 0.8s;
  animation: is-reveal-down var(--is-duration) cubic-bezier(.22,1,.36,1) both;
}

@keyframes is-reveal-down {
  from { clip-path: inset(0 0 100% 0); }
  to   { clip-path: inset(0); }
}


/* 131. 中央から横にリビール */
.is-reveal-center-x {
  --is-duration: 0.8s;
  animation: is-reveal-center-x var(--is-duration) cubic-bezier(.22,1,.36,1) both;
}

@keyframes is-reveal-center-x {
  from { clip-path: inset(0 50%); }
  to   { clip-path: inset(0); }
}


/* 132. 中央から縦にリビール */
.is-reveal-center-y {
  --is-duration: 0.8s;
  animation: is-reveal-center-y var(--is-duration) cubic-bezier(.22,1,.36,1) both;
}

@keyframes is-reveal-center-y {
  from { clip-path: inset(50% 0); }
  to   { clip-path: inset(0); }
}


/* 133. サークル・リビール */
.is-reveal-circle {
  --is-duration: 0.8s;
  animation: is-reveal-circle var(--is-duration) cubic-bezier(.22,1,.36,1) both;
}

@keyframes is-reveal-circle {
  from { clip-path: circle(0 at 50% 50%); }
  to   { clip-path: circle(75% at 50% 50%); }
}


/* 134. ダイヤ・リビール */
.is-reveal-diamond {
  --is-duration: 0.8s;
  animation: is-reveal-diamond var(--is-duration) cubic-bezier(.22,1,.36,1) both;
}

@keyframes is-reveal-diamond {
  from { clip-path: polygon(50% 50%,50% 50%,50% 50%,50% 50%); }
  to   { clip-path: polygon(50% 0,100% 50%,50% 100%,0 50%); }
}


/* 135. 斜めワイプ・リビール */
.is-reveal-diagonal {
  --is-duration: 0.8s;
  animation: is-reveal-diagonal var(--is-duration) cubic-bezier(.22,1,.36,1) both;
}

@keyframes is-reveal-diagonal {
  from { clip-path: polygon(0 0,0 0,0 100%,0 100%); }
  to   { clip-path: polygon(0 0,125% 0,100% 100%,0 100%); }
}


/* 136. ソフトマスク・ワイプ */
.is-mask-wipe-soft {
  --is-duration: 1s;
  -webkit-mask-image: linear-gradient(90deg, rgb(0 0 0 / .42) 0 24%, #000 44% 100%);
  mask-image: linear-gradient(90deg, rgb(0 0 0 / .42) 0 24%, #000 44% 100%);
  -webkit-mask-size: 220% 100%; mask-size: 220% 100%;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  animation: is-mask-wipe-soft var(--is-duration) ease-out both;
}
@keyframes is-mask-wipe-soft {
  from { -webkit-mask-position: 100% 0; mask-position: 100% 0; }
  to   { -webkit-mask-position: 32% 0; mask-position: 32% 0; }
}


/* 137. ブライトネス・イン */
.is-brightness-in {
  --is-duration: 0.8s;
  animation: is-brightness-in var(--is-duration) cubic-bezier(.22,1,.36,1) both;
}

@keyframes is-brightness-in {
  from { opacity: 0; filter: brightness(3); }
  to   { opacity: 1; filter: brightness(1); }
}


/* 138. コントラスト・イン */
.is-contrast-in {
  --is-duration: 0.8s;
  animation: is-contrast-in var(--is-duration) cubic-bezier(.22,1,.36,1) both;
}

@keyframes is-contrast-in {
  from { opacity: 0; filter: contrast(3); }
  to   { opacity: 1; filter: contrast(1); }
}


/* 139. サチュレート・イン */
.is-saturate-in {
  --is-duration: 0.8s;
  animation: is-saturate-in var(--is-duration) cubic-bezier(.22,1,.36,1) both;
}

@keyframes is-saturate-in {
  from { opacity: 0; filter: saturate(4); }
  to   { opacity: 1; filter: saturate(1); }
}


/* 140. シャドウ・フェードイン */
.is-shadow-in {
  --is-duration: 0.8s;
  animation: is-shadow-in var(--is-duration) cubic-bezier(.22,1,.36,1) both;
}

@keyframes is-shadow-in {
  from { opacity: 0; filter: drop-shadow(0 28px 30px rgb(11 37 69 / .55)); transform: translateY(-12px); }
  to   { opacity: 1; filter: drop-shadow(0 0 0 transparent); transform: translateY(0); }
}


/* 141. 左上からスライド */
.is-slide-top-left {
  --is-duration: 0.8s;
  --is-distance: 72px;
  animation: is-slide-top-left var(--is-duration) cubic-bezier(.22,1,.36,1) both;
}

@keyframes is-slide-top-left {
  from { opacity: 0; transform: translate(calc(var(--is-distance) * -1), calc(var(--is-distance) * -1)); }
  to { opacity: 1; transform: translate(0); }
}


/* 142. 右上からスライド */
.is-slide-top-right {
  --is-duration: 0.8s;
  --is-distance: 72px;
  animation: is-slide-top-right var(--is-duration) cubic-bezier(.22,1,.36,1) both;
}

@keyframes is-slide-top-right {
  from { opacity: 0; transform: translate(var(--is-distance), calc(var(--is-distance) * -1)); }
  to { opacity: 1; transform: translate(0); }
}


/* 143. 左下からスライド */
.is-slide-bottom-left {
  --is-duration: 0.8s;
  --is-distance: 72px;
  animation: is-slide-bottom-left var(--is-duration) cubic-bezier(.22,1,.36,1) both;
}

@keyframes is-slide-bottom-left {
  from { opacity: 0; transform: translate(calc(var(--is-distance) * -1), var(--is-distance)); }
  to { opacity: 1; transform: translate(0); }
}


/* 144. 右下からスライド */
.is-slide-bottom-right {
  --is-duration: 0.8s;
  --is-distance: 72px;
  animation: is-slide-bottom-right var(--is-duration) cubic-bezier(.22,1,.36,1) both;
}

@keyframes is-slide-bottom-right {
  from { opacity: 0; transform: translate(var(--is-distance), var(--is-distance)); }
  to { opacity: 1; transform: translate(0); }
}


/* 145. スプリングスライド・左 */
.is-slide-spring-left {
  --is-duration: 1s;
  --is-distance: 72px;
  animation: is-slide-spring-left var(--is-duration) cubic-bezier(.22,1,.36,1) both;
}

@keyframes is-slide-spring-left {
  0% { opacity: 0; transform: translateX(calc(var(--is-distance) * -1)); }
  60% { opacity: 1; transform: translateX(16px); }
  78% { transform: translateX(-8px); }
  90% { transform: translateX(4px); }
  100% { transform: translateX(0); }
}


/* 146. スプリングスライド・右 */
.is-slide-spring-right {
  --is-duration: 1s;
  --is-distance: 72px;
  animation: is-slide-spring-right var(--is-duration) cubic-bezier(.22,1,.36,1) both;
}

@keyframes is-slide-spring-right {
  0% { opacity: 0; transform: translateX(var(--is-distance)); }
  60% { opacity: 1; transform: translateX(-16px); }
  78% { transform: translateX(8px); }
  90% { transform: translateX(-4px); }
  100% { transform: translateX(0); }
}


/* 147. ブレーキ・スライド */
.is-slide-brake {
  --is-duration: 0.7s;
  --is-distance: 72px;
  animation: is-slide-brake var(--is-duration) cubic-bezier(.1,.8,.2,1) both;
}

@keyframes is-slide-brake {
  0% { opacity: 0; transform: translateX(calc(var(--is-distance) * -1)); }
  72% { opacity: 1; transform: translateX(7px); }
  100% { transform: translateX(0); }
}


/* 148. スナップ・スライド */
.is-slide-snap {
  --is-duration: 0.72s;
  --is-distance: 72px;
  animation: is-slide-snap var(--is-duration) cubic-bezier(.2,.9,.25,1.35) both;
}

@keyframes is-slide-snap {
  0% { opacity: 0; transform: translateY(var(--is-distance)); }
  76% { opacity: 1; transform: translateY(-13px); }
  100% { transform: translateY(0); }
}


/* 149. ウェーブ・スライド */
.is-slide-wave {
  --is-duration: 1.05s;
  --is-distance: 72px;
  animation: is-slide-wave var(--is-duration) cubic-bezier(.22,1,.36,1) both;
}

@keyframes is-slide-wave {
  0% { opacity: 0; transform: translate(-36px,var(--is-distance)); }
  35% { transform: translate(22px,38px); }
  68% { opacity: 1; transform: translate(-10px,12px); }
  100% { transform: translate(0); }
}


/* 150. ジグザグ・スライド */
.is-slide-zigzag {
  --is-duration: 1.15s;
  --is-distance: 72px;
  animation: is-slide-zigzag var(--is-duration) cubic-bezier(.22,1,.36,1) both;
}

@keyframes is-slide-zigzag {
  0% { opacity: 0; transform: translate(-45px,var(--is-distance)); }
  30% { transform: translate(38px,50px); }
  60% { transform: translate(-24px,25px); }
  82% { opacity: 1; transform: translate(10px,8px); }
  100% { transform: translate(0); }
}


/* 151. アークスライド・左 */
.is-slide-arc-left {
  --is-duration: 0.95s;
  --is-distance: 72px;
  animation: is-slide-arc-left var(--is-duration) cubic-bezier(.22,1,.36,1) both;
}

@keyframes is-slide-arc-left {
  0% { opacity: 0; transform: translate(calc(var(--is-distance) * -1),45px) rotate(-14deg); }
  55% { transform: translate(-18px,-12px) rotate(3deg); }
  100% { opacity: 1; transform: translate(0) rotate(0); }
}


/* 152. アークスライド・右 */
.is-slide-arc-right {
  --is-duration: 0.95s;
  --is-distance: 72px;
  animation: is-slide-arc-right var(--is-duration) cubic-bezier(.22,1,.36,1) both;
}

@keyframes is-slide-arc-right {
  0% { opacity: 0; transform: translate(var(--is-distance),45px) rotate(14deg); }
  55% { transform: translate(18px,-12px) rotate(-3deg); }
  100% { opacity: 1; transform: translate(0) rotate(0); }
}


/* 153. 奥からスライドイン */
.is-slide-depth-in {
  --is-duration: 0.8s;
  --is-distance: 42px;
  animation: is-slide-depth-in var(--is-duration) cubic-bezier(.22,1,.36,1) both;
}

@keyframes is-slide-depth-in {
  from { opacity: 0; transform: perspective(700px) translateZ(-240px) translateY(42px); }
  to { opacity: 1; transform: perspective(700px) translateZ(0) translateY(0); }
}


/* 154. 手前からスライドイン */
.is-slide-depth-out {
  --is-duration: 0.8s;
  --is-distance: 28px;
  animation: is-slide-depth-out var(--is-duration) cubic-bezier(.22,1,.36,1) both;
}

@keyframes is-slide-depth-out {
  from { opacity: 0; transform: perspective(700px) translateZ(220px) translateY(-28px); }
  to { opacity: 1; transform: perspective(700px) translateZ(0) translateY(0); }
}


/* 155. 折りたたみスライド・左 */
.is-slide-fold-left {
  --is-duration: 0.8s;
  --is-distance: 72px;
  animation: is-slide-fold-left var(--is-duration) cubic-bezier(.22,1,.36,1) both;
}

@keyframes is-slide-fold-left {
  from { opacity: 0; transform-origin: left center; transform: translateX(calc(var(--is-distance) * -1)) rotateY(-68deg); }
  to { opacity: 1; transform-origin: left center; transform: translateX(0) rotateY(0); }
}


/* 156. 折りたたみスライド・右 */
.is-slide-fold-right {
  --is-duration: 0.8s;
  --is-distance: 72px;
  animation: is-slide-fold-right var(--is-duration) cubic-bezier(.22,1,.36,1) both;
}

@keyframes is-slide-fold-right {
  from { opacity: 0; transform-origin: right center; transform: translateX(var(--is-distance)) rotateY(68deg); }
  to { opacity: 1; transform-origin: right center; transform: translateX(0) rotateY(0); }
}


/* 157. カーテン・スライド */
.is-slide-curtain {
  --is-duration: 0.8s;
  --is-distance: 72px;
  animation: is-slide-curtain var(--is-duration) cubic-bezier(.22,1,.36,1) both;
}

@keyframes is-slide-curtain {
  from { opacity: 0; transform-origin: top; transform: translateY(calc(var(--is-distance) * -1)) scaleY(.15); }
  to { opacity: 1; transform-origin: top; transform: translateY(0) scaleY(1); }
}


/* 158. ステップ・スライド */
.is-slide-step {
  --is-duration: 0.9s;
  --is-distance: 72px;
  animation: is-slide-step var(--is-duration) steps(6,end) both;
}

@keyframes is-slide-step {
  from { opacity: 0; transform: translateX(calc(var(--is-distance) * -1)); }
  to { opacity: 1; transform: translateX(0); }
}


/* 159. 水平シャトル */
.is-shuttle-horizontal {
  --is-duration: 1.05s;
  --is-distance: 72px;
  animation: is-shuttle-horizontal var(--is-duration) cubic-bezier(.22,1,.36,1) both;
}

@keyframes is-shuttle-horizontal {
  0% { opacity: 0; transform: translateX(calc(var(--is-distance) * -1)); }
  38% { opacity: 1; transform: translateX(32px); }
  68% { transform: translateX(-16px); }
  100% { transform: translateX(0); }
}


/* 160. 垂直シャトル */
.is-shuttle-vertical {
  --is-duration: 1.05s;
  --is-distance: 72px;
  animation: is-shuttle-vertical var(--is-duration) cubic-bezier(.22,1,.36,1) both;
}

@keyframes is-shuttle-vertical {
  0% { opacity: 0; transform: translateY(calc(var(--is-distance) * -1)); }
  38% { opacity: 1; transform: translateY(28px); }
  68% { transform: translateY(-14px); }
  100% { transform: translateY(0); }
}


/* 161. ズームイン・左 */
.is-zoom-in-left {
  --is-duration: 0.8s;
  --is-distance: 48px;
  animation: is-zoom-in-left var(--is-duration) cubic-bezier(.22,1,.36,1) both;
}

@keyframes is-zoom-in-left {
  from { opacity: 0; transform: translateX(-48px) scale(.58); }
  to { opacity: 1; transform: translateX(0) scale(1); }
}


/* 162. ズームイン・右 */
.is-zoom-in-right {
  --is-duration: 0.8s;
  --is-distance: 48px;
  animation: is-zoom-in-right var(--is-duration) cubic-bezier(.22,1,.36,1) both;
}

@keyframes is-zoom-in-right {
  from { opacity: 0; transform: translateX(48px) scale(.58); }
  to { opacity: 1; transform: translateX(0) scale(1); }
}


/* 163. ズームイン・上 */
.is-zoom-in-top {
  --is-duration: 0.8s;
  --is-distance: 44px;
  animation: is-zoom-in-top var(--is-duration) cubic-bezier(.22,1,.36,1) both;
}

@keyframes is-zoom-in-top {
  from { opacity: 0; transform: translateY(-44px) scale(.6); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}


/* 164. ズームイン・下 */
.is-zoom-in-bottom {
  --is-duration: 0.8s;
  --is-distance: 44px;
  animation: is-zoom-in-bottom var(--is-duration) cubic-bezier(.22,1,.36,1) both;
}

@keyframes is-zoom-in-bottom {
  from { opacity: 0; transform: translateY(44px) scale(.6); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}


/* 165. バウンス・ズーム */
.is-zoom-bounce {
  --is-duration: 0.9s;
  animation: is-zoom-bounce var(--is-duration) cubic-bezier(.22,1,.36,1) both;
}

@keyframes is-zoom-bounce {
  0% { opacity: 0; transform: scale(.35); }
  58% { opacity: 1; transform: scale(1.18); }
  76% { transform: scale(.94); }
  90% { transform: scale(1.04); }
  100% { transform: scale(1); }
}


/* 166. スプリング・ズーム */
.is-zoom-spring {
  --is-duration: 1.05s;
  animation: is-zoom-spring var(--is-duration) ease-out both;
}

@keyframes is-zoom-spring {
  0% { opacity: 0; transform: scale(.45); }
  45% { opacity: 1; transform: scale(1.13); }
  65% { transform: scale(.91); }
  82% { transform: scale(1.055); }
  100% { transform: scale(1); }
}


/* 167. ローテート・ズーム */
.is-zoom-rotate {
  --is-duration: 0.9s;
  animation: is-zoom-rotate var(--is-duration) cubic-bezier(.22,1,.36,1) both;
}

@keyframes is-zoom-rotate {
  from { opacity: 0; transform: scale(.4) rotate(-150deg); }
  to { opacity: 1; transform: scale(1) rotate(0); }
}


/* 168. スキュー・ズーム */
.is-zoom-skew {
  --is-duration: 0.8s;
  animation: is-zoom-skew var(--is-duration) cubic-bezier(.22,1,.36,1) both;
}

@keyframes is-zoom-skew {
  from { opacity: 0; transform: scale(.5) skew(-18deg,8deg); }
  to { opacity: 1; transform: scale(1) skew(0); }
}


/* 169. 横方向スケールイン */
.is-scale-x-in {
  --is-duration: 0.8s;
  animation: is-scale-x-in var(--is-duration) cubic-bezier(.22,1,.36,1) both;
}

@keyframes is-scale-x-in {
  from { opacity: 0; transform: scaleX(.05); }
  to { opacity: 1; transform: scaleX(1); }
}


/* 170. 縦方向スケールイン */
.is-scale-y-in {
  --is-duration: 0.8s;
  animation: is-scale-y-in var(--is-duration) cubic-bezier(.22,1,.36,1) both;
}

@keyframes is-scale-y-in {
  from { opacity: 0; transform: scaleY(.05); }
  to { opacity: 1; transform: scaleY(1); }
}


/* 171. 左上起点スケール */
.is-scale-top-left {
  --is-duration: 0.8s;
  animation: is-scale-top-left var(--is-duration) cubic-bezier(.22,1,.36,1) both;
}

@keyframes is-scale-top-left {
  from { opacity: 0; transform-origin: top left; transform: scale(.1); }
  to { opacity: 1; transform-origin: top left; transform: scale(1); }
}


/* 172. 右下起点スケール */
.is-scale-bottom-right {
  --is-duration: 0.8s;
  animation: is-scale-bottom-right var(--is-duration) cubic-bezier(.22,1,.36,1) both;
}

@keyframes is-scale-bottom-right {
  from { opacity: 0; transform-origin: bottom right; transform: scale(.1); }
  to { opacity: 1; transform-origin: bottom right; transform: scale(1); }
}


/* 173. 横スクイーズイン */
.is-squeeze-x {
  --is-duration: 0.8s;
  animation: is-squeeze-x var(--is-duration) cubic-bezier(.22,1,.36,1) both;
}

@keyframes is-squeeze-x {
  0% { opacity: 0; transform: scaleX(.12) scaleY(1.35); }
  65% { opacity: 1; transform: scaleX(1.08) scaleY(.94); }
  100% { transform: scale(1); }
}


/* 174. 縦スクイーズイン */
.is-squeeze-y {
  --is-duration: 0.8s;
  animation: is-squeeze-y var(--is-duration) cubic-bezier(.22,1,.36,1) both;
}

@keyframes is-squeeze-y {
  0% { opacity: 0; transform: scaleY(.12) scaleX(1.35); }
  65% { opacity: 1; transform: scaleY(1.08) scaleX(.94); }
  100% { transform: scale(1); }
}


/* 175. カード・エクスパンド */
.is-expand-card {
  --is-duration: 0.85s;
  animation: is-expand-card var(--is-duration) cubic-bezier(.22,1,.36,1) both;
}

@keyframes is-expand-card {
  0% { opacity: 0; transform: scale(.45,.12); border-radius: 999px; }
  55% { opacity: 1; transform: scale(1.04,.72); }
  100% { transform: scale(1); border-radius: 16px; }
}


/* 176. コラプス解除 */
.is-collapse-in {
  --is-duration: 0.9s;
  animation: is-collapse-in var(--is-duration) cubic-bezier(.22,1,.36,1) both;
}

@keyframes is-collapse-in {
  0% { opacity: 0; transform: scale(.12); }
  45% { opacity: 1; transform: scale(.12,1); }
  100% { transform: scale(1); }
}


/* 177. パースペクティブ・ズーム */
.is-perspective-zoom {
  --is-duration: 0.9s;
  animation: is-perspective-zoom var(--is-duration) cubic-bezier(.22,1,.36,1) both;
}

@keyframes is-perspective-zoom {
  from { opacity: 0; transform: perspective(700px) translateZ(-420px); }
  to { opacity: 1; transform: perspective(700px) translateZ(0); }
}


/* 178. レンズ・ズーム */
.is-lens-zoom {
  --is-duration: 1s;
  animation: is-lens-zoom var(--is-duration) cubic-bezier(.22,1,.36,1) both;
}

@keyframes is-lens-zoom {
  from { opacity: 0; filter: blur(18px) saturate(1.8); transform: scale(1.45); }
  to { opacity: 1; filter: blur(0) saturate(1); transform: scale(1); }
}


/* 179. スナップ・スケール */
.is-snap-scale {
  --is-duration: 0.65s;
  animation: is-snap-scale var(--is-duration) steps(5,end) both;
}

@keyframes is-snap-scale {
  from { opacity: 0; transform: scale(.2); }
  to { opacity: 1; transform: scale(1); }
}


/* 180. ブリーズ・スケール */
.is-breathe-scale {
  --is-duration: 2.6s;
  animation: is-breathe-scale var(--is-duration) ease-in-out infinite;
}

@keyframes is-breathe-scale {
  0%,100% { transform: scale(1); }
  50% { transform: scale(1.08); }
}


/* 181. 逆回転 */
.is-spin-reverse {
  --is-duration: 1s;
  animation: is-spin-reverse var(--is-duration) linear infinite;
}

@keyframes is-spin-reverse {
  to { transform: rotate(-1turn); }
}


/* 182. 往復回転 */
.is-spin-alternate {
  --is-duration: 1.2s;
  animation: is-spin-alternate var(--is-duration) ease-in-out infinite;
}

@keyframes is-spin-alternate {
  0%,100% { transform: rotate(-22deg); }
  50% { transform: rotate(22deg); }
}


/* 183. 緩急付き回転 */
.is-spin-ease {
  --is-duration: 1.45s;
  animation: is-spin-ease var(--is-duration) ease-in-out infinite;
}

@keyframes is-spin-ease {
  0% { transform: rotate(0); }
  38% { transform: rotate(70deg); }
  62% { transform: rotate(290deg); }
  100% { transform: rotate(1turn); }
}


/* 184. 90度回転イン */
.is-rotate-quarter-in {
  --is-duration: 0.8s;
  animation: is-rotate-quarter-in var(--is-duration) cubic-bezier(.22,1,.36,1) both;
}

@keyframes is-rotate-quarter-in {
  from { opacity: 0; transform: rotate(-90deg) scale(.75); }
  to { opacity: 1; transform: rotate(0) scale(1); }
}


/* 185. 180度回転イン */
.is-rotate-half-in {
  --is-duration: 0.9s;
  animation: is-rotate-half-in var(--is-duration) cubic-bezier(.22,1,.36,1) both;
}

@keyframes is-rotate-half-in {
  from { opacity: 0; transform: rotate(-180deg) scale(.6); }
  to { opacity: 1; transform: rotate(0) scale(1); }
}


/* 186. 斜め軸フリップ */
.is-flip-diagonal {
  --is-duration: 0.9s;
  animation: is-flip-diagonal var(--is-duration) cubic-bezier(.22,1,.36,1) both;
}

@keyframes is-flip-diagonal {
  from { opacity: 0; transform: perspective(700px) rotate3d(1,1,0,100deg); }
  to { opacity: 1; transform: perspective(700px) rotate3d(1,1,0,0); }
}


/* 187. ヒンジ・ドロップ */
.is-hinge-drop {
  --is-duration: 1s;
  animation: is-hinge-drop var(--is-duration) cubic-bezier(.22,1,.36,1) both;
}

@keyframes is-hinge-drop {
  0% { opacity: 0; transform-origin: top left; transform: rotate(70deg); }
  60% { opacity: 1; transform-origin: top left; transform: rotate(-9deg); }
  78% { transform: rotate(5deg); }
  100% { transform: rotate(0); }
}


/* 188. ファン・オープン */
.is-fan-open {
  --is-duration: 0.85s;
  animation: is-fan-open var(--is-duration) cubic-bezier(.22,1,.36,1) both;
}

@keyframes is-fan-open {
  from { opacity: 0; transform-origin: 50% 120%; transform: rotate(-75deg) scale(.65); }
  to { opacity: 1; transform-origin: 50% 120%; transform: rotate(0) scale(1); }
}


/* 189. X軸ループ */
.is-axis-x-loop {
  --is-duration: 1.6s;
  animation: is-axis-x-loop var(--is-duration) linear infinite;
}

@keyframes is-axis-x-loop {
  to { transform: perspective(600px) rotateX(1turn); }
}


/* 190. Y軸ループ */
.is-axis-y-loop {
  --is-duration: 1.6s;
  animation: is-axis-y-loop var(--is-duration) linear infinite;
}

@keyframes is-axis-y-loop {
  to { transform: perspective(600px) rotateY(1turn); }
}


/* 191. 斜め軸ループ */
.is-axis-diagonal-loop {
  --is-duration: 2s;
  animation: is-axis-diagonal-loop var(--is-duration) linear infinite;
}

@keyframes is-axis-diagonal-loop {
  to { transform: perspective(700px) rotate3d(1,1,.3,1turn); }
}


/* 192. 3Dスイング */
.is-swing-3d {
  --is-duration: 1.5s;
  animation: is-swing-3d var(--is-duration) ease-in-out infinite;
}

@keyframes is-swing-3d {
  0%,100% { transform: perspective(650px) rotateY(-24deg); }
  50% { transform: perspective(650px) rotateY(24deg); }
}


/* 193. カルーセル回転 */
.is-carousel-card {
  --is-duration: 2.2s;
  animation: is-carousel-card var(--is-duration) linear infinite;
}

@keyframes is-carousel-card {
  0% { transform: perspective(650px) rotateY(0) translateZ(0); }
  50% { transform: perspective(650px) rotateY(180deg) translateZ(45px); }
  100% { transform: perspective(650px) rotateY(360deg) translateZ(0); }
}


/* 194. ダブルオービット */
.is-orbit-double { --is-duration: 2.4s; position: relative; width: 96px; aspect-ratio: 1; border: 2px solid rgb(49 91 125 / .25); border-radius: 50%; animation: is-orbit-double var(--is-duration) linear infinite; }
.is-orbit-double::before,.is-orbit-double::after { content:""; position:absolute; top:50%; width:16px; aspect-ratio:1; margin-top:-8px; border-radius:50%; background:#22a6c7; box-shadow:0 0 14px rgb(34 166 199 / .45); }
.is-orbit-double::before { left:-8px; } .is-orbit-double::after { right:-8px; background:#7c3aed; }
@keyframes is-orbit-double { to { transform:rotate(1turn); } }


/* 195. 楕円オービット */
.is-orbit-elliptic { --is-duration: 2s; position:relative; width:130px; height:70px; border:2px solid rgb(49 91 125 / .25); border-radius:50%; }
.is-orbit-elliptic::after { content:""; position:absolute; left:50%; top:50%; width:18px; aspect-ratio:1; margin:-9px; border-radius:50%; background:#315b7d; box-shadow:0 0 14px rgb(49 91 125 / .42); animation:is-orbit-elliptic var(--is-duration) linear infinite; }
@keyframes is-orbit-elliptic { from { transform:rotate(0) translateX(64px) rotate(0); } to { transform:rotate(1turn) translateX(64px) rotate(-1turn); } }


/* 196. レーダー・スイープ */
.is-radar-sweep { --is-duration: 2.2s; width:110px; aspect-ratio:1; position:relative; overflow:hidden; border:2px solid #315b7d; border-radius:50%; background:radial-gradient(circle,#eaf7fb 0 5%,transparent 6%),repeating-radial-gradient(circle,transparent 0 20px,rgb(49 91 125 / .18) 21px 22px); }
.is-radar-sweep::after { content:""; position:absolute; inset:50% 50% 0 0; transform-origin:100% 0; background:conic-gradient(from -90deg,transparent 0 70%,rgb(34 166 199 / .58)); animation:is-radar-sweep var(--is-duration) linear infinite; }
@keyframes is-radar-sweep { to { transform:rotate(1turn); } }


/* 197. ピンホイール */
.is-pinwheel {
  --is-duration: 1.8s;
  animation: is-pinwheel var(--is-duration) linear infinite;
}

@keyframes is-pinwheel {
  0% { transform: rotate(0) scale(1); }
  50% { transform: rotate(180deg) scale(.82); }
  100% { transform: rotate(1turn) scale(1); }
}


/* 198. ジャイロスコープ */
.is-gyroscope {
  --is-duration: 2.6s;
  animation: is-gyroscope var(--is-duration) linear infinite;
}

@keyframes is-gyroscope {
  0% { transform: perspective(650px) rotateX(0) rotateY(0) rotateZ(0); }
  50% { transform: perspective(650px) rotateX(180deg) rotateY(120deg) rotateZ(90deg); }
  100% { transform: perspective(650px) rotateX(360deg) rotateY(240deg) rotateZ(180deg); }
}


/* 199. ローリング・スクエア */
.is-rolling-square {
  --is-duration: 2s;
  animation: is-rolling-square var(--is-duration) linear infinite;
}

@keyframes is-rolling-square {
  0% { transform: translateX(-42px) rotate(0); }
  25% { transform: translateX(-14px) rotate(90deg); }
  50% { transform: translateX(14px) rotate(180deg); }
  75% { transform: translateX(42px) rotate(270deg); }
  100% { transform: translateX(-42px) rotate(360deg); }
}


/* 200. コークスクリュー・イン */
.is-corkscrew-in {
  --is-duration: 1.05s;
  animation: is-corkscrew-in var(--is-duration) cubic-bezier(.22,1,.36,1) both;
}

@keyframes is-corkscrew-in {
  from { opacity: 0; transform: perspective(700px) translateZ(-320px) rotate(270deg); }
  to { opacity: 1; transform: perspective(700px) translateZ(0) rotate(0); }
}


/* 201. ソフトパルス */
.is-pulse-soft {
  --is-duration: 2.2s;
  animation: is-pulse-soft var(--is-duration) ease-in-out infinite;
}

@keyframes is-pulse-soft {
  0%,100% { transform:scale(1); }
  50% { transform:scale(1.035); }
}


/* 202. シャドウパルス */
.is-pulse-shadow {
  --is-duration: 1.8s;
  animation: is-pulse-shadow var(--is-duration) ease-in-out infinite;
}

@keyframes is-pulse-shadow {
  0%,100% { box-shadow:0 14px 30px rgb(11 37 69 / .16); }
  50% { box-shadow:0 14px 42px rgb(34 166 199 / .48); }
}


/* 203. ソフトバウンス */
.is-bounce-soft {
  --is-duration: 1.7s;
  animation: is-bounce-soft var(--is-duration) ease-in-out infinite;
}

@keyframes is-bounce-soft {
  0%,100% { transform:translateY(0); }
  50% { transform:translateY(-10px); }
}


/* 204. スクワッシュ・バウンス */
.is-bounce-squash {
  --is-duration: 1.25s;
  animation: is-bounce-squash var(--is-duration) ease-in-out infinite;
}

@keyframes is-bounce-squash {
  0%,100% { transform:translateY(0) scale(1.08,.92); }
  12% { transform:translateY(-4px) scale(.96,1.04); }
  48% { transform:translateY(-35px) scale(.98,1.02); }
  82% { transform:translateY(-4px) scale(.98,1.02); }
}


/* 205. うなずき */
.is-nod {
  --is-duration: 1.3s;
  transform-origin: top center;
  animation: is-nod var(--is-duration) ease-in-out infinite;
}

@keyframes is-nod {
  0%,100% { transform:perspective(500px) rotateX(0); }
  35% { transform:perspective(500px) rotateX(18deg); }
  65% { transform:perspective(500px) rotateX(-8deg); }
}


/* 206. 傾きシェイク */
.is-tilt-shake {
  --is-duration: 0.65s;
  animation: is-tilt-shake var(--is-duration) ease-in-out infinite;
}

@keyframes is-tilt-shake {
  0%,100% { transform:rotate(0); }
  20% { transform:rotate(-6deg); }
  40% { transform:rotate(5deg); }
  60% { transform:rotate(-3deg); }
  80% { transform:rotate(2deg); }
}


/* 207. バズ */
.is-buzz {
  --is-duration: 0.18s;
  animation: is-buzz var(--is-duration) linear infinite;
}

@keyframes is-buzz {
  0%,100% { transform:translateX(0) rotate(0); }
  25% { transform:translateX(-2px) rotate(-1deg); }
  50% { transform:translateX(2px) rotate(1deg); }
  75% { transform:translateX(-1px) rotate(0); }
}


/* 208. ブリンク */
.is-blink {
  --is-duration: 1.1s;
  animation: is-blink var(--is-duration) step-end infinite;
}

@keyframes is-blink {
  0%,48%,100% { opacity:1; }
  49%,99% { opacity:.12; }
}


/* 209. フラッシュ */
.is-flash {
  --is-duration: 2s;
  animation: is-flash var(--is-duration) ease-in-out infinite;
}

@keyframes is-flash {
  0%,72%,100% { opacity:1; filter:brightness(1); }
  78% { opacity:.45; filter:brightness(2.5); }
  84% { opacity:1; filter:brightness(1); }
  90% { opacity:.65; }
}


/* 210. ラバーバンド・ループ */
.is-rubber-band-loop {
  --is-duration: 1.25s;
  animation: is-rubber-band-loop var(--is-duration) ease-in-out infinite;
}

@keyframes is-rubber-band-loop {
  0%,100% { transform:scale(1); }
  28% { transform:scale(1.18,.82); }
  42% { transform:scale(.86,1.14); }
  58% { transform:scale(1.08,.92); }
  72% { transform:scale(.97,1.03); }
}


/* 211. ポップ・ループ */
.is-pop-loop {
  --is-duration: 1.8s;
  animation: is-pop-loop var(--is-duration) ease-in-out infinite;
}

@keyframes is-pop-loop {
  0%,62%,100% { transform:scale(1); }
  72% { transform:scale(1.16); }
  82% { transform:scale(.96); }
  90% { transform:scale(1.04); }
}


/* 212. オパシティ・ブリーズ */
.is-breathe-opacity {
  --is-duration: 2.4s;
  animation: is-breathe-opacity var(--is-duration) ease-in-out infinite;
}

@keyframes is-breathe-opacity {
  0%,100% { opacity:1; }
  50% { opacity:.42; }
}


/* 213. ジグル */
.is-jiggle {
  --is-duration: 0.55s;
  animation: is-jiggle var(--is-duration) ease-in-out infinite;
}

@keyframes is-jiggle {
  0%,100% { transform:translate(0); }
  18% { transform:translate(-3px,2px); }
  36% { transform:translate(2px,-3px); }
  54% { transform:translate(3px,2px); }
  72% { transform:translate(-2px,-1px); }
}


/* 214. アラーム */
.is-alarm {
  --is-duration: 2.1s;
  transform-origin: bottom center;
  animation: is-alarm var(--is-duration) ease-in-out infinite;
}

@keyframes is-alarm {
  0%,65%,100% { transform:rotate(0) scale(1); }
  72% { transform:rotate(-10deg) scale(1.06); }
  79% { transform:rotate(10deg) scale(1.06); }
  86% { transform:rotate(-6deg) scale(1.03); }
  93% { transform:rotate(6deg) scale(1.03); }
}


/* 215. スポットライト・パルス */
.is-spotlight-pulse {
  --is-duration: 1.8s;
  animation: is-spotlight-pulse var(--is-duration) ease-in-out infinite;
}

@keyframes is-spotlight-pulse {
  0%,100% { filter:brightness(1) drop-shadow(0 0 0 transparent); }
  50% { filter:brightness(1.22) drop-shadow(0 0 20px rgb(34 166 199 / .7)); }
}


/* 216. スクイッシュ・ループ */
.is-squish-loop {
  --is-duration: 1.25s;
  animation: is-squish-loop var(--is-duration) ease-in-out infinite;
}

@keyframes is-squish-loop {
  0%,100% { transform:scale(1); }
  45% { transform:scale(1.15,.78); }
  65% { transform:scale(.96,1.06); }
}


/* 217. ストレッチ・ループ */
.is-stretch-loop {
  --is-duration: 1.3s;
  animation: is-stretch-loop var(--is-duration) ease-in-out infinite;
}

@keyframes is-stretch-loop {
  0%,100% { transform:scale(1); }
  45% { transform:scale(.86,1.18); }
  68% { transform:scale(1.05,.96); }
}


/* 218. パルスリング */
.is-pulse-ring { --is-duration:1.7s; position:relative; isolation:isolate; }
.is-pulse-ring::after { content:""; position:absolute; inset:-8px; z-index:-1; border:3px solid #22a6c7; border-radius:inherit; animation:is-pulse-ring var(--is-duration) ease-out infinite; }
@keyframes is-pulse-ring { 0% { opacity:.8; transform:scale(.9); } 80%,100% { opacity:0; transform:scale(1.35); } }


/* 219. ダブルリップル */
.is-ripple { --is-duration:2s; position:relative; isolation:isolate; }
.is-ripple::before,.is-ripple::after { content:""; position:absolute; inset:50%; z-index:-1; width:100%; aspect-ratio:1; border:2px solid #315b7d; border-radius:50%; transform:translate(-50%,-50%) scale(.25); animation:is-ripple var(--is-duration) ease-out infinite; }
.is-ripple::after { animation-delay:calc(var(--is-duration) / -2); }
@keyframes is-ripple { 0% { opacity:.75; transform:translate(-50%,-50%) scale(.25); } 100% { opacity:0; transform:translate(-50%,-50%) scale(1.55); } }


/* 220. ピング・ドット */
.is-ping-dot { --is-duration:1.4s; position:relative; width:24px; aspect-ratio:1; border-radius:50%; background:#315b7d; }
.is-ping-dot::after { content:""; position:absolute; inset:0; border-radius:inherit; background:inherit; animation:is-ping-dot var(--is-duration) cubic-bezier(0,0,.2,1) infinite; }
@keyframes is-ping-dot { 75%,100% { opacity:0; transform:scale(2.4); } }


/* 221. 文字ライズ */
.is-text-letter-rise { display:inline-flex; gap:.04em; }
.is-text-letter-rise span { display:inline-block;  animation:is-text-letter-rise 1.4s ease-in-out infinite; }
.is-text-letter-rise span:nth-child(2) { animation-delay:.08s; }
.is-text-letter-rise span:nth-child(3) { animation-delay:.16s; }
.is-text-letter-rise span:nth-child(4) { animation-delay:.24s; }
.is-text-letter-rise span:nth-child(5) { animation-delay:.32s; }
@keyframes is-text-letter-rise { 0%,100%{transform:translateY(0);opacity:.72} 50%{transform:translateY(-17px);opacity:1} }


/* 222. 文字ドロップ */
.is-text-letter-drop { display:inline-flex; gap:.04em; }
.is-text-letter-drop span { display:inline-block;  animation:is-text-letter-drop 1.4s ease-in-out infinite; }
.is-text-letter-drop span:nth-child(2) { animation-delay:.08s; }
.is-text-letter-drop span:nth-child(3) { animation-delay:.16s; }
.is-text-letter-drop span:nth-child(4) { animation-delay:.24s; }
.is-text-letter-drop span:nth-child(5) { animation-delay:.32s; }
@keyframes is-text-letter-drop { 0%,100%{transform:translateY(0)} 38%{transform:translateY(-22px)} 62%{transform:translateY(4px)} }


/* 223. 文字ローテーション */
.is-text-letter-rotate { display:inline-flex; gap:.04em; }
.is-text-letter-rotate span { display:inline-block;  animation:is-text-letter-rotate 1.8s ease-in-out infinite; }
.is-text-letter-rotate span:nth-child(2) { animation-delay:.08s; }
.is-text-letter-rotate span:nth-child(3) { animation-delay:.16s; }
.is-text-letter-rotate span:nth-child(4) { animation-delay:.24s; }
.is-text-letter-rotate span:nth-child(5) { animation-delay:.32s; }
@keyframes is-text-letter-rotate { 0%,25%,100%{transform:rotate(0)} 60%{transform:rotate(1turn)} }


/* 224. 文字フリップ */
.is-text-letter-flip { display:inline-flex; gap:.04em; }
.is-text-letter-flip span { display:inline-block;  animation:is-text-letter-flip 1.7s ease-in-out infinite; }
.is-text-letter-flip span:nth-child(2) { animation-delay:.08s; }
.is-text-letter-flip span:nth-child(3) { animation-delay:.16s; }
.is-text-letter-flip span:nth-child(4) { animation-delay:.24s; }
.is-text-letter-flip span:nth-child(5) { animation-delay:.32s; }
@keyframes is-text-letter-flip { 0%,20%,100%{transform:perspective(280px) rotateY(0)} 60%{transform:perspective(280px) rotateY(180deg)} }


/* 225. テキスト・スライドマスク */
.is-text-slide-mask { --is-duration:.9s; display:inline-block; overflow:hidden; }
.is-text-slide-mask > span { display:block; animation:is-text-slide-mask var(--is-duration) cubic-bezier(.22,1,.36,1) both; }
@keyframes is-text-slide-mask { from { opacity:0; transform:translateY(110%); } to { opacity:1; transform:translateY(0); } }


/* 226. ラインワイプ文字 */
.is-text-reveal-line { --is-duration:1s; position:relative; display:inline-block; overflow:hidden; }
.is-text-reveal-line::after { content:""; position:absolute; inset:0; background:#315b7d; animation:is-text-reveal-line-cover var(--is-duration) cubic-bezier(.77,0,.18,1) both; }
.is-text-reveal-line { animation:is-text-reveal-line-text var(--is-duration) both; }
@keyframes is-text-reveal-line-cover { 0%{transform:translateX(-101%)} 50%{transform:translateX(0)} 100%{transform:translateX(101%)} }
@keyframes is-text-reveal-line-text { 0%,49%{color:transparent} 50%,100%{color:inherit} }


/* 227. カラーミング・ウェーブ */
.is-text-color-wave { --is-duration:2.2s; color:#315b7d; background:linear-gradient(90deg,#315b7d 0 35%,#22a6c7 50%,#7c3aed 65%,#315b7d 100%); background-size:300% 100%; color:transparent; background-clip:text; -webkit-background-clip:text; animation:is-text-color-wave var(--is-duration) linear infinite; }
@keyframes is-text-color-wave { to { background-position:-300% 0; } }


/* 228. レインボーテキスト */
.is-text-rainbow { --is-duration:4s; color:transparent; background:linear-gradient(90deg,#ef4444,#f59e0b,#22c55e,#06b6d4,#3b82f6,#8b5cf6,#ec4899,#ef4444); background-size:400% 100%; background-clip:text; -webkit-background-clip:text; animation:is-text-rainbow var(--is-duration) linear infinite; }
@keyframes is-text-rainbow { to { background-position:400% 0; } }


/* 229. アウトライン塗り */
.is-text-outline-fill { --is-duration:1.8s; color:transparent; -webkit-text-stroke:1.5px #315b7d; background:linear-gradient(#315b7d 0 0) 0 100% / 100% 0 no-repeat; background-clip:text; -webkit-background-clip:text; animation:is-text-outline-fill var(--is-duration) ease-in-out infinite alternate; }
@keyframes is-text-outline-fill { to { background-size:100% 100%; } }


/* 230. ストローク・パルス */
.is-text-stroke-pulse { --is-duration:1.6s; color:transparent; -webkit-text-stroke:1px #315b7d; animation:is-text-stroke-pulse var(--is-duration) ease-in-out infinite; }
@keyframes is-text-stroke-pulse { 0%,100%{ -webkit-text-stroke-width:1px; filter:drop-shadow(0 0 0 transparent); } 50%{ -webkit-text-stroke-width:2.5px; filter:drop-shadow(0 0 10px rgb(34 166 199 / .65)); } }


/* 231. マーキーテキスト */
.is-text-marquee { --is-duration:6s; width:min(300px,80vw); overflow:hidden; white-space:nowrap; }
.is-text-marquee > span { display:inline-block; padding-left:100%; animation:is-text-marquee var(--is-duration) linear infinite; }
@keyframes is-text-marquee { to { transform:translateX(-100%); } }


/* 232. 文字バウンス */
.is-text-bounce-letters { display:inline-flex; gap:.04em; }
.is-text-bounce-letters span { display:inline-block;  animation:is-text-bounce-letters 1.5s ease-in-out infinite; }
.is-text-bounce-letters span:nth-child(2) { animation-delay:.08s; }
.is-text-bounce-letters span:nth-child(3) { animation-delay:.16s; }
.is-text-bounce-letters span:nth-child(4) { animation-delay:.24s; }
.is-text-bounce-letters span:nth-child(5) { animation-delay:.32s; }
@keyframes is-text-bounce-letters { 0%,100%{transform:translateY(0) scale(1)} 48%{transform:translateY(-20px) scale(1.08)} 68%{transform:translateY(3px) scale(.98)} }


/* 233. 文字フロート */
.is-text-float-letters { display:inline-flex; gap:.04em; }
.is-text-float-letters span { display:inline-block;  animation:is-text-float-letters 2.1s ease-in-out infinite; }
.is-text-float-letters span:nth-child(2) { animation-delay:.08s; }
.is-text-float-letters span:nth-child(3) { animation-delay:.16s; }
.is-text-float-letters span:nth-child(4) { animation-delay:.24s; }
.is-text-float-letters span:nth-child(5) { animation-delay:.32s; }
@keyframes is-text-float-letters { 0%,100%{transform:translateY(0) rotate(-2deg)} 50%{transform:translateY(-11px) rotate(2deg)} }


/* 234. シャドウ・スプリット */
.is-text-shadow-split { --is-duration:1.8s; color:#0b2545; animation:is-text-shadow-split var(--is-duration) ease-in-out infinite alternate; }
@keyframes is-text-shadow-split { from { text-shadow:0 0 #22a6c7,0 0 #ef4c62; } to { text-shadow:-7px 0 #22a6c7,7px 0 #ef4c62; } }


/* 235. ネオン・パルス */
.is-text-neon-pulse { --is-duration:1.7s; color:#79ecff; animation:is-text-neon-pulse var(--is-duration) ease-in-out infinite alternate; }
@keyframes is-text-neon-pulse { from { opacity:.72; text-shadow:0 0 4px currentColor,0 0 9px currentColor; } to { opacity:1; text-shadow:0 0 7px currentColor,0 0 20px currentColor,0 0 38px currentColor; } }


/* 236. グロー・スキャン */
.is-text-glow-scan { --is-duration:2.6s; position:relative; color:#315b7d; overflow:hidden; }
.is-text-glow-scan::after { content:attr(data-text); position:absolute; inset:0; color:transparent; background:linear-gradient(90deg,transparent,#7cecff,transparent); background-size:35% 100%; background-repeat:no-repeat; background-clip:text; -webkit-background-clip:text; animation:is-text-glow-scan var(--is-duration) linear infinite; }
@keyframes is-text-glow-scan { from { background-position:-60% 0; } to { background-position:160% 0; } }


/* 237. 左から下線 */
.is-text-underline-left { --is-duration:.35s; position:relative; text-decoration:none; }
.is-text-underline-left::after { content:""; position:absolute; left:0; right:100%; bottom:-5px; height:3px; background:currentColor; transition:right var(--is-duration) ease; }
.is-text-underline-left:hover::after,.is-text-underline-left:focus-visible::after,
.demo-stage.is-hover-simulated .is-text-underline-left::after,
.dialog-preview-stage.is-hover-simulated .is-text-underline-left::after { right:0; }


/* 238. 右から上線 */
.is-text-overline-right { --is-duration:.35s; position:relative; text-decoration:none; }
.is-text-overline-right::before { content:""; position:absolute; left:100%; right:0; top:-5px; height:3px; background:currentColor; transition:left var(--is-duration) ease; }
.is-text-overline-right:hover::before,.is-text-overline-right:focus-visible::before,
.demo-stage.is-hover-simulated .is-text-overline-right::before,
.dialog-preview-stage.is-hover-simulated .is-text-overline-right::before { left:0; }


/* 239. マーカー・スワイプ */
.is-text-highlight-swipe { --is-duration:.45s; position:relative; isolation:isolate; }
.is-text-highlight-swipe::before { content:""; position:absolute; inset:.06em -.08em; z-index:-1; background:#a8e8f4; transform:scaleX(0); transform-origin:left; transition:transform var(--is-duration) cubic-bezier(.22,1,.36,1); }
.is-text-highlight-swipe:hover::before,.is-text-highlight-swipe:focus-visible::before,
.demo-stage.is-hover-simulated .is-text-highlight-swipe::before,
.dialog-preview-stage.is-hover-simulated .is-text-highlight-swipe::before { transform:scaleX(1); }


/* 240. 3D文字リフト */
.is-text-3d-lift { --is-duration:1.6s; color:#f8fbff; text-shadow:0 1px #315b7d,0 2px #315b7d,0 3px #315b7d,0 4px #315b7d; animation:is-text-3d-lift var(--is-duration) ease-in-out infinite alternate; }
@keyframes is-text-3d-lift { to { transform:translateY(-8px); text-shadow:0 1px #315b7d,0 2px #315b7d,0 3px #315b7d,0 4px #315b7d,0 13px 16px rgb(11 37 69 / .35); } }


/* 241. 右から塗るボタン */
.is-button-fill-right { --is-duration:.34s;
  position:relative; isolation:isolate; overflow:hidden; padding:.82em 1.4em; color:#0b2545; background:transparent; border:2px solid currentColor; border-radius:.78em; font:inherit; font-weight:800; cursor:pointer; transition:color var(--is-duration), transform var(--is-duration), box-shadow var(--is-duration), background var(--is-duration);
}
.is-button-fill-right::before { content:""; position:absolute; inset:0; z-index:-1; background:#0b2545; transform:translateX(101%); transition:transform var(--is-duration) cubic-bezier(.22,1,.36,1); }
.is-button-fill-right:hover,.is-button-fill-right:focus-visible,
.demo-stage.is-hover-simulated .is-button-fill-right,
.dialog-preview-stage.is-hover-simulated .is-button-fill-right { color:#fff; }
.is-button-fill-right:hover::before,.is-button-fill-right:focus-visible::before,
.demo-stage.is-hover-simulated .is-button-fill-right::before,
.dialog-preview-stage.is-hover-simulated .is-button-fill-right::before { transform:translateX(0); }


/* 242. 上から塗るボタン */
.is-button-fill-top { --is-duration:.34s;
  position:relative; isolation:isolate; overflow:hidden; padding:.82em 1.4em; color:#0b2545; background:transparent; border:2px solid currentColor; border-radius:.78em; font:inherit; font-weight:800; cursor:pointer; transition:color var(--is-duration), transform var(--is-duration), box-shadow var(--is-duration), background var(--is-duration);
}
.is-button-fill-top::before { content:""; position:absolute; inset:0; z-index:-1; background:#0b2545; transform:translateY(-101%); transition:transform var(--is-duration) cubic-bezier(.22,1,.36,1); }
.is-button-fill-top:hover,.is-button-fill-top:focus-visible,
.demo-stage.is-hover-simulated .is-button-fill-top,
.dialog-preview-stage.is-hover-simulated .is-button-fill-top { color:#fff; }
.is-button-fill-top:hover::before,.is-button-fill-top:focus-visible::before,
.demo-stage.is-hover-simulated .is-button-fill-top::before,
.dialog-preview-stage.is-hover-simulated .is-button-fill-top::before { transform:translateY(0); }


/* 243. 下から塗るボタン */
.is-button-fill-bottom { --is-duration:.34s;
  position:relative; isolation:isolate; overflow:hidden; padding:.82em 1.4em; color:#0b2545; background:transparent; border:2px solid currentColor; border-radius:.78em; font:inherit; font-weight:800; cursor:pointer; transition:color var(--is-duration), transform var(--is-duration), box-shadow var(--is-duration), background var(--is-duration);
}
.is-button-fill-bottom::before { content:""; position:absolute; inset:0; z-index:-1; background:#0b2545; transform:translateY(101%); transition:transform var(--is-duration) cubic-bezier(.22,1,.36,1); }
.is-button-fill-bottom:hover,.is-button-fill-bottom:focus-visible,
.demo-stage.is-hover-simulated .is-button-fill-bottom,
.dialog-preview-stage.is-hover-simulated .is-button-fill-bottom { color:#fff; }
.is-button-fill-bottom:hover::before,.is-button-fill-bottom:focus-visible::before,
.demo-stage.is-hover-simulated .is-button-fill-bottom::before,
.dialog-preview-stage.is-hover-simulated .is-button-fill-bottom::before { transform:translateY(0); }


/* 244. 斜め塗りボタン */
.is-button-fill-diagonal { --is-duration:.4s;
  position:relative; isolation:isolate; overflow:hidden; padding:.82em 1.4em; color:#0b2545; background:transparent; border:2px solid currentColor; border-radius:.78em; font:inherit; font-weight:800; cursor:pointer; transition:color var(--is-duration), transform var(--is-duration), box-shadow var(--is-duration), background var(--is-duration);
}
.is-button-fill-diagonal::before { content:""; position:absolute; inset:-1px; z-index:-1; background:#315b7d; clip-path:polygon(0 0,0 0,0 100%,0 100%); transition:clip-path var(--is-duration) cubic-bezier(.22,1,.36,1); }
.is-button-fill-diagonal:hover,.is-button-fill-diagonal:focus-visible,
.demo-stage.is-hover-simulated .is-button-fill-diagonal,
.dialog-preview-stage.is-hover-simulated .is-button-fill-diagonal { color:#fff; }
.is-button-fill-diagonal:hover::before,.is-button-fill-diagonal:focus-visible::before,
.demo-stage.is-hover-simulated .is-button-fill-diagonal::before,
.dialog-preview-stage.is-hover-simulated .is-button-fill-diagonal::before { clip-path:polygon(0 0,125% 0,100% 100%,0 100%); }


/* 245. 上下スプリット塗り */
.is-button-fill-split { --is-duration:.38s;
  position:relative; isolation:isolate; overflow:hidden; padding:.82em 1.4em; color:#0b2545; background:transparent; border:2px solid currentColor; border-radius:.78em; font:inherit; font-weight:800; cursor:pointer; transition:color var(--is-duration), transform var(--is-duration), box-shadow var(--is-duration), background var(--is-duration);
}
.is-button-fill-split::before,.is-button-fill-split::after { content:""; position:absolute; left:0; right:0; height:50%; z-index:-1; background:#0b2545; transform:scaleX(0); transition:transform var(--is-duration) ease; }
.is-button-fill-split::before { top:0; transform-origin:left; } .is-button-fill-split::after { bottom:0; transform-origin:right; }
.is-button-fill-split:hover,.is-button-fill-split:focus-visible,
.demo-stage.is-hover-simulated .is-button-fill-split,
.dialog-preview-stage.is-hover-simulated .is-button-fill-split { color:#fff; }
.is-button-fill-split:hover::before,.is-button-fill-split:hover::after,.is-button-fill-split:focus-visible::before,.is-button-fill-split:focus-visible::after,
.demo-stage.is-hover-simulated .is-button-fill-split::before,
.dialog-preview-stage.is-hover-simulated .is-button-fill-split::before,
.demo-stage.is-hover-simulated .is-button-fill-split::after,
.dialog-preview-stage.is-hover-simulated .is-button-fill-split::after { transform:scaleX(1); }


/* 246. 四隅から枠線 */
.is-button-border-corners { --is-duration:.35s; padding:.82em 1.4em; color:#0b2545; background:linear-gradient(#22a6c7 0 0) left top/0 2px no-repeat,linear-gradient(#22a6c7 0 0) right top/2px 0 no-repeat,linear-gradient(#22a6c7 0 0) right bottom/0 2px no-repeat,linear-gradient(#22a6c7 0 0) left bottom/2px 0 no-repeat; border:0; border-radius:.15em; font:inherit; font-weight:800; cursor:pointer; transition:background-size var(--is-duration) ease; }
.is-button-border-corners:hover,.is-button-border-corners:focus-visible,
.demo-stage.is-hover-simulated .is-button-border-corners,
.dialog-preview-stage.is-hover-simulated .is-button-border-corners { background-size:100% 2px,2px 100%,100% 2px,2px 100%; }


/* 247. 枠線スライド */
.is-button-border-slide { --is-duration:.4s; position:relative; padding:.82em 1.4em; color:#0b2545; background:transparent; border:1px solid #c7d4df; border-radius:.75em; font:inherit; font-weight:800; cursor:pointer; }
.is-button-border-slide::after { content:""; position:absolute; inset:-2px; border:2px solid #22a6c7; border-radius:inherit; clip-path:inset(0 100% 0 0); transition:clip-path var(--is-duration) ease; pointer-events:none; }
.is-button-border-slide:hover::after,.is-button-border-slide:focus-visible::after,
.demo-stage.is-hover-simulated .is-button-border-slide::after,
.dialog-preview-stage.is-hover-simulated .is-button-border-slide::after { clip-path:inset(0); }


/* 248. 中央から下線ボタン */
.is-button-underline-expand { --is-duration:.3s; position:relative; padding:.75em 1.25em; color:#0b2545; background:transparent; border:0; font:inherit; font-weight:800; cursor:pointer; }
.is-button-underline-expand::after { content:""; position:absolute; left:50%; right:50%; bottom:.35em; height:3px; background:#22a6c7; transition:left var(--is-duration),right var(--is-duration); }
.is-button-underline-expand:hover::after,.is-button-underline-expand:focus-visible::after,
.demo-stage.is-hover-simulated .is-button-underline-expand::after,
.dialog-preview-stage.is-hover-simulated .is-button-underline-expand::after { left:12%; right:12%; }


/* 249. 矢印スライドボタン */
.is-button-icon-slide { --is-duration:.32s; display:inline-flex; align-items:center; gap:.55em; padding:.82em 1.25em; color:#fff; background:#0b2545; border:0; border-radius:.75em; font:inherit; font-weight:800; cursor:pointer; }
.is-button-icon-slide b { transition:transform var(--is-duration) cubic-bezier(.22,1,.36,1); }
.is-button-icon-slide:hover b,.is-button-icon-slide:focus-visible b,
.demo-stage.is-hover-simulated .is-button-icon-slide b,
.dialog-preview-stage.is-hover-simulated .is-button-icon-slide b { transform:translateX(8px); }


/* 250. アイコン回転ボタン */
.is-button-icon-rotate { --is-duration:.35s; padding:.82em 1.25em; color:#fff; background:#315b7d; border:0; border-radius:.75em; font:inherit; font-weight:800; cursor:pointer; }
.is-button-icon-rotate span { display:inline-block; margin-right:.35em; transition:transform var(--is-duration); }
.is-button-icon-rotate:hover span,.is-button-icon-rotate:focus-visible span,
.demo-stage.is-hover-simulated .is-button-icon-rotate span,
.dialog-preview-stage.is-hover-simulated .is-button-icon-rotate span { transform:rotate(135deg) scale(1.15); }


/* 251. ホバー・リップル */
.is-button-ripple-hover { --is-duration:.55s;
  position:relative; isolation:isolate; overflow:hidden; padding:.82em 1.4em; color:#0b2545; background:transparent; border:2px solid currentColor; border-radius:.78em; font:inherit; font-weight:800; cursor:pointer; transition:color var(--is-duration), transform var(--is-duration), box-shadow var(--is-duration), background var(--is-duration);
}
.is-button-ripple-hover::after { content:""; position:absolute; left:50%; top:50%; width:20px; aspect-ratio:1; border-radius:50%; background:rgb(34 166 199 / .35); opacity:0; transform:translate(-50%,-50%) scale(0); transition:transform var(--is-duration),opacity var(--is-duration); }
.is-button-ripple-hover:hover::after,.is-button-ripple-hover:focus-visible::after,
.demo-stage.is-hover-simulated .is-button-ripple-hover::after,
.dialog-preview-stage.is-hover-simulated .is-button-ripple-hover::after { opacity:1; transform:translate(-50%,-50%) scale(8); }


/* 252. スポットライトボタン */
.is-button-spotlight { --is-duration:.55s; position:relative; overflow:hidden; padding:.82em 1.4em; color:#fff; background:#0b2545; border:0; border-radius:.78em; font:inherit; font-weight:800; cursor:pointer; }
.is-button-spotlight::after { content:""; position:absolute; top:-80%; left:-55%; width:34%; height:260%; background:linear-gradient(90deg,transparent,rgb(255 255 255 / .65),transparent); transform:rotate(20deg); transition:left var(--is-duration) ease; }
.is-button-spotlight:hover::after,.is-button-spotlight:focus-visible::after,
.demo-stage.is-hover-simulated .is-button-spotlight::after,
.dialog-preview-stage.is-hover-simulated .is-button-spotlight::after { left:125%; }


/* 253. ウォブルボタン */
.is-button-wobble-hover { --is-duration:.55s; padding:.82em 1.4em; color:#fff; background:#315b7d; border:0; border-radius:.78em; font:inherit; font-weight:800; cursor:pointer; }
.is-button-wobble-hover:hover,.is-button-wobble-hover:focus-visible,
.demo-stage.is-hover-simulated .is-button-wobble-hover,
.dialog-preview-stage.is-hover-simulated .is-button-wobble-hover { animation:is-button-wobble-hover var(--is-duration) ease-in-out; }
@keyframes is-button-wobble-hover { 0%,100%{transform:rotate(0)} 25%{transform:rotate(-5deg)} 50%{transform:rotate(4deg)} 75%{transform:rotate(-2deg)} }


/* 254. スキューホバーボタン */
.is-button-skew-hover { --is-duration:.3s; padding:.82em 1.4em; color:#fff; background:#0b2545; border:0; border-radius:.35em; font:inherit; font-weight:800; cursor:pointer; transition:transform var(--is-duration),box-shadow var(--is-duration); }
.is-button-skew-hover:hover,.is-button-skew-hover:focus-visible,
.demo-stage.is-hover-simulated .is-button-skew-hover,
.dialog-preview-stage.is-hover-simulated .is-button-skew-hover { transform:skewX(-9deg) translateY(-3px); box-shadow:8px 10px 0 #22a6c7; }


/* 255. グラデーションシフト */
.is-button-gradient-shift { --is-duration:2.8s; padding:.82em 1.4em; color:#fff; background:linear-gradient(90deg,#0b2545,#22a6c7,#7c3aed,#0b2545); background-size:300% 100%; border:0; border-radius:.78em; font:inherit; font-weight:800; cursor:pointer; transition:transform .25s; }
.is-button-gradient-shift:hover,.is-button-gradient-shift:focus-visible,
.demo-stage.is-hover-simulated .is-button-gradient-shift,
.dialog-preview-stage.is-hover-simulated .is-button-gradient-shift { animation:is-button-gradient-shift var(--is-duration) linear infinite; transform:translateY(-2px); }
@keyframes is-button-gradient-shift { to { background-position:300% 0; } }


/* 256. 影が伸びるボタン */
.is-button-shadow-expand { --is-duration:.3s; padding:.82em 1.4em; color:#fff; background:#315b7d; border:0; border-radius:.78em; box-shadow:0 6px 0 #0b2545; font:inherit; font-weight:800; cursor:pointer; transition:transform var(--is-duration),box-shadow var(--is-duration); }
.is-button-shadow-expand:hover,.is-button-shadow-expand:focus-visible,
.demo-stage.is-hover-simulated .is-button-shadow-expand,
.dialog-preview-stage.is-hover-simulated .is-button-shadow-expand { transform:translateY(-5px); box-shadow:0 11px 0 #0b2545,0 18px 28px rgb(11 37 69 / .2); }


/* 257. 立体プレスボタン */
.is-button-inset-press { --is-duration:.12s; padding:.82em 1.4em; color:#fff; background:#315b7d; border:0; border-radius:.78em; box-shadow:0 6px 0 #0b2545,inset 0 0 0 rgb(0 0 0 / 0); font:inherit; font-weight:800; cursor:pointer; transition:transform var(--is-duration),box-shadow var(--is-duration); }
.is-button-inset-press:active { transform:translateY(5px); box-shadow:0 1px 0 #0b2545,inset 0 4px 10px rgb(0 0 0 / .22); }


/* 258. 二重枠ボタン */
.is-button-double-border { --is-duration:.32s; position:relative; padding:.82em 1.4em; color:#0b2545; background:transparent; border:2px solid #0b2545; border-radius:.7em; font:inherit; font-weight:800; cursor:pointer; transition:transform var(--is-duration); }
.is-button-double-border::after { content:""; position:absolute; inset:4px; border:1px solid #22a6c7; border-radius:.45em; opacity:0; transform:scale(.8); transition:opacity var(--is-duration),transform var(--is-duration); }
.is-button-double-border:hover,.is-button-double-border:focus-visible,
.demo-stage.is-hover-simulated .is-button-double-border,
.dialog-preview-stage.is-hover-simulated .is-button-double-border { transform:scale(1.04); }
.is-button-double-border:hover::after,.is-button-double-border:focus-visible::after,
.demo-stage.is-hover-simulated .is-button-double-border::after,
.dialog-preview-stage.is-hover-simulated .is-button-double-border::after { opacity:1; transform:scale(1); }


/* 259. ピル・エクスパンド */
.is-button-pill-expand { --is-duration:.35s; min-width:9em; padding:.78em 1.4em; color:#fff; background:#0b2545; border:0; border-radius:999px; font:inherit; font-weight:800; cursor:pointer; transition:letter-spacing var(--is-duration),padding var(--is-duration),background var(--is-duration); }
.is-button-pill-expand:hover,.is-button-pill-expand:focus-visible,
.demo-stage.is-hover-simulated .is-button-pill-expand,
.dialog-preview-stage.is-hover-simulated .is-button-pill-expand { padding-inline:2em; letter-spacing:.12em; background:#315b7d; }


/* 260. ゴーストから塗り */
.is-button-ghost-solid { --is-duration:.3s; padding:.82em 1.4em; color:#315b7d; background:transparent; border:2px solid #315b7d; border-radius:.78em; font:inherit; font-weight:800; cursor:pointer; transition:color var(--is-duration),background var(--is-duration),box-shadow var(--is-duration); }
.is-button-ghost-solid:hover,.is-button-ghost-solid:focus-visible,
.demo-stage.is-hover-simulated .is-button-ghost-solid,
.dialog-preview-stage.is-hover-simulated .is-button-ghost-solid { color:#fff; background:#315b7d; box-shadow:0 12px 24px rgb(49 91 125 / .25); }


/* 261. シングルオービット */
.is-loader-single-orbit { --is-duration:1.4s; position:relative; width:78px; aspect-ratio:1; border:2px solid rgb(49 91 125 / .2); border-radius:50%; animation:is-loader-single-orbit var(--is-duration) linear infinite; }
.is-loader-single-orbit::after { content:""; position:absolute; left:50%; top:-7px; width:14px; aspect-ratio:1; margin-left:-7px; border-radius:50%; background:#22a6c7; box-shadow:0 0 15px rgb(34 166 199 / .6); }
@keyframes is-loader-single-orbit { to { transform:rotate(1turn); } }


/* 262. チェイスドット */
.is-loader-chase-dots { --is-duration:1.35s; position:relative; width:76px; aspect-ratio:1; animation:is-loader-chase-dots var(--is-duration) linear infinite; }
.is-loader-chase-dots span { position:absolute; left:50%; top:0; width:13px; aspect-ratio:1; margin-left:-6.5px; border-radius:50%; background:#315b7d; transform-origin:6.5px 38px; }
.is-loader-chase-dots span:nth-child(2){ transform:rotate(120deg); opacity:.65; }.is-loader-chase-dots span:nth-child(3){ transform:rotate(240deg); opacity:.35; }
@keyframes is-loader-chase-dots { to { transform:rotate(1turn); } }


/* 263. トリプルリング */
.is-loader-triple-ring { --is-duration:1.7s; position:relative; width:80px; aspect-ratio:1; border:5px solid transparent; border-top-color:#315b7d; border-radius:50%; animation:is-loader-triple-ring var(--is-duration) linear infinite; }
.is-loader-triple-ring::before,.is-loader-triple-ring::after { content:""; position:absolute; border:5px solid transparent; border-radius:50%; }
.is-loader-triple-ring::before { inset:8px; border-right-color:#22a6c7; animation:is-loader-triple-ring calc(var(--is-duration) * .72) linear infinite reverse; }
.is-loader-triple-ring::after { inset:21px; border-bottom-color:#7c3aed; animation:is-loader-triple-ring calc(var(--is-duration) * .52) linear infinite; }
@keyframes is-loader-triple-ring { to { transform:rotate(1turn); } }


/* 264. クォーターリング */
.is-loader-quarter-ring { --is-duration:.9s; width:66px; aspect-ratio:1; border-radius:50%; background:conic-gradient(#315b7d 0 25%,rgb(49 91 125 / .12) 25%); -webkit-mask:radial-gradient(farthest-side,transparent calc(100% - 8px),#000 0); mask:radial-gradient(farthest-side,transparent calc(100% - 8px),#000 0); animation:is-loader-quarter-ring var(--is-duration) linear infinite; }
@keyframes is-loader-quarter-ring { to { transform:rotate(1turn); } }


/* 265. ペタルローダー */
.is-loader-petals { --is-duration:1.15s; position:relative; width:78px; aspect-ratio:1; animation:is-loader-petals var(--is-duration) steps(8) infinite; }
.is-loader-petals span { position:absolute; left:50%; top:4px; width:9px; height:25px; margin-left:-4.5px; border-radius:999px; background:#315b7d; transform-origin:4.5px 35px; }
.is-loader-petals span:nth-child(2){transform:rotate(45deg);opacity:.88}.is-loader-petals span:nth-child(3){transform:rotate(90deg);opacity:.76}.is-loader-petals span:nth-child(4){transform:rotate(135deg);opacity:.64}.is-loader-petals span:nth-child(5){transform:rotate(180deg);opacity:.52}.is-loader-petals span:nth-child(6){transform:rotate(225deg);opacity:.4}.is-loader-petals span:nth-child(7){transform:rotate(270deg);opacity:.28}.is-loader-petals span:nth-child(8){transform:rotate(315deg);opacity:.16}
@keyframes is-loader-petals { to { transform:rotate(1turn); } }


/* 266. ジャンプキューブ */
.is-loader-cubes { --is-duration:1.1s; display:flex; gap:8px; align-items:flex-end; height:60px; }
.is-loader-cubes span { width:20px; aspect-ratio:1; background:#315b7d; border-radius:4px; animation:is-loader-cubes var(--is-duration) ease-in-out infinite; }
.is-loader-cubes span:nth-child(2){animation-delay:.14s;background:#22a6c7}.is-loader-cubes span:nth-child(3){animation-delay:.28s;background:#7c3aed}
@keyframes is-loader-cubes { 0%,100%{transform:translateY(0) rotate(0)} 50%{transform:translateY(-34px) rotate(90deg)} }


/* 267. スクエアシーケンス */
.is-loader-squares { --is-duration:1.2s; display:grid; grid-template-columns:repeat(2,24px); gap:7px; }
.is-loader-squares span { aspect-ratio:1; border-radius:4px; background:#315b7d; animation:is-loader-squares var(--is-duration) ease-in-out infinite; }
.is-loader-squares span:nth-child(2){animation-delay:.15s}.is-loader-squares span:nth-child(3){animation-delay:.45s}.is-loader-squares span:nth-child(4){animation-delay:.3s}
@keyframes is-loader-squares { 0%,100%{opacity:.25;transform:scale(.65)} 50%{opacity:1;transform:scale(1)} }


/* 268. スケールボール */
.is-loader-balls { --is-duration:.9s; display:flex; gap:10px; align-items:center; }
.is-loader-balls span { width:18px; aspect-ratio:1; border-radius:50%; background:#315b7d; animation:is-loader-balls var(--is-duration) ease-in-out infinite alternate; }
.is-loader-balls span:nth-child(2){animation-delay:.18s;background:#22a6c7}.is-loader-balls span:nth-child(3){animation-delay:.36s;background:#7c3aed}
@keyframes is-loader-balls { to { transform:scale(.35); opacity:.28; } }


/* 269. パルスサークル */
.is-loader-pulse-circles { --is-duration:1.8s; position:relative; width:96px; aspect-ratio:1; background:radial-gradient(circle,#0b5f68 0 7px,transparent 8px); }
.is-loader-pulse-circles span { position:absolute; inset:50%; aspect-ratio:1; border:5px solid #087f82; border-radius:50%; transform:translate(-50%,-50%) scale(0); animation:is-loader-pulse-circles var(--is-duration) ease-out infinite; }
.is-loader-pulse-circles span:nth-child(2){border-color:#5143c5}
.is-loader-pulse-circles span:nth-child(3){border-color:#0b5f68}
.is-loader-pulse-circles span:nth-child(2){animation-delay:.35s}.is-loader-pulse-circles span:nth-child(3){animation-delay:.7s}
@keyframes is-loader-pulse-circles { 0%{width:14px;opacity:1} 100%{width:96px;opacity:.08} }


/* 270. リップルリング */
.is-loader-ripple-rings { --is-duration:1.6s; position:relative; width:80px; aspect-ratio:1; }
.is-loader-ripple-rings::before,.is-loader-ripple-rings::after { content:""; position:absolute; inset:8px; border:4px solid #22a6c7; border-radius:50%; animation:is-loader-ripple-rings var(--is-duration) cubic-bezier(0,.2,.8,1) infinite; }
.is-loader-ripple-rings::after { animation-delay:calc(var(--is-duration) / -2); }
@keyframes is-loader-ripple-rings { 0%{opacity:1;transform:scale(.1)} 100%{opacity:0;transform:scale(1.25)} }


/* 271. フォールディングキューブ */
.is-loader-folding-cube { --is-duration:2.4s; width:70px; aspect-ratio:1; position:relative; transform:rotate(45deg); }
.is-loader-folding-cube span { position:absolute; width:50%; height:50%; background:#315b7d; transform-origin:100% 100%; animation:is-loader-folding-cube var(--is-duration) linear infinite both; }
.is-loader-folding-cube span:nth-child(2){right:0;transform:rotate(90deg);animation-delay:.3s}.is-loader-folding-cube span:nth-child(3){right:0;bottom:0;transform:rotate(180deg);animation-delay:.6s}.is-loader-folding-cube span:nth-child(4){left:0;bottom:0;transform:rotate(270deg);animation-delay:.9s}
@keyframes is-loader-folding-cube { 0%,10%{opacity:0;transform:perspective(140px) rotateX(-180deg)} 25%,75%{opacity:1;transform:perspective(140px) rotateX(0)} 90%,100%{opacity:0;transform:perspective(140px) rotateY(180deg)} }


/* 272. フリップスクエア */
.is-loader-flip-square { --is-duration:1.45s; width:62px; aspect-ratio:1; border-radius:8px; background:#315b7d; animation:is-loader-flip-square var(--is-duration) ease-in-out infinite; }
@keyframes is-loader-flip-square { 0%{transform:perspective(180px) rotateX(0) rotateY(0)} 50%{transform:perspective(180px) rotateX(-180deg) rotateY(0);background:#22a6c7} 100%{transform:perspective(180px) rotateX(-180deg) rotateY(-180deg);background:#315b7d} }


/* 273. モーフィングダイヤ */
.is-loader-diamond { --is-duration:1.25s; width:52px; aspect-ratio:1; background:#315b7d; transform:rotate(45deg); animation:is-loader-diamond var(--is-duration) ease-in-out infinite; }
@keyframes is-loader-diamond { 0%,100%{transform:rotate(45deg) scale(.75);border-radius:4px} 50%{transform:rotate(225deg) scale(1.05);border-radius:50%;background:#22a6c7} }


/* 274. ドット砂時計 */
.is-loader-hourglass-dots { --is-duration:1.4s; position:relative; width:58px; height:74px; border:3px solid #315b7d; border-left-color:transparent; border-right-color:transparent; border-radius:50%; animation:is-loader-hourglass-dots var(--is-duration) ease-in-out infinite; }
.is-loader-hourglass-dots::before,.is-loader-hourglass-dots::after { content:""; position:absolute; left:50%; width:12px; aspect-ratio:1; margin-left:-6px; border-radius:50%; background:#22a6c7; animation:is-loader-hourglass-dot var(--is-duration) ease-in-out infinite; }
.is-loader-hourglass-dots::before{top:8px}.is-loader-hourglass-dots::after{bottom:8px;animation-direction:reverse}
@keyframes is-loader-hourglass-dots { 50%{transform:rotate(180deg)} } @keyframes is-loader-hourglass-dot { 0%,100%{transform:translateY(0)} 50%{transform:translateY(42px)} }


/* 275. 入力中ドット */
.is-loader-typing { --is-duration:1.1s; display:inline-flex; align-items:flex-end; gap:6px; min-height:30px; }
.is-loader-typing span { width:9px; aspect-ratio:1; border-radius:50%; background:#315b7d; animation:is-loader-typing var(--is-duration) ease-in-out infinite; }
.is-loader-typing span:nth-child(2){animation-delay:.15s}.is-loader-typing span:nth-child(3){animation-delay:.3s}
@keyframes is-loader-typing { 0%,60%,100%{transform:translateY(0);opacity:.35} 30%{transform:translateY(-12px);opacity:1} }


/* 276. スネークリング */
.is-loader-snake { --is-duration:1.1s; width:70px; aspect-ratio:1; border-radius:50%; background:conic-gradient(from 0deg,transparent 0 35%,#315b7d 36% 64%,transparent 65%); -webkit-mask:radial-gradient(farthest-side,transparent calc(100% - 8px),#000 0); mask:radial-gradient(farthest-side,transparent calc(100% - 8px),#000 0); animation:is-loader-snake var(--is-duration) linear infinite; }
@keyframes is-loader-snake { to { transform:rotate(1turn); filter:hue-rotate(90deg); } }


/* 277. 不定プログレスバー */
.is-loader-progress-indeterminate { --is-duration:1.5s; width:min(280px,75vw); height:10px; overflow:hidden; background:rgb(49 91 125 / .15); border-radius:999px; }
.is-loader-progress-indeterminate::after { content:""; display:block; width:42%; height:100%; background:linear-gradient(90deg,#315b7d,#22a6c7); border-radius:inherit; animation:is-loader-progress-indeterminate var(--is-duration) ease-in-out infinite; }
@keyframes is-loader-progress-indeterminate { 0%{transform:translateX(-110%) scaleX(.65)} 50%{transform:translateX(95%) scaleX(1.35)} 100%{transform:translateX(260%) scaleX(.65)} }


/* 278. セグメントプログレス */
.is-loader-progress-segments { --is-duration:1.4s; display:flex; gap:5px; width:min(290px,76vw); }
.is-loader-progress-segments span { flex:1; height:10px; border-radius:999px; background:rgb(49 91 125 / .15); animation:is-loader-progress-segments var(--is-duration) ease-in-out infinite; }
.is-loader-progress-segments span:nth-child(2){animation-delay:.14s}.is-loader-progress-segments span:nth-child(3){animation-delay:.28s}.is-loader-progress-segments span:nth-child(4){animation-delay:.42s}.is-loader-progress-segments span:nth-child(5){animation-delay:.56s}
@keyframes is-loader-progress-segments { 0%,100%{background:rgb(49 91 125 / .15);transform:scaleY(1)} 50%{background:#315b7d;transform:scaleY(1.7)} }


/* 279. カウントダウンリング */
.is-loader-countdown-ring { --is-duration:5s; width:92px; transform:rotate(-90deg); }
.is-loader-countdown-ring circle { fill:none; stroke:#315b7d; stroke-width:9; stroke-linecap:round; stroke-dasharray:283; stroke-dashoffset:0; animation:is-loader-countdown-ring var(--is-duration) linear infinite; }
@keyframes is-loader-countdown-ring { to { stroke-dashoffset:283; } }


/* 280. DNAローダー */
.is-loader-dna { --is-duration:1.25s; display:flex; gap:8px; align-items:center; height:72px; }
.is-loader-dna span { position:relative; width:12px; height:12px; border-radius:50%; background:#315b7d; animation:is-loader-dna var(--is-duration) ease-in-out infinite; }
.is-loader-dna span::after { content:""; position:absolute; left:0; top:28px; width:12px; height:12px; border-radius:50%; background:#22a6c7; animation:is-loader-dna var(--is-duration) ease-in-out infinite reverse; }
.is-loader-dna span:nth-child(2){animation-delay:.12s}.is-loader-dna span:nth-child(2)::after{animation-delay:.12s}.is-loader-dna span:nth-child(3){animation-delay:.24s}.is-loader-dna span:nth-child(3)::after{animation-delay:.24s}.is-loader-dna span:nth-child(4){animation-delay:.36s}.is-loader-dna span:nth-child(4)::after{animation-delay:.36s}.is-loader-dna span:nth-child(5){animation-delay:.48s}.is-loader-dna span:nth-child(5)::after{animation-delay:.48s}
@keyframes is-loader-dna { 0%,100%{transform:translateY(0) scale(.65);opacity:.4} 50%{transform:translateY(28px) scale(1);opacity:1} }


/* 281. プレスできるカード */
.is-card-press { --is-duration:.22s;
  padding:1.45rem; background:#fff; border:1px solid #d7e0e7; border-radius:1rem; box-shadow:0 10px 26px rgb(11 37 69 / .10); color:#0b2545;
  cursor:pointer; transition:transform var(--is-duration),box-shadow var(--is-duration); }
.is-card-press:hover,
.is-card-press:focus-visible,
.demo-stage.is-hover-simulated .is-card-press,
.dialog-preview-stage.is-hover-simulated .is-card-press { transform:translateY(-3px); box-shadow:0 15px 30px rgb(11 37 69 / .14); }
.is-card-press:active { transform:translateY(3px) scale(.985); box-shadow:0 4px 12px rgb(11 37 69 / .12); }


/* 282. 色影スライドカード */
.is-card-shadow-slide { --is-duration:.35s; position:relative;
  padding:1.45rem; background:#fff; border:1px solid #d7e0e7; border-radius:1rem; box-shadow:0 10px 26px rgb(11 37 69 / .10); color:#0b2545;
  transition:transform var(--is-duration); }
.is-card-shadow-slide::after { content:""; position:absolute; inset:10px -10px -10px 10px; z-index:-1; background:#22a6c7; border-radius:inherit; transition:transform var(--is-duration); }
.is-card-shadow-slide:hover,
.is-card-shadow-slide:focus-visible,
.demo-stage.is-hover-simulated .is-card-shadow-slide,
.dialog-preview-stage.is-hover-simulated .is-card-shadow-slide { transform:translate(-5px,-5px); }
.is-card-shadow-slide:hover::after,
.is-card-shadow-slide:focus-visible::after,
.demo-stage.is-hover-simulated .is-card-shadow-slide::after,
.dialog-preview-stage.is-hover-simulated .is-card-shadow-slide::after { transform:translate(10px,10px); }


/* 283. 枠線リビールカード */
.is-card-border-reveal { --is-duration:.45s; position:relative;
  padding:1.45rem; background:#fff; border:1px solid #d7e0e7; border-radius:1rem; box-shadow:0 10px 26px rgb(11 37 69 / .10); color:#0b2545;
  overflow:hidden; }
.is-card-border-reveal::before { content:""; position:absolute; inset:0; border:3px solid #22a6c7; border-radius:inherit; clip-path:inset(0 100% 100% 0); transition:clip-path var(--is-duration) ease; pointer-events:none; }
.is-card-border-reveal:hover::before,
.is-card-border-reveal:focus-visible::before,
.demo-stage.is-hover-simulated .is-card-border-reveal::before,
.dialog-preview-stage.is-hover-simulated .is-card-border-reveal::before { clip-path:inset(0); }


/* 284. グラデーションカード */
.is-card-gradient-hover { --is-duration:.45s;
  padding:1.45rem; background:#fff; border:1px solid #d7e0e7; border-radius:1rem; box-shadow:0 10px 26px rgb(11 37 69 / .10); color:#0b2545;
  background-size:220% 220%; transition:color var(--is-duration),background-position var(--is-duration),transform var(--is-duration); }
.is-card-gradient-hover:hover,
.is-card-gradient-hover:focus-visible,
.demo-stage.is-hover-simulated .is-card-gradient-hover,
.dialog-preview-stage.is-hover-simulated .is-card-gradient-hover { color:#fff; background-image:linear-gradient(135deg,#0b2545,#315b7d,#22a6c7); background-position:100% 100%; transform:translateY(-5px); }
.is-card-gradient-hover:hover p,
.is-card-gradient-hover:focus-visible p,
.demo-stage.is-hover-simulated .is-card-gradient-hover p,
.dialog-preview-stage.is-hover-simulated .is-card-gradient-hover p { color:rgb(255 255 255 / .78); }


/* 285. 内容スライドアップ */
.is-card-content-up { --is-duration:.4s; min-height:170px; display:flex; align-items:flex-end; overflow:hidden; padding:1.45rem; color:#fff; background:linear-gradient(135deg,#315b7d,#0b2545); border-radius:1rem; }
.is-card-content-up > div { transform:translateY(calc(100% - 2.1rem)); transition:transform var(--is-duration) cubic-bezier(.22,1,.36,1); }
.is-card-content-up p { opacity:0; transition:opacity var(--is-duration); }
.is-card-content-up:hover > div,
.is-card-content-up:focus-visible > div,
.demo-stage.is-hover-simulated .is-card-content-up > div,
.dialog-preview-stage.is-hover-simulated .is-card-content-up > div { transform:translateY(0); }.is-card-content-up:hover p,.is-card-content-up:focus-visible p,.demo-stage.is-hover-simulated .is-card-content-up p,.dialog-preview-stage.is-hover-simulated .is-card-content-up p { opacity:1; color:rgb(255 255 255 / .78)!important; }


/* 286. 円形オーバーレイ */
.is-card-overlay-reveal { --is-duration:.4s; position:relative; min-height:170px; overflow:hidden; padding:1.45rem; color:#fff; background:linear-gradient(135deg,#315b7d,#22a6c7); border-radius:1rem; }
.is-card-overlay-reveal > div { position:absolute; inset:0; display:grid; place-items:center; padding:1.4rem; color:#0b2545; background:rgb(255 255 255 / .94); clip-path:circle(0 at 100% 0); transition:clip-path var(--is-duration) ease; }
.is-card-overlay-reveal:hover > div,
.is-card-overlay-reveal:focus-visible > div,
.demo-stage.is-hover-simulated .is-card-overlay-reveal > div,
.dialog-preview-stage.is-hover-simulated .is-card-overlay-reveal > div { clip-path:circle(150% at 100% 0); }


/* 287. 画像ズームカード */
.is-card-image-zoom { --is-duration:.55s; overflow:hidden; background:#fff; border:1px solid #d7e0e7; border-radius:1rem; color:#0b2545; }
.is-card-image-zoom img { display:block; width:100%; height:130px; object-fit:cover; transition:transform var(--is-duration) ease; }
.is-card-image-zoom div { padding:1rem 1.25rem; }
.is-card-image-zoom:hover img,
.is-card-image-zoom:focus-visible img,
.demo-stage.is-hover-simulated .is-card-image-zoom img,
.dialog-preview-stage.is-hover-simulated .is-card-image-zoom img { transform:scale(1.14); }


/* 288. 画像パンカード */
.is-card-image-pan { --is-duration:1s; overflow:hidden; background:#fff; border:1px solid #d7e0e7; border-radius:1rem; color:#0b2545; }
.is-card-image-pan img { display:block; width:120%; max-width:none; height:130px; object-fit:cover; transform:translateX(-8%); transition:transform var(--is-duration) ease; }
.is-card-image-pan div { padding:1rem 1.25rem; }
.is-card-image-pan:hover img,
.is-card-image-pan:focus-visible img,
.demo-stage.is-hover-simulated .is-card-image-pan img,
.dialog-preview-stage.is-hover-simulated .is-card-image-pan img { transform:translateX(-18%); }


/* 289. 角折りカード */
.is-card-corner-fold { --is-duration:.35s; position:relative; overflow:hidden;
  padding:1.45rem; background:#fff; border:1px solid #d7e0e7; border-radius:1rem; box-shadow:0 10px 26px rgb(11 37 69 / .10); color:#0b2545;
}
.is-card-corner-fold::after { content:""; position:absolute; right:0; top:0; width:0; height:0; border-style:solid; border-width:0 0 0 0; border-color:transparent #087f82 transparent transparent; filter:drop-shadow(-4px 5px 4px rgb(11 37 69 / .24)); transition:border-width var(--is-duration) ease; }
.is-card-corner-fold:hover::after,
.is-card-corner-fold:focus-visible::after,
.demo-stage.is-hover-simulated .is-card-corner-fold::after,
.dialog-preview-stage.is-hover-simulated .is-card-corner-fold::after { border-width:0 46px 46px 0; }


/* 290. 光沢カード */
.is-card-spotlight { --is-duration:.7s; position:relative; overflow:hidden;
  padding:1.45rem; background:#fff; border:1px solid #d7e0e7; border-radius:1rem; box-shadow:0 10px 26px rgb(11 37 69 / .10); color:#0b2545;
}
.is-card-spotlight::after { content:""; position:absolute; top:-70%; left:-70%; width:34%; height:240%; background:linear-gradient(90deg,transparent,rgb(255 255 255 / .8),transparent); transform:rotate(18deg); transition:left var(--is-duration); }
.is-card-spotlight:hover::after,
.is-card-spotlight:focus-visible::after,
.demo-stage.is-hover-simulated .is-card-spotlight::after,
.dialog-preview-stage.is-hover-simulated .is-card-spotlight::after { left:135%; }


/* 291. セピア解除 */
.is-image-sepia { overflow:hidden; border-radius:1rem; background:#dce8ef; }
.is-image-sepia img { display:block; width:100%; transition:filter 0.5s ease,transform 0.5s ease; filter:sepia(1); }
.is-image-sepia:hover img,
.is-image-sepia:focus-visible img,
.demo-stage.is-hover-simulated .is-image-sepia img,
.dialog-preview-stage.is-hover-simulated .is-image-sepia img { filter:sepia(0); }


/* 292. 彩度アップ */
.is-image-saturate { overflow:hidden; border-radius:1rem; background:#dce8ef; }
.is-image-saturate img { display:block; width:100%; transition:filter 0.5s ease,transform 0.5s ease; filter:saturate(.25); }
.is-image-saturate:hover img,
.is-image-saturate:focus-visible img,
.demo-stage.is-hover-simulated .is-image-saturate img,
.dialog-preview-stage.is-hover-simulated .is-image-saturate img { filter:saturate(1.35); }


/* 293. 明るさアップ */
.is-image-brightness { overflow:hidden; border-radius:1rem; background:#dce8ef; }
.is-image-brightness img { display:block; width:100%; transition:filter 0.5s ease,transform 0.5s ease; filter:brightness(.6); }
.is-image-brightness:hover img,
.is-image-brightness:focus-visible img,
.demo-stage.is-hover-simulated .is-image-brightness img,
.dialog-preview-stage.is-hover-simulated .is-image-brightness img { filter:brightness(1.12); }


/* 294. コントラスト変化 */
.is-image-contrast { overflow:hidden; border-radius:1rem; background:#dce8ef; }
.is-image-contrast img { display:block; width:100%; transition:filter 0.5s ease,transform 0.5s ease; filter:contrast(.55); }
.is-image-contrast:hover img,
.is-image-contrast:focus-visible img,
.demo-stage.is-hover-simulated .is-image-contrast img,
.dialog-preview-stage.is-hover-simulated .is-image-contrast img { filter:contrast(1.2); }


/* 295. 色相回転 */
.is-image-hue { overflow:hidden; border-radius:1rem; background:#dce8ef; }
.is-image-hue img { display:block; width:100%; transition:filter 0.65s ease,transform 0.65s ease; filter:hue-rotate(0); }
.is-image-hue:hover img,
.is-image-hue:focus-visible img,
.demo-stage.is-hover-simulated .is-image-hue img,
.dialog-preview-stage.is-hover-simulated .is-image-hue img { filter:hue-rotate(150deg); }


/* 296. 画像回転ズーム */
.is-image-rotate-zoom { overflow:hidden; border-radius:1rem; }
.is-image-rotate-zoom img { display:block; width:100%; transition:transform .65s cubic-bezier(.22,1,.36,1); }
.is-image-rotate-zoom:hover img,
.is-image-rotate-zoom:focus-visible img,
.demo-stage.is-hover-simulated .is-image-rotate-zoom img,
.dialog-preview-stage.is-hover-simulated .is-image-rotate-zoom img { transform:scale(1.18) rotate(4deg); }


/* 297. 左へ開くカーテン */
.is-image-curtain-left { --is-duration:.55s; position:relative; overflow:hidden; border-radius:1rem; }
.is-image-curtain-left img { display:block; width:100%; }
.is-image-curtain-left::after { content:""; position:absolute; inset:0; background:#0b2545; transform:translateX(0); transition:transform var(--is-duration) cubic-bezier(.22,1,.36,1); }
.is-image-curtain-left:hover::after,
.is-image-curtain-left:focus-visible::after,
.demo-stage.is-hover-simulated .is-image-curtain-left::after,
.dialog-preview-stage.is-hover-simulated .is-image-curtain-left::after { transform:translateX(-101%); }


/* 298. 中央開きカーテン */
.is-image-curtain-center { --is-duration:.55s; position:relative; overflow:hidden; border-radius:1rem; }
.is-image-curtain-center img { display:block; width:100%; }
.is-image-curtain-center::before,.is-image-curtain-center::after { content:""; position:absolute; top:0; bottom:0; width:51%; background:#315b7d; transition:transform var(--is-duration) ease; }
.is-image-curtain-center::before { left:0; transform-origin:left; }.is-image-curtain-center::after { right:0; transform-origin:right; }
.is-image-curtain-center:hover::before,
.is-image-curtain-center:focus-visible::before,
.demo-stage.is-hover-simulated .is-image-curtain-center::before,
.dialog-preview-stage.is-hover-simulated .is-image-curtain-center::before { transform:translateX(-101%); }.is-image-curtain-center:hover::after,.is-image-curtain-center:focus-visible::after,.demo-stage.is-hover-simulated .is-image-curtain-center::after,.dialog-preview-stage.is-hover-simulated .is-image-curtain-center::after { transform:translateX(101%); }


/* 299. 画像キャプション上昇 */
.is-image-caption-rise { --is-duration:.4s; position:relative; overflow:hidden; border-radius:1rem; }
.is-image-caption-rise img { display:block; width:100%; transition:transform var(--is-duration); }
.is-image-caption-rise figcaption { position:absolute; inset:auto 0 0; padding:1rem; color:#fff; background:linear-gradient(transparent,rgb(11 37 69 / .88)); transform:translateY(100%); transition:transform var(--is-duration); }
.is-image-caption-rise:hover img,
.is-image-caption-rise:focus-visible img,
.demo-stage.is-hover-simulated .is-image-caption-rise img,
.dialog-preview-stage.is-hover-simulated .is-image-caption-rise img { transform:scale(1.06); }.is-image-caption-rise:hover figcaption,.is-image-caption-rise:focus-visible figcaption,.demo-stage.is-hover-simulated .is-image-caption-rise figcaption,.dialog-preview-stage.is-hover-simulated .is-image-caption-rise figcaption { transform:translateY(0); }


/* 300. 分割画像パン */
.is-image-split-pan { --is-duration:.65s; display:grid; grid-template-columns:1fr 1fr; overflow:hidden; border-radius:1rem; }
.is-image-split-pan span { overflow:hidden; }
.is-image-split-pan img { display:block; width:200%; max-width:none; transition:transform var(--is-duration) ease; }
.is-image-split-pan span:first-child img { transform:translateX(0); }.is-image-split-pan span:last-child img { transform:translateX(-50%); }
.is-image-split-pan:hover span:first-child img,
.is-image-split-pan:focus-visible span:first-child img,
.demo-stage.is-hover-simulated .is-image-split-pan span:first-child img,
.dialog-preview-stage.is-hover-simulated .is-image-split-pan span:first-child img { transform:translateX(-5%); }.is-image-split-pan:hover span:last-child img,.is-image-split-pan:focus-visible span:last-child img,.demo-stage.is-hover-simulated .is-image-split-pan span:last-child img,.dialog-preview-stage.is-hover-simulated .is-image-split-pan span:last-child img { transform:translateX(-45%); }


/* 301. ラジアル・パルス */
.is-background-radial-pulse { --is-duration:3s;
  width:min(330px,100%); min-height:170px; display:grid; place-items:center; overflow:hidden; position:relative; color:#fff; border-radius:1rem; font-weight:900;
  background:#0b2545; }
.is-background-radial-pulse::before { content:""; position:absolute; inset:-50%; background:radial-gradient(circle,#22a6c7 0 8%,transparent 35%); animation:is-background-radial-pulse var(--is-duration) ease-in-out infinite; }
.is-background-radial-pulse > span { position:relative; z-index:1; }
@keyframes is-background-radial-pulse { 0%,100%{transform:scale(.65);opacity:.4} 50%{transform:scale(1.35);opacity:1} }


/* 302. 回転コニック背景 */
.is-background-conic-spin { --is-duration:6s;
  width:min(330px,100%); min-height:170px; display:grid; place-items:center; overflow:hidden; position:relative; color:#fff; border-radius:1rem; font-weight:900;
  background:#0b2545; }
.is-background-conic-spin::before { content:""; position:absolute; inset:-80%; background:conic-gradient(from 0deg,#22a6c7,transparent 18%,#7c3aed 42%,transparent 62%,#22a6c7); animation:is-background-conic-spin var(--is-duration) linear infinite; }
.is-background-conic-spin::after { content:"Conic spin"; position:absolute; inset:5px; display:grid; place-items:center; background:#0b2545; border-radius:.75rem; }
@keyframes is-background-conic-spin { to{transform:rotate(1turn)} }


/* 303. オーロラ背景 */
.is-background-aurora { --is-duration:9s;
  width:min(330px,100%); min-height:170px; display:grid; place-items:center; overflow:hidden; position:relative; color:#fff; border-radius:1rem; font-weight:900;
  background:#071d36; }
.is-background-aurora::before { content:""; position:absolute; inset:-45%; background:radial-gradient(ellipse at 25% 45%,rgb(34 166 199 / .9),transparent 34%),radial-gradient(ellipse at 72% 40%,rgb(124 58 237 / .75),transparent 32%),radial-gradient(ellipse at 50% 78%,rgb(45 212 191 / .65),transparent 30%); filter:blur(22px); animation:is-background-aurora var(--is-duration) ease-in-out infinite alternate; }
.is-background-aurora > span { position:relative; z-index:1; }
@keyframes is-background-aurora { to{transform:translate(10%,-8%) rotate(12deg) scale(1.18)} }


/* 304. 流れる波背景 */
.is-background-waves { --is-duration:4s;
  width:min(330px,100%); min-height:170px; display:grid; place-items:center; overflow:hidden; position:relative; color:#fff; border-radius:1rem; font-weight:900;
  background-color:#0b2545; background-image:radial-gradient(ellipse at 50% 130%,transparent 0 44%,rgb(34 166 199 / .65) 45% 50%,transparent 51%); background-size:90px 45px; animation:is-background-waves var(--is-duration) linear infinite; }
@keyframes is-background-waves { to{background-position:90px 0} }


/* 305. メッシュグラデーション */
.is-background-mesh { --is-duration:8s;
  width:min(330px,100%); min-height:170px; display:grid; place-items:center; overflow:hidden; position:relative; color:#fff; border-radius:1rem; font-weight:900;
  background:radial-gradient(at 20% 20%,#22a6c7 0,transparent 45%),radial-gradient(at 80% 25%,#7c3aed 0,transparent 42%),radial-gradient(at 50% 90%,#315b7d 0,transparent 48%),#0b2545; background-size:170% 170%; animation:is-background-mesh var(--is-duration) ease-in-out infinite alternate; }
@keyframes is-background-mesh { from{background-position:0 0,100% 0,50% 100%} to{background-position:30% 25%,70% 20%,40% 70%} }


/* 306. 動くチェック柄 */
.is-background-checker { --is-duration:2.5s;
  width:min(330px,100%); min-height:170px; display:grid; place-items:center; overflow:hidden; position:relative; color:#fff; border-radius:1rem; font-weight:900;
  background-color:#315b7d; background-image:linear-gradient(45deg,rgb(255 255 255 / .12) 25%,transparent 25%,transparent 75%,rgb(255 255 255 / .12) 75%),linear-gradient(45deg,rgb(255 255 255 / .12) 25%,transparent 25%,transparent 75%,rgb(255 255 255 / .12) 75%); background-position:0 0,20px 20px; background-size:40px 40px; animation:is-background-checker var(--is-duration) linear infinite; }
@keyframes is-background-checker { to{background-position:40px 40px,60px 60px} }


/* 307. 斜線ストリーム */
.is-background-diagonal-lines { --is-duration:1.4s;
  width:min(330px,100%); min-height:170px; display:grid; place-items:center; overflow:hidden; position:relative; color:#fff; border-radius:1rem; font-weight:900;
  background:repeating-linear-gradient(135deg,#0b2545 0 15px,#315b7d 15px 30px,#22a6c7 30px 34px); background-size:48px 48px; animation:is-background-diagonal-lines var(--is-duration) linear infinite; }
@keyframes is-background-diagonal-lines { to{background-position:48px 0} }


/* 308. 移動スポットライト */
.is-background-spotlight { --is-duration:5s;
  width:min(330px,100%); min-height:170px; display:grid; place-items:center; overflow:hidden; position:relative; color:#fff; border-radius:1rem; font-weight:900;
  background:#071d36; }
.is-background-spotlight::before { content:""; position:absolute; width:160px; aspect-ratio:1; border-radius:50%; background:radial-gradient(circle,rgb(124 232 255 / .75),transparent 68%); filter:blur(10px); animation:is-background-spotlight var(--is-duration) ease-in-out infinite alternate; }
.is-background-spotlight > span{position:relative;z-index:1}
@keyframes is-background-spotlight { from{transform:translate(-95px,-45px)} to{transform:translate(95px,45px)} }


/* 309. スキャンライン背景 */
.is-background-scanlines { --is-duration:2s;
  width:min(330px,100%); min-height:170px; display:grid; place-items:center; overflow:hidden; position:relative; color:#fff; border-radius:1rem; font-weight:900;
  background:#0b2545; }
.is-background-scanlines::before { content:""; position:absolute; inset:0; background:repeating-linear-gradient(0deg,transparent 0 4px,rgb(124 232 255 / .13) 4px 6px); background-size:100% 12px; animation:is-background-scanlines var(--is-duration) linear infinite; }
.is-background-scanlines > span{position:relative;z-index:1}
@keyframes is-background-scanlines { to{background-position:0 12px} }


/* 310. 流れる星空 */
.is-background-stars { --is-duration:8s;
  width:min(330px,100%); min-height:170px; display:grid; place-items:center; overflow:hidden; position:relative; color:#fff; border-radius:1rem; font-weight:900;
  background-color:#071629; background-image:radial-gradient(circle,#fff 0 1px,transparent 1.5px),radial-gradient(circle,#7cecff 0 1.5px,transparent 2px),radial-gradient(circle,#fff 0 .8px,transparent 1.2px); background-size:44px 44px,70px 70px,28px 28px; background-position:0 0,15px 18px,8px 12px; animation:is-background-stars var(--is-duration) linear infinite; }
@keyframes is-background-stars { to{background-position:44px 88px,85px 158px,36px 68px} }


/* 311. レイン背景 */
.is-background-rain { --is-duration:1.2s;
  width:min(330px,100%); min-height:170px; display:grid; place-items:center; overflow:hidden; position:relative; color:#fff; border-radius:1rem; font-weight:900;
  background:linear-gradient(#102b4b,#071629); }
.is-background-rain span { position:absolute; top:-35px; width:2px; height:28px; background:linear-gradient(transparent,#7cecff); animation:is-background-rain var(--is-duration) linear infinite; }
.is-background-rain span:nth-child(1){left:10%;animation-delay:-.2s}.is-background-rain span:nth-child(2){left:27%;animation-delay:-.7s}.is-background-rain span:nth-child(3){left:45%;animation-delay:-.4s}.is-background-rain span:nth-child(4){left:64%;animation-delay:-1s}.is-background-rain span:nth-child(5){left:82%;animation-delay:-.55s}
.is-background-rain b{position:relative;z-index:1}
@keyframes is-background-rain { to{transform:translate(-28px,230px)} }


/* 312. スノー背景 */
.is-background-snow { --is-duration:5s;
  width:min(330px,100%); min-height:170px; display:grid; place-items:center; overflow:hidden; position:relative; color:#fff; border-radius:1rem; font-weight:900;
  background:linear-gradient(#315b7d,#9ac4dc); }
.is-background-snow span { position:absolute; top:-20px; width:10px; aspect-ratio:1; border-radius:50%; background:#fff; filter:blur(.3px); animation:is-background-snow var(--is-duration) linear infinite; }
.is-background-snow span:nth-child(1){left:8%;animation-delay:-1s}.is-background-snow span:nth-child(2){left:25%;animation-delay:-3s;transform:scale(.6)}.is-background-snow span:nth-child(3){left:43%;animation-delay:-2s;transform:scale(1.2)}.is-background-snow span:nth-child(4){left:63%;animation-delay:-4.3s;transform:scale(.8)}.is-background-snow span:nth-child(5){left:84%;animation-delay:-.7s;transform:scale(1.4)}
.is-background-snow b{position:relative;z-index:1}
@keyframes is-background-snow { 50%{margin-left:22px} to{transform:translateY(220px) rotate(1turn)} }


/* 313. 紙吹雪背景 */
.is-background-confetti { --is-duration:3.4s;
  width:min(330px,100%); min-height:170px; display:grid; place-items:center; overflow:hidden; position:relative; color:#fff; border-radius:1rem; font-weight:900;
  background:#f7fbfd; color:#0b2545; }
.is-background-confetti span { position:absolute; top:-18px; width:9px; height:17px; background:#22a6c7; animation:is-background-confetti var(--is-duration) linear infinite; }
.is-background-confetti span:nth-child(1){left:8%;animation-delay:-.2s;background:#ef4c62}.is-background-confetti span:nth-child(2){left:24%;animation-delay:-2s;background:#f59e0b}.is-background-confetti span:nth-child(3){left:43%;animation-delay:-1.1s;background:#7c3aed}.is-background-confetti span:nth-child(4){left:63%;animation-delay:-2.8s;background:#22c55e}.is-background-confetti span:nth-child(5){left:82%;animation-delay:-.8s;background:#22a6c7}
.is-background-confetti b{position:relative;z-index:1}
@keyframes is-background-confetti { to{transform:translate(35px,220px) rotate(720deg)} }


/* 314. 浮遊スクエア背景 */
.is-background-floating-squares { --is-duration:5s;
  width:min(330px,100%); min-height:170px; display:grid; place-items:center; overflow:hidden; position:relative; color:#fff; border-radius:1rem; font-weight:900;
  background:linear-gradient(135deg,#0b2545,#315b7d); }
.is-background-floating-squares span { position:absolute; bottom:-35px; width:24px; aspect-ratio:1; border:2px solid rgb(124 232 255 / .65); animation:is-background-floating-squares var(--is-duration) linear infinite; }
.is-background-floating-squares span:nth-child(1){left:10%;animation-delay:-1s}.is-background-floating-squares span:nth-child(2){left:32%;animation-delay:-3s;scale:1.5}.is-background-floating-squares span:nth-child(3){left:58%;animation-delay:-.4s;scale:.7}.is-background-floating-squares span:nth-child(4){left:82%;animation-delay:-2.2s;scale:1.2}
.is-background-floating-squares b{position:relative;z-index:1}
@keyframes is-background-floating-squares { to{transform:translateY(-240px) rotate(1turn);opacity:0} }


/* 315. 流れるグラデーション枠 */
.is-border-gradient-slide { --is-duration:4s;
  width:min(330px,100%); min-height:170px; display:grid; place-items:center; overflow:hidden; position:relative; color:#fff; border-radius:1rem; font-weight:900;
  padding:4px; background:linear-gradient(90deg,#22a6c7,#7c3aed,#ef4c62,#22a6c7); background-size:300% 100%; animation:is-border-gradient-slide var(--is-duration) linear infinite; }
.is-border-gradient-slide::after { content:"Gradient border"; position:absolute; inset:4px; display:grid; place-items:center; background:#fff; color:#0b2545; border-radius:.75rem; }
@keyframes is-border-gradient-slide { to{background-position:300% 0} }


/* 316. コーナー・パルス枠 */
.is-border-corners-pulse { --is-duration:1.8s;
  width:min(330px,100%); min-height:170px; display:grid; place-items:center; overflow:hidden; position:relative; color:#fff; border-radius:1rem; font-weight:900;
  color:#0b2545; background:#fff; border:1px solid #d7e0e7; }
.is-border-corners-pulse::before,.is-border-corners-pulse::after { content:""; position:absolute; width:35px; height:35px; border-color:#22a6c7; border-style:solid; animation:is-border-corners-pulse var(--is-duration) ease-in-out infinite; }
.is-border-corners-pulse::before{left:8px;top:8px;border-width:3px 0 0 3px}.is-border-corners-pulse::after{right:8px;bottom:8px;border-width:0 3px 3px 0;animation-delay:calc(var(--is-duration)/-2)}
@keyframes is-border-corners-pulse { 0%,100%{transform:scale(.75);opacity:.35} 50%{transform:scale(1.2);opacity:1} }


/* 317. 走るネオン枠 */
.is-border-neon-run { --is-duration:3s;
  width:min(330px,100%); min-height:170px; display:grid; place-items:center; overflow:hidden; position:relative; color:#fff; border-radius:1rem; font-weight:900;
  background:#071629; border:2px solid rgb(124 232 255 / .25); box-shadow:inset 0 0 18px rgb(34 166 199 / .14); }
.is-border-neon-run::before { content:""; position:absolute; inset:-2px; border-radius:inherit; background:conic-gradient(from var(--is-angle,0deg),transparent 0 72%,#7cecff 82%,transparent 92%); -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0); mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0); -webkit-mask-composite:xor; mask-composite:exclude; padding:2px; animation:is-border-neon-run var(--is-duration) linear infinite; }
@keyframes is-border-neon-run { to{transform:rotate(1turn)} }


/* 318. 枠線スキャン */
.is-border-scan { --is-duration:2.4s;
  width:min(330px,100%); min-height:170px; display:grid; place-items:center; overflow:hidden; position:relative; color:#fff; border-radius:1rem; font-weight:900;
  color:#0b2545; background:#fff; border:3px solid #8fa7b8; }
.is-border-scan::after { content:""; position:absolute; left:-55%; top:0; width:55%; height:4px; background:linear-gradient(90deg,transparent,#087f82 28%,#22d3ee 50%,#087f82 72%,transparent); box-shadow:0 163px 0 #087f82,0 0 12px rgb(18 167 165 / .75); animation:is-border-scan var(--is-duration) linear infinite; }
@keyframes is-border-scan { to{left:100%} }


/* 319. レーダー背景 */
.is-background-radar { --is-duration:3s;
  width:min(330px,100%); min-height:170px; display:grid; place-items:center; overflow:hidden; position:relative; color:#fff; border-radius:1rem; font-weight:900;
  background:repeating-radial-gradient(circle at center,transparent 0 27px,rgb(124 232 255 / .18) 28px 29px),#071629; }
.is-background-radar::before { content:""; position:absolute; left:50%; top:50%; width:55%; height:55%; transform-origin:0 0; background:conic-gradient(from -90deg,rgb(124 232 255 / .55),transparent 38%); animation:is-background-radar var(--is-duration) linear infinite; }
.is-background-radar > span{position:relative;z-index:1}
@keyframes is-background-radar { to{transform:rotate(1turn)} }


/* 320. 背景色パルス */
.is-background-color-pulse { --is-duration:5s;
  width:min(330px,100%); min-height:170px; display:grid; place-items:center; overflow:hidden; position:relative; color:#fff; border-radius:1rem; font-weight:900;
  animation:is-background-color-pulse var(--is-duration) ease-in-out infinite; }
@keyframes is-background-color-pulse { 0%,100%{background:#0b2545} 33%{background:#315b7d} 66%{background:#176c83} }


/* 321. 下ツールチップ */
.is-ui-tooltip-bottom { --is-duration:.2s; position:relative; padding:.7em 1em; color:#fff; background:#315b7d; border:0; border-radius:.6em; font:inherit; cursor:pointer; }
.is-ui-tooltip-bottom::after { content:attr(data-tip); position:absolute; left:50%; top:calc(100% + 10px); z-index:8; padding:.45em .7em; color:#fff; background:#0b2545; border-radius:.5em; white-space:nowrap; opacity:0; pointer-events:none; transform:translate(-50%,-6px); transition:opacity var(--is-duration),transform var(--is-duration); }
.is-ui-tooltip-bottom:hover::after,.is-ui-tooltip-bottom:focus-visible::after,
.demo-stage.is-hover-simulated .is-ui-tooltip-bottom::after,
.dialog-preview-stage.is-hover-simulated .is-ui-tooltip-bottom::after { opacity:1; transform:translate(-50%,0); }


/* 322. 左ツールチップ */
.is-ui-tooltip-left { --is-duration:.2s; position:relative; padding:.7em 1em; color:#fff; background:#315b7d; border:0; border-radius:.6em; font:inherit; cursor:pointer; }
.is-ui-tooltip-left::after { content:attr(data-tip); position:absolute; right:calc(100% + 10px); top:50%; z-index:8; padding:.45em .7em; color:#fff; background:#0b2545; border-radius:.5em; white-space:nowrap; opacity:0; pointer-events:none; transform:translate(6px,-50%); transition:opacity var(--is-duration),transform var(--is-duration); }
.is-ui-tooltip-left:hover::after,.is-ui-tooltip-left:focus-visible::after,
.demo-stage.is-hover-simulated .is-ui-tooltip-left::after,
.dialog-preview-stage.is-hover-simulated .is-ui-tooltip-left::after { opacity:1; transform:translate(0,-50%); }


/* 323. 右ツールチップ */
.is-ui-tooltip-right { --is-duration:.2s; position:relative; padding:.7em 1em; color:#fff; background:#315b7d; border:0; border-radius:.6em; font:inherit; cursor:pointer; }
.is-ui-tooltip-right::after { content:attr(data-tip); position:absolute; left:calc(100% + 10px); top:50%; z-index:8; padding:.45em .7em; color:#fff; background:#0b2545; border-radius:.5em; white-space:nowrap; opacity:0; pointer-events:none; transform:translate(-6px,-50%); transition:opacity var(--is-duration),transform var(--is-duration); }
.is-ui-tooltip-right:hover::after,.is-ui-tooltip-right:focus-visible::after,
.demo-stage.is-hover-simulated .is-ui-tooltip-right::after,
.dialog-preview-stage.is-hover-simulated .is-ui-tooltip-right::after { opacity:1; transform:translate(0,-50%); }


/* 324. パルス・ラジオ */
.is-ui-radio-group { display:grid; gap:.8rem; padding:1rem 1.15rem; color:#0b2545; background:#fff; border:2px solid #b8c7d2; border-radius:1rem; }
.is-ui-radio-pulse { --is-duration:.28s; display:inline-flex; align-items:center; gap:.65em; color:#0b2545; font-weight:800; cursor:pointer; }
.is-ui-radio-pulse input { position:absolute; opacity:0; inline-size:1px; block-size:1px; pointer-events:none; }
.is-ui-radio-pulse span { width:28px; aspect-ratio:1; display:grid; place-items:center; border:3px solid #315b7d; border-radius:50%; transition:box-shadow var(--is-duration),border-color var(--is-duration); }
.is-ui-radio-pulse span::after { content:""; width:14px; aspect-ratio:1; border-radius:50%; background:#087f82; transform:scale(0); transition:transform var(--is-duration) cubic-bezier(.2,.9,.3,1.5); }
.is-ui-radio-pulse input:checked + span { border-color:#087f82; box-shadow:0 0 0 7px rgb(18 167 165 / .26); }.is-ui-radio-pulse input:checked + span::after { transform:scale(1); }
.is-ui-radio-pulse input:focus-visible + span { outline:3px solid rgb(34 166 199 / .45); outline-offset:4px; }


/* 325. 発光スイッチ */
.is-ui-switch-glow { --is-duration:.3s; display:inline-flex; align-items:center; gap:.65em; cursor:pointer; }
.is-ui-switch-glow input { position:absolute; opacity:0; inline-size:1px; block-size:1px; pointer-events:none; }
.is-ui-switch-glow span { position:relative; width:54px; height:30px; background:#b9c7d2; border-radius:999px; transition:background var(--is-duration),box-shadow var(--is-duration); }
.is-ui-switch-glow span::after { content:""; position:absolute; left:4px; top:4px; width:22px; aspect-ratio:1; border-radius:50%; background:#fff; box-shadow:0 2px 6px rgb(0 0 0 / .2); transition:transform var(--is-duration); }
.is-ui-switch-glow input:checked + span { background:#22a6c7; box-shadow:0 0 18px rgb(34 166 199 / .45); }.is-ui-switch-glow input:checked + span::after { transform:translateX(24px); }
.is-ui-switch-glow input:focus-visible + span { outline:3px solid rgb(34 166 199 / .45); outline-offset:4px; }


/* 326. 展開する検索欄 */
.is-ui-search-expand { --is-duration:.35s; display:flex; align-items:center; width:54px; height:48px; overflow:hidden; padding:0 15px; color:#315b7d; background:#fff; border:1px solid #cbd8e2; border-radius:999px; transition:width var(--is-duration),box-shadow var(--is-duration); }
.is-ui-search-expand span { flex:0 0 auto; font-size:1.4rem; }.is-ui-search-expand input { min-width:0; width:100%; margin-left:9px; border:0; outline:0; background:transparent; font:inherit; }
.is-ui-search-expand:focus-within { width:min(270px,70vw); box-shadow:0 0 0 4px rgb(34 166 199 / .16); }


/* 327. 入力欄の下線展開 */
.is-ui-input-underline { --is-duration:.3s; position:relative; display:block; width:min(280px,75vw); padding-top:1rem; }
.is-ui-input-underline input { width:100%; padding:.75rem .1rem .45rem; border:0; border-bottom:2px solid #b9c7d2; outline:0; background:transparent; font:inherit; }
.is-ui-input-underline::after { content:""; position:absolute; left:50%; right:50%; bottom:0; height:2px; background:#22a6c7; transition:left var(--is-duration),right var(--is-duration); }
.is-ui-input-underline span { position:absolute; left:.1rem; top:1.75rem; color:#647587; pointer-events:none; transition:transform var(--is-duration),color var(--is-duration); }
.is-ui-input-underline:focus-within::after { left:0; right:0; }.is-ui-input-underline:focus-within span,.is-ui-input-underline input:not(:placeholder-shown)+span { color:#315b7d; transform:translateY(-1.35rem) scale(.8); transform-origin:left; }


/* 328. 入力エラー表示 */
.is-ui-input-invalid { --is-duration:.35s; display:grid; gap:.35rem; width:min(290px,76vw); }
.is-ui-input-invalid input { padding:.75rem .9rem; border:2px solid #b9c7d2; border-radius:.65rem; outline:0; font:inherit; transition:border-color var(--is-duration),box-shadow var(--is-duration); }
.is-ui-input-invalid span { color:#c83245; font-size:.78rem; opacity:0; transform:translateY(-5px); transition:opacity var(--is-duration),transform var(--is-duration); }
.is-ui-input-invalid input:not(:placeholder-shown):invalid { border-color:#ef4c62; box-shadow:0 0 0 4px rgb(239 76 98 / .12); animation:is-ui-input-invalid .35s ease; }
.is-ui-input-invalid input:not(:placeholder-shown):invalid + span { opacity:1; transform:translateY(0); }
@keyframes is-ui-input-invalid { 25%{transform:translateX(-5px)} 50%{transform:translateX(5px)} 75%{transform:translateX(-2px)} }


/* 329. CSSトースト通知 */
.is-ui-toast-demo { --is-duration:.35s; position:relative; display:block; min-height:120px; }
.is-ui-toast-demo input { position:absolute; opacity:0; inline-size:1px; block-size:1px; pointer-events:none; }.is-ui-toast-trigger { display:inline-block; padding:.7em 1em; color:#fff; background:#315b7d; border-radius:.6em; cursor:pointer; }
.is-ui-toast { position:absolute; left:50%; bottom:0; min-width:180px; padding:.75rem 1rem; color:#fff; background:#0b2545; border-radius:.65rem; box-shadow:0 12px 28px rgb(11 37 69 / .25); opacity:0; transform:translate(-50%,18px); transition:opacity var(--is-duration),transform var(--is-duration); }
.is-ui-toast-demo input:checked ~ .is-ui-toast { opacity:1; transform:translate(-50%,0); }
.is-ui-toast-demo input:focus-visible + .is-ui-toast-trigger { outline:3px solid rgb(34 166 199 / .45); outline-offset:4px; }


/* 330. CSSモーダル */
.is-ui-modal-check { --is-duration:.3s; position:relative; min-height:190px; display:grid; place-items:center; }
.is-ui-modal-check > input { position:absolute; opacity:0; inline-size:1px; block-size:1px; pointer-events:none; }.is-ui-modal-open { padding:.75em 1em; color:#fff; background:#315b7d; border-radius:.6em; cursor:pointer; }
.is-ui-modal-layer { position:absolute; inset:0; z-index:5; display:grid; place-items:center; visibility:hidden; opacity:0; transition:opacity var(--is-duration),visibility var(--is-duration); }
.is-ui-modal-backdrop { position:absolute; inset:0; background:rgb(11 37 69 / .55); cursor:pointer; }.is-ui-modal-layer section { position:relative; z-index:1; width:min(260px,85%); padding:1.35rem; background:#fff; color:#0b2545; border-radius:1rem; transform:translateY(20px) scale(.95); transition:transform var(--is-duration); }
.is-ui-modal-close { position:absolute; right:.7rem; top:.45rem; cursor:pointer; font-size:1.4rem; }.is-ui-modal-check > input:checked ~ .is-ui-modal-layer { visibility:visible; opacity:1; }.is-ui-modal-check > input:checked ~ .is-ui-modal-layer section { transform:translateY(0) scale(1); }
.is-ui-modal-check > input:focus-visible + .is-ui-modal-open { outline:3px solid rgb(34 166 199 / .45); outline-offset:4px; }


/* 331. スライドドロワー */
.is-ui-drawer { --is-duration:.35s; position:relative; min-height:190px; overflow:hidden; display:grid; place-items:center; background:#eef4f7; border-radius:1rem; }
.is-ui-drawer > input { position:absolute; opacity:0; inline-size:1px; block-size:1px; pointer-events:none; }.is-ui-drawer-open { padding:.7em 1em; color:#fff; background:#315b7d; border-radius:.6em; cursor:pointer; }
.is-ui-drawer aside { position:absolute; inset:0 auto 0 0; width:70%; display:flex; flex-direction:column; gap:.65rem; padding:1.2rem; color:#fff; background:#0b2545; transform:translateX(-101%); transition:transform var(--is-duration) cubic-bezier(.22,1,.36,1); }
.is-ui-drawer aside label { align-self:flex-end; cursor:pointer; font-size:1.4rem; }.is-ui-drawer aside a { color:#fff; }.is-ui-drawer > input:checked ~ aside { transform:translateX(0); }
.is-ui-drawer > input:focus-visible + .is-ui-drawer-open { outline:3px solid rgb(34 166 199 / .45); outline-offset:4px; }


/* 332. CSSタブ切り替え */
.is-ui-tabs { --is-duration:.3s; width:min(320px,82vw); display:grid; grid-template-columns:1fr 1fr; }
.is-ui-tabs input { position:absolute; opacity:0; inline-size:1px; block-size:1px; pointer-events:none; }.is-ui-tabs label { padding:.65rem; text-align:center; color:#647587; border-bottom:3px solid #d7e0e7; cursor:pointer; transition:color var(--is-duration),border-color var(--is-duration); }
.is-ui-tabs section { grid-column:1/-1; display:none; min-height:90px; padding:1rem; background:#fff; border-radius:0 0 .8rem .8rem; animation:is-ui-tabs var(--is-duration) ease both; }
.is-ui-tabs #tab-a:checked + label,.is-ui-tabs #tab-b:checked + label { color:#315b7d; border-color:#22a6c7; }.is-ui-tabs #tab-a:checked ~ .tab-a,.is-ui-tabs #tab-b:checked ~ .tab-b { display:block; }
.is-ui-tabs input:focus-visible + label { outline:3px solid rgb(34 166 199 / .45); outline-offset:-3px; border-radius:.45rem .45rem 0 0; }
@keyframes is-ui-tabs { from{opacity:0;transform:translateY(8px)} to{opacity:1;transform:translateY(0)} }


/* 333. 進行ステッパー */
.is-ui-stepper { --is-duration:1.8s; display:flex; gap:0; padding:0; list-style:none; counter-reset:step; }
.is-ui-stepper li { position:relative; min-width:78px; padding-top:38px; text-align:center; color:#7d8b99; font-size:.76rem; }
.is-ui-stepper li::before { counter-increment:step; content:counter(step); position:absolute; left:50%; top:0; z-index:2; width:30px; height:30px; display:grid; place-items:center; translate:-50%; color:#fff; background:#b9c7d2; border-radius:50%; }
.is-ui-stepper li:not(:last-child)::after { content:""; position:absolute; left:50%; top:14px; width:100%; height:3px; background:#b9c7d2; }
.is-ui-stepper .done::before,.is-ui-stepper .active::before { background:#315b7d; }.is-ui-stepper .done::after { background:linear-gradient(90deg,#315b7d,#22a6c7); background-size:200% 100%; animation:is-ui-stepper var(--is-duration) linear infinite; }.is-ui-stepper .active::before { animation:is-ui-stepper-pulse 1.2s ease-in-out infinite; }
@keyframes is-ui-stepper { to{background-position:200% 0} } @keyframes is-ui-stepper-pulse { 50%{box-shadow:0 0 0 7px rgb(34 166 199 / .18)} }


/* 334. 円形進捗表示 */
@property --is-circle-value { syntax:"<integer>"; inherits:true; initial-value:0; }
.is-ui-progress-circle { --is-duration:2.4s; --is-circle-value:0; width:100px; aspect-ratio:1; display:grid; place-items:center; border-radius:50%; background:conic-gradient(#315b7d calc(var(--is-circle-value) * 1%),#dce6ec 0); animation:is-ui-progress-circle var(--is-duration) ease-out both; }
.is-ui-progress-circle::before { content:""; grid-area:1/1; width:76%; aspect-ratio:1; border-radius:50%; background:#fff; }.is-ui-progress-circle span { grid-area:1/1; z-index:1; color:#0b2545; font-weight:900; font-size:0; }.is-ui-progress-circle span::after { content:counter(is-circle) "%"; counter-reset:is-circle var(--is-circle-value); font-size:1rem; }
@keyframes is-ui-progress-circle { from{--is-circle-value:0;opacity:.6;transform:scale(.88)} to{--is-circle-value:75;opacity:1;transform:scale(1)} }


/* 335. カードスケルトン */
.is-ui-skeleton-card { --is-duration:1.3s; width:min(280px,78vw); padding:1rem; background:#fff; border-radius:1rem; }
.is-ui-skeleton-card > * { display:block; margin:.65rem 0; border-radius:.45rem; background:linear-gradient(90deg,#e1e8ed 25%,#f8fbfd 50%,#e1e8ed 75%); background-size:200% 100%; animation:is-ui-skeleton-card var(--is-duration) linear infinite; }
.is-ui-skeleton-card i { height:95px; }.is-ui-skeleton-card b { width:68%; height:17px; }.is-ui-skeleton-card span { height:12px; }.is-ui-skeleton-card span:last-child { width:52%; }
@keyframes is-ui-skeleton-card { to{background-position:-200% 0} }


/* 336. リストスケルトン */
.is-ui-skeleton-list { --is-duration:1.25s; width:min(300px,80vw); display:grid; gap:.75rem; padding:1rem; background:#fff; border:2px solid #b8c7d2; border-radius:1rem; box-shadow:0 10px 24px rgb(11 37 69 / .1); }.is-ui-skeleton-list p { display:grid; grid-template-columns:48px 1fr; gap:.75rem; align-items:center; margin:0; }.is-ui-skeleton-list i,.is-ui-skeleton-list span { display:block; background:linear-gradient(90deg,#aebfcc 25%,#edf4f7 50%,#aebfcc 75%); background-size:200% 100%; animation:is-ui-skeleton-list var(--is-duration) linear infinite; }.is-ui-skeleton-list i { width:48px; aspect-ratio:1; border-radius:50%; }.is-ui-skeleton-list span { height:16px; border-radius:.4rem; }
@keyframes is-ui-skeleton-list { to{background-position:-200% 0} }


/* 337. オンライン状態アバター */
.is-ui-avatar-status { --is-duration:1.5s; position:relative; width:78px; aspect-ratio:1; }.is-ui-avatar-status > span { width:100%; height:100%; display:grid; place-items:center; color:#fff; background:linear-gradient(135deg,#315b7d,#22a6c7); border-radius:50%; font-weight:900; }.is-ui-avatar-status i { position:absolute; right:2px; bottom:3px; width:20px; aspect-ratio:1; border:3px solid #fff; border-radius:50%; background:#22c55e; }.is-ui-avatar-status i::after { content:""; position:absolute; inset:-3px; border-radius:inherit; background:#22c55e; z-index:-1; animation:is-ui-avatar-status var(--is-duration) ease-out infinite; }
@keyframes is-ui-avatar-status { to{opacity:0;transform:scale(1.8)} }


/* 338. 削除チップ */
.is-ui-chip { --is-duration:.25s; display:inline-flex; align-items:center; gap:.55em; padding:.45em .8em; color:#315b7d; background:#e8f4f8; border:1px solid #b9dce7; border-radius:999px; font:inherit; font-weight:800; cursor:pointer; transition:background var(--is-duration),transform var(--is-duration); }.is-ui-chip span { display:grid; place-items:center; width:20px; aspect-ratio:1; border-radius:50%; transition:color var(--is-duration),background var(--is-duration),transform var(--is-duration); }.is-ui-chip:hover,.is-ui-chip:focus-visible,.demo-stage.is-hover-simulated .is-ui-chip,.dialog-preview-stage.is-hover-simulated .is-ui-chip { background:#d8edf4; transform:translateY(-2px); }.is-ui-chip:hover span,.is-ui-chip:focus-visible span,.demo-stage.is-hover-simulated .is-ui-chip span,.dialog-preview-stage.is-hover-simulated .is-ui-chip span { color:#fff; background:#315b7d; transform:rotate(90deg); }


/* 339. ページネーション */
.is-ui-pagination { --is-duration:.25s; display:flex; gap:.45rem; }.is-ui-pagination a { width:40px; aspect-ratio:1; display:grid; place-items:center; color:#315b7d; background:#fff; border:1px solid #cbd8e2; border-radius:.65rem; text-decoration:none; transition:color var(--is-duration),background var(--is-duration),transform var(--is-duration); }.is-ui-pagination a:hover,.is-ui-pagination a:focus-visible,.is-ui-pagination a.active,.demo-stage.is-hover-simulated .is-ui-pagination a,.dialog-preview-stage.is-hover-simulated .is-ui-pagination a { color:#fff; background:#315b7d; transform:translateY(-4px); }


/* 340. レンジスライダー */
.is-ui-range { --is-duration:.2s; display:grid; gap:.6rem; width:min(280px,75vw); color:#315b7d; font-weight:800; }.is-ui-range input { width:100%; accent-color:#315b7d; cursor:pointer; }.is-ui-range input::-webkit-slider-thumb { transition:transform var(--is-duration),box-shadow var(--is-duration); }.is-ui-range input:hover::-webkit-slider-thumb,.is-ui-range input:focus-visible::-webkit-slider-thumb,.demo-stage.is-hover-simulated .is-ui-range input::-webkit-slider-thumb,.dialog-preview-stage.is-hover-simulated .is-ui-range input::-webkit-slider-thumb { transform:scale(1.2); box-shadow:0 0 0 7px rgb(34 166 199 / .18); }.is-ui-range input::-moz-range-thumb { transition:transform var(--is-duration),box-shadow var(--is-duration); }.is-ui-range input:hover::-moz-range-thumb,.is-ui-range input:focus-visible::-moz-range-thumb,.demo-stage.is-hover-simulated .is-ui-range input::-moz-range-thumb,.dialog-preview-stage.is-hover-simulated .is-ui-range input::-moz-range-thumb { transform:scale(1.2); box-shadow:0 0 0 7px rgb(34 166 199 / .18); }


/* 341. スクロール・フェード左 */
.is-scroll-fade-left { opacity:1;  }
@supports (animation-timeline:view()) {
  .is-scroll-fade-left { animation:is-scroll-fade-left linear both; animation-timeline:view(); animation-range:entry 10% cover 38%; }
  @keyframes is-scroll-fade-left { from{opacity:0;transform:translateX(-64px)} to{opacity:1;transform:translateX(0)} }
}


/* 342. スクロール・フェード右 */
.is-scroll-fade-right { opacity:1;  }
@supports (animation-timeline:view()) {
  .is-scroll-fade-right { animation:is-scroll-fade-right linear both; animation-timeline:view(); animation-range:entry 10% cover 38%; }
  @keyframes is-scroll-fade-right { from{opacity:0;transform:translateX(64px)} to{opacity:1;transform:translateX(0)} }
}


/* 343. スクロール・クリップ */
.is-scroll-clip { opacity:1;  }
@supports (animation-timeline:view()) {
  .is-scroll-clip { animation:is-scroll-clip linear both; animation-timeline:view(); animation-range:entry 10% cover 38%; }
  @keyframes is-scroll-clip { from{clip-path:inset(0 100% 0 0)} to{clip-path:inset(0)} }
}


/* 344. スクロール・ブラー解除 */
.is-scroll-blur { opacity:1;  }
@supports (animation-timeline:view()) {
  .is-scroll-blur { animation:is-scroll-blur linear both; animation-timeline:view(); animation-range:entry 10% cover 38%; }
  @keyframes is-scroll-blur { from{opacity:0;filter:blur(18px)} to{opacity:1;filter:blur(0)} }
}


/* 345. スクロール・スケールアップ */
.is-scroll-scale-up { opacity:1;  }
@supports (animation-timeline:view()) {
  .is-scroll-scale-up { animation:is-scroll-scale-up linear both; animation-timeline:view(); animation-range:entry 10% cover 38%; }
  @keyframes is-scroll-scale-up { from{opacity:0;transform:scale(.62)} to{opacity:1;transform:scale(1)} }
}


/* 346. スクロール・スキュー解除 */
.is-scroll-skew { opacity:1;  }
@supports (animation-timeline:view()) {
  .is-scroll-skew { animation:is-scroll-skew linear both; animation-timeline:view(); animation-range:entry 10% cover 38%; }
  @keyframes is-scroll-skew { from{opacity:0;transform:translateY(45px) skewY(9deg)} to{opacity:1;transform:translateY(0) skewY(0)} }
}


/* 347. スクロール・カラー変化 */
.is-scroll-color { opacity:1;  }
@supports (animation-timeline:view()) {
  .is-scroll-color { animation:is-scroll-color linear both; animation-timeline:view(); animation-range:entry 10% cover 38%; }
  @keyframes is-scroll-color { from{color:#0b2545;background:#dcebf2} to{color:#fff;background:#315b7d} }
}


/* 348. スクロール・パララックス */
.is-scroll-parallax { opacity:1;  }
@supports (animation-timeline:view()) {
  .is-scroll-parallax { animation:is-scroll-parallax linear both; animation-timeline:view(); animation-range:entry 10% cover 38%; }
  @keyframes is-scroll-parallax { from{transform:translateY(70px)} to{transform:translateY(-70px)} }
}


/* 349. スクロール枠線リビール */
.is-scroll-border-reveal { position:relative; opacity:1; }
.is-scroll-border-reveal::after { content:""; position:absolute; inset:-4px; border:4px solid #22a6c7; border-radius:inherit; clip-path:inset(0 100% 100% 0); }
@supports (animation-timeline:view()) {
 .is-scroll-border-reveal::after { animation:is-scroll-border-reveal linear both; animation-timeline:view(); animation-range:entry 8% cover 40%; }
 @keyframes is-scroll-border-reveal { to{clip-path:inset(0)} }
}


/* 350. スクロール円形進捗 */
.is-scroll-progress-circle { width:100px; transform:rotate(-90deg); }
.is-scroll-progress-circle circle { fill:none; stroke:#315b7d; stroke-width:9; stroke-linecap:round; stroke-dasharray:283; stroke-dashoffset:0; }
@supports (animation-timeline:view()) {
 .is-scroll-progress-circle circle { animation:is-scroll-progress-circle linear both; animation-timeline:view(); animation-range:entry 0% cover 75%; }
 @keyframes is-scroll-progress-circle { from{stroke-dashoffset:283} to{stroke-dashoffset:0} }
}


/* 351. SVG曲線ドロー */
.is-svg-line-draw { --is-duration:2.2s; width:min(260px,80vw); fill:none; stroke:#315b7d; stroke-width:6; stroke-linecap:round; }
.is-svg-line-draw path { stroke-dasharray:1; stroke-dashoffset:1; animation:is-svg-line-draw var(--is-duration) ease-in-out infinite alternate; }
@keyframes is-svg-line-draw { to{stroke-dashoffset:0} }


/* 352. SVGスタードロー */
.is-svg-star-draw { --is-duration:2.3s; width:110px; fill:rgb(34 166 199 / .12); stroke:#315b7d; stroke-width:4; stroke-linejoin:round; }
.is-svg-star-draw path { stroke-dasharray:1; stroke-dashoffset:1; animation:is-svg-star-draw var(--is-duration) ease-in-out infinite; }
@keyframes is-svg-star-draw { 0%{stroke-dashoffset:1;fill:transparent} 55%,80%{stroke-dashoffset:0;fill:rgb(34 166 199 / .2)} 100%{stroke-dashoffset:-1;fill:transparent} }


/* 353. SVG矢印ドロー */
.is-svg-arrow-draw { --is-duration:1.8s; width:min(260px,80vw); fill:none; stroke:#315b7d; stroke-width:7; stroke-linecap:round; stroke-linejoin:round; }
.is-svg-arrow-draw path { stroke-dasharray:1; stroke-dashoffset:1; animation:is-svg-arrow-draw var(--is-duration) ease-in-out infinite; }
@keyframes is-svg-arrow-draw { 0%{stroke-dashoffset:1} 55%,80%{stroke-dashoffset:0} 100%{stroke-dashoffset:-1} }


/* 354. SVG破線ラン */
.is-svg-dash-run { --is-duration:1.2s; width:110px; fill:none; stroke:#315b7d; stroke-width:7; stroke-linecap:round; }
.is-svg-dash-run circle { stroke-dasharray:12 10; animation:is-svg-dash-run var(--is-duration) linear infinite; transform-origin:center; }
@keyframes is-svg-dash-run { to{stroke-dashoffset:-44;transform:rotate(1turn)} }


/* 355. SVG可変スピナー */
.is-svg-spinner { --is-duration:1.3s; width:105px; fill:none; stroke:#315b7d; stroke-width:9; stroke-linecap:round; animation:is-svg-spinner-rotate var(--is-duration) linear infinite; }
.is-svg-spinner circle { stroke-dasharray:70 210; animation:is-svg-spinner-dash calc(var(--is-duration) * 1.5) ease-in-out infinite; }
@keyframes is-svg-spinner-rotate { to{transform:rotate(1turn)} } @keyframes is-svg-spinner-dash { 0%{stroke-dasharray:10 270;stroke-dashoffset:0} 50%{stroke-dasharray:150 130;stroke-dashoffset:-45} 100%{stroke-dasharray:10 270;stroke-dashoffset:-275} }


/* 356. グレースケール循環 */
.is-filter-grayscale-cycle { overflow:hidden; border-radius:1rem; }
.is-filter-grayscale-cycle img { display:block; width:100%; animation:is-filter-grayscale-cycle 3.2s ease-in-out infinite; }
@keyframes is-filter-grayscale-cycle { 0%,100%{filter:grayscale(0)} 50%{filter:grayscale(1)} }


/* 357. セピア循環 */
.is-filter-sepia-cycle { overflow:hidden; border-radius:1rem; }
.is-filter-sepia-cycle img { display:block; width:100%; animation:is-filter-sepia-cycle 3.4s ease-in-out infinite; }
@keyframes is-filter-sepia-cycle { 0%,100%{filter:sepia(0)} 50%{filter:sepia(1)} }


/* 358. 反転色循環 */
.is-filter-invert-cycle { overflow:hidden; border-radius:1rem; }
.is-filter-invert-cycle img { display:block; width:100%; animation:is-filter-invert-cycle 3s ease-in-out infinite; }
@keyframes is-filter-invert-cycle { 0%,100%{filter:invert(0)} 50%{filter:invert(1) hue-rotate(180deg)} }


/* 359. ブラー・パルス */
.is-filter-blur-pulse { overflow:hidden; border-radius:1rem; }
.is-filter-blur-pulse img { display:block; width:100%; animation:is-filter-blur-pulse 2.8s ease-in-out infinite; }
@keyframes is-filter-blur-pulse { 0%,100%{filter:blur(0);transform:scale(1)} 50%{filter:blur(7px);transform:scale(1.06)} }


/* 360. クリップパス・モーフ */
.is-clip-morph { --is-duration:5s; width:150px; aspect-ratio:1; display:grid; place-items:center; color:#fff; background:linear-gradient(135deg,#315b7d,#22a6c7); animation:is-clip-morph var(--is-duration) ease-in-out infinite alternate; }
@keyframes is-clip-morph { 0%{clip-path:polygon(50% 0,100% 50%,50% 100%,0 50%);border-radius:0} 33%{clip-path:polygon(20% 0,100% 20%,80% 100%,0 80%);border-radius:18%} 66%{clip-path:polygon(50% 0,92% 22%,100% 70%,50% 100%,0 70%,8% 22%);border-radius:28%} 100%{clip-path:circle(50%);border-radius:50%} }