/* WordPress integration adjustments for the approved renewal reference. */
body.hb-v2-page {
	min-width: 320px;
	overflow-x: hidden;
	line-break: strict;
	word-break: normal;
	overflow-wrap: break-word;
}

/* Center the statement copy columns vertically on desktop only. */
@media screen and (min-width: 981px) {
	body.hb-v2-page .statement-body {
		align-items: center;
	}

	body.hb-v2-page .about-page .philosophy-block > div {
		grid-template-columns: 1fr;
		gap: 24px;
	}

	body.hb-v2-page .about-page .philosophy-block > div > * {
		grid-column: 1;
		text-align: left;
	}
}

/* Keep the TOP access teaser useful with a responsive embedded map. */
@media screen and (min-width: 981px) {
	body.hb-v2-page .access-teaser {
		display: grid;
		grid-template-columns: minmax(0, 1fr) minmax(240px, .72fr) auto;
		align-items: end;
	}

	body.hb-v2-page .access-teaser-map iframe {
		display: block;
		width: 100%;
		height: 210px;
		border: 0;
	}
}

@media screen and (max-width: 980px) {
	body.hb-v2-page .access-teaser-map {
		width: 100%;
	}

	body.hb-v2-page .access-teaser-map iframe {
		display: block;
		width: 100%;
		height: 240px;
		border: 0;
	}
}

.hb-v2-page .hb-kinena-mobile-break {
	display: none;
}

@media screen and (max-width: 620px) {
	body.hb-v2-page .hb-kinena-mobile-break {
		display: block;
	}
}

/*
 * Keep Japanese phrases together where supported. Headings use balanced
 * wrapping; longer copy uses higher-quality wrapping to avoid short orphans.
 * Unsupported values are ignored and fall back to the declarations above.
 */
body.hb-v2-page {
	word-break: auto-phrase;
}

body.hb-v2-page :where(h1, h2, h3, summary, .quick-link strong, .button, .text-link, .header-cta) {
	line-break: strict;
	word-break: auto-phrase;
	overflow-wrap: normal;
	text-wrap: balance;
}

body.hb-v2-page :where(p, li, dd, figcaption) {
	text-wrap: pretty;
}

body.hb-v2-page.admin-bar .site-header {
	top: 32px;
}

body.hb-v2-page a:focus-visible,
body.hb-v2-page summary:focus-visible,
body.hb-v2-page button:focus-visible {
	outline: 3px solid var(--lime);
	outline-offset: 4px;
}

body.hb-v2-page .site-header a,
body.hb-v2-page .site-footer a,
body.hb-v2-page main a {
	text-decoration: none;
}

body.hb-v2-page .source-notice {
	font-size: 13px;
}

.hb-people-mobile-break {
	display: none;
}

@media screen and (max-width: 620px) {
	.hb-people-mobile-break {
		display: block;
	}
}

/* The parent SWELL content wrapper must not constrain the renewal layout. */
@media screen and (max-width: 620px) {
	body.hb-v2-page,
	body.hb-v2-page #content,
	body.hb-v2-page .l-content,
	body.hb-v2-page .l-mainContent,
	body.hb-v2-page .post_content,
	body.hb-v2-page main {
		width: 100%;
		max-width: none;
		min-width: 0;
		margin-right: 0;
		margin-left: 0;
		padding-right: 0;
		padding-left: 0;
	}

	body.hb-v2-page {
		overflow-x: clip;
	}

	body.hb-v2-page main,
	body.hb-v2-page .site-footer {
		width: 100vw;
		max-width: 100vw;
		margin-right: calc(50% - 50vw);
		margin-left: calc(50% - 50vw);
	}

	/* Keep body modules within the shared site gutter; only their inner copy may fill them. */
	body.hb-v2-page .service-grid,
	body.hb-v2-page .service-detail-grid,
	body.hb-v2-page .step-list,
	body.hb-v2-page .concern-grid,
	body.hb-v2-page .three-points,
	body.hb-v2-page .value-grid,
	body.hb-v2-page .team-grid,
	body.hb-v2-page .fit-list,
	body.hb-v2-page .metric-strip,
	body.hb-v2-page .culture-words,
	body.hb-v2-page .kinena-space-grid,
	body.hb-v2-page .kinena-audience-grid,
	body.hb-v2-page .kinena-wide-image,
	body.hb-v2-page .kinena-supporters__project,
	body.hb-v2-page .kinena-supporters__list,
	body.hb-v2-page .kinena-sponsor-grid,
	body.hb-v2-page .price-stack,
	body.hb-v2-page .price-examples,
	body.hb-v2-page .table-wrap,
	body.hb-v2-page .cafe-menu,
	body.hb-v2-page .flow-list,
	body.hb-v2-page .faq-list,
	body.hb-v2-page .menu-lines,
	body.hb-v2-page .company-list,
	body.hb-v2-page .access-list,
	body.hb-v2-page .access-map,
	body.hb-v2-page .hours-table-wrap,
	body.hb-v2-page .recruit-vision-flow,
	body.hb-v2-page .recruit-work-grid,
	body.hb-v2-page .growth-flow {
		width: 100%;
		max-width: none;
		min-width: 0;
		margin-right: 0;
		margin-left: 0;
	}

	body.hb-v2-page .kinena-wide-image {
		margin-top: 48px;
		margin-bottom: 24px;
	}

	body.hb-v2-page .hours-table-wrap {
		overflow-x: visible;
	}
}

/* Make every official LINE destination recognizable across the renewal site. */
body.hb-v2-page a[href^="https://lin.ee/"] {
	background: #06c755 !important;
	border-color: #06c755 !important;
	color: #073d1b !important;
	font-weight: 700;
}

body.hb-v2-page a[href^="https://lin.ee/"]::before {
	content: "LINE";
	background: #fff;
	border-radius: 4px;
	color: #057a32;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 44px;
	height: 26px;
	padding: 0 7px;
	font-family: Arial, sans-serif;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.02em;
	line-height: 1;
}

body.hb-v2-page a[href^="https://lin.ee/"]:hover {
	background: #05b84c !important;
	border-color: #05b84c !important;
}

body.hb-v2-page .header-cta[href^="https://lin.ee/"] {
	display: inline-flex;
	align-items: center;
	gap: 10px;
}

/* Quiet visual cues for choice cards; copy remains the primary element. */
body.hb-v2-page .choice-icon {
	--hb-icon: none;
	display: inline-block;
	flex: 0 0 auto;
	width: 28px;
	height: 28px;
	background-color: currentColor;
	-webkit-mask: var(--hb-icon) center / contain no-repeat;
	mask: var(--hb-icon) center / contain no-repeat;
}

body.hb-v2-page .icon-heart-pulse { --hb-icon: url("../icons/lucide/heart-pulse.svg"); }
body.hb-v2-page .icon-dumbbell { --hb-icon: url("../icons/lucide/dumbbell.svg"); }
body.hb-v2-page .icon-badge-yen { --hb-icon: url("../icons/lucide/badge-japanese-yen.svg"); }
body.hb-v2-page .icon-map-pin { --hb-icon: url("../icons/lucide/map-pin.svg"); }
body.hb-v2-page .icon-hand-heart { --hb-icon: url("../icons/lucide/hand-heart.svg"); }
body.hb-v2-page .icon-person-standing { --hb-icon: url("../icons/lucide/person-standing.svg"); }
body.hb-v2-page .icon-coffee { --hb-icon: url("../icons/lucide/coffee.svg"); }

body.hb-v2-page .quick-link {
	grid-template-columns: auto minmax(0, 1fr) auto;
}

body.hb-v2-page .quick-link strong {
	min-width: 0;
}

body.hb-v2-page .quick-link .choice-icon {
	width: 25px;
	height: 25px;
	color: var(--lime);
	opacity: 0.9;
}

body.hb-v2-page .service-content > .choice-icon {
	width: 32px;
	height: 32px;
	color: var(--teal);
	margin-bottom: 18px;
}

body.hb-v2-page .first-steps .partnership-steps li::before {
	content: "";
	display: block;
	flex: 0 0 auto;
	width: 31px;
	height: 31px;
	background-color: var(--teal);
	margin-top: 22px;
	-webkit-mask: var(--hb-step-icon) center / contain no-repeat;
	mask: var(--hb-step-icon) center / contain no-repeat;
}

body.hb-v2-page .first-steps .partnership-steps li:nth-child(1) { --hb-step-icon: url("../icons/lucide/search-check.svg"); }
body.hb-v2-page .first-steps .partnership-steps li:nth-child(2) { --hb-step-icon: url("../icons/lucide/flag.svg"); }
body.hb-v2-page .first-steps .partnership-steps li:nth-child(3) { --hb-step-icon: url("../icons/lucide/route.svg"); }
body.hb-v2-page .first-steps .partnership-steps li:nth-child(4) { --hb-step-icon: url("../icons/lucide/refresh-cw.svg"); }

body.hb-v2-page .first-steps .partnership-steps strong {
	margin: 16px 0 auto;
}


/* KINE-NA: present HONEST BODY's community role before its facilities. */
.kinena-home {
	background: var(--teal-dark);
	color: #fff;
	display: grid;
	grid-template-columns: minmax(360px, 0.92fr) minmax(0, 1.08fr);
	margin-top: clamp(36px, 4.5vw, 72px);
}

.kinena-home__image {
	grid-column: 2;
	grid-row: 1;
}

.kinena-home__image {
	min-height: 620px;
}

.kinena-home__image img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.kinena-home__copy {
	grid-column: 1;
	grid-row: 1;
	padding: clamp(64px, 8vw, 128px) clamp(32px, 7vw, 108px);
	display: flex;
	flex-direction: column;
	justify-content: center;
}

.kinena-home__tagline {
	color: var(--lime);
	font-size: clamp(20px, 2vw, 28px);
	font-weight: 700;
	margin: 26px 0 12px;
}

.kinena-home h2 {
	font-size: clamp(38px, 4.8vw, 70px);
	font-weight: 700;
	line-height: 1.2;
	letter-spacing: -0.04em;
}

.kinena-home__copy > p:not(.eyebrow):not(.kinena-home__tagline) {
	color: #d9e4e2;
	font-size: 16px;
	line-height: 2;
	margin: 32px 0;
}

.kinena-home .button {
	align-self: flex-start;
}

.kinena-hero__lead {
	color: var(--teal-dark);
	font-size: clamp(19px, 2.2vw, 28px) !important;
	font-weight: 700;
}

.kinena-role__statement {
	border-top: 1px solid var(--ink);
	border-bottom: 1px solid var(--ink);
	max-width: 1120px;
	margin: 70px auto 0;
	padding: 42px 0;
	font-size: clamp(24px, 3.1vw, 44px);
	font-weight: 700;
	line-height: 1.55;
}

.kinena-supporters {
	background: var(--cream);
}

.kinena-supporters__project {
	background: var(--white);
	border-left: 6px solid var(--teal);
	align-items: end;
	gap: 42px;
	margin-top: 56px;
	padding: clamp(30px, 4vw, 54px);
	display: flex;
	justify-content: space-between;
}

.kinena-supporters__project h3 {
	font-size: clamp(24px, 3vw, 38px);
	line-height: 1.4;
	margin: 12px 0 18px;
}

.kinena-supporters__project p:not(.eyebrow) {
	color: var(--ink-2);
	line-height: 1.9;
	margin: 0;
	max-width: 760px;
}

.kinena-supporters__project .button {
	flex: none;
}

.kinena-supporters__list {
	display: grid;
	grid-template-columns: 1fr 1fr;
	border-top: 1px solid var(--ink);
	border-left: 1px solid var(--ink);
	margin-top: 56px;
}

.kinena-supporters__group {
	border-right: 1px solid var(--ink);
	border-bottom: 1px solid var(--ink);
	padding: clamp(28px, 4vw, 52px);
}

.kinena-supporters__group--individual,
.kinena-supporters__group--corporate {
	grid-column: 1 / -1;
}

.kinena-supporters__group h3 {
	font-size: clamp(26px, 3vw, 40px);
	margin: 14px 0 26px;
}

.kinena-supporters__group ul {
	border-top: 1px solid var(--line);
	list-style: none;
	margin: 0;
	padding: 0;
}

.kinena-supporters__group li {
	border-bottom: 1px solid var(--line);
	font-size: 16px;
	line-height: 1.6;
	padding: 14px 0;
}

.kinena-supporters__group--individual ul {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	column-gap: 22px;
}

.kinena-sponsor-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 14px;
}

.kinena-sponsor-card {
	background: var(--white);
	min-width: 0;
}

.kinena-sponsor-card a {
	color: inherit;
	display: block;
	height: 100%;
	padding-bottom: 22px;
	text-decoration: none;
}

.kinena-sponsor-card img {
	display: block;
	width: 100%;
	height: 220px;
	object-fit: contain;
	background: #fff;
	border-bottom: 1px solid var(--line);
}

.kinena-sponsor-card span,
.kinena-sponsor-card h4,
.kinena-sponsor-card p {
	display: block;
	margin-left: 22px;
	margin-right: 22px;
}

.kinena-sponsor-card span {
	color: var(--teal);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .08em;
	margin-top: 18px;
}

.kinena-sponsor-card h4 {
	font-size: 20px;
	line-height: 1.45;
	margin-top: 8px;
	margin-bottom: 4px;
}

.kinena-sponsor-card p {
	color: var(--ink-2);
	font-size: 14px;
	margin-top: 0;
}

.kinena-sponsor-card a:hover h4 {
	color: var(--teal);
}

.kinena-space-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	border-top: 1px solid var(--ink);
	border-left: 1px solid var(--ink);
}

.kinena-space-grid article {
	min-height: 310px;
	padding: 30px;
	border-right: 1px solid var(--ink);
	border-bottom: 1px solid var(--ink);
	display: flex;
	flex-direction: column;
}

.kinena-space-grid span {
	color: var(--teal);
	font-family: Arial, sans-serif;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.14em;
}

.kinena-space-grid h3 {
	margin-top: auto;
	font-size: 23px;
	line-height: 1.45;
}

.kinena-space-grid p {
	color: var(--ink-2);
	font-size: 14px;
	line-height: 1.85;
	margin: 16px 0 0;
}

.kinena-wide-image {
	margin: 70px 0 24px;
}

/* 枠の高さを写真の比率から切り離す。3/2は従来の見え方（1223px幅で620px、
   646px幅で428px）をほぼそのまま再現する値。 */
.kinena-wide-image {
	width: 100%;
	aspect-ratio: 3 / 2;
	max-height: 620px;
}

.kinena-wide-image img {
	display: block;
	width: 100%;
	object-fit: cover;
}

.kinena-audience-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 14px;
}

.kinena-audience-grid article {
	background: var(--cream);
	padding: clamp(32px, 4vw, 60px);
}

.kinena-audience-grid h3 {
	font-size: clamp(26px, 3vw, 38px);
	margin: 54px 0 20px;
}

.kinena-audience-grid article > p:last-child {
	color: var(--ink-2);
	line-height: 1.95;
}

@media screen and (max-width: 980px) {
	.kinena-home {
		grid-template-columns: 1fr;
	}

	.kinena-home__image,
	.kinena-home__copy {
		grid-column: auto;
		grid-row: auto;
	}

	.kinena-home__image {
		min-height: 0;
		aspect-ratio: 16 / 10;
	}

	.kinena-space-grid {
		grid-template-columns: 1fr 1fr;
	}

	.kinena-supporters__project {
		align-items: flex-start;
		flex-direction: column;
	}

	.kinena-supporters__list {
		grid-template-columns: 1fr;
	}

	.kinena-sponsor-grid {
		grid-template-columns: 1fr 1fr;
	}

	.kinena-supporters__group--individual ul {
		grid-template-columns: 1fr;
	}
}

@media screen and (max-width: 620px) {
	.kinena-sponsor-grid {
		grid-template-columns: 1fr;
	}

	.kinena-sponsor-card img {
		height: auto;
		aspect-ratio: 1.35;
	}
}

@media screen and (max-width: 620px) {
	body.hb-v2-page .quick-link {
		grid-template-columns: 30px minmax(0, 1fr) auto;
	}

	body.hb-v2-page .hb-mobile-line {
		display: block;
		white-space: nowrap;
	}

	body.hb-v2-page .hb-desktop-break {
		display: none;
	}

	body.hb-v2-page :where(.section-head h2, .price-copy h2, .people-copy h2, .access-teaser h2) {
		font-size: clamp(31px, 9.5vw, 38px);
	}

	.kinena-home__copy {
		padding: 56px 24px 64px;
	}

	.kinena-home h2 {
		font-size: clamp(31px, 9.5vw, 38px);
	}

	.kinena-role__statement {
		margin-top: 48px;
		padding: 30px 0;
		font-size: 23px;
	}

	.kinena-space-grid,
	.kinena-audience-grid {
		grid-template-columns: 1fr;
	}

	.kinena-space-grid article {
		min-height: 250px;
		padding: 26px;
	}

	.kinena-wide-image {
		margin-top: 48px;
	}
}

/*
 * Simple palette: warm white, beige, orange, and brown only for readable type.
 * The official LINE destination keeps its service color below.
 */
:root {
	--ink: #5c4638;
	--ink-2: #6b5547;
	--teal: #a34318;
	--teal-dark: #8f3614;
	--lime: #f7b16d;
	--cream: #f5e5d1;
	--paper: #fffdf9;
	--line: #e7c9aa;
	--white: #fff;
}

body.hb-v2-page .site-header {
	background: #fffdf9f2;
	border-bottom-color: #5c46381f;
}

body.hb-v2-page .site-footer {
	background: var(--paper);
	border-top: 4px solid var(--lime);
	color: var(--ink);
}

body.hb-v2-page .footer-main p {
	color: var(--ink-2);
}

body.hb-v2-page .footer-main > div:first-child > p {
	margin: 22px 0 0;
}

body.hb-v2-page .footer-bottom {
	border-top-color: var(--line);
	color: var(--ink-2);
}

body.hb-v2-page .people-copy > p:not(.eyebrow),
body.hb-v2-page .page-hero-dark .page-hero-copy > p:last-child,
body.hb-v2-page .dark-block .section-intro-text p,
body.hb-v2-page .price-table-card.featured p:not(.mini-label),
body.hb-v2-page .image-text-block p:not(.eyebrow),
body.hb-v2-page .recruit-vision-flow p {
	color: #fff1e5;
}

body.hb-v2-page .cta-band p:not(.eyebrow),
body.hb-v2-page .story-block p:not(.eyebrow),
body.hb-v2-page .price-copy > p:not(.eyebrow),
body.hb-v2-page .kinena-home__copy > p:not(.eyebrow):not(.kinena-home__tagline) {
	color: #fff4ea;
}

body.hb-v2-page .source-notice,
body.hb-v2-page .price-note,
body.hb-v2-page .price-table-card p:not(.mini-label),
body.hb-v2-page .price-examples p:not(.mini-label),
body.hb-v2-page .menu-lines p,
body.hb-v2-page .small-copy {
	color: var(--ink-2);
}

body.hb-v2-page .dark-block .source-notice,
body.hb-v2-page .price-table-card.featured p:not(.mini-label) {
	color: #fff1e5;
}

body.hb-v2-page .quick-link span:first-child {
	color: #b87d61;
}

body.hb-v2-page .price-table thead th {
	background: #ffe0c2;
}

body.hb-v2-page a:focus-visible,
body.hb-v2-page summary:focus-visible,
body.hb-v2-page button:focus-visible {
	outline-color: #d8612a;
}

body.hb-v2-page .service-card > img,
body.hb-v2-page .page-hero-image img,
body.hb-v2-page .kinena-home__image img,
body.hb-v2-page .kinena-wide-image img {
	filter: saturate(0.78) contrast(0.98) sepia(0.14);
}

body.hb-v2-page .people-image img,
body.hb-v2-page .story-image img,
body.hb-v2-page .image-text-block img {
	filter: grayscale(0.40) sepia(0.22) saturate(0.76) contrast(0.98);
}

/* Top-page PEOPLE & CULTURE: welcoming beige, with orange-led emphasis. */
body.hb-v2-page .people {
	background: var(--cream);
	color: var(--ink);
}

body.hb-v2-page .people .eyebrow,
body.hb-v2-page .people .eyebrow.light {
	color: var(--teal);
}

body.hb-v2-page .people-copy > p:not(.eyebrow) {
	color: var(--ink-2);
}

body.hb-v2-page .people .button-light {
	background: var(--white);
	border-color: var(--teal);
	color: var(--ink);
}

body.hb-v2-page .people .button-light:hover {
	background: var(--lime);
	border-color: var(--lime);
}

body.hb-v2-page .people .inline-link-light {
	border-bottom-color: var(--teal);
	color: var(--ink);
}

/* Simple palette: beige surfaces, white cards, orange actions, brown only for text. */
body.hb-v2-page .quick-nav {
	background: var(--cream);
	color: var(--ink);
}

body.hb-v2-page .quick-title,
body.hb-v2-page .quick-link span:first-child {
	color: var(--teal);
}

body.hb-v2-page .quick-grid {
	border-color: var(--line);
}

body.hb-v2-page .quick-link {
	border-color: var(--line);
}

body.hb-v2-page .quick-link:hover {
	background: var(--lime);
}

body.hb-v2-page :is(
	.price-preview,
	.kinena-home,
	.dark-block,
	.cta-band,
	.image-text-block,
	.story-block,
	.page-hero-dark,
	.price-table-card.featured,
	.contact-choice > div:first-child
) {
	background: var(--cream);
	color: var(--ink);
}

body.hb-v2-page :is(
	.price-preview,
	.kinena-home,
	.dark-block,
	.cta-band,
	.image-text-block,
	.story-block,
	.page-hero-dark,
	.price-table-card.featured,
	.contact-choice > div:first-child
) .eyebrow,
body.hb-v2-page :is(
	.price-preview,
	.kinena-home,
	.dark-block,
	.cta-band,
	.image-text-block,
	.story-block,
	.page-hero-dark,
	.price-table-card.featured,
	.contact-choice > div:first-child
) .eyebrow.light {
	color: var(--teal);
}

body.hb-v2-page :is(
	.price-preview,
	.kinena-home,
	.dark-block,
	.cta-band,
	.image-text-block,
	.story-block,
	.page-hero-dark,
	.price-table-card.featured,
	.contact-choice > div:first-child
) p:not(.eyebrow) {
	color: var(--ink-2);
}

body.hb-v2-page :is(
	.price-preview,
	.kinena-home,
	.dark-block,
	.cta-band,
	.image-text-block,
	.story-block,
	.page-hero-dark,
	.price-table-card.featured,
	.contact-choice > div:first-child
) :is(.button-light, .inline-link-light) {
	background: var(--white);
	border-color: var(--teal);
	color: var(--ink);
}

body.hb-v2-page .culture-words,
body.hb-v2-page .culture-words span {
	border-color: var(--line);
}

body.hb-v2-page .button-primary,
body.hb-v2-page .header-cta {
	background: var(--teal);
	border-color: var(--teal);
	color: var(--white);
}

body.hb-v2-page .site-footer .footer-links a,
body.hb-v2-page .site-footer .footer-info a {
	color: var(--ink);
}

body.hb-v2-page .site-footer .footer-links a:hover,
body.hb-v2-page .site-footer .footer-info a:hover {
	color: var(--teal);
}

body.hb-v2-page .site-footer .footer-logo {
	filter: none;
}

/* Light surfaces use readable text colors only; pale orange remains a surface color. */
body.hb-v2-page .eyebrow.light,
body.hb-v2-page .quick-title,
body.hb-v2-page .quick-link span:first-child,
body.hb-v2-page .kinena-home__tagline,
body.hb-v2-page .recruit-vision-flow span,
body.hb-v2-page .first-visit-page .dark-block .section-intro h2 strong {
	color: var(--teal);
}

body.hb-v2-page .recruit-vision-flow p {
	color: var(--ink-2);
}

body.hb-v2-page .recruit-vision-flow li::before {
	background-color: var(--teal);
}

/* Keep lower-page hero titles inside the copy column and away from the image. */
.page-hero h1 {
	max-width: 100%;
}

@media screen and (min-width: 981px) {
	.page-hero.has-image {
		grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr);
		position: relative;
	}

	.page-hero.has-image .page-hero-copy {
		min-width: 0;
		position: relative;
		z-index: 2;
		padding-right: clamp(24px, 3vw, 48px);
	}

	.page-hero.has-image h1 {
		width: auto;
		max-width: 100%;
		font-size: clamp(42px, 4vw, 64px);
		white-space: normal;
		overflow-wrap: break-word;
	}
}

.editor-content {
	max-width: 860px;
	margin: 0 auto;
	font-size: 17px;
	line-height: 1.95;
}

.editor-content > * + * {
	margin-top: 1.5em;
}

.editor-content h2,
.editor-content h3 {
	font-weight: 700;
	line-height: 1.4;
}

.editor-content h2 {
	font-size: clamp(30px, 4vw, 48px);
}

.editor-content h3 {
	font-size: clamp(22px, 3vw, 30px);
}

.editor-content ul,
.editor-content ol {
	padding-left: 1.4em;
}

.editor-content ul {
	list-style: disc;
}

.editor-content ol {
	list-style: decimal;
}

.editor-content a {
	color: var(--teal-dark);
	text-decoration: underline !important;
}

.post-list {
	border-top: 1px solid var(--ink);
}

.news-preview {
	background: var(--paper);
}

.news-preview .section-head {
	margin-bottom: 38px;
}

.news-preview__empty {
	border-top: 1px solid var(--ink);
	border-bottom: 1px solid var(--ink);
	margin: 0;
	padding: 28px 0;
	color: var(--ink-2);
}

.instagram-banner {
	background: linear-gradient(135deg, #741AFA 0%, #FF30C4 42%, #FF5D21 72%, #FFD735 100%);
	color: var(--white);
	padding: 0;
}

.instagram-banner__link {
	align-items: center;
	justify-content: space-between;
	gap: 48px;
	border: 0;
	background: transparent;
	padding: clamp(32px, 5vw, 68px);
	display: flex;
	position: relative;
	overflow: hidden;
}

.instagram-banner__link::before {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(135deg, rgba(19, 42, 54, .28), rgba(19, 42, 54, .06));
}

.instagram-banner__link::after {
	content: "";
	border: 1px solid rgba(228, 217, 166, .3);
	border-radius: 50%;
	width: clamp(180px, 24vw, 340px);
	height: clamp(180px, 24vw, 340px);
	position: absolute;
	right: -70px;
	top: 50%;
	transform: translateY(-50%);
}

.instagram-banner__copy,
.instagram-banner__action {
	position: relative;
	z-index: 1;
}

.instagram-banner__copy h2 {
	letter-spacing: -.055em;
	margin: 0;
	font-size: clamp(34px, 5vw, 70px);
	font-weight: 700;
	line-height: 1.12;
}

.instagram-banner__copy .eyebrow.light {
	color: #fff;
}

.instagram-banner__glyph {
	display: block;
	width: clamp(58px, 8vw, 92px);
	height: auto;
	border-radius: 22%;
	margin-bottom: 20px;
}

.instagram-banner__copy p:not(.eyebrow) {
	color: #e0e3dc;
	margin: 24px 0 0;
	line-height: 1.9;
}

.instagram-banner__action {
	align-items: center;
	gap: 20px;
	flex: none;
	display: flex;
}

.instagram-banner__label {
	border: 1px solid var(--lime);
	background: rgba(255, 255, 255, .95);
	border-color: #fff;
	color: var(--ink);
	padding: 12px 16px;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .08em;
}

.instagram-banner__action .arrow {
	color: #fff;
	font-size: 28px;
}

.post-card {
	display: grid;
	grid-template-columns: 130px 1fr auto;
	align-items: center;
	gap: 28px;
	min-height: 120px;
	border-bottom: 1px solid var(--ink);
}

.post-card time {
	color: var(--teal-dark);
	font-size: 13px;
	font-weight: 700;
}

.post-card h2 {
	font-size: clamp(18px, 2.2vw, 27px);
	font-weight: 700;
}

.post-card:hover {
	background: var(--cream);
}

/* Global title scale: reduce vertical density while keeping body copy readable. */
body.hb-v2-page .hero h1 {
	font-size: clamp(38px, 4.5vw, 72px);
}

body.hb-v2-page .statement h2,
body.hb-v2-page .section-head h2,
body.hb-v2-page .price-copy h2,
body.hb-v2-page .people-copy h2,
body.hb-v2-page .access-teaser h2 {
	font-size: clamp(34px, 4vw, 60px);
}

body.hb-v2-page .page-hero h1 {
	font-size: clamp(42px, 5.2vw, 78px);
}

body.hb-v2-page .section-intro h2 {
	font-size: clamp(36px, 4.2vw, 62px);
}

body.hb-v2-page .cta-band h2,
body.hb-v2-page .image-text-block h2,
body.hb-v2-page .story-block h2 {
	font-size: clamp(34px, 4.2vw, 60px);
}

.news-preview {
	padding-block: clamp(54px, 7vw, 96px);
}

.news-preview .section-head {
	grid-template-columns: 1fr auto;
	align-items: center;
	gap: 24px;
	margin-bottom: 24px;
}

.news-preview .section-head .text-link {
	border: 1px solid var(--ink);
	background: var(--white);
	padding: 9px 14px;
}

.news-preview .section-head .text-link:hover {
	background: var(--lime);
}

.news-preview .post-card {
	min-height: 86px;
	gap: 20px;
}

.news-preview .post-card h2 {
	font-size: clamp(17px, 1.8vw, 23px);
}

/* Keep the home news and Instagram routes compact and balanced on desktop. */
.home-news-social {
	display: grid;
	grid-template-columns: minmax(0, 7fr) minmax(260px, 3fr);
	align-items: stretch;
}

.home-news-social .news-preview {
	padding: clamp(42px, 4vw, 64px) clamp(32px, 5vw, 80px);
}

.home-news-social .news-preview .section-head {
	margin-bottom: 20px;
}

.home-news-social .news-preview .section-head h2 {
	font-size: clamp(30px, 3.2vw, 48px);
}

.home-news-social .news-preview .post-card {
	min-height: 70px;
	gap: 16px;
}

.home-news-social .news-preview .post-card h2 {
	font-size: clamp(16px, 1.6vw, 21px);
}

.home-news-social .instagram-banner {
	padding: 0;
	aspect-ratio: auto;
}

.home-news-social .instagram-banner__link {
	height: auto;
	min-height: 100%;
	padding: clamp(24px, 3vw, 42px);
	justify-content: center;
	align-items: flex-start;
	flex-direction: column;
	gap: 24px;
}

.home-news-social .instagram-banner__copy h2 {
	font-size: clamp(28px, 3.3vw, 48px);
}

.home-news-social .instagram-banner__copy p:not(.eyebrow) {
	font-size: 13px;
}

@media screen and (max-width: 980px) {
	.home-news-social {
		display: block;
	}

	.home-news-social .instagram-banner {
		aspect-ratio: auto;
	}

	.home-news-social .instagram-banner__link {
		height: auto;
	}
}

@media screen and (max-width: 782px) {
	body.hb-v2-page.admin-bar .site-header {
		top: 46px;
	}
}

@media screen and (max-width: 980px) {
	.mobile-menu summary {
		width: 44px;
		height: 44px;
		font-size: 0;
		position: relative;
	}

	.mobile-menu summary::before,
	.mobile-menu summary::after {
		content: "";
		position: absolute;
		left: 9px;
		width: 26px;
		height: 2px;
		background: var(--ink);
		transition: transform 0.2s ease, box-shadow 0.2s ease;
	}

	.mobile-menu summary::before {
		top: 13px;
		box-shadow: 0 8px 0 var(--ink), 0 16px 0 var(--ink);
	}

	.mobile-menu summary::after {
		display: none;
	}

	.mobile-menu[open] summary::before {
		top: 21px;
		box-shadow: none;
		transform: rotate(45deg);
	}

	.mobile-menu[open] summary::after {
		top: 21px;
		display: block;
		transform: rotate(-45deg);
	}
}

@media screen and (max-width: 600px) {
	body.hb-v2-page.admin-bar .site-header {
		top: 0;
	}

	.post-card {
		grid-template-columns: 1fr auto;
		gap: 10px;
		padding: 22px 0;
	}

	.post-card time {
		grid-column: 1 / -1;
	}

	.news-preview {
		padding-block: 52px 58px;
	}

	.news-preview .section-head {
		grid-template-columns: minmax(0, 1fr) auto;
		gap: 12px;
		margin-bottom: 18px;
	}

	.news-preview .section-head h2 {
		font-size: clamp(30px, 8.5vw, 36px);
	}

	.news-preview .section-head .text-link {
		gap: 7px;
		padding: 8px 10px;
		font-size: 12px;
		white-space: nowrap;
	}

	.news-preview .post-card {
		min-height: 0;
		gap: 8px;
		padding: 14px 0;
	}

	.news-preview .post-card time {
		font-size: 12px;
	}

	.news-preview .post-card h2 {
		font-size: 18px;
	}

	.home-news-social .news-preview {
		padding-block: 52px 58px;
	}

	.home-news-social .instagram-banner {
		padding: 0;
	}

	.home-news-social .instagram-banner__link {
		padding: 28px 24px;
	}

	body.hb-v2-page .hero h1 {
		font-size: clamp(36px, 9.5vw, 44px);
	}

	body.hb-v2-page .page-hero h1 {
		font-size: 40px;
	}

	body.hb-v2-page .statement h2,
	body.hb-v2-page .section-head h2,
	body.hb-v2-page .price-copy h2,
	body.hb-v2-page .people-copy h2,
	body.hb-v2-page .access-teaser h2,
	body.hb-v2-page .section-intro h2,
	body.hb-v2-page .cta-band h2,
	body.hb-v2-page .image-text-block h2,
	body.hb-v2-page .story-block h2 {
		font-size: clamp(30px, 8.5vw, 38px);
	}
}

/* Recruit page: origin, vision and the meaning of the work. */
.hb-v2-page .recruit-origin {
	background: var(--cream);
}

.hb-v2-page .recruit-origin-note {
	border-top: 1px solid var(--ink);
	border-bottom: 1px solid var(--ink);
	max-width: 1040px;
	margin: 0;
	padding: 30px 0;
	font-size: clamp(20px, 2.35vw, 34px);
	font-weight: 700;
	line-height: 1.7;
}

.hb-v2-page .recruit-vision-flow {
	border-top: 1px solid rgba(255, 255, 255, 0.3);
	border-left: 1px solid rgba(255, 255, 255, 0.3);
	grid-template-columns: repeat(4, 1fr);
	margin: 0;
	padding: 0;
	list-style: none;
	display: grid;
}

.hb-v2-page .recruit-vision-flow li {
	border-right: 1px solid rgba(255, 255, 255, 0.3);
	border-bottom: 1px solid rgba(255, 255, 255, 0.3);
	min-height: 230px;
	padding: 28px;
	display: flex;
	flex-direction: column;
}

.hb-v2-page .recruit-vision-flow span,
.hb-v2-page .recruit-work-grid span {
	color: var(--lime);
	letter-spacing: 0.14em;
	font-family: Arial, sans-serif;
	font-size: 11px;
	font-weight: 700;
}

.hb-v2-page .recruit-vision-flow strong {
	margin-top: auto;
	font-size: 22px;
}

.hb-v2-page .recruit-vision-flow p {
	color: #c8d6da;
	margin: 14px 0 0;
	font-size: 13px;
	line-height: 1.8;
}

.hb-v2-page .recruit-work-grid {
	grid-template-columns: repeat(3, 1fr);
	gap: 14px;
	display: grid;
}

.hb-v2-page .recruit-work-grid article {
	background: var(--cream);
	min-height: 280px;
	padding: 32px;
}

.hb-v2-page .recruit-work-grid span {
	color: var(--teal);
}

.hb-v2-page .recruit-work-grid h3 {
	margin: 70px 0 16px;
	font-size: 26px;
}

.hb-v2-page .recruit-work-grid p {
	color: var(--ink-2);
	margin: 0;
	font-size: 14px;
	line-height: 1.9;
}

@media screen and (max-width: 980px) {
	.hb-v2-page .recruit-vision-flow {
		grid-template-columns: 1fr 1fr;
	}

	.hb-v2-page .recruit-work-grid {
		grid-template-columns: 1fr;
	}

	.hb-v2-page .recruit-work-grid article {
		min-height: 230px;
	}
}

@media screen and (max-width: 620px) {
	.hb-v2-page .recruit-page .page-hero h1,
	.hb-v2-page .recruit-page .section-intro h2,
	.hb-v2-page .recruit-page .cta-band h2,
	.hb-v2-page .recruit-page p {
		max-width: 100%;
		overflow-wrap: break-word;
	}

	.hb-v2-page .recruit-page .page-hero h1 {
		font-size: 40px;
	}

	.hb-v2-page .recruit-page .section-intro h2 {
		font-size: 38px;
	}

	.hb-v2-page .recruit-origin-note {
		padding: 24px 0;
		font-size: 21px;
	}

	.hb-v2-page .recruit-vision-flow {
		grid-template-columns: 1fr;
	}

	.hb-v2-page .recruit-vision-flow li {
		min-height: 190px;
		padding: 24px;
	}

	.hb-v2-page .recruit-work-grid article {
		min-height: 210px;
		padding: 26px;
	}

	.hb-v2-page .recruit-work-grid h3 {
		margin-top: 48px;
	}
}

/* Shared partnership copy: readable labels at all four-column breakpoints. */
.hb-v2-page .partnership-steps strong {
	font-size: clamp(22px, 2vw, 28px);
	line-height: 1.5;
	overflow-wrap: normal;
}

.hb-v2-page .partnership-steps li {
	min-width: 0;
}

/* Compact card rhythm on mobile; desktop spacing remains unchanged. */
@media screen and (max-width: 620px) {
	body.hb-v2-page :where(
		.flow-list li,
		.recruit-vision-flow li,
		.recruit-work-grid article,
		.growth-flow li,
		.team-approach article,
		.kinena-space-grid article,
		.kinena-audience-grid article,
		.three-points article,
		.value-grid article
	) {
		min-height: 0;
		padding: 20px;
	}

	body.hb-v2-page .flow-list li {
		grid-template-columns: 48px minmax(0, 1fr);
		gap: 12px;
		padding: 20px 0;
	}

	body.hb-v2-page .flow-list > li > span {
		width: 44px;
		height: 44px;
	}

	body.hb-v2-page :where(.flow-list li h3, .recruit-work-grid h3) {
		margin-top: 0;
		margin-bottom: 8px;
		font-size: 20px;
		line-height: 1.45;
	}

	body.hb-v2-page .flow-list li p {
		font-size: 13px;
		line-height: 1.7;
	}

	body.hb-v2-page :where(.concern-grid p, .fit-list p) {
		min-height: 88px;
		padding: 16px 18px 16px 52px;
	}

	body.hb-v2-page :where(.step-list li, .service-detail-grid a) {
		min-height: 0;
		padding: 20px;
	}

	body.hb-v2-page .step-list strong {
		margin: 18px 0 auto;
		font-size: 32px;
	}

	body.hb-v2-page .step-list p {
		margin-top: 16px;
		font-size: 12px;
		line-height: 1.7;
	}

	body.hb-v2-page :where(.price-examples article, .team-grid article > div) {
		padding: 20px;
	}

	body.hb-v2-page :where(.price-examples article h3, .value-grid article h3, .three-points article h3) {
		margin-top: 24px;
		margin-bottom: 10px;
		min-height: 0;
	}

	body.hb-v2-page .first-steps .partnership-steps li {
		min-height: 0;
		padding: 20px;
	}

	body.hb-v2-page .first-steps .partnership-steps li::before {
		width: 24px;
		height: 24px;
		margin-top: 0;
	}

	body.hb-v2-page .first-steps .partnership-steps strong {
		margin: 12px 0 auto;
	}
}

.hb-v2-page .honest-proposal {
	border-top: 1px solid var(--line);
}

.hb-v2-page .honest-proposal .section-intro {
	margin-bottom: 0;
}

.hb-v2-page .team-approach {
	margin-bottom: 40px;
}

.hb-v2-page .team-approach article {
	background: var(--white);
}

/* Compact home-page pathway images while keeping the main hero unchanged. */
@media screen and (min-width: 981px) {
	.hb-v2-page .service-card > .hb-media {
		height: clamp(190px, 16vw, 240px);
		aspect-ratio: auto;
	}

	.hb-v2-page .people,
	.hb-v2-page .kinena-home {
		grid-template-columns: minmax(0, 0.72fr) minmax(0, 1fr);
	}

	.hb-v2-page .people-image,
	.hb-v2-page .kinena-home__image {
		min-height: 0;
	}

	.hb-v2-page .people-image img,
	.hb-v2-page .kinena-home__image img {
		min-height: 0;
		height: 100%;
		object-fit: cover;
	}

	.hb-v2-page .people-copy,
	.hb-v2-page .kinena-home__copy {
		padding: clamp(48px, 5vw, 80px);
	}

	.hb-v2-page .people-copy h2,
	.hb-v2-page .kinena-home h2 {
		font-size: clamp(38px, 4.2vw, 60px);
	}

	.hb-v2-page .people-copy > p:not(.eyebrow),
	.hb-v2-page .kinena-home__copy > p:not(.eyebrow):not(.kinena-home__tagline) {
		margin-top: 22px;
	}
}

@media screen and (min-width: 621px) and (max-width: 980px) {
	.hb-v2-page .people-image,
	.hb-v2-page .kinena-home__image {
		height: clamp(340px, 46vw, 440px);
		min-height: 0;
		aspect-ratio: auto;
	}

	.hb-v2-page .people-copy,
	.hb-v2-page .kinena-home__copy {
		padding: 56px clamp(32px, 6vw, 64px);
	}
}

@media screen and (max-width: 620px) {
	.hb-v2-page .service-card > .hb-media {
		aspect-ratio: 16 / 10;
	}

	.hb-v2-page .people-image,
	.hb-v2-page .kinena-home__image {
		height: auto;
		min-height: 0;
		aspect-ratio: 4 / 3;
	}

	.hb-v2-page .people-copy,
	.hb-v2-page .kinena-home__copy {
		padding: 52px 24px 60px;
	}

	.hb-v2-page .people-copy h2,
	.hb-v2-page .kinena-home h2 {
		font-size: 38px;
	}
}

/* Mobile TOP hero: lead with the place, then overlap the message panel. */
@media screen and (max-width: 620px) {
	body.hb-v2-page .site-header {
		height: 72px;
		gap: 8px;
		padding-inline: 12px;
	}

	body.hb-v2-page .site-header .brand {
		width: auto;
		min-width: 92px;
		max-width: 132px;
		flex: 1 1 132px;
	}

	body.hb-v2-page .site-header .header-cta[href^="https://lin.ee/"] {
		display: inline-flex !important;
		justify-content: center;
		min-width: 118px;
		max-width: 132px;
		min-height: 44px;
		padding: 0 6px;
		gap: 5px;
		flex: 0 1 132px;
		font-size: 10px;
		line-height: 1;
		letter-spacing: 0;
		white-space: nowrap;
	}

	body.hb-v2-page .site-header .header-cta[href^="https://lin.ee/"]::before {
		min-width: 32px;
		height: 22px;
		padding: 0 5px;
		font-size: 9px;
	}

	body.hb-v2-page .site-header .mobile-menu {
		flex: 0 0 44px;
	}

	body.hb-v2-page .hero {
		display: flex;
		flex-direction: column;
		min-height: 0;
		background: var(--paper);
		overflow: visible;
	}

	body.hb-v2-page .hero-visual {
		order: 1;
		height: clamp(300px, 85vw, 360px);
		min-height: 0;
	}

	body.hb-v2-page .hero-visual > img {
		object-position: center 44%;
	}

	body.hb-v2-page .hero-visual::after {
		background: linear-gradient(180deg, rgba(8, 35, 42, 0.04) 24%, rgba(8, 35, 42, 0.76) 100%);
	}

	body.hb-v2-page .hero-note {
		bottom: 64px;
		left: 22px;
		font-size: clamp(27px, 8vw, 34px);
		text-shadow: 0 2px 12px rgba(8, 35, 42, 0.35);
	}

	body.hb-v2-page .hero-copy {
		order: 2;
		z-index: 3;
		position: relative;
		width: calc(100% - 32px);
		min-height: 0;
		margin: -44px 16px 0;
		padding: 34px 20px 48px;
		background: var(--paper);
		border-top: 4px solid var(--teal);
		box-shadow: 0 18px 42px rgba(36, 56, 58, 0.16);
	}

	body.hb-v2-page .hero-copy .eyebrow {
		margin-bottom: 18px;
		font-size: clamp(9px, 2.7vw, 11px);
		letter-spacing: 0.11em;
		white-space: nowrap;
	}

	body.hb-v2-page .hero h1 {
		font-size: clamp(38px, 10.8vw, 46px);
		line-height: 1.05;
	}

	body.hb-v2-page .hero-lead {
		margin-top: 26px;
		font-size: 14px;
		line-height: 1.85;
	}

	body.hb-v2-page .hero-copy .button-row {
		margin-top: 30px;
	}

	body.hb-v2-page.first-visit-page .concern-grid p {
		min-height: 112px;
		padding: 18px 24px 18px 55px;
	}
}

@media screen and (max-width: 350px) {
	body.hb-v2-page .site-header .header-cta[href^="https://lin.ee/"]::before {
		display: none;
	}
}

/* Local Lucide interface icons replace font-dependent symbols everywhere. */
body.hb-v2-page .arrow {
	display: inline-block;
	width: 18px;
	height: 18px;
	min-width: 18px;
	flex: 0 0 auto;
	background-color: currentColor;
	-webkit-mask: url("../icons/lucide/arrow-up-right.svg") center / contain no-repeat;
	mask: url("../icons/lucide/arrow-up-right.svg") center / contain no-repeat;
	font-size: 0;
	line-height: 0;
	vertical-align: middle;
}

body.hb-v2-page .price-panel li::before,
body.hb-v2-page .concern-grid p::before,
body.hb-v2-page .plain-list li::before,
body.hb-v2-page .fit-list p::before,
body.hb-v2-page .faq-list summary::after {
	content: "";
	display: block;
	width: 1.1em;
	height: 1.1em;
	background-color: currentColor;
}

body.hb-v2-page .price-panel li::before,
body.hb-v2-page .concern-grid p::before,
body.hb-v2-page .plain-list li::before {
	-webkit-mask: url("../icons/lucide/check.svg") center / contain no-repeat;
	mask: url("../icons/lucide/check.svg") center / contain no-repeat;
}

body.hb-v2-page .price-panel li::before {
	top: 0.8em;
}

body.hb-v2-page .concern-grid p::before {
	top: 50%;
	transform: translateY(-50%);
}

body.hb-v2-page .plain-list li::before {
	top: 0.65em;
}

body.hb-v2-page .fit-list p::before {
	top: 50%;
	transform: translateY(-50%);
	-webkit-mask: url("../icons/lucide/arrow-right.svg") center / contain no-repeat;
	mask: url("../icons/lucide/arrow-right.svg") center / contain no-repeat;
}

body.hb-v2-page .faq-list summary::after {
	top: 50%;
	transform: translateY(-50%);
	-webkit-mask: url("../icons/lucide/plus.svg") center / contain no-repeat;
	mask: url("../icons/lucide/plus.svg") center / contain no-repeat;
}

body.hb-v2-page .faq-list details[open] summary::after {
	-webkit-mask-image: url("../icons/lucide/minus.svg");
	mask-image: url("../icons/lucide/minus.svg");
}

/* Mobile lower-page heroes: lead with the image, then the message panel. */
@media screen and (max-width: 620px) {
	body.hb-v2-page .page-hero.has-image {
		display: flex;
		flex-direction: column;
		min-height: 0;
		background: var(--paper);
		overflow: visible;
	}

	body.hb-v2-page .page-hero.has-image .page-hero-image {
		order: 1;
		width: 100%;
		height: clamp(280px, 78vw, 340px);
		min-height: 0;
	}

	body.hb-v2-page .page-hero.has-image .page-hero-image img {
		width: 100%;
		height: 100%;
		object-fit: cover;
	}

	body.hb-v2-page .page-hero.has-image .page-hero-copy {
		order: 2;
		z-index: 2;
		position: relative;
		width: calc(100% - 32px);
		min-height: 0;
		margin: -36px 16px 0;
		padding: 32px 20px 46px;
		background: var(--paper);
		border-top: 4px solid var(--teal);
		box-shadow: 0 18px 42px rgba(36, 56, 58, 0.16);
	}

	body.hb-v2-page .page-hero.has-image h1 {
		font-size: clamp(38px, 10.5vw, 44px);
		line-height: 1.1;
	}

	body.hb-v2-page .recruit-page .page-hero.has-image h1 {
		font-size: clamp(36px, 9.7vw, 40px);
	}
}

/* Lower-page icon language: semantic cues stay subordinate to the copy. */
body.hb-v2-page .services-page { --hb-page-icon: url("../icons/lucide/route.svg"); }
body.hb-v2-page .treatment-page { --hb-page-icon: url("../icons/lucide/hand-heart.svg"); }
body.hb-v2-page .training-page { --hb-page-icon: url("../icons/lucide/dumbbell.svg"); }
body.hb-v2-page .cafe-page { --hb-page-icon: url("../icons/lucide/coffee.svg"); }
body.hb-v2-page .first-visit-page { --hb-page-icon: url("../icons/lucide/compass.svg"); }
body.hb-v2-page .about-page { --hb-page-icon: url("../icons/lucide/heart-pulse.svg"); }
body.hb-v2-page .recruit-page { --hb-page-icon: url("../icons/lucide/users-round.svg"); }
body.hb-v2-page .kinena-page { --hb-page-icon: url("../icons/lucide/house-heart.svg"); }
body.hb-v2-page .access-page { --hb-page-icon: url("../icons/lucide/map-pin.svg"); }

body.hb-v2-page main[class$="-page"] .page-hero-copy > .eyebrow,
body.hb-v2-page main[class$="-page"] .section-intro > div:first-child > .eyebrow,
body.hb-v2-page main[class$="-page"] .image-text-block > div > .eyebrow,
body.hb-v2-page main[class$="-page"] .story-block > div:last-child > .eyebrow,
body.hb-v2-page main[class$="-page"] .cta-band > div:first-child > .eyebrow {
	display: flex;
	align-items: center;
	gap: 10px;
}

body.hb-v2-page main[class$="-page"] .page-hero-copy > .eyebrow::before,
body.hb-v2-page main[class$="-page"] .section-intro > div:first-child > .eyebrow::before,
body.hb-v2-page main[class$="-page"] .image-text-block > div > .eyebrow::before,
body.hb-v2-page main[class$="-page"] .story-block > div:last-child > .eyebrow::before,
body.hb-v2-page main[class$="-page"] .cta-band > div:first-child > .eyebrow::before {
	content: "";
	display: inline-block;
	width: 22px;
	height: 22px;
	flex: 0 0 22px;
	background-color: currentColor;
	-webkit-mask: var(--hb-page-icon) center / contain no-repeat;
	mask: var(--hb-page-icon) center / contain no-repeat;
}

body.hb-v2-page main[class$="-page"] .cta-band > div:first-child > .eyebrow::before {
	-webkit-mask-image: url("../icons/lucide/messages-square.svg");
	mask-image: url("../icons/lucide/messages-square.svg");
}

body.hb-v2-page main[class$="-page"] .three-points article::before,
body.hb-v2-page .service-detail-grid a::before,
body.hb-v2-page .price-table-card > div::before,
body.hb-v2-page .price-examples article::before,
body.hb-v2-page .value-grid article::before,
body.hb-v2-page .recruit-vision-flow li::before,
body.hb-v2-page .recruit-work-grid article::before,
body.hb-v2-page .growth-flow li::before,
body.hb-v2-page .team-grid article > div::before,
body.hb-v2-page .kinena-space-grid article::before,
body.hb-v2-page .kinena-audience-grid article::before,
body.hb-v2-page .contact-choice > div::before {
	content: "";
	display: block;
	width: 32px;
	height: 32px;
	flex: 0 0 32px;
	margin-bottom: 20px;
	background-color: var(--teal);
	-webkit-mask: var(--hb-card-icon, var(--hb-page-icon)) center / contain no-repeat;
	mask: var(--hb-card-icon, var(--hb-page-icon)) center / contain no-repeat;
}

body.hb-v2-page main[class$="-page"] .three-points article:nth-child(1) { --hb-card-icon: url("../icons/lucide/search-check.svg"); }
body.hb-v2-page main[class$="-page"] .three-points article:nth-child(2) { --hb-card-icon: url("../icons/lucide/hand-heart.svg"); }
body.hb-v2-page main[class$="-page"] .three-points article:nth-child(3) { --hb-card-icon: url("../icons/lucide/route.svg"); }
body.hb-v2-page main[class$="-page"] .three-points h3 { margin-top: 24px; }

body.hb-v2-page .service-detail-grid a:nth-child(1) { --hb-card-icon: url("../icons/lucide/heart-pulse.svg"); }
body.hb-v2-page .service-detail-grid a:nth-child(2) { --hb-card-icon: url("../icons/lucide/dumbbell.svg"); }
body.hb-v2-page .service-detail-grid a:nth-child(3) { --hb-card-icon: url("../icons/lucide/coffee.svg"); }

body.hb-v2-page .price-table-card > div::before,
body.hb-v2-page .price-examples article::before {
	--hb-card-icon: url("../icons/lucide/badge-japanese-yen.svg");
}

body.hb-v2-page .price-table-card:nth-child(2) > div::before {
	--hb-card-icon: url("../icons/lucide/scale.svg");
}

body.hb-v2-page .price-table-card > div::before { margin-bottom: 12px; }
body.hb-v2-page .price-table caption::before {
	content: "";
	display: inline-block;
	width: 24px;
	height: 24px;
	margin-right: 12px;
	background-color: var(--teal);
	-webkit-mask: url("../icons/lucide/badge-japanese-yen.svg") center / contain no-repeat;
	mask: url("../icons/lucide/badge-japanese-yen.svg") center / contain no-repeat;
	vertical-align: -0.25em;
}

body.hb-v2-page .flow-list li:nth-child(1) { --hb-flow-icon: url("../icons/lucide/clipboard-list.svg"); }
body.hb-v2-page .flow-list li:nth-child(2) { --hb-flow-icon: url("../icons/lucide/messages-square.svg"); }
body.hb-v2-page .flow-list li:nth-child(3) { --hb-flow-icon: url("../icons/lucide/activity.svg"); }
body.hb-v2-page .flow-list li:nth-child(4) { --hb-flow-icon: url("../icons/lucide/footprints.svg"); }
body.hb-v2-page .flow-list li:nth-child(5) { --hb-flow-icon: url("../icons/lucide/dumbbell.svg"); }
body.hb-v2-page .flow-list li:nth-child(6) { --hb-flow-icon: url("../icons/lucide/coffee.svg"); }

body.hb-v2-page .flow-list h3::before,
body.hb-v2-page .menu-lines h3::before,
body.hb-v2-page .cafe-menu span::before,
body.hb-v2-page .company-list dt::before,
body.hb-v2-page .access-list dt::before {
	content: "";
	display: inline-block;
	width: 22px;
	height: 22px;
	margin-right: 10px;
	background-color: var(--teal);
	vertical-align: -0.28em;
}

body.hb-v2-page .flow-list h3::before {
	-webkit-mask: var(--hb-flow-icon) center / contain no-repeat;
	mask: var(--hb-flow-icon) center / contain no-repeat;
}

body.hb-v2-page .menu-lines h3::before {
	-webkit-mask: var(--hb-page-icon) center / contain no-repeat;
	mask: var(--hb-page-icon) center / contain no-repeat;
}

body.hb-v2-page .cafe-menu span::before {
	-webkit-mask: url("../icons/lucide/coffee.svg") center / contain no-repeat;
	mask: url("../icons/lucide/coffee.svg") center / contain no-repeat;
}

body.hb-v2-page .metric-strip span {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

body.hb-v2-page .metric-strip span::before,
body.hb-v2-page .culture-words span::before {
	content: "";
	display: block;
	width: 28px;
	height: 28px;
	background-color: currentColor;
	-webkit-mask: var(--hb-item-icon) center / contain no-repeat;
	mask: var(--hb-item-icon) center / contain no-repeat;
}

body.hb-v2-page .metric-strip span:nth-child(1) { --hb-item-icon: url("../icons/lucide/dumbbell.svg"); }
body.hb-v2-page .metric-strip span:nth-child(2) { --hb-item-icon: url("../icons/lucide/activity.svg"); }
body.hb-v2-page .metric-strip span:nth-child(3) { --hb-item-icon: url("../icons/lucide/refresh-cw.svg"); }
body.hb-v2-page .metric-strip span:nth-child(4) { --hb-item-icon: url("../icons/lucide/target.svg"); }
body.hb-v2-page .metric-strip span:nth-child(5) { --hb-item-icon: url("../icons/lucide/footprints.svg"); }

body.hb-v2-page .value-grid article:nth-child(1) { --hb-card-icon: url("../icons/lucide/hand-heart.svg"); }
body.hb-v2-page .value-grid article:nth-child(2) { --hb-card-icon: url("../icons/lucide/users-round.svg"); }
body.hb-v2-page .value-grid article:nth-child(3) { --hb-card-icon: url("../icons/lucide/shield-check.svg"); }
body.hb-v2-page .value-grid article:nth-child(4) { --hb-card-icon: url("../icons/lucide/refresh-cw.svg"); }
body.hb-v2-page .value-grid h3 { margin-top: 24px; }

body.hb-v2-page .philosophy-block > div > p {
	display: flex;
	align-items: center;
	gap: 10px;
}

body.hb-v2-page .philosophy-block > div > p::before {
	content: "";
	display: inline-block;
	width: 30px;
	height: 30px;
	flex: 0 0 30px;
	background-color: var(--teal);
	-webkit-mask: var(--hb-philosophy-icon) center / contain no-repeat;
	mask: var(--hb-philosophy-icon) center / contain no-repeat;
}

body.hb-v2-page .philosophy-block > div:nth-child(1) { --hb-philosophy-icon: url("../icons/lucide/target.svg"); }
body.hb-v2-page .philosophy-block > div:nth-child(2) { --hb-philosophy-icon: url("../icons/lucide/heart-pulse.svg"); }
body.hb-v2-page .philosophy-block > div:nth-child(3) { --hb-philosophy-icon: url("../icons/lucide/sprout.svg"); }

body.hb-v2-page .philosophy-block h2 .hb-vision-line {
	display: inline-block;
	white-space: nowrap;
	font-weight: inherit;
}

body.hb-v2-page .company-list > div:nth-child(1) { --hb-definition-icon: url("../icons/lucide/building-2.svg"); }
body.hb-v2-page .company-list > div:nth-child(2) { --hb-definition-icon: url("../icons/lucide/clock-3.svg"); }
body.hb-v2-page .company-list > div:nth-child(3) { --hb-definition-icon: url("../icons/lucide/map-pin.svg"); }
body.hb-v2-page .company-list > div:nth-child(4) { --hb-definition-icon: url("../icons/lucide/briefcase-business.svg"); }
body.hb-v2-page .access-list > div:nth-child(1) { --hb-definition-icon: url("../icons/lucide/map-pin.svg"); }
body.hb-v2-page .access-list > div.access-hours { --hb-definition-icon: url("../icons/lucide/clock-3.svg"); }
body.hb-v2-page .access-list > div:nth-child(3) { --hb-definition-icon: url("../icons/lucide/route.svg"); }
/* アクセスの5行は 住所／営業時間／交通／駐車場／電話。4番目に電話の
   アイコンが割り当てられ、5番目には何も無かったため、駐車場が電話に、
   電話が塗りつぶしの四角になっていた。 */
body.hb-v2-page .access-list > div:nth-child(4) { --hb-definition-icon: url("../icons/lucide/car.svg"); }
body.hb-v2-page .access-list > div:nth-child(5) { --hb-definition-icon: url("../icons/lucide/phone.svg"); }
body.hb-v2-page .company-list dt::before,
body.hb-v2-page .access-list dt::before {
	-webkit-mask: var(--hb-definition-icon) center / contain no-repeat;
	mask: var(--hb-definition-icon) center / contain no-repeat;
}

body.hb-v2-page .recruit-vision-flow li:nth-child(1) { --hb-card-icon: url("../icons/lucide/search-check.svg"); }
body.hb-v2-page .recruit-vision-flow li:nth-child(2) { --hb-card-icon: url("../icons/lucide/heart-pulse.svg"); }
body.hb-v2-page .recruit-vision-flow li:nth-child(3) { --hb-card-icon: url("../icons/lucide/sprout.svg"); }
body.hb-v2-page .recruit-vision-flow li:nth-child(4) { --hb-card-icon: url("../icons/lucide/handshake.svg"); }
body.hb-v2-page .recruit-vision-flow li::before { background-color: var(--lime); }

body.hb-v2-page .recruit-work-grid article:nth-child(1) { --hb-card-icon: url("../icons/lucide/messages-square.svg"); }
body.hb-v2-page .recruit-work-grid article:nth-child(2) { --hb-card-icon: url("../icons/lucide/lightbulb.svg"); }
body.hb-v2-page .recruit-work-grid article:nth-child(3) { --hb-card-icon: url("../icons/lucide/handshake.svg"); }
body.hb-v2-page .recruit-work-grid h3 { margin-top: 28px; }

body.hb-v2-page .culture-words span {
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 16px;
}
body.hb-v2-page .culture-words span:nth-child(1) { --hb-item-icon: url("../icons/lucide/shield-check.svg"); }
body.hb-v2-page .culture-words span:nth-child(2) { --hb-item-icon: url("../icons/lucide/flag.svg"); }
body.hb-v2-page .culture-words span:nth-child(3) { --hb-item-icon: url("../icons/lucide/sprout.svg"); }
body.hb-v2-page .culture-words span:nth-child(4) { --hb-item-icon: url("../icons/lucide/handshake.svg"); }

body.hb-v2-page .growth-flow li:nth-child(1) { --hb-card-icon: url("../icons/lucide/search-check.svg"); }
body.hb-v2-page .growth-flow li:nth-child(2) { --hb-card-icon: url("../icons/lucide/hand-heart.svg"); }
body.hb-v2-page .growth-flow li:nth-child(3) { --hb-card-icon: url("../icons/lucide/sprout.svg"); }
body.hb-v2-page .growth-flow li:nth-child(4) { --hb-card-icon: url("../icons/lucide/flag.svg"); }
body.hb-v2-page .team-grid article > div::before { --hb-card-icon: url("../icons/lucide/users-round.svg"); }

body.hb-v2-page .kinena-space-grid article:nth-child(1) { --hb-card-icon: url("../icons/lucide/book-open.svg"); }
body.hb-v2-page .kinena-space-grid article:nth-child(2) { --hb-card-icon: url("../icons/lucide/activity.svg"); }
body.hb-v2-page .kinena-space-grid article:nth-child(3) { --hb-card-icon: url("../icons/lucide/house-heart.svg"); }
body.hb-v2-page .kinena-space-grid article:nth-child(4) { --hb-card-icon: url("../icons/lucide/coffee.svg"); }
body.hb-v2-page .kinena-audience-grid article:nth-child(1) { --hb-card-icon: url("../icons/lucide/heart-pulse.svg"); }
body.hb-v2-page .kinena-audience-grid article:nth-child(2) { --hb-card-icon: url("../icons/lucide/users-round.svg"); }
body.hb-v2-page .kinena-audience-grid h3 { margin-top: 24px; }

body.hb-v2-page .contact-choice > div:first-child { --hb-card-icon: url("../icons/lucide/messages-square.svg"); }
body.hb-v2-page .contact-choice > div:last-child { --hb-card-icon: url("../icons/lucide/phone.svg"); }
body.hb-v2-page .contact-choice > div:last-child::before { background-color: var(--ink); }

body.hb-v2-page main[class$="-page"] .source-notice {
	position: relative;
	padding-left: 52px;
}

body.hb-v2-page main[class$="-page"] .source-notice::before {
	content: "";
	position: absolute;
	top: 20px;
	left: 20px;
	width: 20px;
	height: 20px;
	background-color: currentColor;
	-webkit-mask: url("../icons/lucide/info.svg") center / contain no-repeat;
	mask: url("../icons/lucide/info.svg") center / contain no-repeat;
}

/* The price block is now a cream panel, so the sand accent no longer reads
   against it (1.5:1). Use the brand rust, which clears 6:1 on cream. */
body.hb-v2-page .first-visit-page .dark-block .section-intro h2 strong {
	color: var(--teal);
}

@media screen and (max-width: 620px) {
	.instagram-banner__link {
		align-items: flex-start;
		flex-direction: column;
		gap: 30px;
	}

	.instagram-banner__copy h2 {
		font-size: clamp(34px, 10vw, 46px);
	}

	.instagram-banner__copy p:not(.eyebrow) {
		max-width: 25em;
	}

	body.hb-v2-page main :where(h1, h2) {
		text-wrap: balance;
	}

	/* Forced mobile lines are for headings; prose should flow naturally. */
	body.hb-v2-page :where(.hero-lead, .statement-lead) .hb-mobile-line {
		display: inline;
		white-space: normal;
	}

	body.hb-v2-page .hb-mobile-long-title {
		font-size: clamp(23px, 7.2vw, 29px) !important;
		letter-spacing: -.055em;
		line-height: 1.25;
	}

	body.hb-v2-page .hb-mobile-long-title .hb-copy-line {
		display: inline-block;
		white-space: nowrap;
		font-weight: inherit;
	}

	/* Let narrative copy use the full content width while section padding stays intact. */
	body.hb-v2-page :where(
		.page-hero-copy > p:last-child,
		.section-head > p,
		.section-intro-text,
		.section-intro-text > p,
		.statement-body > p,
		.price-copy > p:not(.eyebrow),
		.people-copy > p:not(.eyebrow),
		.kinena-home__copy > p:not(.eyebrow):not(.kinena-home__tagline),
		.image-text-block > div > p:not(.eyebrow),
		.story-block > div:last-child > p:not(.eyebrow),
		.cta-band > div:first-child > p:not(.eyebrow),
		.faq-list details p,
		.editor-content
	) {
		width: 100%;
		max-width: none;
		min-width: 0;
	}

	body.hb-v2-page :where(.section-intro, .section-intro > *, .section-intro-text) {
		width: 100%;
		min-width: 0;
	}

	/* Cards use their padding as the only text inset and expose all remaining width. */
	body.hb-v2-page :where(
		.service-grid,
		.step-list,
		.partnership-steps,
		.three-points,
		.value-grid,
		.service-detail-grid,
		.price-stack,
		.price-examples,
		.flow-list,
		.recruit-vision-flow,
		.recruit-work-grid,
		.growth-flow,
		.team-grid,
		.kinena-space-grid,
		.kinena-audience-grid,
		.concern-grid,
		.menu-lines,
		.cafe-menu,
		.contact-choice
	) {
		width: 100%;
		max-width: none;
		min-width: 0;
	}

	body.hb-v2-page :where(
		.service-content > h3,
		.service-content > p,
		.step-list li > strong,
		.step-list li > p,
		.partnership-steps li > strong,
		.partnership-steps li > p,
		.three-points article > h3,
		.three-points article > p,
		.value-grid article > h3,
		.value-grid article > p,
		.service-detail-grid a > h3,
		.service-detail-grid a > p,
		.price-table-card > div,
		.price-table-card > div > h3,
		.price-table-card > div > p,
		.price-examples article > h3,
		.price-examples article > p,
		.price-examples article > strong,
		.flow-list li > div,
		.flow-list li h3,
		.flow-list li p,
		.recruit-vision-flow li > strong,
		.recruit-vision-flow li > p,
		.recruit-work-grid article > h3,
		.recruit-work-grid article > p,
		.growth-flow li > strong,
		.team-grid article > div,
		.team-grid article h3,
		.team-grid article p,
		.kinena-space-grid article > h3,
		.kinena-space-grid article > p,
		.kinena-audience-grid article > h3,
		.kinena-audience-grid article > p,
		.concern-grid p,
		.menu-lines > div > h3,
		.menu-lines > div > p,
		.menu-lines > div > strong,
		.cafe-menu > div > *,
		.contact-choice > div > h2,
		.contact-choice > div > h3,
		.contact-choice > div > p
	) {
		width: 100%;
		max-width: none;
		min-width: 0;
		overflow-wrap: break-word;
		word-break: normal;
		line-break: strict;
		hyphens: none;
	}

	body.hb-v2-page .philosophy-block {
		gap: 48px;
	}

	body.hb-v2-page .philosophy-block h2 {
		font-size: clamp(23px, 7.2vw, 29px);
		letter-spacing: -.055em;
		line-height: 1.25;
	}

	body.hb-v2-page main[class$="-page"] .page-hero-copy > .eyebrow::before,
	body.hb-v2-page main[class$="-page"] .section-intro > div:first-child > .eyebrow::before,
	body.hb-v2-page main[class$="-page"] .image-text-block > div > .eyebrow::before,
	body.hb-v2-page main[class$="-page"] .story-block > div:last-child > .eyebrow::before,
	body.hb-v2-page main[class$="-page"] .cta-band > div:first-child > .eyebrow::before {
		width: 20px;
		height: 20px;
		flex-basis: 20px;
	}

	body.hb-v2-page .price-table-card > div::before,
	body.hb-v2-page .price-examples article::before,
	body.hb-v2-page .value-grid article::before,
	body.hb-v2-page .recruit-work-grid article::before,
	body.hb-v2-page .growth-flow li::before,
	body.hb-v2-page .kinena-space-grid article::before,
	body.hb-v2-page .kinena-audience-grid article::before {
		width: 28px;
		height: 28px;
		flex-basis: 28px;
	}

	/* Present the ticket table as a complete, scroll-free list on phones. */
	body.hb-v2-page .services-page .table-wrap {
		overflow-x: visible;
		background: transparent;
	}

	body.hb-v2-page .services-page .price-table {
		display: block;
		width: 100%;
		min-width: 0;
	}

	body.hb-v2-page .services-page .price-table caption {
		display: flex;
		align-items: center;
		background: var(--white);
		padding: 22px 20px;
	}

	body.hb-v2-page .services-page .price-table thead {
		position: absolute;
		width: 1px;
		height: 1px;
		padding: 0;
		margin: -1px;
		overflow: hidden;
		clip: rect(0, 0, 0, 0);
		white-space: nowrap;
		border: 0;
	}

	body.hb-v2-page .services-page .price-table tbody {
		display: grid;
		gap: 12px;
		margin-top: 12px;
	}

	body.hb-v2-page .services-page .price-table tbody tr {
		display: grid;
		grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr);
		background: var(--white);
		border-left: 4px solid var(--teal);
		padding: 16px 18px;
	}

	body.hb-v2-page .services-page .price-table tbody th {
		grid-column: 1 / -1;
		padding: 0 0 12px;
		border-bottom: 1px solid var(--line);
		font-size: 19px;
	}

	body.hb-v2-page .services-page .price-table tbody td {
		display: flex;
		flex-direction: column;
		gap: 3px;
		min-width: 0;
		padding: 10px 0 0;
		border-bottom: 0;
		font-size: 14px;
		line-height: 1.45;
		overflow-wrap: anywhere;
	}

	body.hb-v2-page .services-page .price-table tbody td:nth-child(3) {
		padding-left: 12px;
	}

	body.hb-v2-page .services-page .price-table tbody td:nth-child(4) {
		grid-column: 1 / -1;
		flex-direction: row;
		gap: 12px;
		padding-top: 8px;
		color: var(--ink-2);
	}

	body.hb-v2-page .services-page .price-table tbody td::before {
		color: var(--teal);
		font-size: 10px;
		font-weight: 700;
		letter-spacing: .12em;
	}

	body.hb-v2-page .services-page .price-table tbody td:nth-child(2)::before { content: "料金"; }
	body.hb-v2-page .services-page .price-table tbody td:nth-child(3)::before { content: "割引"; }
	body.hb-v2-page .services-page .price-table tbody td:nth-child(4)::before { content: "有効期限"; }
}

/* Compress about-page section and card spacing by approximately 20 percent. */
body.hb-v2-page .about-page > .philosophy-block {
	padding-block: clamp(64px, 8vw, 112px);
}

body.hb-v2-page .about-page > .sub-section {
	padding-block: clamp(68px, 8.8vw, 128px);
	padding-inline: clamp(19px, 5.6vw, 90px);
}

body.hb-v2-page .about-page .section-intro {
	gap: 56px;
	margin-bottom: 51px;
}

body.hb-v2-page .about-page :where(.three-points article, .value-grid article) {
	padding: 24px;
}

body.hb-v2-page .about-page .story-block > div:last-child,
body.hb-v2-page .about-page .cta-band > div {
	padding-block: clamp(48px, 6.4vw, 104px);
}

@media screen and (max-width: 620px) {
	body.hb-v2-page .about-page > .philosophy-block {
		padding-block: 66px;
		gap: 38px;
	}

	body.hb-v2-page .about-page > .sub-section {
		padding-inline: 20px;
	}

	body.hb-v2-page .about-page .section-intro {
		gap: 10px;
		margin-bottom: 41px;
	}

	body.hb-v2-page .about-page :where(.three-points article, .value-grid article) {
		padding: 16px;
	}

	body.hb-v2-page .about-page .story-block > div:last-child {
		padding-block: 64px;
	}
}

/* Keep the WHAT WE DELIVER groups in one horizontal row on desktop. */
@media screen and (min-width: 981px) {
	body.hb-v2-page .statement {
		display: grid;
		grid-template-columns: minmax(0, 1fr) minmax(0, .95fr) minmax(0, 1.35fr);
		align-items: center;
		column-gap: clamp(28px, 4vw, 64px);
	}

	body.hb-v2-page .statement-title {
		grid-column: 1;
	}

	body.hb-v2-page .statement-body {
		display: contents;
	}

	body.hb-v2-page .statement-body .statement-lead {
		grid-column: 2;
	}

	body.hb-v2-page .statement-body > p:not(.statement-lead) {
		grid-column: 3;
	}
}

/* Desktop access layout: copy left, map right, actions beneath the map. */
@media screen and (min-width: 981px) {
	body.hb-v2-page .access-teaser {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1.08fr);
		grid-template-rows: auto auto;
		align-items: start;
		column-gap: clamp(32px, 5vw, 76px);
		row-gap: 12px;
	}

	body.hb-v2-page .access-teaser-copy {
		grid-column: 1;
		grid-row: 1 / span 2;
	}

	body.hb-v2-page .access-teaser-map {
		grid-column: 2;
		grid-row: 1;
		width: 100%;
	}

	body.hb-v2-page .access-teaser-map iframe {
		height: clamp(300px, 25vw, 420px);
	}

	body.hb-v2-page .access-teaser .access-actions {
		grid-column: 2;
		grid-row: 2;
		width: 100%;
		margin-top: 12px;
		align-items: center;
		flex-direction: row;
		justify-content: space-between;
		gap: 24px;
	}

	body.hb-v2-page .access-teaser .access-actions .button {
		flex: 1 1 auto;
	}

	body.hb-v2-page .access-teaser .access-actions .phone {
		flex: 0 0 auto;
		white-space: nowrap;
	}
}

@media screen and (max-width: 980px) {
	body.hb-v2-page .statement-title {
		display: block;
	}
}

/* Keep the requested two-line statement consistent at every viewport. */
body.hb-v2-page .statement-title h2 {
	white-space: nowrap;
}

/* Keep the KINE-NA health-and-learning heading as three deliberate lines on mobile. */
.hb-v2-page .kinena-health-learning__mobile-break {
	display: inline;
}

@media screen and (max-width: 620px) {
	.hb-v2-page .kinena-health-learning__mobile-break {
		display: block;
	}
}

/* Recruit heading breaks are mobile-only; staff card copy fills its content width. */
.hb-v2-page .hb-recruit-mobile-break {
	display: none;
}

@media screen and (max-width: 620px) {
	body.hb-v2-page .hb-recruit-mobile-line {
		display: block;
	}

	body.hb-v2-page .hb-recruit-mobile-break {
		display: none;
	}

	body.hb-v2-page .recruit-page .team-grid article > div,
	body.hb-v2-page .recruit-page .team-grid article > div > *,
	body.hb-v2-page .recruit-page .team-grid article p {
		width: 100%;
		max-width: none;
		min-width: 0;
		box-sizing: border-box;
	}
}

/* Mobile modules: one page gutter, one small card inset, no nested copy limits. */
@media screen and (max-width: 620px) {
	body.hb-v2-page {
		--hb-mobile-gutter: 24px;
		--hb-mobile-card-inset: 16px;
	}

	/* Generic pages (including 404) must not size their grid from a long CTA. */
	body.hb-v2-page .content-page .page-hero-copy {
		min-width: 0;
		max-width: 100%;
	}

	body.hb-v2-page .content-page .button {
		min-width: 0;
		word-break: normal;
		overflow-wrap: break-word;
	}

	/* Narrative/card grids must not leave a second, unused mobile column. */
	body.hb-v2-page main :is(
		.quick-grid, .service-grid, .step-list, .service-detail-grid,
		.concern-grid, .three-points, .value-grid, .team-grid, .fit-list,
		.price-examples, .growth-flow, .recruit-vision-flow, .recruit-work-grid,
		.kinena-space-grid, .kinena-audience-grid, .kinena-sponsor-grid,
		.metric-strip, .statement-body
	) {
		grid-template-columns: minmax(0, 1fr);
		width: 100%;
		max-width: none;
		min-width: 0;
	}

	/* The section already supplies the outer gutter for PEOPLE & CULTURE. */
	body.hb-v2-page .people-copy {
		padding-inline: 0;
	}

	/* Standalone image/copy modules receive the same gutter as page sections. */
	body.hb-v2-page main > :is(.kinena-home, .image-text-block, .story-block, .contact-choice) {
		margin-inline: var(--hb-mobile-gutter);
		width: calc(100% - 2 * var(--hb-mobile-gutter));
		max-width: none;
		min-width: 0;
	}

	/* Use an explicit selector weight so earlier page-specific padding cannot win. */
	body.hb-v2-page main :is(
		.service-content, .team-grid article > div, .price-panel,
		.price-table-card, .price-examples article, .three-points article,
		.value-grid article, .step-list li, .partnership-steps li,
		.service-detail-grid > a, .recruit-vision-flow li,
		.recruit-work-grid article, .growth-flow li, .kinena-space-grid article,
		.kinena-audience-grid article, .kinena-supporters__project,
		.kinena-supporters__group, .kinena-home__copy,
		.image-text-block > div, .story-block > div:last-child,
		.contact-choice > div
	) {
		padding-inline: var(--hb-mobile-card-inset);
		width: 100%;
		max-width: none;
		min-width: 0;
		box-sizing: border-box;
	}

	/* Image wrappers have no inset; the adjacent copy owns its single inset. */
	body.hb-v2-page .story-block > .story-image {
		padding: 0;
	}

	body.hb-v2-page main :is(
		.service-card > .hb-media, .team-grid article > img, .people-image,
		.kinena-home__image, .image-text-block > .hb-media,
		.story-image, .kinena-wide-image
	) {
		width: 100%;
		max-width: 100%;
		min-width: 0;
		margin-inline: 0;
	}

	body.hb-v2-page main :is(
		.service-content, .people-copy, .price-copy, .price-panel,
		.price-table-card > div, .team-grid article > div,
		.statement-body, .kinena-home__copy, .kinena-supporters__project > div,
		.kinena-supporters__group, .image-text-block > div,
		.story-block > div:last-child, .contact-choice > div,
		.cta-band > div, .instagram-banner__copy
	) {
		width: 100%;
		max-width: none;
		min-width: 0;
		box-sizing: border-box;
	}

	/* Natural prose wrapping avoids a ragged narrow column inside a wide box. */
	body.hb-v2-page main :is(p, dd, li) {
		max-width: none;
		min-width: 0;
		text-wrap: wrap;
		word-break: normal;
		overflow-wrap: break-word;
	}

	body.hb-v2-page main :is(
		.service-content, .people-copy, .price-copy, .price-panel,
		.statement-body, .instagram-banner__copy, .kinena-supporters__project,
		.kinena-supporters__group, .cta-band
	) p {
		width: 100%;
		max-width: none;
		box-sizing: border-box;
	}

	/* Sponsor text uses margins instead of a wrapper: never add 100% to those margins. */
	body.hb-v2-page .kinena-sponsor-card :is(span, h4, p) {
		margin-inline: var(--hb-mobile-card-inset);
		width: auto;
		max-width: none;
	}

	/* Put the sequence/check cue above copy instead of reserving a narrow side column. */
	body.hb-v2-page .flow-list li {
		grid-template-columns: minmax(0, 1fr);
	}

	body.hb-v2-page main :is(.concern-grid p, .fit-list p) {
		display: block;
		padding-inline: var(--hb-mobile-card-inset);
	}

	body.hb-v2-page main :is(.concern-grid p, .fit-list p)::before {
		position: static;
		transform: none;
		margin-bottom: 10px;
	}

	/* A menu name and its amount both get a full line without flex shrink. */
	body.hb-v2-page .cafe-menu > div {
		flex-direction: column;
		gap: 8px;
	}
}

/* Typography roles: body copy is regular; all hierarchy and controls are bold. */
body.hb-v2-page {
	font-weight: 400;
}

body.hb-v2-page :is(
	h1,
	h2,
	h3,
	h4,
	h5,
	h6,
	strong,
	b,
	button,
	.button,
	.desktop-nav,
	.mobile-menu summary,
	.eyebrow,
	.mini-label,
	.quick-title,
	.quick-link strong,
	.footer-links,
	.footer-info a,
	.hours-table th,
	.price-table th,
	.faq-list summary
) {
	font-weight: 700;
}

/* =====================================================================
   2.4.0 — Readability, tap targets, first-view and persistent contact.
   Loaded last, so these rules settle the mobile type scale for the whole
   site. Desktop composition is intentionally left unchanged.
   Selectors are written out rather than wrapped in :where(), because the
   rules they override are themselves class-specific.
   ===================================================================== */

/* --- Tap targets: text links were 28px tall against 54px buttons. ----- */
body.hb-v2-page main .text-link,
body.hb-v2-page main .service-content a,
body.hb-v2-page main .inline-link-light,
body.hb-v2-page main .instagram-banner__label {
	min-height: 44px;
	padding-top: 10px;
	padding-bottom: 9px;
}

body.hb-v2-page main .phone,
body.hb-v2-page main .cta-phone,
body.hb-v2-page .footer-links a,
body.hb-v2-page .footer-info a,
body.hb-v2-page .mobile-menu nav a,
body.hb-v2-page .access-list dd a,
body.hb-v2-page .company-list dd a {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
}

@media screen and (max-width: 980px) {
	body.hb-v2-page .mobile-menu nav {
		gap: 4px;
	}
}

/* --- Mobile type scale ----------------------------------------------- */
@media screen and (max-width: 620px) {
	/* Body copy: 12-14px -> 16px. */
	body.hb-v2-page main .hero-lead,
	body.hb-v2-page main .page-hero-copy > p:last-child,
	body.hb-v2-page main .section-intro-text p,
	body.hb-v2-page main .statement-body p,
	body.hb-v2-page main .service-content > p:not(.eyebrow),
	body.hb-v2-page main .service-detail-grid p,
	body.hb-v2-page main .three-points p,
	body.hb-v2-page main .value-grid p,
	body.hb-v2-page main .recruit-work-grid p,
	body.hb-v2-page main .kinena-space-grid p,
	body.hb-v2-page main .kinena-audience-grid p,
	body.hb-v2-page main .growth-flow p,
	body.hb-v2-page main .team-grid p,
	body.hb-v2-page main .company-list dd,
	body.hb-v2-page main .access-list dd,
	body.hb-v2-page main .cta-band p:not(.eyebrow),
	body.hb-v2-page main .faq-list details p,
	body.hb-v2-page main .plain-list li,
	body.hb-v2-page main .price-panel li,
	body.hb-v2-page main .concern-grid p,
	body.hb-v2-page main .fit-list p,
	body.hb-v2-page main .kinena-hero__lead,
	body.hb-v2-page main .instagram-banner__copy p:not(.eyebrow) {
		font-size: 16px;
		line-height: 1.9;
	}

	body.hb-v2-page main .flow-list li p,
	body.hb-v2-page main .step-list p,
	body.hb-v2-page main .price-examples p:not(.mini-label),
	body.hb-v2-page main .price-table-card p:not(.mini-label),
	body.hb-v2-page main .post-card time {
		font-size: 15px;
		line-height: 1.85;
	}

	/* Numbers people act on: price and opening hours. */
	body.hb-v2-page main .price-table th,
	body.hb-v2-page main .price-table td {
		font-size: 15px;
	}

	body.hb-v2-page .hours-table th,
	body.hb-v2-page .hours-table td {
		font-size: 15px;
	}

	/* Labels and notes: 10-12px -> 12-13px. */
	body.hb-v2-page main .eyebrow,
	body.hb-v2-page main .mini-label,
	body.hb-v2-page main .service-detail-grid span,
	body.hb-v2-page main .growth-flow span,
	body.hb-v2-page main .three-points span,
	body.hb-v2-page main .value-grid span {
		font-size: 12px;
	}

	body.hb-v2-page main .small-copy,
	body.hb-v2-page main .source-notice,
	body.hb-v2-page main .price-note,
	body.hb-v2-page main .kinena-supporters ul li {
		font-size: 13px;
		line-height: 1.8;
	}

	body.hb-v2-page .hero-copy .eyebrow,
	body.hb-v2-page main .quick-title {
		font-size: 12px;
	}

	/* Display headings: 38-46px -> 28-34px, so a screen holds more meaning. */
	body.hb-v2-page main .page-hero h1,
	body.hb-v2-page .recruit-page .page-hero.has-image h1 {
		font-size: clamp(28px, 8.2vw, 34px);
		line-height: 1.28;
	}

	body.hb-v2-page main .hero h1 {
		font-size: clamp(30px, 8.8vw, 36px);
		line-height: 1.24;
	}

	body.hb-v2-page main .section-intro h2,
	body.hb-v2-page .recruit-page .section-intro h2,
	body.hb-v2-page main .section-head h2,
	body.hb-v2-page main .statement h2,
	body.hb-v2-page main .cta-band h2,
	body.hb-v2-page main .image-text-block h2,
	body.hb-v2-page main .story-block h2,
	body.hb-v2-page main .contact-choice h2,
	body.hb-v2-page main .price-copy h2,
	body.hb-v2-page main .people-copy h2,
	body.hb-v2-page main .access-teaser h2,
	body.hb-v2-page main .kinena-home__copy h2,
	body.hb-v2-page main .instagram-banner__copy h2 {
		font-size: clamp(26px, 7.4vw, 31px);
		line-height: 1.34;
	}

	body.hb-v2-page main .philosophy-block h2 {
		font-size: clamp(26px, 7.6vw, 32px);
		line-height: 1.3;
	}

	body.hb-v2-page main .flow-list h3,
	body.hb-v2-page main .recruit-work-grid h3,
	body.hb-v2-page main .three-points h3,
	body.hb-v2-page main .value-grid h3,
	body.hb-v2-page main .service-content h3,
	body.hb-v2-page main .service-detail-grid h3,
	body.hb-v2-page main .team-grid h3,
	body.hb-v2-page main .price-table-card h3,
	body.hb-v2-page main .kinena-space-grid h3,
	body.hb-v2-page main .kinena-audience-grid h3,
	body.hb-v2-page main .price-panel h3,
	body.hb-v2-page main .contact-choice h3,
	body.hb-v2-page main .post-card h2 {
		font-size: 19px;
		line-height: 1.5;
	}

	body.hb-v2-page main .statement-lead {
		font-size: 19px;
		line-height: 1.7 !important;
	}

	body.hb-v2-page main .faq-list summary {
		font-size: 16px;
		padding-block: 20px;
	}

	body.hb-v2-page main .step-list strong,
	body.hb-v2-page main .culture-words span {
		font-size: 28px;
	}
}

/* --- First view: let the purpose nav show below the fold. ------------- */
@media screen and (max-width: 620px) {
	body.hb-v2-page .hero-visual {
		height: clamp(230px, 62vw, 280px);
	}

	body.hb-v2-page .hero-note {
		bottom: 58px;
		font-size: clamp(23px, 6.6vw, 28px);
	}

	body.hb-v2-page .hero-copy {
		margin-top: -40px;
		padding: 28px 20px 32px;
	}

	body.hb-v2-page .hero-lead {
		margin-top: 20px;
	}

	body.hb-v2-page .hero-copy .button-row {
		margin-top: 24px;
	}

	body.hb-v2-page .quick-nav {
		padding-top: 22px;
	}

	/* Lower-page heroes: same treatment, so the first section is reachable. */
	body.hb-v2-page .page-hero.has-image .page-hero-image {
		height: clamp(220px, 58vw, 270px);
		min-height: 0;
	}

	body.hb-v2-page .page-hero.has-image .page-hero-copy {
		padding-top: 28px;
		padding-bottom: 34px;
	}
}

/* --- Header CTA on phones ---------------------------------------------
   The fixed bar at the bottom of the screen already carries LINE, and it
   sits closer to the thumb. Two LINE buttons on screen at once made the
   header the loudest thing on the page and squeezed the logo to 112px.
   Below 620px the header drops its CTA; the drawer still holds the link.
   From 621px up there is no bottom bar, so the header keeps its CTA.
   -------------------------------------------------------------------- */
@media screen and (max-width: 620px) {
	body.hb-v2-page .site-header .header-cta[href^="https://lin.ee/"] {
		display: none !important;
	}

	/* Give the logo back the width it had before the CTA was squeezed in. */
	body.hb-v2-page .site-header .brand {
		width: 145px;
		max-width: 145px;
		flex: 0 0 145px;
	}

	body.hb-v2-page .site-header {
		gap: 16px;
		padding-inline: 20px;
	}
}

/* --- Persistent contact on mobile ------------------------------------ */
.hb-mobile-cta {
	display: none;
}

@media screen and (max-width: 620px) {
	body.hb-v2-page .hb-mobile-cta {
		position: fixed;
		z-index: 40;
		bottom: 0;
		left: 0;
		right: 0;
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: 1px;
		background: var(--line);
		border-top: 1px solid var(--line);
		box-shadow: 0 -6px 20px rgba(36, 56, 58, 0.14);
	}

	body.hb-v2-page .hb-mobile-cta a {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		gap: 2px;
		min-height: 58px;
		padding: 8px 6px;
		font-size: 14px;
		font-weight: 700;
		line-height: 1.3;
		text-align: center;
	}

	body.hb-v2-page .hb-mobile-cta__tel {
		background: var(--paper);
		color: var(--ink);
	}

	body.hb-v2-page .hb-mobile-cta__tel span {
		font-family: Arial, sans-serif;
		font-size: 12px;
		font-weight: 700;
		letter-spacing: 0.02em;
		color: var(--teal);
	}

	/* Colour comes from the site-wide official-LINE rule above, badge included. */
	body.hb-v2-page .hb-mobile-cta__line {
		border: 0;
	}

	/* Keep the bar from covering the last line of every page. */
	body.hb-v2-page .site-footer {
		padding-bottom: 88px;
	}
}

/* --- Vertical rhythm on mobile: the page was spending screens on air. -- */
@media screen and (max-width: 620px) {
	body.hb-v2-page main .section-pad,
	body.hb-v2-page main .sub-section,
	body.hb-v2-page main .philosophy-block {
		padding-top: 56px;
		padding-bottom: 56px;
	}

	body.hb-v2-page main .cta-band {
		padding-top: 52px;
		padding-bottom: 52px;
	}

	body.hb-v2-page main .philosophy-block {
		gap: 40px;
	}

	body.hb-v2-page main .section-intro,
	body.hb-v2-page main .section-head {
		margin-bottom: 32px;
	}

	body.hb-v2-page main .step-list li {
		min-height: 0;
		padding: 22px;
	}

	body.hb-v2-page main .step-list p {
		margin-top: 16px;
	}

	body.hb-v2-page main .culture-words span {
		min-height: 108px;
	}

	body.hb-v2-page main .metric-strip span {
		min-height: 88px;
	}

	body.hb-v2-page .people-copy,
	body.hb-v2-page .kinena-home__copy {
		padding-top: 52px;
		padding-bottom: 52px;
	}

	body.hb-v2-page .people-image {
		min-height: 300px;
	}

	body.hb-v2-page .story-image,
	body.hb-v2-page .image-text-block .hb-media {
		min-height: 320px;
	}

	body.hb-v2-page .contact-choice > div {
		padding-top: 56px;
		padding-bottom: 56px;
	}

	/* First view, second pass: keep the purpose nav clearly in reach. */
	body.hb-v2-page .hero-visual {
		height: clamp(210px, 56vw, 255px);
	}

	body.hb-v2-page .hero-copy {
		padding: 26px 20px 28px;
	}

	body.hb-v2-page main .hero h1 {
		font-size: clamp(28px, 8.2vw, 33px);
	}
}

/* --- Final first-view balance: the purpose nav must clear the CTA bar. - */
@media screen and (max-width: 620px) {
	body.hb-v2-page .hb-mobile-cta a {
		min-height: 52px;
		padding: 6px;
	}

	body.hb-v2-page .hero-copy {
		padding-bottom: 22px;
	}

	body.hb-v2-page .hero-lead {
		margin-top: 16px;
	}

	body.hb-v2-page .hero-copy .button-row {
		margin-top: 20px;
		gap: 10px;
	}

	body.hb-v2-page .quick-nav {
		padding-top: 18px;
	}
}

/* Japanese section labels: the 0.16em tracking is tuned for Latin caps. */
body.hb-v2-page main .eyebrow-ja {
	letter-spacing: 0.06em;
}

/* =====================================================================
   2.4.2 — Prices in yen on the service pages, and sibling navigation.
   ===================================================================== */

/* Menu rows now carry a figure plus the make-up of that figure. */
body.hb-v2-page main .menu-lines strong small {
	display: block;
	margin-top: 6px;
	font-size: 13px;
	font-weight: 400;
	line-height: 1.6;
	color: var(--ink-2);
}

/* Sibling services: the detail pages had no way across to each other. */
body.hb-v2-page main .sibling-services {
	padding: 56px clamp(24px, 7vw, 112px);
	background: var(--paper);
	border-top: 1px solid var(--line);
}

body.hb-v2-page main .sibling-services .eyebrow {
	margin-bottom: 20px;
}

body.hb-v2-page main .sibling-services__list {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 12px;
}

body.hb-v2-page main .sibling-services__list a {
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 6px;
	min-height: 84px;
	padding: 18px 20px;
	background: var(--cream);
	border-bottom: 3px solid var(--ink);
	transition: background .2s;
}

body.hb-v2-page main .sibling-services__list a:hover,
body.hb-v2-page main .sibling-services__list a:focus-visible {
	background: var(--lime);
}

body.hb-v2-page main .sibling-services__list strong {
	font-size: 18px;
	line-height: 1.4;
}

body.hb-v2-page main .sibling-services__list span {
	font-size: 14px;
	line-height: 1.6;
	color: var(--ink-2);
}

@media screen and (max-width: 980px) {
	body.hb-v2-page main .sibling-services__list {
		grid-template-columns: 1fr;
	}
}

@media screen and (max-width: 620px) {
	body.hb-v2-page main .sibling-services {
		padding: 40px 24px;
	}

	body.hb-v2-page main .sibling-services__list {
		gap: 8px;
	}

	body.hb-v2-page main .sibling-services__list a {
		min-height: 0;
		padding: 14px 16px;
	}

	body.hb-v2-page main .sibling-services__list strong {
		font-size: 17px;
	}

	body.hb-v2-page main .menu-lines strong small {
		font-size: 14px;
	}
}

/* =====================================================================
   2.5.0 — Price section rebuilt from the 2026 user guide, with the
   detail pushed to the PDF instead of onto the page.
   ===================================================================== */

.visually-hidden {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* Group headings inside the price section: a rung below the section h2. */
body.hb-v2-page main .price-group-title {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 6px 14px;
	margin: 52px 0 18px;
	padding-bottom: 12px;
	border-bottom: 2px solid var(--ink);
	font-size: clamp(21px, 2.2vw, 27px);
	line-height: 1.4;
}

body.hb-v2-page main .price-group-title:first-of-type {
	margin-top: 8px;
}

body.hb-v2-page main .price-group-title span {
	font-size: 13px;
	font-weight: 700;
	letter-spacing: .06em;
	color: var(--teal);
}

body.hb-v2-page main .price-note-inline {
	margin: 16px 0 0;
	font-size: 14px;
	line-height: 1.9;
	color: var(--ink-2);
}

body.hb-v2-page main .menu-lines-compact > div {
	grid-template-columns: 1fr auto;
	padding-block: 18px;
}

body.hb-v2-page main .discount-points article {
	min-height: 0;
	padding: 26px;
	background: var(--white);
}

body.hb-v2-page main .discount-points h3 {
	margin: 0 0 12px;
	font-size: 21px;
}

/* Member vs visitor: the one comparison that decides which price applies. */
body.hb-v2-page main .plan-compare {
	overflow-x: auto;
	background: var(--white);
}

body.hb-v2-page main .plan-compare table {
	border-collapse: collapse;
	width: 100%;
	min-width: 560px;
}

body.hb-v2-page main .plan-compare th,
body.hb-v2-page main .plan-compare td {
	padding: 16px 18px;
	text-align: left;
	border-bottom: 1px solid var(--line);
	vertical-align: top;
	line-height: 1.6;
}

body.hb-v2-page main .plan-compare thead th {
	background: var(--ink);
	color: var(--white);
	font-size: 14px;
	letter-spacing: .04em;
}

body.hb-v2-page main .plan-compare thead th:last-child {
	background: var(--teal);
}

body.hb-v2-page main .plan-compare tbody th {
	width: 38%;
	font-size: 15px;
}

body.hb-v2-page main .plan-compare tbody td {
	font-size: 16px;
	font-weight: 700;
}

body.hb-v2-page main .plan-compare tbody td:last-child {
	background: #fff6ec;
}

body.hb-v2-page main .plan-compare small {
	display: block;
	margin-top: 4px;
	font-size: 13px;
	font-weight: 400;
	color: var(--ink-2);
}

/* The guide link: one place that says "the rest is in the PDF". */
body.hb-v2-page main .guide-cta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 24px 40px;
	margin: 48px 0 0;
	padding: 32px 34px;
	background: var(--white);
	border-left: 6px solid var(--teal);
}

body.hb-v2-page main .guide-cta h3 {
	margin: 8px 0 12px;
	font-size: clamp(20px, 2vw, 26px);
	line-height: 1.45;
}

body.hb-v2-page main .guide-cta p:not(.eyebrow) {
	margin: 0;
	max-width: 62ch;
	font-size: 15px;
	line-height: 1.9;
	color: var(--ink-2);
}

body.hb-v2-page main .guide-cta .eyebrow {
	margin-bottom: 0;
}

body.hb-v2-page main .guide-cta .button {
	flex: none;
}

body.hb-v2-page main .guide-cta-compact {
	margin: 0;
	border-top: 1px solid var(--line);
	border-left: 6px solid var(--teal);
	padding: 28px clamp(24px, 7vw, 112px);
	background: var(--cream);
}

body.hb-v2-page main .guide-cta-compact h3 {
	margin: 8px 0 0;
}

@media screen and (max-width: 620px) {
	body.hb-v2-page main .price-group-title {
		margin: 40px 0 16px;
		font-size: 20px;
	}

	body.hb-v2-page main .price-group-title span {
		font-size: 12px;
	}

	body.hb-v2-page main .plan-compare table {
		min-width: 0;
		display: block;
	}

	body.hb-v2-page main .plan-compare thead {
		position: absolute;
		width: 1px;
		height: 1px;
		margin: -1px;
		overflow: hidden;
		clip: rect(0, 0, 0, 0);
	}

	body.hb-v2-page main .plan-compare tbody {
		display: grid;
		gap: 10px;
	}

	body.hb-v2-page main .plan-compare tbody tr {
		display: grid;
		grid-template-columns: 1fr 1fr;
		background: var(--white);
		border-left: 4px solid var(--teal);
		padding: 14px 16px;
	}

	body.hb-v2-page main .plan-compare tbody th {
		grid-column: 1 / -1;
		width: auto;
		padding: 0 0 10px;
		border-bottom: 1px solid var(--line);
		font-size: 16px;
	}

	body.hb-v2-page main .plan-compare tbody td {
		padding: 10px 0 0;
		border-bottom: 0;
		font-size: 15px;
	}

	body.hb-v2-page main .plan-compare tbody td:last-child {
		background: transparent;
		padding-left: 12px;
	}

	body.hb-v2-page main .plan-compare tbody td::before {
		display: block;
		margin-bottom: 3px;
		font-size: 11px;
		font-weight: 700;
		letter-spacing: .1em;
		color: var(--teal);
	}

	body.hb-v2-page main .plan-compare tbody td:nth-child(2)::before { content: "ビジター"; }
	body.hb-v2-page main .plan-compare tbody td:nth-child(3)::before { content: "パーソナル会員"; }

	body.hb-v2-page main .guide-cta {
		margin-top: 36px;
		padding: 26px 20px;
	}

	body.hb-v2-page main .guide-cta .button {
		width: 100%;
	}

	body.hb-v2-page main .guide-cta-compact {
		padding: 26px 24px;
	}
}

/* Compressed replacements for the fee and discount card grids. */
body.hb-v2-page main .price-lede {
	margin: 0;
	max-width: 74ch;
	font-size: 16px;
	line-height: 1.95;
	color: var(--ink-2);
}

body.hb-v2-page main .price-lede strong {
	color: var(--ink);
}

/* The service map reuses the compact card used on the detail pages. */
body.hb-v2-page main .service-map-list {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 12px;
}

body.hb-v2-page main .service-map-list a {
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 6px;
	min-height: 92px;
	padding: 20px 22px;
	background: var(--cream);
	border-bottom: 3px solid var(--ink);
	transition: background .2s;
}

body.hb-v2-page main .service-map-list a:hover,
body.hb-v2-page main .service-map-list a:focus-visible {
	background: var(--lime);
}

body.hb-v2-page main .service-map-list strong {
	font-size: 19px;
	line-height: 1.4;
}

body.hb-v2-page main .service-map-list span {
	font-size: 14px;
	line-height: 1.6;
	color: var(--ink-2);
}

@media screen and (max-width: 980px) {
	body.hb-v2-page main .service-map-list {
		grid-template-columns: 1fr;
	}
}

@media screen and (max-width: 620px) {
	body.hb-v2-page main .service-map-list {
		gap: 8px;
	}

	body.hb-v2-page main .service-map-list a {
		min-height: 0;
		padding: 16px 18px;
	}

	body.hb-v2-page main .service-map-list strong {
		font-size: 17px;
	}
}

/* =====================================================================
   2.6.0 — Notice blocks: conditions and caveats that need to be read,
   not the small grey print the old source-notice was.
   ===================================================================== */
body.hb-v2-page main .notice-block {
	margin: 38px 0 0;
	padding: 28px 30px;
	background: var(--white);
	border-left: 6px solid var(--teal);
}

body.hb-v2-page main .notice-block h3 {
	margin: 0 0 12px;
	font-size: clamp(18px, 1.8vw, 22px);
	line-height: 1.5;
}

body.hb-v2-page main .notice-block p {
	margin: 0 0 12px;
	max-width: 74ch;
	font-size: 15px;
	line-height: 1.95;
	color: var(--ink-2);
}

body.hb-v2-page main .notice-block p:last-of-type {
	margin-bottom: 0;
}

body.hb-v2-page main .notice-block strong {
	color: var(--ink);
}

body.hb-v2-page main .notice-block .button {
	margin-top: 20px;
}

body.hb-v2-page main .dark-block .notice-block {
	background: rgba(255, 255, 255, .08);
}

@media screen and (max-width: 620px) {
	body.hb-v2-page main .notice-block {
		margin-top: 28px;
		padding: 22px 20px;
	}

	body.hb-v2-page main .notice-block p {
		font-size: 16px;
	}

	body.hb-v2-page main .notice-block .button {
		width: 100%;
	}
}

/* =====================================================================
   2.7.0 — Medifoot takes the third service slot on the home page.
   The source photo is a wide crop, so bias the visible area to the foot.
   ===================================================================== */
body.hb-v2-page main .service-card-medifoot > .hb-media > img {
	object-position: center 62%;
}

@media screen and (max-width: 620px) {
	body.hb-v2-page main .service-card-medifoot > .hb-media {
		aspect-ratio: 1.6;
	}
}


/* =====================================================================
   2.8.0 — News and columns share one list, separated by tabs.
   The card gains a kind tag, and columns gain a two-line excerpt.
   ===================================================================== */

/* Tabs ---------------------------------------------------------------- */
body.hb-v2-page main .post-tabs {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 0 0 32px;
}

body.hb-v2-page main .post-tabs__item {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	padding: 0 22px;
	background: var(--white);
	border: 1px solid var(--ink);
	font-size: 14px;
	font-weight: 700;
	transition: background .2s, color .2s;
}

body.hb-v2-page main .post-tabs__item:hover,
body.hb-v2-page main .post-tabs__item:focus-visible {
	background: var(--lime);
}

body.hb-v2-page main .post-tabs__item.is-current {
	background: var(--ink);
	border-color: var(--ink);
	color: var(--paper);
}

/* Card ---------------------------------------------------------------- */
body.hb-v2-page main .post-card__meta {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 8px;
}

body.hb-v2-page main .post-card__body {
	display: flex;
	flex-direction: column;
	gap: 8px;
	min-width: 0;
}

body.hb-v2-page main .post-card__title {
	font-size: clamp(17px, 1.8vw, 23px);
	font-weight: 700;
	line-height: 1.5;
}

body.hb-v2-page main .post-card__excerpt {
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	font-size: 14px;
	font-weight: 400;
	line-height: 1.8;
	color: var(--ink-2);
}

body.hb-v2-page main .post-tag {
	display: inline-flex;
	align-items: center;
	padding: 2px 9px;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .06em;
	line-height: 1.7;
	white-space: nowrap;
}

body.hb-v2-page main .post-tag-news {
	background: var(--cream);
	color: var(--teal-dark);
}

body.hb-v2-page main .post-tag-column {
	background: var(--ink);
	color: var(--paper);
}

/* The home page keeps the compact three-line preview. */
body.hb-v2-page main .home-news-social .post-card__title {
	font-size: clamp(16px, 1.6vw, 21px);
}

body.hb-v2-page main .home-news-social .post-card__meta {
	flex-direction: row;
	align-items: center;
	gap: 10px;
}

/* Routes out of an article --------------------------------------------- */
body.hb-v2-page main .post-routes {
	border-top: 1px solid var(--line);
}

body.hb-v2-page main .post-routes__back {
	margin-top: 24px;
}

@media screen and (max-width: 600px) {
	/* The date and tag take their own row, then title and arrow. */
	body.hb-v2-page main .post-card {
		grid-template-columns: minmax(0, 1fr) auto;
	}

	body.hb-v2-page main .post-card__meta {
		grid-column: 1 / -1;
		flex-direction: row;
		align-items: center;
		gap: 10px;
	}

	body.hb-v2-page main .post-tabs {
		gap: 6px;
		margin-bottom: 24px;
	}

	body.hb-v2-page main .post-tabs__item {
		padding: 0 16px;
		font-size: 13px;
	}

	body.hb-v2-page main .post-card__excerpt {
		font-size: 15px;
	}
}

/* The posts pages open on a list, not on a statement: keep the header short. */
body.hb-v2-page .posts-page .page-hero:not(.has-image) .page-hero-copy {
	min-height: 0;
	padding-block: clamp(56px, 6vw, 88px);
}

body.hb-v2-page .posts-page .page-hero h1 {
	font-size: clamp(28px, 3.4vw, 46px);
}

body.hb-v2-page .posts-page > .sub-section {
	padding-top: clamp(48px, 5vw, 72px);
}

@media screen and (max-width: 620px) {
	body.hb-v2-page .posts-page .page-hero:not(.has-image) .page-hero-copy {
		padding: 40px 24px 36px;
	}

	body.hb-v2-page .posts-page > .sub-section {
		padding-top: 36px;
	}
}

/* =====================================================================
   2.8.3 — Fixes found on an actual iPhone.
   ===================================================================== */

/* The KINE-NA block was inset by the shared mobile gutter, so its photo
   stopped short of both edges while the sections around it ran full width.
   Give the section the full screen and move the gutter onto the copy. */
@media screen and (max-width: 620px) {
	body.hb-v2-page main > .kinena-home {
		width: 100%;
		margin-inline: 0;
	}

	/* The shared card-inset rule wins on specificity, so redefine the value
	   it reads instead of fighting it: this block sits on the page gutter,
	   not inside a card. */
	body.hb-v2-page main > .kinena-home > .kinena-home__copy {
		--hb-mobile-card-inset: var(--hb-mobile-gutter, 24px);
	}
}

/* The Instagram band showed its raw gradient in the section padding while
   the link area sat under a dark overlay, leaving a seam top and bottom.
   Removing the padding makes the overlay cover the whole band. */
@media screen and (max-width: 620px) {
	body.hb-v2-page main .instagram-banner {
		padding: 0;
	}
}

/* The label was inheriting the brand rust and disappearing into the
   gradient behind it. */
body.hb-v2-page main .instagram-banner .eyebrow,
body.hb-v2-page main .instagram-banner .eyebrow.light {
	color: #fff;
}

body.hb-v2-page main .instagram-banner .eyebrow::before {
	background-color: #fff;
}

/* Footer links were 44px tall with another 14px of gap between them, so a
   nine-item list read as nine separate blocks. The tap target stays 44px;
   the gap goes, and the type comes up to match the rest of the site. */
@media screen and (max-width: 620px) {
	body.hb-v2-page .site-footer {
		padding-top: 48px;
	}

	body.hb-v2-page .footer-main {
		gap: 28px;
	}

	body.hb-v2-page .footer-links {
		gap: 0;
		font-size: 15px;
	}

	body.hb-v2-page .footer-info {
		display: flex;
		flex-direction: column;
		gap: 14px;
	}
}

/* =====================================================================
   2.10.0 — A background rhythm for the whole site, and desktop fixes.
   ===================================================================== */

/* --- Section rhythm ---------------------------------------------------
   The warm palette mapped almost every block to cream, so neighbouring
   sections ran together in 13 places across the site. Alternate paper and
   cream down every page instead: whatever the section order becomes, two
   neighbours can never share a background.
   The hero keeps its photograph, and the access band keeps the one accent.
   -------------------------------------------------------------------- */
/* `:not(.hero)` is here for weight as much as for the exclusion: the warm
   palette sets these blocks to cream through an :is() list, and the rhythm
   has to outrank it. The hero keeps its photograph either way. */
body.hb-v2-page main > :not(.hero):nth-child(odd) {
	background-color: var(--paper);
}

body.hb-v2-page main > :not(.hero):nth-child(even) {
	background-color: var(--cream);
}

/* One accent on the home page, for the block that carries the address. */
body.hb-v2-page main > .access-teaser:nth-child(n) {
	background-color: var(--lime);
}

/* --- Footer: compact on every width ----------------------------------
   Each link is a 44px row and had another 14px of gap on top of that.
   Drop the gap, and split the nine items into two columns on desktop.
   -------------------------------------------------------------------- */
body.hb-v2-page .footer-links {
	gap: 0;
}

@media screen and (min-width: 981px) {
	body.hb-v2-page .footer-links {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		column-gap: 28px;
		font-size: 14px;
	}

	body.hb-v2-page .footer-main {
		gap: 48px;
	}

	body.hb-v2-page .site-footer {
		padding-top: 60px;
	}
}

/* --- News card: the kind tag was running into the title --------------- */
/* この3列指定にメディアクエリが無く、しかも600px以下用の2列指定より後ろに
   あったため、モバイルでも3列のままだった。日付・種別は全幅の行へ回って
   いるので、タイトルが先頭150pxの列に閉じ込められ、右に165pxの空白が
   残っていた。601px以上に限定する。 */
@media screen and (min-width: 601px) {
	body.hb-v2-page main .post-card {
		grid-template-columns: 150px minmax(0, 1fr) auto;
	}
}

body.hb-v2-page main .home-news-social .post-card__meta {
	flex-direction: column;
	align-items: flex-start;
	gap: 6px;
}

/* --- First visit: lift the contents of the trial into a panel --------- */
body.hb-v2-page .first-visit-page .dark-block .section-intro-text {
	padding: 32px 36px;
	background: var(--white);
	border-left: 6px solid var(--teal);
}

body.hb-v2-page .first-visit-page .dark-block .section-intro-text > p:first-child {
	margin-top: 0;
}

body.hb-v2-page .first-visit-page .dark-block .plain-list {
	margin-bottom: 0;
}

@media screen and (max-width: 620px) {
	body.hb-v2-page .first-visit-page .dark-block .section-intro-text {
		padding: 24px 20px;
	}
}

/* --- Price section: less air between the groups ----------------------- */
@media screen and (min-width: 621px) {
	body.hb-v2-page .services-page #price {
		padding-block: clamp(64px, 6vw, 96px);
	}

	body.hb-v2-page main .price-group-title {
		margin: 40px 0 16px;
	}

	body.hb-v2-page main .menu-lines > div {
		padding-block: 20px;
	}

	body.hb-v2-page main .plan-compare th,
	body.hb-v2-page main .plan-compare td {
		padding-block: 12px;
	}

	body.hb-v2-page main .price-stack {
		margin-bottom: 0;
	}

	body.hb-v2-page main .guide-cta {
		margin-top: 36px;
	}
}

/* --- Privacy policy: same rhythm as the price page -------------------- */
body.hb-v2-page .policy-body {
	max-width: 860px;
	margin: 0 auto;
}

body.hb-v2-page .policy-body .price-group-title {
	font-size: clamp(19px, 1.9vw, 24px);
}

body.hb-v2-page .policy-body .price-lede + .price-lede {
	margin-top: 14px;
}

body.hb-v2-page .policy-body .plain-list {
	margin-top: 14px;
}

body.hb-v2-page .policy-body .company-list {
	margin-top: 20px;
}

body.hb-v2-page .policy-body .policy-date {
	margin-top: 48px;
}

@media screen and (max-width: 620px) {
	body.hb-v2-page .policy-body .price-group-title {
		font-size: 18px;
	}
}

/* Inline links inside running text keep the text's own rhythm rather than a
   44px block; underline them so they are still obviously tappable. */
body.hb-v2-page .policy-body p a {
	text-decoration: underline;
	text-underline-offset: 4px;
	padding-block: 4px;
}

/* =====================================================================
   2.11.0 — Cards instead of rules.
   Two problems fed each other: several cards were filled with cream, and
   the background rhythm in 2.10.0 then put them on cream sections, so they
   lost their edges. Everything else was separated by hairlines only, which
   reads as a run of lines rather than a set of blocks.
   One surface for every card — white with a 1px rule — so a block is a
   block on any section, and the lists that were only lines become cards.
   ===================================================================== */

body.hb-v2-page main :is(
	.three-points article,
	.value-grid article,
	.growth-flow li,
	.service-detail-grid > a,
	.service-map-list > a,
	.sibling-services__list > a,
	.service-card,
	.price-table-card,
	.price-examples article,
	.team-grid article,
	.recruit-work-grid article,
	.kinena-space-grid article,
	.kinena-audience-grid article,
	.menu-lines > div,
	.notice-block,
	.guide-cta
) {
	background: var(--white);
	border: 1px solid var(--line);
}

/* Accents that identify a card keep their weight on top of the rule. */
body.hb-v2-page main :is(.service-card, .service-detail-grid > a, .service-map-list > a, .sibling-services__list > a) {
	border-bottom-width: 4px;
	border-bottom-color: var(--ink);
}

body.hb-v2-page main :is(.price-table-card, .notice-block, .guide-cta) {
	border-left-width: 6px;
	border-left-color: var(--teal);
}

/* --- Menus become a stack of cards ------------------------------------
   The group heading already carries a 2px rule, and the list added its own
   1px rule directly beneath it, so every menu opened with a double line.
   -------------------------------------------------------------------- */
body.hb-v2-page main .menu-lines {
	display: grid;
	gap: 12px;
	border-top: 0;
}

body.hb-v2-page main .menu-lines > div {
	border-bottom: 1px solid var(--line);
	padding: 22px 24px;
	align-items: start;
	gap: 12px 30px;
}

/* The icon is an inline ::before, so a two-line name wrapped underneath it
   and broke mid-word. Lay the heading out as icon + text instead. */
body.hb-v2-page main .menu-lines h3,
body.hb-v2-page main .cafe-menu span,
body.hb-v2-page main .flow-list h3,
body.hb-v2-page main .company-list dt,
body.hb-v2-page main .access-list dt {
	display: flex;
	align-items: flex-start;
	gap: 10px;
}

body.hb-v2-page main .menu-lines h3,
body.hb-v2-page main .cafe-menu span {
	font-size: 19px;
	line-height: 1.5;
}

body.hb-v2-page main .menu-lines h3::before,
body.hb-v2-page main .cafe-menu span::before,
body.hb-v2-page main .flow-list h3::before,
body.hb-v2-page main .company-list dt::before,
body.hb-v2-page main .access-list dt::before {
	flex: none;
	margin-right: 0;
	margin-top: 2px;
}

body.hb-v2-page main .menu-lines strong {
	font-size: 19px;
}

/* --- Comparison table gets a frame ------------------------------------ */
body.hb-v2-page main .plan-compare {
	border: 1px solid var(--line);
}

body.hb-v2-page main .plan-compare tbody tr:last-child th,
body.hb-v2-page main .plan-compare tbody tr:last-child td {
	border-bottom: 0;
}

/* --- Steps, concerns and the flow read as blocks, not as rules -------- */
body.hb-v2-page main :is(.concern-grid, .fit-list, .step-list, .flow-list, .faq-list) {
	border-top: 0;
	border-left: 0;
}

body.hb-v2-page main :is(.concern-grid p, .fit-list p, .step-list li, .flow-list > li, .faq-list details) {
	background: var(--white);
	border: 1px solid var(--line);
}

body.hb-v2-page main :is(.concern-grid, .fit-list) {
	display: grid;
	gap: 12px;
}

body.hb-v2-page main .step-list {
	gap: 12px;
}

body.hb-v2-page main .flow-list {
	display: grid;
	gap: 12px;
}

body.hb-v2-page main .flow-list > li {
	padding: 24px 26px;
}

body.hb-v2-page main .flow-list > li:last-child {
	border-bottom: 1px solid var(--line);
}

body.hb-v2-page main .faq-list {
	display: grid;
	gap: 10px;
}

body.hb-v2-page main .faq-list details {
	padding: 0 18px;
}

body.hb-v2-page main .cafe-menu div {
	background: var(--white);
	border: 1px solid var(--line);
	padding: 16px 20px;
}

body.hb-v2-page main .cafe-menu {
	gap: 10px;
}

@media screen and (max-width: 620px) {
	body.hb-v2-page main .menu-lines > div {
		padding: 20px;
	}

	body.hb-v2-page main .flow-list > li {
		padding: 20px;
	}

	body.hb-v2-page main .plan-compare tbody tr {
		border: 1px solid var(--line);
		border-left-width: 4px;
		border-left-color: var(--teal);
	}
}

/* Long names carry their own spaces and brackets; break there, not mid-word. */
body.hb-v2-page main .menu-lines h3,
body.hb-v2-page main .flow-list h3 {
	word-break: keep-all;
	overflow-wrap: anywhere;
}

@media screen and (max-width: 620px) {
	body.hb-v2-page main .menu-lines h3,
	body.hb-v2-page main .menu-lines strong {
		font-size: 17px;
	}
}

/* =====================================================================
   2.12.0 — Three fixes reported from an iPhone.
   ===================================================================== */

/* 1. CONTACT: the band stacked on mobile with a 50px flex gap on top of
   64px of inner padding on each half, so the button sat ~180px below the
   sentence that asks for the tap. Collapse the inner padding and let the
   band's own padding own the vertical rhythm. */
@media screen and (max-width: 620px) {
	body.hb-v2-page main .cta-band {
		gap: 22px;
		padding-top: 48px;
		padding-bottom: 48px;
	}

	body.hb-v2-page main .cta-band > div,
	body.hb-v2-page main .cta-band > .cta-actions {
		padding-block: 0;
	}

	body.hb-v2-page main .cta-band p:not(.eyebrow) {
		margin-top: 14px;
	}

	body.hb-v2-page main .cta-actions {
		gap: 16px;
		width: 100%;
	}
}

/* 2. Full-bleed image/copy modules were inset by the shared mobile gutter,
   so their background stopped short of both screen edges while the sections
   above and below ran edge to edge. Same fix as KINE-NA in 2.8.3: give the
   module the full screen and move the gutter onto its copy column. */
@media screen and (max-width: 620px) {
	body.hb-v2-page main > .story-block,
	body.hb-v2-page main > .image-text-block,
	body.hb-v2-page main > .contact-choice {
		width: 100%;
		margin-inline: 0;
	}

	body.hb-v2-page main > .story-block > div:last-child,
	body.hb-v2-page main > .image-text-block > div,
	body.hb-v2-page main > .contact-choice > div {
		--hb-mobile-card-inset: var(--hb-mobile-gutter, 24px);
	}
}

/* 3. BODY DOCK metrics: five full-width bars, each a 28px icon inside a
   120px box. Make them a compact card grid so the box matches its content. */
body.hb-v2-page main .metric-strip {
	display: grid;
	grid-template-columns: repeat(5, minmax(0, 1fr));
	gap: 10px;
	border: 0;
}

body.hb-v2-page main .metric-strip span {
	background: var(--white);
	border: 1px solid var(--line);
	justify-content: center;
	min-height: 98px;
	padding: 18px 8px;
	font-size: 14px;
	gap: 8px;
}

@media screen and (max-width: 980px) {
	body.hb-v2-page main .metric-strip {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

@media screen and (max-width: 620px) {
	body.hb-v2-page main .metric-strip {
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: 8px;
	}

	body.hb-v2-page main .metric-strip span {
		min-height: 76px;
		padding: 12px 4px;
		font-size: 12px;
		gap: 6px;
	}

	body.hb-v2-page main .metric-strip span::before {
		width: 22px;
		height: 22px;
	}
}

/* Caught by the width sweep: the map iframe kept its intrinsic 300px width
   plus the section gutter, pushing the 320px viewport 4px sideways. */
body.hb-v2-page main .access-map iframe {
	width: 100%;
	max-width: 100%;
}

/* =====================================================================
   2.13.0 — 写真の枠組み

   これまで下層ページのヘッダーは2種類あった。写真を横に置く分割型が6
   ページ、写真のない帯が5ページ。どのページから入ったかで、サイトの形
   が変わって見えていた。

   ここで全ページを1つの型にそろえる。左に文章、右に画像。まだ写真の無
   いページには、同じ位置・同じ比率で、ロゴを置いたブランドのパネルを
   入れる。写真が用意できたら、そのままパネルと差し替わる。

   あわせて、写真が入ると理解が進む箇所に空の枠（写真準備中）を置いた。
   枠は「まだ無い」ことを隠さずに見せるためのもので、カスタマイザーの
   チェックひとつで消える。
   ===================================================================== */

/* --- 共通の写真枠 ----------------------------------------------------- */

body.hb-v2-page main .hb-photo {
	position: relative;
	display: block;
	width: 100%;
	margin: 0;
	overflow: hidden;
	background: var(--cream);
}

body.hb-v2-page main .hb-photo--filled img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	filter: saturate(.85) contrast(1.02);
}

/* 空の枠。灰色の「NO IMAGE」ではなく、サイトの紙色と罫線で組んだ面に
   する。並んだときに壊れて見えず、写真が入れば静かに置き換わる。 */
body.hb-v2-page main .hb-photo--empty {
	display: grid;
	place-content: center;
	justify-items: center;
	gap: 14px;
	padding: 24px;
	text-align: center;
	background-color: var(--cream);
	background-image:
		repeating-linear-gradient(
			135deg,
			transparent 0 11px,
			rgba(92, 70, 56, .045) 11px 12px
		);
	border: 1px solid var(--line);
	outline: 1px solid var(--paper);
	outline-offset: -7px;
}

body.hb-v2-page main .hb-photo--empty .hb-photo__mark {
	width: 34px;
	height: 34px;
	background-color: var(--teal);
	opacity: .55;
	-webkit-mask: url("../icons/lucide/image.svg") center / contain no-repeat;
	mask: url("../icons/lucide/image.svg") center / contain no-repeat;
}

body.hb-v2-page main .hb-photo__caption {
	display: grid;
	gap: 6px;
	max-width: 30ch;
	color: var(--ink-2);
}

body.hb-v2-page main .hb-photo__status {
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .16em;
	color: var(--teal);
}

body.hb-v2-page main .hb-photo__label {
	font-size: 14px;
	font-weight: 700;
	line-height: 1.6;
	color: var(--ink);
}

body.hb-v2-page main .hb-photo__note {
	font-size: 12px;
	line-height: 1.75;
}

body.hb-v2-page main .hb-photo__spec {
	font-size: 10px;
	letter-spacing: .06em;
	opacity: .72;
}

/* 小さい枠では説明文まで入らない。状態と名前だけ残す。 */
@media screen and (max-width: 620px) {
	body.hb-v2-page main .hb-photo--empty {
		gap: 10px;
		padding: 18px;
	}

	body.hb-v2-page main .hb-photo--empty .hb-photo__mark {
		width: 28px;
		height: 28px;
	}

	body.hb-v2-page main .hb-photo__note,
	body.hb-v2-page main .hb-photo__spec {
		display: none;
	}
}

/* --- ページヘッダーの統一 ---------------------------------------------- */

/* 写真の無いページも分割型のまま。右列はブランドのパネルになる。 */
body.hb-v2-page .page-hero.page-hero-plate {
	display: grid;
	grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr);
	min-height: 620px;
}

body.hb-v2-page .page-hero-plate-mark {
	display: grid;
	place-items: center;
	min-height: 620px;
	padding: clamp(32px, 5vw, 72px);
	background-color: var(--cream);
	background-image:
		radial-gradient(circle at 78% 22%, rgba(163, 67, 24, .10), transparent 58%),
		repeating-linear-gradient(
			135deg,
			transparent 0 17px,
			rgba(92, 70, 56, .05) 17px 18px
		);
	border-left: 1px solid var(--line);
}

body.hb-v2-page .page-hero-plate-mark img {
	width: min(280px, 62%);
	height: auto;
	opacity: .34;
}

/* 記事一覧・検索・404は読み物の入口なので、ヘッダーを低くする。既存の
   短縮ルールはそのまま効かせ、パネルの高さだけ合わせる。 */
body.hb-v2-page .posts-page .page-hero-plate,
body.hb-v2-page .content-page .page-hero-plate {
	min-height: 0;
}

body.hb-v2-page .posts-page .page-hero-plate .page-hero-plate-mark,
body.hb-v2-page .content-page .page-hero-plate .page-hero-plate-mark {
	min-height: 0;
}

body.hb-v2-page .posts-page .page-hero-plate-mark img {
	width: min(220px, 54%);
}

@media screen and (max-width: 980px) {
	body.hb-v2-page .page-hero.page-hero-plate {
		grid-template-columns: 1fr;
		min-height: 0;
	}

	body.hb-v2-page .page-hero-plate-mark {
		order: -1;
		min-height: 0;
		height: clamp(180px, 30vw, 240px);
		border-left: 0;
		border-bottom: 1px solid var(--line);
	}

	body.hb-v2-page .page-hero-plate-mark img {
		width: min(240px, 46%);
	}
}

/* スマートフォンは写真ページと同じ読み順。パネル→文章面が重なる。 */
@media screen and (max-width: 620px) {
	body.hb-v2-page .page-hero.page-hero-plate {
		display: flex;
		flex-direction: column;
		background: var(--paper);
	}

	body.hb-v2-page .page-hero-plate-mark {
		order: 1;
		width: 100%;
		height: clamp(150px, 34vw, 190px);
	}

	body.hb-v2-page .page-hero.page-hero-plate .page-hero-copy {
		order: 2;
		z-index: 2;
		position: relative;
		width: calc(100% - 32px);
		min-height: 0;
		margin: -32px 16px 0;
		padding: 30px 20px 42px;
		background: var(--paper);
		border-top: 4px solid var(--teal);
		box-shadow: 0 18px 42px rgba(36, 56, 58, .16);
	}

	body.hb-v2-page .posts-page .page-hero.page-hero-plate .page-hero-copy,
	body.hb-v2-page .content-page .page-hero.page-hero-plate .page-hero-copy {
		padding: 28px 20px 34px;
	}
}

/* ヘッダー写真はページを開いた瞬間の主役なので、遅延読み込みはしない。
   下端に薄い影を敷いて、白い文字面との境目を締める。 */
body.hb-v2-page .page-hero.has-image .page-hero-image {
	position: relative;
}

body.hb-v2-page .page-hero.has-image .page-hero-image::after {
	content: "";
	position: absolute;
	inset: auto 0 0 0;
	height: 38%;
	background: linear-gradient(to top, rgba(92, 70, 56, .28), transparent);
	pointer-events: none;
}

/* --- サービス一覧に写真を入れる ---------------------------------------- */

body.hb-v2-page main .service-map-list.has-photos a {
	justify-content: flex-start;
	gap: 0;
	min-height: 0;
	padding: 0;
	overflow: hidden;
}

body.hb-v2-page main .service-map-list.has-photos .hb-photo {
	border: 0;
	border-bottom: 1px solid var(--line);
	outline-offset: -6px;
}

body.hb-v2-page main .service-map-list__body {
	display: flex;
	flex-direction: column;
	gap: 6px;
	padding: 20px 22px 24px;
}

@media screen and (max-width: 620px) {
	body.hb-v2-page main .service-map-list.has-photos {
		grid-template-columns: 1fr;
	}

	/* 1列になったら写真は帯で足りる。カードが縦に伸びすぎないように。 */
	body.hb-v2-page main .service-map-list.has-photos .hb-photo {
		aspect-ratio: 16 / 7 !important;
	}

	body.hb-v2-page main .service-map-list.has-photos .service-map-list__body {
		padding: 16px 18px 20px;
	}
}

/* --- 横長の写真帯 ------------------------------------------------------ */

body.hb-v2-page main .hb-photo-band {
	margin: clamp(38px, 5vw, 62px) 0;
}

/* 空の枠は、写真そのものと同じ高さを取る必要がない。横長の帯だと1000px
   近い空白になり、まだ無いものが本文より目立ってしまう。高さだけ抑える。 */
body.hb-v2-page main .hb-photo-band .hb-photo--empty {
	max-height: 340px;
}

body.hb-v2-page main .hb-photo-band .hb-photo {
	border: 1px solid var(--line);
}

body.hb-v2-page main .hb-photo-band .hb-photo--filled {
	border-bottom: 4px solid var(--ink);
}

body.hb-v2-page main .hb-photo-band__caption {
	margin: 12px 0 0;
	font-size: 12px;
	line-height: 1.8;
	color: var(--ink-2);
}

/* 私たちについてのチーム写真は、セクションの余白いっぱいまで広げる。 */
body.hb-v2-page main .about-team-band {
	margin-top: clamp(48px, 6vw, 78px);
}

/* --- 3枚並びの写真（アクセスの店舗写真） -------------------------------- */

body.hb-v2-page main .hb-photo-strip {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 14px;
	margin-top: clamp(32px, 4vw, 48px);
}

body.hb-v2-page main .hb-photo-strip .hb-photo {
	border: 1px solid var(--line);
}

body.hb-v2-page main .hb-photo-strip__caption {
	margin: 10px 0 0;
	font-size: 12px;
	font-weight: 700;
	color: var(--ink-2);
}

body.hb-v2-page main .hb-photo-strip > div {
	min-width: 0;
}

@media screen and (max-width: 620px) {
	body.hb-v2-page main .hb-photo-strip {
		grid-template-columns: 1fr;
		gap: 18px;
	}
}

/* --- 流れの各工程に写真を添える（はじめての方） -------------------------- */

/* 工程は「番号・見出し・説明」の3段組み。写真は説明の下に置き、番号列
   の幅は変えない。読み順（何をするか → どんな場面か）を保つため。 */
body.hb-v2-page main .flow-list .hb-photo {
	max-width: 420px;
	margin-top: 18px;
	border: 1px solid var(--line);
}

body.hb-v2-page main .flow-list .hb-photo--filled {
	border-bottom: 4px solid var(--ink);
}

@media screen and (max-width: 620px) {
	body.hb-v2-page main .flow-list .hb-photo {
		max-width: 100%;
		margin-top: 14px;
	}
}

/* 記事・規約・検索・404にはページ固有のアイコンが割り当てられておらず、
   見出し前の四角が塗りつぶしのまま残っていた。ヘッダーを共通化した今、
   ここだけ記号が崩れて見えるので、読み物と案内のアイコンを与える。 */
body.hb-v2-page .posts-page { --hb-page-icon: url("../icons/lucide/book-open.svg"); }
body.hb-v2-page .content-page { --hb-page-icon: url("../icons/lucide/info.svg"); }
body.hb-v2-page .policy-page { --hb-page-icon: url("../icons/lucide/shield-check.svg"); }

/* =====================================================================
   2.16.0 — メニューは全幅でドロワー

   メニューはヘッダー・ドロワー・フッターの3箇所に別々に書かれており、
   順番もずれていた（2.14.0）。`hb_nav_items()` に一本化してある。

   2.14.0では、10項目が1段に収まる1181px以上だけPCナビを出し、それ未満は
   ドロワーにしていた。ただし「収まる」ことと「読みやすい」ことは別で、
   10項目が横一列に並ぶ状態は幅があっても探しにくい。2.16.0で全幅を
   ドロワーへ寄せ、ヘッダーはロゴ・LINE・メニューの3要素だけにした。

   これで幅による分岐が無くなるため、ドロワーの見た目（パネル・ハンバー
   ガー・リンク）はメディアクエリの外に置いている。
   ===================================================================== */

/* --- 全幅でドロワーに一本化 ------------------------------------------ */
/* 2.14.0では1181px以上だけPCナビを1段で見せていたが、10項目が横一列に
   並ぶ状態は幅が足りていても読みにくい。PC幅もハンバーガーへ寄せ、
   ヘッダーは「ロゴ・LINE・メニュー」の3要素だけにする。
   PCナビはマークアップからも外したので、ここは取り残しへの保険。 */
body.hb-v2-page .site-header .desktop-nav {
	display: none;
}

/* パネルの上辺をヘッダーの下辺にそろえるため、ボタンではなくヘッダーの
   高さいっぱいを基準にする。従来の top:38px はボタンからの距離なので、
   ヘッダーが82pxあるPC幅では、開いたパネルがLINEボタンの下端に11px
   重なっていた。 */
body.hb-v2-page .site-header .mobile-menu {
	display: flex;
	align-items: center;
	align-self: stretch;
	position: relative;
}

/* ドロワーの見た目は、元CSSでは980px以下のメディアクエリの中だけに
   書かれていた。全幅で使うので、パネル・ハンバーガー・リンクの指定を
   メディアクエリの外へ出す。 */
body.hb-v2-page .mobile-menu summary {
	position: relative;
	width: 44px;
	height: 44px;
	font-size: 0;
	cursor: pointer;
	list-style: none;
}

body.hb-v2-page .mobile-menu summary::-webkit-details-marker {
	display: none;
}

body.hb-v2-page .mobile-menu summary::before,
body.hb-v2-page .mobile-menu summary::after {
	content: "";
	position: absolute;
	left: 9px;
	width: 26px;
	height: 2px;
	background: var(--ink);
	transition: transform .2s ease, box-shadow .2s ease;
}

body.hb-v2-page .mobile-menu summary::before {
	top: 13px;
	box-shadow: 0 8px 0 var(--ink), 0 16px 0 var(--ink);
}

body.hb-v2-page .mobile-menu summary::after {
	display: none;
}

body.hb-v2-page .mobile-menu[open] summary::before {
	top: 21px;
	box-shadow: none;
	transform: rotate(45deg);
}

body.hb-v2-page .mobile-menu[open] summary::after {
	top: 21px;
	display: block;
	transform: rotate(-45deg);
}

body.hb-v2-page .mobile-menu nav {
	position: absolute;
	top: 100%;
	right: -20px;
	z-index: 40;
	display: flex;
	flex-direction: column;
	gap: 4px;
	width: min(88vw, 360px);
	padding: 25px;
	background: var(--ink);
	color: var(--white);
	box-shadow: 0 16px 40px rgba(0, 0, 0, .25);
}

body.hb-v2-page .mobile-menu nav a {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	color: var(--white);
}

/* 621〜980pxでは、ヘッダーのLINEが元CSSで消えたまま、下部の固定バーも
   出ない幅だった（下部バーは620px以下だけ）。LINEへの導線がドロワーの
   中にしか無くなるので、この幅でもヘッダーのボタンを出す。 */
@media screen and (min-width: 621px) {
	body.hb-v2-page .site-header .header-cta[href^="https://lin.ee/"] {
		display: inline-flex;
	}
}

/* --- ドロワー: 11項目でも画面から出ない ------------------------------ */
/* 項目が7から10（＋LINE）に増えた。縦に短い端末では、開いたときに下の
   項目が画面外へ出てしまうため、高さを制限して中でスクロールさせる。 */
body.hb-v2-page .mobile-menu nav {
	max-height: calc(100svh - 120px);
	overflow-y: auto;
	overscroll-behavior: contain;
}

/* LINEだけは他のページ項目と役割が違うので、末尾でボタンとして切り分ける。
   2.20.0まで、ボタンの形（中央寄せ・バッジとの間隔・高さ・余白）は980px
   以下のメディアクエリの中にだけあった。2.16.0でドロワーを全幅にしたため、
   981px以上ではバッジと文字が接し、左の余白も無くなっていた。
   また区切りのつもりの padding-top がボタン自体に掛かり、文字が下に寄って
   いた（border-top もLINE共通の !important の枠色で緑に塗られ、線として
   見えていなかった）。区切りは外側の余白で取る。 */
body.hb-v2-page .mobile-menu nav a.mobile-menu__line {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 12px;
	min-height: 52px;
	margin-top: 12px;
	padding: 12px 16px;
	border-top: 0;
}

/* --- モバイルの比較表: 2つの列を線で分ける --------------------------- */
/* 620px以下では1行が1枚のカードになり、ビジターと会員が横に並ぶ。ラベル
   の色だけが区切りだったため、どちらの金額がどちらの列か、目で追うのに
   一拍かかっていた。列の間に罫線を入れ、金額を主役にする。 */
@media screen and (max-width: 620px) {
	body.hb-v2-page main .plan-compare tbody tr {
		column-gap: 0;
		padding: 14px 0 14px 16px;
	}

	body.hb-v2-page main .plan-compare tbody th {
		padding-right: 16px;
	}

	body.hb-v2-page main .plan-compare tbody td {
		padding: 12px 16px 0 0;
	}

	/* 会員側。罫線は列の高さいっぱいに伸びる（グリッドの子なので）。 */
	body.hb-v2-page main .plan-compare tbody td:last-child {
		padding-left: 16px;
		border-left: 1px solid var(--line);
	}

	/* 金額は比較の主役なので、ラベルより先に目に入る大きさにする。 */
	body.hb-v2-page main .plan-compare tbody td {
		font-size: 16px;
		line-height: 1.5;
	}

	body.hb-v2-page main .plan-compare tbody td small {
		display: block;
		margin-top: 4px;
		font-size: 12px;
		line-height: 1.6;
		color: var(--ink-2);
	}

	body.hb-v2-page main .plan-compare tbody td::before {
		margin-bottom: 5px;
	}
}

/* --- 回数券の注記 ----------------------------------------------------- */
/* 金額そのものではなく、金額の読み方に関わる但し書き。本文より一段
   落として、並びの金額と競合させない。 */
body.hb-v2-page main .price-ticket-notes {
	margin-top: 18px;
}

body.hb-v2-page main .price-ticket-notes li {
	font-size: 14px;
	line-height: 1.85;
	color: var(--ink-2);
}

@media screen and (max-width: 620px) {
	body.hb-v2-page main .price-ticket-notes li {
		font-size: 15px;
	}
}

/* --- チームの特徴: ボディドックと同じ「小さなブロック」に ------------- */
/* 安心・挑戦・成長・誠実の4語は、モバイルで1列・1マス108px・文字28pxに
   なっており、4つ並ぶだけで画面2枚分の高さを使っていた。語そのものは
   短いので、ボディドックの検査項目（metric-strip）と同じ扱いにして、
   2列のブロックで一度に見渡せるようにする。 */
@media screen and (max-width: 620px) {
	body.hb-v2-page main .culture-words {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 8px;
		width: 100%;
		max-width: none;
		min-width: 0;
	}

	body.hb-v2-page main .culture-words span {
		min-height: 88px;
		gap: 8px;
		padding: 14px 6px;
		font-size: 17px;
	}

	body.hb-v2-page main .culture-words span::before {
		width: 24px;
		height: 24px;
	}
}

/* --- スタッフ紹介: 621〜670pxで横スクロールしていた ------------------- */
/* `.team-grid` は 1fr 1fr の2列。グリッドの子は既定で min-width:auto の
   ため、中身が縮まない幅まで来ると列が押し広げられる。実測では2枚目の
   カードが352pxを要求し、519pxの枠に対して合計617pxになっていた。
   縮めるための min-width:0 は620px以下にしか無く、621〜670pxで画面外へ
   はみ出していた（2.15.0以前からの不具合。621pxを検証幅に加えて発見）。
   621px以上でも列と中身が縮めるようにする。 */
@media screen and (min-width: 621px) {
	body.hb-v2-page main .team-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	body.hb-v2-page main .team-grid article,
	body.hb-v2-page main .team-grid article > div,
	body.hb-v2-page main .team-grid article > div > * {
		min-width: 0;
	}
}

/* =====================================================================
   2.17.0 — 写真は枠を埋める

   これまで、写真の枠の高さは「入っている写真の縦横比」で決まっていた。
   枠の中の `<img>` は `height: 100%` だが、親の高さが中身依存のため
   100%が解決できず、写真の実寸が高さになる。結果、

   - 縦長の写真を入れると枠が伸びる（下層ページのヘッダーは実測で
     620px → 1967px、TOPのヒーローは818px → 2009px）
   - 隣に並ぶカードと高さがそろわず、短い側に余白が出る

   という状態だった。`object-fit: cover` は指定済みだったので、写真自体は
   切り抜かれていたが、枠のほうが写真に合わせて動いていた。

   ここで約束を逆にする。**枠が高さを決め、写真はその枠を埋める。**
   枠に高さ（または縦横比）を持たせ、写真は絶対配置で枠いっぱいに敷く。
   絶対配置にすると写真はレイアウトの高さ計算から外れるため、どんな寸法
   の写真を入れても枠は動かない。

   枠を持っていなかった画像（TOPのサービスカード、トレーニングの
   image-text-block）には `.hb-media` のラッパーを追加した。

   除外するもの:
   - ロゴ（ヘッダー・フッター・無地パネル）とInstagramのマーク。
     切り抜く対象ではなく、比率も固定されている
   - KINE-NAの支援者画像。ロゴとお名前が入ったクレジット版なので、
     `cover` で切ると社名や氏名が欠ける。`contain` のまま
   - 記事本文（`.editor-content`）の画像。書き手が入れた図版を勝手に
     切り抜かない
   ===================================================================== */

body.hb-v2-page :is(
	.hero-visual,
	.page-hero-image,
	.people-image,
	.story-image,
	.kinena-home__image,
	.kinena-wide-image,
	.hb-media
) {
	position: relative;
	overflow: hidden;
}

body.hb-v2-page :is(
	.hero-visual,
	.page-hero-image,
	.people-image,
	.story-image,
	.kinena-home__image,
	.kinena-wide-image,
	.hb-media
) > img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	min-height: 0;
	max-height: none;
	object-fit: cover;
	object-position: center;
}

/* 写真スロット（2.13.0）も同じ約束にそろえる。比率は枠側が持っている。 */
body.hb-v2-page main .hb-photo {
	position: relative;
}

body.hb-v2-page main .hb-photo--filled > img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	min-height: 0;
	max-height: none;
	object-fit: cover;
	object-position: center;
}

/* サービスカードの枠。写真が高さを決めなくなったぶん、各幅の高さを
   枠自身が持つ。621〜980pxは本文側の高さに合わせて伸びる。 */
body.hb-v2-page .service-card > .hb-media {
	display: block;
	width: 100%;
}

/* メディフットだけは足元を見せたいので、切り抜く位置を下げる。 */
body.hb-v2-page main .service-card-medifoot > .hb-media > img {
	object-position: center 62%;
}

body.hb-v2-page .hero-visual > img {
	object-position: center 44%;
}

/* =====================================================================
   2.19.0 — 下部固定バーのLINEボタン

   バーは2分割で、電話側は「電話で相談 / 番号」の2行、LINE側は44x26の
   バッジを文字の上に積む構成だった。LINE側の必要高さは

     バッジ26 + 間隔2 + 行送り18.2 + 上下余白12 = 58.2px

   で、枠の58pxをわずかに超える。結果、バッジが上辺に、文字が下辺に張り
   付き、10pxほど余っている電話側と並んで不揃いに見えていた。
   （2.15.0時点で同じ数値。今回の一連の変更で生じたものではない）

   サイト内の他のLINEボタン（ヘッダー、本文中のCTA、ドロワー）は、すべて
   バッジを文字の左に置いている。バーだけが積む形だったので、そちらへ
   そろえる。1行になるぶん高さに余裕が生まれ、バーの高さは変えずに済む。

   文字は「予約・相談」。隣のバッジが LINE と表示しているため、
   「LINEで予約・相談」だと LINE が二度出る。読み上げ用の名前は
   aria-label で「LINEで予約・相談」のまま保つ。
   ===================================================================== */

/* 既存の `.hb-mobile-cta a`（要素セレクタを含む）のほうが詳細度が高いので、
   こちらも `a.` を付けて上書きできるようにする。 */
@media screen and (max-width: 620px) {
	body.hb-v2-page .hb-mobile-cta a.hb-mobile-cta__line {
		flex-direction: row;
		gap: 9px;
		white-space: nowrap;
	}

	/* 1行になったので、バッジは文字に対して自然な大きさに戻す。 */
	body.hb-v2-page .hb-mobile-cta a.hb-mobile-cta__line::before {
		min-width: 42px;
		height: 24px;
		font-size: 10.5px;
	}
}

/* =====================================================================
   2.20.0 - Taste監査の反映

   - ヒーロー写真に重ねていた英字（YOUR BODY. ...）を外した。文字の可読性の
     ために写真の下半分を暗くしていたグラデーションも役目を失うので外す。
   - 「目的から探す」の番号を外した。4つの入口に順番は無い。
   - Instagramの帯がサイトで唯一の紫〜ピンクの面だった。面はサイトの白に戻し、
     Instagramらしさは公式マーク（グラデーションのアイコン）だけに任せる。
     LINEの緑と同じく、公式色は小さな識別子にとどめる。
   ===================================================================== */

body.hb-v2-page .hero-visual::after {
	content: none;
}

body.hb-v2-page .quick-link {
	grid-template-columns: minmax(0, 1fr) auto;
}

body.hb-v2-page main .instagram-banner {
	background: var(--white);
	color: var(--ink);
	border: 1px solid var(--line);
}

body.hb-v2-page main .instagram-banner__link::before {
	content: none;
}

body.hb-v2-page main .instagram-banner__link::after {
	border-color: var(--line);
}

body.hb-v2-page main .instagram-banner__copy h2 {
	color: var(--ink);
}

body.hb-v2-page main .instagram-banner__copy p:not(.eyebrow) {
	color: var(--ink-2);
}

body.hb-v2-page main .instagram-banner__label {
	background: var(--teal);
	border-color: var(--teal);
	color: var(--white);
}

body.hb-v2-page main .instagram-banner__action .arrow {
	color: var(--teal);
}