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

/* =========================================================
   ① HERO（三波渓谷・町民無料券についてページと世界観を統一しつつ、
   このページ専用に実装。右上に短いアクセントコピーを重ねる）
========================================================= */
.p-about-hero {
	position: relative;
	width: 100%;
	/* 「少し引き」で見せるための高さ。前回の16/4.6（1440px幅で約405px）だと
	   縦方向のクロップが大きく、フレーム上部や3人の足元が見切れていたため、
	   三波渓谷ページのHEROと同じ16/6.2に変更し、写真の縦方向をより多く見せている
	   （1440px幅で約558px。表示される元画像の縦方向の割合が約50%→約69%に増える）。 */
	aspect-ratio: 16 / 6.2;
	min-height: 460px;
	background-color: var(--wp--preset--color--forest);
	background-size: cover;
	/* フレーム上部の横バー〜人物の足元・ステップ台までを収める位置。
	   中央（50%）だと足元が窮屈になり、上寄せしすぎるとフレーム上部が切れるため、
	   実機確認しながらこの値に調整している。 */
	background-position: center 36%;
	color: var(--wp--preset--color--base);
	overflow: hidden;
}
/* 写真が未設定の間の仮の背景 */
.p-about-hero.is-placeholder {
	background-image: linear-gradient(160deg, var(--wp--preset--color--forest), #16302a);
}
.p-about-hero__overlay {
	position: absolute;
	inset: 0;
	/* 写真の左側を暗くして、文字の可読性を確保する。このページの写真は中央付近にも
	   人物が写っているため、他ページのHEROより少し右側まで（58%あたりまで）暗さを
	   伸ばし、テキストの下に人物のシルエットが直接重なっても読みやすくしている。 */
	background: linear-gradient(100deg, rgba(0, 0, 0, 0.55) 0%, rgba(0, 0, 0, 0.32) 40%, rgba(0, 0, 0, 0.12) 58%, rgba(0, 0, 0, 0) 78%);
}
.p-about-hero__inner {
	position: absolute;
	left: 9%;
	top: 50%;
	transform: translateY(-50%);
	max-width: 480px;
}
.p-about-hero__heading {
	font-family: var(--wp--preset--font-family--zen-old-mincho);
	font-weight: 500;
	font-size: 40px;
	line-height: 1.3;
	margin-bottom: 10px;
}
.p-about-hero__label {
	display: block;
	color: var(--wp--preset--color--base);
	opacity: 0.85;
	margin-bottom: 14px;
}
.p-about-hero__lead {
	font-size: 14px;
	line-height: 1.9;
	max-width: 420px;
}
/* 写真右上の短いアクセントコピー。手書き風にはせず、白・明朝の通常テキスト。
   本文より弱く見えるよう、控えめな不透明度・行間にしている。 */
.p-about-hero__accent {
	position: absolute;
	right: 6%;
	top: 12%;
	margin: 0;
	font-family: var(--wp--preset--font-family--zen-old-mincho);
	font-size: 16px;
	line-height: 1.6;
	text-align: right;
	color: var(--wp--preset--color--base);
	opacity: 0.9;
	/* 暗色グラデーションの外（写真の明るい部分）に乗るため、
	   軽い影を足して可読性を補っている。 */
	text-shadow: 0 1px 4px rgba(0, 0, 0, 0.45);
}
@media (max-width: 768px) {
	.p-about-hero {
		aspect-ratio: auto;
		min-height: 340px;
	}
	/* SP専用のobject-position。banner_simple_council.pngは縦の全域が表示されるため
	   （幅基準ではなく高さ基準でcoverされる）、右側上部に写り込む人物の顔・作業中の手元と
	   ぶつからないよう、中央よりわずかに左へずらしている。 */
	.p-about-hero {
		background-position: 42% top;
	}
	.p-about-hero__inner {
		left: 20px;
		right: 20px;
		max-width: none;
	}
	.p-about-hero__heading {
		font-size: 26px;
	}
	.p-about-hero__lead {
		font-size: 13px;
	}
	/* PCでは写真右上に置いているが、SPだとその位置に人物の顔・手元の作業部分が
	   来てしまうため、SPだけ写真右下（人物の胴体〜脚のあたり、顔や手元とは重ならない
	   位置）に移動している。 */
	.p-about-hero__accent {
		top: auto;
		bottom: 8%;
		right: 20px;
		font-size: 13px;
	}
}

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

/* =========================================================
   ② ときがわアウトドア協議会とは？
   左：小さな「―」アクセント線＋見出し＋説明文 ／ 右：淡い自然モチーフ（装飾）
========================================================= */
.p-about-intro {
	background: var(--wp--preset--color--base);
	padding-block: 56px;
}
.p-about-intro__grid {
	display: grid;
	/* 左60%：右40%程度 */
	grid-template-columns: 3fr 2fr;
	align-items: center;
	gap: 48px;
}
/* 見出しの上に置く小さな「―」アクセント線。②③④の見出しで共通使用する
   （このページ専用の装飾。他ページには展開していない）。 */
.p-about-section-mark {
	display: block;
	width: 24px;
	height: 2px;
	background: var(--wp--preset--color--forest);
	margin-bottom: 14px;
}
.p-about-intro__heading {
	font-family: var(--wp--preset--font-family--zen-old-mincho);
	font-weight: 500;
	font-size: 26px;
	margin-bottom: 18px;
}
.p-about-intro__body {
	font-size: 14px;
	line-height: 1.9;
	color: var(--wp--preset--color--ink);
	max-width: 420px;
}
.p-about-intro__body p + p {
	margin-top: 1em;
}
/* 右側の協議会ロゴ：右カラムの主要なビジュアル要素として、しっかり認識できる
   強さで配置する（ただし本文より主張しすぎない範囲に収める）。
   フェスについてページ（.p-fes-about__visual/.p-fes-about__logo）と同じ考え方で、
   ロゴ画像をmask-imageで淡色化せず、<img>のまま中央に配置している。 */
.p-about-intro__visual {
	text-align: center;
}
.p-about-intro__logo {
	width: 100%;
	/* フェスページのロゴ（PC 220px）と存在感を揃えつつ、右側要素として
	   しっかり認識できるよう少し大きめに（前回比 約1.25倍、240px→300px）。 */
	max-width: 300px;
	height: auto;
	/* ロゴ本来の色（濃いグレー〜チャコール寄り）をそのまま使い、
	   本文より主張しすぎない程度にわずかだけ不透明度を落としている
	   （0.27→0.92。フェスページのロゴはopacity指定なし＝1相当）。 */
	opacity: 0.92;
}
@media (max-width: 768px) {
	.p-about-intro {
		padding-block: 40px;
	}
	.p-about-intro__grid {
		grid-template-columns: 1fr;
		gap: 28px;
	}
	.p-about-intro__body {
		max-width: none;
	}
	/* SPでは本文の下に配置。フェスページのロゴ配置と同じく余白は最小限にする */
	.p-about-intro__visual {
		padding-top: 12px;
	}
	.p-about-intro__logo {
		/* フェスページのロゴ（SP 180px）と存在感を揃えつつ少し大きめに
		   （前回比 約1.25倍、168px→210px） */
		max-width: 210px;
		/* <img>はbase.cssでdisplay:blockになっており、親の.p-about-intro__visualに
		   指定したtext-align:centerはblock要素には効かない（inline/inline-block専用）ため、
		   SPでやや左寄りに見えていた。margin-left/right:autoで確実に中央寄せにする。 */
		margin-left: auto;
		margin-right: auto;
	}
}

/* =========================================================
   ③ 主な活動（ときがわoutdoor fesの企画運営／三波渓谷駐車場管理の2件固定）
   PC：2カラム（写真→タイトル→説明文→ボタン）／SP：1カラムで同じ順に積む。
   カード化しすぎず、box-shadowは使わない。写真右上に「since 20xx」を
   手書き風（Caveat）でごく小さく添えるだけの控えめなアクセント。
========================================================= */
.p-about-activities {
	background: var(--wp--preset--color--base);
	padding-block: 56px;
}
.p-about-activities__heading {
	font-family: var(--wp--preset--font-family--zen-old-mincho);
	font-weight: 500;
	font-size: 26px;
	margin-bottom: 32px;
}
.p-about-activities__grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 40px;
}
.p-about-activities__photo {
	position: relative;
	aspect-ratio: 4 / 3;
	border-radius: 6px;
	overflow: hidden;
	background: var(--wp--preset--color--base-alt);
	margin-bottom: 16px;
}
.p-about-activities__photo img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}
/* 写真右上の「since 20xx」（activities.php参照）。
   「確実に表示されること」を優先し、疑似要素・background-image・JS生成には頼らず、
   PHPテンプレートに直接書いた<span class="activity-since activity-since--fes/--sanba">を
   このクラスだけでスタイリングする（既存の.p-about-activities__*系とは独立したクラス）。
   背景・枠・影は付けず、写真の上に直接文字だけを重ねる。 */
.activity-since {
	position: absolute;
	top: 18px;
	right: 18px;
	z-index: 5;
	font-family: var(--wp--preset--font-family--fes-hand);
	font-weight: 500;
	font-size: 17px;
	color: var(--wp--preset--color--forest);
	transform: rotate(-4deg);
	/* 写真によって読みにくい場合のみの、ごく薄い可読性補助（背景・枠ではない） */
	text-shadow: 0 1px 2px rgba(255, 255, 255, 0.5);
}
.p-about-activities__title {
	font-family: var(--wp--preset--font-family--zen-old-mincho);
	font-weight: 500;
	font-size: 18px;
	margin-bottom: 8px;
}
.p-about-activities__body {
	font-size: 13px;
	line-height: 1.8;
	color: var(--wp--preset--color--ink-soft);
	margin-bottom: 16px;
}
@media (max-width: 768px) {
	.p-about-activities {
		padding-block: 40px;
	}
	.p-about-activities__heading {
		font-size: 22px;
		margin-bottom: 24px;
	}
	/* SPは1カラム。カードが縦に間延びしないよう、カード間の余白を絞る */
	.p-about-activities__grid {
		grid-template-columns: 1fr;
		gap: 28px;
	}
	.p-about-activities__photo {
		margin-bottom: 12px;
	}
	.activity-since {
		font-size: 15px;
	}
}

/* =========================================================
   ④ 構成団体・メンバー（ジェムズグリル／松本建設／NONIWAの3社固定）
   別ページへのリンク一覧・アコーディオンにはせず、このページ内で
   3社の概要（写真・名称・紹介文）がそのまま確認できる構成にする。
   PC：3カラムで3社を同格に見せる／SP：写真（左）＋名称・紹介文（右）の
   横長・コンパクトな行を3段（PCカードの単純な縦積みにはしない）。
========================================================= */
.p-about-members {
	background: var(--wp--preset--color--base);
	padding-block: 56px;
}
.p-about-members__heading {
	font-family: var(--wp--preset--font-family--zen-old-mincho);
	font-weight: 500;
	font-size: 26px;
	margin-bottom: 16px;
}
.p-about-members__intro {
	font-size: 14px;
	line-height: 1.9;
	color: var(--wp--preset--color--ink);
	max-width: 560px;
	margin-bottom: 32px;
}
.p-about-members__intro p + p {
	margin-top: 1em;
}
.p-about-members__grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 32px;
}
.p-about-members__item {
	display: flex;
	flex-direction: column;
}
/* 写真と余白を中心にしたデザイン。強いbox-shadow・大きな角丸は使わない */
.p-about-members__photo {
	aspect-ratio: 1 / 1;
	border-radius: 6px;
	overflow: hidden;
	background: var(--wp--preset--color--base-alt);
	margin-bottom: 14px;
}
.p-about-members__photo img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.p-about-members__name {
	font-family: var(--wp--preset--font-family--zen-old-mincho);
	font-weight: 500;
	font-size: 16px;
	margin-bottom: 6px;
}
.p-about-members__body {
	font-size: 13px;
	line-height: 1.8;
	color: var(--wp--preset--color--ink-soft);
}
@media (max-width: 768px) {
	.p-about-members {
		padding-block: 40px;
	}
	.p-about-members__heading {
		font-size: 22px;
		margin-bottom: 12px;
	}
	.p-about-members__intro {
		font-size: 13px;
		margin-bottom: 24px;
	}
	/* SPは「写真（左）＋名称・紹介文（右）」の横長・コンパクトな行を3段。
	   PCカードをそのまま縦積みにすると間延びするため、行方向を変える。 */
	.p-about-members__grid {
		grid-template-columns: 1fr;
		gap: 20px;
	}
	.p-about-members__item {
		flex-direction: row;
		align-items: flex-start;
		gap: 14px;
	}
	.p-about-members__photo {
		flex-shrink: 0;
		width: 84px;
		aspect-ratio: 1 / 1;
		margin-bottom: 0;
	}
	.p-about-members__info {
		flex: 1;
		min-width: 0;
	}
	.p-about-members__name {
		font-size: 15px;
		margin-bottom: 4px;
	}
}

/* =========================================================
   ⑤ お問い合わせCTA（ページ最後の締め）
   三波渓谷ページの最終CTA（写真＋オーバーレイ）とは異なり、強い写真背景は使わず、
   白〜Greigeをベースに淡い霧・山・森林の水彩風モチーフを敷くだけの静かな演出。
   コピーを主役にし、余白を広めに取る。カード化・強いshadowは使わない。
========================================================= */
.p-about-cta {
	position: relative;
	background: var(--wp--preset--color--base);
	padding-block: 88px;
	overflow: hidden;
}
.p-about-cta__visual {
	position: absolute;
	inset: 0;
	z-index: 0;
}
.p-about-cta__visual svg {
	display: block;
	width: 100%;
	height: 100%;
}
.p-about-cta__inner {
	position: relative;
	z-index: 1;
	max-width: 520px;
	text-align: center;
}
.p-about-cta__heading {
	font-family: var(--wp--preset--font-family--zen-old-mincho);
	font-weight: 500;
	font-size: 28px;
	line-height: 1.5;
	color: var(--wp--preset--color--ink);
	margin-bottom: 16px;
}
.p-about-cta__body {
	font-size: 14px;
	line-height: 1.8;
	color: var(--wp--preset--color--ink-soft);
	margin-bottom: 28px;
}
@media (max-width: 768px) {
	.p-about-cta {
		/* 縦に長くなりすぎないよう、PCよりコンパクトに */
		padding-block: 56px;
	}
	.p-about-cta__heading {
		font-size: 22px;
		margin-bottom: 12px;
	}
	.p-about-cta__body {
		font-size: 13px;
		margin-bottom: 20px;
	}
}