@charset "UTF-8";

/* --------------------------------
   文字アニメーション対象
-------------------------------- */

/* 各文字のラッパー */
.charfx-char {
  display: inline-block;
  position: relative;

  opacity: 0;
  transform: translateY(0.9em);

  padding: 0;
  margin: 0;

  filter: none;
  vertical-align: baseline;

  /* iOSでの文字欠け・再描画遅延対策 */
  -webkit-backface-visibility: visible;
  backface-visibility: visible;

  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  
  
}

.js-chara-fix .charfx-char {
  letter-spacing: 0.18em;
  text-indent: -0.1em;
}

/* --------------------------------
   アニメーション準備状態
-------------------------------- */

.charfx-ready .charfx-char {
  transition-property: transform, opacity;
  transition-timing-function: cubic-bezier(.2, .8, .2, 1);

  /*
   transition-duration や transition-delay は
   JS側で各文字に設定している想定
  */
}


/* --------------------------------
   表示状態
-------------------------------- */

.charfx-in .charfx-char {
  opacity: 1;
  transform: translateY(0);
}


/* --------------------------------
   アニメーション終了状態
   JSで charfx-finished を付与する場合
-------------------------------- */

.charfx-finished .charfx-char {
  opacity: 1;
  transform: none;
  transition: none;
}


/* --------------------------------
   文字全体の親要素
-------------------------------- */

/*
各文字にpaddingを付けると、iOSで描画が遅れたり
文字の一部が後から表示される場合があるため、
上下の余白は親要素側で確保します。
*/
.charfx-target,
.charfx-ready,
.charfx-in {
  overflow: visible;

  padding-top: 0.12em;
  padding-bottom: 0.12em;

  margin-top: -0.12em;
  margin-bottom: -0.12em;
}


/* --------------------------------
   改行対応
-------------------------------- */

/*
JSで空白文字をspan化している場合、
空白が潰れないようにします。
*/
.charfx-char.is-space {
  width: 0.3em;
}


/* --------------------------------
   アクセシビリティ
-------------------------------- */

@media (prefers-reduced-motion: reduce) {
  .charfx-char {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
    animation: none !important;
  }
}