@charset "UTF-8";

/*▼▼ 読了進捗バー ▼▼*/
.read_progress {
  display: none;
}
@supports (animation-timeline: scroll()) {
  html {
    timeline-scope: --favorite;
  }
  .inner_main {
    overflow: clip;
  }
  .conts_favorite {
    view-timeline: --favorite block;
    view-timeline-inset: 40% 40%;
  }

  .read_progress {
    display: block;
    height: 4px;
    position: absolute;
    left: 0;
    right: 0;
    pointer-events: none;
    overflow-x: clip;
  }
  .read_progress_header {
    bottom: 0;
  }
  .read_progress_fixed {
    bottom: 100%;
  }
  .read_progress::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    background-color: #d6ad4a;
    animation: read_progress_fill linear both;
    animation-timeline: scroll(root block);
  }
  .read_progress_mover {
    position: absolute;
    animation: read_progress_move linear both;
    animation-timeline: scroll(root block);
  }
  .read_progress_header .read_progress_mover {
    top: 100%;
  }
  .read_progress_fixed .read_progress_mover {
    bottom: 0;
  }
  .read_progress_panda {
    display: block;
    pointer-events: auto;
    cursor: grab;
    touch-action: none;
    position: relative;
    animation: read_progress_roll linear both;
    animation-timeline: scroll(root block);
  }
  .read_progress_header .read_progress_panda {
    width: 34px;
    animation-iteration-count: 8;
  }
  .read_progress_fixed .read_progress_panda {
    width: 36px;
    animation-iteration-count: 3;
  }
  .read_progress_panda:active {
    cursor: grabbing;
  }
  .read_progress_panda img {
    display: block;
    width: 100%;
    height: auto;
    pointer-events: none;
  }
  .read_progress_panda .panda_heart {
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0;
    animation: read_progress_show steps(1) none;
    animation-timeline: --favorite;
    animation-range: cover 0% cover 100%;
  }
  .read_progress_panda .panda_normal {
    animation: read_progress_hide steps(1) none;
    animation-timeline: --favorite;
    animation-range: cover 0% cover 100%;
  }
  .read_progress_panda.is-liked .panda_heart {
    animation: none;
    opacity: 1;
  }
  .read_progress_panda.is-liked .panda_normal {
    animation: none;
    opacity: 0;
  }

  @keyframes read_progress_fill {
    from { width: 0; }
    to { width: 100%; }
  }
  @keyframes read_progress_move {
    from { left: 0; translate: 0; }
    to { left: 100%; translate: -100%; }
  }
  @keyframes read_progress_roll {
    from { rotate: 0turn; }
    to { rotate: 1turn; }
  }
  @keyframes read_progress_show {
    from, to { opacity: 1; }
  }
  @keyframes read_progress_hide {
    from, to { opacity: 0; }
  }

  @media screen and (max-width: 500px) {
    .read_progress_header {
      display: none;
    }
    #back-top {
      bottom: calc(var(--fixed_bar_height) + 42px);
    }
  }
  @media (min-width: 1100px) and (min-height: 520px) {
    .read_progress_header .read_progress_panda {
      width: 46px;
      animation-iteration-count: 15;
    }
  }
  @media (prefers-reduced-motion: reduce) {
    .read_progress_panda {
      animation: none;
    }
  }
}
/*▲▲ 読了進捗バー ▲▲*/