/* WanNyanLab. 汎用ページ（下層ページ）用スタイル */

/* 背景(灰色)は画面幅いっぱい。中身は .wnl-v3-shell で中央に収める。
   上下の余白。中身は見出しと導入文の数行しかないので、
   88pxだと帯だけが伸びて、上下に使われない面が残る。
   狭い画面用の上書きは置かない。ここだけで決める。 */
.wnl-v3-inner-hero {
	padding: clamp(36px, 4vw, 56px) 0;
	background: var(--wnl-v3-soft);
	border-bottom: 1px solid var(--wnl-v3-line);
}

/* 小さい文字なので、面用の明るいアクセントではなく文字用の暗いほうを使う */
.wnl-v3-inner-hero .wnl-v3-overline {
	color: var(--wnl-v3-accent-ink);
}

/* 下の余白は付けない。見出しと導入文の間隔は __inner の gap で決める。
   両方に持たせると足し算になり、値を見ても実際の間隔が分からなくなる */
.wnl-v3-inner-hero h1 {
	margin: 0;
	font-family: "Zen Maru Gothic", sans-serif;
	font-weight: 900;
	font-size: clamp(2.1rem, 4.4vw, 3rem);
	line-height: 1.35;
}

/* 見出しの下に導入文を置く。横に並べない。
   横並びにすると、見出しの長さがページごとに違うぶん、
   右の導入文の始まる位置がページごとにずれる。
   「商品開発」4文字のページと「支援に関する注意事項・返礼条件」の
   ページで、同じ帯なのに揃って見えなかった。
   縦に積めば、どのページでも左端が同じ位置に揃う。 */
.wnl-v3-inner-hero__inner {
	display: grid;
	gap: clamp(20px, 2.5vw, 28px);
}

.wnl-v3-inner-hero__head {
	min-width: 0;
}

/* 導入文は文の切れ目で改行を入れてある(一文一行)。
   42文字で止めると、長い文が途中で折れて「…つくる / プロジェクトです。」
   のような切れ方になる。いちばん長い文(51文字)が入る幅まで広げる。
   本文(.wnl-v3-prose の760px)より広いが、ここは数行しかないので許容する。 */
.wnl-v3-inner-hero__lead {
	max-width: 54em;
	margin: 0;
	color: var(--wnl-v3-muted);
	font-size: 1rem;
	line-height: 1.95;
}

.wnl-v3-inner-hero__lead p {
	margin: 0 0 1.2em;
}

.wnl-v3-inner-hero__lead p:last-child {
	margin-bottom: 0;
}

.wnl-v3-inner-body {
	padding-top: clamp(56px, 7vw, 88px);
}

.wnl-v3-prose {
	max-width: 760px;
}

/* 見出しと本文のサイズ差(ジャンプ率)。
   h3が本文の1.3倍しかなく、流し読みで節の切れ目が拾えなかった。
   h2=2.0倍 / h3=1.5倍にして、h2とh3の間にも1.33倍の差を残す。
   上を広く・下を狭くするのは、見出しを次の本文のほうへ寄せるため。 */
.wnl-v3-prose h2 {
	margin: 2.4em 0 .7em;
	font-size: clamp(1.5rem, 2.8vw, 2rem);
}

.wnl-v3-prose h2:first-child {
	margin-top: 0;
}

.wnl-v3-prose h3 {
	margin: 2.2em 0 .5em;
	font-size: clamp(1.2rem, 2.2vw, 1.5rem);
}

.wnl-v3-prose p {
	margin: 0 0 1.4em;
	color: var(--wnl-v3-ink);
	font-size: 1rem;
	line-height: 1.9;
}

.wnl-v3-prose ul,
.wnl-v3-prose ol {
	margin: 0 0 1.8em;
	padding: 0;
	list-style: none;
}

.wnl-v3-prose ul li,
.wnl-v3-prose ol li {
	position: relative;
	margin: 0 0 .9em;
	padding-left: 1.6em;
	line-height: 1.8;
}

.wnl-v3-prose ul li::before {
	content: "";
	position: absolute;
	left: 0;
	top: .68em;
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: var(--wnl-v3-accent);
}

/* リンクは「下線 + 目立つ色」の両方で示す。下線だけだと読み飛ばされる */
.wnl-v3-prose a {
	color: var(--wnl-v3-accent-ink);
	text-decoration: underline;
	text-underline-offset: 3px;
	text-decoration-color: currentColor;
}

.wnl-v3-prose strong {
	font-weight: 700;
}

.wnl-v3-prose .wnl-v3-note {
	margin-top: 2.2em;
}

/* ------------------------------------------------------------------
   個別記事(商品開発・スポンサー・仲間・活動報告)
   ------------------------------------------------------------------ */
.wnl-v3-single-terms {
	display: flex;
	flex-wrap: wrap;
	margin: 0 0 16px;
	padding: 0;
	gap: 8px;
	list-style: none;
}

.wnl-v3-single-terms li {
	padding: 4px 12px;
	border: 1px solid var(--wnl-v3-line);
	border-radius: 999px;
	background: #fff;
	color: #4f4f4f;
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: .04em;
}

.wnl-v3-single-date {
	margin: 16px 0 0;
	color: #4f4f4f;
	font-size: 0.875rem;
	font-weight: 700;
	letter-spacing: .06em;
}

/* 帯の中に入れると .wnl-v3-inner-hero__lead p の余白(詳細度が上)に負けるので、
   同じ詳細度で日付の余白を指定し直す */
.wnl-v3-inner-hero__lead .wnl-v3-single-date {
	margin: 16px 0 0;
}

.wnl-v3-single-figure {
	margin-top: clamp(32px, 4vw, 48px);
}

.wnl-v3-single-figure img {
	width: 100%;
	height: auto;
	border-radius: 14px;
}

.wnl-v3-single-back {
	margin-top: clamp(40px, 5vw, 64px);
	padding-top: clamp(24px, 3vw, 32px);
	border-top: 1px solid var(--wnl-v3-line);
}

/* ------------------------------------------------------------------
   404ページ:迷った人を行き先へ案内する
   ------------------------------------------------------------------ */
.wnl-v3-404-list {
	display: grid;
	max-width: 760px;
	margin: 0;
	padding: 0;
	gap: 12px;
	list-style: none;
}

.wnl-v3-404-list li {
	margin: 0;
	padding: 0;
}

.wnl-v3-404-list a {
	display: grid;
	padding: 16px 24px;
	border: 1px solid var(--wnl-v3-line);
	border-radius: 14px;
	background: #fff;
	gap: 4px;
	text-decoration: none;
	transition: border-color .2s ease, transform .2s ease, box-shadow .2s ease;
}

.wnl-v3-404-list a:hover,
.wnl-v3-404-list a:focus-visible {
	border-color: var(--wnl-v3-accent);
	box-shadow: 0 8px 24px rgba(26, 26, 26, .06);
	transform: translateY(-2px);
}

.wnl-v3-404-list__label {
	color: var(--wnl-v3-ink);
	font-weight: 800;
	font-size: 1rem;
}

.wnl-v3-404-list__desc {
	color: #4f4f4f;
	font-size: 1rem;
	line-height: 1.7;
}

.wnl-v3-404-search {
	max-width: 760px;
	margin-top: 40px;
	padding-top: 32px;
	border-top: 1px solid var(--wnl-v3-line);
}

.wnl-v3-404-search p {
	margin: 0 0 12px;
	color: #4f4f4f;
	font-size: 1rem;
}

.wnl-v3-404-search input[type="search"] {
	padding: 12px 16px;
	border: 1px solid var(--wnl-v3-line);
	border-radius: 8px;
	font-size: 1rem;
}

/* ------------------------------------------------------------------
   GiveWPのショートコード([give_receipt] / [donation_history])を
   サイトのデザインに合わせる。標準は青系でサイトの配色と衝突する
   ------------------------------------------------------------------ */
.give-form input[type="email"],
.give-form input[type="text"],
#give-email-access-form input[type="email"],
#give-email-access-form input[type="text"] {
	padding: 12px 16px;
	border: 1px solid var(--wnl-v3-line);
	border-radius: 8px;
	font-family: inherit;
	font-size: 1rem;
}

.give-form input[type="submit"],
#give-email-access-form input[type="submit"],
#give-email-access-form button[type="submit"],
.give-submit {
	min-height: 48px;
	padding: 12px 32px;
	border: 1px solid transparent;
	border-radius: 999px;
	background: var(--wnl-v3-dark);
	color: #fff;
	font-family: inherit;
	font-size: 0.875rem;
	font-weight: 800;
	transition: background .22s ease, transform .22s ease;
}

.give-form input[type="submit"]:hover,
#give-email-access-form input[type="submit"]:hover,
#give-email-access-form button[type="submit"]:hover,
.give-submit:hover {
	background: var(--wnl-v3-accent);
	transform: translateY(-2px);
}

/* ------------------------------------------------------------------
   本文中の表(Kind Leafの活動資金など)
   WordPress標準は黒い罫線で、サイトの配色と合わないため揃える
   ------------------------------------------------------------------ */
.wnl-v3-prose .wp-block-table {
	margin: 1.6em 0 1.8em;
	overflow-x: auto;
}

.wnl-v3-prose .wp-block-table table {
	width: 100%;
	border: 1px solid var(--wnl-v3-line);
	border-radius: 14px;
	border-collapse: separate;
	border-spacing: 0;
	overflow: hidden;
	font-size: 1rem;
}

.wnl-v3-prose .wp-block-table th,
.wnl-v3-prose .wp-block-table td {
	padding: 12px 16px;
	border: 0;
	border-bottom: 1px solid var(--wnl-v3-line);
	text-align: left;
	line-height: 1.7;
}

.wnl-v3-prose .wp-block-table thead th {
	background: var(--wnl-v3-soft);
	color: #4f4f4f;
	font-size: 0.875rem;
	font-weight: 700;
	letter-spacing: .04em;
}

/* 金額の列は右に揃えると読みやすい */
.wnl-v3-prose .wp-block-table td:last-child,
.wnl-v3-prose .wp-block-table th:last-child {
	width: 30%;
	text-align: right;
	white-space: nowrap;
}

.wnl-v3-prose .wp-block-table tbody tr:last-child th,
.wnl-v3-prose .wp-block-table tbody tr:last-child td {
	border-bottom: 0;
	background: rgba(114, 170, 164, .07);
}

@media (max-width: 767px) {
	.wnl-v3-prose .wp-block-table th,
	.wnl-v3-prose .wp-block-table td {
		padding: 12px 12px;
		font-size: 0.875rem;
	}
}

/* 「ここに文章が必要」の目印。公開前に消すべき箇所を目立たせる */
.wnl-v3-prose .wnl-v3-todo {
	margin: 1.2em 0 1.8em;
	padding: 12px 16px;
	border-left: 4px solid #e0a020;
	border-radius: 0 8px 8px 0;
	background: #fdf6e6;
	color: #6b4e12;
	font-size: 1rem;
	line-height: 1.8;
}

.wnl-v3-prose .wnl-v3-todo strong {
	color: #8a5a00;
}

/* ------------------------------------------------------------------
   Fluent Forms をサイトのデザインに合わせる
   (プラグイン標準は青系のボタンでサイトの配色と衝突するため)
   ------------------------------------------------------------------ */
.frm-fluent-form {
	margin-top: 2em;
}

.frm-fluent-form .ff-el-input--label label {
	color: var(--wnl-v3-ink);
	font-size: 1rem;
	font-weight: 700;
}

.frm-fluent-form .ff-el-is-required.asterisk-right label:after {
	color: #c0392b;
}

.frm-fluent-form input[type="text"],
.frm-fluent-form input[type="email"],
.frm-fluent-form input[type="tel"],
.frm-fluent-form textarea {
	padding: 12px 16px;
	border: 1px solid var(--wnl-v3-line);
	border-radius: 8px;
	background: #fff;
	color: var(--wnl-v3-ink);
	font-family: inherit;
	font-size: 1rem;
	line-height: 1.7;
	transition: border-color .2s ease, box-shadow .2s ease;
}

.frm-fluent-form input[type="text"]:focus,
.frm-fluent-form input[type="email"]:focus,
.frm-fluent-form input[type="tel"]:focus,
.frm-fluent-form textarea:focus {
	border-color: var(--wnl-v3-accent);
	box-shadow: 0 0 0 3px rgba(114, 170, 164, .18);
	outline: none;
}

.frm-fluent-form textarea {
	min-height: 170px;
}

.frm-fluent-form .ff-btn-submit {
	min-height: 52px;
	padding: 12px 40px;
	border: 1px solid transparent;
	border-radius: 999px;
	background: var(--wnl-v3-dark);
	color: #fff;
	font-family: inherit;
	font-size: 0.875rem;
	font-weight: 800;
	letter-spacing: .04em;
	transition: transform .22s ease, background .22s ease;
}

.frm-fluent-form .ff-btn-submit:hover,
.frm-fluent-form .ff-btn-submit:focus-visible {
	background: var(--wnl-v3-accent);
	transform: translateY(-2px);
}

/* 送信完了メッセージ */
.ff-message-success {
	padding: 24px 24px;
	border: 1px solid var(--wnl-v3-accent);
	border-radius: 14px;
	background: rgba(114, 170, 164, .08);
	color: var(--wnl-v3-ink);
}

@media (max-width: 767px) {
	.frm-fluent-form .ff-btn-submit {
		width: 100%;
	}

	.wnl-v3-inner-hero h1 {
		font-size: clamp(1.9rem, 8vw, 2.4rem);
	}

	.wnl-v3-inner-hero__lead {
		font-size: 1rem;
	}

	.wnl-v3-prose p {
		font-size: 1rem;
	}
}

/* 2カラムをやめたので、幅で切り替える必要がなくなった。
   (以前はここで1カラムへ折り返していた) */


/* GiveWPのブロックが入っている本文だけ、行長の制限を外す。
   :has() のルールはメディアクエリより後ろに置く(前に置くと上書きされる) */
.wnl-v3-prose:has(.wnl-v3-wide-block) {
	max-width: none;
}

/* ==================================================================
   ページ個別の調整

   ここから下は「そのページだけ」のルール。
   1ページを見て言われたことを、共通CSSに書いて全ページへ広げない。
   (hp/DECISIONS.md 2-6-12)
   ================================================================== */

/* /projects/ 商品開発 ------------------------------------------------
   帯の導入文が右864pxまで、本文が右760pxまでで終わっていた。
   左端は揃っているのに右端だけ104px手前で切れるため、
   縦に並んだときに段差として見えていた。本文を帯に合わせる。 */
.page-id-82 .wnl-v3-prose {
	max-width: 54em;
}

/* /about/ WanNyanLab.とは ---------------------------------------------
   本文は一文一行にしてあるが、760pxだと長い文が入りきらず、
   「…つながっています。」の最後だけが次の行へこぼれていた。
   実測でいちばん長い文が846px。864pxあれば3項目とも2行に収まる。
   「資金の使い道」の1文だけは1026px必要で、ここは2行のままになる。 */
.page-id-81 .wnl-v3-prose {
	max-width: 54em;
}

/* 帯の中を横並びにするページ ------------------------------------------
   130 = /kind-leaf/  84 = /members/
   どちらも見出しが短く、導入文も1文。縦に積むと2段になって右が大きく空く。
   横に並べれば1段で収まる。
   他のページは縦積みのまま(見出しが長く、横に並べると導入文が潰れる)。 */
.page-id-130 .wnl-v3-inner-hero__inner,
.page-id-84 .wnl-v3-inner-hero__inner {
	grid-template-columns: minmax(0, auto) minmax(0, 1fr);
	align-items: end;
	column-gap: 40px;
}

/* 横並びにすると中身が1段になり、そのぶん上下が余る。
   縦積み前提の56pxのままだと、帯だけが高く残る */
.page-id-130 .wnl-v3-inner-hero,
.page-id-84 .wnl-v3-inner-hero {
	padding: clamp(28px, 3vw, 40px) 0;
}

/* 本文の幅を帯と揃える。表(活動資金の状況)も同じ幅まで広がる。 */
.page-id-130 .wnl-v3-prose {
	max-width: 54em;
}

/* 節と節の間が、見出しの上76.8px + 下22.4px で約100px空いていた。
   本文の行間は30px。行3つ分より広く、節ごとに切れて見えていた。
   このページは短い節が続くので、間隔を約1.5行ぶん詰める。 */
.page-id-130 .wnl-v3-prose h2 {
	margin-top: 1.8em;
}

/* 上の指定は .wnl-v3-prose h2:first-child と同じ強さで、後ろに書いた分だけ
   勝ってしまう。先頭の見出しは余白なしに戻す */
.page-id-130 .wnl-v3-prose h2:first-child {
	margin-top: 0;
}

.page-id-130 .wnl-v3-prose .wp-block-table {
	margin-top: 1.2em;
}

/* /member/ 個別 — 顔写真を紙面いっぱいに出す意味がない。
   16:9の風景写真を前提にした width:100% のままだと 1180x885 になる。
   器(shell)はそのまま。中の画像だけプロフィール写真の大きさに止める。
   (hp/DECISIONS.md 2-6-12) */
.single-wnl_member .wnl-v3-single-figure img {
	max-width: 320px;
}

/* /activity/ 活動報告 ------------------------------------------------
   1文目「商品開発、イベント、…記録を残していきます。」を1段に収める。
   文字そのものの実寸は929px。既定の760pxだと2行に折れる。
   器は1180pxあるので、992px(62em)で余裕をもって1行に入る。 */
.page-id-85 .wnl-v3-prose {
	max-width: 62em;
}

/* 導入文を消したので、帯の中身は見出しだけ(92px)になった。
   縦積み前提の56pxのままだと、205pxの帯に92pxしか入っていない。
   /kind-leaf/ /members/ と同じ高さ(約173px)にそろえる。 */
.page-id-85 .wnl-v3-inner-hero {
	padding: clamp(28px, 3vw, 40px) 0;
}

/* /shop/ 商品 --------------------------------------------------------
   商品を左右に2つ並べる。写真が主役。
   本文(在庫・価格の案内)の下に続くので、上の余白は本文ぶんで足りている。 */
.wnl-v3-shop-items {
	padding-top: 0;
}

.wnl-v3-shop-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: clamp(32px, 4vw, 56px);
}

/* 白いTシャツを白い紙面に置くと輪郭が消える。
   帯と同じ色を敷いて、写真の範囲を分かるようにする。 */
.wnl-v3-shop-card__media {
	overflow: hidden;
	border-radius: 14px;
	background: var(--wnl-v3-soft);
}

/* 共通の .wnl-v3-media img は 4:3 で切る。人物写真なので切らずに全部見せる。 */
.wnl-v3-shop-card__media img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 4 / 5;
	object-fit: cover;
}

/* 写真ではなく絵柄の商品(ステッカーなど)。切ると柄が欠けるので全部見せる。 */
.wnl-v3-shop-card__media--contain img {
	aspect-ratio: 1 / 1;
	object-fit: contain;
	padding: 8%;
	box-sizing: border-box;
}

.wnl-v3-shop-card__media img {
	transition: transform .3s ease;
}

.wnl-v3-shop-card__media:hover img,
.wnl-v3-shop-card__media:focus-visible img {
	transform: scale(1.02);
}

/* 商品名と行き先を1行に。縦に積むものを1つ減らす。
   見出しは伸び、リンクは実寸のまま右端に付く。 */
.wnl-v3-shop-card__head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 20px;
	margin-top: 20px;
}

/* 商品名は節の見出しほど大きくしない。写真より目立たせない。 */
.wnl-v3-shop-card h2 {
	margin: 0;
	font-size: clamp(1.15rem, 1.5vw, 1.35rem);
	line-height: 1.5;
}

/* 共通の text-link は上に16px空ける。ここは見出しと同じ行なので消す。 */
.wnl-v3-shop-card__head .wnl-v3-text-link {
	flex: none;
	margin-top: 0;
	white-space: nowrap;
}

.wnl-v3-shop-card > p {
	margin: 6px 0 0;
	color: var(--wnl-v3-muted);
	font-size: 0.9rem;
}

/* その他のカット。3枚を等分。
   カーソルを合わせると上の大きい写真が入れ替わる(script は inc/shop-items.php)。 */
.wnl-v3-shop-thumbs {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 10px;
	margin: 16px 0 0;
	padding: 0;
	list-style: none;
}

.wnl-v3-shop-thumbs a {
	display: block;
	overflow: hidden;
	border-radius: 8px;
	background: var(--wnl-v3-soft);
}

.wnl-v3-shop-thumbs img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 4 / 5;
	object-fit: cover;
	transition: transform .25s ease;
}

.wnl-v3-shop-thumbs a:hover img,
.wnl-v3-shop-thumbs a:focus-visible img {
	transform: scale(1.05);
}

/* 狭い画面では1列に落とす */
@media (max-width: 767px) {
	.wnl-v3-shop-grid {
		grid-template-columns: 1fr;
	}
}

/* /shop/ は見出しの帯を出さない(2026-08-25 本人が明示)。商品の写真をすぐ見せる。
   ⚠ h1 は消さずに画面からだけ外す。検索結果と読み上げで、
      このページが何なのかを示すものが他に無くなるため。 */
.wnl-v3-inner-hero--bare {
	padding: 0;
}

.wnl-v3-inner-hero--bare h1 {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	white-space: nowrap;
	clip-path: inset(50%);
}

/* スマホでは飾りの英字(見出しの上の「WANNYANLAB.」)を画面から外す。
   front-page.css と同じ扱い。理由もそちらに書いてある(2026-08-25 本人が明示)。
   ⚠ 消さずに残す。読み上げソフトと検索には伝えたい。 */
@media (max-width: 767px) {
	.wnl-v3-overline {
		position: absolute;
		width: 1px;
		height: 1px;
		margin: -1px;
		padding: 0;
		overflow: hidden;
		white-space: nowrap;
		clip-path: inset(50%);
	}
}

/* ==================================================================
   白と黒のブランド(2026-09-25 本人「白と黒を基調」「メインページ以外でも簡素じゃないように」)

   下層ページの帯を、ブランドの絵(ONLINE SHOP の帯)と同じ作りにする。
   黒い地・白い字・右下に歩く犬と猫のシルエット(脚が帯の下の端に乗る)。
   シルエットは画像を「型抜き」(mask)に使い、色は CSS で白に塗る。
   /shop/ の帯なし(--bare)には出さない。
   ================================================================== */

.wnl-v3-inner-hero:not(.wnl-v3-inner-hero--bare) {
	/* シルエットの高さ。幅は元画像の比(1362:570 = 2.39)で決まる */
	--wnl-sil-h: 72px;
	position: relative;
	border-bottom: 0;
	background: var(--wnl-v3-dark);
	color: var(--wnl-v3-paper);
	overflow: hidden;
}

.wnl-v3-inner-hero:not(.wnl-v3-inner-hero--bare)::after {
	content: "";
	position: absolute;
	right: max(24px, calc((100% - var(--wnl-v3-shell)) / 2));
	bottom: 0;
	height: var(--wnl-sil-h);
	aspect-ratio: 1362 / 570;
	background: var(--wnl-v3-paper);
	-webkit-mask: url(../img/wnl-silhouette-walk.png) no-repeat right bottom / contain;
	mask: url(../img/wnl-silhouette-walk.png) no-repeat right bottom / contain;
	pointer-events: none;
}

/* 黒い帯を、上のメニューにぴったり付ける。
   Astra の「.ast-plain-container ... #primary { margin-top: 60px }」が、
   front-page.css の「余白なし」より強く、帯の上に60pxの白いすき間が出ていた。 */
body.wnl-v3-front-active.ast-plain-container #primary.wnl-v3-inner {
	margin-top: 0;
}

/* 英字の飾り(WANNYANLAB.)は、ブランドの字と同じ細長く太い字にする */
.wnl-v3-inner-hero .wnl-v3-overline {
	color: rgba(255, 255, 255, .64);
	font-family: "Anton", "Arial Narrow", sans-serif;
	font-size: 1rem;
	font-weight: 400;
	letter-spacing: .12em;
}

.wnl-v3-inner-hero h1 {
	color: var(--wnl-v3-paper);
	font-family: "M PLUS Rounded 1c", "Hiragino Maru Gothic ProN", sans-serif;
	font-weight: 800;
	letter-spacing: .04em;
	/* 「…犬と / 猫」のように1文字だけ落ちないよう、文節で区切って行の長さをそろえる */
	word-break: auto-phrase;
	text-wrap: balance;
}

.wnl-v3-inner-hero__lead {
	color: rgba(255, 255, 255, .78);
}

.wnl-v3-inner-hero__lead a {
	color: var(--wnl-v3-paper);
	text-decoration: underline;
	text-underline-offset: 4px;
}

/* 本文の見出しも、帯と同じ字にそろえる(太く、角が少し丸い) */
.wnl-v3-inner h2,
.wnl-v3-inner h3 {
	font-family: "M PLUS Rounded 1c", "Hiragino Maru Gothic ProN", sans-serif;
	font-weight: 800;
	letter-spacing: .02em;
}

/* スマホ・タブレット:シルエットは文の下に置く。帯の下に、その高さぶんの余白を足す */
@media (max-width: 1023px) {
	.wnl-v3-inner-hero:not(.wnl-v3-inner-hero--bare) {
		padding-bottom: calc(var(--wnl-sil-h) + 16px);
	}
}

@media (min-width: 768px) and (max-width: 1023px) {
	.wnl-v3-inner-hero:not(.wnl-v3-inner-hero--bare) {
		--wnl-sil-h: 96px;
	}
}

/* スマホは器の左右が22px(追加CSSの指定)。シルエットの右端を文字の端にそろえる(規則1) */
@media (max-width: 767px) {
	.wnl-v3-inner-hero:not(.wnl-v3-inner-hero--bare)::after {
		right: 22px;
	}
}

/* PC:シルエットは文の右。文がシルエットの下に潜らないよう、右にその幅ぶん空ける */
@media (min-width: 1024px) {
	.wnl-v3-inner-hero:not(.wnl-v3-inner-hero--bare) {
		--wnl-sil-h: 112px;
	}

	.wnl-v3-inner-hero:not(.wnl-v3-inner-hero--bare) .wnl-v3-inner-hero__inner {
		padding-right: calc(var(--wnl-sil-h) * 2.39 + 24px);
	}
}

@media (min-width: 1280px) {
	.wnl-v3-inner-hero:not(.wnl-v3-inner-hero--bare) {
		--wnl-sil-h: 136px;
	}
}

/* 緑を白黒へ(2026-09-25)。緑は里親の地図の「選んでいる県」だけに残す。 */
.wnl-v3-prose ul li::before {
	background: var(--wnl-v3-dark);
}

/* リンクは「下線 + 目立つ」で示す(規則13)。色の代わりに太さで目立たせる */
.wnl-v3-prose a {
	color: var(--wnl-v3-ink);
	font-weight: 700;
}

.give-form input[type="submit"]:hover,
#give-email-access-form input[type="submit"]:hover,
#give-email-access-form button[type="submit"]:hover,
.give-submit:hover,
.frm-fluent-form .ff-btn-submit:hover,
.frm-fluent-form .ff-btn-submit:focus-visible {
	background: var(--wnl-v3-dark);
}

.ff-message-success {
	border-color: var(--wnl-v3-dark);
	background: var(--wnl-v3-soft);
}

/* 本文の2列(見出し左・本文右)は、本人の判断で取りやめ(2026-09-25「前の感じの方がよかった」)。縦に積む形のまま */

/* 本文の大きい見出し(h2)の下に黒い線(本人 2026-09-25「アンダーバーは引いててもいい」)。
   節の始まりがひと目で分かるように。小見出し(h3)には引かない */
.wnl-v3-prose h2 {
	padding-bottom: 12px;
	border-bottom: 2px solid var(--wnl-v3-dark);
}

/* /kind-leaf/(130)と /members/(84)の帯の横並びは、スマホでは縦並びに戻す。
   横並びの指定に幅の条件が無く、390px で導入文が右の細い列(約5文字)に押し込まれていた。 */
@media (max-width: 767px) {
	.page-id-130 .wnl-v3-inner-hero__inner,
	.page-id-84 .wnl-v3-inner-hero__inner {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* ------------------------------------------------------------------
   404(白黒の仕上げ 2026-09-25)
   ------------------------------------------------------------------ */
/* 帯の見出しと説明がくっついていた(404だけ __inner の入れ物が無く、間の余白が付かない) */
.wnl-v3-404 .wnl-v3-inner-hero__lead {
	margin-top: 16px;
}

.wnl-v3-404-list a:hover,
.wnl-v3-404-list a:focus-visible {
	border-color: var(--wnl-v3-dark);
}

/* Astra の検索は、虫眼鏡のボタンと「検索」のボタンを両方出す。虫眼鏡を隠して、入力欄とボタンを1行に */
.wnl-v3-404-search .search-form {
	display: flex;
	align-items: stretch;
	gap: 8px;
}

.wnl-v3-404-search .search-form label {
	flex: 1;
	margin: 0;
}

.wnl-v3-404-search .ast-search-submit {
	display: none;
}

.wnl-v3-404-search input[type="search"] {
	width: 100%;
	height: 100%;
}

.wnl-v3-404-search input[type="submit"] {
	padding: 12px 24px;
	border: 0;
	border-radius: 999px;
	background: var(--wnl-v3-dark);
	color: #fff;
	font-size: 1rem;
	font-weight: 700;
	cursor: pointer;
}

/* 飾りの無い帯(ギャラリー)は背景が薄いまま。黒い帯用の白い字が効いて読めなくなっていたので、元の色に戻す */
.wnl-v3-inner-hero--bare h1 {
	color: var(--wnl-v3-ink);
}

.wnl-v3-inner-hero--bare .wnl-v3-inner-hero__lead {
	color: var(--wnl-v3-muted);
}

/* 支援の履歴・お礼ページのメールアドレス欄:ラベル・入力欄・ボタンが1行に詰まっていた。
   ラベルを上の行に出し、入力欄とボタンを横に並べる(狭い画面では縦に) */
#give-email-access-form {
	display: flex;
	flex-wrap: wrap;
	align-items: stretch;
	max-width: 560px;
	gap: 8px;
}

#give-email-access-form > p,
#give-email-access-form > label {
	flex-basis: 100%;
	margin: 0;
}

#give-email-access-form > label {
	margin-top: 8px;
	color: var(--wnl-v3-ink);
	font-weight: 700;
}

#give-email-access-form input[type="email"] {
	flex: 1 1 240px;
	min-width: 0;
	height: auto;
	font-size: 1rem;
}

/* GiveWP が入力欄の下に15pxの余白を付ける(ID 2つの強い指定)。ボタンまで伸びるので消す */
form#give-email-access-form input#give-email {
	margin: 0;
}

/* ボタンの字を本文と同じ大きさに(GiveWP の標準は .875rem) */
#give-email-access-form input.give-submit[type="submit"] {
	font-size: 1rem;
}

/* ==================================================================
   トップにそろえる(2026-09-25 本人「ある程度スタイリッシュに」「他のページもやって」)

   帯:うしろに大きな白抜きの英字(トップの MEMBERS と同じ作り)、
   小見出しは肉球+英字+細い線。見出しを大きく、帯を高く。
   英字は section の data-label(functions.php の wnl_v3_page_label)。
   ================================================================== */

.wnl-v3-inner {
	--wnl-paw: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cellipse cx='4.6' cy='10' rx='2.3' ry='2.9' transform='rotate(-18 4.6 10)'/%3E%3Cellipse cx='9' cy='5.2' rx='2.3' ry='3' transform='rotate(-6 9 5.2)'/%3E%3Cellipse cx='15' cy='5.2' rx='2.3' ry='3' transform='rotate(6 15 5.2)'/%3E%3Cellipse cx='19.4' cy='10' rx='2.3' ry='2.9' transform='rotate(18 19.4 10)'/%3E%3Cpath d='M12 10.6c-2.9 0-6.2 4.1-6.2 7.1 0 1.9 1.5 3 3.2 2.7 1.2-.2 2-.8 3-.8s1.8.6 3 .8c1.7.3 3.2-.8 3.2-2.7 0-3-3.3-7.1-6.2-7.1z'/%3E%3C/svg%3E");
}

.wnl-v3-inner-hero:not(.wnl-v3-inner-hero--bare) {
	padding-top: clamp(64px, 8vw, 116px);
	isolation: isolate;
}

/* 下の余白はPCだけ広げる。狭い画面はシルエットの高さぶんの余白(上の指定)のまま */
@media (min-width: 1024px) {
	.wnl-v3-inner-hero:not(.wnl-v3-inner-hero--bare) {
		padding-bottom: clamp(56px, 7vw, 100px);
	}
}

.wnl-v3-inner-hero:not(.wnl-v3-inner-hero--bare)::before {
	position: absolute;
	top: 50%;
	right: -0.04em;
	z-index: -1;
	color: transparent;
	font-family: "Anton", "Impact", sans-serif;
	font-size: clamp(6rem, 15vw, 15rem);
	letter-spacing: .02em;
	line-height: 1;
	white-space: nowrap;
	-webkit-text-stroke: 1px rgba(255, 255, 255, .13);
	transform: translateY(-50%);
	pointer-events: none;
	content: attr(data-label);
	content: attr(data-label) / "";
}

/* 小見出し:肉球+英字+細い線 */
.wnl-v3-inner-hero .wnl-v3-overline {
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 0 0 22px;
	color: #fff;
	font-size: .95rem;
	letter-spacing: .2em;
	line-height: 1;
}

.wnl-v3-inner-hero .wnl-v3-overline::before {
	width: 1.15em;
	height: 1.15em;
	flex: none;
	background: currentColor;
	-webkit-mask: var(--wnl-paw) no-repeat center / contain;
	mask: var(--wnl-paw) no-repeat center / contain;
	transform: rotate(-14deg);
	content: "";
}

.wnl-v3-inner-hero .wnl-v3-overline::after {
	width: 48px;
	height: 1px;
	background: currentColor;
	opacity: .4;
	content: "";
}

.wnl-v3-inner-hero:not(.wnl-v3-inner-hero--bare) h1 {
	font-size: clamp(2.3rem, 4.8vw, 3.8rem);
	line-height: 1.3;
}

.wnl-v3-inner-hero:not(.wnl-v3-inner-hero--bare) .wnl-v3-inner-hero__lead {
	font-size: 1rem;
	line-height: 2;
}

/* 本文:箇条書きの点を肉球に(トップの支援カードと同じ) */
.wnl-v3-prose ul li::before {
	top: .5em;
	width: 14px;
	height: 14px;
	border-radius: 0;
	background: var(--wnl-v3-dark);
	-webkit-mask: var(--wnl-paw) no-repeat center / contain;
	mask: var(--wnl-paw) no-repeat center / contain;
}

.wnl-v3-prose ul li {
	padding-left: 1.9em;
}

/* 見出しの下線は細く長く。h2の上をもう少し空けて、節の切れ目をはっきり */
.wnl-v3-prose h2 {
	margin-top: 2.8em;
	padding-bottom: 14px;
	border-bottom-width: 2px;
	font-size: clamp(1.6rem, 2.8vw, 2.1rem);
	letter-spacing: .03em;
}

.wnl-v3-prose h2:first-child {
	margin-top: 0;
}

/* 一覧の見出し(進行中のプロジェクト など)もトップの見出しと同じ大きさに */
.wnl-v3-page-listing .wnl-v3-section-head h2 {
	font-size: clamp(2rem, 3.8vw, 3rem);
	letter-spacing: .02em;
}

@media (max-width: 767px) {
	.wnl-v3-inner-hero:not(.wnl-v3-inner-hero--bare)::before {
		top: 18px;
		right: auto;
		left: 18px;
		font-size: 22vw;
		transform: none;
	}

	.wnl-v3-inner-hero:not(.wnl-v3-inner-hero--bare) {
		padding-top: 72px;
	}

	.wnl-v3-inner-hero:not(.wnl-v3-inner-hero--bare) h1 {
		font-size: clamp(1.9rem, 8.4vw, 2.4rem);
	}
}

/* カードの小さな英字ラベル(MEMBER・DEVELOPMENT など)は、トップと同じ細長い英字に */
.wnl-v3-inner .wnl-v3-card-label {
	color: var(--wnl-v3-muted);
	font-family: "Anton", "Impact", sans-serif;
	font-size: .8rem;
	font-weight: 400;
	/* 追加CSSの字間(!important)に負けていた */
	letter-spacing: .18em !important;
}

.wnl-v3-inner .wnl-v3-member-card h3,
.wnl-v3-inner .wnl-v3-partner-card h3,
.wnl-v3-inner .wnl-v3-project-card h3,
.wnl-v3-inner .wnl-v3-news-card h3 {
	font-family: "M PLUS Rounded 1c", "Hiragino Maru Gothic ProN", sans-serif;
	font-weight: 800;
}

.wnl-v3-inner .wnl-v3-member-card h3 {
	font-size: clamp(1.4rem, 2.2vw, 1.8rem);
}

/* ギャラリー(帯なし):灰色の細い帯に説明文が詰まり、写真がその下の線にくっついていた。
   帯は出さない決まりのまま、白地の上に説明文を置き、写真との間を空ける */
.wnl-v3-inner-hero--bare {
	padding: clamp(40px, 5vw, 64px) 0 clamp(28px, 3vw, 40px);
	border-bottom: 0;
	background: var(--wnl-v3-paper);
}

.wnl-v3-inner-hero--bare .wnl-v3-inner-hero__lead {
	padding-left: 18px;
	border-left: 3px solid var(--wnl-v3-dark);
	color: var(--wnl-v3-ink);
	font-size: 1rem;
	line-height: 1.8;
}

/* 英字が屋号(WANNYANLAB.)のままのページ(法務など)は、長くて見出しに重なるので大きな英字を出さない */
.wnl-v3-inner-hero[data-label="WANNYANLAB."]::before {
	display: none;
}

/* 本文の字をトップと同じ丸い字に(下層だけ Arial・角ゴシックのままだった) */
.wnl-v3-inner,
.wnl-v3-inner :where(p, li, td, th, div, span, a, label, dd, dt, time) {
	font-family: "Zen Maru Gothic", "Hiragino Maru Gothic ProN", "Hiragino Kaku Gothic ProN", sans-serif;
}

.wnl-v3-inner .wnl-v3-prose p,
.wnl-v3-inner .wnl-v3-prose li {
	font-weight: 500;
	letter-spacing: .02em;
}

/* 仲間のカードの MEMBER もトップと同じ英字に */
.wnl-v3-inner .wnl-v3-member-card__image + p {
	margin: 0 0 6px;
	color: var(--wnl-v3-muted);
	font-family: "Anton", "Impact", sans-serif;
	font-size: .8rem;
	font-weight: 400;
	/* 追加CSSの字間(!important)に負けていた */
	letter-spacing: .18em !important;
}

/* 導入文が「…進めていま / す。」のように1〜2字だけ次の行に落ちていた(本人 2026-09-25)。
   右のシルエット用に空けた幅が広すぎ、いちばん長い一文(約850px)が入らなかった。
   シルエットを少し小さくして、一文が一行に入る幅を取る。
   それでも狭い画面で折れるときは、文節で折り、行の長さをそろえる */
@media (min-width: 1280px) {
	.wnl-v3-inner-hero:not(.wnl-v3-inner-hero--bare) {
		--wnl-sil-h: 112px;
	}
}

.wnl-v3-inner-hero__lead,
.wnl-v3-inner p,
.wnl-v3-inner li {
	/* 本文は文節で折る(「T / シャツ」「充て / る」のような語の途中の割れを防ぐ)。
	   text-wrap: pretty と重ねると Chrome で「方 / 々」と割れたので、重ねない(2026-09-25 実測) */
	word-break: auto-phrase;
}

/* 下層ページの余白も詰める(本人 2026-09-25「全体的に長い」)。トップと同じ考え方 */
.wnl-v3-inner .wnl-v3-section {
	padding-top: clamp(48px, 5.5vw, 80px);
	padding-bottom: clamp(48px, 5.5vw, 80px);
}

.wnl-v3-inner .wnl-v3-section + .wnl-v3-section {
	padding-top: 0;
}

.wnl-v3-prose h2 {
	margin-top: 2.2em;
}

.wnl-v3-prose h2:first-child {
	margin-top: 0;
}

.wnl-v3-prose h3 {
	margin-top: 1.8em;
}

@media (max-width: 767px) {
	.wnl-v3-inner .wnl-v3-section {
		padding-top: 44px;
		padding-bottom: 48px;
	}
}

/* 本文の一文が一行に入る幅に(本人 2026-09-25「一文一行が正解」)。
   ページごとに 760px / 54em とばらばらだったのを 68em(約1090px)にそろえる。
   いちばん長い一文(/kind-leaf/ の約1060px)が入る。器(1180px)の内側には収まる */
.wnl-v3-inner .wnl-v3-prose,
.page-id-82 .wnl-v3-prose,
.page-id-81 .wnl-v3-prose,
.page-id-130 .wnl-v3-prose {
	max-width: 68em;
}

/* 下層ページは、ふわっと出る動きをやめて最初から見せる(トップと同じ考え。home.css 参照) */
.wnl-v3-inner .wnl-v3-reveal {
	opacity: 1;
	transform: none;
	transition: none;
}

/* ギャラリー(スマホ):商品名が「ドットTシャツ / (ブラック)」と折れ、
   「商品ページを見る」は高さ23pxで指で押しにくかった。
   狭い画面では商品名とリンクを縦に積み、リンクは押しやすい高さに */
.wnl-v3-shop-card__head .wnl-v3-text-link {
	min-height: 44px;
}

@media (max-width: 767px) {
	.wnl-v3-shop-card__head {
		flex-direction: column;
		align-items: flex-start;
		gap: 4px;
	}
}

/* 見出しは行の長さをそろえて折る(狭い画面で「…商品づく / り」のように1字だけ落ちていた)。
   本文には使わない(text-wrap の指定を重ねると Chrome で語の途中が割れるため) */
.wnl-v3-inner h1,
.wnl-v3-inner h2,
.wnl-v3-inner h3 {
	word-break: auto-phrase;
	text-wrap: balance;
}

/* スマホ:追加CSSの「.wnl-v3-section h2 { margin: 0 0 18px !important; word-break: normal !important }」が
   本文の見出しにも効き、前の段落とくっついていた。追加CSSは消さない決まりなので、ここで上書きする */
@media (max-width: 767px) {
	.wnl-v3-inner .wnl-v3-prose h2 {
		margin-bottom: .8em !important;
		letter-spacing: .02em !important;
		word-break: auto-phrase !important;
	}

	/* 一覧の見出しにも同じ上書きが要る(「協賛してくだ / さっている方々」と割れていた。2026-10-13) */
	.wnl-v3-inner .wnl-v3-page-listing .wnl-v3-section-head h2 {
		word-break: auto-phrase !important;
		text-wrap: balance !important;
	}

	.wnl-v3-inner .wnl-v3-prose h2:not(:first-child) {
		margin-top: 2em !important;
	}

	/* 追加CSSの「.wnl-v3-section p { word-break: normal !important }」で、本文が「T / シャツ」と割れていた */
	.wnl-v3-inner .wnl-v3-section p,
	.wnl-v3-inner .wnl-v3-section li,
	.wnl-v3-inner .wnl-v3-inner-hero__lead p {
		word-break: auto-phrase !important;
	}
}

/* /partners/ の一覧も小さな窓で並べる。スマホで1社が画面幅いっぱいになっていたので2列に(トップと同じ) */
@media (max-width: 767px) {
	.wnl-v3-inner .wnl-v3-partner-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

/* /partners/ の一覧の窓を、トップの協力者の窓と同じ作りに(黒い細枠・灰色のロゴ面・小さな窓を横に並べる) */
.wnl-v3-inner .wnl-v3-partner-grid {
	grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
	gap: 16px;
}

.wnl-v3-inner .wnl-v3-partner-card {
	display: flex;
	flex-direction: column;
	padding: 0;
	overflow: hidden;
	border: 1px solid var(--wnl-v3-dark);
	border-radius: 10px;
	transition: transform .3s ease, box-shadow .3s ease;
}

.wnl-v3-inner a.wnl-v3-partner-card:hover,
.wnl-v3-inner a.wnl-v3-partner-card:focus-visible {
	box-shadow: 5px 5px 0 var(--wnl-v3-dark);
	transform: translate(-3px, -3px);
}

.wnl-v3-inner .wnl-v3-partner-card__logo {
	height: auto;
	aspect-ratio: 3 / 2;
	padding: 16px 20px;
	border-bottom: 1px solid var(--wnl-v3-dark);
	background: #f2f2ef;
}

.wnl-v3-inner .wnl-v3-partner-card__logo img {
	mix-blend-mode: multiply;
}

.wnl-v3-inner .wnl-v3-partner-card > p {
	margin: 12px 14px 4px;
	font-family: "Anton", "Impact", sans-serif;
	font-size: .7rem;
	font-weight: 400;
	letter-spacing: .18em !important;
}

.wnl-v3-inner .wnl-v3-partner-card h3 {
	margin: 0 14px 14px;
	font-size: 1rem;
}

@media (max-width: 767px) {
	/* 追加CSSが1列(!important)にしていた */
	.wnl-v3-inner .wnl-v3-partner-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
		gap: 12px;
	}
}

/* 商品開発の一覧:写真の無いプロジェクトは、犬と猫の影を置く */
.wnl-v3-project-card__image .wnl-v3-project-card__ph {
	width: 46%;
	aspect-ratio: 1362 / 570;
	background: var(--wnl-v3-paper);
	opacity: .9;
	-webkit-mask: url(../img/wnl-silhouette-walk.png) no-repeat center / contain;
	mask: url(../img/wnl-silhouette-walk.png) no-repeat center / contain;
}

/* 404:スマホで「…でし/た。」と1字落ちしないよう、2行目が1行に収まる大きさにする */
@media (max-width: 767px) {
	.wnl-v3-404 .wnl-v3-inner-hero h1 {
		font-size: clamp(1.6rem, 7.2vw, 2.2rem);
		letter-spacing: 0;
	}
}

/* 箇条書きの1項目が「…連絡の/ため」のように2字だけ落ちないよう、行の長さをそろえる。
   短い項目に効く(長い項目は、ブラウザが自動で対象外にする) */
.wnl-v3-inner .wnl-v3-prose li {
	text-wrap: balance;
}

/* ギャラリーの下:撮影のオフショット(2026-10-08)。商品の写真より一段控えめに、3列で並べる */
.wnl-v3-offshots {
	border-top: 1px solid var(--wnl-v3-line);
}

.wnl-v3-offshots__head {
	max-width: 760px;
	margin-bottom: 32px;
}

.wnl-v3-offshots__over {
	margin: 0 0 8px;
	color: var(--wnl-v3-muted);
	font-size: .75rem;
	font-weight: 800;
	letter-spacing: .14em;
}

.wnl-v3-offshots__head h2 {
	margin: 0;
	font-size: clamp(1.4rem, 2.2vw, 1.8rem);
}

.wnl-v3-offshots__head h2 + p {
	margin: 12px 0 0;
	color: var(--wnl-v3-muted);
	font-size: .9rem;
}

.wnl-v3-offshots__grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: clamp(12px, 2vw, 24px);
	margin: 0;
	padding: 0;
	list-style: none;
}

.wnl-v3-offshots__grid a {
	position: relative;
	display: block;
	overflow: hidden;
	border-radius: 12px;
	background: var(--wnl-v3-soft);
	color: #fff;
	text-decoration: none;
}

.wnl-v3-offshots__grid img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 4 / 5;
	object-fit: cover;
	object-position: center 20%;
	transition: transform .4s ease;
}

.wnl-v3-offshots__grid a:hover img,
.wnl-v3-offshots__grid a:focus-visible img {
	transform: scale(1.03);
}

/* 誰が写っているかを、写真の左下に小さく */
.wnl-v3-offshots__grid span {
	position: absolute;
	left: 12px;
	bottom: 10px;
	padding: 2px 10px;
	border-radius: 999px;
	background: rgba(0, 0, 0, .55);
	font-size: .78rem;
	font-weight: 700;
	letter-spacing: .04em;
}

@media (max-width: 767px) {
	.wnl-v3-offshots__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

/* バーチャルモデルの素体の画像(2026-10-08)。持ち出しにくくする(理由は inc/content-types.php) */
.wnl-v3-protected {
	position: relative;
	margin: 24px 0;
	-webkit-user-select: none;
	user-select: none;
	-webkit-touch-callout: none;
}

.wnl-v3-protected img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: 12px;
	pointer-events: none;
	-webkit-user-drag: none;
}

/* 画像の上に透明な膜を置く(画像そのものを右クリック・長押しできないように) */
.wnl-v3-protected::after {
	position: absolute;
	inset: 0;
	content: "";
}

/* 仲間・スタッフの個別ページ:顔写真を名前の右に(2026-10-08 本人「普通右側に画像でしょう」) */
.wnl-v3-inner-hero--member .wnl-v3-inner-hero__inner {
	display: grid;
	/* 写真は名前のすぐ右(名前と後ろの大きな「MEMBERS」の文字の間)。右の端には寄せない */
	grid-template-columns: max-content clamp(120px, 14vw, 200px);
	justify-content: start;
	grid-template-areas:
		"head photo"
		"lead photo";
	column-gap: clamp(20px, 3vw, 40px);
	row-gap: 12px;
	align-items: end;
}

.wnl-v3-inner-hero--member .wnl-v3-member-hero-photo {
	grid-area: photo;
	align-self: center;
	overflow: hidden;
	border-radius: 14px;
	background: #000;
}

.wnl-v3-inner-hero--member .wnl-v3-member-hero-photo img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 1 / 1;
	object-fit: cover;
}

.wnl-v3-inner-hero--member .wnl-v3-inner-hero__head {
	grid-area: head;
}

.wnl-v3-inner-hero--member .wnl-v3-inner-hero__lead {
	grid-area: lead;
	align-self: start;
}

/* 写真の段が無くなったので、本文は帯のすぐ下から始める */
.single-wnl_member .wnl-v3-inner-body {
	padding-top: clamp(32px, 4vw, 56px);
}

/* ===== 支援ページのフォーム(2026-10-13)=====
   本文を読み終えたところで、地の色を変えて「ここから申し込み」と分かるようにする。フォーム本体は Give の iframe。
   本文の幅が 1088px に広がったあと、列(760px)が左に残って右が大きく空いていた(2026-10-29 本人「左に寄ってない？」)。
   入力欄は 760px より広げると読みにくいので、幅はそのまま、色を変えた帯の真ん中に置く。 */
.wnl-v3-inner .wnl-v3-section.wnl-v3-support-form {
	margin-top: clamp(64px, 8vw, 104px);
	padding: clamp(56px, 7vw, 88px) 0 clamp(64px, 8vw, 104px);
	background: #f3f3f1;
	border-top: 1px solid rgba(0, 0, 0, .08);
}

.wnl-v3-support-form__col {
	max-width: 760px;
	margin-inline: auto;
}

.wnl-v3-support-form h2 {
	margin: .2em 0 .5em;
	padding-bottom: .45em;
	border-bottom: 2px solid #111;
	font-size: clamp(1.5rem, 2.8vw, 2rem);
	line-height: 1.35;
}

.wnl-v3-support-form__note {
	margin: 0 0 clamp(20px, 3vw, 32px);
	color: #333;
}

/* Give のフォームは左右に余白を持った白い札。札の左端を見出しの左端にそろえる */
.wnl-v3-support-form__body .root-data-givewp-embed,
.wnl-v3-support-form__body iframe {
	display: block;
	width: 100%;
	max-width: none;
	margin: 0;
}

/* 番号つきの箇条書き(利用規約の第3条など)。点の代わりに番号を出す(2026-10-27) */
.wnl-v3-prose ol {
	counter-reset: wnl-ol;
}

.wnl-v3-prose ol > li {
	counter-increment: wnl-ol;
}

.wnl-v3-prose ol > li::before {
	content: counter(wnl-ol) ".";
	position: absolute;
	left: 0;
	top: 0;
	font-weight: 700;
}

.wnl-v3-prose ol > li > ul {
	margin: .9em 0 0;
}

/* 法務のページの表は「項目|内容」の文。金額用の右寄せ・折り返しなし・最後の行の色を外す(2026-10-27)
   110 プライバシー/111 特商法/112 支援の注意事項/146 利用規約/147 返品/148 Cookie/149 運営について */
:is(.page-id-110, .page-id-111, .page-id-112, .page-id-146, .page-id-147, .page-id-148, .page-id-149) .wnl-v3-prose .wp-block-table td:last-child,
:is(.page-id-110, .page-id-111, .page-id-112, .page-id-146, .page-id-147, .page-id-148, .page-id-149) .wnl-v3-prose .wp-block-table th:last-child {
	width: auto;
	text-align: left;
	white-space: normal;
}

:is(.page-id-110, .page-id-111, .page-id-112, .page-id-146, .page-id-147, .page-id-148, .page-id-149) .wnl-v3-prose .wp-block-table td {
	overflow-wrap: anywhere;
}

:is(.page-id-110, .page-id-148) .wnl-v3-prose .wp-block-table :is(th, td):first-child {
	width: 30%;
}

:is(.page-id-110, .page-id-111, .page-id-112, .page-id-146, .page-id-147, .page-id-148, .page-id-149) .wnl-v3-prose .wp-block-table tbody tr:last-child td {
	background: none;
}

/* Kind Leaf の支援者一覧(inc/supporters.php)。名前を細い線で区切って並べる(2026-10-27) */
.wnl-v3-prose ul.wnl-supporters {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 0 24px;
	margin: 0 0 1.2em;
}

.wnl-v3-prose ul.wnl-supporters li {
	margin: 0;
	padding: 12px 0;
	border-bottom: 1px solid var(--wnl-v3-line);
	font-weight: 700;
	overflow-wrap: anywhere;
}

.wnl-v3-prose ul.wnl-supporters li::before {
	content: none;
}

.wnl-v3-prose .wnl-supporters__anon {
	color: #4f4f4f;
	font-size: .9375rem;
}

@media (max-width: 767px) {
	.wnl-v3-prose ul.wnl-supporters {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 0 16px;
	}
}

/* Kind Leaf の「活動の記録」(inc/kind-leaf-records.php)。日付と題名を1行ずつ、細い線で区切る(2026-10-30) */
.wnl-v3-prose ul.wnl-records {
	margin: 0 0 1.2em;
	padding: 0;
	border-top: 1px solid var(--wnl-v3-line);
}

.wnl-v3-prose ul.wnl-records li {
	display: grid;
	grid-template-columns: 7.5em 1fr;
	gap: 0 16px;
	margin: 0;
	padding: 14px 0;
	border-bottom: 1px solid var(--wnl-v3-line);
}

.wnl-v3-prose ul.wnl-records li::before {
	content: none;
}

.wnl-v3-prose ul.wnl-records time {
	color: #4f4f4f;
	font-family: "Anton", "Impact", sans-serif;
	letter-spacing: .08em;
}

.wnl-v3-prose ul.wnl-records a {
	font-weight: 700;
}

.wnl-v3-prose .wnl-records__empty {
	padding: 14px 0;
	border-top: 1px solid var(--wnl-v3-line);
	border-bottom: 1px solid var(--wnl-v3-line);
	color: #4f4f4f;
}

@media (max-width: 767px) {
	.wnl-v3-prose ul.wnl-records li {
		grid-template-columns: 1fr;
	}
}