.fadein:not(.blink):not(.leftright) {
  --ease-out-cubic: cubic-bezier(0.33, 1, 0.68, 1);
  --fadein-delay: 0ms;
  --fadein-dur: 1.8s;

  opacity: 0;

  translate: 0 0.6em;
  transform: translateY(0.6em);

  transition:
    opacity var(--fadein-dur) var(--ease-out-cubic) var(--fadein-delay),
    translate var(--fadein-dur) var(--ease-out-cubic) var(--fadein-delay),
    transform var(--fadein-dur) var(--ease-out-cubic) var(--fadein-delay);

  will-change: opacity, transform, translate;
}

.fadein:not(.blink):not(.leftright).isActive {
  opacity: 1;
  translate: 0 0;
  transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
  .fadein:not(.blink):not(.leftright) {
    opacity: 1;
    translate: 0 0;
    transform: translateY(0);
    transition: none;
  }
}
/* =========================================
  Cheer shake (katakata)
========================================= */
.k-energy__charCheer {
  display: block;
  transform-origin: 50% 100%;
  animation: k-cheer-katakata 2.8s infinite;
  will-change: transform;
}

@keyframes k-cheer-katakata {
  0% {
    transform: translate3d(0, 0, 0) rotate(0deg);
  }
  2% {
    transform: translate3d(1px, 0, 0) rotate(1deg);
  }
  4% {
    transform: translate3d(-1px, 0, 0) rotate(-1deg);
  }
  6% {
    transform: translate3d(1px, 0, 0) rotate(0.8deg);
  }
  8% {
    transform: translate3d(-1px, 0, 0) rotate(-0.8deg);
  }
  10% {
    transform: translate3d(0, 0, 0) rotate(0deg);
  }

  /* 以降は止める（“間”） */
  100% {
    transform: translate3d(0, 0, 0) rotate(0deg);
  }
}

@media (prefers-reduced-motion: reduce) {
  .k-energy__charCheer {
    animation: none;
  }
}
/* =========================================
  k-act hover: expanding circle background
========================================= */
.k-act__link {
  --ease-out-quart: cubic-bezier(0.25, 1, 0.5, 1);
  --k-act-hover-bg: #00597b;
  --k-act-hover-text: #fff;

  position: relative;
  overflow: hidden;
  opacity: 1;
  filter: none;
}

/* 丸（背景） */
.k-act__link::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;

  width: var(--k-act-bg-size, 0px);
  height: var(--k-act-bg-size, 0px);
  border-radius: 50%;
  background: var(--k-act-hover-bg);

  /* JSで入れる座標（px）/ 初期は中心(50%) */
  transform: translate3d(calc(var(--k-act-bg-x, 50%) - 50%), calc(var(--k-act-bg-y, 50%) - 50%), 0) scale(var(--k-act-bg-scale, 0));

  transition: transform 0.6s var(--ease-out-quart);
  will-change: transform;

  z-index: 0;
  opacity: 1;
}

.k-act__link > * {
  position: relative;
  z-index: 1;
}

@media (any-hover: hover) {
  .k-act__link:not(.is-disabled) {
    transition: color 0.6s var(--ease-out-quart);
  }

  .k-act__link:not(.is-disabled):hover {
    color: var(--k-act-hover-text);
    --k-act-bg-scale: 1;
    opacity: 1;
    filter: none;
  }
}

/* キーボード操作でも同じ演出 */
.k-act__link:not(.is-disabled):focus-visible {
  color: var(--k-act-hover-text);
  --k-act-bg-scale: 1;
  outline: 2px solid currentColor;
  outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
  .k-act__link::before {
    transition: none;
    transform: none;
    display: none;
  }
  .k-act__link:not(.is-disabled) {
    transition: none;
  }
}
/* =========================================
  k-energy hover
========================================= */
.k-kids .k-energy__ctaLink {
  --ease-out-quart: cubic-bezier(0.25, 1, 0.5, 1);
  --k-act-hover-bg: #00597b;
  --k-act-hover-text: #fff;

  position: relative;
  z-index: 0;
  isolation: isolate;

  opacity: 1;
  filter: none;
}

/* 円（背景） */
.k-kids .k-energy__ctaLink::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: var(--k-radius-lg);
  background: var(--k-act-hover-bg);
  pointer-events: none;
  z-index: 0;

  /* 初期は見えない */
  clip-path: circle(0px at var(--k-act-bg-x, 50%) var(--k-act-bg-y, 50%));
  transition: clip-path 0.6s var(--ease-out-quart);
  will-change: clip-path;
}

/* テキストやキャラは前へ */
.k-kids .k-energy__ctaTxt {
  position: relative;
  z-index: 1;
}

/* Char は absolute を維持しつつ前面に（崩れ防止の上書きも兼ねる） */
.k-kids .k-energy__ctaLink .k-energy__ctaChar {
  position: absolute;
  z-index: 1;
}

/* 背景円は背面 */
.k-kids .k-energy__ctaLink::before {
  z-index: 0;
}

@media (any-hover: hover) {
  .k-kids .k-energy__ctaLink:not(.is-disabled) {
    transition: color 0.6s var(--ease-out-quart);
  }

  .k-kids .k-energy__ctaLink:not(.is-disabled):hover {
    color: var(--k-act-hover-text);
    opacity: 1;
    filter: none;
  }

  .k-kids .k-energy__ctaLink:not(.is-disabled):hover::before {
    clip-path: circle(calc(var(--k-act-bg-size, 0px) / 2) at var(--k-act-bg-x, 50%) var(--k-act-bg-y, 50%));
  }
}

/* キーボード操作でも同じ演出（outlineは既存の .k-energy__ctaLink:focus-visible を優先する） */
.k-kids .k-energy__ctaLink:not(.is-disabled):focus-visible {
  color: var(--k-act-hover-text);
}

.k-kids .k-energy__ctaLink:not(.is-disabled):focus-visible::before {
  clip-path: circle(calc(var(--k-act-bg-size, 0px) / 2) at var(--k-act-bg-x, 50%) var(--k-act-bg-y, 50%));
}

@media (prefers-reduced-motion: reduce) {
  .k-kids .k-energy__ctaLink::before {
    transition: none;
    display: none;
  }
  .k-kids .k-energy__ctaLink:not(.is-disabled) {
    transition: none;
  }
}


.blink {
  visibility: hidden;
}
.blink.isActive {
  animation: blink-animation 0.5s steps(2, start) 2;
  animation-fill-mode: forwards;
}

@keyframes blink-animation {
  50% {
    visibility: hidden;
  }
  to {
    visibility: visible;
  }
}

.leftright.isActive {
  animation: slideInRight 1.0s ease-out forwards;
}
@keyframes slideInRight {
  0% {
    transform: translateX(0); /* 開始位置：左 */
  }
  100% {
    transform: translateX(100px); /* 終了位置：右 */
  }
}
@media (max-width: 768px) {
@keyframes slideInRight {
  0% {
    transform: translateX(0); /* 開始位置：左 */
  }
  100% {
    transform: translateX(80px); /* 終了位置：右 */
  }
}
}