/* テキストリンク。文字色と位置を保ち、下線だけを滑らかに伸ばす。 */
.text-motion, a.text-motion,
.text-motion:is(:hover, :focus-visible), a.text-motion:is(:hover, :focus-visible) { text-decoration: none; }
.text-motion .link-label {
  background-image: linear-gradient(currentColor, currentColor);
  background-repeat: no-repeat;
  background-position: left bottom;
  background-size: 0% 1px;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
  transition: background-size .4s cubic-bezier(.22, .75, .25, 1);
}
/* 本文中のリンクは、通常時も薄い下線で見分けられるようにする。 */
.text-motion-inline .link-label {
  background-image: linear-gradient(currentColor, currentColor), linear-gradient(var(--line), var(--line));
  background-repeat: no-repeat;
  background-position: left bottom;
  background-size: 0% 1px, 100% 1px;
}
.text-motion:focus-visible .link-label { background-size: 100% 1px, 100% 1px; }
@media (hover: hover) {
  .text-motion:hover .link-label { background-size: 100% 1px, 100% 1px; }
}
/* 現在ページはオレンジで示す。ホバー・フォーカスでも下線を付けない。 */
:is(.desktop-nav, .menu-nav, .footer-nav) a[aria-current] { color: var(--accent); text-decoration: none; }
:is(.desktop-nav, .menu-nav, .footer-nav) a[aria-current] .link-label { background-image: none; }
.menu-nav a[aria-current] .menu-link-description { color: inherit; }
.desktop-nav > a.text-motion:is(:hover, :focus-visible) { opacity: 1; }

/* 既存の瞬間的な下線を解除。記事は文字の長さ・折り返しに合わせて描く。 */
.news-row:is(:hover, :focus-visible) .news-article-title,
.note-card:is(:hover, :focus-visible) .note-article-title,
.news-adjacent a:is(:hover, :focus-visible) strong,
.footer-channel:is(:hover, :focus-visible) .footer-channel-name { text-decoration: none; }
.contact-email.text-motion, .contact-email.text-motion:hover { border-bottom-color: transparent; }

@media (prefers-reduced-motion: reduce) {
  .text-motion .link-label { transition: none; }
}