/**
 * Shared foundation for renewed components.
 *
 * Keep global design tokens and cross-component utilities here. Existing
 * page content remains owned by style.css and style2021.css.
 */

:root {
	--renewal-color-primary: #4F8EE5;
	--renewal-color-primary-hover: #3778d3;
	--renewal-color-primary-soft: #eff6ff;
	--renewal-color-paper: #fff;
	--renewal-color-paper-rgb: 255 255 255;
	--renewal-color-ink: #101820;
	--renewal-color-border-soft: #edf0f4;
	--renewal-color-focus: #ffbe3d;
	--renewal-gradient-primary-start: #12479e;
	--renewal-gradient-primary-end: #4583e2;
	--renewal-gradient-primary: linear-gradient(
		90deg,
		var(--renewal-gradient-primary-start),
		var(--renewal-gradient-primary-end)
	);
	--renewal-font-sans: "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Yu Gothic", Meiryo, sans-serif;
}

:where(.renewal-header, .renewal-hero, .renewal-reasons) {
	font-family: var(--renewal-font-sans);
}

:where(.renewal-header, .renewal-hero, .renewal-reasons),
:where(.renewal-header, .renewal-hero, .renewal-reasons) *,
:where(.renewal-header, .renewal-hero, .renewal-reasons)::before,
:where(.renewal-header, .renewal-hero, .renewal-reasons)::after,
:where(.renewal-header, .renewal-hero, .renewal-reasons) *::before,
:where(.renewal-header, .renewal-hero, .renewal-reasons) *::after {
	box-sizing: border-box;
}

:where(.renewal-header, .renewal-hero, .renewal-reasons) a:hover {
	opacity: 1;
}

.renewal-text-gradient {
	color: var(--renewal-gradient-primary-start);
}

@supports ((background-clip: text) or (-webkit-background-clip: text)) {
	.renewal-text-gradient {
		background: var(--renewal-gradient-primary);
		background-clip: text;
		-webkit-background-clip: text;
		-webkit-text-fill-color: transparent;
	}
}

.screen-reader-text {
	border: 0;
	clip: rect(1px, 1px, 1px, 1px);
	clip-path: inset(50%);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute;
	width: 1px;
	word-wrap: normal;
}

.skip-link:focus {
	background: var(--renewal-color-paper);
	clip: auto;
	clip-path: none;
	color: var(--renewal-color-ink);
	display: block;
	font-size: 0.875rem;
	font-weight: 700;
	height: auto;
	left: 0.75rem;
	margin: 0;
	padding: 0.75rem 1rem;
	top: 0.75rem;
	width: auto;
	z-index: 10000;
}