@charset "UTF-8";

/* ========================================
   共通変数
======================================== */
:root {
	--color-text: #333333;
	--color-blue: #1689db;
	--color-green: #638b42;
	--color-border: #dbe9ef;
	--color-white: #ffffff;

	--font-body:
		"Hiragino Kaku Gothic ProN",
		"Yu Gothic",
		"Meiryo",
		sans-serif;

	--font-heading:
		"Yu Mincho",
		"Hiragino Mincho ProN",
		"Noto Serif JP",
		serif;

	--width-content: 1100px;
}

/* ========================================
   リセット
======================================== */
*,
*::before,
*::after {
	box-sizing: border-box;
}

body,
h1,
h2,
h3,
p,
ul,
ol,
figure {
	margin: 0;
}

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

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

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

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

button {
	cursor: pointer;
}

/* ========================================
   基本設定
======================================== */
html {
	scroll-behavior: smooth;
}

body {
	color: var(--color-text);
	background: var(--color-white);
	font-family: var(--font-body);
	font-size: 16px;
	line-height: 1.8;
	overflow-wrap: anywhere;
}

a:focus-visible,
button:focus-visible {
	outline: 3px solid var(--color-blue);
	outline-offset: 5px;
}

/* 各セクションで使う共通の横幅 */
.container {
	width: min(var(--width-content),
			calc(100% - 48px));
	margin-inline: auto;
}

/* 共通見出し */
.section-title {
	font-family: var(--font-heading);
	font-size: clamp(24px, 3vw, 32px);
	font-weight: 500;
	line-height: 1.6;
	text-align: center;
}

/* ========================================
   スマートフォン
======================================== */
@media (max-width: 767px) {
	.container {
		width: calc(100% - 40px);
	}
}

/* 動きを減らす設定への対応 */
@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}
}