@charset "UTF-8";
/* 目次のCSSをカスタマイズ */

#rtoc-mokuji-wrapper > .rtoc-mokuji.mokuji_ol.level-1.is_close {
    display: block !important;
  }
  .rtoc-mokuji-content.rtoc_close #rtoc-mokuji-title.is_close, .rtoc-mokuji-content.rtoc_open #rtoc-mokuji-title.is_close {
      padding: 32px 28px 8px !important;
      @media (min-width: 1024px) {
        padding: 40px 64px 16px !important;
      }
  }
  ol.rtoc-mokuji.mokuji_ol.level-1.is_close{
  /* 調整用カスタムプロパティ */
  --toc-height: 200px;     /* 表示上限の高さ */
  --toc-fade-size: 48px;   /* フェードの長さ */
  --toc-bg: #fff;          /* フォールバック用の背景色（サイト背景に合わせて） */

  position: relative;
  max-height: var(--toc-height);
  overflow: hidden;

  /* モダン環境：内容そのものを下部でフェードアウト（背景色不要） */
  -webkit-mask-image: linear-gradient(
    to bottom,
    #000 0,
    #000 calc(100% - var(--toc-fade-size)),
    rgba(0,0,0,0) 100%
  );
  mask-image: linear-gradient(
    to bottom,
    #000 0,
    #000 calc(100% - var(--toc-fade-size)),
    rgba(0,0,0,0) 100%
  );
}

/* フォールバック（mask-imageが無い環境向け）：下部に薄い白カバーを被せる */
@supports not ((-webkit-mask-image: linear-gradient(#000, transparent)) or (mask-image: linear-gradient(#000, transparent))) {
  ol.rtoc-mokuji.mokuji_ol.level-1.is_close::after{
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: var(--toc-fade-size);
    pointer-events: none; /* 下のリンクをクリック可能にする */
    background: linear-gradient(to bottom, rgba(255,255,255,0), var(--toc-bg) 80%);
  }
}