/*
Theme Name: KURADEPO
Theme URI: https://kuradepo.net
Description: デジタルコンテンツ人材育成の拠点としての施設「倉敷アニメーションベース・グローブ」WEBサイトのテーマです
Version: 1.0
Author: akizuki
Author URI: https://akizuki.dev
*/

/* ==========================================================================
   Base
   ========================================================================== */
:root {
	--color-text: #1c2625;
	--color-primary: #005f56;
	--color-accent: #ff9f1c;
	--color-white: #fff;
	--color-bg: var(--color-white);
	--color-bg-sub: #f5faf9;
	--color-bg-glass: color-mix(in srgb, var(--color-white) 70%, transparent);
	--color-border: color-mix(in srgb, var(--color-primary) 10%, transparent);
	--color-line: #bfcac6;
	/* --color-primary の塗りの上の区切り線 */
	--color-line-inverse: color-mix(in srgb, var(--color-white) 35%, transparent);
	/* 補助的な文字（パンくずリストの区切りなど） */
	--color-text-muted: #667370;
	/* --color-bg-muted の上の補助的な文字（--color-text-muted はコントラスト不足のため） */
	--color-text-muted-strong: #5a6663;
	--color-bg-dark: var(--color-text);
	--color-bg-muted: #e2e8e6;
	--color-text-inverse: var(--color-bg-muted);
	--color-placeholder: #e5e5e5;
	/* 入力欄の枠（UI 部品として白背景で 3:1 以上） */
	--color-input-border: #879490;
	--color-input-placeholder: #65736d;
	--color-error: #c62828;
	--color-error-bg: #fdf2f2;
	--font-base: "Noto Sans JP", sans-serif;
	--font-serif: "Noto Serif JP", serif;
	--ease-out: cubic-bezier(0.22, 1, 0.36, 1);
	--ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
	--admin-bar-h: var(--wp-admin--admin-bar--height, 0px);
	--header-h: 72px;
	/* ページ内リンクの移動先を固定ヘッダーの下にずらす量 */
	--scroll-offset: 72px;
	/* 左右余白（画面幅の 4.4%）。本文は PC で最大幅 1200px の中央寄せ
	   コンテナ基準の値（cqi）でも使えるよう、比率を数値で持つ */
	--gutter-ratio: 4.4;
	--gutter: calc(var(--gutter-ratio) * 1%);
	--gutter-content: max(var(--gutter), (100% - 1200px) / 2);
}

@media (min-width: 1080px) {
	:root {
		--header-h: 100px;
		--scroll-offset: 104px;
	}
}

*,
*::before,
*::after {
	box-sizing: border-box;
}

html {
	scroll-behavior: smooth;
}

html.is-menu-open {
	overflow: hidden;
}

body {
	margin: 0;
	background: var(--color-bg);
	color: var(--color-text);
	font-family: var(--font-base);
}

img {
	max-width: 100%;
	height: auto;
	vertical-align: middle;
}

a {
	color: inherit;
	text-decoration: none;
}

:focus-visible {
	outline: 2px solid var(--color-primary);
	outline-offset: 2px;
}

/* Contact Form 7 の読み上げ用メッセージも同じく視覚的に隠す */
.screen-reader-text,
.wpcf7 .screen-reader-response {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

.section {
	scroll-margin-top: calc(var(--scroll-offset) + var(--admin-bar-h));
}

/* 表示切り替え（改行位置の出し分けなど） */
.u-md-up {
	display: none;
}

@media (min-width: 768px) {
	.u-sp-only {
		display: none;
	}

	.u-md-up {
		display: revert;
	}
}

.u-lg-up {
	display: none;
}

@media (min-width: 1080px) {
	.u-lg-up {
		display: revert;
	}
}

@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}

	*,
	*::before,
	*::after {
		transition-duration: 0.01ms !important;
		transition-delay: 0s !important;
		animation-duration: 0.01ms !important;
	}
}

/* 固定ヘッダーの高さ分を空ける */
.site-main {
	padding-top: var(--header-h);
}

/* ==========================================================================
   Header
   ========================================================================== */
.site-header {
	position: fixed;
	inset: var(--admin-bar-h) 0 auto;
	z-index: 100;
	display: flex;
	align-items: center;
	justify-content: space-between;
	height: var(--header-h);
	padding: 0 var(--gutter);
	background: var(--color-bg);
	border-bottom: 1px solid color-mix(in srgb, var(--color-white) 50%, transparent);
	box-shadow: 0 12px 32px color-mix(in srgb, var(--color-primary) 8%, transparent);
	transition: background-color 0.5s var(--ease-in-out), border-color 0.5s var(--ease-in-out), box-shadow 0.5s var(--ease-in-out);
}

/* すりガラス（非対応環境・透明度を下げる設定では不透明のまま） */
@supports (backdrop-filter: blur(1px)) {
	@media (prefers-reduced-transparency: no-preference) {
		.site-header {
			background: var(--color-bg-glass);
			backdrop-filter: blur(16px) saturate(180%);
		}
	}
}

/* メニューを開いたらナビとつなげて一枚の白い面にする
   （backdrop-filter は transition できないため残したまま。白の不透明なので見えない） */
.is-menu-open .site-header {
	background: var(--color-bg);
	border-bottom-color: transparent;
	box-shadow: 0 12px 32px transparent;
}

/* 600px 以下では管理バーがスクロールで消えるため上端に固定 */
@media (max-width: 600px) {
	.admin-bar .site-header {
		top: 0;
	}

	/* html の margin-top（管理バー分）とヘッダーが重なるため、その分を差し引く */
	.admin-bar .site-main {
		padding-top: calc(var(--header-h) - var(--admin-bar-h));
	}
}

.site-logo {
	margin: 0;
	line-height: 0;
}

.site-logo img {
	width: 145px;
}

@media (min-width: 1080px) {
	.site-logo img {
		width: 180px;
	}
}

.site-header__actions {
	display: flex;
	align-items: center;
	gap: 0.75rem;
}

@media (min-width: 1080px) {
	.site-header__actions {
		gap: 1.25rem;
	}
}

/* Global nav（SP / タブレット: ヘッダー下にアコーディオン）
   ========================================================================== */
.global-nav {
	position: absolute;
	inset: 100% 0 auto;
	z-index: 1;
	display: flex;
	flex-direction: column;
	gap: 1.75rem;
	max-height: calc(100dvh - var(--header-h) - var(--admin-bar-h));
	padding: 1.5rem var(--gutter) 2.5rem;
	overflow-y: auto;
	overscroll-behavior: contain;
	background: var(--color-bg);
	clip-path: inset(0 0 100% 0);
	visibility: hidden;
	transition: clip-path 0.5s var(--ease-in-out), visibility 0s 0.5s;
}

.is-menu-open .global-nav {
	clip-path: inset(0);
	visibility: visible;
	transition: clip-path 0.5s var(--ease-in-out);
}

@media (min-width: 768px) {
	.global-nav {
		gap: 3rem;
		padding: 2rem var(--gutter) 3.5rem;
	}
}

/* 余った高さに敷くバックドロップ */
.global-nav-backdrop {
	position: absolute;
	inset: 100% 0 auto;
	height: calc(100dvh - var(--header-h) - var(--admin-bar-h));
	background: color-mix(in srgb, var(--color-bg-dark) 50%, transparent);
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.4s var(--ease-out), visibility 0s 0.4s;
}

.is-menu-open .global-nav-backdrop {
	opacity: 1;
	visibility: visible;
	transition: opacity 0.4s var(--ease-out);
}

/* 600px 以下ではヘッダーが上端に固定されるため管理バー分を引かない */
@media (max-width: 600px) {
	.admin-bar .global-nav {
		max-height: calc(100dvh - var(--header-h));
	}

	.admin-bar .global-nav-backdrop {
		height: calc(100dvh - var(--header-h));
	}
}

@media (min-width: 1080px) {
	.global-nav-backdrop {
		display: none;
	}
}

.global-nav__list {
	margin: 0;
	padding: 0;
	list-style: none;
}

/* タブレット: 2列（上から順に流す）
   columns: 2 だと Safari が読み込み時の列の振り分けを更新せず、開いた後に並びが変わるためグリッドで組む。
   行数（--rows: 項目数の半分を切り上げ）は assets/js/nav.js で付ける */
@media (min-width: 768px) {
	.global-nav__list {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		grid-template-rows: repeat(var(--rows, 1), auto);
		grid-auto-flow: column;
		column-gap: 3rem;
		width: 100%;
		max-width: 768px;
		margin: 0 auto;
	}
}

.global-nav__list > li {
	border-bottom: 1px solid var(--color-line);
}

/* 項目 → SNS の順に表示 */
.global-nav__list > li,
.global-nav__extra {
	opacity: 0;
	translate: 0 16px;
	transition: opacity 0.4s var(--ease-out), translate 0.4s var(--ease-out);
}

.is-menu-open .global-nav__list > li,
.is-menu-open .global-nav__extra {
	opacity: 1;
	translate: 0;
	transition: opacity 0.6s var(--ease-out), translate 0.8s var(--ease-out);
	transition-delay: calc(0.2s + var(--i, 0) * 0.05s);
}

.global-nav__link {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	padding: 0.875em 0;
	font: 700 1rem/normal var(--font-base);
}

/* 矢印 */
.global-nav__link::after {
	content: "";
	flex-shrink: 0;
	width: 16px;
	height: 16px;
	background: url("assets/images/icon-chevron-right-sm.svg") center / contain no-repeat;
	transition: translate 0.3s var(--ease-out);
}

@media (min-width: 768px) {
	.global-nav__link {
		padding: 1em 0;
		font-size: 1.125rem;
	}
}

.global-nav__label {
	text-decoration: underline 2px transparent;
	text-underline-offset: 6px;
	transition: text-decoration-color 0.3s;
}

/* 現在地 */
.global-nav__link[aria-current="page"] .global-nav__label,
.global-nav__link:hover .global-nav__label {
	text-decoration-color: var(--color-accent);
}

.global-nav__link:hover::after {
	translate: 4px 0;
}

.global-nav__extra {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: inherit;
}

.global-nav__sns-list {
	display: flex;
	gap: 1rem;
}

.global-nav__sns {
	display: grid;
	place-items: center;
	width: 44px;
	height: 44px;
	background: var(--color-bg-dark);
	border-radius: 50%;
}

/* Global nav（PC: 横並び） */
@media (min-width: 1080px) {
	.global-nav {
		position: static;
		display: block;
		padding: 0;
		overflow: visible;
		max-height: none;
		background: none;
		clip-path: none;
		visibility: visible;
		transition: none;
	}

	.global-nav__list {
		display: flex;
		align-items: center;
		gap: 1.25rem;
		max-width: none;
		margin: 0;
	}

	.global-nav__list > li {
		border-bottom: 0;
		opacity: 1;
		translate: none;
		transition: none;
	}

	.global-nav__link {
		position: relative;
		display: block;
		padding: 0;
		font: 500 0.875rem/normal var(--font-base);
		white-space: nowrap;
	}

	.global-nav__label,
	.global-nav__link[aria-current="page"] .global-nav__label,
	.global-nav__link:hover .global-nav__label {
		text-decoration: none;
	}

	.global-nav__link::after {
		position: absolute;
		inset: calc(100% + 1.5px) 0 auto;
		width: auto;
		height: 2px;
		background: var(--color-accent);
		scale: 0 1;
		transform-origin: left;
		transition: scale 0.25s var(--ease-out);
	}

	.global-nav__link[aria-current="page"]::after,
	.global-nav__link:hover::after,
	.global-nav__link:focus-visible::after {
		translate: none;
		scale: 1;
	}

	.global-nav__extra {
		display: none;
	}
}

/* WEB予約ボタン
   ========================================================================== */
.btn-reserve {
	position: relative;
	display: flex;
	align-items: center;
	gap: 0.5rem;
	min-height: 2.5rem;
	padding: 0 1rem;
	background: var(--color-accent);
	box-shadow: 0 8px 20px color-mix(in srgb, var(--color-accent) 20%, transparent);
	color: var(--color-text);
	font: 700 0.75rem/normal var(--font-base);
	white-space: nowrap;
}

@media (min-width: 768px) {
	.btn-reserve {
		font-size: 0.875rem;
	}
}

@media (min-width: 1080px) {
	.btn-reserve {
		gap: 0.75rem;
		min-height: 3rem;
		padding: 0 1.5rem;
	}
}

.btn-reserve__icon {
	position: relative;
	width: 10px;
	height: 10px;
	transition: translate 0.3s var(--ease-out);
}

/* ホバー中は矢印をその向き（右上）へ少し動かす */
.btn-reserve:hover .btn-reserve__icon,
.btn-reserve:focus-visible .btn-reserve__icon {
	translate: 2px -2px;
}

.btn-reserve__icon img {
	position: absolute;
	top: -0.5px;
	left: -0.35px;
	max-width: none;
}

/* ハンバーガーボタン
   ========================================================================== */
.menu-toggle {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 4px;
	width: 40px;
	height: 40px;
	padding: 0;
	background: var(--color-bg);
	border: 1px solid var(--color-border);
	cursor: pointer;
	transition: background-color 0.25s, border-color 0.25s;
}

/* タッチ端末でホバーが残らないよう、ホバーできる環境のみ */
@media (hover: hover) {
	.menu-toggle:hover {
		background: var(--color-primary);
		border-color: var(--color-primary);
	}

	.menu-toggle:hover .menu-toggle__bar {
		background: var(--color-bg);
	}
}

.menu-toggle__bar {
	width: 18px;
	height: 2px;
	background: var(--color-primary);
	border-radius: 1px;
	transition: translate 0.4s var(--ease-in-out), rotate 0.4s var(--ease-in-out), opacity 0.2s, scale 0.3s var(--ease-in-out), background-color 0.25s;
}

.menu-toggle[aria-expanded="true"] .menu-toggle__bar:nth-child(1) {
	translate: 0 6px;
	rotate: 45deg;
}

.menu-toggle[aria-expanded="true"] .menu-toggle__bar:nth-child(2) {
	opacity: 0;
	scale: 0 1;
}

.menu-toggle[aria-expanded="true"] .menu-toggle__bar:nth-child(3) {
	translate: 0 -6px;
	rotate: -45deg;
}

@media (min-width: 1080px) {
	.menu-toggle {
		display: none;
	}
}

/* ==========================================================================
   メインビジュアル
   ========================================================================== */
/* 動画はヘッダーの下に表示し、PC では固定ヘッダーの下に潜り込ませて画面の天地いっぱいに表示する。
   左右に余る幅は青竹色のベタにする */
.hero {
	/* 動画の幅（16:9 で表示領域の高さに収まる幅。画面より広くはしない） */
	--media-w: min(100%, (100svh - var(--admin-bar-h) - var(--header-h)) * 16 / 9);
	position: relative;
	display: flex;
	justify-content: center;
	background: var(--color-primary);
}

@media (min-width: 1080px) {
	.hero {
		--media-w: min(100%, (100svh - var(--admin-bar-h)) * 16 / 9);
		margin-top: calc(var(--header-h) * -1);
	}
}

.hero__media {
	position: relative;
	width: var(--media-w);
	aspect-ratio: 16 / 9;
	background: var(--color-bg-muted);
}

.hero__video {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* 左右の余白の縦書きテキスト（ヘッダーの下の領域で上下中央） */
.hero__side {
	container-type: size;
	position: absolute;
	inset-block: 0;
	display: grid;
	place-items: center;
	width: calc((100% - var(--media-w)) / 2);
	pointer-events: none;
}

@media (min-width: 1080px) {
	.hero__side {
		padding-top: var(--header-h);
	}
}

.hero__side--start {
	left: 0;
}

.hero__side--end {
	right: 0;
}

.hero__side-text {
	display: none;
	margin: 0;
	color: var(--color-white);
	font: 700 0.8125rem / 1 var(--font-base);
	letter-spacing: 0.3em;
	white-space: nowrap;
	opacity: 0.85;
	writing-mode: vertical-rl;
}

/* 左は下から上へ読む向き */
.hero__side--start .hero__side-text {
	rotate: 180deg;
}

/* 文字が収まる余白があるときだけ表示 */
@container (min-width: 56px) and (min-height: 480px) {
	.hero__side-text {
		display: block;
	}
}

/* 再生 / 一時停止ボタン（アイコンは CSS で描画） */
.hero__toggle {
	position: absolute;
	inset: auto 12px 12px auto;
	display: grid;
	place-items: center;
	width: 32px;
	height: 32px;
	padding: 0;
	background: color-mix(in srgb, var(--color-bg-dark) 60%, transparent);
	border: 1px solid color-mix(in srgb, var(--color-white) 60%, transparent);
	color: var(--color-white);
	cursor: pointer;
}

.hero__toggle[hidden] {
	display: none;
}

.hero__toggle:focus-visible {
	outline-color: var(--color-white);
}

/* 一時停止アイコン（縦 2 本線） */
.hero__toggle::before {
	content: "";
	width: 10px;
	height: 12px;
	border: solid currentColor;
	border-width: 0 3px;
}

/* 再生アイコン（三角） */
.hero__toggle.is-paused::before {
	width: 11px;
	border: 0;
	background: currentColor;
	clip-path: polygon(0 0, 100% 50%, 0 100%);
	translate: 1px 0;
}

@media (min-width: 768px) {
	.hero__toggle {
		inset: auto 24px 24px auto;
		width: 40px;
		height: 40px;
	}
}

/* ==========================================================================
   記事リンクのタイトル（ピックアップ・新着情報・記事カード共通）
   ホバーで黒の下線を出す
   ========================================================================== */
.pickup-card__title,
.news-item__title,
.post-card__title {
	text-decoration: underline transparent;
	text-underline-offset: 0.2em;
	transition: text-decoration-color 0.25s var(--ease-out);
}

.pickup-card__link:hover .pickup-card__title,
.news-item__link:hover .news-item__title,
.post-card__link:hover .post-card__title {
	text-decoration-color: var(--color-text);
}

/* ==========================================================================
   ピックアップ
   収まる枚数なら中央寄せで並べ、収まらないときだけスライドショー（.splide）にする
   （assets/js/pickup.js）
   ========================================================================== */
.pickup {
	/* 子要素の余白をセクション幅の var(--gutter) にするため（cqi） */
	container-type: inline-size;
	max-width: 1600px;
	margin: 0 auto;
	padding: 1.5rem 0;
	border-top: 2px solid var(--color-border);
}

.pickup__slider {
	display: flex;
	flex-direction: column;
	gap: 1rem;
	padding: 0 calc(var(--gutter-ratio) * 1cqi);
}

/* スライドショー時は右端まで流す */
.pickup__slider.splide {
	padding-right: 0;
}

/* 並べて表示（スライドショーにしないとき） */
.pickup__slider:not(.splide) .pickup__track {
	/* JS が動かない環境でも横スクロールで全件見られるように */
	overflow-x: auto;
}

/* スライドショー時の間隔は Splide の gap（スライドの margin-right）で取るため、ここでは付けない */
.pickup__slider:not(.splide) .pickup__list {
	justify-content: safe center;
	gap: 1rem;
}

.pickup__slider:not(.splide) .pickup-card {
	flex: 0 1 260px;
}

.pickup__slider:not(.splide) .pickup__arrows {
	display: none;
}

/* スライドショー */
.pickup__arrows {
	display: flex;
	justify-content: flex-end;
	gap: 0.75rem;
	order: 1;
	padding-right: calc(var(--gutter-ratio) * 1cqi);
}

/* 画面幅が広がり全件収まった場合（次のブレイクポイントで並べて表示に戻るまで） */
.pickup__slider:not(.is-overflow) .pickup__arrows {
	display: none;
}

.pickup__arrow {
	display: grid;
	place-items: center;
	width: 40px;
	height: 40px;
	padding: 0;
	background: color-mix(in srgb, var(--color-accent) 80%, transparent);
	border: 0;
	cursor: pointer;
	transition: background-color 0.25s var(--ease-out);
}

.pickup__arrow:hover:not(:disabled) {
	background: var(--color-accent);
}

.pickup__arrow:disabled {
	opacity: 0.4;
	cursor: default;
}

.pickup__arrow img {
	width: 20px;
	height: 20px;
}

/* カード */
.pickup-card__link {
	display: block;
}

/* トラックの overflow: hidden でフォーカスリングが切れないよう内側に描く */
.pickup-card__link:focus-visible {
	outline-offset: -2px;
}

/* ホバーで拡大したサムネイルを枠内に収める */
.pickup-card__thumb {
	display: block;
	overflow: hidden;
}

.pickup-card__image {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 13 / 8;
	object-fit: cover;
	transition: scale 0.4s var(--ease-out);
}

.pickup-card__link:hover .pickup-card__image {
	scale: 1.2;
}

.pickup-card__title {
	margin: 0;
	padding: 0.75rem 0 1rem;
	font: 700 0.9375rem/1.4 var(--font-base);
}

@media (min-width: 768px) {
	.pickup {
		padding: 2.5rem 0;
	}

	.pickup__slider:not(.splide) .pickup__list {
		gap: 1.5rem;
	}

	.pickup__slider:not(.splide) .pickup-card {
		flex-basis: 300px;
	}

	.pickup-card__image {
		aspect-ratio: 3 / 2;
	}

	.pickup-card__title {
		padding: 0.625rem 0 0;
		font-size: 1.125rem;
	}
}

/* PC: 矢印をスライドの左右に配置 */
@media (min-width: 1080px) {
	.pickup__slider.splide {
		display: grid;
		grid-template-columns: 56px minmax(0, 1fr) 56px;
		align-items: center;
		gap: 1.875rem;
		padding-right: calc(var(--gutter-ratio) * 1cqi);
	}

	.pickup__slider:not(.splide) .pickup__list {
		gap: 1.875rem;
	}

	.pickup__slider:not(.splide) .pickup-card {
		flex-basis: 320px;
	}

	.pickup__arrows {
		display: contents;
	}

	.pickup__arrow {
		width: 56px;
		height: 56px;
	}

	.pickup__arrow img {
		width: 24px;
		height: 24px;
	}

	.pickup__arrow--prev {
		grid-area: 1 / 1;
	}

	.pickup__track {
		grid-area: 1 / 2;
	}

	.pickup__arrow--next {
		grid-area: 1 / 3;
	}

	.pickup-card__image {
		aspect-ratio: 8 / 5;
	}
}

/* ==========================================================================
   KURADEPOとは
   ========================================================================== */
.about {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 1.5rem;
	padding: 2rem var(--gutter-content) 3rem;
	background: var(--color-bg-muted);
}

@media (min-width: 768px) {
	.about {
		padding: 4.5rem var(--gutter-content);
	}

	/* 見出しまわりは他セクションと同じ間隔のまま、リード文以降だけ 40px 空ける */
	.about .section-heading + .diamonds + * {
		margin-top: 1.75rem;
	}

	.about__body {
		margin-top: 1rem;
	}
}

.about__lead {
	margin: 0;
	font: 700 1.25rem/normal var(--font-serif);
	letter-spacing: 0.08em;
	text-align: center;
}

.about__body {
	font: 400 1rem/1.8 var(--font-base);
}

.about__body p {
	margin: 0;
}

@media (min-width: 768px) {
	.about__lead,
	.about__body {
		max-width: 768px;
	}

	.about__lead {
		font-size: 1.5rem;
	}

	.about__body {
		font-size: 1.125rem;
		line-height: 1.9;
		text-align: center;
		/* 画面幅が狭く指定の改行位置に収まらない場合も、文節で均等に折り返す */
		text-wrap: balance;
		word-break: auto-phrase;
	}
}

/* ==========================================================================
   Section heading（英字ラベル + 見出し + サブタイトル）
   ========================================================================== */
.section-heading {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.25rem;
	text-align: center;
}

.section-heading__en {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	margin: 0;
	color: var(--color-primary);
	font: 700 0.75rem/1.125rem var(--font-base);
	letter-spacing: 0.05rem;
}

.section-heading__en img {
	width: 22.624px;
	height: 10.5px;
}

.section-heading__title {
	margin: 0;
	font: 700 1.5rem/normal var(--font-serif);
	letter-spacing: 0.08em;
}

.section-heading__sub {
	margin: 0.75rem 0 0;
	color: var(--color-primary);
	font: 700 0.875rem/normal var(--font-serif);
	letter-spacing: 0.08em;
}

@media (min-width: 768px) {
	.section-heading__title {
		font-size: 2rem;
	}

	.section-heading__sub {
		font-size: 1rem;
	}
}

/* 見出し下のひし形装飾（SP は PC の 0.75 倍）
   下の余白は次の要素の margin-top で取る（後続要素の margin: 0 より優先させるため .section-heading から指定） */
.diamonds {
	width: 51px;
	margin: 0.5625rem 0 0;
}

.section-heading + .diamonds + * {
	margin-top: 0.5625rem;
}

@media (min-width: 768px) {
	.diamonds {
		width: 68px;
		margin-top: 0.75rem;
	}

	.section-heading + .diamonds + * {
		margin-top: 0.75rem;
	}
}

/* ==========================================================================
   パンくずリスト
   ========================================================================== */
.breadcrumb {
	padding-block: 0.75rem;
	background: var(--color-bg);
}

/* 画面幅に収まらないときは折り返さずに横スクロール（スクロール領域は画面端まで） */
.breadcrumb__list {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	margin: 0;
	padding: 0 var(--gutter-content);
	overflow-x: auto;
	font: 400 0.75rem/normal var(--font-base);
	white-space: nowrap;
	list-style: none;
	scrollbar-width: none;
}

.breadcrumb__list::-webkit-scrollbar {
	display: none;
}

.breadcrumb__item {
	display: flex;
	flex-shrink: 0;
	align-items: center;
	gap: 0.5rem;
}

/* 区切り記号（読み上げない） */
.breadcrumb__arrow {
	flex-shrink: 0;
	width: 5px;
	height: 8px;
	color: var(--color-text-muted);
}

.breadcrumb__link {
	color: var(--color-primary);
	font-weight: 500;
	text-decoration: underline transparent;
	text-underline-offset: 3px;
	transition: text-decoration-color 0.3s var(--ease-out);
}

@media (hover: hover) {
	.breadcrumb__link:hover {
		text-decoration-color: currentColor;
	}
}

@media (min-width: 768px) {
	.breadcrumb {
		padding-block: 1.125rem;
	}

	.breadcrumb__list,
	.breadcrumb__item {
		gap: 0.625rem;
	}

	.breadcrumb__list {
		font-size: 0.8125rem;
	}
}

@media (min-width: 768px) and (max-width: 1079px) {
	.breadcrumb__list {
		padding-inline: max(var(--gutter), (100% - 768px) / 2);
	}
}

@media (min-width: 1080px) {
	.breadcrumb {
		padding-block: 1.25rem;
	}
}

/* ==========================================================================
   ページタイトル（下層ページ）
   ========================================================================== */
.page-title {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 1.25rem;
	padding: 3rem var(--gutter-content) 2.5rem;
	background: var(--color-bg-muted);
}

.page-title__lead {
	margin: 0;
	font: 400 0.875rem/1.9 var(--font-base);
}

@media (min-width: 768px) {
	.page-title {
		gap: 1.5rem;
		padding: 4rem var(--gutter-content) 3.5rem;
	}

	.page-title__lead {
		max-width: 768px;
		font-size: 0.9375rem;
		text-align: center;
	}
}

@media (min-width: 1080px) {
	.page-title {
		padding: 4.5rem var(--gutter-content) 4rem;
	}

	.page-title__lead {
		max-width: 760px;
		font-size: 1rem;
		line-height: 2;
	}
}

/* リスト・テキストリンク
   ========================================================================== */
.bullet-list {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
	margin: 0;
	padding: 0;
	list-style: none;
	font: 400 0.9375rem/normal var(--font-base);
}

.bullet-list li {
	display: flex;
	gap: 0.375rem;
}

.bullet-list li::before {
	content: "•";
	font-size: 0.875rem;
}

/* 本文のリンク（.post-content a）はエディターで class を付けられないため、ここで同じ見た目にする */
.text-link,
.post-content a {
	color: var(--color-primary);
	font-weight: 500;
	text-decoration: underline;
	text-underline-offset: 0.2em;
}

@media (hover: hover) {
	.text-link:hover,
	.post-content a:hover {
		text-decoration: none;
	}
}

.text-link__icon {
	position: relative;
	display: inline-block;
	width: 8px;
	height: 8px;
	margin: 0 0.25rem;
}

.text-link__icon img {
	position: absolute;
	top: -0.5px;
	left: -0.35px;
	max-width: none;
}

/* 本文で「新しいタブで開く」にしたリンクにも .text-link__icon と同じ矢印を付ける
   （ボタン・画像のリンクは除く） */
.post-content a[target="_blank"]:not(.wp-block-button__link, :has(img))::after {
	content: "";
	content: "" / "（新しいタブで開きます）";
	display: inline-block;
	width: 9px;
	height: 9px;
	margin: 0 0.25rem 0 0.2188rem;
	background: url("assets/images/icon-arrow-up-right-sm.svg") no-repeat;
}

/* ==========================================================================
   セクションのリード文（拠点紹介・事業）
   ========================================================================== */
.section-lead {
	margin: 0;
	font: 400 1rem/1.8 var(--font-base);
}

.section-lead p {
	margin: 0;
}

@media (min-width: 768px) {
	.section-lead {
		max-width: 768px;
		font-size: 1.0625rem;
		line-height: 1.9;
		text-align: center;
		word-break: auto-phrase;
	}
}

@media (min-width: 1080px) {
	.section-lead {
		max-width: 760px;
	}
}

/* ==========================================================================
   拠点紹介
   ========================================================================== */
.overview {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 1.5rem;
	padding: 2rem var(--gutter-content) 3rem;
}

@media (min-width: 768px) {
	.overview {
		padding: 4.5rem var(--gutter-content);
	}
}

/* リード文との間は 48px（768px 以上 56px）。gap 24px との差分を足す */
.overview__photos {
	display: flex;
	flex-direction: column;
	gap: 1rem;
	width: 100%;
	margin-top: 1.5rem;
}

@media (min-width: 768px) {
	.overview__photos {
		flex-direction: row;
		gap: 1.5rem;
		max-width: 768px;
		margin-top: 2rem;
	}

	.overview__photo {
		flex: 1;
		min-width: 0;
	}
}

@media (min-width: 1080px) {
	.overview__photos {
		gap: 2.5rem;
		max-width: 1200px;
	}
}

.overview__photo {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
	margin: 0;
}

.overview__photo img {
	width: 100%;
	height: auto;
	aspect-ratio: 3 / 2;
	object-fit: cover;
}

/* 写真の下に置く（Figma の余白 16px / 768px 以上 26px を gap に足す） */
.overview__map {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
	width: 100%;
	margin: 1rem 0 0;
}

.overview__map img {
	width: 100%;
	height: auto;
}

.overview__map figcaption,
.overview__photo figcaption {
	color: var(--color-text-muted);
	font: 400 0.8125rem/1.125rem var(--font-base);
}

.overview__map figcaption {
	font-size: 0.875rem;
	text-align: center;
}

@media (min-width: 768px) {
	.overview__map {
		max-width: 540px;
		margin-top: 1.625rem;
	}

	.overview__map figcaption,
	.overview__photo figcaption {
		font-size: 0.875rem;
	}
}

.overview__equipment {
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
	width: 100%;
	padding: 1.25rem;
	border: 1px solid var(--color-primary);
}

.overview__subtitle {
	margin: 0;
	font: 700 1.125rem/1.5 var(--font-base);
}

.overview__equipment .bullet-list {
	line-height: 1.5rem;
}

@media (min-width: 768px) {
	.overview__equipment {
		max-width: 540px;
		padding: 1.5rem;
	}

	.overview__subtitle {
		font-size: 1.25rem;
	}
}

/* 自習室の利用の流れ
   ========================================================================== */
.flow {
	display: flex;
	flex-direction: column;
	gap: 1rem;
	padding: 1.25rem;
	background: var(--color-bg);
	border: 1px solid var(--color-primary);
	box-shadow: 0 8px 12px color-mix(in srgb, var(--color-primary) 8%, transparent);
}

.flow__title {
	margin: 0;
	color: var(--color-primary);
	font: 700 1.125rem/normal var(--font-serif);
}

.flow__list {
	display: flex;
	flex-direction: column;
	gap: 1rem;
	margin: 0;
	padding: 0;
	list-style: none;
	counter-reset: flow;
}

.flow__step {
	--marker: 24px;
	display: grid;
	grid-template-columns: var(--marker) 1fr;
	gap: 0.25rem 0.75rem;
	counter-increment: flow;
}

.flow__step::before {
	content: counter(flow);
	grid-row: span 2;
	align-self: start;
	display: grid;
	place-items: center;
	width: var(--marker);
	height: var(--marker);
	background: var(--color-primary);
	color: var(--color-white);
	font: 700 0.8125rem/1 var(--font-base);
}

.flow__step-title {
	margin: 0;
	font: 700 0.9375rem/1.375rem var(--font-base);
}

.flow__step-text {
	margin: 0;
	color: var(--color-text-muted);
	font: 400 0.8125rem/1.25rem var(--font-base);
}

@media (min-width: 768px) {
	.flow {
		gap: 1.25rem;
		padding: 1.5rem;
	}

	.flow__title {
		font-size: 1.25rem;
	}

	.flow__list {
		gap: 1.25rem;
	}

	.flow__step {
		--marker: 28px;
		gap: 0.25rem 1rem;
	}

	.flow__step-title {
		padding-top: 2px;
		font-size: 1rem;
		line-height: 1.5rem;
	}

	.flow__step-text {
		font-size: 0.875rem;
		line-height: 1.375rem;
	}
}

/* ==========================================================================
   事業・地域教育連携
   ========================================================================== */
.area {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 1.5rem;
	padding: 2rem var(--gutter-content) 3rem;
	border-top: 1px solid var(--color-border);
}

@media (min-width: 768px) {
	.area {
		padding: 4.5rem var(--gutter-content);
	}
}

@media (min-width: 1080px) {
	.area {
		border-top-width: 2px;
	}
}

/* リード文との間は 48px（768px 以上 56px）。gap 24px との差分を足す */
.area__content {
	display: flex;
	flex-direction: column;
	gap: 3rem;
	width: 100%;
	margin-top: 1.5rem;
}

@media (min-width: 768px) {
	.area__content {
		gap: 4.5rem;
		max-width: 768px;
		margin-top: 2rem;
	}
}

@media (min-width: 1080px) {
	.area__content {
		max-width: 1200px;
	}
}

/* 自習室: SP は見出し → 本文 → 利用の流れ → 写真。768px 以上は左に本文と利用の流れ、右に写真 */
.study-room {
	display: grid;
	gap: 1.5rem;
}

.study-room__title {
	margin: 0;
	color: var(--color-primary);
	font: 700 1.375rem/normal var(--font-serif);
}

.study-room__main {
	display: flex;
	flex-direction: column;
	gap: 1.5rem;
}

.study-room__text {
	color: var(--color-text-muted);
	font: 400 1rem/1.625rem var(--font-base);
}

.study-room__text p {
	margin: 0;
}

.study-room__img {
	width: 100%;
	height: auto;
	aspect-ratio: 3 / 2;
	object-fit: cover;
}

@media (min-width: 768px) {
	.study-room {
		grid-template-columns: 1fr 1fr;
		align-items: start;
		gap: 1.5rem 2.5rem;
	}

	.study-room__title {
		grid-column: 1 / -1;
		font-size: 1.75rem;
	}

	.study-room__text {
		font-size: 1.0625rem;
		line-height: 1.75rem;
	}
}

/* タブレットは 1 段目に本文と写真を横並び、2 段目に利用の流れを中央に置く */
@media (min-width: 768px) and (max-width: 1079px) {
	/* 写真の幅は下の .area-card__img（タブレット 320px）に揃える */
	.study-room {
		grid-template-columns: 1fr 320px;
		grid-template-areas:
			"title title"
			"text img"
			"flow flow";
	}

	.study-room__title {
		grid-area: title;
	}

	.study-room__main {
		display: contents;
	}

	.study-room__text {
		grid-area: text;
	}

	.study-room__img {
		grid-area: img;
	}

	.study-room .flow {
		grid-area: flow;
		justify-self: center;
		width: 100%;
		max-width: 540px;
		margin-top: 1rem;
	}
}

@media (min-width: 1080px) {
	.study-room {
		column-gap: 5rem;
	}
}

.area__list {
	display: flex;
	flex-direction: column;
	gap: 1.875rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

/* SP は本文の下に画像。768px 以上は本文左・画像右の横並び */
.area-card {
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
}

.area-card__img {
	width: 100%;
	height: auto;
	aspect-ratio: 3 / 2;
	object-fit: cover;
}

.area-card__body {
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
}

.area-card__title {
	margin: 0;
	color: var(--color-primary);
	font: 700 1.375rem/normal var(--font-serif);
}

.area-card__text {
	margin: 0;
	color: var(--color-text-muted);
	font: 400 1rem/1.625rem var(--font-base);
}

@media (min-width: 768px) {
	.area__list {
		gap: 4rem;
	}

	.area-card {
		flex-direction: row;
		align-items: flex-start;
		gap: 1.5rem;
	}

	.area-card__img {
		flex: none;
		width: 320px;
	}

	.area-card__body {
		flex: 1;
		min-width: 0;
	}

	.area-card__title {
		font-size: 1.75rem;
	}

	.area-card__text {
		font-size: 1.0625rem;
		line-height: 1.75rem;
	}
}

@media (min-width: 1080px) {
	.area-card {
		gap: 2.5rem;
	}

	/* 拠点紹介の写真（.overview__photo: 3 枚を間隔 2.5rem で並べた 1 枚分）と同じ幅にする */
	.area-card__img {
		width: calc((100% - 5rem) / 3);
	}
}

/* ==========================================================================
   CTA（自習室の予約）
   ========================================================================== */
/* 台形の傾きは画面幅によらず一定にするため、上辺の高低差を幅（cqi）から算出する */
.cta {
	--slope: calc(55 / 375);
	--rise: calc(100cqi * var(--slope));
	container-type: inline-size;
	position: relative;
	isolation: isolate;
	/* cqi は content-box 基準のため、左右の余白は .cta__button 側でとる */
	padding-bottom: 3.25rem;
}

.cta::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: var(--color-primary);
	clip-path: polygon(0 var(--rise), 100% 0, 100% 100%, 0 100%);
}

/* 緑背景ではプライマリ色のフォーカスリングが見えないため白にする */
.cta :focus-visible {
	outline-color: var(--color-white);
}

@media (min-width: 768px) {
	.cta {
		--slope: calc(74.5 / 1080);
		padding-bottom: 6rem;
	}
}

@media (min-width: 1080px) {
	.cta {
		--slope: calc(134.4 / 1600);
	}
}

.cta__button {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 0.25rem;
	min-height: 4.5rem;
	/* 斜辺の中央（高低差の半分）を基準に上の余白をとる */
	margin: calc(var(--rise) / 2 + 4.875rem) 1rem 0;
	padding: 0.75rem 1rem;
	background: var(--color-accent);
	border-bottom: 6px solid var(--color-line);
	box-shadow: 0 12px 16px color-mix(in srgb, var(--color-accent) 20%, transparent);
	text-align: center;
}

/* 左下のダークアクセント（下ボーダーの上に重ねる）。ホバーで右端まで伸ばす */
.cta__button::after {
	content: "";
	position: absolute;
	inset: auto auto -6px 0;
	width: 32px;
	height: 6px;
	background: var(--color-text);
	transition: width 0.5s var(--ease-out);
}

.cta__button:hover::after,
.cta__button:focus-visible::after {
	width: 100%;
}

.cta__label {
	font: 700 1.125rem/normal var(--font-base);
}

.cta__note {
	font: 400 0.75rem/1rem var(--font-base);
}

.cta__icon {
	position: absolute;
	top: calc(50% - 8px);
	right: 24px;
	width: 16px;
	height: 16px;
	transition: translate 0.3s var(--ease-out);
}

.cta__icon img {
	position: absolute;
	top: -0.5px;
	left: -0.35px;
	max-width: none;
}

/* ホバー中は矢印をその向き（右上）へ少し動かす */
.cta__button:hover .cta__icon,
.cta__button:focus-visible .cta__icon {
	translate: 2px -2px;
}

@media (min-width: 768px) {
	.cta__button {
		gap: 0.5rem;
		width: 25rem;
		min-height: 6rem;
		margin: calc(var(--rise) / 2 + 6rem) auto 0;
		padding: 1rem 1.5rem;
	}

	.cta__button::after {
		width: 40px;
	}

	.cta__label {
		font-size: 1.375rem;
	}

	.cta__note {
		font-size: 0.8125rem;
	}

}

/* ==========================================================================
   新着情報
   ========================================================================== */
.news {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 1.5rem;
	padding: 2rem var(--gutter-content) 3rem;
}

@media (min-width: 768px) {
	.news {
		gap: 2.5rem;
		padding: 4.5rem var(--gutter-content);
	}
}

.news__list {
	width: 100%;
	margin: 0;
	padding: 0;
	list-style: none;
	border-top: 1px solid var(--color-border);
}

@media (min-width: 768px) {
	.news__list {
		max-width: 768px;
	}
}

@media (min-width: 1080px) {
	.news__list {
		max-width: 1200px;
	}
}

.news-item {
	border-bottom: 1px solid var(--color-border);
}

.news-item__link {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
	min-height: 4.5rem;
	padding: 0.625rem 0 0.5rem;
}

.news-item__meta {
	display: flex;
	align-items: center;
	gap: 0.75rem;
}

.news-item__date {
	color: var(--color-primary);
	font: 500 0.75rem/normal var(--font-base);
}

.news-item__category {
	padding: 0.1875rem 0.75rem;
	background: var(--color-accent);
	font: 700 0.6875rem/normal var(--font-base);
	text-align: center;
	white-space: nowrap;
}

.news-item__title {
	margin: 0;
	font: 700 0.9375rem/1.55 var(--font-base);
}

@media (min-width: 768px) {
	.news-item__link {
		flex-direction: row;
		align-items: center;
		gap: 1.5rem;
		min-height: 5.5rem;
		padding: 1.5rem 0;
	}

	.news-item__meta {
		flex: none;
	}

	.news-item__date {
		font-size: 0.875rem;
	}

	.news-item__category {
		width: 7rem;
		padding: 0.25rem 0.875rem;
		font-size: 0.75rem;
	}

	.news-item__title {
		flex: 1;
		min-width: 0;
		font-size: 1.125rem;
	}
}

.news__empty {
	margin: 0;
	font: 400 0.9375rem/normal var(--font-base);
}

/* ==========================================================================
   新着情報の記事一覧（投稿ページ・カテゴリー / タグ一覧）
   ========================================================================== */
.post-archive {
	padding: 2.5rem var(--gutter-content) 4rem;
}

.post-archive__inner {
	display: flex;
	flex-direction: column;
	gap: 2.5rem;
}

@media (min-width: 768px) {
	.post-archive {
		padding: 3.5rem var(--gutter-content) 5rem;
	}

	.post-archive__inner {
		gap: 3rem;
		max-width: 768px;
		margin-inline: auto;
	}
}

@media (min-width: 1080px) {
	.post-archive {
		padding: 4.5rem var(--gutter-content) 6rem;
	}

	.post-archive__inner {
		gap: 3.5rem;
		max-width: none;
	}
}

/* 絞り込み（SP は開閉式）
   ========================================================================== */
.post-filter {
	border: 1px solid var(--color-primary);
}

.post-filter__toggle {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	width: 100%;
	padding: 0.875rem 1.25rem;
	background: none;
	border: 0;
	color: inherit;
	font: inherit;
	text-align: start;
	cursor: pointer;
}

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

.post-filter__toggle-label {
	display: flex;
	flex-direction: column;
	gap: 0.125rem;
}

.post-filter__toggle-title {
	color: var(--color-primary);
	font: 700 0.9375rem/normal var(--font-base);
}

.post-filter__status {
	color: var(--color-text-muted);
	font: 400 0.75rem/normal var(--font-base);
}

.post-filter__icon {
	flex: none;
}

.post-filter__toggle[aria-expanded="true"] .post-filter__icon--open,
.post-filter__toggle[aria-expanded="false"] .post-filter__icon--close {
	display: none;
}

/* 開閉は行の高さを 0fr ⇔ 1fr で切り替える（読み込み時に閉じる動きを見せないよう、操作後だけアニメーションする） */
.post-filter__body {
	display: grid;
	grid-template-rows: 1fr;
}

.post-filter.is-animated .post-filter__body {
	transition:
		grid-template-rows 0.4s var(--ease-in-out),
		visibility 0.4s;
}

.post-filter__toggle:not([hidden])[aria-expanded="false"] + .post-filter__body {
	grid-template-rows: 0fr;
	visibility: hidden;
}

.post-filter__content {
	min-height: 0;
	overflow: hidden;
}

.post-filter__inner {
	display: flex;
	flex-direction: column;
	gap: 1rem;
	padding: 1.25rem;
}

.post-filter__toggle:not([hidden]) + .post-filter__body .post-filter__inner {
	border-top: 1px solid var(--color-line);
}

.post-filter__row {
	display: flex;
	flex-direction: column;
	gap: 0.625rem;
}

.post-filter__row + .post-filter__row {
	padding-top: 1rem;
	border-top: 1px solid var(--color-line);
}

.post-filter__label {
	flex: none;
	margin: 0;
	color: var(--color-primary);
	font: 700 0.9375rem/normal var(--font-serif);
	letter-spacing: 0.08em;
}

.post-filter__list {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.post-filter__chip {
	display: block;
	padding: 0.375rem 0.75rem;
	font: 500 0.75rem/normal var(--font-base);
	white-space: nowrap;
	transition:
		background-color 0.25s var(--ease-out),
		border-color 0.25s var(--ease-out);
}

.post-filter__chip--category {
	border: 1px solid var(--color-line);
}

.post-filter__chip--tag {
	background: var(--color-bg-muted);
}

.post-filter__chip[aria-current="page"],
.post-filter__chip.is-current {
	background: var(--color-primary);
	border-color: var(--color-primary);
	color: var(--color-white);
	font-weight: 700;
}

@media (hover: hover) {
	.post-filter__chip--category:not([aria-current="page"]):hover {
		border-color: var(--color-primary);
	}

	.post-filter__chip--tag:not(.is-current):hover {
		background: var(--color-line);
	}
}

/* タブレット・PC は常に開いた状態で、ラベルと一覧を横に並べる */
@media (min-width: 768px) {
	.post-filter__toggle:not([hidden]) {
		display: none;
	}

	.post-filter__body,
	.post-filter__toggle:not([hidden])[aria-expanded="false"] + .post-filter__body {
		grid-template-rows: 1fr;
		visibility: visible;
	}

	.post-filter__toggle:not([hidden]) + .post-filter__body .post-filter__inner {
		border-top: 0;
	}

	.post-filter__inner {
		gap: 1.5rem;
		padding: 2rem 2.5rem;
	}

	.post-filter__row {
		flex-direction: row;
		align-items: flex-start;
		gap: 1.5rem;
	}

	.post-filter__row + .post-filter__row {
		padding-top: 1.5rem;
	}

	.post-filter__label {
		width: 6.5rem;
		font-size: 1rem;
	}

	.post-filter__list {
		flex: 1;
		gap: 0.625rem;
	}

	.post-filter__chip {
		padding: 0.375rem 1rem;
		font-size: 0.8125rem;
	}
}

/* 一覧の見出し・件数
   ========================================================================== */
.post-archive__header {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 1rem;
	padding-bottom: 1rem;
	border-bottom: 1px solid var(--color-primary);
}

.post-archive__title {
	margin: 0;
	font: 700 1.125rem/1.5 var(--font-serif);
	letter-spacing: 0.08em;
}

.post-archive__count {
	display: flex;
	flex: none;
	align-items: baseline;
	gap: 0.25rem;
	margin: 0;
	font: 500 0.875rem/normal var(--font-base);
}

.post-archive__count-num {
	color: var(--color-primary);
	font-size: 1.25rem;
	font-weight: 700;
}

.post-archive__empty {
	margin: 0;
	font: 400 0.9375rem/normal var(--font-base);
}

@media (min-width: 768px) {
	.post-archive__title {
		font-size: 1.375rem;
	}
}

/* 記事カード（SP はサムネイル横並びのリスト、タブレット 2 列・PC 3 列のカード）
   ========================================================================== */
.post-list {
	display: grid;
	margin: 0;
	padding: 0;
	list-style: none;
}

.post-card {
	border-bottom: 1px solid var(--color-line);
}

.post-card__link {
	display: flex;
	align-items: flex-start;
	gap: 0.875rem;
	padding: 1.25rem 0;
}

/* ホバーで拡大したサムネイルを枠内に収める */
.post-card__thumb {
	flex: none;
	display: block;
	width: 33%;
	overflow: hidden;
}

.post-card__image {
	display: block;
	width: 100%;
	aspect-ratio: 3 / 2;
	object-fit: cover;
	transition: scale 0.4s var(--ease-out);
}

.post-card__link:hover .post-card__image {
	scale: 1.1;
}

.post-card__body {
	display: flex;
	flex: 1;
	flex-direction: column;
	gap: 0.5rem;
	min-width: 0;
}

.post-card__meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.5rem;
}

.post-card__date {
	color: var(--color-primary);
	font: 500 0.75rem/normal var(--font-base);
}

.post-card__category {
	padding: 0.125rem 0.5rem;
	background: var(--color-accent);
	font: 700 0.625rem/normal var(--font-base);
	white-space: nowrap;
}

.post-card__title {
	margin: 0;
	font: 700 0.9375rem/1.6 var(--font-base);
}

.post-card__tags {
	display: flex;
	flex-wrap: wrap;
	gap: 0.25rem 0.625rem;
	color: var(--color-text-muted);
	font: 400 0.6875rem/normal var(--font-base);
}

@media (min-width: 768px) {
	.post-list {
		grid-template-columns: repeat(2, 1fr);
		gap: 3rem 2.5rem;
	}

	.post-card {
		border-bottom: 0;
	}

	.post-card__link {
		flex-direction: column;
		gap: 1rem;
		padding: 0;
	}

	.post-card__thumb {
		width: 100%;
	}

	.post-card__image {
		aspect-ratio: 16 / 9;
	}

	.post-card__body {
		gap: 1rem;
		width: 100%;
	}

	.post-card__meta {
		gap: 0.75rem;
	}

	.post-card__date {
		font-size: 0.875rem;
	}

	.post-card__category {
		padding: 0.25rem 0.875rem;
		font-size: 0.75rem;
	}

	.post-card__title {
		font-size: 1.125rem;
		line-height: 1.55;
	}

	.post-card__tags {
		gap: 0.25rem 0.75rem;
		font-size: 0.75rem;
	}
}

@media (min-width: 1080px) {
	.post-list {
		grid-template-columns: repeat(3, 1fr);
		gap: 3.5rem 2.5rem;
	}
}

/* ページ送り
   ========================================================================== */
.pagination .nav-links {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 0.5rem;
}

.pagination .page-numbers {
	display: flex;
	align-items: center;
	justify-content: center;
	min-width: 2.75rem;
	min-height: 2.75rem;
	background: var(--color-bg);
	border: 1px solid var(--color-line);
	font: 500 0.875rem/normal var(--font-base);
	transition: border-color 0.25s var(--ease-out);
}

.pagination .page-numbers.prev,
.pagination .page-numbers.next {
	padding: 0 1.25rem;
}

.pagination .page-numbers.current {
	background: var(--color-primary);
	border-color: var(--color-primary);
	color: var(--color-white);
	font-weight: 700;
}

.pagination .page-numbers.dots {
	border-color: transparent;
}

@media (hover: hover) {
	.pagination a.page-numbers:hover {
		border-color: var(--color-primary);
	}
}

@media (min-width: 768px) {
	.pagination .page-numbers {
		min-width: 3rem;
		min-height: 3rem;
	}
}

/* ==========================================================================
   新着情報の記事詳細
   ========================================================================== */
.post-single {
	display: flex;
	flex-direction: column;
	gap: 1.75rem;
	padding: 2rem var(--gutter-content) 3.5rem;
}

.post-single__article {
	display: flex;
	flex-direction: column;
	gap: 1.75rem;
}

.post-single__header {
	display: flex;
	flex-direction: column;
	gap: 0.875rem;
	padding-bottom: 1.25rem;
	border-bottom: 1px solid var(--color-primary);
}

.post-single__meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.75rem;
}

.post-single__date {
	color: var(--color-primary);
	font: 500 0.875rem/normal var(--font-base);
}

.post-single__category {
	padding: 0.25rem 0.875rem;
	background: var(--color-accent);
	font: 700 0.75rem/normal var(--font-base);
	text-decoration: underline transparent;
	text-underline-offset: 0.2em;
	transition: text-decoration-color 0.25s var(--ease-out);
}

.post-single__title {
	margin: 0;
	font: 700 1.5rem/1.55 var(--font-serif);
	letter-spacing: 0.06em;
}

.post-single__tags {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.post-single__tag {
	display: block;
	padding: 0.25rem 0.625rem;
	background: var(--color-bg-muted);
	font: 500 0.6875rem/normal var(--font-base);
	text-decoration: underline transparent;
	text-underline-offset: 0.2em;
	transition: text-decoration-color 0.25s var(--ease-out);
}

@media (hover: hover) {
	.post-single__category:hover,
	.post-single__tag:hover {
		text-decoration-color: currentColor;
	}
}

.post-single__image {
	display: block;
	width: 100%;
	aspect-ratio: 16 / 9;
	object-fit: cover;
}

.post-single__back {
	display: flex;
	justify-content: center;
}

@media (min-width: 768px) {
	.post-single {
		gap: 2.5rem;
		padding: 3.5rem var(--gutter-content) 5rem;
	}

	.post-single__article {
		gap: 2.5rem;
	}

	.post-single__header {
		gap: 1.25rem;
		padding-bottom: 1.75rem;
	}

	.post-single__title {
		font-size: 2.125rem;
		line-height: 1.6;
	}

	.post-single__tag {
		padding: 0.3125rem 0.75rem;
		font-size: 0.75rem;
	}
}

@media (min-width: 768px) and (max-width: 1079px) {
	.post-single > * {
		width: 100%;
		max-width: 768px;
		margin-inline: auto;
	}
}

@media (min-width: 1080px) {
	.post-single {
		padding: 4.5rem var(--gutter-content) 6rem;
	}

	.post-single > * {
		width: 100%;
		max-width: 800px;
		margin-inline: auto;
	}
}

/* 本文（the_content）
   ========================================================================== */
.post-content {
	display: flex;
	flex-direction: column;
	gap: 1.5rem;
	font: 400 0.9375rem/2 var(--font-base);
	overflow-wrap: anywhere;
}

.post-content > * {
	margin: 0;
}

/* 見出し 2：下線（左端にオレンジのアクセント） */
.post-content h2 {
	padding-bottom: 1.0625rem;
	background:
		linear-gradient(var(--color-accent) 0 0) 0 100% / 48px 3px no-repeat,
		linear-gradient(var(--color-primary) 0 0) 0 calc(100% - 2px) / 100% 1px no-repeat;
	font: 700 1.375rem/1.5 var(--font-serif);
	letter-spacing: 0.08em;
}

/* 見出し 3：左にメインカラーのライン */
.post-content h3 {
	padding-left: 1rem;
	border-left: 4px solid var(--color-primary);
	color: var(--color-primary);
	font: 700 1.125rem/1.5 var(--font-serif);
	letter-spacing: 0.08em;
}

.post-content h4 {
	font: 700 1rem/1.6 var(--font-serif);
	letter-spacing: 0.08em;
}

/* 見出しの上はセクションの区切りとして gap より広く空ける（gap との差分を足す） */
.post-content > h2:not(:first-child) {
	margin-top: 2rem;
}

.post-content > h3:not(:first-child) {
	margin-top: 1rem;
}

.post-content ul,
.post-content ol {
	display: flex;
	flex-direction: column;
	gap: 0.625rem;
	padding: 0;
	list-style: none;
}

.post-content li {
	position: relative;
	padding-left: 1.375rem;
}

/* マーカー（ひし形） */
.post-content ul > li::before {
	content: "";
	position: absolute;
	top: calc(1lh / 2 - 3px);
	left: 3px;
	width: 6px;
	height: 6px;
	background: var(--color-primary);
	rotate: 45deg;
}

.post-content ol {
	counter-reset: post-content-ol;
}

.post-content ol > li {
	counter-increment: post-content-ol;
}

.post-content ol > li::before {
	content: counter(post-content-ol) ".";
	position: absolute;
	left: 0;
	color: var(--color-primary);
	font-weight: 700;
}

/* 入れ子のリスト */
.post-content li > ul,
.post-content li > ol {
	margin-top: 0.625rem;
}

.post-content figure {
	display: flex;
	flex-direction: column;
	gap: 0.625rem;
}

.post-content figure img {
	display: block;
	width: 100%;
}

.post-content figcaption {
	margin: 0;
	color: var(--color-text-muted);
	font: 400 0.75rem/1.6 var(--font-base);
}

.post-content blockquote {
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
	padding: 1.25rem;
	background: var(--color-bg-muted);
	border-left: 4px solid var(--color-primary);
}

.post-content blockquote p {
	margin: 0;
	font: 700 0.9375rem/1.9 var(--font-serif);
}

.post-content blockquote cite {
	color: var(--color-text-muted);
	font: 400 0.75rem/normal var(--font-base);
}

@media (min-width: 768px) {
	.post-content {
		gap: 2rem;
		font-size: 1rem;
	}

	.post-content h2 {
		font-size: 1.75rem;
	}

	.post-content h3 {
		font-size: 1.375rem;
	}

	.post-content h4 {
		font-size: 1.125rem;
	}

	.post-content > h2:not(:first-child) {
		margin-top: 2.5rem;
	}

	.post-content > h3:not(:first-child) {
		margin-top: 1.5rem;
	}

	.post-content figcaption,
	.post-content blockquote cite {
		font-size: 0.8125rem;
	}

	.post-content blockquote {
		padding: 1.75rem 2rem;
	}

	.post-content blockquote p {
		font-size: 1.0625rem;
	}
}

/* シェア
   ========================================================================== */
.post-share {
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
	padding-top: 1.5rem;
	border-top: 1px solid var(--color-line);
}

.post-share__label {
	margin: 0;
	color: var(--color-primary);
	font: 700 0.8125rem/normal var(--font-base);
	letter-spacing: 0.15em;
}

.post-share__list {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.75rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.post-share__button {
	display: block;
	padding: 0.5rem 0.875rem;
	background: var(--color-bg);
	border: 1px solid var(--color-line);
	color: var(--color-text);
	font: 500 0.75rem/normal var(--font-base);
	cursor: pointer;
	transition: border-color 0.25s var(--ease-out);
}

/* SNS のロゴマークと URL コピー（ロゴ自体が 32px あるのでターゲットサイズ 24px を満たす） */
.post-share__icon {
	display: block;
	padding: 0;
	background: none;
	border: 0;
	cursor: pointer;
	transition: opacity 0.25s var(--ease-out);
}

.post-share__icon img {
	display: block;
	width: 32px;
	height: 32px;
}

.post-share__copy {
	position: relative;
}

/* URL コピー後にボタンの上に出す吹き出し（assets/js/share.js が .is-visible を付け外しする） */
.post-share__tooltip {
	position: absolute;
	bottom: calc(100% + 0.25rem);
	left: 50%;
	padding: 0.375rem 0.625rem;
	background: var(--color-bg-dark);
	color: var(--color-white);
	font: 500 0.75rem/1.4 var(--font-base);
	white-space: nowrap;
	opacity: 0;
	visibility: hidden;
	translate: -50% 0.25rem;
	transition: opacity 0.2s var(--ease-out), translate 0.2s var(--ease-out), visibility 0.2s;
	pointer-events: none;
}

/* 吹き出しの三角 */
.post-share__tooltip::after {
	content: "";
	position: absolute;
	top: 100%;
	left: 50%;
	translate: -50% 0;
	border: 5px solid transparent;
	border-top-color: var(--color-bg-dark);
}

.post-share__tooltip.is-visible {
	opacity: 1;
	visibility: visible;
	translate: -50% 0;
}

@media (hover: hover) {
	.post-share__button:hover {
		border-color: var(--color-primary);
	}

	.post-share__icon:hover {
		opacity: 0.7;
	}
}

@media (min-width: 768px) {
	.post-share {
		flex-direction: row;
		align-items: center;
		gap: 1rem;
		padding-top: 2rem;
	}

	.post-share__button {
		padding: 0.625rem 1.125rem;
		font-size: 0.8125rem;
	}
}

/* 前後の記事
   ========================================================================== */
.post-nav {
	display: grid;
	gap: 0.75rem;
}

.post-nav__link {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
	padding: 1rem 1.25rem;
	border: 1px solid var(--color-line);
	font-weight: 700;
	transition: border-color 0.25s var(--ease-out);
}

.post-nav__link--next {
	align-items: flex-end;
	text-align: right;
}

.post-nav__label {
	color: var(--color-primary);
	font: inherit;
	font-size: 0.75rem;
	letter-spacing: 0.08em;
}

.post-nav__title {
	font: inherit;
	font-size: 0.875rem;
	line-height: 1.6;
	text-decoration: underline transparent;
	text-underline-offset: 0.2em;
	transition: text-decoration-color 0.25s var(--ease-out);
}

@media (hover: hover) {
	.post-nav__link:hover {
		border-color: var(--color-primary);
	}

	.post-nav__link:hover .post-nav__title {
		text-decoration-color: var(--color-text);
	}
}

@media (min-width: 768px) {
	.post-nav {
		grid-template-columns: repeat(2, 1fr);
		gap: 1.5rem;
	}

	/* 前の記事がないときも右側に置く */
	.post-nav__link--next {
		grid-column: 2;
	}

	.post-nav__link {
		padding: 1.25rem 1.5rem;
	}

	.post-nav__title {
		font-size: 0.9375rem;
	}
}

/* 関連記事（記事カードは一覧と共通）
   ========================================================================== */
/* 上の余白は記事詳細（.post-single）の下の余白で取る */
.related-posts {
	display: flex;
	flex-direction: column;
	gap: 1.5rem;
	padding: 0 var(--gutter-content) 3.5rem;
}

/* 記事詳細との区切り線 */
.related-posts::before {
	content: "";
	padding-bottom: 1rem;
	border-top: 1px solid var(--color-line);
}

@media (min-width: 768px) {
	.related-posts {
		gap: 2.5rem;
		padding-bottom: 5rem;
	}

	.related-posts::before {
		padding-bottom: 2rem;
	}

	.related-posts__list {
		grid-template-columns: repeat(3, 1fr);
	}
}

@media (min-width: 768px) and (max-width: 1079px) {
	.related-posts::before,
	.related-posts__list {
		gap: 1.5rem;
		width: 100%;
		max-width: 768px;
		margin-inline: auto;
	}
}

@media (min-width: 1080px) {
	.related-posts {
		padding-bottom: 6rem;
	}
}

/* View More ボタン
   ボタンブロック（.post-content .wp-block-button__link）とフォームの送信ボタン（.contact-form__submit）も同じ見た目にする
   ========================================================================== */
.btn-more,
.post-content .wp-block-button__link {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	min-width: 15rem;
	min-height: 3.5rem;
	/* 右端の矢印に文字が重ならないよう、左右に矢印分の余白をとる */
	padding: 0.75rem 3.25rem;
	background: var(--color-primary);
	border: solid var(--color-line);
	border-width: 0 0 4px;
	border-radius: 0;
	box-shadow: 0 8px 12px color-mix(in srgb, var(--color-primary) 8%, transparent);
	color: var(--color-white);
	font: 700 0.875rem/1.5 var(--font-base);
	text-align: center;
	text-decoration: none;
}

.contact-form__submit {
	cursor: pointer;
}

/* 左下のオレンジアクセント（下ボーダーの上に重ねる）。ホバーで右端まで伸ばす */
.btn-more::after,
.post-content .wp-block-button__link::after {
	content: "";
	position: absolute;
	inset: auto auto -4px 0;
	width: 24px;
	height: 4px;
	background: var(--color-accent);
	transition: width 0.5s var(--ease-out);
}

.btn-more:hover::after,
.btn-more:focus-visible::after,
.post-content .wp-block-button__link:hover::after,
.post-content .wp-block-button__link:focus-visible::after {
	width: 100%;
}

/* 矢印（右端で上下中央）。画像を書けないボタンブロック・送信ボタンは疑似要素で表示 */
.btn-more__icon,
.post-content .wp-block-button__link::before,
.contact-form__submit::before {
	position: absolute;
	top: calc(50% - 3px);
	right: 19.5px;
	max-width: none;
	transition: translate 0.3s var(--ease-out);
}

.post-content .wp-block-button__link::before,
.contact-form__submit::before {
	content: "";
	width: 21px;
	height: 6px;
	background: url("assets/images/icon-arrow-right.svg") no-repeat;
}

.btn-more:hover .btn-more__icon,
.btn-more:focus-visible .btn-more__icon,
.post-content .wp-block-button__link:hover::before,
.post-content .wp-block-button__link:focus-visible::before,
.contact-form__submit:hover::before,
.contact-form__submit:focus-visible::before {
	translate: 4px 0;
}

@media (min-width: 768px) {
	.btn-more,
	.post-content .wp-block-button__link {
		min-height: 4rem;
	}
}

/* 白地 + 枠線（サブの動線） */
.btn-more--outline {
	background: var(--color-bg);
	border: 1px solid var(--color-primary);
	color: var(--color-primary);
}

.btn-more--outline::after {
	inset: auto auto -1px -1px;
}

.btn-more--outline:hover::after,
.btn-more--outline:focus-visible::after {
	width: calc(100% + 2px);
}

/* ==========================================================================
   固定ページ（プライバシーポリシーなど）
   本文は記事詳細と共通の .post-content。ここでは固定ページで使う要素を足す
   ========================================================================== */
.page-body {
	padding: 2.5rem var(--gutter-content) 4rem;
}

/* 見出し 2・ボタンの前は余白を広げる（gap に足す） */
.page-body .post-content > h2:not(:first-child) {
	margin-top: 2.5rem;
}

.page-body .post-content > .wp-block-buttons:not(:first-child) {
	margin-top: 2rem;
}

/* 見出し 4：先頭にオレンジの四角 */
.page-body .post-content h4 {
	font: 700 1rem/1.6 var(--font-base);
	letter-spacing: normal;
}

.page-body .post-content h4::before {
	content: "■" / "";
	margin-right: 0.25em;
	color: var(--color-accent);
}

@media (min-width: 768px) {
	.page-body {
		padding: 3.5rem var(--gutter-content) 6rem;
	}

	.page-body .post-content > h2:not(:first-child) {
		margin-top: 3rem;
	}

	.page-body .post-content > .wp-block-buttons:not(:first-child) {
		margin-top: 2.5rem;
	}

	.page-body .post-content h4 {
		font-size: 1.125rem;
	}
}

@media (min-width: 768px) and (max-width: 1079px) {
	.page-body > * {
		max-width: 768px;
		margin-inline: auto;
	}
}

@media (min-width: 1080px) {
	.page-body {
		padding: 5rem var(--gutter-content) 7.5rem;
	}

	.page-body > * {
		max-width: 800px;
		margin-inline: auto;
	}
}

/* リード文（段落のブロックスタイル「リード文」） */
.post-content .is-style-lead {
	color: var(--color-primary);
	font: 700 1.0625rem/1.9 var(--font-serif);
	letter-spacing: 0.04em;
}

@media (min-width: 768px) {
	.post-content .is-style-lead {
		font-size: 1.25rem;
	}
}

/* 表：1 行目（thead）を見出しにする */
.post-content table {
	width: 100%;
	background: var(--color-bg);
	border: 1px solid var(--color-line);
	border-collapse: collapse;
	font: 400 0.875rem/1.7 var(--font-base);
}

.post-content table :is(thead, tfoot) {
	border: 0;
}

.post-content table tr {
	border-bottom: 1px solid var(--color-line);
}

.post-content table :is(th, td) {
	padding: 0.75rem;
	border: 0;
	text-align: left;
	vertical-align: top;
}

.post-content table :is(th, td):not(:last-child) {
	border-right: 1px solid var(--color-line);
}

.post-content table :is(th, td):first-child:not(:last-child) {
	width: 7rem;
}

.post-content table thead th {
	padding-block: 0.625rem;
	background: var(--color-primary);
	color: var(--color-white);
	font-weight: 700;
}

.post-content table thead th:not(:last-child) {
	border-right-color: var(--color-line-inverse);
}

@media (min-width: 768px) {
	.post-content table {
		font-size: 0.9375rem;
	}

	.post-content table :is(th, td) {
		padding: 1.125rem 1.5rem;
	}

	.post-content table :is(th, td):first-child:not(:last-child) {
		width: 12.5rem;
	}

	.post-content table thead th {
		padding-block: 0.875rem;
	}
}

/* 注意ボックス（グループのブロックスタイル「注意ボックス」）。中の見出しをタイトルにする */
.post-content .is-style-notice,
.post-content .is-style-notice > .wp-block-group__inner-container {
	display: flex;
	flex-direction: column;
	gap: 0.625rem;
}

.post-content .is-style-notice {
	padding: 1.25rem;
	border: 1px solid var(--color-primary);
	font: 400 0.875rem/1.9 var(--font-base);
}

.post-content .is-style-notice * {
	margin: 0;
}

.post-content .is-style-notice :is(h2, h3, h4, h5, h6) {
	padding: 0;
	background: none;
	border: 0;
	color: var(--color-primary);
	font: 700 0.9375rem/normal var(--font-serif);
	letter-spacing: 0.08em;
}

.post-content .is-style-notice :is(h2, h3, h4, h5, h6)::before {
	content: none;
}

@media (min-width: 768px) {
	.post-content .is-style-notice {
		padding: 1.5rem 1.75rem;
		font-size: 0.9375rem;
	}

	.post-content .is-style-notice :is(h2, h3, h4, h5, h6) {
		font-size: 1.0625rem;
	}
}

/* ボタンブロックの並び。ボタンの見た目は .btn-more と共通 */
.post-content :where(.wp-block-buttons) {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 1rem;
}

/* ==========================================================================
   404
   ========================================================================== */
.not-found {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 1rem;
	padding: 2.5rem var(--gutter-content) 4rem;
}

@media (min-width: 768px) {
	.not-found {
		gap: 1.5rem;
		padding: 3.5rem var(--gutter-content) 5rem;
	}
}

@media (min-width: 1080px) {
	.not-found {
		padding: 4rem var(--gutter-content) 6rem;
	}
}

/* ==========================================================================
   アクセス
   ========================================================================== */
.access {
	padding: 2rem var(--gutter-content) 3rem;
	border: solid var(--color-border);
	border-width: 2px 0;
}

@media (min-width: 768px) {
	.access {
		padding: 4.5rem var(--gutter-content);
	}
}

.access__inner {
	display: grid;
	gap: 1.5rem;
}

@media (min-width: 768px) {
	.access__inner {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		align-items: start;
		gap: 2.5rem;
		max-width: 768px;
		margin: 0 auto;
	}
}

@media (min-width: 1080px) {
	.access__inner {
		grid-template-columns: minmax(0, 568fr) minmax(0, 600fr);
		max-width: 1200px;
	}
}

.access__info {
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
}

/* 左揃えの見出し */
.section-heading--start {
	align-items: flex-start;
	text-align: start;
}

/* 施設（サイト運営者）の連絡先 */
.access__contact {
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
	margin-top: 1rem;
	font-style: normal;
}

.access__name {
	margin: 0;
	color: var(--color-primary);
	font: 700 1.125rem/1.6 var(--font-serif);
}

.access__address {
	margin: 0;
	color: var(--color-text-muted);
	font: 400 1rem/1.5rem var(--font-base);
}

.access__list {
	display: grid;
	grid-template-columns: 5rem minmax(0, 1fr);
	gap: 0 0.5rem;
	margin: 0;
	color: var(--color-text-muted);
	font: 400 0.9375rem/1.5rem var(--font-base);
}

.access__list dd {
	margin: 0;
}

.access__button {
	align-self: center;
	margin-top: 0.75rem;
}

.access__map {
	height: 240px;
	background: var(--color-placeholder);
	border: 1px solid var(--color-border);
}

.access__map iframe {
	display: block;
	width: 100%;
	height: 100%;
	border: 0;
}

@media (min-width: 768px) {
	.access__name {
		font-size: 1.25rem;
	}

	.access__address {
		line-height: 1.75rem;
	}

	.access__button {
		align-self: flex-start;
		margin-top: 1.125rem;
	}

	.access__map {
		height: 320px;
	}
}

@media (min-width: 1080px) {
	/* PC は 1 行に収まるため、項目名の幅を詰めて続けて表示 */
	.access__list {
		grid-template-columns: auto minmax(0, 1fr);
		gap: 0;
		line-height: 1.75rem;
	}
}

/* ==========================================================================
   お問い合わせ
   ========================================================================== */
.contact {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 1.5rem;
	padding: 2rem var(--gutter-content) 3rem;
	background: var(--color-bg-muted);
}

@media (min-width: 768px) {
	.contact {
		gap: 2rem;
		padding: 4.5rem var(--gutter-content);
	}
}

.contact__lead {
	margin: 0;
	font: 400 1rem/1.8 var(--font-base);
	text-align: center;
}

@media (min-width: 768px) {
	.contact__lead {
		font-size: 1.0625rem;
		line-height: 1.9;
	}
}

/* トップの「お問い合わせフォームへ」ボタン（.btn-more の幅広版） */
.contact__button {
	width: 18.75rem;
	max-width: 100%;
}

/* お問い合わせページ（ステップ表示 + 入力 / 確認 / 完了） */
.contact-page {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 2rem;
	padding: 2.5rem var(--gutter-content) 4rem;
	background: var(--color-bg-muted);
}

@media (min-width: 768px) {
	.contact-page {
		gap: 2.5rem;
		padding: 3.5rem var(--gutter-content) 6rem;
	}
}

/* ステップ表示
   ========================================================================== */
.contact-steps {
	--line-width: 64px;
	display: flex;
	gap: var(--line-width);
	margin: 0;
	padding: 0;
	list-style: none;
}

@media (min-width: 768px) {
	.contact-steps {
		--line-width: 96px;
	}
}

.contact-steps__item {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.5rem;
	width: 36px;
	color: var(--color-text-muted-strong);
	font: 400 0.8125rem/normal var(--font-base);
	white-space: nowrap;
}

/* 前のステップとのつなぎ線 */
.contact-steps__item + .contact-steps__item::before {
	content: "";
	position: absolute;
	inset: 17px 100% auto auto;
	width: var(--line-width);
	height: 2px;
	background: var(--color-line);
}

.contact-steps__number {
	display: grid;
	place-items: center;
	width: 36px;
	height: 36px;
	background: var(--color-bg);
	border: 1.5px solid var(--color-line);
	border-radius: 50%;
	color: var(--color-text-muted);
	font: 700 0.9375rem/1 var(--font-base);
}

.contact-steps__item.is-done,
.contact-steps__item.is-current {
	color: var(--color-primary);
}

.contact-steps__item.is-done::before,
.contact-steps__item.is-current::before {
	background: var(--color-primary);
}

.contact-steps__item.is-done .contact-steps__number {
	border-color: var(--color-primary);
	color: var(--color-primary);
}

.contact-steps__item.is-current {
	font-weight: 700;
}

.contact-steps__item.is-current .contact-steps__number {
	background: var(--color-primary);
	border-color: var(--color-primary);
	color: var(--color-white);
}

.contact__inner {
	display: grid;
	gap: 1rem;
	width: 100%;
}

@media (min-width: 768px) {
	.contact__inner {
		gap: 1.5rem;
		max-width: 768px;
	}
}

.contact__notes,
.contact__form {
	background: var(--color-bg);
	border: 1px solid var(--color-primary);
}

/* 注意事項
   ========================================================================== */
.contact__notes {
	display: flex;
	flex-direction: column;
	gap: 1.125rem;
	padding: 1.5rem;
}

.contact__notes-title {
	margin: 0;
	color: var(--color-primary);
	font: 700 1.125rem/normal var(--font-serif);
}

.contact__notes-title + .contact__note {
	margin-top: 0.125rem;
}

.contact__note {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
}

.contact__note-title {
	margin: 0;
	font: 700 0.875rem/normal var(--font-base);
}

.contact__note-text {
	margin: 0;
	font: 400 0.875rem/1.375rem var(--font-base);
}

@media (min-width: 768px) {
	.contact__notes {
		gap: 1.25rem;
		padding: 2rem;
	}

	.contact__notes-title {
		font-size: 1.25rem;
	}

	.contact__notes-title + .contact__note {
		margin-top: 0.25rem;
	}

	.contact__note-title {
		font-size: 1rem;
	}
}

/* フォーム（Contact Form 7 の出力。プラグインの CSS は読み込まない）
   ========================================================================== */
.contact__form {
	padding: 1.5rem;
}

@media (min-width: 768px) {
	.contact__form {
		padding: 2rem 2rem 2.5rem;
	}
}

.wpcf7 .hidden-fields-container {
	display: none;
}

.contact-form {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 1.25rem;
}

.contact-form__fields {
	display: flex;
	flex-direction: column;
	gap: 1rem;
	width: 100%;
}

.contact-form__field {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
}

.contact-form__label {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	color: var(--color-primary);
	font: 700 0.8125rem/normal var(--font-base);
}

.contact-form__required {
	padding: 0.125rem 0.375rem;
	background: var(--color-accent);
	color: var(--color-text);
	font: 700 0.6875rem/normal var(--font-base);
}

.contact-form .wpcf7-form-control-wrap {
	display: block;
}

/* iOS Safari が入力時に拡大しないよう、SP の文字サイズは 16px */
.contact-form__field .wpcf7-form-control {
	display: block;
	width: 100%;
	height: 3.25rem;
	margin: 0;
	padding: 0 1rem;
	background: var(--color-bg);
	border: 1px solid var(--color-input-border);
	border-radius: 0;
	color: var(--color-text);
	font: 400 1rem/normal var(--font-base);
}

.contact-form__field textarea.wpcf7-form-control {
	height: 7.5rem;
	padding: 1rem;
	line-height: 1.5rem;
	resize: vertical;
}

.contact-form__field .wpcf7-form-control::placeholder {
	color: var(--color-input-placeholder);
	opacity: 1;
}

.contact-form__field .wpcf7-form-control:focus-visible {
	border-color: var(--color-primary);
}

/* エラー: 枠を太くして色以外でも判別できるようにする */
.contact-form__field .wpcf7-form-control[aria-invalid="true"] {
	background: var(--color-error-bg);
	border-color: var(--color-error);
	box-shadow: inset 0 0 0 0.5px var(--color-error);
}

.contact-form .wpcf7-not-valid-tip {
	display: flex;
	gap: 0.25em;
	margin-top: 0.5rem;
	color: var(--color-error);
	font: 500 0.8125rem/1.25rem var(--font-base);
}

.contact-form .wpcf7-not-valid-tip::before {
	content: "！";
	flex-shrink: 0;
}

@media (min-width: 768px) {
	.contact-form {
		gap: 1.5rem;
	}

	.contact-form__fields {
		gap: 1.25rem;
	}

	.contact-form__label {
		font-size: 0.875rem;
	}

	.contact-form__field .wpcf7-form-control {
		height: 3.5rem;
		font-size: 0.9375rem;
	}

	.contact-form__field textarea.wpcf7-form-control {
		height: 10rem;
		line-height: 1.75rem;
	}
}

/* プライバシーポリシーへの同意
   ========================================================================== */
.contact-form__consent {
	text-align: center;
}

.contact-form__consent label {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	font: 400 0.875rem/1.6 var(--font-base);
	text-align: left;
	cursor: pointer;
}

.contact-form__consent input[type="checkbox"] {
	appearance: none;
	flex-shrink: 0;
	display: grid;
	place-content: center;
	width: 20px;
	height: 20px;
	margin: 0;
	background: var(--color-bg);
	border: 1.5px solid var(--color-input-border);
	cursor: pointer;
}

/* チェックマーク */
.contact-form__consent input[type="checkbox"]::before {
	content: "";
	width: 10px;
	height: 6px;
	margin-top: -2px;
	border: solid var(--color-white);
	border-width: 0 0 2px 2px;
	rotate: -45deg;
	scale: 0;
}

.contact-form__consent input[type="checkbox"]:checked {
	background: var(--color-primary);
	border-color: var(--color-primary);
}

.contact-form__consent input[type="checkbox"]:checked::before {
	scale: 1;
}

.contact-form__consent input[type="checkbox"][aria-invalid="true"]:not(:checked) {
	background: var(--color-error-bg);
	border-color: var(--color-error);
}

.contact-form__consent-link {
	color: var(--color-primary);
	font-weight: 500;
	text-decoration: underline;
	text-underline-offset: 0.2em;
	transition: text-decoration-color 0.25s var(--ease-out);
}

.contact-form__consent-link:hover {
	text-decoration-color: var(--color-accent);
}

.contact-form__consent .contact-form__required {
	display: inline-block;
	margin-left: 0.5rem;
	vertical-align: 0.1em;
	line-height: normal;
}

.contact-form__consent .wpcf7-not-valid-tip {
	justify-content: center;
}

@media (min-width: 768px) {
	.contact-form__consent label {
		gap: 0.625rem;
		font-size: 0.9375rem;
	}

	.contact-form__consent .contact-form__required {
		margin-left: 0.625rem;
	}
}

/* 送信中は二重送信を防ぐ */
.contact-form.submitting .contact-form__submit {
	opacity: 0.6;
	pointer-events: none;
	cursor: progress;
}

/* 確認画面のボタン（修正する / 送信する） */
.contact-form__actions {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 1rem;
	width: 100%;
}

.contact-form__actions .btn-more {
	width: 16.25rem;
	max-width: 100%;
}

@media (min-width: 768px) {
	.contact-form__actions {
		flex-direction: row;
		justify-content: center;
		gap: 1.5rem;
	}
}

/* 送信結果のメッセージ */
.contact-form .wpcf7-response-output {
	width: 100%;
	margin: 0;
	padding: 0.875rem 1.25rem;
	background: var(--color-bg-sub);
	border: 1px solid var(--color-primary);
	font: 500 0.875rem/1.6 var(--font-base);
	text-align: center;
}

.contact-form.init .wpcf7-response-output,
.contact-form.resetting .wpcf7-response-output,
.contact-form.submitting .wpcf7-response-output {
	display: none;
}

.contact-form.invalid .wpcf7-response-output,
.contact-form.unaccepted .wpcf7-response-output,
.contact-form.failed .wpcf7-response-output,
.contact-form.aborted .wpcf7-response-output,
.contact-form.spam .wpcf7-response-output {
	background: var(--color-error-bg);
	border-color: var(--color-error);
	color: var(--color-error);
}

/* 確認画面
   ========================================================================== */
.contact__form--confirm {
	display: flex;
	flex-direction: column;
	gap: 1.5rem;
}

.contact__form-title {
	margin: 0;
	color: var(--color-primary);
	font: 700 1.125rem/normal var(--font-serif);
	letter-spacing: 0.08em;
}

.contact-confirm {
	width: 100%;
	margin: 0;
	border-top: 1px solid var(--color-line);
}

.contact-confirm__row {
	display: flex;
	flex-direction: column;
	gap: 0.25rem;
	padding: 1rem 0;
	border-bottom: 1px solid var(--color-line);
}

.contact-confirm__label {
	color: var(--color-primary);
	font: 700 0.8125rem/1.8 var(--font-base);
}

/* 改行はそのまま表示する */
.contact-confirm__value {
	margin: 0;
	font: 400 0.9375rem/1.8 var(--font-base);
	white-space: pre-wrap;
	overflow-wrap: anywhere;
}

@media (min-width: 768px) {
	.contact__form--confirm,
	.contact-form--confirm {
		gap: 2rem;
	}

	.contact__form-title {
		font-size: 1.25rem;
	}

	.contact-confirm__row {
		flex-direction: row;
		gap: 1.5rem;
		padding: 1.25rem 0;
	}

	.contact-confirm__label {
		flex-shrink: 0;
		width: 11.25rem;
		font-size: 0.875rem;
	}

	.contact-confirm__value {
		flex: 1;
		min-width: 0;
		font-size: 1rem;
	}
}

/* 完了画面
   ========================================================================== */
.contact-thanks {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 1.5rem;
	padding: 2.5rem 1.5rem;
	background: var(--color-bg);
	border: 1px solid var(--color-primary);
	text-align: center;
}

.contact-thanks__title {
	margin: 0;
	font: 700 1.25rem/1.5 var(--font-serif);
	letter-spacing: 0.08em;
}

/* SP は 1 行が短く中央揃えだと読みにくいため左揃え */
.contact-thanks__text {
	margin: 0;
	font: 400 0.9375rem/2 var(--font-base);
	text-align: left;
}

.contact-thanks__note {
	margin: 0;
	color: var(--color-text-muted);
	font: 400 0.8125rem/1.8 var(--font-base);
	text-align: left;
}

.contact-thanks__button {
	width: 16.25rem;
	max-width: 100%;
	margin-top: 0.5rem;
}

@media (min-width: 768px) {
	.contact-thanks {
		padding: 3.5rem 3rem;
	}

	.contact-thanks__title {
		font-size: 1.625rem;
		line-height: normal;
	}

	.contact-thanks__text,
	.contact-thanks__note {
		text-align: center;
	}
}

/* ==========================================================================
   Footer
   ========================================================================== */
.site-footer {
	display: flex;
	flex-direction: column;
	gap: 1.75rem;
	padding: 2rem var(--gutter-content);
	background: var(--color-bg-dark);
	border-top: 1px solid var(--color-primary);
	color: var(--color-text-inverse);
	font: 400 0.875rem/normal var(--font-base);
}

/* 暗い背景ではプライマリ色のフォーカスリングが見えないためアクセント色にする */
.site-footer :focus-visible {
	outline-color: var(--color-accent);
}

@media (min-width: 768px) {
	.site-footer {
		gap: 2rem;
		padding: 4.5rem var(--gutter-content);
	}
}

.site-footer__top {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 1.5rem;
}

@media (min-width: 768px) {
	.site-footer__top {
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
	}
}

/* Footer nav
   ========================================================================== */
.footer-nav__list {
	display: flex;
	flex-direction: column;
	gap: 1.5rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

@media (min-width: 768px) {
	.footer-nav__list {
		flex-flow: row wrap;
		gap: 1rem 3rem;
		font-size: 0.9375rem;
	}
}

/* ターゲットサイズ 24px を確保するため上下に余白を足し、見た目の間隔は margin で相殺 */
.footer-nav__link,
.site-footer__privacy a {
	position: relative;
	display: inline-block;
	margin: -2px 0;
	padding: 2px 0;
	white-space: nowrap;
}

.footer-nav__link::after,
.site-footer__privacy a::after {
	content: "";
	position: absolute;
	inset: calc(100% + 2px) 0 auto;
	height: 1px;
	background: var(--color-accent);
	scale: 0 1;
	transform-origin: left;
	transition: scale 0.25s var(--ease-out);
}

.footer-nav__link:hover::after,
.footer-nav__link:focus-visible::after,
.site-footer__privacy a:hover::after,
.site-footer__privacy a:focus-visible::after {
	scale: 1;
}

/* Footer bottom
   ========================================================================== */
.site-footer__bottom {
	display: flex;
	flex-direction: column;
	gap: 2rem;
	padding-top: 1.75rem;
	border-top: 1px solid var(--color-primary);
}

.site-footer__privacy {
	margin: 0;
}

.site-footer__brand {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.875rem;
}

.site-footer__logo {
	line-height: 0;
}

.site-footer__logo img {
	width: 180px;
	height: 37.5px;
	object-fit: contain;
}

.site-footer__sns-list {
	display: flex;
	gap: 1rem;
}

/* アイコン 20px にクリック領域 24px を確保 */
.site-footer__sns {
	margin: -2px;
	padding: 2px;
	line-height: 0;
}

.site-footer__copyright {
	margin: 0;
}

.site-footer__copyright small {
	font-size: 0.75rem;
}

/* PC: ロゴ・SNS を右寄せし、最下段にプライバシーポリシーとコピーライトを左右に並べる */
@media (min-width: 768px) {
	.site-footer__bottom {
		display: grid;
		grid-template:
			". logo" auto
			". sns" auto
			"privacy copyright" auto / 1fr auto;
		align-items: center;
		gap: 1rem;
		padding-top: 2rem;
	}

	.site-footer__brand {
		display: contents;
	}

	.site-footer__logo {
		grid-area: logo;
		justify-self: end;
	}

	.site-footer__logo img {
		width: 218px;
		height: 45px;
	}

	.site-footer__sns-list {
		grid-area: sns;
		justify-self: end;
	}

	.site-footer__privacy {
		grid-area: privacy;
	}

	.site-footer__copyright {
		grid-area: copyright;
	}

	.site-footer__copyright small {
		font-size: 0.8125rem;
	}
}

/* タブレット: 中身は幅 768px で中央寄せ、区切り線は全幅。ナビは上から順に 2 列へ流す */
@media (min-width: 768px) and (max-width: 1079px) {
	.site-footer {
		padding: 4rem var(--gutter);
	}

	.site-footer__top {
		align-items: flex-start;
		width: 100%;
		max-width: 768px;
		margin-inline: auto;
	}

	.footer-nav__list {
		display: grid;
		grid-template-rows: repeat(3, auto);
		grid-auto-flow: column;
		grid-auto-columns: 12rem;
		gap: 1.5rem 1.6875rem;
	}

	.site-footer__bottom {
		padding-inline: max(0px, (100% - 768px) / 2);
	}
}