/*
 * 要素の初期化と共通ユーティリティ
 */
*,
*::before,
*::after {
	box-sizing: border-box;
}

html {
	overflow-y: scroll;
	-webkit-text-size-adjust: 100%;
	text-size-adjust: 100%;
	scroll-behavior: smooth;
}

body,
h1, h2, h3, h4, h5, h6,
p, ul, ol, li, dl, dt, dd, figure, table, td, th, form, address, blockquote {
	margin: 0;
	padding: 0;
}

body {
	font-family: var(--font-sans);
	font-size: var(--fs-base);
	line-height: 1;
	color: var(--color-text);
	background: var(--color-white);
}

ul,
ol {
	list-style: none;
}

iframe {
	border: 0;
}

img {
	max-width: 100%;
	height: auto;
	vertical-align: baseline;
	border: 0;
}

table {
	border-collapse: collapse;
	border-spacing: 0;
	width: 100%;
}

hr {
	height: 1px;
	margin: 1em 0;
	border: 0;
	border-top: 1px solid var(--color-border);
}

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

/*
 * div の行の高さを 150% にする（旧テーマの設定 css_code「div { line-height: 150%; }」と同じ）。
 * 150% は div の文字サイズ（通常 15px）から 22.5px に固定され、中の要素に引き継がれる。
 * 旧テーマの見た目はこの値を前提に組まれているので、本文・テンプレートとも同じにしておく。
 */
div {
	line-height: 150%;
}

a {
	color: var(--color-text);
	text-decoration: none;
	transition: color var(--duration-fast) ease, background-color var(--duration-fast) ease;
}

a:hover {
	color: var(--color-accent);
	text-decoration: underline;
}

/*
 * 見出しの折り返しをそろえる。
 * text-wrap: balance … 各行の長さが近くなるように折り返す（最後の行に 1〜2 文字だけ残らない）
 * word-break: auto-phrase … 日本語を文節の切れ目で折り返す（「ファーマーズマーケッ／ト」のような切れ方を避ける）
 * どちらも対応していないブラウザでは無視され、今までどおりの折り返しになる。
 */
h1, h2, h3, h4, h5, h6,
.page-hero__title,
.front-boxes__title,
.front-scenery__title,
.dis-list__title,
.post-grid__title,
.news-list__title,
.front-news__title,
.accordion__title,
.box__title,
.service__title {
	text-wrap: balance;
	word-break: auto-phrase;
}

/* 見出し用の明朝体（旧 .rich_font、headline_font_type=type2） */
.u-serif {
	font-family: var(--font-serif);
	font-weight: 400;
}

/* 画面には出さず、読み上げには残す */
.u-visually-hidden {
	position: absolute !important;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
}

.skip-link:focus {
	position: fixed !important;
	top: 8px;
	left: 8px;
	z-index: 10000;
	width: auto;
	height: auto;
	padding: 8px 16px;
	clip: auto;
	color: var(--color-white);
	background: var(--color-ink);
}

/* アイコン（tokens.css の --icon-*）を疑似要素に描く共通の型 */
.u-icon::before,
.breadcrumb__item::before,
.breadcrumb__item--home .breadcrumb__link::before,
.menu-button::before,
.return-top::before,
.social-links__link::before {
	content: "";
	display: block;
	background-color: currentColor;
	-webkit-mask: var(--icon) center / contain no-repeat;
	mask: var(--icon) center / contain no-repeat;
}

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

	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		transition-duration: 0.01ms !important;
	}
}