/*
  移植したあとに加えたデザイン変更。

  reset.css → tp.css → wp.css → add.css の順で読む（このファイルが最後）。

  tp.css は React 版からそのまま持ってきたもので、両者を画素で突き合わせる
  基準になっているため触らない。**ここに書いたぶんだけ React 版と分岐する。**
  何を変えたかが分かるよう、変更ごとに日付と理由を残すこと。
*/

/* ============================================================
   2026-08-31  活用領域（Fields）を濃い緑の面にして白文字にする

   写真は px/terraces-dark.jpg（棚田）。元画像 terraces.jpg に
   saturate(1.2) contrast(0.62) brightness(0.5) を焼き込んだもの。
   白飛びを抑えると、同じ可読性でも写真を厚く見せられる
   （抑えないと膜を 0.84 まで濃くする必要があり、写真は16%しか通らない。
     抑えれば 0.52 で済み、48%通したうえで白文字が AAA を満たす）。

   背景は完全に固定。background-attachment:fixed でブラウザに任せている。
   ★ 一度 JS でスクロール量ぶんずらす方式を書いたが、スクロールイベントと
     描画のあいだにずれが出てカクついた。**JS に戻さないこと。**

   ★ セクションに overflow:hidden を付けないこと。
     中の .tpSpy__nav が position:sticky で、祖先に overflow:hidden が
     あると sticky が効かなくなる。
   ============================================================ */

.tpSec--pale {
	position: relative;
	/* 元の淡い緑地は使わない。写真が読めないあいだの下敷きにもなる */
	background: #2f6127;
}

.tpPara {
	position: absolute;
	inset: 0;
	z-index: 0;
	pointer-events: none;
	background-image: url("../img/px/terraces-dark.jpg");
	background-position: center;
	background-size: cover;
	background-repeat: no-repeat;
	background-attachment: fixed;
}

/*
  写真の上に敷く膜。サイトのCTAと同じ濃い緑 rgb(0,92,48) を使っている。
  合成後の最悪の背景は rgb(47,97,37)。白文字が 7.35:1 で AAA を満たす。
*/
.tpPara::after {
	content: "";
	position: absolute;
	inset: 0;
	background: rgba(0, 92, 48, 0.52);
}

/* 中身を膜より前に出す */
.tpSec--pale > .tpSec__inner {
	position: relative;
	z-index: 1;
}

/* ---- 白文字にする。濃淡は元の階層をなぞっている ----
   元（淡い緑地・濃い文字）  本文 9.90 / 小見出し 3.86 / 選択 3.68 / 非選択 3.21
   いま（濃い緑地・白文字）  本文 7.57 / 小見出し 4.80 / 選択 7.57 / 非選択 4.62
   非選択だけ少し上がるが、下げると 3.0 を割って読みづらくなるのでここで止めた。 */

.tpSec--pale .tpHead__en {
	color: #fff;
}

.tpSec--pale .tpHead__ja {
	color: rgba(255, 255, 255, 0.72);
}

.tpSec--pale .tpNote {
	color: #fff;
}

.tpSec--pale .tpSpy__link:not(.isOn) .tpSpy__name,
.tpSec--pale .tpSpy__link:not(.isOn) .tpSpy__no {
	/* 番号(15px)は小さい文字なので AA に 4.5:1 必要。
	   0.62→4.01 / 0.68→4.46 と足りず、0.70 で 4.62 になる */
	color: rgba(255, 255, 255, 0.7);
}

.tpSec--pale .tpSpy__link.isOn .tpSpy__name,
.tpSec--pale .tpSpy__link.isOn .tpSpy__no {
	color: #fff;
}

.tpSec--pale .tpSpy__link:hover .tpSpy__name,
.tpSec--pale .tpSpy__link:hover .tpSpy__no {
	color: #fff;
}

/* 左の縦罫。地が濃いので、待機側は白の薄いもの、現在地は明るい緑にする
   （元の --line と --accent では地に沈んで見えない） */
.tpSec--pale .tpSpy__link::before {
	background: rgba(255, 255, 255, 0.28);
}

.tpSec--pale .tpSpy__link::after {
	background: #8fe3b0;
}

/*
  指で触る端末（iOS Safari など）では background-attachment:fixed が効かない。
  そこで別の手を使う。

    ・.tpPara に clip-path を掛けてセクションの形に切り抜く
    ・中身（::before）を position:fixed にして画面に貼り付ける

  clip-path は「子孫を切り抜く」が「position:fixed の基準は変えない」。
  基準を変えてしまうのは transform / filter / perspective / contain などで、
  clip-path はその一覧に入っていない。だから
  「画面に対して固定されたまま、セクションの形にだけ見える」が作れる。
*/
@media (hover: none) {
	.tpPara {
		background-image: none;
		clip-path: inset(0);
	}

	.tpPara::before {
		content: "";
		position: fixed;
		top: 0;
		left: 0;
		width: 100vw;
		height: 100vh;
		background-image: url("../img/px/terraces-dark.jpg");
		background-position: center;
		background-size: cover;
		background-repeat: no-repeat;
	}
}

/* ============================================================
   2026-08-31  クッキーの同意バナー

   画面下に細く出す帯。内容にかぶせない。
   「同意しない」を「同意する」より押しにくくしないこと（並びも大きさも対等）。
   既定は hidden で、JS が「まだ選んでいない」と判断したときだけ出る。
   ============================================================ */

.soilCs {
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 120;
	background: #fff;
	border-top: 1px solid var(--line);
	box-shadow: 0 -2px 20px rgba(62, 58, 57, 0.08);
	/* 出るまでは下に隠しておく。transform だけなので描き直しが起きない */
	transform: translateY(100%);
	transition: transform 0.42s cubic-bezier(0.4, 0, 0.2, 1);
}

.soilCs.isIn {
	transform: translateY(0);
}

.soilCs__inner {
	max-width: 1184px;
	margin: 0 auto;
	padding: 18px 80px;
	display: flex;
	align-items: center;
	gap: 28px;
}

.soilCs__text {
	flex: 1;
	font-size: 14px;
	line-height: 1.85;
	color: var(--ink);
}

.soilCs__text a {
	color: var(--accentDeep);
	text-decoration: underline;
	text-underline-offset: 3px;
}

.soilCs__btns {
	flex: none;
	display: flex;
	gap: 12px;
}

.soilCs__btn {
	min-width: 132px;
	padding: 11px 20px;
	border: 1px solid var(--line);
	border-radius: 100px;
	background: #fff;
	font-family: inherit;
	font-size: 14px;
	font-weight: 700;
	color: var(--ink);
	cursor: pointer;
	transition:
		border-color 0.25s var(--ease),
		background 0.25s var(--ease),
		color 0.25s var(--ease);
}

.soilCs__btn:hover {
	border-color: var(--accent);
	color: var(--accentDeep);
}

.soilCs__btn--ok {
	border-color: var(--accent);
	background: var(--accent);
	color: #fff;
}

.soilCs__btn--ok:hover {
	background: var(--accentDeep);
	border-color: var(--accentDeep);
	color: #fff;
}

/* 管理バーが出ているときは、その下に重ならないよう気にしなくてよい
   （バナーは画面下、管理バーは画面上） */

@media screen and (max-width: 1023px) {
	.soilCs__inner {
		padding: 16px 24px;
	}
}

@media screen and (max-width: 767px) {
	.soilCs__inner {
		display: block;
		padding: 16px 20px 18px;
	}

	.soilCs__text {
		font-size: 13px;
	}

	.soilCs__btns {
		margin-top: 14px;
	}

	.soilCs__btn {
		/* 指で押す前提。幅を等分して、どちらも同じ押しやすさにする */
		flex: 1;
		min-width: 0;
		padding: 13px 12px;
	}
}

/* ============================================================
   2026-08-31  本文中の h4

   tp.css は h2 / h3 までしか定義していない（元サイトに h4 が
   無かったため）。プライバシーポリシーの「安全管理のために講じた措置」で
   区分ごとの小見出しが必要になったので足す。
   h3（19px / 700 / 上40px）より一段小さく、本文（16px / 400）とは
   はっきり差が付く値にしている。
   ============================================================ */

.tpProse h4 {
	margin-top: 24px;
	font-size: 16px;
	font-weight: 700;
	line-height: 1.6;
	color: var(--accentDeep);
}

.tpProse h4 + p,
.tpProse h4 + ul {
	margin-top: 8px;
}