/* ==========================================================================
   Shirabe — Design tokens & entry content
   フロントとブロックエディタの両方で読み込まれます。
   ========================================================================== */

:root {
	/* Color */
	--c-ink: #14213d;
	--c-ink-2: #34425e;
	--c-muted: #6a7386;
	--c-line: #e7e2d8;
	--c-line-2: #d8d1c3;
	--c-paper: #faf8f3;
	--c-paper-2: #f2eee4;
	--c-card: #ffffff;
	--c-accent: #e5432a;
	--c-accent-ink: #b8301b;
	--c-accent-ink: color-mix(in srgb, var(--c-accent) 78%, #000);
	--c-accent-soft: #fdeee9;
	--c-accent-soft: color-mix(in srgb, var(--c-accent) 9%, #fff);
	--c-marker: #ffe48a;
	--c-link: #1f5fbf;
	--c-ok: #17805f;
	--c-ok-soft: #e7f5ef;
	--c-warn: #b7791f;
	--c-warn-soft: #fdf5e6;

	/* Type */
	--f-sans: "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Hiragino Sans", "BIZ UDPGothic", Meiryo, system-ui, sans-serif;
	--f-display: "Archivo", "Helvetica Neue", Arial, var(--f-sans);
	--f-serif: "Yu Mincho", "YuMincho", "Hiragino Mincho ProN", "Noto Serif JP", serif;

	/* Shape */
	--radius: 16px;
	--radius-m: 12px;
	--radius-s: 8px;
	--shadow-s: 0 1px 2px rgb(20 33 61 / 6%), 0 2px 10px rgb(20 33 61 / 5%);
	--shadow-m: 0 18px 40px -18px rgb(20 33 61 / 28%), 0 2px 6px rgb(20 33 61 / 5%);
	--shadow-l: 0 40px 80px -30px rgb(20 33 61 / 45%);
	--ease: cubic-bezier(.2, .7, .2, 1);

	/* Icon masks */
	--i-phone: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 16.9v3a2 2 0 0 1-2.2 2 19.8 19.8 0 0 1-8.6-3.1 19.5 19.5 0 0 1-6-6A19.8 19.8 0 0 1 2.1 4.2 2 2 0 0 1 4.1 2h3a2 2 0 0 1 2 1.7c.1.9.4 1.8.7 2.7a2 2 0 0 1-.5 2.1L8 9.8a16 16 0 0 0 6 6l1.3-1.3a2 2 0 0 1 2.1-.4c.9.3 1.8.6 2.7.7a2 2 0 0 1 1.7 2z'/%3E%3C/svg%3E");
	--i-pin: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 21s-7-6.2-7-11.5A7 7 0 0 1 19 9.5C19 14.8 12 21 12 21z'/%3E%3Ccircle cx='12' cy='9.5' r='2.5'/%3E%3C/svg%3E");
	--i-clock: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7v5l3 2'/%3E%3C/svg%3E");
	--i-check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12 5 5 9-10'/%3E%3C/svg%3E");
	--i-store: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 9 4.5 4h15L21 9M3 9v11h18V9M3 9h18M9 20v-6h6v6'/%3E%3C/svg%3E");
	--i-star: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m12 2.8 2.9 5.9 6.5.9-4.7 4.6 1.1 6.5L12 17.6l-5.8 3.1 1.1-6.5L2.6 9.6l6.5-.9z'/%3E%3C/svg%3E");
	--i-bolt: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M13 2 4 14h7l-1 8 9-12h-7z'/%3E%3C/svg%3E");
	--i-pen: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 20h9'/%3E%3Cpath d='M16.5 3.5a2.1 2.1 0 0 1 3 3L7 19l-4 1 1-4z'/%3E%3C/svg%3E");
	--i-alert: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3 2 20h20z'/%3E%3Cpath d='M12 10v4M12 17h.01'/%3E%3C/svg%3E");
	--i-quote: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 18v-5.5C4 8.4 6.2 5.7 10 5l.6 1.8C8.4 7.6 7.4 9 7.3 11H10v7zm10 0v-5.5c0-4.1 2.2-6.8 6-7.5l.6 1.8c-2.2.8-3.2 2.2-3.3 4.2H20v7z'/%3E%3C/svg%3E");
	--i-ext: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 4h6v6M20 4l-9 9M19 14v5a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1V6a1 1 0 0 1 1-1h5'/%3E%3C/svg%3E");
}

/* Editor canvas base */
.editor-styles-wrapper {
	font-family: var(--f-sans);
	color: var(--c-ink);
	background: #fff;
	font-size: 16px;
	line-height: 1.9;
	letter-spacing: .02em;
}

/* ==========================================================================
   Entry content
   ========================================================================== */

:where(.entry-content, .editor-styles-wrapper) {
	font-size: 16.5px;
	line-height: 1.95;
	letter-spacing: .03em;
	overflow-wrap: anywhere;
	line-break: strict;
}

:where(.entry-content) > *:first-child { margin-top: 0; }
:where(.entry-content) > *:last-child { margin-bottom: 0; }

:where(.entry-content, .editor-styles-wrapper) :where(p) {
	margin: 0 0 1.6em;
}

/* Links */
:where(.entry-content, .editor-styles-wrapper) a:where(:not([class*="btn"]):not([class*="button"]):not(.shirabe-tel)) {
	color: var(--c-link);
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: .22em;
	transition: color .2s, text-decoration-color .2s;
}
:where(.entry-content, .editor-styles-wrapper) a:where(:not([class*="btn"]):not([class*="button"]):not(.shirabe-tel)):hover {
	color: var(--c-accent-ink);
	text-decoration-thickness: 2px;
}

/* Emphasis */
:where(.entry-content, .editor-styles-wrapper) strong,
:where(.entry-content, .editor-styles-wrapper) b {
	font-weight: 700;
	background: linear-gradient(transparent 62%, var(--c-marker) 62%);
	padding-inline: .08em;
}
:where(.entry-content, .editor-styles-wrapper) mark {
	background: var(--c-marker);
	color: inherit;
	padding: 0 .15em;
}
:where(.entry-content, .editor-styles-wrapper) small { font-size: .85em; color: var(--c-muted); }

/* ---------- Headings ---------- */
:where(.entry-content, .editor-styles-wrapper) :where(h2, h3, h4, h5, h6) {
	font-weight: 900;
	line-height: 1.5;
	letter-spacing: .03em;
	color: var(--c-ink);
	scroll-margin-top: 96px;
}

:where(.entry-content, .editor-styles-wrapper) h2 {
	position: relative;
	margin: 3.2em 0 1.3em;
	padding: .85em 1.1em .85em 1.35em;
	font-size: clamp(1.3rem, 1.1rem + .8vw, 1.55rem);
	color: #fff;
	background: var(--c-ink);
	border-radius: var(--radius-m);
	overflow: hidden;
}
:where(.entry-content, .editor-styles-wrapper) h2::before {
	content: "";
	position: absolute;
	inset: 0 auto 0 0;
	width: 6px;
	background: var(--c-accent);
}
:where(.entry-content, .editor-styles-wrapper) h2::after {
	content: "";
	position: absolute;
	right: -18px;
	bottom: -26px;
	width: 92px;
	height: 56px;
	border: 1.5px solid rgb(255 255 255 / 12%);
	border-radius: 6px;
	transform: rotate(-12deg);
}

:where(.entry-content, .editor-styles-wrapper) h3 {
	position: relative;
	margin: 2.6em 0 1.1em;
	padding: .2em 0 .55em 1.05em;
	font-size: clamp(1.15rem, 1.05rem + .45vw, 1.3rem);
	border-bottom: 2px solid var(--c-line);
}
:where(.entry-content, .editor-styles-wrapper) h3::before {
	content: "";
	position: absolute;
	left: 0;
	top: .3em;
	bottom: .65em;
	width: 5px;
	border-radius: 3px;
	background: var(--c-accent);
}

:where(.entry-content, .editor-styles-wrapper) h4 {
	display: flex;
	align-items: center;
	gap: .55em;
	margin: 2.2em 0 .8em;
	font-size: 1.08rem;
}
:where(.entry-content, .editor-styles-wrapper) h4::before {
	content: "";
	flex: none;
	width: .62em;
	height: .62em;
	border-radius: 50%;
	border: 3px solid var(--c-accent);
}

:where(.entry-content, .editor-styles-wrapper) h5,
:where(.entry-content, .editor-styles-wrapper) h6 {
	margin: 2em 0 .6em;
	font-size: 1rem;
	color: var(--c-ink-2);
}

/* ★おすすめ見出し（既存記事を JS で自動判定） */
.entry-content :where(h2, h3, h4, h5).is-recommend {
	display: flex;
	align-items: center;
	gap: .6em;
	padding: .8em 1.1em;
	color: var(--c-accent-ink);
	background: var(--c-accent-soft);
	border: 1.5px solid color-mix(in srgb, var(--c-accent) 35%, transparent);
	border-radius: var(--radius-m);
	font-size: 1.12rem;
}
.entry-content :where(h2, h3, h4, h5).is-recommend::before {
	content: "";
	position: static;
	flex: none;
	width: 1.15em;
	height: 1.15em;
	border: 0;
	border-radius: 0;
	background: var(--c-accent);
	-webkit-mask: var(--i-star) center / contain no-repeat;
	mask: var(--i-star) center / contain no-repeat;
}
.entry-content :where(h2).is-recommend::after { display: none; }

/* ---------- Lists ---------- */
:where(.entry-content, .editor-styles-wrapper) :where(ul, ol):not([class*="shirabe-"]):not(.wp-block-social-links):not(.blocks-gallery-grid):not(.wp-block-gallery) {
	margin: 0 0 1.8em;
	padding: 1.2em 1.4em 1.2em 1.4em;
	background: var(--c-paper);
	border: 1px solid var(--c-line);
	border-radius: var(--radius-m);
	list-style: none;
}
:where(.entry-content, .editor-styles-wrapper) :where(ul, ol):not([class*="shirabe-"]) :where(ul, ol) {
	margin: .4em 0 .2em;
	padding: 0 0 0 .4em;
	background: none;
	border: 0;
}
:where(.entry-content, .editor-styles-wrapper) :where(ul, ol):not([class*="shirabe-"]) > li {
	position: relative;
	padding-left: 1.5em;
	line-height: 1.75;
}
:where(.entry-content, .editor-styles-wrapper) :where(ul, ol):not([class*="shirabe-"]) > li + li { margin-top: .5em; }
:where(.entry-content, .editor-styles-wrapper) ul:not([class*="shirabe-"]) > li::before {
	content: "";
	position: absolute;
	left: .3em;
	top: .68em;
	width: .42em;
	height: .42em;
	border-radius: 50%;
	background: var(--c-accent);
}
:where(.entry-content, .editor-styles-wrapper) ol:not([class*="shirabe-"]) { counter-reset: shirabe-ol; }
:where(.entry-content, .editor-styles-wrapper) ol:not([class*="shirabe-"]) > li { counter-increment: shirabe-ol; padding-left: 2em; }
:where(.entry-content, .editor-styles-wrapper) ol:not([class*="shirabe-"]) > li::before {
	content: counter(shirabe-ol);
	position: absolute;
	left: 0;
	top: .25em;
	display: grid;
	place-items: center;
	width: 1.45em;
	height: 1.45em;
	border-radius: 50%;
	background: var(--c-ink);
	color: #fff;
	font: 700 .78em/1 var(--f-display);
}

/* ---------- Media ---------- */
:where(.entry-content, .editor-styles-wrapper) img {
	max-width: 100%;
	height: auto;
	border-radius: var(--radius-s);
}
/* 旧テーマの「noimg」ダミー画像は非表示 */
.entry-content img[src*="noimg"],
.entry-content img[src*="no_img"],
.entry-content img[src*="no-image"] { display: none !important; }

:where(.entry-content, .editor-styles-wrapper) figure { margin: 2em 0; }
:where(.entry-content, .editor-styles-wrapper) figcaption,
:where(.entry-content, .editor-styles-wrapper) .wp-caption-text {
	margin-top: .6em;
	font-size: .82rem;
	color: var(--c-muted);
	text-align: center;
}
.entry-content .wp-caption { max-width: 100%; }
.entry-content .aligncenter { display: block; margin-inline: auto; text-align: center; }
.entry-content .alignleft { float: left; margin: .3em 1.5em 1em 0; }
.entry-content .alignright { float: right; margin: .3em 0 1em 1.5em; }
.entry-content::after { content: ""; display: table; clear: both; }
.entry-content iframe { max-width: 100%; }
.entry-content :where(iframe[src*="google.com/maps"]) { width: 100%; aspect-ratio: 16 / 10; height: auto; border: 0; border-radius: var(--radius-m); }

/* ---------- Quote ---------- */
:where(.entry-content, .editor-styles-wrapper) blockquote {
	position: relative;
	margin: 2em 0;
	padding: 1.5em 1.6em 1.5em 3.4em;
	background: var(--c-paper-2);
	border-radius: var(--radius-m);
	color: var(--c-ink-2);
}
:where(.entry-content, .editor-styles-wrapper) blockquote::before {
	content: "";
	position: absolute;
	left: 1.1em;
	top: 1.35em;
	width: 1.5em;
	height: 1.5em;
	background: var(--c-line-2);
	-webkit-mask: var(--i-quote) center / contain no-repeat;
	mask: var(--i-quote) center / contain no-repeat;
}
:where(.entry-content, .editor-styles-wrapper) blockquote p:last-child { margin-bottom: 0; }
:where(.entry-content, .editor-styles-wrapper) cite { display: block; margin-top: .6em; font-size: .82rem; font-style: normal; color: var(--c-muted); }

/* ---------- Table ---------- */
.table-scroll,
.entry-content .wp-block-table {
	margin: 2em 0;
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	border: 1px solid var(--c-line);
	border-radius: var(--radius-m);
}
:where(.entry-content, .editor-styles-wrapper) table {
	width: 100%;
	border-collapse: collapse;
	font-size: .93rem;
	line-height: 1.7;
	background: #fff;
}
.entry-content > table { margin: 2em 0; border: 1px solid var(--c-line); }
:where(.entry-content, .editor-styles-wrapper) :where(th, td) {
	padding: .85em 1em;
	border-bottom: 1px solid var(--c-line);
	text-align: left;
	vertical-align: top;
}
:where(.entry-content, .editor-styles-wrapper) th,
:where(.entry-content, .editor-styles-wrapper) thead td {
	background: var(--c-paper-2);
	font-weight: 700;
	white-space: nowrap;
}
:where(.entry-content, .editor-styles-wrapper) tr:last-child > * { border-bottom: 0; }
.table-scroll table, .entry-content .wp-block-table table { margin: 0; border: 0; }

/* ---------- Misc ---------- */
:where(.entry-content, .editor-styles-wrapper) hr {
	margin: 3em auto;
	border: 0;
	height: 1px;
	background: repeating-linear-gradient(90deg, var(--c-line-2) 0 6px, transparent 6px 12px);
}
:where(.entry-content, .editor-styles-wrapper) :where(code, kbd) {
	padding: .15em .4em;
	font-size: .88em;
	background: var(--c-paper-2);
	border-radius: 4px;
}
:where(.entry-content, .editor-styles-wrapper) pre {
	padding: 1.2em 1.4em;
	overflow-x: auto;
	color: #e9edf5;
	background: var(--c-ink);
	border-radius: var(--radius-m);
	font-size: .88rem;
}
:where(.entry-content, .editor-styles-wrapper) pre code { padding: 0; background: none; color: inherit; }

/* Core buttons */
:where(.entry-content, .editor-styles-wrapper) .wp-block-button__link {
	padding: .95em 2em;
	border-radius: 999px;
	font-weight: 700;
	background: var(--c-accent);
	color: #fff;
	text-decoration: none;
	transition: transform .2s var(--ease), box-shadow .2s, background .2s;
	box-shadow: 0 10px 20px -10px color-mix(in srgb, var(--c-accent) 80%, transparent);
}
:where(.entry-content, .editor-styles-wrapper) .wp-block-button__link:hover { background: var(--c-accent-ink); transform: translateY(-2px); }
:where(.entry-content, .editor-styles-wrapper) .is-style-outline .wp-block-button__link { background: transparent; color: var(--c-ink); border: 2px solid var(--c-ink); box-shadow: none; }

/* ==========================================================================
   電話番号の自動リンク（JS）
   ========================================================================== */
.shirabe-tel {
	display: inline-flex;
	align-items: center;
	gap: .3em;
	padding: .05em .55em .05em .45em;
	margin-inline: .1em;
	color: var(--c-ok);
	font-weight: 700;
	font-feature-settings: "tnum";
	text-decoration: none;
	background: var(--c-ok-soft);
	border-radius: 6px;
	white-space: nowrap;
	transition: background .2s, color .2s;
}
.shirabe-tel::before {
	content: "";
	width: .95em;
	height: .95em;
	background: currentColor;
	-webkit-mask: var(--i-phone) center / contain no-repeat;
	mask: var(--i-phone) center / contain no-repeat;
}
.shirabe-tel:hover { background: var(--c-ok); color: #fff; }

/* ==========================================================================
   店舗情報カード  [shirabe_shop] / パターン
   ========================================================================== */
.shirabe-shop {
	position: relative;
	margin: 1.6em 0;
	padding: 1.4em 1.5em 1.3em;
	background: #fff;
	border: 1px solid var(--c-line);
	border-radius: var(--radius-m);
	box-shadow: var(--shadow-s);
}
.shirabe-shop::before {
	content: "";
	position: absolute;
	inset: 0 auto 0 0;
	width: 4px;
	background: var(--c-ink);
	border-radius: var(--radius-m) 0 0 var(--radius-m);
}
.shirabe-shop > :last-child { margin-bottom: 0; }
.shirabe-shop__head { display: flex; align-items: center; justify-content: space-between; gap: .8em; flex-wrap: wrap; margin-bottom: .7em; }
:where(.entry-content, .editor-styles-wrapper) .shirabe-shop .shirabe-shop__name {
	display: flex;
	align-items: center;
	gap: .5em;
	margin: 0 0 .5em;
	padding: 0;
	font-size: 1.1rem;
	font-weight: 900;
	color: var(--c-ink);
	background: none;
	border: 0;
	border-radius: 0;
}
.shirabe-shop__head .shirabe-shop__name { margin-bottom: 0 !important; }
:where(.entry-content, .editor-styles-wrapper) .shirabe-shop .shirabe-shop__name::before {
	content: "";
	position: static;
	flex: none;
	width: 1.1em;
	height: 1.1em;
	border: 0;
	border-radius: 0;
	background: var(--c-accent);
	-webkit-mask: var(--i-store) center / contain no-repeat;
	mask: var(--i-store) center / contain no-repeat;
}
.shirabe-shop__name .icon { display: none; }
:where(.entry-content, .editor-styles-wrapper) .shirabe-shop .shirabe-shop__name::after { display: none; }
.shirabe-shop__badge {
	padding: .25em .8em;
	font-size: .75rem;
	font-weight: 700;
	color: var(--c-accent-ink);
	background: var(--c-accent-soft);
	border-radius: 999px;
}
.shirabe-shop__meta { display: grid; gap: .35em; margin: 0; font-size: .95rem; }
.shirabe-shop__meta > div { display: grid; grid-template-columns: 6.2em 1fr; gap: .8em; padding: .45em 0; border-top: 1px dashed var(--c-line); }
.shirabe-shop__meta dt { display: flex; align-items: center; gap: .4em; font-weight: 700; color: var(--c-muted); font-size: .85rem; }
.shirabe-shop__meta dt .icon { width: 1.05em; height: 1.05em; color: var(--c-accent); }
.shirabe-shop__meta dd { margin: 0; }
.shirabe-shop__note { margin-top: .8em; font-size: .93rem; color: var(--c-ink-2); }
.shirabe-shop__note p:last-child { margin-bottom: 0; }
.shirabe-shop__actions { display: flex; flex-wrap: wrap; gap: .5em; margin-top: 1em; }
.shirabe-shop__btn {
	display: inline-flex;
	align-items: center;
	gap: .4em;
	padding: .55em 1.1em;
	font-size: .85rem;
	font-weight: 700;
	color: var(--c-ink) !important;
	text-decoration: none !important;
	background: var(--c-paper);
	border: 1px solid var(--c-line-2);
	border-radius: 999px;
	transition: background .2s, border-color .2s, color .2s;
}
.shirabe-shop__btn .icon { width: 1em; height: 1em; }
.shirabe-shop__btn:hover { border-color: var(--c-ink); background: #fff; }
.shirabe-shop__btn.is-tel { color: #fff !important; background: var(--c-ok); border-color: var(--c-ok); }
.shirabe-shop__btn.is-tel:hover { background: color-mix(in srgb, var(--c-ok) 85%, #000); }

/* パターン版（段落ベース） */
:where(.entry-content, .editor-styles-wrapper) .shirabe-shop .shirabe-shop__line {
	position: relative;
	margin: 0;
	padding: .45em 0 .45em 1.7em;
	font-size: .95rem;
	border-top: 1px dashed var(--c-line);
}
.shirabe-shop .shirabe-shop__line::before {
	content: "";
	position: absolute;
	left: 0;
	top: .78em;
	width: 1.05em;
	height: 1.05em;
	background: var(--c-accent);
	-webkit-mask: var(--i-pin) center / contain no-repeat;
	mask: var(--i-pin) center / contain no-repeat;
}
.shirabe-shop .shirabe-shop__line.is-tel::before { -webkit-mask-image: var(--i-phone); mask-image: var(--i-phone); }
.shirabe-shop .shirabe-shop__line.is-hours::before { -webkit-mask-image: var(--i-clock); mask-image: var(--i-clock); }

/* ==========================================================================
   おすすめ業者  [shirabe_recommend] / パターン
   ========================================================================== */
.shirabe-reco {
	position: relative;
	margin: 2.4em 0 2em;
	padding: 2em 1.6em 1.6em;
	background: #fff;
	border: 2px solid var(--c-ink);
	border-radius: var(--radius);
	box-shadow: 6px 6px 0 var(--c-paper-2);
}
.shirabe-reco.is-rank-1 { border-color: var(--c-accent); box-shadow: 6px 6px 0 var(--c-accent-soft); }
.shirabe-reco > :last-child { margin-bottom: 0; }
:where(.entry-content, .editor-styles-wrapper) .shirabe-reco .shirabe-reco__rank {
	position: absolute;
	top: 0;
	left: 1.4em;
	transform: translateY(-50%);
	display: inline-flex;
	align-items: center;
	gap: .35em;
	margin: 0;
	padding: .35em 1em;
	font: 800 .8rem/1.2 var(--f-display), var(--f-sans);
	letter-spacing: .06em;
	color: #fff;
	background: var(--c-ink);
	border-radius: 999px;
}
.shirabe-reco.is-rank-1 .shirabe-reco__rank { background: var(--c-accent); }
.shirabe-reco__rank .icon { width: 1em; height: 1em; }
.shirabe-reco__rank:not(:has(.icon))::before {
	content: "";
	width: 1em;
	height: 1em;
	background: currentColor;
	-webkit-mask: var(--i-star) center / contain no-repeat;
	mask: var(--i-star) center / contain no-repeat;
}
.shirabe-reco__body { display: grid; gap: 1.2em; }
.shirabe-reco__body:has(.shirabe-reco__img) { grid-template-columns: minmax(0, 220px) 1fr; align-items: start; }
.shirabe-reco__img img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; border-radius: var(--radius-s); border: 1px solid var(--c-line); }
:where(.entry-content, .editor-styles-wrapper) .shirabe-reco .shirabe-reco__name {
	margin: 0 0 .3em;
	padding: 0;
	font-size: 1.25rem;
	color: var(--c-ink);
	background: none;
	border: 0;
	display: block;
}
:where(.entry-content, .editor-styles-wrapper) .shirabe-reco .shirabe-reco__name::before,
:where(.entry-content, .editor-styles-wrapper) .shirabe-reco .shirabe-reco__name::after { display: none; }
:where(.entry-content, .editor-styles-wrapper) .shirabe-reco .shirabe-reco__catch {
	margin: 0 0 .8em;
	font-size: .92rem;
	font-weight: 700;
	color: var(--c-accent-ink);
}
.shirabe-reco__text > :last-child { margin-bottom: 0; }
.shirabe-reco .shirabe-reco__btn,
.shirabe-reco .shirabe-reco__buttons .wp-block-button__link {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: .5em;
	width: 100%;
	margin-top: 1.3em;
	padding: 1em 1.4em;
	font-weight: 700;
	color: #fff !important;
	text-decoration: none !important;
	background: var(--c-accent);
	border-radius: 999px;
	box-shadow: 0 12px 24px -12px color-mix(in srgb, var(--c-accent) 90%, transparent);
	transition: transform .2s var(--ease), background .2s;
}
.shirabe-reco .shirabe-reco__buttons { margin: 0; }
.shirabe-reco .shirabe-reco__buttons .wp-block-button { width: 100%; }
.shirabe-reco__btn .icon { width: 1.1em; height: 1.1em; transition: transform .2s var(--ease); }
.shirabe-reco__btn:hover, .shirabe-reco .shirabe-reco__buttons .wp-block-button__link:hover { background: var(--c-accent-ink); transform: translateY(-2px); }
.shirabe-reco__btn:hover .icon { transform: translateX(3px); }
.shirabe-reco ul { background: var(--c-paper) !important; }
.shirabe-reco ul > li::before {
	top: .45em !important;
	left: 0 !important;
	width: 1em !important;
	height: 1em !important;
	border-radius: 0 !important;
	background: var(--c-ok) !important;
	-webkit-mask: var(--i-check) center / contain no-repeat;
	mask: var(--i-check) center / contain no-repeat;
}

/* ==========================================================================
   補足ボックス  [shirabe_box] / パターン
   ========================================================================== */
.shirabe-box {
	--box-c: var(--c-accent);
	--box-bg: var(--c-accent-soft);
	--box-i: var(--i-bolt);
	margin: 2em 0;
	padding: 1.3em 1.5em 1.2em;
	background: var(--box-bg);
	border-radius: var(--radius-m);
	border-left: 4px solid var(--box-c);
}
.shirabe-box.is-memo { --box-c: var(--c-ink-2); --box-bg: var(--c-paper-2); --box-i: var(--i-pen); }
.shirabe-box.is-warn { --box-c: var(--c-warn); --box-bg: var(--c-warn-soft); --box-i: var(--i-alert); }
.shirabe-box.is-check { --box-c: var(--c-ok); --box-bg: var(--c-ok-soft); --box-i: var(--i-check); }
.shirabe-box > :last-child { margin-bottom: 0; }
:where(.entry-content, .editor-styles-wrapper) .shirabe-box .shirabe-box__title {
	display: flex;
	align-items: center;
	gap: .45em;
	margin: 0 0 .5em;
	font-weight: 900;
	color: var(--box-c);
}
.shirabe-box__title .icon { width: 1.15em; height: 1.15em; }
.shirabe-box__title:not(:has(.icon))::before {
	content: "";
	width: 1.15em;
	height: 1.15em;
	background: currentColor;
	-webkit-mask: var(--box-i) center / contain no-repeat;
	mask: var(--box-i) center / contain no-repeat;
}

/* ==========================================================================
   目次
   ========================================================================== */
.toc {
	margin: 2.2em 0 2.6em;
	background: #fff;
	border: 1px solid var(--c-line);
	border-radius: var(--radius-m);
	overflow: hidden;
}
.toc__summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1em;
	padding: 1em 1.3em;
	font-weight: 900;
	cursor: pointer;
	list-style: none;
	background: var(--c-paper);
	border-bottom: 1px solid var(--c-line);
}
.toc__summary::-webkit-details-marker { display: none; }
.toc__summary-title { display: inline-flex; align-items: center; gap: .55em; }
.toc__summary-title .icon { width: 1.15em; height: 1.15em; color: var(--c-accent); }
.toc__count { font: 700 .75rem/1 var(--f-display); color: var(--c-muted); letter-spacing: .06em; }
.toc__toggle { font-size: .78rem; font-weight: 700; color: var(--c-muted); display: inline-flex; align-items: center; gap: .3em; }
.toc__toggle .icon { width: 1em; height: 1em; transition: transform .25s var(--ease); }
.toc[open] .toc__toggle .icon { transform: rotate(180deg); }
.toc:not([open]) .toc__summary { border-bottom: 0; }
.entry-content .toc__list,
.entry-content .toc__list ol {
	margin: 0 !important;
	padding: 0 !important;
	background: none !important;
	border: 0 !important;
	list-style: none;
	counter-reset: toc;
}
.entry-content .toc__list { padding: .8em 1.3em 1.1em !important; }
.entry-content .toc__list li { padding: 0 !important; margin: 0 !important; counter-increment: toc; }
.entry-content .toc__list li::before { display: none !important; }
.entry-content .toc__list a {
	display: flex;
	gap: .7em;
	padding: .45em 0;
	font-size: .93rem;
	line-height: 1.6;
	color: var(--c-ink) !important;
	text-decoration: none !important;
	border-bottom: 1px dashed var(--c-line);
}
.entry-content .toc__list a::before {
	content: counters(toc, ".");
	flex: none;
	min-width: 1.6em;
	font: 700 .8rem/1.9 var(--f-display);
	color: var(--c-accent);
}
.entry-content .toc__list a:hover { color: var(--c-accent-ink) !important; }
.entry-content .toc__list ol a { padding-left: 1.2em; font-size: .88rem; color: var(--c-ink-2) !important; }
.entry-content .toc__list ol a::before { color: var(--c-muted); }
.toc.is-long:not(.is-expanded) .toc__list { max-height: 22em; overflow: hidden; -webkit-mask-image: linear-gradient(#000 70%, transparent); mask-image: linear-gradient(#000 70%, transparent); }
.toc__more {
	display: flex;
	justify-content: center;
	width: 100%;
	padding: .8em;
	font: inherit;
	font-size: .85rem;
	font-weight: 700;
	color: var(--c-ink);
	background: var(--c-paper);
	border: 0;
	border-top: 1px solid var(--c-line);
	cursor: pointer;
}
.toc__more:hover { color: var(--c-accent-ink); }

/* ==========================================================================
   Responsive (content)
   ========================================================================== */
@media (max-width: 767px) {
	:where(.entry-content) { font-size: 16px; line-height: 1.9; }
	:where(.entry-content) h2 { margin-inline: -4px; padding: .8em 1em .8em 1.2em; border-radius: var(--radius-s); }
	.shirabe-shop { padding: 1.2em 1.1em 1.1em; }
	.shirabe-shop__meta > div { grid-template-columns: 1fr; gap: .1em; }
	.shirabe-shop__actions { display: grid; grid-template-columns: 1fr 1fr; }
	.shirabe-shop__btn { justify-content: center; }
	.shirabe-shop__btn.is-tel { grid-column: 1 / -1; padding-block: .8em; font-size: .95rem; }
	.shirabe-reco { padding: 1.8em 1.1em 1.2em; }
	.shirabe-reco__body:has(.shirabe-reco__img) { grid-template-columns: 1fr; }
	.entry-content .alignleft, .entry-content .alignright { float: none; margin: 1em auto; display: block; }
}

/* ==========================================================================
   旧記事の互換性（固定幅・インラインスタイルによるはみ出し防止）
   ========================================================================== */
.entry-content :where(div, section, table, figure, iframe, video, embed, object)[style*="width"],
.entry-content :where(div, section, figure)[width] {
	max-width: 100% !important;
	box-sizing: border-box;
}
.entry-content :where(img, video)[style*="height"] { height: auto !important; }