/* TOMORI テーマ スタイル（方眼ノート）
   1. 試作 mock/v4/base.css（共通）  2. 試作 mock/v4/p1.css（方眼ノート）  3. WordPressのブロック構造への対応
   試作のCSSをそのまま使い、3で WordPress が出力するクラス（wp-block-*）と、dl を段落に置き換えた分を合わせる。 */

/* TOMORI v2 プロトタイプ
   軸：言われていた原因に取り消し線、本当の問題にマーカー（添削の表現）。それ以外は業務資料のように静かに組む。
   色：白い紙／ボールペンの紺／取り消し線の灰／蛍光マーカーの黄。アクセントはマーカーの1色だけ。
   書体：BIZ UDPゴシック1書体（業務資料・帳票の書体）。字間は変えない。 */

:root {
	--ink: #1d2a44;        /* ボールペンの紺：本文・見出し・ボタン */
	--ink-soft: #4b5568;   /* 補足（白地で 7.6:1） */
	--struck: #5c6370;     /* 取り消し線を引いた文字（白地で6.1:1、台紙の地でも5.6:1） */
	--paper: #ffffff;
	--sheet: #f2f4f7;      /* 区画の地（資料の台紙） */
	--rule: #d6dbe3;
	--marker: #fff0a0;     /* 蛍光マーカー */
	--font: "Noto Sans JP", "Hiragino Sans", "Yu Gothic", sans-serif;
	--wide: 1180px;
	--text: 40em;          /* 本文の行長（約40字） */
	--z-header: 10;
}

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

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

body {
	margin: 0;
	background: var(--paper);
	color: var(--ink);
	font-family: var(--font);
	font-size: 17px;
	line-height: 1.85;
}

h1, h2, h3 { line-height: 1.45; text-wrap: balance; word-break: auto-phrase; margin: 0; font-weight: 700; }
.real, .said, .fixes__text, .memo dd, .case__fix { word-break: auto-phrase; }
p, li, dd { text-wrap: pretty; }
p { margin: 0; }
img { max-width: 100%; height: auto; }
a { color: var(--ink); text-underline-offset: 0.2em; }
.num { font-variant-numeric: tabular-nums; }

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

.skip {
	position: absolute; left: 12px; top: -60px; z-index: calc(var(--z-header) + 1);
	background: var(--ink); color: #fff; padding: 8px 14px;
}
.skip:focus { top: 12px; }

.wrap { max-width: calc(var(--wide) + 64px); margin: 0 auto; padding: 0 32px; }
@media (max-width: 720px) { .wrap { padding: 0 16px; } }

/* ---------- 添削（このページで唯一の目立つ表現） ---------- */

.said {
	color: var(--struck);
	font-weight: 400;
	text-decoration: line-through;
	text-decoration-thickness: 2px;
	text-decoration-color: var(--ink);
}
.real {
	color: inherit;
	background: var(--marker);
	box-decoration-break: clone;
	-webkit-box-decoration-break: clone;
	padding: 0.05em 0.2em;
	font-weight: 700;
}

/* ---------- ヘッダー ---------- */

.header { border-bottom: 1px solid var(--rule); background: var(--paper); position: sticky; top: 0; z-index: var(--z-header); }
.header .wrap { display: flex; align-items: center; gap: 28px; min-height: 64px; }
.logo { font-weight: 700; font-size: 20px; text-decoration: none; }
.logo span { font-weight: 400; font-size: 13px; color: var(--ink-soft); margin-left: 10px; }
.nav { display: flex; gap: 22px; margin-left: auto; font-size: 14px; }
.nav a { text-decoration: none; padding: 8px 0; }
.nav a:hover, .nav a[aria-current="page"] { text-decoration: underline; }
.header .btn { margin-left: 8px; }
@media (max-width: 1040px) {
	.nav { display: none; }
	.header .btn { margin-left: auto; }
}

/* ---------- ボタン ---------- */

.btn {
	display: inline-flex; align-items: center; justify-content: center;
	min-height: 48px; padding: 12px 24px;
	background: var(--ink); color: #fff; border-radius: 6px;
	font-weight: 700; font-size: 16px; line-height: 1.4; text-decoration: none;
}
.btn:hover { background: #2c3d5f; }
.btn--small { min-height: 40px; padding: 8px 16px; font-size: 14px; white-space: nowrap; }
@media (max-width: 600px) { .logo span { display: none; } }
.btn-note { font-size: 14px; color: var(--ink-soft); margin-top: 10px; }

/* ---------- 区画 ---------- */

.sec { padding: 88px 0; }
.sec--sheet { background: var(--sheet); }
.sec h2 { font-size: clamp(24px, 1.2vw + 18px, 32px); margin-bottom: 28px; max-width: 26em; }
.sec h3 { font-size: 19px; }
.lead { max-width: var(--text); color: var(--ink-soft); margin-top: -12px; margin-bottom: 32px; }
.prose { max-width: var(--text); }
.prose > * + * { margin-top: 1em; }
@media (max-width: 720px) { .sec { padding: 56px 0; } }

/* ---------- FV ---------- */

.fv { padding: 72px 0 80px; border-bottom: 1px solid var(--rule); }
.fv .wrap { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 64px; align-items: start; }
.fv__service { font-size: 15px; color: var(--ink-soft); margin-bottom: 14px; }
.fv h1 { font-size: clamp(30px, 2.4vw + 18px, 48px); }
.fv__for { margin-top: 20px; max-width: 30em; }
.fv__facts { margin: 28px 0 0; display: grid; grid-template-columns: auto 1fr; gap: 6px 20px; font-size: 15px; }
.fv__facts dt { color: var(--ink-soft); }
.fv__facts dd { margin: 0; font-weight: 700; }
.fv__cta { margin-top: 32px; }
@media (max-width: 900px) {
	.fv { padding: 40px 0 48px; }
	.fv .wrap { grid-template-columns: 1fr; gap: 40px; }
}

/* 添削メモ（FV右・事例の見出し） */
.memo { border: 1px solid var(--rule); border-radius: 4px; padding: 28px; background: var(--paper); }
.memo__case { font-size: 14px; color: var(--ink-soft); margin-bottom: 18px; }
.memo dl { margin: 0; }
.memo dt { font-size: 13px; color: var(--ink-soft); }
.memo dd { margin: 4px 0 20px; font-size: 18px; line-height: 1.7; }
.memo__result { border-top: 1px solid var(--rule); padding-top: 16px; font-size: 16px; }
.memo__result strong { font-size: 22px; }

/* ---------- 悩み ---------- */

.pains { list-style: none; padding: 0; margin: 0; max-width: var(--text); border-top: 1px solid var(--rule); }
.pains li { padding: 14px 0; border-bottom: 1px solid var(--rule); }
.answer { margin-top: 28px; max-width: var(--text); font-weight: 700; }

/* ---------- 相談の帯 ---------- */

.band { padding: 32px 0; border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); }
.band .wrap { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px 32px; }
.band p { font-weight: 700; }

/* ---------- 事例 ---------- */

.case { max-width: 52em; }
.case + .case { margin-top: 56px; padding-top: 56px; border-top: 1px solid var(--rule); }
.case__meta { font-size: 14px; color: var(--ink-soft); margin-bottom: 8px; }
.case h3 { font-size: clamp(20px, 0.8vw + 16px, 24px); margin-bottom: 20px; }
.case__fix { margin: 0 0 24px; font-size: 18px; line-height: 1.75; }
.case__fix p + p { margin-top: 6px; }
.case__body { margin: 0; display: grid; grid-template-columns: 7em minmax(0, 1fr); gap: 12px 24px; }
.case__body dt { font-weight: 700; }
.case__body dd { margin: 0; max-width: var(--text); }
.case__result { margin-top: 24px; padding: 18px 22px; background: var(--sheet); border-radius: 4px; max-width: var(--text); }
.sec--sheet .case__result { background: var(--paper); }
.case__result ul { margin: 0; padding-left: 1.2em; }
.case details summary { cursor: pointer; font-weight: 700; padding: 10px 0; width: fit-content; }
@media (min-width: 721px) {
	/* PCでは経緯を常に開いて見せる（summaryは隠す） */
	.case details > summary { display: none; }
}
@media (max-width: 720px) {
	.case__body { grid-template-columns: 1fr; gap: 2px; }
	.case__body dd { margin-bottom: 14px; }
}

/* ---------- 一覧（支援内容・お受けしない相談） ---------- */

.list { margin: 0; padding-left: 1.2em; max-width: var(--text); }
.list li + li { margin-top: 8px; }
.note { font-size: 14px; color: var(--ink-soft); margin-top: 16px; max-width: var(--text); }

/* 期間ごとの進め方・流れ（順番に意味があるので番号を使う） */
.steps { list-style: none; padding: 0; margin: 0; max-width: 52em; counter-reset: s; }
.steps > li { counter-increment: s; display: grid; grid-template-columns: 7em minmax(0, 1fr); gap: 8px 24px; padding: 18px 0; border-top: 1px solid var(--rule); }
.steps > li:last-child { border-bottom: 1px solid var(--rule); }
.steps__when { font-weight: 700; }
@media (max-width: 720px) { .steps > li { grid-template-columns: 1fr; gap: 2px; } }

.flow { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(11em, 1fr)); gap: 0 24px; max-width: 60em; counter-reset: f; }
.flow li { counter-increment: f; display: flex; gap: 8px; padding: 12px 0; border-top: 1px solid var(--rule); font-size: 15px; line-height: 1.6; }
.flow li::before { content: counter(f) "."; font-weight: 700; font-variant-numeric: tabular-nums; }

/* ---------- 価格 ---------- */

.price { border-collapse: collapse; width: 100%; max-width: 40em; font-variant-numeric: tabular-nums; }
.price caption { text-align: left; font-size: 14px; color: var(--ink-soft); padding-bottom: 8px; }
.price th, .price td { padding: 14px 16px; border-bottom: 1px solid var(--rule); text-align: right; }
.price th:first-child, .price td:first-child { text-align: left; }
.price thead th { font-size: 14px; color: var(--ink-soft); font-weight: 400; border-bottom-color: var(--ink); }
.price tfoot th, .price tfoot td { font-weight: 700; font-size: 19px; border-bottom: 0; }

/* ---------- 担当者 ---------- */

.person { display: grid; grid-template-columns: minmax(0, 18em) minmax(0, 1fr); gap: 48px; }
.person__name { font-size: 26px; font-weight: 700; }
.person__role { font-size: 14px; color: var(--ink-soft); }
.career { list-style: none; padding: 0; margin: 20px 0 0; font-size: 15px; }
.career li { padding: 6px 0; border-top: 1px solid var(--rule); }
.career li:last-child { border-bottom: 1px solid var(--rule); }
.person blockquote { margin: 0 0 20px; font-size: 20px; font-weight: 700; line-height: 1.7; }
@media (max-width: 860px) { .person { grid-template-columns: 1fr; gap: 28px; } }

/* ---------- 60分相談 ---------- */

.consult { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 48px; align-items: start; }
.consult dl { margin: 0; display: grid; grid-template-columns: 8em minmax(0, 1fr); gap: 10px 20px; }
.consult dt { font-weight: 700; }
.consult dd { margin: 0; }
@media (max-width: 860px) { .consult { grid-template-columns: 1fr; gap: 28px; } }

/* ---------- 支援メニュー（TOP） ---------- */

.menu { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.menu th, .menu td { text-align: left; padding: 18px 16px 18px 0; border-bottom: 1px solid var(--rule); vertical-align: top; }
.menu thead th { font-size: 14px; color: var(--ink-soft); font-weight: 400; border-bottom-color: var(--ink); }
.menu tbody th { font-size: 17px; width: 14em; }
.menu td:last-child { white-space: nowrap; }
@media (max-width: 760px) {
	.menu thead { display: none; }
	.menu, .menu tbody, .menu tr, .menu th, .menu td { display: block; width: auto; }
	.menu tr { padding: 16px 0; border-bottom: 1px solid var(--rule); }
	.menu th, .menu td { border: 0; padding: 2px 0; }
	.menu td:last-child { white-space: normal; font-weight: 700; }
}

/* TOPの見立て一覧 */
.fixes { list-style: none; padding: 0; margin: 0; border-top: 1px solid var(--ink); }
.fixes > li { display: grid; grid-template-columns: 11em minmax(0, 1fr) minmax(0, 15em); gap: 8px 32px; padding: 24px 0; border-bottom: 1px solid var(--rule); align-items: baseline; }
.fixes__case { font-size: 14px; color: var(--ink-soft); }
.fixes__case a { color: inherit; }
.fixes__text p + p { margin-top: 4px; }
.fixes__text { font-size: 18px; line-height: 1.75; }
.fixes__result { font-weight: 700; }
@media (max-width: 900px) { .fixes > li { grid-template-columns: 1fr; gap: 6px; } }

/* 詰まり方 */
.blocks { margin: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 48px; max-width: 60em; }
.blocks > div { padding: 18px 0; border-top: 1px solid var(--rule); }
.blocks dt { font-weight: 700; }
.blocks dd { margin: 4px 0 0; color: var(--ink-soft); }
@media (max-width: 720px) { .blocks { grid-template-columns: 1fr; } }

/* ---------- フッター ---------- */

.footer { border-top: 1px solid var(--ink); padding: 40px 0 48px; font-size: 14px; }
.footer .wrap { display: flex; flex-wrap: wrap; gap: 16px 40px; justify-content: space-between; }
.footer ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px 20px; }

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

/* 画面には出さず、読み上げにだけ伝える */
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.subhead { margin-top: 56px; margin-bottom: 16px; }
.consult__action { margin-top: 24px; }
.footer nav { display: grid; gap: 8px; }

/* =========================================================
   v4 共通：比較用バー／書き込みアニメーション／グラフ（パターン3で使用）
   色と線の太さは各パターンが --anno-color / --anno-width / --marker-color で決める
   ========================================================= */

.switcher {
	display: flex; flex-wrap: wrap; gap: 4px 16px; align-items: center;
	padding: 8px 16px; background: #111827; color: #fff; font-size: 13px;
	font-family: "BIZ UDPGothic", sans-serif;
}
.switcher a { color: #cbd5e1; text-decoration: none; padding: 4px 6px; border-radius: 4px; }
.switcher a[aria-current="page"] { background: #fff; color: #111827; font-weight: 700; }

:root { --anno-color: #c0392b; --anno-width: 2.4px; --marker-color: #fff0a0; --anno-delay: 0s; }

.anno-target { position: relative; }
.anno-target--circle, .anno-target--box, .anno-target--strike, .anno-target--stamp { display: inline-block; }
.anno { position: absolute; pointer-events: none; overflow: visible; }
.anno path {
	fill: none; stroke: var(--anno-color); stroke-width: var(--anno-width);
	stroke-linecap: round; stroke-linejoin: round;
	stroke-dasharray: 1; stroke-dashoffset: 1;
	transition: stroke-dashoffset 0.7s ease-out var(--anno-delay);
}
.is-in > .anno path, .is-in > .anno-arrow .anno path, .is-in .anno--check path { stroke-dashoffset: 0; }

.anno--underline { left: -2%; width: 104%; bottom: -0.32em; height: 0.5em; }
.anno--circle { left: -9%; top: -30%; width: 118%; height: 160%; }
.anno--box { left: -6px; top: -6px; width: calc(100% + 12px); height: calc(100% + 12px); }
.anno--strike { left: -1%; width: 102%; top: 0.25em; height: 0.9em; }
.anno-target--strike { text-decoration: none; background-image: none; }

/* 矢印（言われていた原因 → 本当の問題） */
.anno-arrow { display: block; position: relative; width: 24px; height: 30px; margin: 2px 0 4px 1.2em; }
.anno-arrow .anno { left: 0; top: 0; width: 100%; height: 100%; }

/* チェック（一覧の項目） */
.anno-target--check { list-style: none; padding-left: 1.9em; margin-left: -1.2em; }
.anno--check { left: 0; top: 0.35em; width: 1.1em; height: 1.1em; }

/* マーカー：左から右へ引く */
.anno-target--marker {
	background-image: linear-gradient(var(--marker-color), var(--marker-color));
	background-repeat: no-repeat;
	background-position: 0 85%;
	background-size: 0% 0.55em;
	box-decoration-break: clone; -webkit-box-decoration-break: clone;
	transition: background-size 0.8s ease-out var(--anno-delay);
}
.anno-target--marker.is-in { background-size: 100% 0.55em; }
.real.anno-target--marker { background-color: transparent; background-size: 0% 100%; background-position: 0 0; }
.real.anno-target--marker.is-in { background-size: 100% 100%; }

/* ハンコ */
.anno-target--stamp { position: relative; }
.anno--stamp {
	position: absolute; right: -0.6em; top: -1.3em;
	display: grid; place-items: center; width: 2.6em; height: 2.6em;
	border: 2px solid var(--anno-color); border-radius: 50%;
	color: var(--anno-color); font-size: 14px; font-weight: 700; line-height: 1;
	background: rgb(255 255 255 / 0.6);
	opacity: 0; transform: scale(1.6) rotate(-14deg);
	transition: opacity 0.2s ease-out var(--anno-delay), transform 0.2s ease-out var(--anno-delay);
}
.is-in > .anno--stamp { opacity: 0.92; transform: scale(1) rotate(-14deg); }

/* グラフ（パターン3以外では出さない） */
.bars { display: none; }

@media (prefers-reduced-motion: reduce) {
	.anno path, .anno-target--marker, .anno--stamp { transition: none !important; }
}
@media (max-width: 720px) { .anno--stamp { right: 0.4em; } }
/* 書き込みの線が画面端からわずかにはみ出しても、横スクロールを出さない（clipは追従ヘッダーを壊さない） */
html, body { overflow-x: clip; }

/* 行ごとの下線：対象（.is-in）の兄弟として置くため、見出し側の状態で描く */
.anno-line { height: 0.42em; }
.anno-line path { transition-delay: calc(var(--anno-delay) + var(--line-delay, 0s)); }
:is(h1, h2, h3, p, li, dd):has(.anno-target--underline.is-in) > .anno-line path { stroke-dashoffset: 0; }

/* パターン1：方眼ノート × マーカー（v3を継承し、マーカーと下線を描くアニメーションを追加） */
/* =========================================================
   v3 デザイン層：打ち合わせメモに、堀澤が赤ペンで書き込む
   ・方眼紙の地、手書きの取り消し線、ムラのあるマーカー、赤ペンの書き込み
   ・赤ペンは「書き込み」だけに使う。マーカーの黄と合わせて添削の2色
   ========================================================= */

:root {
	--pen: #c0392b;          /* 赤ペン（白地で5.4:1） */
	--grid-line: #e3e8f0;
	--head-font: "Shippori Mincho B1", "Hiragino Mincho ProN", "Yu Mincho", serif;
	--hand-font: "Klee One", "Hiragino Maru Gothic ProN", var(--font);
}

h1, h2, .person__name, .case h3, .fv__service { font-family: var(--head-font); }
h1 { font-weight: 900; }
h2 { font-weight: 900; }

/* 方眼紙（5mm方眼のイメージ） */
.fv--grid, .sec--grid {
	background-color: var(--paper);
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24'%3E%3Cpath d='M24 0H0V24' fill='none' stroke='%23e3e8f0' stroke-width='1'/%3E%3C/svg%3E");
}
.fv--grid { border-bottom: 0; }

/* FV */
.fv { padding: 96px 0 104px; }
.fv h1 { font-size: clamp(34px, 3vw + 18px, 62px); line-height: 1.3; }
.fv__service {
	display: inline-block; font-weight: 700; font-size: 15px; color: var(--ink);
	border-bottom: 2px solid var(--ink); padding-bottom: 4px; margin-bottom: 22px;
}
.fv__for { font-size: 18px; }
.fv__facts { background: var(--paper); border: 1px solid var(--rule); padding: 16px 20px; width: fit-content; max-width: 100%; }
@media (max-width: 900px) { .fv { padding: 48px 0 64px; } }

/* 打ち合わせメモ（紙をテープで留めたもの） */
.memo {
	position: relative;
	border: 0; border-radius: 2px;
	padding: 40px 36px 32px;
	background: var(--paper);
	box-shadow: 0 1px 2px rgb(29 42 68 / 0.12), 0 12px 32px -12px rgb(29 42 68 / 0.28);
	transform: rotate(-1.2deg);
	margin-top: 12px;
}
.memo::before {
	content: ""; position: absolute; top: -12px; left: 50%; width: 120px; height: 26px;
	transform: translateX(-50%) rotate(2deg);
	background: rgb(255 240 160 / 0.75);
	box-shadow: 0 1px 1px rgb(0 0 0 / 0.06);
}
.memo dd { font-size: 19px; }
.memo__result strong { font-size: 26px; font-family: var(--head-font); font-weight: 900; }
@media (max-width: 900px) { .memo { transform: none; } }

/* 手書きの取り消し線（赤ペンで1本線を引いたように） */
.said {
	text-decoration: none;
	color: var(--struck);
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 10' preserveAspectRatio='none'%3E%3Cpath d='M1 6.2 C 40 4.6, 80 6.8, 120 5.1 S 180 4.2, 199 5.6' fill='none' stroke='%23c0392b' stroke-width='2.2' stroke-linecap='round'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: 0 58%;
	background-size: 100% 0.5em;
	box-decoration-break: clone;
	-webkit-box-decoration-break: clone;
}

/* ムラのある蛍光マーカー */
.real {
	background: var(--marker);
	border-radius: 0.25em 0.6em 0.35em 0.7em / 0.6em 0.3em 0.7em 0.35em;
	padding: 0.08em 0.3em;
}

/* 赤ペンの書き込み */
.hand {
	font-family: var(--hand-font); font-weight: 600;
	color: var(--pen); font-size: 19px; line-height: 1.6;
}
.hand--memo { margin-top: 18px; transform: rotate(-2deg); transform-origin: left center; }
.hand--career { margin: 18px 0 -6px; transform: rotate(-2deg); transform-origin: left center; }

.head-note { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 8px 32px; margin-bottom: 32px; }
.head-note h2 { margin-bottom: 0; }
.head-note .hand { transform: rotate(-2deg); padding-bottom: 4px; }

/* 見立て一覧 */
.fixes { border-top: 2px solid var(--ink); background: rgb(255 255 255 / 0.8); }
.fixes > li { padding: 28px 16px; }
.fixes__text { font-size: 19px; }
.fixes__result { font-family: var(--head-font); font-weight: 900; font-size: 18px; }

/* 事例 */
.case h3 { font-weight: 900; }
.case__result { border-left: 4px solid var(--ink); border-radius: 0; }
.case__result ul { list-style: none; padding: 0; }
.case__result li { font-size: 17px; font-weight: 700; }
.case__result li + li { margin-top: 6px; }

/* 詰まり方 */
.blocks > div { border-top: 2px solid var(--ink); }
.blocks dt { font-family: var(--head-font); font-weight: 900; font-size: 19px; }

/* 担当者 */
.person__name { font-weight: 900; font-size: 34px; }

/* 相談の帯・ボタン */
.band { background: var(--ink); color: #fff; border: 0; }
.band .btn { background: var(--marker); color: var(--ink); }
.band .btn:hover { background: #fff; }
.btn { box-shadow: 0 2px 0 rgb(0 0 0 / 0.25); }

/* フッター */
.footer { background: var(--ink); color: #fff; border-top: 0; }
.footer a { color: #fff; }

/* 見出しのかなを詰める（Zen Kaku Gothic New のプロポーショナル字形） */
h1, h2, h3, .person__name, .fixes__result, .memo__result strong, .blocks dt { font-feature-settings: "palt"; }

/* 書き込みの色：赤ペン。マーカーは黄 */
:root { --anno-color: #c0392b; --anno-width: 2.6px; --marker-color: #ffe680; }
.k-catch { white-space: nowrap; }
@media (max-width: 600px) { .k-catch { white-space: normal; } }
.anno--underline { height: 0.6em; bottom: -0.38em; }
.fv h1 .anno path { stroke-width: 3.4px; }
.k-num.anno-target--circle { padding: 0 0.15em; }

/* v3の .real（背景の一括指定）を、マーカーが左から引かれる指定に戻す */
.real.anno-target--marker {
	background-color: transparent;
	background-image: linear-gradient(var(--marker-color), var(--marker-color));
	background-repeat: no-repeat;
	background-size: 0% 100%;
}
.real.anno-target--marker.is-in { background-size: 100% 100%; }

/* サービスページ用：メモの要点リスト、価格の行組み */
.memo__points { margin: 0; padding-left: 1.2em; font-size: 18px; line-height: 1.7; }
.memo__points li + li { margin-top: 10px; }
.price--rows td { text-align: left; }
.price--rows th { width: 9em; }
.price--rows td:nth-child(2) { font-weight: 700; font-size: 19px; white-space: nowrap; }
.price__sub { color: var(--ink-soft); font-size: 15px; }
@media (max-width: 720px) {
	.price--rows, .price--rows tbody, .price--rows tr, .price--rows th, .price--rows td { display: block; width: auto; }
	.price--rows tr { padding: 12px 0; border-bottom: 1px solid var(--rule); }
	.price--rows th, .price--rows td { border: 0; padding: 2px 0; text-align: left; }
}

/* レビュー1周目の修正 */
/* 下層ページの見出しはTOPより一段小さく（長い見出しでも2〜3行に収める） */
.fv--service h1 { font-size: clamp(30px, 2.2vw + 18px, 50px); }
/* キャッチの下線は折り返しに追従させる（nowrapをやめる） */
.k-catch { white-space: normal; }
/* 支援内容の一覧：PCでは2列 */
@media (min-width: 900px) {
	section[aria-labelledby="scope-title"] .wrap > ul.list { columns: 2; column-gap: 56px; max-width: none; }
	section[aria-labelledby="scope-title"] .wrap > ul.list > li { break-inside: avoid; }
}

/* ---------- グローバルナビ（サービス6つ＋事例＋お問い合わせ） ---------- */
.header .wrap { position: relative; }
.nav { margin-left: auto; }
.nav__list { display: flex; align-items: center; gap: 4px 20px; list-style: none; margin: 0; padding: 0; font-size: 14px; }
.nav__list a { display: block; padding: 8px 0; text-decoration: none; }
.nav__list a:hover, .nav__list a[aria-current="page"] { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 6px; }
.nav__sep { padding-left: 20px; border-left: 1px solid var(--rule); }

.menu-toggle {
	display: none; align-items: center; gap: 8px;
	margin-left: auto; min-height: 44px; padding: 0 12px;
	background: none; border: 1px solid var(--rule); border-radius: 6px;
	font: inherit; font-size: 14px; font-weight: 700; color: var(--ink); cursor: pointer;
}
.menu-toggle__bars, .menu-toggle__bars::before, .menu-toggle__bars::after {
	display: block; width: 18px; height: 2px; background: var(--ink); content: "";
}
.menu-toggle__bars { position: relative; }
.menu-toggle__bars::before { position: absolute; top: -6px; }
.menu-toggle__bars::after { position: absolute; top: 6px; }
.menu-toggle[aria-expanded="true"] .menu-toggle__bars { background: transparent; }
.menu-toggle[aria-expanded="true"] .menu-toggle__bars::before { top: 0; transform: rotate(45deg); }
.menu-toggle[aria-expanded="true"] .menu-toggle__bars::after { top: 0; transform: rotate(-45deg); }

@media (max-width: 1099px) {
	.menu-toggle { display: inline-flex; }
	.header .btn { margin-left: 8px; }
	.nav {
		display: none;
		position: absolute; top: 100%; left: 0; right: 0;
		background: var(--paper); border-bottom: 1px solid var(--rule);
		box-shadow: 0 12px 24px -16px rgb(29 42 68 / 0.35);
		padding: 8px 32px 20px;
	}
	.is-menu-open .nav { display: block; }
	.nav__list { flex-direction: column; align-items: stretch; gap: 0; font-size: 16px; }
	.nav__list li { border-bottom: 1px solid var(--rule); }
	.nav__list a { padding: 14px 0; }
	.nav__sep { padding-left: 0; border-left: 0; margin-top: 12px; border-top: 2px solid var(--ink); }
}
@media (max-width: 720px) {
	.nav { padding: 8px 16px 20px; }
	.menu-toggle__label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
	.menu-toggle { padding: 0 12px; }
}

/* =========================================================
   3. WordPress のブロック構造への対応
   ========================================================= */

/* ブロックの既定余白をなくし、試作と同じ余白にする */
/* blockGap を無効にしているため、ブロック間の自動余白は出ない。部品ごとの余白は試作のCSSのまま使う */
.wp-block-columns { margin-bottom: 0; gap: 0; }
.wp-block-column { flex-basis: auto !important; }
.wp-block-buttons { display: flex; flex-wrap: wrap; gap: 12px; }
.wp-block-table { margin: 0; overflow-x: auto; }
.wp-block-table table { width: 100%; border-collapse: collapse; }
.wp-block-table thead, .wp-block-table tfoot { border: 0; }
.wp-block-table td, .wp-block-table th { border: 0; border-bottom: 1px solid var(--rule); }
.wp-block-quote { margin: 0 0 20px; padding: 0; border: 0; }
.wp-block-quote p { font-size: 20px; font-weight: 700; line-height: 1.7; }
.alignfull { width: auto; max-width: none; margin-left: 0; margin-right: 0; }

/* 区画の中の要素の間隔（試作は要素ごとに margin を持っていたため、ここで付け直す） */
.sec h2 { margin-bottom: 28px; }
.sec .wrap > .lead { margin-top: -12px; margin-bottom: 32px; }
.sec .wrap > .note, .sec .wrap > .wp-block-table + .note { margin-top: 16px; }
.sec .wrap > .subhead { margin-top: 56px; margin-bottom: 16px; }
.sec .wrap > .prose + .list, .sec .wrap > .prose + .wp-block-list { margin-top: 20px; }
.prose > * + * { margin-top: 1em; }

/* ボタン（試作の .btn） */
.wp-block-button__link {
	display: inline-flex; align-items: center; justify-content: center;
	min-height: 48px; padding: 12px 24px;
	background: var(--ink); color: #fff; border-radius: 6px;
	font-family: var(--font); font-weight: 700; font-size: 16px; line-height: 1.4; text-decoration: none;
	box-shadow: 0 2px 0 rgb(0 0 0 / 0.25);
}
.wp-block-button__link:hover { background: #2c3d5f; color: #fff; }
.btn--small .wp-block-button__link { min-height: 40px; padding: 8px 16px; font-size: 14px; white-space: nowrap; }
.header .btn--small { margin-left: 8px; }
.is-style-outline .wp-block-button__link { background: transparent; color: var(--ink); border: 2px solid var(--ink); box-shadow: none; }
.band .wp-block-button__link { background: var(--marker); color: var(--ink); }
.band .wp-block-button__link:hover { background: #fff; }
.fv__cta { margin-top: 32px; }

/* ファーストビュー */
.fv__grid { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 64px; align-items: start; }
@media (max-width: 900px) { .fv__grid { grid-template-columns: 1fr; gap: 40px; } }
.fv--page { padding: 72px 0 56px; }
.fv--page h1 { font-size: clamp(28px, 2vw + 18px, 44px); }
.fv--page .fv__for { max-width: 40em; }

.fv__facts { margin-top: 28px; background: var(--paper); border: 1px solid var(--rule); padding: 16px 20px; width: fit-content; max-width: 100%; font-size: 15px; display: grid; gap: 6px; }
.fv__facts__row { display: grid; grid-template-columns: 2.5em minmax(0, 1fr); gap: 20px; }
.fv__facts__k { color: var(--ink-soft); }
.fv__facts__v { font-weight: 700; font-variant-numeric: tabular-nums; }

/* メモ */
.memo__label { font-size: 13px; color: var(--ink-soft); }
.memo__text { margin: 4px 0 20px; font-size: 19px; line-height: 1.7; word-break: auto-phrase; }

/* 相談の帯 */
.band .wrap { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px 32px; }

/* 事例 */
.case { max-width: 52em; }
.case + .case { margin-top: 56px; padding-top: 56px; border-top: 1px solid var(--rule); }
.case h3 { margin-bottom: 20px; }
.case__fix { margin-bottom: 24px; }
.wp-block-details summary { cursor: pointer; font-weight: 700; padding: 10px 0; width: fit-content; }
@media (min-width: 721px) { .case .wp-block-details > summary { display: none; } }
.case__body { display: grid; gap: 12px; }
.case__body__row { display: grid; grid-template-columns: 7em minmax(0, 1fr); gap: 24px; }
.case__body__k { font-weight: 700; }
.case__body__v { max-width: var(--text); }
@media (max-width: 720px) { .case__body__row { grid-template-columns: 1fr; gap: 2px; } }
.case__result .wp-block-list { list-style: none; padding: 0; margin: 0; }

/* 期間・手順（<strong>期間</strong>本文） */
.steps > li > strong:first-child { font-weight: 700; }

/* 価格（表ブロック） */
.price table { font-variant-numeric: tabular-nums; }
.price td { padding: 14px 16px; text-align: right; }
.price td:first-child { text-align: left; }
.price thead th { padding: 14px 16px; text-align: right; font-size: 14px; color: var(--ink-soft); font-weight: 400; border-bottom-color: var(--ink); }
.price thead th:first-child { text-align: left; }
.price tfoot td { font-weight: 700; font-size: 19px; border-bottom: 0; }
.price--rows td { text-align: left; vertical-align: top; }
.price--rows td:first-child { width: 9em; }
.price--rows td:nth-child(2) { font-weight: 700; font-size: 19px; white-space: nowrap; }
.price--rows td:nth-child(3) { color: var(--ink-soft); font-size: 15px; }
@media (max-width: 720px) {
	.price--rows table, .price--rows tbody, .price--rows tr, .price--rows td { display: block; width: auto !important; }
	.price--rows tr { padding: 12px 0; border-bottom: 1px solid var(--rule); }
	.price--rows td { border: 0; padding: 2px 0; }
}

/* 支援メニュー（TOPの表ブロック） */
.menu td { text-align: left; padding: 18px 16px 18px 0; vertical-align: top; }
.menu thead th { text-align: left; padding: 0 16px 10px 0; font-size: 14px; color: var(--ink-soft); font-weight: 400; border-bottom-color: var(--ink); }
.menu td:first-child { font-size: 17px; font-weight: 700; width: 14em; }
.menu td:last-child { white-space: nowrap; }
@media (max-width: 760px) {
	.menu thead { display: none; }
	.menu table, .menu tbody, .menu tr, .menu td { display: block; width: auto !important; }
	.menu tr { padding: 16px 0; border-bottom: 1px solid var(--rule); }
	.menu td { border: 0; padding: 2px 0; }
	.menu td:last-child { white-space: normal; font-weight: 700; }
}

/* 考え方＋代表 */
.wp-block-columns.person { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 22em); gap: 48px; }
@media (max-width: 860px) { .wp-block-columns.person { grid-template-columns: 1fr; gap: 28px; } }
.person .note { margin-top: 16px; }

/* 60分の無料相談 */
.consult { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 48px; align-items: start; }
@media (max-width: 860px) { .consult { grid-template-columns: 1fr; gap: 28px; } }
.consult__facts { display: grid; gap: 10px; }
.consult__facts__row { display: grid; grid-template-columns: 8em minmax(0, 1fr); gap: 20px; }
.consult__facts__k { font-weight: 700; }
.consult__action { margin-top: 24px; }
.consult__side .note { margin-top: 16px; }

/* 「用語：説明」の2列（業種が違っても・キーワードなど） */
.blocks { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 48px; max-width: 60em; }
.blocks__row { padding: 18px 0; border-top: 2px solid var(--ink); }
.blocks__k { font-family: var(--head-font); font-weight: 900; font-size: 19px; font-feature-settings: "palt"; }
.blocks__v { margin-top: 4px; color: var(--ink-soft); }
@media (max-width: 720px) { .blocks { grid-template-columns: 1fr; } }
.blocks + .note { margin-top: 16px; }

/* TOPの見立て一覧 */
.fixes { border-top: 2px solid var(--ink); background: rgb(255 255 255 / 0.8); }
.fixes__row { display: grid; grid-template-columns: 11em minmax(0, 1fr) minmax(0, 15em); gap: 8px 32px; padding: 28px 16px; border-bottom: 1px solid var(--rule); align-items: baseline; }
@media (max-width: 900px) { .fixes__row { grid-template-columns: 1fr; gap: 6px; } }
.fixes__text p + p { margin-top: 4px; }

/* 一覧：PCでは2列 */
@media (min-width: 900px) {
	.list--cols { columns: 2; column-gap: 56px; max-width: none; }
	.list--cols > li { break-inside: avoid; }
}

/* ヘッダー・フッター（WordPressのメニュー出力） */
.nav__list li { list-style: none; }
.nav .current-menu-item > a { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 6px; }
.footer .wrap { display: flex; flex-wrap: wrap; gap: 16px 40px; justify-content: space-between; }
.footer nav { display: grid; gap: 8px; }
.footer .nav__list, .footer__info { display: flex; flex-wrap: wrap; gap: 8px 20px; list-style: none; margin: 0; padding: 0; font-size: 14px; }
.footer .nav__list a { padding: 0; }
.footer .nav__sep { padding-left: 0; border-left: 0; margin: 0; border-top: 0; }
.footer__copy { text-align: center; font-size: 12px; padding: 0 16px 24px; margin: 0; opacity: 0.8; }
@media (max-width: 1099px) {
	.footer .nav { display: block; position: static; box-shadow: none; padding: 0; background: none; border: 0; }
	.footer .nav__list { flex-direction: row; font-size: 14px; }
	.footer .nav__list li { border: 0; }
}

/* 問い合わせフォーム（Contact Form 7） */
.form .wpcf7 { max-width: 40em; }
.tm-field { margin-bottom: 22px; }
.tm-field label { display: block; font-weight: 700; font-size: 15px; }
.tm-req, .tm-opt { display: inline-block; margin-left: 8px; padding: 0 8px; border-radius: 4px; font-size: 11px; line-height: 1.8; vertical-align: 2px; font-weight: 700; }
.tm-req { background: var(--marker); color: var(--ink); }
.tm-opt { background: var(--rule); color: var(--ink-soft); }
.tm-field .wpcf7-form-control-wrap { display: block; margin-top: 8px; }
.tm-field input[type="text"], .tm-field input[type="email"], .tm-field input[type="tel"], .tm-field input[type="url"], .tm-field select, .tm-field textarea {
	width: 100%; padding: 14px 16px; font: inherit; font-weight: 400; background: var(--paper); color: var(--ink);
	border: 1px solid #b9c1cd; border-radius: 6px;
}
.tm-field textarea { min-height: 200px; resize: vertical; }
.tm-field input:focus, .tm-field select:focus, .tm-field textarea:focus { outline: 3px solid var(--marker); outline-offset: 0; border-color: var(--ink); }
.tm-submit { margin-top: 32px; }
.wpcf7-submit { min-height: 52px; min-width: 240px; padding: 12px 32px; background: var(--ink); color: #fff; border: 0; border-radius: 6px; font: inherit; font-weight: 700; cursor: pointer; }
.wpcf7-submit:disabled { opacity: 0.5; cursor: not-allowed; }
.wpcf7-not-valid-tip { color: #b42318; font-size: 13px; margin-top: 4px; }
.wpcf7 form .wpcf7-response-output { margin: 24px 0 0; padding: 12px 16px; border-radius: 6px; }

/* プライバシーポリシー */
.legal .wrap > * { max-width: 40em; }
.legal__h { font-size: 19px !important; margin-top: 2.4em !important; padding-bottom: 8px; border-bottom: 1px solid var(--rule); }
.legal p, .legal .wp-block-list { margin-top: 1em; }
.legal__date { margin-top: 3em !important; color: var(--ink-soft); }
.thanks { padding-top: 24px; }

/* 管理バー表示時の追従ヘッダー */
.admin-bar .header { top: 32px; }
@media (max-width: 782px) { .admin-bar .header { top: 46px; } }
@media (max-width: 600px) { .admin-bar .header { top: 0; } }
/* ページ見出しだけの区画は1列 */
.fv--page .wrap { display: block; }
/* 試作の dl 用の2列指定を打ち消す（WordPressでは行ごとのグループが並ぶ） */
.fv__facts, .case__body, .consult__facts { grid-template-columns: 1fr; }
/* TOPの見出し：PCで「その原因、／本当にそこでしょうか」の2行に収める */
.fv:not(.fv--service):not(.fv--page) h1 { font-size: clamp(34px, 2.6vw + 18px, 56px); }

/* ---------- 色分けのマーカー（課題＝赤、解決・メリット＝青） ----------
   文字は紺のまま、下半分に薄い色の帯。画面に入ったときに左から引く（anno.js の marker）。 */
:root { --marker-red: #ffd2cc; --marker-blue: #cfe1ff; }
.k-red { --marker-color: var(--marker-red); }
.k-blue { --marker-color: var(--marker-blue); }
.k-red.anno-target--marker, .k-blue.anno-target--marker { background-position: 0 88%; }
.k-red.anno-target--marker { background-size: 0% 0.5em; }
.k-blue.anno-target--marker { background-size: 0% 0.5em; }
.k-red.anno-target--marker.is-in, .k-blue.anno-target--marker.is-in { background-size: 100% 0.5em; }
/* スクリプトが動かない環境でも色は出す */
.k-red:not(.anno-target), .k-blue:not(.anno-target) {
	background: linear-gradient(transparent 60%, var(--marker-color) 60%);
	box-decoration-break: clone; -webkit-box-decoration-break: clone;
}
/* 濃い地（相談の帯など）の上では帯を少し濃くする */
.band .k-red { --marker-color: rgb(255 140 125 / 0.45); }
.band .k-blue { --marker-color: rgb(120 170 255 / 0.45); }
/* 色分けの帯を太く・はっきりさせる（初回確認で「下線に見える」ため調整） */
:root { --marker-red: #ffc2b8; --marker-blue: #bcd5ff; }
.k-red.anno-target--marker, .k-blue.anno-target--marker { background-position: 0 92%; background-size: 0% 0.68em; padding: 0 0.08em; }
.k-red.anno-target--marker.is-in, .k-blue.anno-target--marker.is-in { background-size: 100% 0.68em; }

/* =========================================================
   事例（2026-10-05 読みやすさの改善）
   枠付きのカードにし、PCでは2列：左＝言われていた原因→本当の問題・結果、右＝状況・やったこと（箇条書き）
   ========================================================= */
.case {
	max-width: none;
	background: var(--paper);
	border: 1px solid var(--rule);
	border-top: 3px solid var(--ink);
	border-radius: 4px;
	padding: 32px 36px 36px;
}
.case + .case { margin-top: 32px; padding-top: 32px; border-top: 3px solid var(--ink); }
.wp-block-block + .wp-block-block .case, .case + .wp-block-block .case { margin-top: 32px; }
.case__meta { margin-bottom: 6px; }
.case h3 { font-size: clamp(20px, 0.9vw + 15px, 26px); margin-bottom: 24px; }

.case__grid { display: grid; grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.25fr); gap: 48px; align-items: start; }
@media (max-width: 900px) {
	.case { padding: 24px 20px 28px; }
	.case__grid { grid-template-columns: 1fr; gap: 20px; }
}

/* 左：見立てと結果 */
.case__fix { margin: 0 0 24px; font-size: 18px; line-height: 1.75; }
.case__fix p + p { margin-top: 8px; }
.case__label {
	font-size: 13px; font-weight: 700; color: var(--ink-soft);
	padding-bottom: 6px; margin-bottom: 10px; border-bottom: 1px solid var(--rule);
}
.case__result { margin: 0; padding: 18px 20px; background: var(--sheet); border-left: 0; border-radius: 4px; max-width: none; }
.case__result .case__label { border-bottom-color: #d6dbe3; }
.case__result .wp-block-list { list-style: none; padding: 0; margin: 0; }
.case__result li { font-family: var(--head-font); font-weight: 900; font-size: 18px; line-height: 1.55; font-feature-settings: "palt"; }
.case__result li + li { margin-top: 8px; }

/* 右：状況とやったこと */
.case__main .wp-block-details { margin: 0; }
.case__body { display: block; }
.case__body .case__label:not(:first-child) { margin-top: 24px; }
.case__text { font-size: 16px; line-height: 1.9; max-width: 36em; }
.case__did { list-style: none; padding: 0; margin: 0; max-width: 36em; }
.case__did li { position: relative; padding-left: 22px; font-size: 16px; line-height: 1.8; }
.case__did li + li { margin-top: 10px; }
.case__did li::before {
	content: ""; position: absolute; left: 2px; top: 0.72em;
	width: 8px; height: 8px; border-radius: 50%; background: var(--ink);
}

/* スマホ：結果まで見せてから「経緯を読む」 */
@media (max-width: 720px) {
	.case__main .wp-block-details > summary {
		display: block; width: 100%; padding: 12px 16px; margin-top: 4px;
		border: 1px solid var(--rule); border-radius: 6px; background: var(--sheet); text-align: center;
	}
	.case__main .wp-block-details[open] > summary { margin-bottom: 16px; }
}
/* 旧レイアウト（v2.1以前の本文）の事例も、作り直すまではそのまま読めるようにしておく */
/* 台紙の区画の中でも、カード内の結果は薄い色の箱にする */
.sec--sheet .case .case__result, .case .case__result { background: var(--sheet); }

/* =========================================================
   可読性レビュー（2026-10-05）での修正
   ========================================================= */
/* 支援メニューの表：名前の列を詰め、説明文に幅を回す */
.menu table { table-layout: auto; }
.menu td:first-child { width: 12em; white-space: nowrap; }
.menu td:nth-child(2) { width: auto; }
.menu td:last-child { width: 15em; }
/* フッター：著作権表示を左揃えにし、区切り線で分ける */
.footer__copy { max-width: calc(var(--wide) + 64px); margin: 24px auto 0; padding: 16px 32px 28px; text-align: left; border-top: 1px solid rgb(255 255 255 / 0.15); }
@media (max-width: 720px) { .footer__copy { padding: 16px 16px 24px; } }
/* 2周目：数値での確認結果から */
.memo__label, .case__label { font-size: 14px; }
.footer__copy { font-size: 13px; }
.steps { max-width: 44em; }  /* 1行52字 → 44字以内 */
/* 3周目：WordPress標準の固定幅の表（has-fixed-layout）より優先させる */
.wp-block-table.menu table.has-fixed-layout { table-layout: auto; }
.menu th:first-child, .menu td:first-child { width: 11em; white-space: nowrap; }
.menu th:last-child, .menu td:last-child { width: 14em; }
@media (max-width: 760px) { .menu th:first-child, .menu td:first-child, .menu td:last-child { width: auto; white-space: normal; } }
/* 考え方：左の文章を右の経歴の高さの中央にそろえ、余白の偏りをなくす */
.wp-block-columns.person { align-items: center; }
.person .wp-block-quote p { font-size: clamp(20px, 0.8vw + 16px, 26px); }
.wp-block-columns.person > .wp-block-column:first-child { align-self: center !important; }
/* スマホ：太い見出しで長い語（例：マーケティングチーム）がはみ出さないようにする */
@media (max-width: 480px) {
	.fv h1, .fv--service h1 { font-size: 27px; overflow-wrap: anywhere; }
	.fv:not(.fv--service):not(.fv--page) h1 { font-size: 32px; }
}

/* ---------- 文字ロゴ（v2.2.2） ---------- */
.logo { display: inline-flex; align-items: center; flex-shrink: 0; padding: 6px 0; }
.logo img { display: block; height: 24px; width: auto; }
.footer__brand { display: grid; gap: 10px; margin: 0; }
.footer__brand img { display: block; height: 22px; width: auto; }
.footer__brand span { font-size: 14px; opacity: 0.85; }
@media (max-width: 600px) { .logo img { height: 21px; } }

/* =========================================================
   v2.3.0 サービスページの組み直し（PCで右側が空く区画を、横幅を使う形に）
   ========================================================= */

/* カード（支援内容・役割・段階）。方眼ノートに貼った紙のイメージ */
.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(15em, 1fr)); gap: 20px; margin-top: 8px; }
.cards--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.cards--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.cards--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.card { background: var(--paper); border: 1px solid var(--rule); border-top: 3px solid var(--ink); border-radius: 4px; padding: 22px 22px 24px; }
.sec:not(.sec--sheet) .card { background: var(--sheet); border-color: transparent; border-top-color: var(--ink); }
.card__no { margin: 0 0 6px; font-size: 14px; font-weight: 700; color: var(--pen); letter-spacing: 0.04em; }
.card__title { margin: 0; font-family: var(--head-font); font-weight: 900; font-size: 19px; line-height: 1.5; font-feature-settings: "palt"; }
.card__lead { margin: 10px 0 0; font-size: 15px; line-height: 1.8; color: var(--ink-soft); }
.card__items { list-style: none; margin: 14px 0 0; padding: 14px 0 0; border-top: 1px dashed var(--rule); font-size: 15px; line-height: 1.7; }
.card__items li { position: relative; padding-left: 1.5em; }
.card__items li + li { margin-top: 8px; }
.card__items li::before { content: "✓"; position: absolute; left: 0; top: 0; color: var(--pen); font-weight: 700; }
.card__lead + .card__items { margin-top: 16px; }
/* 手順のカード：右向きの矢印でつなぐ */
.cards--steps .card, .cards--flow .card { position: relative; }
.cards--steps .card:not(:last-child)::after, .cards--flow .card:not(:last-child)::after {
	content: ""; position: absolute; right: -15px; top: 34px; width: 10px; height: 10px;
	border-top: 2px solid var(--ink); border-right: 2px solid var(--ink); transform: rotate(45deg); z-index: 1;
}
.cards--flow .card__title { font-size: 17px; }
/* 役割の分担（TOMORI と 御社） */
.cards--split .card { border-top-width: 3px; }
.cards--split .card:last-child { border-top-color: var(--ink-soft); }
.cards + .note, .cards__after { margin-top: 16px; }
.cards__after { max-width: var(--text); }
.sec .wrap > .cards + .subhead { margin-top: 56px; }
.sec .wrap > .prose + .cards { margin-top: 28px; }
@media (max-width: 1040px) {
	.cards--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.cards--4.cards--steps .card:nth-child(2n)::after { display: none; }
}
@media (max-width: 760px) {
	.cards, .cards--2, .cards--3, .cards--4 { grid-template-columns: 1fr; gap: 14px; }
	.cards--steps .card:not(:last-child)::after, .cards--flow .card:not(:last-child)::after { display: block; right: auto; left: 50%; top: auto; bottom: -13px; margin-left: -5px; transform: rotate(135deg); }
	.cards--4.cards--steps .card:nth-child(2n):not(:last-child)::after { display: block; }
	.card { padding: 18px 18px 20px; }
}

/* 見出し左・本文右（文章中心の区画） */
@media (min-width: 900px) {
	.sec--split > .wrap { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.4fr); column-gap: 64px; align-items: start; }
	.sec--split > .wrap > h2 { grid-column: 1; grid-row: 1 / span 6; margin: 0; }
	.sec--split > .wrap > *:not(h2) { grid-column: 2; }
	.sec--split > .wrap > .prose { margin-top: 0; }
}

/* よくある悩み：2列のチェック欄 */
.pains { max-width: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 20px; border-top: 0; }
.pains li { position: relative; padding: 18px 20px 18px 56px; border: 1px solid var(--rule); border-radius: 4px; background: var(--paper); line-height: 1.7; }
.pains li::before { content: ""; position: absolute; left: 20px; top: 20px; width: 20px; height: 20px; border: 2px solid var(--ink); border-radius: 3px; background: var(--paper); }
.pains li::after { content: ""; position: absolute; left: 25px; top: 21px; width: 8px; height: 14px; border-right: 3px solid var(--pen); border-bottom: 3px solid var(--pen); transform: rotate(40deg); }
.sec:not(.sec--sheet) .pains li { background: var(--sheet); border-color: transparent; }
.answer { max-width: 46em; margin-top: 28px; padding-left: 16px; border-left: 4px solid var(--pen); }
@media (max-width: 760px) { .pains { grid-template-columns: 1fr; gap: 10px; } .pains li { padding: 16px 16px 16px 50px; } .pains li::before { left: 16px; top: 18px; } .pains li::after { left: 21px; top: 19px; } }

/* 用語と説明の並び（制作・SEO・Growth Lens）：PCは横いっぱいに */
.blocks { max-width: none; grid-template-columns: repeat(auto-fit, minmax(14em, 1fr)); gap: 0 32px; }
@media (max-width: 720px) { .blocks { grid-template-columns: 1fr; } }

/* 始めるまでの流れ：番号の丸を線でつなぐ */
.flow { max-width: none; grid-template-columns: repeat(auto-fit, minmax(8.5em, 1fr)); gap: 0 12px; }
.flow li { position: relative; flex-direction: column; gap: 10px; padding: 0 0 8px; border-top: 0; font-size: 15px; }
.flow li::before { content: counter(f); display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--paper); border: 2px solid var(--ink); font-size: 15px; position: relative; z-index: 1; }
.flow li::after { content: ""; position: absolute; left: 34px; right: -12px; top: 17px; border-top: 2px dotted var(--ink-soft); }
.flow li:last-child::after { display: none; }
.flow li:last-child::before { background: var(--ink); color: #fff; }
@media (max-width: 760px) {
	.flow { grid-template-columns: 1fr; gap: 0; }
	.flow li { flex-direction: row; align-items: center; gap: 14px; padding: 0 0 18px; }
	.flow li::after { left: 16px; right: auto; top: 34px; bottom: 0; border-top: 0; border-left: 2px dotted var(--ink-soft); }
}

/* 費用：表を広げ、価格の行は説明を読みやすく */
.price { max-width: 52em; }
.wp-block-table.price--rows table.has-fixed-layout { table-layout: auto; }
.price--rows td:first-child { width: 10em; }
.price--rows td:nth-child(2) { width: 11em; }
@media (max-width: 760px) { .price--rows td:first-child, .price--rows td:nth-child(2) { width: auto !important; } }

/* お受けしていないご相談：3つを横に並べる（共通区画。本文の変更は不要） */
.wrap:has(> #decline-title) > .wp-block-list { list-style: none; padding: 0; margin-top: 8px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; max-width: none; }
.wrap:has(> #decline-title) > .wp-block-list > li { margin: 0; padding: 20px 22px; border: 1px solid var(--rule); border-radius: 4px; font-size: 15px; line-height: 1.8; color: var(--ink-soft); }
.wrap:has(> #decline-title) > .wp-block-list > li strong { display: inline-block; margin-bottom: 6px; font-size: 17px; line-height: 1.6; color: var(--ink); }
@media (max-width: 860px) { .wrap:has(> #decline-title) > .wp-block-list { grid-template-columns: 1fr; gap: 12px; } }

/* TOMORIの考え方：右の経歴より左が軽く見えるため、引用を大きくして重さをそろえる */
.person .wp-block-quote { border-left: 4px solid var(--pen); padding-left: 24px; }
.person .wp-block-quote p { font-family: var(--head-font); font-weight: 900; font-size: clamp(22px, 1.2vw + 16px, 32px); line-height: 1.6; font-feature-settings: "palt"; }

/* 用語と説明の並びのあとの一文（TOMORIの立場）は、受けの一文と同じ形に */
.blocks + .note { max-width: 46em; margin-top: 28px; padding-left: 16px; border-left: 4px solid var(--pen); font-size: 16px; font-weight: 700; color: var(--ink); }
/* 「ほかの事例を見る」など、補足の中の単独リンクは押せる高さを確保（14px → 32px以上） */
.sec .wrap > .note > a { padding: 9px 0; }
/* 3周目：考え方の左の文章は上端から（中央だと引用の上に大きな空きが出る）。引用は語の途中で折り返さない */
.wp-block-columns.person { align-items: start; }
.wp-block-columns.person > .wp-block-column:first-child { align-self: start !important; padding-top: 12px; }
.person .wp-block-quote p { word-break: auto-phrase; }
@media (max-width: 860px) { .wp-block-columns.person > .wp-block-column:first-child { padding-top: 0; } }

/* =========================================================
   v2.3.1 ノート感を戻す（強弱をつける）
   ・支援内容とよくある悩み：方眼の地に、テープで留めたメモと赤ペンの手描きチェック
   ・流れ・役割・手順・お受けしていないご相談：方眼の地と、赤ペンの番号だけ
   ========================================================= */

/* 方眼の地（FVと同じ） */
.sec:has(> .wrap > .cards), .sec:has(> .wrap > .pains), .sec:has(> .wrap > .flow), .sec:has(> .wrap > #decline-title) {
	background-color: var(--paper);
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24'%3E%3Cpath d='M24 0H0V24' fill='none' stroke='%23e3e8f0' stroke-width='1'/%3E%3C/svg%3E");
}

/* カードの基本：灰色の地と角丸をやめ、方眼の上に置いた紙に */
.card, .sec:not(.sec--sheet) .card { background: var(--paper); border: 1px solid var(--ink); border-top-width: 1px; border-radius: 0; }
.cards--split .card:last-child { border-top-color: var(--ink); }
/* 番号・ラベルは赤ペンの手書き */
.card__no { font-family: var(--hand-font); font-weight: 600; font-size: 17px; letter-spacing: 0; transform: rotate(-2deg); transform-origin: left center; width: fit-content; }
.card__items { border-top: 1px dashed var(--rule); }

/* 手順をつなぐ矢印も手描きに */
.cards--steps .card:not(:last-child)::after, .cards--flow .card:not(:last-child)::after {
	border: 0; transform: none; width: 22px; height: 16px; right: -21px; top: 30px;
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 16'%3E%3Cpath d='M1 8.6 C 6 7.4, 12 9.2, 19 7.8 M 13.5 2.5 C 16 5, 18 6.6, 20.5 8 C 18 9.6, 16 11.2, 13.8 13.8' fill='none' stroke='%23c0392b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center / contain;
}
@media (max-width: 760px) {
	.cards--steps .card:not(:last-child)::after, .cards--flow .card:not(:last-child)::after { right: auto; left: 50%; top: auto; bottom: -17px; margin-left: -11px; transform: rotate(90deg); }
}

/* 支援内容：テープで留めたメモ（FVのメモと同じ作り）。少しだけ傾ける */
.sec:has(> .wrap > #scope-title) .cards { gap: 28px; padding-top: 14px; }
.sec:has(> .wrap > #scope-title) .wrap > .cards:first-of-type .card {
	position: relative; border: 0;
	box-shadow: 0 1px 2px rgb(29 42 68 / 0.12), 0 10px 26px -12px rgb(29 42 68 / 0.28);
	transform: rotate(-0.6deg);
}
.sec:has(> .wrap > #scope-title) .wrap > .cards:first-of-type .card:nth-child(2n) { transform: rotate(0.5deg); }
.sec:has(> .wrap > #scope-title) .wrap > .cards:first-of-type .card::before {
	content: ""; position: absolute; top: -11px; left: 50%; width: 88px; height: 22px;
	transform: translateX(-50%) rotate(-2deg); background: rgb(255 240 160 / 0.8); box-shadow: 0 1px 1px rgb(0 0 0 / 0.06);
}
.sec:has(> .wrap > #scope-title) .wrap > .cards:first-of-type .card:nth-child(2n)::before { transform: translateX(-50%) rotate(2.5deg); }

/* 手描きのチェック（anno.js が赤ペンで描く）。記号の ✓ はやめる */
.card__items li { padding-left: 1.7em; }
.card__items li::before { content: none; }
.card__items li.anno-target--check { list-style: none; margin-left: 0; padding-left: 1.7em; }
.card__items .anno--check { left: 0.05em; top: 0.3em; width: 1em; height: 1em; --anno-width: 2.4px; }

/* よくある悩み：方眼に手描きした四角へ、赤ペンでチェックを入れる */
.pains li, .sec:not(.sec--sheet) .pains li { background: transparent; border: 0; border-bottom: 1px dashed var(--rule); border-radius: 0; padding: 16px 8px 16px 52px; margin: 0; }
.pains li.anno-target--check { padding-left: 52px; margin-left: 0; }
.pains li::before {
	content: ""; left: 12px; top: 18px; width: 24px; height: 24px; border: 0; border-radius: 0;
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M2.5 3.2 C 9 2.4, 15 3.1, 21.6 2.6 C 21.9 9, 21.2 15, 21.8 21.4 C 15 21.9, 9 21.1, 2.8 21.7 C 2.3 15, 3 9, 2.4 4' fill='none' stroke='%231d2a44' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat center / contain;
}
.pains li::after { content: none; }
.pains .anno--check { left: 14px; top: 12px; width: 26px; height: 26px; --anno-width: 3px; }
@media (max-width: 760px) { .pains li, .pains li.anno-target--check { padding: 14px 4px 14px 48px; } .pains li::before { left: 10px; top: 16px; } .pains .anno--check { left: 12px; top: 10px; } }

/* 始めるまでの流れ：番号を赤ペンの手書きの丸に */
.flow li::before { font-family: var(--hand-font); font-weight: 600; font-size: 18px; color: var(--pen); border: 0;
	background: var(--paper) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 34 34'%3E%3Cpath d='M18 2.6 C 27 2.4, 32 9, 31.6 17.4 C 31.2 26, 25 31.6, 16.4 31.4 C 8 31.2, 2.4 25, 2.6 16.6 C 2.8 8.4, 8.6 2.8, 20.5 3.6' fill='none' stroke='%23c0392b' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat center / contain; }
.flow li:last-child::before { background-color: var(--paper); color: var(--pen);
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 34 34'%3E%3Cpath d='M18 2.6 C 27 2.4, 32 9, 31.6 17.4 C 31.2 26, 25 31.6, 16.4 31.4 C 8 31.2, 2.4 25, 2.6 16.6 C 2.8 8.4, 8.6 2.8, 20.5 3.6' fill='none' stroke='%23c0392b' stroke-width='2.6' stroke-linecap='round'/%3E%3C/svg%3E"); }
.flow li:last-child { font-weight: 700; }

/* お受けしていないご相談：方眼の上の紙 */
.wrap:has(> #decline-title) > .wp-block-list > li { background: var(--paper); border: 1px solid var(--ink); border-radius: 0; }

/* ---------- v2.4.0 サービスページ末尾の専用フォーム ---------- */
/* 中央にそろえた1列。方眼の地に、申込用紙を1枚置く */
.form--service {
	background-color: var(--paper);
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24'%3E%3Cpath d='M24 0H0V24' fill='none' stroke='%23e3e8f0' stroke-width='1'/%3E%3C/svg%3E");
}
.form--service > .wrap { max-width: calc(46em + 64px); text-align: center; }
.form--service h2 { margin: 0; }
.form__facts { list-style: none; display: flex; justify-content: center; flex-wrap: wrap; gap: 8px; margin: 18px 0 0; padding: 0; }
.form__facts li { padding: 4px 14px; border: 1.5px solid var(--ink); border-radius: 999px; background: var(--paper); font-weight: 700; font-size: 15px; }
.form__lead { margin: 14px auto 0; max-width: 34em; color: var(--ink-soft); }
.form--service .wpcf7 { max-width: none; margin-top: 28px; text-align: left; background: var(--paper); border: 1px solid var(--ink); padding: 40px 48px; box-shadow: 0 1px 2px rgb(29 42 68 / 0.12), 0 14px 34px -14px rgb(29 42 68 / 0.3); }
@media (max-width: 760px) { .form--service .wpcf7 { padding: 24px 18px; } .form--service > .wrap { text-align: left; } .form__facts { justify-content: flex-start; } .form__lead { margin-left: 0; } }

/* ページ内リンクで飛んだとき、見出しが固定ヘッダーの裏に隠れないようにする */
html { scroll-padding-top: 84px; }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }

/* フォームの細部（v2.4.1）：小さすぎる文字と、押しにくい同意欄 */
.tm-req, .tm-opt { font-size: 13px; }
.wpcf7-not-valid-tip { font-size: 14px; font-weight: 700; }
.tm-field--consent { margin-top: 8px; }
.tm-field--consent .wpcf7-list-item { margin: 0; }
.tm-field--consent label { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; cursor: pointer; font-weight: 700; }
.tm-field--consent input[type="checkbox"] { width: 22px; height: 22px; margin: 0; accent-color: var(--ink); flex-shrink: 0; }
.tm-submit input[type="submit"] { width: 100%; max-width: 26em; min-height: 56px; font-size: 17px; }
.form--service .tm-submit { text-align: center; }
@media (max-width: 760px) { .tm-submit input[type="submit"] { max-width: none; } }
.form__lead { word-break: auto-phrase; }
.form__lead + .form__lead { margin-top: 6px; }
.form__note { margin: 16px auto 0; max-width: 40em; font-size: 14px; color: var(--ink-soft); }
@media (max-width: 760px) { .form__note { margin-left: 0; } }
/* 5周目：直前の「お受けしていないご相談」も方眼の地のため、申し込みの区画は台紙の地にして区切る */
.form--service { background-image: none; background-color: var(--sheet); }

/* 迷惑投稿対策の見えない入力欄（inc/antispam.php）。画面にも読み上げにも出さない */
.tm-hp { position: absolute !important; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; }

/* =========================================================
   v2.8.0 書体の変更（2026-10-13 決定：mock/fonts の B）
   見出し＝しっぽり明朝 B1（800）、本文＝Noto Sans JP。手書きの赤ペン（Klee One）は変えない。
   極太のゴシック見出し（Zen Kaku Gothic New 900）がテンプレートの印象を強めていたため。
   しっぽり明朝 B1 は 800 までなので、900 を指定していた箇所は 800 にそろえる。
   ========================================================= */
h1, h2, .memo__result strong, .fixes__result, .case h3, .blocks dt, .blocks__k, .person__name,
.case__result li, .card__title, .person .wp-block-quote p { font-weight: 800; }