/* 全18丸矢印リンクはこのクラスだけで設定する。旧クラスは配置・JS hookのみ。
 * 文字末尾→丸の間隔は全画面幅6px固定。14px時の丸18.5px、字形中心補正.076emを共有。
 * 余白算定用の旧20/16px tokenとは独立。 */
body[data-design-center-navigation] {
  --dc-round-link-font-size: 14px;
  /* 末尾letter-spacing分を差し引き、文字サイズによらず文字→丸を6pxに保つ。 */
  --dc-round-link-gap: calc(6px - var(--dc-local-nav-letter-spacing, .08em));
  --dc-round-link-icon-size: calc(18.5em / 14);
  --dc-round-link-circle-size: 18.5px;
  --dc-round-link-optical-offset: 1.064px;
  --dc-round-link-top-inset: calc((44px - var(--dc-round-link-circle-size)) / 2 + var(--dc-round-link-optical-offset));
  --dc-round-link-bottom-inset: calc((44px - var(--dc-round-link-circle-size)) / 2 - var(--dc-round-link-optical-offset));
  --dc-round-link-icon-offset: .076em;
}
body[data-design-center-navigation] .design-center-roundLink {
  display: inline-flex; align-items: center; min-height: 44px; max-width: 100%; overflow-wrap: anywhere;
  font-family: "Noto Sans JP", sans-serif; font-size: var(--dc-round-link-font-size); font-weight: 400; line-height: 1.5;
  letter-spacing: var(--dc-local-nav-letter-spacing, .08em); font-kerning: normal; gap: var(--dc-round-link-gap);
  --dc-round-link-color: var(--color-text); --dc-round-link-circle: #000; --dc-round-link-arrow: var(--color-text-white, #fff);
  color: var(--dc-round-link-color);
}
body[data-design-center-navigation] .design-center-roundLink.design-center-roundLink--inverse { --dc-round-link-color: var(--color-text-white, #fff); --dc-round-link-circle: #fff; --dc-round-link-arrow: #000; }
body[data-design-center-navigation] .design-center-roundLink > .design-center-roundLink_icon {
  position: relative; top: var(--dc-round-link-icon-offset); display: grid; place-items: center;
  flex: 0 0 var(--dc-round-link-icon-size); width: var(--dc-round-link-icon-size); height: var(--dc-round-link-icon-size);
  border-radius: 50%; background: var(--dc-round-link-circle); color: var(--dc-round-link-arrow);
}
body[data-design-center-navigation] .design-center-roundLink > .design-center-roundLink_icon > svg { display: block; width: 100%; height: 100%; }
/* 元pathのstroke込み7×12(viewBox20)を、丸18.5内で可視4.5×6.5へ。
 * SVG/HTMLを変更せず共通pathだけ変換。TOPMoreは親emで同じ比率のまま拡大。 */
body[data-design-center-navigation] .design-center-roundLink > .design-center-roundLink_icon > svg > path {
  transform-box: view-box; transform-origin: 10px 10px; transform: scale(.694980695, .585585586);
}
body[data-design-center-navigation] .design-center-roundLink > :not(.design-center-roundLink_icon) { min-width: 0; }
/* hoverはfilterのみ。既存WAAPIのopacity／translateとfocusリングを維持する。 */
body[data-design-center-navigation] .design-center-roundLink:not(:disabled),
body[data-design-center-navigation] .design-center-roundLink:not(:disabled):hover { opacity: 1; text-decoration: none; filter: opacity(1); }
body[data-design-center-navigation] .design-center-roundLink { transition: filter .3s ease; }
body[data-design-center-navigation] .design-center-roundLink[data-design-center-reveal].is-design-center-reveal-active { transition: filter .3s ease !important; }
@media (hover: hover) {
  body[data-design-center-navigation] .design-center-roundLink:not(:disabled):hover { filter: opacity(.5); }
}
@media (prefers-reduced-motion: reduce), print {
  body[data-design-center-navigation] .design-center-roundLink,
  body[data-design-center-navigation] .design-center-roundLink[data-design-center-reveal].is-design-center-reveal-active { transition: none !important; }
}

/* 外部マークのboxと文字からの間隔。単位px。既存の丸矢印寸法・リンクgapは維持。 */
/* 調整メモ：外部マークは24px角、文字後4px。折返し末尾のtail spanとSVGはexternal-link.jsが作成し、underlineやfocus対象は元リンクに残す。 */
body .common-main a[data-design-center-external-link] {
  --dc-external-icon-size: 24px;
  --dc-external-icon-gap: 4px;
}
/* 既存の「リンク内span＝丸矢印」規則を新しいラベルだけ解除。通常本文はinlineを維持。 */
body .common-main a[data-design-center-external-link] :is(.design-center-externalLabel, .design-center-externalTail) {
  display: inline; flex: initial; width: auto; height: auto; min-width: 0;
  padding: 0; margin: 0; border: 0; border-radius: 0; background: none; color: inherit;
}
body .common-main a[data-design-center-external-link="arrow"] > .design-center-externalLabel { display: block; min-width: 0; }
body .common-main a[data-design-center-external-link] .design-center-externalTail { display: inline-block; white-space: nowrap; }
body .common-main a[data-design-center-external-link] svg.design-center-externalIcon {
  display: inline-block; width: var(--dc-external-icon-size); height: var(--dc-external-icon-size);
  margin-inline-start: var(--dc-external-icon-gap); vertical-align: middle; color: inherit; fill: currentColor;
}
/* 丸矢印付きだけ24px SVGを行高から外し、末尾行の文字中心＋共通字形補正へ配置する。
 * tailのnowrapと幅予約で末尾文字・外部マークの孤立を防ぐ。丸はラベル全体の中央。
 * 文字spanとSVGの独立したnav遮蔽を維持し、通常inline本文リンクには適用しない。 */
body .common-main a[data-design-center-external-link="arrow"] .design-center-externalTail {
  position: relative; padding-inline-end: calc(var(--dc-external-icon-size) + var(--dc-external-icon-gap));
}
body .common-main a[data-design-center-external-link="arrow"] svg.design-center-externalIcon {
  position: absolute; inset-inline-end: 0; margin-inline-start: 0;
  top: calc(50% - var(--dc-external-icon-size) / 2 + var(--dc-round-link-icon-offset));
}

/* 操作部と明示本文リンクのみをfilterで透過。FAQ回答や親revealを透過させない。 */
body[data-design-center-navigation] :is(.design-center-heroPause, .design-center-faq_item > summary, .design-center-rebirthHero_toggle, .design-center-aboutusMap):not(:disabled),
body[data-design-center-navigation] :is(.design-center-heroPause, .design-center-faq_item > summary, .design-center-rebirthHero_toggle, .design-center-aboutusMap):not(:disabled):hover { opacity: 1; filter: opacity(1); }
body[data-design-center-navigation] :is(.design-center-heroPause, .design-center-faq_item > summary, .design-center-rebirthHero_toggle, .design-center-aboutusMap) { transition: filter .3s ease; }
body[data-design-center-navigation] :is(.design-center-heroPause, .design-center-faq_item > summary, .design-center-rebirthHero_toggle, .design-center-aboutusMap)[data-design-center-reveal].is-design-center-reveal-active { transition: filter .3s ease !important; }
@media (hover: hover) {
  body[data-design-center-navigation] :is(.design-center-heroPause, .design-center-faq_item > summary, .design-center-rebirthHero_toggle, .design-center-aboutusMap):not(:disabled):hover { filter: opacity(.5); }
}
@media (prefers-reduced-motion: reduce), print {
  body[data-design-center-navigation] :is(.design-center-heroPause, .design-center-faq_item > summary, .design-center-rebirthHero_toggle, .design-center-aboutusMap),
  body[data-design-center-navigation] :is(.design-center-heroPause, .design-center-faq_item > summary, .design-center-rebirthHero_toggle, .design-center-aboutusMap)[data-design-center-reveal].is-design-center-reveal-active { transition: none !important; }
}

/* 非置換inlineにはfilterが適用されないため本文Eラーニングだけopacityを使う。
 * 自身はreveal対象ではなく、親pのWAAPIを変更しない。inline表示・改行は維持。 */
body[data-design-center-navigation] a.design-center-bodyHoverLink { filter: none; opacity: 1; transition: opacity .3s ease; }
@media (hover: hover) {
  body[data-design-center-navigation] a.design-center-bodyHoverLink:hover { filter: none; opacity: .5; }
}
@media (prefers-reduced-motion: reduce), print {
  body[data-design-center-navigation] a.design-center-bodyHoverLink { transition: none; }
}

/* SP共通リンク13px。既存em比率を保ち、可視寸法と余白算定tokenを同期する。 */
@media screen and (max-width: 1023px) {
  body[data-design-center-navigation] {
    --dc-round-link-font-size: 13px;
    --dc-round-link-circle-size: calc(18.5px * 13 / 14);
    --dc-round-link-optical-offset: calc(13px * .076);
  }
}

/* 一覧・関連記事・記事ヘッダーのタグ／カテゴリを、絞り込みボタンと同じ下線伸長／透過へ。
 * inline-blockの行高は親から継承し、段落余白・全角空白・文字寸法は維持する。 */
body[data-design-center-navigation] .common-main :is(.design-center-storiesTagLink, .design-center-articleTagLink) {
  position: relative; display: inline-block;
  color: inherit; font: inherit; letter-spacing: inherit; text-decoration: none !important;
  opacity: 1; transition: opacity .3s ease;
}
body[data-design-center-navigation] .common-main .design-center-articleCategory {
  position: relative; text-decoration: none; opacity: 1; transition: opacity .3s ease;
}
body[data-design-center-navigation] .common-main :is(.design-center-storiesTagLink, .design-center-articleTagLink, .design-center-articleCategory)::after {
  content: ""; position: absolute; right: 0; bottom: calc(50% - .5em - .2em - 1px); left: 0;
  height: 1px; background: currentColor; pointer-events: none;
  transform: scaleX(0); transform-origin: right center; transition: transform 240ms ease-out;
}
@media (hover: hover) {
  body[data-design-center-navigation] .common-main :is(.design-center-storiesTagLink, .design-center-articleTagLink, .design-center-articleCategory):hover { opacity: .5; }
  body[data-design-center-navigation] .common-main :is(.design-center-storiesTagLink, .design-center-articleTagLink, .design-center-articleCategory):hover::after {
    transform: scaleX(1); transform-origin: left center;
  }
}
body[data-design-center-navigation]:not([data-design-center-input="pointer"]) .common-main :is(.design-center-storiesTagLink, .design-center-articleTagLink, .design-center-articleCategory):focus-visible::after {
  transform: scaleX(1); transform-origin: left center;
}
@media (prefers-reduced-motion: reduce), print {
  body[data-design-center-navigation] .common-main :is(.design-center-storiesTagLink, .design-center-articleTagLink, .design-center-articleCategory),
  body[data-design-center-navigation] .common-main :is(.design-center-storiesTagLink, .design-center-articleTagLink, .design-center-articleCategory)::after { transition: none; }
}