/* ==========================================================================
   HLP Patterns — Shared utilities
   ========================================================================== */

/* Inline marker utilities — reusable across patterns. Render PHP wraps the
   parenthesised regions ({{ }}, (( )), [[ ]]) with these classes. */
.hlp-mark__underline {
	background-image: linear-gradient(to top, var(--hlp-primary, #1a6fc4) 2px, transparent 2px);
	background-position: 0 100%;
	background-repeat: no-repeat;
	padding-bottom: 2px;
}
.hlp-mark__accent {
	color: var(--hlp-primary, #1a6fc4);
	font-weight: 700;
}
.hlp-mark__highlight {
	background: linear-gradient(to bottom, transparent 55%, #fff176 55%);
	padding: 0 2px;
}

/* Image area placeholder — shown only inside the block editor preview as a
   visual cue that an image can be uploaded into this slot. The render PHP
   gates emission on REST_REQUEST so this never reaches the live frontend. */
.hlp-image-placeholder {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
	box-sizing: border-box;
	padding: 12px;
	border: 1px dashed #000;
	background: transparent;
	color: #555;
	font-size: 12px;
	font-weight: 500;
	text-align: center;
	line-height: 1.4;
	min-height: 60px;
}

/* ==========================================================================
   THEME OVERRIDE GUARD (v0.9.5+) — scoped to:
     .hlp-heading*, .hlp-attention-{a..e},
     .hlp-spec, .hlp-osusume, .hlp-konna-kata
   Host themes commonly inject background, border, padding, margin, decoration,
   pseudo-element ribbons, and typography overrides onto h1–h6 / p / mark /
   strong / em globally (e.g. `.entry-content h2 { background:…; padding:…; }`).
   Inside these component roots we explicitly neutralize that interference and
   hard-code typography so the plugin's own design is what renders, regardless
   of which theme the client has installed. Variant rules below this block use
   !important to re-establish their intended decoration where needed.
   ========================================================================== */

:is(.hlp-heading, .hlp-attention-a, .hlp-attention-b, .hlp-attention-c,
    .hlp-attention-d, .hlp-attention-e,
    .hlp-spec, .hlp-osusume, .hlp-konna-kata)
  :is(h1, h2, h3, h4, h5, h6, p, mark, strong, em) {
	background: none !important;
	background-color: transparent !important;
	background-image: none !important;
	border: 0 !important;
	border-radius: 0 !important;
	padding: 0 !important;
	margin: 0 !important;
	box-shadow: none !important;
	text-shadow: none !important;
	text-decoration: none !important;
	font-family: "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Yu Gothic", YuGothic, "Meiryo", sans-serif !important;
	color: var(--hlp-text, #222) !important;
	line-height: 1.4 !important;
}

/* Kill theme-injected pseudo decorations on headings/paragraphs inside the
   roots. The plugin's own ::before/::after rules re-declare `content` with
   !important to win over this. */
:is(.hlp-heading, .hlp-attention-a, .hlp-attention-b, .hlp-attention-c,
    .hlp-attention-d, .hlp-attention-e,
    .hlp-spec, .hlp-osusume, .hlp-konna-kata)
  :is(h1, h2, h3, h4, h5, h6, p)::before,
:is(.hlp-heading, .hlp-attention-a, .hlp-attention-b, .hlp-attention-c,
    .hlp-attention-d, .hlp-attention-e,
    .hlp-spec, .hlp-osusume, .hlp-konna-kata)
  :is(h1, h2, h3, h4, h5, h6, p)::after {
	content: none !important;
	background: none !important;
	background-image: none !important;
	border: 0 !important;
	box-shadow: none !important;
}

/* The rank-card shell has editable nested content. Keep theme/plugin
   interference off the card's own title/description fields, but let normal
   blocks inserted inside .hlp-rank-card__inner inherit the page's default
   paragraph rhythm and honor WordPress spacing controls. */
.hlp-rank-card__name,
.hlp-rank-card__desc {
	background: none !important;
	background-color: transparent !important;
	background-image: none !important;
	border: 0 !important;
	border-radius: 0 !important;
	padding: 0 !important;
	box-shadow: none !important;
	text-shadow: none !important;
}

.hlp-rank-card__name::before,
.hlp-rank-card__name::after,
.hlp-rank-card__desc::before,
.hlp-rank-card__desc::after {
	content: none !important;
	background: none !important;
	background-image: none !important;
	border: 0 !important;
	box-shadow: none !important;
}


/* ==========================================================================
   HLP Patterns — Heading Component Styles
   CSS variables defined in design-system/variables.css
   ========================================================================== */

/* --- Base heading component --- */
.hlp-heading {
	display: flex;
	flex-direction: column;
	width: 100%;
}

.hlp-heading .hlp-heading__text {
	margin-top: 0 !important;
	margin-bottom: 0 !important;
}

.hlp-heading .hlp-heading__text {
	font-weight: 700 !important;
	line-height: 1.4 !important;
}

.hlp-heading--h2 .hlp-heading__text {
	font-size: 26px !important;
}

.hlp-heading--h3 .hlp-heading__text {
	font-size: 18px !important;
}

@media (max-width: 768px) {
	.hlp-heading--h2 .hlp-heading__text {
		font-size: 20px !important;
	}
	.hlp-heading--h3 .hlp-heading__text {
		font-size: 16px !important;
	}
}

.hlp-heading .hlp-heading__subtext {
	color: var(--hlp-text-muted, #888) !important;
	font-size: 16px !important;
	line-height: 1.5 !important;
	margin-top: 0 !important;
	margin-bottom: 0 !important;
}


/* ==========================================================================
   V1 — 左線
   ========================================================================== */

.hlp-heading--line-left {
	gap: 4px;
}

.hlp-heading--line-left .hlp-heading__text {
	border-left: 5px solid var(--hlp-primary, #1a6fc4) !important;
	padding-left: 24px !important;
}

.hlp-heading--line-left .hlp-heading__subtext {
	padding-left: 24px !important;
}


/* ==========================================================================
   span-textarea — 全幅青背景
   H2: full-width blue bg, centered text. H3: light blue bg
   ========================================================================== */

.hlp-heading--span-textarea {
	gap: 8px;
}

.hlp-heading--span-textarea.hlp-heading--h2 .hlp-heading__text {
	background-color: var(--hlp-primary, #1a6fc4) !important;
	color: #fff !important;
	border-radius: var(--hlp-radius, 8px) !important;
	padding: 11px 20px !important;
	text-align: center;
}

.hlp-heading--span-textarea.hlp-heading--h3 .hlp-heading__text {
	background-color: var(--hlp-primary-light, #d8ebff) !important;
	border-radius: var(--hlp-radius, 8px) !important;
	padding: 8px 20px !important;

}


/* ==========================================================================
   V3 — 帯リボン
   H2: blue ribbon with triangular ear, H3: smaller ribbon
   ========================================================================== */

.hlp-heading--span-arrowribbon {
	gap: 0;
	display: flex !important;
	flex-direction: column !important;
	align-items: flex-start !important;
	text-align: left !important;
}

.hlp-heading--span-arrowribbon .hlp-heading__subtext {
	margin-top: 8px !important;
	align-self: stretch !important;
}

/* Blue bar with right-pointing arrow end + dark fold ear above-left */
.hlp-heading--span-arrowribbon .hlp-heading__text {
	background-color: var(--hlp-primary, #1a6fc4) !important;
	color: #fff !important;
	align-self: stretch !important;
}

/* H2: arrow ribbon + dark ear */
.hlp-heading--span-arrowribbon.hlp-heading--h2 .hlp-heading__text {
	padding: 12px 32px 12px 24px !important;
	clip-path: polygon(0 0, calc(100% - 16px) 0, 100% 50%, calc(100% - 16px) 100%, 0 100%);
}

/* Ear: dark fold triangle — 25% larger than base 26×9 */
.hlp-heading--span-arrowribbon.hlp-heading--h2::before {
	content: "";
	display: block;
	width: 33px;
	height: 11px;
	align-self: flex-start !important;
	margin-right: auto !important;
	margin-left: 0 !important;
	background-color: var(--hlp-primary-dark, #0d4f96);
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg width='26' height='9' viewBox='0 0 26 9' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M26 0V9H0L26 0Z' fill='black'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg width='26' height='9' viewBox='0 0 26 9' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M26 0V9H0L26 0Z' fill='black'/%3E%3C/svg%3E");
	-webkit-mask-size: contain;
	mask-size: contain;
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
}

/* H3: smaller arrow ribbon + smaller dark ear */
.hlp-heading--span-arrowribbon.hlp-heading--h3 .hlp-heading__text {
	padding: 8px 28px 8px 12px !important;
	clip-path: polygon(0 0, calc(100% - 16px) 0, 100% 50%, calc(100% - 16px) 100%, 0 100%);
}

.hlp-heading--span-arrowribbon.hlp-heading--h3::before {
	content: "";
	display: block;
	width: 17px;
	height: 6px;
	align-self: flex-start !important;
	margin-right: auto !important;
	margin-left: 0 !important;
	background-color: var(--hlp-primary-dark, #0d4f96);
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg width='26' height='9' viewBox='0 0 26 9' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M26 0V9H0L26 0Z' fill='black'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg width='26' height='9' viewBox='0 0 26 9' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M26 0V9H0L26 0Z' fill='black'/%3E%3C/svg%3E");
	-webkit-mask-size: contain;
	mask-size: contain;
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
}


/* ==========================================================================
   V4 — 蛍光強調
   H2: gradient highlight on keyword, H3: full highlight
   ========================================================================== */

.hlp-heading--highlighted {
	gap: 8px;
}

.hlp-heading--highlighted .hlp-heading__highlight {
	background: linear-gradient(to bottom, transparent 55%, var(--hlp-primary-light, #d8ebff) 55%) !important;
	background-color: transparent !important;
	padding: 0 2px !important;
}


/* ==========================================================================
   V5 — 番号付き / 左グラデーション
   H2: large number prefix, H3: gradient left border + fade bg
   ========================================================================== */

.hlp-heading--numbered {
	gap: 4px;
}

/* H2: number + heading side by side */
.hlp-heading--numbered.hlp-heading--h2 {
	display: grid;
	grid-template-columns: auto 1fr;
	grid-template-rows: auto auto;
	gap: 4px 12px;
	align-items: center;
}

.hlp-heading--numbered.hlp-heading--h2 .hlp-heading__number {
	grid-row: 1 / -1;
	align-self: center;
	font-size: 40px !important;
	font-weight: 900 !important;
	line-height: 40px !important;
	letter-spacing: -1.6px !important;
	white-space: nowrap !important;
	color: var(--hlp-primary-light, #d8ebff) !important;
	min-width: 48px;
	margin: 0 !important;
}

.hlp-heading--numbered.hlp-heading--h2 .hlp-heading__text {
	grid-column: 2;
}

.hlp-heading--numbered.hlp-heading--h2 .hlp-heading__subtext {
	grid-column: 2;
}

/* H3: gradient left border with fading blue bg */
.hlp-heading--numbered.hlp-heading--h3 .hlp-heading__text {
	border-left: 3px solid var(--hlp-primary, #1a6fc4) !important;
	background: linear-gradient(to right, var(--hlp-primary-light, #d8ebff), transparent) !important;
	padding: 8px 17px !important;
}


/* ==========================================================================
   V6 — 色分け装飾 / 縦グラデーション線
   H2: underline + colored text segments, H3: gradient vertical bar
   ========================================================================== */

.hlp-heading--colored {
	gap: 8px;
}

/* H2: inline-flowing text with optional decorated segments.
   Inline markers in the source — {{...}} underline, ((...)) accent,
   [[...]] highlighter-pen mark — render as inline spans / <mark>. */
.hlp-heading--colored.hlp-heading--h2 .hlp-heading__text {
	display: block;
}

.hlp-heading--colored.hlp-heading--h2 .hlp-heading__underline {
	background: linear-gradient(to bottom, transparent 91%, var(--hlp-primary, #1a6fc4) 91%) !important;
	padding-bottom: 4px !important;
}

.hlp-heading--colored.hlp-heading--h2 .hlp-heading__accent {
	color: var(--hlp-primary, #1a6fc4) !important;
}

/* Highlighter-pen mark — yellow gradient, matches the convention used by
   .hlp-osusume mark and .hlp-konna-kata mark elsewhere in the plugin. */
.hlp-heading--colored.hlp-heading--h2 .hlp-heading__mark {
	background: linear-gradient(to bottom, transparent 60%, #fff176 60%) !important;
	background-color: transparent !important;
	color: inherit !important;
	padding: 0 2px !important;
}

/* H3: gradient vertical bar on left */
.hlp-heading--colored.hlp-heading--h3 .hlp-heading__text {
	display: flex;
	align-items: center;
	gap: 10px;
}

.hlp-heading--colored.hlp-heading--h3 .hlp-heading__text::before {
	content: "" !important;
	width: 3px;
	min-height: 24px;
	align-self: stretch;
	background: linear-gradient(to bottom, var(--hlp-primary-light, #d8ebff), var(--hlp-primary, #1a6fc4)) !important;
	border-radius: 2px !important;
	flex-shrink: 0;
}


/* ==========================================================================
   V7 — 二色下線 / 四角アイコン付き
   H2: two-color underline below heading, H3: icon badge + text
   ========================================================================== */

.hlp-heading--2tone-underlined {
	gap: 8px;
}

/* H2: heading with two-color underline */
.hlp-heading--2tone-underlined.hlp-heading--h2 .hlp-heading__text::after {
	content: "" !important;
	display: block;
	height: 3px;
	background: linear-gradient(to right, var(--hlp-primary, #1a6fc4) 120px, #f6f7f9 120px) !important;
	margin-top: 8px !important;
	width: 100%;
}

/* H3: icon badge + text */
.hlp-heading--2tone-underlined.hlp-heading--h3 .hlp-heading__text {
	display: flex;
	align-items: center;
	gap: 10px;
}

.hlp-heading--2tone-underlined.hlp-heading--h3 .hlp-heading__text::before {
	content: "" !important;
	width: 24px;
	height: 24px;
	flex-shrink: 0;
	background-color: var(--hlp-primary, #1a6fc4) !important;
	border-radius: var(--hlp-radius-sm, 4px) !important;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") !important;
	background-size: 16px !important;
	background-position: center !important;
	background-repeat: no-repeat !important;
}


/* ==========================================================================
   V8 — グラデーション帯
   H2: gradient ribbon with notch, H3: smaller gradient ribbon
   ========================================================================== */

.hlp-heading--span-ribon {
	gap: 12px;
}

/* Gradient ribbon with inward V-notch on right (bookmark shape) */
.hlp-heading--span-ribon .hlp-heading__text {
	background: linear-gradient(173deg, var(--hlp-primary, #1a6fc4), var(--hlp-primary-dark, #0d4f96)) !important;
	color: #fff !important;

	clip-path: polygon(0 0, 100% 0, calc(100% - 16px) 50%, 100% 100%, 0 100%);
}

.hlp-heading--span-ribon.hlp-heading--h2 .hlp-heading__text {
	padding: 12px 32px 12px 24px !important;
}

.hlp-heading--span-ribon.hlp-heading--h3 .hlp-heading__text {
	padding: 8px 24px 8px 12px !important;
}


/* ==========================================================================
   V9 — 下部破線 / 下部実線
   H2: dashed blue border, H3: solid light border
   ========================================================================== */

.hlp-heading--dashline {
	gap: 8px;
}

.hlp-heading--dashline.hlp-heading--h2 .hlp-heading__text {
	border-bottom: 4px dashed var(--hlp-primary, #1a6fc4) !important;
	padding-bottom: 16px !important;
	padding-left: 36px !important;
	padding-right: 36px !important;
	text-align: center;
}

.hlp-heading--dashline.hlp-heading--h2 .hlp-heading__subtext {
	text-align: center;
	padding-left: 30px !important;
	padding-right: 30px !important;
}

.hlp-heading--dashline.hlp-heading--h3 .hlp-heading__text {
	border-bottom: 2px solid var(--hlp-primary-light, #d8ebff) !important;
	padding-bottom: 16px !important;
}


/* ==========================================================================
   V10 — 両側線
   H2: blue lines flanking, H3: light lines flanking
   ========================================================================== */

.hlp-heading--line-sides {
	gap: 8px;
}

.hlp-heading--line-sides .hlp-heading__text {
	display: flex;
	align-items: center;
	gap: 16px;
}

.hlp-heading--line-sides .hlp-heading__text::before,
.hlp-heading--line-sides .hlp-heading__text::after {
	content: "" !important;
	flex: 1;
	height: 3px;
	border-radius: 27px !important;
}

.hlp-heading--line-sides.hlp-heading--h2 .hlp-heading__text::before,
.hlp-heading--line-sides.hlp-heading--h2 .hlp-heading__text::after {
	background: var(--hlp-primary, #1a6fc4) !important;
}

.hlp-heading--line-sides.hlp-heading--h3 .hlp-heading__text::before,
.hlp-heading--line-sides.hlp-heading--h3 .hlp-heading__text::after {
	background: var(--hlp-primary-light, #d8ebff) !important;
	border-radius: 100px !important;
}

.hlp-heading--line-sides .hlp-heading__subtext {
	text-align: center;
}


/* ==========================================================================
   V11 — 斜め装飾線
   H2: double slanted lines, H3: single slanted line
   ========================================================================== */

.hlp-heading--slash {
	gap: 8px;
}

.hlp-heading--slash .hlp-heading__text {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 20px;
}

/* H2: double slanted lines */
.hlp-heading--slash.hlp-heading--h2 .hlp-heading__text::before,
.hlp-heading--slash.hlp-heading--h2 .hlp-heading__text::after {
	content: "" !important;
	display: inline-block;
	width: 3px;
	height: 28px;
	background: var(--hlp-primary, #1a6fc4) !important;
	border-radius: 2px !important;
	flex-shrink: 0;
}

.hlp-heading--slash.hlp-heading--h2 .hlp-heading__text::before {
	transform: rotate(-25deg);
	box-shadow: 8px 0 0 var(--hlp-primary, #1a6fc4) !important;
}

.hlp-heading--slash.hlp-heading--h2 .hlp-heading__text::after {
	transform: rotate(25deg);
	box-shadow: -8px 0 0 var(--hlp-primary, #1a6fc4) !important;
}

/* H3: single slanted line */
.hlp-heading--slash.hlp-heading--h3 .hlp-heading__text {
	gap: 8px;
}

.hlp-heading--slash.hlp-heading--h3 .hlp-heading__text::before,
.hlp-heading--slash.hlp-heading--h3 .hlp-heading__text::after {
	content: "" !important;
	display: inline-block;
	width: 2.3px;
	height: 21px;
	background: var(--hlp-primary, #1a6fc4) !important;
	border-radius: 1.5px !important;
	flex-shrink: 0;
}

.hlp-heading--slash.hlp-heading--h3 .hlp-heading__text::before {
	transform: rotate(-25deg);
}

.hlp-heading--slash.hlp-heading--h3 .hlp-heading__text::after {
	transform: rotate(25deg);
}

.hlp-heading--slash .hlp-heading__subtext {
	text-align: center;
}


/* ==========================================================================
   V12 — 装飾括弧
   H2: decorative sparkle marks, H3: smaller sparkle marks
   ========================================================================== */

.hlp-heading--star {
	gap: 8px;
}

.hlp-heading--star .hlp-heading__text {
	display: flex;
	align-items: center;
	justify-content: center;
}

.hlp-heading--star .hlp-heading__text::before,
.hlp-heading--star .hlp-heading__text::after {
	content: "" !important;
	flex-shrink: 0;
	background-color: var(--hlp-primary, #1a6fc4) !important;
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg width='33' height='29' viewBox='0 0 33 29' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath opacity='0.5' d='M5.096 19.6729C4.99333 19.0662 4.72267 18.4129 4.284 17.7129C3.84533 17.0036 3.22 16.3456 2.408 15.7389C1.60533 15.1322 0.802667 14.7449 0 14.5769V13.9889C0.793333 13.8022 1.554 13.4569 2.282 12.9529C3.01933 12.4396 3.63533 11.8236 4.13 11.1049C4.634 10.3676 4.956 9.63956 5.096 8.9209H5.684C5.768 9.38756 5.936 9.86823 6.188 10.3629C6.44 10.8482 6.762 11.3149 7.154 11.7629C7.55533 12.2016 8.00333 12.5982 8.498 12.9529C9.23533 13.4756 9.98667 13.8209 10.752 13.9889V14.5769C10.2387 14.6796 9.70667 14.8896 9.156 15.2069C8.61467 15.5242 8.11067 15.9022 7.644 16.3409C7.17733 16.7702 6.79467 17.2229 6.496 17.6989C6.05733 18.3989 5.78667 19.0569 5.684 19.6729H5.096Z' fill='black'/%3E%3Cpath d='M22.76 22.7449C22.5986 21.7915 22.1733 20.7649 21.484 19.6649C20.7946 18.5502 19.812 17.5162 18.536 16.5629C17.2746 15.6095 16.0133 15.0009 14.752 14.7369V13.8129C15.9986 13.5195 17.194 12.9769 18.338 12.1849C19.4966 11.3782 20.4646 10.4102 21.242 9.28088C22.034 8.12221 22.54 6.97821 22.76 5.84888H23.684C23.816 6.58221 24.08 7.33754 24.476 8.11488C24.872 8.87754 25.378 9.61088 25.994 10.3149C26.6246 11.0042 27.3286 11.6275 28.106 12.1849C29.2646 13.0062 30.4453 13.5489 31.648 13.8129V14.7369C30.8413 14.8982 30.0053 15.2282 29.14 15.7269C28.2893 16.2255 27.4973 16.8195 26.764 17.5089C26.0306 18.1835 25.4293 18.8949 24.96 19.6429C24.2706 20.7429 23.8453 21.7769 23.684 22.7449H22.76Z' fill='black'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg width='33' height='29' viewBox='0 0 33 29' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath opacity='0.5' d='M5.096 19.6729C4.99333 19.0662 4.72267 18.4129 4.284 17.7129C3.84533 17.0036 3.22 16.3456 2.408 15.7389C1.60533 15.1322 0.802667 14.7449 0 14.5769V13.9889C0.793333 13.8022 1.554 13.4569 2.282 12.9529C3.01933 12.4396 3.63533 11.8236 4.13 11.1049C4.634 10.3676 4.956 9.63956 5.096 8.9209H5.684C5.768 9.38756 5.936 9.86823 6.188 10.3629C6.44 10.8482 6.762 11.3149 7.154 11.7629C7.55533 12.2016 8.00333 12.5982 8.498 12.9529C9.23533 13.4756 9.98667 13.8209 10.752 13.9889V14.5769C10.2387 14.6796 9.70667 14.8896 9.156 15.2069C8.61467 15.5242 8.11067 15.9022 7.644 16.3409C7.17733 16.7702 6.79467 17.2229 6.496 17.6989C6.05733 18.3989 5.78667 19.0569 5.684 19.6729H5.096Z' fill='black'/%3E%3Cpath d='M22.76 22.7449C22.5986 21.7915 22.1733 20.7649 21.484 19.6649C20.7946 18.5502 19.812 17.5162 18.536 16.5629C17.2746 15.6095 16.0133 15.0009 14.752 14.7369V13.8129C15.9986 13.5195 17.194 12.9769 18.338 12.1849C19.4966 11.3782 20.4646 10.4102 21.242 9.28088C22.034 8.12221 22.54 6.97821 22.76 5.84888H23.684C23.816 6.58221 24.08 7.33754 24.476 8.11488C24.872 8.87754 25.378 9.61088 25.994 10.3149C26.6246 11.0042 27.3286 11.6275 28.106 12.1849C29.2646 13.0062 30.4453 13.5489 31.648 13.8129V14.7369C30.8413 14.8982 30.0053 15.2282 29.14 15.7269C28.2893 16.2255 27.4973 16.8195 26.764 17.5089C26.0306 18.1835 25.4293 18.8949 24.96 19.6429C24.2706 20.7429 23.8453 21.7769 23.684 22.7449H22.76Z' fill='black'/%3E%3C/svg%3E");
	-webkit-mask-size: contain;
	mask-size: contain;
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
}

.hlp-heading--star.hlp-heading--h2 .hlp-heading__text {
	gap: 9px;
}

.hlp-heading--star.hlp-heading--h2 .hlp-heading__text::before,
.hlp-heading--star.hlp-heading--h2 .hlp-heading__text::after {
	width: 41px;
	height: 36px;
}

.hlp-heading--star.hlp-heading--h2 .hlp-heading__text::after {
	transform: scaleX(-1);
}

.hlp-heading--star.hlp-heading--h3 .hlp-heading__text {
	gap: 8px;
	justify-content: center;
}

.hlp-heading--star.hlp-heading--h3 .hlp-heading__text::before,
.hlp-heading--star.hlp-heading--h3 .hlp-heading__text::after {
	width: 22px;
	height: 19px;
}

.hlp-heading--star.hlp-heading--h3 .hlp-heading__text::after {
	transform: scaleX(-1);
}

.hlp-heading--star .hlp-heading__subtext {
	text-align: center;
}


/* ==========================================================================
   popout — 折り返し帯
   H2: full-width blue rounded bg + fold triangles, H3: smaller rounded bg + folds
   ========================================================================== */

.hlp-heading--popout {
	gap: 8px;
	align-items: center;
}

.hlp-heading--popout .hlp-heading__text {
	background: var(--hlp-primary, #1a6fc4) !important;
	color: #fff !important;
	padding: 12px 24px !important;
	text-align: center;
	border-radius: var(--hlp-radius, 8px) !important;
	position: relative;
	margin-bottom: 9px !important;
}

/* Centered downward arrow below bar */
.hlp-heading--popout .hlp-heading__text::after {
	content: "" !important;
	position: absolute;
	bottom: -9px;
	left: 50%;
	transform: translateX(-50%);
	width: 22px;
	height: 9px;
	background-color: var(--hlp-primary, #1a6fc4) !important;
	clip-path: polygon(0 0, 100% 0, 50% 100%);
}

.hlp-heading--popout.hlp-heading--h3 .hlp-heading__text {
	border-radius: 6px !important;
	padding: 8px 12px !important;
}

.hlp-heading--popout .hlp-heading__subtext {
	text-align: center;
}


/* ==========================================================================
   V14 — 矢印下線
   H2/H3: centered text + line with downward chevron
   ========================================================================== */

.hlp-heading--popout-underline {
	gap: 8px;
	align-items: center;
}

.hlp-heading--popout-underline .hlp-heading__text {
	text-align: center;
	width: 100%;
	position: relative;
	margin-bottom: 10px !important;
}

/* Two lines with gap for chevron */
.hlp-heading--popout-underline .hlp-heading__text::after {
	content: "" !important;
	display: block;
	height: 3px;
	background:
		linear-gradient(var(--hlp-primary, #1a6fc4), var(--hlp-primary, #1a6fc4)) left center / calc(50% - 14px) 100% no-repeat,
		linear-gradient(var(--hlp-primary, #1a6fc4), var(--hlp-primary, #1a6fc4)) right center / calc(50% - 14px) 100% no-repeat !important;
	margin-top: 8px !important;
}

/* Centered downward chevron */
.hlp-heading--popout-underline .hlp-heading__text::before {
	content: "" !important;
	position: absolute;
	bottom: -10px;
	left: 50%;
	transform: translateX(-50%);
	width: 27px;
	height: 13px;
	background-color: var(--hlp-primary, #1a6fc4) !important;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 27.19 12.61' fill='none'%3E%3Cpath d='M0 1.5L13.6 10.5 27.19 1.5' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center / contain;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 27.19 12.61' fill='none'%3E%3Cpath d='M0 1.5L13.6 10.5 27.19 1.5' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center / contain;
}

.hlp-heading--popout-underline .hlp-heading__subtext {
	text-align: center;
}


/* ==========================================================================
   Standalone Heading Patterns
   New heading patterns insert a core heading block directly instead of a
   wrapper group. Keep the old wrapper selectors above for existing content.
   ========================================================================== */

.hlp-heading.hlp-heading__text {
	background: none !important;
	background-color: transparent !important;
	background-image: none !important;
	border: 0 !important;
	border-radius: 0 !important;
	box-shadow: none !important;
	box-sizing: border-box !important;
	color: var(--hlp-text, #222) !important;
	display: block;
	font-family: "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Yu Gothic", YuGothic, "Meiryo", sans-serif !important;
	font-weight: 700 !important;
	letter-spacing: 0 !important;
	line-height: 1.4 !important;
	margin: 0;
	max-width: 100% !important;
	min-width: 0;
	overflow-wrap: break-word;
	padding: 0 !important;
	text-decoration: none !important;
	text-shadow: none !important;
	width: 100% !important;
}

.wp-block-group:is(.is-layout-flow, .is-layout-constrained) > * + .hlp-heading.hlp-heading__text {
	margin-block-start: var(--wp--style--block-gap);
}

.hlp-heading.hlp-heading__text::before,
.hlp-heading.hlp-heading__text::after {
	background: none !important;
	background-image: none !important;
	border: 0 !important;
	box-shadow: none !important;
	box-sizing: border-box;
	content: none !important;
}

.hlp-heading--h2.hlp-heading__text {
	font-size: 26px !important;
}

.hlp-heading--h3.hlp-heading__text {
	font-size: 18px !important;
}

.hlp-heading--line-left.hlp-heading__text {
	border-left: 5px solid var(--hlp-primary, #1a6fc4) !important;
	padding-left: 24px !important;
}

.hlp-heading--span-textarea.hlp-heading--h2.hlp-heading__text {
	background-color: var(--hlp-primary, #1a6fc4) !important;
	border-radius: var(--hlp-radius, 8px) !important;
	color: #fff !important;
	padding: 11px 20px !important;
	text-align: center;
}

.hlp-heading--span-textarea.hlp-heading--h3.hlp-heading__text {
	background-color: var(--hlp-primary-light, #d8ebff) !important;
	border-radius: var(--hlp-radius, 8px) !important;
	padding: 8px 20px !important;
}

.hlp-heading--span-arrowribbon.hlp-heading__text {
	background-color: var(--hlp-primary, #1a6fc4) !important;
	color: #fff !important;
	position: relative;
	max-width: calc(100% - 16px) !important;
	width: calc(100% - 16px) !important;
}

.hlp-heading--span-arrowribbon.hlp-heading__text::after {
	background-color: var(--hlp-primary, #1a6fc4) !important;
	clip-path: polygon(0 0, 100% 50%, 0 100%);
	content: "" !important;
	height: 100%;
	position: absolute;
	right: -16px;
	top: 0;
	width: 16px;
}

.hlp-heading--span-arrowribbon.hlp-heading--h2.hlp-heading__text {
	margin-top: 11px !important;
	padding: 12px 32px 12px 24px !important;
}

.hlp-heading--span-arrowribbon.hlp-heading--h2.hlp-heading__text::before {
	background-color: var(--hlp-primary-dark, #0d4f96) !important;
	clip-path: polygon(100% 0, 100% 100%, 0 100%);
	content: "" !important;
	height: 11px;
	left: 0;
	position: absolute;
	top: -11px;
	width: 33px;
}

.hlp-heading--span-arrowribbon.hlp-heading--h3.hlp-heading__text {
	margin-top: 6px !important;
	padding: 8px 28px 8px 12px !important;
}

.hlp-heading--span-arrowribbon.hlp-heading--h3.hlp-heading__text::before {
	background-color: var(--hlp-primary-dark, #0d4f96) !important;
	clip-path: polygon(100% 0, 100% 100%, 0 100%);
	content: "" !important;
	height: 6px;
	left: 0;
	position: absolute;
	top: -6px;
	width: 17px;
}

.hlp-heading--numbered.hlp-heading--h2.hlp-heading__text {
	align-items: center;
	display: flex;
	gap: 12px;
}

.hlp-heading--numbered.hlp-heading--h2.hlp-heading__text::before {
	color: var(--hlp-primary-light, #d8ebff) !important;
	content: "01" !important;
	flex-shrink: 0;
	font-size: 40px !important;
	font-weight: 900 !important;
	line-height: 1 !important;
}

.hlp-heading--numbered.hlp-heading--h3.hlp-heading__text {
	background: linear-gradient(to right, var(--hlp-primary-light, #d8ebff), transparent) !important;
	border-left: 3px solid var(--hlp-primary, #1a6fc4) !important;
	padding: 8px 17px !important;
}

.hlp-heading--colored.hlp-heading--h2.hlp-heading__text {
	display: block;
}

.hlp-heading--colored.hlp-heading--h3.hlp-heading__text {
	align-items: center;
	display: flex;
	gap: 10px;
}

.hlp-heading--colored.hlp-heading--h3.hlp-heading__text::before {
	background: linear-gradient(to bottom, var(--hlp-primary-light, #d8ebff), var(--hlp-primary, #1a6fc4)) !important;
	border-radius: 2px !important;
	content: "" !important;
	flex-shrink: 0;
	min-height: 24px;
	width: 3px;
}

.hlp-heading--2tone-underlined.hlp-heading--h2.hlp-heading__text::after {
	background: linear-gradient(to right, var(--hlp-primary, #1a6fc4) 120px, #f6f7f9 120px) !important;
	content: "" !important;
	display: block;
	height: 3px;
	margin-top: 8px !important;
	width: 100%;
}

.hlp-heading--2tone-underlined.hlp-heading--h3.hlp-heading__text {
	align-items: center;
	display: flex;
	gap: 10px;
}

.hlp-heading--2tone-underlined.hlp-heading--h3.hlp-heading__text::before {
	background-color: var(--hlp-primary, #1a6fc4) !important;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") !important;
	background-position: center !important;
	background-repeat: no-repeat !important;
	background-size: 16px !important;
	border-radius: var(--hlp-radius-sm, 4px) !important;
	content: "" !important;
	flex-shrink: 0;
	height: 24px;
	width: 24px;
}

.hlp-heading--span-ribon.hlp-heading__text {
	background: linear-gradient(173deg, var(--hlp-primary, #1a6fc4), var(--hlp-primary-dark, #0d4f96)) !important;
	clip-path: polygon(0 0, 100% 0, calc(100% - 16px) 50%, 100% 100%, 0 100%);
	color: #fff !important;
}

.hlp-heading--span-ribon.hlp-heading--h2.hlp-heading__text {
	padding: 12px 32px 12px 24px !important;
}

.hlp-heading--span-ribon.hlp-heading--h3.hlp-heading__text {
	padding: 8px 24px 8px 12px !important;
}

.hlp-heading--dashline.hlp-heading--h2.hlp-heading__text {
	border-bottom: 4px dashed var(--hlp-primary, #1a6fc4) !important;
	padding: 0 36px 16px !important;
	text-align: center;
}

.hlp-heading--dashline.hlp-heading--h3.hlp-heading__text {
	border-bottom: 2px solid var(--hlp-primary-light, #d8ebff) !important;
	padding-bottom: 16px !important;
}

.hlp-heading--line-sides.hlp-heading__text {
	align-items: center;
	display: flex;
	gap: 16px;
}

.hlp-heading--line-sides.hlp-heading__text::before,
.hlp-heading--line-sides.hlp-heading__text::after {
	border-radius: 27px !important;
	content: "" !important;
	flex: 1;
	height: 3px;
}

.hlp-heading--line-sides.hlp-heading--h2.hlp-heading__text::before,
.hlp-heading--line-sides.hlp-heading--h2.hlp-heading__text::after {
	background: var(--hlp-primary, #1a6fc4) !important;
}

.hlp-heading--line-sides.hlp-heading--h3.hlp-heading__text::before,
.hlp-heading--line-sides.hlp-heading--h3.hlp-heading__text::after {
	background: var(--hlp-primary-light, #d8ebff) !important;
}

.hlp-heading--slash.hlp-heading__text {
	align-items: center;
	display: flex;
	gap: 20px;
	justify-content: center;
}

.hlp-heading--slash.hlp-heading__text::before,
.hlp-heading--slash.hlp-heading__text::after {
	background: var(--hlp-primary, #1a6fc4) !important;
	border-radius: 2px !important;
	content: "" !important;
	display: inline-block;
	flex-shrink: 0;
}

.hlp-heading--slash.hlp-heading--h2.hlp-heading__text::before,
.hlp-heading--slash.hlp-heading--h2.hlp-heading__text::after {
	height: 28px;
	width: 3px;
}

.hlp-heading--slash.hlp-heading--h2.hlp-heading__text::before {
	box-shadow: 8px 0 0 var(--hlp-primary, #1a6fc4) !important;
	transform: rotate(-25deg);
}

.hlp-heading--slash.hlp-heading--h2.hlp-heading__text::after {
	box-shadow: -8px 0 0 var(--hlp-primary, #1a6fc4) !important;
	transform: rotate(25deg);
}

.hlp-heading--slash.hlp-heading--h3.hlp-heading__text {
	gap: 8px;
}

.hlp-heading--slash.hlp-heading--h3.hlp-heading__text::before,
.hlp-heading--slash.hlp-heading--h3.hlp-heading__text::after {
	height: 21px;
	width: 2.3px;
}

.hlp-heading--slash.hlp-heading--h3.hlp-heading__text::before {
	transform: rotate(-25deg);
}

.hlp-heading--slash.hlp-heading--h3.hlp-heading__text::after {
	transform: rotate(25deg);
}

.hlp-heading--star.hlp-heading__text {
	align-items: center;
	display: flex;
	justify-content: center;
}

.hlp-heading--star.hlp-heading__text::before,
.hlp-heading--star.hlp-heading__text::after {
	background: none !important;
	color: var(--hlp-primary, #1a6fc4) !important;
	content: "✦" !important;
	flex-shrink: 0;
	line-height: 1;
}

.hlp-heading--star.hlp-heading--h2.hlp-heading__text {
	gap: 9px;
}

.hlp-heading--star.hlp-heading--h2.hlp-heading__text::before,
.hlp-heading--star.hlp-heading--h2.hlp-heading__text::after {
	font-size: 36px !important;
}

.hlp-heading--star.hlp-heading--h3.hlp-heading__text {
	gap: 8px;
}

.hlp-heading--star.hlp-heading--h3.hlp-heading__text::before,
.hlp-heading--star.hlp-heading--h3.hlp-heading__text::after {
	font-size: 19px !important;
}

.hlp-heading--popout.hlp-heading__text {
	background: var(--hlp-primary, #1a6fc4) !important;
	border-radius: var(--hlp-radius, 8px) !important;
	color: #fff !important;
	margin-bottom: 9px !important;
	padding: 12px 24px !important;
	position: relative;
	text-align: center;
}

.hlp-heading--popout.hlp-heading__text::after {
	background-color: var(--hlp-primary, #1a6fc4) !important;
	clip-path: polygon(0 0, 100% 0, 50% 100%);
	content: "" !important;
	height: 9px;
	left: 50%;
	position: absolute;
	top: 100%;
	transform: translateX(-50%);
	width: 22px;
}

.hlp-heading--popout.hlp-heading--h3.hlp-heading__text {
	border-radius: 6px !important;
	padding: 8px 12px !important;
}

.hlp-heading--popout-underline.hlp-heading__text {
	margin-bottom: 10px !important;
	position: relative;
	text-align: center;
	width: 100%;
}

.hlp-heading--popout-underline.hlp-heading__text::after {
	background:
		linear-gradient(var(--hlp-primary, #1a6fc4), var(--hlp-primary, #1a6fc4)) left center / calc(50% - 14px) 100% no-repeat,
		linear-gradient(var(--hlp-primary, #1a6fc4), var(--hlp-primary, #1a6fc4)) right center / calc(50% - 14px) 100% no-repeat !important;
	content: "" !important;
	display: block;
	height: 3px;
	margin-top: 8px !important;
}

.hlp-heading--popout-underline.hlp-heading__text::before {
	background-color: var(--hlp-primary, #1a6fc4) !important;
	content: "" !important;
	height: 13px;
	left: 50%;
	position: absolute;
	top: calc(100% - 3px);
	transform: translateX(-50%);
	width: 27px;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 27.19 12.61' fill='none'%3E%3Cpath d='M0 1.5L13.6 10.5 27.19 1.5' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center / contain;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 27.19 12.61' fill='none'%3E%3Cpath d='M0 1.5L13.6 10.5 27.19 1.5' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center / contain;
}

.hlp-heading.hlp-heading__text.has-text-align-center {
	text-align: center !important;
}

.hlp-heading.hlp-heading__text.has-text-align-right {
	text-align: right !important;
}

@media (max-width: 768px) {
	.hlp-heading--h2.hlp-heading__text {
		font-size: 20px !important;
	}
	.hlp-heading--h3.hlp-heading__text {
		font-size: 16px !important;
	}
	.hlp-heading--span-arrowribbon.hlp-heading--h2.hlp-heading__text,
	.hlp-heading--span-ribon.hlp-heading--h2.hlp-heading__text {
		max-width: calc(100% - 16px) !important;
		width: calc(100% - 16px) !important;
	}
	.hlp-heading--dashline.hlp-heading--h2.hlp-heading__text {
		padding-left: 16px !important;
		padding-right: 16px !important;
	}
}


/* ==========================================================================
   Steps Flow — Section
   ========================================================================== */

.hlp-steps-flow {
	display: flex;
	flex-direction: column;
	width: 100%;
}

/* Each step row — stretch so the badge column fills the row height,
   letting the dashed connector extend regardless of content/icon size. */
.hlp-steps-flow__step {
	display: flex;
	gap: 16px;
	align-items: stretch;
}

/* Badge column: badge + connector stacked */
.hlp-steps-flow__badge-col {
	display: flex;
	flex-direction: column;
	align-items: center;
	width: 62px;
	flex-shrink: 0;
}

/* Circular step badge */
.hlp-steps-flow__badge {
	width: 53px;
	aspect-ratio: 1;
	border: 2px solid var(--hlp-primary, #1a6fc4);
	border-radius: 50%;
	background: #fff;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	gap: 1px;
}

.hlp-steps-flow__badge-label {
	font-size: 12px;
	font-weight: 700;
	line-height: 1;
	color: var(--hlp-primary, #1a6fc4);
}

.hlp-steps-flow__badge-number {
	font-size: 16px;
	font-weight: 700;
	line-height: 1;
	color: var(--hlp-primary, #1a6fc4);
}

/* Dashed connector between steps */
.hlp-steps-flow__connector {
	width: 0;
	flex: 1;
	min-height: 40px;
	border-left: 3px dashed var(--hlp-primary, #1a6fc4);
}

/* Content area */
.hlp-steps-flow__content {
	flex: 1;
	display: flex;
	flex-direction: column;
	gap: 2px;
	justify-content: center;
	min-height: 44px;
	padding-bottom: 16px;
}

.hlp-steps-flow__title {
	font-size: 16px;
	font-weight: 700;
	line-height: 1.5;
	color: var(--hlp-text, #1a1a2e);
	margin: 0;
}

/* Inline marker styles — shared by title and description.
   {{...}} underline, ((...)) primary accent, [[...]] yellow highlighter mark. */
.hlp-steps-flow__underline {
	background: linear-gradient(to bottom, transparent 91%, var(--hlp-primary, #1a6fc4) 91%);
	padding-bottom: 2px;
}

.hlp-steps-flow__accent {
	color: var(--hlp-primary, #1a6fc4);
	font-weight: 700;
}

/* Yellow gradient highlight on keywords (rendered via <mark>) */
.hlp-steps-flow__highlight {
	background: linear-gradient(to bottom, transparent 57%, #fff176 57%);
	background-color: transparent;
	color: inherit;
	padding: 0 1px;
}

.hlp-steps-flow__desc {
	font-size: 16px;
	font-weight: 400;
	line-height: 1.5;
	color: var(--hlp-text-secondary, #555);
	margin: 0;
}

/* Last step: no bottom padding on content */
.hlp-steps-flow__step:last-child .hlp-steps-flow__content {
	padding-bottom: 0;
}

/* Optional right-side icon column (rendered only when an image is set) */
.hlp-steps-flow__icon {
	flex-shrink: 0;
	width: 96px;
	display: flex;
	align-items: center;
	justify-content: center;
	padding-bottom: 16px;
	margin-left: 16px;
}

.hlp-steps-flow__step:last-child .hlp-steps-flow__icon {
	padding-bottom: 0;
}

.hlp-steps-flow__icon img {
	max-width: 100%;
	max-height: 96px;
	height: auto;
	display: block;
	object-fit: contain;
}

@media (max-width: 768px) {
	.hlp-steps-flow__icon {
		width: 64px;
		margin-left: 12px;
	}
	.hlp-steps-flow__icon img {
		max-height: 64px;
	}
}


/* ==========================================================================
   Responsive — Mobile (max-width: 768px)
   ========================================================================== */

@media (max-width: 768px) {

	.hlp-heading {
		padding-left: 8px;
		padding-right: 8px;
	}

	/* span-textarea: already full-width, no mobile override needed */

	/* V3: full-width ribbon on mobile */
	.hlp-heading--span-arrowribbon.hlp-heading--h2 .hlp-heading__text {
		width: 100%;
		clip-path: polygon(0 0, calc(100% - 16px) 0, 100% 50%, calc(100% - 16px) 100%, 0 100%);
	}

	/* V5 H3: full-width gradient bg */
	.hlp-heading--numbered.hlp-heading--h3 .hlp-heading__text {
		width: 100%;
	}

	/* V8: full-width ribbon on mobile */
	.hlp-heading--span-ribon.hlp-heading--h2 .hlp-heading__text {
		width: 100%;
	}

	/* V9: reduce padding */
	.hlp-heading--dashline.hlp-heading--h2 .hlp-heading__text {
		padding-left: 16px;
		padding-right: 16px;
	}

	.hlp-heading--dashline.hlp-heading--h2 .hlp-heading__subtext {
		padding-left: 0;
		padding-right: 0;
	}

}


/* ==========================================================================
   Logo Slider — Section Styles
   ========================================================================== */

.hlp-logo-slider {
	width: 100%;
	max-width: var(--hlp-content-max-width, 880px);
	margin-left: auto;
	margin-right: auto;
	padding: 32px 0;
	overflow: hidden;
}

.hlp-logo-slider.alignfull {
	width: 100vw;
	max-width: 100vw;
	margin-left: calc(-50vw + 50%);
}

/* Label — layout only, typography inherited from theme */
.hlp-logo-slider .hlp-logo-slider__label {
	text-align: center;
	margin: 0 0 24px;
}

/* Track — override wp-block-group defaults */
.hlp-logo-slider .hlp-logo-slider__track {
	display: flex;
	align-items: center;
	flex-wrap: nowrap;
	gap: 64px;
	padding: 0 32px;
	max-width: none;
	animation: hlp-logo-scroll var(--hlp-logo-scroll-speed, 25s) linear infinite;
}

/* Logo items — override wp-block-image defaults */
.hlp-logo-slider .hlp-logo-slider__track .wp-block-image {
	flex-shrink: 0;
	margin: 0;
}

.hlp-logo-slider .hlp-logo-slider__track .wp-block-image img {
	height: 144px;
	width: auto;
	min-width: 200px;
	max-width: 480px;
	object-fit: contain;
}

@keyframes hlp-logo-scroll {
	from { transform: translateX(0); }
	to   { transform: translateX(-50%); }
}

/* Disable animation in the block editor */
.editor-styles-wrapper .hlp-logo-slider .hlp-logo-slider__track {
	animation: none;
}

/* === Logo Slider — Tablet (max-width: 1024px) === */
@media (max-width: 1024px) {
	.hlp-logo-slider {
		padding: 24px 0;
	}

	.hlp-logo-slider .hlp-logo-slider__track {
		gap: 48px;
		padding: 0 24px;
	}

	.hlp-logo-slider .hlp-logo-slider__track .wp-block-image img {
		height: 96px;
		min-width: 140px;
		max-width: 320px;
	}
}

/* === Logo Slider — Mobile (max-width: 768px) === */
@media (max-width: 768px) {
	.hlp-logo-slider {
		padding: 16px 0;
	}

	.hlp-logo-slider .hlp-logo-slider__track {
		gap: 32px;
		padding: 0 16px;
	}

	.hlp-logo-slider .hlp-logo-slider__track .wp-block-image img {
		height: 64px;
		min-width: 100px;
		max-width: 200px;
	}

	.hlp-logo-slider .hlp-logo-slider__label {
		margin: 0 0 16px;
	}
}


/* ==========================================================================
   Logo Slider B (v0.9.10.0+) — half-size logos, plain-HTML markup
   Built from scratch to bypass the wp:group + nested flex-layout quirks
   that made Pattern A escape the host theme's content-width constraint.
   The pattern emits the entire slider inside a single wp:html block, so
   WordPress applies zero block-layout CSS to the inner structure. Width,
   overflow, and centering are owned entirely by this stylesheet.
   ========================================================================== */

.hlp-logo-slider-b {
	width: 100%;
	max-width: var(--hlp-content-max-width, 880px);
	margin-left: auto;
	margin-right: auto;
	padding: 16px 0;
	box-sizing: border-box;
}

.hlp-logo-slider-b__label {
	text-align: center;
	margin: 0 0 12px !important;
	padding: 0 !important;
	font-weight: 700;
	font-size: 14px;
	line-height: 1.4;
	color: var(--hlp-text, #1a1a2e);
}

/* Viewport: the visible window. Clips the wider track inside. */
.hlp-logo-slider-b__viewport {
	width: 100%;
	overflow: hidden;
	box-sizing: border-box;
}

/* Track: holds 12 logos (6 unique × 2 for seamless loop). Its intrinsic
   width is the sum of its children, which is wider than the viewport —
   the viewport's overflow:hidden clips the excess, and translateX -50%
   reveals the duplicate set, producing a continuous loop. */
.hlp-logo-slider-b__track {
	display: flex;
	align-items: center;
	flex-wrap: nowrap;
	gap: 32px;
	width: max-content;
	padding: 0 16px;
	animation: hlp-logo-scroll-b var(--hlp-logo-scroll-speed-b, 25s) linear infinite;
}

/* Half-size compared to Pattern A (Pattern A: height 144px / min 200 / max 480) */
.hlp-logo-slider-b__logo {
	height: 72px;
	width: auto;
	min-width: 100px;
	max-width: 240px;
	object-fit: contain;
	flex-shrink: 0;
	display: block;
}

@keyframes hlp-logo-scroll-b {
	from { transform: translateX(0); }
	to   { transform: translateX(-50%); }
}

/* Disable animation in the block editor for a stable preview. */
.editor-styles-wrapper .hlp-logo-slider-b__track {
	animation: none;
}

/* === Logo Slider B — Tablet (max-width: 1024px) === */
@media (max-width: 1024px) {
	.hlp-logo-slider-b {
		padding: 12px 0;
	}
	.hlp-logo-slider-b__track {
		gap: 24px;
		padding: 0 12px;
	}
	.hlp-logo-slider-b__logo {
		height: 48px;
		min-width: 70px;
		max-width: 160px;
	}
}

/* === Logo Slider B — Mobile (max-width: 768px) === */
@media (max-width: 768px) {
	.hlp-logo-slider-b {
		padding: 8px 0;
	}
	.hlp-logo-slider-b__track {
		gap: 16px;
		padding: 0 8px;
	}
	.hlp-logo-slider-b__logo {
		height: 32px;
		min-width: 50px;
		max-width: 100px;
	}
	.hlp-logo-slider-b__label {
		margin: 0 0 8px !important;
	}
}


/* ==========================================================================
   Compare Table — Shared Base Styles
   ========================================================================== */

.hlp-compare {
	--hlp-compare-font-size: 16px;
	--hlp-compare-font-size-tiny: 10px;
	--hlp-compare-font-size-caption: 11px;
	--hlp-compare-font-size-small: 12px;
	--hlp-compare-font-size-label: 13px;
	--hlp-compare-font-size-note: 14px;
	--hlp-compare-font-size-cell: 15px;
	--hlp-compare-font-size-icon: 20px;
	--hlp-compare-font-size-rank: 26px;
	font-size: var(--hlp-compare-font-size);
	width: 100%;
}

/* Reset WordPress group block padding inside compare tables */
.hlp-compare .wp-block-group {
	padding: 0;
}

/* --- Crown icon (span element for wp:html patterns) --- */
.hlp-compare__crown {
	display: inline-block;
	width: 36px;
	height: 31px;
	flex-shrink: 0;
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center;
}

/* Crown as ::before on rank paragraph (for native-block patterns) */
.hlp-compare__rank::before {
	content: "";
	display: inline-block;
	width: 36px;
	height: 31px;
	flex-shrink: 0;
	vertical-align: middle;
	margin-right: 8px;
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center;
}

/* --- Rank styling --- */
.hlp-compare__rank {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	flex-wrap: wrap;
	font-weight: 700;
	font-size: var(--hlp-compare-font-size-rank);
	line-height: 1;
	margin: 0;
}

/* Rank text gradient + crown color */
.hlp-compare__rank-num {
	font-weight: 700;
	font-size: var(--hlp-compare-font-size-rank);
	line-height: 1;
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	background-clip: text;
}

/* For native-block rank (p tag with gradient text) */
p.hlp-compare__rank {
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	background-clip: text;
}

/* Gold (1st) */
.hlp-compare__rank--1 .hlp-compare__crown,
.hlp-compare__rank--1::before {
	background-image: url("assets/crown-gold.svg");
}
.hlp-compare__rank--1 .hlp-compare__rank-num,
p.hlp-compare__rank--1 {
	background-image: linear-gradient(90deg, #e0b41e 8%, #f5d587 42%, #e0b41e 77%);
}

/* Silver (2nd) */
.hlp-compare__rank--2 .hlp-compare__crown,
.hlp-compare__rank--2::before {
	background-image: url("assets/crown-silver.svg");
}
.hlp-compare__rank--2 .hlp-compare__rank-num,
p.hlp-compare__rank--2 {
	background-image: linear-gradient(90deg, #7c7c7c 8%, #bebebe 42%, #7c7c7c 77%);
}

/* Bronze (3rd) */
.hlp-compare__rank--3 .hlp-compare__crown,
.hlp-compare__rank--3::before {
	background-image: url("assets/crown-bronze.svg");
}
.hlp-compare__rank--3 .hlp-compare__rank-num,
p.hlp-compare__rank--3 {
	background-image: linear-gradient(90deg, #e07c1e 8%, #f5be87 42%, #e07c1e 77%);
}

/* Plain (4th and beyond) — no crown, solid dark text, no gradient.
   min-height matches the crown's 31px so the rank row keeps the same height as cards 1-3. */
.hlp-compare__rank--plain::before {
	display: none;
}
p.hlp-compare__rank--plain {
	background-image: none;
	-webkit-background-clip: border-box;
	background-clip: border-box;
	-webkit-text-fill-color: currentColor;
	color: #1a1a2e;
	min-height: 31px;
}

/* When the rank is wrapped in <div class="...--plain"> with an inner
   <span class="hlp-compare__rank-num"> (Pattern B and Pattern C render
   markup), the rule above doesn't reach the inner span — the span keeps
   `-webkit-text-fill-color: transparent` from the base rank-num rule and
   renders invisibly. Override the fill on the span when its wrapper is
   marked plain so the "No.4", "No.5", … text actually shows. */
.hlp-compare__rank--plain .hlp-compare__rank-num {
	background-image: none;
	-webkit-background-clip: border-box;
	background-clip: border-box;
	-webkit-text-fill-color: currentColor;
	color: #1a1a2e;
}

/* --- Text-based rating values (for native block patterns) --- */
.hlp-compare__val--star { color: #f5a623; }
.hlp-compare__val--excellent { color: #e74c3c; font-size: var(--hlp-compare-font-size-icon); }
.hlp-compare__val--good { color: #f5a623; font-size: var(--hlp-compare-font-size-icon); }
.hlp-compare__val--fair { color: #aaa; font-size: var(--hlp-compare-font-size-icon); }

/* --- Rating icons (◎○△) --- */
.hlp-compare__rating {
	display: inline-block;
	width: 20px;
	height: 20px;
	flex-shrink: 0;
	vertical-align: middle;
	-webkit-mask-size: contain;
	mask-size: contain;
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-position: center;
	mask-position: center;
}

.hlp-compare__rating--excellent {
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='12' cy='12' r='10' stroke='black' stroke-width='2' fill='none'/%3E%3Ccircle cx='12' cy='12' r='5' fill='black'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='12' cy='12' r='10' stroke='black' stroke-width='2' fill='none'/%3E%3Ccircle cx='12' cy='12' r='5' fill='black'/%3E%3C/svg%3E");
	background-color: #e74c3c;
}

.hlp-compare__rating--good {
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='12' cy='12' r='10' stroke='black' stroke-width='2' fill='none'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='12' cy='12' r='10' stroke='black' stroke-width='2' fill='none'/%3E%3C/svg%3E");
	background-color: #f5a623;
}

.hlp-compare__rating--fair {
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12 3L22 21H2L12 3z' stroke='black' stroke-width='2' fill='none' stroke-linejoin='round'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12 3L22 21H2L12 3z' stroke='black' stroke-width='2' fill='none' stroke-linejoin='round'/%3E%3C/svg%3E");
	background-color: #aaa;
}

/* --- Star icon --- */
.hlp-compare__star-icon {
	display: inline-block;
	width: 24px;
	height: 24px;
	vertical-align: middle;
	background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z' fill='%23f5a623'/%3E%3C/svg%3E");
	background-size: contain;
	background-repeat: no-repeat;
}

.hlp-compare__star-icon-sm {
	display: inline-block;
	width: 18px;
	height: 18px;
	vertical-align: middle;
	background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z' fill='%23f5a623'/%3E%3C/svg%3E");
	background-size: contain;
	background-repeat: no-repeat;
}

/* Small stars for Pattern B */
.hlp-compare__star-sm {
	display: inline-block;
	width: 12px;
	height: 12px;
}

.hlp-compare__star-sm--full {
	background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z' fill='%23f5a623'/%3E%3C/svg%3E");
	background-size: contain;
	background-repeat: no-repeat;
}

.hlp-compare__star-sm--half {
	background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z' fill='%23e0e0e0'/%3E%3Cpath d='M12 2v15.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z' fill='%23f5a623'/%3E%3C/svg%3E");
	background-size: contain;
	background-repeat: no-repeat;
}

.hlp-compare__stars-row {
	display: flex;
	gap: 2px;
	align-items: center;
}

.hlp-compare__stars-label {
	font-size: var(--hlp-compare-font-size);
	line-height: 1.5;
	color: #1a1a2e;
}

/* --- CTA buttons --- */
.hlp-compare__cta {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 8px 12px;
	border-radius: 9999px;
	font-weight: 700;
	font-size: var(--hlp-compare-font-size-small);
	color: #fff;
	text-decoration: none;
	width: 100%;
	min-height: 36px;
	box-sizing: border-box;
	cursor: pointer;
	border: none;
	transition: opacity 0.2s;
}

.hlp-compare__cta:hover {
	opacity: 0.85;
	color: #fff;
}

.hlp-compare__cta--accent {
	background: linear-gradient(to bottom, #f5a623, #e09415);
	box-shadow: 0 2px 0 #c07d0e;
}

.hlp-compare__cta--primary {
	background: linear-gradient(to bottom, var(--hlp-primary, #1a6fc4), var(--hlp-primary-dark, #0d4f96));
	box-shadow: 0 2px 0 #093d75;
}

.hlp-compare__cta--sm {
	font-size: var(--hlp-compare-font-size-tiny);
	padding: 6px 12px;
	min-height: 30px;
}

.hlp-compare__cta-lead {
	display: block;
	text-align: center;
	font-weight: 700;
	font-size: var(--hlp-compare-font-size-note);
	color: var(--hlp-primary, #1a6fc4);
}

.hlp-compare__cta-note {
	display: block;
	text-align: center;
	font-size: var(--hlp-compare-font-size-small);
	color: #888;
}

.hlp-compare__review-link {
	display: block;
	text-align: center;
	font-size: var(--hlp-compare-font-size-small);
	color: var(--hlp-primary, #1a6fc4);
	text-decoration: underline;
}

/* --- Placeholders --- */
.hlp-compare__banner-placeholder,
.hlp-compare__image-placeholder {
	display: flex;
	align-items: center;
	justify-content: center;
}

.hlp-compare__logo-badge {
	position: absolute;
	top: 0;
	left: 0;
	background: #d9d9d9;
	border-radius: 0 0 8px 0;
	padding: 8px 12px;
	font-weight: 700;
	font-size: var(--hlp-compare-font-size-tiny);
	color: #959595;
}

.hlp-compare__logo-sm {
	background: #d9d9d9;
	border-radius: 4px;
	display: flex;
	align-items: center;
	justify-content: center;
	font-weight: 700;
	font-size: var(--hlp-compare-font-size-tiny);
	color: #959595;
}

.hlp-compare__logo-placeholder {
	border-radius: 4px;
	display: flex;
	align-items: center;
	justify-content: center;
}


/* ==========================================================================
   Pattern A — Card Layout
   ========================================================================== */

.hlp-compare--a .hlp-compare__cards {
	display: flex;
	gap: 20px;
	width: 100%;
	flex-wrap: nowrap;
}

/* Override wp-block-group defaults when used as card container */
.hlp-compare--a .hlp-compare__cards.wp-block-group {
	gap: 20px;
}

/* Cards share the container width equally and shrink as needed. min-width: 0
   lets the flex children fall below their content's intrinsic size so the
   inner text/spec rows wrap inside the card instead of forcing horizontal
   overflow. */
.hlp-compare--a .hlp-compare__card {
	flex: 1 1 0;
	min-width: 0;
	border-radius: 8px;
	overflow: hidden;
	box-shadow: 0 2px 8px rgba(0,0,0,0.04);
}

.hlp-compare--a .hlp-compare__card--1 { background: #fefaf2; }
.hlp-compare--a .hlp-compare__card--2 { background: #f4f7fb; }
.hlp-compare--a .hlp-compare__card--3 { background: #fff; }


.hlp-compare--a .hlp-compare__banner {
	position: relative;
	width: 100%;
	aspect-ratio: 280 / 174;
	background: #ececec;
	overflow: hidden;
}

.hlp-compare--a .hlp-compare__banner--empty {
	background: transparent;
}

.hlp-compare--a .hlp-compare__banner-placeholder {
	width: 100%;
	height: 100%;
	margin: 0;
	display: flex;
	align-items: center;
	justify-content: center;
}

.hlp-compare--a .hlp-compare__banner-image {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.hlp-compare--a .hlp-compare__card-body {
	display: flex;
	flex-direction: column;
	gap: 12px;
	padding: 16px;
	min-width: 0;
	overflow-wrap: anywhere;
	word-break: break-word;
}

/* Spec row margins reset for p tags */
.hlp-compare--a .hlp-compare__spec-label,
.hlp-compare--a .hlp-compare__spec-value {
	margin: 0;
}

.hlp-compare--a .hlp-compare__feature {
	margin-top: 0;
	margin-bottom: 0;
}

/* Tighten the gap between the rank badge and the company name to half the
   card-body's default gap. Two-step fix because v0.9.9's negative-margin-
   only approach was being overwhelmed by host-theme <p> margins stacked
   onto the flex gap. Step 1: kill theme <p> margins on rank + name with
   !important. Step 2: pull the name up 6px to halve the visible gap. */
.hlp-compare--a p.hlp-compare__rank,
.hlp-compare--a p.hlp-compare__name {
	margin-top: 0 !important;
	margin-bottom: 0 !important;
}

.hlp-compare--a .hlp-compare__rank + .hlp-compare__name {
	margin-top: -6px !important;
}

.hlp-compare--a .hlp-compare__name {
	font-weight: 700;
	font-size: var(--hlp-compare-font-size);
	line-height: 1.5;
	color: #333;
	text-align: center;
	margin: 0;
}

/* Spec table */
.hlp-compare--a .hlp-compare__spec {
	display: flex;
	flex-direction: column;
	width: 100%;
}

.hlp-compare--a .hlp-compare__spec-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	padding: 6px 0;
	border-bottom: 1px solid #f0f0f0;
	min-height: 37px;
	flex-wrap: wrap;
}

.hlp-compare--a .hlp-compare__spec-label {
	font-size: var(--hlp-compare-font-size-label);
	font-weight: 500;
	color: #888;
	min-width: 0;
	flex: 1 1 auto;
}

.hlp-compare--a .hlp-compare__spec-value {
	display: flex;
	align-items: center;
	gap: 2px;
	font-size: var(--hlp-compare-font-size);
	line-height: 1.5;
	color: #1a1a2e;
	min-width: 0;
	flex: 0 1 auto;
	text-align: right;
}

/* Feature highlights */
.hlp-compare--a .hlp-compare__features {
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.hlp-compare--a .hlp-compare__feature {
	font-size: var(--hlp-compare-font-size-note);
	line-height: 1.6;
	color: #555;
	margin: 0;
}

.hlp-compare__keyword {
	background: linear-gradient(to bottom, transparent 55%, #fff3b0 55%);
	background-color: transparent;
	padding: 0 2px;
	font-weight: 700;
	color: inherit;
}

.hlp-compare__keyword--primary {
	background: linear-gradient(to bottom, transparent 55%, var(--hlp-primary-light, #d8ebff) 55%);
}

.hlp-compare--a .hlp-compare__cta-wrap {
	width: 100%;
}


/* ==========================================================================
   Pattern B — Horizontal Table (native <table>)
   Row-height sync is handled by the browser's table engine.
   4 columns: header labels (th) + 3 service columns (td).
   ========================================================================== */

/* Outer wrapper: border-radius + clipping */
.hlp-compare--b .hlp-compare__table-wrap {
	border-radius: 8px;
	overflow: hidden;
}

/* Table core */
.hlp-compare--b .hlp-compare__tbl {
	width: 100%;
	table-layout: fixed;
	border-collapse: collapse;
}

/* Column widths */
.hlp-compare--b .hlp-compare__tbl-col--header {
	width: 49px;
}

/* All cells — shared base. Font-size follows the block's modal setting. */
.hlp-compare--b .hlp-compare__tbl th,
.hlp-compare--b .hlp-compare__tbl td {
	border: 1px solid #e8ecf2;
	padding: 10px 9px;
	text-align: center;
	vertical-align: middle;
	font-size: var(--hlp-compare-font-size);
	line-height: 1.5;
	color: #1a1a2e;
	background: #fff;
}

/* Header cells (column A — leftmost label column).
   Sized to match Pattern C's label cells (.hlp-compare--c .hlp-compare__th = 11px).
   Text rendered vertically (Japanese 縦書き) via writing-mode: vertical-rl. */
.hlp-compare--b .hlp-compare__tbl th {
	background: #e7f3fe;
	font-weight: 700;
	font-size: var(--hlp-compare-font-size-caption);
	writing-mode: vertical-rl;
	text-orientation: mixed;
	white-space: nowrap;
	padding: 10px 6px;
}

/* Per-cell bold override applied via the editor's bold toggle.
   Used as a class on the <td> instead of a <strong> wrapper, since
   stars rows contain block-level children that an inline <strong>
   can't legally wrap (HTML5 parsing auto-closes <strong> before <div>). */
.hlp-compare--b .hlp-compare__tbl td.hlp-compare__td--bold,
.hlp-compare--b .hlp-compare__tbl td.hlp-compare__td--bold * {
	font-weight: 700;
}

/* --- Highlight column (No.1 = td:nth-child(2)) --- */
.hlp-compare--b .hlp-compare__td--hl {
	border-left: 3px solid #f5a623 !important;
	border-right: 3px solid #f5a623 !important;
}

.hlp-compare--b tr:first-child .hlp-compare__td--hl {
	border-top: 3px solid #f5a623 !important;
}

.hlp-compare--b tr:last-child .hlp-compare__td--hl {
	border-bottom: 3px solid #f5a623 !important;
}

/* --- Hero row content --- */
.hlp-compare--b .hlp-compare__tbl td {
	vertical-align: top;
	padding: 8px;
}

.hlp-compare--b .hlp-compare__tbl .hlp-compare__rank {
	margin-bottom: 8px;
}

/* Banner image and placeholder fill the cell's content width (inside the
   cell's existing padding). aspect-ratio keeps a consistent footprint
   regardless of the source image dimensions. */
.hlp-compare--b .hlp-compare__tbl .hlp-compare__image-placeholder {
	width: 100%;
	aspect-ratio: 250 / 174;
	margin-bottom: 8px;
}

.hlp-compare--b .hlp-compare__tbl .hlp-compare__image {
	display: block;
	width: 100%;
	max-width: 100%;
	height: auto;
	aspect-ratio: 250 / 174;
	object-fit: cover;
	margin-bottom: 8px;
}

/* Logo image inside hero info — fills the container's content width and
   keeps the source image's natural aspect ratio. No forced aspect-ratio
   here: clamping height: 60 / width: 181 + object-fit: contain makes square
   or portrait logos render very small inside a wide-but-short box. With
   height: auto, every logo scales up to the full available width. */
.hlp-compare--b .hlp-compare__hero-info .hlp-compare__logo {
	display: block;
	width: 100%;
	max-width: 100%;
	height: auto;
}

.hlp-compare--b .hlp-compare__hero-info {
	display: flex;
	flex-direction: column;
	gap: 8px;
	align-items: center;
	padding: 0 16px;
}

.hlp-compare--b .hlp-compare__hero-info .hlp-compare__logo-placeholder {
	width: 100%;
	aspect-ratio: 181 / 60;
}

.hlp-compare--b .hlp-compare__company-link {
	font-weight: 700;
	font-size: var(--hlp-compare-font-size-small);
	color: var(--hlp-primary, #1a6fc4);
	text-decoration: underline;
}

/* --- Data row cells: re-center vertically --- */
.hlp-compare--b .hlp-compare__tbl tr:not(:first-child) td {
	vertical-align: middle;
	text-align: center;
}

/* Stars row */
.hlp-compare--b .hlp-compare__tbl .hlp-compare__stars-row {
	justify-content: center;
}

.hlp-compare--b .hlp-compare__tbl .hlp-compare__stars-label {
	display: block;
}

/* Icon + count row */
.hlp-compare--b .hlp-compare__tbl .hlp-compare__rating {
	display: block;
	margin: 0 auto 4px;
	width: 24px;
	height: 24px;
}

/* CTA row */
.hlp-compare--b .hlp-compare__tbl tr:last-child td {
	padding: 10px 9px;
	vertical-align: middle;
}

.hlp-compare--b .hlp-compare__tbl .hlp-compare__cta {
	width: 100%;
}

.hlp-compare--b .hlp-compare__tbl .hlp-compare__review-link {
	margin-top: 0;
}


/* ==========================================================================
   Pattern C — Horizontal Table + Tabs
   ========================================================================== */

/* Tabs */
.hlp-compare--c .hlp-compare__tabs {
	display: flex;
	gap: 4px;
	width: 100%;
	border-bottom: 3px solid var(--hlp-primary, #1a6fc4);
}

.hlp-compare--c .hlp-compare__tab {
	flex: 1 1 0;
	min-width: 64px;
	padding: 9px 13px;
	border: 1px solid #e8ecf2;
	border-bottom: none;
	border-radius: 6px 6px 0 0;
	background: #f4f7fb;
	font-size: var(--hlp-compare-font-size);
	font-weight: 400;
	color: #424a53;
	text-align: center;
	cursor: pointer;
	letter-spacing: 0.8px;
	line-height: 24px;
}

/* CSS-only tab radio inputs */
.hlp-compare__tab-radio {
	display: none !important;
	position: absolute;
	opacity: 0;
	pointer-events: none;
}

/* Default: hide all panels on frontend */
.hlp-compare--c .hlp-compare__tab-panel {
	display: none;
}

/* Show panel when corresponding radio is checked (positional, supports up to 5 tabs) */
.hlp-compare--c input:nth-of-type(1):checked ~ .hlp-compare__tab-panel[data-panel="1"],
.hlp-compare--c input:nth-of-type(2):checked ~ .hlp-compare__tab-panel[data-panel="2"],
.hlp-compare--c input:nth-of-type(3):checked ~ .hlp-compare__tab-panel[data-panel="3"],
.hlp-compare--c input:nth-of-type(4):checked ~ .hlp-compare__tab-panel[data-panel="4"],
.hlp-compare--c input:nth-of-type(5):checked ~ .hlp-compare__tab-panel[data-panel="5"] {
	display: block;
}

/* Active tab label styling (positional, supports up to 5 tabs) */
.hlp-compare--c input:nth-of-type(1):checked ~ .hlp-compare__tabs .hlp-compare__tab:nth-child(1),
.hlp-compare--c input:nth-of-type(2):checked ~ .hlp-compare__tabs .hlp-compare__tab:nth-child(2),
.hlp-compare--c input:nth-of-type(3):checked ~ .hlp-compare__tabs .hlp-compare__tab:nth-child(3),
.hlp-compare--c input:nth-of-type(4):checked ~ .hlp-compare__tabs .hlp-compare__tab:nth-child(4),
.hlp-compare--c input:nth-of-type(5):checked ~ .hlp-compare__tabs .hlp-compare__tab:nth-child(5) {
	background: var(--hlp-primary, #1a6fc4);
	color: #fff;
	font-weight: 700;
}

/* Editor: show ALL panels so they are editable */
.editor-styles-wrapper .hlp-compare--c .hlp-compare__tab-panel {
	display: block !important;
}

/* Editor: visual separator between panels */
.editor-styles-wrapper .hlp-compare--c .hlp-compare__tab-panel + .hlp-compare__tab-panel {
	margin-top: 16px;
	border-top: 2px dashed #ccc;
	padding-top: 16px;
}

/* Table grid — fits container width, no horizontal scroll */
.hlp-compare--c .hlp-compare__tab-panel {
	width: 100%;
}

.hlp-compare--c .hlp-compare__thead {
	display: grid;
	/* grid-template-columns set via inline style from PHP */
	background: #f1f1f1;
	border: 1px solid #e8ecf2;
	width: 100%;
}

.hlp-compare--c .hlp-compare__th {
	padding: 8px 6px;
	font-weight: 700;
	font-size: var(--hlp-compare-font-size-label);
	color: #525558;
	text-align: center;
	border-right: 1px solid #e8ecf2;
	min-width: 0;
	overflow-wrap: anywhere;
	word-break: normal;
	display: flex;
	align-items: center;
	justify-content: center;
	line-height: 1.4;
}

.hlp-compare--c .hlp-compare__th:last-child {
	border-right: none;
}

.hlp-compare--c .hlp-compare__trow {
	display: grid;
	/* grid-template-columns set via inline style from PHP */
	border: 1px solid #e8ecf2;
	border-top: none;
	align-items: stretch;
	width: 100%;
}

.hlp-compare--c .hlp-compare__trow--1 { background: #fffbf0; }
.hlp-compare--c .hlp-compare__trow--2 { background: #f4f7fb; }
.hlp-compare--c .hlp-compare__trow--3 { background: #fff; }

/* Reset p tag margins for native block cells */
p.hlp-compare__td {
	margin-top: 0;
	margin-bottom: 0;
}

.hlp-compare--c .hlp-compare__td {
	padding: 10px 6px;
	font-size: var(--hlp-compare-font-size-cell);
	line-height: 1.5;
	color: #1a1a2e;
	text-align: center;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-wrap: wrap;
	gap: 4px;
	border-right: 1px solid #e8ecf2;
	min-width: 0;
	overflow-wrap: anywhere;
	word-break: normal;
}

.hlp-compare--c .hlp-compare__td:last-child {
	border-right: none;
}

.hlp-compare--c .hlp-compare__td--rank {
	justify-content: center;
}

/* Logo cell — stack rank → logo → name vertically.
   Specificity raised (chained class) so the column layout cannot be undone
   by the generic .hlp-compare__td rule above, and flex-wrap explicitly set
   to `nowrap` so children never wrap into a second column. */
.hlp-compare--c .hlp-compare__td.hlp-compare__td--logo {
	display: flex;
	flex-direction: column;
	flex-wrap: nowrap;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 10px 6px;
}

.hlp-compare--c .hlp-compare__td.hlp-compare__td--logo > * {
	flex: 0 0 auto;
	max-width: 100%;
}

/* Rank badge stacked at top of logo cell (rank column merged into logo column).
   Reuses .hlp-compare__rank--N classes for the crown SVG + gradient text. */
.hlp-compare--c .hlp-compare__td--logo .hlp-compare__rank-badge {
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: center;
	gap: 4px;
	font-size: var(--hlp-compare-font-size);
	line-height: 1;
	margin: 0;
	width: auto;
}

.hlp-compare--c .hlp-compare__td--logo .hlp-compare__rank-badge::before {
	width: 22px;
	height: 19px;
	margin-right: 2px;
	margin-bottom: 0;
}

.hlp-compare--c .hlp-compare__td--logo .hlp-compare__rank-badge .hlp-compare__rank-num {
	font-size: var(--hlp-compare-font-size);
	line-height: 1;
}

.hlp-compare--c .hlp-compare__td--logo .hlp-compare__logo-sm {
	display: block;
	height: auto;
	max-height: 70px;
	max-width: 100%;
	object-fit: contain;
	background: transparent;
}

/* Image placeholder inside logo cell (editor only) — constrain so it doesn't
   stretch to grid-row height and push siblings into a second flex column. */
.hlp-compare--c .hlp-compare__td--logo .hlp-image-placeholder {
	width: 100%;
	height: auto;
	min-height: 48px;
	max-height: 70px;
}

.hlp-compare--c .hlp-compare__td--logo .hlp-compare__td-name {
	display: block;
	width: 100%;
	font-size: var(--hlp-compare-font-size-note);
	color: #333;
	text-align: center;
	line-height: 1.4;
	overflow-wrap: anywhere;
}

.hlp-compare--c .hlp-compare__td--cta {
	padding: 10px 6px;
}

/* Compact "詳細" button — replaces wide CTA on horizontal summary table */
.hlp-compare--c .hlp-compare__detail-btn {
	display: inline-block;
	padding: 8px 12px;
	min-width: 60px;
	max-width: 100%;
	font-size: var(--hlp-compare-font-size-note);
	font-weight: 700;
	line-height: 1.2;
	color: #fff;
	text-align: center;
	text-decoration: none;
	border-radius: 4px;
	background: var(--hlp-primary, #1a6fc4);
	transition: background-color 0.15s ease, opacity 0.15s ease;
	cursor: pointer;
	overflow-wrap: anywhere;
}

.hlp-compare--c .hlp-compare__detail-btn:hover,
.hlp-compare--c .hlp-compare__detail-btn:focus {
	background: var(--hlp-primary-dark, #0d4f96);
	color: #fff;
	text-decoration: none;
	opacity: 1;
}

.hlp-compare--c .hlp-compare__detail-btn--accent {
	background: var(--hlp-warning, #e8910c);
}

.hlp-compare--c .hlp-compare__detail-btn--accent:hover,
.hlp-compare--c .hlp-compare__detail-btn--accent:focus {
	background: var(--hlp-warning-dark, #c2780a);
}


/* ==========================================================================
   Pattern D — Modern Card Grid
   ========================================================================== */

/* Row-major markup: outer grid is a vertical stack of rows; each row is a
   horizontal flex container. align-items: stretch makes every cell in a row
   share the same height (so a tall bullets cell pulls its row-mates up). */
.hlp-compare--d .hlp-compare__grid-d {
	display: flex;
	flex-direction: column;
	gap: 12px;
	width: 100%;
}

.hlp-compare--d .hlp-compare__drow {
	display: flex;
	gap: 12px;
	align-items: stretch;
}

.hlp-compare--d .hlp-compare__dcell {
	flex: 1 1 0;
	min-width: 0;
	min-height: 70px;
	padding: 10px 9px;
	border-radius: 8px;
	font-size: var(--hlp-compare-font-size);
	font-weight: 700;
	line-height: 1.5;
	text-align: center;
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
}

/* Kill host-theme <p> margins on cells. Without this, the theme's default
   p {margin-block: 1em} stacks onto the flex gap (making row spacing look
   wider than column spacing) AND visually shrinks the label cell's
   background in the bullets row (where label is <p> but the bullets cell
   is <div> — no margin). Bumping specificity to .hlp-compare--d p.* +
   !important defeats theme rules like .entry-content p {margin: ...}. */
.hlp-compare--d p.hlp-compare__dcell {
	margin-top: 0 !important;
	margin-bottom: 0 !important;
}

/* Header column cell (left-most cell of every row, including the corner).
   Kept as a narrow fixed-width sidebar column; data cells share the remaining
   row width equally (flex: 1 1 0). min-width drops to 100px so the label can
   shrink slightly on narrow viewports without breaking the layout. */
.hlp-compare--d .hlp-compare__dcell--label {
	flex: 0 0 120px;
	min-width: 100px;
	background: #232325;
	color: #fff;
}

/* Per-cell color modifiers (one per column index) */
.hlp-compare--d .hlp-compare__dcell--gold {
	background: #fef2c0;
	color: #1a1a2e;
}
.hlp-compare--d .hlp-compare__dcell--silver,
.hlp-compare--d .hlp-compare__dcell--bronze,
.hlp-compare--d .hlp-compare__dcell--plain {
	background: #f4f4f6;
	color: #1a1a2e;
}

/* Data cells (text / icon / review) default to non-bold across every column.
   Use the bold toggle in the editor to opt a specific cell into bold. */
.hlp-compare--d .hlp-compare__dcell--data {
	font-weight: 400;
}

/* Per-cell bold override (set via the editor's bold toggle on text/icon/review cells) */
.hlp-compare--d .hlp-compare__dcell--bold   { font-weight: 700 !important; }
.hlp-compare--d .hlp-compare__dcell--nobold { font-weight: 400 !important; }

/* Bullets cell — left-aligned, multi-line; height naturally drives row height,
   and align-items: stretch on the row makes every other cell match. */
.hlp-compare--d .hlp-compare__dcell--bullets {
	padding: 12px;
	gap: 6px;
	align-items: flex-start;
	justify-content: flex-start;
	text-align: left;
	font-size: var(--hlp-compare-font-size-label);
	font-weight: 400;
	line-height: 1.5;
}
.hlp-compare--d .hlp-compare__bullet { margin: 0 !important; }
.hlp-compare--d .hlp-compare__bullet--empty { color: #aaa; }


/* ==========================================================================
   Compare Table — Responsive (Tablet: 1024px)
   ========================================================================== */

@media (max-width: 1024px) {

	/* A: cards continue to share the row equally — no horizontal scroll. */
	/* (Inherits flex: 1 1 0; min-width: 0 from the base rule.) */

	/* B: horizontal scroll with sticky header column */
	.hlp-compare--b .hlp-compare__table-wrap {
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
	}
	.hlp-compare--b .hlp-compare__tbl {
		min-width: 700px;
	}
	.hlp-compare--b .hlp-compare__tbl th {
		position: sticky;
		left: 0;
		z-index: 1;
	}

}


/* ==========================================================================
   Compare Table — Responsive (Mobile: 768px)
   ========================================================================== */

@media (max-width: 768px) {

	/* A: cards stay in a horizontal row on mobile too — they share the row
	   width equally (inheriting flex: 1 1 0; min-width: 0 from the base rule)
	   and grow taller as their inner text wraps. Per client request: prefer a
	   tall, narrow card over breaking the row into a single column. */
	.hlp-compare--a .hlp-compare__cards {
		gap: 8px;
	}
	.hlp-compare--a .hlp-compare__card-body {
		padding: 12px 8px;
		gap: 10px;
	}

	/* A: spec rows stack vertically on mobile — label on top, value below.
	   Everything (label / ◎○△ icon / review number / plain text) sits in a
	   single centered column so narrow cards don't have to fit two items on
	   one line. */
	.hlp-compare--a .hlp-compare__spec-row {
		flex-direction: column;
		align-items: center;
		gap: 2px;
		padding: 6px 0;
		min-height: 0;
	}
	.hlp-compare--a .hlp-compare__spec-label,
	.hlp-compare--a .hlp-compare__spec-value {
		text-align: center;
		flex: 0 0 auto;
		width: 100%;
		justify-content: center;
	}

	/* A: drop the ★ prefix from the review value on mobile (review number only). */
	.hlp-compare--a .hlp-compare__val--star {
		display: none;
	}

	/* A: shrink the rank crown + "No.N" badge on mobile to match HLP4-C's
	   compact mobile rank size (crown 18×16, text 13px). The default 36×31
	   crown + 26px text dominates the narrow card width with three columns. */
	.hlp-compare--a .hlp-compare__rank,
	.hlp-compare--a .hlp-compare__rank-num,
	.hlp-compare--a p.hlp-compare__rank {
		font-size: var(--hlp-compare-font-size-label);
		gap: 4px;
	}
	.hlp-compare--a .hlp-compare__rank::before {
		width: 18px;
		height: 16px;
		margin-right: 4px;
	}

	/* A: CTA collapses to a simple "詳細" label on mobile. The original
	   ctaLabel text is hidden with font-size: 0 (still readable by screen
	   readers) and a ::after pseudo prints "詳細" at the normal size. */
	.hlp-compare--a .hlp-compare__cta {
		font-size: 0;
		padding: 6px 10px;
		min-height: 30px;
	}
	.hlp-compare--a .hlp-compare__cta::after {
		content: '詳細';
		font-size: var(--hlp-compare-font-size-small);
		font-weight: 700;
		color: #fff;
	}

	/* B: narrower header on mobile */
	.hlp-compare--b .hlp-compare__tbl-col--header {
		width: 36px;
	}
	.hlp-compare--b .hlp-compare__tbl th {
		font-size: var(--hlp-compare-font-size-tiny);
		padding: 6px 2px;
	}

	/* C: smaller tabs + tighter cells (no horizontal scroll on SP) */
	.hlp-compare--c .hlp-compare__tab {
		font-size: var(--hlp-compare-font-size-note);
		padding: 7px 8px;
	}
	.hlp-compare--c .hlp-compare__th {
		font-size: var(--hlp-compare-font-size-caption);
		padding: 6px 3px;
	}
	.hlp-compare--c .hlp-compare__td {
		font-size: var(--hlp-compare-font-size-small);
		padding: 8px 3px;
		gap: 3px;
	}
	.hlp-compare--c .hlp-compare__td--logo {
		gap: 4px;
		padding: 8px 3px;
	}
	.hlp-compare--c .hlp-compare__logo-sm {
		max-height: 44px;
	}
	.hlp-compare--c .hlp-compare__td-name {
		font-size: var(--hlp-compare-font-size-caption);
		line-height: 1.3;
	}
	.hlp-compare--c .hlp-compare__rank-badge,
	.hlp-compare--c .hlp-compare__rank-badge .hlp-compare__rank-num {
		font-size: var(--hlp-compare-font-size-label);
	}
	.hlp-compare--c .hlp-compare__rank-badge::before {
		width: 18px;
		height: 16px;
	}
	.hlp-compare--c .hlp-compare__detail-btn {
		font-size: var(--hlp-compare-font-size-caption);
		padding: 6px 6px;
		min-width: 0;
	}
	.hlp-compare--c .hlp-compare__val--excellent,
	.hlp-compare--c .hlp-compare__val--good,
	.hlp-compare--c .hlp-compare__val--fair {
		font-size: var(--hlp-compare-font-size);
	}

	/* D: data cells continue to share row width equally on mobile (inheriting
	   flex: 1 1 0; min-width: 0 from the base rule — no horizontal scroll).
	   Label column shrinks to a narrower sidebar so data cells get more room. */
	.hlp-compare--d .hlp-compare__dcell {
		font-size: var(--hlp-compare-font-size-label);
		padding: 8px 4px;
	}
	.hlp-compare--d .hlp-compare__dcell--label {
		flex: 0 0 80px;
		min-width: 70px;
	}
	.hlp-compare--d .hlp-compare__dcell--bullets {
		font-size: var(--hlp-compare-font-size-caption);
		padding: 10px 6px;
	}

}


/* ==========================================================================
   CTA Button — Shared Component (wp:button block override)
   ========================================================================== */

.hlp-cta .wp-block-button__link {
	background: linear-gradient(to bottom, var(--hlp-primary, #1a6fc4), var(--hlp-primary-dark, #0d4f96)) !important;
	color: #fff !important;
	font-weight: 700;
	font-size: 12px;
	line-height: 20.4px;
	padding: 8px 12px;
	border-radius: 9999px !important;
	box-shadow: 0 2px 0 #093d75;
	min-width: 289px;
	text-align: center;
	border: none;
}

.hlp-cta .wp-block-button__link:hover {
	opacity: 0.85;
}


/* ==========================================================================
   Attention/Notice Sections — Shared Styles
   ========================================================================== */

mark.hlp-attention__highlight,
span.hlp-attention__highlight {
	background: linear-gradient(to bottom, transparent 55%, #fff176 55%) !important;
	background-color: transparent !important;
	padding: 0 2px !important;
}

strong.hlp-attention__accent,
span.hlp-attention__accent {
	color: var(--hlp-attention, #f57c00) !important;
}

span.hlp-attention__underline {
	background-image: linear-gradient(to top, var(--hlp-attention, #f57c00) 2px, transparent 2px) !important;
	background-position: 0 100%;
	background-repeat: no-repeat;
	padding-bottom: 2px !important;
}

p.hlp-attention__display {
	font-size: 36px !important;
	font-weight: 900 !important;
	line-height: 1 !important;
	text-align: center;
	color: var(--hlp-text-secondary, #555) !important;
	margin: 0 !important;
}

p.hlp-attention__urgency {
	text-align: center;
	line-height: 1.5 !important;
	font-size: 16px !important;
	color: var(--hlp-text-secondary, #555) !important;
	margin: 0 !important;
}


/* ==========================================================================
   Attention A — Compact alert with character illustrations
   ========================================================================== */

.hlp-attention-a {
	background: var(--hlp-attention-bg, #fffbf0);
	border: 1px solid var(--hlp-attention, #f57c00);
	border-radius: 8px;
	overflow: hidden;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 24px;
	padding: 16px 0 24px;
	max-width: var(--hlp-content-max-width, 880px);
	margin: 0 auto;
}

.hlp-attention-a__header {
	background: var(--hlp-attention, #f57c00);
	border-radius: 8px;
	padding: 11px 20px;
	text-align: center;
	width: calc(100% - 32px);
}

.hlp-attention-a__header .wp-block-heading {
	color: #fff !important;
	font-weight: 700 !important;
	margin: 0 !important;
}

.hlp-attention-a__body {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	width: 100%;
	padding: 0 16px;
	box-sizing: border-box;
}

.hlp-attention-a__body::before {
	content: "";
	width: 104px;
	height: 204px;
	background: url("assets/attention/char-left.svg") no-repeat center / contain;
	flex-shrink: 0;
}

.hlp-attention-a__body::after {
	content: "";
	width: 86px;
	height: 194px;
	background: url("assets/attention/char-right.svg") no-repeat center / contain;
	flex-shrink: 0;
}

.hlp-attention-a__content {
	flex: 1;
	min-width: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 24px;
	text-align: center;
}

.hlp-attention-a__content p {
	margin: 0 !important;
	font-size: 16px !important;
	line-height: 1.5 !important;
	color: var(--hlp-text-secondary, #555) !important;
	overflow-wrap: anywhere;
	word-break: break-word;
}

.hlp-attention-a__content .hlp-attention__accent {
	font-weight: 700 !important;
	font-size: 20px !important;
	letter-spacing: -0.4px;
}


/* ==========================================================================
   Attention B — Diagonal stripe urgency
   ========================================================================== */

.hlp-attention-b {
	position: relative;
	overflow: hidden;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 12px;
	padding: 12px 0;
	max-width: var(--hlp-content-max-width, 880px);
	margin: 0 auto;
}

.hlp-attention-b::before,
.hlp-attention-b::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	height: 32px;
	background: repeating-linear-gradient(
		-45deg,
		var(--hlp-attention, #f57c00) 0,
		var(--hlp-attention, #f57c00) 15px,
		transparent 15px,
		transparent 60px
	);
	opacity: 0.2;
	pointer-events: none;
}

.hlp-attention-b::before { top: 0; }
.hlp-attention-b::after { bottom: 0; }

.hlp-attention-b > * {
	position: relative;
	z-index: 1;
}

.hlp-attention-b__heading-area {
	text-align: center;
	width: 100%;
}

.hlp-attention-b__heading-area .wp-block-heading {
	text-align: center;
	font-weight: 700 !important;
	margin: 0 0 8px !important;
}

.hlp-attention-b__heading-area p {
	margin: 0 !important;
	color: var(--hlp-text-secondary, #555) !important;
	font-size: 16px !important;
	line-height: 1.5 !important;
}

.hlp-attention-b__callout {
	background: var(--hlp-attention-bg, #fffbf0);
	border: 1px solid var(--hlp-attention, #f57c00);
	border-radius: 8px;
	padding: 32px 16px;
	text-align: center;
	width: 100%;
	box-sizing: border-box;
}


/* ==========================================================================
   Attention C — Burst background
   ========================================================================== */

.hlp-attention-c {
	position: relative;
	overflow: hidden;
	background: var(--hlp-attention-bg, #fffbf0);
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 24px;
	padding: 12px 16px;
	max-width: var(--hlp-content-max-width, 880px);
	margin: 0 auto;
}

.hlp-attention-c::before {
	content: "";
	position: absolute;
	left: -80px;
	top: 50%;
	transform: translateY(-50%);
	width: 370px;
	height: 352px;
	background: url("assets/attention/burst.svg") no-repeat center / contain;
	opacity: 0.2;
	pointer-events: none;
}

.hlp-attention-c::after {
	content: "";
	position: absolute;
	right: -80px;
	top: 50%;
	transform: translateY(-50%) scaleX(-1);
	width: 370px;
	height: 352px;
	background: url("assets/attention/burst.svg") no-repeat center / contain;
	opacity: 0.2;
	pointer-events: none;
}

.hlp-attention-c > * {
	position: relative;
	z-index: 1;
}

.hlp-attention-c__heading-area {
	text-align: center;
	width: 100%;
}

.hlp-attention-c__heading-area .wp-block-heading {
	text-align: center;
	font-weight: 700 !important;
	margin: 0 0 8px !important;
}

.hlp-attention-c__heading-area p {
	margin: 0 !important;
	color: var(--hlp-text-secondary, #555) !important;
	font-size: 16px !important;
	line-height: 1.5 !important;
}

.hlp-attention-c__body {
	display: flex;
	flex-direction: column;
	gap: 24px;
	width: 100%;
}


/* ==========================================================================
   Attention D — Notice bar
   ========================================================================== */

.hlp-attention-d {
	background: var(--hlp-attention-bg, #fffbf0);
	border: 2px solid var(--hlp-attention, #f57c00);
	border-radius: 8px;
	padding: 16px;
	display: flex;
	align-items: center;
	gap: 16px;
	max-width: var(--hlp-content-max-width, 880px);
	margin: 0 auto;
	overflow: hidden;
}

.hlp-attention-d::before {
	content: "";
	width: 48px;
	height: 48px;
	flex-shrink: 0;
	background: url("assets/attention/alert-icon.svg") no-repeat center / contain;
}

.hlp-attention-d p {
	margin: 0 !important;
	font-size: 16px !important;
	line-height: 1.5 !important;
	flex: 1;
}


/* ==========================================================================
   Attention E — Stats cards with icon header
   ========================================================================== */

/* Outer wrapper that holds the attention-e block + the cta-button sibling */
.hlp-attention-e-section {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 24px;
	padding: 24px 0;
	max-width: var(--hlp-content-max-width, 880px);
	margin: 0 auto;
}

/* Inner block — header + stats grid */
.hlp-attention-e {
	display: flex;
	flex-direction: column;
	gap: 24px;
	width: 100%;
}

.hlp-attention-e__header {
	display: flex;
	align-items: flex-start;
	gap: 8px;
	width: 100%;
}

.hlp-attention-e__header::before {
	content: "";
	width: 71px;
	height: 63px;
	flex-shrink: 0;
	background: url("assets/attention/megaphone.svg") no-repeat center / contain;
}

.hlp-attention-e__header-text {
	flex: 1;
	display: flex;
	flex-direction: column;
	gap: 8px;
	padding: 0 8px;
}

.hlp-attention-e__header-text .wp-block-heading {
	font-weight: 700 !important;
	margin: 0 !important;
}

.hlp-attention-e__header-text p {
	margin: 0 !important;
	color: var(--hlp-text-muted, #888) !important;
	font-size: 16px !important;
	line-height: 1.5 !important;
}

.hlp-attention-e__stats {
	display: grid !important;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 24px;
	width: 100%;
	padding: 0 !important;
}

.hlp-attention-e__stat-card {
	background: var(--hlp-attention-bg, #fffbf0);
	border: 1px solid var(--hlp-attention, #f57c00);
	border-radius: 8px;
	margin: 0 !important;
	margin-block: 0 !important;
	padding: 16px !important;
	display: flex !important;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 16px;
	text-align: center;
	min-height: 0;
}

.hlp-attention-e__stat-card > * {
	margin: 0 !important;
	margin-block: 0 !important;
	padding: 0 !important;
}

.hlp-attention-e__stat-label {
	font-weight: 700 !important;
	font-size: 16px !important;
	line-height: 1.5 !important;
	text-align: center;
	margin: 0 !important;
}

.hlp-attention-e .hlp-attention-e__stat-value {
	font-weight: 900 !important;
	font-size: 36px !important;
	line-height: 1 !important;
	text-align: center;
	color: var(--hlp-attention, #f57c00) !important;
	margin: 0 !important;
}

.hlp-attention-e__stat-card--text {
	justify-content: center;
}

.hlp-attention-e__stat-card--text p {
	margin: 0 !important;
	font-size: 16px !important;
	line-height: 1.5 !important;
	color: var(--hlp-text-secondary, #555) !important;
	overflow-wrap: anywhere;
	word-break: break-word;
}


/* ==========================================================================
   Attention Sections — Responsive (Mobile: 768px)
   ========================================================================== */

@media (max-width: 768px) {

	.hlp-attention-a__body::before,
	.hlp-attention-a__body::after {
		display: none;
	}

	.hlp-attention-b::before,
	.hlp-attention-b::after {
		height: 24px;
	}

	.hlp-attention-c::before,
	.hlp-attention-c::after {
		display: none;
	}

	.hlp-attention-d {
		flex-direction: column;
		text-align: center;
	}

	.hlp-attention-e__stats {
		grid-template-columns: 1fr !important;
	}

	.hlp-attention-e__header::before {
		width: 48px;
		height: 42px;
	}

	.hlp-attention__display {
		font-size: 28px !important;
	}

	.hlp-cta .wp-block-button__link {
		min-width: 0;
		width: 100%;
		max-width: 320px;
	}

}


/* ==========================================================================
   Osusume Points — Shared Styles (Patterns A–E)
   ========================================================================== */

/* Reset wp-block-group defaults inside osusume patterns */
.hlp-osusume .wp-block-group {
	max-width: none;
	padding: 0 !important;
	margin: 0 !important;
}

/* Reset WordPress flow-layout margins on children inside osusume */
.hlp-osusume .wp-block-group > * {
	margin-top: 0 !important;
	margin-bottom: 0 !important;
}

/* Yellow highlight via <mark> tag */
.hlp-osusume mark {
	background: linear-gradient(to bottom, transparent 60%, #fff176 60%) !important;
	background-color: transparent !important;
	color: inherit !important;
	-webkit-box-decoration-break: clone;
	box-decoration-break: clone;
	display: inline;
	white-space: normal;
}

/* Material Symbols base reset for icon spans */
.hlp-osusume .hlp-osusume__icon.material-symbols-rounded {
	font-variation-settings: 'FILL' 1, 'wght' 500, 'GRAD' 0, 'opsz' 24;
	user-select: none;
	-webkit-user-select: none;
	flex-shrink: 0;
	line-height: 1;
}



/* ==========================================================================
   Osusume A — Checkmark Icon + Highlighted Title + Description
   ========================================================================== */

.hlp-osusume--a .hlp-osusume__items {
	display: flex;
	flex-direction: column;
}

.hlp-osusume--a .hlp-osusume__item {
	display: grid;
	grid-template-columns: 22px 1fr;
	gap: 8px 12px;
	align-items: start;
	padding: 8px 0 !important;
	border-bottom: 1px solid #f0f0f0 !important;
}

.hlp-osusume--a .hlp-osusume__item:last-child {
	border-bottom: none !important;
}

.hlp-osusume--a .hlp-osusume__icon {
	grid-column: 1;
	grid-row: 1 / span 2;
	width: 22px;
	height: 22px;
	margin-top: 2px !important;
	font-size: 22px !important;
	color: var(--hlp-primary, #1a6fc4) !important;
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

.hlp-osusume--a .hlp-osusume__title,
.hlp-osusume--a .hlp-osusume__desc {
	grid-column: 2;
}

.hlp-osusume--a .hlp-osusume__title {
	font-size: 16px !important;
	font-weight: 700 !important;
	line-height: 1.5 !important;
	margin: 0 !important;
}

.hlp-osusume--a .hlp-osusume__desc {
	font-size: 14px !important;
	color: #555 !important;
	line-height: 1.5 !important;
	margin: 0 !important;
}


/* ==========================================================================
   Osusume B — Checkmark Bullet List
   ========================================================================== */

.hlp-osusume--b .hlp-osusume__items {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.hlp-osusume--b .hlp-osusume__item {
	display: flex;
	gap: 8px;
	align-items: flex-start;
}

.hlp-osusume--b .hlp-osusume__icon {
	width: 24px;
	height: 24px;
	border-radius: 50% !important;
	background-color: var(--hlp-primary, #1a6fc4) !important;
	color: #fff !important;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: 16px !important;
}

.hlp-osusume--b .hlp-osusume__text {
	flex: 1;
	min-width: 0;
	font-size: 16px !important;
	line-height: 1.5 !important;
	margin: 0 !important;
}

/* Bold text becomes blue keyword */
.hlp-osusume--b .hlp-osusume__text strong {
	color: var(--hlp-primary, #1a6fc4) !important;
}


/* ==========================================================================
   Osusume C — Bordered Card with Paragraph Header + Bullets
   ========================================================================== */

.hlp-osusume--c {
	align-self: stretch;
	box-sizing: border-box;
	max-width: 100%;
	min-width: 0;
	width: 100%;
}

.hlp-osusume--c .hlp-osusume__card {
	border: 2px solid var(--hlp-primary, #1a6fc4) !important;
	border-radius: 16px !important;
	padding: 16px !important;
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
	gap: 20px;
	max-width: 100%;
	min-width: 0;
	background: #fff !important;
	width: 100%;
}

.hlp-osusume--c .hlp-osusume__paragraph {
	font-size: 16px !important;
	font-weight: 700 !important;
	line-height: 1.7 !important;
}

.hlp-osusume--c .hlp-osusume__paragraph p,
.hlp-osusume--c .hlp-osusume__paragraph-line {
	margin: 0 !important;
}

.hlp-osusume--c .hlp-osusume__items {
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.hlp-osusume--c .hlp-osusume__item {
	display: flex;
	gap: 8px;
	align-items: flex-start;
}

.hlp-osusume--c .hlp-osusume__icon {
	width: 24px;
	height: 24px;
	border-radius: 50% !important;
	background-color: var(--hlp-primary, #1a6fc4) !important;
	color: #fff !important;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: 16px !important;
}

.hlp-osusume--c .hlp-osusume__text {
	flex: 1;
	min-width: 0;
	font-size: 14px !important;
	line-height: 1.5 !important;
	margin: 0 !important;
}

.hlp-osusume--c .hlp-osusume__text strong {
	color: var(--hlp-primary, #1a6fc4) !important;
}


/* ==========================================================================
   Osusume D — Numbered Items with Stat Badges
   ========================================================================== */

.hlp-osusume--d .hlp-osusume__items {
	display: flex;
	gap: 16px;
	padding: 24px 16px !important;
}

.hlp-osusume--d .hlp-osusume__item {
	flex: 1;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.hlp-osusume--d .hlp-osusume__number {
	font-size: 32px !important;
	font-weight: 900 !important;
	line-height: 32px !important;
	letter-spacing: -1.28px;
	color: var(--hlp-primary-light, #d8ebff) !important;
	margin: 0 !important;
}

.hlp-osusume--d .hlp-osusume__content {
	display: flex;
	flex-direction: column;
	gap: 8px;
	/* Grow to fill the remaining height of the stretched item. Combined with
	   `margin-top: auto` on the inner badge, this is what makes badges across
	   all items in the row land on the same baseline regardless of how long
	   each item's description is. */
	flex: 1;
}

.hlp-osusume--d .hlp-osusume__title {
	font-size: 16px !important;
	font-weight: 700 !important;
	line-height: 1.5 !important;
	margin: 0 !important;
}

/* Bold text becomes blue keyword */
.hlp-osusume--d .hlp-osusume__title strong {
	color: var(--hlp-primary, #1a6fc4) !important;
}

.hlp-osusume--d .hlp-osusume__desc {
	font-size: 14px !important;
	color: #555 !important;
	line-height: 1.5 !important;
	margin: 0 !important;
}

.hlp-osusume--d .hlp-osusume__badge {
	display: inline-flex;
	align-items: flex-end;
	align-self: flex-start;
	background-color: var(--hlp-primary, #1a6fc4) !important;
	color: #fff !important;
	border-radius: 6px !important;
	padding: 8px 12px !important;
	font-size: 12px !important;
	font-weight: 500 !important;
	line-height: 1 !important;
	/* Push the badge to the bottom of its item — items in the row stretch to
	   the tallest item's height, and `margin-top: auto` consumes the extra
	   space above the badge so all badges land on the same baseline. */
	margin: auto 0 0 0 !important;
}

.hlp-osusume--d .hlp-osusume__badge strong {
	font-size: 20px !important;
	font-weight: 900 !important;
	letter-spacing: -0.4px;
	color: inherit !important;
	/* Defeat the theme-override guard's `line-height: 1.4 !important` on
	   <strong>, which would otherwise expand the strong's inline box to
	   1.4 × 20px = 28px and push the badge total height from 36px to 44px.
	   Without this, the text appears to float higher than the badge's
	   intended bottom-padding edge, producing the visible misalignment. */
	line-height: 1 !important;
}


/* ==========================================================================
   Osusume E — Overlapping Icon Cards
   ========================================================================== */

.hlp-osusume--e .hlp-osusume__items {
	display: flex;
	align-items: flex-start;
	gap: 11px;
	padding: 24px 16px !important;
}

.hlp-osusume--e .hlp-osusume__card {
	flex: 1;
	min-width: 0;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	padding-bottom: 14px !important;
}

.hlp-osusume--e .hlp-osusume__icon {
	width: 32px;
	height: 32px;
	border-radius: 50% !important;
	background-color: var(--hlp-primary, #1a6fc4) !important;
	color: #fff !important;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: 18px !important;
	margin-left: 16px !important;
	margin-bottom: -14px !important;
	position: relative;
	z-index: 2;
	box-shadow: 0 2px 6px rgba(26, 111, 196, 0.3);
}

.hlp-osusume--e .hlp-osusume__card-body {
	background-color: #f7f9fc !important;
	border: 1px solid #e8ecf2 !important;
	border-radius: 12px !important;
	padding: 19px 16px 16px !important;
	width: 100%;
	display: flex;
	flex-direction: column;
	gap: 8px;
	position: relative;
	z-index: 1;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
	box-sizing: border-box;
}

.hlp-osusume--e .hlp-osusume__title {
	font-size: 16px !important;
	font-weight: 700 !important;
	line-height: 1.5 !important;
	margin: 0 !important;
}

.hlp-osusume--e .hlp-osusume__desc {
	font-size: 14px !important;
	color: #555 !important;
	line-height: 1.5 !important;
	margin: 0 !important;
}

.hlp-osusume--e .hlp-osusume__stat {
	font-size: 12px !important;
	font-weight: 500 !important;
	color: #555 !important;
	line-height: 34px !important;
	margin: 0 !important;
}

.hlp-osusume--e .hlp-osusume__stat strong {
	font-size: 20px !important;
	font-weight: 900 !important;
	color: var(--hlp-primary, #1a6fc4) !important;
	letter-spacing: -0.4px;
	/* Same guard-line-height defeat as Pattern D's badge strong — keep the
	   strong's inline box equal to its font-size so the parent stat's
	   34px line-height owns the overall line metrics without the strong
	   adding hidden extra height. */
	line-height: 1 !important;
}


/* ==========================================================================
   Osusume Points — Responsive (Mobile: 768px)
   ========================================================================== */

@media (max-width: 768px) {

	/* A: more padding on mobile */
	.hlp-osusume--a .hlp-osusume__item {
		padding: 16px !important;
	}

	/* B: larger gap */
	.hlp-osusume--b .hlp-osusume__items {
		gap: 16px;
	}

	/* C: adjusted padding */
	.hlp-osusume--c .hlp-osusume__card {
		padding: 8px 16px !important;
		gap: 16px;
	}

	/* D: vertical stack, items become rows with number on left */
	.hlp-osusume--d .hlp-osusume__items {
		flex-direction: column;
		padding: 16px !important;
	}

	.hlp-osusume--d .hlp-osusume__item {
		flex-direction: row;
		padding: 16px 0 !important;
		border-bottom: 1px solid #f0f0f0 !important;
	}

	.hlp-osusume--d .hlp-osusume__item:last-child {
		border-bottom: none !important;
	}

	.hlp-osusume--d .hlp-osusume__number {
		flex-shrink: 0;
		width: 44px;
	}

	/* E: vertical stack */
	.hlp-osusume--e .hlp-osusume__items {
		flex-direction: column;
		gap: 16px;
		padding: 24px 16px !important;
	}

}


/* ==========================================================================
   こんな方におすすめ — Shared Styles (Variants B–D)
   Heading is rendered externally via the heading component set —
   not included in these blocks.
   ========================================================================== */

/* Yellow highlight (Variant B) */
.hlp-konna-kata mark {
	background: linear-gradient(to bottom, transparent 60%, #fff176 60%) !important;
	background-color: transparent !important;
	color: inherit !important;
	padding: 0 2px !important;
	/* Ensure highlight wraps with the text (each line gets its own highlight band) */
	-webkit-box-decoration-break: clone;
	box-decoration-break: clone;
	/* Defensive overrides in case theme CSS sets nowrap on <mark> */
	display: inline;
	white-space: normal;
}


/* ==========================================================================
   Konna-Kata B — Checkmark + Highlighted Bold Text (single column)
   ========================================================================== */

.hlp-konna-kata--b .hlp-konna-kata__items {
	display: flex;
	flex-direction: column;
	gap: 16px;
	padding: 16px 0;
}

.hlp-konna-kata--b .hlp-konna-kata__item {
	display: flex;
	gap: 12px;
	align-items: flex-start;
	background-color: #f7f9fc !important;
	border: 1px solid #e8edf3 !important;
	border-radius: 8px !important;
	padding: 17px 17px 17px 13px !important;
	min-width: 0;
}

.hlp-konna-kata--b .hlp-konna-kata__item::before {
	content: "" !important;
	flex-shrink: 0;
	width: 24px !important;
	height: 24px !important;
	margin-top: 2px;
	background-color: var(--hlp-primary, #1a6fc4) !important;
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M5 12.5l4 4L19 7' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M5 12.5l4 4L19 7' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
	-webkit-mask-size: contain;
	mask-size: contain;
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
}

.hlp-konna-kata--b .hlp-konna-kata__text {
	flex: 1 1 0;
	min-width: 0;
	font-size: 16px !important;
	font-weight: 700 !important;
	line-height: 1.5 !important;
	color: var(--hlp-text-strong, #1a1a2e) !important;
	margin: 0 !important;
	/* Force wrapping of long Japanese strings inside the flex item */
	white-space: normal;
	overflow-wrap: anywhere;
	word-break: break-word;
}


/* ==========================================================================
   Konna-Kata C — 3-Column Cards: Title + Description + Tag Pills
   PC: 3-column row / SP: vertical stack
   ========================================================================== */

.hlp-konna-kata--c .hlp-konna-kata__items {
	display: flex;
	gap: 16px;
	padding: 16px 0;
	align-items: stretch;
}

.hlp-konna-kata--c .hlp-konna-kata__item {
	flex: 1 1 0;
	min-width: 0;
	display: flex;
	gap: 12px;
	align-items: flex-start;
	background-color: #f7f9fc !important;
	border: 1px solid #e8edf3 !important;
	border-radius: 8px !important;
	padding: 17px 17px 17px 13px !important;
}

.hlp-konna-kata--c .hlp-konna-kata__body {
	flex: 1 1 0;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.hlp-konna-kata--c .hlp-konna-kata__title {
	font-size: 16px !important;
	font-weight: 700 !important;
	line-height: 1.5 !important;
	color: var(--hlp-primary, #1a6fc4) !important;
	margin: 0 !important;
	overflow-wrap: anywhere;
	word-break: break-word;
}

.hlp-konna-kata--c .hlp-konna-kata__desc {
	font-size: 14px !important;
	color: #555 !important;
	line-height: 1.5 !important;
	margin: 0 !important;
	overflow-wrap: anywhere;
	word-break: break-word;
}

.hlp-konna-kata--c .hlp-konna-kata__tags {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin-top: 6px;
}

.hlp-konna-kata--c .hlp-konna-kata__tag {
	background-color: var(--hlp-primary-light, #eef3fa) !important;
	color: var(--hlp-primary-dark, #0d4f96) !important;
	font-weight: 700 !important;
	font-size: 12px !important;
	line-height: 1 !important;
	padding: 4px 8px !important;
	border-radius: 100px !important;
	margin: 0 !important;
}


/* ==========================================================================
   Konna-Kata — Responsive (Mobile: 768px)
   ========================================================================== */

@media (max-width: 768px) {

	/* B: spacing */
	.hlp-konna-kata--b .hlp-konna-kata__items {
		padding: 16px;
	}

	/* C: vertical stack */
	.hlp-konna-kata--c .hlp-konna-kata__items {
		flex-direction: column;
		padding: 16px;
	}

}

/* ==========================================================================
   サービススペック表 — Service Spec Table
   ========================================================================== */

.hlp-spec {
	width: 100%;
}

.hlp-spec .wp-block-group {
	margin: 0;
	padding: 0;
}

.hlp-spec__table {
	display: flex;
	flex-direction: column;
	width: 100%;
	border-top: 1px solid #d4e2f0;
	border-left: 1px solid #d4e2f0;
}

.hlp-spec__row {
	display: flex !important;
	flex-direction: row;
	flex-wrap: nowrap !important;
	width: 100%;
	margin: 0 !important;
	gap: 0 !important;
}

.hlp-spec__row .hlp-spec__cell {
	flex: 1 1 0;
	min-width: 0;
	margin: 0 !important;
	border-right: 1px solid #d4e2f0 !important;
	border-bottom: 1px solid #d4e2f0 !important;
	font-size: 14px !important;
	line-height: 1.5 !important;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 4px;
}

.hlp-spec__row--head .hlp-spec__cell {
	background: var(--hlp-primary-light, #d8ebff) !important;
	padding: 8px 12px !important;
	font-size: 13px !important;
	font-weight: 600 !important;
	color: var(--hlp-primary-dark, #0d4f96) !important;
	letter-spacing: 0.02em;
}

.hlp-spec__row--body .hlp-spec__cell {
	background: #fff !important;
	padding: 14px 12px !important;
	font-size: 15px !important;
	flex-direction: column;
}

.hlp-spec__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 24px;
	height: 24px;
	font-size: 22px;
	line-height: 1;
	flex-shrink: 0;
}

.hlp-spec__icon--excellent {
	color: #e74c3c !important;
	font-weight: bold !important;
}

.hlp-spec__icon--good {
	color: #f5a623 !important;
}

.hlp-spec__icon--fair {
	color: #aaa !important;
}

.hlp-spec__text {
	display: inline-block;
}

.hlp-spec__stars {
	display: inline-flex;
	gap: 0;
	line-height: 1;
}

.hlp-spec__star {
	font-size: 18px;
	line-height: 1;
}

.hlp-spec__star--full  { color: #f5a623; }
.hlp-spec__star--empty { color: #ddd; }
.hlp-spec__star--half {
	background: linear-gradient(90deg, #f5a623 50%, #ddd 50%);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}

.hlp-spec__rating-num {
	font-weight: 700;
	font-size: 14px;
	color: #333;
}

@media (max-width: 1024px) {
	.hlp-spec__row--body .hlp-spec__cell {
		padding: 10px 8px;
	}
}

@media (max-width: 768px) {
	.hlp-spec__row--head .hlp-spec__cell {
		padding: 6px 6px;
		font-size: 12px;
	}
	.hlp-spec__row--body .hlp-spec__cell {
		padding: 12px 6px;
		font-size: 14px;
	}
	.hlp-spec__icon {
		width: 18px;
		height: 18px;
		font-size: 18px;
	}
}


/* ==========================================================================
   Service Spec B — label/value pair table (hlp/service-spec-b)
   Each row contains N pairs of [label cell | value cell]. Pairs per row is
   driven by `--hlp-spec-b-pairs` (set as inline style by the renderer).
   Beige label cells, white value cells, full-bordered grid.
   ========================================================================== */

.hlp-spec-b {
	width: 100%;
}

.hlp-spec-b__table {
	display: flex;
	flex-direction: column;
	width: 100%;
	border-top: 1px solid #d4e2f0;
	border-left: 1px solid #d4e2f0;
}

.hlp-spec-b__row {
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	width: 100%;
}

.hlp-spec-b__pair {
	flex: 1 1 0;
	min-width: 0;
	display: flex;
	flex-direction: row;
}

/* Label cell — matches Table A header (.hlp-spec__row--head .hlp-spec__cell) */
.hlp-spec-b__label {
	flex: 0 0 38%;
	background: var(--hlp-primary-light, #d8ebff);
	color: var(--hlp-primary-dark, #0d4f96);
	font-size: 13px;
	font-weight: 600;
	line-height: 1.45;
	letter-spacing: 0.02em;
	padding: 16px 14px;
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	border-right: 1px solid #d4e2f0;
	border-bottom: 1px solid #d4e2f0;
}

/* Value cell — white */
.hlp-spec-b__value {
	flex: 1 1 auto;
	background: #fff;
	font-size: 15px;
	line-height: 1.5;
	padding: 14px 14px;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 4px;
	text-align: center;
	border-right: 1px solid #d4e2f0;
	border-bottom: 1px solid #d4e2f0;
}

.hlp-spec-b__text {
	display: inline-block;
	max-width: 100%;
	word-break: break-word;
}

.hlp-spec-b__pair--empty .hlp-spec-b__label,
.hlp-spec-b__pair--empty .hlp-spec-b__value {
	background: transparent;
	border-right: 1px solid transparent;
}

@media (max-width: 1024px) {
	.hlp-spec-b__label {
		font-size: 13px;
		padding: 12px 10px;
	}
	.hlp-spec-b__value {
		font-size: 14px;
		padding: 12px 10px;
	}
}

/* Mobile: collapse to a single pair per row regardless of pairsPerRow. */
@media (max-width: 768px) {
	.hlp-spec-b__row {
		flex-direction: column;
	}
	.hlp-spec-b__pair {
		width: 100%;
	}
	.hlp-spec-b__label {
		flex: 0 0 35%;
		font-size: 12px;
		padding: 10px 8px;
	}
	.hlp-spec-b__value {
		font-size: 13px;
		padding: 10px 8px;
	}
}


/* ==========================================================================
   サービスランキングカード — Service Rank Card (hlp/service-rank-card)
   Rank-aware card: 1=gold, 2=silver, 3=bronze, 4+=standard.
   Contains an InnerBlocks area for nesting other patterns.
   ========================================================================== */

.hlp-rank-card {
	position: relative;
	width: 100%;
	max-width: 880px;
	margin: 0 auto;
	padding: 0 40px 48px;
	border-radius: 8px;
	border: 2px solid;
	overflow: hidden;
	display: flex;
	flex-direction: column;
	gap: var(--wp--style--block-gap, 32px);
	box-sizing: border-box;
}

/* Rank 1 — Gold */
.hlp-rank-card--1 {
	background: linear-gradient(180deg, #fff3cd 0%, #ffffff 25%);
	border-color: var(--hlp-rank-gold-border, #e0b41e);
}

/* Rank 2 — Silver */
.hlp-rank-card--2 {
	background: linear-gradient(180deg, #e7edf5 0%, #ffffff 25%);
	border-color: var(--hlp-rank-silver-border, #7c7c7c);
}

/* Rank 3 — Bronze */
.hlp-rank-card--3 {
	background: #ffffff;
	border-color: var(--hlp-rank-bronze-border, #e07c1e);
}

/* Rank 4+ — Standard (uses primary brand color for badge) */
.hlp-rank-card--4plus {
	background: #ffffff;
	border-color: var(--hlp-border-light, #e8edf3);
}

/* ── Header row: rank badge + service name ───────────────────────── */
.hlp-rank-card__head {
	position: relative;
	width: 100%;
	min-height: 80px;
	display: flex;
	align-items: center;
	gap: 24px;
	padding-top: 0;
}

/* ── Rank ribbon badge — SVG asset + overlaid number text ────────── */
.hlp-rank-card__badge {
	position: absolute;
	left: 0;
	top: 0;
	width: 64px;
	height: 72px;
	flex-shrink: 0;
	color: #ffffff;
	background-repeat: no-repeat;
	background-size: 100% 100%;
	background-position: center;
	box-sizing: border-box;
	z-index: 1;
}

.hlp-rank-card--1 .hlp-rank-card__badge {
	background-image: url("assets/rank-banner-1.svg");
}
.hlp-rank-card--2 .hlp-rank-card__badge {
	background-image: url("assets/rank-banner-2.svg");
}
.hlp-rank-card--3 .hlp-rank-card__badge {
	background-image: url("assets/rank-banner-3.svg");
}
/* Rank 4+ — uses the configured --hlp-primary color from the plugin's
   color settings page. Achieved by:
   1. Filling the badge with var(--hlp-primary) as the background color,
      with a layered "RANK" text SVG painted on top in white.
   2. Masking everything to the ribbon shape (rank-banner-shape.svg). */
/* Rank 4+ — badge filled with var(--hlp-primary) and masked to ribbon shape.
   "RANK" label and rank number are HTML overlays (see rules below). */
.hlp-rank-card--4plus .hlp-rank-card__badge {
	background-image: none;
	background-color: var(--hlp-primary, #1a6fc4);
	-webkit-mask-image: url("assets/rank-banner-shape.svg");
	mask-image: url("assets/rank-banner-shape.svg");
	-webkit-mask-size: 100% 100%;
	mask-size: 100% 100%;
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-position: center;
	mask-position: center;
}

/* "RANK" label — HTML overlay positioned at top of the badge.
   Slightly bolder, tighter tracking, and slightly larger than the
   original SVG-baked text. */
.hlp-rank-card__badge-label {
	position: absolute;
	left: 50%;
	top: 7px;
	transform: translateX(-50%);
	font-family: 'Noto Sans JP', "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Yu Gothic", YuGothic, "Meiryo", sans-serif;
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 2px;
	line-height: 1;
	color: #ffffff;
	pointer-events: none;
	white-space: nowrap;
	/* Visual tracking compensation: letter-spacing adds space after the
	   last character; nudge left by half so the optical center matches. */
	text-indent: 2px;
}

/* Number — overlaid on the SVG banner. Noto Sans JP Black 36px to match
   the SVG digit weight/size. Position tuned so the cap height aligns with
   where the SVG digits sit (between y=22 and y=49 in the 64×72 viewBox). */
.hlp-rank-card__badge-num {
	position: absolute;
	left: 50%;
	top: 22px;
	transform: translateX(-50%);
	font-family: 'Noto Sans JP', "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Yu Gothic", YuGothic, "Meiryo", sans-serif;
	font-weight: 900;
	font-size: 36px;
	line-height: 1;
	color: #ffffff;
	pointer-events: none;
}

/* ── Title (service name) wrapper ───────────────────────────────── */
.hlp-rank-card__title-wrap {
	flex: 1;
	min-width: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 16px 64px 0; /* visual symmetry: leave space for badge on left, equal on right */
	box-sizing: border-box;
}

.hlp-rank-card__name {
	margin: 0 !important;
	font-size: 26px !important;
	font-weight: 700 !important;
	line-height: 1.3 !important;
	text-align: center;
	color: #1a1a2e !important;
}

.hlp-rank-card__name-link {
	text-decoration: none !important;
	color: inherit !important;
}
.hlp-rank-card__name-link:hover .hlp-rank-card__name {
	text-decoration: underline !important;
}

/* ── Description ─────────────────────────────────────────────────── */
.hlp-rank-card__desc {
	margin: 0 !important;
	font-size: 16px !important;
	line-height: 1.5 !important;
	color: var(--hlp-text, #222) !important;
	text-align: left;
	width: 100%;
}

.hlp-rank-card__desc.has-text-align-center {
	text-align: center;
}

.hlp-rank-card__desc.has-text-align-right {
	text-align: right;
}

/* Card block alignment. The saved alignment class intentionally remains on
   the description element so existing static rank-card markup stays valid.
   Do not set text-align on .hlp-rank-card__inner here: paragraph blocks inside
   the card must keep their own WordPress alignment setting. */
.hlp-rank-card:has(.hlp-rank-card__desc.has-text-align-center) .hlp-rank-card__image-wrap {
	text-align: center;
}

.hlp-rank-card:has(.hlp-rank-card__desc.has-text-align-right) .hlp-rank-card__image-wrap {
	text-align: right;
}

.hlp-rank-card:has(.hlp-rank-card__desc.has-text-align-center) .hlp-rank-card__image-wrap {
	align-items: center;
}

.hlp-rank-card:has(.hlp-rank-card__desc.has-text-align-right) .hlp-rank-card__image-wrap {
	align-items: flex-end;
}

.hlp-rank-card:has(.hlp-rank-card__desc.has-text-align-center) .hlp-rank-card__inner > :where(.wp-block-image, figure, .wp-block-video, .wp-block-embed, .wp-block-audio, .wp-block-buttons) {
	align-self: center;
}

.hlp-rank-card:has(.hlp-rank-card__desc.has-text-align-right) .hlp-rank-card__inner > :where(.wp-block-image, figure, .wp-block-video, .wp-block-embed, .wp-block-audio, .wp-block-buttons) {
	align-self: flex-end;
}

.hlp-rank-card:has(.hlp-rank-card__desc.has-text-align-center) .hlp-rank-card__inner :where(.wp-block-image img, figure img, .wp-block-video video, .wp-block-embed iframe) {
	margin-left: auto;
	margin-right: auto;
}

.hlp-rank-card:has(.hlp-rank-card__desc.has-text-align-right) .hlp-rank-card__inner :where(.wp-block-image img, figure img, .wp-block-video video, .wp-block-embed iframe) {
	margin-left: auto;
	margin-right: 0;
}

/* ── Image / placeholder ─────────────────────────────────────────── */
.hlp-rank-card__image-wrap {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	width: 100%;
	padding: 0 50px;
	box-sizing: border-box;
	text-align: left;
}

.hlp-rank-card__image {
	width: 100%;
	max-width: 100%;
	height: auto;
	display: block;
}

.hlp-rank-card__image-placeholder {
	width: 100%;
	aspect-ratio: 238 / 158;
}

/* ── Inner content area (InnerBlocks) ────────────────────────────── */
/* Inner blocks area — separates the direct child blocks/patterns inserted
   inside the card. The edit modal controls this gap through
   --hlp-rank-card-inner-gap, leaving nested group/pattern internals alone. */
.hlp-rank-card__inner {
	display: flex;
	flex-direction: column;
	gap: var(--hlp-rank-card-inner-gap, 32px);
	margin-bottom: 16px;
	text-align: left;
	width: 100%;
}

.hlp-rank-card__inner > .hlp-heading.hlp-heading__text,
.hlp-rank-card__inner > .wp-block-heading.hlp-heading__text {
	box-sizing: border-box;
	max-width: 100%;
	width: 100%;
}

/* Editor: when the rank card is edited, useInnerBlocksProps() makes
   .hlp-rank-card__inner the real Gutenberg block-list/drop-zone surface. */
.hlp-rank-card__inner.block-editor-block-list__layout,
.hlp-rank-card__inner > .block-editor-inner-blocks > .block-editor-block-list__layout {
	display: flex;
	flex-direction: column;
	gap: var(--hlp-rank-card-inner-gap, 32px);
	width: 100%;
}
.hlp-rank-card__inner.block-editor-block-list__layout > .wp-block,
.hlp-rank-card__inner > .block-editor-block-list__layout > .wp-block,
.hlp-rank-card__inner > .wp-block {
	box-sizing: border-box;
	max-width: 100%;
	width: 100%;
}

/* ── Responsive ──────────────────────────────────────────────────── */
@media (max-width: 1024px) {
	.hlp-rank-card {
		padding: 0 24px 44px;
		gap: var(--wp--style--block-gap, 24px);
	}
	.hlp-rank-card__title-wrap {
		padding: 16px 56px 0;
	}
	.hlp-rank-card__image-wrap {
		padding: 0 24px;
	}
}

@media (max-width: 768px) {
	.hlp-rank-card {
		padding: 0 16px 40px;
		gap: var(--wp--style--block-gap, 20px);
		border-radius: 6px;
	}
	.hlp-rank-card__head {
		min-height: 64px;
		flex-direction: column;
		align-items: stretch;
		padding-top: 8px;
	}
	.hlp-rank-card__badge {
		width: 52px;
		height: 60px;
	}
	.hlp-rank-card__badge-label {
		font-size: 8px;
		letter-spacing: 1.5px;
		text-indent: 1.5px;
		top: 6px;
	}
	.hlp-rank-card__badge-num {
		font-size: 28px;
		top: 18px; /* scaled from PC's top: 22px (52/64 ≈ 0.8125) */
	}
	.hlp-rank-card__title-wrap {
		padding: 16px 0 0 60px; /* leave room for badge, name aligned left */
		min-height: 60px;
		justify-content: center;
		align-items: flex-start;
	}
	.hlp-rank-card__name {
		font-size: 18px;
		text-align: left;
	}
	.hlp-rank-card__image-wrap {
		padding: 0;
	}
	.hlp-rank-card__inner,
	.hlp-rank-card__inner.block-editor-block-list__layout,
	.hlp-rank-card__inner > .block-editor-inner-blocks > .block-editor-block-list__layout {
		gap: var(--hlp-rank-card-inner-gap, 24px);
	}
}

/* ==========================================================================
   Testimonials — horizontally scrollable testimonial cards (1.5 visible)
   Block: hlp/testimonials
   ========================================================================== */

.hlp-testimonials {
	--hlp-testi-card-bg: #f0f5fb;
	--hlp-testi-card-radius: 10px;
	--hlp-testi-card-pad: 16px;
	--hlp-testi-gap: 8px;
	/* Card width = ~63% of viewport on PC → 1 full + ~0.55 of next visible */
	--hlp-testi-card-w: 63%;
	width: 100%;
	max-width: 100%;
}

/* Full-bleed opt-in (matches hlp-logo-slider.alignfull convention). */
.hlp-testimonials.alignfull {
	width: 100vw;
	max-width: 100vw;
	margin-left: calc(-50vw + 50%);
}

.hlp-testimonials__viewport {
	overflow-x: auto;
	overflow-y: hidden;
	scrollbar-width: none; /* Firefox */
	/* Allow vertical page scroll, capture horizontal gestures for JS drag-snap */
	touch-action: pan-y;
	cursor: grab;
	-webkit-user-select: none;
	user-select: none;
	overscroll-behavior-x: contain;
}
.hlp-testimonials__viewport::-webkit-scrollbar {
	display: none;
}
.hlp-testimonials__viewport.is-dragging {
	cursor: grabbing;
	scroll-behavior: auto; /* don't fight the live drag with smooth-scroll */
}
.hlp-testimonials__viewport img {
	-webkit-user-drag: none;
}

.hlp-testimonials__track {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	gap: var(--hlp-testi-gap);
}

.hlp-testimonials__item {
	flex: 0 0 var(--hlp-testi-card-w);
	min-width: 0;
	box-sizing: border-box;
	background: var(--hlp-testi-card-bg);
	border-radius: var(--hlp-testi-card-radius);
	padding: var(--hlp-testi-card-pad);
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.hlp-testimonials__head {
	display: flex;
	gap: 8px;
	align-items: center;
}

.hlp-testimonials__avatar,
.hlp-testimonials__avatar-default {
	width: 32px;
	height: 32px;
	flex: 0 0 32px;
	display: block;
	border-radius: 4px;
	object-fit: cover;
}

.hlp-testimonials__title {
	margin: 0;
	font-size: 16px;
	font-weight: 700;
	color: var(--hlp-primary, #1a6fc4);
	line-height: 1.5;
}

.hlp-testimonials__rating {
	display: flex;
	align-items: center;
	gap: 6px;
	margin: 8px 0 4px;
	line-height: 1;
}

.hlp-testimonials__rating-label {
	font-size: 13px;
	color: #555;
	font-weight: 600;
	letter-spacing: 0.02em;
}

.hlp-testimonials__stars {
	display: inline-flex;
	gap: 0;
	line-height: 1;
}

.hlp-testimonials__star {
	font-size: 18px;
	line-height: 1;
}

.hlp-testimonials__star--full  { color: #f5a623; }
.hlp-testimonials__star--empty { color: #ddd; }
.hlp-testimonials__star--half {
	background: linear-gradient(90deg, #f5a623 50%, #ddd 50%);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}

.hlp-testimonials__rating-num {
	font-size: 13px;
	font-weight: 700;
	color: #333;
}

.hlp-testimonials__body {
	margin: 0;
	font-size: 14px;
	color: #555;
	line-height: 1.5;
}

.hlp-testimonials__dots {
	display: flex;
	gap: 6px;
	align-items: center;
	justify-content: center;
	margin-top: 12px;
}

.hlp-testimonials__dot {
	appearance: none;
	-webkit-appearance: none;
	border: 0;
	padding: 0;
	margin: 0;
	cursor: pointer;
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: #c8d3e0;
	transition: background-color 0.2s ease, width 0.2s ease, height 0.2s ease;
}
.hlp-testimonials__dot:hover {
	background: #a8b8cc;
}
.hlp-testimonials__dot.is-active {
	width: 8px;
	height: 8px;
	background: var(--hlp-primary, #1a6fc4);
}
.hlp-testimonials__dot:focus-visible {
	outline: 2px solid var(--hlp-primary, #1a6fc4);
	outline-offset: 2px;
}

/* ── Stacked layout (Pattern B) ─────────────────────────────────── */
.hlp-testimonials--stacked .hlp-testimonials__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.hlp-testimonials--stacked .hlp-testimonials__item {
	flex: 0 0 auto;
	width: 100%;
	max-width: 100%;
}

.hlp-testimonials--stacked .hlp-testimonials__item.is-hidden {
	display: none;
}

.hlp-testimonials--stacked .hlp-testimonials__toggle {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	margin: 16px auto 0;
	padding: 10px 28px;
	background: var(--hlp-primary, #1a6fc4);
	color: #fff;
	border: none;
	border-radius: 999px;
	font-size: 14px;
	font-weight: 700;
	letter-spacing: 0.04em;
	cursor: pointer;
	transition: background-color 0.2s ease, transform 0.1s ease;
}

.hlp-testimonials--stacked .hlp-testimonials__toggle:hover {
	background: var(--hlp-primary-dark, #0d4f96);
}

.hlp-testimonials--stacked .hlp-testimonials__toggle:active {
	transform: translateY(1px);
}

.hlp-testimonials--stacked .hlp-testimonials__toggle:focus-visible {
	outline: 2px solid var(--hlp-primary, #1a6fc4);
	outline-offset: 3px;
}

/* Center the toggle under the list */
.hlp-testimonials--stacked {
	display: flex;
	flex-direction: column;
	align-items: center;
}
.hlp-testimonials--stacked .hlp-testimonials__list {
	width: 100%;
}

/* Editor: in WP Gutenberg the SSR output is shown as-is, but `is-hidden`
   would mask cards under edit. Show all cards in the editor so they're
   editable; the toggle button is a no-op there. */
.editor-styles-wrapper .hlp-testimonials--stacked .hlp-testimonials__item.is-hidden {
	display: flex;
	opacity: 0.55;
}
.editor-styles-wrapper .hlp-testimonials--stacked .hlp-testimonials__toggle {
	pointer-events: none;
}

@media (max-width: 1024px) {
	.hlp-testimonials {
		--hlp-testi-card-w: 70%;
	}
}

@media (max-width: 768px) {
	.hlp-testimonials {
		--hlp-testi-card-w: 80%;
	}
}

/* ==========================================================================
   キャラクター吹き出し — Speech Bubble
   ========================================================================== */

.hlp-speech-bubble {
	display: flex;
	align-items: flex-start;
	gap: 8px;
	width: 100%;
	margin: 0 auto;
	box-sizing: border-box;
}

.hlp-speech-bubble * {
	box-sizing: border-box;
}

.hlp-speech-bubble__character-col {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 8px;
	flex-shrink: 0;
	width: 80px;
}

.hlp-speech-bubble__avatar {
	position: relative;
	width: 72px;
	height: 72px;
	border-radius: 50%;
	background: #fff;
	border: 2px solid #e0e0e0;
	overflow: hidden;
	display: flex;
	align-items: center;
	justify-content: center;
}

.hlp-speech-bubble__avatar-img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
}

.hlp-speech-bubble__name {
	font-size: 12px;
	font-weight: 500;
	line-height: 1.4;
	text-align: center;
	margin: 0;
	word-break: keep-all;
	overflow-wrap: anywhere;
}

.hlp-speech-bubble__bubble {
	position: relative;
	flex: 1 1 0;
	min-width: 0;
	background: #fff;
	border: 2px solid #e0e0e0;
	border-radius: 8px;
	padding: 16px;
	display: flex;
	flex-direction: column;
	gap: 8px;
	margin-left: 6px;
}

/* Speech bubble arrow — light gray border layer */
.hlp-speech-bubble__bubble::before {
	content: "";
	position: absolute;
	left: -8px;
	top: 24px;
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 6px 8px 6px 0;
	border-color: transparent #e0e0e0 transparent transparent;
}

/* Speech bubble arrow — white fill layer (overlays border) */
.hlp-speech-bubble__bubble::after {
	content: "";
	position: absolute;
	left: -5px;
	top: 24px;
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 6px 8px 6px 0;
	border-color: transparent #fff transparent transparent;
}

/* When name is shown, anchor arrow near top of bubble (matches casual variant in design) */
.hlp-speech-bubble--has-name .hlp-speech-bubble__bubble::before,
.hlp-speech-bubble--has-name .hlp-speech-bubble__bubble::after {
	top: 24px;
}

.hlp-speech-bubble__heading {
	margin: 0;
	font-size: 16px;
	font-weight: 700;
	line-height: 1.5;
}

.hlp-speech-bubble__highlight {
	color: var(--hlp-primary, #1a6fc4);
}

.hlp-speech-bubble__image-wrap {
	width: 100%;
	border-radius: 4px;
	overflow: hidden;
	background: #f0f0f0;
	aspect-ratio: 450 / 342;
}

.hlp-speech-bubble__image {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.hlp-speech-bubble__body {
	margin: 0;
	font-size: 16px;
	line-height: 1.5;
}

@media (max-width: 768px) {
	.hlp-speech-bubble__character-col {
		width: 64px;
	}
	.hlp-speech-bubble__avatar {
		width: 56px;
		height: 56px;
	}
	.hlp-speech-bubble__name {
		font-size: 11px;
	}
	.hlp-speech-bubble__bubble {
		padding: 12px;
	}
	.hlp-speech-bubble__heading,
	.hlp-speech-bubble__body {
		font-size: 14px;
	}
}


/* ==========================================================================
   Button Component System (CTA buttons)
   24 patterns: 2 colors (primary | secondary) × 2 styles (fill | outline)
                × 2 shapes (round | square) × 2 sizes (default | sm),
                with fill variants doubled for popout style (callout | bubble)
   States (hover, active, focus, disabled) handled automatically via CSS.
   Secondary color is set independently via HLP カラー設定; only the darker
   and shadow state variants are derived from --hlp-secondary at runtime.
   ========================================================================== */

/* --- Static fallbacks for darker/shadow (older browsers without relative-color syntax) --- */
.hlp-btn-group,
.hlp-btn,
.hlp-btn-popout {
	--hlp-secondary-darker: #d4881a;
	--hlp-secondary-shadow: #c07d0e;
}

/* --- Derived state variants — auto-darkened from whatever secondary the user picked --- */
@supports (color: hsl(from red h s l)) {
	.hlp-btn-group,
	.hlp-btn,
	.hlp-btn-popout {
		--hlp-secondary-darker: hsl(from var(--hlp-secondary, #f5a623) h s calc(l - 8%));
		--hlp-secondary-shadow: hsl(from var(--hlp-secondary, #f5a623) h s calc(l - 16%));
	}
}

/* --- Shared button tokens --- */
.hlp-btn-group,
.hlp-btn,
.hlp-btn-popout {
	--hlp-btn-primary: var(--hlp-primary, #1a6fc4);
	--hlp-btn-primary-dark: var(--hlp-primary-dark, #0d4f96);
	--hlp-btn-primary-darker: var(--hlp-primary-darker, #093d75);
	--hlp-btn-primary-light: var(--hlp-primary-light, #d8ebff);
	--hlp-btn-disabled: var(--hlp-disabled, #c6cdd5);
	--hlp-btn-caption: var(--hlp-text-muted, #8b959f);
}

/* --- Render wrapper: always centers the button pattern in its parent. --- */
.hlp-btn-wrap {
	display: flex;
	justify-content: center;
	width: 100%;
	box-sizing: border-box;
}

/* --- Group wrapper (always wraps the button — both fill and outline) --- */
/* fit-content keeps the actual button group hugged to its text/content. */
.hlp-btn-group {
	display: flex;
	flex-direction: column;
	align-items: center;
	flex: 0 1 auto;
	gap: 2px;
	max-width: 100%;
	width: fit-content;
	margin: 0 auto;
}

/* --- Pop-out comment: shared base (both callout and bubble) --- */
.hlp-btn-popout {
	display: inline-block;
	font-weight: 700 !important;
	font-size: 14px !important;
	line-height: 1.2 !important;
	white-space: nowrap;
	margin: 0 !important;
	padding: 0 !important;
	will-change: transform;
	animation: hlp-btn-bob 1.3s infinite;
}

/* --- Pop-out: spike curve (cursive-i shape) --- */
/* Fast rise to peak → brief hold → fast descent → soft landing. Total 1.3s. */
@keyframes hlp-btn-bob {
	0%   { transform: translateY(0);    animation-timing-function: cubic-bezier(.18, .9, .32, 1); }
	18%  { transform: translateY(-9px); animation-timing-function: linear; }
	26%  { transform: translateY(-9px); animation-timing-function: cubic-bezier(.55, .05, .85, .5); }
	55%  { transform: translateY(-2px); animation-timing-function: cubic-bezier(.25, 0, .3, 1); }
	100% { transform: translateY(0); }
}

/* --- Pop-out variant 1: callout (chevron text — default) --- */
.hlp-btn-group--primary .hlp-btn-popout,
.hlp-btn-group--primary .hlp-btn-popout--callout {
	color: var(--hlp-btn-primary);
	background: transparent;
}

.hlp-btn-group--secondary .hlp-btn-popout,
.hlp-btn-group--secondary .hlp-btn-popout--callout {
	color: var(--hlp-secondary);
	background: transparent;
}

/* --- Pop-out variant 2: bubble (filled speech bubble with downward tail) --- */
.hlp-btn-popout--bubble {
	color: #fff;
	padding: 6px 18px !important;
	border-radius: 6px;
	margin-bottom: 6px !important;
	position: relative;
}

.hlp-btn-popout--bubble::after {
	content: "";
	position: absolute;
	top: 100%;
	left: 50%;
	width: 0;
	height: 0;
	border-left: 8px solid transparent;
	border-right: 8px solid transparent;
	border-top: 8px solid currentColor;
	transform: translateX(-50%);
	/* Fallback for browsers without filter chain — tail uses currentColor */
	color: var(--hlp-bubble-bg, var(--hlp-btn-primary));
}

.hlp-btn-group--primary .hlp-btn-popout--bubble {
	--hlp-bubble-bg: var(--hlp-btn-primary);
	background: var(--hlp-btn-primary);
}

.hlp-btn-group--secondary .hlp-btn-popout--bubble {
	--hlp-bubble-bg: var(--hlp-secondary);
	background: var(--hlp-secondary);
}

/* Bubble text stays white in both color schemes (overrides callout color rule above) */
.hlp-btn-group--primary .hlp-btn-popout--bubble,
.hlp-btn-group--secondary .hlp-btn-popout--bubble {
	color: #fff;
}

/* --- Caption (sub-text below button) --- */
/* Extra top margin pushes the caption away from the button — popout stays tight */
.hlp-btn-caption {
	display: inline-block;
	font-size: 12px !important;
	line-height: 1.2 !important;
	color: var(--hlp-btn-caption) !important;
	margin: 6px 0 0 0 !important;
	white-space: nowrap;
}

/* --- Base button --- */
/* Width is auto so the button hugs its content rather than stretching */
.hlp-btn {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 12px;
	width: auto;
	max-width: 100%;
	box-sizing: border-box;
	text-decoration: none;
	font-family: inherit;
	font-weight: 700;
	text-align: center;
	cursor: pointer;
	border: none;
	background: transparent;
	overflow: hidden;
	isolation: isolate;
	transition:
		transform 0.12s ease-out,
		background-color 0.15s ease-out,
		box-shadow 0.12s ease-out,
		border-color 0.15s ease-out,
		color 0.15s ease-out;
}

.hlp-btn__label {
	position: relative;
	z-index: 2;
	white-space: nowrap;
}

.hlp-btn__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	position: relative;
	z-index: 2;
	line-height: 1;
}

/* --- Material Symbols icons used inside buttons --- */
.material-symbols-rounded {
	font-family: 'Material Symbols Rounded';
	font-weight: normal;
	font-style: normal;
	font-size: 24px;
	line-height: 1;
	letter-spacing: normal;
	text-transform: none;
	display: inline-block;
	white-space: nowrap;
	word-wrap: normal;
	direction: ltr;
	font-feature-settings: 'liga';
	-webkit-font-feature-settings: 'liga';
	-webkit-font-smoothing: antialiased;
	font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
	user-select: none;
}

.hlp-btn .material-symbols-rounded {
	font-size: 24px;
	font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
}

.hlp-btn--sm .material-symbols-rounded {
	font-size: 20px;
	font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 20;
}

/* --- Shape modifiers --- */
.hlp-btn--round {
	border-radius: 9999px;
}

.hlp-btn--square {
	border-radius: var(--hlp-radius, 8px);
}

/* --- Fill: base (color-agnostic) --- */
/* Selectors are doubled (.hlp-btn.hlp-btn--fill) to win specificity over
   the WP block editor's default link styles inside .editor-styles-wrapper. */
.hlp-btn.hlp-btn--fill {
	color: #fff;
	font-size: 18px;
	padding: 16px 32px;
	min-height: 56px;
	box-shadow: 0 4px 0 0 var(--hlp-btn-shadow-color);
	transform: translateY(0);
}

.hlp-btn--fill.hlp-btn--primary {
	--hlp-btn-bg-from: var(--hlp-btn-primary);
	--hlp-btn-bg-to: var(--hlp-btn-primary-dark);
	--hlp-btn-bg-active: var(--hlp-btn-primary-darker);
	--hlp-btn-shadow-color: var(--hlp-btn-primary-darker);
}

.hlp-btn--fill.hlp-btn--secondary {
	--hlp-btn-bg-from: var(--hlp-secondary);
	--hlp-btn-bg-to: var(--hlp-secondary-dark);
	--hlp-btn-bg-active: var(--hlp-secondary-darker);
	--hlp-btn-shadow-color: var(--hlp-secondary-shadow);
}

/* --- Fill: shape-specific gradients --- */
/* Round: smooth top-to-bottom gradient */
.hlp-btn--fill.hlp-btn--round {
	background: linear-gradient(
		180deg,
		var(--hlp-btn-bg-from),
		var(--hlp-btn-bg-to)
	);
}

/* Square: 3-stop "groove" gradient — solid top, hard mid-line dark, fade back */
.hlp-btn--fill.hlp-btn--square {
	background: linear-gradient(
		180deg,
		var(--hlp-btn-bg-from) 50%,
		var(--hlp-btn-bg-to) 50%,
		var(--hlp-btn-bg-from) 87%
	);
}

/* --- Fill: shine (default state only, slight backslash angle) --- */
.hlp-btn--fill::before {
	content: "";
	position: absolute;
	top: -10%;
	bottom: -10%;
	left: 0;
	width: 55%;
	background: linear-gradient(
		80deg,
		rgba(255, 255, 255, 0) 30%,
		rgba(255, 255, 255, 0.55) 50%,
		rgba(255, 255, 255, 0) 70%
	);
	pointer-events: none;
	transform: translateX(-200%);
	animation: hlp-btn-shine 3.5s ease-out infinite;
	z-index: 1;
	will-change: transform;
}

@keyframes hlp-btn-shine {
	0%   { transform: translateX(-200%); }
	9%   { transform: translateX(300%); }
	100% { transform: translateX(300%); }
}

.hlp-btn--fill:hover::before,
.hlp-btn--fill:active::before,
.hlp-btn--fill:focus-visible::before,
.hlp-btn--fill[disabled]::before,
.hlp-btn--fill[aria-disabled="true"]::before {
	display: none;
}

/* --- Fill: states --- */
.hlp-btn.hlp-btn--fill:hover {
	background: var(--hlp-btn-bg-from);
	color: #fff;
	transform: translateY(4px);
	box-shadow: 0 0 0 0 transparent;
}

.hlp-btn--fill:active {
	background: var(--hlp-btn-bg-active);
	transform: translateY(4px);
	box-shadow: 0 0 0 0 transparent;
}

.hlp-btn--fill:focus-visible {
	outline: none;
	background: var(--hlp-btn-bg-active);
	transform: translateY(4px);
	box-shadow:
		0 0 0 0 transparent,
		inset 0 0 0 2px var(--hlp-btn-bg-from);
}

.hlp-btn--fill[disabled],
.hlp-btn--fill[aria-disabled="true"] {
	background: var(--hlp-btn-disabled);
	transform: translateY(4px);
	box-shadow: 0 0 0 0 transparent;
	cursor: not-allowed;
	pointer-events: none;
}

.hlp-btn--fill[disabled] .hlp-btn__label,
.hlp-btn--fill[disabled] .hlp-btn__icon,
.hlp-btn--fill[aria-disabled="true"] .hlp-btn__label,
.hlp-btn--fill[aria-disabled="true"] .hlp-btn__icon {
	opacity: 0.6;
}

/* --- Outline: base --- */
.hlp-btn--outline {
	font-size: 18px;
	padding: 16px 32px;
	min-height: 60px;
	border: 2px solid currentColor;
	background: transparent;
}

.hlp-btn--outline.hlp-btn--primary {
	color: var(--hlp-btn-primary);
}

.hlp-btn.hlp-btn--outline.hlp-btn--primary:hover {
	background: var(--hlp-btn-primary);
	color: #fff;
}

.hlp-btn--outline.hlp-btn--primary:active {
	background: var(--hlp-btn-primary-light);
	color: var(--hlp-btn-primary-darker);
	border-color: var(--hlp-btn-primary-darker);
}

.hlp-btn--outline.hlp-btn--primary:focus-visible {
	outline: 2px solid var(--hlp-btn-primary);
	outline-offset: 2px;
}

.hlp-btn--outline.hlp-btn--secondary {
	color: var(--hlp-secondary-darker);
}

.hlp-btn.hlp-btn--outline.hlp-btn--secondary:hover {
	background: var(--hlp-secondary);
	color: #fff;
}

.hlp-btn--outline.hlp-btn--secondary:active {
	background: var(--hlp-secondary-light);
	color: var(--hlp-secondary-shadow);
	border-color: var(--hlp-secondary-shadow);
}

.hlp-btn--outline.hlp-btn--secondary:focus-visible {
	outline: 2px solid var(--hlp-secondary-darker);
	outline-offset: 2px;
}

.hlp-btn--outline[disabled],
.hlp-btn--outline[aria-disabled="true"] {
	color: var(--hlp-btn-disabled);
	border-color: var(--hlp-btn-disabled);
	background: transparent;
	cursor: not-allowed;
	pointer-events: none;
}

/* --- Size: Small modifier --- */
.hlp-btn--sm.hlp-btn--fill {
	font-size: 16px;
	padding: 8px 12px;
	min-height: 44px;
	box-shadow: 0 3px 0 0 var(--hlp-btn-shadow-color);
}

.hlp-btn--sm.hlp-btn--fill:hover,
.hlp-btn--sm.hlp-btn--fill:active,
.hlp-btn--sm.hlp-btn--fill:focus-visible,
.hlp-btn--sm.hlp-btn--fill[disabled],
.hlp-btn--sm.hlp-btn--fill[aria-disabled="true"] {
	transform: translateY(3px);
}

.hlp-btn--sm.hlp-btn--outline {
	font-size: 16px;
	padding: 8px 12px;
	min-height: 44px;
}


/* --- Disabled popout / caption color --- */
.hlp-btn-group:has(.hlp-btn[disabled]) .hlp-btn-popout,
.hlp-btn-group:has(.hlp-btn[aria-disabled="true"]) .hlp-btn-popout,
.hlp-btn-group:has(.hlp-btn[disabled]) .hlp-btn-caption,
.hlp-btn-group:has(.hlp-btn[aria-disabled="true"]) .hlp-btn-caption {
	color: var(--hlp-btn-disabled);
	background: transparent;
	animation: none;
}

.hlp-btn-group:has(.hlp-btn[disabled]) .hlp-btn-popout--bubble,
.hlp-btn-group:has(.hlp-btn[aria-disabled="true"]) .hlp-btn-popout--bubble {
	background: var(--hlp-btn-disabled);
	color: #fff;
	--hlp-bubble-bg: var(--hlp-btn-disabled);
}

/* --- Reduced motion --- */
@media (prefers-reduced-motion: reduce) {
	.hlp-btn-popout,
	.hlp-btn--fill::before {
		animation: none;
	}
	.hlp-btn--fill::before {
		display: none;
	}
}

/* --- Responsive --- */
@media (max-width: 480px) {
	.hlp-btn--fill,
	.hlp-btn--outline {
		padding-left: 16px;
		padding-right: 16px;
	}
}