/*
Theme Name: avain
Theme URI: https://avain.ainomi.com/
Author: 社会福祉法人あいの実
Author URI: https://ainomi.com/
Description: 仙台あばいんプロジェクト専用のブロックテーマ。配色・字送りは theme.json のトークンが正本。本ファイルには theme.json で表現できないコンポーネントCSSだけを置く。
Version: 1.3.2
Requires at least: 6.6
Tested up to: 7.1
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: avain
Tags: full-site-editing, block-patterns, one-column
*/

/* ------------------------------------------------------------------
   ⚠️ WordPress が body_class() で配る汎用クラス（page / post / home /
   single / blog など）を自分のクラス名に使わない。本テーマの接頭辞は av-。
   XServer は静的ファイルを7日キャッシュする（Cache-Control: max-age=604800）
   ため、本ファイルを直したら style.css のヘッダ Version: を必ず上げる。
   theme.json 由来のCSSは <head> へインライン出力されるのでこの罠を踏まない。

   🔴 1.2.0（2026-10-01）＝**旧 Wix サイトへの踏襲**。
   「デザインは Wix を踏襲する」（決定7）に照らして、サイズ・色・配置を
   `website/sources/avain-wix-original/home.html` の実測値へ戻した。
   マークアップ（見出しの階層）の是正は保つ。階層とサイズは別物として扱う。
   実測の出所は各ブロックのコメントに書く。推測で置いた値は1つも無い。

   ⚠️ **プリセットのCSS変数名は `_wp_to_kebab_case(slug)`** である。
      slug `h22` → `var(--wp--preset--font-size--h-22)` / `.has-h-22-font-size`。
      1.1.x は `--h5` `--h6`（ハイフン無し）と書いていたため**未定義の変数**を
      参照し、`.av-stats__num` と `.av-card__body` の見出しサイズが
      一度も効いていなかった。
------------------------------------------------------------------- */

:root {
	/* 色見本には出さないランプ（編集画面の選択肢を11色に保つため） */
	--av-ramp-gray-1: #f7f7f7;
	--av-ramp-gray-2: #e4e4e6;
	--av-ramp-gray-3: #9293a6;
	--av-ramp-gray-4: #5b5c6b;
	--av-ramp-gray-5: #22232a;
	--av-ramp-yellow-1: #fef6e0;
	--av-ramp-yellow-2: #fcde93;
	--av-ramp-yellow-3: #f8bd26;
	--av-ramp-yellow-4: #d09707;
	/* 旧 --color_34 の実値は rgb(139,101,4)。1.1.x の #8A6404 は写し誤り */
	--av-ramp-yellow-5: #8b6504;
	--av-rule: 1px solid var(--av-ramp-gray-2);
	--av-focus: 3px solid var(--av-ramp-yellow-4);

	/* 🔴 決定23-4（2026-10-02）: 統計の「母数が違う2項目」を示すためだけの1色。
	   ロゴ（avain-logo-838.png）の実測から採った紫で、ロゴが持っている色である。
	   ⚠️ **theme.json のパレットには入れない。**編集画面の色見本は11色のまま
	      （勝手に選べる色を増やさない）。使うのは .av-stats__item--subset だけ。 */
	--av-logo-violet: #9078c0;

	/* 旧の地色3段（home.html の --bg-overlay-color 実測） */
	--av-band-white: #ffffff;              /* rgb(var(--color_11)) */
	--av-band-soft: rgba(247, 247, 247, 0.8); /* rgba(var(--color_12), 0.8) */
	--av-band-gray: #f7f7f7;               /* rgb(var(--color_12)) / --color_38 */

	/* 旧の版面幅（--site-width: 980px） */
	--av-site-width: 980px;

	/* 旧の赤CTA（#comp-lpb90lrt の StylableButton） */
	--av-cta: #ff4040;
	--av-cta-h: 45px;
	--av-cta-w: 193px;
}

html {
	-webkit-text-size-adjust: 100%;
}

body {
	overflow-wrap: break-word;
	word-break: normal;
	line-break: strict;
}

/* 旧の赤CTAは pagePinnedTopRight（ページ基準の絶対配置）に置かれている。
   その基準になる箱をここで作る。 */
.wp-site-blocks {
	position: relative;
}

/* 触れる的を十分に大きく保つ（和文リンクの行内リンクは除く） */
:where(a, button, input, summary):focus-visible {
	outline: var(--av-focus);
	outline-offset: 2px;
}

.av-skip-link:not(:focus) {
	position: absolute !important;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
}

/* ---------------- 字送り（旧 --font_N の line-height をサイズに紐づける） ----

   旧は見出しサイズを**インラインで全部上書き**し、行間だけ下敷きの
   font_N クラスから継いでいた。サイズごとに旧の行間を割り当てて同じ組みにする。
   ⚠️ プリセットのクラス（.has-*-font-size）は WP が !important 付きで
      font-size を出す。ここでは line-height だけを足す。
   出所: home.html の `--font_0`〜`--font_9` と各要素の class="font_N"。
------------------------------------------------------------------- */

.has-stat-font-size {
	line-height: 1.25;
} /* 73px ← font_2 72px/1.25em */

.has-h-56-font-size {
	line-height: 1.2;
} /* 56px ← font_0 88px/1.2em */

.has-h-40-font-size {
	line-height: 1.35;
} /* 40px ← font_4 40px/1.35em */

.has-h-38-font-size {
	line-height: 1.34;
} /* 38px ← font_3 50px/1.34em */

.has-h-28-font-size {
	line-height: 1.375;
} /* 28px ← font_5 28px/1.375em */

.has-h-22-font-size {
	line-height: 1.41;
} /* 22px ← font_6 22px/1.41em */

.has-lg-font-size {
	line-height: 1.67;
} /* 20px ← font_7 20px/1.67em */

.has-md-font-size {
	line-height: 1.8;
} /* 16px ← 旧は inline line-height:1.8em */

.has-sm-font-size {
	line-height: 1.875;
} /* 15px ← font_9 15px/1.875em */

/* ⚠️ 記事・固定ページの題だけは旧「記事ページ」のトークン（40px/**1.4em**）に合わせる。
   上の 40px → 1.35 はトップページの font_4 の値で、記事ページとは別である。 */
.av-entry .wp-block-post-title {
	line-height: 1.4;
}

/* 旧の見出しは中央寄せが既定の節が多い。中央寄せは節ごとに指定するので
   ここでは何もしない（勝手に寄せない）。 */

/* ---------------- ヘッダー ----------------

   旧 #SITE_HEADER の実測: --bg:var(--color_11)（白）／--shd:none／
   --brwt:0px／--brwb:0px。**罫線は無い。**
   1.1.x の `border-bottom: 1px #E4E4E6` は旧に無いので外す。
   サイト名 22px / normal は theme.json の core/site-title で持つ。
------------------------------------------------------------------- */

.av-header {
	background: var(--wp--preset--color--base);
}

.av-header__inner {
	gap: var(--wp--preset--spacing--30);
	min-height: 3rem;
}

/* 旧 #comp-los8994b（DropDownMenu）の実測:
   --fnt:var(--font_1)=14px normal／--txt:var(--color_15)=#33343F／
   --txth:var(--color_25)=#434459／--trans:color 0.4s ease。
   **下線は付かない**（ホバーで色だけ 0.4s で変わる）。 */
.av-header .wp-block-navigation {
	font-size: var(--wp--preset--font-size--xs);
	font-weight: 400;
}

.av-header .wp-block-navigation a:where(:not(.wp-element-button)) {
	text-decoration: none;
	color: var(--wp--preset--color--contrast);
	transition: color 0.4s ease;
}

.av-header .wp-block-navigation a:where(:not(.wp-element-button)):hover,
.av-header .wp-block-navigation a:where(:not(.wp-element-button)):focus {
	text-decoration: none;
	color: var(--wp--preset--color--contrast-2);
}

/* 旧 #comp-los898x11（LinkBar）: 3点・各 20×20・右マージン 10px */
.av-sns {
	display: flex;
	align-items: center;
	gap: 10px;
	list-style: none;
	margin: 0;
	padding: 0;
}

.av-sns a {
	display: inline-flex;
	width: 20px;
	height: 20px;
	align-items: center;
	justify-content: center;
	color: inherit;
	transition: opacity 0.4s ease;
}

.av-sns a:hover {
	opacity: 0.6;
}

.av-sns svg {
	width: 20px;
	height: 20px;
	fill: currentColor;
}

/* ---------------- 赤CTA「サポートする」 ----------------

   旧 #comp-lpb90lrt の実測（1文字も推測していない）:
     background:#FF4040 / border:0px / border-radius:50px / padding:3px
     transition: all 0.2s ease
     width:193px / height:45px
     label: #FFFFFF / 15px / font-weight:normal / letter-spacing:0.25em
     配置: pagePinnedTopRight → position:absolute; justify-self:end;
           margin-right:20px; margin-top:118px
     @media (max-width:0px) ＝ モバイル: label 12px
   ⚠️ 旧サイトで `letter-spacing: 0.25em` を使うのは**この赤CTAのラベルだけ**。
------------------------------------------------------------------- */

.av-cta .wp-element-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	width: var(--av-cta-w);
	height: var(--av-cta-h);
	padding: 3px;
	border: 0;
	border-radius: 50px;
	background: var(--av-cta);
	color: #fff;
	font-size: var(--wp--preset--font-size--sm);
	font-weight: 400;
	letter-spacing: 0.25em;
	line-height: 1.2;
	text-align: center;
	text-decoration: none;
	white-space: nowrap;
	transition: all 0.2s ease;
}

.av-cta .wp-element-button:hover,
.av-cta .wp-element-button:focus {
	background: var(--av-cta);
	color: #fff;
	border: 0;
	opacity: 0.85;
}

/* 旧の固定配置（ページの右上・上から118px・右から20px） */
.av-cta--pinned {
	position: absolute;
	top: 118px;
	right: 20px;
	z-index: 60;
	margin: 0;
	justify-self: end;
}

/* ---------------- ボタン（赤CTA以外） ----------------

   旧 #comp-los8b8ib の実測: --rd:0px / --brw:1px / --bg:var(--color_15) /
   --txt:var(--color_11) / --fnt:var(--font_8)=18px /
   --trans1: border-color 0.4s, background-color 0.4s / --trans2: color 0.4s
   → 角丸なし・18px・0.4s。色は theme.json の elements.button が持つ。
------------------------------------------------------------------- */

.wp-element-button {
	transition: background-color 0.4s ease, border-color 0.4s ease, color 0.4s ease;
}

/* ---------------- 地色の交互バンド ----------------

   旧は節ごとに 白 ⇄ rgba(#F7F7F7,.8) ⇄ #F7F7F7 を切り替えている
   （home.html の --bg-overlay-color を節順に実測した結果）。
   全面白の一本道ではない。
   `alignfull` で全幅に敷き、中の版面は 980px に収める。
------------------------------------------------------------------- */

/* ---------------- 縦のリズム（決定23-3・2026-10-02） ----------------

   旧 Wix は節ごとに固定高（740／761／918／1375px）で組んでいて、その余白が
   「ゆったり感」を作っていた。新サイトは本文量で高さが決まるので詰まる
   （実測: ページ全体 旧 23,924px → 新 16,719px）。

   🔴 決めた値
     節の間        96px （＝ 上の節 48px ＋ 下の節 48px）
     章の切れ目   160px （＝ 48px ＋ 112px）
     ヒーロー直後  96px （決定22 で動画の節を落とした穴。35px に潰れていた）
   ⚠️ 帯4本の高さ（740・761・764・553）は**変えない**。旧と一致している。
      だから帯の間隔は padding（内側）ではなく margin（外側）で取る。
      節（av-sec）は地色を敷くので padding（内側）で取る。

   ⚠️ 1.2.x は `var(--wp--preset--spacing--50)` を 4rem（64px）だと思って使って
      いたが、**実測は 24px だった**。theme.json の spacingSizes（slug 50 = 4rem）に
      WordPress 既定の spacing プリセット（slug 50 = 1.5rem）が後から被さるためで、
      `defaultSpacingSizes: false` を入れないと theme.json 側の値は効かない。
      そこを直すとサイト全体の余白が一斉に動くので、**ここは px で直接書く**。
------------------------------------------------------------------- */

/* 🔴 決定25（2026-10-02・久保専務理事の逐語「縮める」）
   狭い画面では 96／160px が過剰だった（390px でページ高 24,970px）。
   **値を2つの変数に集約し、画面幅で切り替える**。
     節の間    = --av-gap × 2
     章の切れ目 = --av-gap + --av-chapter-gap
   ⚠️ PC の 96／160px は変えていない（ブラッシュアップで決めたリズム）。
   ⚠️ 帯4本の高さ（740・761・764・553）とモバイルの 60vh も変えていない。 */
:root {
	--av-gap: 48px;         /* 節の間 96px */
	--av-chapter-gap: 112px; /* 章の切れ目 160px */
}

/* ⚠️ **新しい breakpoint を1つも足していない。** 本テーマには既に2本しかなく、
   そのどちらにも別の切り替えがぶら下がっている。段差を増やさないため同じ線を使う。
     782px … 帯が 60vh・統計が1列・CTA が固定解除・弧が 60px になる既存の線
             （WordPress の標準のモバイル境界）
     480px … パララックスを切っている線（JS の MIN_WIDTH 481 と同じ）
   比（1 : 1.67）は3段とも保っているので、節と章の差の読み取り方は変わらない。 */
@media (max-width: 782px) {
	:root {
		--av-gap: 32px;         /* 節の間 64px */
		--av-chapter-gap: 72px;  /* 章の切れ目 104px */
	}
}

@media (max-width: 480px) {
	:root {
		--av-gap: 24px;         /* 節の間 48px */
		--av-chapter-gap: 56px;  /* 章の切れ目 80px */
	}
}

/* ⚠️ これ以上は詰めない。根拠は 390px での実測:
     - 段落と段落の間は 11px（block-gap）。節の間 48px はその 4.4倍で、
       本文の切れ目と節の切れ目が明確に見分けられる。
     - 全27の境界のうち **8か所は地色が変わらない**（白→白・灰→灰）。
       そこは余白だけが境界を担う。48px は小見出し 28px の行送り（約39px）より
       大きく、実機で見て境界が読める最小値として決めた。
     - 章の切れ目 80px は節の間の 1.67倍。PC（96:160）と同じ比なので、
       節と章の差の読み取り方は画面幅によらず変わらない。 */

.av-sec {
	padding-block: var(--av-gap);
}

/* 上位ブロックの既定の縦間隔（block-gap 由来の約 11px）を打ち消し、
   余白は上の表の値だけで決める。
   ⚠️ `.entry-content > …` の2クラス分の詳細度で WordPress の
      `.wp-block-post-content-is-layout-constrained > *`（1クラス）に勝つ。 */
.entry-content > .av-sec,
.entry-content > .av-band,
.entry-content > .av-arc {
	margin-block: 0;
}

/* 帯は外側の余白で間隔を取る（高さを変えないため）。
   ヒーローはページの先頭なので上は空けない。 */
.entry-content > .av-band {
	margin-block-start: var(--av-gap);
}

.entry-content > .av-band:first-child {
	margin-block-start: 0;
}

/* 帯と帯が隣り合うとき（ヒーロー → 導入文）は帯側だけで「節の間」を作る。 */
.entry-content > .av-band + .av-band {
	margin-block-start: calc(var(--av-gap) * 2);
}

/* 帯の次が節のとき（ヒーローの直後・シードキャンプの直後）も「節の間」。 */
.entry-content > .av-band + .av-sec {
	padding-block-start: calc(var(--av-gap) * 2);
}

/* 章の切れ目。節は内側、帯は外側で取る。 */
.entry-content > .av-sec.av-chapter {
	padding-block-start: var(--av-chapter-gap);
}

.entry-content > .av-band.av-chapter {
	margin-block-start: var(--av-chapter-gap);
}

/* 弧形ディバイダ（150px）自体が切れ目として十分なので、その直後の章は足さない。 */
.entry-content > .av-arc + .av-sec.av-chapter {
	padding-block-start: var(--av-gap);
}

.av-sec--white {
	background: var(--av-band-white);
}

.av-sec--soft {
	background: var(--av-band-soft);
}

.av-sec--gray {
	background: var(--av-band-gray);
}

/* ---------------- 旧の「列背景の写真」（決定20・2026-10-01） ----------------

   旧サイトの「誰と解決するか」（#comp-lpb6um4y1）は、列の背景に写真
   11062b_4b7c9a8e（displayMode:fill）を敷き、その上に colorUnderlay
   rgba(247,247,247,.8) を重ねていた。1.2.7 までは「CSSの面で代替」していたが、
   久保専務理事の方針「すべて今のままを踏襲」と決定20（旧サイトの写真を全点戻す）に
   合わせて写真を戻す。

   ⚠️ cover ブロックに置き換えると WordPress の既定の min-height 430px が効いて
      節の高さが変わる。節の高さを変えずに旧の見え方を再現するため、
      **背景画像（面の色はグラデーションで重ねる）**で入れている。
   ⚠️ 面の色は --av-band-soft と同じ rgba(247,247,247,.8)。本文の読みやすさは
      この面が担保しており、写真は 20% しか透けない（旧と同じ）。
   ⚠️ `.av-sec--soft` の background ショートハンドを後から上書きするので、
      この規則は必ず .av-sec--soft より後ろに置く。
--------------------------------------------------------------------------- */

.av-sec--photo-whosolve {
	background-image:
		linear-gradient(var(--av-band-soft), var(--av-band-soft)),
		url("/wp-content/uploads/2026/10/avain-deco-candy-01.jpg");
	background-position: center;
	background-size: cover;
}

/* ---------------- 弧形のディバイダ ----------------

   旧 #comp-los899rt1 の --divider-bottom-*。高さ 150px・fill #FFFFFF。
   path は原文のまま（viewBox も同じ）。
------------------------------------------------------------------- */

/* 弧は**直前の帯があるときだけ**出す。帯（写真が入る節）が未入稿で
   剪定されている間に 150px の白い帯だけが残るのを防ぐ。
   帯が出れば自動的に弧も出る（avain-draft-hide を触らずに連動させる）。 */
.av-arc {
	display: none;
}

.av-band + .av-arc {
	display: block;
}

.av-arc {
	height: 150px;
	margin: 0;
	background-repeat: no-repeat;
	background-size: 100% 100%;
	background-position: center bottom;
	background-image: url("data:image/svg+xml,%3Csvg preserveAspectRatio='none' viewBox='-0.755 100 1921.51 200' height='100%25' width='100%25' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='%23FFFFFF' d='M1920.755 300C1657.396 178.196 1323.641 100 960 100S261.905 178.196-.755 300h1921.51z'/%3E%3C/svg%3E");
}

/* ---------------- 全幅の写真帯 ---------------- */

.av-band {
	position: relative;
	isolation: isolate;
	display: grid;
	align-content: center;
	background-color: var(--wp--preset--color--contrast);
}

.av-band img,
.av-band .wp-block-cover__image-background {
	object-fit: cover;
	object-position: center center; /* Wix の fill + fp_0.50_0.50 の再現 */
}

.av-band__body {
	color: var(--wp--preset--color--base);
}

.av-band__body :where(h1, h2, h3) {
	color: inherit;
}

/* ---------------- 帯のオーバーレイ（決定24-3・2026-10-02） ----------------

   帯の上には文字が乗る（ヒーローの h1 とロゴ・導入文の 20px ×3・
   シードキャンプとプロジェクトについての h2）。しかも帯は align-content:center
   なので **文字は帯の上下の中央にいる**。したがって「上が濃く下が薄い」よく見る
   グラデーションでは読みやすくならない。中央をいちばん濃くする。

   旧サイトは写真の上に rgba(247,247,247,.8) の面を重ねて可読性を作っていた
   （「誰と解決するか」で再現済み）。**同じ作法の延長**として、受け色の紺
   （#33343F）で面を作る。

   合成の実測値（写真の上に残る暗さ）
     上端 0.36 / 中央 0.55 / 下端 0.38
   つまり **文字がいる中央は従来（一律 0.50）より少し濃く、写真が見えてほしい
   上下は従来より薄い**。写真が見えなくなるほど濃くしていない。
   ⚠️ 色は #33343F だけ。新しい色は増やしていない。
--------------------------------------------------------------------------- */

/* WordPress の dimRatio 50（一律 0.5）を薄くして、残りをグラデーションが担う。 */
.av-band > .wp-block-cover__background.has-background-dim {
	opacity: 0.3;
}

/* ⚠️ z-index は 0。写真（z-index:0・DOM で先）より上、覆いと本文（z-index:1）より下。 */
.av-band::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 0;
	pointer-events: none;
	background-image: linear-gradient(
		to bottom,
		rgba(51, 52, 63, 0.08) 0%,
		rgba(51, 52, 63, 0.36) 50%,
		rgba(51, 52, 63, 0.12) 100%
	);
}

/* ---------------- パララックス（決定24-1・2026-10-02） ----------------

   全幅の写真帯4本（740／761／764／553）だけに入れる。背景の写真が前面の内容より
   ゆっくり動く。

   🔴 守っていること
     - `background-attachment: fixed` は**使っていない**（iOS で効かず描画も重い）。
       動かすのは `transform: translate3d()` で、実装は assets/js/avain-motion.js。
     - 画面内にある帯だけを動かす（IntersectionObserver）。スクロールごとの
       全要素の再計算はしていない。
     - `will-change` は画面に入っている間だけ JS が付け、出たら外す。
     - **480px 以下では切る**（モバイルは効果が薄く描画のコストだけが残る。
       依頼は「390px 以下」だが、iPhone 14/15 Pro が 393px なので 480px で切る＝
       390px 以下は当然に含まれる）。
     - `prefers-reduced-motion: reduce` で完全に止まる（JS は `.av-motion` を
       付けず、下の @media が万一の取りこぼしも潰す）。
     - **JS が動かない環境では写真は元どおり（height:100%・transform なし）**。
       `.av-motion` は JS だけが付けるクラスなので、付かなければ 1.2.x と同じ見た目。

   動く量 = 帯の高さの ±15%（＝視差 0.3）。そのぶん写真を 130% の高さで敷き、
   上へ 15% ずらして、動いても帯の外に隙間が出ないようにしている。
--------------------------------------------------------------------------- */

@media (min-width: 481px) {
	.av-motion .av-band > .wp-block-cover__image-background {
		height: 130%;
		top: -15%;
	}
}

/* 🔴 動きが負担になる方のための下限。読者に医療的ケアが必要なお子さんの
   ご家族を含む。ここは外せない。 */
@media (prefers-reduced-motion: reduce) {
	.av-motion .av-band > .wp-block-cover__image-background {
		height: 100%;
		top: 0;
		transform: none !important;
		will-change: auto !important;
	}
}

/* ---------------- ヒーローの「1度だけの瞬間」（決定24-2・2026-10-02） ----------

   候補 (A) ロゴが収まる ／ (B) 背景写真が 1.04倍から等倍へ のうち **(A) を採った**。
     1. (B) は**パララックスと同じ要素（背景写真）の transform を奪い合う**。
        JS が毎フレーム translate3d を書き込むので、CSS の scale アニメーションは
        1フレーム目で消える。両方やるなら JS 側で scale を合成することになり、
        動きを足すために動きの実装を複雑にする。
     2. (A) の対象（ロゴ）はパララックスの対象と別の要素なので衝突しない。
     3. (A) は **CSS だけで完結**し、JS が動かない環境でも1回だけ再生される。
     4. ヒーローの写真はパララックスで既に動く。写真にもう1つ動きを足すと
        「動く場所を1つに絞る」方針に反する。
   ⚠️ 節ごとに現れる演出（fade-and-slide-up）は入れていない。
------------------------------------------------------------------------------ */

@media (prefers-reduced-motion: no-preference) {
	.av-logo img,
	.av-logo .custom-logo {
		animation: av-logo-settle 0.7s cubic-bezier(0.2, 0.8, 0.2, 1) both;
	}
}

@keyframes av-logo-settle {
	from {
		transform: scale(1.06);
		opacity: 0.55;
	}

	to {
		transform: scale(1);
		opacity: 1;
	}
}

/* 旧の節の高さ（実測）。写真が入ったときにこの高さで出る。 */
.av-band--hero {
	min-height: 740px;
} /* comp-los899rj */

/* 固定CTA（右上・上から118px・高さ45px）の下に本文が来るよう縦の逃げを取る。
   旧のヒーローは写真の中にロゴだけで文字が無かったため衝突しなかった。
   こちらは h1 を足している（マークアップの是正）ので、その分だけ下げる。
   ⚠️ 余白は .av-band__body 側に置く。.av-band の padding-block は
      avain-draft-hide が写真0枚のとき !important で握っているため。 */
@media (min-width: 783px) {
	.av-band--hero .av-band__body {
		padding-top: 80px;
	}
}

.av-band--761 {
	min-height: 761px;
} /* c4b9557c */

.av-band--553 {
	min-height: 553px;
} /* d85a318a ＝「プロジェクトについて」（#comp-los899rt1・実測 553px） */

/* 🔴 2026-10-01 是正: 「大成功だったシードキャンプ」の帯は 553px ではなく **764px**。
   旧 #comp-lpjnfryj をブラウザで実測して確認した（553px は取り違えだった）。 */
.av-band--764 {
	min-height: 764px;
} /* 5b8162ed ＝「大成功だったシードキャンプ」（#comp-lpjnfryj・実測 764px） */

/* ---------------- ロゴの枠 ----------------

   旧 #comp-los9tv0t（WPhoto）= 472×254。ヘッダの帯ではなく
   **トップ最上段の節**（comp-los89e18／高さ740px）の中に置かれている。
   2026-10-01、サイトロゴ（添付 122）を設定し、ヒーローに
   `<!-- wp:site-logo {"className":"av-logo"} /-->` を置いた。

   ⚠️ ブロックの `width` 属性は使わない。属性はインライン style（width:472px）に
      なり、390px 幅でも縮まなくなる。幅はこの枠（.av-logo）だけで決める。
   ⚠️ サイトロゴブロックは既定の幅 120px を**自分のCSSで**持っている
      （`.wp-block-site-logo.is-default-size img`＝クラス2つ）。
      `.av-logo img`（クラス1つ）では負けるので、同数のクラスで上書きする。
------------------------------------------------------------------- */

.av-logo {
	width: 472px;
	max-width: 100%;
	margin-inline: auto;
}

/* ⚠️ cover ブロックは display:flex で、中身（.wp-block-cover__inner-container）は
   flex アイテムである。flex アイテムの既定は min-width:auto なので、
   **固定幅の子（.av-logo の 472px）があると、ビューポートより狭くならない**。
   その結果 390px 幅ではヒーローの中身が 472px のまま左右にはみ出し、
   cover の overflow:hidden でロゴが両端から切れた（2026-10-01 実測で検出）。
   min-width:0 を与えて、ビューポートに合わせて縮むようにする。 */
.av-band > .wp-block-cover__inner-container {
	min-width: 0;
}

.av-logo img,
.av-logo .custom-logo,
.av-logo.wp-block-site-logo img,
.av-logo.wp-block-site-logo .custom-logo {
	width: 100%;
	height: auto;
}

/* ---------------- 統計リスト ----------------

   旧 #comp-lpb69tfv（Repeater）の実測:
     --justify-content: center / --item-margin: 40px 40px（＝gap 80px）
     item 幅 306px（[id^="comp-lpb69tfz1__"]{width:306px}）→ **2列**
     item の地と罫: --alpha-bg:0（透明）／--brw:0px（罫なし）
     数値 73px（font_3 を 73px で上書き）／ラベル 20px（font_7）
   ⚠️ 1.1.x の「3列・#F7F7F7 の箱・黄4px の上罫・左寄せ・28px/15px」は
      旧サイトに1つも無い。箱と罫を外し、2列・中央寄せに戻す。
   読み上げ順は「項目 → 数値」、見た目は数値が上（column-reverse）。
------------------------------------------------------------------- */

.av-stats {
	list-style: none;
	margin-inline: auto;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 80px;
	max-width: 692px; /* 306 * 2 + 80 */
}

.av-stats__item {
	display: flex;
	flex-direction: column-reverse;
	gap: 0.25rem;
	width: 306px;
	max-width: 100%;
	padding: 0;
	background: none;
	/* ⚠️ 透明の上罫を**全8枠**に持たせる。2枠だけに罫を足すと、その枠の中身が
	   3px 下がって同じ行の相手とずれる。色だけを後から与える。 */
	border: 0;
	border-top: 3px solid transparent;
	padding-top: 12px;
	text-align: center;
}

/* ---------------- 統計の母数が違う2項目（決定23-4・2026-10-02） ----------------

   8項目のうち6項目は n=843 だが、「資格取得のための学習が行えない 83.9％」と
   「希望する形態で仕事ができていない 75.6％」だけは**「行いたい」と回答した方の
   うち**（601件・742件）の割合である。
   見た目が同じだと「83.9％が学習している」と**逆に読まれる**ので、
   見て分かる区別を付ける。

   ⚠️ **装飾ではなく情報として**使っている。付けるのは
      (a) ロゴが持つ紫 1色の上罫 3px と (b) 数値の直下の添え書き の2つだけ。
   ⚠️ 色はロゴの実測値から採った（#9078C0）。桃・橙は警告に見え、青緑
      （#78A8C0）は薄い地（#F7F7F7）に対して 3:1 を満たさない。紫は約 3.5:1 で
      WCAG 1.4.11（文字でない要素 3:1）を満たす。
   ⚠️ 添え書きの文字色は紫にしない（小さい文字で 4.5:1 を満たさないため）。
   ⚠️ 8枠・2列×4行の構成は変えていない。注記3行も残している。
------------------------------------------------------------------------- */

.av-stats__item--subset {
	border-top-color: var(--av-logo-violet);
}

.av-stats__basis {
	font-size: var(--wp--preset--font-size--xs);
	line-height: 1.6;
	color: var(--wp--preset--color--contrast);
}

.av-stats__num {
	font-size: var(--wp--preset--font-size--stat);
	font-weight: 400;
	line-height: 1.25;
	font-feature-settings: "tnum" 1;
	color: var(--wp--preset--color--contrast);
}

.av-stats__label {
	font-size: var(--wp--preset--font-size--lg);
	color: var(--wp--preset--color--contrast);
	line-height: 1.67;
}

/* ---------------- カード（記事一覧・費目） ----------------

   旧の実測: 題 22px（font_6）／抜粋 16px／日付 12px。
   枠は薄い灰（rgba(247,247,247,.75)）、内側の余白は 24px。
   ⚠️ 日付の「黄の左罫＋灰の地のバッジ＋字間 0.06em」は旧に無いが、
      2026-10-01 の決定（久保専務理事・逐語「b」）で**意図的に残している**。
      詳細は下の「日付」ブロックの注記。
------------------------------------------------------------------- */

.av-cards {
	gap: var(--wp--preset--spacing--40);
}

.av-card {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--20);
	background: var(--wp--preset--color--base);
	border: 1px solid rgba(247, 247, 247, 0.75);
	height: 100%;
}

.av-card__media {
	position: relative;
	aspect-ratio: 4 / 3;
	overflow: hidden;
	background: var(--av-ramp-gray-1);
}

.av-card__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
	position: relative;
	z-index: 1;
}

/* Wix の作法（4:3 トリミング＋背景に同じ画像をぼかして敷く）の踏襲 */
.av-card__media::before {
	content: "";
	position: absolute;
	inset: -10%;
	background-image: inherit;
	background-size: cover;
	background-position: center;
	filter: blur(30px);
	z-index: 0;
}

/* アイキャッチが無い記事の代替（空の灰色枠にしない） */
.av-card__ph {
	position: absolute;
	inset: 0;
	display: grid;
	place-items: center;
	background: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--contrast);
	font-weight: 400;
	font-size: var(--wp--preset--font-size--sm);
	z-index: 1;
}

.av-card__body {
	padding: 24px;
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
}

.av-card__body :where(h2, h3, h4) {
	font-size: var(--wp--preset--font-size--h-22);
	line-height: 1.41;
	margin: 0;
}

.av-card__body a {
	text-decoration: none;
}

.av-card__body a:hover {
	color: var(--wp--preset--color--contrast-2);
}

.av-card__body .wp-block-post-excerpt {
	font-size: var(--wp--preset--font-size--md);
	line-height: 1.8;
}

/* ---------------- 日付 ----------------

   🔴 **踏襲の意図的な例外**（決定: 2026-10-01・久保専務理事・逐語「b」）
      二択 (a) 旧に戻す ／ (b) 残す → **(b) を採用**。
      旧サイトの日付は 12px の素の文字（地なし・罫なし・字間なし）だが、
      「2023年の告知を、今やっているものと誤読させない」という別の要件を優先し、
      **黄の左罫 3px・グレーの地のバッジ・字間 0.06em を維持**する。
      旧との差分を次に点検する人へ: これは**漏れではなく決めて残したもの**である。
   ⚠️ サイズだけは旧の実測（12px）に戻してある（1.1.x は 14px）。
   ⚠️ 字間の例外はここだけ。`.av-card__ph`（0.08em）と `.av-ended`（0.1em）は
      予定どおり外した（同決定で明示）。
------------------------------------------------------------------- */

.av-date {
	display: inline-block;
	font-size: var(--wp--preset--font-size--xxs);
	font-weight: 700;
	letter-spacing: 0.06em;
	color: var(--av-ramp-gray-4);
	background: var(--av-ramp-gray-1);
	padding: 0.25rem 0.7rem;
	border-left: 3px solid var(--wp--preset--color--accent);
}

/* ---------------- 本文 ---------------- */

.av-entry :where(p) {
	margin-block: 1.4em;
}

.av-entry :where(figure) figcaption {
	font-size: var(--wp--preset--font-size--xxs);
	color: var(--av-ramp-gray-4);
	text-align: center;
	margin-top: 0.75rem;
}

/* 旧の図版名（相関図・ロジックモデル）は 40px・中央寄せで、
   figcaption として画像の下に置く。
   🔴 決定23-2（2026-10-02）: **28px（小見出し）へ下げた**。
      図版名は節見出しではなく図に付く名前で、40px だと「プロジェクトについて」
      「お問い合わせ」等の節見出しと同格に見えていた。中央寄せは旧のまま。 */
.av-figname {
	font-size: var(--wp--preset--font-size--h-28);
	line-height: 1.375;
	text-align: center;
	color: var(--wp--preset--color--contrast);
	margin-top: var(--wp--preset--spacing--30);
}

/* ---------------- 画像・ウィジェットの枠（未投入） ----------------

   旧にあって新サイトにまだ無い器を、寸法どおりの枠として置く。
   写真の実体は入れない（同意記録が無く使えない＝確定済み）。
   地色と罫だけで成立させる（ヒーローで実証済みの作法）。
   ⚠️ いずれも `av-todo` を併記してあるので、本文が入るまでは
      avain-draft-hide が外向きの表示から落とす。
------------------------------------------------------------------- */

.av-ph {
	display: grid;
	place-items: center;
	width: 100%;
	margin-inline: auto;
	background: var(--av-ramp-gray-1);
	border: 1px dashed var(--av-ramp-gray-3);
	color: var(--av-ramp-gray-4);
	font-size: var(--wp--preset--font-size--sm);
	text-align: center;
}

.av-ph--980x693 {
	max-width: 980px;
	aspect-ratio: 980 / 693;
}

.av-ph--980x694 {
	max-width: 980px;
	aspect-ratio: 980 / 694;
}

.av-ph--980x692 {
	max-width: 980px;
	aspect-ratio: 980 / 692;
}

.av-ph--980x735 {
	max-width: 980px;
	aspect-ratio: 980 / 735;
}

.av-ph--980x630 {
	max-width: 980px;
	aspect-ratio: 980 / 630;
}

.av-ph--video {
	max-width: 628px;
	aspect-ratio: 628 / 353;
}

.av-ph--ig {
	max-width: 980px;
	aspect-ratio: 980 / 1041;
}

.av-ph--logo {
	max-width: 472px;
	aspect-ratio: 472 / 254;
}

/* 旧 #comp-lpb67qpk1（「あばいん！」の節）の --bg-gradient を**原文のまま**置く。
   ⚠️ 旧でグラデーションを持つ節はここ1つだけ。
      「誰と解決するか」「どう解決するか」「費目カード」の3節は
      --bg-gradient:none で、背景は**写真**＋受け色（#F7F7F7 / #FFFFFF）だった。
      写真は使えないので受け色だけにする（勝手にグラデーションを足さない）。 */
.av-deco {
	background-image:
		radial-gradient(circle at 3.6751302083333335% 6.940104166666666%, #4D6001 0%, 11.55%, rgba(77, 96, 1, 0) 35%),
		radial-gradient(circle at 92.96712239583333% 9.554036458333332%, #FAAA63 0%, 17.5%, rgba(250, 170, 99, 0) 35%),
		radial-gradient(circle at 95.20670572916666% 90.48177083333333%, #C9C6FF 0%, 34.1%, rgba(201, 198, 255, 0) 55%),
		radial-gradient(circle at 4.313151041666666% 93.34635416666667%, #97B49D 0%, 29.900000000000002%, rgba(151, 180, 157, 0) 65%),
		radial-gradient(circle at 46.555989583333336% 11.50390625%, rgba(214, 222, 72, 0.99) 0%, 25%, rgba(214, 222, 72, 0) 50%),
		radial-gradient(circle at 51.121419270833336% 89.98697916666667%, #93C3FF 0%, 42%, rgba(147, 195, 255, 0) 70%),
		radial-gradient(circle at 48.9013671875% 49.521484375%, #FFFFFF 0%, 100%, rgba(255, 255, 255, 0) 100%);
	background-repeat: no-repeat;
	background-size: cover;
}

/* ---------------- フッター ----------------

   🔴 旧 #SITE_FOOTER の実測 ＝ **白地・中央寄せ・3行だけ**。
     1行目 仙台あばいんプロジェクト（22px・font_6）
     2行目 avain@ainomi.com（15px・font_9）
     3行目 ©2023 仙台あばいんプロジェクト（14px）
     ＋ SNS 3点（LinkBar comp-los89969・各 20×20）
   ⚠️ **旧のフッタに住所・電話は無い。**
      1.1.x の「濃紺地・白文字・左寄せ2カラム・12行相当」は旧に無い。
      住所・電話は本文側の「お問い合わせ」節（旧も 15px でそこに置いている）
      が持つ。正本値は functions.php の定数のまま（W-21 の是正は維持）。
   © の年は固定値を書かず wp_date('Y')（旧の ©2023 は踏襲しない）。
------------------------------------------------------------------- */

.av-footer {
	background: var(--wp--preset--color--base);
	color: var(--wp--preset--color--contrast);
	text-align: center;
}

.av-footer :where(h1, h2, h3, h4, h5, h6) {
	color: inherit;
}

.av-footer a {
	color: var(--wp--preset--color--contrast);
	text-decoration: none;
	transition: color 0.4s ease;
}

.av-footer a:hover {
	color: var(--wp--preset--color--contrast-2);
}

.av-footer__name {
	font-size: var(--wp--preset--font-size--h-22);
	line-height: 1.41;
	margin: 0;
}

.av-footer__mail {
	font-size: var(--wp--preset--font-size--sm);
	line-height: 1.875;
	margin: 0;
}

.av-footer__copy {
	font-size: var(--wp--preset--font-size--xs);
	line-height: 1.79;
	margin: 0;
	border: 0;
	color: inherit;
}

.av-footer .av-sns {
	justify-content: center;
}

/* ---------------- お問い合わせ（旧は 15px の3行） ---------------- */

.av-footer__addr {
	font-style: normal;
	font-size: var(--wp--preset--font-size--sm);
	line-height: 1.875;
}

/* ---------------- 未入稿マーカー ----------------
   article-writer（W-25）の差し替え待ちである箇所を隠さず示す。
   本文が入ったらブロックごと消える。 */

.av-todo {
	background: repeating-linear-gradient(
		-45deg,
		var(--av-ramp-yellow-1),
		var(--av-ramp-yellow-1) 10px,
		#fff 10px,
		#fff 20px
	);
	border: 1px dashed var(--av-ramp-yellow-4);
	color: var(--av-ramp-yellow-5);
	font-size: var(--wp--preset--font-size--sm);
	padding: var(--wp--preset--spacing--20) var(--wp--preset--spacing--30);
}

/* ---------------- 終了した催しの明示 ----------------
   文言は旧サイトの表示「受付が終了しました」をそのまま使う。
   ⚠️ 字間 0.1em は旧に無いので外した（旧で 0.25em を使うのは赤CTAだけ）。 */

.av-ended {
	display: block;
	background: var(--wp--preset--color--contrast);
	color: var(--wp--preset--color--base);
	font-weight: 400;
	font-size: var(--wp--preset--font-size--lg);
	letter-spacing: normal;
	text-align: center;
	padding: 0.9rem var(--wp--preset--spacing--30);
	margin-block: var(--wp--preset--spacing--30);
}

/* 催しの日時・会場（原文の値をそのまま置く器） */

.av-eventmeta {
	background: var(--av-ramp-gray-1);
	padding: var(--wp--preset--spacing--20) var(--wp--preset--spacing--30);
}

.av-eventmeta p {
	margin-block: 0.6em;
	font-size: var(--wp--preset--font-size--sm);
}

.av-eventmeta strong {
	display: inline-block;
	min-width: 3.5em;
	font-weight: 400;
	color: var(--av-ramp-gray-4);
}

/* ---------------- 狭い画面 ----------------

   ⚠️ 旧のモバイルは別レイアウト（Wix は PC と別の配置を持つ）で、
      その版は取得できていない。ここは**同一にできない**ので、
      旧の PC 版の見た目を崩さずに収める最小限だけを書く。
      旧が明記している唯一のモバイル値は赤CTAの 12px。
------------------------------------------------------------------- */

@media (max-width: 782px) {
	.av-band--hero,
	.av-band--761,
	.av-band--553,
	.av-band--764 {
		min-height: 60vh;
	}

	.av-stats {
		gap: 40px;
	}

	.av-cta--pinned {
		position: static;
		top: auto;
		right: auto;
		margin-block: var(--wp--preset--spacing--20);
	}

	/* 旧の @media（max-width:0px）＝モバイルのラベル 12px */
	.av-cta .wp-element-button {
		font-size: 12px;
		letter-spacing: 0.2em;
		width: auto;
		min-width: 160px;
	}

	.av-arc {
		height: 60px;
	}

	.av-ended {
		font-size: var(--wp--preset--font-size--base);
	}
}