#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; &#section1 {&::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;}}} :where([data-fullpage="section"]) {.link {height: 100%; width: 100%;} :where(.link) {.article { --pad-i: 2rem; padding-inline: var(--pad-i); height: 100%; width: 100%; display: grid; place-items: center; position: relative; } :where(.article) {.content {pointer-events: none; --margin: calc(var(--vw) * 24); display: grid; grid-template: "subtitle" max-content "title" max-content "description" max-content "scroll-indicator" max-content / 1fr; font-size: 2rem; position: absolute; left: var(--margin); width: min(calc(100vw - var(--margin) * 2),540px); z-index: 5; &[data-index="section1"] {bottom: 0;} &:not([data-index="section1"]) {bottom: min(calc(var(--vw) * 35),calc(var(--vh) * 35));} @media screen and (min-width: 768px) {pointer-events: auto; --margin: calc(var(--vw) * 96); --offset-margin: 0; width: calc(var(--vw) * 640); &[data-index="section1"],&:not([data-index="section1"]) {bottom: min(calc(var(--vw) * (80 - var(--offset-margin))),calc(var(--vh) * (80 - var(--offset-margin))));}}} :where(.content) {> *:not(.scroll-indicator) {opacity: 0;} .title {grid-area: title; margin-block-start: calc(var(--vw) * 10); line-height: var(--leading-none); @media screen and (min-width: 768px) {font-size: calc(var(--vw) * 36); margin-block-start: calc(var(--vw) * 18);} span.en {font-size: calc(var(--vw) * 32); font-family: var(--font-en); letter-spacing: var(--tracking-wide); line-height: var(--leading-none); font-weight: var(--font-medium); @media screen and (min-width: 768px) {font-size: calc(var(--vw) * 60);}} span.ja {font-size: calc(var(--vw) * 20); font-family: var(--font-ja); letter-spacing: var(--tracking-wider); line-height: var(--leading-comfortable); font-weight: var(--font-medium); @media screen and (min-width: 768px) {font-size: calc(var(--vw) * 34);}}} .subtitle {grid-area: subtitle; font-size: calc(var(--vw) * 12); line-height: var(--leading-snug); @media screen and (min-width: 768px) {font-size: calc(var(--vw) * 15);}} .description {grid-area: description; font-size: calc(var(--rem) * 12); letter-spacing: var(--tracking-widest); span {display: block;} span.margin-top-regular {margin-block-start: calc(var(--vw) * 12);} span.margin-top-large {margin-block-start: calc(var(--vw) * 14);} @media screen and (min-width: 768px) {font-size: calc(var(--vw) * 18); span.margin-top-regular {margin-block-start: calc(var(--vw) * 26);} span.margin-top-large {margin-block-start: calc(var(--vw) * 20);}} .annotation {@media screen and (min-width: 768px) {margin-block-start: calc(var(--vw) * 20);}} small {display: block; font-size: calc(var(--vw) * 10); line-height: var(--leading-snug); margin-block-start: calc(var(--vw) * 18); @media screen and (min-width: 768px) {font-size: calc(var(--vw) * 12); margin-block-start: calc(var(--vw) * 40);}}}} .video,.img {object-fit: cover; position: absolute; top: 0; left: 0; height: 100%;}}}}}:where(.astro-f5cwnnbe)[data-fullpage=section].news{background-color:var(--surface-secondary);.fp-watermark {display: none;}}:where([data-fullpage="section"].news):where(.astro-f5cwnnbe){.container {display: grid; grid-template: "title" max-content "." min(calc(var(--vw) * 41),calc(var(--vh) * 41)) "link-wrapper" max-content "." min(calc(var(--vw) * 41),calc(var(--vh) * 41)) "link" max-content / 1fr; justify-items: center; justify-content: center; align-content: center; margin: 0 auto; padding-block: calc(var(--vw) * 57); padding-inline: calc(var(--vw) * 38); height: 100%; width: min(100%,450px); @media screen and (min-width: 768px) {grid-template: "title . link" max-content ". . ." min(calc(var(--vw) * 68),calc(var(--vh) * 68)) "link-wrapper link-wrapper link-wrapper" max-content / max-content 1fr max-content; padding-inline: calc(var(--vw) * 96); padding-block: calc(var(--header-min-height-pc) + var(--vh) * 4); width: 100%;}} :where(.container) {.title {grid-area: title; font-size: calc(var(--vw) * 24); line-height: var(--leading-none); letter-spacing: var(--tracking-wide); font-weight: var(--font-medium); @media screen and (min-width: 768px) {font-size: calc(var(--vw) * 32);}} .link-wrapper {grid-area: link-wrapper;} :where(.link-wrapper) {.list {display: grid; @media screen and (min-width: 768px) {padding-inline: calc(var(--vw) * 96);}} :where(.list) {.item {display: flex; flex-direction: column; gap: calc(var(--vw) * 6); padding-block: min(calc(var(--vw) * 16),calc(var(--vh) * 16)); border-bottom-width: 1px; border-bottom-style: solid; &:first-child {border-top-width: 1px; border-top-style: solid;} @media screen and (min-width: 768px) {padding-block-end: calc(var(--vw) * 16); flex-direction: row; gap: calc(var(--vw) * 38); align-items: center; padding-block: min(calc(var(--vw) * 22),calc(var(--vh) * 22)); min-height: min(calc(var(--vw) * 108),calc(var(--vh) * 108));} .date {font-size: calc(var(--vw) * 12); line-height: var(--leading-none); letter-spacing: var(--tracking-wide); @media screen and (min-width: 768px) {font-size: calc(var(--vw) * 16);}} .text {font-size: calc(var(--vw) * 12); @media screen and (min-width: 768px) {font-size: calc(var(--vw) * 18);}}}}} .link {grid-area: link; text-align: center; font-size: calc(var(--vw) * 16); line-height: var(--leading-none); letter-spacing: var(--tracking-wide); font-weight: var(--font-medium); text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 2px; @media screen and (min-width: 768px) {font-size: calc(var(--vw) * 22);}}}}.scroll-indicator:where(.astro-f5cwnnbe){grid-area:scroll-indicator;line-height:var(--leading-none);letter-spacing:var(--tracking-wide);font-weight:var(--font-medium);text-align:center;width:max-content;justify-self:center;margin-block-start:min(calc(var(--vw) * 40),calc(var(--vh) * 40));display:grid;grid-template:"bar . text" max-content / max-content 10px max-content;align-items:start;z-index:5;.text {grid-area: text; writing-mode: vertical-rl; font-size: calc(var(--rem) * 10); line-height: var(--leading-none); letter-spacing: var(--tracking-wide); font-weight: var(--font-medium);} .bar {display: block; height: calc(var(--vw) * 60); grid-area: bar; &.first {background-color: var(--line-primary); width: 1px;} &:not(.first) {background-color: var(--line-tertiary); width: 1px;}} @media screen and (min-width: 768px) {grid-template: "text" max-content "." 22px "bar" max-content / max-content; justify-items: center; position: absolute; bottom: 0; right: calc(var(--vw) * 130); .text {font-size: calc(var(--vw) * 16);} .bar {height: min(calc(var(--vw) * 100),calc(var(--vh) * 100)); &:not(.first) {width: 2px;}}}}