/*
 * セクション単位の部品(ページの大きな区切り)
 *
 *   pi-hero      … ページ最上部(文字が主役 + 大きな写真)
 *   pi-split     … 文章と写真の2カラム(columns ブロック)
 *   pi-bubbles   … 吹き出し型のカード(お悩み・ご相談の声)
 *   pi-panel-dark… 濃い色の角丸パネル(解決策・メッセージ)
 *   pi-steps     … 番号付きの流れ(ステップ)
 *   pi-chips     … タグ状の小さなラベルの並び(技術一覧など)
 *   pi-cta--page … ページ固有のお問い合わせパネル(文言がページごとに違う場合)
 */

/* ---------- Hero(ページ最上部。文字が主役 + 大きな写真) ---------- */
.pi-hero {
	position: relative;
	overflow: hidden;
	padding: clamp(48px, 8vw, 112px) var(--pi-gutter) clamp(48px, 6vw, 80px);
}
/* 背景の装飾(オレンジのぼかし円) */
.pi-hero::before {
	content: "";
	position: absolute;
	width: min(60vw, 720px);
	aspect-ratio: 1;
	right: -12vw;
	top: -18vw;
	border-radius: 50%;
	background: radial-gradient(circle, color-mix(in srgb, var(--pi-primary) 22%, transparent), transparent 65%);
	pointer-events: none;
}
.pi-hero > * { position: relative; }
.pi-hero-top.wp-block-columns { gap: var(--pi-space-lg) clamp(32px, 6vw, 96px); margin-bottom: clamp(40px, 6vw, 72px); }
.pi-hero-title {
	--theme-font-size: var(--pi-fs-display);
	--theme-font-weight: 800;
	--theme-line-height: 1.35;
	--theme-letter-spacing: 0.02em;
	margin: var(--pi-space-md) 0 0 !important;
	color: var(--pi-ink);
}

/* 写真: 角丸を大きく、PCは横長・スマホは4:3 */
.pi-hero-image { position: relative; isolation: isolate; margin-block: 0 !important; } /* 左右は WordPress の中央寄せに任せる */
.pi-hero-image img {
	display: block;
	width: 100%;
	aspect-ratio: 21 / 9;
	object-fit: cover;
	object-position: center 40%;
	border-radius: var(--pi-radius-xl);
}
.pi-hero-image::after {
	content: "";
	position: absolute;
	left: clamp(-24px, -2vw, -12px);
	bottom: clamp(-24px, -2vw, -12px);
	width: clamp(64px, 10vw, 140px);
	aspect-ratio: 1;
	border-radius: 50%;
	background: var(--pi-primary);
	z-index: -1;
}
@media (max-width: 689px) {
	.pi-hero-image img { aspect-ratio: 4 / 3; }
}

/* MISSION の横の VISION / VALUE */
.pi-philosophy { display: grid; gap: var(--pi-space-md); }
.pi-philosophy > .wp-block-group {
	margin: 0 !important;
	padding: var(--pi-space-md);
	background: rgba(255, 255, 255, 0.8);
	backdrop-filter: blur(8px);
	border: 1px solid var(--pi-border);
	border-radius: var(--pi-radius-lg);
}
.pi-philosophy > .wp-block-group > * { margin: 0; }
.pi-philosophy .pi-eyebrow { margin-bottom: 8px; }
.pi-philosophy p:not(.pi-eyebrow) {
	font-size: 17px;
	font-weight: 700;
	line-height: 1.7;
	color: var(--pi-heading);
}

/* 文章 + 写真の2カラム版ヒーロー(下層ページ用) */
.pi-hero--split .pi-hero-top.wp-block-columns { margin-bottom: 0; align-items: center !important; }
.pi-hero--split .pi-hero-title { margin-top: 0 !important; }
.pi-hero--split .pi-hero-sub {
	font-size: var(--pi-fs-lead);
	font-weight: 700;
	color: var(--pi-heading);
	margin: var(--pi-space-md) 0 0;
}
.pi-hero--split .wp-block-buttons { margin-top: var(--pi-space-lg); }
.pi-hero--split .pi-hero-image img { aspect-ratio: 4 / 3; }

/* 写真の左下に「チャット」アイコンのバッジ(相談しやすさの表現)
 * アイコンは Lucide(ISC License)の messages-square を元にした SVG。 */
.pi-talk { position: relative; isolation: isolate; }
.pi-talk::before {
	content: "";
	position: absolute;
	z-index: 2;
	left: clamp(-20px, -1.6vw, -12px);
	bottom: clamp(24px, 4vw, 48px);
	width: clamp(64px, 7vw, 88px);
	aspect-ratio: 1;
	border-radius: 50%;
	background: #fff var(--pi-icon-chat) center / 44% no-repeat;
	box-shadow: var(--pi-shadow-lg);
}
.pi-talk::after {
	content: "";
	position: absolute;
	z-index: 1;
	left: clamp(-36px, -2.6vw, -20px);
	bottom: clamp(8px, 2vw, 28px);
	width: clamp(64px, 7vw, 88px);
	aspect-ratio: 1;
	border-radius: 50%;
	background: var(--pi-primary-soft);
}

/* ---------- 2カラム(文章 + 写真) ---------- */
.pi-split.wp-block-columns { gap: clamp(32px, 6vw, 96px); align-items: center !important; }
.pi-split .wp-block-image img {
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	border-radius: var(--pi-radius-xl);
}
.pi-split p { line-height: 2; }

/* ---------- 吹き出し(お悩み) ---------- */
.pi-bubbles {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: clamp(24px, 3vw, 40px);
	max-width: 960px;
	margin-inline: auto !important;
}
.pi-bubble {
	position: relative;
	margin: 0 !important;
	padding: var(--pi-space-lg) var(--pi-space-lg) calc(var(--pi-space-lg) - 4px);
	background: var(--pi-bg);
	border-radius: var(--pi-radius-lg);
	box-shadow: var(--pi-shadow-md);
}
.pi-bubble::after {
	content: "";
	position: absolute;
	bottom: -14px;
	left: 40px;
	border: 14px solid transparent;
	border-top-color: var(--pi-bg);
	border-bottom-width: 0;
	border-left-width: 0;
	filter: drop-shadow(0 4px 3px rgba(17, 24, 39, 0.05));
}
/* 右側の吹き出しは、しっぽを右に・少し下にずらしてチャットのような並びに */
.pi-bubble:nth-child(even) { transform: translateY(32px); }
.pi-bubble:nth-child(even)::after { left: auto; right: 40px; border-left-width: 14px; border-right-width: 0; }
.pi-bubble > * { margin: 0; }
.pi-bubble :is(h3, h4, h5) {
	--theme-font-size: clamp(18px, 2vw, 22px);
	--theme-font-weight: 800;
	--theme-line-height: 1.5;
	color: var(--pi-ink);
}
.pi-bubble p {
	margin-top: 8px;
	font-size: 14px;
	color: var(--pi-text-muted);
}
.pi-bubble p::before { content: "— "; color: var(--pi-primary); }
@media (max-width: 689px) {
	.pi-bubbles { grid-template-columns: 1fr; }
	.pi-bubble:nth-child(even) { transform: none; margin-left: 24px !important; }
	.pi-bubble:nth-child(odd) { margin-right: 24px !important; }
}

/* 吹き出しから下のセクションへつなぐ矢印 */
.pi-flow-down { position: relative; padding-bottom: calc(var(--pi-section-y) + 24px); }
.pi-flow-down::after {
	content: "";
	position: absolute;
	left: 50%;
	bottom: 24px;
	width: 56px;
	height: 56px;
	transform: translateX(-50%) rotate(90deg);
	border-radius: 50%;
	background: var(--pi-primary) var(--pi-arrow-white) center / 22px no-repeat;
	box-shadow: 0 10px 24px color-mix(in srgb, var(--pi-primary) 35%, transparent);
}

/* ---------- 濃い色のパネル(解決策) ---------- */
.pi-panel-dark {
	position: relative;
	overflow: hidden;
	background: var(--pi-ink);
	color: rgba(255, 255, 255, 0.78);
	border-radius: var(--pi-radius-xl);
	margin-inline: var(--pi-panel-inset) !important;
	max-width: none !important;
	width: auto !important;
}
.pi-panel-dark::before {
	content: "";
	position: absolute;
	width: 640px;
	aspect-ratio: 1;
	right: -240px;
	bottom: -320px;
	border-radius: 50%;
	background: radial-gradient(circle, color-mix(in srgb, var(--pi-primary) 40%, transparent), transparent 65%);
	pointer-events: none;
}
.pi-panel-dark > * { position: relative; }
.pi-panel-dark :is(h1, h2, h3, h4, h5, h6) { color: #fff; }
.pi-panel-dark .pi-lead { color: #fff; }

/* ---------- 番号付きカード(選ばれる理由など) ---------- */
/* 番号は columns ブロックでリセットし、各カードで1つずつ増やす。
 * (.pi-cards.wp-block-columns の counter-reset に上書きされないよう、同じ詳細度で両方を指定) */
.pi-cards--num.wp-block-columns { counter-reset: pi-card pi-num; }
.pi-cards--num .pi-card { padding-top: calc(var(--pi-space-lg) + 8px); }
.pi-cards--num .pi-card::before {
	counter-increment: pi-num;
	content: counter(pi-num, decimal-leading-zero);
	position: absolute;
	top: 20px;
	right: 24px;
	font-family: var(--pi-font-en);
	font-size: 56px;
	font-weight: 800;
	line-height: 1;
	letter-spacing: -0.04em;
	color: transparent;
	-webkit-text-stroke: 1.5px color-mix(in srgb, var(--pi-primary) 55%, transparent);
}
.pi-card :is(h3, h4, h5) {
	--theme-font-size: 20px;
	--theme-font-weight: 800;
	color: var(--pi-ink);
	margin-bottom: 12px;
}
.pi-card--bordered { border: 1px solid var(--pi-border); }

/* サービスカード: 下部の「相談する →」をリンクにし、カード全体をクリック可能に */
.pi-card--service { display: flex; flex-direction: column; }
.pi-card--service::after { display: none; }
.pi-card--service > :last-child {
	margin-top: auto !important;
	padding-top: var(--pi-space-md);
	border-top: 1px solid var(--pi-border);
	font-size: 14px;
	font-weight: 700;
}
.pi-card--service > :last-child a { color: var(--pi-primary); }
.pi-card--service:hover > :last-child a { color: var(--pi-primary-hover); }
.pi-card--service > :nth-last-child(2) { margin-bottom: var(--pi-space-md); }

/* 2列カード */
.pi-cards--2.wp-block-columns { margin-bottom: var(--pi-space-md); }

/* ---------- ステップ(開発の流れ) ---------- */
.pi-steps {
	display: grid;
	grid-template-columns: repeat(6, minmax(0, 1fr));
	gap: var(--pi-space-md);
	counter-reset: none;
	position: relative;
}
/* ステップをつなぐ線 */
.pi-steps::before {
	content: "";
	position: absolute;
	top: 32px;
	left: calc(100% / 12);
	right: calc(100% / 12);
	height: 2px;
	background: repeating-linear-gradient(90deg, var(--pi-primary) 0 8px, transparent 8px 14px);
}
.pi-step {
	position: relative;
	margin: 0 !important;
	text-align: center;
}
.pi-step > * { margin: 0 !important; }
.pi-step-num {
	display: grid;
	place-items: center;
	width: 64px;
	height: 64px;
	margin: 0 auto var(--pi-space-sm) !important;
	border-radius: 50%;
	background: var(--pi-bg);
	border: 2px solid var(--pi-primary);
	font-family: var(--pi-font-en);
	font-size: 18px;
	font-weight: 800;
	color: var(--pi-primary);
}
.pi-step:first-child .pi-step-num { background: var(--pi-primary); color: #fff; }
.pi-step :is(h3, h4) {
	--theme-font-size: 16px;
	--theme-font-weight: 700;
	--theme-line-height: 1.5;
	color: var(--pi-ink);
}
@media (max-width: 999px) {
	.pi-steps { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: var(--pi-space-lg); }
	.pi-steps::before { display: none; }
}
@media (max-width: 599px) {
	.pi-steps { grid-template-columns: 1fr; gap: 0; }
	.pi-steps::before {
		display: block;
		top: 32px;
		bottom: 32px;
		left: 31px;
		right: auto;
		width: 2px;
		height: auto;
		background: repeating-linear-gradient(180deg, var(--pi-primary) 0 8px, transparent 8px 14px);
	}
	.pi-step {
		display: flex;
		align-items: center;
		gap: var(--pi-space-md);
		text-align: left;
		padding-block: 8px;
	}
	.pi-step-num { margin: 0 !important; flex-shrink: 0; }
}

/* ---------- チップ(技術一覧) ---------- */
.pi-chips {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 12px;
	max-width: 900px;
	margin-inline: auto !important;
}
.pi-chips > p {
	margin: 0 !important;
	padding: 12px 24px;
	border: 1px solid var(--pi-border);
	border-radius: var(--pi-radius-pill);
	background: var(--pi-bg);
	font-family: var(--pi-font-en);
	font-size: 15px;
	font-weight: 700;
	color: var(--pi-ink);
	transition: border-color var(--pi-transition), color var(--pi-transition), transform var(--pi-transition);
}
.pi-chips > p:hover { border-color: var(--pi-primary); color: var(--pi-primary); transform: translateY(-2px); }

/* ---------- ページ固有のお問い合わせパネル ---------- */
/* .pi-cta(components.css)と同じ見た目で、中にリード文とボタンを置ける版 */
.pi-cta--page .pi-eyebrow { color: #fff; opacity: 0.85; }
.pi-cta--page h2 {
	--theme-font-size: var(--pi-fs-h2) !important;
	--theme-font-weight: 800 !important;
	margin-top: var(--pi-space-sm) !important;
}
.pi-cta--page p:not(.pi-eyebrow) { margin-top: var(--pi-space-md) !important; color: rgba(255, 255, 255, 0.92); line-height: 2; }
.pi-cta--page .wp-block-buttons { margin-top: var(--pi-space-lg) !important; }
.pi-cta--page .wp-block-button__link { background: #fff !important; color: var(--pi-primary) !important; }
.pi-cta--page .wp-block-button__link:hover { box-shadow: 0 12px 28px rgba(0, 0, 0, 0.18) !important; }
.pi-cta--page:hover { transform: none; box-shadow: none; }

/* 右側の吹き出しを下にずらした分の余白 */
.pi-bubbles { padding-bottom: 32px; }
@media (max-width: 689px) { .pi-bubbles { padding-bottom: 0; } }

/* ---------- 下層ページのタイトル(投稿タイトルブロック。クラス pi-page-label) ----------
 * タイトル帯を出さないページで、ページ名を小さなラベルとして表示する(h1 のまま)。 */
.pi-page-label.wp-block-post-title {
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 0 0 var(--pi-space-md) !important;
	font-size: 15px !important;
	font-weight: 700;
	letter-spacing: 0.12em;
	line-height: 1.5;
	color: var(--pi-primary);
}
.pi-page-label.wp-block-post-title::before {
	content: "";
	width: 28px;
	height: 2px;
	background: currentColor;
}

/* ヒーローの大きな一文(段落ブロックで使う版) */
.pi-hero-catch {
	margin: 0 !important;
	font-size: var(--pi-fs-display);
	font-weight: 800;
	line-height: 1.4;
	letter-spacing: 0.02em;
	color: var(--pi-ink);
}
.pi-hero--split .pi-hero-catch + .wp-block-buttons { margin-top: var(--pi-space-lg); }

/* ---------- 番号付きの項目リスト(段落を並べた group。クラス pi-points) ---------- */
.pi-points { counter-reset: pi-point; }
.pi-points > p {
	counter-increment: pi-point;
	display: grid;
	grid-template-columns: 56px 1fr;
	align-items: baseline;
	gap: var(--pi-space-sm);
	margin: 0 !important;
	padding: var(--pi-space-md) 0;
	border-bottom: 1px solid var(--pi-border);
	font-size: 16px;
	font-weight: 700;
	line-height: 1.8;
	color: var(--pi-heading);
}
.pi-points > p:first-child { border-top: 1px solid var(--pi-ink); }
.pi-points > p::before {
	content: counter(pi-point, decimal-leading-zero);
	font-family: var(--pi-font-en);
	font-size: 28px;
	font-weight: 800;
	line-height: 1;
	letter-spacing: -0.02em;
	color: var(--pi-primary);
}

/* ---------- 人物イラスト付きの吹き出し(クラス pi-voices > pi-voice > pi-bubble + pi-avatar) ---------- */
.pi-voices {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: clamp(24px, 3vw, 40px);
	max-width: 1080px;
	margin-inline: auto !important;
}
.pi-voice { margin: 0 !important; display: flex; flex-direction: column; }
.pi-voice .pi-bubble {
	flex: 1;
	display: flex;
	align-items: center;
	padding: var(--pi-space-lg) var(--pi-space-md);
}
.pi-voice .pi-bubble:nth-child(even) { transform: none; }
.pi-voice .pi-bubble::after { left: 44px; right: auto; border-left-width: 0; border-right-width: 14px; }
.pi-voice .pi-bubble :is(h3, h4, h5, h6) { --theme-font-size: clamp(17px, 1.8vw, 20px); }
.pi-voice .pi-bubble strong { color: var(--pi-primary); }
.pi-avatar { margin: 24px 0 0 20px !important; }
.pi-avatar img {
	width: 88px;
	height: 88px;
	border-radius: 50%;
	background: var(--pi-bg);
	border: 3px solid var(--pi-bg);
	box-shadow: var(--pi-shadow-md);
	object-fit: cover;
}
@media (max-width: 899px) {
	.pi-voices { grid-template-columns: 1fr; max-width: 560px; }
	.pi-voice { display: grid; grid-template-columns: 1fr 72px; align-items: center; gap: 16px; }
	.pi-voice:nth-child(even) { grid-template-columns: 72px 1fr; }
	.pi-voice:nth-child(even) .pi-avatar { order: -1; }
	.pi-avatar { margin: 0 !important; }
	.pi-avatar img { width: 72px; height: 72px; }
	/* スマホでは吹き出しのしっぽを横向きに */
	.pi-voice .pi-bubble::after { top: 50%; bottom: auto; left: auto; right: -12px; transform: translateY(-50%); border: 12px solid transparent; border-left-color: var(--pi-bg); border-right-width: 0; }
	.pi-voice:nth-child(even) .pi-bubble::after { right: auto; left: -12px; border-left-color: transparent; border-left-width: 0; border-right-width: 12px; border-right-color: var(--pi-bg); }
}

/* ---------- 文字だけのヒーロー(写真なし。クラス pi-hero--text > pi-hero-text) ---------- */
.pi-hero--text { padding-block: clamp(64px, 10vw, 144px) clamp(56px, 8vw, 112px); }
.pi-hero--text::after {
	content: "";
	position: absolute;
	left: -8vw;
	bottom: -14vw;
	width: min(40vw, 480px);
	aspect-ratio: 1;
	border-radius: 50%;
	background: radial-gradient(circle, color-mix(in srgb, var(--pi-primary) 14%, transparent), transparent 65%);
	pointer-events: none;
}
.pi-hero-text { max-width: 980px; margin-inline: auto !important; }
.pi-hero-text .pi-hero-title { margin-top: 0 !important; }

/* ---------- 読み物の本文(メッセージ。クラス pi-message) ---------- */
.pi-message > p {
	font-size: clamp(16px, 1.5vw, 17px);
	line-height: 2.1;
	margin-block: 0 var(--pi-space-lg);
}
.pi-message > h2 {
	--theme-font-size: clamp(22px, 2.6vw, 30px);
	--theme-font-weight: 800;
	--theme-line-height: 1.5;
	position: relative;
	margin-block: clamp(56px, 7vw, 88px) var(--pi-space-md);
	padding-left: 20px;
	color: var(--pi-ink);
}
.pi-message > h2::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.25em;
	bottom: 0.25em;
	width: 4px;
	border-radius: 2px;
	background: var(--pi-primary);
}
.pi-message > :first-child { margin-top: 0; }
/* 太字の部分は、蛍光ペンのような下線で強調 */
.pi-message strong {
	color: var(--pi-ink);
	background: linear-gradient(transparent 62%, color-mix(in srgb, var(--pi-primary) 28%, transparent) 62%);
}
.pi-message--after-cards { margin-top: clamp(40px, 6vw, 64px) !important; }
.pi-message--after-cards > p { margin-bottom: 0; }

/* 引用(大きな一文) */
.pi-quote.wp-block-quote {
	position: relative;
	/* 左右は指定しない(WordPress のレイアウトが中央寄せにする margin-inline: auto を残すため) */
	margin-block: var(--pi-space-lg) var(--pi-space-xl) !important;
	padding: clamp(32px, 5vw, 56px) clamp(24px, 5vw, 56px);
	border: 0 !important;
	border-radius: var(--pi-radius-lg);
	background: var(--pi-ink);
	overflow: hidden;
}
.pi-quote.wp-block-quote::before {
	content: "\201C";
	position: absolute;
	top: -0.2em;
	left: 0.15em;
	font-family: Georgia, serif;
	font-size: 180px;
	line-height: 1;
	color: var(--pi-primary);
	opacity: 0.9;
}
.pi-quote.wp-block-quote p {
	position: relative;
	margin: 0;
	font-size: clamp(20px, 2.6vw, 28px);
	font-weight: 800;
	line-height: 1.7;
	color: #fff;
	font-style: normal;
}

/* 署名 */
.pi-signature {
	margin-top: var(--pi-space-xl) !important;
	padding-top: var(--pi-space-md);
	border-top: 1px solid var(--pi-border);
	text-align: right;
	font-weight: 700;
	color: var(--pi-heading);
	line-height: 1.9 !important;
}

/* 目標カード(文字だけのカード)
 * 番号(01, 02 …)は重ねて置かず、文章の上に並べる。文章の長さが違っても重ならず、書き出しもそろう。 */
.pi-cards--num .pi-card--goal {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	padding: var(--pi-space-lg) var(--pi-space-md);
}
.pi-cards--num .pi-card--goal::before {
	position: static;
	display: block;
	margin-bottom: var(--pi-space-md);
}
.pi-card--goal p { margin: 0; font-size: 17px; line-height: 1.7; color: var(--pi-ink); }

/* 埋め込み(note など)をカード状に */
.pi-embed .wp-block-embed {
	margin: 0;
	padding: var(--pi-space-md);
	background: var(--pi-bg);
	border-radius: var(--pi-radius-lg);
	box-shadow: var(--pi-shadow-md);
}
.pi-embed iframe { width: 100% !important; max-width: 100%; }

/* 外部記事へのリンクカード(段落ブロック。クラス pi-link-card) */
.pi-link-card { margin: 0 !important; }
.pi-link-card a {
	position: relative;
	display: block;
	padding: var(--pi-space-md) 88px var(--pi-space-md) var(--pi-space-md);
	background: var(--pi-bg);
	border: 1px solid var(--pi-border);
	border-radius: var(--pi-radius-lg);
	box-shadow: var(--pi-shadow-sm);
	color: var(--pi-heading);
	font-family: var(--pi-font-en);
	font-size: 15px;
	font-weight: 600;
	text-decoration: none;
	word-break: break-all;
	transition: box-shadow var(--pi-transition), transform var(--pi-transition), border-color var(--pi-transition);
}
.pi-link-card a::after {
	content: "";
	position: absolute;
	right: var(--pi-space-md);
	top: 50%;
	width: 44px;
	height: 44px;
	transform: translateY(-50%) rotate(-45deg);
	border-radius: 50%;
	background: var(--pi-ink) var(--pi-arrow-white) center / 16px no-repeat;
	transition: background-color var(--pi-transition);
}
.pi-link-card a:hover { transform: translateY(-3px); box-shadow: var(--pi-shadow-md); border-color: var(--pi-primary); color: var(--pi-primary); }
.pi-link-card a:hover::after { background-color: var(--pi-primary); }

/* ---------- 締めくくりのメッセージ(濃いパネル内。クラス pi-closing) ----------
 * 見出し → 引用 → 本文 → 署名 を中央揃えで1つのまとまりとして見せる。 */
.pi-closing { text-align: center; }
.pi-closing > * { margin-block: 0 !important; }

/* 見出しは小さなラベルにして、主役の引用を引き立てる */
.pi-closing > h2 {
	--theme-font-size: 15px;
	--theme-font-weight: 700;
	--theme-letter-spacing: 0.16em;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 16px;
	color: var(--pi-primary) !important;
}
.pi-closing > h2::before,
.pi-closing > h2::after {
	content: "";
	width: 32px;
	height: 1px;
	background: currentColor;
}

/* 引用: 箱にせず、大きな文字で中央に */
.pi-closing .pi-quote.wp-block-quote {
	margin-top: var(--pi-space-lg) !important;
	padding: 40px 0 0;
	background: none;
	border-radius: 0;
	overflow: visible;
}
/* 大きな引用符の代わりに、短いオレンジの線で「ここが伝えたい一文」と示す */
.pi-closing .pi-quote.wp-block-quote::before {
	content: "";
	top: 0;
	left: 50%;
	/* 署名の上の白線(=「その想いと〜育てましょう。」27文字の長さ)より少し長くする。
	 * 文字の大きさを本文と同じにして、文字数ぶんの em + 160px で長さを決める(白線より左右 80px ずつ長い)。
	 * 文章を変えたら 27.6em(27文字 + 字間)の数字も合わせて変える。 */
	font-size: clamp(15px, 1.5vw, 17px);
	width: min(calc(27.6em + 160px), 100%);
	height: 3px;
	border-radius: 2px;
	transform: translateX(-50%);
	background: var(--pi-primary);
	opacity: 1;
}
.pi-closing .pi-quote.wp-block-quote p {
	font-size: clamp(22px, 3.2vw, 34px);
	line-height: 1.6;
}

.pi-closing > p {
	margin-top: var(--pi-space-lg) !important;
	font-size: clamp(15px, 1.5vw, 17px);
	line-height: 2;
}
.pi-closing > p + p:not(.pi-signature) { margin-top: var(--pi-space-sm) !important; }
.pi-closing strong { color: #fff; }

.pi-closing .pi-signature {
	display: inline-block;
	width: auto !important; /* Blocksy の「レイアウト内の要素は幅いっぱい」指定を打ち消し、署名の文字幅にする */
	margin-top: var(--pi-space-xl) !important;
	padding-top: var(--pi-space-md);
	border-top: 1px solid rgba(255, 255, 255, 0.2);
	text-align: center;
	color: rgba(255, 255, 255, 0.85);
	font-size: 14px;
}

/* 引用ブロック自体を中央に置き、文字も中央揃えにする */
.pi-closing .pi-quote.wp-block-quote { margin-inline: auto !important; }
.pi-closing .pi-quote.wp-block-quote,
.pi-closing .pi-quote.wp-block-quote p { text-align: center !important; }


/* 最後の一文 + 署名のまとまり(クラス pi-closing-end)。幅を最後の一文の長さに合わせる */
.pi-closing-end {
	width: fit-content !important;
	max-width: 100%;
	margin-inline: auto !important;
	margin-top: var(--pi-space-sm) !important;
}
.pi-closing-end > p:first-child {
	margin: 0;
	font-size: clamp(15px, 1.5vw, 17px);
	line-height: 2;
}
/* 署名の上の線は、まとまりの幅(=最後の一文の長さ)いっぱいに引く */
.pi-closing .pi-closing-end .pi-signature {
	display: block;
	width: 100% !important;
}

/* ---------- 大きなページ見出し(投稿タイトルブロック。クラス pi-page-heading) ----------
 * 本文に見出しの文章がないページ用。ページ名そのものを大きく見せる(ブログ一覧の見出しと同じ見た目)。 */
.pi-page-heading.wp-block-post-title {
	display: flex;
	align-items: center;
	gap: 16px;
	margin-block: 0 !important;
	font-size: var(--pi-fs-display) !important;
	font-weight: 800;
	line-height: 1.3;
	color: var(--pi-ink);
}
.pi-page-heading.wp-block-post-title::before {
	content: "";
	width: 40px;
	height: 3px;
	border-radius: 2px;
	background: var(--pi-primary);
	flex-shrink: 0;
}
/* 見出しだけのヒーローは上下を詰める */
.pi-hero--compact { padding-block: clamp(40px, 7vw, 96px) clamp(32px, 4vw, 56px); }

/* ---------- フォームのカード(クラス pi-form-card) ---------- */
.pi-form-card {
	width: auto !important;   /* Blocksy の「幅いっぱい」指定を打ち消す */
	max-width: 760px !important;
	padding: clamp(28px, 5vw, 56px);
	background: var(--pi-bg);
	border-radius: var(--pi-radius-xl);
	box-shadow: var(--pi-shadow-md);
}

/* ---------- 規約・ポリシーなどの読み物(クラス pi-legal) ---------- */
.pi-legal { font-size: 15px; line-height: 2; }
.pi-legal > h2 {
	--theme-font-size: clamp(19px, 2vw, 22px);
	--theme-font-weight: 800;
	--theme-line-height: 1.5;
	position: relative;
	margin-block: clamp(48px, 6vw, 64px) var(--pi-space-sm);
	padding-left: 18px;
	color: var(--pi-ink);
}
.pi-legal > h2::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.25em;
	bottom: 0.25em;
	width: 4px;
	border-radius: 2px;
	background: var(--pi-primary);
}
.pi-legal > h2:first-child { margin-top: 0; }
.pi-legal > h3 {
	--theme-font-size: 17px;
	--theme-font-weight: 700;
	margin-block: var(--pi-space-lg) 8px;
	color: var(--pi-heading);
}
.pi-legal > p { margin-block: 0 var(--pi-space-sm); }

/* ---------- 項目名と内容の表(クラス pi-def > pi-def-row > pi-def-label + pi-def-value) ---------- */
.pi-legal-card { max-width: 880px !important; }
.pi-def { border-top: 1px solid var(--pi-ink); }
.pi-def-row {
	display: grid;
	grid-template-columns: 220px minmax(0, 1fr);
	gap: 8px var(--pi-space-md);
	margin: 0 !important;
	padding: 20px 4px;
	border-bottom: 1px solid var(--pi-border);
}
.pi-def-row > * { margin: 0 !important; }
.pi-def-label {
	font-size: 14px;
	font-weight: 700;
	line-height: 1.8;
	color: var(--pi-ink);
}
.pi-def-value > p {
	margin: 0;
	font-size: 15px;
	line-height: 1.9;
}
.pi-def-value > p + p { margin-top: 6px; }
@media (max-width: 689px) {
	.pi-def-row { grid-template-columns: 1fr; gap: 4px; padding: 16px 0; }
	.pi-def-label { font-size: 13px; color: var(--pi-primary-hover); }
}

/* 読み物内の箇条書き・問い合わせ窓口の表・制定日 */
.pi-legal > ul {
	margin: 0 0 var(--pi-space-md);
	padding-left: 1.4em;
}
.pi-legal > ul li { margin-bottom: 6px; line-height: 1.9; }
.pi-legal > ul li::marker { color: var(--pi-primary); }
.pi-legal > .pi-def { margin-block: var(--pi-space-sm) var(--pi-space-md); }
.pi-legal-date {
	margin-top: var(--pi-space-lg) !important;
	text-align: right;
	font-size: 14px;
	color: var(--pi-text-muted);
}

/* 表の前の説明文 */
.pi-def-intro {
	margin: 0 0 var(--pi-space-md) !important;
	font-size: 14px;
	line-height: 1.9;
	color: var(--pi-text);
}

/* ファーストビューの大見出し: 折り返すときは言葉の切れ目で改行(対応ブラウザのみ)、スマホでは少し小さく */
.pi-hero-title,
.pi-hero-catch {
	word-break: auto-phrase;
}
@media (max-width: 689px) {
	.pi-hero-title { --theme-font-size: 26px; }
	.pi-hero-catch { font-size: 26px; }
}