/*
 * サイト全体の共通スタイル。
 *
 * デザイントークンは tokens.css、ボタン・ページ共通UIは wp-support.css、個別デザインは各ページCSSで管理する。
 * このファイルはブラウザ初期化、共通レイアウト、汎用コンテンツUIだけを担当する。
 */

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

html {
	overflow-x: clip;
	scroll-behavior: smooth;
	scroll-padding-top: 92px;
}

body {
	margin: 0;
	color: var(--color-text);
	background: var(--color-background);
	font-family: var(--font-body);
	font-weight: var(--font-weight-regular);
	font-size: var(--font-size-body);
	line-height: 1.9;

	/* コーポレートサイトと共通の日本語組版・可読性設定。 */
	font-feature-settings: "palt" 1;
	line-break: strict;
	word-break: normal;
	text-autospace: normal;
	overflow-wrap: anywhere;
	-webkit-font-smoothing: antialiased;
}

/* 対応環境だけ文節単位の改行を有効にする。非対応ブラウザは normal。 */
@supports (word-break: auto-phrase) {
	body {
		word-break: auto-phrase;
	}
}

/* 見出し末尾の短い単語だけが次行へ残るなど、不自然な折り返しを抑制。 */
:where(h1, h2, h3, h4, h5, h6) {
	font-family: var(--font-body);
	text-wrap: pretty;
	overflow-wrap: anywhere;
}

/* 技術ナレッジのコード表記には和文字詰めを適用しない。 */
:where(code, pre, kbd, samp) {
	font-feature-settings: normal;
}

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

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

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

button,
a {
	-webkit-tap-highlight-color: transparent;
}

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

::selection {
	color: var(--color-text-inverse);
	background: var(--color-primary);
}

/* Accessibility */
.u-visually-hidden,
.c-skip-link {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

.c-skip-link:focus {
	top: 8px;
	left: 8px;
	z-index: 1000;
	width: auto;
	height: auto;
	padding: 8px 16px;
	margin: 0;
	clip: auto;
	color: var(--color-text);
	background: var(--color-background);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-sm);
}

/* Layout */
.l-container {
	width: min(calc(100% - 40px), var(--container));
	margin-inline: auto;
}

.u-center {
	margin-top: 36px;
	text-align: center;
}

/* Rich text / forms */
.c-entry-content,
.prose {
	min-width: 0;
	color: var(--color-text);
	font-size: var(--font-size-body);
	line-height: 1.85;
	overflow-wrap: anywhere;
}

.c-entry-content > :first-child,
.prose > :first-child {
	margin-top: 0;
}

.c-entry-content h2,
.prose h2 {
	padding: 0 0 0.55em;
	margin: 2.5em 0 0.9em;
	color: var(--color-heading);
	border-bottom: 2px solid var(--color-primary);
	font-weight: 400;
}

.c-entry-content h3,
.prose h3 {
	margin: 2em 0 0.7em;
	color: var(--color-heading);
	font-weight: 400;
}

.c-entry-content p,
.prose p {
	margin: 0 0 1.35em;
}

.c-entry-content a,
.prose a {
	color: var(--color-primary);
	text-decoration: underline;
	text-underline-offset: 4px;
}

.c-entry-content ul,
.c-entry-content ol,
.prose ul,
.prose ol {
	padding-left: 1.5em;
	margin: 1.25em 0;
}

.c-entry-content ul,
.prose ul {
	list-style: disc;
}

.c-entry-content ol,
.prose ol {
	list-style: decimal;
}

.c-entry-content :is(ul, ol) li::marker,
.prose :is(ul, ol) li::marker {
	color: var(--color-primary-dark);
	font-weight: 400;
}

.c-entry-content li,
.prose li {
	margin: 0.45em 0;
}

.c-entry-content blockquote,
.prose blockquote {
	padding: 18px 22px;
	margin: 2em 0;
	color: var(--color-text);
	background: var(--color-background-subtle);
	border-left: 4px solid var(--color-primary);
}

.c-table-wrap {
	max-width: 100%;
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
}

.c-entry-content table,
.prose table {
	width: 100%;
	min-width: 640px;
	margin: 2em 0;
	border-collapse: collapse;
}

.c-entry-content th,
.c-entry-content td,
.prose th,
.prose td {
	padding: 13px 15px;
	text-align: left;
	border: 1px solid var(--color-border);
}

.c-entry-content th,
.prose th {
	color: var(--color-heading);
	background: var(--color-background-subtle);
	font-weight: 400;
}

.c-entry-content label,
.wpcf7-form label {
	display: block;
	margin-bottom: 8px;
	color: var(--color-heading);
	font-weight: 400;
}

.c-entry-content input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]),
.c-entry-content select,
.c-entry-content textarea,
.wpcf7-form input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]),
.wpcf7-form select,
.wpcf7-form textarea {
	width: 100%;
	min-height: 48px;
	padding: 10px 12px;
	color: var(--color-text);
	background: var(--color-background);
	border: 1px solid var(--color-border-strong);
	border-radius: var(--radius-sm);
}

.c-entry-content textarea,
.wpcf7-form textarea {
	min-height: 160px;
	resize: vertical;
}

.c-entry-content input:focus,
.c-entry-content select:focus,
.c-entry-content textarea:focus,
.wpcf7-form input:focus,
.wpcf7-form select:focus,
.wpcf7-form textarea:focus {
	border-color: var(--color-primary);
	outline: 3px solid rgb(15 98 254 / 18%);
	outline-offset: 1px;
}

.wpcf7-list-item {
	margin: 0 18px 8px 0;
}

.wpcf7-list-item label {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	margin: 0;
	font-weight: 400;
}

.wpcf7-list-item input {
	width: 18px;
	height: 18px;
	margin-right: 8px;
}

.wpcf7-not-valid-tip,
.c-error-message {
	display: block;
	margin-top: 6px;
	color: var(--color-danger);
	font-size: .75rem;
}

.wpcf7 form .wpcf7-response-output {
	padding: 14px 16px;
	margin: 24px 0 0;
	border-width: 1px;
	border-radius: var(--radius-sm);
}

/* Pagination: ul.page-numbersはリスト本体。枠線は番号リンク・現在ページだけに適用する。 */
.nav-links {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 6px;
	margin-top: 40px;
}

a.page-numbers,
span.page-numbers:not(.dots) {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 44px;
	min-height: 44px;
	padding: 6px 10px;
	border: 1px solid var(--color-border);
	border-radius: var(--radius-sm);
}

a.page-numbers:is(:hover, :focus-visible) {
	color: var(--color-primary);
	border-color: var(--color-primary);
}

.page-numbers.current {
	color: var(--color-text-inverse);
	background: var(--color-primary);
	border-color: var(--color-primary);
}

@media (max-width: 768px) {
	html {
		scroll-padding-top: 68px;
	}

	.l-container {
		width: min(calc(100% - 32px), var(--container));
	}

	.c-entry-content table,
	.prose table {
		display: block;
		max-width: 100%;
		overflow-x: auto;
	}

	.c-table-wrap table {
		display: table;
	}

}

@media (max-width: 390px) {
	.l-container {
		width: calc(100% - 28px);
	}
}

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

	*,
	*::before,
	*::after {
		scroll-behavior: auto !important;
		transition: none !important;
	}
}