/*
 * BUTSU✖︎2 テーマ（弥生テイスト）
 *
 * 色の役割（文字は背景に対して 4.5:1 以上）
 *   地 #F5EDDC / 紙 #FBF6EA（カード #FFFDF8） / 本文 #2A2420 / 補足 #6B5F55
 *   主色 弁柄 #B5402A（主要ボタン・選択状態・重要情報。白文字は 5.6:1） / 濃い主色 #8E2E1C（リンク）
 *   金 #D9A441（飾りだけ。文字には使わない） / 緑青 #5E8C7A（飾り）・#3F6B59（緑の文字）
 *   区切り線 #E0D3B8 / 入力欄の枠 #8A7A66
 * 質感（3.1）：生成り色の紙の地（tex-paper）。セクションの境目は、紙を破いた縁（edge-*.svg）。
 *   ヒーローは全幅の風景（assets/img/hero-bg.svg。--b2-hero-bg で絵画風の画像に差し替えられる）。
 *   ツヤは主要ボタンだけ。番号バッジは濃い緑 #2F5D4B（白文字 7.5:1）。
 * 飾り：高床倉庫・物見やぐら・竪穴住居・稲穂・土器・勾玉（自作SVG）
 * 書体：ゴシック体1種類（ヒラギノ角ゴ → Noto Sans JP → メイリオ）
 * 余白の段階：4・8・12・16・24・32・48・64・88px
 */

/* 見出し用の書体（3.2.3）：Dela Gothic One（SIL Open Font License 1.1。同梱の assets/fonts/OFL.txt）。
 * トップの見出し「スキルも、物も、物々交換。」の文字だけを切り出した小さなファイル（約2KB）。スマホのトップの見出しにだけ使う。 */
@font-face {
	font-family: "B2 Headline";
	src: url("../fonts/dela-gothic-one-headline.woff2") format("woff2");
	font-weight: 400;
	font-style: normal;
	font-display: block;
}

:root {
	--c-ground: #f5eddc;
	--c-bg: #f5eddc;
	--c-paper: #fbf6ea;
	--c-card: #fffdf8;
	--c-text: #2a2420;
	--c-muted: #6b5f55;
	--c-accent: #b5402a;
	--c-accent-strong: #8e2e1c;
	--c-accent-soft: #f6e0d6;
	--c-gold: #d9a441;
	--c-green: #5e8c7a;
	--c-green-text: #3f6b59;
	--c-line: #e0d3b8;
	--c-line-strong: #8a7a66;
	--c-soft: #fbf6ea;
	--c-band: #eee2c6;
	--c-green-deep: #2f5d4b;
	--c-dark: #3a2f28;
	--c-dark-text: #f2e6cc;
	--c-dark-muted: #cdbf9f;
	--shadow-card: 0 1px 0 rgba(255, 255, 255, .8) inset, 0 3px 0 rgba(120, 90, 50, .07), 0 10px 22px rgba(70, 50, 30, .08);
	--tex-paper: url("../img/tex-paper.svg");

	/* ヒーローの背景。あとから絵画風の画像に差し替えるときは、この1行を上書きします
	   例）:root { --b2-hero-bg: url("/wp-content/uploads/hero.webp"); } */
	--b2-hero-bg: url("../img/hero-bg.svg");
	--b2-hero-sky: #c9dcd6;

	--font: "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Noto Sans JP", "Noto Sans CJK JP", Meiryo, sans-serif;

	--w-content: 1160px;
	--w-mid: 960px;
	--w-prose: 740px;
	--gutter: 32px;
	--section-y: 88px;

	--r-btn: 8px;
	--r-card: 14px;

	--focus: 0 0 0 3px #ffffff, 0 0 0 5px #b5402a;

	/* プラグインの画面と色をそろえる */
	--b2-ground: var(--c-ground);
	--b2-bg: var(--c-paper);
	--b2-paper: var(--c-card);
	--b2-text: var(--c-text);
	--b2-muted: var(--c-muted);
	--b2-accent: var(--c-accent);
	--b2-accent-strong: var(--c-accent-strong);
	--b2-accent-soft: var(--c-accent-soft);
	--b2-gold: var(--c-gold);
	--b2-green: var(--c-green);
	--b2-green-text: var(--c-green-text);
	--b2-line: var(--c-line);
	--b2-line-strong: var(--c-line-strong);
	--b2-soft: var(--c-soft);
	--b2-font: var(--font);
}

/* ---------- 基本 ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
	margin: 0;
	background: var(--c-bg) var(--tex-paper) repeat left top / 240px 240px;
	color: var(--c-text);
	font-family: var(--font);
	font-size: 17px;
	font-weight: 400;
	line-height: 1.85;
	letter-spacing: .02em;
	line-break: strict;
	overflow-wrap: anywhere;
	-webkit-font-smoothing: antialiased;
	font-feature-settings: "palt" 0;
}
img, svg, video { max-width: 100%; height: auto; }
a { color: var(--c-accent-strong); }
.site-main { display: block; }
h1, h2, h3, h4 { color: var(--c-text); font-weight: 700; margin: 0; word-break: auto-phrase; text-wrap: balance; }
p { margin: 0 0 16px; text-wrap: pretty; }
button { font-family: inherit; }
:focus-visible { outline: none; box-shadow: var(--focus); border-radius: 4px; }

.screen-reader-text { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(1px, 1px, 1px, 1px); white-space: nowrap; }
.skip-link { position: absolute; left: 16px; top: -200px; z-index: 100; background: #fff; color: var(--c-text); padding: 8px 16px; border-radius: var(--r-btn); text-decoration: none; }
.skip-link:focus { top: 16px; box-shadow: var(--focus); }

.container { width: 100%; max-width: calc(var(--w-content) + var(--gutter) * 2); margin: 0 auto; padding: 0 var(--gutter); }
.container--narrow { max-width: calc(var(--w-prose) + var(--gutter) * 2); }
.container--mid { max-width: calc(var(--w-mid) + var(--gutter) * 2); }

.text-link { color: var(--c-accent-strong); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.text-link:hover { text-decoration-thickness: 2px; }
.note { font-size: 14px; line-height: 1.7; color: var(--c-muted); }

/* ---------- ボタン（ツヤは主要ボタンだけ） ---------- */
.btn {
	display: inline-flex; align-items: center; justify-content: center;
	min-height: 48px; padding: 10px 24px;
	border-radius: var(--r-btn); border: 1px solid transparent;
	font-size: 16px; line-height: 1.4; font-weight: 700; letter-spacing: .02em;
	text-decoration: none; text-align: center; cursor: pointer;
	transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}
.btn--primary {
	color: #fff; border-color: #8e2e1c;
	background: linear-gradient(180deg, #c8563f 0%, #b5402a 52%, #a43723 100%);
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, .34), 0 1px 2px rgba(42, 36, 32, .18);
}
.btn--primary:hover { color: #fff; background: linear-gradient(180deg, #b84a35 0%, #a43723 52%, #92301e 100%); }
.btn--secondary { color: var(--c-accent-strong); background: var(--c-card); border-color: var(--c-accent); }
.btn--secondary:hover { background: var(--c-accent-soft); }
.btn--sm { min-height: 44px; padding: 6px 16px; font-size: 15px; }
.btn--pill { border-radius: 999px; padding-left: 22px; padding-right: 22px; }
.btn--lg { min-height: 56px; padding: 12px 32px; font-size: 17px; }
.actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; }
.actions--center { justify-content: center; }

/* ---------- ロゴ（運営者が指定したロゴ画像。背景は透明。3.2.2：まわりの丸い輪を消した、横長の形） ---------- */
.logo { display: inline-flex; align-items: center; color: var(--c-text); text-decoration: none; }
.logo__img { display: block; width: auto; height: 64px; max-width: none; }
/* フッターは濃い地なので、ロゴは紙色の角丸の台の上に置く（3.2.2：ロゴが横長になったので、丸い台をやめた） */
.logo--footer { justify-content: center; padding: 12px 20px; border-radius: 18px; background: var(--c-paper); box-shadow: 0 0 0 3px rgba(242, 230, 204, .35); }
.logo--footer .logo__img { height: 62px; }

/* ---------- ヘッダー ----------
 * 3.2：スクロールしても、最上部に固定して表示する（スマホ・PCとも）。管理バーが出ているときは、その下に固定する。 */
html { scroll-padding-top: 128px; }
.admin-bar .site-header { top: 32px; }
@media (max-width: 782px) { html { scroll-padding-top: 84px; } .admin-bar .site-header { top: 46px; } }
@media (max-width: 600px) { .admin-bar .site-header { top: 0; } }
.site-header { position: sticky; top: 0; z-index: 50; background: var(--c-paper) var(--tex-paper) repeat left top / 240px 240px; border-bottom: 1px solid var(--c-line); box-shadow: 0 2px 0 rgba(120, 90, 50, .06); }
.site-header__inner { display: flex; align-items: center; gap: 24px; min-height: 92px; }
.site-header__brand { text-decoration: none; flex: none; padding: 8px 0; }
.site-nav { display: flex; align-items: center; flex: 1; gap: 24px; margin-left: 0; }
.site-nav__list { list-style: none; margin: 0 auto; padding: 0; display: flex; gap: 2px; }
.site-nav__list a { display: block; padding: 8px 14px; color: var(--c-text); text-decoration: none; font-size: 15px; font-weight: 500; line-height: 1.5; border-radius: var(--r-btn); white-space: nowrap; }
.site-nav__list a:hover { background: var(--c-ground); color: var(--c-accent-strong); }
.site-nav__list .current-menu-item > a, .site-nav__list a[aria-current="page"] { color: var(--c-accent-strong); font-weight: 700; box-shadow: inset 0 -2px 0 var(--c-accent); border-radius: 0; }
.site-nav__actions { display: flex; gap: 16px; align-items: center; }
.site-nav__actions .btn { white-space: nowrap; }
.site-nav__login { color: var(--c-text); font-size: 15px; font-weight: 500; text-decoration: none; padding: 10px 4px; white-space: nowrap; }
.site-nav__login:hover { color: var(--c-accent-strong); text-decoration: underline; text-underline-offset: 3px; }
.nav-toggle { display: none; }

@media (max-width: 1199px) {
	.site-header__inner { flex-wrap: wrap; gap: 0 16px; }
	.site-nav__list { margin: 0; }
	.site-nav { flex: none; }
	.nav-toggle {
		display: inline-flex; align-items: center; gap: 8px; margin-left: auto;
		min-height: 44px; padding: 8px 12px; border: 1px solid var(--c-line-strong); border-radius: var(--r-btn);
		background: var(--c-card); color: var(--c-text); font-size: 15px; font-weight: 700; cursor: pointer;
	}
	.nav-toggle__icon { display: inline-grid; gap: 4px; width: 18px; }
	.nav-toggle__icon span { display: block; height: 2px; background: currentColor; border-radius: 1px; transition: transform .15s ease, opacity .15s ease; }
	.nav-open .nav-toggle__icon span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
	.nav-open .nav-toggle__icon span:nth-child(2) { opacity: 0; }
	.nav-open .nav-toggle__icon span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }
	.site-nav { display: none; width: 100%; flex-direction: column; align-items: stretch; gap: 16px; margin: 0; padding: 8px 0 24px; border-top: 1px solid var(--c-line); }
	.nav-open .site-nav { display: flex; max-height: calc(100vh - 100px); max-height: calc(100dvh - 100px); overflow-y: auto; overscroll-behavior: contain; }
	.site-nav__list { flex-direction: column; gap: 0; }
	.site-nav__list a { padding: 14px 4px; min-height: 48px; font-size: 16px; border-bottom: 1px solid var(--c-line); border-radius: 0; }
	.site-nav__list .current-menu-item > a, .site-nav__list a[aria-current="page"] { box-shadow: inset 4px 0 0 var(--c-accent); padding-left: 16px; }
	.site-nav__actions { flex-direction: column-reverse; align-items: stretch; gap: 8px; }
	.site-nav__actions .btn { min-height: 48px; font-size: 16px; }
	.site-nav__login { display: block; text-align: center; min-height: 48px; padding: 12px 4px; border: 1px solid var(--c-line-strong); border-radius: 999px; background: var(--c-card); font-size: 16px; }
}

/* ---------- ヘッダーの飾り（3.3.0・試し） ----------
 * 「BUTSU✖︎2」の文字を左に、稲穂と太陽と雲を、横に長い1枚の絵にして、その右に置く（ロゴの絵を、大きく1つにした形）。
 *   スマホ・タブレット：1行（文字｜絵｜メニュー）。絵は、スマホ用（header-scene-compact.svg）とタブレット用（header-scene-wide.svg）。
 *   PC（1200px以上）：上の段に（文字｜横に長い絵｜ログイン・申し込み）、下の段にメニューの文字。
 * 元に戻すときは、functions.php の butsu2_header_field フィルターで false を返す（1行）。 */
.site-header__scene { display: none; }
.has-header-field .site-header__inner { position: relative; min-height: 0; gap: 0 8px; padding-top: 6px; padding-bottom: 6px; }
.has-header-field .site-header__brand { padding: 0; }
.has-header-field .logo--word { display: block; }
.has-header-field .logo--word .logo__img { display: block; width: min(36vw, 140px); height: auto; aspect-ratio: 614 / 177; }
.has-header-field .site-header__scene { display: block; flex: 1 1 0; min-width: 0; height: 60px; background: url("../img/header-scene-compact.svg?v=3.4.1") center / contain no-repeat; pointer-events: none; }
@media (max-width: 1199px) {
	.has-header-field .nav-toggle { flex-direction: column; justify-content: center; gap: 3px; min-width: 56px; min-height: 52px; margin-left: 0; padding: 4px 6px; border: 0; border-radius: 10px; background: transparent; font-size: 11px; letter-spacing: .06em; line-height: 1.2; }
	.has-header-field .nav-toggle__icon { width: 26px; gap: 5px; }
	.has-header-field .nav-toggle__icon span { height: 3px; border-radius: 2px; }
	.has-header-field.nav-open .nav-toggle__icon span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
	.has-header-field.nav-open .nav-toggle__icon span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }
}
@media (min-width: 783px) {
	.has-header-field .logo--word .logo__img { width: 200px; }
	.has-header-field .site-header__scene { height: 64px; background-image: url("../img/header-scene-wide.svg?v=3.4.1"); }
}
@media (min-width: 1200px) {
	.has-header-field .site-header__inner { flex-wrap: wrap; column-gap: 20px; padding-top: 8px; padding-bottom: 0; }
	.has-header-field .logo--word .logo__img { width: 210px; }
	.has-header-field .site-header__scene { height: 60px; margin-right: 276px; }
	.has-header-field .site-nav { flex: 0 0 100%; order: 3; justify-content: center; margin-top: 4px; border-top: 1px solid var(--c-line); }
	.has-header-field .site-nav__list { margin: 0 auto; }
	.has-header-field .site-nav__list a { padding-top: 6px; padding-bottom: 6px; }
	.has-header-field .site-nav__actions { position: absolute; top: 8px; right: 0; height: 60px; }
}

/* ---------- ファーストビュー（全幅の風景。下端は紙を破いた縁） ---------- */
.hero {
	position: relative;
	padding: 56px 0 112px;
	background-color: var(--b2-hero-sky);
	background-image: linear-gradient(90deg, rgba(245, 237, 220, .96) 0%, rgba(245, 237, 220, .9) 30%, rgba(245, 237, 220, .45) 46%, rgba(245, 237, 220, 0) 60%), var(--b2-hero-bg);
	background-repeat: no-repeat;
	background-size: 100% 100%, cover;
	background-position: left top, center bottom;
	border-bottom: 0;
}
.hero::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 36px; background: url("../img/edge-ground.svg") repeat-x center bottom / 1600px 36px; pointer-events: none; }
/* PCでは、見出し側と絵を左右に並べる（スマホは下の @media で、縦に1画面にまとめる） */
.hero__track { display: contents; }
.hero__lead-short { display: none; }
.swipe-hint { display: none; }
.hero__inner { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 24px; align-items: center; min-height: 440px; }
.hero__title { font-family: "B2 Headline", var(--font); font-weight: 400; font-synthesis: none; font-size: clamp(48px, 4.8vw, 66px); line-height: 1.24; letter-spacing: -.01em; text-wrap: wrap; margin: 0 0 24px; padding-bottom: 4px; -webkit-text-stroke: 5px var(--c-paper); stroke-linejoin: round; paint-order: stroke fill; text-shadow: 0 4px 0 rgba(120, 90, 50, .22); }
.hero__title .hero__accent { color: var(--c-accent-strong); }
.phrase { display: inline-block; }
.hero__lead { font-size: 17px; line-height: 1.95; margin: 0 0 28px; max-width: 32em; }
.hero__actions { display: flex; flex-wrap: wrap; gap: 12px; }
.hero__sub { margin: 20px 0 0; font-size: 15px; color: var(--c-text); }
.hero__sub-sep { margin: 0 8px; color: var(--c-line-strong); }
.hero__sub a { white-space: nowrap; }
.hero__login { white-space: nowrap; }

/* ヒーローのイラスト（背景は透過。風景の上にハニワと村人を重ねる） */
.hero__art { position: relative; margin: 0; align-self: end; }
.hero__scene { position: relative; max-width: 720px; margin-left: auto; }
.hero__scene img { width: 100%; height: auto; display: block; }
/* 3.3.0：絵の中の勾玉の下に『できること』、パソコンの下に『ほしいもの』の札。位置は絵（720×420）に対する割合（勾玉の中心 41.25%・下端 63.1%、パソコンの中心 59.0%・下端 56.7%）。
   2つの札は、真ん中をよけるように外側へずらし、小さなしっぽで、それぞれの物を指す */
.hero__tag { position: absolute; z-index: 1; margin: 0; padding: 6px 16px; background: var(--c-card); border: 2px solid var(--c-gold); border-radius: 999px; box-shadow: 0 0 0 3px var(--c-card), 0 4px 10px rgba(70, 50, 30, .14); font-size: 15px; font-weight: 700; line-height: 1.4; letter-spacing: .06em; white-space: nowrap; }
.hero__tag::before, .hero__tag::after { content: ""; position: absolute; width: 0; height: 0; border-style: solid; border-top: 0; border-left-color: transparent; border-right-color: transparent; }
.hero__tag::before { top: -13px; border-width: 0 8px 11px; border-bottom-color: var(--c-gold); }
.hero__tag::after { top: -8px; border-width: 0 6px 9px; border-bottom-color: var(--c-card); margin: 0 2px; }
.hero__tag--can { left: 41.25%; top: calc(63.1% + 12px); transform: translateX(calc(-100% + 26px)); }
.hero__tag--can::before, .hero__tag--can::after { right: 16px; }
.hero__tag--want { left: 59%; top: calc(56.7% + 12px); transform: translateX(-26px); }
.hero__tag--want::before, .hero__tag--want::after { left: 16px; }

/* 分野アイコンの列（ヒーローの直下）。現段階では見た目だけ（クリックしても動かない）。リンクにするときは .cat--link の動きが効く */
.cats { position: relative; padding: 44px 0 24px; }
.cats__title { margin: 0 0 20px; text-align: center; font-size: 15px; font-weight: 700; letter-spacing: .1em; color: var(--c-muted); }
.cats__list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 8px; }
.cats__item { margin: 0; }
.cat { display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 4px; color: var(--c-text); text-decoration: none; cursor: default; }
.cat--link { min-height: 44px; cursor: pointer; }
.cat__badge { display: grid; place-items: center; width: 92px; height: 92px; border-radius: 50%; background: var(--c-card); border: 2px solid var(--c-line); box-shadow: 0 3px 0 rgba(120, 90, 50, .1), 0 8px 16px rgba(70, 50, 30, .08); transition: transform .15s ease, border-color .15s ease; }
.cat__svg { display: block; width: 52px; height: 52px; }
.cat__name { max-width: 11em; word-break: keep-all; overflow-wrap: normal; font-size: 15px; font-weight: 700; line-height: 1.5; text-align: center; letter-spacing: .03em; }
.cat--link:hover .cat__badge, .cat--link:focus-visible .cat__badge { transform: translateY(-3px); border-color: var(--c-accent); }
.cat--link:hover .cat__name { color: var(--c-accent-strong); text-decoration: underline; text-underline-offset: 3px; }

/* 交換のイメージ（6組）。カードの高さをそろえ、画像と文字の上端をそろえる */
.xgrid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px 20px; align-items: stretch; }
.xitem { margin: 0; display: flex; flex-direction: column; background: var(--c-card); border: 1px solid var(--c-line); border-radius: var(--r-card); overflow: hidden; box-shadow: var(--shadow-card); }
.xitem__img { width: 100%; aspect-ratio: 3 / 2; height: auto; object-fit: cover; display: block; background: var(--c-paper); }
.xitem__body { flex: 1; padding: 16px 20px 20px; }
.xitem__kind { margin: 0; font-size: 13px; font-weight: 700; color: var(--c-accent-strong); letter-spacing: .04em; }
.xitem__title { margin: 2px 0 6px; font-size: 19px; line-height: 1.5; font-weight: 700; }
.xitem__text { margin: 0; font-size: 15px; line-height: 1.7; color: var(--c-muted); }
.xgrid + .note { margin-top: 20px; font-size: 13px; line-height: 1.7; }

/* メリット（番号バッジ・見出し・場面・本文・土器と稲穂の飾り）。カードの高さをそろえる */
.merits { list-style: none; margin: 16px 0 24px; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px 24px; align-items: stretch; }
.merit { display: flex; flex-direction: column; align-items: stretch; background: var(--c-card); border: 1px solid var(--c-line); border-radius: var(--r-card); padding: 40px 24px 20px; position: relative; box-shadow: var(--shadow-card); }
.merit__num { position: absolute; top: -22px; left: 50%; transform: translateX(-50%); display: grid; place-items: center; width: 52px; height: 52px; margin: 0; border-radius: 50%; background: var(--c-green-deep); color: #fff; font-weight: 700; font-size: 19px; letter-spacing: .04em; box-shadow: 0 0 0 4px var(--c-band), 0 4px 8px rgba(70, 50, 30, .2); }
.merit__title { font-size: 20px; line-height: 1.55; margin: 0 0 16px; text-align: center; display: flex; align-items: center; justify-content: center; }
/* 3.2.3：3枚のカードで、タイトルの行数（1〜3行）がちがっても、絵の位置がそろうように、タイトルの高さをそろえる（文字は上下中央）。PCは2行ぶん、横にスワイプするスマホは3行ぶん */
.merit__fig { position: relative; margin: 0 0 16px; border-radius: 12px; overflow: hidden; border: 1px solid var(--c-line); container-type: inline-size; background: var(--c-paper); }
.merit__fig img { display: block; width: 100%; height: auto; aspect-ratio: 3 / 2; }
.merit__say { position: absolute; left: 60%; top: 8.75%; width: 29.3%; height: 15.5%; display: grid; place-items: center; font-size: 15px; font-size: 4.6cqw; font-weight: 700; line-height: 1.2; letter-spacing: .02em; color: var(--c-text); white-space: nowrap; }
.merit__tag { position: absolute; top: 3.5%; padding: 2px 10px; border-radius: 999px; background: var(--c-card); border: 1.5px solid var(--c-line-strong); font-size: 12px; font-size: 4cqw; font-weight: 700; line-height: 1.5; white-space: nowrap; }
.merit__tag--l { left: 3%; }
.merit__tag--r { left: 55%; }
.merit__text, .step__text, .xitem__text { word-break: auto-phrase; }
/* 3.2.3：言葉の途中で折り返さない。本文は、出力のときに、文節の切れ目に <wbr> を入れて <b2-k> で包んである（inc/phrase-breaks.php）。
   <b2-k> の中は、<wbr> の場所だけで改行する（1つの文節が行より長いときだけ、やむをえず途中で折り返す） */
b2-k { word-break: keep-all; overflow-wrap: break-word; }
/* 一言コメントの吹き出し（一覧のカード）は、『全角13文字×2行で、26文字ちょうどでも切れない』を優先して、文節の処理はかけない（core.css の指定のまま） */
.b2-sv__say-text b2-k { word-break: break-all; overflow-wrap: anywhere; }
.merit__text { margin: 0 0 16px; font-size: 15px; line-height: 1.85; flex: 1; }
.merit__deco { display: block; width: 112px; height: auto; margin: 0 auto; opacity: .95; }

/* 使い方（画像つき5ステップ）。画像の大きさをそろえ、文字の上端をそろえる */
.flow { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px 20px; align-items: stretch; }
.flow__step { display: flex; flex-direction: column; background: var(--c-card); border: 1px solid var(--c-line); border-radius: var(--r-card); overflow: hidden; box-shadow: var(--shadow-card); }
.flow__img { width: 100%; aspect-ratio: 3 / 2; height: auto; object-fit: cover; display: block; background: var(--c-paper); }
.flow__body { flex: 1; padding: 16px 20px 24px; }
.flow__body .step__num { margin-bottom: 8px; }

/* ---------- セクション（境目は、紙を破いた縁） ---------- */
.section { position: relative; padding: var(--section-y) 0; }
.section--paper, .section--soft { background: var(--c-band) var(--tex-paper) repeat left top / 240px 240px; }
.section--paper::before, .section--torn::before, .section--closing::before { content: ""; position: absolute; left: 0; right: 0; bottom: 100%; height: 36px; margin-bottom: -1px; pointer-events: none; background-repeat: repeat-x; background-position: center bottom; background-size: 1600px 36px; }
.section--paper::before { background-image: url("../img/edge-band.svg"); }
.section--torn::before, .section--closing::before { background-image: url("../img/edge-ground.svg"); }
.section__title { font-size: 34px; line-height: 1.4; letter-spacing: .05em; font-weight: 800; margin: 0 0 20px; text-align: center; }
.section__title::after { content: ""; display: block; width: 112px; height: 7px; margin: 16px auto 0; border-top: 2px solid var(--c-gold); border-bottom: 2px solid var(--c-gold); }
.section__lead { font-size: 17px; max-width: 46em; margin: 0 auto 40px; text-align: center; }
@media (min-width: 783px) { .hero__lead, .section__lead { word-break: auto-phrase; } }
/* 見出しの行数がちがっても、本文の開始位置をそろえる（2行ぶんの高さを確保） */
@media (min-width: 1025px) { .merit__title { min-height: 3.1em; } }
@media (min-width: 783px) { .step__title { min-height: 3em; } }
.section__text { max-width: 46em; margin: 24px auto 0; }
.section__more { margin: 32px 0 0; text-align: center; }

/* 使い方 */
.step__num { display: inline-grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: var(--c-green-deep); color: #fff; font-weight: 700; font-size: 17px; margin-bottom: 12px; }
.step__title { font-size: 19px; line-height: 1.5; margin: 0 0 8px; }
.step__text { font-size: 15px; line-height: 1.8; margin: 0; }

/* 料金 */
.price { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 32px; align-items: stretch; }
.price__box { text-align: center; border: 1px solid var(--c-line); outline: 2px solid var(--c-gold); outline-offset: -8px; border-radius: 14px; padding: 36px 28px; display: flex; flex-direction: column; justify-content: center; background: var(--c-card); box-shadow: var(--shadow-card); }
.price__label { font-weight: 700; color: var(--c-accent-strong); margin: 0 0 4px; }
.price__amount { margin: 0; line-height: 1.2; }
.price__num { font-size: 56px; font-weight: 700; letter-spacing: .01em; margin: 0 4px; }
.price__unit { font-size: 18px; font-weight: 700; }
.price__free { margin: 16px 0 0; font-size: 15px; }
.price__list { margin: 0; border-top: 1px solid var(--c-line); align-self: center; }
.price__list > div { display: grid; grid-template-columns: 160px minmax(0, 1fr); gap: 16px; padding: 16px 0; border-bottom: 1px solid var(--c-line); }
.price__list dt { font-weight: 700; }
.price__list dd { margin: 0; }

/* コラム */
.column-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.column-list--rows { grid-template-columns: 1fr; gap: 0; border-top: 1px solid var(--c-line); }
.column-card { display: flex; flex-direction: column; gap: 12px; }
.column-list--rows .column-card { flex-direction: row; gap: 24px; padding: 24px 0; border-bottom: 1px solid var(--c-line); }
.column-card__thumb { display: block; border-radius: var(--r-card); overflow: hidden; aspect-ratio: 16 / 9; background: var(--c-paper); flex: none; }
.column-list--rows .column-card__thumb { width: 200px; }
.column-card__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.column-card__title { font-size: 19px; line-height: 1.55; margin: 0 0 8px; }
.column-card__title a { color: var(--c-text); text-decoration: none; }
.column-card__title a:hover { color: var(--c-accent-strong); text-decoration: underline; }
.column-card__excerpt { font-size: 15px; line-height: 1.8; color: var(--c-muted); margin: 0; }
.article-meta { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: center; margin: 0 0 8px; font-size: 14px; color: var(--c-muted); line-height: 1.5; }
.article-meta__cat { display: inline-block; padding: 2px 8px; border: 1px solid var(--c-line-strong); border-radius: 4px; color: var(--c-text); font-size: 13px; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 24px; }
.chip { display: inline-flex; align-items: center; min-height: 44px; padding: 6px 14px; border: 1px solid var(--c-line-strong); border-radius: 999px; color: var(--c-text); text-decoration: none; font-size: 15px; background: var(--c-card); }
.chip:hover { background: var(--c-accent-soft); }
.chip.is-current { background: var(--c-accent); border-color: var(--c-accent); color: #fff; font-weight: 700; }

/* よくある質問 */
.faq { margin: 0; border-top: 1px solid var(--c-line); }
.faq-acc { border-bottom: 1px solid var(--c-line); }
.faq-acc__q { display: block; position: relative; list-style: none; cursor: pointer; min-height: 44px; padding: 18px 52px 18px 0; }
.faq-acc__q::-webkit-details-marker { display: none; }
.faq-acc__q::marker { content: ""; }
.faq-acc__q::after { content: "+"; position: absolute; right: 4px; top: 50%; transform: translateY(-50%); display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; border: 1px solid var(--c-line-strong); background: var(--c-card); color: var(--c-accent-strong); font-size: 22px; line-height: 1; font-weight: 700; }
.faq-acc[open] > .faq-acc__q::after { content: "\2212"; background: var(--c-accent); border-color: var(--c-accent); color: #fff; }
.faq-acc__q:focus-visible { outline: 3px solid var(--c-accent); outline-offset: 2px; }
.faq-acc__q > h3, .faq-acc__q > .faq-acc__t { display: block; margin: 0; padding-left: 40px; position: relative; font-size: 19px; font-weight: 700; line-height: 1.6; }
.faq-acc__q > h3::before, .faq-acc__q > .faq-acc__t::before { content: "Q"; position: absolute; left: 0; top: 1px; display: inline-grid; place-items: center; width: 28px; height: 28px; border-radius: 4px; background: var(--c-accent); color: #fff; font-size: 15px; font-weight: 700; }
.faq-acc__a { margin: 0 0 20px; padding: 20px 22px; border-radius: var(--r-card); border-left: 4px solid var(--c-accent); background: var(--c-card); font-size: 18px; line-height: 1.95; }
.faq-acc__a > :first-child { margin-top: 0; }
.faq-acc__a > :last-child { margin-bottom: 0; }
.faq-acc__a :is(p, ul, ol) { margin: 0 0 12px; }
.faq-acc__a :is(ul, ol) { padding-left: 1.4em; }
.faq-acc__a li { margin: 8px 0; }
.entry > h2 + .faq-acc { border-top: 1px solid var(--c-line); }

/* 締め（川と集落の帯） */
.section--closing { position: relative; padding: 72px 0 300px; background-color: var(--c-ground); background-image: url("../img/band-village.svg"), var(--tex-paper); background-repeat: no-repeat, repeat; background-position: center bottom, left top; background-size: max(100%, 1280px) auto, 240px 240px; border-top: 0; }
.closing { text-align: center; }
.closing__title { font-size: 26px; line-height: 1.55; margin: 0; }
.closing .actions { margin-top: 28px; }

/* ---------- 下層ページ ---------- */
.page-wrap { padding: 56px 0 88px; }
.page-head { margin: 0 0 32px; padding-bottom: 20px; border-bottom: 4px double var(--c-gold); }
.page-head__title { font-size: 36px; line-height: 1.4; letter-spacing: .05em; font-weight: 800; }
.page-head__lead { margin: 12px 0 0; color: var(--c-muted); }
.page-head--article .page-head__title { font-size: 32px; }
.breadcrumb { font-size: 14px; margin: 0 0 16px; }
.article-thumb { margin: 0 0 32px; border-radius: var(--r-card); overflow: hidden; }
.article-thumb img { display: block; width: 100%; height: auto; }
.article-back { margin: 48px 0 0; padding-top: 24px; border-top: 1px solid var(--c-line); }

/* 本文（ブロックエディターの内容）。プラグインの画面（.b2）には適用しない */
.entry > *:first-child { margin-top: 0; }
.entry > h2 { font-size: 26px; line-height: 1.45; margin: 48px 0 16px; padding-bottom: 8px; border-bottom: 2px solid var(--c-line); }
.entry > h3 { font-size: 20px; line-height: 1.55; margin: 32px 0 12px; }
.entry > p, .entry > ul, .entry > ol { margin: 0 0 20px; }
.entry > ul, .entry > ol { padding-left: 1.4em; }
.entry > ul li, .entry > ol li { margin: 6px 0; }
.entry > :is(p, ul, ol, table, blockquote, figure, h2, h3) a, .entry > .wp-block-table a { color: var(--c-accent-strong); text-decoration: underline; text-underline-offset: 3px; }
.entry > figure img, .entry > p img { border-radius: var(--r-card); }
.entry > figure { margin: 32px 0; }
.entry figcaption { font-size: 14px; color: var(--c-muted); margin-top: 8px; }
.entry > blockquote { margin: 24px 0; padding: 16px 24px; border-left: 4px solid var(--c-accent); background: var(--c-paper); }
.entry > table, .entry > .wp-block-table table { width: 100%; border-collapse: collapse; margin: 24px 0; font-size: 16px; }
.entry > table :is(th, td), .entry > .wp-block-table :is(th, td) { border: 1px solid var(--c-line); padding: 10px 12px; text-align: left; vertical-align: top; background: var(--c-card); }
.entry > table th, .entry > .wp-block-table th { background: var(--c-paper); }
.entry > .b2-faq-q { font-size: 19px; margin: 32px 0 8px; padding-left: 40px; position: relative; }
.entry > .b2-faq-q::before { content: "Q"; position: absolute; left: 0; top: 1px; display: inline-grid; place-items: center; width: 28px; height: 28px; border-radius: 4px; background: var(--c-accent); color: #fff; font-size: 15px; }
.entry > .b2-faq-a { padding-left: 40px; padding-bottom: 24px; border-bottom: 1px solid var(--c-line); }
.entry--app { font-size: 16px; }

/* 検索フォーム */
.search-form { display: flex; gap: 8px; margin: 24px 0; }
.search-form .search-field { flex: 1; min-width: 0; min-height: 48px; padding: 8px 12px; border: 1px solid var(--c-line-strong); border-radius: var(--r-btn); font-size: 16px; font-family: inherit; background: var(--c-card); }
.search-form .search-submit { min-height: 48px; padding: 8px 20px; border-radius: var(--r-btn); border: 1px solid var(--c-accent); background: var(--c-card); color: var(--c-accent-strong); font-weight: 700; cursor: pointer; }

/* ページ送り */
.pagination { margin: 40px 0 0; }
.pagination .nav-links { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
.pagination .page-numbers { display: inline-grid; place-items: center; min-width: 44px; min-height: 44px; padding: 0 12px; border: 1px solid var(--c-line-strong); border-radius: var(--r-btn); text-decoration: none; color: var(--c-text); background: var(--c-card); }
.pagination .page-numbers.current { background: var(--c-accent); border-color: var(--c-accent); color: #fff; font-weight: 700; }

/* ---------- フッター（濃い紙色の地に縁飾り） ---------- */
.site-footer { position: relative; margin-top: 0; padding: 64px 0 28px; color: var(--c-dark-text); background: var(--c-dark) var(--tex-paper) repeat left top / 240px 240px; }
.site-footer::before { content: ""; position: absolute; left: 0; right: 0; bottom: 100%; height: 36px; margin-bottom: -1px; pointer-events: none; background: url("../img/edge-dark.svg") repeat-x center bottom / 1600px 36px; }
.site-footer__inner { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); gap: 32px; }
.site-footer__logo { text-decoration: none; }
.site-footer__desc { margin: 12px 0 0; font-size: 14px; line-height: 1.7; color: var(--c-dark-muted); max-width: 26em; }
.site-footer__list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px 24px; }
.site-footer__list a { display: inline-block; padding: 8px 0; color: var(--c-dark-text); font-size: 14px; line-height: 1.6; text-decoration: none; }
.site-footer__list a:hover { color: #fff; text-decoration: underline; text-underline-offset: 3px; }
.site-footer__orn { display: block; width: 112px; height: auto; margin: 36px auto 0; }
.site-footer__copy { margin: 20px 0 0; padding-top: 16px; border-top: 1px solid rgba(242, 230, 204, .2); font-size: 13px; color: var(--c-dark-muted); text-align: center; }

/* ---------- タブレット・スマホ ---------- */
@media (max-width: 1079px) {
	.hero { padding-bottom: 96px; }
	.hero__inner { grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: 8px; min-height: 0; }
	.hero__title { font-size: 40px; }
	.hero__lead { font-size: 16px; }
	.hero__tag { font-size: 13px; padding: 5px 12px; }
	.cats__list { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px 8px; }
	.xgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.merits { grid-template-columns: 1fr; max-width: 560px; margin-left: auto; margin-right: auto; gap: 48px; }
	.merit__title { min-height: 0; }
	.flow { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 782px) {
	:root { --gutter: 20px; --section-y: 56px; }
	body { font-size: 16px; line-height: 1.8; }
	.site-header__inner { min-height: 68px; }
	.logo__img { height: 48px; }
	.site-header__brand { padding: 6px 0; }
	.logo--footer { padding: 10px 16px; border-radius: 16px; }
	.logo--footer .logo__img { height: 54px; }
	/* ヒーロー：風景は低くトリミング。見出しとリードは、囲みなしで、風景の空の上に置く（紙色のにじみで読みやすくする） */
	/* 3.2.2：スマホのヒーローは、切り替えなしで、見出し・説明と、絵を1画面にまとめる。囲み（カード）と、申し込みボタン・その下の文言は出さない（申し込みは、メニューと、下の料金・締めのセクション） */
	.hero { padding: 16px 0 44px; background-image: var(--b2-hero-bg); background-size: cover; background-position: 72% 100%; background-repeat: no-repeat; }
	.hero__inner { display: block; min-height: 0; }
	.hero__lead-full { display: none; }
	.hero__lead-short { display: inline; }
	.hero__track { display: block; }
	.hero__text { background: none; border: 0; border-radius: 0; box-shadow: none; padding: 6px 2px 0; text-shadow: 0 0 6px rgba(245, 237, 220, .95), 0 0 14px rgba(245, 237, 220, .85), 0 0 26px rgba(245, 237, 220, .7); }
	/* 3.2.3：見出しは、スマホでも1行。太い書体（Dela Gothic One）で、紙色のふちどりをつけて、空の上で目立たせる。
	   文字の大きさは、画面の幅にあわせて決める（Dela Gothic One の「スキルも、物も、物々交換。」は約11.2文字ぶんの幅） */
	.hero__title { font-size: min(calc((100vw - 2 * var(--gutter)) / 11.3), 46px); line-height: 1.25; letter-spacing: -.02em; white-space: nowrap; margin-bottom: 14px; padding: 0 0 4px 3px; -webkit-text-stroke: 4px var(--c-paper); text-shadow: 0 3px 0 rgba(120, 90, 50, .22); }
	/* リードは、文節（.phrase）の切れ目でだけ折り返す。「マッチ／ング」のように、言葉の途中で切れない */
	.hero__lead { font-size: clamp(14px, 3.85vw, 16px); line-height: 1.75; margin-bottom: 0; }
	.hero__lead-short { text-wrap: pretty; }
	.hero__actions, .hero__sub { display: none; }
	.hero__art { position: relative; margin: 10px 0 0; overflow: hidden; }
	.hero__scene { width: 112%; max-width: none; margin: 18px -6% 0; }
	.hero__tag { font-size: 12px; padding: 4px 10px; box-shadow: 0 0 0 2px var(--c-card), 0 3px 8px rgba(70, 50, 30, .14); }
	.hero__tag::before { top: -11px; border-width: 0 7px 9px; }
	.hero__tag::after { top: -7px; border-width: 0 5px 7px; margin: 0 2px; }
	.hero__tag--can { transform: translateX(calc(-100% + 24px)); top: calc(63.1% + 10px); }
	.hero__tag--can::before, .hero__tag--can::after { right: 15px; }
	.hero__tag--want { transform: translateX(-24px); top: calc(56.7% + 10px); }
	.hero__tag--want::before, .hero__tag--want::after { left: 15px; }
	/* 3.2.3：分野アイコンの列は、スマホでは出さない（3.3.0：初期は、PC・タブレットでも出さない。フィルターで戻すと、PC・タブレットだけに出る） */
	.cats { display: none; }
	.section__lead { font-size: 16px; margin-bottom: 24px; }
	/* 3.2：スマホでは、長くなる所を、横にスワイプする形にまとめる（交換のイメージ・メリット）。使い方は、絵を省いて短くする */
	.swipe-hint { display: block; margin: 0 0 6px; font-size: 13px; line-height: 1.6; color: var(--c-muted); text-align: right; }
	.xgrid, .merits { display: flex; gap: 12px; max-width: none; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scrollbar-width: none; margin-left: calc(var(--gutter) * -1); margin-right: calc(var(--gutter) * -1); padding-left: var(--gutter); padding-right: var(--gutter); scroll-padding-left: var(--gutter); }
	.xgrid::-webkit-scrollbar, .merits::-webkit-scrollbar { display: none; }
	.xgrid { padding-top: 4px; padding-bottom: 14px; }
	.xgrid > .xitem, .merits > .merit { flex: 0 0 82%; min-width: 0; scroll-snap-align: start; }
	.merits { margin-top: 0; margin-bottom: 8px; padding-top: 30px; padding-bottom: 14px; }
	.merit__deco { display: none; }
	.merit__title { min-height: 4.65em; }
	.flow { grid-template-columns: 1fr; gap: 12px; }
	.flow__img { display: none; }
	.flow { gap: 10px; }
	.flow__body { display: grid; grid-template-columns: 36px minmax(0, 1fr); column-gap: 14px; align-items: start; padding: 14px 16px 16px; }
	.flow__body .step__num { grid-row: 1 / span 2; margin: 2px 0 0; }
	.flow__body .step__title { margin: 0 0 4px; }
	.flow__body .step__text { font-size: 15px; line-height: 1.75; }
	.faq__item--dup { display: none; }
	.merit { padding: 40px 16px 20px; }
	.step__title { font-size: 18px; }
	.price { grid-template-columns: 1fr; gap: 24px; }
	.price__num { font-size: 44px; }
	.price__list > div { grid-template-columns: 1fr; gap: 2px; }
	.actions .btn { width: 100%; }
	.column-list { grid-template-columns: 1fr; gap: 0; border-top: 1px solid var(--c-line); }
	.column-list .column-card, .column-list--rows .column-card { flex-direction: column; gap: 12px; padding: 20px 0; border-bottom: 1px solid var(--c-line); }
	.column-list--rows .column-card__thumb { width: 100%; }
	.closing__title { font-size: 21px; }
	.section--closing { padding: 56px 0 200px; }
	.section__title { font-size: 26px; }
	.page-wrap { padding: 32px 0 64px; }
	.page-head { margin-bottom: 24px; padding-bottom: 16px; }
	.page-head__title, .page-head--article .page-head__title { font-size: 26px; }
	.entry > h2 { font-size: 22px; margin-top: 40px; }
	.entry > h3 { font-size: 18px; }
	.entry > .b2-faq-q { font-size: 17px; }
	.faq-acc__q > h3, .faq-acc__q > .faq-acc__t { font-size: 17px; }
	.faq-acc__a { padding: 16px 16px; font-size: 17px; line-height: 1.9; }
	.entry > table, .entry > .wp-block-table table { display: block; overflow-x: auto; }
	.site-footer__inner { grid-template-columns: 1fr; }
	.site-footer__list a { min-height: 44px; display: inline-flex; align-items: center; }
	.search-form { flex-direction: column; }
	.search-form .search-submit { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
	.cat--link:hover .cat__badge, .cat--link:focus-visible .cat__badge { transform: none; }
}