@charset "UTF-8";
/* ==========================================================================
   animation.css — ふわっとフェードイン共通アニメーション
   --------------------------------------------------------------------------
   ◆ 単体フェードイン
     .fadeIn         ... 純粋なフェードのみ(動きなし)
     .fadeIn-20      ... 下から 20px 上がりながらフェードイン
     .fadeIn-50      ... 下から 50px ↑
     .fadeIn-80      ... 下から 80px ↑
     .fadeIn-100     ... 下から 100px ↑

   ◆ 親→子 順次フェードイン
     .fadeInChildren ... 親に付与(viewport 入ったら .active が付く)
     .fadeInChild         ... 30px(デフォルト)
     .fadeInChild-20      ... 20px
     .fadeInChild-50      ... 50px
     .fadeInChild-80      ... 80px
     .fadeInChild-100     ... 100px

   ◆ オプション(data 属性)
     data-stagger="0.2" ... 子要素のスタッガー間隔(秒)。デフォ 0.15s
     data-delay="0.3"   ... 開始までのディレイ(秒)。単体・親 共通

   ◆ 動作
     animation.js が IntersectionObserver で viewport に入った要素に
     .active を付与します(再生は 1 度きり、戻ってきても再発火しない)。
   ========================================================================== */

:root {
  --fadeIn-duration: 1.2s;
  --fadeIn-easing: cubic-bezier(0.16, 1, 0.3, 1); /* easeOutExpo: ふわ〜 */
  --fadeIn-stagger: 0.15s;
}

/* ====== 単体 ====== */
.fadeIn,
.fadeIn-20,
.fadeIn-50,
.fadeIn-80,
.fadeIn-100 {
  opacity: 0;
  transition: opacity var(--fadeIn-duration) var(--fadeIn-easing),
              transform var(--fadeIn-duration) var(--fadeIn-easing);
  will-change: opacity, transform;
}

.fadeIn-20  { transform: translate3d(0, 20px, 0); }
.fadeIn-50  { transform: translate3d(0, 50px, 0); }
.fadeIn-80  { transform: translate3d(0, 80px, 0); }
.fadeIn-100 { transform: translate3d(0, 100px, 0); }

.fadeIn.active,
.fadeIn-20.active,
.fadeIn-50.active,
.fadeIn-80.active,
.fadeIn-100.active {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}

/* ====== 親→子 順次 ====== */
.fadeInChildren .fadeInChild,
.fadeInChildren .fadeInChild-20,
.fadeInChildren .fadeInChild-50,
.fadeInChildren .fadeInChild-80,
.fadeInChildren .fadeInChild-100 {
  opacity: 0;
  transition: opacity var(--fadeIn-duration) var(--fadeIn-easing),
              transform var(--fadeIn-duration) var(--fadeIn-easing);
  will-change: opacity, transform;
}

.fadeInChildren .fadeInChild     { transform: translate3d(0, 30px, 0); }
.fadeInChildren .fadeInChild-20  { transform: translate3d(0, 20px, 0); }
.fadeInChildren .fadeInChild-50  { transform: translate3d(0, 50px, 0); }
.fadeInChildren .fadeInChild-80  { transform: translate3d(0, 80px, 0); }
.fadeInChildren .fadeInChild-100 { transform: translate3d(0, 100px, 0); }

.fadeInChildren.active .fadeInChild,
.fadeInChildren.active .fadeInChild-20,
.fadeInChildren.active .fadeInChild-50,
.fadeInChildren.active .fadeInChild-80,
.fadeInChildren.active .fadeInChild-100 {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}

/* ==========================================================================
   ふわふわ浮遊 (.float-1 〜 .float-6) — 水泡のような動き
   --------------------------------------------------------------------------
   - 単一クラスで適用、無限ループ
   - 番号ごとに 振幅 / 速度 / 開始ディレイ が異なる
   - 複数要素に違うパターンを当てると自然にズレてランダム感が出る
   - パターン早見表:
       .float-1  小ぶり・速め    (振幅:小  / 4.0s / delay 0s)
       .float-2  中くらい        (振幅:中  / 5.0s / delay 0.6s)
       .float-3  ゆったり縦中心  (振幅:中  / 6.0s / delay 1.2s)
       .float-4  弧を描く        (振幅:中大/ 7.0s / delay 0.3s)
       .float-5  シンプル縦のみ  (振幅:小  / 3.5s / delay 0.8s)
       .float-6  大きく漂う      (振幅:大  / 8.0s / delay 1.5s)
   ========================================================================== */

@keyframes float-1 {
  0%, 100% { transform: translate3d(0, 0, 0) rotate(0deg); }
  25%      { transform: translate3d(9px, -24px, 0) rotate(1.5deg); }
  50%      { transform: translate3d(-6px, -36px, 0) rotate(-1.5deg); }
  75%      { transform: translate3d(-9px, -15px, 0) rotate(0.9deg); }
}
.float-1 { animation: float-1 4s ease-in-out 0s infinite; }

@keyframes float-2 {
  0%, 100% { transform: translate3d(0, 0, 0) rotate(0deg); }
  25%      { transform: translate3d(-4px, -6px, 0) rotate(-0.8deg); }
  50%      { transform: translate3d(2px, -14px, 0) rotate(0.6deg); }
  75%      { transform: translate3d(4px, -10px, 0) rotate(0.4deg); }
}
.float-2 { animation: float-2 5s ease-in-out 0.6s infinite; }

@keyframes float-3 {
  0%, 100% { transform: translate3d(0, 0, 0); }
  33%      { transform: translate3d(2px, -36px, 0); }
  66%      { transform: translate3d(-3px, -16px, 0); }
}
.float-3 { animation: float-3 6s ease-in-out 1.2s infinite; }

@keyframes float-4 {
  0%, 100% { transform: translate3d(0, 0, 0) rotate(0deg); }
  20%      { transform: translate3d(-2px, -5px, 0) rotate(-0.3deg); }
  50%      { transform: translate3d(3px, -10px, 0) rotate(0.4deg); }
  80%      { transform: translate3d(-1px, -16px, 0) rotate(-0.2deg); }
}
.float-4 { animation: float-4 7s ease-in-out 0.3s infinite; }

@keyframes float-5 {
  0%, 100% { transform: translate3d(0, 0, 0); }
  50%      { transform: translate3d(0, -24px, 0); }
}
.float-5 { animation: float-5 3.5s ease-in-out 0.8s infinite; }

@keyframes float-6 {
  0%, 100% { transform: translate3d(0, 0, 0) rotate(0deg); }
  25%      { transform: translate3d(10px, -20px, 0) rotate(2deg); }
  50%      { transform: translate3d(16px, -40px, 0) rotate(-1.6deg); }
  75%      { transform: translate3d(6px, -24px, 0) rotate(1deg); }
}
.float-6 { animation: float-6 8s ease-in-out 1.5s infinite; }

/* ==========================================================================
   ぐるぐる回転 (.spin / .spin-1 〜 .spin-5) — 優雅な時計回り
   --------------------------------------------------------------------------
   - 単一クラスで適用、無限ループ・時計回り・等速 (linear)
   - 速度違いの 5 パターン + デフォルトの .spin
   - 丸いコンテンツ(バッジ・スタンプ・装飾円 等)に
   - パターン早見表(数字が大きいほどゆっくり):
       .spin     基準  (12s / 1周)
       .spin-1   速め  (8s)
       .spin-2   標準  (12s)
       .spin-3   ゆったり (16s)
       .spin-4   優雅  (20s)
       .spin-5   超ゆったり (25s)
   ========================================================================== */

@keyframes spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

.spin   { animation: spin 12s linear infinite; transform-origin: 50% 50%; }
.spin-1 { animation: spin  8s linear infinite; transform-origin: 50% 50%; }
.spin-2 { animation: spin 12s linear infinite; transform-origin: 50% 50%; }
.spin-3 { animation: spin 16s linear infinite; transform-origin: 50% 50%; }
.spin-4 { animation: spin 20s linear infinite; transform-origin: 50% 50%; }
.spin-5 { animation: spin 25s linear infinite; transform-origin: 50% 50%; }

/* ==========================================================================
   マーカー (.marker-h / .marker-v / .marker-h-after / .marker-v-after)
   --------------------------------------------------------------------------
   - 親に .markerTrigger を付与 → viewport 入りで .active が付き、
     中の .marker-* がスーッと描画される
   - 横: .marker-h(背景グラデ版) / .marker-h-after(::after absolute 版)
   - 縦: .marker-v(背景グラデ版) / .marker-v-after(::after absolute 版)
   - インライン文字列にそのまま付けるなら背景版が手軽。
     位置やレイヤーを細かく制御したいときは ::after 版を。
   - 親に data-delay="0.3"(秒) で全マーカーを遅延
     親に data-stagger="0.2"(秒) で順次描画
   - 色・太さ・速度の調整は CSS 変数で:
       --marker-color        マーカー色
       --marker-thickness    横マーカーの高さ(%またはpx)
       --marker-thickness-v  縦マーカーの幅(%またはpx)
       --marker-duration     描画時間
       --marker-easing       イージング
   ========================================================================== */

:root {
  --marker-color: #fff176;            /* デフォルト: パステルイエロー(後で上書き可) */
  --marker-thickness: 35%;            /* 横マーカーの太さ(高さ) */
  --marker-thickness-v: 35%;          /* 縦マーカーの太さ(幅) */
  --marker-duration: 3s;
  --marker-easing: ease-in-out;
  --marker-delay: 0s;
}

/* ====== 横マーカー(背景グラデ版) ====== */
.marker-h {
  background-image: linear-gradient(var(--marker-color), var(--marker-color));
  background-repeat: no-repeat;
  background-position: 0 100%;
  background-size: 0% var(--marker-thickness);
  transition: background-size var(--marker-duration) var(--marker-easing) var(--marker-delay);
}
.markerTrigger.active .marker-h,
.marker-h.active {
  background-size: 100% var(--marker-thickness);
}

/* ====== 縦マーカー(背景グラデ版) ====== */
.marker-v {
  background-image: linear-gradient(var(--marker-color), var(--marker-color));
  background-repeat: no-repeat;
  background-position: 50% 0;
  background-size: var(--marker-thickness-v) 0%;
  transition: background-size var(--marker-duration) var(--marker-easing) var(--marker-delay);
}
.markerTrigger.active .marker-v,
.marker-v.active {
  background-size: var(--marker-thickness-v) 100%;
}

/* ====== 横マーカー (::after absolute 版) ====== */
.marker-h-after {
  position: relative;
  display: inline-block;
  z-index: 0;
}
.marker-h-after::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  width: 0;
  height: var(--marker-thickness);
  background-color: var(--marker-color);
  z-index: -1;
  pointer-events: none;
  transition: width var(--marker-duration) var(--marker-easing) var(--marker-delay);
}
.markerTrigger.active .marker-h-after::after,
.marker-h-after.active::after {
  width: 100%;
}

/* ====== 縦マーカー (::after absolute 版) ====== */
.marker-v-after {
  position: relative;
  display: inline-block;
  z-index: 0;
}
.marker-v-after::after {
  content: '';
  position: absolute;
  left: 50%;
  top: 0;
  transform: translateX(-50%);
  width: var(--marker-thickness-v);
  height: 0;
  background-color: var(--marker-color);
  z-index: -1;
  pointer-events: none;
  transition: height var(--marker-duration) var(--marker-easing) var(--marker-delay);
}
.markerTrigger.active .marker-v-after::after,
.marker-v-after.active::after {
  height: 100%;
}

/* ====== 動きを抑える設定の人向け ====== */
@media (prefers-reduced-motion: reduce) {
  .fadeIn,
  .fadeIn-20,
  .fadeIn-50,
  .fadeIn-80,
  .fadeIn-100,
  .fadeInChildren .fadeInChild,
  .fadeInChildren .fadeInChild-20,
  .fadeInChildren .fadeInChild-50,
  .fadeInChildren .fadeInChild-80,
  .fadeInChildren .fadeInChild-100 {
    opacity: 1;
    transform: none;
    transition: none;
  }
  .float-1,
  .float-2,
  .float-3,
  .float-4,
  .float-5,
  .float-6,
  .spin,
  .spin-1,
  .spin-2,
  .spin-3,
  .spin-4,
  .spin-5 {
    animation: none;
  }
  .marker-h,
  .marker-v,
  .marker-h-after::after,
  .marker-v-after::after {
    transition: none;
  }
  .markerTrigger.active .marker-h,
  .marker-h.active {
    background-size: 100% var(--marker-thickness);
  }
  .markerTrigger.active .marker-v,
  .marker-v.active {
    background-size: var(--marker-thickness-v) 100%;
  }
  .markerTrigger.active .marker-h-after::after,
  .marker-h-after.active::after { width: 100%; }
  .markerTrigger.active .marker-v-after::after,
  .marker-v-after.active::after { height: 100%; }
}