/* ===============================
   汎用フェードイン（ページ読み込み時）
=============================== */
.fade-in {
  opacity: 0;
  animation: fadeIn 1s ease-in-out forwards;
}

@keyframes fadeIn {
  0% { opacity: 0; }
  100% { opacity: 1; }
}

/* ===============================
   スクロールで発火するフェード系アニメーション
   （Intersection Observer で .show を付与）
=============================== */

/* --- 共通の初期状態 --- */
.fade-in-up,
.fade-in-down,
.fade-in-left,
.fade-in-right,
.fade-in-zoom,
.fade-in-scroll {
  opacity: 0;
  transition: opacity 1s ease-in-out, transform 1s ease-in-out;
  /* ↑ transition版（通常はこちらを使用） */
}

/* --- 下からフェードイン --- */
.fade-in-up {
  transform: translateY(20px); /* 下に20px移動（見た目上） */
}
.fade-in-up.show {
  opacity: 1;
  transform: translateY(0);
}
/* 文字単位フェードイン用 */
.fade-in-up.inline {
  display: inline-block;
}

/* --- 上からフェードイン --- */
.fade-in-down {
  transform: translateY(-20px);
}
.fade-in-down.show {
  opacity: 1;
  transform: translateY(0);
}

/* --- 左からフェードイン --- */
.fade-in-left {
  transform: translateX(-20px);
}
.fade-in-left.show {
  opacity: 1;
  transform: translateX(0);
}

/* --- 右からフェードイン --- */
.fade-in-right {
  transform: translateX(20px);
}
.fade-in-right.show {
  opacity: 1;
  transform: translateX(0);
}

/* --- ズームインフェード --- */
.fade-in-zoom {
  transform: scale(0.9);
}
.fade-in-zoom.show {
  opacity: 1;
  transform: scale(1);
}

/* --- 単純なスクロール発火用フェードイン --- */
.fade-in-scroll.show {
  opacity: 1;
  /* transformは使わないので指定不要 */
}

.slide-up {
  opacity: 1; /* フェードなしで完全に見えてる */
  transform: translateY(30px);
  transition: transform 0.5s ease-out;
}
.slide-up.show {
  transform: translateY(0); 
}
/* 文字単位スライドアップ用 */
.slide-up.inline {
  display: inline-block;
}


.grow-up {
  opacity: 0;
  transform: scaleY(0);
  transform-origin: bottom; /* 下を基準に伸びる */
  transition: opacity 0.5s ease-out, transform 0.5s ease-out;
}
.grow-up.show {
  opacity: 1;
  transform: scaleY(1);
}
/* 文字単位グローアップ用 */
.grow-up.inline {
  display: inline-block;
}


.pop-up {
  opacity: 0;
  transform: translateY(30px) scale(0.95); /* 少し下にズレ＆小さく */
  transition:
    opacity 0.6s ease-out,
    transform 0.6s cubic-bezier(0.25, 1.3, 0.5, 1); /* ちょっと弾む感じ */
}
.pop-up.show {
  opacity: 1;
  transform: translateY(0) scale(1); /* 元の位置に戻る（ぴょこっ） */
}
/* 文字単位ポップアップ用 */
.pop-up.inline {
  display: inline-block;
}

/* ===============================
   アニメーション遅延クラス（transition版・animation版両対応）
   HTMLで適宜クラスを追加してください
=============================== */
.delay-1 {
  transition-delay: 0s;       /* transition版用 */
  /* animation-delay: 0s; */  /* animation版を使う場合はコメントを外して使う */
}
.delay-2 {
  transition-delay: 0.2s;
  /* animation-delay: 0.2s; */
}
.delay-3 {
  transition-delay: 0.4s;
  /* animation-delay: 0.4s; */
}
.delay-4 {
  transition-delay: 0.6s;
  /* animation-delay: 0.6s; */
}
.delay-5 {
  transition-delay: 0.8s;
  /* animation-delay: 0.8s; */
}
.delay-6 {
  transition-delay: 1.0s;
  /* animation-delay: 1.0s; */
}
.delay-7 {
  transition-delay: 1.2s;
  /* animation-delay: 1.2s; */
}
.delay-8 {
  transition-delay: 1.4s;
  /* animation-delay: 1.4s; */
}
.delay-9 {
  transition-delay: 1.6s;
  /* animation-delay: 1.6s; */
}
.delay-10 {
  transition-delay: 1.8s;
  /* animation-delay: 1.8s; */
}
.delay-11 {
  transition-delay: 2.0s;
  /* animation-delay: 2.0s; */
}
.delay-12 {
  transition-delay: 2.2s;
  /* animation-delay: 2.2s; */
}
/* 必要に応じて .fade-delay-20, 21 ... など増やしてください */

/* ===============================
   ↓ 必要に応じて、animation版を使いたい場合はこちら（コメントアウト解除）
=============================== */

/*
.fade-in-up.show {
  animation: fadeInUp 1s ease-in-out forwards;
}
.fade-in-left.show {
  animation: fadeInLeft 1s ease-in-out forwards;
}
.fade-in-right.show {
  animation: fadeInRight 1s ease-in-out forwards;
}
.fade-in-zoom.show {
  animation: fadeInZoom 1s ease-in-out forwards;
}

@keyframes fadeInUp {
  0% { opacity: 0; transform: translateY(20px); }
  100% { opacity: 1; transform: translateY(0); }
}

@keyframes fadeInLeft {
  0% { opacity: 0; transform: translateX(-20px); }
  100% { opacity: 1; transform: translateX(0); }
}

@keyframes fadeInRight {
  0% { opacity: 0; transform: translateX(20px); }
  100% { opacity: 1; transform: translateX(0); }
}

@keyframes fadeInZoom {
  0% { opacity: 0; transform: scale(0.9); }
  100% { opacity: 1; transform: scale(1); }
}
*/

.move-line {
    height: 1px;
    background-color: #d9d9d9;
    width: 0px;
    max-width: 100%;
    /* 中央から */
    /* margin: 0 auto; */
    /* 左から右 */
    margin: 0;
    /* 右から左 */
    /* margin: 0 0 0 auto; */
}

.move-line.show {
    animation: drawLine 2s ease forwards;
}

@keyframes drawLine {
  from {
    width: 0;
  }
  to {
    width: 100%;
  }
}