@charset "UTF-8";
/* ==================================================================
 * 和撰追加ファイル
 * ================================================================ */
body {
  font-family: "Noto Serif JP", serif;
  font-optical-sizing: auto;
  font-weight: normal;
  font-style: normal;
}

/* headerユニット
------------------- */
.site-title {
  font-size: 2.5rem;
}

h1 {
  font-size: 2.5rem;
  border-bottom: 1px solid #999;
  padding: 1rem;
}

h2 {
  font-size: 1.8rem;
  border-bottom: 1px solid #999;
  padding: 0.8rem;
}

/* スクロールアニメーション用の基本クラス */
.scroll-animate {
  opacity: 0;
  -webkit-transform: translateY(50px);
          transform: translateY(50px);
  -webkit-transition: all 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  transition: all 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.scroll-animate.animate {
  opacity: 1;
  -webkit-transform: translateY(0);
          transform: translateY(0);
}

/* より強いアニメーション */
.scroll-animate-strong {
  opacity: 0;
  -webkit-transform: translateY(80px) scale(0.9);
          transform: translateY(80px) scale(0.9);
  -webkit-transition: all 1s cubic-bezier(0.23, 1, 0.32, 1);
  transition: all 1s cubic-bezier(0.23, 1, 0.32, 1);
}

.scroll-animate-strong.animate {
  opacity: 1;
  -webkit-transform: translateY(0) scale(1);
          transform: translateY(0) scale(1);
}

/* 左からスライドイン */
.scroll-slide-left {
  opacity: 0;
  -webkit-transform: translateX(-100px);
          transform: translateX(-100px);
  -webkit-transition: all 0.9s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  transition: all 0.9s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.scroll-slide-left.animate {
  opacity: 1;
  -webkit-transform: translateX(0);
          transform: translateX(0);
}

/* 右からスライドイン */
.scroll-slide-right {
  opacity: 0;
  -webkit-transform: translateX(100px);
          transform: translateX(100px);
  -webkit-transition: all 0.9s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  transition: all 0.9s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.scroll-slide-right.animate {
  opacity: 1;
  -webkit-transform: translateX(0);
          transform: translateX(0);
}

/* フェードインのみ */
.scroll-fade {
  opacity: 0;
  -webkit-transition: all 1.2s ease-out;
  transition: all 1.2s ease-out;
}

.scroll-fade.animate {
  opacity: 1;
}

/* 回転しながら登場 */
.scroll-rotate {
  opacity: 0;
  -webkit-transform: translateY(50px) rotate(15deg);
          transform: translateY(50px) rotate(15deg);
  -webkit-transition: all 1s cubic-bezier(0.23, 1, 0.32, 1);
  transition: all 1s cubic-bezier(0.23, 1, 0.32, 1);
}

.scroll-rotate.animate {
  opacity: 1;
  -webkit-transform: translateY(0) rotate(0deg);
          transform: translateY(0) rotate(0deg);
}

/* 遅延アニメーション */
.delay-1 {
  -webkit-transition-delay: 0.1s;
          transition-delay: 0.1s;
}

.delay-2 {
  -webkit-transition-delay: 0.2s;
          transition-delay: 0.2s;
}

.delay-3 {
  -webkit-transition-delay: 0.3s;
          transition-delay: 0.3s;
}

.delay-4 {
  -webkit-transition-delay: 0.4s;
          transition-delay: 0.4s;
}

.delay-5 {
  -webkit-transition-delay: 0.5s;
          transition-delay: 0.5s;
}

/* ===== PC時のみ表示 ===== */
.pc-only {
  display: block; /* PC時は表示 */
}

/* ===== SP時のみ表示 ===== */
.sp-only {
  display: none; /* PC時は非表示 */
}

/* ===== ブレークポイント: 768px以下をSP扱い ===== */
@media (max-width: 768px) {
  .pc-only {
    display: none; /* SP時は非表示 */
  }
  .sp-only {
    display: block; /* SP時は表示 */
  }
}
/* ===== より詳細な切り替え（任意で使用） ===== */
/* タブレット用（769px〜1024px） */
.tablet-only {
  display: none;
}

@media (min-width: 769px) and (max-width: 1024px) {
  .tablet-only {
    display: block;
  }
}
/* デスクトップ用（1025px以上） */
.desktop-only {
  display: none;
}

@media (min-width: 1025px) {
  .desktop-only {
    display: block;
  }
}
/* ===== インライン要素用 ===== */
.pc-only-inline {
  display: inline; /* PC時はインライン表示 */
}

.sp-only-inline {
  display: none; /* PC時は非表示 */
}

@media (max-width: 768px) {
  .pc-only-inline {
    display: none; /* SP時は非表示 */
  }
  .sp-only-inline {
    display: inline; /* SP時はインライン表示 */
  }
}
/* ===== フレックス要素用 ===== */
.pc-only-flex {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex; /* PC時はフレックス表示 */
}

.sp-only-flex {
  display: none; /* PC時は非表示 */
}

@media (max-width: 768px) {
  .pc-only-flex {
    display: none; /* SP時は非表示 */
  }
  .sp-only-flex {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex; /* SP時はフレックス表示 */
  }
}