/* =========================================================
 * 全体に適用するCSS
========================================================= */
.main-content {
  padding-top: 90px; /* ヘッダーの高さ */
}

/* 投稿ページ */
.singleContainer {
  padding-top: 100px;
}

/* 固定ページ */
.pageContainer {
  padding-top: 100px;
}

/* --------------------------------------------------------- 
 1280px以下
--------------------------------------------------------- */
@media (max-width: 1280px) {
  .main-content {
    padding-top: 90px; /* ヘッダーの高さ */
  }

  /* 投稿ページ */
  .singleContainer {
    padding-top: 80px;
  }

  /* 固定ページ */
  .pageContainer {
    padding-top: 80px;
  }
}

/* --------------------------------------------------------- 
 980px以下
--------------------------------------------------------- */
@media (max-width: 980px) {
  .main-content {
    padding-top: 79px; /* ヘッダーの高さ */
  }
  
  /* 固定ページ */
  .pageContainer {
    padding-top: 50px;
  }

  /* 投稿ページ */
  .singleContainer {
    padding-top: 50px;
  }
}

/* =========================================================
 * スクロールアニメーション
========================================================= */

/* 初期状態（非表示） */
.jsAnimate,
.jsAnimateOnLoad,
.jsAnimateOnLoadSecond,
.jsAnimateOnScroll {
  opacity: 0;
  transition: opacity 0.8s cubic-bezier(0.4, 0, 0.2, 1),
              transform 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}

/* アニメーションのバリエーション */
.jsAnimate[data-animate="fadeIn"],
.jsAnimateOnLoad[data-animate="fadeIn"],
.jsAnimateOnLoadSecond[data-animate="fadeIn"],
.jsAnimateOnScroll[data-animate="fadeIn"] {
  opacity: 0;
}

.jsAnimate[data-animate="fadeInUp"],
.jsAnimateOnLoad[data-animate="fadeInUp"],
.jsAnimateOnLoadSecond[data-animate="fadeInUp"],
.jsAnimateOnScroll[data-animate="fadeInUp"] {
  transform: translateY(30px);
}

.jsAnimate[data-animate="fadeInDown"],
.jsAnimateOnLoad[data-animate="fadeInDown"],
.jsAnimateOnLoadSecond[data-animate="fadeInDown"],
.jsAnimateOnScroll[data-animate="fadeInDown"] {
  transform: translateY(-30px);
}

.jsAnimate[data-animate="fadeInLeft"],
.jsAnimateOnLoad[data-animate="fadeInLeft"],
.jsAnimateOnLoadSecond[data-animate="fadeInLeft"],
.jsAnimateOnScroll[data-animate="fadeInLeft"] {
  transform: translateX(30px);
}

.jsAnimate[data-animate="fadeInRight"],
.jsAnimateOnLoad[data-animate="fadeInRight"],
.jsAnimateOnLoadSecond[data-animate="fadeInRight"],
.jsAnimateOnScroll[data-animate="fadeInRight"] {
  transform: translateX(-30px);
}

.jsAnimate[data-animate="scaleIn"],
.jsAnimateOnLoad[data-animate="scaleIn"],
.jsAnimateOnLoadSecond[data-animate="scaleIn"],
.jsAnimateOnScroll[data-animate="scaleIn"] {
  transform: scale(0.9);
}

.jsAnimate[data-animate="fadeInUpLarge"],
.jsAnimateOnLoad[data-animate="fadeInUpLarge"],
.jsAnimateOnLoadSecond[data-animate="fadeInUpLarge"],
.jsAnimateOnScroll[data-animate="fadeInUpLarge"] {
  transform: translateY(60px);
}

.jsAnimate[data-animate="fadeInRightLarge"],
.jsAnimateOnLoad[data-animate="fadeInRightLarge"],
.jsAnimateOnLoadSecond[data-animate="fadeInRightLarge"],
.jsAnimateOnScroll[data-animate="fadeInRightLarge"] {
  transform: translateX(-60px);
}

.jsAnimate[data-animate="fadeInLeftLarge"],
.jsAnimateOnLoad[data-animate="fadeInLeftLarge"],
.jsAnimateOnLoadSecond[data-animate="fadeInLeftLarge"],
.jsAnimateOnScroll[data-animate="fadeInLeftLarge"] {
  transform: translateX(60px);
}

/* 表示状態 */
.jsAnimate.isVisible,
.jsAnimateOnLoad.isVisible,
.jsAnimateOnLoadSecond.isVisible,
.jsAnimateOnScroll.isVisible {
  opacity: 1;
  transform: translate(0) scale(1);
}

/* アニメーション速度のバリエーション */
.jsAnimate[data-duration="fast"],
.jsAnimateOnLoad[data-duration="fast"],
.jsAnimateOnLoadSecond[data-duration="fast"],
.jsAnimateOnScroll[data-duration="fast"] {
  transition-duration: 0.5s;
}

.jsAnimate[data-duration="slow"],
.jsAnimateOnLoad[data-duration="slow"],
.jsAnimateOnLoadSecond[data-duration="slow"],
.jsAnimateOnScroll[data-duration="slow"] {
  transition-duration: 1.2s;
}

.jsAnimate[data-duration="very-slow"],
.jsAnimateOnLoad[data-duration="very-slow"],
.jsAnimateOnLoadSecond[data-duration="very-slow"],
.jsAnimateOnScroll[data-duration="very-slow"] {
  transition-duration: 1.8s;
}

/* 一度だけアニメーション */
.jsAnimate[data-once="false"].isVisible,
.jsAnimateOnLoad[data-once="false"].isVisible,
.jsAnimateOnLoadSecond[data-once="false"].isVisible,
.jsAnimateOnScroll[data-once="false"].isVisible {
  opacity: 1;
  transform: translate(0) scale(1);
}

/* モバイル対応（アニメーションを軽くする） */
@media (max-width: 768px) {
  .jsAnimate[data-animate="fadeInUp"],
  .jsAnimate[data-animate="fadeInUpLarge"],
  .jsAnimateOnLoad[data-animate="fadeInUp"],
  .jsAnimateOnLoad[data-animate="fadeInUpLarge"],
  .jsAnimateOnLoadSecond[data-animate="fadeInUp"],
  .jsAnimateOnLoadSecond[data-animate="fadeInUpLarge"],
  .jsAnimateOnScroll[data-animate="fadeInUp"],
  .jsAnimateOnScroll[data-animate="fadeInUpLarge"] {
    transform: translateY(20px);
  }
  
  .jsAnimate[data-animate="fadeInDown"],
  .jsAnimateOnLoad[data-animate="fadeInDown"],
  .jsAnimateOnLoadSecond[data-animate="fadeInDown"],
  .jsAnimateOnScroll[data-animate="fadeInDown"] {
    transform: translateY(-20px);
  }
  
  .jsAnimate[data-animate="fadeInLeft"],
  .jsAnimate[data-animate="fadeInRight"],
  .jsAnimate[data-animate="fadeInLeftLarge"],
  .jsAnimate[data-animate="fadeInRightLarge"],
  .jsAnimateOnLoad[data-animate="fadeInLeft"],
  .jsAnimateOnLoad[data-animate="fadeInRight"],
  .jsAnimateOnLoad[data-animate="fadeInLeftLarge"],
  .jsAnimateOnLoad[data-animate="fadeInRightLarge"],
  .jsAnimateOnLoadSecond[data-animate="fadeInLeft"],
  .jsAnimateOnLoadSecond[data-animate="fadeInRight"],
  .jsAnimateOnLoadSecond[data-animate="fadeInLeftLarge"],
  .jsAnimateOnLoadSecond[data-animate="fadeInRightLarge"],
  .jsAnimateOnScroll[data-animate="fadeInLeft"],
  .jsAnimateOnScroll[data-animate="fadeInRight"],
  .jsAnimateOnScroll[data-animate="fadeInLeftLarge"],
  .jsAnimateOnScroll[data-animate="fadeInRightLarge"] {
    transform: translateX(20px);
  }
  
  .jsAnimate,
  .jsAnimateOnLoad,
  .jsAnimateOnLoadSecond,
  .jsAnimateOnScroll {
    transition-duration: 0.6s;
  }
  
  /* モバイル用の表示状態（詳細度を上げてtransformを確実にリセット） */
  .jsAnimate.isVisible[data-animate],
  .jsAnimateOnLoad.isVisible[data-animate],
  .jsAnimateOnLoadSecond.isVisible[data-animate],
  .jsAnimateOnScroll.isVisible[data-animate] {
    transform: translate(0) scale(1) !important;
  }
}