@charset "UTF-8";
/* ========== 基本設定 ========== */

/* ---------- 1. 変数 ---------- */
:root {
	/* システム設定 */
	color-scheme: light;

	/* 色（デフォルト：ライトモード） */
	--clr-primary: #1a1a1a;
	--clr-accent: #2563eb;
	--clr-bg: #ffffff;
	--clr-text: #334155;
	--clt-descbg: #eee;

	/* フォントサイズ */
	--fs-h1: clamp(2.25rem, 1.5rem + 4vw, 4rem);
	--fs-h2: clamp(1.75rem, 1.25rem + 3vw, 2.75rem);
	--fs-h3: clamp(1.5rem, 1.1rem + 2vw, 2rem);
	--fs-h4: clamp(1.25rem, 0.75rem + 1vw, 1rem);
	--fs-h5: 1rem;
	--fs-body: 1rem;

	/* フォントウェイト */
	--fw-light: 200;
	--fw-normal: 400;
	--fw-bold: 500;
}

/* ---------- 2. リセット＆ベース ---------- */
*,
*::before,
*::after {
	box-sizing: border-box;
	margin: 0;
	padding: 0;
}

html {
	scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}
}

body {
	font-family: m-plus-rounded-2p, sans-serif;
	font-style: normal;
	font-weight: var(--fs-normal);
	font-size: var(--fs-body);
	font-weight: var(--fw-normal);
	line-height: 1.6;
	color: var(--clr-text);
	background-color: var(--clr-bg);
	-webkit-font-smoothing: antialiased;
	display: flex;
	flex-direction: column;
	min-height: 100vh;
	/* 古いブラウザ対策 */
	min-height: 100svh;
}

main {
	flex: 1;
}

header,
footer {
	flex-shrink: 0;
}

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

img {
	vertical-align: middle;
}

svg {
	fill: currentColor;
}

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

button {
	margin: 0;
	background: none;
	border: none;
	cursor: pointer;
}

/* ---------- 3. 要素別設定 ---------- */
h1,
h2,
h3,
h4 {
	margin: 0;
	line-height: 1.3;
	font-weight: var(--fw-bold);
	font-feature-settings: "palt"1;
	/* 日本語対応 */
	font-kerning: normal;
	color: var(--clr-primary);
	overflow-wrap: break-word;
	word-break: keep-all;
}

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

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

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

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

h4 {
	font-size: var(--fs-h5);
}

a {
	color: inherit;
	text-decoration: none;
	transition: opacity 0.2s ease;
}

/* a:not([class]) {
	text-decoration: underline;
	text-underline-offset: 0.2em;
	text-decoration-thickness: 1px;
}  */

a:focus-visible {
	outline: 2px solid var(--clr-accent);
	outline-offset: 3px;
	border-radius: 2px;
}

@media (hover: hover) {
	a:hover {
		opacity: 0.7;
	}
}

p,
ul,
ol {
	margin: 0;
}

ul {
	list-style: none;
}

strong,
b {
	font-weight: var(--fw-bold);
}