/*
 * サイト共通のテキストリンク操作表現。
 * 通常時は下線を出さず、hover / focus / current 時だけ文字幅に沿って
 * 1pxの下線を右から左へ描画する。ボタンやカード全体リンクは対象外。
 */

.c-link-underline {
	display: inline;
	padding-bottom: 3px;
	background-image: linear-gradient(currentColor, currentColor);
	background-repeat: no-repeat;
	background-position: right bottom;
	background-size: 0 1px;
	-webkit-box-decoration-break: clone;
	box-decoration-break: clone;
	transition: background-size 0.3s ease;
}

a:hover > .c-link-underline,
a:focus-visible > .c-link-underline,
a[aria-current="page"] > .c-link-underline,
.l-header__menu-item.is-open > a > .c-link-underline {
	background-position: left bottom;
	background-size: 100% 1px;
}

/*
 * FAQの質問文はスマートフォンで複数行になりやすいため、
 * 行間と下線位置を共通で調整して行同士が詰まって見えないようにする。
 */
details.c-faq > summary {
	line-height: 1.85;
}

details.c-faq > summary .p-service-detail__faq-question {
	padding-bottom: 2px;
	-webkit-box-decoration-break: clone;
	box-decoration-break: clone;
}

/*
 * ヘッダーとフッターで共通利用する矢印付きリンク。
 * 矢印の形・位置・hover/focus時の色をこのファイルだけで管理し、
 * hover時も矢印そのものは移動させない。
 */
:is(
	.l-header__mega-overview,
	.l-header__mega-group li a,
	.l-header__industry-group a,
	.l-footer__links a,
	.l-footer__industry-group a
) {
	position: relative;
	text-decoration: none;
	transition: color 0.2s ease;
}

:is(
	.l-header__mega-overview,
	.l-header__mega-group li a,
	.l-header__industry-group a,
	.l-footer__links a,
	.l-footer__industry-group a
)::before {
	position: absolute;
	top: calc(50% - 1px);
	left: 5px;
	width: 7px;
	height: 7px;
	content: "";
	border-top: 1.5px solid var(--color-primary);
	border-right: 1.5px solid var(--color-primary);
	transform: translateY(-50%) rotate(45deg);
	transform-origin: center;
}

:is(
	.l-header__mega-overview,
	.l-header__mega-group li a,
	.l-header__industry-group a,
	.l-footer__links a,
	.l-footer__industry-group a
):hover,
:is(
	.l-header__mega-overview,
	.l-header__mega-group li a,
	.l-header__industry-group a,
	.l-footer__links a,
	.l-footer__industry-group a
):focus-visible {
	color: var(--color-primary);
}

/*
 * grid / flex 内でも下線がリンク行全体へ伸びず、文字幅だけになるようにする。
 */
.l-header__menu-item > a > .c-link-underline,
.l-header__mega-overview > .c-link-underline,
.l-header__mega-group li a > .c-link-underline,
.l-header__industry-group a > .c-link-underline,
.l-header__diagnosis > .c-link-underline,
.l-footer a > .c-link-underline {
	width: fit-content;
	flex: 0 0 auto;
	justify-self: start;
}

/*
 * 本文用の共通テキストリンクも通常時の常時下線をやめる。
 * c-link-underline を持つ場合は上記アニメーションを使い、
 * 直接テキストだけを持つ旧マークアップにはhover時の通常下線をフォールバックする。
 */
.c-text-link {
	text-decoration: none;
}

.c-text-link:hover,
.c-text-link:focus-visible {
	text-decoration: none;
}

.c-text-link:not(:has(> .c-link-underline)):hover,
.c-text-link:not(:has(> .c-link-underline)):focus-visible {
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 4px;
}

@media (prefers-reduced-motion: reduce) {
	.c-link-underline,
	:is(
		.l-header__mega-overview,
		.l-header__mega-group li a,
		.l-header__industry-group a,
		.l-footer__links a,
		.l-footer__industry-group a
	) {
		transition: none;
	}
}