/* 文字の内側層。本文媒体とTOP明示操作/矢印は既存描画面へclipだけを付け、寸法・動作を保つ。
 * 設定メモ：現役：TOPのnavigation-mask.jsが登録する文字・媒体・composite面。位置はJS実測、CSSはclip描画のみ担当。追加フェード幅は0px。要素上端からナビ下端までをJSのcutで遮蔽する。
 */
body .common-main span[data-design-center-navigation-text]:not([data-navigation-text-timeline]) {
  all: unset !important;
}
/* !importantでclip-pathをinitialへresetするとkeyframesが無効になるため、QA面のみ通常reset。 */
body .common-main span[data-design-center-navigation-text][data-navigation-text-timeline] {
  all: unset;
}
body .common-main span[data-design-center-navigation-text] {
  box-sizing: border-box !important;
  display: inline-block !important;
  min-width: 0 !important;
  max-width: 100% !important;
  vertical-align: baseline !important;
}
body .common-main span[data-design-center-navigation-text][data-navigation-text-block] {
  display: block !important;
}
/* リンク直下spanの丸矢印や絞込ラベルの装飾を、新しい内側spanに複製しない。 */
body .common-main span[data-design-center-navigation-text]::before,
body .common-main span[data-design-center-navigation-text]::after {
  content: none !important;
}
/* 調整メモ：clipのcutはnavigation-mask.jsがpxで毎frame設定。transform／translate中の実座標を使うため、ここに別のtopやmargin補正を加えない。 */
body.is-design-center-navigation-ready .common-main :is(span[data-design-center-navigation-text], [data-design-center-navigation-media], [data-design-center-navigation-decoration])[data-navigation-text-clipped]:not([data-navigation-text-timeline]) {
  /* 左右・下方向を広げ、文字面の外へ出るrubyや字形を欠かさず、上端だけ切る。
     gradient maskのborder-boxによるルビ欠けを避ける。追加フェード幅は0px。 */
  clip-path: polygon(-100000px var(--navigation-text-cut), 100000px var(--navigation-text-cut), 100000px 100000px, -100000px 100000px) !important;
}
/* ローカルQA限定の候補。CSSがスクロール進捗から上端を計算する。
 * exit-crossingはviewportより高い長文面でも上端→下端の交差を表す。
 * 64pxの前後延長でruby・丸矢印等のbox外描画を途中で欠かさない。
 * transform／fade／sticky面はJS側がこの属性を付けず、従来の実測を使う。
 * all:unset!importantの文字spanも対象なので、animation設定にも!importantが必要。
 */
@keyframes design-center-navigation-clip {
  from { clip-path: polygon(-100000px -64px, 100000px -64px, 100000px 100000px, -100000px 100000px); }
  to { clip-path: polygon(-100000px calc(100% + 64px), 100000px calc(100% + 64px), 100000px 100000px, -100000px 100000px); }
}
@media screen {
  body.is-design-center-navigation-ready .common-main :is(span[data-design-center-navigation-text], [data-design-center-navigation-media], [data-design-center-navigation-decoration])[data-navigation-text-timeline] {
    animation-name: design-center-navigation-clip !important;
    animation-duration: auto !important;
    animation-delay: 0s !important;
    animation-direction: normal !important;
    animation-play-state: running !important;
    animation-timing-function: linear !important;
    animation-fill-mode: both !important;
    animation-iteration-count: 1 !important;
    animation-timeline: view(block var(--navigation-timeline-bottom, 0px) 0px) !important;
    animation-range: exit-crossing -64px exit-crossing calc(100% + 64px) !important;
  }
}
@media print {
  body.is-design-center-navigation-ready .common-main :is(span[data-design-center-navigation-text], [data-design-center-navigation-media], [data-design-center-navigation-decoration]):is([data-navigation-text-clipped], [data-navigation-text-timeline]) {
    animation: none !important;
    clip-path: none !important;
  }
}