#fp-nav ul li {
      /* 
    * active spanのホバーアニメーション打ち消し 
    */
      --active-margin: -4px;
      --default-margin: -2px;
      @media screen and (min-width: 768px) {
        --active-margin: -5px;
      }

      &:hover a.active span {
        margin: var(--active-margin) 0 0 var(--active-margin);
      }
      a.active span {
        margin: var(--active-margin) 0 0 var(--active-margin);
      }

      /* 
    * 通常のhover時のアニメーション 
    */
      &:hover a span {
        margin: var(--default-margin) 0 0 var(--default-margin);
      }
    }
    #fp-nav {
      /* 
    * ナビゲーション自体のスタイル上書き
    */
      /* mix-blend-mode: difference !important; */
    }
    #fp-nav ul li {
      /* 
    * spanのスタイル上書き
    */
      margin: 0px;
      width: 100%;
      height: 100%;

      a {
        padding: 6px;
        @media screen and (min-width: 768px) {
          padding: 12.5px;
        }
      }

      a span {
        transition: all 0.1s ease !important;
        width: var(--width) !important;
        height: var(--width) !important;
        background-color: white !important;
      }
      a:hover {
        span {
          transform: initial !important;
        }
      }
      a:not(.active) span {
        --width: calc(var(--rem) * 4);
      }
      a.active span {
        --width: calc(var(--rem) * 8);
      }
      @media screen and (min-width: 768px) {
        a:not(.active) span {
          --width: calc(var(--rem) * 5);
        }
        a.active span {
          --width: calc(var(--rem) * 10);
        }
      }
    }
    #fp-nav ul li {
      /* 
    * ツールチップを非表示
    * アクセシビリティを考慮して、スクリーンリーダー向けにツールチップを残す
    */
      .fp-tooltip {
        clip: rect(0 0 0 0);
        clip-path: inset(50%);
        width: 1px;
        height: 1px;
        overflow: hidden;
        position: absolute;
        white-space: nowrap;
      }
    }:where([data-fullpage="container"]):where(.astro-f5cwnnbe){[data-fullpage="section"] {height: 100%; width: 100%; overflow: hidden; &[data-section-key="animation"] {&::after {content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-image: url(/assets/img/dot-effect.png); background-repeat: repeat; pointer-events: none; z-index: 1;}} .fp-watermark {display: none;}} :where([data-fullpage="section"]) {.link {height: 100%; width: 100%;}}}.scroll-indicator:where(.astro-f5cwnnbe){grid-area:scroll-indicator}