/* ==========================================================================
   base.css — リセットと要素の既定値。クラスを持たない要素の見た目だけ。
   ========================================================================== */

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

html {
	-webkit-text-size-adjust: 100%;
	text-size-adjust: 100%;
	scroll-padding-top: calc(var(--ep-header-height) + var(--ep-space-s));
}

body {
	margin: 0;
	background: var(--ep-color-bg);
	color: var(--ep-color-ink);
	font-family: var(--ep-font-base);
	font-size: var(--ep-fs-sm);
	line-height: var(--ep-lh-base);
	letter-spacing: var(--ep-ls-base);
	-webkit-font-smoothing: antialiased;
	font-feature-settings: "palt" 0;
	overflow-x: clip; /* 横スクロールの発生源を body で止める（hidden だと sticky が効かなくなる） */
	/* 日本語の改行: 本文は通常の折り返し＋行頭禁則（strict） */
	overflow-wrap: anywhere;
	line-break: strict;
}

/* 見出し・キャッチ・ボタンなど短い文は文節の途中で折らない（「、」「。」の後ろの <wbr> でだけ折る・inc/helpers.php ep_text）。
   長い本文に keep-all を掛けると、狭い画面で句点だけが次の行に落ちるので本文には掛けない。 */
h1, h2, h3, h4,
.ep-keep,
.ep-hero__catch,
.ep-vhead__display,
.ep-vhead__title,
.ep-vhead__sub,
.ep-page-hero__catch,
.ep-button__label,
.ep-cta__title {
	word-break: keep-all;
}

/* 句点・読点だけ／1〜2字だけが次の行に落ちるのを防ぐ（全ページ共通）。
   1) keep-all の要素は折り返し位置が「、」「。」と ep_text() が助詞の後ろに入れる <wbr> だけ＝位置が足りないと
      はみ出し回避の強制改行（overflow-wrap）で句点の直前で折れていた。<wbr> を増やしたうえで、
   2) text-wrap: pretty で最終行が極端に短くならないように行を組む（対応ブラウザのみ。非対応でも 1) で防げる）。 */
h1, h2, h3, h4,
p,
li,
.ep-button__label {
	text-wrap: pretty;
}

/* 投稿データのタイトル（記事・お知らせ・実績）は ep_text() を通らず長いので、通常の折り返し＋行頭禁則にする
   （keep-all のままだと区切りの無い長いタイトルが強制改行され、句点だけが落ちることがある） */
.ep-post-card__title,
.ep-news-list__title,
.ep-work__title,
.ep-media-ph__title {
	word-break: normal;
}

h1, h2, h3, h4, h5, h6, p, figure, blockquote, dl, dd, ul, ol {
	margin: 0;
}

/* 詳細度を 0 にする（:where）。部品のクラス指定の padding が負けていた＝スマホの写真列の左右余白が 0 になっていた（10/18） */
:where(ul[class], ol[class]) {
	padding: 0;
	list-style: none;
}

h1, h2, h3, h4, h5, h6 {
	font-weight: var(--ep-weight-bold);
	line-height: var(--ep-lh-tight);
}

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

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

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

button {
	cursor: pointer;
}

table {
	border-collapse: collapse;
}

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

::selection {
	background: var(--ep-color-accent);
	color: var(--ep-color-on-dark);
}

/* ---- ユーティリティ（最小限） ---- */
.ep-visually-hidden {
	position: absolute !important;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
	border: 0;
}

.ep-skip-link {
	position: absolute;
	left: var(--ep-space-s);
	top: -100px;
	z-index: calc(var(--ep-z-header) + 1);
	padding: var(--ep-space-2xs) var(--ep-space-s);
	background: var(--ep-color-accent);
	color: var(--ep-color-on-dark);
}

.ep-skip-link:focus {
	top: var(--ep-space-s);
}

/* 動きを減らす設定（prefers-reduced-motion）でも動きは止めない（121 デモと同じ・ヤヤ決定 10/18。DESIGN.md 6章） */