@charset "UTF-8";
/*
 * 下層ページ（トップ以外の全ページ）
 *
 * ブロック部品（parts/blocks/）の見た目をここに集約する。
 * Figma: PC-イベント / PC-観光 / PC-歴史 / PC-スポーツ / PC-都市と自然 /
 *        各地区紹介 / PC-ハイキング / PC-ミウルのおうち ほか。
 *
 * **幅・高さ・座標は Figma から写していない。** 取ったのは構成・色・文字サイズ・
 * 余白の程度だけで、寸法は CSS のレイアウトに任せている（CLAUDE.md の方針）。
 * 余白は --space-* から選ぶこと。生の px を書かない。
 */

/* ============================================================
 * ページ全体の骨格
 * ========================================================== */

/*
 * 下層はトップのような帯を持たない。背景はごく薄い緑のグラデーションで、
 * その上に Figma と同じ飾り（下の .page-deco）を薄く敷いて、白いカードを「地」に馴染ませる。
 */
body.midonavi:not(.home) .site-main {
	/*
	 * 終わりの色は下の body と同じ不透明色にする。半透明（rgb(202 238 171 / 25%)）のままだと
	 * body の地色に重なって本文の範囲だけ一段濃くなり、波の手前に境目が出る。
	 */
	background: linear-gradient(180deg, #f7f8ef 0%, #f2fbea 100%);
}

/*
 * ⚠️ フッターの波（上が透明の PNG）の山と山のあいだには body の地色が透ける。
 * 白のままだと、本文の薄緑が波の手前でスパッと切れて白い帯が挟まり、
 * 波だけが背景から浮いて見える。グラデーションの終わりの色（白に 25% を重ねた値）で受ける。
 */
body.midonavi:not(.home) {
	background: #f2fbea;
}

/*
 * 背景の飾り（parts/page/deco.php）。Figma の下層アートボードと同じ素材・同じ散らし方。
 * .site-main がスタッキングコンテキストを作っているので、負の z-index で本文の後ろに入る。
 * 縦位置はページの長さに対する割合（--p）。横位置は midonavi_deco_pos() の --x / --r。
 */
.page-deco {
	position: absolute;

	/*
	 * 下だけフッターの波の高さぶん外へ出す。本文の下端で切ると、
	 * 波の谷間の上でドットが真横に途切れて見える。はみ出した分は波（あとに描かれる）が隠す。
	 */
	inset: 0 0 -96px 0;
	overflow: hidden;
	pointer-events: none;
	z-index: -1;
}

.page-deco__item {
	position: absolute;
	left: var(--x, auto);
	right: var(--r, auto);
	top: var(--p);
	width: var(--w);
	height: var(--h);
	max-width: none;
	opacity: var(--op, 1);
}

/*
 * ミウルの影は Figma でフッターの波の後ろに潜り、頭だけ覗いている（上から 55% ほど）。
 * 下だけ .site-main の外へ逃がして、フッター（あとに描かれる）の波に隠させる。
 * 左右と上は切る。
 */
.page-deco--behind {
	inset: 0 0 -160px 0;
	z-index: -2;
}

.page-deco__shade {
	position: absolute;
	left: var(--x, auto);
	right: var(--r, auto);
	bottom: calc(160px - 115px);
	width: 297px;
	max-width: none;
	height: auto;
}

/* SP ではトップの飾り（responsive.css）と同じく 45% に縮める */
@media (width <= 767px) {

	.page-deco__item {
		width: calc(var(--w) * 0.45);
		height: calc(var(--h) * 0.45);
	}

	.page-deco__shade {
		width: 150px;
		bottom: calc(160px - 58px);
	}
}

.page-body {
	display: flex;
	flex-direction: column;
	gap: var(--space-4xl);
	width: var(--content-width);
	margin-inline: auto;
	padding-block: var(--space-2xl) var(--space-7xl);
}

/* セクションの中は見出し・中身・ボタンが縦に並ぶ */
.page-body > section,
.tile-sec,
.district-sec,
.course-sec,
.person-sec,
.post-list-sec {
	display: flex;
	flex-direction: column;
	gap: var(--space-xl);
}

/* ============================================================
 * ページヘッダー
 * Figma: PC-イベント「Group 320」(6103:422)
 * 左が色の付いた見出し、右が写真。比率は 2:3 前後。
 * ========================================================== */

.page-hero {
	display: grid;
	grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
	overflow: hidden;
	border-radius: var(--radius-card);
}

.page-hero--no-photo {
	grid-template-columns: minmax(0, 1fr);
}

.page-hero__text {
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: var(--space-2xs);

	/* 高さは中身で決まる。カンプの 300px を min-height で固定しない */
	padding: var(--space-3xl) var(--space-2xl);

	/* 英字の大きさを箱の幅に合わせるための基準（下の cqi） */
	container-type: inline-size;
}

/*
 * ⚠️ 英字は1語が長い（CITY&CULTURE は 7.4em）。画面幅だけで大きさを決めると、
 * 箱が細い幅で語の途中から折れて「CITY&CULTUR / E」になる。
 * 箱の幅の 13%（= 7.4em が収まる大きさ）を上限にする。
 */
.page-hero__en {
	font-size: min(var(--fs-hero-en), 13cqi);
	font-weight: 700;
	line-height: 1.1;
}

.page-hero__ja {
	margin: 0;
	font-size: var(--fs-hero-ja);
	font-weight: 700;
	line-height: 1.2;
}

.page-hero__photo {
	/*
	 * 写真の枠は「横長の帯」。高さを px で決めず比で持つ。
	 * ⚠️ 比を決めないと、中の絵の縦横比がそのまま枠の高さになる。
	 * ハイキングのミウル（ほぼ正方形）でページヘッダーが2倍以上の高さになった。
	 */
	aspect-ratio: 757 / 300;
	overflow: hidden;
}

.page-hero__photo img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* 緑の版（カテゴリのページ）… 英字が主役 */
.page-hero--green .page-hero__text {
	background: var(--hero-band, var(--midori-green-deep)); /* ページごとの色は page-hero.php が --hero-band で渡す */
	color: #fff;
}

/*
 * 黄色の版（ハイキング・アクセス）… 日本語が主役で、英字は添え物。
 * 並び順が逆になるので order で入れ替える。
 */
/*
 * 黄色はブロック全体の地色にする。イラストは切り抜かずに右へ置くので、
 * 収まりきらない部分に地色が見える（カンプも黄色の帯にイラストが乗っている）。
 */
.page-hero--yellow {
	background: var(--midori-yellow);
}

.page-hero--yellow .page-hero__text {
	color: var(--midori-green-deep);
}

.page-hero--yellow .page-hero__en {
	order: 2;
	font-size: var(--fs-sec-title);
}

.page-hero--yellow .page-hero__ja {
	order: 1;
	font-size: var(--fs-hero-ja-lg);
	letter-spacing: 0.08em;
}

/*
 * 見出しが文字画像の版（地区紹介。Figma: 各地区の Group 319）。
 * 画像は高さで大きさを決める（Figma: 高さ 81px 前後）。狭い幅では箱に収まるまで縮む。
 */
.page-hero__ja--img {
	line-height: 0;
	letter-spacing: 0;
}

.page-hero__ja--img img {
	width: auto;
	max-width: 100%;
	height: clamp(44px, 2.4vw + 34px, 81px);
	object-fit: contain;
	object-position: left center;
}

/* Figma: 英字 25px・太字・#2f7b3b */
.page-hero--yellow .page-hero__ja--img + .page-hero__en,
.page-hero--yellow:has(.page-hero__ja--img) .page-hero__en {
	color: var(--midori-green-text);
	font-size: clamp(18px, 0.5vw + 15px, 25px);
}

/* 黄色の版の写真はイラスト。切り抜かずに収める */
.page-hero--yellow .page-hero__photo img {
	object-fit: contain;
	object-position: center right;
}

/* ============================================================
 * パンくず
 * ========================================================== */

/* Figma 2026-09（2034:1954 ほか全ページ）: 16px、リンクは緑 #2db479、いまのページは黒の太字、区切りは「>」 */
.breadcrumb {
	font-size: var(--fs-breadcrumb);
	color: #000;
}

.breadcrumb__item:last-child {
	font-weight: 700;
}

.breadcrumb__list {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-2xs);
	margin: 0;
	padding: 0;
	list-style: none;
}

.breadcrumb__item + .breadcrumb__item::before {
	margin-right: var(--space-2xs);
	content: ">";
	font-weight: 400;
}

.breadcrumb a {
	color: var(--midori-green);
}

/*
 * ページヘッダーのすぐ下に来るときだけ間を詰める。
 * ⚠️ `.breadcrumb` そのものに負のマージンを付けると、ページヘッダーを持たない
 *    ページ（各地区紹介）で先頭が上に食い込み、追従ヘッダーの下に潜る。
 */
.page-hero + .breadcrumb {
	margin-top: calc(var(--space-4xl) * -1 + var(--space-sm));
}

/* ============================================================
 * セクション見出し（文字）
 * Figma: 30px bold / #2f7b3b / 中央揃え
 * ========================================================== */

.sec-title {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--space-3xs);
	text-align: center;
}

.sec-title__ja {
	margin: 0;
	font-size: var(--fs-sec-title);
	font-weight: 700;
	line-height: 1.4;
	color: var(--midori-green-text);
}

.sec-title__en {
	font-size: var(--fs-sec-en);
	font-weight: 700;
	color: var(--midori-green-text);
}

.sec-title__lead {
	max-width: 46em;
	font-size: var(--fs-body);
	line-height: 1.9;
}

/* ============================================================
 * タグで絞り込む
 * Figma: 2079:1763 / コンポーネント (2:3)
 * 帯（#2db479・白文字）＋ 白いパネルにチップが並ぶ
 * ========================================================== */

.post-filter {
	overflow: hidden;
	border-radius: var(--radius-card);
	background: #fff;
}

.post-filter__toggle {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: var(--space-2xs);
	width: 100%;

	/* SWELL が button に当てる padding / border / 背景を打ち消す */
	padding: var(--space-xs) var(--space-md);
	border: 0;
	border-radius: 0;
	background: var(--midori-green);
	box-shadow: none;
	appearance: none;

	font-family: inherit;
	font-size: var(--fs-filter-label);
	font-weight: 700;
	color: #fff;
	cursor: pointer;
}

/*
 * ＋ / − の印。Figma では小さな SVG だが、
 * 素材を1枚増やすほどのものではないので枠線だけで作る。
 */
.post-filter__icon {
	position: relative;
	flex: 0 0 auto;
	width: 1.4em;
	height: 1.4em;
	border-radius: 4px;
	background: #fff;
}

.post-filter__icon::before,
.post-filter__icon::after {
	position: absolute;
	inset: 50% 22%;
	height: 2px;
	background: var(--midori-green);
	content: "";
	translate: 0 -50%;
	transition: rotate 0.3s var(--ease-soft), opacity 0.3s var(--ease-soft);
}

.post-filter__icon::after {
	rotate: 90deg;
}

/* 開いているときは − にする */
.post-filter__toggle[aria-expanded="true"] .post-filter__icon::after {
	opacity: 0;
	rotate: 0deg;
}

.post-filter__panel {
	padding: var(--space-sm) var(--space-sm) var(--space-md);
}

.post-filter__panel[hidden] {
	display: none;
}

.post-filter__chips {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-2xs) var(--space-xs);
	margin: 0;
	padding: 0;
	list-style: none;
}

.post-filter__chip {
	display: grid;
	place-items: center;
	min-width: 9em;
	padding: var(--space-2xs) var(--space-md);
	border: 1px solid var(--midori-green);
	border-radius: 30px;
	font-size: var(--fs-chip);
	font-weight: 700;
	line-height: 1.4;
	color: var(--midori-green);
	text-align: center;
	transition: background-color 0.3s var(--ease-soft), color 0.3s var(--ease-soft);
}

/*
 * SP は幅いっぱいに均等に割る。flex の折り返しのままだと、最小幅のチップが左から詰まって
 * 右に大きな空きが残り、左寄りに見えていた（2026-09-29 指摘）。地区6つは 3列 × 2段になる。
 */
@media (width <= 767px) {

	.post-filter__chips {
		display: grid;
		grid-template-columns: repeat(auto-fill, minmax(min(96px, 100%), 1fr));
	}

	.post-filter__chip {
		min-width: 0;
		padding-inline: var(--space-2xs);
	}
}

.post-filter__chip.is-active,
.post-filter__chip:hover {
	background: var(--midori-green);
	color: #fff;
	opacity: 1;   /* リンクの「薄くする」ホバーはここでは使わない */
}

/* ============================================================
 * 記事カードの格子
 * カードそのものは components.css（トップと共通）
 * ========================================================== */

.card-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(280px, 100%), 1fr));
	gap: var(--space-xl) var(--space-lg);
	margin: 0;
	padding: 0;
	list-style: none;
}

/*
 * カードは components.css で 300px 固定。格子の中では列いっぱいに広げる。
 * `.card-grid .info-card`（0,2,0）は responsive.css の `.info-card`（0,1,0）より
 * 強いので、読み込み順に関係なくこちらが勝つ。
 */
.card-grid > .info-card,
.card-grid > .course-card,
.card-grid > .pickup-card {
	width: 100%;
	min-height: 0;
}

.card-grid .info-card__photo,
.card-grid .course-card__photo {
	width: 100%;
	height: auto;
	aspect-ratio: 260 / 147;
}

.card-grid .info-card,
.card-grid .course-card {
	box-shadow: var(--shadow-card);
	transition: translate 0.3s var(--ease-soft), box-shadow 0.3s var(--ease-soft);
}

.card-grid .info-card:hover,
.card-grid .course-card:hover {
	translate: 0 -4px;
	box-shadow: 0 6px 16px rgb(0 0 0 / 16%);
}

.card-grid .info-card__link:hover,
.card-grid .course-card__link:hover {
	opacity: 1;   /* 浮き上がるので、薄くはしない */
}

.post-grid__empty {
	padding: var(--space-3xl) 0;
	font-size: var(--fs-body);
	text-align: center;
}

/* ============================================================
 * ページ送り
 * Figma: コンポーネント (2:3) の丸い数字
 * ========================================================== */

.pagination__list {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: var(--space-2xs);
	margin: 0;
	padding: 0;
	list-style: none;
}

.pagination a,
.pagination span {
	display: grid;
	place-items: center;
	min-width: 2.4em;
	height: 2.4em;
	padding-inline: var(--space-2xs);
	border: 1px solid var(--midori-green);
	border-radius: 999px;
	font-size: var(--fs-chip);
	font-weight: 700;
	color: var(--midori-green);
	background: #fff;
}

.pagination .current,
.pagination a:hover {
	background: var(--midori-green);
	color: #fff;
	opacity: 1;
}

.pagination .dots {
	border-color: transparent;
	background: none;
}

/* ============================================================
 * バナー
 * ========================================================== */

.banner-block {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--space-md);
}

.banner-block__title {
	margin: 0;
	font-size: var(--fs-sec-title);
	font-weight: 700;
	color: var(--midori-green-text);
	text-align: center;
}

.banner-block img {
	width: 100%;
	height: auto;
	border-radius: var(--radius-card);
}

/* 大きさは本文幅に対する割合。Figma の px を持ち込まない */
.banner-block--lg img { max-width: 100%; }
.banner-block--md img { max-width: min(100%, 750px); }
.banner-block--sm img { max-width: min(100%, 520px); }

.banner-block__link {
	display: block;
	width: 100%;
	text-align: center;
}

.banner-stack {
	display: flex;
	flex-direction: column;
	gap: var(--space-2xl);
}

/* ============================================================
 * ボタンの行
 * ボタンそのものは components.css（トップと共通）
 * ========================================================== */

.btn-row {
	display: flex;
	justify-content: center;
}

/*
 * ⚠️ トップの .btn-yellow などはセクションの中の位置を margin で持っている（72px ほか）。
 * 下層は .page-body の gap で間を取るので、持ち込むと上だけ倍近く空く。
 */
.btn-row > a {
	margin-block: 0;
}

/* ============================================================
 * 白い枠のカード
 * Figma: PC-ハイキング / PC-歴史 / PC-都市と自然
 * 白地・緑の枠・角丸。見出しは薄緑の帯。
 * ========================================================== */

.intro-card {
	display: flex;
	flex-direction: column;
	gap: var(--space-md);
	padding: var(--space-lg);
	border: 2px solid var(--midori-green-deep);
	border-radius: 20px;
	background: #fff;
}

.intro-card__title {
	margin: 0;
	padding: var(--space-2xs) var(--space-md);
	border-radius: 6px;
	background: var(--midori-bg-soft);
	font-size: var(--fs-intro-title);
	font-weight: 700;
	line-height: 1.5;
	color: var(--midori-green-deep);
	text-align: center;
}

.intro-card__photo img {
	width: 100%;
	height: auto;
	border-radius: 6px;
}

.intro-card__text {
	margin: 0;
	font-size: var(--fs-body);
	line-height: 1.9;
}

.intro-card--center .intro-card__text,
.intro-card--center .entry-body {
	text-align: center;
}

/*
 * 白い枠のカードの中に本文を流し込むとき（ハイキングのリード文）は、
 * 見出しを帯にしない。カンプは緑の文字だけで、箱の中に箱が重なって見えないようにしている。
 */
.intro-card .entry-body h2 {
	margin-top: 0;
	padding: 0;
	background: none;
	font-size: var(--fs-intro-title);
	color: var(--midori-green-deep);
}

.intro-card .entry-body > :first-child {
	margin-top: 0;
}

/*
 * ハイキングの「おすすめスポット」「関連リンク」（本文の後半を箱の外に出したもの。page-hiking.php）。
 * 見出しはほかのセクション見出し（sec-title）と同じく、帯にしない緑の文字にする。
 */
.hiking-more .entry-body h2 {
	margin-top: var(--space-3xl);
	padding: 0;
	background: none;
	font-size: var(--fs-sec-title);
	color: var(--midori-green-text);
}

.hiking-more .entry-body > :first-child {
	margin-top: 0;
}

.intro-card__more {
	margin: 0;
	text-align: right;
}

/* 本文の下の関連リンク（Figma: 黒・太字・下線 20px） */
.intro-card__links {
	display: flex;
	flex-direction: column;
	gap: var(--space-2xs);
	margin: 0;
	padding: 0;
	list-style: none;
}

.intro-card__links a {
	font-size: var(--fs-intro-link, 18px);
	font-weight: 700;
	line-height: 1.5;
	color: #000;
	text-decoration: underline;
}

/* 2カラムの紹介（歴史・都市と自然）の写真は Figma の枠の比率で切り抜く。元画像の比率がまちまちなため */
.feature-cards .intro-card__photo img {
	aspect-ratio: 544 / 277;
	object-fit: cover;
}

.intro-card__more a {
	font-size: var(--fs-body);
	font-weight: 700;
	color: var(--midori-green);
}

.feature-cards {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr));
	gap: var(--space-xl);
}

/* ============================================================
 * タイル（黄色い枠の小さいカード）
 * Figma: PC-観光「モデルコース」「歴史スポット」/ おすすめスポット
 * ========================================================== */

.tile-cards {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(190px, 100%), 240px));
	gap: var(--space-lg);
	justify-content: center;
	margin: 0;
	padding: 0;
	list-style: none;
}

/* カンプは2枚・4枚と数が変わる。多いときだけ詰まらないよう上限を置く */
.tile-cards:has(> :nth-child(5)) {
	grid-template-columns: repeat(auto-fit, minmax(min(170px, 100%), 210px));
}

.tile-card {
	overflow: hidden;
	border: 4px solid var(--midori-yellow);
	border-radius: var(--radius-card);
	background: var(--midori-yellow);
	transition: translate 0.3s var(--ease-soft);
}

.tile-card:hover {
	translate: 0 -4px;
}

.tile-card__link {
	display: flex;
	flex-direction: column;
	color: var(--midori-green-deep);
}

.tile-card__link:hover {
	opacity: 1;
}

.tile-card__photo {
	width: 100%;
	height: auto;
	aspect-ratio: 5 / 4;
	object-fit: cover;
	border-radius: 6px 6px 0 0;
}

.tile-card__label {
	padding: var(--space-2xs);
	font-size: var(--fs-tile-label);
	font-weight: 700;
	line-height: 1.4;
	text-align: center;
}

/* ============================================================
 * 各地区紹介
 * Figma: 6015:2477 ほか / 写真の下端に緑の帯が重なる
 * ========================================================== */

.district-cards {
	display: grid;

	/* カンプは3列 x 2段。本文幅 1300px で1枚 406px になり、カンプの 400px とほぼ同じ */
	grid-template-columns: repeat(auto-fit, minmax(min(340px, 100%), 1fr));
	gap: var(--space-xl) var(--space-2xl);
	margin: 0;
	padding: 0;
	list-style: none;
}

.district-card {
	overflow: hidden;
	border-radius: 20px;
	transition: translate 0.3s var(--ease-soft);
}

.district-card:hover {
	translate: 0 -4px;
}

.district-card__link {
	position: relative;
	display: block;
	color: #fff;
}

.district-card__link:hover {
	opacity: 1;
}

.district-card__photo {
	width: 100%;
	height: auto;
	aspect-ratio: 400 / 205;
	object-fit: cover;
}

/* 帯は写真の下端に重なる（Figma: Subtract / 高さ 57px ＝ カードのおよそ 28%） */
.district-card__band {
	position: absolute;
	inset: auto 0 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	padding: var(--space-3xs) var(--space-2xs) var(--space-2xs);
	background: var(--midori-green);
	text-align: center;
}

.district-card__ja {
	font-size: var(--fs-district-ja);
	font-weight: 700;
	line-height: 1.2;
}

.district-card__en {
	font-size: var(--fs-district-en);
	font-weight: 700;
	line-height: 1.2;
}

/* ============================================================
 * 地区の紹介（地図＋写真＋説明）
 * Figma: PC-橋本地区紹介 ほか6枚
 * ========================================================== */

.district-intro {
	display: flex;
	flex-direction: column;
	gap: var(--space-lg);
	padding: var(--space-2xl) var(--space-lg);
	border: 2px solid var(--midori-green-deep);
	border-radius: 20px;
	background: #fff;
}

.district-intro__title {
	margin: 0;
	font-size: var(--fs-sec-title);
	font-weight: 700;
	color: var(--midori-green-text);
	text-align: center;
}

.district-intro__body {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
	gap: var(--space-xl);
	align-items: center;
}

.district-intro__map {
	position: relative;
	margin: 0;
}

.district-intro__map img {
	width: 100%;
	height: auto;
}

.district-intro__text {
	margin: 0;
	font-size: clamp(15px, 0.25vw + 13.2px, 18px); /* Figma 6015:2568 ほか: 18px の黒 */
	line-height: 1.8;
	color: #000;
}

/* ============================================================
 * 緑区にゆかりのある方々
 * Figma: PC-スポーツ の下部。枠の色はジャンルごと（sport-options のグラデーション）
 * ========================================================== */

.person-cards {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr));
	gap: var(--space-xl);
	margin: 0;
	padding: 0;
	list-style: none;
}

.person-card {
	padding: 4px;
	border-radius: 14px;

	/* 枠をグラデーションで作る。--c1 / --c2 は sport-options の2色 */
	background: linear-gradient(135deg, var(--c1, #2db479), var(--c2, #0e682e));
}

.person-card__inner {
	display: flex;
	flex-direction: column;
	gap: var(--space-2xs);
	height: 100%;
	padding: var(--space-md);
	border-radius: 10px;
	background: #fff;
}

.person-card__photo {
	width: 100%;
	height: auto;
	aspect-ratio: 4 / 5;
	object-fit: cover;
	border-radius: 6px;
}

.person-card__name {
	margin: 0;
	font-size: var(--fs-person-name);
	font-weight: 700;
	line-height: 1.3;
}

.person-card__en {
	margin: 0;
	font-size: var(--fs-district-en);
	color: #7a7a7a;
}

/* 小見出しは緑の地に白抜き（Figma: ■ジャンル■ の表現） */
.person-card__head {
	margin: var(--space-2xs) 0 0;
	padding: 2px var(--space-2xs);
	border-radius: 4px;
	background: var(--midori-green);
	font-size: var(--fs-chip);
	font-weight: 700;
	color: #fff;
}

.person-card__value {
	margin: 0;
	font-size: var(--fs-body);
}

.person-card__points,
.person-card__links {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-3xs) var(--space-2xs);
	margin: 0;
	padding: 0;
	list-style: none;
	font-size: var(--fs-chip);
}

.person-card__points {
	flex-direction: column;
}

.person-card__links a {
	display: inline-block;
	padding: 2px var(--space-2xs);
	border: 1px solid var(--midori-green);
	border-radius: 4px;
	color: var(--midori-green);
	font-weight: 700;
}

/* ============================================================
 * 記事・固定ページの本文
 *
 * ブロックエディタのコアブロックが Figma の見た目になるようにする。
 * Figma: PC-ミウルのおうち（h2 が緑の帯、h3 が葉のアイコン付き）
 * ========================================================== */

.entry {
	display: flex;
	flex-direction: column;
	gap: var(--space-lg);
	padding: var(--space-2xl) var(--space-lg);
	border-radius: 20px;
	background: #fff;
}

.entry__head {
	display: flex;
	flex-direction: column;
	gap: var(--space-2xs);
	padding-bottom: var(--space-md);
	border-bottom: 2px solid var(--midori-bg-soft);
}

.entry__date {
	margin: 0;
	font-size: var(--fs-chip);
	font-weight: 700;
	color: var(--midori-green);
}

.entry__title {
	margin: 0;
	font-size: var(--fs-entry-title);
	font-weight: 700;
	line-height: 1.5;
	color: var(--midori-green-deep);
}

.entry__terms {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-2xs);
	margin: 0;
	padding: 0;
	list-style: none;
}

.entry__terms a {
	display: inline-block;
	padding: 2px var(--space-2xs);
	border: 1px solid var(--midori-green);
	border-radius: 4px;
	font-size: var(--fs-chip);
	color: var(--midori-green);
}

.entry__thumb {
	margin: 0;
}

.entry__thumb img {
	width: 100%;
	height: auto;
	border-radius: var(--radius-card);
}

.entry-body {
	font-size: var(--fs-body);
	line-height: 1.9;
}

.entry-body > * + * {
	margin-top: var(--space-md);
}

/*
 * 先頭の見出しは箱の padding だけで上を空ける。見出しの margin-top（48px など）が
 * 足されると、箱の上だけ倍近く空いて中身が下にずれて見える。
 * 見出しごとの指定（.entry-body h2 / --shift の h3）より強くしてある。
 */
body.midonavi .entry-body > :first-child {
	margin-top: 0;
}

/* h2 は緑の帯 */
.entry-body h2 {
	margin-top: var(--space-3xl);
	padding: var(--space-2xs) var(--space-md);
	border-radius: 6px;
	background: var(--midori-green-light);
	font-size: var(--fs-entry-h2);
	font-weight: 700;
	line-height: 1.5;
	color: #fff;
	text-align: center;
}

/* h3 は葉の印を頭に付ける */
.entry-body h3 {
	display: flex;
	align-items: baseline;
	gap: var(--space-2xs);
	margin-top: var(--space-2xl);
	font-size: var(--fs-entry-h3);
	font-weight: 700;
	line-height: 1.5;
	color: var(--midori-green-text);
}

/*
 * ⚠️ `body.midonavi` を頭に付けているのは、base.css の
 *    `body.midonavi h3::before { content: none }`（SWELL の飾りを消すリセット）に
 *    負けるため。`.entry-body h3::before` だけでは詳細度が 1 足りず、
 *    **font-size は効くのに content だけ none のまま**という分かりにくい負け方をする。
 *
 * 葉は絵文字ではなく形で作る。絵文字は環境によって色も形も変わる。
 */
body.midonavi .entry-body h3::before {
	flex: 0 0 auto;
	width: 0.6em;
	height: 0.6em;
	border-radius: 0 60% 0 60%;
	background: var(--midori-green);
	content: "";
	rotate: -20deg;
	translate: 0 -0.05em;
}

.entry-body h4 {
	margin-top: var(--space-xl);
	font-size: var(--fs-body);
	font-weight: 700;
	color: var(--midori-green-deep);
}

.entry-body p {
	margin-block: 0;
}

.entry-body a {
	color: var(--midori-green);
	text-decoration: underline;
}

/*
 * SWELL のボタンブロック（swell-block-button）は、上の本文リンクの緑・下線を受けて
 * 塗りのボタンの文字まで緑（＝地と同じ色で見えない）になっていた（名探偵ミウル特設ページ。2026-09-29 依頼表）。
 * SWELL 本来の色（塗り＝白文字、線＝ボタンの色）をクラス1つ強く戻す。
 */
.entry-body .swell-block-button a {
	text-decoration: none;
}

.entry-body .is-style-btn_normal a,
.entry-body .is-style-btn_solid a,
.entry-body .is-style-btn_shiny a {
	color: #fff;
}

.entry-body .is-style-btn_line a {
	color: var(--the-btn-bg);
}

/*
 * 名探偵ミウル特設ページ（stamp_rally_2026）の本文の先頭のバナー。
 * ページ個別の CSS（DB の swell_meta_css）が旧テーマのページヘッダーを打ち消すために
 * `#maintitle { margin-top: -160px !important }` を持っていて、新デザインではページの帯とパンくずに覆いかぶさる。
 * DB は既存サイトと共有しているので書き換えず、こちらで打ち消す。
 */
body.midonavi .entry-body #maintitle {
	margin-top: 0 !important;
}

/*
 * 同じページの見出し（h3.is-style-section_ttl）。ページの CSS が帯を赤（#8c2121）に塗るが、
 * 文字はこちらの h3 の緑（#2f7b3b）・左寄せ・葉の印のままで、赤に緑で読めなかった（2026-09-30 指示表 行25）。
 * 現行サイトと同じ白の中央寄せに戻す。ID で絞るのは、このページのページ CSS との組み合わせでしか意味がないため。
 */
body.midonavi.page-id-14035 .entry-body h3.is-style-section_ttl {
	padding: var(--space-2xs) var(--space-sm);
	border-radius: 10px;
	color: #fff;
	text-align: center;
}

body.midonavi.page-id-14035 .entry-body h3.is-style-section_ttl::before {
	content: none;
}

.entry-body img {
	height: auto;
	border-radius: var(--radius-card);
}

.entry-body ul,
.entry-body ol {
	padding-left: 1.4em;
}

.entry-body li + li {
	margin-top: var(--space-3xs);
}

.entry-body blockquote {
	padding: var(--space-md) var(--space-lg);
	border-left: 4px solid var(--midori-bg-soft);
	background: #f7f8ef;
}

.entry-body table {
	width: 100%;
	border-collapse: collapse;
}

.entry-body th,
.entry-body td {
	padding: var(--space-2xs) var(--space-xs);
	border: 1px solid var(--color-border);
	text-align: left;
}

.entry-body th {
	background: var(--midori-bg-soft);
}

/*
 * 本文の表ブロック（wp-block-table）は現行サイトと同じく罫線・地色なし
 * （2026-09-29 クライアント修正 PDF p.10「線が表示されたりしていません。ここ以外も全て修正」）。
 * 現行（旧テーマ css/top.css）は `.wp-block-table td { border: 0 }`。SWELL の is-style-simple が残す横線も消す。
 * 表ブロック以外の素の table（プラグイン等）は上の罫線ありのまま。
 */
.entry-body .wp-block-table :is(th, td) {
	border: 0;
	background: none;
	box-shadow: none;
}

.entry-body .wp-block-table > table {
	border: 0;
}

.entry-body figure {
	margin: 0;
}

/*
 * 本文の段落・画像・リストの前を空ける（2026-09-29 クライアント修正 PDF p.12・p.22「見出しと写真がくっついている／行間の調整を全ページ」）。
 * 上の `.entry-body p { margin-block: 0 }` と `.entry-body figure { margin: 0 }`（どちらも 0,1,1）が
 * `.entry-body > * + *`（0,1,0）に詳細度で勝っていて、見出しの直後の写真・段落どうしの間が 0 になっていた。
 * 同じ詳細度であとに書いて戻す。見出しは自分の margin-top（48px など）を持つので対象にしない。
 */
.entry-body > * + :is(p, figure, ul, ol, table, blockquote) {
	margin-top: var(--space-md);
}

/* 埋め込み（Google マップなど）は幅に合わせて潰れないようにする */
.entry-body iframe {
	width: 100%;
	max-width: 100%;
	aspect-ratio: 16 / 9;
	height: auto;
	border: 0;
	border-radius: var(--radius-card);
}

.entry__pages {
	display: flex;
	gap: var(--space-2xs);
	justify-content: center;
	margin-top: var(--space-xl);
}

/* ============================================================
 * 検索結果・アーカイブの説明
 * ========================================================== */

.search-summary {
	margin: 0;
	font-size: var(--fs-body);
	text-align: center;
}

.search-summary__terms {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-2xs);
	justify-content: center;
	margin: 0;
	padding: 0;
	list-style: none;
}

.search-summary__terms li {
	padding: 2px var(--space-2xs);
	border: 1px solid var(--midori-green);
	border-radius: 4px;
	font-size: var(--fs-chip);
	color: var(--midori-green);
}

.archive-description {
	font-size: var(--fs-body);
	line-height: 1.9;
	text-align: center;
}

/* ============================================================
 * 狭い画面
 * 段はひとつだけ。あとは上のグリッドが auto-fit で自然に折り返す。
 * ========================================================== */

@media (max-width: 767px) {

	.page-body {
		gap: var(--space-3xl);
		padding-bottom: var(--space-7xl);
	}

	.page-hero + .breadcrumb {
		margin-top: calc(var(--space-3xl) * -1 + var(--space-2xs));
	}

	/* ページヘッダーは写真を下に回す（横に並べると両方とも細くなる） */
	.page-hero {
		grid-template-columns: minmax(0, 1fr);
	}

	.page-hero__text {
		padding: var(--space-lg) var(--space-md);
	}

	.page-hero__photo {
		aspect-ratio: 16 / 9;
	}

	.page-hero--yellow .page-hero__photo {
		aspect-ratio: 2 / 1;
	}

	.entry,
	.district-intro {
		padding: var(--space-lg) var(--space-md);
	}

	.card-grid {
		grid-template-columns: repeat(auto-fill, minmax(min(150px, 100%), 1fr));
		gap: var(--space-lg) var(--space-sm);
	}

	.entry-body h2 {
		margin-top: var(--space-2xl);
	}
}

/* ============================================================
 * SWELL の目次
 *
 * Figma のカンプに目次は無いが、**SWELL の機能として本文に自動で挿入される**
 * （カスタマイザー > 目次 で切れる。長いページでは有用なので消していない）。
 * 見た目だけこちらの意匠に合わせておく。
 * ========================================================== */

.entry-body .p-toc {
	margin-block: var(--space-xl);
	padding: var(--space-md) var(--space-lg);
	border: 1px solid var(--midori-bg-soft);
	border-radius: var(--radius-card);
	background: #f7f8ef;
}

/*
 * 見出しが少ないページでは項目が1つも入らず「目次」の枠だけが残る（ダウンロード）。
 * 中身が無いあいだは出さない。JS があとから項目を入れれば :has で自然に出る。
 */
.entry-body .p-toc:not(:has(li)) {
	display: none;
}

.entry-body .p-toc__ttl {
	font-size: var(--fs-body);
	font-weight: 700;
	color: var(--midori-green-deep);
}

.entry-body .p-toc a {
	color: var(--midori-green-text);
	text-decoration: none;
}

/* ============================================================
 * 本文の中に差し込んだブロック
 * `loos/post-list` などを新デザインの部品に差し替えたときの入れもの
 * （inc/content.php）。本文の流れの中で少し離して置く。
 * ========================================================== */

.entry-block {
	display: flex;
	flex-direction: column;
	gap: var(--space-xl);
	margin-block: var(--space-2xl);
}

/* 見出しのすぐ下に来たときは、見出しとの間隔を詰める */
.entry-body h2 + .entry-block,
.entry-body h3 + .entry-block {
	margin-top: var(--space-lg);
}

/* ============================================================
 * 横長のリンクカード
 * Figma: ミウルのおうち「ミウルの活動レポート」(image 102)
 * ========================================================== */

.link-card {
	width: 100%;
}

.link-card__link {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	align-items: center;
	gap: var(--space-md);
	padding: var(--space-sm);
	border: 1px solid var(--midori-bg-soft);
	border-radius: var(--radius-card);
	background: #fff;
	box-shadow: var(--shadow-card);
	transition: translate 0.3s var(--ease-soft), box-shadow 0.3s var(--ease-soft);
}

.link-card__link:hover {
	opacity: 1;   /* 浮き上がるので薄くしない */
	translate: 0 -3px;
	box-shadow: 0 6px 16px rgb(0 0 0 / 16%);
}

.link-card__photo {
	width: 120px;
	height: 100%;
	max-height: 90px;
	border-radius: 6px;
	object-fit: cover;
}

.link-card__body {
	display: flex;
	flex-direction: column;
	gap: var(--space-3xs);
}

.link-card__title {
	font-size: var(--fs-card-title);
	font-weight: 700;
	line-height: 1.6;
	color: var(--midori-green-deep);
}

.link-card__text {
	font-size: var(--fs-card-date);
	line-height: 1.7;
	color: #555;
}

/* ============================================================
 * 所要時間のラベル
 * Figma: モデルコース詳細「Group 324」
 * 見出しの下に置く、緑の小さなピル。
 * ========================================================== */

.intro-card__meta,
.course-time {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: var(--space-3xs);
	align-self: center;
	margin: 0;
	padding: var(--space-3xs) var(--space-sm);
	border-radius: 999px;
	background: var(--midori-green);
	font-size: var(--fs-card-date);
	font-weight: 700;
	color: #fff;
}

.intro-card__meta img {
	/* icon-time.svg は緑の丸に白の針。地の緑に溶けるので白く抜く（針は消える。いまこの欄を使っている所は無い） */
	filter: brightness(0) invert(1);
}

/*
 * コース詳細の所要時間（Figma 2026-09: Group 324 / 6111:638）。
 * 緑のピルではなく、濃い緑の時計（basil:clock-solid = icon-clock.svg）＋黒の標準の太さ 27px。
 * 以前は緑のピルに icon-time.svg を白く抜いて載せていて、時計の針ごと白い丸になっていた。
 */
.course-time {
	gap: var(--space-2xs);
	padding: 0;
	border-radius: 0;
	background: none;
	font-size: clamp(18px, 0.9vw + 10px, 27px);
	font-weight: 400;
	line-height: 1.2;
	color: #000;
}

.course-time img {
	width: 1.75em;
	height: 1.75em;
}

/* ============================================================
 * プロフィールの箱
 * Figma: ミウルのおうち「Rectangle 212」
 * 箱の上に「プロフィール」のラベルが入る。
 * ========================================================== */

.profile-card {
	padding-block: var(--space-xl);
}

/*
 * ラベルは通常の流れに置く。absolute にすると箱の padding と高さを
 * 手で合わせることになり、文字サイズが変わったとたんに見出しと重なる。
 */
.profile-card__label {
	margin: 0;
	font-size: var(--fs-intro-title);
	font-weight: 700;
	line-height: 1.4;
	color: var(--midori-green-deep);
	text-align: center;
}

/*
 * 本文は「画像 → あいさつ」の順で書かれているが、カンプは
 * 「あいさつ → 画像」。**本文を書き換えずに**見た目だけ入れ替える。
 */
.profile-card__body {
	display: flex;
	flex-direction: column;
	gap: var(--space-md);
}

.profile-card__body > figure {
	order: 1;
	margin: 0;
}

.profile-card__body > figure img {
	width: auto;
	max-width: min(100%, 706px);
	height: auto;
	margin-inline: auto;
}

/* ============================================================
 * 月ごとのイベント
 * Figma: PC-イベントカレンダー
 * 緑の帯（下に三角の吹き出し）で月を区切り、カードを並べる。
 * ========================================================== */

.event-months {
	display: flex;
	flex-direction: column;
	gap: var(--space-4xl);
}

.event-month {
	display: flex;
	flex-direction: column;
	gap: var(--space-2xl);
}

.event-month__head {
	position: relative;
	margin: 0;
	padding: var(--space-xs) var(--space-lg);
	border-radius: var(--radius-card);
	background: var(--midori-green-light);
	font-size: var(--fs-sec-title);
	font-weight: 700;
	line-height: 1.4;
	color: #fff;
	text-align: center;
}

/* 帯の下の三角（吹き出しの先） */
.event-month__head::after {
	position: absolute;
	inset-block-start: 100%;
	inset-inline-start: 50%;
	width: 0;
	height: 0;
	border: 11px solid transparent;
	border-block-start-color: var(--midori-green-light);
	content: "";
	translate: -50% 0;
}

.event-cards {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(280px, 100%), 1fr));
	gap: var(--space-xl) var(--space-lg);
	margin: 0;
	padding: 0;
	list-style: none;
}

.event-card {
	border-radius: var(--radius-card);
	background: #fff;
	box-shadow: var(--shadow-card);
	transition: translate 0.3s var(--ease-soft), box-shadow 0.3s var(--ease-soft);
}

.event-card:hover {
	translate: 0 -4px;
	box-shadow: 0 6px 16px rgb(0 0 0 / 16%);
}

.event-card__link {
	display: flex;
	flex-direction: column;
	height: 100%;
	overflow: hidden;
	border-radius: var(--radius-card);
}

.event-card__link:hover {
	opacity: 1;
}

.event-card__photo {
	width: 100%;
	height: auto;
	aspect-ratio: 16 / 9;
	object-fit: cover;
}

.event-card__body {
	display: flex;
	flex-direction: column;
	gap: var(--space-2xs);
	padding: var(--space-md);
}

.event-card__title {
	font-size: var(--fs-intro-title);
	font-weight: 700;
	line-height: 1.5;
	color: #333;
}

.event-card__text {
	font-size: var(--fs-news-text);
	line-height: 1.8;
	color: #555;
}

/* ============================================================
 * 地図の埋め込み
 * Figma: モデルコース詳細の Google マップ
 * ========================================================== */

.map-embed {
	width: 100%;
	max-height: 70vh;
	overflow: hidden;
	border-radius: var(--radius-card);
	background: #eee;
	aspect-ratio: 981 / 855;
}

.map-embed iframe {
	display: block;
	width: 100%;
	height: 100%;
	border: 0;
}

/* コース詳細はページヘッダーを持たないので、パンくずの上を少し空ける */
.page-body--course {
	padding-block-start: var(--space-lg);
}

/* ============================================================
 * コース詳細（本文はブロックエディタ。2026-09-29〜）
 * Figma: PC-ハイキング津久井湖城山コース (6015:3165) ほか
 *
 * 本文のブロックに当てたスタイル（inc/course-meta.php で登録）:
 *   .is-style-course-intro … コース紹介の箱（グループ）
 *   .is-style-course-route … 行程の外枠（グループ）。中に立ち寄り先と移動を交互に置く
 *   .is-style-course-step  … 立ち寄り先の箱（グループ）。見出し＋段落＋画像。番号は CSS のカウンター
 *   .is-style-course-move(-bus|-cable) … 箱をつなぐ線と矢印（段落）
 * ========================================================== */

.course-body {
	display: flex;
	flex-direction: column;
	gap: var(--space-4xl);
}

/*
 * ⚠️ SWELL（theme.json の無いテーマ）ではグループの中身が `.wp-block-group__inner-container` で1段包まれる。
 * 箱の並び（flex / grid）はその内側の div に当て、`>` のセレクタもそこを経由する。
 *
 * ⚠️ コアのブロックが入れる余白を止める。グループの中の子には
 * `:where(.is-layout-flow) > * { margin-block-start: 24px }` が入り、段が全部下へずれる。
 */
.course-body > *,
.course-body .wp-block-group > .wp-block-group__inner-container, /* 内側の div にも下 16px が付いてくる */
.course-body .wp-block-group__inner-container > * {
	margin-block: 0;
}

/* --- コース紹介の箱（.intro-card と同じ見た目） --- */

.is-style-course-intro > .wp-block-group__inner-container {
	display: flex;
	flex-direction: column;
	gap: var(--space-md);
}

.is-style-course-intro {
	padding: var(--space-lg);
	border: 2px solid var(--midori-green-deep);
	border-radius: 20px;
	background: #fff;
	text-align: center;
}

.is-style-course-intro > .wp-block-group__inner-container > h1 {
	padding: var(--space-2xs) var(--space-md);
	border-radius: 6px;
	background: var(--midori-bg-soft);
	font-size: var(--fs-intro-title);
	font-weight: 700;
	line-height: 1.5;
	color: var(--midori-green-deep);
}

.is-style-course-intro > .wp-block-group__inner-container > p {
	font-size: var(--fs-body);
	line-height: 1.9;
}

/* 写真は Figma の枠（999x483）の比率で切り抜く。縦長の写真を置いても箱が縦に伸びないように */
.is-style-course-intro > .wp-block-group__inner-container > .wp-block-image {
	width: min(100%, 999px);
	margin-inline: auto;
}

.is-style-course-intro > .wp-block-group__inner-container > .wp-block-image img {
	width: 100%;
	height: auto;
	border-radius: 6px;
	aspect-ratio: 999 / 483;
	object-fit: cover;
}

/* --- 行程 --- */

/* 行程は Figma の 975px まで（本文幅いっぱいだと文字と写真が離れすぎる） */
.is-style-course-route {
	width: min(100%, 975px);
	margin-inline: auto;
	counter-reset: mdn-step;
}

.is-style-course-step > .wp-block-group__inner-container {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	align-content: start;
	column-gap: var(--space-md);
}

.is-style-course-step {
	padding: var(--space-md) var(--space-lg);
	border: 2px solid var(--midori-green-deep);
	border-radius: var(--radius-card);
	background: #fff;
	counter-increment: mdn-step;
}

/* 移動を挟まずに箱が続いたとき */
.is-style-course-step + .is-style-course-step {
	margin-block-start: var(--space-xl);
}

/*
 * 写真があるときだけ2カラム（写真は右、Figma の 378px まで）。
 * ⚠️ 写真の列を `1fr 378fr` のような比率で書かない。写真が箱のほぼ全幅を取り、見出しが縦書きのように折れる。
 */
.is-style-course-step:has(> .wp-block-group__inner-container > .wp-block-image) > .wp-block-group__inner-container {
	grid-template-columns: minmax(0, 1fr) minmax(0, 378px);
}

.is-style-course-step > .wp-block-group__inner-container > .wp-block-image {
	grid-column: 2;
	grid-row: 1 / span 10;
}

.is-style-course-step > .wp-block-group__inner-container > h2 {
	display: flex;
	align-items: center;
	gap: var(--space-2xs);
	padding: 0;
	border: 0;
	background: none;
	font-size: var(--fs-body);
	font-weight: 700;
	line-height: 1.5;
	color: var(--midori-green-deep);
}

.is-style-course-step > .wp-block-group__inner-container > h2::before {
	display: grid;
	flex: 0 0 auto;
	place-items: center;
	width: 1.6em;
	height: 1.6em;
	border-radius: 50%;
	background: var(--midori-green-deep);
	font-size: 0.8em;
	color: #fff;
	content: counter(mdn-step);
}

.course-body .is-style-course-step > .wp-block-group__inner-container > p {
	margin-block-start: var(--space-2xs);
	font-size: var(--fs-card-date);
	line-height: 1.8;
	color: #555;
}

.is-style-course-step > .wp-block-group__inner-container > .wp-block-image img {
	width: 100%;
	height: auto;
	border-radius: 6px;
	aspect-ratio: 378 / 212;
	/*
	 * 切り抜かずに全体を見せ、余白は記事のサムネイルと同じ淡い緑（2026-09-30 クライアント指摘
	 * 「陣馬山頂の白馬の首が切れる」。縦長・4:3 の写真が横長の枠で上下を切られていた）。押すと拡大は従来どおり。
	 */
	object-fit: contain;
	background: var(--thumb-bg);
}

.is-style-course-step > .wp-block-group__inner-container > .wp-block-image figcaption {
	margin: var(--space-3xs) 0 0;
	font-size: var(--fs-breadcrumb);
	line-height: 1.6;
	color: #666;
	text-align: start;
}

/*
 * 箱と箱のあいだ。中央に線と矢印、その右に「徒歩00分」。
 * 文字は線（中央）の右から書き始める。中央寄せにすると長い表記が左へ伸びて線に掛かる。
 * アイコンは背景に置く（段落1つで線・矢印・アイコンの3つを持つため。疑似要素は線と矢印で使い切っている）。
 */
.is-style-course-move,
.is-style-course-move-bus,
.is-style-course-move-cable {
	--move-x: calc(50% + var(--space-sm));
	position: relative;
	display: flex;
	align-items: center;
	min-height: 76px;
	padding-inline-start: calc(var(--move-x) + 1.6em);
	/*
	 * アイコンは --move-icon（入力欄の行程は inc/course-route.php の移動手段の一覧から style で渡す）。
	 * 移動手段を足すときは一覧に1行＋アイコンの画像を置くだけで、ここは触らなくてよい。
	 */
	background: var(--move-icon, url("../images/icon-walk-green.svg")) no-repeat var(--move-x) center / auto 1.35em;
	font-size: var(--fs-card-date);
	font-weight: 700;
	color: var(--midori-green-deep);
}

.is-style-course-move-bus {
	background-image: url("../images/icon-bus.svg");
}

.is-style-course-move-cable {
	background-image: url("../images/icon-cablecar.svg");
}

:is(.is-style-course-move, .is-style-course-move-bus, .is-style-course-move-cable)::before {
	position: absolute;
	inset-block: 0 12px;
	inset-inline-start: 50%;
	width: 2px;
	background: var(--midori-green);
	content: "";
}

:is(.is-style-course-move, .is-style-course-move-bus, .is-style-course-move-cable)::after {
	position: absolute;
	inset-block-end: 0;
	inset-inline-start: 50%;
	width: 0;
	height: 0;
	border: 7px solid transparent;
	border-block-start-color: var(--midori-green);
	content: "";
	translate: -50% 0;
}

@media (width <= 767px) {

	.is-style-course-step:has(> .wp-block-group__inner-container > .wp-block-image) > .wp-block-group__inner-container {
		grid-template-columns: minmax(0, 1fr);
	}

	.is-style-course-step > .wp-block-group__inner-container > .wp-block-image {
		grid-column: auto;
		grid-row: auto;
		margin-block-start: var(--space-sm);
	}

	/* 狭い画面では中央に線を通すと文字の裏を線が走るので、線を左端に寄せて文字をその右に置く */
	.is-style-course-move,
	.is-style-course-move-bus,
	.is-style-course-move-cable {
		--move-x: 2.6em;
	}

	:is(.is-style-course-move, .is-style-course-move-bus, .is-style-course-move-cable)::before,
	:is(.is-style-course-move, .is-style-course-move-bus, .is-style-course-move-cable)::after {
		inset-inline-start: 1.3em;
	}
}

@media (width <= 767px) {

	.link-card__link {
		grid-template-columns: minmax(0, 1fr);
	}

	.link-card__photo {
		width: 100%;
		max-height: 160px;
	}

	.map-embed {
		aspect-ratio: 4 / 3;
	}
}

/* ============================================================
 * 見出しの段階を1つずらした本文
 *
 * ミウルのおうちのカンプは、h2 が「ミウルの投稿記事一覧」のような
 * **セクションの区切り**、h3 が緑の帯、h4 が葉の印、という段になっている。
 * 既定（h2 が帯）とは1つずれるので、本文を書き換えずに見た目だけ合わせる。
 *
 * ⚠️ `.entry-body h2`（0,1,1）に勝つ必要があるので、
 *    `.entry-body--shift h2`（0,2,1）で当てる。
 * ========================================================== */

.entry-body--shift h2 {
	margin-top: var(--space-4xl);
	padding: 0;
	background: none;
	font-size: var(--fs-sec-title);
	color: var(--midori-green-text);
}

.entry-body--shift h3 {
	display: block;
	margin-top: var(--space-3xl);
	padding: var(--space-2xs) var(--space-md);
	border-radius: 6px;
	background: var(--midori-green-light);
	font-size: var(--fs-entry-h2);
	color: #fff;
	text-align: center;
}

/* 帯になったぶん、葉の印は消す（両方は付かない） */
body.midonavi .entry-body--shift h3::before {
	content: none;
}

.entry-body--shift h4 {
	display: flex;
	align-items: baseline;
	gap: var(--space-2xs);
	margin-top: var(--space-2xl);
	font-size: var(--fs-entry-h3);
	color: var(--midori-green-text);
}

body.midonavi .entry-body--shift h4::before {
	flex: 0 0 auto;
	width: 0.6em;
	height: 0.6em;
	border-radius: 0 60% 0 60%;
	background: var(--midori-green);
	content: "";
	rotate: -20deg;
	translate: 0 -0.05em;
}

/* ============================================================
 * 本文の中に置いた部品は、本文の装飾を受けない
 *
 * 記事一覧や月の帯は本文（`.entry-body`）の中に差し込まれるので、
 * そのままだと **カードのリンクに下線が付き、月の帯（h3）に葉の印が付く**。
 * 部品の見た目は部品側の定義が正しいので、本文側の指定だけ打ち消す。
 *
 * ⚠️ `.entry-body a`（0,1,1）に勝つため、クラスを1つ足して（0,2,1）で当てる。
 *    葉の印は `body.midonavi .entry-body h3::before`（0,2,2）なので、
 *    こちらは `body.midonavi` を頭に付けて（0,3,2）で消す。
 * ========================================================== */

.entry-body :is(
	.info-card__link,
	.course-card__link,
	.pickup-card__link,
	.event-card__link,
	.tile-card__link,
	.district-card__link,
	.link-card__link,
	.post-filter__chip,
	.post-filter__toggle,
	.btn-yellow,
	.btn-green,
	.btn-outline
) {
	text-decoration: none;
}

.entry-body :is(
	.info-card__link,
	.course-card__link,
	.pickup-card__link,
	.event-card__link,
	.tile-card__link,
	.district-card__link,
	.link-card__link
) {
	color: inherit;
}

/* 月の帯は h3 だが、本文の見出しではなくセクションの区切り */
.entry-body .event-month__head,
.entry-body--shift .event-month__head {
	display: block;
	margin-top: 0;
	padding: var(--space-xs) var(--space-lg);
	border-radius: var(--radius-card);
	background: var(--midori-green-light);
	font-size: var(--fs-sec-title);
	color: #fff;
	text-align: center;
}

body.midonavi .entry-body .event-month__head::before,
body.midonavi .entry-body--shift .event-month__head::before {
	content: none;
}

/* 本文の ul の字下げ（padding-left）を部品の格子に持ち込まない。見出しと左端がずれる */
body.midonavi .entry-body .entry-block ul {
	padding-inline-start: 0;
	list-style: none;
}

/*
 * 本文（DB）に入っているコアのボタン。旧サイトの灰色・下線のままだと
 * このサイトのボタンと別物に見えるので、白い枠のボタン（.btn-outline）に揃える。
 * 色はインラインの style と色クラス（has-black-color は !important）で入っているので、
 * こちらも !important でしか勝てない。
 */
body.midonavi .entry-body .wp-block-button__link {
	display: block;

	/* 本文側のスタイル（web-photo-btn）が高さを 45px に固定しており、padding を足すと文字が下にはみ出す */
	height: auto;
	padding: var(--space-sm) var(--space-3xl);
	border: 2px solid var(--midori-green-deep);
	border-radius: 70px;
	background: #fff !important;
	color: var(--midori-green-deep) !important;
	font-size: var(--fs-btn-sm) !important;
	font-weight: 700;
	line-height: 1.45;
	text-align: center;
	text-decoration: none;
}

body.midonavi .entry-body .wp-block-button__link:hover {
	background: var(--midori-green-deep) !important;
	color: #fff !important;
	opacity: 1;
}

/* 部品の中の見出し（sec-title）も本文の帯にしない */
.entry-body .sec-title__ja {
	margin-top: 0;
	padding: 0;
	background: none;
	font-size: var(--fs-sec-title);
	color: var(--midori-green-text);
}

body.midonavi .entry-body .sec-title__ja::before {
	content: none;
}

/* ============================================================
 * 本文の中の「幅広」ブロック
 *
 * 既存の本文には SWELL の `alignwide` / `alignfull` が入っている。
 * あれは**本文幅より外へ広げる**ための指定なので、白い枠のカードや
 * 本文幅のコンテナに入れたまま出すと左右へはみ出す
 * （ハイキングの本文で 1440px のとき左右 +11px ずつ出ていた）。
 *
 * このテーマは本文幅を `--content-width` で決めているので、
 * 幅広ブロックも親の幅に収める。
 * ========================================================== */

/*
 * ⚠️ SWELL は幅だけでなく **`position: relative; left: -100px`** でも外へずらす。
 *    幅を戻しただけだと左へ 100px ずれたままになるので `left` も戻すこと。
 */
.entry-body :is(.alignwide, .alignfull),
.intro-card :is(.alignwide, .alignfull) {
	left: auto;
	width: 100%;
	max-width: 100%;
	margin-inline: 0;
}

/* 画像の中央寄せ（aligncenter）はそのまま活かす */
.entry-body .aligncenter {
	margin-inline: auto;
}

/* ============================================================
 * 投稿ページ・一覧ページの地色（2026-09-25）
 * Figma: PC_投稿ページヘッダー / PC_カテゴリーページ は地が #e9f4dd（淡い緑）。
 * ほかの下層より一段濃い。白い本文の箱・白いカードをはっきり浮かせる。
 * body も同じ色にしておく（フッターの波の谷間から透けるため。上の body の指定と同じ理由）。
 * ========================================================== */

body.midonavi.single,
body.midonavi:has(.archive-page) {
	background: #e9f4dd;
}

body.midonavi.single .site-main,
body.midonavi:has(.archive-page) .site-main {
	background: #e9f4dd;
}

/* ============================================================
 * 投稿ページ（single.php）
 * Figma: PC_投稿ページヘッダー (6234:2374) / SP (6234:2540)
 * ========================================================== */

/* 全幅の緑の帯。右端の飾り（003 4）は帯の形で切り抜く */
.post-hero {
	position: relative;
	overflow: hidden;
	background: var(--midori-green);
}

.post-hero__inner {
	position: relative;
	z-index: 1;
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: var(--space-2xs);
	width: var(--content-width);
	min-height: clamp(180px, 15.6vw, 300px);
	margin-inline: auto;
	padding-block: var(--space-3xl);

	/* 飾りに文字が掛からないよう、右を空けておく */
	padding-inline-end: min(30%, 360px);
}

.post-hero__date {
	margin: 0;
	font-size: var(--fs-card-date);
	font-weight: 700;
	color: rgb(0 0 0 / 60%);
}

/* カンプは緑の地に黒の太字。白抜きにしない */
.post-hero__title {
	margin: 0;
	font-size: var(--fs-sec-title);
	font-weight: 700;
	line-height: 1.45;
	color: #1a1a1a;
}

/* Figma: 幅 671px・帯の上へ 246px はみ出し、右は画面の外へ 253px 出る */
.post-hero__deco {
	position: absolute;
	top: -82%;
	right: -13%;
	width: 35%;
	max-width: none;
	height: auto;
	pointer-events: none;
}

.post-page {
	width: min(100% - var(--gutter) * 2, 1150px);
	margin-inline: auto;
	padding-block: var(--space-6xl) var(--space-7xl);
}

/* 角丸の大きい白い箱 */
.post-card {
	padding: var(--space-3xl) var(--space-xl) var(--space-xl);
	border-radius: 40px;
	background: #fff;
}

/* 破線の下にカテゴリの札（Figma: 角の小さい緑の札） */
.post-card__foot {
	margin-top: var(--space-2xl);
	padding-top: var(--space-lg);
	border-top: 1px dashed #d9d9d9;
}

.post-card__terms {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-2xs);
	margin: 0;
	padding: 0;
	list-style: none;
}

.post-card__terms a {
	display: inline-block;
	padding: 2px var(--space-2xs);
	border-radius: 2px;
	background: var(--midori-green);
	color: #fff;
	font-size: var(--fs-card-date);
	line-height: 1.6;
	text-decoration: none;
}

/* ============================================================
 * 一覧ページ（parts/page/archive.php）
 * Figma: PC_カテゴリーページ (6235:1183) / SP (6235:1349)
 * 値は get_design_context で取った実値（2026-09-25）。幅・座標は写さず、
 * 文字・色・角丸・余白の程度だけ取っている。
 * ========================================================== */

.archive-page {
	padding-block: var(--space-md) var(--space-7xl);
}

/* 角丸30px の濃い緑（#2f7b3b）の帯。ほぼ画面いっぱい（Figma: 左右 18px・高さ 280px） */
.archive-hero {
	display: flex;
	align-items: center;
	min-height: clamp(165px, 14.6vw, 280px);
	margin-inline: var(--space-md);
	padding: var(--space-2xl) clamp(var(--space-2xl), 5.2vw, 100px);
	border-radius: 30px;
	background: var(--midori-green-text);
}

/* Figma: 50px Bold 白（SP 30px） */
.archive-hero__title {
	margin: 0;
	font-size: clamp(30px, 1.5vw + 24px, 50px);
	font-weight: 700;
	line-height: 1.3;
	color: #fff;
}

/* 本文幅 1000px。帯の下 64px から */
.archive-page__body {
	display: flex;
	flex-direction: column;
	width: min(100% - var(--gutter) * 2, 1000px);
	margin: var(--space-4xl) auto 0;
	padding-top: var(--space-2xs);
}

/* ---- 分類の並び（Figma: 6235:2019〜2053） -------------------- */

/* 見出し 24px Bold #333 */
.term-nav__title {
	margin: 0;
	padding-top: var(--space-xs);
	font-size: clamp(20px, 0.376vw + 18.6px, 24px);
	font-weight: 700;
	line-height: 1.4;
	color: #333;
}

/* 📁 [親] ■ いま ■ [子][子] … 間は 5.5px */
.term-nav__path {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px 5.5px;
	margin: 0;
	padding: var(--space-sm) 4px 0;
	font-size: 11px;
	line-height: 1;
}

/* フォルダのアイコン（SWELL のアイコンフォント icomoon の \e92f） */
.term-nav__icon::before {
	font-family: icomoon !important;
	font-size: 11px;
	color: var(--midori-green);
	content: "\e92f";
}

/* 札: 11px・角丸1px・緑地に白 */
.term-nav__chip,
.term-nav__current {
	padding: 4px 5.5px;
	border-radius: 1px;
	font-size: 11px;
	line-height: 1;
	text-decoration: none;
}

.term-nav__chip {
	background: var(--midori-green);
	color: #fff;
}

/* いま見ている分類は緑の文字だけ（押せない） */
.term-nav__current {
	color: var(--midori-green);
}

/* 区切り: 緑の四角 10px・不透明度80% */
.term-nav__sep {
	flex: none;
	width: 10px;
	height: 10px;
	margin-inline-end: 2.75px;
	background: var(--midori-green);
	opacity: 0.8;
}

/* ---- カード（Figma: 6235:2058 ほか） ------------------------ */

/*
 * 3列・列の間 16px・段の間 40px（カードの高さは中身なり）。
 * 分類の並びから 64px 空ける。
 */
.archive-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(280px, 100%), 1fr));
	gap: var(--space-2xl) var(--space-sm);
	margin: var(--space-4xl) 0 0;
	padding: 0;
	list-style: none;
}

/*
 * カードは地の色のまま（白く塗らない）。上下に影を落として浮かせる。
 * Figma: 写真側 0 -5px 5px / 本文側 0 5px 5px（どちらも rgba(0,0,0,.1)）・角丸10px。
 * 2つの影を1つの箱にまとめると、写真と本文の境目に影の筋が出ない。
 */
.archive-card {
	overflow: hidden;
	border-radius: var(--radius-card);
	box-shadow: 0 -5px 5px rgb(0 0 0 / 10%), 0 5px 5px rgb(0 0 0 / 10%);
}

.archive-card__link {
	display: flex;
	flex-direction: column;
	height: 100%;
	color: inherit;
	text-decoration: none;
}

/* Figma: 323x181 */
.archive-card__photo {
	width: 100%;
	height: auto;
	aspect-ratio: 323 / 181;
	object-fit: cover;
}

.archive-card__body {
	display: flex;
	flex-direction: column;
	padding: var(--space-sm) 10px 18px;
}

/* 札: 12.8px・角丸30px・上下2px 左右8px。札どうしは 左右12px・上下4px 空く */
.archive-card__tags {
	display: flex;
	flex-wrap: wrap;
	margin: 0 0 var(--space-2xs);
}

.archive-card__tag {
	margin: 2px 6px;
	padding: 2px 8px;
	border-radius: 30px;
	background: var(--midori-green);
	color: #fff;
	font-size: 12.8px;
	line-height: 1.6;
}

/* 日付: 12.8px #333 */
.archive-card__date {
	font-size: 12.8px;
	line-height: 1.6;
	color: #333;
}

/* タイトル: 16px Bold 黒・行高24px */
.archive-card__title {
	margin-top: 5px;
	font-size: var(--fs-card-title);
	font-weight: 700;
	line-height: 1.5;
	color: #000;
}

/* ---- ページ送り（Figma: 6235:2539） --------------------------
 * 36px の丸。現在地は緑、それ以外は灰色（#dedede）に白文字。影は下へ2段。
 * ほかのページのページ送り（白地に緑の枠）とは別の見た目なので、一覧の中だけに当てる。
 */
.archive-page .pagination {
	padding-top: 39px;
}

.archive-page .pagination__list {
	gap: 0;
}

.archive-page .pagination a,
.archive-page .pagination span {
	min-width: 36px;
	height: 36px;
	margin: 4px;
	padding-inline: var(--space-2xs);
	border: 0;
	border-radius: 18px;
	background: #dedede;
	color: #fff;
	font-size: 14px;
	font-weight: 400;
	filter: drop-shadow(0 2px 2px rgb(0 0 0 / 5%)) drop-shadow(0 4px 2px rgb(0 0 0 / 10%));
}

.archive-page .pagination .current,
.archive-page .pagination a:hover {
	background: var(--midori-green);
	color: #fff;
}

.archive-page .pagination .dots {
	min-width: 0;
	margin: 0;
	padding-inline: 6px;
	background: none;
	color: #aaa;
	font-size: 13px;
	filter: none;
}

@media (width <= 767px) {

	.post-hero__inner {
		padding-block: var(--space-2xl);
		padding-inline-end: 22%;
	}

	.post-hero__deco {
		top: -40%;
		right: -30%;
		width: 70%;
	}

	.post-page {
		padding-block: var(--space-xl) var(--space-6xl);
	}

	.post-card {
		padding: var(--space-xl) var(--space-sm) var(--space-lg);
		border-radius: 24px;
	}

	/* Figma SP: 左右 15px・高さ 165px・角丸30px */
	.archive-hero {
		margin-inline: var(--space-sm);
	}

	/* SP のカンプは一覧が白い箱に入っている */
	.archive-page__body {
		margin-top: var(--space-2xl);
		padding: var(--space-md) var(--space-sm);
		border-radius: 16px;
		background: #fff;
	}

	.archive-grid {
		margin-top: var(--space-xl);
	}
}

/*
 * 絞り込み・ページ送りをリロードせずに差し替えている間（js/page.js）。
 * 一覧だけ少し薄くして、押したことが伝わるようにする。チップは押せるまま。
 */
.is-loading > .post-filter ~ * {
	opacity: 0.45;
	transition: opacity 0.2s var(--ease-soft);
	pointer-events: none;
}

/* ============================================================
 * グルメ・特産品（本文はブロック。2026-09-29 依頼表 No.19）
 * Figma: PC-グルメ・特産品 (2066:791)
 *
 * 本文のグループに当てたスタイル（inc/content.php の末尾で登録）:
 *   .is-style-gourmet-sec     章。見出し画像＋英字＋リード＋タイル
 *   .is-style-gourmet-tiles   タイルの並び（3列）
 *   .is-style-gourmet-tile    タイル。画像＋品目名＋英字（各地区紹介のカードと同じ見た目）
 *   .is-style-gourmet-item    品目。h2（緑の帯）＋リード＋商品
 *   .is-style-gourmet-product 商品。h3（葉の印）＋段組み＋表。白い箱
 * ⚠️ グループの中身は `.wp-block-group__inner-container` で1段包まれる（SWELL）。並びはその div に当てる。
 * ========================================================== */

.entry-body .is-style-gourmet-sec,
.entry-body .is-style-gourmet-item {
	margin-top: var(--space-6xl);
}

.entry-body .is-style-gourmet-sec {
	text-align: center;
}

body.midonavi .entry-body > .is-style-gourmet-sec:first-child {
	margin-top: 0;
}

.entry-body .wp-block-group__inner-container > :first-child {
	margin-top: 0;
}

/* 見出し（手書き風の文字画像）と英字。トップの見出しと同じ組み */
.entry-body .gourmet-sec__head {
	display: flex;
	justify-content: center;
	margin: 0;
}

.entry-body .gourmet-sec__head img {
	width: auto;
	height: clamp(56px, 6vw, 83px);
}

.entry-body .gourmet-sec__en {
	margin: var(--space-xs) 0 0;
	font-size: var(--fs-sec-en);
	font-weight: 700;
	line-height: 1.2;
	color: var(--midori-green-text);
}

.entry-body .gourmet-sec__lead {
	margin-top: var(--space-md);
}

/* お土産販売店の章は文字の見出し（緑の帯にしない） */
.entry-body .is-style-gourmet-sec h2 {
	padding: 0;
	background: none;
	font-size: var(--fs-intro-title);
	color: var(--midori-green-text);
}

/* --- タイル --- */

.entry-body .is-style-gourmet-tiles {
	margin-top: var(--space-2xl);
}

.entry-body .is-style-gourmet-tiles > .wp-block-group__inner-container {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
	gap: var(--space-xl) var(--space-2xl);
}

.entry-body .is-style-gourmet-tile {
	overflow: hidden;
	margin: 0;
	border-radius: 20px;
	transition: translate 0.3s var(--ease-soft);
}

.entry-body .is-style-gourmet-tile:hover {
	translate: 0 -4px;
}

/*
 * 写真の下端に緑の帯（品目名＋英字）を重ねる。
 * 3行の grid にして写真を全行に広げ、名前と英字を下の2行に置く（帯が写真に重なる）。
 */
.entry-body .is-style-gourmet-tile > .wp-block-group__inner-container {
	display: grid;
	grid-template-rows: 1fr auto auto;
	margin-bottom: 0; /* SWELL が内側の div に付ける下 16px。残すと角丸が透明の部分に掛かり、帯の下の角が四角く見える */
	color: #fff;
}

.entry-body .is-style-gourmet-tile .wp-block-image {
	grid-area: 1 / 1 / 4 / 2;
	margin: 0;
}

.entry-body .is-style-gourmet-tile .wp-block-image a:hover {
	opacity: 1;
}

.entry-body .is-style-gourmet-tile .wp-block-image img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 400 / 205;
	object-fit: cover;
}

.entry-body .gourmet-tile__name,
.entry-body .gourmet-tile__en {
	grid-column: 1;
	z-index: 1;
	margin: 0;
	background: var(--midori-green);
	font-weight: 700;
	line-height: 1.2;
	color: #fff;
	text-align: center;
	pointer-events: none; /* 帯を押しても下の写真のリンクが効くように */
}

.entry-body .gourmet-tile__name {
	grid-row: 2;
	padding-top: var(--space-3xs);
	font-size: var(--fs-district-ja);
}

.entry-body .gourmet-tile__en {
	grid-row: 3;
	padding-bottom: var(--space-2xs);
	font-size: var(--fs-district-en);
}

/* --- 品目と商品 --- */

.entry-body .is-style-gourmet-item {
	width: min(100%, 971px);
	margin-inline: auto;
}

/* お土産販売店の章は、章の中にそのまま商品が並ぶ。章の中央揃えを受けないように、幅も品目にそろえる */
.entry-body .is-style-gourmet-sec .is-style-gourmet-product {
	width: min(100%, 971px);
	margin-inline: auto;
	text-align: start;
}

.entry-body .is-style-gourmet-product {
	margin-top: var(--space-xl);
	padding: var(--space-lg) var(--space-xl);
	border-radius: 20px;
	background: #fff;
}

.entry-body .is-style-gourmet-product h3 {
	margin-top: 0;
}

.entry-body .is-style-gourmet-product .wp-block-columns {
	margin-block: var(--space-md) 0;
}

.entry-body .is-style-gourmet-product .wp-block-image img {
	border-radius: 6px;
}

@media (width <= 767px) {

	.entry-body .is-style-gourmet-product {
		padding: var(--space-md);
	}
}

/* ============================================================
 * 続けて並んだリンクカード（inc/content.php の midonavi_group_link_cards が包む）
 * 2026-09-29 クライアント修正 PDF p.16〜17: レジャー・温泉の施設紹介を、リード文なしの記事カードの並びに。
 * 見た目は記事カード（.info-card）に揃える: 写真が上（全体を見せる）・タイトルだけ。SP は2列（PDF 共通の指摘）。
 * ========================================================== */
.entry-body .link-card-grid,
.link-card-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(220px, 100%), 1fr));
	gap: var(--space-lg) var(--space-md);
}

.entry-body .link-card-grid > .link-card + .link-card {
	margin-top: 0;
}

.link-card-grid .link-card__link {
	grid-template-columns: minmax(0, 1fr);
	align-items: start;
	align-content: start;
	height: 100%;
	gap: var(--space-sm);
}

.link-card-grid .link-card__photo {
	width: 100%;
	height: auto;
	max-height: none;
	aspect-ratio: 4 / 3;
}

.link-card-grid .link-card__text {
	display: none;
}

@media (width <= 767px) {

	.entry-body .link-card-grid,
	.link-card-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: var(--space-md) var(--space-xs);
	}
}

/* ============================================================
 * 本文の見出し（h2 = 緑の帯）の文字色（2026-09-29 クライアント修正 PDF p.14「WEB写真館の表示が変」）
 *
 * 既存の本文には SWELL の色クラス（has-swl-main-color 等。!important 付き）が付いた h2 があり、
 * 帯の緑の上に緑の文字で読めなかった（WEB写真館の「WEB写真館からのお知らせ」など）。
 * 帯の上の文字は白に揃える。中身の無い h2（WEB写真館の先頭の写真に乗っていた空の見出し）は帯だけの線になるので出さない。
 * ========================================================== */
body.midonavi .entry-body h2.has-text-color {
	color: #fff !important;
}

.entry-body h2:empty {
	display: none;
}

/* WEB写真館のページ内の目次（黄色の帯の中のリンク）。本文リンクの緑・下線だと帯の上で読みにくい */
.entry-body .menulist a {
	color: var(--midori-green-deep);
	font-weight: 700;
	text-decoration: none;
}

/* ============================================================
 * お知らせ一覧の絞り込み（parts/blocks/archive-search.php。2026-09-29 クライアント修正 PDF p.6）
 * 中身の部品は検索パネルと同じ .search-panel__*（css/layout.css）。一覧の上に置く箱として形だけ変える。
 * ========================================================== */
.archive-search.search-panel__card {
	grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr));
	gap: var(--space-lg) var(--space-2xl);
	margin: 0;
	padding: var(--space-lg) var(--space-xl);
	border-radius: 20px;
	box-shadow: none;
	border: 2px solid var(--midori-bg-soft);
}

.archive-search ul {
	padding: 0;
	list-style: none;
}

.archive-search__actions {
	grid-column: 1 / -1;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: var(--space-lg);
}

.archive-search__actions .search-panel__submit {
	margin: 0;
}

.archive-search__reset {
	font-size: 14px;
	color: var(--midori-green-deep);
}

@media (width <= 767px) {

	.archive-search.search-panel__card {
		padding: var(--space-md);
	}
}

/*
 * 本文の中に差し込んだカードの格子では、本文のリストの「項目の間 4px」（.entry-body li + li）を効かせない。
 * 2枚目以降のカードだけ 4px 下がり、横に並んだカードの頭が揃っていなかった（2026-09-29 SP 照合で発見）。
 */
.entry-body :is(.card-grid, .event-cards, .person-cards, .archive-grid, .tile-cards, .district-cards, .post-filter__chips, .menulist) > li + li {
	margin-top: 0;
}

/*
 * 同じく、本文の箇条書きの字下げ（.entry-body ul の padding-left: 1.4em）も効かせない（2026-10-01 クライアント修正）。
 * 格子の左にだけ 21〜24px 空いて右に寄り、スマホのイベントカレンダーで2列が中央に揃っていなかった
 * （ゆかりのある方々・WEB写真館の格子、人物カードの中のリストも同じだった）。
 */
.entry-body :is(.card-grid, .event-cards, .person-cards, .archive-grid, .tile-cards, .district-cards, .post-filter__chips, .person-card__points, .person-card__links) {
	padding-inline: 0;
}

/*
 * 2カラムの紹介カード（歴史・都市と自然）。Figma: PC-都市と自然 2066:185 の Frame 229/230、PC 歴史 2066:676。
 * ほかの白い枠のカード（ハイキングのリードなど）とは作りが違う:
 *   - 枠は太い 7px の濃い緑・角丸 20px
 *   - 見出しは帯にせず、左寄せの緑の太字（27〜28px）。後ろに薄緑の丸い飾り（miuru-shade = deco-shade.png）が
 *     カードの左から 1/3 ほどの位置にあり、下半分は写真に隠れる
 *   - 写真は角丸なし・544:277
 *   - 「詳しくはこちら」は右下・黒の太字 23.5px
 * 2枚の写真の頭を揃えるため、カードを subgrid にして見出し・写真・リンクの段を横のカードと共有する
 * （Figma でも見出しが2行と1行で違うが、写真の上端は同じ高さ）。
 */
.feature-cards .intro-card {
	position: relative;
	isolation: isolate;
	gap: var(--space-lg);
	padding: var(--space-3xl) var(--space-2xl) var(--space-xl);
	border-width: 7px;
	border-color: var(--midori-green-deep);
	border-radius: 20px;
	overflow: hidden;
}

.feature-cards .intro-card::before {
	content: "";
	position: absolute;
	z-index: -1;
	top: var(--space-lg);
	left: 32%;
	width: 35%;
	aspect-ratio: 218 / 189;
	translate: none; /* 下の「白い箱の共通」の中央寄せを打ち消す */
	background: url("../images/deco-shade.png") center / contain no-repeat;
	pointer-events: none;
}

.feature-cards .intro-card__title {
	padding: 0;
	border-radius: 0;
	background: none;
	font-size: clamp(20px, 0.9vw + 11px, 28px);
	line-height: 1.45;
	color: var(--midori-green-text);
	text-align: left;
	text-wrap: pretty; /* SP で「る！」だけが次の行に残らないように */
}

.feature-cards .intro-card__photo img {
	border-radius: 0;
}

.feature-cards .intro-card__more a {
	font-size: clamp(18px, 0.6vw + 12px, 24px);
	color: #000;
}

@media (width <= 767px) {

	.feature-cards .intro-card {
		gap: var(--space-sm);
		padding: var(--space-lg) var(--space-sm) var(--space-md);
		border-width: 5px;
		border-radius: 14px;
	}

	.feature-cards .intro-card::before {
		top: var(--space-xs);
	}
}

/* 見出し・写真・リンクの3段だけのカード（今の歴史・都市と自然）は、横のカードと段を揃える */
@supports (grid-template-rows: subgrid) {

	.feature-cards .intro-card:not(:has(.intro-card__text, .intro-card__links, .intro-card__meta)) {
		display: grid;
		grid-row: span 3;
		grid-template-rows: subgrid;
	}
}

/*
 * 地区紹介のページヘッダー: 右は写真（Figma 2026-09-29 更新）。黄色の版はイラストを切り抜かずに収める（contain）作りなので、
 * 写真のときだけ枠いっぱいに切り抜く（page-landing.php が cover を渡す）。
 */
.page-hero--yellow.page-hero--cover .page-hero__photo img {
	object-fit: cover;
	object-position: center;
}

/* 写真の幅は Figma の比率（1300 のうち右の 341px）。SP は縦積みのまま（responsive の指定） */
@media (width > 767px) {

	.page-hero--yellow.page-hero--cover {
		grid-template-columns: minmax(0, 959fr) minmax(0, 341fr);
	}

	.page-hero--yellow.page-hero--cover .page-hero__photo {
		aspect-ratio: 341 / 300;
	}
}

/*
 * ミウルのおうちは地色がクリーム〜淡い黄色（Figma 2026-09-29 更新: PC 6017:3544 / SP 4365:421。
 * PC のアートボードを測ると上 #fffefc → 下 #fff4b2 のグラデーション）。
 * ほかの下層と同じく、body はグラデーションの終わりの色で受ける（フッターの波の谷間）。
 */
body.midonavi.is-miuru-house .site-main {
	background: linear-gradient(180deg, #fffefc 0%, #fff4b2 100%);
}

body.midonavi.is-miuru-house {
	background: #fff4b2;
}

/*
 * 投稿ページの地は、Figma（2026-09-29 更新の PC_投稿ページヘッダー 4365:1154 / SP 4365:1376）では
 * 単色ではなく上 #f5f8ec → 下 #eaf7df のごく薄いグラデーション。一覧ページは単色 #e9f4dd のまま。
 */
body.midonavi.single {
	background: #eaf7df;
}

body.midonavi.single .site-main {
	background: linear-gradient(180deg, #f5f8ec 0%, #eaf7df 100%);
}

/* ============================================================
 * 白い箱の共通の見た目（Figma 2026-09 の全ページ: Rectangle 212 / 213）
 * ハイキングの紹介・アクセスの「都心からのアクセス」・ミウルのプロフィール・地区紹介・コース紹介の箱。
 *   - 枠は 7px の濃い緑・角丸 20px（以前は 2px だった）
 *   - 見出しの後ろ（中央やや上）に薄緑の丸い飾り miuru-shade（= deco-shade.png、218x189）
 * 飾りは箱の中に置き、箱の白地より上・中身より下に描く（isolation で箱を重なりの基準にして z-index:-1）。
 * 2カラムの紹介カード（.feature-cards）は飾りの位置が左寄りなので、上の「2カラムの紹介カード」で上書きしている。
 * ========================================================== */

.intro-card,
.district-intro,
.is-style-course-intro {
	position: relative;
	isolation: isolate;
	border-width: 7px;
	border-color: var(--midori-green-deep);
}

.intro-card::before,
.district-intro::before,
.is-style-course-intro::before {
	content: "";
	position: absolute;
	z-index: -1;
	top: var(--space-lg);
	left: 50%;
	width: min(218px, 35%);
	aspect-ratio: 218 / 189;
	translate: -50% 0;
	background: url("../images/deco-shade.png") center / contain no-repeat;
	pointer-events: none;
}

/* 箱の見出し: 帯にしない緑の太字 30px（Figma: 相模原市緑区へ都心からのアクセス 6210:1025 / コース名 6111:618） */
.intro-card .entry-body h2 {
	font-size: clamp(22px, 0.8vw + 14.6px, 30px);
	color: var(--midori-green-text);
}

.is-style-course-intro > .wp-block-group__inner-container > h1 {
	padding: 0;
	border-radius: 0;
	background: none;
	font-size: clamp(22px, 0.8vw + 14.6px, 30px);
}

@media (width <= 767px) {

	.intro-card,
	.district-intro,
	.is-style-course-intro {
		border-width: 5px;
	}

	.intro-card::before,
	.district-intro::before,
	.is-style-course-intro::before {
		top: var(--space-xs);
	}
}

/*
 * ハイキングの「おすすめスポット」（本文の記事一覧。page-hiking.php の .hiking-more）。
 * Figma メモ 6294:1758「おすすめスポットをもってくる（見え方はモデルコース紹介と同じに）」（2026-09-29）。
 * 記事カード（.info-card）は写真を切り抜かない決まり（2026-09-28）だが、ここは景色の写真でモデルコースのカードと並ぶので、
 * モデルコースのカードと同じく枠いっぱいに切り抜き、タイトルも緑の太字にする。
 */
.hiking-more .info-card .info-card__photo {
	object-fit: cover;
	background: none;
}

.hiking-more .info-card .info-card__title {
	font-size: var(--fs-btn-sm);
	font-weight: 700;
	color: var(--midori-green-deep);
}

/* 関連リンクのボタン（SWELL のリンクリスト）に下線を出さない（Figma 6294:1590: 白の太字・下線なし） */
.entry-body .swell-block-linkList__link {
	text-decoration: none;
}

/*
 * タイルの見出し画像（観光の「モデルコース」「歴史スポット」）は高さで揃える（Figma 6012:640 / 6064:347 はどちらも高さ約 88px）。
 * 素材の寸法がまちまち（head-course.png 549x89 / head-history-spot.png 816x184）なので、幅なりにすると歴史スポットだけ倍近く大きくなっていた。
 * SP は幅で決める指定（responsive.css）が効くので PC だけ。
 */
@media (width > 767px) {

	.tile-sec__head .sec-head__img {
		width: auto;
		height: 89px;
	}
}

/*
 * 黄色い枠のタイル（観光・都市と自然。Figma 2026-09: 6063:331 / 6015:996）は角丸 20px、名前は黒の太字 25px。
 * 以前は角丸 10px・緑の 18px だった。写真の上の角も枠に合わせて丸める。
 */
.tile-card {
	border-radius: 20px;
}

.tile-card__photo {
	border-radius: 16px 16px 0 0;
}

.tile-card__link {
	color: #000;
}

.tile-card__label {
	font-size: clamp(16px, 0.75vw + 10.6px, 25px);
}

/* =========================================================
 * 本文の SWELL ボックスメニュー（2026-09-30 指示表 行28「藤野芸術の道」）
 * SWELL はリンクの文字色を inherit にして、マスごとの色（--the-text-color。既定は白）を効かせる作り。
 * `.entry-body a` の緑がリンクに当たって、緑やベージュの地に緑の文字で読めなくなっていた
 * （藤野芸術の道は番号が地に溶けて消え、名探偵ミウル特設ページ＝指示表 行25 は目次のマスが緑の下線文字）。inherit に戻す。
 * 写真は SWELL 既定のアイコン大（48px 前後）だと作品が判別できないので、マスの幅いっぱいに広げる。
 * ただしアイコンの大きさを 0 にしているメニュー（名探偵ミウル特設の目次）は、画像を隠す意図なので対象外。
 * ========================================================= */
.entry-body .swell-block-box-menu .swell-block-box-menu__link {
	color: inherit;
	text-decoration: none;
}

.entry-body .swell-block-box-menu:not([style*="--the-icon-size:0"]) [data-icon-type="img"] .swell-block-box-menu__figure {
	width: 100%;
	height: auto;
	max-width: none;
}

/* 比率は写真のほうで決める（縦長の写真が混じってもマスの高さが揃う） */
.entry-body .swell-block-box-menu:not([style*="--the-icon-size:0"]) [data-icon-type="img"] .swell-block-box-menu__figure img {
	display: block;
	width: 100%;
	height: auto;
	max-width: none;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	border-radius: 6px;
}

@media (max-width: 767px) {
	/* 4列で1マス 80px 弱しかないので、写真の幅を削る内側の余白を詰める */
	.entry-body .swell-block-box-menu[class] .swell-block-box-menu__link {
		padding: var(--space-2xs) var(--space-3xs);
	}
}

.entry-body .swell-block-box-menu .swell-block-box-menu__text {
	margin-top: var(--space-2xs);
	line-height: 1.4;
}

/* =========================================================
 * 2026-09-30 PPTX「0930デザイン修正（緑区役所地域振興課）」の文字サイズ・飾り（tasklist #1461）
 * 共通の文字サイズ（tokens.css）は変えず、指摘された部品だけ上書きする（トップなどへ波及させないため）。
 * ========================================================= */

/* p13: 地区紹介の箱の見出しの後ろの薄緑の飾りが、地図と地区名のラベルに重なって邪魔 → 地区紹介だけ出さない */
.district-intro::before {
	content: none;
}

/* p10: 都市と自然（と歴史）の2カラムの紹介カードは、見出し 28px → 22px、「詳しくはこちら」24px → 18px（2〜3段階下げ） */
.feature-cards .intro-card__title {
	font-size: clamp(17px, 0.5vw + 14.8px, 22px);
}

.feature-cards .intro-card__more a {
	font-size: clamp(15px, 0.3vw + 13.7px, 18px);
}

/* p15: イベントカレンダーの月の帯 30px → 22px、イベントの名前 24px → 18px */
.event-month__head,
.entry-body .event-month__head,
.entry-body--shift .event-month__head {
	font-size: clamp(18px, 0.4vw + 16.2px, 22px);
}

.event-card__title {
	font-size: clamp(15px, 0.3vw + 13.7px, 18px);
}

/* p5: タイルの名前は全角スペースの位置でだけ折り返す（parts/blocks/tile-cards.php で区切りごとに span） */
.tile-card__label-part {
	display: inline-block;
}

/*
 * p5「写真＋バーの組み合わせのアイコン全般、写真がなるべく全体が見えるように」:
 * 緑の帯を写真に重ねず、写真の下に出す（各地区のカード・グルメの品目タイル）。
 */
.district-card__link {
	background: var(--midori-green);
}

.district-card__band {
	position: static;
}

.entry-body .is-style-gourmet-tile > .wp-block-group__inner-container {
	grid-template-rows: auto auto auto;
	background: var(--midori-green);
}

.entry-body .is-style-gourmet-tile .wp-block-image {
	grid-area: 1 / 1 / 2 / 2;
}

/*
 * p5・p10「PC 版の各地区紹介の6地区を横1列に（この縦横比である必要はない）」:
 * 1024px 以上は6枚を1列に。1枚 200px 前後になるので写真は 4:3、帯の文字も一段小さく。
 */
@media (min-width: 1024px) {

	.district-cards {
		grid-template-columns: repeat(6, minmax(0, 1fr));
		gap: var(--space-sm);
	}

	.district-card__photo {
		aspect-ratio: 4 / 3;
	}

	.district-card__ja {
		font-size: clamp(17px, 0.5vw + 11px, 22px);
	}

	.district-card__en {
		font-size: 12px;
	}
}

/* p9: グルメ・特産品の冒頭の章へのボタン（parts/blocks/anchor-nav.php）。白地に緑の枠の丸いボタンを横に並べる */
.anchor-nav {
	width: var(--content-width);
	margin: var(--space-xl) auto 0;
}

.anchor-nav__list {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--space-xs) var(--space-md);
	margin: 0;
	padding: 0;
	list-style: none;
}

.anchor-nav__link {
	display: inline-block;
	min-width: 10em;
	padding: var(--space-xs) var(--space-xl);
	border: 2px solid var(--midori-green);
	border-radius: 999px;
	background: #fff;
	font-size: clamp(15px, 0.3vw + 13.7px, 18px);
	font-weight: 700;
	color: var(--midori-green-text);
	text-align: center;
	text-decoration: none;
}

@media (max-width: 767px) {

	.anchor-nav__list {
		flex-wrap: nowrap;
		gap: var(--space-2xs);
	}

	.anchor-nav__list > li {
		flex: 1 1 0;
	}

	.anchor-nav__link {
		display: block;
		min-width: 0;
		padding: var(--space-2xs) var(--space-3xs);
		font-size: 14px;
		white-space: nowrap; /* 「お土産販売店」が2行にならないように（3つ並ぶと1つ 100px 前後） */
	}
}

/*
 * p8: モデルコースの写真
 * - 紹介の写真は切り抜かずに全体を出す（陣馬山の白馬の像の首が切れていた）。高さだけ上限を付けて縦長でも伸びすぎないように。
 * - 行程の写真は比率固定のまま、押すと元の写真を拡大（js/page.js の .mdn-zoom）。
 */
.is-style-course-intro > .wp-block-group__inner-container > .wp-block-image img {
	width: 100%;
	height: auto;
	max-height: 600px;
	aspect-ratio: auto 4 / 3; /* 読み込み後は写真の比率。読み込み前（遅延読み込み）は 4:3 で場所を取る */
	object-fit: contain; /* 縦長の写真は高さ 600px に収めて左右を空ける */
}

.is-zoomable {
	cursor: zoom-in;
}

.mdn-zoom {
	position: fixed;
	inset: 0;
	margin: auto; /* リセットの dialog { margin: 0 } で左上に寄っていたので、画面の中央に戻す */
	width: fit-content;
	height: fit-content;
	max-width: min(96vw, 1400px);
	max-height: 94vh;
	padding: 0;
	border: 0;
	border-radius: 8px;
	background: transparent;
	overflow: visible;
}

.mdn-zoom::backdrop {
	background: rgb(0 0 0 / 75%);
}

.mdn-zoom__img {
	display: block;
	max-width: min(96vw, 1400px);
	max-height: 90vh;
	width: auto;
	height: auto;
	border-radius: 8px;
}

.mdn-zoom__close {
	position: absolute;
	top: 8px;
	right: 8px;
	box-shadow: 0 1px 4px rgb(0 0 0 / 30%);
	width: 40px;
	height: 40px;
	padding: 0; /* SWELL の button の padding を打ち消す */
	border: 0;
	border-radius: 50%;
	background: #fff;
	font-size: 24px;
	line-height: 40px;
	color: #333;
	cursor: pointer;
}

/*
 * p7: 緑区へのアクセスの図（地図・路線図・所要時間の表）が大きすぎる → 本文幅いっぱいにせず 720px までに（中央寄せ）。
 * SP は幅いっぱいのまま。
 */
.page-body--access .entry-body .wp-block-image img {
	display: block;
	width: auto;
	max-width: min(100%, 720px);
	margin-inline: auto;
}

/*
 * 藤野芸術の道（投稿 7194 fujino-art-load-special）の作品の解説は、白の太字にそろえる（2026-10-01 クライアント修正）。
 * 解説は作品の写真を敷いたカバーブロックの上の段落。カバーは写真の明るさを自動で判定して、
 * 明るい写真のときだけ is-light を付けて文字を黒にする（28作品中8つが黒だった）。本文（DB）は触らず表示で白に統一する。
 * 明るい写真の上でも読めるよう、薄い影を付ける。
 */
body.postid-7194 .entry-body .wp-block-cover .wp-block-cover__inner-container,
body.postid-7194 .entry-body .wp-block-cover .wp-block-cover__inner-container :is(p, li, span, strong, a) {
	color: #fff;
	font-weight: 700;
}

body.postid-7194 .entry-body .wp-block-cover .wp-block-cover__inner-container {
	text-shadow: 0 0 4px rgb(0 0 0 / 60%), 0 1px 2px rgb(0 0 0 / 50%);
}