/* ============================================================
   hinata.css — 全9ページのデザインシステム
   出典: claude.ai/design プロジェクト「ひなた動物病院」
   DESIGN.md §13 の逐条実装。body.theme-hinata の中だけに効く。
   style.css / variables.css は素の骨格として残り、本ファイルが上書きする。
   ============================================================ */

/* --- §13.1 トークン ------------------------------------------------ */
.theme-hinata {
	--h-paper: #f7f3ec;
	--h-paper-2: #efe8dc;
	--h-fill: #e9e1d4;
	--h-ink: #2a2622;
	--h-ink-2: #4c453e;
	--h-ink-3: #6f6760;
	--h-ink-4: #a0968b;
	--h-accent: #8a561c;
	--h-accent-2: #d9955f;
	--h-rule: rgba(42, 38, 34, 0.14);
	--h-rule-soft: rgba(42, 38, 34, 0.12);
	--h-rule-strong: rgba(42, 38, 34, 0.25);

	--h-serif: 'Shippori Mincho B1', 'Hiragino Mincho ProN', serif;
	--h-sans: 'Zen Kaku Gothic New', 'Hiragino Sans', sans-serif;

	--h-rail: 76px;
	--h-sec-y: clamp(100px, 14vw, 180px);
	--h-sec-x: clamp(24px, 6vw, 96px);
	--h-corner: clamp(60px, 8vw, 140px);
}

body.theme-hinata {
	background: var(--h-paper);
	color: var(--h-ink);
	font-family: var(--h-sans);
	font-feature-settings: 'palt';
	font-weight: 400;
	line-height: 1.9;
	letter-spacing: 0.04em;
	-webkit-font-smoothing: antialiased;
}

.theme-hinata a {
	color: inherit;
	text-decoration: none;
}
.theme-hinata a:hover {
	color: var(--h-accent);
}
.theme-hinata a:focus-visible,
.theme-hinata button:focus-visible {
	outline: 2px solid var(--h-accent);
	outline-offset: 2px;
}

/* --- §13.2 レール（PC のみ）---------------------------------------- */
.hn-rail {
	position: fixed;
	top: 0;
	bottom: 0;
	width: var(--h-rail);
	background: var(--h-paper);
	z-index: 20;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding: 20px 0;
	overflow: hidden;
}
.hn-rail--l {
	left: 0;
	border-right: 1px solid var(--h-rule-soft);
}
.hn-rail--r {
	right: 0;
	border-left: 1px solid var(--h-rule-soft);
	padding: 28px 0;
}
.hn-rail__brand {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 12px;
	flex-shrink: 0;
}
/* .hn-rail__mark の実体は §13.17（マスコットのロゴマーク）で定義 */
.hn-rail__name {
	writing-mode: vertical-rl;
	font-family: var(--h-serif);
	font-size: 13px;
	letter-spacing: 0.22em;
	font-weight: 500;
}
.hn-rail__nav {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 10px;
	font-size: 12px;
	letter-spacing: 0.2em;
	color: var(--h-ink-2);
}
.hn-rail__nav a {
	writing-mode: vertical-rl;
}
.hn-rail__dot {
	display: block;
	width: 4px;
	height: 4px;
	border-radius: 50%;
	background: var(--h-accent);
	flex-shrink: 0;
}
.hn-rail__label {
	writing-mode: vertical-rl;
	font-size: 11.5px;
	letter-spacing: 0.22em;
	color: var(--h-ink-3);
}
.hn-rail__stack {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 14px;
}
.hn-rail__cap {
	font-size: 9.5px;
	letter-spacing: 0.3em;
	color: var(--h-ink-3);
	writing-mode: vertical-rl;
}
.hn-rail__big {
	writing-mode: vertical-rl;
	font-family: var(--h-serif);
	font-size: 24px;
	letter-spacing: 0.2em;
	color: var(--h-ink);
}
.hn-rail__pulse {
	display: block;
	width: 10px;
	height: 10px;
	border-radius: 50%;
	background: var(--h-accent-2);
	animation: hn-breathe 3.6s ease-in-out infinite;
}

/* レール分だけ本文を内側へ */
.theme-hinata #main,
.theme-hinata .cta-band,
.theme-hinata .site-footer {
	margin-left: var(--h-rail);
	margin-right: var(--h-rail);
}
/* PC ではレールがナビを担うので既存ヘッダーは隠す */
.theme-hinata .site-header {
	display: none;
}

/* --- §13.3 セクション共通 ------------------------------------------- */
.hn-sec {
	padding: var(--h-sec-y) var(--h-sec-x);
}
.hn-sec--tight {
	padding: 0 var(--h-sec-x) clamp(80px, 10vw, 140px);
}
.hn-sechead {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 24px;
	flex-wrap: wrap;
	border-top: 1px solid var(--h-rule);
	padding-top: 28px;
	margin-bottom: clamp(48px, 6vw, 88px);
}
.hn-sechead h2 {
	margin: 0;
	font-family: var(--h-serif);
	font-weight: 500;
	font-size: clamp(24px, 2.6vw, 36px);
	letter-spacing: 0.08em;
	line-height: 1.4;
}
.hn-sechead p {
	margin: 0;
	font-size: 13px;
	color: var(--h-ink-3);
	letter-spacing: 0.1em;
}
.hn-eyebrow {
	margin: 0 0 18px;
	font-size: 11.5px;
	letter-spacing: 0.3em;
	color: var(--h-accent);
}
.hn-split {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
	gap: 48px 72px;
	align-items: start;
}
.hn-lead {
	margin: 0 0 20px;
	font-size: 15px;
	color: var(--h-ink-2);
	text-wrap: pretty;
}
.hn-note {
	margin: 0;
	font-size: 12.5px;
	color: var(--h-ink-3);
}
.hn-more {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	font-size: 13px;
	letter-spacing: 0.14em;
	border-bottom: 1px solid var(--h-rule-strong);
	padding-bottom: 3px;
}
.hn-more:hover {
	border-color: var(--h-accent);
}

/* <picture> は既定でインラインなので、img の height:100% が効くよう箱にする */
.hn-hero__media picture,
.hn-zig__media picture,
.hn-portrait picture {
	display: block;
	width: 100%;
	height: 100%;
}

/* --- §13.4 ヒーロー ------------------------------------------------- */
.hn-hero {
	padding: 20px 20px 0;
}
.hn-hero__media {
	position: relative;
	height: min(78vh, 820px);
	min-height: 480px;
	overflow: hidden;
	border-radius: 0 clamp(80px, 14vw, 220px) 0 0;
	background: var(--h-fill);
	margin: 0;
}
.hn-hero__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}
.hn-hero__chip {
	position: absolute;
	left: 0;
	bottom: 0;
	padding: 28px 32px;
	pointer-events: none;
}
.hn-hero__chip span {
	display: inline-block;
	background: var(--h-paper);
	padding: 6px 14px;
	font-size: 11.5px;
	letter-spacing: 0.24em;
	color: var(--h-ink-3);
}
.hn-hero__head {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	gap: 24px;
	align-items: end;
	padding: 26px 8px 0;
}
.hn-hero__head h1 {
	margin: 0;
	font-family: var(--h-serif);
	font-weight: 500;
	font-size: clamp(28px, 3.6vw, 54px);
	line-height: 1.5;
	letter-spacing: 0.06em;
	text-wrap: pretty;
	animation: hn-riseIn 1.2s ease both;
}
.hn-hero__head h1 small {
	display: block;
	margin-top: 16px;
	font-family: var(--h-sans);
	font-size: clamp(13px, 1.1vw, 16px);
	font-weight: 400;
	letter-spacing: 0.08em;
	line-height: 1.9;
	color: var(--h-ink-2);
}
.hn-scroll {
	font-size: 11.5px;
	letter-spacing: 0.22em;
	color: var(--h-ink-3);
	padding-bottom: 12px;
	animation: hn-drift 2.4s ease-in-out infinite alternate;
}
.hn-credit {
	margin: 14px 8px 0;
	font-size: 11.5px;
	color: var(--h-ink-3);
	letter-spacing: 0.08em;
}

/* --- §13.5 数値の帯 ------------------------------------------------- */
.hn-facts {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
	gap: 18px 32px;
	list-style: none;
	margin: 0;
	padding: 0;
}
.hn-facts > li {
	border-top: 1px solid var(--h-ink);
	padding-top: 12px;
}
.hn-facts .v {
	display: block;
	font-family: var(--h-serif);
	font-size: clamp(17px, 1.8vw, 21px);
	letter-spacing: 0.1em;
	line-height: 1.5;
}
.hn-facts .k {
	display: block;
	font-size: 12.5px;
	color: var(--h-ink-3);
	letter-spacing: 0.08em;
}

/* --- §13.6 ボタン --------------------------------------------------- */
.hn-btn {
	display: inline-flex;
	align-items: center;
	gap: 14px;
	background: var(--h-ink);
	color: var(--h-paper);
	padding: 15px 28px;
	min-height: 44px;
	border-radius: 999px 999px 999px 0;
	font-size: 13.5px;
	letter-spacing: 0.14em;
	transition: background 0.3s ease;
}
.hn-btn:hover {
	background: var(--h-accent);
	color: var(--h-paper);
}
.hn-btn--line {
	background: transparent;
	color: var(--h-ink);
	box-shadow: inset 0 0 0 1px var(--h-ink);
}
.hn-btn--line:hover {
	background: var(--h-ink);
	color: var(--h-paper);
}
.hn-btn--pending {
	background: transparent;
	color: var(--h-ink-3);
	box-shadow: inset 0 0 0 1px var(--h-rule-strong);
	cursor: default;
}
/* .theme-hinata a（0,1,1）が .hn-btn（0,1,0）の文字色を上書きし、電話番号の確定後に
   ヒーローの電話ボタンが黒地に黒文字になった（2026-10-03）。a 要素のボタンは同じ詳細度以上で色を固定する。 */
.theme-hinata a.hn-btn,
.theme-hinata a.hn-btn:hover {
	color: var(--h-paper);
}
.theme-hinata a.hn-btn--line {
	color: var(--h-ink);
}
.theme-hinata a.hn-btn--line:hover {
	color: var(--h-paper);
}
.hn-btn .icon-tel {
	flex-shrink: 0;
}
.hn-ctas {
	display: flex;
	flex-wrap: wrap;
	gap: 14px 18px;
	margin-top: 32px;
}

/* --- §13.7 ジグザグ（選ばれる理由）---------------------------------- */
.hn-zig {
	display: flex;
	flex-direction: column;
	gap: clamp(64px, 8vw, 120px);
	list-style: none;
	margin: 0;
	padding: 0;
}
.hn-zig > li {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
	gap: 36px 64px;
	align-items: center;
}
.hn-zig__head {
	display: flex;
	align-items: baseline;
	gap: 18px;
	margin-bottom: 18px;
	flex-wrap: wrap;
}
.hn-zig__no {
	font-family: var(--h-serif);
	font-size: 13px;
	letter-spacing: 0.2em;
	color: var(--h-accent);
}
.hn-zig h3 {
	margin: 0;
	font-family: var(--h-serif);
	font-weight: 500;
	font-size: clamp(24px, 2.8vw, 40px);
	letter-spacing: 0.12em;
	line-height: 1.35;
}
.hn-zig__en {
	font-size: 12px;
	letter-spacing: 0.16em;
	color: var(--h-ink-3);
}
.hn-zig__body p {
	margin: 0 0 22px;
	font-size: 15px;
	color: var(--h-ink-2);
	max-width: 460px;
	text-wrap: pretty;
}
.hn-tagline {
	display: flex;
	flex-wrap: wrap;
	gap: 8px 18px;
	font-size: 12.5px;
	color: var(--h-ink-3);
	letter-spacing: 0.08em;
	list-style: none;
	margin: 0;
	padding: 0;
}
.hn-tagline li {
	border-bottom: 1px solid var(--h-rule-strong);
	padding-bottom: 2px;
}
.hn-zig__media {
	position: relative;
	aspect-ratio: 4 / 3;
	overflow: hidden;
	background: var(--h-fill);
	margin: 0;
}
.hn-zig__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}
.hn-zig > li:nth-child(1) .hn-zig__media,
.hn-zig > li:nth-child(1) .hn-permit {
	border-radius: 0 0 0 var(--h-corner);
}
.hn-zig > li:nth-child(2) .hn-zig__media,
.hn-zig > li:nth-child(2) .hn-permit {
	border-radius: 0 var(--h-corner) 0 0;
}
.hn-zig > li:nth-child(3) .hn-zig__media,
.hn-zig > li:nth-child(3) .hn-permit {
	border-radius: var(--h-corner) 0 0 0;
}
.hn-zig > li:nth-child(4) .hn-zig__media,
.hn-zig > li:nth-child(4) .hn-permit {
	border-radius: 0 0 var(--h-corner) 0;
}
.hn-zig > li:nth-child(even) .hn-zig__body {
	order: 2;
}
.hn-zig > li:nth-child(even) .hn-zig__media,
.hn-zig > li:nth-child(even) .hn-permit {
	order: 1;
}
/* 写真のない回（許可）は証書ブロックで受ける */
.hn-permit {
	aspect-ratio: 4 / 3;
	background: var(--h-paper-2);
	padding: clamp(24px, 4vw, 44px);
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 16px;
}
.hn-permit dl {
	margin: 0;
	display: grid;
	gap: 14px;
}
.hn-permit dt {
	font-size: 11.5px;
	letter-spacing: 0.16em;
	color: var(--h-ink-3);
}
.hn-permit dd {
	margin: 0;
	font-family: var(--h-serif);
	font-size: clamp(14px, 1.4vw, 17px);
	letter-spacing: 0.08em;
}

/* --- §13.8 3〜5カラム（困りごと・流れ）------------------------------ */
.hn-cols {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
	gap: 32px 40px;
	list-style: none;
	margin: 0;
	padding: 0;
}
.hn-cols > li {
	border-top: 1px solid var(--h-ink);
	padding-top: 20px;
}
/* 流れは5ステップ。1行に収めて折り返しの端数を出さない */
.hn-cols--flow {
	grid-template-columns: repeat(auto-fit, minmax(165px, 1fr));
	gap: 32px;
}
.hn-cols__no {
	display: block;
	font-family: var(--h-serif);
	font-size: 13px;
	letter-spacing: 0.2em;
	color: var(--h-accent);
	margin-bottom: 14px;
}
.hn-cols h3 {
	margin: 0 0 12px;
	font-family: var(--h-serif);
	font-weight: 500;
	font-size: 21px;
	letter-spacing: 0.1em;
	line-height: 1.5;
}
.hn-cols p {
	margin: 0;
	font-size: 14.5px;
	color: var(--h-ink-2);
	text-wrap: pretty;
}

/* --- §13.9 料金表 --------------------------------------------------- */
.hn-pricetable {
	width: 100%;
	border-collapse: collapse;
	text-align: left;
}
.hn-pricetable caption {
	caption-side: bottom;
	margin-top: 16px;
	font-size: 12.5px;
	color: var(--h-ink-3);
	text-align: left;
}
.hn-pricetable th {
	font-weight: 400;
	font-size: 11.5px;
	letter-spacing: 0.24em;
	color: var(--h-ink-3);
	padding: 12px 16px 12px 0;
	border-top: 1px solid var(--h-ink);
	border-bottom: 1px solid var(--h-rule);
}
.hn-pricetable td {
	padding: 20px 16px 20px 0;
	border-bottom: 1px solid var(--h-rule);
	vertical-align: top;
	font-size: 14.5px;
	color: var(--h-ink-2);
}
.hn-pricetable td:last-child,
.hn-pricetable th:last-child {
	padding-right: 0;
}
.hn-pricetable .name {
	font-family: var(--h-serif);
	font-size: 18px;
	letter-spacing: 0.1em;
	color: var(--h-ink);
	white-space: nowrap;
}
.hn-pricetable .price {
	color: var(--h-ink);
}
.hn-pricetable .price em {
	font-family: var(--h-serif);
	font-style: normal;
	font-size: clamp(19px, 2vw, 26px);
	letter-spacing: 0.06em;
	line-height: 1.3;
}
.hn-pricetable .price small {
	display: block;
	margin-top: 6px;
	font-size: 12px;
	color: var(--h-ink-3);
	letter-spacing: 0.04em;
}

/* --- §13.10 帯ブロック（対応エリア）--------------------------------- */
.hn-band {
	margin: 0 20px;
	background: var(--h-paper-2);
	border-radius: 0 0 0 clamp(80px, 12vw, 180px);
	padding: clamp(72px, 9vw, 120px) var(--h-sec-x);
}
.hn-band__big {
	margin: 0;
	font-family: var(--h-serif);
	font-weight: 500;
	font-size: clamp(48px, 7vw, 96px);
	line-height: 1;
	letter-spacing: 0.08em;
}
.hn-band__row {
	display: flex;
	align-items: baseline;
	gap: 20px;
	flex-wrap: wrap;
}
.hn-band__side {
	font-size: 13px;
	color: var(--h-ink-3);
	letter-spacing: 0.14em;
	line-height: 1.6;
}
.hn-tags {
	display: flex;
	flex-wrap: wrap;
	gap: 9px;
	list-style: none;
	margin: 0;
	padding: 0;
	font-family: var(--h-serif);
	font-size: 12.5px;
	letter-spacing: 0.12em;
}
.hn-tags li {
	padding: 5px 12px;
	border-radius: 999px;
	color: var(--h-ink-3);
	box-shadow: inset 0 0 0 1px var(--h-rule);
}
.hn-tags li.is-shop {
	color: var(--h-paper);
	background: var(--h-ink);
	box-shadow: none;
}

/* --- §13.11 行リスト（FAQ）------------------------------------------ */
.hn-rows {
	list-style: none;
	margin: 0;
	padding: 0;
}
.hn-rows > li {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	gap: 18px;
	padding: 20px 0;
	border-top: 1px solid var(--h-rule);
}
.hn-rows__no {
	font-family: var(--h-serif);
	color: var(--h-accent);
	font-size: 13px;
	padding-top: 5px;
	letter-spacing: 0.1em;
}
.hn-rows .q {
	margin: 0 0 8px;
	font-size: 15.5px;
	font-weight: 500;
	color: var(--h-ink);
}
.hn-rows .a {
	margin: 0;
	font-size: 14px;
	color: var(--h-ink-2);
	text-wrap: pretty;
}

/* --- §13.12 会社・アクセス ------------------------------------------ */
.hn-dl {
	margin: 0;
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	gap: 12px 24px;
	font-size: 14px;
}
.hn-dl dt {
	color: var(--h-ink-3);
	white-space: nowrap;
}
.hn-dl dd {
	margin: 0;
}
.hn-portrait {
	position: relative;
	aspect-ratio: 4 / 5;
	overflow: hidden;
	background: var(--h-fill);
	border-radius: 0 0 var(--h-corner) 0;
	margin: 0;
}
.hn-portrait img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

/* --- §13.13 共有パーツ（CTA帯・フッター）をテーマに寄せる ----------- */
.theme-hinata .cta-band {
	background: var(--h-ink);
	color: var(--h-paper);
	border: 0;
	padding: clamp(64px, 8vw, 100px) var(--h-sec-x);
	border-radius: var(--h-corner) 0 0 0;
	text-align: left;
}
.theme-hinata .cta-band__inner {
	width: auto;
	max-width: none;
	margin-inline: 0;
	display: grid;
	justify-items: start;
	gap: 0;
	text-align: left;
}
.theme-hinata .cta-band__lead {
	font-size: 11.5px;
	font-weight: 400;
	letter-spacing: 0.3em;
	color: var(--h-accent-2);
	margin: 0 0 18px;
	border: 0;
	padding: 0;
}
.theme-hinata .cta-band__title {
	font-family: var(--h-serif);
	font-weight: 500;
	font-size: clamp(22px, 3vw, 40px);
	letter-spacing: 0.06em;
	line-height: 1.5;
	color: var(--h-paper);
	margin: 0 0 28px;
}
.theme-hinata .cta-band__tel {
	display: inline-flex;
	align-items: center;
	gap: 14px;
	background: var(--h-paper);
	color: var(--h-ink);
	padding: 16px 30px;
	border-radius: 999px 999px 999px 0;
	font-family: var(--h-serif);
	font-size: clamp(20px, 2.4vw, 30px);
	letter-spacing: 0.06em;
	border: 0;
}
.theme-hinata .cta-band__tel:hover {
	background: var(--h-accent);
	color: var(--h-paper);
}
.theme-hinata .cta-band__pending,
.theme-hinata .cta-band__hours {
	margin: 18px 0 0;
	font-size: 12.5px;
	color: var(--h-ink-4);
	letter-spacing: 0.1em;
}
.theme-hinata .cta-band__line {
	display: inline-flex;
	align-items: center;
	margin-top: 20px;
	padding: 14px 26px;
	border-radius: 999px 999px 999px 0;
	background: transparent;
	color: var(--h-paper);
	box-shadow: inset 0 0 0 1px rgba(247, 243, 236, 0.4);
	font-size: 13.5px;
	letter-spacing: 0.14em;
	border: 0;
}

.theme-hinata .site-footer {
	background: var(--h-paper);
	color: var(--h-ink);
	border-top: 1px solid var(--h-rule);
	padding: 40px var(--h-sec-x) 48px;
	margin-top: clamp(64px, 8vw, 100px);
}
.theme-hinata .site-footer__inner {
	width: auto;
	max-width: none;
	margin-inline: 0;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
	gap: 32px 64px;
	padding: 0;
}
.theme-hinata .site-footer__name {
	font-family: var(--h-serif);
	font-size: 18px;
	letter-spacing: 0.2em;
	margin: 0 0 8px;
	color: var(--h-ink);
}
.theme-hinata .site-footer__sub,
.theme-hinata .site-footer__address,
.theme-hinata .site-footer__permits,
.theme-hinata .site-footer__copy {
	font-size: 12px;
	color: var(--h-ink-3);
	letter-spacing: 0.08em;
}
.theme-hinata .site-footer__nav ul {
	display: flex;
	flex-wrap: wrap;
	gap: 12px 24px;
	font-size: 12px;
	color: var(--h-ink-3);
	letter-spacing: 0.1em;
	list-style: none;
	margin: 0;
	padding: 0;
}
.theme-hinata .site-footer__copy {
	margin-top: 32px;
	border-top: 1px solid var(--h-rule);
	border-color: var(--h-rule);
	padding: 20px 0 0;
	text-align: left;
	color: var(--h-ink-3);
}

/* --- §13.14 モーション --------------------------------------------- */
@keyframes hn-riseIn {
	from {
		opacity: 0;
		transform: translateY(18px);
	}
	to {
		opacity: 1;
		transform: none;
	}
}
@keyframes hn-drift {
	from {
		transform: translateY(0);
	}
	to {
		transform: translateY(8px);
	}
}
@keyframes hn-breathe {
	0%,
	100% {
		transform: scale(1);
		opacity: 0.85;
	}
	50% {
		transform: scale(1.6);
		opacity: 0.35;
	}
}
.theme-hinata .reveal {
	opacity: 0;
	transform: translateY(28px);
	transition:
		opacity 1s ease,
		transform 1s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.theme-hinata .reveal.is-visible {
	opacity: 1;
	transform: none;
}

/* --- §13.15 レスポンシブ -------------------------------------------- */
@media (max-width: 1023px) {
	/* レールを畳んで既存ヘッダーに戻す */
	.hn-rail {
		display: none;
	}
	.theme-hinata #main,
	.theme-hinata .cta-band,
	.theme-hinata .site-footer {
		margin-left: 0;
		margin-right: 0;
	}
	.theme-hinata .site-header {
		display: block;
		background: var(--h-paper);
		border-bottom: 1px solid var(--h-rule);
	}
	.theme-hinata .brand__name {
		font-family: var(--h-serif);
		font-weight: 500;
		letter-spacing: 0.16em;
		color: var(--h-ink);
	}
	.theme-hinata .brand__sub,
	.theme-hinata .header-tel__note {
		color: var(--h-ink-3);
	}
	.theme-hinata .hn-hero__media {
		height: min(64vh, 620px);
		min-height: 380px;
		border-radius: 0 clamp(60px, 12vw, 140px) 0 0;
	}
	.theme-hinata .cta-band {
		border-radius: clamp(48px, 10vw, 90px) 0 0 0;
	}
}

@media (max-width: 767px) {
	.hn-hero__head {
		grid-template-columns: 1fr;
	}
	.hn-scroll {
		display: none;
	}
	/* 1カラムに畳んだら必ず本文→写真の順に戻す */
	.hn-zig > li:nth-child(even) .hn-zig__body,
	.hn-zig > li:nth-child(even) .hn-zig__media,
	.hn-zig > li:nth-child(even) .hn-permit {
		order: 0;
	}
	/* 料金表を行ブロックに組み替え */
	.hn-pricetable thead {
		position: absolute;
		width: 1px;
		height: 1px;
		overflow: hidden;
		clip: rect(0 0 0 0);
		white-space: nowrap;
	}
	.hn-pricetable tr {
		display: block;
		border-top: 1px solid var(--h-ink);
		padding: 18px 0;
	}
	.hn-pricetable tr:first-child {
		border-top: 1px solid var(--h-ink);
	}
	.hn-pricetable td {
		display: block;
		border: 0;
		padding: 0 0 8px;
	}
	.hn-pricetable td:last-child {
		padding-bottom: 0;
	}
	.hn-pricetable .name {
		white-space: normal;
	}
}

@media (prefers-reduced-motion: reduce) {
	.theme-hinata *,
	.theme-hinata *::before,
	.theme-hinata *::after {
		animation: none !important;
		transition: none !important;
	}
	.theme-hinata .reveal {
		opacity: 1;
		transform: none;
	}
}

/* ============================================================
   §13.16 下層ページ（既存クラスをひなた文法へ寄せる層）
   テンプレートは変更せず、CSS だけで系を揃える。
   ============================================================ */

/* --- レイアウトの器 ------------------------------------------------- */
.theme-hinata .container {
	width: auto;
	max-width: none;
	margin-inline: 0;
}
.theme-hinata .container--narrow {
	max-width: 760px;
}
.theme-hinata .sec,
.theme-hinata .sec--loose {
	padding: var(--h-sec-y) var(--h-sec-x);
}
.theme-hinata .sec--alt {
	background: var(--h-paper-2);
	border-radius: 0 0 0 clamp(80px, 12vw, 180px);
	margin-inline: 20px;
	padding: clamp(72px, 9vw, 120px) var(--h-sec-x);
}

/* --- パンくず -------------------------------------------------------- */
.theme-hinata .crumbs {
	padding: 24px var(--h-sec-x) 0;
	font-size: 11.5px;
	letter-spacing: 0.18em;
	color: var(--h-ink-3);
}
.theme-hinata .crumbs a {
	text-decoration: none;
	border-bottom: 1px solid var(--h-rule);
	padding-bottom: 2px;
}
.theme-hinata .crumbs .sep {
	margin-inline: 0.8em;
	color: var(--h-ink-3);
}

/* --- 下層ページの扉（マスコットをワンポイントに置く）------------------ */
.theme-hinata .page-head {
	border-bottom: 0;
	padding: clamp(48px, 7vw, 96px) var(--h-sec-x) clamp(40px, 5vw, 72px);
	position: relative;
}
.theme-hinata .page-head::after {
	content: '';
	position: absolute;
	right: var(--h-sec-x);
	bottom: clamp(32px, 4vw, 56px);
	width: clamp(56px, 6vw, 88px);
	aspect-ratio: 482 / 661;
	background: url(../images/brand/katazukin-logo.png) no-repeat center / contain;
	pointer-events: none;
}
.theme-hinata .page-head__title {
	font-family: var(--h-serif);
	font-weight: 500;
	font-size: clamp(28px, 3.4vw, 50px);
	letter-spacing: 0.1em;
	line-height: 1.4;
	color: var(--h-ink);
	border-top: 1px solid var(--h-rule);
	padding-top: 28px;
}
.theme-hinata .page-head__lead {
	margin-top: 20px;
	max-width: 44em;
	font-size: 15px;
	color: var(--h-ink-2);
	text-wrap: pretty;
}

/* --- 見出し ---------------------------------------------------------- */
.theme-hinata .sec__title {
	font-family: var(--h-serif);
	font-weight: 500;
	font-size: clamp(22px, 2.4vw, 34px);
	letter-spacing: 0.08em;
	line-height: 1.5;
	color: var(--h-ink);
	border-top: 1px solid var(--h-rule);
	padding: 26px 0 0;
	margin-bottom: clamp(28px, 4vw, 44px);
}
.theme-hinata .sec__title::after {
	display: none;
}
.theme-hinata .sec__lead {
	font-size: 15px;
	color: var(--h-ink-2);
	max-width: 44em;
	margin-bottom: 2.5rem;
	text-wrap: pretty;
}
.theme-hinata .sec p {
	text-wrap: pretty;
}
.theme-hinata .sec__eyebrow {
	font-size: 11.5px;
	letter-spacing: 0.3em;
	color: var(--h-accent);
}
.theme-hinata .sec__more {
	margin-top: 32px;
}

/* --- リンク・スタンプ ------------------------------------------------- */
.theme-hinata .link-more {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-weight: 400;
	font-size: 13px;
	letter-spacing: 0.12em;
	color: var(--h-ink);
	border-bottom: 1px solid var(--h-rule-strong);
	padding-bottom: 3px;
}
.theme-hinata .link-more:hover {
	color: var(--h-accent);
	border-color: var(--h-accent);
}
.theme-hinata .stamp {
	border: 0;
	background: var(--h-paper);
	color: var(--h-ink-3);
	font-family: var(--h-sans);
	font-weight: 400;
	font-size: 11.5px;
	letter-spacing: 0.24em;
	padding: 6px 14px;
}

/* --- 料金表・会社概要表 ----------------------------------------------- */
.theme-hinata .quote-table,
.theme-hinata .company-table {
	background: transparent;
	border-top: 1px solid var(--h-ink);
	border-bottom: 0;
	width: 100%;
}
.theme-hinata .quote-table caption {
	font-size: 12.5px;
	color: var(--h-ink-3);
	padding-block: 16px 0;
}
.theme-hinata .quote-table th,
.theme-hinata .quote-table td,
.theme-hinata .company-table th,
.theme-hinata .company-table td {
	border-bottom: 1px solid var(--h-rule);
	padding: 20px 20px 20px 0;
	font-size: 14.5px;
	color: var(--h-ink-2);
}
.theme-hinata .quote-table thead th,
.theme-hinata .company-table th {
	background: transparent;
	font-weight: 400;
	font-size: 11.5px;
	letter-spacing: 0.2em;
	color: var(--h-ink-3);
	padding-block: 14px;
}
.theme-hinata .quote-table .plan-name {
	font-family: var(--h-serif);
	font-weight: 500;
	font-size: 18px;
	letter-spacing: 0.1em;
	color: var(--h-ink);
}
.theme-hinata .quote-table .plan-target {
	font-family: var(--h-sans);
	font-size: 12.5px;
	letter-spacing: 0.04em;
	color: var(--h-ink-3);
}
.theme-hinata .quote-table .plan-price {
	font-family: var(--h-serif);
	font-weight: 500;
	font-size: clamp(19px, 2vw, 26px);
	color: var(--h-ink);
}
.theme-hinata .quote-table .plan-price-note,
.theme-hinata .quote-table .plan-spec {
	display: block;
	font-family: var(--h-sans);
	font-size: 12px;
	letter-spacing: 0.04em;
	color: var(--h-ink-3);
	margin-top: 8px;
	white-space: normal;
}
.theme-hinata .quote-table .plan-detail {
	font-size: 14px;
}
.theme-hinata .quote-table-wrap .stamp {
	background: var(--h-paper);
	top: -1.4rem;
}
.theme-hinata .sec--alt .quote-table-wrap .stamp {
	background: var(--h-paper-2);
}

/* --- 3枠の補足（買取・支払い・見積）----------------------------------- */
.theme-hinata .price-notes {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
	gap: 32px 40px;
	border-top: 0;
	margin-top: 48px;
}
.theme-hinata .price-notes > div {
	border-top: 1px solid var(--h-ink);
	border-bottom: 0;
	padding: 20px 0 0;
	gap: 12px;
}
.theme-hinata .price-notes h3 {
	font-family: var(--h-serif);
	font-weight: 500;
	font-size: 20px;
	letter-spacing: 0.1em;
	color: var(--h-ink);
}
.theme-hinata .price-notes p {
	font-size: 14.5px;
	color: var(--h-ink-2);
	line-height: 1.9;
}

/* --- 品目・注記リスト ------------------------------------------------- */
.theme-hinata .items-list {
	border-top: 1px solid var(--h-ink);
}
.theme-hinata .items-list > li {
	grid-template-columns: minmax(0, 12em) minmax(0, 1fr);
	gap: 8px 32px;
	padding: 18px 0;
	border-bottom: 1px solid var(--h-rule);
	align-items: baseline;
}
.theme-hinata .items-list .cat {
	font-family: var(--h-serif);
	font-weight: 500;
	font-size: 16px;
	letter-spacing: 0.1em;
	color: var(--h-ink);
}
.theme-hinata .items-list .ex {
	font-size: 14px;
	color: var(--h-ink-2);
}
.theme-hinata .items-list .note {
	color: var(--h-ink-3);
	font-size: 12px;
}
.theme-hinata .note-list {
	margin-top: 28px;
	font-size: 12.5px;
	color: var(--h-ink-3);
}

/* --- 流れ（縦の罫線リストに組み替え）---------------------------------- */
.theme-hinata .flow-list {
	padding-left: 0;
}
.theme-hinata .flow-list::before {
	display: none;
}
.theme-hinata .flow-list > li {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	gap: 10px 24px;
	align-items: baseline;
	border-top: 1px solid var(--h-rule);
	padding: 26px 0;
}
.theme-hinata .flow-list .no {
	position: static;
	width: auto;
	height: auto;
	background: transparent;
	border: 0;
	font-family: var(--h-serif);
	font-size: 13px;
	letter-spacing: 0.2em;
	color: var(--h-accent);
	grid-row: 1 / 3;
	display: block;
}
.theme-hinata .flow-list h3 {
	font-family: var(--h-serif);
	font-weight: 500;
	font-size: clamp(20px, 2vw, 26px);
	letter-spacing: 0.1em;
	line-height: 1.5;
	margin: 0;
	padding: 0;
	color: var(--h-ink);
}
.theme-hinata .flow-list p {
	font-size: 14.5px;
	color: var(--h-ink-2);
	line-height: 1.9;
	max-width: 44em;
}

/* --- エリア（タグ）---------------------------------------------------- */
.theme-hinata .tag-list {
	border: 0;
	background: transparent;
	gap: 9px;
}
.theme-hinata .tag-list li {
	border: 0;
	box-shadow: inset 0 0 0 1px var(--h-rule);
	border-radius: 999px;
	padding: 5px 13px;
	font-family: var(--h-serif);
	font-size: 12.5px;
	letter-spacing: 0.12em;
	color: var(--h-ink-3);
}
.theme-hinata .area-block h3 {
	font-family: var(--h-serif);
	font-weight: 500;
	font-size: 20px;
	letter-spacing: 0.12em;
	margin-bottom: 18px;
	color: var(--h-ink);
}
.theme-hinata .area-note {
	font-size: 12.5px;
	color: var(--h-ink-3);
	margin-top: 20px;
}

/* --- FAQ ------------------------------------------------------------- */
.theme-hinata .faq-list > li {
	padding-block: 22px;
	border-bottom: 1px solid var(--h-rule);
}
.theme-hinata .faq-list > li:first-child {
	border-top: 1px solid var(--h-ink);
}
.theme-hinata .faq-list .q {
	font-family: var(--h-serif);
	font-weight: 500;
	font-size: clamp(16px, 1.6vw, 19px);
	letter-spacing: 0.06em;
	line-height: 1.7;
	color: var(--h-ink);
	gap: 0.7em;
}
.theme-hinata .faq-list .q::before {
	font-family: var(--h-serif);
	font-weight: 500;
	color: var(--h-accent);
}
.theme-hinata .faq-list .a {
	font-size: 14.5px;
	color: var(--h-ink-2);
	gap: 0.7em;
	margin-top: 10px;
}
.theme-hinata .faq-list .a::before {
	font-family: var(--h-serif);
	font-weight: 500;
	color: var(--h-ink-3);
}

/* --- 写真枠 ----------------------------------------------------------- */
.theme-hinata .photo-frame {
	border: 0;
	background: transparent;
	padding: 0;
}
.theme-hinata .photo-frame picture {
	display: block;
	overflow: hidden;
	background: var(--h-fill);
	border-radius: 0 var(--h-corner) 0 0;
}
.theme-hinata .photo-frame img {
	display: block;
	width: 100%;
	height: auto;
}
.theme-hinata .photo-frame figcaption {
	border-top: 0;
	margin-top: 14px;
	padding-top: 0;
	font-size: 12px;
	letter-spacing: 0.08em;
	color: var(--h-ink-3);
}
.theme-hinata .shop-photos {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
	gap: 40px;
	align-items: start;
	margin-top: 40px;
}
.theme-hinata .shop-photos .photo-frame:nth-child(even) picture {
	border-radius: var(--h-corner) 0 0 0;
}

/* --- 404 -------------------------------------------------------------- */
.hn-notfound__inner {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
	gap: 40px 64px;
	align-items: center;
	max-width: 920px;
}
.hn-notfound__mascot {
	margin: 0;
	max-width: 240px;
	justify-self: center;
}
.hn-notfound__mascot img {
	display: block;
	width: 100%;
	height: auto;
}
.hn-notfound__title {
	margin: 0 0 22px;
	font-family: var(--h-serif);
	font-weight: 500;
	font-size: clamp(24px, 2.8vw, 38px);
	letter-spacing: 0.08em;
	line-height: 1.5;
}
.hn-tags--links {
	margin-top: 28px;
}
.hn-tags--links li {
	box-shadow: inset 0 0 0 1px var(--h-rule);
	color: var(--h-ink);
}
.hn-tags--links li:hover {
	box-shadow: inset 0 0 0 1px var(--h-accent);
}

/* --- スキップリンク --------------------------------------------------- */
.theme-hinata .skip-link {
	background: var(--h-ink);
	color: var(--h-paper);
}

/* ============================================================
   §13.17 マスコット「かたづきんちゃん」＝ロゴマーク
   ============================================================ */

/* レール（PC）: マーク + 縦組みの屋号でロゴロックアップ。
   マスコットは全身のまま使う（頭だけ切ると生首に見えるため。DESIGN.md §14）*/
.hn-rail__mark {
	display: block;
	width: 34px;
	height: 47px;
}
.hn-rail__mark img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
}

/* ヘッダー（SP）: マーク + 屋号 */
.theme-hinata .brand__name {
	display: inline-flex;
	align-items: center;
	gap: 10px;
}
.theme-hinata .brand__mark {
	display: block;
	width: 34px;
	height: 47px;
	flex-shrink: 0;
}
.theme-hinata .brand__mark img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
}
.theme-hinata .brand__text {
	font-family: var(--h-serif);
	font-weight: 500;
	letter-spacing: 0.12em;
	color: var(--h-ink);
}

/* フッター */
.theme-hinata .site-footer__name {
	display: flex;
	align-items: center;
	gap: 12px;
}
.theme-hinata .site-footer__mark {
	display: block;
	width: 36px;
	height: 49px;
	flex-shrink: 0;
}
.theme-hinata .site-footer__mark img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
}

/* マスコットの紅をブランドの点に使う（装飾のみ・文字色には使わない）*/
.theme-hinata {
	--h-beni: #e03060;
}
.hn-rail__dot,
.hn-rail__pulse {
	background: var(--h-beni);
}

/* --- §13.18 旧デザイン由来の残り物を打ち消す --------------------------- */
/* 黄色マーカー（旧 --marker）はひなた系に合わないので外す */
.theme-hinata .quote-table .plan-price em,
.theme-hinata .hero__facts .v em {
	background: none;
	padding-inline: 0;
}
/* .quote-table-wrap は overflow-x:auto で絶対配置のスタンプを切ってしまうため、
   スタンプを表の上に静的なチップとして置き直す */
.theme-hinata .quote-table-wrap .stamp {
	position: static;
	display: inline-block;
	margin-bottom: 16px;
	background: transparent;
	box-shadow: inset 0 0 0 1px var(--h-rule);
	border-radius: 999px;
	padding: 5px 14px;
}

/* --- §13.19 現在地表示・404 の列幅 ------------------------------------- */
/* レールの現在ページ（縦組みなので下線は縦罫として出る）*/
.hn-rail__nav a[aria-current='page'] {
	color: var(--h-ink);
	text-decoration: underline;
	text-decoration-color: var(--h-accent);
	text-decoration-thickness: 1px;
	text-underline-offset: 5px;
}
@media (min-width: 768px) {
	.hn-notfound__inner {
		grid-template-columns: minmax(200px, 260px) minmax(0, 1fr);
		max-width: 1000px;
	}
}

/* --- §13.20 SP 調整 ---------------------------------------------------- */
@media (max-width: 767px) {
	/* 品目リストは 2 列だと例示が細くなりすぎるので 1 列に畳む */
	.theme-hinata .items-list > li {
		grid-template-columns: 1fr;
		gap: 6px;
	}
	/* 帯の巨大角丸は SP では控えめに */
	.theme-hinata .sec--alt {
		margin-inline: 12px;
		border-radius: 0 0 0 clamp(48px, 14vw, 90px);
	}
	.theme-hinata .page-head::after {
		width: 64px;
		bottom: 20px;
	}
	/* SP は幅が足りずマスコットが本文に重なるので、その分を空ける */
	.theme-hinata .page-head__title,
	.theme-hinata .page-head__lead {
		padding-right: 80px;
	}
}

/* --- §13.21 店舗ブロック（写真を使わない店舗の受け皿）------------------ */
/* 馬橋支店は看板に旧電話番号が3箇所写り込んでおり、全部を外すクロップが存在しない。
   §13.6 で `trust/kaitori-kyoka.*` を落として証書ブロックで受けたのと同じ判断で、
   合わない素材は使わず事実をテキストで受ける（DESIGN.md §8）。 */
/* 既定は面を塗らず罫と余白だけで組む（§13.3）。帯（.sec--alt）の中に置いても沈まない。 */
.theme-hinata .hn-shopnote {
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 18px;
}
.theme-hinata .hn-shopnote dl {
	margin: 0;
	display: grid;
	gap: 18px;
}
.theme-hinata .hn-shopnote dt {
	font-family: var(--h-serif);
	font-weight: 500;
	font-size: clamp(15px, 1.5vw, 18px);
	letter-spacing: 0.1em;
	border-top: 1px solid var(--h-ink);
	padding-top: 12px;
}
.theme-hinata .hn-shopnote dd {
	margin: 4px 0 0;
	font-size: 13px;
	line-height: 1.8;
	letter-spacing: 0.06em;
	color: var(--h-ink-2);
}
.theme-hinata .hn-shopnote__note {
	margin: 0;
	font-size: 11.5px;
	letter-spacing: 0.1em;
	color: var(--h-ink-3);
}
/* ジグザグの中だけは写真枠と同じ「面」として置く（§13.6 の証書ブロックと同じ扱い。
   角丸の巡回・左右の入れ替えも写真枠に合わせる）*/
.hn-zig .hn-shopnote {
	aspect-ratio: 4 / 3;
	background: var(--h-paper-2);
	padding: clamp(24px, 4vw, 44px);
}
.hn-zig > li:nth-child(1) .hn-shopnote {
	border-radius: 0 0 0 var(--h-corner);
}
.hn-zig > li:nth-child(2) .hn-shopnote {
	border-radius: 0 var(--h-corner) 0 0;
}
.hn-zig > li:nth-child(3) .hn-shopnote {
	border-radius: var(--h-corner) 0 0 0;
}
.hn-zig > li:nth-child(4) .hn-shopnote {
	border-radius: 0 0 var(--h-corner) 0;
}
.hn-zig > li:nth-child(even) .hn-shopnote {
	order: 1;
}

/* --- §13.22 未テーマ化 UI（site.js の投入で出現する分）------------------ */
/* ヒーローの CTA は .hn-hero__head と同じ 8px の内側揃えにする */
.hn-hero__ctas {
	padding-inline: 8px;
}

/* SP 固定バー: 墨地 + 紙色文字。LINE 側は紙地 + 墨罫 + ink 文字（緑面に白字を置かない
   という §12 の原則は維持。ひなた系では緑罫の代わりに墨罫を使う）。角丸はピル用法だけ
   なのでバーは角丸なし。*/
.theme-hinata .mobile-bar {
	background: var(--h-paper);
	border-top: 1px solid var(--h-rule-strong);
}
.theme-hinata .mobile-bar__tel,
.theme-hinata .mobile-bar__line {
	font-family: var(--h-sans);
	font-weight: 500;
	font-size: 14.5px;
	letter-spacing: 0.08em;
}
.theme-hinata .mobile-bar__tel {
	background: var(--h-ink);
	color: var(--h-paper);
	gap: 0.5em;
}
.theme-hinata .mobile-bar__line {
	background: var(--h-paper);
	color: var(--h-ink);
	border-left: 1px solid var(--h-rule-strong);
	box-shadow: none;
}
/* 電話番号が未確定でバーが LINE 1枠だけになる間は、面を反転して CTA として立たせる */
.theme-hinata .mobile-bar__line:only-child {
	background: var(--h-ink);
	color: var(--h-paper);
	border-left: 0;
}

/* SP ナビの LINE ボタン */
.theme-hinata .sp-nav__line {
	background: transparent;
	color: var(--h-ink);
	border: 1px solid var(--h-ink);
	border-radius: 999px 999px 999px 0;
	font-family: var(--h-sans);
	font-weight: 500;
	font-size: 13.5px;
	letter-spacing: 0.12em;
	padding: 0.9em;
}

/* SP / タブレットのヘッダー（旧パレットの紺・朱が残っていた分）*/
.theme-hinata .nav-toggle {
	background: transparent;
	border: 1px solid var(--h-rule-strong);
}
.theme-hinata .nav-toggle__bar,
.theme-hinata .nav-toggle__bar::before,
.theme-hinata .nav-toggle__bar::after {
	background: var(--h-ink);
}
.theme-hinata .nav-toggle__label {
	color: var(--h-ink-2);
	letter-spacing: 0.12em;
}
.theme-hinata .header-tel__number {
	font-family: var(--h-serif);
	font-weight: 500;
	color: var(--h-ink);
	letter-spacing: 0.06em;
}
.theme-hinata .header-tel--pending .header-tel__number {
	color: var(--h-ink-3);
}
.theme-hinata .sp-nav {
	background: var(--h-paper);
	border-bottom: 1px solid var(--h-rule);
}
.theme-hinata .sp-nav__list li {
	border-top: 1px solid var(--h-rule);
}
.theme-hinata .sp-nav__list a {
	font-weight: 400;
	letter-spacing: 0.1em;
}
.theme-hinata .sp-nav__list a[aria-current='page'] {
	color: var(--h-ink);
	text-decoration: underline;
	text-decoration-color: var(--h-accent);
	text-decoration-thickness: 1px;
	text-underline-offset: 5px;
}
/* グローバルナビは 1000〜1023px の帯だけで出る（1024px 以上はレールが担う）*/
.theme-hinata .gnav__list {
	font-weight: 400;
	letter-spacing: 0.1em;
}
.theme-hinata .gnav__list a {
	border-bottom: 1px solid transparent;
}
.theme-hinata .gnav__list a:hover,
.theme-hinata .gnav__list a[aria-current='page'] {
	color: var(--h-ink);
	border-bottom-color: var(--h-accent);
}

/* 電話番号が未確定の間は LINE が唯一の CV になるので、面を反転して主ボタンとして立たせる。
   phone を site.js に入れると .hn-btn--pending が消え、この隣接セレクタも外れて枠線版に戻る。*/
.hn-ctas .hn-btn--pending + .hn-btn--line {
	background: var(--h-ink);
	color: var(--h-paper);
	box-shadow: none;
}
.hn-ctas .hn-btn--pending + .hn-btn--line:hover {
	background: var(--h-accent);
	color: var(--h-paper);
}

/* --- §13.23 太字の合成をなくす -------------------------------------------
   style.css の 700/900 が残っていた4箇所。Shippori Mincho B1 / Zen Kaku
   Gothic New はいま 400/500 しか配信していないので、700/900 を指定すると
   ブラウザが**合成太字**を作る（明朝が潰れる）。ひなた系の 500 に統一する。
   ついでに Google Fonts のリクエストから未使用ウェイトを外せる（base.njk）。 */
.theme-hinata .flow-list .no,
.theme-hinata .site-footer__name,
.theme-hinata .cta-band__line,
.theme-hinata .brand__name {
	font-weight: 500;
}
.theme-hinata .site-footer__name,
.theme-hinata .brand__name {
	font-family: var(--h-serif);
}