/*
Theme Name: カウンセリングポータル
Theme URI: https://example.com/counseling-portal
Author: Your Name
Author URI: https://example.com
Description: カウンセリングサービス向けのミニマルでクリーンなフルサイト編集テーマ。ウォームホワイトの背景にローズピンク、ミントグリーン、ペールアクアのパステル配色を組み合わせた、やわらかい印象が特徴です。
Version: 1.6.0
Requires at least: 6.0
Tested up to: 6.4
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: counseling-portal
Tags: full-site-editing, block-patterns, block-styles, custom-colors, custom-logo, custom-menu, editor-style, one-column, two-columns, wide-blocks

カウンセリングポータル WordPress テーマ, (C) 2024
このテーマは GNU GPL ライセンスの下で配布されています。
*/

/* Remove WP core's auto top margin between top-level blocks (causes gap above hero) */
:where(.wp-site-blocks) > * {
	margin-block-start: 0 !important;
}

/* Site-wide container cap — single lever for header, main content and footer */
:root {
	--site-content-max: 1100px;
	/* The header utility row carries the logo, three contact tiles and the menu
	   button on one line, which needs more room than the content column. */
	--site-header-max: 1240px;
	/* Drawer menu: one duration for the slide out and the slide back, so the
	   menu leaves the way it arrived. Easing is eased-out going in, eased-in
	   going out. */
	--site-nav-drawer-duration: 320ms;
	--site-nav-drawer-ease-out: cubic-bezier(0.22, 0.61, 0.36, 1);
	--site-nav-drawer-ease-in: cubic-bezier(0.55, 0.06, 0.68, 0.19);
}

/* Replace WP core's per-block max-width on constrained-layout children with our own cap */
.is-layout-constrained > :where(:not(.alignleft):not(.alignright):not(.alignfull)) {
	max-width: var(--site-content-max) !important;
	margin-left: auto !important;
	margin-right: auto !important;
}

/* Card hover effects */
.wp-block-column {
	transition: box-shadow 0.3s ease, transform 0.3s ease;
}

.wp-block-column:hover {
	box-shadow: 0 8px 30px rgba(181, 64, 79, 0.15);
	transform: translateY(-4px);
}

/* Card images */
.wp-block-column .wp-block-image img {
	transition: transform 0.3s ease;
}

.wp-block-column:hover .wp-block-image img {
	transform: scale(1.05);
}

.wp-block-column .wp-block-image {
	overflow: hidden;
}

/* Button enhancements */
.wp-block-button__link {
	box-shadow: 0 4px 15px rgba(181, 64, 79, 0.22);
	transition: all 0.3s ease;
}

.wp-block-button__link:hover {
	box-shadow: 0 6px 20px rgba(181, 64, 79, 0.3);
	transform: translateY(-2px);
}

/* Unified container width for header + footer rows (matches --site-content-max) */
.site-header__utility > .wp-block-group.alignwide,
.site-footer > .wp-block-group.alignwide {
	max-width: var(--site-content-max);
	width: 100%;
	margin-left: auto;
	margin-right: auto;
	padding-left: 1.5rem;
	padding-right: 1.5rem;
	box-sizing: border-box;
}

/* Header utility row: logo left, tiles + hamburger flushed right.
   Both the wrapper and the row need the wider cap — the constrained-layout rule
   further up pins every one of its children to --site-content-max with
   !important, so the wrapper would otherwise squeeze the row back to 1100px. */
.site-header__utility {
	max-width: var(--site-header-max) !important;
}
.site-header__utility > .wp-block-group.alignwide {
	max-width: var(--site-header-max) !important;
	display: flex !important;
	flex-direction: row !important;
	justify-content: space-between !important;
	align-items: center !important;
	flex-wrap: nowrap !important;
	gap: 1.5rem;
}
.site-header__utility > .wp-block-group.alignwide > .wp-block-group:first-child {
	flex-shrink: 0;
	margin-right: auto;
}
.site-header__utility .site-header__tiles {
	margin-left: auto;
}
.site-header__utility .wp-block-navigation.site-nav {
	flex-shrink: 0;
}

/* Below 1258px the row is narrower than the one-line layout needs, so the logo
   and hamburger share the first line and the tiles drop to a second line. The
   threshold is set by the longest tile text, the address support@lifehopenet.com.

   A grid rather than a wrapping flex row: flex decides where to break from each
   item's max-content width, so it drops the hamburger onto its own line before
   it will let the brand text shrink, and the width where that happens moves
   with the length of the site name. The grid pins the hamburger beside the
   brand throughout, and the brand column takes whatever is left. */
@media (max-width: 1257px) {
	.site-header__utility > .wp-block-group.alignwide {
		display: grid !important;
		grid-template-columns: minmax(0, 1fr) auto;
		grid-template-areas:
			"brand nav"
			"tiles tiles";
		align-items: center !important;
		column-gap: 1.5rem;
		row-gap: 0.75rem !important;
	}
	.site-header__utility > .wp-block-group.alignwide > .wp-block-group:first-child {
		grid-area: brand;
		min-width: 0;
	}
	.site-header__utility > .wp-block-group.alignwide > .wp-block-group:first-child > .wp-block-group {
		min-width: 0;
	}
	.site-header__utility .wp-block-navigation.site-nav {
		grid-area: nav;
		justify-self: end;
	}
	.site-header__utility .site-header__tiles {
		grid-area: tiles;
		margin-left: 0 !important;
	}
}

/* Header utility tiles — always one horizontal row.
   flex-start, not center: the phone tile carries a third line (the opening
   hours) that the email tile does not, so centring them against each other
   pushed 電話で相談 and メールで相談 — and the number and the address below them
   — onto different lines. Aligning the tops puts both labels on one line and
   both values on the next. */
.site-header__tiles {
	display: flex !important;
	flex-direction: row !important;
	flex-wrap: nowrap !important;
	align-items: flex-start !important;
	gap: 1.75rem !important;
}

/* One tile: a fixed-width icon column beside the value line, with the label
   above it and the opening hours below, both indented to the value. A grid
   rather than the icon-plus-stacked-text flex box it replaces, because only a
   grid can put the icon on the value row instead of centring it against the
   whole tile — which is what left ☎ beside the number but ✉ beside its label. */
.site-header__tile {
	--tile-icon-size: 1.15rem;
	--tile-icon-gap: 0.5rem;
	display: grid !important;
	grid-template-columns: var(--tile-icon-size) minmax(0, auto);
	grid-template-areas:
		".    label"
		"icon value"
		".    hours";
	align-items: center;
	justify-content: start;
	column-gap: var(--tile-icon-gap);
	row-gap: 0 !important;
}
.site-header__tile > * {
	margin: 0 !important;
	white-space: nowrap;
}
.site-header__tile-label { grid-area: label; }
.site-header__tile-value { grid-area: value; }
.site-header__tile-hours { grid-area: hours; }

/* Icons: inline SVG on a square box, not the ☎ and ✉ text glyphs that used to
   sit here. Those two characters render at different widths and different
   stroke weights in the same font — 14.7px against 9.3px at a shared 14.4px
   font-size — so no amount of alignment made the pair look like one set. */
.site-header__tile-icon {
	grid-area: icon;
	display: flex;
	align-items: center;
	justify-content: center;
	width: var(--tile-icon-size);
	height: var(--tile-icon-size);
	color: var(--wp--preset--color--primary);
}
.site-header__tile-icon svg {
	display: block;
	width: 100%;
	height: 100%;
}

.site-header__tile-label {
	font-size: 0.7rem;
	line-height: 1.6;
	letter-spacing: 0.05em;
	color: var(--wp--preset--color--foreground-light);
}
.site-header__tile-value {
	font-size: 1rem;
	font-weight: 700;
	line-height: 1.6;
	color: var(--wp--preset--color--foreground);
}
.site-header__tile-value a {
	color: inherit;
}

/* Opening hours: a third, quieter line under the phone number, now that the
   standalone 受付時間 tile is gone. */
.site-header__tile-hours {
	font-size: 0.7rem;
	line-height: 1.4;
	color: var(--wp--preset--color--foreground-light);
	opacity: 0.85;
}

/* Phone: the contact tiles stay on screen — the phone number and address are
   the whole point of the header — so they keep their own line under the logo
   and hamburger instead of being hidden. The two-row grid comes from the
   max-width:1257px rule above; this block only tightens it for phones. */
@media (max-width: 600px) {
	.site-header__utility > .wp-block-group.alignwide {
		column-gap: 0.75rem;
		row-gap: 0.6rem !important;
	}
	.site-header__tiles { gap: 1rem !important; }
	.site-header__tile { --tile-icon-gap: 0.4rem; }
	.site-header__utility .wp-block-site-title {
		font-size: 1.15rem !important;
		line-height: 1.3;
	}
	/* The logo is a portrait mark, 198x258, so a width of 60px makes it 78px
	   tall — more than twice the 36px the brand name and tagline stack to at
	   this size, which is what made it read as oversized next to the title.
	   44px brings it to 57px, a step above the text instead of double it. */
	.site-header__utility .wp-block-site-logo img {
		width: 44px;
		height: auto;
	}
}

/* 601–639px: the only band where the brand name wraps. The fluid site-title
   size is already ~27px here while the row is at its narrowest before the
   tiles drop to their own line, so ライフ・ホープ・ネットワーク breaks after
   ネットワー and leaves a lone ク under it. 1.5rem is the largest step that
   holds one line at 601px; from 640px up the fluid size fits on its own. */
@media (min-width: 601px) and (max-width: 639px) {
	.site-header__utility .wp-block-site-title,
	.site-header__utility .wp-block-site-title a {
		font-size: 1.5rem !important;
		line-height: 1.3 !important;
	}
}

/* Narrow phones: at their default sizes the two tiles measure 356px side by
   side, 23px more than a 375px screen leaves them, so the address
   support@lifehopenet.com hung off the right edge and widened the document.
   Buy the width back from the gutters and the tile type instead of from the
   layout. Both values step down by the same amount and stay the same size as
   each other — the phone number and the address were 0.9rem against 0.75rem,
   which was half of why the pair looked mismatched.

   460px rather than the 430px the hero uses: at full size the row clears a
   431px screen by 2px, so every width from there up to ~445px — 440px is the
   iPhone 16 Pro Max — is one font substitution away from overflowing too. */
@media (max-width: 460px) {
	.site-header__tiles { gap: 0.5rem !important; }
	.site-header__tile { --tile-icon-size: 1rem; }
	.site-header__tile-label,
	.site-header__tile-hours { font-size: 0.65rem; }
	.site-header__tile-value { font-size: 0.78rem; }
}

/* Below 370px the tightened row runs out of width — the slack falls 1px per
   1px of screen — so stack the two tiles there instead. Both stay visible,
   which is the point, and the header grows by one short line. */
@media (max-width: 369px) {
	.site-header__tiles {
		flex-direction: column !important;
		align-items: flex-start !important;
		justify-content: flex-start !important;
		gap: 0.4rem !important;
	}
}

/* Logo group: keep on one horizontal line */
.site-header__utility > .wp-block-group.alignwide > .wp-block-group:first-child {
	display: flex !important;
	flex-direction: row !important;
	flex-wrap: nowrap !important;
	align-items: center !important;
	gap: 0.75rem !important;
}

/* Brand text block: site title and tagline stacked tight, so the left half of
   the header is no taller than the contact tiles on the right. */
.site-header__utility > .wp-block-group.alignwide > .wp-block-group:first-child > .wp-block-group {
	display: flex !important;
	flex-direction: column !important;
	align-items: flex-start !important;
	gap: 0.1rem !important;
}
.site-header__utility > .wp-block-group.alignwide > .wp-block-group:first-child .wp-block-site-title,
.site-header__utility > .wp-block-group.alignwide > .wp-block-group:first-child p {
	margin: 0 !important;
	line-height: 1.25 !important;
}

/* Rose accent line closing the header, now that the nav bar is gone */
.site-header {
	border-bottom: 3px solid var(--wp--preset--color--rose);
}

/* Hamburger button — the only nav affordance, at every screen width */
.site-header .wp-block-navigation__responsive-container-open {
	display: flex !important;
	align-items: center;
	gap: 0.5rem;
	padding: 0.6rem 1.1rem;
	border-radius: 999px;
	background-color: var(--wp--preset--color--rose);
	color: var(--wp--preset--color--foreground) !important;
	font-size: 0.9rem;
	font-weight: 700;
	line-height: 1;
	transition: background-color 0.25s ease, color 0.25s ease;
}
.site-header .wp-block-navigation__responsive-container-open::after {
	content: "メニュー";
}
.site-header .wp-block-navigation__responsive-container-open:hover,
.site-header .wp-block-navigation__responsive-container-open:focus {
	background-color: var(--wp--preset--color--primary-dark);
	color: var(--wp--preset--color--white) !important;
}
.site-header .wp-block-navigation__responsive-container-open svg,
.site-header .wp-block-navigation__responsive-container-close svg {
	fill: currentColor;
	width: 1.25rem;
	height: 1.25rem;
}

/* Narrow phones: icon only, so the logo keeps its room */
@media (max-width: 480px) {
	.site-header .wp-block-navigation__responsive-container-open::after {
		display: none;
	}
	.site-header .wp-block-navigation__responsive-container-open {
		padding: 0.55rem 0.7rem;
	}
}

/* Drawer panel opened by the hamburger.
   The page stays visible behind a dimmed scrim, so the menu reads as a layer
   on top of the site instead of a new full-screen page. */
.site-header .wp-block-navigation__responsive-container.is-menu-open {
	flex-direction: row;
	justify-content: flex-end;
	align-items: stretch;
	padding: 0 !important;
	/* clip, not hidden. Both hide the panel while it sits off to the right, but
	   hidden makes this a scrollable box — and core focuses the first drawer link
	   the moment the menu opens, so the browser scrolls this box sideways to
	   bring that link into view and cancels the slide out exactly. clip cannot
	   scroll, so the panel actually travels. */
	overflow: hidden; /* fallback for Safari below 16 */
	overflow: clip;
	/* The dim sits on ::before, not here — see below */
	background-color: transparent !important;
	/* Cancel core's fade-in, which fades the panel and nudges it downwards.
	   The panel's own slide is the whole animation. */
	animation: none;
}

/* The dim backdrop, as its own layer behind the panel.
   It has to be a separate layer: fading the container would fade the panel with
   it, and the panel would then read as appearing rather than sliding in. */
.site-header .wp-block-navigation__responsive-container.is-menu-open::before {
	content: "";
	position: absolute;
	inset: 0;
	background-color: rgba(57, 45, 47, 0.5);
	animation: site-nav-scrim-in var(--site-nav-drawer-duration) ease-out both;
}

/* The drawer itself — a right-hand panel that never takes the whole screen.
   position: relative keeps it above the backdrop and, since core positions the
   close button absolutely, makes that button travel with the panel. */
.site-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-close {
	position: relative;
	z-index: 1;
	display: flex;
	flex-direction: column;
	width: min(360px, 80vw);
	max-width: none;
	margin: 0 0 0 auto;
	overflow-y: auto;
	background-color: var(--wp--preset--color--white);
	border-radius: 18px 0 0 18px;
	box-shadow: -16px 0 40px rgba(57, 45, 47, 0.25);
	animation: site-nav-drawer-in var(--site-nav-drawer-duration) var(--site-nav-drawer-ease-out) both;
}

/* Closing — the same movement played backwards, driven by is-menu-closing.
   Core drops is-menu-open (and with it display) the instant you press close, so
   assets/js/navigation-drawer.js holds that off until this animation has run. */
.site-header .wp-block-navigation__responsive-container.is-menu-open.is-menu-closing {
	pointer-events: none;
}
.site-header .wp-block-navigation__responsive-container.is-menu-open.is-menu-closing::before {
	animation-name: site-nav-scrim-out;
	animation-timing-function: ease-in;
}
.site-header .wp-block-navigation__responsive-container.is-menu-open.is-menu-closing .wp-block-navigation__responsive-close {
	animation-name: site-nav-drawer-out;
	animation-timing-function: var(--site-nav-drawer-ease-in);
}

@keyframes site-nav-drawer-in {
	from { transform: translateX(100%); }
	to { transform: translateX(0); }
}
@keyframes site-nav-drawer-out {
	from { transform: translateX(0); }
	to { transform: translateX(100%); }
}
@keyframes site-nav-scrim-in {
	from { opacity: 0; }
	to { opacity: 1; }
}
@keyframes site-nav-scrim-out {
	from { opacity: 1; }
	to { opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
	.site-header .wp-block-navigation__responsive-container.is-menu-open::before,
	.site-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-close {
		animation: none !important;
	}
}

.site-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-dialog {
	display: flex;
	flex-direction: column;
	flex-grow: 1;
	margin-top: 0 !important;
}

/* Title bar — names the panel, so nobody has to guess what just opened */
.site-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-dialog::before {
	content: "メニュー";
	display: flex;
	align-items: center;
	min-height: 3.75rem;
	padding: 0 1.25rem;
	background-color: var(--wp--preset--color--blush);
	border-bottom: 3px solid var(--wp--preset--color--rose);
	color: var(--wp--preset--color--foreground);
	font-size: 0.95rem;
	font-weight: 700;
	letter-spacing: 0.08em;
}

/* Closing hint at the foot of the drawer */
.site-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-dialog::after {
	content: "メニュー以外の場所を押しても閉じられます";
	margin-top: auto;
	padding: 1.25rem;
	color: var(--wp--preset--color--foreground-light);
	font-size: 0.75rem;
	line-height: 1.6;
}

/* Close button — a labelled pill inside the title bar, not a bare icon in empty space */
.site-header .wp-block-navigation__responsive-container-close {
	top: 0.85rem;
	right: 1rem;
	display: flex;
	align-items: center;
	gap: 0.35rem;
	padding: 0.5rem 0.9rem;
	border-radius: 999px;
	background-color: var(--wp--preset--color--white);
	color: var(--wp--preset--color--foreground) !important;
	font-size: 0.85rem;
	font-weight: 700;
	line-height: 1;
	transition: background-color 0.25s ease, color 0.25s ease;
}
.site-header .wp-block-navigation__responsive-container-close::after {
	content: "閉じる";
}
.site-header .wp-block-navigation__responsive-container-close:hover,
.site-header .wp-block-navigation__responsive-container-close:focus {
	background-color: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--white) !important;
}
.site-header .wp-block-navigation__responsive-container-close svg {
	width: 1rem;
	height: 1rem;
}

.site-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content {
	width: 100%;
	max-width: none;
	margin: 0;
	padding: 0.5rem 1.25rem 0;
}
.site-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container {
	width: 100%;
	gap: 0 !important;
}
.site-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item {
	width: 100%;
	border-bottom: 1px solid rgba(57, 45, 47, 0.12);
}
.site-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
	display: block;
	width: 100%;
	padding: 1rem 0.25rem;
	font-size: 1.05rem;
	font-weight: 600;
	color: var(--wp--preset--color--foreground) !important;
	text-decoration: none;
}
.site-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content:hover,
.site-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content:focus,
.site-header .wp-block-navigation__responsive-container.is-menu-open .current-menu-item > .wp-block-navigation-item__content {
	color: var(--wp--preset--color--primary) !important;
}

/* Admin bar: shift the whole drawer down instead of the dialog inside it */
.has-modal-open .admin-bar .site-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-close {
	margin-top: 46px;
}
@media (min-width: 782px) {
	.has-modal-open .admin-bar .site-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-close {
		margin-top: 32px;
	}
}

/* Door-style colorful tile grid */
.tile-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 1.25rem;
}
@media (max-width: 900px) {
	.tile-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
	.tile-grid { grid-template-columns: 1fr; }
}
.tile-card {
	display: block;
	border-radius: 12px;
	padding: 1.5rem 1.25rem;
	text-align: center;
	color: var(--wp--preset--color--white);
	font-weight: 700;
	font-size: 1.05rem;
	letter-spacing: 0.02em;
	text-decoration: none;
	box-shadow: 0 4px 14px rgba(57, 45, 47, 0.08);
	transition: transform 0.2s ease, box-shadow 0.2s ease, filter 0.2s ease;
	border: 2px solid transparent;
}
.tile-card small {
	display: block;
	font-size: 0.7rem;
	font-weight: 500;
	letter-spacing: 0.1em;
	opacity: 0.85;
	margin-bottom: 0.4rem;
}
.tile-card:hover {
	transform: translateY(-3px);
	box-shadow: 0 10px 24px rgba(57, 45, 47, 0.18);
	filter: brightness(1.05);
}
.tile-card--primary { background: var(--wp--preset--color--primary); }
.tile-card--primary-dark { background: var(--wp--preset--color--primary-dark); }
.tile-card--mint-deep { background: var(--wp--preset--color--mint-deep); }
.tile-card--aqua-deep { background: var(--wp--preset--color--aqua-deep); }
.tile-card--rose { background: var(--wp--preset--color--rose); color: var(--wp--preset--color--foreground); }
.tile-card--aqua { background: var(--wp--preset--color--aqua); color: var(--wp--preset--color--foreground); }
.tile-card--blush { background: var(--wp--preset--color--blush); color: var(--wp--preset--color--foreground); }

/* Featured cards (3 illustrated cards directly under the hero) */
.featured-cards__grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 1.25rem;
}
/* Below 500px the 3 columns get too narrow to read: one card per row instead */
@media (max-width: 499px) {
	.featured-cards__grid { grid-template-columns: 1fr; }
}
/* The 3 columns are narrow below tablet, so close the gap up a little */
@media (min-width: 500px) and (max-width: 767px) {
	.featured-cards__grid { gap: 0.75rem; }
}
.featured-card {
	display: flex;
	align-items: stretch;
	overflow: hidden;
	border-radius: 12px;
	text-decoration: none;
	color: var(--wp--preset--color--foreground);
	background: var(--featured-card-bg);
	box-shadow: 0 4px 14px rgba(57, 45, 47, 0.08);
	transition: transform 0.2s ease, box-shadow 0.2s ease;
	min-height: 110px;
}
.featured-card:hover {
	transform: translateY(-3px);
	box-shadow: 0 10px 24px rgba(57, 45, 47, 0.18);
}
.featured-card__icon,
.featured-card__label {
	box-sizing: border-box;
}
.featured-card__icon {
	flex: 0 0 clamp(96px, 30%, 140px);
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 1rem 0.75rem;
}
.featured-card__icon img {
	max-width: 80px;
	max-height: 80px;
	width: 100%;
	height: auto;
	object-fit: contain;
}
.featured-card__label {
	flex: 1 1 auto;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 1rem 0.75rem;
	font-weight: 700;
	font-size: 0.95rem;
	text-align: center;
	/* If a label ever does wrap, break it at a phrase boundary rather than mid-word */
	word-break: auto-phrase;
	color: var(--wp--preset--color--foreground);
}
/* Very narrow phones: give the label the room the icon column was holding */
@media (max-width: 400px) {
	.featured-card__icon { flex-basis: 76px; }
	.featured-card__label { font-size: 0.9rem; padding-left: 0.5rem; padding-right: 0.5rem; }
}

/* 500px and up the cards sit 3 across, so the icon moves above the label and the
   label gets the full column width — that is what keeps 中絶後カウンセリング on one line.
   Placed after the base rules so it overrides them on source order. */
@media (min-width: 500px) and (max-width: 1060px) {
	.featured-card {
		flex-direction: column;
		align-items: center;
		justify-content: center;
		min-height: 0;
	}
	.featured-card__icon {
		flex: 0 0 auto;
		width: 100%;
		padding: 1rem 0.5rem 0.35rem;
	}
	.featured-card__label {
		flex: 0 0 auto;
		padding: 0 0.5rem 1rem;
	}
}
/* The narrowest of those 3-up columns: shrink the icon and the label to match */
@media (min-width: 500px) and (max-width: 767px) {
	.featured-card__icon {
		padding: 0.85rem 0.35rem 0.3rem;
	}
	.featured-card__icon img {
		max-width: 60px;
		max-height: 60px;
	}
	.featured-card__label {
		padding: 0 0.35rem 0.85rem;
		font-size: clamp(0.75rem, 2.1vw, 0.95rem);
	}
}

/* One pale tone fills the whole card — the illustrations carry the pink/aqua accents */
.featured-card--mint { --featured-card-bg: #D5EFCC; }
.featured-card--sky { --featured-card-bg: #D8E7F5; }
.featured-card--petal { --featured-card-bg: #F8EBEF; }

/* Hero subtitle sits inside the shared hero-message box */
.hero-message .hero-subtitle {
	margin: 0.9rem 0 0;
	font-size: clamp(0.9rem, 1.4vw, 1rem);
	font-weight: 500;
	line-height: 1.6;
	color: var(--wp--preset--color--foreground);
}

/* Featured promo with bold accent border
   配色案の寒色2色をここに集めている。枠がミントグリーンダーク、地がペールアクア */
.featured-promo {
	border: 4px solid var(--wp--preset--color--mint-deep);
	border-radius: 12px;
	background: var(--wp--preset--color--aqua);
}
@media (max-width: 720px) {
	.featured-promo > div { grid-template-columns: 1fr !important; }
}

/* フッターの小見出しにもアクセントラインを添える */
.site-footer h4 {
	position: relative;
	margin-bottom: 0.85rem;
	padding-bottom: 0.55rem;
	letter-spacing: 0.1em;
}

.site-footer h4::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: 0;
	width: 1.75rem;
	height: 2px;
	border-radius: 2px;
	background-color: var(--wp--preset--color--primary);
}

/* Footer — plum on the rose band, the darkest colour in the owner's swatch */
.site-footer a,
.site-footer .wp-block-navigation-item__content {
	color: var(--wp--preset--color--foreground);
	transition: color 0.2s ease;
}

.site-footer a:hover,
.site-footer .wp-block-navigation-item__content:hover,
.site-footer .wp-block-site-title a:hover {
	color: var(--wp--preset--color--primary-dark);
	text-decoration: underline;
}

.site-footer .wp-block-site-title a {
	color: var(--wp--preset--color--primary-dark);
}

/* Hero message — title + subtitle share one mint pill, centered */
.wp-block-cover .hero-message {
	display: block;
	width: fit-content;
	max-width: 100%;
	/* Mint at 60% so the background photo reads through the box while the
	   foreground text keeps enough contrast to stay comfortably legible. */
	background: rgba(211, 241, 211, 0.6); /* mint #D3F1D3, for browsers without color-mix */
	background: color-mix(in srgb, var(--wp--preset--color--mint) 60%, transparent);
	color: var(--wp--preset--color--foreground);
	padding: 1.5rem 2rem;
	border-radius: 12px;
	box-shadow: 0 2px 8px rgba(57, 45, 47, 0.08);
	text-align: center;
	margin-left: auto !important;
	margin-right: auto !important;
}
.hero-message .hero-title {
	margin: 0;
	font-size: clamp(1.5rem, 4vw, 2.25rem);
	font-weight: 700;
	line-height: 1.4;
	color: var(--wp--preset--color--foreground);
}
.hero-message .hero-title span {
	display: block;
}

/* Narrow phones: the cover, its inner container and the message box each added
   their own horizontal padding, eating 114px of a 375px screen and forcing both
   the site title and the hero title to break mid-word. Trim the nesting and let
   the text have the width instead. Must sit after the base rules above — same
   specificity, so source order decides. */
@media (max-width: 430px) {
	.wp-block-cover .wp-block-cover__inner-container {
		padding-left: 0;
		padding-right: 0;
	}
	.wp-block-cover .hero-message {
		padding: 1.25rem;
	}
	.hero-message .hero-subtitle {
		font-size: 0.85rem;
	}
	.site-header__utility > .wp-block-group.alignwide {
		padding-left: 0.5rem;
		padding-right: 0.5rem;
		gap: 0.5rem;
	}
	.site-header__utility > .wp-block-group.alignwide > .wp-block-group:first-child {
		gap: 0.5rem;
	}
	.site-header__utility .wp-block-site-title {
		font-size: 0.95rem !important;
	}
}

/* Smallest phones still in use (320-360px): step the hero type down again so the
   title keeps its two designed lines instead of breaking after 「どうしよう…」. */
@media (max-width: 360px) {
	.hero-message .hero-title {
		font-size: 1.3rem;
	}
	.hero-message .hero-subtitle {
		font-size: 0.8rem;
	}
}

/* 320px phones: the last 25px have to come from the logo and the box padding,
   because the brand name and the subtitle are both a few pixels too wide.
   The brand name gained two 「・」 when it became ライフ・ホープ・ネットワーク, which
   is enough to wrap a lone 「ク」 onto a second line, hence the extra step down. */
@media (max-width: 350px) {
	.wp-block-cover .hero-message {
		padding: 1.25rem 0.75rem;
	}
	.hero-message .hero-subtitle {
		font-size: 0.75rem;
	}
	.site-header__utility .wp-block-site-title {
		font-size: 0.8rem !important;
	}
	.site-header__utility .wp-block-site-logo img {
		width: 40px;
		height: auto;
	}
}

/* Tile-grid icon (illustration above text) */
.tile-card__icon {
	display: block;
	width: 64px;
	height: 64px;
	margin: 0 auto 0.6rem;
	object-fit: contain;
}

/* Smooth scrolling */
html {
	scroll-behavior: smooth;
}

/* Link arrow animation */
a[href*="→"] {
	display: inline-block;
	transition: transform 0.2s ease;
}

a[href*="→"]:hover {
	transform: translateX(4px);
}

/* Focus styles for accessibility */
a:focus,
button:focus,
.wp-block-button__link:focus {
	outline: 2px solid var(--wp--preset--color--primary);
	outline-offset: 2px;
}

/* Separator styling */
.wp-block-separator {
	opacity: 0.3;
}

/* =============================================================================
   エディトリアルレイヤー — ページ本文と各テンプレートの見出しデザイン
   ここから下は「日本語サイトらしい」タイポグラフィと見出し・本文要素の装飾。
   上のレイアウト系ルールには手を入れず、後ろから重ねる構成にしている。
   ========================================================================== */

/* --- デザイントークン ----------------------------------------------------- */
:root {
	/* 本文の読み幅。日本語は 1 行 40 字前後が読みやすい */
	--site-reading-max: 800px;
	--lhn-line: #F0DADA;
	--lhn-radius: 14px;
	--lhn-shadow-sm: 0 2px 10px rgba(57, 45, 47, 0.05);
	--lhn-shadow-md: 0 10px 30px rgba(57, 45, 47, 0.08);
	--lhn-accent: linear-gradient(90deg, #B5404F 0%, #EEB3BB 100%);
}

/* --- 日本語組版の基本設定 ------------------------------------------------- */
/* palt は約物（、。「」）のアキを詰める OpenType 機能。和文の見出しが締まる */
body,
h1, h2, h3, h4, h5, h6,
.wp-block-post-title,
.wp-block-query-title {
	font-feature-settings: "palt" 1;
}

/* 本文だけは読み幅を狭める。alignwide はサイト幅のまま */
.wp-block-post-content.is-layout-constrained > :where(:not(.alignleft):not(.alignright):not(.alignfull):not(.alignwide)) {
	max-width: var(--site-reading-max) !important;
}

/* --- 英字ラベル（見出しの上に置く小さな英語） ---------------------------- */
.lhn-eyebrow {
	margin: 0 0 0.6rem;
	font-size: 0.72rem;
	font-weight: 700;
	line-height: 1;
	letter-spacing: 0.24em;
	text-indent: 0.24em; /* letter-spacing の分だけ中央がずれるので相殺 */
	color: var(--wp--preset--color--primary);
}

/* =============================================================================
   ページタイトル帯
   ========================================================================== */
.page-hero {
	position: relative;
	overflow: hidden;
	text-align: center;
	background: linear-gradient(180deg, #DFF1F3 0%, #FDF0EF 62%, #FFF5F4 100%);
	padding-top: clamp(2.25rem, 5vw, 3.5rem);
	padding-bottom: clamp(1.75rem, 4vw, 2.75rem);
}

/* 淡いドットパターン。上から下へフェードさせて主張させすぎない */
.page-hero::before {
	content: "";
	position: absolute;
	inset: 0;
	background-image: radial-gradient(rgba(36, 96, 93, 0.16) 1px, transparent 1px);
	background-size: 16px 16px;
	-webkit-mask-image: radial-gradient(120% 90% at 50% 0%, #000 0%, transparent 72%);
	mask-image: radial-gradient(120% 90% at 50% 0%, #000 0%, transparent 72%);
	pointer-events: none;
}

.page-hero > * {
	position: relative;
	z-index: 1;
}

.page-hero .wp-block-post-title,
.page-hero .wp-block-query-title,
.page-hero h1 {
	margin: 0;
	font-size: clamp(1.6rem, 4vw, 2.4rem);
	line-height: 1.45;
	letter-spacing: 0.06em;
}

.page-hero .wp-block-post-title::after,
.page-hero .wp-block-query-title::after,
.page-hero h1::after {
	content: "";
	display: block;
	width: 52px;
	height: 3px;
	margin: 1.1rem auto 0;
	border-radius: 2px;
	background: var(--lhn-accent);
}

.page-hero__lead {
	max-width: 40em;
	margin: 1.25rem auto 0;
	font-size: 0.95rem;
	color: var(--wp--preset--color--foreground-light);
}

/* 帯の内側コンテナ。サイト幅に合わせて中央寄せする */
.page-hero__inner,
.lhn-breadcrumb-bar__inner {
	max-width: var(--site-content-max);
	margin-left: auto;
	margin-right: auto;
	padding-left: 1.5rem;
	padding-right: 1.5rem;
	box-sizing: border-box;
}

/* =============================================================================
   パンくずリスト
   ========================================================================== */
.lhn-breadcrumb-bar {
	background-color: var(--wp--preset--color--white);
	border-bottom: 1px solid var(--lhn-line);
}

.lhn-breadcrumb ol {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.35rem 0.55rem;
	margin: 0;
	padding: 0.7rem 0;
	list-style: none;
	font-size: 0.78rem;
	line-height: 1.6;
	color: var(--wp--preset--color--foreground-light);
}

.lhn-breadcrumb__item {
	display: flex;
	align-items: center;
	gap: 0.55rem;
}

.lhn-breadcrumb__item + .lhn-breadcrumb__item::before {
	content: "›";
	color: var(--wp--preset--color--rose);
	font-weight: 700;
}

.lhn-breadcrumb a {
	color: var(--wp--preset--color--foreground-light);
	text-decoration: none;
}

.lhn-breadcrumb a:hover {
	color: var(--wp--preset--color--primary);
	text-decoration: underline;
}

.lhn-breadcrumb [aria-current="page"] {
	color: var(--wp--preset--color--foreground);
	font-weight: 700;
}

/* =============================================================================
   本文の見出し（h2 は下線＋アクセント、h3 は左ライン、h4 は丸ポチ）
   ========================================================================== */
.wp-block-post-content > *:first-child,
.wp-block-post-content > *:first-child > *:first-child {
	margin-top: 0;
}

.wp-block-post-content h2 {
	position: relative;
	margin-top: clamp(2.75rem, 6vw, 4rem);
	margin-bottom: 1.4rem;
	padding-bottom: 0.75rem;
	border-bottom: 1px solid var(--lhn-line);
	font-size: clamp(1.4rem, 3.2vw, 1.85rem);
}

.wp-block-post-content h2::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: -1px;
	width: 5rem;
	height: 3px;
	border-radius: 2px;
	background: var(--lhn-accent);
}

.wp-block-post-content h2.has-text-align-center::after {
	left: 50%;
	transform: translateX(-50%);
}

.wp-block-post-content h3 {
	margin-top: clamp(2.25rem, 5vw, 3rem);
	margin-bottom: 1rem;
	padding-left: 0.95rem;
	border-left: 5px solid var(--wp--preset--color--primary);
	font-size: clamp(1.2rem, 2.6vw, 1.45rem);
	line-height: 1.6;
}

.wp-block-post-content h4 {
	position: relative;
	margin-top: 2.1rem;
	margin-bottom: 0.7rem;
	padding-left: 1.4rem;
	color: var(--wp--preset--color--primary-dark);
	font-size: 1.1rem;
	line-height: 1.7;
}

.wp-block-post-content h4::before {
	content: "";
	position: absolute;
	left: 0.1rem;
	top: 0.62em;
	width: 0.55rem;
	height: 0.55rem;
	border-radius: 50%;
	background: var(--wp--preset--color--rose);
	box-shadow: 0 0 0 3px rgba(238, 179, 187, 0.32);
}

.wp-block-post-content h5,
.wp-block-post-content h6 {
	margin-top: 1.85rem;
	margin-bottom: 0.5rem;
	color: var(--wp--preset--color--foreground-light);
	letter-spacing: 0.1em;
}

/* --- 編集画面から選べる見出しスタイル ------------------------------------ */
.wp-block-post-content h2.is-style-lhn-band,
h2.is-style-lhn-band {
	padding: 0.85rem 1.35rem;
	border-bottom: 0;
	border-left: 6px solid var(--wp--preset--color--primary);
	border-radius: 0 8px 8px 0;
	background-color: var(--wp--preset--color--background-alt);
}

.is-style-lhn-band::after {
	display: none !important;
}

.wp-block-post-content h2.is-style-lhn-center,
h2.is-style-lhn-center {
	text-align: center;
	padding-bottom: 0;
	border-bottom: 0;
}

.wp-block-post-content h2.is-style-lhn-center::after {
	position: static;
	display: block;
	width: 48px;
	margin: 1rem auto 0;
	transform: none;
}

.is-style-lhn-plain {
	padding: 0 !important;
	border: 0 !important;
	background: none !important;
}

.is-style-lhn-plain::after {
	display: none !important;
}

/* =============================================================================
   本文要素 — リスト・表・引用・画像・注記
   ========================================================================== */
.wp-block-post-content p {
	line-height: 1.95;
}

/* 蛍光ペン風のマーカー。日本語サイトでよく使われる強調 */
.wp-block-post-content mark {
	padding: 0 0.15em;
	background: linear-gradient(transparent 62%, rgba(238, 179, 187, 0.8) 62%);
	color: inherit;
}

/* --- リスト --------------------------------------------------------------- */
.wp-block-post-content ul.wp-block-list {
	list-style: none;
	padding-left: 0;
}

.wp-block-post-content ul.wp-block-list > li {
	position: relative;
	padding-left: 1.5rem;
	margin-bottom: 0.55rem;
}

.wp-block-post-content ul.wp-block-list > li::before {
	content: "";
	position: absolute;
	left: 0.3rem;
	top: 0.78em;
	width: 0.45rem;
	height: 0.45rem;
	border-radius: 50%;
	background-color: var(--wp--preset--color--primary);
}

.wp-block-post-content ol.wp-block-list {
	counter-reset: lhn-ol;
	list-style: none;
	padding-left: 0;
}

.wp-block-post-content ol.wp-block-list > li {
	counter-increment: lhn-ol;
	position: relative;
	padding-left: 2.25rem;
	margin-bottom: 0.65rem;
}

.wp-block-post-content ol.wp-block-list > li::before {
	content: counter(lhn-ol);
	position: absolute;
	left: 0;
	top: 0.2em;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 1.6rem;
	height: 1.6rem;
	border-radius: 50%;
	background-color: var(--wp--preset--color--aqua);
	color: var(--wp--preset--color--aqua-deep);
	font-size: 0.8rem;
	font-weight: 700;
	letter-spacing: 0;
}

.wp-block-post-content ul.is-style-lhn-check > li::before {
	content: "✓";
	top: 0;
	left: 0;
	width: auto;
	height: auto;
	border-radius: 0;
	background: none;
	color: var(--wp--preset--color--mint-deep);
	font-size: 1rem;
	font-weight: 900;
}

/* --- 表（会社概要スタイル） ----------------------------------------------- */
.wp-block-post-content .wp-block-table {
	overflow-x: auto;
	margin-top: 2rem;
	margin-bottom: 2rem;
}

.wp-block-post-content .wp-block-table table {
	width: 100%;
	border-collapse: separate;
	border-spacing: 0;
	border: 1px solid var(--lhn-line);
	border-radius: 12px;
	overflow: hidden;
	background-color: var(--wp--preset--color--white);
	font-size: 0.95rem;
}

.wp-block-post-content .wp-block-table th,
.wp-block-post-content .wp-block-table td {
	padding: 0.95rem 1.25rem;
	border: 0;
	border-bottom: 1px solid var(--lhn-line);
	text-align: left;
	vertical-align: top;
	line-height: 1.85;
}

.wp-block-post-content .wp-block-table th {
	background-color: var(--wp--preset--color--aqua);
	color: var(--wp--preset--color--aqua-deep);
	font-weight: 700;
	white-space: nowrap;
}

/* 見出しセルを持たない表は 1 列目をラベル列として扱う（団体概要など） */
.wp-block-post-content .wp-block-table table:not(:has(th)) td:first-child {
	width: 30%;
	background-color: var(--wp--preset--color--aqua);
	color: var(--wp--preset--color--aqua-deep);
	font-weight: 700;
}

.wp-block-post-content .wp-block-table tr:last-child th,
.wp-block-post-content .wp-block-table tr:last-child td {
	border-bottom: 0;
}

/* --- 引用 ----------------------------------------------------------------- */
.wp-block-post-content blockquote,
.wp-block-post-content .wp-block-quote {
	position: relative;
	margin: 2.25rem 0;
	padding: 1.75rem 1.75rem 1.5rem 3.1rem;
	border: 0;
	border-radius: var(--lhn-radius);
	background-color: var(--wp--preset--color--aqua);
	font-family: var(--wp--preset--font-family--japanese-serif);
	font-size: 1.05rem;
	line-height: 1.95;
}

.wp-block-post-content blockquote::before {
	content: "“";
	position: absolute;
	left: 1rem;
	top: 0.4rem;
	font-family: Georgia, serif;
	font-size: 3rem;
	line-height: 1;
	color: rgba(36, 96, 93, 0.28);
}

.wp-block-post-content blockquote cite {
	display: block;
	margin-top: 0.85rem;
	font-family: var(--wp--preset--font-family--japanese);
	font-size: 0.85rem;
	font-style: normal;
	color: var(--wp--preset--color--foreground-light);
}

/* --- 画像・キャプション --------------------------------------------------- */
.wp-block-post-content .wp-block-image img {
	border-radius: 12px;
}

.wp-block-post-content figcaption,
.wp-block-post-content .wp-element-caption {
	margin-top: 0.7rem;
	font-size: 0.8rem;
	line-height: 1.7;
	letter-spacing: 0.05em;
	color: var(--wp--preset--color--foreground-light);
	text-align: center;
}

/* 横並びの画像グループはスマホで折り返す */
@media (max-width: 600px) {
	.wp-block-post-content .wp-block-group.is-layout-flex {
		flex-wrap: wrap !important;
	}
}

/* --- メディアとテキスト（人物紹介など） ----------------------------------- */
.wp-block-post-content .wp-block-media-text {
	margin-top: 2.5rem;
	margin-bottom: 2.5rem;
	border-radius: 16px;
	overflow: hidden;
	background-color: var(--wp--preset--color--white);
	box-shadow: var(--lhn-shadow-sm);
}

.wp-block-post-content .wp-block-media-text .wp-block-media-text__content {
	padding: clamp(1.25rem, 3vw, 2rem);
}

/* 写真はカードの高さいっぱいに切り抜く（上下に白があくのを防ぐ） */
.wp-block-post-content .wp-block-media-text .wp-block-media-text__media {
	align-self: stretch;
}

.wp-block-post-content .wp-block-media-text .wp-block-media-text__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.wp-block-post-content .wp-block-media-text h4 {
	margin-top: 0;
}

/* --- 注意書きボックス（グループのブロックスタイル） ----------------------- */
.is-style-lhn-note {
	padding: clamp(1.25rem, 3vw, 1.75rem) !important;
	border: 1px dashed rgba(36, 96, 93, 0.4);
	border-radius: var(--lhn-radius);
	background-color: var(--wp--preset--color--aqua);
}

.is-style-lhn-note > *:first-child {
	margin-top: 0;
}

/* =============================================================================
   記事ヘッダー・記事一覧・ページネーション
   ========================================================================== */
.lhn-article-header {
	margin-bottom: clamp(1.5rem, 4vw, 2.25rem);
	padding-bottom: 1.25rem;
	border-bottom: 1px solid var(--lhn-line);
}

.lhn-article-header .wp-block-post-title {
	margin: 0.85rem 0 0;
	font-size: clamp(1.6rem, 4vw, 2.3rem);
	line-height: 1.5;
	letter-spacing: 0.04em;
}

.lhn-article-meta {
	font-size: 0.82rem;
	letter-spacing: 0.05em;
	color: var(--wp--preset--color--foreground-light);
}

/* カテゴリーはピル型に。区切り文字（, ）は隠して余白で見せる */
.wp-block-post-terms {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.4rem;
}

.wp-block-post-terms__separator {
	display: none;
}

.wp-block-post-terms a {
	display: inline-block;
	padding: 0.25rem 0.85rem;
	border-radius: 999px;
	background-color: var(--wp--preset--color--aqua);
	color: var(--wp--preset--color--aqua-deep) !important;
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-decoration: none !important;
	transition: background-color 0.2s ease;
}

.wp-block-post-terms a:hover {
	background-color: var(--wp--preset--color--mint);
}

/* 記事一覧の 1 行（アーカイブ・検索結果）
   アイキャッチが無い投稿でも崩れないよう、grid ではなく flex で組む */
.lhn-post-row {
	display: flex;
	gap: 1.5rem;
	align-items: center;
	padding: 1.15rem;
	border: 1px solid var(--lhn-line);
	border-radius: var(--lhn-radius);
	background-color: var(--wp--preset--color--white);
	box-shadow: var(--lhn-shadow-sm);
	transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

.lhn-post-row:hover {
	transform: translateY(-3px);
	border-color: var(--wp--preset--color--rose);
	box-shadow: var(--lhn-shadow-md);
}

.lhn-post-row .wp-block-post-featured-image {
	flex: 0 0 220px;
	margin: 0;
}

.lhn-post-row .wp-block-post-featured-image img {
	border-radius: 10px;
}

.lhn-post-row > .wp-block-group {
	flex: 1 1 auto;
	min-width: 0;
}

.lhn-post-row .wp-block-post-title {
	margin: 0.35rem 0 0.5rem;
	line-height: 1.6;
}

@media (max-width: 600px) {
	.lhn-post-row {
		flex-direction: column;
		align-items: stretch;
		gap: 1rem;
	}

	.lhn-post-row .wp-block-post-featured-image {
		flex: 0 0 auto;
	}
}

/* 投稿カード（トップページ・ブログ一覧） */
.lhn-post-card {
	overflow: hidden;
	box-shadow: var(--lhn-shadow-sm);
	transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.lhn-post-card:hover {
	transform: translateY(-4px);
	box-shadow: var(--lhn-shadow-md);
}

/* ページ送り */
.wp-block-query-pagination {
	gap: 0.45rem;
}

.wp-block-query-pagination-numbers {
	display: flex;
	flex-wrap: wrap;
	gap: 0.45rem;
	align-items: center;
}

.wp-block-query-pagination .page-numbers,
.wp-block-query-pagination-previous,
.wp-block-query-pagination-next {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 2.5rem;
	height: 2.5rem;
	padding: 0 0.85rem;
	border: 1px solid var(--lhn-line);
	border-radius: 999px;
	background-color: var(--wp--preset--color--white);
	color: var(--wp--preset--color--foreground) !important;
	font-size: 0.88rem;
	font-weight: 600;
	text-decoration: none !important;
	transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.wp-block-query-pagination .page-numbers:hover,
.wp-block-query-pagination-previous:hover,
.wp-block-query-pagination-next:hover {
	background-color: var(--wp--preset--color--blush);
	border-color: var(--wp--preset--color--rose);
}

.wp-block-query-pagination .page-numbers.current {
	background-color: var(--wp--preset--color--primary);
	border-color: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--white) !important;
}

.wp-block-query-pagination .page-numbers.dots {
	border-color: transparent;
	background: none;
	min-width: 1.5rem;
	padding: 0;
}

/* 前後の記事 */
.wp-block-post-navigation-link {
	flex: 1 1 45%;
}

.wp-block-post-navigation-link a {
	display: block;
	padding: 1rem 1.25rem;
	border: 1px solid var(--lhn-line);
	border-radius: 12px;
	background-color: var(--wp--preset--color--white);
	box-shadow: var(--lhn-shadow-sm);
	color: var(--wp--preset--color--foreground) !important;
	font-size: 0.9rem;
	font-weight: 600;
	line-height: 1.7;
	text-decoration: none !important;
	transition: background-color 0.2s ease, border-color 0.2s ease;
}

.wp-block-post-navigation-link a:hover {
	background-color: var(--wp--preset--color--background-alt);
	border-color: var(--wp--preset--color--rose);
}

.wp-block-post-navigation-link.post-navigation-link-next {
	text-align: right;
}

/* =============================================================================
   セクション見出し（トップページなど、テンプレート側で使う見出し）
   ========================================================================== */
.lhn-section-title {
	text-align: center;
	margin-bottom: clamp(1.75rem, 4vw, 2.5rem);
}

.lhn-section-title h2 {
	margin: 0;
	font-size: clamp(1.5rem, 3.5vw, 2rem);
	letter-spacing: 0.08em;
}

.lhn-section-title h2::after {
	content: "";
	display: block;
	width: 48px;
	height: 3px;
	margin: 0.95rem auto 0;
	border-radius: 2px;
	background: var(--lhn-accent);
}

.lhn-section-title__lead {
	max-width: 38em;
	margin: 1rem auto 0;
	font-size: 0.92rem;
	color: var(--wp--preset--color--foreground-light);
}

/* =============================================================================
   相談導線（フッター手前の CTA 帯）
   ========================================================================== */
.lhn-cta {
	position: relative;
	overflow: hidden;
	padding-top: clamp(2.5rem, 6vw, 4rem);
	padding-bottom: clamp(2.5rem, 6vw, 4rem);
	background: linear-gradient(135deg, #FBDDDC 0%, #FFF5F4 42%, #D4F1D3 72%, #D8EEF0 100%);
	border-top: 1px solid var(--lhn-line);
	text-align: center;
}

.lhn-cta__inner {
	max-width: var(--site-content-max);
	margin: 0 auto;
	padding: 0 1.5rem;
}

.lhn-cta__title {
	margin: 0.35rem 0 0.8rem;
	font-size: clamp(1.35rem, 3.5vw, 1.9rem);
	font-weight: 700;
	letter-spacing: 0.06em;
	color: var(--wp--preset--color--foreground);
}

.lhn-cta__lead {
	max-width: 34em;
	margin: 0 auto 1.9rem;
	font-size: 0.95rem;
	line-height: 1.9;
	color: var(--wp--preset--color--foreground);
}

.lhn-cta__actions {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 1rem;
}

.lhn-cta__btn {
	display: inline-flex;
	flex-direction: column;
	align-items: center;
	gap: 0.2rem;
	min-width: min(100%, 17rem);
	padding: 0.95rem 2rem;
	border-radius: 999px;
	text-decoration: none;
	box-shadow: 0 6px 18px rgba(181, 64, 79, 0.18);
	transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.lhn-cta__btn:hover {
	transform: translateY(-2px);
	box-shadow: 0 10px 24px rgba(181, 64, 79, 0.26);
}

.lhn-cta__btn small {
	font-size: 0.7rem;
	font-weight: 600;
	letter-spacing: 0.14em;
	opacity: 0.85;
}

.lhn-cta__btn strong {
	font-size: 1.15rem;
	font-weight: 700;
	letter-spacing: 0.04em;
}

.lhn-cta__btn--tel {
	background-color: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--white) !important;
}

.lhn-cta__btn--mail {
	background-color: var(--wp--preset--color--white);
	border: 2px solid var(--wp--preset--color--primary);
	color: var(--wp--preset--color--primary-dark) !important;
}

.lhn-cta__note {
	margin: 1.35rem 0 0;
	font-size: 0.8rem;
	letter-spacing: 0.04em;
	color: var(--wp--preset--color--foreground-light);
}

/* =============================================================================
   ボタンの矢印
   ========================================================================== */
.wp-block-button__link::after {
	content: "→";
	display: inline-block;
	margin-left: 0.6rem;
	transition: transform 0.2s ease;
}

.wp-block-button__link:hover::after {
	transform: translateX(3px);
}

/* 注目セクション内のリンクボタンにも同じ矢印を付ける */
.featured-promo a[href]::after {
	content: "→";
	display: inline-block;
	margin-left: 0.6rem;
	transition: transform 0.2s ease;
}

.featured-promo a[href]:hover::after {
	transform: translateX(3px);
}

/* =============================================================================
   お問い合わせフォーム（Contact Form 7）
   ========================================================================== */
.wpcf7 {
	max-width: var(--site-reading-max);
	margin: 0 auto;
	padding: clamp(1.5rem, 4vw, 2.75rem);
	border: 1px solid var(--lhn-line);
	border-radius: 18px;
	background-color: var(--wp--preset--color--white);
	box-shadow: var(--lhn-shadow-sm);
}

.wpcf7-form p {
	margin: 0 0 1.4rem;
}

.wpcf7-form label {
	display: block;
	margin-bottom: 0.45rem;
	font-size: 0.92rem;
	font-weight: 700;
	letter-spacing: 0.04em;
	color: var(--wp--preset--color--foreground);
}

.wpcf7-form input[type="text"],
.wpcf7-form input[type="email"],
.wpcf7-form input[type="tel"],
.wpcf7-form input[type="url"],
.wpcf7-form input[type="number"],
.wpcf7-form input[type="date"],
.wpcf7-form select,
.wpcf7-form textarea {
	width: 100%;
	padding: 0.85rem 1rem;
	border: 1px solid #E6CFD0;
	border-radius: 10px;
	background-color: var(--wp--preset--color--background);
	font-family: inherit;
	font-size: 1rem;
	line-height: 1.7;
	color: var(--wp--preset--color--foreground);
	transition: border-color 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
	box-sizing: border-box;
}

.wpcf7-form textarea {
	min-height: 12rem;
	resize: vertical;
}

.wpcf7-form input:focus,
.wpcf7-form select:focus,
.wpcf7-form textarea:focus {
	outline: none;
	border-color: var(--wp--preset--color--primary);
	background-color: var(--wp--preset--color--white);
	box-shadow: 0 0 0 3px rgba(181, 64, 79, 0.13);
}

.wpcf7-form input::placeholder,
.wpcf7-form textarea::placeholder {
	color: #B9A5A7;
}

.wpcf7-form .wpcf7-submit {
	display: block;
	min-width: 15rem;
	margin: 2rem auto 0;
	padding: 0.95rem 3rem;
	border: 0;
	border-radius: 999px;
	background-color: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--white);
	font-family: inherit;
	font-size: 1rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	cursor: pointer;
	box-shadow: 0 6px 18px rgba(181, 64, 79, 0.22);
	transition: background-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}

.wpcf7-form .wpcf7-submit:hover {
	background-color: var(--wp--preset--color--primary-dark);
	transform: translateY(-2px);
	box-shadow: 0 10px 24px rgba(181, 64, 79, 0.28);
}

.wpcf7-form .wpcf7-not-valid-tip {
	margin-top: 0.4rem;
	font-size: 0.8rem;
	color: var(--wp--preset--color--primary);
}

.wpcf7-form .wpcf7-response-output {
	margin: 1.5rem 0 0 !important;
	padding: 0.95rem 1.25rem !important;
	border-width: 1px !important;
	border-radius: 10px !important;
	font-size: 0.9rem;
}

/* =============================================================================
   検索フォーム
   ========================================================================== */
.wp-block-search__inside-wrapper {
	border: 1px solid var(--lhn-line);
	border-radius: 999px;
	background-color: var(--wp--preset--color--white);
	padding: 0.25rem 0.25rem 0.25rem 1.1rem;
	box-shadow: var(--lhn-shadow-sm);
}

.wp-block-search__input {
	border: 0 !important;
	background: transparent;
	font-family: inherit;
}

.wp-block-search__input:focus {
	outline: none;
}

.wp-block-search__button {
	border: 0;
	border-radius: 999px;
	background-color: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--white);
	padding: 0.6rem 1.5rem;
	font-weight: 700;
	cursor: pointer;
	transition: background-color 0.2s ease;
}

.wp-block-search__button:hover {
	background-color: var(--wp--preset--color--primary-dark);
}

/* =============================================================================
   編集画面での見え方をフロントに近づける
   本文の装飾はフロントでは .wp-block-post-content の中に当たるが、
   投稿編集画面ではその入れ物が無いので、ルート直下の見出しに同じ指定を重ねる。
   ========================================================================== */
.editor-styles-wrapper .is-root-container > h2 {
	position: relative;
	margin-top: 2.75rem;
	margin-bottom: 1.4rem;
	padding-bottom: 0.75rem;
	border-bottom: 1px solid var(--lhn-line);
}

.editor-styles-wrapper .is-root-container > h2::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: -1px;
	width: 5rem;
	height: 3px;
	border-radius: 2px;
	background: var(--lhn-accent);
}

.editor-styles-wrapper .is-root-container > h3 {
	margin-top: 2.25rem;
	margin-bottom: 1rem;
	padding-left: 0.95rem;
	border-left: 5px solid var(--wp--preset--color--primary);
}

.editor-styles-wrapper .is-root-container > h4 {
	position: relative;
	margin-top: 2.1rem;
	margin-bottom: 0.7rem;
	padding-left: 1.4rem;
	color: var(--wp--preset--color--primary-dark);
}

.editor-styles-wrapper .is-root-container > h4::before {
	content: "";
	position: absolute;
	left: 0.1rem;
	top: 0.62em;
	width: 0.55rem;
	height: 0.55rem;
	border-radius: 50%;
	background: var(--wp--preset--color--rose);
	box-shadow: 0 0 0 3px rgba(238, 179, 187, 0.32);
}