@layer base {
	:where(html) {
		font-size: 100%;
	}

	:where(body) {
		font-family:
					"LINE Seed JP",
					"Noto Sans JP",
					"Yu Gothic",
					"Hiragino Kaku Gothic ProN",
					"Segoe UI",
					-apple-system,
					"Roboto",
					sans-serif;
		font-size: var(--font-body);
		line-height: var(--line-height-body);
		letter-spacing: var(--letter-spacing-body);
		color: var(--text-primary);
		-webkit-font-smoothing: antialiased;
		-moz-osx-font-smoothing: grayscale;
		background-color: floralwhite;
		/*overflow: hidden;*/
	}

	/* Link */
	:where(a:link, a:active, a:visited) {
		color: var(--link-default);
	}
	:where(a:hover) {
		color: var(--link-hover);
	}
	
	/* Heading */
	:where(h1, h2, h3, h4, h5, h6) {
		margin: 0 0 0.6em 0;
		line-height: var(--line-height-heading);
		font-weight: normal;
		letter-spacing: 0;
		word-break: keep-all; /* 日本語見出しの改行制御 */
	}
	:where(h1) {
		display: flex;
		align-items: center;
		justify-content: center;
		gap: 0.5rem;
		padding-top: 1rem;
		text-align: center;
		font-size: var(--font-h1);
		color: var(--text-secondary);

		> svg {
			position: relative;
			bottom: -0.15rem;
			width: 1.2em;
			height: 1.2em;
			fill: var(--primary-base);
		}
		> span {
			padding-right: 1.2em;
		}
	}
	:where(h2) {
		padding-top: 2rem;
		font-size: var(--font-h2);
		text-align: center;
		color: var(--text-secondary);
	}
	:where(h3) {
		font-size: var(--font-h3);
		text-align: center;
	}
	:where(h4) {
		font-size: var(--font-h4);
		font-weight: bold;
	}
	:where(h5) { font-size: var(--font-h5); }
	:where(h6) { font-size: var(--font-h6); }

	/* Text set */
	:where(.text-body-xl)	{ font-size: var(--font-body-xl);	line-height: var(--line-height-body); }
	:where(.text-body-lg)	{ font-size: var(--font-body-lg);	line-height: var(--line-height-body); }
	:where(.text-body)		{ font-size: var(--font-body);		line-height: var(--line-height-body); }
	:where(.text-small)		{ font-size: var(--font-small);		line-height: 1.6; }
	:where(.text-caption)	{ font-size: var(--font-caption);	line-height: 1.4; }
	:where(.text-ultra-small){ font-size: var(--font-ultra-small);line-height: 1.3; }

	/* 補助：長い段落の最大幅（読みやすさ向上） */
	:where(.prose) {
		max-width: 65ch; /* 目安：45〜75文字/行 */
		margin-left: auto;
		margin-right: auto;
		padding: 0 1rem;
	}
	img, svg, video, canvas, audio, iframe, embed, object {
    	display: block; /* インライン要素として扱われる際の余計な隙間を削除 */
	}
	img, video {
		max-width: 100%; /* レスポンシブ対応 */
		height: auto; /* 縦横比を維持 */
	}
	:is(button, input, textarea,select) {
		font: inherit; /* フォントファミリー、サイズなどを親要素から継承させる */
		color: inherit; /* 文字色を継承 */
	}
}