/* ==========================================================================
   Base：変数・リセット・要素の初期スタイル
   色やフォントを変えるときは :root の変数を書き換える
   ========================================================================== */

:root {
	/* ブランドボードのカラーパレット */
	--c-wine: #580f18;
	--c-wine-deep: #350a0e;
	--c-blue: #93a2b9;
	--c-blue-pale: #bcc4d4;
	--c-blue-light: #d2d5df;

	--c-ink: #2e2729;
	--c-muted: #6e6668;
	--c-line: #dcd8d4;
	--c-base: #f3f1ed;
	--c-surface: #fbfaf8;
	--c-cream: #e9e6e1;
	--c-accent: var(--c-wine);
	--c-accent-dark: var(--c-wine-deep);
	--c-accent-soft: #efe4e3;
	--c-sub: #5d6d87;
	--c-sub-soft: #e4e7ee;
	--c-focus: var(--c-blue);

	--font-body: "Zen Kaku Gothic New", "Hiragino Sans", "Noto Sans JP", sans-serif;
	--font-heading: "Shippori Mincho", "Hiragino Mincho ProN", "Yu Mincho", serif;
	--font-display: "Marcellus", "Shippori Mincho", serif;

	--radius-s: 2px;
	--radius: 4px;
	--radius-l: 6px;
	--shadow: 0 12px 32px -18px rgba(53, 10, 14, .25);

	--container: 1120px;
	--container-narrow: 760px;
	--gutter: clamp(16px, 4vw, 40px);
	--section-y: clamp(64px, 10vw, 120px);
	--header-h: 72px;
}

*,
*::before,
*::after {
	box-sizing: border-box;
}

html {
	-webkit-text-size-adjust: 100%;
	scroll-behavior: smooth;
	scroll-padding-top: calc(var(--header-h) + 16px);
}

@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	*, *::before, *::after { transition: none !important; animation: none !important; }
}

body {
	margin: 0;
	background: var(--c-base);
	color: var(--c-ink);
	font-family: var(--font-body);
	font-size: 1rem;
	line-height: 1.9;
	letter-spacing: .03em;
	-webkit-font-smoothing: antialiased;
	overflow-wrap: anywhere;
}

h1, h2, h3, h4, h5, h6 {
	margin: 0;
	font-family: var(--font-heading);
	font-weight: 600;
	line-height: 1.6;
	letter-spacing: .06em;
}

p, ul, ol, dl, figure, blockquote {
	margin: 0;
}

ul, ol {
	padding: 0;
	list-style: none;
}

img, svg, video, iframe {
	max-width: 100%;
	vertical-align: middle;
}

img {
	height: auto;
}

a {
	color: var(--c-sub);
	text-underline-offset: .2em;
}

a:hover {
	color: var(--c-accent);
}

:focus-visible {
	outline: 3px solid var(--c-focus);
	outline-offset: 2px;
}

button, input, select, textarea {
	font: inherit;
	color: inherit;
}

table {
	width: 100%;
	border-collapse: collapse;
}

.screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(1px, 1px, 1px, 1px);
	white-space: nowrap;
}

.u-center { text-align: center; }
.u-mt { margin-top: 2rem; }