/* =========================================================
   「アウトドアフェスについて」ページ専用スタイル（page-fes.php）
   三波渓谷ページの.p-sanba-*・協議会についてページの.p-about-*とは
   クラス名（.p-fes-*）を分けており、このファイルを変更しても
   他のページの見た目には影響しない。
========================================================= */

/* =========================================================
   ① HERO（三波渓谷・協議会についてページと世界観を統一しつつ、
   このページ専用に実装。「OUTDOOR FES」を手書き風の大見出しにする）
========================================================= */
.p-fes-hero {
	position: relative;
	width: 100%;
	aspect-ratio: 16 / 6.2;
	min-height: 460px;
	background-color: var(--wp--preset--color--forest);
	background-size: cover;
	background-position: center;
	color: var(--wp--preset--color--base);
	overflow: hidden;
}
/* 写真が未設定の間の仮の背景 */
.p-fes-hero.is-placeholder {
	background-image: linear-gradient(160deg, var(--wp--preset--color--forest), #16302a);
}
.p-fes-hero__overlay {
	position: absolute;
	inset: 0;
	/* 写真の左側だけを弱く暗くして、文字の可読性を確保する（他ページのHEROと同程度の弱さ） */
	background: linear-gradient(100deg, rgba(0, 0, 0, 0.5) 0%, rgba(0, 0, 0, 0.15) 45%, rgba(0, 0, 0, 0) 70%);
}
.p-fes-hero__inner {
	position: absolute;
	left: 9%;
	top: 50%;
	transform: translateY(-50%);
	max-width: 480px;
}
.p-fes-hero__label {
	display: block;
	color: var(--wp--preset--color--base);
	opacity: 0.85;
	margin-bottom: 4px;
}
.p-fes-hero__heading {
	font-family: var(--wp--preset--font-family--fes-hand);
	font-size: 72px;
	line-height: 1;
	margin-bottom: 16px;
}
.p-fes-hero__lead {
	font-size: 14px;
	line-height: 1.9;
	max-width: 420px;
}
@media (max-width: 768px) {
	.p-fes-hero {
		aspect-ratio: auto;
		min-height: 340px;
	}
	.p-fes-hero__inner {
		left: 20px;
		right: 20px;
		max-width: none;
	}
	.p-fes-hero__heading {
		font-size: 48px;
		margin-bottom: 10px;
	}
	.p-fes-hero__lead {
		font-size: 13px;
	}
}

/* パンくず（写真の下、白背景側に配置） */
.p-fes-breadcrumb {
	padding-top: 20px;
	padding-bottom: 4px;
	color: var(--wp--preset--color--ink-soft);
}
@media (max-width: 768px) {
	.p-fes-breadcrumb {
		padding-top: 16px;
	}
}

/* 見出しの上に置く小さな「―」アクセント線（協議会についてページと同じ考え方だが、
   このページのCSS内だけに実装し、他ページには展開していない） */
.p-fes-section-mark {
	display: block;
	width: 24px;
	height: 2px;
	background: var(--wp--preset--color--forest);
}

/* =========================================================
   ② ときがわアウトドアフェスとは？
   左：「―ABOUT FES」ラベル＋見出し＋説明文 ／ 右：公式ロゴ（実物表示）
========================================================= */
.p-fes-about {
	background: var(--wp--preset--color--base);
	padding-block: 56px;
}
.p-fes-about__grid {
	display: grid;
	/* 左60%：右40%程度 */
	grid-template-columns: 3fr 2fr;
	align-items: center;
	gap: 48px;
}
.p-fes-about__label-row {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-bottom: 14px;
}
.p-fes-about__label-row .c-en-label {
	color: var(--wp--preset--color--river);
}
.p-fes-about__heading {
	font-family: var(--wp--preset--font-family--zen-old-mincho);
	font-weight: 500;
	font-size: 26px;
	margin-bottom: 18px;
}
.p-fes-about__body {
	font-size: 14px;
	line-height: 1.9;
	color: var(--wp--preset--color--ink);
	max-width: 420px;
}
.p-fes-about__body p + p {
	margin-top: 1em;
}
/* 右側の公式ロゴ：本文より少し控えめなサイズで、余白の中に自然に配置する。
   協議会ページの背景ロゴとは異なり、加工せず実物のまま表示する。 */
.p-fes-about__visual {
	text-align: center;
}
.p-fes-about__logo {
	width: 100%;
	max-width: 220px;
	height: auto;
}
@media (max-width: 768px) {
	.p-fes-about {
		padding-block: 40px;
	}
	.p-fes-about__grid {
		grid-template-columns: 1fr;
		gap: 28px;
	}
	.p-fes-about__body {
		max-width: none;
	}
	.p-fes-about__logo {
		max-width: 180px;
		margin-inline: auto;
	}
}

/* =========================================================
   ③ 3つのテーマでときがわと"つながる"（遊ぶ／食べる／暮らすの3件固定）
   背景はシンプルな白〜ごく薄いGreigeのみ。植物柄・強いカード背景・box-shadowは
   使わず、写真と「遊ぶ・食べる・暮らす」の文字を主役にする。
========================================================= */
.p-fes-features {
	background: var(--wp--preset--color--base-alt);
	padding-block: 56px;
}
.p-fes-features__label-row {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-bottom: 14px;
}
.p-fes-features__label-row .c-en-label {
	color: var(--wp--preset--color--river);
}
.p-fes-features__heading {
	font-family: var(--wp--preset--font-family--zen-old-mincho);
	font-weight: 500;
	font-size: 26px;
	line-height: 1.5;
	margin-bottom: 32px;
}
.p-fes-features__grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 32px;
}
.p-fes-features__photo {
	aspect-ratio: 4 / 3;
	overflow: hidden;
	background: var(--wp--preset--color--greige);
	margin-bottom: 16px;
}
.p-fes-features__photo img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.p-fes-features__title-row {
	display: flex;
	align-items: baseline;
	gap: 10px;
	margin-bottom: 8px;
}
/* 既存サイトの見出しより少し力強く、Forest Greenで表示する */
.p-fes-features__title {
	font-family: var(--wp--preset--font-family--zen-old-mincho);
	font-weight: 600;
	font-size: 22px;
	color: var(--wp--preset--color--forest);
}
.p-fes-features__en {
	font-family: var(--wp--preset--font-family--jost);
	font-size: 12px;
	letter-spacing: 0.12em;
	color: var(--wp--preset--color--river);
}
.p-fes-features__body {
	font-size: 13px;
	line-height: 1.8;
	color: var(--wp--preset--color--ink-soft);
}
@media (max-width: 768px) {
	.p-fes-features {
		padding-block: 40px;
	}
	.p-fes-features__heading {
		font-size: 22px;
		margin-bottom: 24px;
	}
	/* SPは1カラム。カードが縦に間延びしないよう、項目間の余白を絞る */
	.p-fes-features__grid {
		grid-template-columns: 1fr;
		gap: 28px;
	}
	.p-fes-features__photo {
		margin-bottom: 12px;
	}
}

/* =========================================================
   ④ 2026年度開催情報＋Instagram
   PC：左60%（開催情報）／右40%（Instagramへの導線）の2カラムを1セクションにまとめる。
   中央に薄い縦罫線を入れ、カード化はしない。SPは1カラムで開催情報→イベント写真→Instagramの順
   （DOM順そのままで自然に積む。開催情報側のマークアップ内にイベント写真が既に含まれているため、
   並び替え用の特別なCSSは不要）。 */
.p-fes-info-instagram {
	background: var(--wp--preset--color--base);
	padding-block: 56px;
}
.p-fes-info-instagram__grid {
	display: grid;
	grid-template-columns: 3fr 2fr;
	gap: 64px;
}
.p-fes-info-instagram__instagram {
	padding: 48px 48px 48px 64px;
	border-left: 1px solid var(--wp--preset--color--sand);
	background: var(--wp--preset--color--base-alt);
}

/* ---------- 開催情報（左） ---------- */
.p-fes-info__heading-row {
	display: flex;
	align-items: baseline;
	gap: 14px;
	margin-bottom: 18px;
}
.p-fes-info__heading {
	font-family: var(--wp--preset--font-family--zen-old-mincho);
	font-weight: 500;
	font-size: 26px;
}
/* 「2026」は見出しの近くに置く手書き風アクセント。見出し「開催情報」よりは自由な表情にしつつ、
   開催日ほどは目立たせない（前回の40pxから約1.4倍の56pxに拡大）。 */
.p-fes-info__year {
	font-family: var(--wp--preset--font-family--fes-hand);
	font-size: 56px;
	line-height: 1;
	color: var(--wp--preset--color--forest);
	opacity: 0.85;
	transform: rotate(-6deg);
}
/* 開催日・会場を最も目立たせる */
.p-fes-info__date {
	font-size: 20px;
	font-weight: 600;
	color: var(--wp--preset--color--ink);
	margin-bottom: 6px;
}
.p-fes-info__venue {
	font-size: 15px;
	line-height: 1.7;
	color: var(--wp--preset--color--ink);
	margin-bottom: 20px;
}
/* 来場者数予想・出展者予定数・主催は小さな補足情報として整理する */
.p-fes-info__meta {
	margin-bottom: 24px;
	border-top: 1px solid var(--wp--preset--color--sand);
	padding-top: 14px;
}
.p-fes-info__meta-row {
	display: flex;
	gap: 12px;
	font-size: 12px;
	line-height: 1.9;
}
.p-fes-info__meta-row dt {
	flex-shrink: 0;
	width: 88px;
	color: var(--wp--preset--color--ink-soft);
}
.p-fes-info__meta-row dd {
	color: var(--wp--preset--color--ink);
}
.p-fes-info__photo {
	aspect-ratio: 16 / 10;
	overflow: hidden;
	background: var(--wp--preset--color--greige);
	margin-bottom: 24px;
}
.p-fes-info__photo img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}
/* PDFへの案内は置かず、お問い合わせ（mailto）のみ */
.p-fes-info__contact-btn {
	display: inline-flex;
}

/* ---------- Instagram（右）：投稿一覧ではなく「公式Instagramへの導線」 ----------
   API・アクセストークンに依存する投稿取得は行わない（依頼により、投稿グリッド自体を廃止）。
   アイコン＋「Instagram」の小さなラベル行 → 大見出し → 本文 → アカウント名 → CTAボタン、の順。 */
.p-fes-ig__followus {
	font-family: var(--wp--preset--font-family--fes-hand);
	font-size: 20px;
	color: var(--wp--preset--color--river);
	opacity: 0.75;
	transform: rotate(-4deg);
	margin-bottom: 2px;
}
.p-fes-ig__kicker-row {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-bottom: 20px;
}
.p-fes-ig__icon {
	display: inline-flex;
	width: 20px;
	height: 20px;
	color: var(--wp--preset--color--forest);
}
.p-fes-ig__icon svg {
	width: 100%;
	height: 100%;
}
.p-fes-ig__kicker {
	font-family: var(--wp--preset--font-family--jost);
	font-size: 13px;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--wp--preset--color--river);
}
.p-fes-ig__heading {
	font-family: var(--wp--preset--font-family--zen-old-mincho);
	font-weight: 500;
	font-size: 26px;
	line-height: 1.5;
	color: var(--wp--preset--color--ink);
	margin-bottom: 20px;
}
.p-fes-ig__body {
	font-size: 14px;
	line-height: 1.9;
	color: var(--wp--preset--color--ink);
	margin-bottom: 20px;
}
.p-fes-ig__handle {
	font-family: var(--wp--preset--font-family--jost);
	font-size: 14px;
	letter-spacing: 0.02em;
	color: var(--wp--preset--color--forest);
	margin-bottom: 28px;
}
.p-fes-ig__cta {
	display: inline-flex;
}
@media (max-width: 768px) {
	.p-fes-info-instagram {
		padding-block: 40px;
	}
	.p-fes-info-instagram__grid {
		grid-template-columns: 1fr;
		gap: 40px;
	}
	.p-fes-info-instagram__instagram {
		padding: 32px 24px;
		border-left: none;
		border-top: 1px solid var(--wp--preset--color--sand);
	}
	.p-fes-info__year {
		/* PCと同様、約1.4倍（32px→45px） */
		font-size: 45px;
	}
	.p-fes-info__date {
		font-size: 18px;
	}
	.p-fes-ig__heading {
		font-size: 22px;
	}
}

/* =========================================================
   ⑤ 2025年の開催レポート
   背景をForest Green系にして、直前の「2026年度開催情報」（白背景）と視覚的に
   切り替える（現在の情報／過去の実績の区別）。PCは左（説明文・主な数字3つ）／
   右（写真3枚・同じ高さ）の横長構成。情報を詰め込みすぎず、主な数字は3つだけ強調する。
========================================================= */
.p-fes-report {
	background: var(--wp--preset--color--forest);
	color: var(--wp--preset--color--base);
	padding-block: 64px;
}
/* PCとSPで要素の並び順が異なる（SPは実績数字を説明文より先に見せる）ため、
   grid-template-areasで並び替える。マークアップの順序（label→heading→stats→
   body→photos→note→btn）は変えず、CSS側のarea配置だけで見た目の順序を制御する。 */
.p-fes-report__grid {
	display: grid;
	grid-template-columns: 2fr 3fr;
	column-gap: 56px;
	row-gap: 16px;
	align-items: center;
	grid-template-areas:
		"label   photos"
		"heading photos"
		"body    photos"
		"stats   photos"
		"note    photos"
		"btn     photos";
}
.p-fes-report__label { grid-area: label; }
.p-fes-report__heading { grid-area: heading; }
.p-fes-report__body { grid-area: body; }
.p-fes-report__stats { grid-area: stats; }
.p-fes-report__note { grid-area: note; }
.p-fes-report__btn { grid-area: btn; }
.p-fes-report__photos { grid-area: photos; }

.p-fes-report__label {
	display: block;
	color: var(--wp--preset--color--base);
	opacity: 0.75;
	margin-bottom: 6px;
}
.p-fes-report__heading {
	font-family: var(--wp--preset--font-family--zen-old-mincho);
	font-weight: 500;
	font-size: 26px;
	margin-bottom: 10px;
}
.p-fes-report__body {
	font-size: 14px;
	line-height: 1.9;
	opacity: 0.9;
	margin-top: 8px;
}
.p-fes-report__body p + p {
	margin-top: 1em;
}
/* 主な数字は3つだけ強調する（来場者数・出店者数・満足度） */
.p-fes-report__stats {
	display: flex;
	gap: 28px;
}
.p-fes-report__stat {
	display: flex;
	flex-direction: column;
}
.p-fes-report__stat-value {
	font-family: var(--wp--preset--font-family--zen-old-mincho);
	font-weight: 500;
	font-size: 26px;
	line-height: 1.3;
}
.p-fes-report__stat-label {
	font-size: 12px;
	opacity: 0.75;
	margin-top: 2px;
}
/* 前年比・メディア掲載数は補足文として小さく扱う */
.p-fes-report__note {
	font-size: 12px;
	opacity: 0.7;
	margin-top: 8px;
}
.p-fes-report__btn {
	display: inline-flex;
	margin-top: 8px;
}
/* 写真3枚は同じ高さに揃える */
.p-fes-report__photos {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 16px;
	align-self: center;
}
/* 会場全景・アクティビティの「広がり」が伝わるよう、横長の比率にしている
   （縦長3:4→横長4:3に変更。3枚とも同じ比率で高さを揃える）。 */
.p-fes-report__photo {
	aspect-ratio: 4 / 3;
	overflow: hidden;
	background: rgba(255, 255, 255, 0.12);
}
.p-fes-report__photo img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}
@media (max-width: 768px) {
	.p-fes-report {
		padding-block: 40px;
	}
	/* SPの表示順：見出し→実績数字→説明文→写真→補足→ボタン */
	.p-fes-report__grid {
		grid-template-columns: 1fr;
		row-gap: 20px;
		grid-template-areas:
			"label"
			"heading"
			"stats"
			"body"
			"photos"
			"note"
			"btn";
	}
	.p-fes-report__stats {
		flex-wrap: wrap;
		gap: 20px;
	}
	/* SPは写真を横スクロールさせず、2列で自然に表示する */
	.p-fes-report__photos {
		grid-template-columns: repeat(2, 1fr);
	}
	.p-fes-report__photo:first-child {
		grid-column: 1 / -1;
	}
}

/* =========================================================
   ⑥ メディア掲載実績（PR TIMES／Yahoo!ニュース／埼玉新聞／ランドネ／いこーよの5媒体固定）
   白背景＋薄い罫線だけで整理し、強いカードUIにはしない。PCは左（見出し・説明文）／
   右（5媒体の横並び）の横長構成。SPは横スクロールさせず2列グリッド。
========================================================= */
.p-fes-media {
	background: var(--wp--preset--color--base);
	padding-block: 56px;
}
.p-fes-media__grid {
	display: grid;
	grid-template-columns: 1fr 2fr;
	gap: 48px;
	align-items: center;
}
.p-fes-media__label {
	display: block;
	color: var(--wp--preset--color--river);
	margin-bottom: 10px;
}
.p-fes-media__heading {
	font-family: var(--wp--preset--font-family--zen-old-mincho);
	font-weight: 500;
	font-size: 26px;
	margin-bottom: 12px;
}
.p-fes-media__body {
	font-size: 13px;
	line-height: 1.8;
	color: var(--wp--preset--color--ink-soft);
}
.p-fes-media__list {
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	gap: 12px;
}
/* 強いカードUIにはせず、白背景＋薄い罫線だけで整理する */
.p-fes-media__item {
	border: 1px solid var(--wp--preset--color--sand);
	border-radius: 4px;
}
.p-fes-media__item-inner {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 6px;
	height: 100%;
	padding: 18px 10px;
	text-align: center;
	color: var(--wp--preset--color--ink);
}
a.p-fes-media__item-inner {
	cursor: pointer;
}
a.p-fes-media__item-inner:hover {
	border-color: var(--wp--preset--color--forest);
}
.p-fes-media__logo {
	max-width: 100%;
	max-height: 32px;
	width: auto;
	height: auto;
}
.p-fes-media__name {
	font-size: 13px;
	font-weight: 500;
	line-height: 1.5;
}
.p-fes-media__year {
	font-family: var(--wp--preset--font-family--jost);
	font-size: 11px;
	color: var(--wp--preset--color--ink-soft);
}
.p-fes-media__link-icon {
	display: inline-flex;
	width: 14px;
	height: 14px;
	color: var(--wp--preset--color--river);
}
.p-fes-media__link-icon svg {
	width: 100%;
	height: 100%;
}
.p-fes-media__note {
	margin-top: 16px;
	font-size: 12px;
	color: var(--wp--preset--color--ink-soft);
	text-align: right;
}
@media (max-width: 768px) {
	.p-fes-media {
		padding-block: 40px;
	}
	.p-fes-media__grid {
		grid-template-columns: 1fr;
		gap: 24px;
	}
	/* 横スクロールさせず2列グリッドで自然に表示する */
	.p-fes-media__list {
		grid-template-columns: repeat(2, 1fr);
	}
	.p-fes-media__note {
		text-align: left;
	}
}

/* =========================================================
   ⑦ お問い合わせ（ページ最後。非常にシンプルな締め）
   白〜ごく薄いGreige背景・カードUIなし・強い写真背景なし。見出し・説明文・
   メールアドレスへの導線だけを置く。セクション高さは必要以上に大きくしない。
========================================================= */
.p-fes-contact {
	background: var(--wp--preset--color--base-alt);
	padding-block: 56px;
}
.p-fes-contact__label {
	display: block;
	color: var(--wp--preset--color--river);
	margin-bottom: 10px;
}
.p-fes-contact__heading {
	font-family: var(--wp--preset--font-family--zen-old-mincho);
	font-weight: 500;
	font-size: 26px;
	margin-bottom: 12px;
}
.p-fes-contact__body {
	font-size: 14px;
	line-height: 1.9;
	color: var(--wp--preset--color--ink-soft);
	margin-bottom: 28px;
}
/* メールアドレスは大きめのアウトラインボタン風に。長いメールアドレスでも
   SPで折り返せるよう、幅は固定せずコンテンツに応じて広がるようにしている。 */
.p-fes-contact__mail {
	display: inline-flex;
	align-items: center;
	gap: 12px;
	padding: 16px 32px;
	border: 1px solid var(--wp--preset--color--forest);
	border-radius: 28px;
	font-size: 16px;
	font-weight: 500;
	color: var(--wp--preset--color--forest);
	background: var(--wp--preset--color--base);
	transition: background-color 0.2s ease, color 0.2s ease;
}
.p-fes-contact__mail:hover {
	background: var(--wp--preset--color--forest);
	color: var(--wp--preset--color--base);
}
.p-fes-contact__mail-icon {
	display: inline-flex;
	flex-shrink: 0;
	width: 20px;
	height: 20px;
}
.p-fes-contact__mail-icon svg {
	width: 100%;
	height: 100%;
}
.p-fes-contact__mail-text {
	word-break: break-all;
}
@media (max-width: 768px) {
	.p-fes-contact {
		padding-block: 40px;
	}
	.p-fes-contact__heading {
		font-size: 22px;
	}
	/* メールアドレスが長いため、SPは文字サイズとpaddingを少し絞ってはみ出さないようにする */
	.p-fes-contact__mail {
		display: flex;
		width: 100%;
		box-sizing: border-box;
		padding: 14px 20px;
		font-size: 14px;
	}
}