/*
 * site-base デザインシステム(第二稿)。
 * 配色は OFF WHITE / BLACK / DEEP GREEN の3色構成。写真が一番目立つよう、
 * 影・角丸・グラデーション・装飾は最小限にし、タイポグラフィと余白とサイズ差で構成する。
 * 見出し=明朝体、本文/UI=ゴシック体、英字ラベル=ゴシック+letter-spacingの3階層。
 */

:root {
	/* --- color --- */
	--color-paper: #FFFFFF;
	--color-surface: #FFFFFF;
	--color-surface-alt: #EDF1EC;
	--color-ink: #1B1B19;
	--color-ink-soft: #5C5A56;
	--color-ink-faint: #928E88;
	--color-line: #E2DFD8;
	--color-line-strong: #CFCBC1;

	--color-accent: #0F5132;
	--color-accent-dark: #0B3D26;
	--color-accent-ink: #FFFFFF;
	--color-accent-tint: #E2EAE6;

	--color-dark: #1B1B19;
	--color-dark-ink: #F1EFEA;
	--color-dark-line: rgba(255, 255, 255, 0.14);

	/* --- type ---
	 * 飲食・美容・医療・健康・その他まで幅広い業態を扱うポータルのため、明朝体は使用しない。
	 * 日本語はゴシック体(Noto Sans JP)で統一し、ウェイト差で見出し階層を作る。
	 * 英字ラベル(.label-en)だけ Inter を使う。 */
	--font-display: "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Yu Gothic Medium", "Yu Gothic", "Meiryo", sans-serif;
	--font-body: "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Yu Gothic Medium", "Yu Gothic", "Meiryo", sans-serif;
	--font-en: "Inter", "Hiragino Kaku Gothic ProN", "Hiragino Sans", sans-serif;

	--fs-2xs: 0.6875rem;
	--fs-xs: 0.75rem;
	--fs-sm: 0.875rem;
	--fs-base: 1rem;
	--fs-md: 1.125rem;
	--fs-lg: 1.25rem;
	--fs-xl: 1.5rem;
	--fs-2xl: 2rem;
	--fs-3xl: clamp(1.75rem, 1.3rem + 2vw, 2.5rem);

	/* --- space --- */
	--space-1: 4px;
	--space-2: 8px;
	--space-3: 12px;
	--space-4: 16px;
	--space-5: 24px;
	--space-6: 32px;
	--space-7: 48px;
	--space-8: 64px;
	--space-9: 96px;

	/* --- shape ---
	 * TOPページは添付カンプ(角丸多め・カード影あり)に合わせて、店舗一覧/詳細より柔らかいトーンにする。 */
	--radius-sm: 6px;
	--radius: 10px;
	--radius-lg: 16px;
	--radius-xl: 22px;
	--radius-pill: 999px;

	--shadow-sm: 0 1px 3px rgba(27, 27, 25, 0.08);
	--shadow-card: 0 4px 16px rgba(27, 27, 25, 0.08);

	--content-width: 1180px;
	--reading-width: 700px;

	--ease: cubic-bezier(0.22, 1, 0.36, 1);

	/*
	 * 大分類の配色パレット(公式ブランドカラー、term_idの並び順で巡回割り当て)。
	 * -solid は公式カラーそのもの(バッジ・ホバー塗り用)、-fg は白背景でも読みやすいよう
	 * 公式カラーを暗めに調整した値(アイコン・枠線・文字用)、-bg は淡いティント(円の背景用)。
	 * カテゴリタームメタとしては保存しない = カテゴリ数が増減しても自動的に破綻しない。
	 * TOPページの大分類ブロック配下(.category-block--c1〜5)でのみ使われ、
	 * 店舗一覧・店舗詳細など他ページのバッジ色には影響しない(CSS変数のスコープ継承のみで実現)。
	 */
	--cat1-bg: #FFF2E0; --cat1-fg: #BF6700; --cat1-solid: #FF8A00; /* 飲食 */
	--cat2-bg: #FFEBF5; --cat2-fg: #BF457E; --cat2-solid: #FF5CA8; /* 美容 */
	--cat3-bg: #E5F1FD; --cat3-fg: #1666AC; --cat3-solid: #1E88E5; /* 医療 */
	--cat4-bg: #E4F7EE; --cat4-fg: #198756; --cat4-solid: #22B573; /* 健康 */
	--cat5-bg: #F1E9F5; --cat5-fg: #6A3382; --cat5-solid: #8E44AD; /* その他 */
}

/* ---------------------------------------------------------------- reset */
*,
*::before,
*::after {
	box-sizing: border-box;
}
html {
	-webkit-text-size-adjust: 100%;
}
body {
	margin: 0;
	background: var(--color-paper);
	color: var(--color-ink);
	font-family: var(--font-body);
	font-size: var(--fs-base);
	line-height: 1.8;
	-webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4 {
	font-family: var(--font-display);
	font-weight: 700;
	line-height: 1.4;
	margin: 0;
}
h1 {
	font-weight: 800;
}
a {
	color: inherit;
}
img {
	max-width: 100%;
	height: auto;
	display: block;
}
button {
	font-family: inherit;
}
@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after {
		animation-duration: 0.01ms !important;
		transition-duration: 0.01ms !important;
	}
}

/* ---------------------------------------------------------------- utility */
.container {
	width: 100%;
	max-width: var(--content-width);
	margin-inline: auto;
	padding-inline: var(--space-5);
}
.screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(1px, 1px, 1px, 1px);
	white-space: nowrap;
}
.skip-link {
	position: absolute;
	top: -100px;
	left: 0;
	z-index: 1000;
	background: var(--color-surface);
	padding: var(--space-3) var(--space-4);
}
.skip-link:focus {
	top: 0;
	position: fixed;
	width: auto;
	height: auto;
	clip: auto;
}
:focus-visible {
	outline: 2px solid var(--color-accent);
	outline-offset: 2px;
}

/* 英字の補助ラベル(セクション名・カテゴリ英訳など、3階層目のタイポグラフィ) */
.label-en {
	display: inline-block;
	font-family: var(--font-en);
	font-size: var(--fs-2xs);
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

/* セクション見出し */
.section-header {
	max-width: 640px;
	margin: 0 0 var(--space-6);
}
.section-header__eyebrow {
	color: var(--color-accent);
	margin-bottom: var(--space-2);
}
.section-header__title {
	font-size: var(--fs-2xl);
}
.section-header__title-row {
	display: flex;
	align-items: center;
	gap: var(--space-2);
}
.section-header__icon {
	display: flex;
	width: 24px;
	height: 24px;
	color: var(--color-accent);
	flex: none;
}
.section-header__icon svg {
	width: 100%;
	height: 100%;
	stroke: currentColor;
	fill: none;
	stroke-width: 1.8;
}
.section-header__desc {
	margin-top: var(--space-3);
	color: var(--color-ink-soft);
}

/* ボタン */
.button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--space-2);
	padding: var(--space-3) var(--space-6);
	border-radius: var(--radius-sm);
	text-decoration: none;
	font-size: var(--fs-base);
	font-weight: 700;
	border: 1px solid var(--color-ink);
	color: var(--color-ink);
	background: transparent;
	cursor: pointer;
	transition: background 0.2s var(--ease), color 0.2s var(--ease);
}
.button:hover {
	background: var(--color-ink);
	color: var(--color-paper);
}
.button--primary {
	background: var(--color-accent);
	border-color: var(--color-accent);
	color: var(--color-accent-ink);
}
.button--primary:hover {
	background: var(--color-accent-dark);
	border-color: var(--color-accent-dark);
	color: var(--color-accent-ink);
}
.button--on-dark {
	border-color: #fff;
	color: #fff;
}
.button--on-dark:hover {
	background: #fff;
	color: var(--color-accent);
}

/* タグ/バッジ: カテゴリ=塗り(アクセント)、地域=アウトライン(黒)で役割を分ける */
.badge {
	display: inline-flex;
	align-items: center;
	padding: 3px var(--space-2);
	font-size: var(--fs-xs);
	font-weight: 600;
}
.badge--category {
	color: var(--color-accent-ink);
	background: var(--color-accent);
}
.badge--region {
	color: var(--color-ink);
	background: transparent;
	border: 1px solid var(--color-line-strong);
}

/* 検索フォーム */
.store-search-form {
	display: flex;
	gap: var(--space-2);
}
.store-search-form__input {
	flex: 1;
	min-width: 0;
	padding: var(--space-3) var(--space-4);
	border: 1px solid var(--color-line-strong);
	border-radius: var(--radius-sm);
	font-size: var(--fs-base);
	background: var(--color-surface);
	color: var(--color-ink);
}
.store-search-form__input::placeholder {
	color: var(--color-ink-faint);
}
.store-search-form__submit {
	padding: var(--space-3) var(--space-5);
	border: 1px solid var(--color-accent);
	border-radius: var(--radius-sm);
	background: var(--color-accent);
	color: var(--color-accent-ink);
	font-weight: 700;
	cursor: pointer;
	transition: background 0.2s var(--ease);
}
.store-search-form__submit:hover {
	background: var(--color-accent-dark);
}

/* ---------------------------------------------------------------- header */
.site-header {
	position: sticky;
	top: 0;
	z-index: 40;
	background: var(--color-paper);
	border-bottom: 1px solid var(--color-line);
}
.site-header__inner {
	display: flex;
	align-items: center;
	gap: var(--space-5);
	padding-block: var(--space-4);
}
.site-branding__link {
	display: inline-flex;
	align-items: center;
	gap: var(--space-3);
	text-decoration: none;
	color: inherit;
}
.site-branding__logo {
	max-height: 40px;
	width: auto;
}
.site-branding__mark {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background: var(--color-accent-tint);
	color: var(--color-accent);
	flex: none;
}
.site-branding__mark svg {
	width: 22px;
	height: 22px;
	fill: currentColor;
}
.site-branding__text {
	display: flex;
	flex-direction: column;
	line-height: 1.25;
}
.site-branding__name {
	font-family: var(--font-display);
	font-weight: 800;
	font-size: var(--fs-lg);
	letter-spacing: 0.01em;
}
.site-branding__tagline {
	font-size: 11px;
	font-weight: 400;
	color: var(--color-ink-faint);
}
.nav-toggle,
.search-toggle {
	background: none;
	border: none;
	padding: var(--space-2);
	cursor: pointer;
	color: var(--color-ink);
}
.nav-toggle {
	display: none;
	border: 1px solid var(--color-line-strong);
	border-radius: var(--radius-sm);
}
.nav-toggle__bar,
.nav-toggle__bar::before,
.nav-toggle__bar::after {
	display: block;
	width: 20px;
	height: 2px;
	background: currentColor;
	position: relative;
}
.nav-toggle__bar::before { content: ""; position: absolute; top: -6px; }
.nav-toggle__bar::after { content: ""; position: absolute; top: 6px; }

.site-nav__list {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-5);
	list-style: none;
	margin: 0 auto 0 var(--space-6);
	padding: 0;
	font-size: var(--fs-sm);
}
.site-nav__list a {
	text-decoration: none;
	font-weight: 700;
	color: var(--color-ink-soft);
	transition: color 0.2s var(--ease);
}
.site-nav__list a:hover {
	color: var(--color-accent);
}
.site-nav__item--dropdown {
	position: relative;
}
.site-nav__dropdown-toggle {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	background: none;
	border: none;
	padding: 0;
	font-family: inherit;
	font-size: inherit;
	font-weight: 700;
	color: var(--color-ink-soft);
	cursor: pointer;
	transition: color 0.2s var(--ease);
}
.site-nav__dropdown-toggle:hover {
	color: var(--color-accent);
}
.site-nav__chevron {
	width: 14px;
	height: 14px;
	stroke: currentColor;
	fill: none;
	stroke-width: 2;
	transition: transform 0.2s var(--ease);
}
.site-nav__dropdown-toggle[aria-expanded="true"] .site-nav__chevron {
	transform: rotate(180deg);
}
.site-nav__dropdown {
	position: absolute;
	top: calc(100% + 14px);
	left: 0;
	min-width: 200px;
	background: var(--color-surface);
	border: 1px solid var(--color-line);
	border-radius: var(--radius);
	box-shadow: var(--shadow-card);
	padding: var(--space-2);
	z-index: 50;
}
.site-nav__dropdown[hidden] {
	display: none;
}
.site-nav__dropdown ul {
	list-style: none;
	margin: 0;
	padding: 0;
}
.site-nav__dropdown a {
	display: block;
	padding: var(--space-2) var(--space-3);
	border-radius: var(--radius-sm);
	font-weight: 600;
	font-size: var(--fs-sm);
	color: var(--color-ink);
}
.site-nav__dropdown a:hover {
	background: var(--color-surface-alt);
	color: var(--color-accent);
}
.search-toggle svg {
	width: 20px;
	height: 20px;
	display: block;
	stroke: currentColor;
	fill: none;
	stroke-width: 1.8;
}
.site-header__search {
	position: absolute;
	top: 100%;
	left: 0;
	right: 0;
	background: var(--color-surface);
	border-bottom: 1px solid var(--color-line);
	padding: var(--space-4) var(--space-5);
}
.site-header__search[hidden] {
	display: none;
}
.site-header__search .store-search-form {
	max-width: 480px;
	margin-inline: auto;
}

@media (max-width: 860px) {
	.nav-toggle { display: inline-flex; align-items: center; justify-content: center; }
	.site-nav { flex-basis: 100%; display: none; order: 3; margin-inline: 0; }
	.site-nav.is-open { display: block; }
	.site-nav__list { flex-direction: column; align-items: flex-start; gap: var(--space-3); padding-top: var(--space-3); border-top: 1px solid var(--color-line); margin: var(--space-3) 0 0; }
	.site-nav__dropdown { position: static; margin-top: var(--space-2); box-shadow: none; border: none; padding: 0 0 0 var(--space-3); }
}

/* ---------------------------------------------------------------- footer */
.site-footer {
	margin-top: var(--space-8);
	background: #F6FAF7;
	color: var(--color-ink);
	border-top: 1px solid var(--color-line);
}
.site-footer__inner {
	padding-block: var(--space-7);
}
.site-footer__grid {
	display: grid;
	grid-template-columns: minmax(0, 1.2fr) minmax(0, 2fr);
	gap: var(--space-7);
	margin-bottom: var(--space-6);
}
.site-footer__brand-link {
	display: inline-flex;
	align-items: center;
	gap: var(--space-3);
	text-decoration: none;
	margin-bottom: var(--space-3);
}
.site-footer__brand-logo {
	max-height: 40px;
	width: auto;
}
.site-footer__brand-mark {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	border-radius: 50%;
	background: var(--color-accent-tint);
	color: var(--color-accent);
	flex: none;
}
.site-footer__brand-mark svg {
	width: 20px;
	height: 20px;
	fill: currentColor;
}
.site-footer__brand-name {
	font-family: var(--font-display);
	font-weight: 800;
	font-size: var(--fs-xl);
	color: var(--color-accent);
}
.site-footer__desc {
	color: var(--color-ink-soft);
	font-size: var(--fs-sm);
	max-width: 32ch;
	margin: 0;
}
.site-footer__columns {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(140px, 200px));
	justify-content: start;
	gap: var(--space-5);
}
.site-footer__heading {
	font-size: var(--fs-2xs);
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--color-ink-faint);
	margin: 0 0 var(--space-3);
}
.site-footer__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: var(--space-2);
	font-size: var(--fs-sm);
}
.site-footer__list a {
	color: var(--color-ink-soft);
	text-decoration: none;
	transition: color 0.2s var(--ease);
}
.site-footer__list a:hover {
	color: var(--color-accent);
}
.site-footer__tagline {
	margin: 0 0 var(--space-4);
	font-size: var(--fs-md);
	font-weight: 700;
	color: var(--color-accent);
}
.site-footer__copyright {
	margin: 0;
	padding-top: var(--space-4);
	border-top: 1px solid var(--color-line);
	font-size: var(--fs-xs);
	color: var(--color-ink-faint);
}

@media (max-width: 700px) {
	.site-footer__grid {
		grid-template-columns: 1fr;
		gap: var(--space-6);
	}
}

/* ---------------------------------------------------------------- content shell */
.site-main {
	min-height: 40vh;
	padding-bottom: var(--space-8);
}
.site-main.container {
	padding-top: var(--space-2);
}
.archive-header__title {
	font-size: var(--fs-3xl);
}
.archive-header__description {
	margin-top: var(--space-3);
	color: var(--color-ink-soft);
}
.section {
	padding-block: var(--space-7);
}
.section--brand {
	background: var(--color-accent);
	color: #fff;
}
.section--brand .section-header__title {
	color: #fff;
}

/* breadcrumb */
.breadcrumb {
	margin: var(--space-5) 0 0;
	font-size: var(--fs-xs);
	color: var(--color-ink-faint);
}
.breadcrumb__list {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--space-1);
	list-style: none;
	margin: 0;
	padding: 0;
}
.breadcrumb__item a {
	color: var(--color-ink-faint);
	text-decoration: none;
}
.breadcrumb__item a:hover {
	color: var(--color-accent);
}
.breadcrumb__item:not(:last-child)::after {
	content: "/";
	margin-left: var(--space-2);
	color: var(--color-line-strong);
}

/* 汎用の記事一覧(service/faq/staff/blog等の共通フォールバック) */
.entry-card-list {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(260px, 320px));
	justify-content: start;
	gap: var(--space-6);
}
.entry-card {
	background: var(--color-surface);
	border: 1px solid var(--color-line);
}
.entry-card__title {
	font-size: var(--fs-md);
	margin: var(--space-3) var(--space-4) var(--space-1);
}
.entry-card__meta,
.entry-card__excerpt {
	margin: 0 var(--space-4) var(--space-4);
	color: var(--color-ink-soft);
	font-size: var(--fs-sm);
}
.entry-single__title,
.entry-page__title {
	font-size: var(--fs-3xl);
	margin-bottom: var(--space-4);
}
.not-found__title {
	font-size: var(--fs-2xl);
}

/* ================================================================== */
/* トップページ: HERO(完成デザイン画像そのものをKVとして使用)           */
/* PC/SPそれぞれの完成画像(kv-final-pc.png / kv-final-sp.png)を          */
/* ブレークポイントで切り替えて表示する。写真・装飾・コピーの配置は     */
/* すべて画像に含まれるため、CSSでは再現しない。検索フォームのみ、       */
/* 画像内の検索窓位置に実HTMLを透明重ねで配置する。                     */
/* 以下の.hero--split以降の旧KV実装(コラージュ/装飾)は、このKVでは       */
/* 一切使用しない(マークアップ側で出力していないため無害な未使用CSS)。   */
/* ================================================================== */
.hero--image-kv {
	position: relative;
	overflow: hidden;
	line-height: 0;
}
.hero__image-kv {
	position: relative;
	width: 100%;
}
.hero__kv-image {
	display: block;
	width: 100%;
	height: auto;
}
.hero__kv-image--sp {
	display: none;
}
/*
 * SP版KV画像内の「人気のキーワード」チップに重ねる透明リンク。
 * PC版はこのラウンドの対象外のため、PC幅では常に非表示(画像のまま)。
 */
.hero__kv-keyword {
	display: none;
}
.hero__kv-search {
	position: absolute;
	left: 3.8%;
	top: 62.1%;
	width: 41.9%;
	height: 8.2%;
	--kv-search-btn-w: 18.4%;
	--kv-search-gap: 1.75%;
}
.hero__kv-search .store-search-form {
	width: 100%;
	height: 100%;
	display: flex;
	align-items: stretch;
	gap: var(--kv-search-gap);
	max-width: none;
}
.hero__kv-search .store-search-form__input {
	flex: 1;
	min-width: 0;
	height: 100%;
	padding-block: 0;
	padding-inline-start: 9%;
	padding-inline-end: 2%;
	border: none;
	border-radius: 0;
	background: transparent;
	font-size: 1rem;
	line-height: normal;
	color: var(--color-ink);
}
.hero__kv-search .store-search-form__input::placeholder {
	color: transparent;
}
.hero__kv-search .store-search-form__submit {
	flex: none;
	width: var(--kv-search-btn-w);
	height: 100%;
	padding: 0;
	border: none;
	border-radius: 0;
	background: transparent;
	color: transparent;
	cursor: pointer;
}

@media (max-width: 760px) {
	.hero__kv-image--pc {
		display: none;
	}
	.hero__kv-image--sp {
		display: block;
	}
	.hero__kv-search {
		left: 5.11%;
		top: 70.83%;
		width: 89.91%;
		height: 8.01%;
		--kv-search-btn-w: 18.95%;
		--kv-search-gap: 2.77%;
	}
	.hero__kv-keyword {
		display: block;
		position: absolute;
		top: 83.7%;
		height: 5.64%;
		color: transparent;
		background: transparent;
		border: none;
		text-decoration: none;
		cursor: pointer;
	}
	.hero__kv-keyword--1 {
		left: 36.58%;
		width: 17.66%;
	}
	.hero__kv-keyword--2 {
		left: 56.34%;
		width: 17.66%;
	}
}

/* ================================================================== */
/* 旧HERO実装(未使用、画像KVでは呼び出されない。共通CSSではないため温存) */
/* トップページ: HERO(検索パネル + 業態コラージュ)                     */
/* 背景は白系。装飾はCSSのみのぼかし円+抽象的な地図風SVG(写真素材は使わない)。 */
/* ================================================================== */
.hero {
	padding-block: var(--space-8) var(--space-7);
	background: var(--color-paper);
}

/*
 * KV(ヒーロー、PC版)。1枚画像の引き伸ばしではなく、コピー・検索フォームはHTML/実テキストで組み、
 * 右側は個別の写真(kv_photos)を円形に切り抜いて斜めに配置する(添付カンプの構図を参考に独自実装)。
 * ロゴはヘッダーに既にあるため、KV側では重複表示しない。
 * 日本地図・ピン・破線ルート・背景の淡い円はすべて独自に描いたSVG/CSSの装飾(元画像のトレースではない)。
 * セクション自体は横幅いっぱいの背景を活かしつつ、内側のコンテンツ幅は1600pxに留めて
 * 個々の写真が過度に引き伸ばされないようにする。
 */
.hero--split {
	padding-block: 0;
	overflow: hidden;
	background: #FFFCF5;
}
.hero__logo {
	max-height: 44px;
	width: auto;
	margin-bottom: var(--space-4);
}
.hero__tagline {
	font-size: var(--fs-sm);
	font-weight: 700;
	color: var(--color-accent);
	margin: 0 0 var(--space-2);
}
.hero__panel {
	position: relative;
	padding-block: var(--space-6);
}

.hero__deco-blob {
	position: absolute;
	border-radius: 50%;
	pointer-events: none;
	z-index: 0;
}
.hero__deco-blob--green { width: 90px; height: 90px; top: 8%; right: 10%; background: #C1D5A6; opacity: 0.85; }
.hero__deco-blob--yellow { width: 54px; height: 54px; top: 34%; right: 16%; background: #FEDA94; opacity: 0.9; }
.hero__deco-dots {
	position: absolute;
	top: 4%;
	right: 4%;
	width: 120px;
	height: 120px;
	background-image: radial-gradient(currentColor 1px, transparent 1.4px);
	background-size: 9px 9px;
	color: var(--color-line);
	opacity: 0.6;
	pointer-events: none;
	z-index: 0;
}

.hero__inner {
	position: relative;
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--space-5);
	align-items: stretch;
	max-width: 1600px;
	margin-inline: auto;
	padding-left: var(--space-6);
	padding-right: 0;
}
.hero__eyebrow {
	color: var(--color-accent);
	margin-bottom: var(--space-4);
}
.hero__title {
	font-size: var(--fs-3xl);
	line-height: 1.3;
	text-wrap: balance;
	margin-bottom: var(--space-3);
}
.hero__subtitle {
	font-size: var(--fs-base);
	line-height: 1.8;
	color: var(--color-ink-soft);
	margin: 0 0 var(--space-6);
}
.hero .store-search-form {
	max-width: 560px;
}
.hero .store-search-form__input {
	padding-block: var(--space-3);
	padding-inline-start: var(--space-5);
	border-radius: var(--radius-pill);
}
.hero .store-search-form__submit {
	border-radius: var(--radius-pill);
	padding-inline: var(--space-6);
}

.hero__keywords {
	margin-top: var(--space-4);
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--space-3);
}
.hero__keywords-label {
	font-size: var(--fs-xs);
	font-weight: 700;
	color: var(--color-ink-faint);
}
.hero__keywords-list {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-2);
}
.hero__keyword-chip {
	display: inline-flex;
	align-items: center;
	padding: 5px var(--space-4);
	border-radius: var(--radius-pill);
	background: var(--color-surface);
	border: 1px solid var(--color-line);
	color: var(--color-ink-soft);
	font-size: var(--fs-xs);
	font-weight: 600;
	text-decoration: none;
	transition: border-color 0.2s var(--ease), color 0.2s var(--ease);
}
.hero__keyword-chip:hover {
	border-color: var(--color-accent);
	color: var(--color-accent);
}

/* 業態コラージュ: 2×2グリッド基準。0〜4枚のどの枚数でも破綻しないレイアウト */
.hero__collage {
	position: relative;
	z-index: 1;
	display: grid;
	grid-template-columns: 1.15fr 1fr;
	grid-template-rows: repeat(2, minmax(110px, 1fr));
	gap: var(--space-4);
	max-width: 460px;
	margin-inline: auto;
}
.hero__collage-item {
	position: relative;
	border-radius: var(--radius-xl);
	overflow: hidden;
	background: var(--color-surface-alt);
	box-shadow: var(--shadow-card);
}
.hero__collage-item img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.hero__collage-item--1 { grid-column: 1; grid-row: 1; }
.hero__collage-item--2 { grid-column: 2; grid-row: 1; }
.hero__collage-item--3 { grid-column: 1; grid-row: 2; }
.hero__collage-item--4 { grid-column: 2; grid-row: 2; }

/* 1枚のみ: 全面 */
.hero__collage:has(> :nth-child(1):last-child) {
	grid-template-columns: 1fr;
	grid-template-rows: 1fr;
}
.hero__collage:has(> :nth-child(1):last-child) .hero__collage-item--1 {
	grid-column: 1; grid-row: 1;
}
/* 2枚: 上下均等(左右いっぱい) */
.hero__collage:has(> :nth-child(2):last-child) {
	grid-template-columns: 1fr;
	grid-template-rows: 1fr 1fr;
}
.hero__collage:has(> :nth-child(2):last-child) .hero__collage-item--1 { grid-column: 1; grid-row: 1; }
.hero__collage:has(> :nth-child(2):last-child) .hero__collage-item--2 { grid-column: 1; grid-row: 2; }
/* 3枚: 上段2枚+下段1枚(全幅) */
.hero__collage:has(> :nth-child(3):last-child) .hero__collage-item--3 {
	grid-column: 1 / 3;
	grid-row: 2;
}

.hero__collage-placeholder {
	grid-column: 1 / -1;
	grid-row: 1 / 3;
	border-radius: var(--radius-xl);
	border: 1px solid var(--color-line);
	background: var(--color-surface-alt);
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--color-accent);
	min-height: 240px;
}
.hero__collage-placeholder svg {
	width: 64px;
	height: 64px;
	stroke: currentColor;
	fill: none;
	stroke-width: 1.2;
	opacity: 0.6;
}

/*
 * 5枚・斜めカットの写真コラージュ(PC版KV右側)。添付カンプから実測した比率をそのまま再現する。
 * 上段3列(飲食/美容/医療)+下段2列(健康/その他、下段左が上段2列分の幅を占有)、
 * 外周左端のみ添付カンプ実測の角度で斜めにクリップし、右端は画面端いっぱいまでベタ塗り(フルブリード)。
 * 内部の写真同士の境界は白い1本線(gap)のみで、斜めにはしない(添付カンプの実際の構成に合わせる)。
 */
.hero__collage2 {
	position: relative;
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	grid-template-rows: 58% 42%;
	gap: 6px;
	background: #fff;
	clip-path: polygon(15% 0%, 100% 0%, 100% 100%, 0% 100%);
	/*
	 * height:100%を使うと、外側グリッドの行の高さが不確定な状態で
	 * 内側グリッドの%行が写真(img)の内在アスペクト比に基づいて再計算され、
	 * ビューポート幅によってKVの高さが変動してしまう(1280pxと1440pxで不一致)。
	 * 固定pxにして、写真の内在サイズやビューポート幅から完全に独立させる。
	 */
	height: 400px;
}
.hero__collage2-item {
	position: relative;
	overflow: hidden;
	background: var(--color-surface-alt);
}
.hero__collage2-item img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}
.hero__collage2-item--1 { grid-column: 1; grid-row: 1; }
.hero__collage2-item--2 { grid-column: 2; grid-row: 1; }
.hero__collage2-item--3 { grid-column: 3; grid-row: 1; }
.hero__collage2-item--4 { grid-column: 1 / 3; grid-row: 2; }
.hero__collage2-item--5 { grid-column: 3; grid-row: 2; }
/* 被写体(人物の顔・料理・部屋全体)が枠内で切れないよう、写真ごとに表示位置を調整する */
.hero__collage2-item--1 img { object-position: 50% 40%; }
.hero__collage2-item--2 img { object-position: 50% 30%; }
.hero__collage2-item--3 img { object-position: 55% 25%; }
.hero__collage2-item--4 img { object-position: 45% 20%; }
.hero__collage2-item--5 img { object-position: 50% 50%; }

@media (min-width: 900px) {
	.hero__inner {
		grid-template-columns: minmax(0, 540px) 1fr;
	}
}

/*
 * KV(SP専用、〜760px)。PC版の.hero__collage2(5枚斜めカットの写真コラージュ)は完全に非表示にし、
 * 代わりに.hero__mobile-top(コピー+5枚写真を横並び)と.hero__mobile-deco(パステル装飾)を表示する。
 * 写真はPC版と同じ5枚(kv2-collage-*)を再利用し、実店舗データ(kv_photos)とは無関係の固定ビジュアル素材のまま扱う。
 * PC側のクラス・スタイルには一切触れていない(表示/非表示の出し分けのみ)。
 */
.hero__mobile-photos,
.hero__mobile-deco {
	display: none;
}

@media (max-width: 760px) {
	.hero--split {
		padding-block: var(--space-4) var(--space-3);
	}
	.hero__inner {
		display: block;
		padding-inline: var(--space-5);
	}
	.hero__panel {
		position: relative;
		padding-block: 0;
	}
	.hero__collage2 {
		display: none;
	}

	.hero__mobile-top {
		display: grid;
		grid-template-columns: 45% 1fr;
		column-gap: var(--space-3);
		align-items: start;
	}
	.hero__mobile-text {
		min-width: 0;
	}
	.hero__title {
		font-size: var(--fs-xl);
		line-height: 1.3;
	}
	.hero__subtitle {
		display: block;
		font-size: var(--fs-xs);
		line-height: 1.55;
		margin: var(--space-1) 0 0;
	}

	/*
	 * SP版の写真コラージュは、5枚それぞれをコンテナ全体にposition:absoluteで重ね、
	 * 写真ごとに異なるclip-path(台形)で斜めの断片を切り出す独自実装。
	 * CSS Gridの均等セルは使わない(添付カンプは写真同士の境界そのものが斜めのため)。
	 * 白い境界線はclip-pathの座標に1.2ptぶんの余白を持たせることで再現する。
	 * PC版(.hero__collage2 / .hero__collage2-item)とはクラス名から完全に分離しており、
	 * PC側の画像・CSSには一切触れていない。
	 */
	.hero__mobile-photos {
		display: block;
		position: relative;
		aspect-ratio: 1 / 1;
		background: #fff;
		z-index: 2;
	}
	.hero__mobile-photo-item {
		position: absolute;
		overflow: hidden;
	}
	.hero__mobile-photo-item img {
		display: block;
		width: 100%;
		height: 100%;
		object-fit: cover;
	}
	/* 上段: パスタ / 美容室 / 医師(高さ0〜57%) */
	.hero__mobile-photo-item--1 {
		left: 0; top: 0; width: 36%; height: 57%;
		clip-path: polygon(0% 0%, 100% 0%, 77% 100%, 0% 100%);
	}
	.hero__mobile-photo-item--2 {
		left: 30%; top: 0; width: 39%; height: 57%;
		clip-path: polygon(21% 0%, 100% 0%, 79% 100%, 0% 100%);
	}
	.hero__mobile-photo-item--3 {
		left: 63%; top: 0; width: 37%; height: 57%;
		clip-path: polygon(22% 0%, 100% 0%, 100% 100%, 0% 100%);
	}
	/*
	 * 下段: ジム(小さめ) / リビング(大きめ、高さ59〜100%)。
	 * 添付カンプに合わせ、ジムを縮小しリビングを拡大した面積配分に修正。
	 */
	.hero__mobile-photo-item--4 {
		left: 0; top: 59%; width: 36%; height: 41%;
		clip-path: polygon(0% 0%, 94% 0%, 83% 100%, 0% 100%);
	}
	.hero__mobile-photo-item--5 {
		left: 32%; top: 59%; width: 68%; height: 41%;
		clip-path: polygon(3% 0%, 100% 0%, 100% 100%, 0% 100%);
	}
	.hero__mobile-photo-item--1 img { object-position: 50% 40%; }
	.hero__mobile-photo-item--2 img { object-position: 50% 35%; }
	.hero__mobile-photo-item--3 img { object-position: 70% 20%; }
	.hero__mobile-photo-item--4 img { object-position: 35% 0%; }
	.hero__mobile-photo-item--5 img { object-position: 50% 50%; }

	.hero__mobile-deco {
		display: block;
		position: relative;
		z-index: 1;
		height: 46px;
		margin-top: var(--space-2);
	}
	.hero__mobile-deco-blob {
		position: absolute;
		border-radius: 50%;
		pointer-events: none;
	}
	.hero__mobile-deco-blob--green { width: 40px; height: 40px; left: 0; top: 4px; background: #C1D5A6; opacity: 0.85; }
	.hero__mobile-deco-blob--yellow { width: 30px; height: 30px; left: 26px; top: 18px; background: #FEDA94; opacity: 0.9; }
	.hero__mobile-deco-dots {
		position: absolute;
		right: 8px;
		top: 0;
		width: 58px;
		height: 40px;
		background-image: radial-gradient(currentColor 1px, transparent 1.4px);
		background-size: 8px 8px;
		color: var(--color-line);
		opacity: 0.6;
	}

	.hero .store-search-form,
	.hero__keywords {
		max-width: none;
	}
	.hero .store-search-form {
		margin-top: var(--space-3);
	}
	.hero__keywords {
		margin-top: var(--space-3);
	}
}

/* ================================================================== */
/* ジャンルグリッド: 円アイコン+名称(未設定でも成立するシンプルな形)     */
/* ================================================================== */
.category-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--space-4) var(--space-3);
	list-style: none;
	margin: 0 0 var(--space-6);
	padding: 0;
}
.category-tile a {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: var(--space-2);
	height: 100%;
	text-align: center;
	color: var(--color-ink);
	text-decoration: none;
}
.category-tile__icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	overflow: hidden;
	background: var(--cat-bg, var(--color-surface-alt));
	color: var(--cat-fg, var(--color-ink-faint));
	transition: background 0.2s var(--ease);
}
.category-tile__icon img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	object-position: center;
}
.category-tile a:hover .category-tile__icon {
	background: var(--cat-fg, var(--color-accent));
	color: #fff;
}
.category-tile__name {
	font-size: var(--fs-sm);
	font-weight: 700;
	line-height: 1.4;
}

@media (min-width: 640px) {
	.category-grid {
		grid-template-columns: repeat(5, 1fr);
	}
}
@media (min-width: 960px) {
	.category-grid {
		grid-template-columns: repeat(6, 1fr);
	}
}

/* ================================================================== */
/* 大分類ブロック(トップページ): 色付き円アイコン+名称+ジャンル+新着店舗 */
/* ================================================================== */
.category-block--c1 { --cat-bg: var(--cat1-bg); --cat-fg: var(--cat1-fg); --cat-solid: var(--cat1-solid); }
.category-block--c2 { --cat-bg: var(--cat2-bg); --cat-fg: var(--cat2-fg); --cat-solid: var(--cat2-solid); }
.category-block--c3 { --cat-bg: var(--cat3-bg); --cat-fg: var(--cat3-fg); --cat-solid: var(--cat3-solid); }
.category-block--c4 { --cat-bg: var(--cat4-bg); --cat-fg: var(--cat4-fg); --cat-solid: var(--cat4-solid); }
.category-block--c5 { --cat-bg: var(--cat5-bg); --cat-fg: var(--cat5-fg); --cat-solid: var(--cat5-solid); }

/* 5大分類を1つの帯にまとめて横並びで見せる行(カンプ準拠、背景の色分けはしない) */
.category-picker {
	padding-block: var(--space-8) var(--space-7);
	border-top: 1px solid var(--color-line);
}
/*
 * flex-wrap+justify-content:centerで組む(CSS Gridではない)。Gridだと余った最終行の
 * カードが常に左詰めになってしまい、1280〜1599px幅での「下段2列を中央寄せ」を
 * 素直に表現できないため。align-items:stretchで同じ行にいるカード同士の高さを揃える。
 */
.category-row {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: stretch;
	gap: var(--space-6) var(--space-4);
}
/* 900〜1279px(および760px超の下限側): 2列+2列+1列 */
.category-row > .category-col {
	flex: 0 1 calc((100% - var(--space-4)) / 2);
	max-width: calc((100% - var(--space-4)) / 2);
}
/* 1280〜1599px: 3列+2列(下段2列は上段と同じカード幅のまま中央寄せ) */
@media (min-width: 1280px) {
	.category-row > .category-col {
		flex-basis: calc((100% - 2 * var(--space-4)) / 3);
		max-width: calc((100% - 2 * var(--space-4)) / 3);
	}
}
/* 1600px以上: 5列横並び */
@media (min-width: 1600px) {
	.category-row > .category-col {
		flex-basis: calc((100% - 4 * var(--space-4)) / 5);
		max-width: calc((100% - 4 * var(--space-4)) / 5);
	}
}
.category-col {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
}
.category-col__link {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-decoration: none;
	color: inherit;
}
.category-col__icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 56px;
	height: 56px;
	border-radius: 50%;
	overflow: hidden;
	background: var(--cat-bg, var(--color-surface-alt));
	color: var(--cat-fg, var(--color-accent));
	flex: none;
	margin-bottom: var(--space-3);
	transition: background 0.2s var(--ease), transform 0.2s var(--ease);
}
.category-col__link:hover .category-col__icon,
.category-col__link:active .category-col__icon {
	background: var(--cat-fg, var(--color-accent));
	color: #fff;
	transform: translateY(-2px);
}
.category-col__icon img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	object-position: center;
}
.category-col__icon svg {
	width: 26px;
	height: 26px;
	stroke: currentColor;
	fill: none;
	stroke-width: 1.6;
}
.category-col__name {
	font-size: var(--fs-lg);
	font-weight: 800;
}
.category-col__sub {
	font-size: var(--fs-2xs);
	font-weight: 600;
	color: var(--color-ink-faint);
	margin: 2px 0 var(--space-4);
}
/* 列内のジャンルグリッドは、通常のfinder用より一回り小さいコンパクト表示にする */
.category-col .category-grid {
	width: 100%;
	grid-template-columns: repeat(auto-fit, minmax(48px, 1fr));
	gap: var(--space-3) var(--space-1);
	margin-bottom: var(--space-4);
}
/*
 * 1行の名称でも2行分の高さを確保し、隣接タイルと縦位置が揃うようにする
 * (文字を縮めて1行に収めない/3行目は出さない)。
 */
.category-col .category-tile__name {
	font-size: 10.5px;
	height: calc(1.4em * 2);
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}
/* 「すべて見る」は各カテゴリカードの下部に揃える(高さが違うカード同士でも) */
.category-col .category-block__all {
	margin-top: auto;
}

/*
 * PC(≥761px)/SP(≤760px)の出し分け。
 * PCは5大分類を横並びの行+新着店舗の別セクションという既存構成のまま(.is-desktop-only)。
 * SPは大分類ごとに「見出し→ジャンル→新着店舗」を1つの縦セクションにまとめた別マークアップ
 * (.is-mobile-only)に完全に切り替える。横スクロールのアイコンストリップは廃止した。
 */
.is-mobile-only {
	display: none;
}
@media (max-width: 760px) {
	.is-desktop-only {
		display: none;
	}
	.is-mobile-only {
		display: block;
	}
}

/* SP専用: 大分類ごとの縦セクション見出し(アイコン+名称、category-colと同じ見た目だが横並び行の外で単独使用) */
.category-mobile-section {
	padding-block: var(--space-7);
	border-top: 1px solid var(--color-line);
}
.category-mobile-section__header {
	display: flex;
	align-items: center;
	gap: var(--space-3);
	text-decoration: none;
	color: inherit;
	margin-bottom: var(--space-5);
}
.category-mobile-section__icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 56px;
	height: 56px;
	border-radius: 50%;
	overflow: hidden;
	background: var(--cat-bg, var(--color-surface-alt));
	color: var(--cat-fg, var(--color-accent));
	flex: none;
}
.category-mobile-section__icon img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	object-position: center;
}
.category-mobile-section__icon svg {
	width: 26px;
	height: 26px;
	stroke: currentColor;
	fill: none;
	stroke-width: 1.6;
}
.category-mobile-section__heading {
	display: flex;
	flex-direction: column;
}
.category-mobile-section__name {
	font-size: var(--fs-lg);
	font-weight: 800;
}
.category-mobile-section__sub {
	font-size: var(--fs-2xs);
	font-weight: 600;
	color: var(--color-ink-faint);
	margin-top: 2px;
}
.category-mobile-section .category-block__new {
	margin-top: var(--space-6);
	padding-top: var(--space-6);
	border-top: 1px solid var(--color-line);
}

.category-block__all {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	margin-top: var(--space-4);
	padding: 7px var(--space-5);
	border-radius: var(--radius-pill);
	border: 1px solid var(--cat-fg, var(--color-accent));
	color: var(--cat-fg, var(--color-accent));
	background: var(--color-surface);
	font-size: var(--fs-xs);
	font-weight: 700;
	text-decoration: none;
	transition: background 0.2s var(--ease), color 0.2s var(--ease);
}
.category-block__all:hover {
	background: var(--cat-fg, var(--color-accent));
	color: #fff;
}

/* 大分類ブロック(トップページ): ジャンルグリッドの下に、その大分類の新着店舗を続ける */
.category-new {
	border-top: 1px solid var(--color-line);
}
.category-block__new-title {
	font-size: var(--fs-md);
	margin-bottom: var(--space-4);
}
.category-block__more {
	display: inline-block;
	margin-top: var(--space-5);
	font-size: var(--fs-sm);
	font-weight: 700;
	color: var(--cat-fg, var(--color-accent));
	text-decoration: none;
}
.category-block__more:hover {
	text-decoration: underline;
}

/* TOPの新着店舗カードのみ: 角丸+影+カテゴリバッジの配色を大分類の色に(CSS変数の継承のみで実現、他ページのstore-cardには影響しない) */
.store-card-grid--feature .store-card {
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow-card);
	overflow: hidden;
}
.store-card-grid--feature .store-card__body {
	padding: var(--space-4);
}
.store-card-grid--feature .badge--category {
	background: var(--cat-solid, var(--color-accent));
	border-radius: var(--radius-pill);
}

/* ================================================================== */
/* エリア: 文字中心の軽量ナビ(カテゴリとは明確に見た目を変える)         */
/* ================================================================== */
.area-nav {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
	gap: var(--space-6) var(--space-7);
}
.area-group {
	border-left: 2px solid var(--color-accent);
	padding-left: var(--space-4);
}
.area-group__en {
	display: block;
	color: var(--color-ink-faint);
	margin-bottom: var(--space-1);
}
.area-group__name {
	font-family: var(--font-display);
	font-size: var(--fs-xl);
	font-weight: 700;
	text-decoration: none;
	color: var(--color-ink);
}
.area-group__name:hover {
	color: var(--color-accent);
}
.area-group__children {
	list-style: none;
	margin: var(--space-3) 0 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-1) 0;
	font-size: var(--fs-sm);
	color: var(--color-ink-soft);
}
.area-group__children a {
	text-decoration: none;
	color: var(--color-ink-soft);
}
.area-group__children a:hover {
	color: var(--color-accent);
}
.area-group__children li:not(:last-child)::after {
	content: "/";
	margin: 0 var(--space-2);
	color: var(--color-line-strong);
}

.finder-group {
	margin-bottom: var(--space-6);
}
.finder-group:last-child {
	margin-bottom: 0;
}
.finder-group__label {
	font-size: var(--fs-sm);
	font-weight: 700;
	color: var(--color-ink-soft);
	margin: 0 0 var(--space-4);
}

.area-teaser {
	border-top: 1px solid var(--color-line);
}

.all-stores-cta {
	padding-block: var(--space-7);
}
.all-stores-cta__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: var(--space-5);
}
.all-stores-cta__text {
	display: flex;
	align-items: center;
	gap: var(--space-4);
}
.all-stores-cta__icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.12);
	color: #fff;
	flex: none;
}
.all-stores-cta__icon svg {
	width: 24px;
	height: 24px;
	stroke: currentColor;
	fill: none;
	stroke-width: 1.6;
}
.all-stores-cta__copy {
	display: flex;
	flex-direction: column;
}
.all-stores-cta__title {
	font-size: var(--fs-lg);
	font-weight: 800;
	color: #fff;
}
.all-stores-cta__desc {
	font-size: var(--fs-sm);
	color: #fff;
	opacity: 0.8;
	margin-top: 2px;
}
.all-stores-cta .button {
	border-radius: var(--radius-pill);
	padding-inline: var(--space-7);
	flex: none;
}

/* ================================================================== */
/* エリアカード(トップページ専用、地方レベルのみのシンプルなピル)       */
/* ================================================================== */
.area-cards {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-3);
	list-style: none;
	margin: 0;
	padding: 0;
}
.area-cards__item a {
	display: flex;
	align-items: center;
	gap: var(--space-2);
	padding: var(--space-3) var(--space-5);
	background: var(--color-surface);
	border: 1px solid var(--color-line);
	border-radius: var(--radius-pill);
	color: var(--color-ink);
	text-decoration: none;
	font-weight: 700;
	font-size: var(--fs-sm);
	transition: border-color 0.2s var(--ease), background 0.2s var(--ease);
}
.area-cards__item a:hover {
	border-color: var(--color-accent);
	background: var(--color-accent-tint);
}
.area-cards__icon {
	display: flex;
	width: 20px;
	height: 20px;
	color: var(--color-accent);
	flex: none;
}
.area-cards__icon svg {
	width: 100%;
	height: 100%;
	stroke: currentColor;
	fill: none;
	stroke-width: 1.8;
}

/* ================================================================== */
/* 店舗カード                                                          */
/* ================================================================== */
.store-card-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(260px, 320px));
	justify-content: start;
	gap: var(--space-6);
}
@media (min-width: 760px) {
	.store-card-grid {
		grid-template-columns: repeat(3, minmax(0, 320px));
	}
	.store-card-grid:has(> :nth-child(1):last-child) {
		grid-template-columns: minmax(0, 320px);
	}
	.store-card-grid:has(> :nth-child(2):last-child) {
		grid-template-columns: repeat(2, minmax(0, 320px));
	}
}
.store-card-grid--feature {
	gap: var(--space-7) var(--space-6);
}

/* Pick Up: 前後のセクションとの区切り線(既存のcategory-new/area-teaserと同じ慣習) */
.pickup-block {
	border-top: 1px solid var(--color-line);
}

/*
 * Pick Up(SPのみ): カード自体のデザイン/比率は一切変更せず、外側コンテナだけを
 * 横スワイプレールにする。次カードの一部が見えるよう flex-basis を100%未満にする。
 */
@media (max-width: 760px) {
	.pickup-rail {
		display: flex;
		flex-wrap: nowrap;
		overflow-x: auto;
		scroll-snap-type: x mandatory;
		-webkit-overflow-scrolling: touch;
		scrollbar-width: none;
	}
	.pickup-rail::-webkit-scrollbar {
		display: none;
	}
	.pickup-rail .store-card {
		flex: 0 0 80%;
		scroll-snap-align: start;
	}
}

/*
 * Pick Up(PCのみ): 最大4件を必ず1段4列で見せる。既存の.store-card-grid(auto-fit)は
 * 3+2に折り返してしまうため、Pick Up配下だけ4列固定に上書きする(archive-store等の
 * 汎用グリッドには影響しない)。カード自体の内部デザインは一切変更しない。
 */
@media (min-width: 761px) {
	.pickup-block .pickup-rail {
		display: grid;
		grid-template-columns: repeat(4, minmax(0, 1fr));
		gap: var(--space-6);
	}
}

.store-card {
	position: relative;
	background: var(--color-surface);
	min-width: 0;
}
.store-card__link {
	display: flex;
	flex-direction: column;
	height: 100%;
	color: inherit;
	text-decoration: none;
}
.store-card__thumb {
	position: relative;
	display: block;
	aspect-ratio: 3 / 2;
	overflow: hidden;
	background: var(--color-surface-alt);
}
.store-card-grid--feature .store-card__thumb {
	aspect-ratio: 4 / 3;
}
.store-card__thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.5s var(--ease);
}
.store-card:hover .store-card__thumb img {
	transform: scale(1.04);
}
.store-card__view {
	position: absolute;
	right: var(--space-3);
	bottom: var(--space-3);
	display: flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	background: var(--color-surface);
	color: var(--color-ink);
	opacity: 0;
	transform: translateX(6px);
	transition: opacity 0.28s var(--ease), transform 0.28s var(--ease);
}
.store-card:hover .store-card__view {
	opacity: 1;
	transform: translateX(0);
}
.store-card__body {
	display: flex;
	flex-direction: column;
	gap: var(--space-2);
	padding: var(--space-4) 0 0;
}
.store-card__tags {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-1);
}
.store-card__name {
	font-family: var(--font-display);
	font-size: var(--fs-lg);
	font-weight: 700;
	line-height: 1.4;
}
.store-card-grid--feature .store-card__name {
	font-size: 1.375rem;
}
.store-card__meta {
	display: flex;
	flex-direction: column;
	gap: 1px;
}
.store-card__address,
.store-card__hours {
	font-size: var(--fs-xs);
	color: var(--color-ink-faint);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	min-width: 0;
}

/* ================================================================== */
/* 店舗一覧ページ                                                      */
/* ================================================================== */
.page-hero {
	padding-block: var(--space-7) var(--space-6);
	border-bottom: 1px solid var(--color-line);
	margin-bottom: var(--space-7);
}
.page-hero__eyebrow {
	color: var(--color-accent);
	margin-bottom: var(--space-3);
}
.page-hero__title {
	font-size: var(--fs-3xl);
}
.finder-block {
	padding-bottom: var(--space-7);
	margin-bottom: var(--space-7);
	border-bottom: 1px solid var(--color-line);
}
.finder-block__title {
	font-size: var(--fs-lg);
	margin-bottom: var(--space-5);
}
.finder-block .store-search-form {
	max-width: 480px;
	margin-bottom: var(--space-6);
}
.store-list-block__title {
	display: flex;
	align-items: baseline;
	gap: var(--space-3);
	font-size: var(--fs-xl);
	margin-bottom: var(--space-6);
}
.store-list-block__count {
	font-family: var(--font-body);
	font-size: var(--fs-sm);
	color: var(--color-ink-faint);
	letter-spacing: 0.08em;
}

/* ================================================================== */
/* 店舗詳細ページ                                                      */
/* ================================================================== */
.store-hero {
	padding-block: var(--space-6) var(--space-7);
}
.store-hero__grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--space-6);
	align-items: start;
}
.store-hero__media {
	overflow: hidden;
	background: var(--color-surface-alt);
	aspect-ratio: 4 / 3;
}
.store-hero__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.store-hero__body {
	display: flex;
	flex-direction: column;
}
.store-hero__tags {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-1);
	margin-bottom: var(--space-3);
}
.store-hero__title {
	font-size: var(--fs-3xl);
	margin-bottom: var(--space-5);
}
.store-basic-info {
	list-style: none;
	margin: 0;
	padding-top: var(--space-4);
	border-top: 1px solid var(--color-line);
	display: grid;
	gap: var(--space-3);
}
.store-basic-info__item {
	display: flex;
	gap: var(--space-3);
	align-items: baseline;
}
.store-basic-info__label {
	flex: 0 0 5.5em;
	font-weight: 700;
	color: var(--color-ink-faint);
	font-size: var(--fs-xs);
	letter-spacing: 0.04em;
}
.store-basic-info__value a {
	color: var(--color-ink);
	text-decoration: underline;
	text-decoration-color: var(--color-line-strong);
	text-underline-offset: 3px;
}
.store-basic-info__detail a {
	color: var(--color-accent);
	font-weight: 700;
	text-decoration: none;
}
.store-basic-info__detail a:hover {
	text-decoration: underline;
}

@media (min-width: 900px) {
	.store-hero__grid {
		grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
	}
	.store-hero__grid:has(.store-hero__body:only-child) {
		grid-template-columns: 1fr;
		max-width: var(--reading-width);
	}
	.store-hero__media {
		aspect-ratio: auto;
		height: 100%;
		min-height: 460px;
	}
}

.store-section {
	padding-block: var(--space-8);
	border-top: 1px solid var(--color-line);
}
.store-description {
	max-width: var(--reading-width);
	font-size: var(--fs-md);
	line-height: 1.9;
	color: var(--color-ink);
}

/*
 * 店舗紹介の見出し(store_intro_heading)。
 * 「店舗紹介記事のH2」として最優先で見せる。ABOVEのsection-headerより大きく、
 * GBP URLがある場合のみリンクになるが、青文字にもボタンにも見せない。
 */
.store-intro-heading {
	max-width: var(--reading-width);
	font-size: clamp(1.25rem, 1rem + 1vw, 1.75rem);
	line-height: 1.5;
	margin: 0 0 var(--space-6);
	color: var(--color-ink);
}
.store-intro-heading a {
	display: inline;
	color: var(--color-ink);
	text-decoration: none;
	background-image: linear-gradient(var(--color-accent), var(--color-accent));
	background-repeat: no-repeat;
	background-position: 0 100%;
	background-size: 0% 2px;
	transition: background-size 0.3s var(--ease), color 0.3s var(--ease);
}
.store-intro-heading a:hover {
	color: var(--color-accent-dark);
	background-size: 100% 2px;
}

/* 写真2枚以上: 雑誌風に1枚を大きく、残りを小さく */
.store-photos {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	grid-auto-rows: 130px;
	gap: var(--space-3);
	list-style: none;
	margin: 0;
	padding: 0;
}
.store-photos li {
	overflow: hidden;
}
.store-photos li:first-child {
	grid-column: span 2;
	grid-row: span 2;
}
.store-photos img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.store-access__address {
	font-size: var(--fs-md);
	margin-bottom: var(--space-5);
}
.store-map {
	width: 100%;
	aspect-ratio: 5 / 2;
	max-height: 420px;
	min-height: 280px;
	overflow: hidden;
	border: 1px solid var(--color-line);
}
.store-map iframe {
	display: block;
	width: 100%;
	height: 100%;
	border: 0;
}

/* ---------------------------------------------------------------- responsive */
@media (max-width: 600px) {
	.store-card-grid,
	.entry-card-list {
		grid-template-columns: 1fr;
	}
	.category-grid {
		grid-template-columns: repeat(2, 1fr);
	}
	.store-basic-info__item {
		flex-direction: column;
		gap: 2px;
	}
	.store-basic-info__label {
		flex-basis: auto;
	}
	.store-photos {
		grid-auto-rows: 100px;
	}
	.store-map {
		aspect-ratio: 4 / 3;
		max-height: none;
	}
}