/* ============================================
   animation.css
   アニメーション・インタラクション
   ============================================ */


/* ============================================
   スクロールフェードアップ
   ============================================ */
.anim-fade-up {
  opacity: 0;
  transform: translateY(36px);
  transition: opacity 0.65s ease, transform 0.65s cubic-bezier(0.22, 1, 0.36, 1);
}

.anim-fade-up.is-animated {
  opacity: 1;
  transform: translateY(0);
}


/* ============================================
   デコ画像：ふわふわ浮遊
   ============================================ */
@keyframes pk-float {
  0%, 100% { transform: translateY(0px); }
  50%       { transform: translateY(-14px); }
}

@keyframes pk-float-slow {
  0%, 100% { transform: translateY(0px) rotate(0deg); }
  50%       { transform: translateY(-8px) rotate(3deg); }
}

.float-anim {
  animation: pk-float 3.5s ease-in-out infinite;
}

.float-anim--slow {
  animation: pk-float-slow 5s ease-in-out infinite;
}


/* ============================================
   まるのセクション：ホバーでポン
   ============================================ */
.circle-item {
  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.circle-item:hover {
  transform: scale(1.08);
}


/* ============================================
   カードホバー（TOPカード・施設一覧カード）
   ============================================ */
.card,
.facility-card {
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.card:hover,
.facility-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 14px 30px rgba(0, 0, 0, 0.10);
}


/* ============================================
   TOPボタン：ホバーでポップアップ
   ============================================ */
.btn-top {
  transition: transform 0.22s cubic-bezier(0.34, 1.56, 0.64, 1),
              box-shadow 0.22s ease;
}

.btn-top:hover {
  transform: translateY(-3px) scale(1.03);
  box-shadow: 0 10px 24px rgba(245, 121, 96, 0.45);
}


/* ============================================
   お問い合わせボタン ホバー
   ============================================ */
.btn-contact {
  transition: transform 0.2s ease, opacity 0.2s ease;
}

.btn-contact:hover {
  transform: translateY(-2px);
  opacity: 0.85;
}


/* ============================================
   ニュースリスト：ホバーでスライド
   ============================================ */
.news-list li {
  transition: background-color 0.2s ease, padding-left 0.2s ease;
}

.news-list li:hover {
  background-color: #fdf5f0;
  padding-left: 10px;
}


/* ============================================
   施設カードボタン ホバー
   ============================================ */
.card .btn,
.facility-card__btn {
  transition: opacity 0.2s ease, transform 0.2s ease;
}

.card .btn:hover,
.facility-card__btn:hover {
  opacity: 0.85;
  transform: translateY(-1px);
}


/* ============================================
   カリキュラム画像：ホバーでゆらゆら
   ============================================ */
@keyframes pk-wiggle {
  0%, 100% { transform: rotate(0deg); }
  25%       { transform: rotate(-4deg); }
  75%       { transform: rotate(4deg); }
}

.page2-item img {
  transition: transform 0.2s ease;
}

.page2-item:hover img {
  animation: pk-wiggle 0.5s ease;
}


/* ============================================
   バナーボタン ホバー
   ============================================ */
.banner-btn {
  transition: transform 0.2s ease, opacity 0.2s ease;
}

.banner-btn:hover {
  transform: translateY(-2px) scale(1.04);
  opacity: 0.9;
}


/* ============================================
   もっと見るボタン ホバー
   ============================================ */
.news-more {
  transition: transform 0.2s ease, opacity 0.2s ease;
}

.news-more:hover {
  transform: translateY(-2px) scale(1.04);
}


/* ============================================
   h1_02.png クレヨン描画アニメーション
   ============================================ */

/* 初期状態：非表示（JSで .is-drawing が付くまで） */
.title-bg-img {
  clip-path: polygon(
    0 0,
    0 0%,   0 14%, 0 29%, 0 43%, 0 57%, 0 71%, 0 86%, 0 100%,
    0 100%
  );
}

/* クレヨン描画キーフレーム：右端が微妙にぶれながら左→右へ伸びる */
@keyframes crayon-draw {
  0% {
    clip-path: polygon(
      0 0,
      0 0%,   0 14%, 0 29%, 0 43%, 0 57%, 0 71%, 0 86%, 0 100%,
      0 100%
    );
  }
  20% {
    clip-path: polygon(
      0 0,
      22% -1%, 20% 15%, 22% 30%, 19% 44%, 22% 58%, 20% 72%, 22% 87%, 20% 101%,
      0 100%
    );
  }
  40% {
    clip-path: polygon(
      0 0,
      41%  1%, 43% 14%, 40% 30%, 42% 43%, 40% 58%, 42% 71%, 41% 87%, 42% 100%,
      0 100%
    );
  }
  60% {
    clip-path: polygon(
      0 0,
      61%  0%, 59% 15%, 62% 29%, 59% 44%, 62% 57%, 60% 72%, 62% 86%, 60% 101%,
      0 100%
    );
  }
  80% {
    clip-path: polygon(
      0 0,
      81%  1%, 83% 14%, 80% 30%, 82% 43%, 80% 58%, 82% 71%, 81% 87%, 83% 100%,
      0 100%
    );
  }
  100% {
    clip-path: polygon(
      0 0,
      101% 0%, 101% 14%, 101% 29%, 101% 43%, 101% 57%, 101% 71%, 101% 86%, 101% 100%,
      0 100%
    );
  }
}

/* 発火：is-drawing クラスが付いたらアニメーション開始 */
.title-wrap.is-drawing .title-bg-img {
  animation: crayon-draw 0.7s linear forwards;
}

/* aboutページ：texture-center-img（統括マネージャー見出し） */
.texture-center-img {
  clip-path: polygon(
    0 0,
    0 0%,   0 14%, 0 29%, 0 43%, 0 57%, 0 71%, 0 86%, 0 100%,
    0 100%
  );
}

.texture-wrap--crayon.is-drawing .texture-center-img {
  animation: crayon-draw 0.7s linear forwards;
}

/* 「統括マネージャー」テキスト：クレヨン完了後にフェードイン */
.texture-text {
  opacity: 0;
  transition: opacity 0.4s ease;
}

.texture-wrap--crayon.is-drawing .texture-text {
  opacity: 1;
  transition-delay: 0.6s;
}


/* ============================================
   スクロール登場アニメーション（全ページ共通）
   ============================================ */
.scroll-reveal {
  opacity: 0;
  transform: translateY(36px) scale(0.96);
  transition:
    opacity   0.85s cubic-bezier(0.22, 1, 0.36, 1),
    transform 0.85s cubic-bezier(0.34, 1.12, 0.64, 1);
}

.scroll-reveal.is-visible {
  opacity: 1;
  transform: translateY(0) scale(1);
}