@charset "UTF-8";

/* 初期状態 */
.bounce-in {
  opacity: 0;
  transform: scale(0.3);
  will-change: opacity, transform;
}

/* 表示領域に入った時に適用するアニメーション */
.bounce-in.is-active {
  animation: bounceIn 0.65s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
}

/* 「ぼいーん」と伸縮するキーフレーム */
@keyframes bounceIn {
  0% {
    opacity: 0;
    transform: scale(0.3); /* 最初は小さく */
  }
  60% {
    opacity: 1;
    transform: scale(1.15); /* 勢いよく115%まで拡大（ぼいーん） */
  }
  80% {
    transform: scale(0.95); /* 反動で少しだけ縮小 */
  }
  100% {
    opacity: 1;
    transform: scale(1); /* 本来の大きさに定着 */
  }
}



/* ボタン・リンクの基本スタイル（背景色なし） */
.btn-hover {
  display: inline-block;

  /* 滑らかに拡大・変化させる設定 */
  transition: transform 0.25s ease, opacity 0.25s ease;
  will-change: transform;
}

/* PC（マウス操作環境）のみホバーエフェクトを適用 */
@media (hover: hover) and (pointer: fine) {

  /* カーソルを載せた時：少し拡大（1.05倍）＋ 軽く透明度を下げてクリック感を強調 */
  .btn-hover:hover {
    transform: scale(1.05);
    opacity: 0.8;
  }

  /* クリックした瞬間：元のサイズに近い状態へグッと押し込まれるフィードバック */
  .btn-hover:active {
    transform: scale(0.98);
  }
}



/* --- 0. 遅延時間の一括設定 --- */
:root {
  --delay-time: 0.5s;
}

/* --- 1. ひょこっと出るアニメーション（親要素に適用） --- */
.pop-up {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 1s ease, transform 1s cubic-bezier(0.25, 1.3, 0.5, 1);
  will-change: opacity, transform;
  
  /* ここで指定する margin や独自のクラスの margin が正常に効きます */
  margin-bottom: 30px; 
}

.pop-up.is-active {
  opacity: 1;
  transform: translateY(0);
}

.delay-s {
  transition-delay: var(--delay-time);
}


/* --- 2. 改行対応の下線（内側の span などに適用） --- */
.underline-anim {
  display: inline; /* 改行ごとに下線を描画 */
  
  background-image: linear-gradient(#333333, #333333);
  background-repeat: no-repeat;
  background-position: left 100%;
  background-size: 0% 2px;
  line-height: 1.6;
  
  transition: background-size 0.6s ease 1s;
}

/* 親要素（.pop-up）に .delay-s がついている場合の下線タイミング */
.delay-s .underline-anim {
  transition-delay: calc(1s + var(--delay-time));
}

/* 親要素に .is-active がついたら下線を伸ばす */
.pop-up.is-active .underline-anim {
  background-size: 100% 2px;
}



/* --- 右からスライドイン（基本設定） --- */
.slide-right {
  opacity: 0;
  transform: translateX(40px); /* 初期位置：右へ40pxずらして隠す */
  /* 動作時間：1秒（滑らかなイージング） */
  transition: opacity 1s ease, transform 1s cubic-bezier(0.25, 1, 0.5, 1);
  will-change: opacity, transform;
}

/* 表示領域に入った時：定位置に戻る */
.slide-right.is-active {
  opacity: 1;
  transform: translateX(0);
}

/* --- 遅延設定（.delay-s との連携） --- */
.slide-right.delay-s {
  transition-delay: var(--delay-time, 0.5s);
}

/* --- 下線アニメーション（.underline-anim との連携） --- */
.slide-right.delay-s .underline-anim {
  transition-delay: calc(1s + var(--delay-time, 0.5s));
}

.slide-right.is-active .underline-anim {
  background-size: 100% 2px;
}


/* --- 一度拡大して元に戻るアニメーション（基本設定） --- */
.zoom-in {
  opacity: 0;
  will-change: opacity, transform;
}

/* 表示領域に入ったらアニメーションを発火（動作時間：1秒） */
.zoom-in.is-active {
  animation: zoomInPulse 1s cubic-bezier(0.25, 1, 0.5, 1) forwards;
}

/* キーフレーム定義 */
@keyframes zoomInPulse {
  0% {
    opacity: 0;
    transform: scale(0.85); /* 初期状態：やや小さく表示 */
  }
  50% {
    opacity: 1;
    transform: scale(1.08); /* 中間：少し大きくなる（1.08倍） */
  }
  100% {
    opacity: 1;
    transform: scale(1); /* 完了：元のサイズに定着 */
  }
}

/* --- 遅延設定（.delay-s との連携） --- */
.zoom-in.delay-s.is-active {
  animation-delay: var(--delay-time, 0.5s);
}

/* --- 下線アニメーション（.underline-anim との連携） --- */
.zoom-in.delay-s .underline-anim {
  transition-delay: calc(1s + var(--delay-time, 0.5s));
}

.zoom-in.is-active .underline-anim {
  background-size: 100% 2px;
}