/* #!
Scrollin CSS/JS (fluffy fadein):
Author: sarap422
Description: Unified Intersection Observer approach (wrapper-free / transition+animation / vanilla JS)
Version: 1.3.0
License: Released under the MIT license.
License URI: https://opensource.org/licenses/MIT
*/




/* §フェードイン
────────────── ༚༶⊰⟡⊱༶༚༺*/
/* ベーススタイル */
:not([unscrollin]) :is(.scroll-fadeIn,
  .scroll-fadeInBottom,
  .scroll-fadeInTop,
  .scroll-fadeInLeft,
  .scroll-fadeInRight) {
  opacity: 0;
  /* trans: property | duration | easing | delay */
  transition: opacity 1s var(--ease-out-cubic, ease-out) 0.25s,
              transform 1s var(--ease-out-cubic, ease-out) 0.25s;
}

:not([unscrollin]) .scroll-fadeInBottom { transform: translateY(3rem); }
:not([unscrollin]) .scroll-fadeInTop    { transform: translateY(-3rem); }
:not([unscrollin]) .scroll-fadeInLeft   { transform: translateX(-3rem); }
:not([unscrollin]) .scroll-fadeInRight  { transform: translateX(3rem); }

/* .is-scloaded */
:not([unscrollin]) :is(.scroll-fadeIn,
  .scroll-fadeInBottom,
  .scroll-fadeInTop,
  .scroll-fadeInLeft,
  .scroll-fadeInRight):where(.is-scloaded) {
  opacity: 1;
  transform: translate(0);
}


/*༻§𝐒𝐄𝐂𝐓𝐈𝐎𝐍༺──────────────
//bounceIn（バウンス：行き過ぎて戻るオーバーシュート。textillin と同語彙）
────────────── ༚༶⊰⟡⊱༶༚༺*/
/* ベーススタイル */
:not([unscrollin]) :is(.scroll-bounceIn,
  .scroll-bounceInBottom,
  .scroll-bounceInTop,
  .scroll-bounceInLeft,
  .scroll-bounceInRight) {
  opacity: 0;
  /* trans: property | duration | easing | delay ※transform のみオーバーシュート系イージング */
  transition: opacity 1s var(--ease-out-cubic, ease-out) 0.25s,
              transform 1s var(--ease-out-back, cubic-bezier(0.34, 1.56, 0.64, 1)) 0.25s;
}

:not([unscrollin]) .scroll-bounceIn       { transform: scale(0.3); }
:not([unscrollin]) .scroll-bounceInBottom { transform: translateY(3rem); }
:not([unscrollin]) .scroll-bounceInTop    { transform: translateY(-3rem); }
:not([unscrollin]) .scroll-bounceInLeft   { transform: translateX(-3rem); }
:not([unscrollin]) .scroll-bounceInRight  { transform: translateX(3rem); }

/* .is-scloaded */
:not([unscrollin]) :is(.scroll-bounceIn,
  .scroll-bounceInBottom,
  .scroll-bounceInTop,
  .scroll-bounceInLeft,
  .scroll-bounceInRight):where(.is-scloaded) {
  opacity: 1;
  transform: translate(0) scale(1);
}




/* §ブラーイン
────────────── ༚༶⊰⟡⊱༶༚༺*/
/* ベーススタイル */
:not([unscrollin]) :is(.scroll-blurIn,
  .scroll-blurInBottom,
  .scroll-blurInTop,
  .scroll-blurInLeft,
  .scroll-blurInRight) {
  filter: blur(4px) opacity(0);
  /* trans: property | duration | easing | delay */
  transition: filter 1s var(--ease-out-cubic, ease-out) 0.25s,
              transform 1s var(--ease-out-cubic, ease-out) 0.25s;
}

:not([unscrollin]) .scroll-blurInBottom { transform: translateY(3rem); }
:not([unscrollin]) .scroll-blurInTop    { transform: translateY(-3rem); }
:not([unscrollin]) .scroll-blurInLeft   { transform: translateX(-3rem); }
:not([unscrollin]) .scroll-blurInRight  { transform: translateX(3rem); }

/* .is-scloaded */
:not([unscrollin]) :is(.scroll-blurIn,
  .scroll-blurInBottom,
  .scroll-blurInTop,
  .scroll-blurInLeft,
  .scroll-blurInRight):where(.is-scloaded) {
  filter: blur(0) opacity(1);
  transform: translate(0);
}




/* §背景色が変化
────────────── ༚༶⊰⟡⊱༶༚༺*/
/* ベーススタイル */
.scroll-bgFadeIn,
.scroll-bgInBottom,
.scroll-bgInLeft,
.scroll-bgOpenIn {
  position: relative;
  z-index: 1;
}

:not([unscrollin]) :is(.scroll-bgFadeIn,
  .scroll-bgInBottom,
  .scroll-bgInLeft,
  .scroll-bgOpenIn)::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: var(--c-secondary-200, hsl(224, 25%, 53%));
  /* trans: property | duration | easing | delay */
  transition: opacity 1s var(--ease-out-cubic, ease-out) 0.25s,
              transform 1s var(--ease-out-cubic, ease-out) 0.25s;
}

/* 背景色：フェードイン */
:not([unscrollin]) .scroll-bgFadeIn::before {
  opacity: 0;
}

/* 背景色：下から */
:not([unscrollin]) .scroll-bgInBottom::before {
  transform-origin: 0% 100%;
  transform: scaleY(0);
}

/* 背景色：左から */
:not([unscrollin]) .scroll-bgInLeft::before {
  transform-origin: 0% 50%;
  transform: scaleX(0);
}

/* 背景色：中央から */
:not([unscrollin]) .scroll-bgOpenIn::before {
  transform-origin: 50% 50%;
  transform: scaleX(0);
}

/* .is-scloaded */
:not([unscrollin]) :is(.scroll-bgFadeIn,
  .scroll-bgInBottom,
  .scroll-bgInLeft,
  .scroll-bgOpenIn):where(.is-scloaded)::before {
  opacity: 1;
  transform: scale(1);
}




/* §ムーブイン
────────────── ༚༶⊰⟡⊱༶༚༺*/
/* ベーススタイル */
:not([unscrollin]) :is(.scroll-moveInBottom,
  .scroll-moveInTop,
  .scroll-moveInLeft,
  .scroll-moveInRight) {
  /* trans: property | duration | easing | delay */
  transition: transform 1s var(--ease-out-cubic, ease-out) 0.25s;
}

:not([unscrollin]) .scroll-moveInBottom { transform: translateY(0.3em); }
:not([unscrollin]) .scroll-moveInTop    { transform: translateY(-0.3em); }
:not([unscrollin]) .scroll-moveInLeft   { transform: translateX(-0.3em); }
:not([unscrollin]) .scroll-moveInRight  { transform: translateX(0.3em); }

/* .is-scloaded */
:not([unscrollin]) :is(.scroll-moveInBottom,
  .scroll-moveInTop,
  .scroll-moveInLeft,
  .scroll-moveInRight):where(.is-scloaded) {
  transform: translate(0);
}




/* §クリップイン
────────────── ༚༶⊰⟡⊱༶༚༺*/
/* ベーススタイル */
.scroll-clipInBottom,
.scroll-clipInLeft,
.scroll-clipInRight,
.scroll-clipInBottomLeft,
.scroll-clipInBottomRight {
  position: relative;
  display: inline-block;
}

:not([unscrollin]) :is(.scroll-clipInBottom,
  .scroll-clipInLeft,
  .scroll-clipInRight,
  .scroll-clipInBottomLeft,
  .scroll-clipInBottomRight) {
  /* trans: property | duration | easing | delay */
  transition: clip-path 1s var(--ease-out-cubic, ease-out) 0.25s;
}

/* クリップイン：下から上 */
:not([unscrollin]) .scroll-clipInBottom {
  clip-path: inset(100% 0% 0% 0%);
}

/* クリップイン：左から右 */
:not([unscrollin]) .scroll-clipInLeft {
  clip-path: inset(0% 100% 0% 0%);
}

/* クリップイン：右から左 */
:not([unscrollin]) .scroll-clipInRight {
  clip-path: inset(0% 0% 0% 100%);
}

/* .is-scloaded */
:not([unscrollin]) :is(.scroll-clipInBottom,
  .scroll-clipInLeft,
  .scroll-clipInRight):where(.is-scloaded) {
  clip-path: inset(0);
}

/* クリップイン：左下から右上 */
:not([unscrollin]) .scroll-clipInBottomLeft {
  clip-path: polygon(-100% 50%, 50% 200%, 50% 200%, -100% 50%);
}

/* クリップイン：右下から左上 */
:not([unscrollin]) .scroll-clipInBottomRight {
  clip-path: polygon(200% 50%, 200% 50%, 50% 200%, 50% 200%);
}

/* .is-scloaded */
:not([unscrollin]) :is(.scroll-clipInBottomLeft,
  .scroll-clipInBottomRight):where(.is-scloaded) {
  clip-path: polygon(50% -100%, 200% 50%, 50% 200%, -100% 50%);
}




/* §幕がかかってから消える
────────────── ༚༶⊰⟡⊱༶༚༺*/
/* ベーススタイル */
.scroll-coatInBottomOut,
.scroll-coatInLeftOut,
.scroll-coatInRightOut {
  position: relative;
  display: inline-block;
  overflow: clip;
  opacity: 0;
}

:not([unscrollin]) :is(.scroll-coatInBottomOut,
  .scroll-coatInLeftOut,
  .scroll-coatInRightOut) {
  /* trans: property | duration | easing | delay */
  transition: opacity 1s var(--ease-out-cubic, ease-out) 0.25s,
              transform 1s var(--ease-out-cubic, ease-out) 0.25s;
}

:is(.scroll-coatInBottomOut,
  .scroll-coatInLeftOut,
  .scroll-coatInRightOut)::after {
  content: "";
  position: absolute;
  z-index: 10;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background-color: var(--c-base-800, hsl(224, 6%, 23%));
}

:not([unscrollin]) :is(.scroll-coatInBottomOut,
  .scroll-coatInLeftOut,
  .scroll-coatInRightOut)::after {
  /* trans: property | duration | easing | delay */
  transition: transform 1s var(--ease-out-cubic, ease-out) 0.25s;
}

/* 幕：下から上 */
:not([unscrollin]) .scroll-coatInBottomOut {
  transform: translateY(100%);
}

:not([unscrollin]) .scroll-coatInBottomOut::after {
  transform-origin: 50% 0%;
  transform: scale(1);
}

/* 幕：左から右 */
:not([unscrollin]) .scroll-coatInLeftOut {
  transform: translateX(-100%);
}

:not([unscrollin]) .scroll-coatInLeftOut::after {
  transform-origin: 100% 50%;
  transform: scale(1);
}

/* 幕：右から左 */
:not([unscrollin]) .scroll-coatInRightOut {
  transform: translateX(100%);
}

:not([unscrollin]) .scroll-coatInRightOut::after {
  transform-origin: 0% 50%;
  transform: scale(1);
}

/* .is-scloaded */
:not([unscrollin]) :is(.scroll-coatInBottomOut,
  .scroll-coatInLeftOut,
  .scroll-coatInRightOut):where(.is-scloaded) {
  opacity: 1;
  transform: translate(0);
}

:not([unscrollin]) .scroll-coatInBottomOut:where(.is-scloaded)::after {
  transform: scaleY(0);
}

:not([unscrollin]) :is(.scroll-coatInLeftOut,
  .scroll-coatInRightOut):where(.is-scloaded)::after {
  transform: scaleX(0);
}




/* §幕がかかってから消える（斜め）
────────────── ༚༶⊰⟡⊱༶༚༺*/
/* ベーススタイル */
.scroll-coatInBottomLeftOut,
.scroll-coatInBottomRightOut {
  position: relative;
  display: inline-block;
  overflow: clip;
  opacity: 0;
}

:not([unscrollin]) :is(.scroll-coatInBottomLeftOut,
  .scroll-coatInBottomRightOut) {
  /* trans: property | duration | easing | delay */
  transition: opacity 1s var(--ease-out-cubic, ease-out) 0.25s,
              clip-path 1s var(--ease-out-cubic, ease-out) 0.25s;
}

:is(.scroll-coatInBottomLeftOut,
  .scroll-coatInBottomRightOut)::after {
  content: "";
  position: absolute;
  z-index: 10;
  width: 141.4%;
  height: 141.4%;
  background-color: var(--c-base-800, hsl(224, 6%, 23%));
}

:not([unscrollin]) :is(.scroll-coatInBottomLeftOut,
  .scroll-coatInBottomRightOut)::after {
  /* trans: property | duration | easing | delay */
  transition: transform 1s var(--ease-out-cubic, ease-out) 0.25s;
}

/* 幕：左下から右上 */
:not([unscrollin]) .scroll-coatInBottomLeftOut {
  clip-path: polygon(-100% 50%, 50% 200%, 50% 200%, -100% 50%);
}

:not([unscrollin]) .scroll-coatInBottomLeftOut::after {
  top: 0;
  left: 50%;
  transform-origin: 100% 0%;
  transform: rotateZ(45deg) scale(2.414);
}

/* 幕：右下から左上 */
:not([unscrollin]) .scroll-coatInBottomRightOut {
  clip-path: polygon(200% 50%, 200% 50%, 50% 200%, 50% 200%);
}

:not([unscrollin]) .scroll-coatInBottomRightOut::after {
  top: 0;
  right: 50%;
  transform-origin: 0% 0%;
  transform: rotateZ(-45deg) scale(2.414);
}

/* .is-scloaded */
:not([unscrollin]) :is(.scroll-coatInBottomLeftOut,
  .scroll-coatInBottomRightOut):where(.is-scloaded) {
  opacity: 1;
  clip-path: polygon(50% -100%, 200% 50%, 50% 200%, -100% 50%);
}

:not([unscrollin]) .scroll-coatInBottomLeftOut:where(.is-scloaded)::after {
  transform: rotateZ(45deg) scale(0);
}

:not([unscrollin]) .scroll-coatInBottomRightOut:where(.is-scloaded)::after {
  transform: rotateZ(-45deg) scale(0);
}




/* §幕が消える
────────────── ༚༶⊰⟡⊱༶༚༺*/
/* ベーススタイル */
.scroll-coatFadeOut,
.scroll-coatOutTop,
.scroll-coatOutBottom,
.scroll-coatOutLeft,
.scroll-coatOutRight {
  position: relative;
  overflow: clip;
}

:is(.scroll-coatFadeOut,
  .scroll-coatOutTop,
  .scroll-coatOutBottom,
  .scroll-coatOutLeft,
  .scroll-coatOutRight)::after {
  content: "";
  position: absolute;
  z-index: 10;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background-color: var(--c-base-800, hsl(224, 6%, 23%));
}

:not([unscrollin]) :is(.scroll-coatFadeOut,
  .scroll-coatOutTop,
  .scroll-coatOutBottom,
  .scroll-coatOutLeft,
  .scroll-coatOutRight)::after {
  /* trans: property | duration | easing | delay */
  transition: opacity 1s var(--ease-out-cubic, ease-out) 0.25s,
              transform 1s var(--ease-out-cubic, ease-out) 0.25s;
}

/* 幕消去：上へ消える */
.scroll-coatOutTop::after    { transform-origin: 50% 0%; }
/* 幕消去：下へ消える */
.scroll-coatOutBottom::after { transform-origin: 0% 100%; }
/* 幕消去：左へ消える */
.scroll-coatOutLeft::after   { transform-origin: 0% 50%; }
/* 幕消去：右へ消える */
.scroll-coatOutRight::after  { transform-origin: 100% 50%; }

/* .is-scloaded */
:not([unscrollin]) .scroll-coatFadeOut:where(.is-scloaded)::after {
  opacity: 0;
}

:not([unscrollin]) :is(.scroll-coatOutTop,
  .scroll-coatOutBottom):where(.is-scloaded)::after {
  transform: scaleY(0);
}

:not([unscrollin]) :is(.scroll-coatOutLeft,
  .scroll-coatOutRight):where(.is-scloaded)::after {
  transform: scaleX(0);
}




/* §ブラーが消える
────────────── ༚༶⊰⟡⊱༶༚༺*/
/* ベーススタイル */
.scroll-blurFadeOut,
.scroll-blurOutTop,
.scroll-blurOutBottom,
.scroll-blurOutLeft,
.scroll-blurOutRight {
  position: relative;
}

:is(.scroll-blurFadeOut,
  .scroll-blurOutTop,
  .scroll-blurOutBottom,
  .scroll-blurOutLeft,
  .scroll-blurOutRight)::after {
  content: "";
  position: absolute;
  z-index: 10;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
}

:not([unscrollin]) :is(.scroll-blurFadeOut,
  .scroll-blurOutTop,
  .scroll-blurOutBottom,
  .scroll-blurOutLeft,
  .scroll-blurOutRight)::after {
  /* trans: property | duration | easing | delay */
  transition: opacity 1s var(--ease-out-cubic, ease-out) 0.25s,
              transform 1s var(--ease-out-cubic, ease-out) 0.25s;
}

/* ブラー消去：上へ消える */
.scroll-blurOutTop::after    { transform-origin: 50% 0%; }
/* ブラー消去：下へ消える */
.scroll-blurOutBottom::after { transform-origin: 0% 100%; }
/* ブラー消去：左へ消える */
.scroll-blurOutLeft::after   { transform-origin: 0% 50%; }
/* ブラー消去：右へ消える */
.scroll-blurOutRight::after  { transform-origin: 100% 50%; }

/* .is-scloaded */
:not([unscrollin]) .scroll-blurFadeOut:where(.is-scloaded)::after {
  opacity: 0;
}

:not([unscrollin]) :is(.scroll-blurOutTop,
  .scroll-blurOutBottom):where(.is-scloaded)::after {
  transform: scaleY(0);
}

:not([unscrollin]) :is(.scroll-blurOutLeft,
  .scroll-blurOutRight):where(.is-scloaded)::after {
  transform: scaleX(0);
}




/* §グラデーションマスク
────────────── ༚༶⊰⟡⊱༶༚༺*/
.scroll-mirageInBottom,
.scroll-mirageInTop,
.scroll-mirageInRight,
.scroll-mirageInLeft {
  position: relative;
}

:not([unscrollin]) :is(.scroll-mirageInBottom,
  .scroll-mirageInTop,
  .scroll-mirageInRight,
  .scroll-mirageInLeft) {
  /* trans: property | duration | easing | delay */
  transition: -webkit-mask-position 1s var(--ease-out-cubic, ease-out) 0.25s,
              mask-position 1s var(--ease-out-cubic, ease-out) 0.25s;
}

/* 下から上へ消える */
.scroll-mirageInBottom {
  -webkit-mask: no-repeat 50% -100%;
  mask: no-repeat 50% 200%;
  -webkit-mask-image: linear-gradient(to Bottom, rgba(0, 0, 0, 0) 0%, black 50%, black 100%);
  mask-image: linear-gradient(to Bottom, rgba(0, 0, 0, 0) 0%, black 50%, black 100%);
  -webkit-mask-size: 100% 200%;
  mask-size: 100% 200%;
  -webkit-mask-position: 50% -100%;
  mask-position: 50% -100%;
}

/* 上から下へ消える */
.scroll-mirageInTop {
  -webkit-mask: no-repeat 50% 200%;
  mask: no-repeat 50% 200%;
  -webkit-mask-image: linear-gradient(to Top, rgba(0, 0, 0, 0) 0%, black 50%, black 100%);
  mask-image: linear-gradient(to Top, rgba(0, 0, 0, 0) 0%, black 50%, black 100%);
  -webkit-mask-size: 100% 200%;
  mask-size: 100% 200%;
  -webkit-mask-position: 50% 200%;
  mask-position: 50% 200%;
}

/* 右から左へ消える */
.scroll-mirageInRight {
  -webkit-mask: no-repeat -100% 50%;
  mask: no-repeat -100% 50%;
  -webkit-mask-image: linear-gradient(to Right, rgba(0, 0, 0, 0) 0%, black 50%, black 100%);
  mask-image: linear-gradient(to Right, rgba(0, 0, 0, 0) 0%, black 50%, black 100%);
  -webkit-mask-size: 200% 100%;
  mask-size: 200% 100%;
  -webkit-mask-position: -100% 50%;
  mask-position: -100% 50%;
}

/* 左から右へ消える */
.scroll-mirageInLeft {
  -webkit-mask: no-repeat 200% 50%;
  mask: no-repeat 200% 50%;
  -webkit-mask-image: linear-gradient(to Left, rgba(0, 0, 0, 0) 0%, black 50%, black 100%);
  mask-image: linear-gradient(to Left, rgba(0, 0, 0, 0) 0%, black 50%, black 100%);
  -webkit-mask-size: 200% 100%;
  mask-size: 200% 100%;
  -webkit-mask-position: 200% 50%;
  mask-position: 200% 50%;
}

/* .is-scloaded */
:not([unscrollin]) .scroll-mirageInBottom:where(.is-scloaded) {
  -webkit-mask-position: 50% 100%;
  mask-position: 50% 100%;
}

:not([unscrollin]) .scroll-mirageInTop:where(.is-scloaded) {
  -webkit-mask-position: 50% 0%;
  mask-position: 50% 0%;
}

:not([unscrollin]) .scroll-mirageInRight:where(.is-scloaded) {
  -webkit-mask-position: 100% 50%;
  mask-position: 100% 50%;
}

:not([unscrollin]) .scroll-mirageInLeft:where(.is-scloaded) {
  -webkit-mask-position: 0% 50%;
  mask-position: 0% 50%;
}




/* §縮小、拡大しながらイン・アウト
────────────── ༚༶⊰⟡⊱༶༚༺*/
/* ベーススタイル */
:not([unscrollin]) :is(.scroll-growIn,
  .scroll-growOut,
  .scroll-shrinkIn,
  .scroll-shrinkOut) {
  /* trans: property | duration | easing | delay */
  transition: opacity 1s var(--ease-out-cubic, ease-out) 0.25s,
              transform 1s var(--ease-out-cubic, ease-out) 0.25s;
}

:not([unscrollin]) .scroll-growIn   { transform: scale(0.01); }
:not([unscrollin]) .scroll-growOut  { transform: scale(1); }
:not([unscrollin]) .scroll-shrinkIn { transform: scale(1.1); }
:not([unscrollin]) .scroll-shrinkOut { transform: scale(1); }

/* .is-scloaded */
:not([unscrollin]) .scroll-growIn:where(.is-scloaded)   { transform: scale(1); }
:not([unscrollin]) .scroll-growOut:where(.is-scloaded)  { opacity: 0; transform: scale(1.1); }
:not([unscrollin]) .scroll-shrinkIn:where(.is-scloaded) { transform: scale(1); }
:not([unscrollin]) .scroll-shrinkOut:where(.is-scloaded){ opacity: 0; transform: scale(0); }




/* §ワイプイン（透明→不透明）
────────────── ༚༶⊰⟡⊱༶༚༺*/
/* ベーススタイル */
:not([unscrollin]) :is(.scroll-wipeInCentral,
  .scroll-wipeInBottom,
  .scroll-wipeInTop,
  .scroll-wipeInLeft,
  .scroll-wipeInRight) {
  /* trans: property | duration | easing | delay */
  transition: clip-path 1s var(--ease-out-cubic, ease-out) 0.25s;
}

/* ワイプイン：中央から */
:not([unscrollin]) .scroll-wipeInCentral { clip-path: circle(0% at 50% 50%); }
/* ワイプイン：下から */
:not([unscrollin]) .scroll-wipeInBottom  { clip-path: inset(100% 0% 0% 0%); }
/* ワイプイン：上から */
:not([unscrollin]) .scroll-wipeInTop     { clip-path: inset(0% 0% 100% 0%); }
/* ワイプイン：左から */
:not([unscrollin]) .scroll-wipeInLeft    { clip-path: inset(0% 100% 0% 0%); }
/* ワイプイン：右から */
:not([unscrollin]) .scroll-wipeInRight   { clip-path: inset(0% 0% 0% 100%); }

/* .is-scloaded */
:not([unscrollin]) .scroll-wipeInCentral:where(.is-scloaded) {
  clip-path: circle(100% at 50% 50%);
}

:not([unscrollin]) :is(.scroll-wipeInBottom,
  .scroll-wipeInTop,
  .scroll-wipeInLeft,
  .scroll-wipeInRight):where(.is-scloaded) {
  clip-path: inset(-999px);
}




/* §フリップイン
────────────── ༚༶⊰⟡⊱༶༚༺*/
/* ベーススタイル */
:not([unscrollin]) :is(.scroll-flipInXUp,
  .scroll-flipInXDown,
  .scroll-flipInYFore,
  .scroll-flipInYBack) {
  /* trans: property | duration | easing | delay */
  transition: transform 1s var(--ease-out-cubic, ease-out) 0.25s;
}

/* フリップイン：X軸 */
:not([unscrollin]) .scroll-flipInXUp,
:not([unscrollin]) .scroll-flipInXDown {
  transform: rotateX(90deg);
}

:not([unscrollin]) .scroll-flipInXUp:where(.is-scloaded)   { transform: rotateX(180deg); }
:not([unscrollin]) .scroll-flipInXDown:where(.is-scloaded) { transform: rotateX(0deg); }

/* フリップイン：Y軸 */
:not([unscrollin]) .scroll-flipInYFore,
:not([unscrollin]) .scroll-flipInYBack {
  transform: rotateY(90deg);
}

:not([unscrollin]) .scroll-flipInYFore:where(.is-scloaded) { transform: rotateY(0deg); }
:not([unscrollin]) .scroll-flipInYBack:where(.is-scloaded) { transform: rotateY(180deg); }




/* §回転  ※ infinite animation → 変更なし
────────────── ༚༶⊰⟡⊱༶༚༺*/
/* ベーススタイル */
:is(.scroll-rotationDext,
  .scroll-rotationLevo) {
  /* anime: name | duration | easing | delay */
  animation: none 5.5s linear 0.25s;
  animation-iteration-count: infinite;
}

/* 順回り */
@keyframes scrollRotationDext {

  0%,
  100% {
    transform: rotateZ(0deg);
  }

  100% {
    transform: rotateZ(359deg);
  }
}

.scroll-rotationDext.is-scloaded,
.scroll-clockationDext.is-scloaded {
  animation-name: scrollRotationDext;
}

/* 逆回り */
@keyframes scrollRotationLevo {

  0%,
  100% {
    transform: rotateZ(0deg);
  }

  100% {
    transform: rotateZ(-359deg);
  }
}

.scroll-rotationLevo.is-scloaded,
.scroll-clockationLevo.is-scloaded {
  animation-name: scrollRotationLevo;
}

/* 無限アニメは画面内のときだけ再生 */
:is(.scroll-rotationDext,
  .scroll-rotationLevo).is-scloaded:not(.is-inview) {
  animation-play-state: paused;
}

@media (prefers-reduced-motion: reduce) {

  :is(.scroll-rotationDext,
    .scroll-rotationLevo) {
    animation: none !important;
  }
}


/*༻§𝐒𝐄𝐂𝐓𝐈𝐎𝐍༺──────────────
//floating / swaying（ふわふわ浮遊の無限ループ：上下 / 左右）
────────────── ༚༶⊰⟡⊱༶༚༺*/
:is(.scroll-floating,
  .scroll-swaying) {
  /* anime: name | duration | easing | delay */
  animation: none 3s ease-in-out 0.25s;
  animation-iteration-count: infinite;
}

/* 上下（浮き上がって戻る） */
@keyframes scrollFloating {

  0%,
  100% { transform: translateY(0); }
  50% { transform: translateY(-0.75rem); }
}

.scroll-floating.is-scloaded {
  animation-name: scrollFloating;
}

/* 左右（右に揺れて戻る） */
@keyframes scrollSwaying {

  0%,
  100% { transform: translateX(0); }
  50% { transform: translateX(0.75rem); }
}

.scroll-swaying.is-scloaded {
  animation-name: scrollSwaying;
}

/* 画面外に出ている間は一時停止 */
:is(.scroll-floating,
  .scroll-swaying).is-scloaded:not(.is-inview) {
  animation-play-state: paused;
}

@media (prefers-reduced-motion: reduce) {

  :is(.scroll-floating,
    .scroll-swaying) {
    animation: none !important;
  }
}




/* §時計の針回転  ※ infinite animation → 変更なし
────────────── ༚༶⊰⟡⊱༶༚༺*/
/* ベーススタイル */
:is(.scroll-clockationDext,
  .scroll-clockationLevo) {
  /* anime: name | duration | easing | delay */
  animation: none 5.5s linear 0.25s;
  animation-iteration-count: infinite;
}

.clocker {
  display: inline-block;
}

/* 中心の軸となる部分 */
.clocker .clocker-pinion {
  position: relative;
  width: 100%;
  height: 100%;
}

/* 1時から12時までの回転角度 */
.clocker .clocker-pinion.oclock-1  { -webkit-transform: rotateZ(30deg);  transform: rotateZ(30deg); }
.clocker .clocker-pinion.oclock-2  { -webkit-transform: rotateZ(60deg);  transform: rotateZ(60deg); }
.clocker .clocker-pinion.oclock-3  { -webkit-transform: rotateZ(90deg);  transform: rotateZ(90deg); }
.clocker .clocker-pinion.oclock-4  { -webkit-transform: rotateZ(120deg); transform: rotateZ(120deg); }
.clocker .clocker-pinion.oclock-5  { -webkit-transform: rotateZ(150deg); transform: rotateZ(150deg); }
.clocker .clocker-pinion.oclock-6  { -webkit-transform: rotateZ(180deg); transform: rotateZ(180deg); }
.clocker .clocker-pinion.oclock-7  { -webkit-transform: rotateZ(210deg); transform: rotateZ(210deg); }
.clocker .clocker-pinion.oclock-8  { -webkit-transform: rotateZ(240deg); transform: rotateZ(240deg); }
.clocker .clocker-pinion.oclock-9  { -webkit-transform: rotateZ(270deg); transform: rotateZ(270deg); }
.clocker .clocker-pinion.oclock-10 { -webkit-transform: rotateZ(300deg); transform: rotateZ(300deg); }
.clocker .clocker-pinion.oclock-11 { -webkit-transform: rotateZ(330deg); transform: rotateZ(330deg); }
.clocker .clocker-pinion.oclock-12 { -webkit-transform: rotateZ(360deg); transform: rotateZ(360deg); }

.clocker :is(img.clocker-minutehand,
  img.clocker-hourhand) {
  position: absolute;
  bottom: 50%;
  left: calc(50% - 2.5%);
  width: 5%;
  height: auto;
  object-fit: contain;
}

.scroll-clockationDext,
.scroll-clockationLevo {
  transform-origin: 0% 100%;
}

/* 無限アニメは画面内のときだけ再生 */
:is(.scroll-clockationDext,
  .scroll-clockationLevo).is-scloaded:not(.is-inview) {
  animation-play-state: paused;
}

@media (prefers-reduced-motion: reduce) {

  :is(.scroll-clockationDext,
    .scroll-clockationLevo) {
    animation: none !important;
  }
}




/* §円グラフ  ※ stroke-dasharray animation → 変更なし
────────────── ༚༶⊰⟡⊱༶༚༺-*/
.chart-donut {
  position: relative;
  display: inline-block;
  width: 200px;
  height: 200px;
}

.chart-donut .chart-wrapper {
  position: relative;
  width: 100%;
  height: 100%;
}

.chart-donut .chart-wrapper::after {
  content: '';
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 0 1rem 2.5rem 1rem;
  border-color: transparent transparent hsl(220, 71%, 28%) transparent;
  position: absolute;
  z-index: 20;
  bottom: 16%;
  left: 6%;
  transform: rotate(-120deg);
  transform-origin: bottom center;
}

.chart-donut svg {
  position: absolute;
  z-index: 10;
  top: 0px;
  bottom: 0px;
  left: 0px;
  right: 0px;
  margin: auto;
  width: 100%;
  height: 100%;
  transform: rotate(-90deg);
  overflow: visible !important;
}

.chart-donut svg circle {
  position: relative;
  fill: none;
  stroke-width: 1.5rem;
  stroke: #f3f3f3;
  /* scroll-chartationDonut x 3.142 */
  stroke-dasharray: calc(100% * 3.142);
  stroke-dashoffset: 0;
  stroke-linecap: butt;
}

.chart-donut .chart-central {
  position: absolute;
  z-index: 30;
  top: 0px;
  bottom: 0px;
  left: 0px;
  right: 0px;
  margin: auto;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

/* 見出し（h1, h2, h3, h4, h5, h6） */
.chart-donut .chart-central :is(h1, h2, h3, h4, h5, h6) {
  width: auto;
}

/* scroll-chartation（ベーススタイル） */
.scroll-chartation .chartbar-thumb {
  /* anime: name | duration | easing | delay */
  animation: none 1s linear 0.25s;
  animation-fill-mode: forwards;
}

.chart-donut.scroll-chartation .chartbar-thumb {
  stroke: hsl(220, 71%, 28%);
  stroke-dasharray: 0 calc(100% * 3.142);
}

@keyframes scrollChartationDonut {

  99%,
  to {
    stroke-dasharray: calc(100% * 3.142) calc(100% * 3.142);
  }
}

/* .is-scloaded */
.chart-donut.scroll-chartation.is-scloaded .chartbar-thumb {
  animation-name: scrollChartationDonut;
}




/* §カウントアップ（数値補間アニメーション）
────────────── ༚༶⊰⟡⊱༶༚༺*/
/* scroll-countation（ベーススタイル）
- JS で data-count から目標値を解析し、初期表示を 0 / 00... に置換
- is-scloaded 付与で JS が数値を補間（ease-out cubic）
- 数字幅の揺れ防止に tabular-nums を有効化（対応フォントのみ） */
.scroll-countation {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum";
}




/* §ループ（単一トラックを translate するマーキー）  ※ infinite animation → 変更なし
────────────── ༚༶⊰⟡⊱༶༚༺*/
/* ビューポート：要素自身でクリップ（外側ラッパー不要） */
.scroll-looptationToUp,
.scroll-looptationToDown,
.scroll-looptationToFore,
.scroll-looptationToBack {
  overflow: hidden;
}

.scroll-looptationToUp,
.scroll-looptationToDown {
  height: 100%;
  max-height: 100vh;
}

/* トラック：複製2本を内包し、ここだけを動かす */
:is(.scroll-looptationToUp,
  .scroll-looptationToDown,
  .scroll-looptationToFore,
  .scroll-looptationToBack) .scroll-inner {
  display: flex;
  flex-wrap: nowrap;
  /* anime: name | duration | easing */
  animation: none 1s linear;
  animation-iteration-count: infinite;
}

:is(.scroll-looptationToFore,
  .scroll-looptationToBack) .scroll-inner {
  flex-direction: row;
  width: max-content;
}

:is(.scroll-looptationToUp,
  .scroll-looptationToDown) .scroll-inner {
  flex-direction: column;
  width: 100%;
  height: max-content;
}

/* アニメーションキーフレーム定義 */
@keyframes scrollLooptationX {
  to {
    transform: translateX(-50%);
  }
}

@keyframes scrollLooptationY {
  to {
    transform: translateY(-50%);
  }
}

/* .is-scloaded（逆方向は reverse） */
:is(.scroll-looptationToFore,
  .scroll-looptationToBack).is-scloaded .scroll-inner {
  animation-name: scrollLooptationX;
}

:is(.scroll-looptationToUp,
  .scroll-looptationToDown).is-scloaded .scroll-inner {
  animation-name: scrollLooptationY;
}

:is(.scroll-looptationToBack,
  .scroll-looptationToDown).is-scloaded .scroll-inner {
  animation-direction: reverse;
}

/* 無限アニメは画面内のときだけ再生 */
:is(.scroll-looptationToUp,
  .scroll-looptationToDown,
  .scroll-looptationToFore,
  .scroll-looptationToBack).is-scloaded:not(.is-inview) .scroll-inner {
  animation-play-state: paused;
}

@media (prefers-reduced-motion: reduce) {

  :is(.scroll-looptationToUp,
    .scroll-looptationToDown,
    .scroll-looptationToFore,
    .scroll-looptationToBack).is-scloaded:not(.is-inview) .scroll-inner {
    animation: none !important;
  }
}




/* §.infinited（無限化）  ※ animation → 変更なし
────────────── ༚༶⊰⟡⊱༶༚༺*/
[class*="scroll-"].infinited.is-scloaded {
  animation-iteration-count: infinite;
}

/* 無限アニメは画面内のときだけ再生 */
[class*="scroll-"].infinited.is-scloaded:not(.is-inview) {
  animation-play-state: paused;
}

@media (prefers-reduced-motion: reduce) {

  [class*="scroll-"].infinited {
    animation: none !important;
  }
}




/* §アクセシビリティ：動きを減らす設定では、全 scroll 系を最終表示状態に固定
────────────── ༚༶⊰⟡⊱༶༚༺*/
@media (prefers-reduced-motion: reduce) {

	/* 要素自身：アニメ・トランジション停止＋隠し状態を打ち消して最終状態へ */
	[class*="scroll-"] {
		animation: none !important;
		transition: none !important;
		opacity: 1 !important;
		filter: none !important;
		-webkit-backdrop-filter: none !important;
		backdrop-filter: none !important;
		transform: none !important;
		-webkit-clip-path: none !important;
		clip-path: none !important;
		-webkit-mask: none !important;
		mask: none !important;
	}

	/* 背景色レイヤー（bg* の ::before）は最終状態で見せる */
	[class*="scroll-"]::before {
		animation: none !important;
		transition: none !important;
		opacity: 1 !important;
		transform: none !important;
	}

	/* 幕（coat / blurOut の ::after）は消して中身を見せる */
	[class*="scroll-"]::after {
		animation: none !important;
		transition: none !important;
		opacity: 0 !important;
	}
}




/* §印刷時（スクロール演出は印刷では最終表示状態に固定し、アニメ・トランジションは流さない）
────────────── ༚༶⊰⟡⊱༶༚༺*/
@media print {
  [class*="scroll-"] {
    animation: none !important;
    transition: none !important;
    opacity: 1 !important;
    filter: none !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
    transform: none !important;
    -webkit-clip-path: none !important;
    clip-path: none !important;
  }

  /* coat / bg などのオーバーレイ擬似要素も無効化 */
  [class*="scroll-"]::before,
  [class*="scroll-"]::after {
    animation: none !important;
    transition: none !important;
  }
}




//scroll-target（SCSS）
//────────────── ༚༶⊰⟡⊱༶༚༺
$scroll-target-class: '[class*="scroll-fadeIn"], [class*="scroll-bounceIn"], [class*="scroll-blurIn"], [class*="scroll-moveIn"], [class*="scroll-clipIn"], [class*="scroll-coatIn"], [class*="scroll-mirageIn"], [class*="scroll-grow"], [class*="scroll-shrink"], [class*="scroll-wipeIn"], [class*="scroll-flipIn"], [class*="scroll-rotation"], [class*="scroll-clockation"], [class*="scroll-floating"], [class*="scroll-swaying"]';

//scroll-target child
$scroll-target-child: '[class*="scroll-chartation"], [class*="scroll-looptation"]';
$target-child: '.chartbar-thumb, .scroll-inner';

//scroll-target::before
$scroll-target-before: '[class*="scroll-bg"]';

//scroll-target::after
$scroll-target-after: '[class*="scroll-coat"], [class*="scroll-blurFadeOut"], [class*="scroll-blurOut"]';




/* §.delayed（遅延）
────────────── ༚༶⊰⟡⊱༶༚༺*/
.delayed-0:is(#{$scroll-target-class}),
.delayed-0:is(#{$scroll-target-child}) :is(#{$target-child}),
.delayed-0:is(#{$scroll-target-before})::before,
.delayed-0:is(#{$scroll-target-after})::after {
  animation-delay: 0s;
  transition-delay: 0s;
}

.delayed-1:is(#{$scroll-target-class}),
.delayed-1:is(#{$scroll-target-child}) :is(#{$target-child}),
.delayed-1:is(#{$scroll-target-before})::before,
.delayed-1:is(#{$scroll-target-after})::after {
  animation-delay: 0.25s;
  transition-delay: 0.25s;
}

.delayed-2:is(#{$scroll-target-class}),
.delayed-2:is(#{$scroll-target-child}) :is(#{$target-child}),
.delayed-2:is(#{$scroll-target-before})::before,
.delayed-2:is(#{$scroll-target-after})::after {
  animation-delay: 0.5s;
  transition-delay: 0.5s;
}

.delayed-3:is(#{$scroll-target-class}),
.delayed-3:is(#{$scroll-target-child}) :is(#{$target-child}),
.delayed-3:is(#{$scroll-target-before})::before,
.delayed-3:is(#{$scroll-target-after})::after {
  animation-delay: 0.75s;
  transition-delay: 0.75s;
}

.delayed-4:is(#{$scroll-target-class}),
.delayed-4:is(#{$scroll-target-child}) :is(#{$target-child}),
.delayed-4:is(#{$scroll-target-before})::before,
.delayed-4:is(#{$scroll-target-after})::after {
  animation-delay: 1s;
  transition-delay: 1s;
}

.delayed-5:is(#{$scroll-target-class}),
.delayed-5:is(#{$scroll-target-child}) :is(#{$target-child}),
.delayed-5:is(#{$scroll-target-before})::before,
.delayed-5:is(#{$scroll-target-after})::after {
  animation-delay: 1.25s;
  transition-delay: 1.25s;
}

.delayed-6:is(#{$scroll-target-class}),
.delayed-6:is(#{$scroll-target-child}) :is(#{$target-child}),
.delayed-6:is(#{$scroll-target-before})::before,
.delayed-6:is(#{$scroll-target-after})::after {
  animation-delay: 1.5s;
  transition-delay: 1.5s;
}




/* §.fasted（duration=速く）
────────────── ༚༶⊰⟡⊱༶༚༺*/
.fasted-1:is(#{$scroll-target-class}),
.fasted-1:is(#{$scroll-target-child}) :is(#{$target-child}),
.fasted-1:is(#{$scroll-target-before})::before,
.fasted-1:is(#{$scroll-target-after})::after {
  animation-duration: 0.75s;
  transition-duration: 0.75s;
}

.fasted-2:is(#{$scroll-target-class}),
.fasted-2:is(#{$scroll-target-child}) :is(#{$target-child}),
.fasted-2:is(#{$scroll-target-before})::before,
.fasted-2:is(#{$scroll-target-after})::after {
  animation-duration: 0.5s;
  transition-duration: 0.5s;
}

.fasted-3:is(#{$scroll-target-class}),
.fasted-3:is(#{$scroll-target-child}) :is(#{$target-child}),
.fasted-3:is(#{$scroll-target-before})::before,
.fasted-3:is(#{$scroll-target-after})::after {
  animation-duration: 0.25s;
  transition-duration: 0.25s;
}




/* §.slowed（duration=遅く）
────────────── ༚༶⊰⟡⊱༶༚༺*/
.slowed-1:is(#{$scroll-target-class}),
.slowed-1:is(#{$scroll-target-child}) :is(#{$target-child}),
.slowed-1:is(#{$scroll-target-before})::before,
.slowed-1:is(#{$scroll-target-after})::after {
  animation-duration: 1.5s;
  transition-duration: 1.5s;
}

.slowed-2:is(#{$scroll-target-class}),
.slowed-2:is(#{$scroll-target-child}) :is(#{$target-child}),
.slowed-2:is(#{$scroll-target-before})::before,
.slowed-2:is(#{$scroll-target-after})::after {
  animation-duration: 2s;
  transition-duration: 2s;
}

.slowed-3:is(#{$scroll-target-class}),
.slowed-3:is(#{$scroll-target-child}) :is(#{$target-child}),
.slowed-3:is(#{$scroll-target-before})::before,
.slowed-3:is(#{$scroll-target-after})::after {
  animation-duration: 3s;
  transition-duration: 3s;
}

.slowed-4:is(#{$scroll-target-class}),
.slowed-4:is(#{$scroll-target-child}) :is(#{$target-child}),
.slowed-4:is(#{$scroll-target-before})::before,
.slowed-4:is(#{$scroll-target-after})::after {
  animation-duration: 4s;
  transition-duration: 4s;
}

.slowed-5:is(#{$scroll-target-class}),
.slowed-5:is(#{$scroll-target-child}) :is(#{$target-child}),
.slowed-5:is(#{$scroll-target-before})::before,
.slowed-5:is(#{$scroll-target-after})::after {
  animation-duration: 5s;
  transition-duration: 5s;
}

.slowed-10:is(#{$scroll-target-class}),
.slowed-10:is(#{$scroll-target-child}) :is(#{$target-child}),
.slowed-10:is(#{$scroll-target-before})::before,
.slowed-10:is(#{$scroll-target-after})::after {
  animation-duration: 10s;
  transition-duration: 10s;
}

.slowed-20:is(#{$scroll-target-class}),
.slowed-20:is(#{$scroll-target-child}) :is(#{$target-child}),
.slowed-20:is(#{$scroll-target-before})::before,
.slowed-20:is(#{$scroll-target-after})::after {
  animation-duration: 20s;
  transition-duration: 20s;
}

.slowed-30:is(#{$scroll-target-class}),
.slowed-30:is(#{$scroll-target-child}) :is(#{$target-child}),
.slowed-30:is(#{$scroll-target-before})::before,
.slowed-30:is(#{$scroll-target-after})::after {
  animation-duration: 30s;
  transition-duration: 30s;
}

.slowed-60:is(#{$scroll-target-class}),
.slowed-60:is(#{$scroll-target-child}) :is(#{$target-child}),
.slowed-60:is(#{$scroll-target-before})::before,
.slowed-60:is(#{$scroll-target-after})::after {
  animation-duration: 60s;
  transition-duration: 60s;
}

.slowed-90:is(#{$scroll-target-class}),
.slowed-90:is(#{$scroll-target-child}) :is(#{$target-child}),
.slowed-90:is(#{$scroll-target-before})::before,
.slowed-90:is(#{$scroll-target-after})::after {
  animation-duration: 90s;
  transition-duration: 90s;
}

.slowed-120:is(#{$scroll-target-class}),
.slowed-120:is(#{$scroll-target-child}) :is(#{$target-child}),
.slowed-120:is(#{$scroll-target-before})::before,
.slowed-120:is(#{$scroll-target-after})::after {
  animation-duration: 120s;
  transition-duration: 120s;
}

.slowed-180:is(#{$scroll-target-class}),
.slowed-180:is(#{$scroll-target-child}) :is(#{$target-child}),
.slowed-180:is(#{$scroll-target-before})::before,
.slowed-180:is(#{$scroll-target-after})::after {
  animation-duration: 180s;
  transition-duration: 180s;
}