/* Amehale theme — 補助スタイル(theme.json で表現できない部分のみ)
   設計方針: 静かで硬質。オレンジはアクセント限定 / 余白広め / タイポ主導 /
   奥行きは影と極薄の階調で出し、装飾は足さない。 */

:root {
	/* 影は「浮かせる」のではなく「置いてある」ように、低コントラストで多層に重ねる */
	--amehale-shadow-1: 0 1px 2px rgba(0, 0, 0, .04), 0 1px 1px rgba(0, 0, 0, .03);
	--amehale-shadow-2: 0 2px 4px rgba(0, 0, 0, .04), 0 8px 16px -4px rgba(0, 0, 0, .06);
	--amehale-shadow-3: 0 4px 8px rgba(0, 0, 0, .05), 0 16px 32px -8px rgba(0, 0, 0, .10);
	--amehale-hairline: rgba(0, 0, 0, .10);
	--amehale-hairline-dark: rgba(255, 255, 255, .12);
	--amehale-ease: cubic-bezier(.22, .61, .36, 1);
}

/* 本文と見出しのコントラスト差でメリハリを出す(参照: channel.io の黒/85%/60%) */
.wp-block-post-excerpt__excerpt,
.wp-block-post-date {
	color: var(--wp--preset--color--muted);
}

/* 数字は等幅にして、桁が動いても行が揺れないようにする */
.amehale-stat-number,
.amehale-kpi-value,
.amehale-step-number,
.wp-block-post-date {
	font-variant-numeric: tabular-nums;
	font-feature-settings: "tnum" 1;
}

/* 本文の読みやすさ: 和文の行長を詰めすぎない */
p {
	text-wrap: pretty;
}

h1, h2, h3 {
	text-wrap: balance;
}

/* セクション帯の左右余白。
   背景色は画面端まで伸ばしつつ、中身が端に密着しないようにする。
   対象は最上位の帯のみ(入れ子のカード等には効かせない)。 */
.amehale-header,
main > .wp-block-group,
footer > .wp-block-group,
.wp-block-group.alignfull {
	padding-inline: clamp(1.25rem, 5vw, 2.5rem);
}

/* 見出し内の強調(キーナンバー・キャッチのアクセント) */
h1 strong,
h2 strong {
	color: var(--wp--preset--color--primary);
}

/* ロゴ */
.amehale-logo img,
.wp-block-site-logo img {
	height: auto;
	display: block;
}

/* フッター: 白背景。本文との境目は上部のヘアラインだけで示す */
.amehale-footer {
	border-top: 1px solid var(--amehale-hairline);
}

/* 列見出しは小さく、リンクとの差を色ではなく字間と太さで付ける */
.amehale-footer h2 {
	letter-spacing: 0.04em;
	margin-bottom: 0.75rem;
}

.amehale-footer a {
	color: var(--wp--preset--color--muted);
	text-decoration: none;
	line-height: 2.4;
}

.amehale-footer a:hover {
	color: var(--wp--preset--color--contrast);
	text-decoration: underline;
}

/* ヘッダー: 上部固定。
   sticky はこの <header>(テンプレート部品の包み)に掛ける。
   中身の .amehale-header に掛けても、包む側が中身と同じ高さしかないため
   スクロールすると親ごと画面外に出てしまい、固定されない。 */
.wp-site-blocks > header.wp-block-template-part {
	position: sticky;
	top: 0;
	z-index: 100;
}

/* スクロールするまで罫線を出さない */
.amehale-header {
	background: color-mix(in srgb, var(--wp--preset--color--base) 82%, transparent);
	backdrop-filter: saturate(180%) blur(14px);
	-webkit-backdrop-filter: saturate(180%) blur(14px);
	border-bottom: 1px solid transparent;
	transition: border-color .3s var(--amehale-ease), box-shadow .3s var(--amehale-ease);
}

.amehale-header.is-stuck {
	border-bottom-color: var(--amehale-hairline);
	box-shadow: var(--amehale-shadow-1);
}

/* ヘッダー内のCTAは2つ並べてもナビゲーションを圧迫しないサイズに保つ。 */
.amehale-header-actions {
	flex-wrap: nowrap !important;
	gap: .5rem;
}

.amehale-header .amehale-header-actions .wp-block-button__link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	height: 3rem;
	font-size: 0.75rem !important;
	padding: .65rem 1.25rem;
	white-space: nowrap;
}

/*
 * ハンバーガーに切り替える幅。
 * ロゴ・ナビ7項目・CTA2つを1行に置くには実測で約830px必要なため、
 * 余裕をみて880px以下ではメニューを畳む(コア既定の600pxでは収まらず2段に折り返す)。
 *
 * あわせて背景の backdrop-filter もこの幅では外す。
 * backdrop-filter は fixed 要素の基準座標をヘッダー内に変えてしまい、
 * 全画面メニューがヘッダーの高さに切り取られるため。
 */
@media (max-width: 880px) {
	.amehale-header {
		background: var(--wp--preset--color--base);
		backdrop-filter: none;
		-webkit-backdrop-filter: none;
	}

	/* ナビゲーションブロックの overlayMenu:"mobile" が持つ600px境界を、上記の幅に揃える */
	.amehale-header .wp-block-navigation__responsive-container:not(.is-menu-open) {
		display: none !important;
	}

	/* --- 開く/閉じるボタン ---
	   コアは「開く」をヘッダー内、「閉じる」をオーバーレイ内に別々に描くので、
	   放っておくと位置がずれる。両方を同じ大きさ・同じ座標に固定し、
	   アイコンも共通の線2本で描いて、開くとその線が回転してバツになるようにする。

	   縦位置: 開くボタンを 2.75rem 角にすると、ロゴ(最大38px)より高いので
	   この高さがヘッダー1行分を決める。上下の余白は 1rem ずつなので、
	   閉じるボタンも top: 1rem に置けば中心が必ず一致する。
	   横位置: どちらもセクション帯と同じ左右余白に合わせる。 */
	.amehale-header .wp-block-navigation__responsive-container-open,
	.amehale-header .wp-block-navigation__responsive-container-close {
		display: flex !important;
		align-items: center;
		justify-content: center;
		width: 2.75rem;
		height: 2.75rem;
		padding: 0;
		border: 0;
		background: none;
		color: var(--wp--preset--color--contrast);
	}

	.amehale-header .wp-block-navigation__responsive-container-close {
		position: fixed;
		top: 1rem;
		right: clamp(1.25rem, 5vw, 2.5rem);
		z-index: 1;
	}

	/* 開くボタンは行の右端にあり、帯の左右余白がそのまま効く */
	.amehale-header .wp-block-navigation__responsive-container-open {
		margin-right: 0;
	}

	/* コアのアイコンは使わない(回転させるため線をCSSで描く) */
	.amehale-header .wp-block-navigation__responsive-container-open svg,
	.amehale-header .wp-block-navigation__responsive-container-close svg {
		display: none;
	}

	.amehale-header .wp-block-navigation__responsive-container-open::before,
	.amehale-header .wp-block-navigation__responsive-container-open::after,
	.amehale-header .wp-block-navigation__responsive-container-close::before,
	.amehale-header .wp-block-navigation__responsive-container-close::after {
		content: "";
		position: absolute;
		width: 1.125rem;
		height: 2px;
		border-radius: 1px;
		background: currentColor;
	}

	/* 閉じている状態: 上下に2本 */
	.amehale-header .wp-block-navigation__responsive-container-open::before {
		transform: translateY(-4px);
	}

	.amehale-header .wp-block-navigation__responsive-container-open::after {
		transform: translateY(4px);
	}

	/* 開いた状態: 同じ2本が中央に寄って交差する */
	.amehale-header .wp-block-navigation__responsive-container-close::before {
		animation: amehale-burger-top .28s var(--amehale-ease) forwards;
	}

	.amehale-header .wp-block-navigation__responsive-container-close::after {
		animation: amehale-burger-bottom .28s var(--amehale-ease) forwards;
	}

	@media (prefers-reduced-motion: reduce) {
		.amehale-header .wp-block-navigation__responsive-container-close::before {
			animation: none;
			transform: rotate(45deg);
		}

		.amehale-header .wp-block-navigation__responsive-container-close::after {
			animation: none;
			transform: rotate(-45deg);
		}
	}

	/* ============ ハンバーガーを開いたときのメニュー ============
	   ヘッダー(ロゴ+ボタン)は出したまま、その下端からメニューを開く。
	   CTAはナビゲーションの中に入れてあるので、閉じている間はバーに出ず、
	   開いたときだけ最下部にまとまって現れる。
	   コアの既定は横並び・右揃え(items-justified-right)のままなので、
	   縦一列・左揃えに組み直す。 */
	.amehale-header .wp-block-navigation__responsive-container.is-menu-open {
		/* ヘッダーの下端から。高さは app.js が実測値を流す(既定値は 1rem+2.75rem+1rem+罫線) */
		top: var(--amehale-header-h, 4.8125rem);
		padding: 0;
		background: var(--wp--preset--color--base);
		border-top: 1px solid var(--amehale-hairline);

		/* コアはこのコンテナに transform を伴う開閉アニメーションを掛ける。
		   transform がある要素は子の position:fixed の基準になってしまい、
		   バツボタンをヘッダーの上(ビューポート基準)に置けなくなるため無効化する。
		   代わりの見た目の変化は下の opacity で付ける。 */
		animation: none !important;
		transform: none !important;
		opacity: 1;
	}

	/* 開いている間はハンバーガーを隠す。
	   全画面オーバーレイだった頃はメニューが覆って見えなくなっていたが、
	   ヘッダーを出したままにすると同じ位置でバツと重なるため、明示的に消す。 */
	.amehale-header .wp-block-navigation:has(.is-menu-open) .wp-block-navigation__responsive-container-open {
		visibility: hidden;
	}

	/* コアの入れ子は既定では画面高まで伸びない。CTAを下端に置くために伸ばす。
	   スクロールはこの内側に持たせる(コンテナに overflow を掛けると、
	   ヘッダー上に出したバツボタンの扱いがブラウザ依存になるため)。 */
	.amehale-header .is-menu-open .wp-block-navigation__responsive-close {
		display: flex;
		flex: 1;
		width: 100%;
		overflow-y: auto;
		overscroll-behavior: contain;
	}

	.amehale-header .is-menu-open .wp-block-navigation__responsive-dialog {
		display: flex;
		flex-direction: column;
		flex: 1;
		min-height: 100%;
		/* ヘッダーの下から始まるので、閉じるボタンを避ける余白は不要 */
		padding: 1.25rem clamp(1.25rem, 5vw, 2.5rem) 2.5rem;
	}

	.amehale-header .is-menu-open .wp-block-navigation__responsive-container-content {
		display: flex;
		flex-direction: column;
		align-items: stretch;
		/* 高さいっぱいに広げて、CTAを画面下端(親指の届く位置)に寄せる */
		flex: 1;
		width: 100%;
		gap: 0;
		/* コアは全画面オーバーレイ前提で、バツボタンを避ける 3.5rem を空ける。
		   バツはヘッダー上(パネルの外)に出したので、この余白は不要。 */
		padding-top: 0 !important;
	}

	/* メニューを開くとコアが先頭項目に自動でフォーカスを当てる。
	   タップで開いた人にまで枠が出ると誤操作に見えるので、
	   キーボード操作のとき(:focus-visible)だけ枠を出す。 */
	.amehale-header .is-menu-open .wp-block-navigation-item__content:focus:not(:focus-visible) {
		outline: none;
	}

	.amehale-header .is-menu-open .wp-block-navigation__container {
		align-items: stretch !important;
		justify-content: flex-start !important;
		width: 100%;
		gap: 0 !important;
	}

	/* コアはナビの右揃え設定(items-justified-right)をオーバーレイにも持ち込み、
	   項目を flex-end で右に寄せる。縦一列では読みにくいので左揃えに戻す。 */
	.amehale-header .is-menu-open .wp-block-navigation-item {
		align-items: stretch !important;
		width: 100%;
		text-align: left;
	}

	/* 第1階層。罫線で区切り、指で押せる高さを確保する */
	.amehale-header .is-menu-open .wp-block-navigation__container > .wp-block-navigation-item {
		border-top: 1px solid var(--amehale-hairline);
	}

	.amehale-header .is-menu-open .wp-block-navigation__container > .wp-block-navigation-item > .wp-block-navigation-item__content {
		padding: 1.05rem 0;
		font-size: 1.0625rem;
		font-weight: 700;
		line-height: 1.5;
	}

	/* --- 子メニューを持つ項目はアコーディオン ---
	   ラベル(リンク)と開閉ボタンを1行に並べ、子メニューはその下の行に置く。
	   li は縦積みの flex なので、行を分けるためにグリッドに変える。 */
	.amehale-header .is-menu-open .wp-block-navigation-item.has-child {
		display: grid !important;
		grid-template-columns: minmax(0, 1fr) auto;
		align-items: center;
	}

	.amehale-header .is-menu-open .wp-block-navigation-item.has-child > .wp-block-navigation-item__content {
		grid-column: 1;
	}

	.amehale-header .is-menu-open .wp-block-navigation-item.has-child > .wp-block-navigation__submenu-container {
		grid-column: 1 / -1;
	}

	/* 開閉ボタン。指で押せる大きさ(2.75rem)は保ちつつ、見た目は中のSVGで決める。
	   ボタン自体は回転させないこと。開いたときの矢印の反転はコアがSVGに
	   transform を当てて行うため、ボタンでも回すと合計360度になり、
	   開いても向きが変わらないように見える。 */
	.amehale-header .is-menu-open .wp-block-navigation__submenu-icon {
		display: flex !important;
		align-items: center;
		justify-content: center;
		grid-column: 2;
		width: 2.75rem;
		height: 2.75rem;
		margin: 0;
		padding: 0;
		border: 0;
		background: none;
		color: var(--wp--preset--color--muted);
	}

	/* コアのSVGは 12x12 の線画だが、寸法を指定しないとボタン(2.75rem)いっぱいに
	   引き伸ばされ、線が約3.7倍に太くなる。実寸を与えて他のアイコンと揃える。 */
	.amehale-header .is-menu-open .wp-block-navigation__submenu-icon svg {
		width: 1.125rem;
		height: 1.125rem;
		transition: transform .3s var(--amehale-ease);
	}

	/* 線の太さはハンバーガーの2本線(2px)に合わせる。
	   non-scaling-stroke で、SVGの拡大率に関係なく画面上2pxに固定する。 */
	.amehale-header .is-menu-open .wp-block-navigation__submenu-icon svg path {
		stroke-width: 2;
		stroke-linecap: round;
		stroke-linejoin: round;
		vector-effect: non-scaling-stroke;
	}

	/* 第2階層。既定は閉じておき、開閉ボタンの aria-expanded で開く。
	   字下げと細い縦罫で、親の下にぶら下がっていることを示す。 */
	.amehale-header .is-menu-open .wp-block-navigation__submenu-container {
		align-items: stretch !important;
		gap: 0 !important;
		width: 100%;
		margin: 0 !important;
		padding: 0 0 0 .9rem !important;
		/* コアがオーバーレイ内の子メニューに border: none !important を当てるため、
		   こちらも !important で縦罫だけ戻す */
		border: 0 !important;
		border-left: 2px solid var(--wp--preset--color--line) !important;
		/* コアはオーバーレイ内の子メニューに overflow/opacity を !important で当てて
		   常に見せようとするので、こちらも !important で閉じた状態を作る */
		overflow: hidden !important;
		max-height: 0;
		opacity: 0 !important;
		transition: max-height .3s var(--amehale-ease), opacity .25s var(--amehale-ease), margin-bottom .3s var(--amehale-ease);
	}

	.amehale-header .is-menu-open .wp-block-navigation__submenu-icon[aria-expanded="true"] ~ .wp-block-navigation__submenu-container {
		max-height: 24rem;
		margin-bottom: .9rem !important;
		opacity: 1 !important;
	}

	@media (prefers-reduced-motion: reduce) {
		.amehale-header .is-menu-open .wp-block-navigation__submenu-container,
		.amehale-header .is-menu-open .wp-block-navigation__submenu-icon svg {
			transition: none;
		}
	}

	.amehale-header .is-menu-open .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
		padding: .6rem 0;
		color: var(--wp--preset--color--muted);
		font-size: .9375rem;
		font-weight: 500;
		line-height: 1.6;
	}

	/* CTAはメニューの最後に、横幅いっぱいで縦に積む */
	.amehale-header .is-menu-open .amehale-header-actions {
		flex-direction: column;
		flex-wrap: wrap !important;
		gap: .75rem !important;
		width: 100%;
		margin-top: auto;
		padding-top: 2rem;
	}

	.amehale-header .is-menu-open .amehale-header-actions .wp-block-button {
		width: 100%;
	}

	.amehale-header .is-menu-open .amehale-header-actions .wp-block-button__link {
		width: 100%;
		height: 3.5rem;
		border-radius: 999px;
		font-size: 0.9375rem !important;
	}

	/* 開いたときだけ、上から順に軽く現れる */
	@media (prefers-reduced-motion: no-preference) {
		.amehale-header .is-menu-open .wp-block-navigation__container > .wp-block-navigation-item,
		.amehale-header .is-menu-open .amehale-header-actions {
			animation: amehale-menu-in .34s var(--amehale-ease) backwards;
		}

		.amehale-header .is-menu-open .wp-block-navigation__container > :nth-child(1) { animation-delay: .02s; }
		.amehale-header .is-menu-open .wp-block-navigation__container > :nth-child(2) { animation-delay: .06s; }
		.amehale-header .is-menu-open .wp-block-navigation__container > :nth-child(3) { animation-delay: .10s; }
		.amehale-header .is-menu-open .wp-block-navigation__container > :nth-child(4) { animation-delay: .14s; }
		.amehale-header .is-menu-open .wp-block-navigation__container > :nth-child(n+5) { animation-delay: .18s; }
		.amehale-header .is-menu-open .amehale-header-actions { animation-delay: .22s; }
	}
}

@keyframes amehale-menu-in {
	from { opacity: 0; transform: translateY(8px); }
	to   { opacity: 1; transform: none; }
}

/* トップページのファーストビュー。
   上下 7.5rem はデスクトップ基準の値で、スマホでは固定ヘッダー(約77px)と合わさって
   h1 が画面の1/4以上下に押し下げられる。狭い画面では上の余白だけ詰める。
   ブロックが style 属性で padding を直接持つため !important で上書きする。 */
@media (max-width: 781px) {
	.home .wp-block-post-content > .wp-block-group:first-child {
		padding-top: 2.5rem !important;
	}
}

/* ハンバーガーの線2本が、そのまま回転してバツになる */
@keyframes amehale-burger-top {
	from { transform: translateY(-4px) rotate(0deg); }
	to   { transform: translateY(0) rotate(45deg); }
}

@keyframes amehale-burger-bottom {
	from { transform: translateY(4px) rotate(0deg); }
	to   { transform: translateY(0) rotate(-45deg); }
}

@media (max-width: 520px) {
	.amehale-header {
		padding-inline: 1rem;
	}

	/* 帯の余白を詰める幅では、閉じるボタンとメニューの左右も同じだけ詰める
	   (開くボタンと座標をずらさないため) */
	.amehale-header .wp-block-navigation__responsive-container-close {
		right: 1rem;
	}

	.amehale-header .is-menu-open .wp-block-navigation__responsive-dialog {
		padding-inline: 1rem;
	}

	.amehale-header > .wp-block-group,
	.amehale-header > .wp-block-group > .wp-block-group {
		gap: .75rem;
	}

	.amehale-header .amehale-logo img {
		width: 108px;
	}

	.amehale-header-actions {
		gap: .35rem;
	}

	.amehale-header .amehale-header-actions .wp-block-button__link {
		padding: .55rem .65rem;
	}
}

/* カード共通。
   押せるカードだけが反応するように、ホバー演出は .is-linked に限定する。
   .is-linked は app.js がリンクを含むカードにのみ付与する。 */
.amehale-card {
	position: relative;
	background: var(--wp--preset--color--base);
	border: 1px solid var(--amehale-hairline);
	border-radius: 12px;
	box-shadow: var(--amehale-shadow-1);
}

/* 読むだけのカードは静止させる(押せると誤解させない) */

/* 押せるカード: カード全面がクリック領域になる */
.amehale-card.is-linked {
	cursor: pointer;
	/* 右下の矢印と本文が重ならないよう、ブロック側のインライン指定を上書きする */
	padding-bottom: 3.25rem !important;
	transition: border-color .25s var(--amehale-ease);
}

.amehale-card.is-linked a::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: inherit;
}

/* ホバーは浮かせず、罫線の色だけを変える */
.amehale-card.is-linked:hover {
	border-color: var(--wp--preset--color--primary);
}

/* 右下の矢印。押せることを形でも示し、ホバーで前に出る */
.amehale-card.is-linked::after {
	content: "";
	position: absolute;
	right: 1.75rem;
	bottom: 1.5rem;
	width: 18px;
	height: 10px;
	background: currentColor;
	color: var(--wp--preset--color--muted);
	clip-path: polygon(0 40%, 11px 40%, 11px 0, 100% 50%, 11px 100%, 11px 60%, 0 60%);
	transition: color .25s var(--amehale-ease);
}

.amehale-card.is-linked:hover::after {
	color: var(--wp--preset--color--primary);
}

.amehale-card.is-linked:focus-within {
	border-color: var(--wp--preset--color--primary);
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--wp--preset--color--primary) 25%, transparent);
}

.amehale-card h3 a,
.amehale-card h2 a {
	text-decoration: none;
}

/* 実績数値バー: 塗りをやめ、上下のヘアラインだけで面を区切る */
.amehale-stat {
	border-block: 1px solid var(--amehale-hairline);
}

/* 大きな数字は細めのウェイトで置く(参照: Mico は 35〜100px を Weight 400 で組む) */
.amehale-stat .amehale-stat-number {
	color: var(--wp--preset--color--contrast);
	font-weight: 400;
	line-height: 1.2;
	letter-spacing: normal;
}

.amehale-stat .amehale-stat-label {
	color: var(--wp--preset--color--muted);
	letter-spacing: 0.08em;
}

/* 数値の区切り */
.amehale-stat .wp-block-columns > .wp-block-column + .wp-block-column {
	border-left: 1px solid var(--amehale-hairline);
}

@media (max-width: 781px) {
	.amehale-stat .wp-block-columns > .wp-block-column + .wp-block-column {
		border-left: 0;
		border-top: 1px solid var(--amehale-hairline);
		padding-top: 1.5rem;
	}
}

/* CTA帯・画像プレースホルダ: 白背景の上なので淡グレーで面を作る */
.amehale-panel {
	background: var(--wp--preset--color--surface);
	border-block: 1px solid var(--amehale-hairline);
}

.amehale-placeholder {
	background: var(--wp--preset--color--surface);
	border: 1px solid var(--amehale-hairline);
	border-radius: 12px;
}

/* 導入事例カードの成果数値 */
.amehale-kpi-row {
	gap: 1.5rem;
	margin-top: 1rem;
	padding-top: 1rem;
	border-top: 1px solid var(--wp--preset--color--line);
}

.amehale-kpi-row .amehale-kpi p {
	margin: 0;
}

.amehale-kpi-label {
	color: var(--wp--preset--color--muted);
}

.amehale-kpi-value {
	color: var(--wp--preset--color--contrast);
	font-weight: 400;
	font-size: 1.75rem;
	line-height: 1.2;
	letter-spacing: normal;
}

/* 数値が未入力のときは、空の枠が残らないように行ごと隠す */
.amehale-kpi:has(.amehale-kpi-value:empty) {
	display: none;
}

.amehale-kpi-row:not(:has(.amehale-kpi-value:not(:empty))) {
	display: none;
}

/* 事例詳細: 成果数値が未入力なら、空の帯を出さない
   (トップの実績数値バーは固定テキストのため対象外) */
.amehale-stat:not(:has(.amehale-stat-number:not(:empty))) {
	display: none;
}

/* お知らせ一覧(日付+タイトルの行) */
.amehale-news-item {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 0.5rem 1.5rem;
	padding: 1.1rem 0;
	border-bottom: 1px solid var(--wp--preset--color--line);
}

.amehale-news-item > * {
	margin: 0;
}

/* トップページの新着情報。
   News / Blog を同じ情報密度で並べ、一覧へ進む導線までを見出し内に収める。 */
.amehale-home-updates {
	border-block: 1px solid var(--amehale-hairline);
}

.amehale-home-updates__columns {
	align-items: flex-start !important;
	gap: clamp(2.5rem, 5vw, 4.5rem);
}

.amehale-home-feed__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	margin-bottom: 1.25rem;
}

.amehale-home-feed__title {
	margin: 0;
	font-size: clamp(2rem, 3.4vw, 2.5rem);
	font-weight: 500;
	line-height: 1.15;
	letter-spacing: -0.035em;
}

.amehale-home-feed__more {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.4rem;
	min-height: 2.5rem;
	padding: 0.4rem 0.75rem;
	border-radius: 999px;
	color: var(--wp--preset--color--contrast);
	font-size: 0.8125rem;
	font-weight: 700;
	line-height: 1.4;
	text-decoration: none;
	white-space: nowrap;
	transition: background-color .2s var(--amehale-ease), color .2s var(--amehale-ease);
}

.amehale-home-feed__more:hover {
	background: var(--wp--preset--color--surface);
	color: var(--wp--preset--color--primary);
}

.amehale-home-feed__more-arrow {
	font-size: 1.1em;
	line-height: 1;
}

.amehale-home-feed__query,
.amehale-home-feed__query .wp-block-post-template {
	margin: 0;
}

.amehale-home-feed__query .wp-block-post-template {
	display: block;
	padding: 0;
	list-style: none;
	border-top: 1px solid var(--wp--preset--color--line);
}

.amehale-home-feed__query .wp-block-post {
	display: flex;
	flex-direction: column;
	align-items: stretch;
	position: relative;
	margin-block-start: 0 !important;
	padding: 1.25rem 1rem;
	border-bottom: 1px solid var(--wp--preset--color--line);
	transition: background-color .2s var(--amehale-ease);
}

.amehale-home-feed__query .wp-block-post:hover {
	background: var(--wp--preset--color--surface);
}

.amehale-home-feed__meta {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 0.55rem 0.75rem;
	width: 100%;
	min-height: 1.75rem;
	margin: 0;
}

.amehale-home-feed__date,
.amehale-home-feed__tag,
.amehale-home-feed__category {
	margin: 0;
	font-size: 0.875rem;
	line-height: 1.4;
}

.amehale-home-feed__date {
	color: var(--wp--preset--color--muted);
	font-size: 0.875rem;
	font-variant-numeric: tabular-nums;
	font-feature-settings: "tnum" 1;
}

.amehale-home-feed__tag,
.amehale-home-feed__category {
	display: inline-flex;
	align-items: center;
	width: fit-content;
	min-height: 1.75rem;
	padding: 0.2rem 0.65rem;
	border: 1px solid var(--amehale-hairline);
	border-radius: 999px;
	background: var(--wp--preset--color--base);
	color: var(--wp--preset--color--muted);
}

.amehale-home-feed__category a {
	position: relative;
	z-index: 2;
	color: inherit;
	text-decoration: none;
}

.amehale-home-feed__category > a:not(:first-of-type),
.amehale-home-feed__category .wp-block-post-terms__separator {
	display: none;
}

.amehale-home-feed__item-title {
	display: -webkit-box;
	min-height: 3.4em;
	overflow: hidden;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	margin: 0.55rem 0 0;
	font-size: 1rem;
	font-weight: 700;
	line-height: 1.7;
}

.amehale-home-feed__item-title a {
	color: var(--wp--preset--color--contrast);
	text-decoration: none;
	transition: color .2s var(--amehale-ease);
}

.amehale-home-feed__item-title a::after {
	content: "";
	position: absolute;
	inset: 0;
}

.amehale-home-feed__query .wp-block-post:hover .amehale-home-feed__item-title a,
.amehale-home-feed__query .wp-block-post:focus-within .amehale-home-feed__item-title a {
	color: var(--wp--preset--color--primary);
}

.amehale-home-feed__query .wp-block-post:focus-within {
	outline: 2px solid var(--wp--preset--color--primary);
	outline-offset: -2px;
}

.amehale-home-feed__empty {
	margin: 0;
	padding: 1.25rem 1rem;
	border-block: 1px solid var(--wp--preset--color--line);
}

@media (max-width: 781px) {
	.amehale-home-updates__columns {
		gap: 3.25rem;
	}

	.amehale-home-feed__head {
		align-items: flex-end;
	}

	.amehale-home-feed__query .wp-block-post {
		padding-inline: 0.75rem;
	}
}

@media (max-width: 430px) {
	.amehale-home-feed__head {
		align-items: flex-start;
		flex-direction: column;
		gap: 0.35rem;
	}

	.amehale-home-feed__more {
		margin-left: -0.75rem;
	}
}

/* ブログのカテゴリーナビ */
.amehale-category-nav ul {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem 1.25rem;
	list-style: none;
	padding: 0;
	margin-top: 1.5rem;
}

/* 顧客の声 */
.amehale-voice {
	border-left: 3px solid var(--wp--preset--color--primary);
	padding: 0.5rem 0 0.5rem 1.5rem;
}

.amehale-voice:has(.has-large-font-size:empty) {
	display: none;
}

/* サイクル図・支援フローのステップ番号(モノトーン) */
.amehale-step-number {
	color: var(--wp--preset--color--muted);
	font-weight: 700;
	font-size: 0.9375rem;
	letter-spacing: 0.08em;
	line-height: 1;
	padding-bottom: 0.9rem;
	border-bottom: 1px solid var(--amehale-hairline);
	margin-bottom: 1rem;
}

/* 導入事例カルーセル(CSSスクロールスナップ、JS不使用)
   flex だと align-self:stretch を指定しても項目の高さが揃わなかったため、
   グリッドに変更している(グリッド項目は既定で伸長する)。 */
.amehale-carousel .wp-block-post-template {
	display: grid !important;
	grid-auto-flow: column;
	grid-auto-columns: min(340px, 85vw);
	align-items: stretch;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	gap: 1.5rem;
	padding-bottom: 0.75rem;
	-webkit-overflow-scrolling: touch;
}

.amehale-carousel .wp-block-post-template > li {
	scroll-snap-align: start;
	list-style: none;
	display: flex;
	/* align-items:stretch では伸びなかったため、行の高さを明示的に受け取る */
	height: 100%;
	/* WordPress の縦積み用マージン(:where(.is-layout-flow) > *)が
	   2枚目以降に 1.5rem 付き、上端がずれるため打ち消す */
	margin-block-start: 0;
}

/* 左右交互の特徴ブロック(偶数ブロックで反転) */
@media (min-width: 782px) {
	.amehale-feature:nth-of-type(even) .wp-block-columns {
		flex-direction: row-reverse;
	}
}

/* ============================ フォーム ============================ */
.amehale-form {
	max-width: 640px;
}

/* お問い合わせ / 資料請求ページ。
   案内とフォームを並べ、入力前に「相談できる内容」「返信の目安」「電話窓口」が分かる構成にする。
   2ページで同じ見た目を使うため、クラス名は contact ではなく formpage で共通化する。 */
.amehale-formpage {
	background: var(--wp--preset--color--base);
}

.amehale-formpage-section {
	padding-block: clamp(3rem, 7vw, 7rem);
}

.amehale-formpage-layout {
	max-width: var(--wp--style--global--wide-size, 1120px);
	margin-inline: auto;
	gap: clamp(2.5rem, 6vw, 5rem);
	align-items: flex-start !important;
}

.amehale-formpage-eyebrow {
	margin: 0 0 .75rem;
	color: var(--wp--preset--color--primary-dark);
	font-size: .75rem;
	font-weight: 700;
	line-height: 1.4;
	letter-spacing: .14em;
}

.amehale-formpage-intro > h1 {
	margin: 0 0 1.5rem;
}

.amehale-formpage-lead {
	margin: 0 0 2rem;
	font-size: clamp(1rem, 1.3vw, 1.125rem);
	line-height: 2;
}

.amehale-formpage-image {
	margin: 0 0 2rem !important;
	border-radius: 16px;
	overflow: hidden;
	background: var(--wp--preset--color--dark);
}

.amehale-formpage-image img {
	display: block;
	width: 100%;
	aspect-ratio: 16 / 10;
	object-fit: cover;
}

.amehale-formpage-response {
	margin: 0 0 2.5rem;
	padding: 1.25rem 1.5rem;
	border-left: 3px solid var(--wp--preset--color--primary);
	background: var(--wp--preset--color--surface);
}

.amehale-formpage-response__label {
	margin: 0 0 .2rem;
	color: var(--wp--preset--color--muted);
	font-size: .75rem;
	font-weight: 700;
	line-height: 1.5;
	letter-spacing: .06em;
}

.amehale-formpage-response__value {
	margin: 0;
	line-height: 1.8;
}

.amehale-formpage-response__value strong {
	margin-inline: .25em;
	color: var(--wp--preset--color--contrast);
	font-size: 1.125rem;
}

.amehale-formpage-topics {
	padding-top: 2rem;
	border-top: 1px solid var(--amehale-hairline);
}

.amehale-formpage-topics h2 {
	margin: 0 0 1.25rem;
	font-size: 1.125rem;
	font-weight: 700;
	line-height: 1.6;
}

.amehale-formpage-topics ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

.amehale-formpage-topics li {
	position: relative;
	padding-left: 1.4rem;
	color: var(--wp--preset--color--muted);
	font-size: .9375rem;
	line-height: 1.9;
}

.amehale-formpage-topics li + li {
	margin-top: .45rem;
}

.amehale-formpage-topics li::before {
	content: "";
	position: absolute;
	top: .78em;
	left: .1rem;
	width: .45rem;
	height: .45rem;
	border-radius: 50%;
	background: var(--wp--preset--color--primary);
}

/* 電話・メールの直通窓口。
   フォームを書くほどでもない用件の受け皿になり、左カラム下部に空く余白も埋める。 */
.amehale-formpage-direct {
	margin-top: 2.25rem;
	padding-top: 2.25rem;
	border-top: 1px solid var(--amehale-hairline);
}

.amehale-formpage-direct h2 {
	margin: 0 0 1rem;
	font-size: 1.125rem;
	font-weight: 700;
	line-height: 1.6;
}

.amehale-formpage-direct__tel {
	margin: 0 0 .4rem;
	font-size: clamp(1.5rem, 2.2vw, 1.75rem);
	font-weight: 700;
	line-height: 1.3;
	font-variant-numeric: tabular-nums;
}

.amehale-formpage-direct__tel a {
	color: var(--wp--preset--color--contrast);
	text-decoration: none;
}

.amehale-formpage-direct__tel a:hover,
.amehale-formpage-direct__tel a:focus-visible {
	color: var(--wp--preset--color--primary-dark);
}

.amehale-formpage-direct__note {
	margin: 0;
	color: var(--wp--preset--color--muted);
	font-size: .875rem;
	line-height: 1.9;
}

.amehale-formpage-card {
	padding: clamp(1.5rem, 3.5vw, 2.5rem);
	border: 1px solid var(--wp--preset--color--line);
	border-radius: 16px;
	background: var(--wp--preset--color--base);
	box-shadow: var(--amehale-shadow-2);
}

.amehale-formpage-card__note {
	margin: 0 0 2rem;
	color: var(--wp--preset--color--muted);
	font-size: .875rem;
	line-height: 1.8;
}

/* 項目は1行に1つ。ラベルは入力欄の上に置く
   (横並びにすると和文ラベルが折り返し、必須バッジまで崩れるため)。 */
.amehale-formpage-card .amehale-form {
	max-width: none;
}

.amehale-formpage-card .amehale-field {
	margin-bottom: 1.5rem;
}

.amehale-formpage-card .amehale-form input[type="text"],
.amehale-formpage-card .amehale-form input[type="email"],
.amehale-formpage-card .amehale-form input[type="tel"],
.amehale-formpage-card .amehale-form textarea,
.amehale-formpage-card .amehale-form select {
	background-color: var(--wp--preset--color--surface);
}

.amehale-formpage-card .amehale-form textarea {
	min-height: 10rem;
	resize: vertical;
}

.amehale-formpage-card .amehale-form-submit button {
	width: 100%;
	min-height: 3.5rem;
	border-radius: 999px;
}

/* 日程調整カレンダー(Jicoo)。カード内に収め、フォームと同じ枠線・角丸に揃える。
   高さは指定しないこと。Jicooのスクリプトが iframe の height 属性を実コンテンツ量に
   合わせて書き換えるので、コンテナは中身なりに伸ばす。ここで height を固定すると
   カレンダー下部(タイムゾーン表示など)が切れる。min-height は読み込み中の場所取り。 */
.amehale-scheduler .jicoo-widget {
	width: 100%;
	min-height: 720px;
	border: 1px solid var(--wp--preset--color--line);
	border-radius: 12px;
	overflow: hidden;
	box-sizing: border-box;
}

.amehale-scheduler .jicoo-widget iframe {
	display: block;
	width: 100%;
	border: 0;
}

.amehale-scheduler__fallback {
	margin: 0;
	color: var(--wp--preset--color--muted);
	font-size: .875rem;
	line-height: 1.8;
}

@media (max-width: 900px) {
	.amehale-formpage-layout {
		gap: 2.5rem;
	}
}

@media (max-width: 781px) {
	.amehale-formpage-section {
		padding-block: 3rem 4rem;
	}

	.amehale-formpage-layout {
		gap: 3rem;
	}

	.amehale-formpage-image img {
		aspect-ratio: 16 / 9;
	}

	.amehale-scheduler .jicoo-widget {
		min-height: 640px;
	}
}

@media (max-width: 520px) {
	.amehale-formpage-card {
		padding: 1.5rem 1.125rem;
		border-radius: 12px;
	}

	.amehale-formpage-response {
		padding: 1rem 1.125rem;
	}
}

/* 隠しフィールドの入れ物。値は送信されるが、レイアウト上は存在しないものとして扱う */
.amehale-form-meta {
	display: none;
}

/* ハニーポット: 画面にもスクリーンリーダーにも出さない */
.amehale-hp {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.amehale-field {
	margin-bottom: 1.75rem;
}

.amehale-label {
	display: flex;
	align-items: center;
	gap: 0.6rem;
	font-weight: 700;
	font-size: 0.875rem;
	margin-bottom: 0.5rem;
}

.amehale-req {
	flex: none;
	/* ラベルが窮屈なとき「必/須」と縦に潰れるのを防ぐ */
	white-space: nowrap;
	font-size: 0.6875rem;
	font-weight: 700;
	letter-spacing: 0.04em;
	padding: 0.2em 0.6em;
	border-radius: 3px;
	background: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--contrast);
}

.amehale-req.is-optional {
	background: transparent;
	border: 1px solid var(--amehale-hairline);
	color: var(--wp--preset--color--muted);
}

.amehale-form input[type="text"],
.amehale-form input[type="email"],
.amehale-form input[type="tel"],
.amehale-form textarea,
.amehale-form select {
	width: 100%;
	/* content-box のままだと padding と枠の分だけ右にはみ出し、
	   カードの左右の余白が揃わない */
	box-sizing: border-box;
	font: inherit;
	line-height: 1.7;
	color: var(--wp--preset--color--contrast);
	background: var(--wp--preset--color--base);
	border: 1px solid var(--wp--preset--color--line);
	border-radius: 4px;
	padding: 0.85rem 1rem;
	transition: border-color .2s var(--amehale-ease), box-shadow .2s var(--amehale-ease);
	-webkit-appearance: none;
	appearance: none;
}

.amehale-form select {
	background-image: linear-gradient(45deg, transparent 50%, var(--wp--preset--color--muted) 50%),
		linear-gradient(135deg, var(--wp--preset--color--muted) 50%, transparent 50%);
	background-position: calc(100% - 20px) center, calc(100% - 14px) center;
	background-size: 6px 6px, 6px 6px;
	background-repeat: no-repeat;
	padding-right: 2.75rem;
}

.amehale-form input:focus,
.amehale-form textarea:focus,
.amehale-form select:focus {
	outline: none;
	border-color: var(--wp--preset--color--primary);
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--wp--preset--color--primary) 22%, transparent);
}

/* エラー表示はユーザーが操作した後だけ。
   :invalid だけだと未入力の必須項目が初期表示から赤くなるため :user-invalid を使う。 */
.amehale-form input:user-invalid,
.amehale-form textarea:user-invalid,
.amehale-form select:user-invalid {
	border-color: #C0392B;
}

.amehale-form input:user-invalid:focus,
.amehale-form textarea:user-invalid:focus,
.amehale-form select:user-invalid:focus {
	box-shadow: 0 0 0 3px rgba(192, 57, 43, .18);
}

/* サーバー側の検証でエラーになった項目も、欄と説明を一対で示す。 */
.amehale-field.has-error input,
.amehale-field.has-error textarea,
.amehale-field.has-error select,
.amehale-field.has-error .amehale-consent {
	border-color: #C0392B;
}

.amehale-field.has-error input:focus,
.amehale-field.has-error textarea:focus,
.amehale-field.has-error select:focus {
	box-shadow: 0 0 0 3px rgba(192, 57, 43, .18);
}

.amehale-field-error {
	margin: 0.55rem 0 0;
	color: #90291C;
	font-size: 0.8125rem;
	font-weight: 700;
	line-height: 1.7;
}

.amehale-consent {
	display: flex;
	align-items: flex-start;
	gap: 0.7rem;
	font-size: 0.875rem;
	line-height: 1.9;
	padding: 1.1rem 1.25rem;
	background: var(--wp--preset--color--surface);
	border: 1px solid var(--amehale-hairline);
	border-radius: 4px;
	cursor: pointer;
}

.amehale-consent input[type="checkbox"] {
	width: 1.15em;
	height: 1.15em;
	margin-top: 0.45em;
	accent-color: var(--wp--preset--color--primary);
	flex: none;
}

.amehale-consent .amehale-req {
	margin-left: 0.5rem;
}

.amehale-form-error {
	background: #FDF3F2;
	border: 1px solid #E8B7B1;
	color: #90291C;
	border-radius: 4px;
	padding: 1rem 1.25rem;
	margin-bottom: 1.75rem;
	font-size: 0.875rem;
}

.amehale-form-error p,
.amehale-form-error ul {
	margin: 0;
}

.amehale-form-error ul {
	padding-left: 1.25rem;
	margin-top: 0.65rem;
}

.amehale-form-error li + li {
	margin-top: 0.25rem;
}

.amehale-form-error a {
	color: inherit;
	text-decoration: underline;
	text-underline-offset: 0.2em;
}

.amehale-form-error:focus {
	outline: 2px solid #90291C;
	outline-offset: 3px;
}

.amehale-form-submit {
	margin-top: 2.5rem;
}

.amehale-form-submit button {
	font: inherit;
	font-weight: 700;
	font-size: 0.9375rem;
	letter-spacing: 0.01em;
	background: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--contrast);
	border: 0;
	border-radius: 4px;
	padding: 1rem 3rem;
	cursor: pointer;
	transition: background-color .2s var(--amehale-ease);
}

.amehale-form-submit button:hover {
	background: var(--wp--preset--color--primary-dark);
}

.amehale-form-submit button:focus-visible {
	outline: 2px solid var(--wp--preset--color--contrast);
	outline-offset: 3px;
}

/* 法務ページの定義表(特商法など) */
.amehale-legal-table table {
	border-collapse: collapse;
	width: 100%;
}

.amehale-legal-table th,
.amehale-legal-table td {
	border: 1px solid var(--amehale-hairline);
	padding: 1rem 1.25rem;
	text-align: left;
	vertical-align: top;
	line-height: 1.9;
}

.amehale-legal-table th {
	width: 32%;
	white-space: nowrap;
	background: var(--wp--preset--color--surface);
	font-weight: 700;
}

@media (max-width: 600px) {
	.amehale-legal-table th,
	.amehale-legal-table td {
		display: block;
		width: auto;
		white-space: normal;
	}
	.amehale-legal-table th {
		border-bottom: 0;
	}
}

/* FAQ(core/details。開閉に JS を使わない) */
.amehale-faq .wp-block-details {
	border-bottom: 1px solid var(--wp--preset--color--line);
	padding: 1.25rem 0;
}

.amehale-faq .wp-block-details summary {
	cursor: pointer;
	font-weight: 700;
	list-style: none;
	position: relative;
	padding-right: 2rem;
}

.amehale-faq .wp-block-details summary::-webkit-details-marker {
	display: none;
}

.amehale-faq .wp-block-details summary::after {
	content: "";
	position: absolute;
	right: 0.5rem;
	top: 50%;
	width: 0.6rem;
	height: 0.6rem;
	border-right: 2px solid var(--wp--preset--color--primary);
	border-bottom: 2px solid var(--wp--preset--color--primary);
	transform: translateY(-70%) rotate(45deg);
	transition: transform 0.2s ease;
}

.amehale-faq .wp-block-details[open] summary::after {
	transform: translateY(-30%) rotate(-135deg);
}

.amehale-faq .wp-block-details summary:focus-visible {
	outline: 2px solid var(--wp--preset--color--primary);
	outline-offset: 4px;
}

/* スクロールフェード(控えめ)
   コンテンツを隠すのは JS が動いている場合のみ。html.js は head 内のインラインスクリプトが付与する。
   JS 無効・読み込み失敗・スクリプトエラーのいずれでも、本文は最初から表示される。 */
.js .amehale-fade {
	opacity: 0;
	transform: translateY(14px);
	transition: opacity .7s var(--amehale-ease), transform .7s var(--amehale-ease);
}

.js .amehale-fade.is-visible {
	opacity: 1;
	transform: none;
}

/* 見出し → 本文 → カードの順に、わずかな段差で現れる */
.js .amehale-fade > * {
	opacity: 0;
	transform: translateY(10px);
	transition: opacity .6s var(--amehale-ease), transform .6s var(--amehale-ease);
}

.js .amehale-fade.is-visible > * {
	opacity: 1;
	transform: none;
}

.js .amehale-fade.is-visible > *:nth-child(1) { transition-delay: .04s; }
.js .amehale-fade.is-visible > *:nth-child(2) { transition-delay: .10s; }
.js .amehale-fade.is-visible > *:nth-child(3) { transition-delay: .16s; }
.js .amehale-fade.is-visible > *:nth-child(n+4) { transition-delay: .22s; }

@media (prefers-reduced-motion: reduce) {
	.js .amehale-fade,
	.js .amehale-fade > * {
		opacity: 1;
		transform: none;
		transition: none;
	}
}

/* サービス詳細ページの関連事例 */
.amehale-related-cases {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
	gap: 1.5rem;
	margin-top: 1.75rem;
}

.amehale-related-cases .amehale-card {
	padding: 1.75rem;
}

.amehale-related-cases a {
	text-decoration: none;
}

.amehale-related-cases h3 {
	font-size: 1.125rem;
	margin: 0;
}

/* 比較表(LINE公式アカウントとの違いなど) */
.amehale-compare table {
	border-collapse: collapse;
	width: 100%;
	font-size: 0.875rem;
}

.amehale-compare th,
.amehale-compare td {
	border: 1px solid var(--amehale-hairline);
	padding: 0.9rem 1rem;
	text-align: left;
	vertical-align: top;
	line-height: 1.8;
}

.amehale-compare thead th {
	background: var(--wp--preset--color--surface);
	font-weight: 700;
}

/* 自社の列だけ強調する */
.amehale-compare thead th:last-child {
	background: color-mix(in srgb, var(--wp--preset--color--primary) 12%, transparent);
}

.amehale-compare tbody td:last-child {
	font-weight: 700;
}

.amehale-compare tbody th {
	width: 26%;
	white-space: nowrap;
	background: var(--wp--preset--color--surface);
}

@media (max-width: 600px) {
	.amehale-compare table { font-size: 0.8125rem; }
	.amehale-compare th, .amehale-compare td { padding: 0.7rem; }
	.amehale-compare tbody th { white-space: normal; }
}

/* できること一覧 */
.amehale-feature-list {
	padding-left: 1.2em;
	font-size: 0.875rem;
	color: var(--wp--preset--color--muted);
	line-height: 2.1;
}

/* 課題に応じて選ぶ4領域を、同じサイズのカードで一覧化する。 */
.amehale-strategy-map {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	grid-auto-rows: 1fr;
	gap: 1.5rem;
	align-items: stretch;
	margin-top: var(--wp--preset--spacing--40);
}

.amehale-strategy-map__hub {
	display: none;
}

.amehale-strategy-map__node {
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
	justify-content: center;
	height: 100%;
	min-height: 14rem;
	padding: 1.5rem;
	background: var(--wp--preset--color--base);
	border: 1px solid var(--amehale-hairline);
	border-radius: 10px;
	box-shadow: var(--amehale-shadow-1);
	text-align: center;
}

.amehale-strategy-map__node--touch,
.amehale-strategy-map__node--visibility,
.amehale-strategy-map__node--automation,
.amehale-strategy-map__node--loyalty {
	grid-area: auto;
}

.amehale-strategy-map__icon {
	display: inline-grid;
	width: 3.5rem;
	height: 3.5rem;
	place-items: center;
	margin: 0 auto .75rem;
	background: transparent;
	border: 0;
	color: var(--wp--preset--color--primary-dark);
}

.amehale-strategy-map__icon svg {
	display: block;
	width: 2.5rem;
	height: 2.5rem;
}

.amehale-strategy-map__node h3 {
	margin: 0;
	font-size: 1.05rem;
	line-height: 1.55;
}

.amehale-strategy-map__tags {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: .4rem;
	margin-top: 1rem;
}

.amehale-strategy-map__tags span {
	display: inline-block;
	padding: .28rem .55rem;
	background: var(--wp--preset--color--surface);
	border-radius: 999px;
	color: var(--wp--preset--color--muted);
	font-size: .6875rem;
	font-weight: 500;
	line-height: 1.45;
}

@media (max-width: 900px) {
	.amehale-strategy-map {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 1.25rem;
	}
}

@media (max-width: 600px) {
	.amehale-strategy-map {
		grid-template-columns: 1fr;
	}

	.amehale-strategy-map__node {
		min-height: 0;
	}
}

/* 業種アイコン(インラインSVG。外部ライブラリ不使用) */
.amehale-industry-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	margin-bottom: 1rem;
	border-radius: 10px;
	background: var(--wp--preset--color--surface);
	border: 1px solid var(--amehale-hairline);
	color: var(--wp--preset--color--contrast);
	transition: color .3s var(--amehale-ease), background-color .3s var(--amehale-ease),
		border-color .3s var(--amehale-ease);
}

.amehale-industry-icon svg {
	width: 22px;
	height: 22px;
	display: block;
}

/* カードに触れたときだけ差し色を出す */
.amehale-card.is-linked:hover .amehale-industry-icon {
	color: var(--wp--preset--color--primary-dark);
	background: color-mix(in srgb, var(--wp--preset--color--primary) 10%, transparent);
	border-color: color-mix(in srgb, var(--wp--preset--color--primary) 30%, transparent);
}

/* ============================================================
   レイアウト統一ルール
   セクション幅は全て 1120px に揃え、左端を全ページで一致させる。
   読み物セクションは中の文章ブロックだけを 760px に制限する。
   ============================================================ */

/* 読み物セクション: 行長だけ抑え、左端はセクション幅に揃える。
   WordPress の constrained レイアウトが子要素を中央寄せするため、
   左マージンを 0 に戻して見出しと左端を一致させる。 */
.amehale-prose > :is(p, ul, ol, figure, details, .wp-block-buttons, .wp-block-details) {
	max-width: 760px;
	/* constrained レイアウトは子要素を 1120px 幅で中央寄せする(margin:auto !important)。
	   見出しと左端を揃えるため、その中央寄せ分だけを左マージンとして再現する。 */
	margin-left: max(0px, calc((100% - 1120px) / 2)) !important;
	margin-right: auto !important;
}

/* CTA帯: 中央寄せ。幅は他セクションと同じだが、中身だけ中央に絞る */
.amehale-cta {
	background: var(--wp--preset--color--surface);
	border-block: 1px solid var(--amehale-hairline);
}

.amehale-cta > * {
	max-width: 760px;
	margin-inline: auto;
}

/* 補足情報の面(費用など) */
.amehale-note {
	background: var(--wp--preset--color--surface);
	border-block: 1px solid var(--amehale-hairline);
}

.amehale-note > :is(p, ul, ol, .wp-block-buttons) {
	max-width: 760px;
	margin-left: max(0px, calc((100% - 1120px) / 2)) !important;
	margin-right: auto !important;
}

/* 見出し直後の余白を 28px に統一。
   ブロックごとに 16/24/28px と分かれていたため、インライン指定を上書きする。 */
.wp-block-group > :is(h1, h2) + * {
	margin-top: 1.75rem !important;
}

/* カードの均等配置。空カラムで幅を揃える必要をなくす */
.amehale-cards-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(270px, 1fr));
	grid-auto-rows: 1fr;
	gap: 1.5rem;
}

.amehale-cards-grid > .amehale-card {
	box-sizing: border-box;
	height: 100%;
	margin-block-start: 0;
	padding: 1.75rem;
}


/* ============================================================
   顧客ジャーニー図
   SVGだと狭い画面で文字が縮んで読めなくなるため、
   HTML+CSS で組み、幅に応じて縦積みに折り返す。
   ============================================================ */
.amehale-journey {
	margin-top: 2.5rem;
}

/* 対象範囲を示す括線 */
.amehale-journey .j-scope {
	position: relative;
	height: 10px;
	border-top: 1.5px solid var(--wp--preset--color--line);
	border-left: 1.5px solid var(--wp--preset--color--line);
	border-right: 1.5px solid var(--wp--preset--color--line);
	border-radius: 4px 4px 0 0;
}

.amehale-journey .j-scope span {
	position: absolute;
	top: -2.2em;
	left: 0;
	font-size: 0.875rem;
	font-weight: 700;
	letter-spacing: 0.04em;
	color: var(--wp--preset--color--muted);
	white-space: nowrap;
}

/* 一般的な施策の対象: 4区間のうち左半分 */
.amehale-journey .j-scope--past {
	width: calc(50% - 0.75rem);
	margin-bottom: 1.25rem;
}

/* アメハレの範囲: 全区間。下向きの括線にする */
.amehale-journey .j-scope--ours {
	margin-top: 1.25rem;
	border-top: 0;
	border-bottom: 1.5px solid var(--wp--preset--color--primary);
	border-left-color: var(--wp--preset--color--primary);
	border-right-color: var(--wp--preset--color--primary);
	border-radius: 0 0 4px 4px;
}

.amehale-journey .j-scope--ours span {
	top: auto;
	bottom: -2.2em;
	color: var(--wp--preset--color--primary-dark);
}

/* 区間 */
.amehale-journey .j-steps {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 1.5rem;
	list-style: none;
	margin: 0;
	padding: 0;
}

.amehale-journey .j-steps li {
	position: relative;
	background: var(--wp--preset--color--surface);
	border: 1px solid var(--amehale-hairline);
	border-radius: 10px;
	padding: 1.1rem 1.25rem;
}

.amehale-journey .j-steps li.is-goal {
	background: color-mix(in srgb, var(--wp--preset--color--primary) 12%, #fff);
	border-color: color-mix(in srgb, var(--wp--preset--color--primary) 45%, transparent);
}

.amehale-journey .j-steps b {
	display: block;
	font-size: 0.9375rem;
	line-height: 1.6;
}

.amehale-journey .j-steps small {
	display: block;
	margin-top: 0.2rem;
	font-size: 0.875rem;
	line-height: 1.7;
	color: var(--wp--preset--color--muted);
}

/* 区間をつなぐ矢印 */
.amehale-journey .j-steps li + li::before {
	content: "";
	position: absolute;
	left: -1.15rem;
	top: 50%;
	width: 8px;
	height: 8px;
	border-top: 1.5px solid var(--wp--preset--color--line);
	border-right: 1.5px solid var(--wp--preset--color--line);
	transform: translateY(-50%) rotate(45deg);
}

/* ------------------------------------------------------------
   狭い画面: 区間を縦積みにし、括線も縦向きに組み替える。
   横向きのまま残すと「どこからどこまでの範囲か」が示せないので、
   左右のガターに縦書きラベル付きの括線を立てて対比を保つ。
   ------------------------------------------------------------ */
@media (max-width: 860px) {
	.amehale-journey {
		/* 左右のガター幅と括線の太さ。以下の位置計算はこの2つに従う */
		--j-gutter: 2rem;
		--j-rail: 8px;
		position: relative;
		padding-left: var(--j-gutter);
		padding-right: var(--j-gutter);
	}

	.amehale-journey .j-steps {
		grid-template-columns: 1fr;
		/* 括線の高さを区間数から計算するため、各行の高さを揃える */
		grid-auto-rows: 1fr;
		gap: 1.1rem;
	}

	/* 括線を縦向きの括弧にする。フローから外すので ol が全高になる */
	.amehale-journey .j-scope {
		box-sizing: border-box;
		position: absolute;
		top: 0;
		width: var(--j-rail);
		height: auto;
		margin: 0;
		border: 1.5px solid var(--wp--preset--color--line);
	}

	/* 一般的な施策の対象: 4区間のうち上2つ（＝全高の半分 − 溝の半分） */
	.amehale-journey .j-scope--past {
		left: calc(var(--j-gutter) - var(--j-rail) - 0.15rem);
		height: calc(50% - 0.55rem);
		border-right: 0;
		border-radius: 4px 0 0 4px;
	}

	/* アメハレの範囲: 全区間。右のガターに置いて左向きの括弧にする */
	.amehale-journey .j-scope--ours {
		right: calc(var(--j-gutter) - var(--j-rail) - 0.15rem);
		bottom: 0;
		border: 1.5px solid var(--wp--preset--color--primary);
		border-left: 0;
		border-radius: 0 4px 4px 0;
	}

	/* ラベルは縦書き。横書きのままだとガターに収まらない */
	.amehale-journey .j-scope span {
		writing-mode: vertical-rl;
		top: 0;
		bottom: auto;
		font-size: 0.8125rem;
		line-height: 1.2;
	}

	.amehale-journey .j-scope--past span {
		left: auto;
		right: calc(100% + 0.25rem);
	}

	.amehale-journey .j-scope--ours span {
		left: calc(100% + 0.25rem);
		right: auto;
	}

	.amehale-journey .j-steps li + li::before {
		left: 50%;
		top: -0.85rem;
		transform: translateX(-50%) rotate(135deg);
	}
}

/* スクロールで順に現れる。JS が動いている場合のみ */
.js .amehale-journey .j-steps li,
.js .amehale-journey .j-scope {
	opacity: 0;
	transform: translateY(8px);
	transition: opacity .5s var(--amehale-ease), transform .5s var(--amehale-ease);
}

.js .amehale-fade.is-visible .amehale-journey .j-steps li,
.js .amehale-fade.is-visible .amehale-journey .j-scope {
	opacity: 1;
	transform: none;
}

.js .amehale-fade.is-visible .amehale-journey .j-steps li:nth-child(1) { transition-delay: .05s; }
.js .amehale-fade.is-visible .amehale-journey .j-steps li:nth-child(2) { transition-delay: .14s; }
.js .amehale-fade.is-visible .amehale-journey .j-steps li:nth-child(3) { transition-delay: .23s; }
.js .amehale-fade.is-visible .amehale-journey .j-steps li:nth-child(4) { transition-delay: .32s; }
.js .amehale-fade.is-visible .amehale-journey .j-scope--ours { transition-delay: .42s; }

@media (prefers-reduced-motion: reduce) {
	.js .amehale-journey .j-steps li,
	.js .amehale-journey .j-scope {
		opacity: 1;
		transform: none;
		transition: none;
	}
}

/* ============================================================
   事業カード
   サービスへのリンクを持つカードは、カード全面をクリック領域にする。
   ============================================================ */
.amehale-biz-card {
	display: flex;
	flex-direction: column;
}

/* サービス名はカード内の主リンクとして明示する。 */
.amehale-biz-card h3 {
	font-weight: 700;
}

.amehale-biz-card h3 a {
	color: inherit;
	text-decoration-line: underline;
	text-decoration-color: color-mix(in srgb, currentColor 45%, transparent);
	text-decoration-thickness: 0.07em;
	text-underline-offset: 0.22em;
	text-decoration-skip-ink: auto;
	transition: color .2s var(--amehale-ease), text-decoration-color .2s var(--amehale-ease);
}

.amehale-biz-card h3 a:hover,
.amehale-biz-card h3 a:focus-visible {
	color: var(--wp--preset--color--primary-dark);
	text-decoration-color: currentColor;
}

.amehale-biz-card h3 a:focus-visible {
	outline: 2px solid var(--wp--preset--color--contrast);
	outline-offset: 4px;
}

/* 画像はカードの内側余白を打ち消して上端いっぱいに置く */
.amehale-card-media {
	margin: -1.75rem -1.75rem 1.5rem !important;
	border-radius: 12px 12px 0 0;
	overflow: hidden;
	background: var(--wp--preset--color--surface);
}

.amehale-card-media img {
	display: block;
	width: 100%;
	height: auto;
}

/* ボタンはカード下端に揃え、高さの違うカードでも位置を合わせる */
.amehale-biz-card .wp-block-buttons {
	margin-top: auto !important;
	padding-top: 1.75rem;
}

.amehale-biz-card .wp-block-button__link {
	padding-left: 1.5rem;
	padding-right: 1.5rem;
}

@media (max-width: 600px) {
	.amehale-biz-card .wp-block-button,
	.amehale-biz-card .wp-block-button__link {
		width: 100%;
		text-align: center;
	}
}

/* 大カード(メイン事業)は画像を横並びにして高さを抑える */
.amehale-biz-card--wide .amehale-card-media {
	margin: 0 !important;
	border-radius: 10px;
}

@media (max-width: 781px) {
	.amehale-biz-card--wide .amehale-card-media {
		margin-bottom: 1.5rem !important;
	}
}

/* ============================================================
   ボタンのホバー / フォーカス
   theme.json の指定は :where() で優先度が低く、輪郭ボタンでは
   WordPress 標準の透過指定に負けて変化が出なかったため、
   ここで明示的に定義する。動かさず、色の反転で示す。
   ============================================================ */
.wp-block-button__link,
.wp-element-button,
.amehale-form-submit button {
	transition: background-color .2s var(--amehale-ease), color .2s var(--amehale-ease),
		border-color .2s var(--amehale-ease), box-shadow .2s var(--amehale-ease);
}

/* 動的に出力するサービスFVのボタンも、元のボタンブロックと同じ配色にする。 */
.amehale-service-hero-cta {
	display: flex;
	flex-wrap: wrap;
	align-items: stretch;
	gap: clamp(1rem, 2vw, 1.5rem);
}

.amehale-service-hero-cta .wp-block-button {
	display: flex;
	flex: 0 1 12.5rem;
	min-width: 0;
}

.amehale-service-hero-cta .wp-block-button > .wp-block-button__link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: .5rem;
	box-sizing: border-box;
	width: 100%;
	height: 100%;
	min-height: 3.5rem;
	padding: .75rem 1.5rem;
	text-align: center;
}

.amehale-service-hero-cta__external-icon {
	flex: 0 0 auto;
	width: 1rem;
	height: 1rem;
	fill: none;
	stroke: currentColor;
	stroke-linecap: round;
	stroke-linejoin: round;
	stroke-width: 1.6;
}

.amehale-service-hero-cta .wp-block-button:not(.is-style-outline) > .wp-block-button__link {
	background-color: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--contrast);
}

.amehale-service-hero-cta .wp-block-button.is-style-outline > .wp-block-button__link {
	background-color: transparent;
	border: 2px solid var(--wp--preset--color--contrast);
	color: var(--wp--preset--color--contrast);
}

@media (max-width: 520px) {
	.amehale-service-hero-cta .wp-block-button {
		flex-basis: 100%;
	}
}

/* 塗りボタン: 濃いオレンジ + 外側のリングで面積を広げて気づかせる */
.wp-block-button:not(.is-style-outline) > .wp-block-button__link:hover,
.amehale-form-submit button:hover {
	/* primary-dark(#D96E00)まで濃くするとインク文字とのコントラストが 4.34 になり
	   AA基準(4.5)を下回るため、ボタン専用の濃色を使う。 */
	background-color: #E87C00;
	color: var(--wp--preset--color--contrast);
	box-shadow: 0 0 0 4px color-mix(in srgb, var(--wp--preset--color--primary) 32%, transparent);
}

/* 輪郭ボタン: 塗りに反転させる(変化が最も分かりやすい) */
.wp-block-button.is-style-outline > .wp-block-button__link:hover {
	background-color: var(--wp--preset--color--contrast);
	border-color: var(--wp--preset--color--contrast);
	color: var(--wp--preset--color--base);
}

/* キーボード操作時は輪郭を残したままリングを出す */
.wp-block-button__link:focus-visible,
.wp-element-button:focus-visible,
.amehale-form-submit button:focus-visible {
	outline: 2px solid var(--wp--preset--color--contrast);
	outline-offset: 3px;
}

/* 押した瞬間の手応え */
.wp-block-button__link:active,
.amehale-form-submit button:active {
	box-shadow: none;
	filter: brightness(.95);
}

/* 「アメハレの特徴」の画像。カード外に置くため角丸のみ */
.amehale-feature-media {
	border-radius: 10px;
	overflow: hidden;
	background: var(--wp--preset--color--surface);
	margin: 0 !important;
}

.amehale-feature-media img {
	display: block;
	width: 100%;
	height: auto;
}

/* ============================================================
   FVのアニメーション
   AIが顧客の相談に答え、商品を提案する様子を再現する。
   外部ライブラリ不使用。JS が動かない場合は全要素が静止表示される。
   ============================================================ */
.amehale-hero-anim {
	position: relative;
	background: var(--wp--preset--color--base);
	border: 1px solid var(--amehale-hairline);
	border-radius: 16px;
	box-shadow: var(--amehale-shadow-2);
	padding: 3.75rem 1.5rem 1.5rem;
	min-height: 370px;
}

/* 上部のバー(アプリらしさを最小限で示す) */
.amehale-hero-anim::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 38px;
	background: var(--wp--preset--color--surface);
	border-bottom: 1px solid var(--amehale-hairline);
	border-radius: 16px 16px 0 0;
}

/* ラベルは上部バーの内側に収める。パネルの padding-top と無関係に
   バーの高さ(38px)を基準に配置する。 */
.ha-title {
	position: absolute;
	top: 0;
	left: 1.5rem;
	display: flex;
	align-items: center;
	gap: 0.5rem;
	height: 38px;
	margin: 0;
	font-size: 0.6875rem;
	font-weight: 700;
	letter-spacing: 0.04em;
	color: var(--wp--preset--color--muted);
	z-index: 1;
}

.ha-title::before {
	content: "";
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--wp--preset--color--primary);
}

/* 会話 */
.ha-chat {
	display: flex;
	flex-direction: column;
	gap: 0.65rem;
}

/* 発言の行。AI は左＋アバター、顧客は右 */
.ha-row {
	display: flex;
	align-items: flex-end;
	gap: 0.5rem;
}

.ha-row--user {
	justify-content: flex-end;
}

.ha-row[data-carousel-step] {
	align-items: flex-start;
}

/* 返信が出たら入力中の行を消す(JSが付与) */
.ha-row.is-done {
	display: none;
}

/* JS が動かない環境では入力中の表示自体を出さない */
html:not(.js) [data-typing] {
	display: none;
}

/* AIのアバター。大小3つのシンボルでAIらしさを一目で伝える */
.ha-avatar {
	position: relative;
	flex: none;
	width: 26px;
	height: 26px;
	border-radius: 50%;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: 0;
	background: var(--wp--preset--color--primary);
	border: 0;
	box-shadow: none;
	overflow: visible;
}

.ha-avatar::before {
	content: "";
	position: absolute;
	display: block;
	width: 18px;
	height: 18px;
	left: 4px;
	top: 4px;
	background: center / contain no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23fff' d='M7 1C7.6 4.5 9.5 6.4 13 7C9.5 7.6 7.6 9.5 7 13C6.4 9.5 4.5 7.6 1 7C4.5 6.4 6.4 4.5 7 1Z'/%3E%3Cpath fill='%23fff' d='M17 5C17.4 7.2 18.8 8.6 21 9C18.8 9.4 17.4 10.8 17 13C16.6 10.8 15.2 9.4 13 9C15.2 8.6 16.6 7.2 17 5Z'/%3E%3Cpath fill='%23fff' d='M13 14C13.3 15.6 14.4 16.7 16 17C14.4 17.3 13.3 18.4 13 20C12.7 18.4 11.6 17.3 10 17C11.6 16.7 12.7 15.6 13 14Z'/%3E%3C/svg%3E");
}

.ha-msg {
	max-width: 84%;
	padding: 0.7rem 0.95rem;
	border-radius: 12px;
	font-size: 0.8125rem;
	line-height: 1.75;
}

.ha-msg--ai {
	background: var(--wp--preset--color--base);
	border: 1px solid var(--amehale-hairline);
	border-bottom-left-radius: 4px;
}

.ha-msg--user {
	background: var(--wp--preset--color--surface);
	border-bottom-right-radius: 4px;
	color: var(--wp--preset--color--contrast);
}

/* 商品提案カルーセル */
.ha-products {
	flex: 1;
	min-width: 0;
	max-width: calc(100% - 34px);
}

.ha-product-track {
	--ha-product-card-width: 170px;
	display: flex;
	gap: 0.6rem;
	overflow-x: auto;
	scroll-behavior: smooth;
	scroll-snap-type: x mandatory;
	overscroll-behavior-inline: contain;
	scrollbar-width: none;
}

.ha-product-track::after {
	content: "";
	flex: 0 0 calc(100% - var(--ha-product-card-width));
}

.ha-product-track::-webkit-scrollbar {
	display: none;
}

.ha-product-card {
	flex: 0 0 var(--ha-product-card-width);
	box-sizing: border-box;
	padding: 0.55rem;
	background: var(--wp--preset--color--base);
	border: 1px solid var(--amehale-hairline);
	border-radius: 10px;
	scroll-snap-align: start;
}

.ha-product-image {
	display: block;
	width: 100%;
	height: 78px;
	margin-bottom: 0.5rem;
	background: #f7f4ef;
	border-radius: 7px;
	object-fit: cover;
	object-position: center;
}

.ha-product-tag,
.ha-product-name,
.ha-product-price {
	margin: 0;
}

.ha-product-tag {
	color: var(--wp--preset--color--primary-dark);
	font-size: 0.5625rem;
	font-weight: 700;
}

.ha-product-name {
	margin-top: 0.2rem;
	font-size: 0.6875rem;
	font-weight: 700;
	line-height: 1.45;
}

.ha-product-price {
	margin-top: 0.25rem;
	color: var(--wp--preset--color--muted);
	font-size: 0.625rem;
	font-variant-numeric: tabular-nums;
}

.ha-product-controls {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: 0.45rem;
	margin-top: 0.55rem;
}

.ha-product-control {
	display: grid;
	place-items: center;
	width: 27px;
	height: 27px;
	padding: 0;
	background: var(--wp--preset--color--base);
	border: 1px solid var(--amehale-hairline);
	border-radius: 50%;
	color: var(--wp--preset--color--contrast);
	font: inherit;
	line-height: 1;
	cursor: pointer;
}

.ha-product-control:disabled {
	opacity: 0.35;
	cursor: default;
}

.ha-product-control:focus-visible,
.ha-product-track:focus-visible {
	outline: 2px solid var(--wp--preset--color--primary);
	outline-offset: 2px;
}

.ha-product-position {
	min-width: 2.4rem;
	color: var(--wp--preset--color--muted);
	font-size: 0.625rem;
	font-variant-numeric: tabular-nums;
	text-align: center;
}

/* 入力中の点 */
.ha-typing {
	display: inline-flex;
	gap: 4px;
	align-items: center;
	height: 1.75em;
}

.ha-typing i {
	width: 5px;
	height: 5px;
	border-radius: 50%;
	background: var(--wp--preset--color--muted);
	opacity: .4;
}

.js .ha-typing i {
	animation: ha-blink 1.1s infinite;
}

.js .ha-typing i:nth-child(2) { animation-delay: .18s; }
.js .ha-typing i:nth-child(3) { animation-delay: .36s; }

@keyframes ha-blink {
	0%, 60%, 100% { opacity: .3; }
	30% { opacity: 1; }
}

/* 成果のチップ */
.ha-result {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	padding: 0.4rem 0.8rem;
	border-radius: 999px;
	background: color-mix(in srgb, var(--wp--preset--color--primary) 14%, #fff);
	border: 1px solid color-mix(in srgb, var(--wp--preset--color--primary) 40%, transparent);
	font-size: 0.875rem;
	font-weight: 700;
	color: var(--wp--preset--color--primary-dark);
}

.ha-result::before {
	content: "";
	width: 12px;
	height: 7px;
	border-left: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	transform: rotate(-45deg) translate(1px, -2px);
}

/* 成果の指標カード */
.ha-metric {
	position: absolute;
	left: 1.5rem;
	right: 1.5rem;
	bottom: 1.5rem;
	display: flex;
	align-items: center;
	gap: 1rem;
	padding: 0.85rem 1rem;
	background: var(--wp--preset--color--base);
	border: 1px solid var(--amehale-hairline);
	border-radius: 12px;
	box-shadow: var(--amehale-shadow-1);
}

.ha-metric-label {
	font-size: 0.6875rem;
	font-weight: 700;
	letter-spacing: 0.06em;
	color: var(--wp--preset--color--muted);
}

.ha-metric-value {
	font-size: 1.375rem;
	font-weight: 700;
	line-height: 1;
	color: var(--wp--preset--color--contrast);
	font-variant-numeric: tabular-nums;
}

.ha-spark {
	margin-left: auto;
	width: 96px;
	height: 34px;
	overflow: visible;
}

.ha-spark path {
	fill: none;
	stroke: var(--wp--preset--color--primary);
	stroke-width: 2;
	stroke-linecap: round;
	stroke-linejoin: round;
}

/* --- 演出。JS が動いている間だけ隠す --- */
.js .amehale-hero-anim [data-step] {
	opacity: 0;
	transform: translateY(8px);
	transition: opacity .45s var(--amehale-ease), transform .45s var(--amehale-ease);
}

.js .amehale-hero-anim [data-step].is-shown {
	opacity: 1;
	transform: none;
}

.js .amehale-hero-anim .ha-spark path {
	stroke-dasharray: 140;
	stroke-dashoffset: 140;
	transition: stroke-dashoffset 1s var(--amehale-ease);
}

.js .amehale-hero-anim .ha-metric.is-shown .ha-spark path {
	stroke-dashoffset: 0;
}

@media (prefers-reduced-motion: reduce) {
	.js .amehale-hero-anim [data-step] {
		opacity: 1;
		transform: none;
		transition: none;
	}
	.js .amehale-hero-anim .ha-spark path {
		stroke-dashoffset: 0;
		transition: none;
	}
	.js .ha-typing i { animation: none; }
}

@media (max-width: 781px) {
	.amehale-hero-anim {
		min-height: 0;
		padding: 3.5rem 1.25rem 1.25rem;
	}
	.ha-title { left: 1.25rem; }
	.ha-msg { max-width: 90%; font-size: 0.78125rem; }
	.ha-product-track { --ha-product-card-width: 140px; }

	/* 狭い画面では指標カードを絶対配置から通常配置に戻し、会話との重なりを防ぐ */
	.ha-metric {
		position: static;
		margin-top: 1.5rem;
	}
}

/* ============================================================
   一覧カードの位置揃え
   タイトルの行数差で成果数値や抜粋の位置がずれ、カード高さも
   不揃いになっていたため、高さを揃えたうえで下端の要素を底に寄せる。
   ============================================================ */

/* クエリループの各項目を伸ばし、カードを枠いっぱいにする */
.wp-block-post-template > li {
	display: flex;
}

.wp-block-post-template > li > .amehale-card {
	width: 100%;
}

/* カード内を縦並びにして、下端の要素を底に寄せられるようにする */
.wp-block-post-template > li > .amehale-card,
.amehale-related-cases > .amehale-card {
	display: flex;
	flex-direction: column;
	height: 100%;
}

/* 成果数値と抜粋はカード下端に揃える(タイトルが1行でも2行でも位置が動かない)。
   見出し直後の余白統一ルールが !important で当たるため、同等の優先度で上書きする。 */
.amehale-card .amehale-kpi-row,
.wp-block-post-template .amehale-card .wp-block-post-excerpt {
	margin-top: auto !important;
}

.amehale-card .amehale-kpi-row {
	padding-top: 1.25rem;
}

/* ============================================================
   企業情報ページ
   会社概要・代表ご挨拶で共通のタイポグラフィと余白を使用する。
   ============================================================ */
.amehale-company-page {
	--amehale-company-gutter: clamp(1.25rem, 5vw, 2.5rem);
}

.amehale-company-hero {
	padding: var(--wp--preset--spacing--60) var(--amehale-company-gutter) var(--wp--preset--spacing--50);
	background: var(--wp--preset--color--base);
	color: var(--wp--preset--color--contrast);
}

.amehale-company-hero::after {
	display: none;
}

.amehale-company-hero > .wp-block-group {
	width: min(1120px, 100%);
	margin-inline: auto;
}

.amehale-company-eyebrow {
	margin: 0 0 1.5rem;
	color: var(--wp--preset--color--muted);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 400;
	letter-spacing: normal;
	line-height: 1.4;
}

.amehale-company-hero .amehale-company-eyebrow {
	color: var(--wp--preset--color--muted);
	text-decoration: underline;
	text-underline-offset: .3em;
}

.amehale-company-hero h1 {
	max-width: 1000px;
	margin: 0;
	color: var(--wp--preset--color--contrast);
	font-size: var(--wp--preset--font-size--huge);
	font-weight: 400;
	line-height: 1.2;
	letter-spacing: normal;
}

.amehale-company-lead {
	max-width: 1000px;
	margin: 2rem 0 0;
	color: var(--wp--preset--color--muted);
	font-size: var(--wp--preset--font-size--x-large);
	line-height: 2;
}

.amehale-company-section {
	padding: clamp(5rem, 10vw, 8rem) var(--amehale-company-gutter);
}

.amehale-company-section > .wp-block-group,
.amehale-company-section > .wp-block-columns {
	width: min(1120px, 100%);
	margin-inline: auto;
}

.amehale-company-section-title {
	margin-top: 0;
	font-size: var(--wp--preset--font-size--xx-large);
	font-weight: 400;
	letter-spacing: normal;
}

.amehale-profile-list {
	margin: 0;
	border-top: 1px solid var(--amehale-hairline);
}

.amehale-profile-row {
	display: grid;
	grid-template-columns: minmax(8rem, 32%) 1fr;
	gap: 2rem;
	margin: 0;
	padding: 1.6rem 0;
	border-bottom: 1px solid var(--amehale-hairline);
}

.amehale-profile-row > p {
	margin: 0;
}

.amehale-profile-label {
	color: var(--wp--preset--color--muted);
	font-size: .8125rem;
	font-weight: 700;
	letter-spacing: .04em;
}

.amehale-profile-value {
	font-size: .9375rem;
	line-height: 2;
}

.amehale-profile-value a {
	text-underline-offset: .25em;
}

.amehale-company-next {
	background: var(--wp--preset--color--surface);
	border-block: 1px solid var(--amehale-hairline);
}

.amehale-company-next .wp-block-button__link {
	display: inline-flex;
	align-items: center;
	gap: .75rem;
}

.amehale-company-next .wp-block-button__link::after {
	content: "→";
	font-size: 1.2em;
}

.amehale-message-layout {
	align-items: flex-start !important;
	gap: clamp(3rem, 8vw, 7rem);
}

.amehale-message-statement {
	position: sticky;
	top: 8rem;
	margin: 0;
	font-size: var(--wp--preset--font-size--xx-large);
	font-weight: 400;
	line-height: 1.45;
	letter-spacing: normal;
}

.amehale-message-statement strong {
	color: var(--wp--preset--color--primary-dark);
	font-weight: inherit;
}

.amehale-message-body {
	font-size: 1rem;
	line-height: 2.2;
}

.amehale-message-body > p {
	margin-top: 0;
	margin-bottom: 2rem;
}

.amehale-message-signature {
	margin-top: 3.5rem;
	padding-top: 2rem;
	border-top: 1px solid var(--amehale-hairline);
}

.amehale-message-signature p {
	margin: 0;
}

.amehale-message-signature-name {
	margin-top: .45rem !important;
	font-size: 1.35rem;
	font-weight: 700;
	letter-spacing: .06em;
}

/* 代表プロフィール。
   ご挨拶と同じ 40/60 の組みにして、名前と略歴が挨拶文の続きとして読めるようにする。 */
.amehale-profile-section {
	background: var(--wp--preset--color--surface);
	border-top: 1px solid var(--amehale-hairline);
}

.amehale-profile-person {
	margin-top: 2.5rem;
	padding-top: 2rem;
	border-top: 1px solid var(--amehale-hairline);
}

.amehale-profile-person p {
	margin: 0;
}

.amehale-profile-person__role {
	color: var(--wp--preset--color--muted);
	font-size: .8125rem;
	font-weight: 700;
	letter-spacing: .04em;
}

.amehale-profile-person__name {
	margin-top: .5rem !important;
	font-size: 1.75rem;
	font-weight: 700;
	line-height: 1.4;
	letter-spacing: .06em;
}

.amehale-profile-person__romaji {
	margin-top: .4rem !important;
	color: var(--wp--preset--color--muted);
	font-size: .75rem;
	letter-spacing: .12em;
}

.amehale-history-title {
	margin: 3rem 0 1.25rem;
	font-size: 1.125rem;
	font-weight: 700;
	line-height: 1.6;
}

.amehale-history-list {
	border-top: 1px solid var(--amehale-hairline);
}

.amehale-history-row {
	display: grid;
	grid-template-columns: minmax(5.5rem, 7rem) 1fr;
	gap: 1.5rem;
	padding: 1.1rem 0;
	border-bottom: 1px solid var(--amehale-hairline);
}

.amehale-history-row > p {
	margin: 0;
}

.amehale-history-year {
	color: var(--wp--preset--color--muted);
	font-size: .8125rem;
	font-weight: 700;
	line-height: 2;
	letter-spacing: .04em;
	font-variant-numeric: tabular-nums;
}

.amehale-history-event {
	font-size: .9375rem;
	line-height: 2;
}

@media (max-width: 781px) {
	.amehale-company-hero {
		padding-top: var(--wp--preset--spacing--50);
		padding-bottom: var(--wp--preset--spacing--40);
	}

	.amehale-profile-row {
		grid-template-columns: 1fr;
		gap: .45rem;
		padding: 1.35rem 0;
	}

	.amehale-message-statement {
		position: static;
		margin-bottom: 1rem;
	}

	.amehale-history-row {
		grid-template-columns: 1fr;
		gap: .3rem;
		padding: 1rem 0;
	}

	.amehale-history-year {
		line-height: 1.6;
	}
}

/* ============================================================
   ブログ記事
   長い記事でも「現在地・次に読む内容・相談導線」が迷子にならない構成。
   ============================================================ */
.amehale-article {
	--amehale-article-gutter: clamp(1.25rem, 5vw, 2.5rem);
	background: var(--wp--preset--color--base);
}

.amehale-article > * {
	margin-block-start: 0;
	margin-block-end: 0;
}

.amehale-reading-progress {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: 120;
	height: 3px;
	pointer-events: none;
}

.amehale-reading-progress span {
	display: block;
	width: 100%;
	height: 100%;
	background: var(--wp--preset--color--primary);
	transform: scaleX(0);
	transform-origin: left center;
	will-change: transform;
}

.amehale-article-hero {
	padding: clamp(2.5rem, 6vw, 4.5rem) 0 clamp(2.5rem, 5vw, 4rem);
}

.amehale-article-dates {
	display: flex;
	flex-wrap: wrap;
	gap: .45rem 1.25rem !important;
	margin: 0 0 1.4rem;
	font-size: .875rem;
	font-variant-numeric: tabular-nums;
	line-height: 1.5;
}

.amehale-article-date {
	display: flex;
	gap: .45rem;
	align-items: baseline;
	margin: 0;
}

.amehale-article-date dt {
	color: var(--wp--preset--color--muted);
}

.amehale-article-date dd {
	margin: 0;
}

.amehale-article-date time {
	color: var(--wp--preset--color--contrast);
	font-weight: 500;
}

.amehale-article-category {
	margin: 0 0 1rem;
}

.amehale-article-category a {
	display: inline-flex;
	align-items: center;
	min-height: 1.75rem;
	padding: .25rem .7rem;
	color: var(--wp--preset--color--contrast);
	background: color-mix(in srgb, var(--wp--preset--color--primary) 13%, #fff);
	border: 1px solid color-mix(in srgb, var(--wp--preset--color--primary) 28%, transparent);
	border-radius: 999px;
	font-size: .875rem;
	font-weight: 700;
	line-height: 1.3;
	text-decoration: none;
}

.amehale-article-category a:hover,
.amehale-article-category a:focus-visible {
	background: color-mix(in srgb, var(--wp--preset--color--primary) 22%, #fff);
}

.amehale-article-title {
	width: 100%;
	max-width: none;
	margin: 0;
	font-size: clamp(1.875rem, 4vw, 3rem);
	font-weight: 400;
	line-height: 1.35;
	letter-spacing: -.015em;
	text-wrap: pretty;
}

.amehale-article-meta {
	gap: .7rem 0 !important;
	margin-top: 2rem;
	color: var(--wp--preset--color--muted);
	font-size: .875rem;
	line-height: 1.5;
}

.amehale-article-meta > * {
	margin: 0;
}

.amehale-article-meta > * + *::before {
	content: "";
	display: inline-block;
	width: 1px;
	height: .9em;
	margin: 0 .8rem;
	vertical-align: -.05em;
	background: var(--amehale-hairline);
}

.amehale-article-cover-wrap {
	padding: 0;
}

.amehale-article-cover-wrap:not(:has(img)) {
	display: none;
}

.amehale-article-cover {
	margin: 0;
	overflow: hidden;
	border-radius: 16px;
	background: var(--wp--preset--color--surface);
}

.amehale-article-cover img {
	display: block;
	width: 100%;
	object-fit: cover;
}

.amehale-article-layout {
	display: grid;
	grid-template-columns: minmax(0, 760px) minmax(230px, 280px);
	grid-template-areas: "main aside";
	gap: clamp(3rem, 7vw, 5rem);
	width: min(1120px, calc(100% - (2 * var(--amehale-article-gutter))));
	margin: 0 auto;
	padding: 0 !important;
	align-items: start;
}

.amehale-article-column {
	grid-area: main;
	min-width: 0;
}

.amehale-article-main {
	min-width: 0;
}

.amehale-article-aside {
	grid-area: aside;
	min-width: 0;
	margin-block-start: 0 !important;
}

.amehale-article-toc {
	width: fit-content;
	max-width: 100%;
	margin: 0 0 clamp(3.5rem, 8vw, 5.5rem);
	background: var(--wp--preset--color--base);
	border: 1px solid var(--amehale-hairline);
	border-radius: 24px;
	overflow: hidden;
}

.amehale-article-toc[open] {
	width: 100%;
}

.amehale-article-eyebrow {
	margin: 0;
	color: var(--wp--preset--color--primary-dark);
	font-size: .6875rem;
	font-weight: 700;
	letter-spacing: .12em;
	line-height: 1.4;
}

.amehale-article-toc-summary {
	display: flex;
	gap: .45rem;
	align-items: center;
	padding: 1.15rem 1.5rem;
	cursor: pointer;
	font-size: 1rem;
	font-weight: 700;
	line-height: 1.5;
	list-style: none;
}

.amehale-article-toc-summary::-webkit-details-marker {
	display: none;
}

.amehale-article-toc-summary:focus-visible {
	outline: 2px solid var(--wp--preset--color--primary-dark);
	outline-offset: -4px;
}

.amehale-article-toc-toggle {
	color: var(--wp--preset--color--primary-dark);
	font-size: .875rem;
	font-weight: 700;
	text-decoration: underline;
	text-underline-offset: .15em;
}

.amehale-article-toc-toggle::before {
	content: "[表示]";
}

.amehale-article-toc[open] .amehale-article-toc-toggle::before {
	content: "[非表示]";
}

.amehale-article-toc nav {
	padding: 0 1.5rem 1.4rem;
}

.amehale-article-toc-list {
	margin: 0;
	padding: 0;
	list-style: none;
}

.amehale-article-toc-list li {
	margin: 0;
	padding: .35rem 0;
}

.amehale-article-toc-list li + li {
	margin-top: .2rem;
}

.amehale-article-toc-list li.is-depth-3 {
	padding-left: 1.25rem;
}

.amehale-article-toc-list a {
	display: block;
	color: var(--wp--preset--color--contrast);
	font-size: .875rem;
	font-weight: 400;
	line-height: 1.75;
	text-decoration: none;
	transition: color .2s var(--amehale-ease);
}

.amehale-article-toc-list li.is-depth-3 a {
	color: var(--wp--preset--color--muted);
	font-size: .8125rem;
}

.amehale-article-toc-list a:hover,
.amehale-article-toc-list a:focus-visible,
.amehale-article-toc-list a[aria-current="location"] {
	color: var(--wp--preset--color--primary-dark);
}

.amehale-article-recommendations {
	position: sticky;
	top: 7rem;
	padding: 1.5rem;
	background: var(--wp--preset--color--surface);
	border-radius: 8px;
}

.amehale-article-recommendations-title {
	margin: 0 0 1.1rem;
	color: var(--wp--preset--color--primary-dark);
	font-size: 1rem;
	font-weight: 700;
	line-height: 1.7;
}

.amehale-article-recommendations > .wp-block-shortcode {
	margin-top: 0 !important;
}

.amehale-article-recommendations .amehale-related-articles {
	grid-template-columns: 1fr;
	gap: 0;
}

.amehale-article-recommendations .amehale-related-article {
	display: block;
	padding: .95rem 0;
	background: transparent;
	border: 0;
	border-top: 1px solid var(--amehale-hairline);
	border-radius: 0;
	overflow: visible;
}

.amehale-article-recommendations .amehale-related-article:last-child {
	border-bottom: 1px solid var(--amehale-hairline);
}

.amehale-article-recommendations .amehale-related-article:hover,
.amehale-article-recommendations .amehale-related-article:focus-within {
	border-color: var(--amehale-hairline);
}

.amehale-article-recommendations .amehale-related-article-image {
	display: none;
}

.amehale-article-recommendations .amehale-related-article-copy {
	display: flex;
	flex-direction: column;
	padding: 0;
}

.amehale-article-recommendations .amehale-related-article-category {
	order: 2;
	margin-top: .4rem;
	color: var(--wp--preset--color--muted);
	font-size: .625rem;
	font-weight: 400;
}

.amehale-article-recommendations .amehale-related-article h3 {
	order: 1;
	margin: 0;
	font-size: .8125rem;
	font-weight: 700;
	line-height: 1.65;
}

.amehale-article-recommendations .amehale-related-article-date {
	display: none;
}

.amehale-article-recommendations-more {
	margin: 1rem 0 0;
	text-align: right;
}

.amehale-article-recommendations-more a {
	font-size: .875rem;
	font-weight: 700;
	text-underline-offset: .25em;
}

.amehale-article-resource {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	column-gap: 2rem;
	align-items: center;
	margin-top: clamp(3.5rem, 8vw, 5.5rem);
	padding: clamp(1.75rem, 4vw, 2.5rem);
	background: var(--wp--preset--color--surface);
	border: 1px solid var(--amehale-hairline);
	border-left: 4px solid var(--wp--preset--color--primary);
	border-radius: 12px;
}

.amehale-article-resource .amehale-article-eyebrow,
.amehale-article-resource h2,
.amehale-article-resource p {
	grid-column: 1;
}

.amehale-article-resource h2 {
	margin: .55rem 0 0;
	font-weight: 400;
	line-height: 1.55;
}

.amehale-article-resource p:not(.amehale-article-eyebrow) {
	margin: .75rem 0 0;
	font-size: .8125rem;
	line-height: 1.8;
}

.amehale-article-resource .wp-block-buttons {
	grid-column: 2;
	grid-row: 1 / span 3;
	margin: 0;
}

.amehale-article-content {
	color: var(--wp--preset--color--body);
	font-size: 1rem;
	line-height: 2.15;
}

.amehale-article-content > :first-child {
	margin-top: 0;
}

.amehale-article-content h2,
.amehale-article-content h3 {
	scroll-margin-top: 8rem;
}

.amehale-article-content h2 {
	position: relative;
	margin-top: clamp(4.5rem, 10vw, 7rem);
	margin-bottom: 2rem;
	padding: 0 0 1rem 1.2rem;
	border-bottom: 1px solid var(--amehale-hairline);
	font-size: clamp(1.65rem, 4vw, 2.15rem);
	font-weight: 400;
	line-height: 1.55;
}

.amehale-article-content h2::before {
	content: "";
	position: absolute;
	left: 0;
	top: .26em;
	bottom: 1.3rem;
	width: 4px;
	min-height: 1.1em;
	background: var(--wp--preset--color--primary);
	border-radius: 999px;
}

.amehale-article-content h3 {
	margin-top: clamp(3rem, 7vw, 4.5rem);
	margin-bottom: 1.25rem;
	padding: 0 0 .75rem;
	border-bottom: 2px solid var(--wp--preset--color--primary);
	font-size: clamp(1.2rem, 3vw, 1.45rem);
	font-weight: 700;
	line-height: 1.65;
}

.amehale-article-content p,
.amehale-article-content ul,
.amehale-article-content ol {
	margin-top: 0;
	margin-bottom: 1.75rem;
}

.amehale-article-content ul,
.amehale-article-content ol {
	padding-left: 1.5rem;
}

.amehale-article-content li + li {
	margin-top: .6rem;
}

.amehale-article-content a {
	color: var(--wp--preset--color--primary-dark);
	font-weight: 500;
	text-decoration-thickness: .08em;
	text-underline-offset: .2em;
}

.amehale-article-content blockquote {
	margin: 2.5rem 0;
	padding: 1.5rem 1.75rem;
	background: var(--wp--preset--color--surface);
	border: 0;
	border-left: 3px solid var(--wp--preset--color--primary);
}

.amehale-article-content blockquote p:last-child {
	margin-bottom: 0;
}

.amehale-article-content figure,
.amehale-article-content .wp-block-image {
	margin-top: 2.5rem;
	margin-bottom: 2.5rem;
}

.amehale-article-content img {
	border-radius: 10px;
}

.amehale-article-content figcaption {
	margin-top: .65rem;
	color: var(--wp--preset--color--muted);
	font-size: .6875rem;
	line-height: 1.7;
}

.amehale-article-content table {
	width: 100%;
	border-collapse: collapse;
	font-size: .875rem;
	line-height: 1.8;
}

.amehale-article-content th,
.amehale-article-content td {
	padding: .9rem 1rem;
	border: 1px solid var(--amehale-hairline);
	text-align: left;
	vertical-align: top;
}

.amehale-article-content th {
	background: var(--wp--preset--color--surface);
	font-weight: 700;
}

.amehale-article-cta {
	margin-top: clamp(5rem, 12vw, 9rem);
}

.amehale-article-author-section {
	padding: clamp(4rem, 9vw, 6.5rem) var(--amehale-article-gutter);
}

.amehale-article-author-section > h2 {
	margin: 0 0 1.5rem;
	font-weight: 700;
}

.amehale-article-author {
	display: grid;
	grid-template-columns: 72px minmax(0, 1fr);
	gap: 1.5rem;
	align-items: center;
	padding: 1.75rem;
	border-block: 1px solid var(--amehale-hairline);
}

.amehale-article-author-avatar {
	width: 72px;
	height: 72px;
}

.amehale-article-author img {
	display: block;
	width: 72px;
	height: 72px;
	object-fit: cover;
	border-radius: 50%;
}

.amehale-article-author p {
	margin: 0;
}

.amehale-article-author-name {
	font-weight: 700;
}

.amehale-article-author-bio {
	margin-top: .45rem !important;
	color: var(--wp--preset--color--muted);
	font-size: .8125rem;
	line-height: 1.8;
}

.amehale-related-articles-section {
	padding: clamp(4rem, 9vw, 7rem) var(--amehale-article-gutter);
	background: var(--wp--preset--color--surface);
	border-top: 1px solid var(--amehale-hairline);
}

.amehale-related-articles-heading {
	align-items: flex-end;
	margin-bottom: 2.5rem;
}

.amehale-related-articles-heading h2,
.amehale-related-articles-heading p {
	margin: 0;
}

.amehale-related-articles-heading h2 {
	font-weight: 400;
}

.amehale-related-articles-heading a {
	font-size: .8125rem;
	font-weight: 700;
	text-underline-offset: .25em;
}

.amehale-related-articles {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 1.25rem;
}

.amehale-related-article {
	min-width: 0;
	background: var(--wp--preset--color--base);
	border: 1px solid var(--amehale-hairline);
	border-radius: 12px;
	overflow: hidden;
	transition: border-color .2s var(--amehale-ease);
}

.amehale-related-article:hover,
.amehale-related-article:focus-within {
	border-color: var(--wp--preset--color--primary);
}

.amehale-related-article a {
	color: inherit;
	text-decoration: none;
}

.amehale-related-article-image a {
	display: block;
}

.amehale-related-article img {
	display: block;
	width: 100%;
	aspect-ratio: 16 / 9;
	object-fit: cover;
	background: #efeff1;
}

.amehale-related-article-image {
	overflow: hidden;
}

.amehale-related-article-image p {
	margin: 0;
}

.amehale-related-article-copy {
	padding: 1.35rem;
}

.amehale-related-article-category {
	margin: 0;
	color: var(--wp--preset--color--primary-dark);
	font-size: .6875rem;
	font-weight: 700;
}

.amehale-related-article h3 {
	margin: .55rem 0 1.5rem;
	font-size: 1rem;
	line-height: 1.65;
}

.amehale-related-article-date {
	margin: 0;
}

.amehale-related-article time {
	color: var(--wp--preset--color--muted);
	font-size: .6875rem;
	font-variant-numeric: tabular-nums;
}

.amehale-related-empty {
	margin: 0;
	color: var(--wp--preset--color--muted);
}

@media (max-width: 900px) {
	.amehale-article-layout {
		grid-template-columns: minmax(0, 760px);
		grid-template-areas: "main" "aside";
		justify-content: center;
		gap: 2.5rem;
	}

	.amehale-article-recommendations {
		position: static;
	}

	.amehale-article-resource {
		grid-template-columns: 1fr;
	}

	.amehale-article-resource .wp-block-buttons {
		grid-column: 1;
		grid-row: auto;
		margin-top: 1.5rem;
	}
}

@media (max-width: 781px) {
	.amehale-article-hero {
		padding-top: 2.5rem;
		padding-bottom: 2.5rem;
	}

	.amehale-article-title {
		font-size: clamp(1.75rem, 7.5vw, 2.25rem);
		line-height: 1.45;
	}

	.amehale-article-meta {
		margin-top: 1.5rem;
	}

	.amehale-article-cover {
		border-radius: 10px;
	}

	.amehale-article-layout {
		width: calc(100% - (2 * var(--amehale-article-gutter)));
		margin-top: 0;
		padding-top: 2rem !important;
	}

	.amehale-article-resource {
		padding: 1.5rem;
	}

	.amehale-article-resource .wp-block-button,
	.amehale-article-resource .wp-block-button__link {
		width: 100%;
		text-align: center;
	}

	.amehale-article-content {
		font-size: 1rem;
		line-height: 2.05;
	}

	.amehale-article-content h2 {
		margin-top: 4rem;
		padding-left: .9rem;
		font-size: 1.55rem;
	}

	.amehale-article-content h3 {
		margin-top: 3rem;
		font-size: 1.15rem;
	}

	.amehale-article-content .wp-block-table {
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
	}

	.amehale-article-cta .wp-block-buttons,
	.amehale-article-cta .wp-block-button,
	.amehale-article-cta .wp-block-button__link {
		width: 100%;
		text-align: center;
	}

	.amehale-article-author {
		grid-template-columns: 56px minmax(0, 1fr);
		gap: 1rem;
		padding-inline: 0;
	}

	.amehale-article-author img {
		width: 56px;
		height: 56px;
	}

	.amehale-article-author-avatar {
		width: 56px;
		height: 56px;
	}

	.amehale-related-articles-heading {
		align-items: flex-start;
		flex-direction: column;
		gap: 1rem;
	}

	.amehale-related-articles {
		grid-template-columns: 1fr;
	}
}