@charset "utf-8";
/*-------anime------*/
/* 1文字ずつ立ち上がる見出し用（js-split） */
.js-split span {
  opacity: 0;
  display: inline-block;
  transform: translateY(20px);
}

.js-split.is-active span {
  animation: fadeUp 0.9s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

@keyframes fadeUp {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* カーテンワイプ。--a-ct-bg で幕の色をセクションの地色に合わせる */
.a-ct {
  position: relative;
  z-index: 2;
  overflow: hidden;
}
/* 幕は transform で動かす。left/right を animate するとレイアウトが毎フレーム走り、
   環境によっては途中で止まって中身が隠れたままになるため */
.a-ct::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 5;
  background: var(--a-ct-bg, #fff);
  transition: transform 1s cubic-bezier(0.65, 0, 0.35, 1) 0.2s;
}
.a-left.is-visible::after {
  transform: translateX(-101%);
}
.a-right.is-visible::after {
  transform: translateX(101%);
}

/* ふわっと上がってくる。和の雰囲気に合わせてゆっくりめ・減速強め */
.fade-up {
  opacity: 0;
  transform: translateY(24px);
  transition:
    opacity 0.9s cubic-bezier(0.22, 1, 0.36, 1),
    transform 0.9s cubic-bezier(0.22, 1, 0.36, 1);
}
.fade-up.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* 動かさず滲むように出す。飾り（鶏・筆・徳利）用 */
.a-fade {
  opacity: 0;
  transition: opacity 1.6s ease;
}
.a-fade.is-visible {
  opacity: 1;
}

/* 時差表示 */
.a-d1 {
  transition-delay: 0.12s;
}
.a-d2 {
  transition-delay: 0.24s;
}
.a-d3 {
  transition-delay: 0.36s;
}
.a-d4 {
  transition-delay: 0.48s;
}
.a-d5 {
  transition-delay: 0.6s;
}
.a-d6 {
  transition-delay: 0.72s;
}
.a-d7 {
  transition-delay: 0.84s;
}

/* 動きを減らす設定の端末では全部止める */
@media (prefers-reduced-motion: reduce) {
  .fade-up,
  .a-fade,
  .js-split span {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
    animation: none !important;
  }
  .a-ct::after {
    display: none;
  }
}