/* =========================================================
   ① HERO
========================================================= */
.section-hero {
	position: relative;
	/* 写真はフルワイド（ヘッダー／ABOUT以下のコンテンツ幅制限を受けない）。
	   .section-hero自身にはmax-widthを付けず、header.php/front-page.php側の
	   構造上もともと制約する親要素が無いため、これだけでviewport全幅になる。
	   幅を100%（＝viewport全幅）という「確定した値」にしたうえでaspect-ratioだけを
	   使うことで、高さが常にきっちり16:7になる（幅と高さが競合して縮む問題を避けている。
	   max-heightで頭打ちにする実装には戻さないこと＝広い画面で極端に横長になるため）。 */
	width: 100%;
	aspect-ratio: 16 / 7;
	background-color: var(--wp--preset--color--forest);
	background-size: cover;
	background-position: center;
	color: var(--wp--preset--color--base);
	overflow: hidden;
}
/* 写真が未設定の間の仮の背景 */
.section-hero.is-placeholder {
	background-image: linear-gradient(160deg, var(--wp--preset--color--forest), #16302a);
}
.section-hero__overlay {
	position: absolute;
	inset: 0;
	/* 写真の左側だけを暗くして、コピーの可読性を確保する（写真全体は覆わない） */
	background: linear-gradient(100deg, rgba(0, 0, 0, 0.5) 0%, rgba(0, 0, 0, 0.15) 45%, rgba(0, 0, 0, 0) 70%);
}
/* コピーは中央配置にせず、写真の左上の余白に自然に置く */
.section-hero__inner {
	position: absolute;
	left: 8%;
	top: 14.5%;
	max-width: 420px;
}
.section-hero__catch {
	/* 手書き風フォント（Klee One・太字600）＋わずかな回転で、写真に手書きされたような表情にする。
	   letter-spacingをわずかに広げ、行間にも少しゆとりを持たせて、
	   整いすぎない・自然な手書きの不揃い感を出している。 */
	font-family: var(--wp--preset--font-family--hero-hand);
	font-weight: 600;
	font-size: 39px;
	line-height: 1.32;
	letter-spacing: 0.01em;
	margin-bottom: 8px;
	transform: rotate(-5deg);
	transform-origin: left center;
}
.section-hero__catch-line1,
.section-hero__catch-line2 {
	display: block;
}
/* 2行目を右へずらし、かつ少し下にも余白を作って、1行目とのそろいすぎを崩す */
.section-hero__catch-line2 {
	margin-top: 2px;
	margin-left: 24px;
}

/* 手書き文字の大小のリズム：漢字を基準(1em)に、ひらがな等をわずかに小さくする。
   差を付けすぎると読みにくくなるため「よく見ると違う」程度に留める。
   文字の判定は tokigawa_hero_typeset()（inc/helpers.php）が行う。HERO限定。 */
.hero-char--hiragana {
	font-size: 0.9em;
	vertical-align: -0.02em;
}
.hero-char--katakana {
	font-size: 0.96em;
}
.hero-char--punct {
	font-size: 0.86em;
	vertical-align: -0.06em;
}
/* TOKIGAWA OUTDOOR COUNCIL：手書きにはせず、小さく・字間広め・コピーより明確に弱く見せる */
.section-hero__sub .c-en-label {
	font-size: 12px;
	color: var(--wp--preset--color--base);
	opacity: 0.8;
}
/* HERO左下に静かに置かれる、世界観を締める一文（回転させない） */
.section-hero__caption {
	position: absolute;
	left: 7%;
	bottom: 10%;
	font-size: 13px;
	font-weight: 400;
	letter-spacing: 0.05em;
	color: var(--wp--preset--color--base);
}
/* HERO下部中央の、控えめな丸いスクロールサイン */
.section-hero__scroll {
	position: absolute;
	left: 50%;
	bottom: 20px;
	transform: translateX(-50%);
	width: 30px;
	height: 30px;
	border: 1px solid rgba(255, 255, 255, 0.55);
	border-radius: 50%;
}
.section-hero__scroll::after {
	content: "";
	position: absolute;
	left: 50%;
	top: 40%;
	width: 6px;
	height: 6px;
	border-right: 1px solid var(--wp--preset--color--base);
	border-bottom: 1px solid var(--wp--preset--color--base);
	transform: translate(-50%, -50%) rotate(45deg);
}
/* HEROロゴ（白ロゴ）：写真の上に重ねる。幅・上下位置・左右位置は外観 → カスタマイズ →
   TOPページ設定 → HEROロゴ設定 からCSSカスタムプロパティ（--hero-logo-*）として渡される
   （hero.php参照）。ページ読み込み時に一度だけ、ふわっと浮かび上がるアニメーションを行う
   （hoverは条件にしない＝スマホでも同じように自動で表示される）。
   --hero-logo-left はロゴの「左端」ではなく「中心」の位置（写真幅に対する%）として扱う
   （translateX(-50%)で中心をその位置に合わせる）。左端基準にすると、SPのような狭い画面幅では
   同じ%値でもロゴ幅ぶん右側にはみ出しやすいため、中心基準にすることで幅を変えても
   画面端に近づきすぎない・PC/SPで同じ%値を共有しやすい実装にしている。 */
.section-hero__logo {
	position: absolute;
	left: var(--hero-logo-left, 60%);
	top: var(--hero-logo-top-pc, 40%);
	width: var(--hero-logo-width-pc, 280px);
	height: auto;
	opacity: 0;
	transform: translateX(-50%) translateY(12px);
	animation: tokigawa-hero-logo-in 1.4s ease-out 0.5s forwards;
	pointer-events: none;
}
/* アニメーションOFF設定時：最初から通常表示のまま動かさない（中心アンカーは維持する） */
.section-hero__logo.is-static {
	opacity: 1;
	transform: translateX(-50%);
	animation: none;
}
@keyframes tokigawa-hero-logo-in {
	from {
		opacity: 0;
		transform: translateX(-50%) translateY(12px);
	}
	to {
		opacity: 1;
		transform: translateX(-50%) translateY(0);
	}
}
/* 派手な動きを好まない・体調に影響する場合の配慮。ON/OFF設定に関わらず常に無効化する */
@media (prefers-reduced-motion: reduce) {
	.section-hero__logo {
		animation: none;
		opacity: 1;
		transform: translateX(-50%);
	}
}
@media (max-width: 768px) {
	.section-hero {
		/* スマホでは縦方向を十分に確保する（PCのパノラマ比率は使わない） */
		aspect-ratio: auto;
		min-height: 88vh;
		max-height: none;
	}
	.section-hero__catch {
		font-size: 30px;
	}
	.section-hero__scroll {
		display: none;
	}
	.section-hero__logo {
		top: var(--hero-logo-top-sp, 46%);
		width: var(--hero-logo-width-sp, 180px);
	}
}

/* =========================================================
   ② ABOUT US（左：見出しと文章 ／ 右：装飾ビジュアル）
========================================================= */
/* ABOUTは「大きな独立セクション」ではなく、HEROとSANBA VALLEYの間の
   薄い紹介帯として扱う。上下の余白は控えめにし、高さは文章量に委ねる
   （固定heightは使わない）。 */
.section-about {
	background: var(--wp--preset--color--base);
	padding-block: 44px;
}
/* このセクションだけ、他セクションの.l-container（最大幅1100px）より
   広いコンテナを使う。画面端には接触させず、適度な左右余白は残す。 */
.section-about__grid {
	max-width: 1360px;
	margin-inline: auto;
	padding-inline: 40px;
	display: grid;
	grid-template-columns: minmax(0, 45%) minmax(0, 55%);
	gap: 40px;
	align-items: center;
}
.section-about .c-en-label {
	color: var(--wp--preset--color--river);
	margin-bottom: 12px;
}
/* 見出しは大見出しにせず、文章の中で自然に読ませる程度の大きさに留める */
.section-about__heading {
	font-size: 24px;
	margin-bottom: 16px;
}
.section-about__body {
	max-width: 400px;
	margin-bottom: 20px;
	font-size: 13px;
	line-height: 1.75;
}
.section-about__body p + p {
	margin-top: 1.1em;
}
/* ABOUTのボタンだけ、他セクションの.c-btnより小さなピル型にする
   （.c-btn自体は共通コンポーネントなので変更せず、ここだけ上書きする） */
.section-about .c-btn {
	height: 31px;
	padding-inline: 20px;
	border-radius: 16px;
	font-size: 12px;
}

/* 右側の装飾：山・鳥・針葉樹・「NATURE CONNECTS PEOPLE」を1枚に描き込んだ
   完成素材の透過PNG（assets/images/about-landscape.png）。
   画像そのものは加工しない（clip-path・border-radius・filter・opacity変更等は使わない）。
   右寄せ・縦方向はやや下寄りに配置し、上や左右に大きな余白を作らない。 */
.section-about__visual {
	display: flex;
	justify-content: flex-end;
	align-items: flex-end;
}
.section-about__visual img {
	width: 100%;
	max-width: 560px;
	height: auto;
}
@media (max-width: 768px) {
	.section-about {
		padding-block: 32px;
	}
	.section-about__grid {
		grid-template-columns: 1fr;
		padding-inline: 24px;
	}
	/* スマホでは文章の下に、山・鳥・針葉樹・英字が認識できる大きさで中央配置する */
	.section-about__visual {
		justify-content: center;
		margin-top: 24px;
	}
	.section-about__visual img {
		max-width: 420px;
	}
}

/* =========================================================
   ③ SANBA VALLEY ／ ④ OUTDOOR FES（写真＋文章の2カラム）
   写真はviewportの端まで大きく、文章はコンパクトな幅で読みやすく。
========================================================= */
.section-sanba {
	/* NEWS・協議会セクションが使う base-alt とは別の、三波渓谷専用のグレージュ。
	   ベージュ感を弱めた、わずかに温かみの残るライトグレー。 */
	background: var(--wp--preset--color--greige);
}
.section-fes {
	background: var(--wp--preset--color--base);
}

/* 高さはmin-heightで固定せず、写真・文章の内容量に応じたautoにする
   （グリッドの行の高さは、文章側の自然な高さに写真側が height:100% で合わせる） */
.section-sanba__grid,
.section-fes__grid {
	display: grid;
}
/* 三波渓谷・フェスどちらもセクションの高さを明確に定義する。
   理由：グリッドの行の高さが「auto」（内容に依存）のままだと、
   写真側のheight:100%が確定した値にならず、結局「写真自身の縦横比」で
   高さが決まってしまい、セクションが意図せず縦長になる。
   height自体をここで指定することで、写真・文章どちらもこの高さに従うようになる。 */
.section-sanba__grid {
	/* 380〜430px程度を目安に、画面幅に応じて滑らかに変化させる */
	grid-template-columns: minmax(0, 58%) minmax(0, 42%);
	height: 27vw;
	min-height: 380px;
	max-height: 430px;
}
.section-fes__grid {
	/* 360〜420px程度を目安に、画面幅に応じて滑らかに変化させる */
	grid-template-columns: minmax(0, 44%) minmax(0, 56%);
	height: 24vw;
	min-height: 360px;
	max-height: 420px;
}

.section-fes__photo {
	height: 100%;
	overflow: hidden;
	/* 写真左端（文章側との境界）を、三波渓谷と同じ素材を左右反転した
	   マスク画像（assets/images/fes-edge-mask.svg）でちぎった紙のような
	   輪郭にする。写真ファイル自体は加工しない。 */
	-webkit-mask-image: url('../images/fes-edge-mask.svg');
	-webkit-mask-size: 100% 100%;
	-webkit-mask-repeat: no-repeat;
	mask-image: url('../images/fes-edge-mask.svg');
	mask-size: 100% 100%;
	mask-repeat: no-repeat;
}
/* Sanbaのみ min-height:0 を追加する。
   グリッド内の画像は、デフォルトのmin-height:autoにより
   「写真の元の縦横比」がそのままトラックの高さに反映されてしまい、
   セクション全体が意図せず縦長になる（grid blowoutと呼ばれる挙動）。
   min-height:0でこれを解除し、height:100%（＝右カラムの自然な高さ）に
   正しく従わせている。 */
.section-sanba__photo {
	height: 100%;
	min-height: 0;
	overflow: hidden;
	/* 写真右端（文章側との境界）を、正式素材のマスク画像
	   （assets/images/sanba-edge-mask.svg）で緩やかな輪郭にする。
	   写真ファイル自体は加工しない。SVGのpreserveAspectRatio="none"により、
	   写真の高さに合わせて縦方向へ伸縮する。 */
	-webkit-mask-image: url('../images/sanba-edge-mask.svg');
	-webkit-mask-size: 100% 100%;
	-webkit-mask-repeat: no-repeat;
	mask-image: url('../images/sanba-edge-mask.svg');
	mask-size: 100% 100%;
	mask-repeat: no-repeat;
}
.section-sanba__photo img,
.section-fes__photo img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}
/* 写真が未設定の間の仮の背景 */
.section-sanba__photo.is-placeholder,
.section-fes__photo.is-placeholder {
	background: var(--wp--preset--color--sand);
}

/* セクションの高さを縮めたため、上下paddingをSanbaと同程度に詰めている
   （左右はそのまま。見出し・本文のfont-sizeは変更していない）。 */
.section-fes__text {
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding: 20px clamp(24px, 5vw, 52px);
}
/* Sanbaはセクション全体を薄くするため、上下paddingをFesより詰める
   （左右はFesと同じ）。文章ブロックはやや上寄りに収める。 */
.section-sanba__text {
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding: 20px clamp(24px, 5vw, 52px);
}

/* 文字の階層：英字ラベル（小・広め）→ 見出し（大・強い）→ 本文（控えめ）の順で
   メリハリを付ける。「ときがわアウトドアフェス」側はこれまでの階層のまま。 */
.section-fes .c-en-label {
	font-size: 11px;
	letter-spacing: 0.22em;
	color: var(--wp--preset--color--river);
	margin-bottom: 8px;
}
/* 「ときがわアウトドアフェス」は、三波渓谷ほど大きくはしないが、
   本文よりはっきり主役に見えるサイズにする（font-sizeは変更していない、marginのみ詰めた） */
.section-fes__heading {
	font-size: 36px;
	font-weight: 500;
	line-height: 1.3;
	letter-spacing: 0.01em;
	margin-bottom: 12px;
}
/* 3行で気持ちよく収まるよう、幅を少し広げている（font-sizeは変更していない） */
.section-fes__body {
	font-size: 14px;
	line-height: 1.9;
	max-width: 470px;
}
.section-fes__body p + p {
	margin-top: 1.2em;
}

/* 手書き英字「Outdoor Fes in TOKIGAWA」：文章と写真の境目に軽く斜めに配置し、
   左右のブロックを視覚的につなぐ装飾。主張しすぎない薄いグレーグリーン。 */
.section-fes__grid {
	position: relative;
}
.section-fes__handwritten {
	position: absolute;
	left: 33%;
	bottom: 6%;
	z-index: 2;
	font-family: var(--wp--preset--font-family--fes-hand);
	font-size: 30px;
	line-height: 1.2;
	color: var(--wp--preset--color--river);
	opacity: 0.8;
	transform: rotate(-4deg);
	text-shadow: 0 1px 3px rgba(255, 255, 255, 0.5);
}

/* SANBA VALLEY：「三波渓谷」を主役にした3段階の文字階層。
   英字ラベルは弱く小さく、見出しは大きな明朝体で静かに強く、
   本文は明確に控えめにして、見出しとの対比を作る。 */
.section-sanba .c-en-label {
	font-size: 12px;
	font-weight: 400;
	letter-spacing: 0.2em;
	color: var(--wp--preset--color--river);
	margin-bottom: 8px;
}
/* font-size・フォント・weightはSTEP 1のまま変更しない。marginだけ詰めている */
.section-sanba__heading {
	font-size: 60px;
	font-weight: 500;
	line-height: 1.2;
	letter-spacing: 0.03em;
	margin-bottom: 18px;
}
.section-sanba__body {
	font-size: 13px;
	line-height: 1.85;
	max-width: 400px;
}
.section-sanba__body p + p {
	margin-top: 1.2em;
}
/* ボタン自体（色・高さ・角丸）は変更しない。marginだけ詰めている */
.section-fes__text .c-btn {
	margin-top: 14px;
	align-self: flex-start;
}
/* ボタン自体（色・高さ・角丸）は変更しない。marginだけSanba用に詰める */
.section-sanba__text .c-btn {
	margin-top: 14px;
	align-self: flex-start;
}

@media (max-width: 768px) {
	.section-sanba__grid,
	.section-fes__grid {
		grid-template-columns: 1fr;
	}
	/* PC用に指定した高さ（27vw等）はスマホでは使わない。1カラムで自然に積む */
	.section-sanba__grid,
	.section-fes__grid {
		height: auto;
		min-height: 0;
		max-height: none;
	}
	/* スマホでは常に「写真 → 見出し・本文」の順で積む */
	.section-fes__photo {
		order: -1;
	}
	/* 手書き英字は、写真と文章が縦積みになると橋渡しの意味を持たなくなるため非表示にする */
	.section-fes__handwritten {
		display: none;
	}
	.section-sanba__photo,
	.section-fes__photo {
		height: 56vw;
	}
	/* スマホでは写真と文章が縦積みになるため、境界のマスクは解除して通常の長方形に戻す */
	.section-sanba__photo,
	.section-fes__photo {
		-webkit-mask-image: none;
		mask-image: none;
	}
	.section-sanba__text,
	.section-fes__text {
		padding: 40px 24px;
	}
	.section-sanba__heading,
	.section-fes__heading {
		font-size: 28px;
	}
}

/* =========================================================
   ⑤ NEWS（左：見出しと一覧リンク ／ 右：最新3件の一覧）
========================================================= */
/* 完成見本のような、薄く端正な情報帯にする。
   カードUIは使わず、細い罫線と文字だけで構成する（目安200〜250px程度）。 */
.section-news {
	background: var(--wp--preset--color--base-alt);
	padding-block: 36px;
}
.section-news__grid {
	display: grid;
	grid-template-columns: minmax(0, 30%) minmax(0, 70%);
	gap: 48px;
}
.section-news .c-en-label {
	color: var(--wp--preset--color--river);
	margin-bottom: 12px;
}
/* 「お知らせ」は大見出しにせず、明朝体で上品に見せる程度に留める */
.section-news__heading {
	font-size: 24px;
	margin-bottom: 16px;
}
.section-news__list {
	border-top: 1px solid var(--wp--preset--color--sand);
}
.news-item__link {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 20px;
	padding-block: 11px;
	border-bottom: 1px solid var(--wp--preset--color--sand);
}
.news-item__link:hover .news-item__title {
	color: var(--wp--preset--color--river);
}
.news-item__date {
	font-family: var(--wp--preset--font-family--jost);
	font-size: 13px;
	color: var(--wp--preset--color--ink-soft);
	min-width: 90px;
}
/* カテゴリタグ：大きなピルボタンではなく、小さな枠付きラベルにする
   （CTAボタン=.c-btnとは別デザイン。共通コンポーネントには触れていない） */
.news-item__category {
	font-size: 11px;
	letter-spacing: 0.05em;
	color: var(--wp--preset--color--river);
	border: 1px solid var(--wp--preset--color--river);
	border-radius: 3px;
	padding: 2px 7px;
}
/* タイトルは本文に近い端正なサイズにし、太字にはしない。
   1行に収め、長い場合は崩さず「…」で省略する。 */
.news-item__title {
	flex: 1 1 260px;
	min-width: 0;
	font-size: 15px;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	transition: color 0.2s ease;
}
@media (max-width: 768px) {
	.section-news {
		padding-block: 32px;
	}
	.section-news__grid {
		grid-template-columns: 1fr;
		gap: 24px;
	}
	.news-item__link {
		gap: 8px 16px;
	}
	.news-item__title {
		flex-basis: 100%;
		white-space: normal;
	}
}

/* =========================================================
   ⑥ ABOUT THE COUNCIL / CONTACT（左：見出しと文章とボタン ／ 右：装飾ビジュアル）
   TOPページ最後の「静かな締め」の帯。大きなコンテンツに見せず、
   高さの目安：200〜260px程度（実測値はCLAUDE.md参照）。
========================================================= */
.section-council {
	background: var(--wp--preset--color--greige);
	padding-block: 36px;
}
.section-council__grid {
	display: grid;
	grid-template-columns: minmax(0, 45%) minmax(0, 55%);
	gap: 40px;
	align-items: stretch;
}
.section-council .c-en-label {
	color: var(--wp--preset--color--river);
	margin-bottom: 10px;
}
/* メイン見出し「協議会について・お問い合わせ」：NEWSの「お知らせ」より
   少し存在感がある程度に留め、大見出しにはしない。 */
.section-council__heading {
	font-family: var(--wp--preset--font-family--zen-old-mincho);
	font-size: 24px;
	line-height: 1.3;
	margin-bottom: 10px;
}
.section-council__body {
	max-width: 380px;
	font-size: 13px;
	line-height: 1.8;
	margin-bottom: 16px;
}
.section-council__body p + p {
	margin-top: 1.2em;
}
.section-council__links {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
}
/* 装飾ビジュアル：council_imageが設定されていれば実際の写真を表示し、
   未設定なら同梱の完成素材（assets/images/council-landscape.png、水彩風の山と森）を表示する。
   どちらの場合も画像は1枚の<img>で、手書き風コピーは常に別要素として重ねているだけ
   （画像そのものに文字は焼き込んでいない）。 */
.section-council__visual {
	position: relative;
	min-height: 120px;
}
/* 右下に景色が広がる構成にする。中央配置・上下中央揃えは禁止。
   右カラム（.section-council__visual、position:relative）の中で、画像を
   position:absolute; right:0; bottom:0; で右下の角に固定し、
   width:86%・height:autoで画像本来の比率のまま表示する（object-fit:coverで
   箱いっぱいに引き伸ばさない）。これにより画像は箱の右下に留まり、
   左側・上側に余白を残しながら重心が右下へ寄る見た目になる。 */
.section-council__illustration {
	position: absolute;
	right: 0;
	bottom: 0;
	width: 86%;
	height: auto;
}
/* 「豊かな自然を、次の世代へ。」：画像の右上・山の上部に軽く重ねることで、
   コピーと画像がひとつの景色に見えるようにしている（不自然な空白を作らない）。
   HERO・OUTDOOR FESと同じ手書き風フォント（hero-hand）を使うが、主張しすぎない
   よう淡い色・軽いweightにしている。 */
.section-council__accent {
	position: absolute;
	right: 3%;
	top: 20%;
	text-align: right;
	font-family: var(--wp--preset--font-family--hero-hand);
	font-weight: 400;
	font-size: 22px;
	line-height: 1.55;
	color: var(--wp--preset--color--forest);
	opacity: 0.58;
	text-shadow: 0 1px 4px rgba(255, 255, 255, 0.6);
	transform: rotate(-2deg);
}
@media (max-width: 768px) {
	.section-council {
		padding-block: 36px;
	}
	.section-council__grid {
		grid-template-columns: 1fr;
	}
	.section-council__visual {
		display: none;
	}
}