/* ==========================================================================
   Foundation（全サイト共通: リセット・本文の基本・フォーカス・中身の幅）
   - 読み込みの順: tokens.css → common/*.css → {事業}/*.css（inc/setup.php）
   - 事業ごとの書体・色は {事業}/layout.css の body で決める（ここでは決めない）
   - SP は 767px 以下（tokens.css と同じ区切り）
   ========================================================================== */

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

html {
	-webkit-text-size-adjust: 100%;
	text-size-adjust: 100%;
	scroll-behavior: smooth;
	scroll-padding-top: var(--header-height, 96px); /* ページ内リンクで見出しがヘッダーに隠れないように */
}

body {
	margin: 0;
	min-height: 100vh;
	color: var(--color-text-primary);
	background: var(--color-bg-canvas);
	line-height: 1.8;
	overflow-wrap: anywhere;
	word-break: auto-phrase; /* 日本語を文節で折り返す（対応していないブラウザは通常の折り返し） */
	/* 最後の行に1〜2文字だけが落ちないように、行の長さを整える（Chrome・Safari 26。対応していないブラウザは通常の折り返し。2026-10-05）
	   短い札・見出しで効かない所は、部品の側で balance か keep-all と <wbr> にする */
	text-wrap: pretty;
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}

/* SP の文章（記事の本文・段落・箇条書き・よくある質問の答え・注意書き）は、文節で折らず右端まで詰めて折り返す。
   文節で折ると行の右が平均 45〜95px あき、文字の塊が左に寄って見えていた（2026-10-05 ユーザー決定。PC は文節のまま）。
   1つ目：BEM の要素名に text・body・answer・note・caution・hint・desc を含む p・li・dd・figcaption（__item-text・__step-text なども）。
          見出し・ボタン・札・カードの題名（title・label・name・heading を含むもの）と、SP で効く改行（<br>・<br class="u-sp-br">）を入れて組んだ文は文節のまま
          （詰めると <br> の手前に1〜2字だけ残るため）。表のセル（td・th・__td）・目次・法人ページの修繕計画の札（p-business__plan-text）も文節のまま。
          リード（lead）は 2026-10-05 のユーザー指摘「かなさのトップ全体が左に偏っている」で詰める側に入れた
   2つ目：記事の本文・よくある質問の答え・代表メッセージの中の p・li・figcaption。ここの <br> は文の区切りなので、外すのは u-sp-br を入れた文だけ。
          「参考にした情報」の項目（c-column-sources__item。資料と発行元の名前が並ぶ）は文節のまま（詰めると「支援セン／ター」と名前の途中で切れる）
   3つ目：文が p に入っていない答え・カードの説明文（名前で指定）
   4つ目：is-text-fill（JS が、SP 用の決めた改行（u-sp-br）を入れた左寄せの文・リードに付ける。下で u-sp-br を外して詰める）
   文の最後と <br> の手前の4字は、JS（assets/js/common/text-wrap.js）が離れないようにまとめる（「…でき／ます。」と「ます。」だけが残らないように）。
   JS の側にも同じセレクターがある（変えるときは両方）。:where() で詳細度を 0 にしているので、部品の側の keep-all・<wbr> の指定が勝つ */
@media (max-width: 767px) {
	:where(
		:is(p, li, dd, figcaption)[class*="__"]:is([class*="text"], [class*="body"], [class*="lead"], [class*="answer"], [class*="note"], [class*="__dd"], [class*="caution"], [class*="hint"], [class*="desc"], .p-privacy__list-item, .p-sdgs-pillar__point):not([class*="title"], [class*="label"], [class*="name"], [class*="heading"], .p-business__plan-text):not(:has(br:not(.u-pc-br))),
		:is([class*="-single__content"], [class*="__answer"], .p-message-main__text) :is(p, li, figcaption):not([class*="title"], .c-column-sources__item):not(:has(br.u-sp-br)),
		:is(.c-faq-item__answer, .p-kanasa-faq__answer, .c-business-card__text, .c-tool-card__text, .p-company-related__text):not(:has(br.u-sp-br)),
		.is-text-fill
	) {
		word-break: normal;
		line-break: strict; /* 行頭に「、」「。」「ゃ」「ー」などを置かない */
		text-wrap: wrap; /* body の pretty を外す。Safari（iPhone）の pretty は段落の全部の行を短めに組み直し、行ごとに右が 54〜70px あいて「変な改行」に見えていた（2026-10-05 ユーザー指摘。WebKit で確かめた）。最後の行が短くなるのは text-wrap.js で防ぐ */
	}

	/* SP 用の決めた改行（u-sp-br）を入れた左寄せの文・リード（JS が is-text-fill を付ける。中央寄せの文は付けない）：
	   決めた改行は Chrome の字幅で決めたもので、Safari では手前に「支給され、」のような短い行ができて左に寄って見えた（2026-10-05 ユーザー指摘）。
	   SP では改行を外して詰める。<br>（PC と SP の両方の改行）も、読点・句点などのあとのもの（JS が is-soft-br を付ける）は外す。電話番号の前などの改行は残す */
	:where(.is-text-fill) :is(br.u-sp-br, br.is-soft-br) {
		display: none;
	}
}

/* よくある質問の問い（全部の事業・PC と SP）：文節で折るのは今のまま、行の長さをそろえ（balance）、行頭に「ー」「ゃ」などを置かない（strict）。
   問いの最後の4字は JS（assets/js/common/text-wrap.js）が離さない（「できます／か？」と「か？」だけが残らないように。2026-10-05 ユーザー決定「テーマで整える」）。
   :where() で詳細度を 0 にしているので、部品の側の keep-all・<wbr> の指定が勝つ */
:where(.c-faq-item__question, .c-faq-item-paint__question, .p-kanasa-faq__question, .p-teyll-faq__q-text) {
	line-break: strict;
	text-wrap: balance;
}

/* 見出し・目次・記事の題（SP の Safari。2026-10-06 ユーザー決定「テーマで直す」）：
   コラムの題（h1・塗装・防水の下層の h1）・本文の h2・h3・「この記事でわかること」・記事の下の「新着の記事」「ほかのコラム」の題・
   ページの下の帯の見出し（「お問い合わせ・ご相談」「介護保険で支給される額の目安は？」「お気軽にご相談ください！」）。
   iPhone の Safari は文節で折れないので、最後の1〜2字だけが次の行に落ちていた（「…お手入／れ」「…ご相／談」。コラム 106本で WebKit 375px 122か所・320px 262か所）。
   行の長さをそろえ（balance）、行頭に「ー」「ゃ」などを置かない（strict）。最後の字も JS（assets/js/common/text-wrap.js の HEADINGS）が離さない。
   Chrome は文節（auto-phrase）と pretty のまま（1〜2字の行はコラム 106本で 375px 2か所・320px 8か所だけ。全部を balance にすると約500か所の折り返しが変わり、
   「どんな種類が／ある？」のように前より悪くなる所もあった）。
   PC は今のまま（PC の幅では1〜2字の行がなかった）。施工事例・お知らせの詳細の題は、部品の側で前から balance。
   コラム以外の見出し・カードの題・ボタン・表などは、ここでは balance にしない（2026-10-06 にサイト全体へ広げたとき、Safari で全部を balance にすると
   「お任せくだ／さい｜」「マーケティングゼ／ロを」と、1〜2字の行がなかった題まで語の途中で切れたため）。1〜2字の行が出た所だけ JS（text-wrap.js の③）が直す。
   :where() で詳細度を 0 にしているので、部品の側の指定が勝つ */
@supports not (word-break: auto-phrase) {
	@media (max-width: 767px) {
		:where(
			.c-page-header-paint__title,
			.l-cta-paint .c-heading-paint__title,
			.p-column-single__content :is(h2, h3),
			.p-column-single__toc-text,
			.p-column-single__popular-text,
			.p-kanasa-column-single__title,
			.p-kanasa-column-single__content :is(h2, h3),
			.p-kanasa-column-single__toc-text,
			.p-kanasa-column-single__related-text,
			.p-kanasa-column-single__cta-title,
			.p-kanasa-consult__title
		) {
			line-break: strict;
			text-wrap: balance;
		}

		/* 決まった文の見出し・ボタン（帯の見出しなど）は、テンプレートで <wbr> を入れた所でだけ折り返す（「お問い合わせ・／ご相談」「お気軽に／ご相談ください！」。
		   balance だけでは「お問い合わ／せ・ご相談」と語の途中で切れていた）。
		   塗装・防水のボタン（「フォームで／相談する」「見積もりを／はじめる」「無料で診断・／見積もり」。paint/button.php の {wbr}。2026-10-06）も */
		:where(.l-cta-paint .c-heading-paint__title, .p-kanasa-column-single__cta-title, .p-kanasa-consult__title, .c-button-paint__label):has(wbr) {
			word-break: keep-all;
		}
	}
}

/* 文節で折れないブラウザ（iPhone・Mac の Safari・Firefox）では、行の長さを整える pretty を使わない（2026-10-05 ユーザー指摘）。
   Safari の pretty は段落の全部の行を組み直し、短い見出しや中央寄せの文でも、幅に入るはずの「国家資格を持つプロの」が「国家資格を持／つプロの」と折れていた。
   Chrome は word-break: auto-phrase と pretty のまま */
@supports not (word-break: auto-phrase) {
	body {
		text-wrap: wrap;
	}
}

/* ログインしたまま見たとき（WordPress の管理バーあり）：画面の上に止めるヘッダー・目次は、管理バーの高さの下に止める（2026-10-05）
   601px 以上は管理バーが画面に固定（PC 32px・782px 以下 46px）。600px 以下は管理バーが一緒にスクロールするので 0 */
.admin-bar {
	--admin-bar-offset: var(--wp-admin--admin-bar--height, 32px);
}

@media (max-width: 600px) {
	.admin-bar {
		--admin-bar-offset: 0px;
	}
}

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

/* :where() で強さを 0 にして、各部品のクラスの padding が必ず勝つようにする（2026-10-02 監視役の指摘） */
:where(ul[class], ol[class]) {
	padding: 0;
	list-style: none;
}

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

a {
	color: inherit;
	text-decoration-skip-ink: auto;
}

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

button {
	cursor: pointer;
}

table {
	border-collapse: collapse;
}

[hidden] {
	display: none !important;
}

/* ---------- フォーカス（キーボードで操作したときだけ、はっきり見せる） ---------- */
:focus {
	outline: none;
}

:focus-visible {
	outline: 3px solid var(--focus-color, var(--color-border-brand));
	outline-offset: 3px;
	border-radius: 4px;
}

/* ---------- 動きを減らす設定の人には、動きを止める ---------- */
@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}

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

/* ---------- 中身の幅（PC 1200px・左右の余白 120 → SP 20） ---------- */
.l-container {
	width: 100%;
	max-width: calc(1200px + var(--container-gutter, 40px) * 2);
	margin-inline: auto;
	padding-inline: var(--container-gutter, 40px);
}

.l-container--narrow {
	max-width: calc(720px + var(--container-gutter, 40px) * 2); /* 本文の幅（1行 720px まで） */
}

.l-container--wide {
	max-width: none;
}

@media (max-width: 767px) {
	.l-container {
		--container-gutter: 20px;
	}
}

/* ---------- 補助 ---------- */

/* 読み上げだけに出す */
.u-visually-hidden {
	position: absolute !important;
	width: 1px !important;
	height: 1px !important;
	padding: 0 !important;
	margin: -1px !important;
	overflow: hidden !important;
	clip: rect(0, 0, 0, 0) !important;
	white-space: nowrap !important;
	border: 0 !important;
}

/* 本文へ飛ぶリンク（キーボードで最初に出る） */
.c-skip-link {
	position: absolute;
	top: 8px;
	left: 8px;
	z-index: 1000;
	padding: 12px 16px;
	background: var(--color-bg-canvas);
	color: var(--color-text-primary);
	border-radius: 8px;
	transform: translateY(-200%);
	transition: transform 0.2s;
}

.c-skip-link:focus-visible {
	transform: none;
}

/* PC だけ・SP だけ */
@media (max-width: 767px) {
	.u-pc-only {
		display: none !important;
	}
}

@media (min-width: 768px) {
	.u-sp-only {
		display: none !important;
	}
}

/* 改行を SP だけで入れる（<br class="u-sp-br">） */
@media (min-width: 768px) {
	.u-sp-br {
		display: none;
	}
}

/* 改行を PC だけで入れる（<br class="u-pc-br">） */
@media (max-width: 767px) {
	.u-pc-br {
		display: none;
	}
}

/* 単語の途中で折り返さない塊（<span class="u-nowrap">） */
.u-nowrap {
	white-space: nowrap;
}

/* メニューを開いている間は後ろをスクロールさせない（common.js が html に付ける） */
html.is-menu-open,
html.is-menu-open body {
	overflow: hidden;
}

/* 画面下の固定の問い合わせバーがあるページは、フッターの下にバーの高さぶんの余白（塗装・防水とかなさ） */
@media (max-width: 767px) {
	body.has-fixbar {
		padding-bottom: calc(76px + env(safe-area-inset-bottom, 0px));
	}
}