/* =========================================================================
   base.css — 土台（キャンバス・組版・リンク・フォーカス・フォーム）
   =========================================================================

   ■ 詳細度の方針
   このファイルは wp_head 優先度8で出力され、SWELLのインラインCSS（優先度9）より
   先に出る。同詳細度では負けるため、SWELLの部品に当たっている宣言を上書きする
   ときは #body_wrap を前置する。SWELL側のインラインCSSは267セレクタ中
   idを含むものが8件だけで最大4クラスなので、id1つで確実に上回る（実測）。

   ■ SWELLのCSS変数について
   SWELLは :root に --color_bg / --color_text などを インラインで出力する。
   :root への再定義は「後に出た方が勝つ」ため子テーマからは上書きできない。
   したがって変数を書き換えるのではなく、変数を参照している側のプロパティを
   #body_wrap 付きで直接上書きする。
   ========================================================================= */

:root {
	--sks-base-loaded: 1;
	--sks-probe-colormix: no;
}

@supports (color: color-mix(in srgb, #000 50%, #fff)) {
	:root {
		--sks-probe-colormix: yes;
	}
}

/* -------------------------------------------------------------------------
   キャンバス
   ------------------------------------------------------------------------- */

html {
	background-color: var(--sks-canvas);
	/* フォーム部品・スクロールバー・オートフィルの色を配色に合わせる。
	   キャンバス（#f4f0e8）は明るいので light 固定。 */
	color-scheme: light;
	-webkit-text-size-adjust: 100%;
	/* ヘッダーが固定になったので、ページ内リンクや戻ったときの位置復元で
	   飛び先がヘッダーの下に隠れる。その分だけ手前で止める。 */
	scroll-padding-top: calc(var(--sks-nav-h) + var(--sks-space-3));
}

/* position:sticky を使えるようにする
   =========================================================================
   SWELLは body に overflow-x:hidden を当てている（main.css）。
   片方の軸が hidden になると body がスクロールコンテナになり、
   その内側の position:sticky は「スクロールしない枠」を基準にするため
   一切固定されない。実測で確認した（スクロール600pxでstickyのtopが-449px）。

   overflow-x を clip に替えると、横方向のはみ出しは同じように隠れるが
   スクロールコンテナは作られないため sticky が機能する。
   親テーマは編集せず、ここで上書きする。
   このファイルは main.css より後に読まれるので同詳細度でも勝つ。 */
body {
	overflow-x: clip;
}

#body_wrap {
	color: var(--sks-ink);
	background-color: var(--sks-canvas);
	font-family: var(--sks-font-sans);
	font-size: var(--sks-fz-body);
	line-height: var(--sks-lh-body);
	font-weight: 400;
	/* SWELLは body に font-weight:500 を当てているが、
	   ヒラギノ系では500が擬似ボールドになり読みづらくなるため400へ戻す。 */
	font-feature-settings: 'palt' 1;
}

/* SWELLがコンテンツ背景に使う変数参照を打ち消す。
   .-body-solid / #content / .l-mainContent__inner などに
   白系の背景が当たっているため、面ごとに指定し直す。 */
#body_wrap #content,
#body_wrap .l-mainContent,
#body_wrap .l-mainContent__inner,
#body_wrap .l-container,
#body_wrap.-body-solid #content {
	background-color: transparent;
}

/* -------------------------------------------------------------------------
   本文の組版
   キットの出発点＝16.5〜17px / 行間1.8〜1.95。
   実測で現状は SP 15px / 行間1.8 だったので拡大する。
   ------------------------------------------------------------------------- */

/* SWELLは #main_content .post_content にサイズを当てている（id付き=1-1-0）。
   これを上回るため #body_wrap を足して 2-1-0 にする。 */
#body_wrap #main_content .post_content,
#body_wrap #lp-content .post_content {
	font-size: var(--sks-fz-body);
	line-height: var(--sks-lh-body);
	color: var(--sks-ink);
}

#body_wrap .post_content > * {
	max-width: var(--sks-reading-max);
	margin-right: auto;
	margin-left: auto;
}

/* 図解・表・引用は読み幅を超えてよい（新規記事で幅広の図解を使うため） */
#body_wrap .post_content > figure.-wide,
#body_wrap .post_content > .sks-wide {
	max-width: min(100%, var(--sks-content-max));
}

/* 和文見出しの組版
   放置すると機械的な位置で改行される。改行位置を制御し、
   欧文ディスプレイの詰め方を和文へ当てない（トラッキングは -0.02em を上限）。 */
#body_wrap h1,
#body_wrap h2,
#body_wrap h3,
#body_wrap h4,
#body_wrap .c-postTitle__ttl,
#body_wrap .c-pageTitle__inner {
	line-height: 1.5;
	letter-spacing: var(--sks-track-heading);
	font-weight: 700;
	/* 未対応環境では通常の折り返しになるだけで崩れない */
	word-break: auto-phrase;
	overflow-wrap: normal;
}

/* overflow-wrap:anywhere を大見出しへ継承させない
   （SWELLは body に overflow-wrap:break-word を当てている） */
#body_wrap h1,
#body_wrap h2,
#body_wrap h3 {
	overflow-wrap: normal;
}

/* 外部から読む書体を当てる範囲
   -------------------------------------------------------------------------
   ■ 実測（Noto Sans JP 700・2026-07-31）
     トップページ         43ファイル / 478KB
     お問い合わせページ   43ファイル / 478KB
   お問い合わせページでこの書体が実際に描く文字は10字ほどしかないのに、
   トップページと同じだけ読み込む。
   当てる範囲を「サイト側の造作だけ」に絞っても転送量は1バイトも減らなかった。

   つまり和文のWebフォントは「使う字数」ではなく「入れるか入れないか」の
   二択でしか費用が変わらない。範囲を絞ると字面が混ざるだけで得が無いので、
   見出しには一律に当てる。

   費用を下げたい場合の手立ては2つ。どちらも別作業。
     1. 外すだけ（0KB・端末内蔵の書体に戻る）
     2. Google Fonts の text= で、そのページに出る文字だけを要求する
        （数KBまで落ちるが、ページごとに別ファイルになる）

   display=swap を付けてあるので、読み込み中も端末内蔵の書体で文字は出る。
   読み込みに失敗しても字面が変わるだけで、レイアウトは崩れない。 */
#body_wrap h1,
#body_wrap h2,
#body_wrap h3,
#body_wrap h4,
#body_wrap .c-headLogo,
#body_wrap .c-headLogo__link,
#body_wrap .c-pageTitle__inner,
#body_wrap .c-postTitle__ttl,
#body_wrap .sks-fv__title,
#body_wrap .sks-fv__panelAxisNum,
#body_wrap .sks-fv__panelRow dd,
#body_wrap .sks-numbers__big,
#body_wrap .sks-numbers__num {
	font-family: var(--sks-font-display);
}

@supports not (word-break: auto-phrase) {
	#body_wrap h1,
	#body_wrap h2,
	#body_wrap h3,
	#body_wrap h4 {
		/* 単語途中で切らない。改行位置は <wbr> と文字数で調整する */
		word-break: normal;
	}
}

/* 本文中の見出し。SWELLの装飾（band等）を外して線と余白で階層を作る。 */
#body_wrap .post_content h2 {
	margin: var(--sks-space-7) auto var(--sks-space-4);
	padding: 0 0 var(--sks-space-2);
	font-size: 1.35em;
	color: var(--sks-ink);
	background: none;
	border: 0;
	border-bottom: 1px solid var(--sks-line-strong);
	border-radius: 0;
}

#body_wrap .post_content h2::before,
#body_wrap .post_content h2::after,
#body_wrap .post_content h3::before,
#body_wrap .post_content h3::after {
	content: none;
}

#body_wrap .post_content h3 {
	margin: var(--sks-space-6) auto var(--sks-space-3);
	padding: 0 0 0 var(--sks-space-2);
	font-size: 1.15em;
	color: var(--sks-ink);
	background: none;
	border: 0;
	border-left: 2px solid var(--sks-body-accent);
}

#body_wrap .post_content h4 {
	margin: var(--sks-space-5) auto var(--sks-space-2);
	font-size: 1.02em;
	color: var(--sks-ink);
	background: none;
	border: 0;
}

#body_wrap .post_content p {
	margin: 0 auto var(--sks-space-4);
}

#body_wrap .post_content ul,
#body_wrap .post_content ol {
	margin: 0 auto var(--sks-space-4);
	padding-left: 1.4em;
}

#body_wrap .post_content li {
	margin-bottom: var(--sks-space-1);
}

#body_wrap .post_content img {
	height: auto;
	max-width: 100%;
}

#body_wrap .post_content blockquote {
	margin: var(--sks-space-4) auto;
	padding: var(--sks-space-3) var(--sks-space-4);
	color: var(--sks-muted);
	background: var(--sks-surface);
	border: 0;
	border-left: 2px solid var(--sks-line-strong);
}

/* 表は狭い画面で溢れるため、必ず自分の中でスクロールさせる。
   ページ本体が横スクロールしてはいけない。 */
#body_wrap .post_content .sks-scroll-x,
#body_wrap .post_content figure.wp-block-table {
	max-width: min(100%, var(--sks-content-max));
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
}

#body_wrap .post_content table {
	color: var(--sks-ink);
	border-color: var(--sks-line);
}

#body_wrap .post_content th,
#body_wrap .post_content td {
	border-color: var(--sks-line);
}

#body_wrap .post_content th {
	background: var(--sks-surface);
}

/* SWELLは thead を白文字にするため、薄い面色をそのまま使うと
   見出しが読めなくなる。記事内の列見出しだけ濃い面へ戻し、
   tbody の行見出しは上の薄い面色を維持する。 */
#body_wrap .post_content thead th,
#body_wrap .post_content thead td {
	color: var(--sks-canvas);
	background: var(--sks-ink);
}

/* -------------------------------------------------------------------------
   リンクとフォーカス
   ------------------------------------------------------------------------- */

/* サイトのUI部分のリンクは、まわりの文字色をそのまま引き継ぐ。
   -------------------------------------------------------------------------
   ただしLP（#lp-content）の本文は対象外にする。
   LP側は自分でボタンの文字色を決めているのに、ここで inherit を当てると
   本文の色で塗りつぶしてしまう。
   実測: 「東山堂公式で仕様・サイズを見る」ボタンの文字が
   本来の白(#fff)から #222 になり、紺の面に対して 1.39:1 まで落ちていた
   （子テーマのCSSを切ると白へ戻ることを確認）。

   :where() で詳細度を0にしているのは、本文側の指定に道を譲るため。
   これで全体の詳細度は #body_wrap の (1,0,0) だけになり、
   `.post_content a` のような本文向けの指定が正しく勝つ。 */
#body_wrap :where(a:not(#lp-content a)) {
	color: inherit;
	text-decoration: none;
}

#body_wrap .post_content a {
	color: var(--sks-ink);
	text-decoration: underline;
	text-decoration-color: var(--sks-body-accent);
	text-decoration-thickness: 1px;
	text-underline-offset: 0.25em;
	transition: text-decoration-color var(--sks-dur-fast) var(--sks-ease);
}

#body_wrap .post_content a:hover {
	text-decoration-color: var(--sks-ink);
}

/* フォーカスリングは常に見えること。
   キーボードだけで完走できるかはL0の必須項目。 */
#body_wrap a:focus-visible,
#body_wrap button:focus-visible,
#body_wrap input:focus-visible,
#body_wrap textarea:focus-visible,
#body_wrap select:focus-visible,
#body_wrap [tabindex]:focus-visible {
	outline: 2px solid var(--sks-overlap-accent);
	outline-offset: 3px;
	border-radius: 1px;
}

::selection {
	color: var(--sks-canvas);
	background: var(--sks-overlap-accent);
}

/* -------------------------------------------------------------------------
   フォーム部品
   SWELLの汎用リセットが #f7f7f7 の明るい背景を当てているため作り直す。
   iOSのフォーカス時ズームを防ぐため font-size は 16px を下限にする
   （実測で現状は375pxで15px・320pxで12.8pxだった）。
   タップ目標も44pxを下限にする（現状の送信ボタンは37px）。
   ------------------------------------------------------------------------- */

#body_wrap input[type='text'],
#body_wrap input[type='email'],
#body_wrap input[type='url'],
#body_wrap input[type='tel'],
#body_wrap input[type='number'],
#body_wrap input[type='search'],
#body_wrap input[type='date'],
#body_wrap select,
#body_wrap textarea {
	width: 100%;
	min-height: 44px;
	padding: 0.7em 0.9em;
	color: var(--sks-ink);
	font-family: inherit;
	font-size: 16px;
	line-height: 1.6;
	background-color: color-mix(in srgb, var(--sks-ink) 6%, var(--sks-canvas));
	/* 入力欄の枠は装飾ではなく「ここが入力欄だ」という唯一の手がかりなので、
	   飾り線（--sks-line）より濃くする。
	   実測（キャンバス #fdfdfd）:
	     20%（飾り線と同じ）→ ページ面に対して 1.53:1
	     48%                → ページ面に 3.42:1 / 入力欄の塗りに 3.00:1
	   非文字の対比の下限 3:1 を、外側と内側の両方で満たす値にしている。 */
	border: 1px solid color-mix(in srgb, var(--sks-ink) 48%, transparent);
	border-radius: 2px;
	transition: border-color var(--sks-dur-fast) var(--sks-ease);
	appearance: none;
}

#body_wrap textarea {
	min-height: 12em;
	resize: vertical;
}

#body_wrap input:focus,
#body_wrap textarea:focus,
#body_wrap select:focus {
	border-color: var(--sks-ink);
}

#body_wrap ::placeholder {
	color: var(--sks-muted);
	opacity: 1;
}

#body_wrap input[type='submit'],
#body_wrap button[type='submit'],
#body_wrap .wpcf7-submit {
	min-height: 48px;
	min-width: 12em;
	padding: 0.8em 2em;
	color: var(--sks-canvas);
	font-family: inherit;
	font-size: 16px;
	font-weight: 700;
	letter-spacing: 0.04em;
	background-color: var(--sks-ink);
	border: 0;
	border-radius: 2px;
	cursor: pointer;
	transition: background-color var(--sks-dur-fast) var(--sks-ease);
	appearance: none;
}

#body_wrap input[type='submit']:hover,
#body_wrap button[type='submit']:hover,
#body_wrap .wpcf7-submit:hover {
	background-color: var(--sks-overlap-accent);
}

/* -------------------------------------------------------------------------
   動きを減らす設定
   prefers-reduced-motion はSWELL全体で0件のため、ここで自前に用意する。
   ------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: 0.001ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.001ms !important;
		scroll-behavior: auto !important;
	}

	/* SWELLの読み込み時フェードは opacity:0 + animation:…both で
	   当たっているため、アニメーションを止めるだけでは
	   「消えたまま」になる危険がある。可視状態を明示的に戻す。
	   対象はSWELLのインラインCSSを実読して洗い出した全要素。 */
	#body_wrap .p-mainVisual,
	#body_wrap .p-mainVisual__inner,
	#body_wrap .p-mainVisual__textLayer,
	#body_wrap .l-header,
	#body_wrap .l-header__bar,
	#body_wrap .l-header__inner,
	#body_wrap .l-header__spNav,
	#body_wrap .l-content,
	#body_wrap .l-topTitleArea,
	#body_wrap .l-topTitleArea__body,
	#body_wrap .c-infoBar,
	#body_wrap .p-breadcrumb,
	#body_wrap .p-postSlider {
		opacity: 1 !important;
		visibility: visible !important;
		animation: none !important;
	}
}