/* ==========================================================================
   base.css — デザイントークン・リセット・タイポグラフィ（docs/02）
   ========================================================================== */

/* Tokens
   ----------------------------------------------------------------------- */
:root {
	/* Color（コントラスト比は白 or 背景色に対して 4.5:1 以上を確認済み） */
	--color-primary: #1e5b3a;
	--color-primary-dark: #164530;
	--color-accent: #d6136f;
	--color-accent-dark: #b00f5b;
	--color-accent-soft: #fce4ef;
	--color-navy: #1c2a4a;
	--color-text: #1f2320;
	--color-text-sub: #6b716c;
	--color-bg: #fff;
	--color-bg-gray: #f5f6f4;
	--color-border: #e3e6e2;
	--color-footer: #1a1d1b;
	--color-footer-text: #fff;
	--color-footer-sub: #9aa39d;
	--color-overlay: rgb(14 40 26 / 0.85);

	/* Font */
	--font-jp: "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;
	--font-en: "Oswald", "Noto Sans JP", sans-serif;
	--font-num: "Barlow Condensed", "Oswald", sans-serif;
	--font-script: "Kaushan Script", cursive;

	/* Font size（流体） */
	--fs-body: 0.9375rem;                                  /* 15px */
	--fs-small: 0.8125rem;                                 /* 13px */
	--fs-label: 0.6875rem;                                 /* 11px 英字ラベル */
	--fs-h1: clamp(1.75rem, 1.2rem + 2.2vw, 2.5rem);       /* 28→40px */
	--fs-h2: clamp(1.625rem, 1.4rem + 0.9vw, 2rem);        /* 26→32px */
	--fs-h3: clamp(1.125rem, 1rem + 0.5vw, 1.375rem);      /* 18→22px */
	--fs-num: clamp(3rem, 2.3rem + 3vw, 4.5rem);           /* 48→72px */

	/* Spacing / Layout */
	--container: 1200px;
	--gutter: 20px;
	--section-space: 72px;
	--header-h: 64px;
	--radius: 2px;

	/* Motion */
	--ease: cubic-bezier(0.22, 1, 0.36, 1);
	--duration: 0.3s;
}

@media (min-width: 768px) {
	:root {
		--fs-body: 1rem;
		--gutter: 40px;
	}
}

@media (min-width: 1024px) {
	:root {
		--section-space: 120px;
		--header-h: 80px;
	}
}

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

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

body,
h1,
h2,
h3,
h4,
h5,
h6,
p,
figure,
blockquote,
dl,
dd,
ul,
ol {
	margin: 0;
}

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

img,
video,
svg,
picture {
	display: block;
	max-width: 100%;
}

img,
video {
	height: auto;
}

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

button {
	cursor: pointer;
}

a {
	color: inherit;
	text-decoration: none;
}

/* Typography
   ----------------------------------------------------------------------- */
body {
	font-family: var(--font-jp);
	font-size: var(--fs-body);
	font-weight: 400;
	line-height: 1.9;
	letter-spacing: 0.04em;
	color: var(--color-text);
	background: var(--color-bg);
	-webkit-font-smoothing: antialiased;
	overflow-wrap: anywhere;
	line-break: strict;
}

h1,
h2,
h3,
h4,
h5,
h6 {
	font-weight: 700;
	line-height: 1.5;
	letter-spacing: 0.06em;
}

h1 {
	font-size: var(--fs-h1);
}

h2 {
	font-size: var(--fs-h2);
}

h3 {
	font-size: var(--fs-h3);
}

strong,
b {
	font-weight: 700;
}

small {
	font-size: var(--fs-small);
}

/* Focus（キーボード操作時のみ明示） */
:focus-visible {
	outline: 2px solid var(--color-accent);
	outline-offset: 3px;
}

/* Utilities
   ----------------------------------------------------------------------- */
.screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

.skip-link:focus {
	position: fixed;
	top: 8px;
	left: 8px;
	z-index: 1000;
	width: auto;
	height: auto;
	margin: 0;
	padding: 12px 20px;
	clip: auto;
	background: var(--color-bg);
	color: var(--color-primary);
	font-weight: 700;
	box-shadow: 0 4px 16px rgb(0 0 0 / 0.15);
}

.u-en {
	font-family: var(--font-en);
	letter-spacing: 0.02em;
}

.u-sp-only {
	display: inline;
}

@media (min-width: 768px) {
	.u-sp-only {
		display: none;
	}
}

.icon {
	width: 1em;
	height: 1em;
	flex-shrink: 0;
}

/* Reduced motion
   ----------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}
}