@charset "utf-8";
/* =========================================================
   base.css — reset ＋ html / body / a / フォームの基礎
   ========================================================= */

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

/* height:auto へのアニメーションを許可（details の開閉に使う）*/
:root { interpolate-size: allow-keywords; }
body, h1, h2, h3, h4, p, figure, blockquote, dl, dd, ul, ol { margin: 0; padding: 0; }
ul, ol { list-style: none; }
img, picture, svg, video { max-width: 100%; height: auto; display: block; }
table { border-collapse: collapse; border-spacing: 0; }
input, button, textarea, select { font: inherit; color: inherit; }

/* ---- rem 流動サイズ体系 ---------------------------------------------
   〜640    SP（375px 基準）で拡縮
   640〜1200 PC レイアウトのまま、1200px 基準で拡縮（列数は変えない）
   1200〜    1rem = 10px で固定（文字はここで止める）
   レイアウトのブレークポイントは 640 の1本だけ。下の 1200 は html の font-size の上限で、
   列数や配置は切り替えない（CLAUDE.md の例外）
   ------------------------------------------------------------------ */
html { font-size: calc(100vw / 37.5); scroll-behavior: smooth; }

@media print, screen and (min-width: 640px) {
	html { font-size: calc(100vw / 120); }
}

@media print, screen and (min-width: 1200px) {
	html { font-size: 62.5%; }
}

/* ---- base ---------------------------------------------------------- */
body {
	/* iOS はアドレスバーの分だけ 100vh がずれるため dvh を使う */
	min-height: 100dvh;
	background-color: var(--cl-bg);
	color: var(--cl-text);
	font-family: var(--ff-base);
	font-size: var(--fs-m);
	font-weight: 400;
	line-height: var(--lh-body);
	word-break: break-word;
	text-rendering: optimizeSpeed;
	-webkit-text-size-adjust: 100%;
}

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

/* 本文の中のリンクだけ下線。ナビ・ボタン・カードには付けない */
:is(.c-txt, .c-list, .c-listNum, .c-dl, .c-table) a {
	text-decoration: underline;
	text-decoration-skip-ink: auto;
}

@media (any-hover: hover) {
	a { transition: opacity var(--ease-t-slow); }
	a:hover { opacity: 0.7; }
}

:focus-visible { outline: 2px solid var(--cl-accent); outline-offset: 2px; }

/* 見出しは c- コンポーネント側で装飾する。ここでは大きさのリセットのみ */
h1, h2, h3, h4 { font-size: inherit; font-weight: inherit; line-height: var(--lh-tight); }
:is(h1, h2, h3, h4) {
	text-wrap: pretty;
	word-break: auto-phrase;
	/* 文節の最小幅で親からはみ出さないように（狭い画面対策）*/
	overflow-wrap: anywhere;
}

/* ---- フォームの基礎 -------------------------------------------------- */
:is(input[type="text"], input[type="email"], input[type="tel"], input[type="url"], input[type="number"], input[type="date"], textarea, select) {
	width: 100%;
	padding: var(--sp-xs);
	border: 1px solid var(--cl-line-strong);
	background-color: var(--cl-bg);
	appearance: none;
}

textarea { min-height: 16rem; resize: vertical; }
::placeholder { color: var(--cl-text-sub); }

/* 入力中の枠はアクセント。フォーカスは「現在地」の一種として扱う（design-direction §8）。
   テキスト入力はマウスでも :focus-visible が当たるので、まとめて上書きする */
:is(input, textarea, select):is(:focus, :focus-visible) {
	border-color: var(--cl-accent);
	outline: 2px solid var(--cl-accent);
	outline-offset: 0;
}

/* ---- 印刷（SPD-v2 8章）--------------------------------------------- */
@media print {
	@page { size: A4; margin: 12mm; }

	html { font-size: 55%; }  /* 試し刷りして調整する */
	body { width: var(--w-inner); margin: 0 auto; }

	.header, .footer-nav { display: none !important; }

	[class*="iv-"] { opacity: 1 !important; transform: none !important; transition: none !important; }
	/* スクロールフェードイン：透明のまま印刷されないように */
	:is(.u-fade, .u-fade-group > *) { opacity: 1 !important; transform: none !important; animation: none !important; }

	:is(section, figure, table, dl) { break-inside: avoid; }
	:is(h2, h3) { break-after: avoid; }

	* { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}

/* ---- 視差効果を減らす設定への対応 ------------------------------------- */
@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after {
		animation: none !important;
		transition: none !important;
	}
}