/* ====== 区切り線 ====== */
.separator {
  text-align: center;
  color: #B5651D;
  margin: 10px auto;
  font-size: 1.2rem;
  letter-spacing: 0.2em;
  font-family: 'Sawarabi Mincho', serif;
  opacity: 0;
  transform: translateY(50px);/*translateY(20px);*/
  transition: opacity 1.2s ease, transform 1.2s ease;
}

/* 画面に入ったらフェードイン */
.fadein.show {
  opacity: 1;
  transform: translateY(0);
}


/* ====== 共通フェードイン基本設定 ====== */
.fadein {
  opacity: 0;
  transition: opacity 1.2s ease, transform 1.2s ease;
}

/* ====== フェードイン方向別アニメ ====== */
.fadein-up { transform: translateY(20px); }     /* 下からふわっ */
.fadein-down { transform: translateY(-20px); }  /* 上からふわっ */
.fadein-left { transform: translateX(-20px); }  /* 左からふわっ */
.fadein-right { transform: translateX(20px); }  /* 右からふわっ */

/* ====== 表示状態 ====== */
.fadein.show {
  opacity: 1;
  transform: translate(0, 0);
}

.fadein.delay1 { transition-delay: 0.3s; }
.fadein.delay2 { transition-delay: 0.6s; }




/* ====== スマートフォン（～767px） ====== */
@media screen and (max-width: 767px) {
  .separator {
    font-size: 0.8rem;        /* 1rem; 少し小さく */
    margin: 8px auto;       /* 余白もやや詰める */
    letter-spacing: 0.15em; /* 詰まりすぎ防止 */
  }
}

/* ====== タブレット（768px～1023px） ====== */
@media screen and (min-width: 768px) and (max-width: 1023px) {
  .separator {
    font-size: 1.0rem;/*1.1rem;*/
    margin: 9px auto;
    letter-spacing: 0.18em;
  }
}

/* ====== PC（1024px～） ====== */
@media screen and (min-width: 1024px) {
  .separator {
    font-size: 1.3rem;      /* やや大きめに */
    margin: 12px auto;
    letter-spacing: 0.25em;
  }
}