/* =========================================================
   MyWorks Custom — Base Stylesheet
   WordPressのtheme.jsonで定義したカラー・フォントサイズ・幅を
   CSSカスタムプロパティ(--wp--preset--*, --wp--style--global--*)
   として参照する。配色・フォントサイズ・幅の変更はtheme.jsonを編集する。
   ========================================================= */

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

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

body {
	margin: 0;
	background-color: var(--wp--preset--color--base, #fff);
	color: var(--wp--preset--color--contrast, #16181a);
	font-family: var(--wp--preset--font-family--system, sans-serif);
	font-size: var(--wp--preset--font-size--medium, 1rem);
	line-height: 1.7;
}

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

a {
	color: var(--wp--preset--color--contrast, #16181a);
	transition: color 0.15s ease;
}

a:hover,
a:focus {
	color: var(--wp--preset--color--primary, #14a046);
}

/* ---------- Accessibility ---------- */
.screen-reader-text {
	border: 0;
	clip: rect(1px, 1px, 1px, 1px);
	clip-path: inset(50%);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute;
	width: 1px;
	word-wrap: normal !important;
}

.skip-link.screen-reader-text:focus {
	background: var(--wp--preset--color--base, #fff);
	border-radius: 4px;
	box-shadow: 0 0 0 2px var(--wp--preset--color--primary, #14a046);
	clip: auto !important;
	clip-path: none;
	color: var(--wp--preset--color--primary, #14a046);
	display: block;
	font-weight: 700;
	height: auto;
	left: 1rem;
	padding: 0.75rem 1rem;
	position: fixed;
	top: 1rem;
	width: auto;
	z-index: 100000;
}

:focus-visible {
	outline: 3px solid var(--wp--preset--color--accent, #8cc832);
	outline-offset: 2px;
}

/* ---------- Layout ---------- */
/*
 * theme.jsonのcontentSize(800px)はGutenbergの幅広/全幅揃えの基準値として
 * 別途使用しているため変更しない。セクション・カード・一覧を広めに使うという
 * デザイン上の判断から、.container自体の最大幅はここで直接1100px程度に
 * 指定する(長文本文は各ページ個別の.business-intro等やmax-widthで別途
 * 読みやすい幅に制限しているため、ここを広げても影響しない)。
 */
.container {
	margin-inline: auto;
	max-width: 1100px;
	padding-inline: clamp(1.25rem, 4vw, 3rem);
}

.container-wide {
	margin-inline: auto;
	max-width: var(--wp--style--global--wide-size, 1200px);
	padding-inline: clamp(1.25rem, 4vw, 3rem);
}

.site-main {
	display: block;
	padding-block: 2rem;
}

/*
 * トップページは hero / .section がそれぞれ独自に余白を持つため、
 * .site-main側の汎用パディングは重複を避けるために外している。
 */
.home .site-main {
	padding-block: 0;
}

/* ---------- Header ---------- */
/*
 * スクロールしても画面上部に残す(position: sticky)。背景を明示的に不透明な
 * 白にしないと、下に流れるコンテンツ(グレー背景のセクションや黒帯のCTA等)が
 * 透けて見えてしまうため、background-colorを明示的に指定している。
 */
.site-header {
	background-color: var(--wp--preset--color--base, #fff);
	border-bottom: 1px solid var(--wp--preset--color--base-2, #f4f6f8);
	padding-block: 1.5rem;
	position: sticky;
	top: 0;
	z-index: 50;
}

.site-header-inner {
	align-items: center;
	display: flex;
	flex-wrap: wrap;
	gap: 1rem;
	justify-content: space-between;
}

/*
 * ロゴ周囲の余白。ガイドライン上、シンボルマークの半径を A として
 * 0.5A分の保護エリアを確保する規定があるため、隣接するナビゲーション等が
 * ロゴに近づきすぎないよう、ある程度ゆとりのある余白を確保している。
 */
.site-logo {
	display: inline-flex;
	margin-inline-end: 1rem;
}

.site-logo img {
	height: 40px;
	object-fit: contain;
	width: auto;
}

@media (min-width: 48rem) {
	.site-logo img {
		height: 48px;
	}
}

.site-branding .site-title {
	font-size: var(--wp--preset--font-size--large, 1.25rem);
	margin: 0;
}

.site-branding .site-title a {
	color: var(--wp--preset--color--contrast, #16181a);
	text-decoration: none;
}

.site-branding .site-description {
	color: var(--wp--preset--color--secondary, #555a5e);
	font-size: var(--wp--preset--font-size--small, 0.875rem);
	margin: 0;
}

.menu-toggle {
	background: transparent;
	border: 1px solid var(--wp--preset--color--secondary, #555a5e);
	border-radius: 4px;
	cursor: pointer;
	display: none;
	padding: 0.5rem;
}

.menu-toggle-icon,
.menu-toggle-icon::before,
.menu-toggle-icon::after {
	background: var(--wp--preset--color--contrast, #16181a);
	content: "";
	display: block;
	height: 2px;
	width: 1.5rem;
}

.menu-toggle-icon::before {
	margin-block-end: 0.3125rem;
}

.menu-toggle-icon::after {
	margin-block-start: 0.3125rem;
}

.primary-menu,
.footer-menu {
	display: flex;
	flex-wrap: wrap;
	gap: 1.5rem;
	list-style: none;
	margin: 0;
	padding: 0;
}

.primary-menu a,
.footer-menu a {
	color: var(--wp--preset--color--contrast, #16181a);
	text-decoration: none;
}

.primary-menu a:hover,
.primary-menu a:focus,
.footer-menu a:hover,
.footer-menu a:focus {
	color: var(--wp--preset--color--primary, #14a046);
	text-decoration: underline;
}

/*
 * ヘッダーメニューの特定の項目(例: お問い合わせ)をCTAボタン風にする場合に使う。
 * 外観 > メニューの対象項目(詳細表示 > CSSクラス)に menu-item-cta を
 * 指定すると適用される。項目の並び順や個数には依存しない。
 */
.primary-menu .menu-item-cta a {
	background-color: var(--wp--preset--color--primary, #14a046);
	border-radius: 4px;
	color: var(--wp--preset--color--contrast, #16181a);
	padding: 0.4rem 1rem;
}

.primary-menu .menu-item-cta a:hover,
.primary-menu .menu-item-cta a:focus {
	color: var(--wp--preset--color--contrast, #16181a);
	filter: brightness(0.92);
	text-decoration: none;
}

/* ---------- Buttons (CTAリンクをボタンとして表示) ---------- */
.btn {
	border-radius: 4px;
	display: inline-block;
	font-weight: 700;
	padding: 0.875rem 1.75rem;
	text-decoration: none;
	transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease, filter 0.15s ease;
}

/*
 * ブランドグリーン(#14a046)は白背景に対してコントラスト比が約3.4:1であり、
 * 通常サイズの文字色としてはWCAG AA(4.5:1)を満たさない。そのため、ボタンの
 * 背景にグリーンを使う場合、文字色は白ではなく濃色(contrast)を使用する。
 */
.btn-primary {
	background-color: var(--wp--preset--color--primary, #14a046);
	color: var(--wp--preset--color--contrast, #16181a);
}

.btn-primary:hover,
.btn-primary:focus {
	filter: brightness(0.92);
}

.btn-outline {
	background-color: transparent;
	border: 2px solid currentColor;
	color: var(--wp--preset--color--contrast, #16181a);
}

.btn-outline:hover,
.btn-outline:focus {
	background-color: var(--wp--preset--color--primary, #14a046);
	border-color: var(--wp--preset--color--primary, #14a046);
	color: var(--wp--preset--color--contrast, #16181a);
}

/* ---------- Hero (front-page.php) ---------- */
.hero {
	background-color: var(--wp--preset--color--base, #fff);
	overflow: hidden;
	padding-block: 3rem 2.5rem;
	position: relative;
	text-align: center;
}

@media (min-width: 48rem) {
	.hero {
		padding-block: 4.5rem 4rem;
	}
}

/*
 * 装飾用の抽象グラフィック。ブランドロゴそのものではなく、ロゴのグラデーション
 * 配色(accent-2 → accent → primary)のみを借りた、ぼかした有機的な形状。
 * ロゴマーク(円形シンボル)との混同を避けるため、あえて非対称な輪郭にし、
 * 背景に主張しすぎないよう低い不透明度にとどめている。
 */
.hero-decoration {
	background: linear-gradient(135deg, var(--wp--preset--color--accent-2, #c8d746), var(--wp--preset--color--accent, #8cc832), var(--wp--preset--color--primary, #14a046));
	border-radius: 60% 40% 55% 45% / 45% 55% 40% 60%;
	filter: blur(90px);
	height: 420px;
	opacity: 0.16;
	position: absolute;
	right: -140px;
	top: -140px;
	width: 420px;
	z-index: 0;
}

.hero-inner {
	position: relative;
	z-index: 1;
}

/*
 * 抽象的な「ノードネットワーク」装飾。実在の管理画面やロゴの模倣ではなく、
 * データ・接続を連想させる幾何学パターン。本文より明確に弱い不透明度にし、
 * 情報量が増えすぎないようタブレット以下では非表示にしている。
 */
.hero-visual {
	color: var(--wp--preset--color--secondary, #555a5e);
	display: none;
	height: 260px;
	opacity: 0.55;
	pointer-events: none;
	position: absolute;
	right: 1.5rem;
	top: 50%;
	transform: translateY(-50%);
	width: 320px;
	z-index: 0;
}

@media (min-width: 64rem) {
	.hero-visual {
		display: block;
	}
}

.hero-visual-lines {
	opacity: 0.4;
}

.hero-visual-node {
	fill: var(--wp--preset--color--secondary, #555a5e);
}

.hero-visual-node-accent {
	fill: var(--wp--preset--color--primary, #14a046);
}

/*
 * 見出し文言は変更せず、幅を絞った上でtext-wrap: balanceにより、
 * 不自然な位置(単語やフレーズの途中)での改行を避け、2行程度に
 * 自然にまとまるようにしている(未対応ブラウザでは通常の折り返しになる)。
 */
.hero-heading {
	color: var(--wp--preset--color--contrast, #16181a);
	font-size: var(--wp--preset--font-size--xx-large, 2.75rem);
	margin-inline: auto;
	margin-block: 0 1rem;
	max-width: 30rem;
	text-wrap: balance;
}

@media (min-width: 48rem) {
	.hero-heading {
		font-size: 2.25rem;
		max-width: 34rem;
	}
}

.hero-subheading {
	color: var(--wp--preset--color--secondary, #555a5e);
	font-size: var(--wp--preset--font-size--large, 1.25rem);
	margin-inline: auto;
	max-width: 40rem;
}

.hero-actions {
	align-items: center;
	display: flex;
	flex-wrap: wrap;
	gap: 1.5rem;
	justify-content: center;
	margin-block-start: 2.5rem;
}

.hero-link {
	color: var(--wp--preset--color--contrast, #16181a);
	font-weight: 700;
	transition: color 0.15s ease;
}

.hero-link:hover,
.hero-link:focus {
	color: var(--wp--preset--color--primary, #14a046);
}

/* ---------- Sections & cards (トップページ共通) ---------- */
.section {
	padding-block: 3rem;
}

@media (min-width: 48rem) {
	.section {
		padding-block: 4.5rem;
	}
}

.section.bg-muted {
	background-color: var(--wp--preset--color--base-2, #f4f6f8);
}

/*
 * セクション見出し上の小さな英字ラベル。意味を持つテキストのため、
 * 「小さいからコントラストを考慮しなくてよい」扱いにはせず、白背景で
 * 十分なコントラストが取れる濃いグレー(secondary)を使用する。
 */
.section-eyebrow {
	color: var(--wp--preset--color--secondary, #555a5e);
	font-size: var(--wp--preset--font-size--small, 0.875rem);
	font-weight: 700;
	letter-spacing: 0.14em;
	margin: 0 0 0.5rem;
	text-align: center;
	text-transform: uppercase;
}

.section-title {
	font-size: var(--wp--preset--font-size--x-large, 2rem);
	line-height: 1.4;
	margin: 0 0 1.75rem;
	position: relative;
	text-align: center;
}

@media (min-width: 48rem) {
	.section-title {
		margin-bottom: 2.5rem;
	}
}

.section-title::after {
	background-color: var(--wp--preset--color--primary, #14a046);
	content: "";
	display: block;
	height: 3px;
	margin: 0.875rem auto 0;
	width: 48px;
}

.section-lead {
	color: var(--wp--preset--color--secondary, #555a5e);
	margin: -0.75rem 0 2rem;
	text-align: center;
}

.section-cta {
	margin-block-start: 2.5rem;
	text-align: center;
}

.card-grid {
	align-items: stretch;
	display: grid;
	gap: 1.5rem;
	grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}

@media (min-width: 48rem) {
	.card-grid {
		gap: 1.75rem;
	}
}

/*
 * トップページの「選ばれる理由」「事業内容」(各3項目)はauto-fitの
 * 自動折返しに任せると幅によって2列+1列になりバランスが崩れるため、
 * PC幅ではこの2セクションに限り明示的に3列を固定する。
 * (他ページのcard-gridは項目数が異なるため対象外。影響なし。)
 */
@media (min-width: 64rem) {
	.strengths-section .card-grid,
	.services-section .card-grid {
		grid-template-columns: repeat(3, 1fr);
	}
}

.card {
	background-color: var(--wp--preset--color--base, #fff);
	border: 1px solid rgba(0, 0, 0, 0.08);
	border-radius: 8px;
	border-top: 3px solid var(--wp--preset--color--primary, #14a046);
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
	padding: 1.75rem;
}

.card-title {
	font-size: var(--wp--preset--font-size--medium, 1rem);
	line-height: 1.5;
	margin: 0;
}

.card-text {
	color: var(--wp--preset--color--secondary, #555a5e);
	margin: 0;
}

/* 「選ばれる理由」カード上部の番号。装飾的な位置づけのため薄いグレーにとどめる。 */
.strengths-section .card-number {
	color: rgba(0, 0, 0, 0.16);
	font-size: 1.75rem;
	font-weight: 700;
	line-height: 1;
	margin: 0;
}

/*
 * 番号付き横長リスト(「事業内容」「大切にしていること」で共通利用)。
 * カードを並べるのではなく、細い罫線で区切った行として自然に読める構成。
 * numbered-row-label/numbered-row-arrowは任意要素で、無い場合は出力しない。
 */
.numbered-list {
	list-style: none;
	margin: 0;
	padding: 0;
}

.numbered-row {
	align-items: center;
	border-bottom: 1px solid rgba(0, 0, 0, 0.1);
	display: flex;
	gap: 1.5rem;
	padding-block: 2rem;
}

.numbered-row:first-child {
	border-top: 1px solid rgba(0, 0, 0, 0.1);
}

.numbered-row-number {
	color: rgba(0, 0, 0, 0.16);
	flex-shrink: 0;
	font-size: 2.25rem;
	font-weight: 700;
	line-height: 1;
	margin: 0;
	width: 3rem;
}

.numbered-row-body {
	flex: 1;
	min-width: 0;
}

/* 意味を持つテキストのため、section-eyebrowと同じ濃いグレーでコントラストを確保する。 */
.numbered-row-label {
	color: var(--wp--preset--color--secondary, #555a5e);
	font-size: var(--wp--preset--font-size--small, 0.875rem);
	font-weight: 700;
	letter-spacing: 0.1em;
	margin: 0 0 0.375rem;
}

.numbered-row-title {
	font-size: var(--wp--preset--font-size--large, 1.25rem);
	margin: 0 0 0.5rem;
}

.numbered-row-text {
	color: var(--wp--preset--color--secondary, #555a5e);
	margin: 0;
	max-width: 42rem;
}

.numbered-row-arrow {
	color: var(--wp--preset--color--primary, #14a046);
	flex-shrink: 0;
	font-size: 1.5rem;
}

@media (max-width: 47.9375rem) {
	.numbered-row {
		align-items: flex-start;
		flex-direction: column;
		gap: 0.75rem;
		padding-block: 1.5rem;
	}

	.numbered-row-arrow {
		display: none;
	}
}

/* ---------- 導入実績(トップページ。左: 見出し / 右: 一覧の2カラム) ---------- */
.achievements-layout {
	display: grid;
	gap: 2rem;
	grid-template-columns: 1fr;
}

@media (min-width: 48rem) {
	.achievements-layout {
		align-items: start;
		gap: 3rem;
		grid-template-columns: minmax(200px, 280px) 1fr;
	}
}

.achievements-heading {
	border-inline-start: 3px solid var(--wp--preset--color--primary, #14a046);
	padding-inline-start: 1.25rem;
}

.achievements-heading .section-eyebrow {
	text-align: left;
}

.achievements-title {
	font-size: var(--wp--preset--font-size--x-large, 2rem);
	margin: 0 0 0.75rem;
}

.achievements-heading .section-lead {
	margin: 0;
	text-align: left;
}

.achievement-list {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
	list-style: none;
	margin: 0;
	padding: 0;
}

.achievement-list li {
	align-items: baseline;
	border-bottom: 1px solid rgba(0, 0, 0, 0.1);
	display: flex;
	gap: 0.75rem;
	padding: 1rem 0.5rem;
}

.achievement-list li::before {
	color: var(--wp--preset--color--primary, #14a046);
	content: "✓";
	font-weight: 700;
}

/* ---------- 代表メッセージ ---------- */
.rep-message {
	align-items: center;
	display: flex;
	flex-wrap: wrap;
	gap: 2.5rem;
}

/*
 * 写真の背面から少しだけ見える、意味を持たない純粋な装飾の角丸矩形。
 * ステータス表示等に見えないよう、ドットではなく矩形+オフセットのみとする。
 */
.rep-photo-wrap {
	display: inline-block;
	flex-shrink: 0;
	position: relative;
}

.rep-photo-wrap::before {
	background-color: var(--wp--preset--color--accent, #8cc832);
	border-radius: 12px;
	content: "";
	height: 85%;
	left: -14px;
	position: absolute;
	top: -14px;
	width: 85%;
	z-index: 0;
}

.rep-photo {
	border: 3px solid var(--wp--preset--color--accent, #8cc832);
	border-radius: 50%;
	display: block;
	height: 200px;
	object-fit: cover;
	position: relative;
	width: 200px;
	z-index: 1;
}

.rep-message-body {
	flex: 1;
	max-width: 36rem;
	min-width: 240px;
}

.rep-message-text {
	font-size: var(--wp--preset--font-size--large, 1.25rem);
	line-height: 1.8;
	margin: 0 0 1rem;
}

/* 役職を小さく・氏名をやや大きく太字にした、名刺的な2行の文字組み。 */
.rep-name {
	display: flex;
	flex-direction: column;
	gap: 0.125rem;
	margin: 0 0 0.5rem;
}

.rep-role {
	color: var(--wp--preset--color--secondary, #555a5e);
	font-size: var(--wp--preset--font-size--small, 0.875rem);
	font-weight: 400;
}

.rep-fullname {
	color: var(--wp--preset--color--contrast, #16181a);
	font-size: var(--wp--preset--font-size--large, 1.25rem);
	font-weight: 700;
}

/* ---------- 採用ミニバナー ---------- */
.recruit-banner-inner {
	align-items: center;
	display: flex;
	flex-wrap: wrap;
	gap: 1.5rem;
	justify-content: space-between;
}

.recruit-banner-text {
	max-width: 36rem;
}

.recruit-banner-text .section-eyebrow {
	text-align: left;
}

.recruit-banner-title {
	font-weight: 700;
	margin: 0 0 0.375rem;
}

.recruit-banner-note {
	color: var(--wp--preset--color--secondary, #555a5e);
	font-size: var(--wp--preset--font-size--small, 0.875rem);
	margin: 0;
}

/* ---------- 最終CTA ---------- */
.final-cta {
	background-color: var(--wp--preset--color--brand-black, #000000);
	text-align: center;
}

.final-cta .section-title {
	color: var(--wp--preset--color--base, #fff);
}

/* .btn-primary(グリーン背景+濃色文字)はそのまま黒背景上でも十分なコントラストが
   得られるため、この帯専用の上書きは不要。 */

/* ---------- 「ホーム」固定ページの追加コンテンツ(任意、通常は空) ---------- */
.front-page-extra-content {
	padding-block: 2rem;
}

/* ---------- Entry / Content ---------- */
.entry-title {
	font-size: var(--wp--preset--font-size--x-large, 2rem);
}

.entry-meta,
.entry-date {
	color: var(--wp--preset--color--secondary, #555a5e);
	font-size: var(--wp--preset--font-size--small, 0.875rem);
}

.entry-content > * + * {
	margin-block-start: 1.25rem;
}

.entry-content > *:first-child {
	margin-block-start: 0;
}

/* 長文(プライバシーポリシー等)を読みやすくするための見出し・リストの余白調整。 */
.entry-content h2 {
	margin-block-start: 3rem;
}

.entry-content h3 {
	margin-block-start: 2rem;
}

.entry-content p {
	line-height: 1.9;
}

.entry-content ul,
.entry-content ol {
	padding-inline-start: 1.5rem;
}

.entry-content li {
	margin-block-end: 0.5rem;
}

/*
 * 投稿詳細ページ(/news/個別記事)の本文のみ読みやすい幅に制限する。
 * .entry-content全体には適用しない(他ページ・Gutenberg編集画面への
 * 影響を避けるため)。privacy/company/contact等は既に個別の
 * max-width指定(.privacy-content等)を持っており、ここでは変更しない。
 */
.single-post .entry-content {
	margin-inline: auto;
	max-width: 42rem;
}

/* ---------- Post list / cards ---------- */
.post-list {
	display: grid;
	gap: 2rem;
	grid-template-columns: 1fr;
}

@media (min-width: 48rem) {
	.post-list {
		grid-template-columns: repeat(2, 1fr);
	}
}

.post-card {
	border: 1px solid rgba(0, 0, 0, 0.08);
	border-radius: 8px;
	overflow: hidden;
	padding: 1.5rem;
}

.post-card-thumbnail {
	display: block;
	margin: -1.5rem -1.5rem 1rem;
}

.post-card-thumbnail img {
	border-radius: 0;
	display: block;
}

.post-card .entry-title {
	font-size: var(--wp--preset--font-size--large, 1.25rem);
}

.single-back-link {
	margin-block-start: 2.5rem;
}

/* ---------- Forms (標準フォーム要素。Contact Form 7挿入後にも適用される) ---------- */
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="url"],
input[type="search"],
input[type="number"],
textarea,
select {
	background-color: var(--wp--preset--color--base, #fff);
	border: 1px solid var(--wp--preset--color--secondary, #555a5e);
	border-radius: 4px;
	color: var(--wp--preset--color--contrast, #16181a);
	font: inherit;
	max-width: 100%;
	padding: 0.625rem 0.75rem;
	width: 100%;
}

label {
	display: block;
	font-weight: 700;
	margin-block-end: 0.375rem;
}

button,
input[type="submit"],
input[type="button"],
.wp-element-button {
	background-color: var(--wp--preset--color--primary, #14a046);
	border: 0;
	border-radius: 4px;
	color: var(--wp--preset--color--contrast, #16181a);
	cursor: pointer;
	font: inherit;
	font-weight: 700;
	padding: 0.875rem 1.75rem;
	transition: filter 0.15s ease;
}

button:hover,
input[type="submit"]:hover,
input[type="button"]:hover,
.wp-element-button:hover {
	filter: brightness(0.92);
}

/* ---------- Footer ---------- */
.site-footer {
	background-color: var(--wp--preset--color--base-2, #f4f6f8);
	margin-block-start: 3rem;
	padding-block: 2rem;
}

.site-footer-inner {
	display: grid;
	gap: 1.5rem;
}

.footer-logo-img {
	height: 32px;
	object-fit: contain;
	width: auto;
}

.footer-name {
	font-size: var(--wp--preset--font-size--large, 1.25rem);
	font-weight: 700;
	margin: 0;
}

.footer-sns-list {
	display: flex;
	gap: 1rem;
	list-style: none;
	margin: 0;
	padding: 0;
}

.site-info {
	color: var(--wp--preset--color--secondary, #555a5e);
	font-size: var(--wp--preset--font-size--small, 0.875rem);
}

/* ---------- ページヘッダー(固定ページ共通。template-parts/page-header.php) ---------- */
.page-header {
	padding-block: 3rem 2rem;
	text-align: center;
}

@media (min-width: 48rem) {
	.page-header {
		padding-block: 4rem 2.5rem;
	}
}

.page-header-title {
	font-size: var(--wp--preset--font-size--x-large, 2rem);
	margin: 0 0 1rem;
}

.page-header-lead {
	color: var(--wp--preset--color--secondary, #555a5e);
	font-size: var(--wp--preset--font-size--large, 1.25rem);
	margin-inline: auto;
	max-width: 42rem;
}

/* ---------- 事業内容ページ: 導入文・追加コンテンツ ---------- */
.business-intro p,
.business-extra-content {
	margin-inline: auto;
	max-width: 42rem;
}

.business-extra-content {
	padding-block: 1rem;
}

/*
 * 事業内容ページ「3本柱」(template-parts/business-service.php)。
 * 連番(01/02/03)はこのセクション専用の要素にのみ適用され、
 * Gutenberg側で追加されるH2等には影響しない。
 */
.business-service-number {
	color: rgba(0, 0, 0, 0.14);
	font-size: 3rem;
	font-weight: 700;
	line-height: 1;
	margin: 0 0 0.5rem;
}

.business-service-title {
	font-size: var(--wp--preset--font-size--x-large, 2rem);
	margin: 0 0 1rem;
}

.business-service-text {
	color: var(--wp--preset--color--secondary, #555a5e);
	margin: 0;
	max-width: 42rem;
}

.business-service-examples {
	margin-block-start: 1.5rem;
	max-width: 42rem;
}

.business-service-examples-label {
	font-weight: 700;
	margin: 0 0 0.75rem;
}

.business-service-examples ul {
	display: grid;
	gap: 0.5rem;
	grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
	list-style: none;
	margin: 0;
	padding: 0;
}

.business-service-examples li {
	color: var(--wp--preset--color--secondary, #555a5e);
	padding-inline-start: 1.1rem;
	position: relative;
}

.business-service-examples li::before {
	color: var(--wp--preset--color--primary, #14a046);
	content: "・";
	position: absolute;
	left: 0;
}

/* ---------- 開発の進め方(page-business.php) ---------- */
.process-steps {
	display: flex;
	flex-direction: column;
	gap: 2rem;
	list-style: none;
	margin: 0;
	padding: 0;
}

@media (min-width: 64rem) {
	.process-steps {
		flex-direction: row;
	}

	.process-step {
		flex: 1;
	}
}

.process-step {
	text-align: center;
}

.process-step-number {
	color: var(--wp--preset--color--primary, #14a046);
	font-size: var(--wp--preset--font-size--large, 1.25rem);
	font-weight: 700;
	margin: 0 0 0.5rem;
}

.process-step-title {
	font-size: var(--wp--preset--font-size--medium, 1rem);
	margin: 0 0 0.5rem;
}

.process-step-text {
	color: var(--wp--preset--color--secondary, #555a5e);
	margin: 0;
}

/* ---------- 導入実績の補足(事業内容ページ。詳細が確認できた場合のみ表示) ---------- */
.achievement-detail {
	color: var(--wp--preset--color--secondary, #555a5e);
	display: block;
	font-size: var(--wp--preset--font-size--small, 0.875rem);
	margin-block-start: 0.25rem;
}

/* ---------- CTA補足文(final-cta内、見出しとボタンの間の短い一文) ---------- */
.final-cta-text {
	color: var(--wp--preset--color--base, #fff);
	margin: 0 0 2rem;
	opacity: 0.85;
}

/* ---------- 会社概要ページ: 追加コンテンツ ---------- */
.company-extra-content {
	margin-inline: auto;
	max-width: 42rem;
	padding-block: 1rem;
}

/* ---------- 会社概要表(template-parts/company-overview.php) ---------- */
.company-overview {
	margin: 0 auto;
	max-width: 42rem;
}

.company-overview-row {
	border-bottom: 1px solid rgba(0, 0, 0, 0.1);
	display: grid;
	gap: 0.25rem 1.5rem;
	grid-template-columns: 8rem 1fr;
	padding-block: 1rem;
}

.company-overview-row:first-child {
	border-top: 1px solid rgba(0, 0, 0, 0.1);
}

.company-overview-row dt {
	color: var(--wp--preset--color--secondary, #555a5e);
	font-weight: 700;
}

.company-overview-row dd {
	margin: 0;
}

@media (max-width: 29.9375rem) {
	.company-overview-row {
		gap: 0.25rem;
		grid-template-columns: 1fr;
	}
}

/* ---------- 所在地・アクセス(page-company.php) ---------- */
.location-details {
	margin: 0 auto 2rem;
	max-width: 42rem;
	text-align: center;
}

.location-address {
	margin: 0 0 0.5rem;
}

.location-phone {
	margin: 0;
}

.map-embed {
	aspect-ratio: 16 / 9;
	margin: 0 auto;
	max-width: 56rem;
	overflow: hidden;
}

.map-embed iframe {
	border: 0;
	height: 100%;
	width: 100%;
}

/* ---------- お問い合わせページ(page-contact.php) ---------- */
.contact-guidance p {
	margin-inline: auto;
	max-width: 42rem;
}

.contact-form-section .container {
	margin-inline: auto;
	max-width: 42rem;
}

.contact-notes-list {
	color: var(--wp--preset--color--secondary, #555a5e);
	font-size: var(--wp--preset--font-size--small, 0.875rem);
	margin: 0 auto 1.5rem;
	max-width: 42rem;
	padding-inline-start: 1.25rem;
}

.contact-notes-list li {
	margin-block-end: 0.5rem;
}

.contact-privacy-link {
	margin: 0 auto;
	max-width: 42rem;
}

/*
 * Contact Form 7の標準出力をベースにしたスタイリング。
 * CF7が生成するHTML構造(<p>・<label>・.wpcf7-form-control-wrap等)自体は
 * 変更せず、間隔・エラー表示・送信結果メッセージの視認性のみを調整する。
 */
.wpcf7-form p {
	margin: 0 0 1.5rem;
}

.wpcf7-form-control-wrap {
	display: block;
}

.wpcf7-not-valid-tip {
	color: #c0392b;
	display: block;
	font-size: var(--wp--preset--font-size--small, 0.875rem);
	margin-block-start: 0.375rem;
}

.wpcf7-acceptance .wpcf7-list-item {
	margin: 0;
}

.wpcf7-acceptance label {
	align-items: flex-start;
	display: flex;
	font-weight: 400;
	gap: 0.5rem;
}

.wpcf7-acceptance input[type="checkbox"] {
	margin-block-start: 0.25rem;
}

.wpcf7-response-output {
	border-radius: 4px;
	margin-block-start: 1.5rem;
	padding: 1rem 1.25rem;
}

.wpcf7-form.invalid .wpcf7-response-output,
.wpcf7-form.unaccepted .wpcf7-response-output,
.wpcf7-form.spam .wpcf7-response-output,
.wpcf7-form.aborted .wpcf7-response-output {
	background-color: #fdecea;
	border: 1px solid #c0392b;
	color: #c0392b;
}

.wpcf7-form.sent .wpcf7-response-output {
	background-color: #eaf7ee;
	border: 1px solid var(--wp--preset--color--primary, #14a046);
	color: var(--wp--preset--color--contrast, #16181a);
}

.wpcf7-form.submitting .wpcf7-submit {
	opacity: 0.7;
}

/* ---------- 採用情報ページ(page-recruit.php) ---------- */
.recruit-message p,
.recruit-extra-content {
	margin-inline: auto;
	max-width: 42rem;
}

/*
 * 「こんな方と働きたい」は、複数列に分かれると視線が左右に散らばるため、
 * この箇所に限り1カラムにまとめ、読みやすい幅に制限する
 * (/business/・トップページの導入実績一覧は複数列のまま変更しない)。
 */
.recruit-fit .achievement-list {
	grid-template-columns: 1fr;
	margin-inline: auto;
	max-width: 42rem;
}

.recruit-fit .achievement-list li {
	padding-block: 1.25rem;
}

.recruit-extra-content {
	padding-block: 1rem;
}

/* ---------- プライバシーポリシー等、長文ページ(page-privacy-policy.php) ---------- */
.privacy-content {
	margin-inline: auto;
	max-width: 42rem;
}

/* ---------- Responsive: mobile navigation ---------- */
@media (max-width: 47.9375rem) {
	.menu-toggle {
		display: block;
	}

	.main-navigation #primary-menu-list {
		display: none;
		flex-basis: 100%;
	}

	.main-navigation #primary-menu-list.is-open {
		display: block;
	}

	.primary-menu {
		flex-direction: column;
		gap: 0.75rem;
	}
}