/*
 * Noside Base Theme - typography.css
 *
 * グローバルに当てるのは「文字の読みやすさの基礎」と「a11yユーティリティ」だけ。
 * 要素マージン(p/h/ul 等の余白)・配色・コンポーネント装飾はここに書かない。
 *   (それらを書くと LP の生HTMLにまで飛び火するため)
 * 記事本文の余白リズムは、後フェーズで用途別CSS(content.css 等)を
 * 記事スコープに限定して当てる。
 */

html {
	-webkit-text-size-adjust: 100%;
}

body {
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-rendering: optimizeLegibility;
	font-feature-settings: "palt" 1; /* 日本語の自然な字詰め */
}

/* 日本語の改行・溢れの基礎(可読性の最低保証。装飾ではない) */
p,
li,
dd,
dt,
th,
td,
figcaption,
blockquote,
h1, h2, h3, h4, h5, h6 {
	line-break: strict;
	overflow-wrap: anywhere;
}

/* ------------------------------------------------------------------
 * アクセシビリティ・ユーティリティ
 * ------------------------------------------------------------------ */

/* 視覚的に隠すがスクリーンリーダーには読ませる */
.screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* スキップリンクはフォーカス時だけ表示する */
.screen-reader-text:focus {
	position: fixed !important;
	top: 8px;
	left: 8px;
	width: auto;
	height: auto;
	padding: 12px 16px;
	margin: 0;
	clip: auto;
	white-space: normal;
	background: #ffffff;
	color: #111111;
	z-index: 100000;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

/* キーボード操作時のフォーカス可視化 */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 2px;
}