@charset "UTF-8";
/*
Theme Name: 行政書士石橋由子事務所
Theme URI: https://office-ishibashiyuko.com/
Author: a.design
Author URI: https://a-design.example/
Description: 行政書士石橋由子事務所様のためのオリジナルテーマ。1カラム構成。デザイントークンは theme.json を正とする。
Version: 1.3.1
Requires at least: 6.7
Tested up to: 6.8
Requires PHP: 8.1
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: ishibashi
*/

/* ==========================================================================
   1. トークンのエイリアス

   theme.json が生成する変数に、案件で使う名前を張り直す。
   カンプ3枚のCSSが変数名を変えずにそのまま動くようにするため。

   このブロック以外の場所で --wp-- を直接書かないこと。
   カンプとの対応が追えなくなる。
   ========================================================================== */

:root {
	/* 色（palette 由来） */
	--kinari:      var(--wp--preset--color--kinari);
	--kinari-deep: var(--wp--preset--color--kinari-deep);
	--brown-ink:   var(--wp--preset--color--brown-ink);
	--brown-body:  var(--wp--preset--color--brown-body);
	--navy:        var(--wp--preset--color--navy);

	/* 色（custom 由来。編集画面には出さない） */
	--cream-band: var(--wp--custom--cream-band);
	--brown-mute: var(--wp--custom--brown-mute);
	--navy-hover: var(--wp--custom--navy-hover);
	--gold:       var(--wp--custom--gold);
	--gold-soft:  var(--wp--custom--gold-soft);
	--line:       var(--wp--custom--line);
	--hair:       var(--wp--custom--hair);
	--form-error: var(--wp--custom--form-error);   /* フォームのエラー色（/contact/ の form.css で参照） */

	/*
	 * 暗色サーフェス（フッター・CTA）。地の色と、その上に載せる文字色をセットで管理する。
	 * 「紺の上ならゴールドを文字色に使ってよい」と同じ考え方。編集画面のパレットには出さない。
	 */
	--navy-deep:    var(--wp--custom--navy-deep);
	--on-dark:      var(--wp--custom--on-dark);
	--on-dark-body: var(--wp--custom--on-dark-body);
	--on-dark-mute: var(--wp--custom--on-dark-mute);

	/* 書体 */
	--font-sans:    var(--wp--preset--font-family--sans);
	--font-mincho:  var(--wp--preset--font-family--mincho);
	--font-display: var(--wp--preset--font-family--display);

	/* 幅 */
	--w-header:  var(--wp--custom--width--header);
	--w-koba:    var(--wp--custom--width--koba);
	--w-content: var(--wp--custom--width--content);
	--w-article: var(--wp--custom--width--article);

	/* 行間 */
	--lh-body:    var(--wp--custom--leading--body);
	--lh-article: var(--wp--custom--leading--article);
	--lh-heading: var(--wp--custom--leading--heading);

	/* 罫の寸法（柱のモチーフ） */
	--rule-pillar:   var(--wp--custom--rule--pillar);
	--rule-pillar-l: var(--wp--custom--rule--pillar-l);
	--rule-en-title: var(--wp--custom--rule--en-title);

	/* 地紋 */
	--watermark-opacity: var(--wp--custom--watermark-opacity);
}

/*
 * ブレイクポイントは 900px の一点のみ。
 * CSS変数はメディアクエリの条件に使えないため、@media には直接 900px と書く。
 * theme.json の custom.breakpoint は人が読むための記録として置いてある。
 * 例外はヘッダーの中間幅退避（901〜1150px）のみ。
 */

/* ==========================================================================
   2. リセット（最小限）
   ========================================================================== */

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

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

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

body {
	margin: 0;
}

img,
picture,
svg,
video {
	display: block;
	max-width: 100%;
	height: auto;
}

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

/* ==========================================================================
   3. ベース
   ========================================================================== */

body {
	background: var(--kinari);
	color: var(--brown-body);
	font-family: var(--font-sans);
	font-size: 16px;
	line-height: var(--lh-body);
	font-feature-settings: "palt";
	text-rendering: optimizeLegibility;
	-webkit-font-smoothing: antialiased;
}

/* 見出し。ゴールドは文字色に使わない（生成り背景でコントラスト比 2.62） */
/*
 * 見出しのウェイトは指定しない。theme.json（styles.elements.heading.fontWeight = 600）を
 * 唯一の正とするため。ここで font-weight を持つと :where() の theme.json 出力を上書きし、
 * 値が二重管理になる（2026-08-21 セクション3改変許可を得て削除）。
 */
h1,
h2,
h3,
h4 {
	margin: 0;
	color: var(--brown-ink);
	font-family: var(--font-mincho);
	line-height: var(--lh-heading);
}

p {
	margin: 0 0 1.4em;
}

p:last-child {
	margin-bottom: 0;
}

/* 紺は「押せるもの」の合図。リンク・CTA・フッターに限定する */
a {
	color: var(--navy);
	text-underline-offset: 0.22em;
	text-decoration-thickness: from-font;
	transition: color 0.2s ease;
}

a:hover,
a:focus-visible {
	color: var(--navy-hover);
}

/*
 * フォーカスリング。
 * ホバー依存の表現は使わない方針だが、キーボード操作の可視化は別問題として必ず残す。
 */
:focus-visible {
	outline: 2px solid var(--navy);
	outline-offset: 3px;
}

/* 表。上端の二重罫は巻物の見立て（theme.json の core/table でも指定済み） */
table {
	width: 100%;
	border-collapse: collapse;
}

th,
td {
	padding: 0.9em 1em;
	border-bottom: 1px solid var(--line);
	text-align: left;
	vertical-align: top;
}

/*
 * core/table（block-library）の格子罫を打ち消す（記事本文・固定ページを問わず全ての表に効く）。
 *
 * block-library は .wp-block-table td,.wp-block-table th{border:1px solid}（詳細度 0,1,1）を
 * 全セルに当てる。上の要素セレクタ th,td（0,0,1）では負けるため、放置すると全セルが格子になる。
 * カンプの表は横罫のみ（縦罫なし）。上端の巻物二重罫は theme.json core/table＝figure の
 * border-top が持つので、ここでは td/th の上・左・右だけを落とし、border-bottom（--hair）を残す。
 *
 * figure. を前置して (0,1,2) とし、block-library の (0,1,1) を読み込み順に依存せず上回る
 *（プラグインが後から素の block-library 相当を差し込んでも壊れない）。:where() は使わない。
 * 料金表 SP のカード積み替えは price.css 側を同一詳細度 (0,1,2) に揃え、ファイル順で上書きする。
 */
figure.wp-block-table th,
figure.wp-block-table td {
	border-top: 0;
	border-right: 0;
	border-left: 0;
	border-bottom: 1px solid var(--hair);
}

/* 旧コアの thead{border-bottom:3px} / tfoot{border-top:3px} が残る版への保険。
   ヘッダー下の横罫は上の th の border-bottom に一本化する（上端の二重罫は theme.json 側）。 */
figure.wp-block-table thead,
figure.wp-block-table tfoot {
	border: 0;
}

/* 電話番号。装飾セリフ体は使わない。Semibold・等幅数字で判読性を優先する */
.tel-number {
	font-family: var(--font-sans);
	font-weight: 600;
	font-variant-numeric: tabular-nums;
	font-feature-settings: "palt" 0;
	letter-spacing: 0.02em;
}

/* 英字の小見出し。罫は44pxで止め、端を始末する */
.en-title {
	font-family: var(--font-display);
	font-size: 13px;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--brown-mute);
}

/* スクリーンリーダー用 */
.screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

/* ==========================================================================
   4. レイアウト        ← assets/comp/top.html から移植
   5. コンポーネント     ← 同上（CTA・カード・アーチ・柱の縦罫・丸矢印・ドロワー）
   6. ページ個別        ← top.html / article.html から移植
   7. ユーティリティ

   カンプは動作するCSSを持っている。値を目視で写さず、該当箇所を参照して移植すること。
   色・書体・幅・行間・罫の寸法はセクション1のエイリアスを参照する。
   級数（px）・余白はカンプに合わせた実値（対応トークンが無いため。セクション3の base と同じ流儀）。
   対応表は docs/comp-class-map.md。

   このコミットの範囲（段階2）: レイアウト共通 ＋ ヘッダー ＋ 全画面ドロワー。
   フッター・SP追従バー・CTA・カード・トップ個別は後続の段階で追記する。
   ========================================================================== */

/* ==========================================================================
   4. レイアウト
   ========================================================================== */

/* スキップリンク。フォーカス時のみ可視化する（ホバー依存ではない標準の配慮） */
.c-skip-link {
	position: absolute;
	left: -9999px;
	top: 0;
	z-index: 100;
	background: var(--navy);
	color: var(--on-dark);
	padding: 10px 16px;
	text-decoration: none;
}

.c-skip-link:focus {
	left: 0;
}

/* 内容幅のラッパ（comp .wrap）。幅はトークンを参照 */
.l-wrap {
	width: min(var(--w-content), 86%);
	margin-inline: auto;
}

/* コバ：本文域の縁に極細罫を落とす（comp .sheet）＝縁の始末。開閉は各テンプレート側 */
.l-sheet {
	width: min(var(--w-koba), 96%);
	margin-inline: auto;
	border-left: 1px solid var(--line);
	border-right: 1px solid var(--line);
}

/* --- ヘッダー：渡り始めのアーチ（comp .head） --- */
.l-header {
	position: relative;
	padding: 20px 0 34px;
	background: var(--cream-band);
}

/*
 * アーチは ::after に分離する。
 * ヘッダー本体に translate / backdrop-filter を付けると、内包する position:fixed の
 * containing block がヘッダーになり、全画面ドロワーが画面全体に広がらなくなるため。
 */
.l-header::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: -1px;
	height: 52px;
	background: var(--kinari);
	border-radius: 50% 50% 0 0 / 100% 100% 0 0;
}

.l-header .l-wrap {
	width: min(var(--w-header), 94%);
}

.l-header__inner {
	position: relative;
	z-index: 2;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 28px;
}

/* ==========================================================================
   5. コンポーネント
   ========================================================================== */

/* --- ロゴ（comp .brand） --- */
.c-brand {
	display: flex;
	align-items: center;
	gap: 13px;
	text-decoration: none;
}

.c-brand__logo {
	width: 56px;
	height: auto;
}

.c-brand__name {
	display: block;
	font-family: var(--font-mincho);
	font-size: 16.5px;
	font-weight: 600;
	line-height: 1.5;
	letter-spacing: 0.06em;
	color: var(--navy);
	white-space: nowrap;
}

.c-brand__sub {
	display: block;
	margin-top: 2px;
	font-family: var(--font-display);
	font-size: 10px;
	letter-spacing: 0.2em;
	color: var(--brown-mute);
	white-space: nowrap;
}

/* --- グローバルナビ（PC）（comp .gnav） --- */
.c-gnav {
	white-space: nowrap;
}

.c-gnav__list {
	display: flex;
	gap: 24px;
	margin: 0;
	padding: 0;
	list-style: none;
	font-size: 14.5px;
	font-weight: 500;
}

.c-gnav__list a {
	display: inline-block;
	padding-bottom: 5px;
	color: var(--brown-ink);                    /* ナビ文字は焦茶。紺は「押せるもの」に限定（ボタン・電話） */
	text-decoration: none;
	border-bottom: 1px solid transparent;       /* ゴールドは線として使用（文字色ではない） */
	transition: border-color 0.3s;
}

.c-gnav__list a:hover {
	color: var(--brown-ink);
	border-color: var(--gold);
}

/* --- ヘッダー右：電話番号ブロック＋ボタン（comp .head-cta / .tel-block） --- */
.c-header-contact {
	display: flex;
	align-items: center;
	gap: 16px;
}

.c-tel {
	display: block;
	text-align: right;
	line-height: 1.35;
	color: var(--navy);
	text-decoration: none;
}

.c-header-contact .tel-number {
	font-size: 21px;
	letter-spacing: 0.05em;
}

.c-tel__note {
	display: block;
	font-size: 11px;
	letter-spacing: 0.08em;
	color: var(--brown-mute);
}

/*
 * ③の決定：電話番号は数字体裁をカンプ準拠で lining-nums を加える。
 * font-feature-settings:"palt" 0（和文ツメの無効化）はセクション3で維持済み。
 * セクション1〜3は改変不可のため、ここで font-variant-numeric のみ上書きする。
 */
.tel-number {
	font-variant-numeric: lining-nums tabular-nums;
}

/* --- ボタン（comp .btn 系） --- */
.c-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 13px 28px;
	border: 1px solid var(--navy);
	background: var(--navy);
	color: var(--on-dark);
	font-size: 14.5px;
	font-weight: 500;
	letter-spacing: 0.1em;
	text-decoration: none;
	transition: background 0.3s, color 0.3s;
}

.c-btn:hover {
	background: var(--navy-hover);
	color: var(--on-dark);
}

.c-btn--ghost {
	background: transparent;
	color: var(--navy);
}

.c-btn--ghost:hover {
	background: var(--navy);
	color: var(--on-dark);
}

.c-btn--line {
	background: #06c755;                         /* LINE ブランド色。トークン対象外のため実値 */
	border-color: #06c755;
	color: var(--on-dark);
}

.c-btn--line:hover {
	background: #05b34d;
}

.c-btn--gold {
	background: var(--gold);                     /* ゴールドは面（背景）としては使用可。文字色ではない */
	border-color: var(--gold);
	color: var(--on-dark);
}

.c-btn--gold:hover {
	background: #a9863f;
}

/* --- ハンバーガー（comp .hamb） --- */
.c-hamburger {
	display: none;                              /* PCでは隠す。900px以下で表示 */
	flex: 0 0 auto;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 6px;
	width: 46px;
	height: 46px;
	padding: 0;
	border: none;
	background: var(--navy);
	cursor: pointer;
}

.c-hamburger__bar {
	display: block;
	width: 20px;
	height: 1.5px;
	background: var(--on-dark);
	transition: transform 0.3s, opacity 0.3s;
}

.c-hamburger[aria-expanded="true"] .c-hamburger__bar:nth-child(1),
.c-hamburger--close .c-hamburger__bar:nth-child(1) {
	transform: translateY(7.5px) rotate(45deg);
}

.c-hamburger[aria-expanded="true"] .c-hamburger__bar:nth-child(2),
.c-hamburger--close .c-hamburger__bar:nth-child(2) {
	opacity: 0;
}

.c-hamburger[aria-expanded="true"] .c-hamburger__bar:nth-child(3),
.c-hamburger--close .c-hamburger__bar:nth-child(3) {
	transform: translateY(-7.5px) rotate(-45deg);
}

/* --- 全画面ドロワー（comp .drawer） --- */
.c-drawer {
	position: fixed;
	inset: 0;
	z-index: 90;
	padding: 20px 0 40px;
	background: var(--kinari);                  /* 不透明：背後が透けない */
	overflow-y: auto;
	opacity: 0;
	visibility: hidden;
	transform: translateY(-10px);
	transition: opacity 0.3s, transform 0.3s, visibility 0.3s;
}

.c-drawer.is-open {
	opacity: 1;
	visibility: visible;
	transform: none;
}

.c-drawer__inner {
	width: 88%;
	margin-inline: auto;
}

.c-drawer__top {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
}

/* 閉じるボタンはドロワー内では常時表示（×の形は --close 修飾子で固定） */
.c-drawer__top .c-hamburger {
	display: flex;
}

.c-drawer__logo {
	width: 46px;
	height: auto;
}

.c-drawer__nav {
	margin-top: 34px;
	border-top: 1px solid var(--hair);
}

.c-drawer__link {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding: 20px 2px;
	border-bottom: 1px solid var(--hair);
	font-family: var(--font-mincho);
	font-size: 17px;
	font-weight: 600;
	letter-spacing: 0.1em;
	color: var(--brown-ink);
	text-decoration: none;
}

.c-drawer__link:hover {
	color: var(--brown-ink);
}

/* ①の決定：ドロワー背景は生成り地。英字ラベルはゴールド文字を避け brown-mute にする */
.c-drawer__en {
	font-family: var(--font-display);
	font-size: 11px;
	font-weight: 400;
	letter-spacing: 0.24em;
	color: var(--brown-mute);
}

.c-drawer__foot {
	margin-top: 34px;
	text-align: center;
}

.c-drawer__label {
	margin: 0;
	font-family: var(--font-display);
	font-size: 11px;
	letter-spacing: 0.28em;
	color: var(--brown-mute);                  /* ①：生成り地のためゴールド文字を避ける */
}

.c-drawer__tel {
	display: block;
	margin-top: 14px;
	font-size: 26px;
	font-weight: 600;
	line-height: 1.6;
	letter-spacing: 0.05em;
	color: var(--navy);
	font-variant-numeric: lining-nums tabular-nums;
	text-decoration: none;
}

.c-drawer__tel--sub {
	font-size: 24px;
}

.c-drawer__note {
	margin-top: 10px;
	font-size: 13px;
	line-height: 1.9;
	color: var(--brown-mute);
}

.c-drawer__btns {
	display: grid;
	gap: 11px;
	margin-top: 26px;
}

/* ==========================================================================
   レスポンシブ（900px の一点）        ← assets/comp/top.html から移植
   例外はヘッダーの中間幅退避（901〜1150px）のみ。
   CSS変数は @media の条件に使えないため、境界値は実数で書く。
   ========================================================================== */

@media (max-width: 900px) {
	.l-sheet {
		width: 100%;
		border: none;
	}

	.c-gnav,
	.c-header-contact {
		display: none;
	}

	.c-hamburger {
		display: flex;
	}
}

/* ヘッダーの中間幅退避：電話リンクを畳み、ナビとボタンを優先する */
@media (min-width: 901px) and (max-width: 1150px) {
	.c-header-contact .c-tel {
		display: none;
	}

	.c-gnav__list {
		gap: 18px;
		font-size: 14px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.c-gnav__list a,
	.c-hamburger__bar,
	.c-drawer,
	.c-btn {
		transition: none;
	}
}

/* ==========================================================================
   5b. コンポーネント（続き）：フッター ＋ SP追従バー    ← top.html から移植（段階3）

   暗色サーフェス（フッター／CTA）の色は settings.custom の暗色トークンを参照する
   （--navy-deep / --on-dark / --on-dark-body / --on-dark-mute）。地と文字をセットで管理。
   ========================================================================== */

/* --- フッター（comp .foot） --- */
.l-footer {
	padding: 56px 0 30px;
	background: var(--navy-deep);          /* 紺より一段深い。CTAの紺(--navy)と差をつける */
	color: var(--on-dark-body);
	font-size: 14px;
}

.l-footer__inner {
	display: flex;
	justify-content: space-between;
	gap: 40px;
	flex-wrap: wrap;
}

.c-footer-brand {
	display: flex;
	align-items: flex-start;
	gap: 16px;
	max-width: 30em;
}

.c-footer-brand__logo {
	width: 50px;
	height: auto;
	opacity: 0.92;
	/* 専用の白版 logo-white.png を使う。filter での白抜きは意匠がシルエットに潰れるため不使用。 */
}

.c-footer-brand__name {
	margin: 0;
	font-family: var(--font-mincho);
	font-size: 16px;
	letter-spacing: 0.1em;
	color: var(--on-dark);
}

.c-footer-brand__addr {
	margin: 11px 0 0;
	font-size: 13.5px;
	line-height: 1.95;
	word-break: keep-all;
}

.c-footer-brand__addr span {
	white-space: nowrap;
}

.c-footer-nav__list {
	display: grid;
	grid-template-columns: repeat(2, auto);
	gap: 12px 48px;
	margin: 0;
	padding: 0;
	list-style: none;
	font-size: 13.5px;
}

/* 暗色地のためリンクは地の階調を継ぐ（紺=リンクの合図は明色地での原則） */
.c-footer-nav__list a {
	color: inherit;
	text-decoration: none;
	transition: color 0.3s;
}

.c-footer-nav__list a:hover {
	color: var(--gold-soft);                /* ゴールドは線・アクセントとして可（文字だが暗色地でコントラスト確保） */
}

.l-footer__copy {
	margin: 40px 0 0;
	padding-top: 20px;
	border-top: 1px solid rgba(255, 255, 255, 0.1);
	font-family: var(--font-display);
	font-size: 11.5px;
	letter-spacing: 0.14em;
	color: var(--on-dark-mute);
}

/* --- SP追従バー（comp .spbar）。900px以下のみ表示 --- */
.c-sticky-bar {
	display: none;
}

.c-sticky-bar__item {
	font-family: var(--font-mincho);
	color: var(--on-dark);
	text-decoration: none;
}

.c-sticky-bar__note {
	display: block;
	font-family: var(--font-sans);
	font-size: 10.5px;
	letter-spacing: 0.06em;
	opacity: 0.85;
}

@media (max-width: 900px) {
	/* 追従バーの高さ分だけ本文末尾に余白を確保し、フッターが隠れないようにする */
	body {
		padding-bottom: 70px;
	}

	.c-sticky-bar {
		display: grid;
		grid-template-columns: repeat(3, 1fr);
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 60;
		box-shadow: 0 -2px 14px rgba(60, 51, 44, 0.14);
	}

	.c-sticky-bar__item {
		padding: 15px 4px;
		text-align: center;
		font-size: 13.5px;
		font-weight: 600;                   /* A決定：Zen Old Mincho は 400・600 の2ウェイト。追従バーは600へ寄せた */
		line-height: 1.5;
		letter-spacing: 0.08em;
	}

	.c-sticky-bar__item--tel { background: var(--navy); }
	.c-sticky-bar__item--line { background: #06c755; }   /* LINE色。トークン対象外 */
	.c-sticky-bar__item--form { background: var(--gold); } /* ゴールドは面（背景）としては使用可 */
}

@media (prefers-reduced-motion: reduce) {
	.c-footer-nav__list a {
		transition: none;
	}
}

/* ==========================================================================
   5c. コンポーネント（続き）：英字小見出し ＋ CTA（渡り終わりのアーチ＋梅鉢紋）
                                              ← top.html から移植（段階4）

   CTAは暗色地（--navy）。ゴールドは文字色に使ってよい（gold-soft 8.89:1・AA本文合格）。
   暗色地の文字は暗色トークンに集約：白→--on-dark、補助のグレー(#BCC6D4/#A9B4C4)→--on-dark-body。
   ========================================================================== */

/*
 * 英字小見出し（comp .eyebrow）。柱の縦罫の下に置く英字＋始末された44pxの罫。
 * ①の決定：明色地では文字色にゴールドを使わず --brown-mute。罫（線）はゴールドのまま。
 * 暗色地（CTA）では下の .c-cta .c-eyebrow で gold-soft に上書きする。
 * ※ 既存の .en-title（罫なしの英字ラベル）とは別部品。セクション見出し用はこちら。
 */
.c-eyebrow {
	display: flex;
	align-items: center;
	gap: 16px;
	margin-bottom: 16px;
	font-family: var(--font-display);
	font-size: 13px;
	letter-spacing: 0.32em;
	text-transform: uppercase;
	color: var(--brown-mute);
}

.c-eyebrow::after {
	content: "";
	width: var(--rule-en-title);           /* 44px。端を始末する */
	height: 1px;
	background: var(--gold);                /* ゴールドは線として使用 */
}

/* --- CTA：渡り終わりのアーチ＋梅鉢紋（comp .cta / .cta-zone） --- */
.c-cta-zone {
	position: relative;
	padding-top: 88px;
}

.c-cta {
	position: relative;
	padding: 100px 0 84px;
	background: var(--navy);
	color: var(--on-dark-body);            /* 既定の文字色（個別は下で上書き） */
	text-align: center;
	border-radius: 50% 50% 0 0 / 86px 86px 0 0;   /* 渡り終わりのアーチ */
}

/* 梅鉢紋。1ページに一度きり。アーチの頂点に置く */
.c-cta__mon {
	position: absolute;
	left: 50%;
	top: -26px;
	transform: translateX(-50%);
	width: 52px;
	height: 52px;
}

/* CTA上の英字小見出しは中央寄せ・両側に罫。暗色地なのでゴールド(gold-soft)を文字色に使う */
.c-cta .c-eyebrow {
	justify-content: center;
	color: var(--gold-soft);
}

.c-cta .c-eyebrow::before {
	content: "";
	width: var(--rule-en-title);
	height: 1px;
	background: var(--gold-soft);
}

.c-cta .c-eyebrow::after {
	background: var(--gold-soft);
}

.c-cta__title {
	font-size: clamp(22px, 3vw, 29px);
	line-height: 1.85;
	letter-spacing: 0.11em;
	color: var(--on-dark);
}

.c-cta__lead {
	margin-top: 20px;
	font-size: 15px;
	line-height: 2.1;
	color: var(--on-dark-body);
}

.c-cta__grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	margin-top: 48px;
	text-align: left;
	border-top: 1px solid rgba(220, 199, 154, 0.28);      /* gold-soft の半透明の罫 */
	border-bottom: 1px solid rgba(220, 199, 154, 0.28);
}

.c-cta__card {
	position: relative;
	padding: 32px 28px;
}

.c-cta__card + .c-cta__card::before {
	content: "";
	position: absolute;
	left: 0;
	top: 20px;
	bottom: 20px;
	width: 1px;
	background: rgba(220, 199, 154, 0.28);
}

.c-cta__label {
	margin: 0;
	font-family: var(--font-display);
	font-size: 11.5px;
	letter-spacing: 0.28em;
	text-transform: uppercase;
	color: var(--gold-soft);
}

.c-cta__val {
	display: block;
	margin-top: 12px;
	font-family: var(--font-sans);
	font-size: 27px;
	font-weight: 600;
	line-height: 1.5;
	letter-spacing: 0.05em;
	color: var(--on-dark);
	font-variant-numeric: lining-nums tabular-nums;
	text-decoration: none;
}

.c-cta__val--mobile {
	font-size: 25px;
}

.c-cta__val-label {
	margin-right: 9px;
	font-family: var(--font-mincho);
	font-size: 12.5px;
	font-weight: 400;
	letter-spacing: 0.14em;
	vertical-align: 2px;
	color: var(--on-dark-body);
}

.c-cta__val-jp {
	margin: 13px 0 0;
	font-family: var(--font-mincho);
	font-size: 19px;
	letter-spacing: 0.1em;
	color: var(--on-dark);
}

.c-cta__memo {
	margin: 11px 0 0;
	font-size: 13px;
	line-height: 1.9;
	color: var(--on-dark-body);
}

.c-cta__card .c-btn {
	width: 100%;
	margin-top: 20px;
}

@media (max-width: 900px) {
	.c-cta {
		padding: 72px 0 68px;
		border-radius: 50% 50% 0 0 / 44px 44px 0 0;
	}

	.c-cta-zone {
		padding-top: 56px;
	}

	.c-cta__mon {
		width: 42px;
		height: 42px;
		top: -20px;
	}

	.c-cta__grid {
		grid-template-columns: 1fr;
	}

	/* 縦積み時は縦罫を横罫に置き換える（柱の見立てを保つ） */
	.c-cta__card + .c-cta__card::before {
		left: 0;
		right: 0;
		top: 0;
		bottom: auto;
		width: auto;
		height: 1px;
	}
}

/* ==========================================================================
   6. ページ個別：トップページ            ← assets/comp/top.html から移植（段階5）

   色・書体・幅・行間・罫寸法はセクション1のエイリアス。級数(px)・余白は実値。
   見出しのウェイトは theme.json(600)＋base に委ねる（ここでは指定しない）。
   ①：明色地の英字ラベルはゴールド文字を避け brown-mute。罫はゴールド可。
   A：記事タイトル・表見出し=600、タグpill=400。
   却下事項：番号付きリスト／連番アイコン／ホバーで伸びる金下線／ホバーの横滑り は不使用。
   ========================================================================== */

/* --- セクションの箱 --- */
.l-section { padding: 92px 0; }
.l-section--deep { background: var(--kinari-deep); }

/* --- セクション見出し（comp .head-set）。柱の縦罫＋英字(.c-eyebrow)＋和文＋リード --- */
.c-section-head {
	position: relative;
	padding-top: 38px;
}

/* 柱の縦罫。見出しの上に紺の短い縦罫（--rule-pillar = 26px） */
.c-section-head::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0;
	width: 1px;
	height: var(--rule-pillar);
	background: var(--navy);
	opacity: 0.7;
}

.c-section-head__title {
	font-size: clamp(23px, 3vw, 30px);
	line-height: 1.7;
	letter-spacing: 0.08em;
}

.c-section-head__lead {
	margin-top: 20px;
	max-width: 33em;
	font-size: 15.5px;
	line-height: 2.05;
	color: var(--brown-mute);
}

/* --- 2. メインビジュアル（comp .hero） --- */
.p-hero { padding: 60px 0 92px; }

.p-hero__inner {
	display: grid;
	grid-template-columns: 1.1fr 0.9fr;
	gap: 56px;
	align-items: center;
}

.p-hero__catch {
	font-size: clamp(27px, 4.1vw, 41px);
	line-height: 1.85;
	letter-spacing: 0.09em;
}

.p-hero__catch em {
	font-style: normal;
	color: var(--navy);            /* 2行目の紺アクセント */
}

.p-hero__sub {
	margin-top: 26px;
	max-width: 25em;
	font-size: 16px;
	line-height: 2.1;
	color: var(--brown-body);
}

.p-hero__tags {
	display: flex;
	flex-wrap: wrap;
	margin-top: 28px;
	border-top: 1px solid var(--hair);
	border-bottom: 1px solid var(--hair);
}

.p-hero__tags span {
	padding: 11px 20px;
	border-right: 1px solid var(--hair);
	font-family: var(--font-mincho);
	font-weight: 400;              /* A：タグpillは400へ */
	font-size: 13px;
	letter-spacing: 0.08em;
	color: var(--navy);
}

.p-hero__tags span:last-child { border-right: none; }

.p-hero__btns {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin-top: 34px;
}

.p-hero__portrait {
	position: relative;
	width: min(330px, 100%);
	margin-inline: auto;
}

/* 写真外側の金の細環 */
.p-hero__portrait::before {
	content: "";
	position: absolute;
	inset: -18px;
	border: 1px solid var(--gold);
	border-radius: 50%;
	opacity: 0.42;
}

.p-hero__portrait-in {
	aspect-ratio: 1;
	border-radius: 50%;
	overflow: hidden;
	background: #faf4ec;           /* 写真の下地（透過PNG時の見切れ防止）。一点物のため実値 */
	box-shadow: inset 0 0 0 1px rgba(186, 150, 76, 0.4), 0 10px 26px rgba(60, 51, 44, 0.07);
}

.p-hero__portrait-in img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.p-hero__portrait-cap {
	position: absolute;
	right: -4px;
	bottom: 2px;
	padding: 9px 17px;
	background: var(--kinari);
	border-left: 1px solid var(--gold);
	font-size: 12.5px;
	line-height: 1.75;
}

.p-hero__portrait-cap b {
	display: block;
	font-family: var(--font-mincho);
	font-weight: 600;
	font-size: 15px;
	letter-spacing: 0.1em;
	color: var(--navy);
}

/* --- 3. 選ばれる理由（列柱区切り。番号は使わない）（comp .reasons） --- */
.p-reasons { padding: 0 0 92px; }

.p-reasons__grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	border-top: 1px solid var(--hair);
	border-bottom: 1px solid var(--hair);
}

.p-reasons__item {
	position: relative;
	padding: 44px 34px;
}

/* 列柱：隣り合う要素を縦の極細罫で区切る */
.p-reasons__item + .p-reasons__item::before {
	content: "";
	position: absolute;
	left: 0;
	top: 16px;
	bottom: 16px;
	width: 1px;
	background: var(--hair);
}

.p-reasons__item h3 {
	font-size: 18.5px;
	line-height: 1.75;
	letter-spacing: 0.08em;
	color: var(--navy);
}

.p-reasons__item p {
	margin-top: 14px;
	font-size: 14.5px;
	line-height: 2.05;
	color: var(--brown-mute);
}

/* --- 4. 取扱業務（矢印リンク。番号なし）（comp .svc-list） --- */
.c-service-list {
	margin-top: 46px;
	border-top: 1px solid var(--hair);
}

.c-service-item {
	display: grid;
	grid-template-columns: 1fr auto;
	gap: 26px;
	align-items: center;
	padding: 30px 2px;
	border-bottom: 1px solid var(--hair);
	text-decoration: none;
}

.c-service-item:hover { background: rgba(255, 255, 255, 0.55); }

.c-service-item__title {
	font-size: 20px;
	line-height: 1.6;
	letter-spacing: 0.09em;
	color: var(--brown-ink);
	transition: color 0.3s;
}

.c-service-item:hover .c-service-item__title { color: var(--navy); }

.c-service-item__desc {
	margin-top: 9px;
	font-size: 14.5px;
	line-height: 2;
	color: var(--brown-mute);
}

/* --- リンクの標識：細罫の丸＋矢印（comp .arw）。ishibashi_the_arrow() の .c-arrow に対応。
       常時表示。ホバーは丸の塗り替えのみ（却下済みの「横滑り」translateX は付けない）。 --- */
.c-arrow {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border: 1px solid var(--hair);
	border-radius: 50%;
	background: transparent;
	color: var(--navy);
	transition: background 0.3s, border-color 0.3s, color 0.3s;
}

/* 矢頭（右向きの山括弧）。空の span に対しCSSで描く */
.c-arrow::after {
	content: "";
	width: 7px;
	height: 7px;
	margin-left: -2px;
	border-top: 1.5px solid currentColor;
	border-right: 1.5px solid currentColor;
	transform: rotate(45deg);
}

.c-arrow--sm { width: 32px; height: 32px; }
.c-arrow--sm::after { width: 6px; height: 6px; }

/* 左向き（ページネーションの「前へ」）。右向きの山括弧を反転する */
.c-arrow--left::after {
	transform: rotate(225deg);
	margin-left: 2px;
	margin-right: -2px;
}

.c-service-item:hover .c-arrow,
.c-card:hover .c-arrow {
	background: var(--navy);
	border-color: var(--navy);
	color: var(--on-dark);
}

/* --- 本文中の囲みコンポーネント（ブロックパターンから呼ぶ。全ページで有効） ---
   注意ボックス（.c-note-box）と別途お見積り（.c-quote-row）は、段階6でパターン化するにあたり
   /price/ 専用の price.css・記事詳細の §7b から、この「5. コンポーネント」へ移設した（値は不変）。
   これらは記事・固定ページのどちらでも使うため、全ページで読み込む style.css に置く。 --- */

/* 注意ボックス（comp .artnote）。白地・hair の枠・見出し行に下罫。
   固定ページの補足（notice-box）／記事の注意喚起（caution）の両パターンが同じ意匠で使う。
   料金表の .c-price-notice（上下罫・中央寄せ）とは別物。統合しない。 */
.c-note-box {
	margin-top: 2.2em;
	padding: 26px 28px;
	background: rgba(255, 255, 255, 0.6);
	border: 1px solid var(--hair);
	font-size: 15.5px;
	line-height: 2.05;
}

.c-note-box__title {
	margin: 0 0 14px;
	padding-bottom: 12px;
	border-bottom: 1px solid var(--hair);
	font-family: var(--font-mincho);
	font-size: 15px;
	font-weight: 600;
	letter-spacing: 0.14em;
	color: var(--navy);
}

.c-note-box p {
	margin-top: 0.9em;
}

/* 見出し行の直後の本文は罫に密着させる（comp .artnote p:first-of-type） */
.c-note-box__title + p {
	margin-top: 0;
}

/* 別途お見積り（comp .quote-row）。1pxの枠＋上端に金の二重罫（.p-price-cta__inner から移植）。
   リンクは丸矢印（.c-arrow）・下線なし・ボタンにしない。 */
.c-quote-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 22px;
	margin-top: 22px;
	padding: 26px 28px;
	border: 1px solid var(--hair);
	border-top: 3px double var(--gold);   /* 巻物の見立て（.p-price-cta__inner から移植） */
	background: rgba(255, 255, 255, 0.55);
}

.c-quote-row__title {
	font-family: var(--font-mincho);
	font-size: 17px;
	font-weight: 600;
	letter-spacing: 0.1em;
	color: var(--navy);
}

.c-quote-row__text {
	font-size: 14px;
	line-height: 1.9;
	color: var(--brown-mute);
}

.c-quote-row__link {
	display: inline-flex;
	align-items: center;
	gap: 11px;
	font-family: var(--font-mincho);
	font-size: 13.5px;
	letter-spacing: 0.1em;
	color: var(--navy);
	text-decoration: none;
}

.c-quote-row__link:hover .c-arrow {
	background: var(--navy);
	border-color: var(--navy);
	color: var(--on-dark);
}

/* 先に結論から（記事冒頭の要約囲み。上下に金の二重罫＝巻物の見立て）。
   地は生成り、見出しは紺（金は明色地の文字色に使わない）。二重罫は .c-quote-row と同値。
   石橋様の「答えを先に出す」書き方を当サイトの語彙に置き換えたもの（新規コンポーネント。段階6①）。 */
.c-conclusion {
	margin-top: 2.2em;
	padding: 26px 28px;
	background: var(--kinari-deep);
	border-top: 3px double var(--gold);
	border-bottom: 3px double var(--gold);
}

.c-conclusion__title {
	text-align: center;
	font-family: var(--font-mincho);
	font-size: 13px;
	letter-spacing: 0.2em;
	color: var(--navy);
}

.c-conclusion__body {
	margin-top: 12px;
	font-size: 16px;
	line-height: 1.9;
	color: var(--brown-body);
}

@media (max-width: 900px) {
	/* 地色と罫は維持し、余白だけ詰める */
	.c-note-box,
	.c-quote-row,
	.c-conclusion {
		padding: 22px 20px;
	}
}

/* --- 5. 料金導線（巻物の二重罫）（comp .price-box / .price-in） --- */
.p-price-cta {
	background: var(--kinari);
	border: 1px solid var(--line);
}

.p-price-cta__inner {
	display: grid;
	grid-template-columns: 1fr auto;
	gap: 40px;
	align-items: center;
	padding: 48px 46px;
	border-top: 3px double var(--gold);   /* 巻物の見立て */
}

.p-price-cta .c-section-head__title { font-size: clamp(21px, 2.6vw, 26px); }

.p-price-cta__note {
	margin-top: 16px;
	font-size: 14.5px;
	line-height: 2.05;
	color: var(--brown-mute);
}

.p-price-cta__free {
	margin-top: 22px;
	padding-left: 16px;
	border-left: 1px solid var(--gold);
	font-family: var(--font-mincho);
	font-weight: 600;
	font-size: 16.5px;
	line-height: 1.95;
	letter-spacing: 0.05em;
	color: var(--navy);
}

/* --- 6. ロゴに込めた想い（地紋＋縦組み）（comp .omoi） --- */
.p-omoi {
	position: relative;
	overflow: hidden;
	background: var(--kinari-deep);
}

/* 地紋：円章を不透明度3.8%で背面に沈める（520px以上の元画像） */
.p-omoi::before {
	content: "";
	position: absolute;
	right: -90px;
	top: 50%;
	transform: translateY(-50%);
	width: 620px;
	height: 620px;
	background: url(assets/img/watermark.png) center / contain no-repeat;
	opacity: var(--watermark-opacity);
	pointer-events: none;
}

.p-omoi__inner {
	position: relative;
	display: flex;
	gap: 56px;
	align-items: flex-start;
}

.p-omoi__mark {
	flex: 0 0 auto;
	padding-top: 8px;
	text-align: center;
}

.p-omoi__mark img { width: 132px; margin-inline: auto; }

.p-omoi__mark figcaption {
	margin-top: 16px;
	font-family: var(--font-display);
	font-size: 11px;
	letter-spacing: 0.24em;
	color: var(--brown-mute);      /* ①：明色地ゆえゴールド文字を避ける */
}

.p-omoi__body { flex: 1; min-width: 0; }

.p-omoi__title {
	font-size: 22px;
	line-height: 1.9;
	letter-spacing: 0.14em;
}

/* 縦組み（PCのみ）。900px以下で横組みへ */
.c-tate {
	writing-mode: vertical-rl;
	text-orientation: mixed;
	height: 430px;
	margin-top: 30px;
	padding-right: 6px;
	font-family: var(--font-mincho);
	font-weight: 400;
	font-size: 15.5px;
	line-height: 2.35;
	letter-spacing: 0.12em;
	color: var(--brown-body);
	text-align: justify;
}

.c-tate p { margin-left: 1.7em; }
.c-tate p:first-child { margin-left: 0; }

.p-omoi__sign {
	margin-top: 26px;
	font-family: var(--font-mincho);
	font-size: 14.5px;
	letter-spacing: 0.14em;
	color: var(--brown-mute);
}

.p-omoi__sign b {
	font-weight: 600;
	font-size: 16px;
	color: var(--navy);
}

/* --- 7. ブログ新着（カード。段階6で content-card.php に切り出す）（comp .posts / .post） --- */
.c-card-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	margin-top: 44px;
	border-top: 1px solid var(--hair);
}

.c-card {
	position: relative;
	display: flex;
	flex-direction: column;
	padding: 30px 26px;
	border-bottom: 1px solid var(--hair);
	text-decoration: none;
	transition: background 0.3s;
}

.c-card:hover { background: rgba(255, 255, 255, 0.55); }

.c-card + .c-card::before {
	content: "";
	position: absolute;
	left: 0;
	top: 22px;
	bottom: 22px;
	width: 1px;
	background: var(--hair);
}

.c-card__meta {
	display: flex;
	align-items: center;
	gap: 13px;
	font-size: 12px;
	letter-spacing: 0.09em;
	color: var(--brown-mute);
	font-variant-numeric: lining-nums;
}

.c-card__cat {
	font-family: var(--font-mincho);
	font-size: 12.5px;
	letter-spacing: 0.14em;
	color: var(--navy);
}

.c-card__title {
	margin-top: 14px;
	font-size: 16.5px;
	line-height: 1.95;
	letter-spacing: 0.05em;
	color: var(--brown-ink);       /* A：記事タイトルは h3＝mincho 600（base/theme.json） */
	transition: color 0.3s;
}

.c-card:hover .c-card__title { color: var(--navy); }

.c-card__more {
	display: flex;
	align-items: center;
	gap: 12px;
	margin-top: auto;
	padding-top: 22px;
}

.c-card__more span {
	font-family: var(--font-mincho);
	font-size: 13px;
	letter-spacing: 0.12em;
	color: var(--navy);
}

/* --- 8. 事務所のご案内（comp .office） --- */
.p-office {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 56px;
	align-items: start;
}

.p-office__table {
	width: 100%;
	margin-top: 28px;
	border-collapse: collapse;
	font-size: 15px;
}

.p-office__table th,
.p-office__table td {
	padding: 15px 4px;
	border-bottom: 1px solid var(--hair);
	text-align: left;
	vertical-align: top;
	line-height: 1.9;
}

.p-office__table th {
	width: 7.5em;
	font-family: var(--font-mincho);
	font-weight: 600;              /* A：表見出しは600へ */
	letter-spacing: 0.1em;
	color: var(--navy);
	white-space: nowrap;
}

.c-map-placeholder {
	aspect-ratio: 4 / 3;
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--kinari-deep);
	border: 1px solid var(--line);
	font-size: 13px;
	letter-spacing: 0.14em;
	color: #8a7d6b;                /* 地図プレースホルダの説明文。map_src 未設定時のフォールバック */
}

/* 実地図（template-parts/map.php）。枠（.c-map）はカンプ top.html の .map-ph に揃える
   （4/3・1px --line 枠）。読み込み中の地は kinari-deep。900px以下でも 4/3 を保ち潰れない。
   aspect-ratio は外側の枠に持たせ、iframe 側は枠を満たす指定を持つ
   （iframe に aspect-ratio 未指定だと既定 300×150 のままになるため。iframe はインラインなので
   display:block で下の隙間も消す）。 */
.c-map {
	position: relative;
	width: 100%;
	aspect-ratio: 4 / 3;
	border: 1px solid var(--line);
	background: var(--kinari-deep);
}

.c-map iframe {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	display: block;
	border: 0;
}

.p-office__area {
	margin-top: 24px;
	font-size: 14.5px;
	line-height: 2.1;
	color: var(--brown-mute);
}

.p-office__area b {
	font-family: var(--font-mincho);
	font-weight: 600;
	letter-spacing: 0.1em;
	color: var(--navy);
}

/* --- トップページのレスポンシブ（900px）（comp のメディアクエリから） --- */
@media (max-width: 900px) {
	.l-section { padding: 64px 0; }

	.p-hero { padding: 40px 0 66px; }

	.p-hero__inner { grid-template-columns: 1fr; gap: 46px; }
	.p-hero__copy { order: 2; }
	.p-hero__portrait { order: 1; width: min(250px, 70%); }
	.p-hero__tags span { padding: 10px 15px; font-size: 12.5px; }

	.p-reasons__grid,
	.c-card-grid { grid-template-columns: 1fr; }

	/* 縦罫→横罫に置き換える */
	.p-reasons__item + .p-reasons__item::before,
	.c-card + .c-card::before {
		left: 0;
		right: 0;
		top: 0;
		bottom: auto;
		width: auto;
		height: 1px;
	}

	.p-reasons__item,
	.c-card { padding: 32px 4px; }

	.c-service-item { padding: 24px 2px; gap: 16px; }
	.c-arrow { width: 36px; height: 36px; }

	.p-price-cta__inner { grid-template-columns: 1fr; padding: 36px 26px; }

	.p-omoi__inner { flex-direction: column; gap: 34px; align-items: center; }
	.p-omoi__mark img { width: 104px; }
	.p-omoi__body { width: 100%; }

	/* 縦組みは横組みへ切り替える */
	.c-tate {
		writing-mode: horizontal-tb;
		height: auto;
		font-size: 16px;
		line-height: 2.1;
		letter-spacing: 0.06em;
	}
	.c-tate p { margin-left: 0; margin-top: 1.3em; }
	.c-tate p:first-child { margin-top: 0; }

	.p-omoi::before { width: 420px; right: -140px; opacity: 0.03; }

	.p-office { grid-template-columns: 1fr; gap: 36px; }
}

@media (prefers-reduced-motion: reduce) {
	.c-service-item,
	.c-service-item__title,
	.c-card,
	.c-card__title,
	.c-arrow { transition: none; }
}

/* ==========================================================================
   7. 下層ページ共通            ← assets/comp/price.html / article.html から移植（タスク02・段階2）

   /price/ 固有（.pblock / .ptbl / .notice 等）は assets/css/price.css（段階3）へ。
   ここは全下層ページ共通の型（タイトル部・パンくず・目次・本文の器）だけを持つ。
   ========================================================================== */

/* --- ページタイトル部（comp .pagehead）。柱30px → 英字 → 和文。中央寄せ --- */
.c-page-header {
	position: relative;
	padding: 56px 0 44px;
	text-align: center;
}

.c-page-header__pillar {
	display: block;
	width: 1px;
	height: var(--rule-pillar-l);          /* 柱の縦罫 30px */
	margin: 0 auto 26px;
	background: var(--navy);
	opacity: 0.7;
}

.c-page-header__title {
	font-size: clamp(26px, 3.4vw, 34px);
	line-height: 1.7;
	letter-spacing: 0.16em;
}

/* 英字小見出しの中央寄せ版（両側に金の罫）。①：文字は brown-mute（.c-eyebrow 継承）、罫はゴールド */
.c-eyebrow--center {
	justify-content: center;
}

.c-eyebrow--center::before {
	content: "";
	width: var(--rule-en-title);
	height: 1px;
	background: var(--gold);
}

/* --- パンくず（comp .crumb / 出力は ishibashi_the_breadcrumb）。区切りはゴールドのスラッシュ --- */
.c-breadcrumb {
	margin-top: 26px;
}

.c-breadcrumb__list {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	margin: 0;
	padding: 0;
	list-style: none;
	font-size: 12.5px;
	letter-spacing: 0.06em;
	color: var(--brown-mute);
}

.c-breadcrumb__item {
	display: inline-flex;
	align-items: center;
}

.c-breadcrumb a {
	color: var(--brown-mute);
	text-decoration: none;
}

.c-breadcrumb a:hover {
	color: var(--navy);
}

.c-breadcrumb__sep {
	margin: 0 0.5em;
	color: var(--gold);                    /* 区切りのゴールドのスラッシュ（decision-log 下層ページの型。マーク扱い） */
}

.c-breadcrumb [aria-current="page"] {
	color: var(--brown-ink);
}

/* --- 目次（inc/outline.php の出力）。details/summary・JS不使用。
       固定ページ=閉じ＋h2連番／記事=開き＋h3ダッシュ（outline.php が制御） --- */
.c-outline {
	margin-top: 52px;
	border-top: 1px solid var(--hair);
}

.c-outline__head {
	position: relative;
	padding: 18px 2px;
	cursor: pointer;
	list-style: none;
	font-family: var(--font-mincho);
	font-size: 13px;
	letter-spacing: 0.2em;
	color: var(--navy);
}

.c-outline__head::-webkit-details-marker {
	display: none;
}

/* 開閉記号：+ → −（decision-log）。横棒＋縦棒で作り、open で縦棒を寝かせて − にする */
.c-outline__head::before,
.c-outline__head::after {
	content: "";
	position: absolute;
	right: 6px;
	top: 50%;
	width: 10px;
	height: 1px;
	background: var(--navy);
	transform: translateY(-50%);
}

.c-outline__head::after {
	transform: translateY(-50%) rotate(90deg);
	transition: transform 0.2s;
}

.c-outline[open] .c-outline__head::after {
	transform: translateY(-50%) rotate(0);
}

.c-outline__body {
	padding-bottom: 18px;
}

/* 既定（記事の目次）は1列・罫なし（カンプ article.html .artoc）。保留No.31・案A。 */
.c-outline__list {
	display: grid;
	grid-template-columns: 1fr;
	gap: 0 40px;
	margin: 0;
	padding: 8px 0 0;
	list-style: none;
}

/* 固定ページ（料金表など）の目次は2列（カンプ price.html .toc-list）。 */
.c-outline--page .c-outline__list {
	grid-template-columns: repeat(2, 1fr);
}

/* 記事の目次項目。級数はカンプ article.html:457 .artoc li（15px）に揃える（No.32・記事側の追加分）。
   縦 padding 9px は .artoc li と一致。横 34px は .artoc の連番カウンタ用の構造値のため移さない。 */
.c-outline__item a {
	display: flex;
	align-items: baseline;
	gap: 10px;
	padding: 9px 2px;
	font-size: 15px;
	line-height: 1.7;
	color: var(--brown-body);
	text-decoration: none;
}

/* 固定ページの目次項目。padding・級数はカンプ price.html:349-350 .toc-list a に揃える（No.32）。
   項目下の細罫（No.31）も2列側にだけ当てる。値は price.html .toc-list a の border-bottom を参照。 */
.c-outline--page .c-outline__item a {
	padding: 13px 2px;
	font-size: 15.5px;
	border-bottom: 1px solid var(--hair);
}

.c-outline__item a:hover {
	color: var(--navy);
}

.c-outline__num {
	margin-left: auto;                     /* 連番は右端へ寄せる（カンプ price.html の .num） */
	font-family: var(--font-display);
	font-size: 11px;
	letter-spacing: 0.2em;
	color: var(--gold);                    /* 連番はゴールド（マーク扱い・英字書体） */
}

.c-outline__item.is-level3 a {
	padding-left: 1.4em;
}

.c-outline__dash {
	flex: 0 0 auto;
	align-self: center;
	width: 10px;
	height: 1px;
	background: var(--hair);
}

/* --- 固定ページ本文（ブロックエディタ出力にCSSを当てる。文言は持たない） --- */
.l-page {
	padding: 0 0 92px;
}

.l-page__body > * {
	margin-top: 1.6em;
}

.l-page__body > *:first-child {
	margin-top: 0;
}

.l-page__body h2 {
	margin-top: 2em;
	font-size: 22px;
	line-height: 1.7;
	letter-spacing: 0.08em;
}

.l-page__body h3 {
	margin-top: 1.6em;
	font-size: 18px;
	line-height: 1.7;
	letter-spacing: 0.06em;
}

.l-page__body :is(ul, ol) {
	padding-left: 1.4em;
}

.l-page__body li {
	margin-top: 0.5em;
}

/* 引用（core/quote）。固定ページでも崩れず出るよう、記事本文（.p-single__body blockquote）と
   同一の値を当てる（段階6③。新しい色・値は作らない）。 */
.l-page__body blockquote {
	margin-top: 2em;
	padding: 4px 0 4px 24px;
	border-left: 1px solid var(--gold);
	font-family: var(--font-mincho);
	font-size: 16.5px;
	line-height: 2.1;
	letter-spacing: 0.06em;
	color: var(--brown-mute);
}

/* 画像キャプション（core/image）。幅は §2 の img リセットで担保済み。
   キャプションだけ記事本文（.p-single__body figcaption）と同一の値を当てる。 */
.l-page__body figcaption {
	margin-top: 11px;
	font-size: 13px;
	line-height: 1.85;
	color: var(--brown-mute);
}

/* /service/ 親の取扱業務一覧、各業務ページの関連記事は本文の下に余白を置く */
.c-service-list--page {
	margin-top: 56px;
}

.p-service-related {
	margin-top: 72px;
}

@media (max-width: 900px) {
	.c-page-header {
		padding: 38px 0 32px;
	}

	/* 固定ページの目次はSPで2列→1列に落とす。罫は維持する（カンプ price.html 900px以下は
	   grid-template-columns:1fr のみで .toc-list a の border-bottom は残す）。 */
	.c-outline--page .c-outline__list {
		grid-template-columns: 1fr;
	}
}

/* ==========================================================================
   7b. 記事詳細（single）        ← assets/comp/article.html から移植（タスク02・段階4）

   本文幅720px（.l-article）。コバの罫1180pxは .l-sheet として外側に残す。
   目次は inc/outline.php の .c-outline（記事＝開き・連番なし・h3ダッシュ。セクション7で既定）。
   本文中の表の巻物二重罫は theme.json core/table（表の上端）。ここでは重ねない。
   英字ラベル（Author / Related Service / Previous 等）は明色地のため brown-mute（①）。
   ========================================================================== */

.l-article {
	width: min(720px, 88%);
	margin-inline: auto;
}

/* --- 記事見出し部（comp .arthead） --- */
.p-single__head {
	padding: 52px 0 38px;
	border-bottom: 1px solid var(--hair);
}

/* パンくずは記事では左寄せ（下層ページの中央寄せを上書き） */
.p-single__head .c-breadcrumb {
	margin: 0 0 24px;
}

.p-single__head .c-breadcrumb__list {
	justify-content: flex-start;
}

.p-single__meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 16px;
	font-size: 12.5px;
	letter-spacing: 0.08em;
	color: var(--brown-mute);
	font-variant-numeric: lining-nums;
}

.p-single__cat {
	padding: 3px 14px;
	border: 1px solid var(--hair);
	font-family: var(--font-mincho);
	font-size: 13px;
	letter-spacing: 0.16em;
	color: var(--navy);
	text-decoration: none;
}

.p-single__title {
	margin-top: 22px;
	font-size: clamp(24px, 3.2vw, 31px);
	line-height: 1.85;
	letter-spacing: 0.09em;
}

.p-single__byline {
	display: flex;
	align-items: center;
	gap: 12px;
	margin-top: 26px;
	font-size: 13px;
	color: var(--brown-mute);
}

.p-single__byline-photo {
	width: 38px;
	height: 38px;
	border-radius: 50%;
	object-fit: cover;
	background: #faf4ec;
}

.p-single__byline-name {
	display: block; /* comp .artby b。氏名と肩書きを同じ行に並べない */
	font-family: var(--font-mincho);
	font-size: 14.5px;
	font-weight: 600;
	letter-spacing: 0.08em;
	color: var(--navy);
}

/* --- 本文組版（comp .artbody） --- */
.p-single__body {
	font-size: 17px;
	line-height: var(--lh-article);
	color: var(--brown-body);
	letter-spacing: 0.04em;
}

.p-single__body > p {
	margin-top: 1.7em;
}

.p-single__body > p:first-child {
	margin-top: 0;
}

/* 導入文：冒頭1段落のみ明朝18px。ブロックパターン「記事の導入文」から .is-lead を付与する。
   p:first-child では当てない（先頭が画像・見出し・リストの記事で誤爆するため。2026-08-29）。 */
.p-single__body .is-lead {
	font-family: var(--font-mincho);
	font-size: 18px;
	line-height: 2.1;
	letter-spacing: 0.08em;
	color: var(--brown-ink);
}

/* h2：左に紺の縦罫（柱） */
.p-single__body h2 {
	margin-top: 3.2em;
	padding-left: 20px;
	border-left: 1px solid var(--navy);
	font-size: clamp(20px, 2.5vw, 23px);
	line-height: 1.75;
	letter-spacing: 0.1em;
}

/* h3：下に金の44px罫 */
.p-single__body h3 {
	position: relative;
	margin-top: 2.6em;
	padding-bottom: 12px;
	font-size: 18.5px;
	line-height: 1.8;
	letter-spacing: 0.09em;
	color: var(--navy);
}

.p-single__body h3::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: 0;
	width: var(--rule-en-title);
	height: 1px;
	background: var(--gold);
}

.p-single__body :is(h2, h3) + p {
	margin-top: 1.2em;
}

.p-single__body a {
	color: var(--navy);
	border-bottom: 1px solid var(--gold-soft);
	transition: border-color 0.3s;
}

.p-single__body a:hover {
	border-color: var(--navy);
}

.p-single__body strong {
	font-weight: 600;
	color: var(--brown-ink);
}

.p-single__body :is(ul, ol) {
	margin-top: 1.5em;
	padding-left: 0;
	list-style: none;
}

.p-single__body li {
	position: relative;
	margin-top: 0.7em;
	padding-left: 26px;
	line-height: 2.05;
}

/* ul：金のダッシュ（線＝マーク） */
.p-single__body ul li::before {
	content: "";
	position: absolute;
	left: 6px;
	top: 0.95em;
	width: 6px;
	height: 1px;
	background: var(--gold);
}

/* ol：連番（マーク扱い。目次の連番と同様にゴールドの英字書体） */
.p-single__body ol {
	counter-reset: ol;
}

.p-single__body ol li {
	counter-increment: ol;
}

.p-single__body ol li::before {
	content: counter(ol);
	position: absolute;
	left: 2px;
	top: 0.05em;
	font-family: var(--font-display);
	font-size: 14px;
	color: var(--gold);
}

.p-single__body blockquote {
	margin-top: 2em;
	padding: 4px 0 4px 24px;
	border-left: 1px solid var(--gold);
	font-family: var(--font-mincho);
	font-size: 16.5px;
	line-height: 2.1;
	letter-spacing: 0.06em;
	color: var(--brown-mute);
}

.p-single__body figcaption {
	margin-top: 11px;
	font-size: 13px;
	line-height: 1.85;
	color: var(--brown-mute);
}

/* 本文中の表（巻物二重罫は theme.json core/table。見出しセルの体裁のみ補う） */
.p-single__body table {
	margin-top: 2.2em;
	font-size: 15px;
}

/* 記事本文の表はSPでも縦積みに変換せず、横スクロールを維持する（2026-08-29 決定）。
   記事の表は列数が不定で、料金表（price.css）の nth-child によるラベル流し込みが使えないため。
   料金表の縦積みと揃えようとしない。 */
.p-single__body .wp-block-table {
	overflow-x: auto;
}

.p-single__body th {
	font-family: var(--font-mincho);
	color: var(--navy);
	letter-spacing: 0.08em;
	white-space: nowrap;
	width: 11em; /* comp .arttbl th。見出し列（行ヘッダ型）の幅 */
}

/* 注意ボックス（.c-note-box）は「5. コンポーネント」へ移設（段階6①。記事・固定ページ共用のため） */

/* --- 執筆者プロフィール（comp .author） --- */
.c-author {
	display: flex;
	align-items: flex-start;
	gap: 26px;
	margin-top: 72px;
	padding: 36px 0;
	border-top: 1px solid var(--hair);
	border-bottom: 1px solid var(--hair);
}

.c-author__photo {
	flex: 0 0 auto;
	width: 92px;
	height: 92px;
	border-radius: 50%;
	overflow: hidden;
	background: #faf4ec;
	box-shadow: inset 0 0 0 1px rgba(186, 150, 76, 0.4);
}

.c-author__photo img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.c-author__label {
	font-family: var(--font-display);
	font-size: 10.5px;
	letter-spacing: 0.26em;
	color: var(--brown-mute);
}

.c-author__name {
	margin-top: 8px;
	font-size: 18px;
	letter-spacing: 0.12em;
	color: var(--navy);
}

/* 肩書き（ユーザーメタ ishibashi_title。comp .author .qual）。未設定ならテンプレート側で行ごと非表示 */
.c-author__title {
	margin-top: 6px;
	font-size: 13px;
	letter-spacing: 0.06em;
	color: var(--brown-mute);
}

.c-author__bio {
	margin-top: 13px;
	font-size: 14.5px;
	line-height: 2;
	color: var(--brown-mute);
}

.c-author__more {
	display: inline-flex;
	align-items: center;
	gap: 11px;
	margin-top: 16px;
	font-family: var(--font-mincho);
	font-size: 13.5px;
	letter-spacing: 0.1em;
	color: var(--navy);
	text-decoration: none;
}

/* --- 相互リンク（取扱業務）（comp .related-svc） --- */
.c-service-link {
	margin-top: 40px;
	padding: 30px 32px;
	border: 1px solid var(--hair);
	background: rgba(255, 255, 255, 0.6);
}

.c-service-link__label {
	font-family: var(--font-display);
	font-size: 10.5px;
	letter-spacing: 0.26em;
	color: var(--brown-mute);
}

.c-service-link__link {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
	margin-top: 14px;
	text-decoration: none;
}

.c-service-link__title {
	display: block;
	font-family: var(--font-mincho);
	font-size: 19px;
	font-weight: 600;
	line-height: 1.7;
	letter-spacing: 0.1em;
	color: var(--brown-ink);
	transition: color 0.3s;
}

.c-service-link__link:hover .c-service-link__title {
	color: var(--navy);
}

.c-service-link__desc {
	display: block;
	margin-top: 7px;
	font-size: 14px;
	line-height: 1.9;
	color: var(--brown-mute);
}

.c-service-link__link:hover .c-arrow {
	background: var(--navy);
	border-color: var(--navy);
	color: var(--on-dark);
}

/* --- 前後の記事（comp .pager） --- */
.c-pager {
	display: grid;
	grid-template-columns: 1fr 1fr;
	margin-top: 52px;
	border-top: 1px solid var(--hair);
	border-bottom: 1px solid var(--hair);
}

.c-pager__item {
	position: relative;
	display: block;
	padding: 26px 24px;
	text-decoration: none;
}

.c-pager__item + .c-pager__item::before {
	content: "";
	position: absolute;
	left: 0;
	top: 20px;
	bottom: 20px;
	width: 1px;
	background: var(--hair);
}

.c-pager__item--next {
	text-align: right;
}

.c-pager__dir {
	display: block;
	font-family: var(--font-display);
	font-size: 10.5px;
	letter-spacing: 0.24em;
	color: var(--brown-mute);
}

.c-pager__title {
	display: block;
	margin-top: 11px;
	font-family: var(--font-mincho);
	font-size: 15.5px;
	line-height: 1.85;
	letter-spacing: 0.05em;
	color: var(--brown-ink);
	transition: color 0.3s;
}

.c-pager__item:hover .c-pager__title {
	color: var(--navy);
}

/* --- 関連記事（コバ幅の3カラム。カードは content-card 共用） --- */
/* 0件ならセクションごと非表示（related.php）。1〜2件のときは新着で埋めず、件数に応じて等幅で
   詰め、3列固定（トランクは repeat(3,1fr)）の空きで間延びしないようにする。
   SP（900px以下）は下の max-width ブロックで同詳細度（0,2,0）で 1fr に戻す。 */
.p-single-related .c-card-grid {
	margin-top: 44px;
	grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
}

@media (max-width: 900px) {
	.l-article {
		width: 88%;
	}

	.p-single__head {
		padding: 34px 0 30px;
	}

	.p-single__body {
		font-size: 16.5px;
		line-height: 2.1;
	}

	.p-single__body h2 {
		margin-top: 2.6em;
		padding-left: 16px;
	}

	/* 見出しセル（行ヘッダ型の表）はSPで折り返し、幅指定も解除する（comp .arttbl th） */
	.p-single__body th {
		white-space: normal;
		width: auto;
	}

	.c-author {
		flex-direction: column;
		align-items: center;
		gap: 20px;
		text-align: center;
	}

	.c-author__more {
		justify-content: center;
	}

	/* 関連記事は縦積みに戻す。ベースの auto-fit（0,2,0）と同詳細度で上書きする（min-width は使わない） */
	.p-single-related .c-card-grid {
		grid-template-columns: 1fr;
	}

	.c-pager {
		grid-template-columns: 1fr;
	}

	.c-pager__item + .c-pager__item::before {
		left: 0;
		right: 0;
		top: 0;
		bottom: auto;
		width: auto;
		height: 1px;
	}

	.c-pager__item--next {
		text-align: left;
	}

	.c-service-link {
		padding: 24px 20px;
	}
}

/* ==========================================================================
   7c. 一覧系（home / archive / search / 404）        ← タスク02・段階5

   タイトル部（.c-page-header）・記事カード（.c-card / .c-card-grid）・丸矢印（.c-arrow）・
   CTA（.c-cta）は実装済みのものを再利用する。ここでは一覧固有の余白・ページネーション・
   検索フォーム・404の導線だけを持つ。色・書体・罫はセクション1のエイリアス。
   ========================================================================== */

/* タイトル部の下〜CTAの上。固定ページの .l-page{padding:0 0 92px} と揃える */
.p-archive {
	padding: 8px 0 92px;
}

/* 0件表示（カードの枠は出さない） */
.c-list-empty {
	margin: 56px 0;
	text-align: center;
	font-size: 15px;
	line-height: 2;
	color: var(--brown-mute);
}

/* --- ページネーション（the_posts_pagination の番号形式。現在値/前後/省略の3状態） --- */
.pagination {
	margin-top: 56px;
}

.pagination .nav-links {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 8px;
}

.pagination .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 42px;
	height: 42px;
	padding: 0 8px;
	border: 1px solid var(--hair);
	font-family: var(--font-display);
	font-size: 14.5px;
	letter-spacing: 0.04em;
	color: var(--brown-body);
	text-decoration: none;
	transition: color 0.3s, border-color 0.3s;
}

.pagination a.page-numbers:hover {
	color: var(--navy);
	border-color: var(--navy);
}

/* 現在値は紺の面。ホバー無しで判別できる（依頼書§4-6） */
.pagination .page-numbers.current {
	background: var(--navy);
	border-color: var(--navy);
	color: var(--on-dark);
}

.pagination .page-numbers.dots {
	min-width: 0;
	border-color: transparent;
	color: var(--brown-mute);
}

/* 前後の送りはサイト標準の丸矢印（.c-arrow）そのもの。枠は矢印側が持つので二重にしない */
.pagination .page-numbers.prev,
.pagination .page-numbers.next {
	min-width: 0;
	padding: 0;
	border: 0;
}

.pagination a.prev:hover .c-arrow,
.pagination a.next:hover .c-arrow {
	background: var(--navy);
	border-color: var(--navy);
	color: var(--on-dark);
}

/* --- 検索フォーム（searchform.php の .c-searchform）。装飾を足さず線と余白で仕立てる --- */
.p-search__form {
	margin-bottom: 8px;
}

.c-searchform {
	display: flex;
	gap: 10px;
	max-width: 34em;
	margin-inline: auto;
}

.c-searchform__input {
	flex: 1 1 auto;
	min-width: 0;
	padding: 12px 14px;
	border: 1px solid var(--line);
	background: #fff;
	font-size: 15px;
	color: var(--brown-body);
}

.c-searchform__input:focus {
	outline: none;
	border-color: var(--navy);
}

.c-searchform__submit {
	flex: 0 0 auto;
	padding: 0 22px;
	border: 1px solid var(--navy);
	background: var(--navy);
	color: var(--on-dark);
	font-family: var(--font-mincho);
	font-size: 14px;
	letter-spacing: 0.08em;
	cursor: pointer;
	transition: background 0.3s, border-color 0.3s;
}

.c-searchform__submit:hover {
	background: var(--navy-hover);
	border-color: var(--navy-hover);
}

/* --- 404 の導線（取扱業務 / 料金表 / ブログ / お問い合わせ） --- */
.p-notfound {
	max-width: 40em;
	margin-inline: auto;
	text-align: center;
}

.p-notfound__lead {
	font-size: 15.5px;
	line-height: 2;
	color: var(--brown-body);
}

.p-notfound__links {
	margin: 32px 0 0;
	padding: 0;
	list-style: none;
	border-top: 1px solid var(--hair);
	text-align: left;
}

.p-notfound__links li {
	border-bottom: 1px solid var(--hair);
}

.p-notfound__links a {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding: 18px 4px;
	font-family: var(--font-mincho);
	font-size: 16px;
	letter-spacing: 0.06em;
	color: var(--brown-ink);
	text-decoration: none;
	transition: color 0.3s;
}

.p-notfound__links a:hover {
	color: var(--navy);
}

.p-notfound__links a:hover .c-arrow {
	background: var(--navy);
	border-color: var(--navy);
	color: var(--on-dark);
}

@media (max-width: 900px) {
	.p-archive {
		padding: 4px 0 64px;
	}

	.c-searchform {
		max-width: none;
	}

	.pagination .page-numbers {
		min-width: 38px;
		height: 38px;
	}
}