/* ============================================================
   記事用の装飾（テーマに依存しない自前のCSS。クラス名は pb- で始まる）
   Classic Editor の「スタイル」メニューから選べます。エディター内でも同じ見た目になります。
   ============================================================ */

:root {
	--pb-navy: #13294b;
	--pb-accent: #c2410c;
	--pb-line: #dbe1e8;
	--pb-soft: #f3f5f8;
}

/* ---------- 枠（ポイント・注意・補足） ---------- */
.pb-box {
	position: relative; margin: 2em 0; padding: 1.3em 1.4em 1.2em 1.4em;
	border-radius: 8px; border: 1px solid; line-height: 1.85;
}
.pb-box::before {
	display: inline-block; margin-bottom: .5em; padding: 0 .75em; border-radius: 4px;
	font-size: .8em; font-weight: 700; line-height: 1.9; letter-spacing: .08em; color: #fff;
}
.pb-box > :first-child { margin-top: 0; }
.pb-box > :last-child { margin-bottom: 0; }
.pb-box--point { background: #f2f6fc; border-color: #c4d3ea; }
.pb-box--point::before { content: "ポイント"; background: var(--pb-navy); display: table; }
.pb-box--caution { background: #fff5f2; border-color: #f2c2b3; }
.pb-box--caution::before { content: "注意"; background: #c0392b; display: table; }
.pb-box--note { background: #f7f8f9; border-color: #dfe3e8; }
.pb-box--note::before { content: "補足"; background: #5a6573; display: table; }

/* ---------- マーカー（黄色） ---------- */
.pb-marker {
	background: linear-gradient(transparent 58%, #fff09a 58%);
	padding: 0 .1em; font-weight: inherit;
}
strong.pb-marker { font-weight: 700; }

/* ---------- チェックリスト ---------- */
ul.pb-check {
	margin: 1.6em 0; padding: 1.1em 1.3em; list-style: none;
	background: var(--pb-soft); border-radius: 8px;
}
ul.pb-check li { position: relative; margin: 0; padding: .35em 0 .35em 2em; line-height: 1.75; }
ul.pb-check li + li { border-top: 1px dashed #cdd5df; }
ul.pb-check li::before {
	content: ""; position: absolute; left: .1em; top: .62em; width: 1.15em; height: 1.15em;
	border-radius: 3px; background: var(--pb-navy);
}
ul.pb-check li::after {
	content: ""; position: absolute; left: .47em; top: .78em; width: .38em; height: .68em;
	border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg);
}

/* ---------- 番号付きステップ ---------- */
ol.pb-steps { margin: 1.8em 0; padding: 0; list-style: none; counter-reset: pbstep; }
ol.pb-steps > li {
	position: relative; counter-increment: pbstep; margin: 0; padding: 0 0 1.4em 3.4em; line-height: 1.8;
}
ol.pb-steps > li::before {
	content: counter(pbstep); position: absolute; left: 0; top: 0; width: 2.3em; height: 2.3em;
	border-radius: 50%; background: var(--pb-navy); color: #fff; font-weight: 700;
	display: flex; align-items: center; justify-content: center; font-size: .95em; line-height: 1;
}
ol.pb-steps > li::after {
	content: ""; position: absolute; left: 1.08em; top: 2.5em; bottom: .2em; width: 2px; background: #cfd8e3;
}
ol.pb-steps > li:last-child { padding-bottom: 0; }
ol.pb-steps > li:last-child::after { display: none; }
ol.pb-steps > li > strong:first-child { display: block; color: var(--pb-navy); font-size: 1.05em; padding-top: .25em; }

/* ---------- Q&A ---------- */
p.pb-q, p.pb-a { position: relative; margin: 0; padding: 1em 1.2em 1em 3.4em; line-height: 1.8; }
p.pb-q { margin-top: 1.6em; background: var(--pb-soft); border-radius: 8px 8px 0 0; font-weight: 700; color: var(--pb-navy); }
p.pb-a { margin-bottom: 1.6em; border: 1px solid var(--pb-line); border-top: 0; border-radius: 0 0 8px 8px; }
p.pb-q::before, p.pb-a::before {
	position: absolute; left: 1em; top: .95em; width: 1.7em; height: 1.7em; border-radius: 50%;
	display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: .95em; line-height: 1; color: #fff;
}
p.pb-q::before { content: "Q"; background: var(--pb-navy); }
p.pb-a::before { content: "A"; background: var(--pb-accent); }
p.pb-a + p.pb-a { border-radius: 0; margin-top: -1.6em; }

/* ---------- 表 ---------- */
table.pb-table { width: 100%; margin: 1.8em 0; border-collapse: collapse; font-size: .95em; line-height: 1.7; display: table; }
table.pb-table th, table.pb-table td { padding: .8em 1em; border: 1px solid var(--pb-line); text-align: left; vertical-align: top; }
table.pb-table thead th, table.pb-table tr:first-child th { background: var(--pb-navy); color: #fff; font-weight: 500; border-color: var(--pb-navy); }
table.pb-table tbody tr:nth-child(even) td { background: #fafbfc; }
table.pb-table--rowhead tbody th, table.pb-table--rowhead td:first-child { background: var(--pb-soft); font-weight: 700; color: var(--pb-navy); width: 30%; }
@media (max-width: 640px) {
	table.pb-table { display: block; overflow-x: auto; white-space: nowrap; }
}

/* ============================================================
   監修者ボックス・事務所ボックス（記事内）
   ============================================================ */
.pb-supervisor {
	display: flex; gap: 16px; align-items: center; margin: 0 0 2em; padding: 16px 18px;
	border: 1px solid var(--pb-line); border-radius: 10px; background: #fff;
}
.pb-supervisor__photo img, .pb-supervisor .pb-avatar-placeholder {
	width: 72px; height: 72px; border-radius: 50%; object-fit: cover; display: flex; align-items: center; justify-content: center;
	background: #e9eef5; color: #9fb0c6; flex: none;
}
.pb-supervisor__body p { margin: 0; line-height: 1.6; }
.pb-supervisor__label { font-size: 12px; font-weight: 700; color: var(--pb-accent); letter-spacing: .06em; }
.pb-supervisor__name { font-size: 1.1em; font-weight: 700; color: var(--pb-navy); }
.pb-supervisor__name span { font-size: .78em; color: #5a6573; font-weight: 500; }
.pb-supervisor__office { font-size: 13px; color: #5a6573; }
.pb-supervisor__office a { color: var(--pb-navy); }

.pb-office-box {
	margin: 2.5em 0; padding: 22px; border-radius: 12px; background: var(--pb-soft);
	border-top: 4px solid var(--pb-navy); line-height: 1.7;
}
.pb-office-box__title { display: flex; align-items: center; gap: 8px; margin: 0 0 14px !important; font-size: 1.1em; font-weight: 700; color: var(--pb-navy); }
.pb-office-box__list { display: grid; gap: 12px; }
.pb-office-box__more { margin: 14px 0 0 !important; text-align: right; }
.pb-office-box__note { margin: 8px 0 0 !important; font-size: 12px; color: #5a6573; }

.pb-mini {
	display: grid; grid-template-columns: 120px 1fr 210px; gap: 16px; align-items: center;
	padding: 14px; background: #fff; border: 1px solid var(--pb-line); border-radius: 10px;
}
.pb-mini__media img, .pb-mini__media .pb-photo-placeholder { width: 120px; height: 90px; object-fit: cover; border-radius: 6px; display: flex; }
.pb-mini__body { min-width: 0; }
.pb-mini__body p { margin: 0 !important; }
.pb-mini__area { font-size: 12px; color: #5a6573; }
.pb-mini__name { font-weight: 700; font-size: 1.02em; line-height: 1.5; }
.pb-mini__name a { color: var(--pb-navy); text-decoration: none; }
.pb-mini__name a:hover { text-decoration: underline; }
.pb-mini__catch { font-size: 13.5px; color: #3a4553; margin: 2px 0 6px !important; line-height: 1.6; }
.pb-mini .pb-tags li { font-size: 11.5px; }
.pb-mini__actions { display: flex; flex-direction: column; gap: 8px; }
.pb-mini__actions .pb-btn { min-height: 44px; width: 100%; }
.pb-mini__actions .pb-btn__num { font-size: 16px; }
@media (max-width: 720px) {
	.pb-mini { grid-template-columns: 88px 1fr; gap: 12px; }
	.pb-mini__media img, .pb-mini__media .pb-photo-placeholder { width: 88px; height: 72px; }
	.pb-mini__actions { grid-column: 1 / -1; flex-direction: row; }
	.pb-mini__actions .pb-btn { flex: 1; }
	.pb-office-box { padding: 16px; }
}