/*
Theme Name: Window to Asia
Theme URI: https://windowtoasia.or.jp/
Description: 特定非営利活動法人アジアの窓口 公式サイト用の子テーマ（親テーマ: Twenty Twenty-Five）。配色3-A「青緑×薄ベージュ×椿赤」ベース。
Author: edtr inc.
Template: twentytwentyfive
Version: 0.1.0
Requires at least: 6.7
Tested up to: 7.0
Requires PHP: 8.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: windowtoasia
*/
/* =========================================================
このファイルの役割（編集する人へ）
---------------------------------------------------------
- サイト全体の「補助CSS」を集約する唯一のファイル。
テーマの色・フォント・余白の基本設定は theme.json が正
（エディタのカラーパレットにも反映される）。
- ここには theme.json やブロックエディタで表現できない
装飾（ホバー効果・グラデーション・細かいレスポンシブ調整）
だけを書く。
- クラス名は .wta-〜 で統一する（Window To Asia の略）。
- セクションごとに日本語コメントで区切ること。
========================================================= */
/* --- キーカラー（配色3-A、2026-08-28決定）----------------
theme.json のパレットと同じ値。CSS内で色を書くときは
直接カラーコードを書かず、必ずこの変数を使うこと。 */
:root {
--color-primary: #006D70; /* 青緑：メイン（見出し・ボタン・IMPACT帯） */
--color-primary-dk: #00494C; /* 濃青緑：フッター背景・ホバー */
--color-secondary: #E4D8BE; /* 薄ベージュ：チップ・背景 */
--color-accent: #C23B1E; /* 椿赤：CTA・強調 */
--bg-cream: #F8F4EA; /* セクション背景（淡） */
--bg-cream-2: #F1EADA; /* セクション背景（濃） */
--text-beige: #5A4B2F; /* ベージュ地の上の文字 */
--logo-sub: #A08B60; /* ロゴ副文字 */
}
/* =========================================================
共通部品
========================================================= */
/* --- セクション共通：余白と見出し ---
使い方：セクションの外側グループに wta-section を付ける。
英語ラベルは段落に wta-en、見出しはh2をそのまま使う。
左右パディングはWP本体の has-global-padding が付与するため、
ここで指定してはいけない（padding: 64px 0 と書くとスマホで左右余白が消える） */
.wta-section { padding-top: 64px; padding-bottom: 64px; }
/* セクション境目の白い隙間対策：
本文(post-content)直下に並ぶセクションには、WPがブロック間隔(blockGap 1.2rem)の
上マージンを挿入し、背景色つきセクションの境目に下地の白い線が見えてしまう。
wta-sectionは自前の上下paddingを持つため、間隔ゼロで密着させる */
.wp-block-post-content > .wta-section { margin-block-start: 0; }
/* テンプレート直下（ヘッダー・本文・フッターの間）にも同じblockGapの白い隙間が
入るため、まとめてゼロにする（bodyを付けてWP生成ルールより優先させる） */
body .wp-site-blocks > * + * { margin-block-start: 0; }
/* --- フォーカス枠（アクセシビリティ）---
親テーマは :focus 全般に currentColor（黒系）の2px枠を出すため、タップ・クリックや
ハンバーガー開時の自動フォーカスでも黒枠が見えてしまう（2026-09-17 iPad指摘）。
・ポインタ起点（:focus:not(:focus-visible)）ではリンク・ボタンの枠を消す。
フォーム入力欄は対象外＝クリックでも枠が出る従来挙動を維持
・キーボード起点（:focus-visible）はブランド色の枠に整える。
フォーカス移動そのもの（コアのfocusFirstElement）はアクセシビリティのため触らない */
.wp-site-blocks :is(a, button, [role="button"]):focus:not(:focus-visible) { outline: none; }
.wp-site-blocks *:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 3px; }
/* 暗い背景（フッター・ヒーロー写真）の上では白枠にする */
.wta-footer :focus-visible, .wta-hero :focus-visible { outline-color: #FFFFFF; }
/* --- 行の折り返しを通常方式に戻す ---
親テーマが同じ要素群に text-wrap: pretty（段落全体を見た行分割の再配分）を
指定しているが、欧文向けの機能で日本語では行末に数文字分の空きが出る
（2026-09-17 iPad指摘）。通常の折り返し（禁則処理のみ）に戻す */
p, h1, h2, h3, h4, h5, h6, blockquote, caption, figcaption { text-wrap: wrap; }
.wta-en {
font-size: 12px; letter-spacing: .2em; font-weight: 700;
color: var(--color-accent); margin: 0;
}
.wta-section h2 {
font-size: clamp(24px, 3.4vw, 32px); color: var(--color-primary);
margin: 6px 0 18px; line-height: 1.4;
}
/* --- ボタン（コアのボタンブロックに追加クラスで指定）---
wta-btn（共通）＋ wta-btn--accent / --primary / --outline / --sm */
.wta-btn .wp-block-button__link {
border-radius: 999px; font-weight: 700; font-size: 15px;
padding: 12px 30px; white-space: nowrap; text-decoration: none;
}
.wta-btn--accent .wp-block-button__link { background: var(--color-accent); color: #fff; }
.wta-btn--accent .wp-block-button__link:hover { background: #A93318; color: #fff; }
.wta-btn--primary .wp-block-button__link { background: var(--color-primary); color: #fff; }
.wta-btn--primary .wp-block-button__link:hover { background: var(--color-primary-dk); color: #fff; }
.wta-btn--outline .wp-block-button__link {
background: transparent; border: 2px solid var(--color-primary); color: var(--color-primary);
}
.wta-btn--outline .wp-block-button__link:hover { background: var(--color-primary); color: #fff; }
.wta-btn--sm .wp-block-button__link { padding: 9px 22px; font-size: 13.5px; }
/* カスタムHTML内で使う素のリンク用ボタン（ヒーローCTA等） */
.wta-btn-link {
display: inline-block; padding: 12px 30px; border-radius: 999px;
font-weight: 700; font-size: 15px; white-space: nowrap; text-decoration: none;
}
.wta-btn-link--accent { background: var(--color-accent); color: #fff; }
.wta-btn-link--accent:hover { background: #A93318; color: #fff; }
/* --- チップ（段落ブロックに wta-chip）--- */
.wta-chip {
display: inline-block; font-size: 11px; font-weight: 700;
color: var(--text-beige); background: var(--color-secondary);
padding: 3px 10px; border-radius: 999px; letter-spacing: .06em; margin: 0;
}
/* --- グリッド（コアのグリッドレイアウトに wta-grid）--- */
.wta-grid { margin-top: 26px; }
/* =========================================================
ヘッダー（parts/header.html）
========================================================= */
.wta-header { background: #fff; border-bottom: 1px solid #ECE9E4; }
/* ヘッダー固定（スティッキー）：ページ直下のラッパーに掛けること。
内側の.wta-headerに掛けると親（ラッパー）の高さ内でしか粘着せず効かない */
header.wp-block-template-part { position: sticky; top: 0; z-index: 100; }
/* ログイン時は管理バーの分だけ下げる */
body.admin-bar header.wp-block-template-part { top: var(--wp-admin--admin-bar--height, 32px); }
.wta-header__row {
max-width: 1160px; margin: 0 auto; padding: 14px 22px; gap: 22px;
}
.wta-logo {
font-weight: 800; font-size: 19px; color: var(--color-primary);
line-height: 1.25; text-decoration: none;
display: flex; align-items: center; gap: 12px;
}
/* ロゴマーク画像（元画像512×512・透過PNG。表示サイズはここで制御） */
.wta-logo__mark { width: 54px; height: 54px; flex-shrink: 0; }
.wta-logo__text { display: block; }
.wta-logo small {
display: block; font-size: 10px; letter-spacing: .16em;
color: var(--logo-sub); font-weight: 700;
}
.wta-header__nav { font-size: 14px; font-weight: 500; }
.wta-header__nav a { text-decoration: none; }
.wta-header__nav a:hover { color: var(--color-primary); }
.wta-header__right { gap: 18px; }
/* ロゴ＋メニュー＋寄附ボタンが1行に収まらない幅（実測で約950px以下、余裕を見て1000px）は
メニューをハンバーガーに切り替える（2段落ち防止。iPad縦=820px等が該当）。
コアのナビは600px固定でしか切り替わらないため、詳細度を上げて上書きする。
600px未満はコアの同内容ルールがあるため、この指定は実質600〜1000pxで効く */
@media (max-width: 1000px) {
.wta-header__nav .wp-block-navigation__responsive-container-open:not(.always-shown) { display: block; }
.wta-header__nav .wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open) { display: none; }
/* 万一収まらない場合の保険（通常はハンバーガー化により1行に収まる） */
.wta-header__row { flex-wrap: wrap; }
}
/* スマホ幅はヘッダー内の余白を詰めて1行に収める（2026-09-29）。
1行に必要な幅＝左右padding 16×2＋ロゴ178（マーク46＋gap12＋文字120）＋gap 12
＋右側134（ハンバーガー24＋gap12＋寄附ボタン98）＝356px → 360px幅（Android小型）まで1行。
詰める前は392px必要で、iPhone 12〜16（390px）でも2段になっていた */
@media (max-width: 640px) {
.wta-header__row { padding: 12px 16px; gap: 12px; }
.wta-header__right { gap: 12px; }
.wta-logo__mark { width: 46px; height: 46px; }
}
/* =========================================================
ヒーロー（カスタムHTMLブロックの「島」）
---------------------------------------------------------
純CSSクロスフェードのスライドショー。4枚を6秒間隔・24秒で巡回。
スライドのHTMLは固定ページ「ホーム」内のカスタムHTMLブロックにある。
写真を差し替えるときは background-image のURLを書き換えるだけ。
========================================================= */
.wta-hero {
position: relative; min-height: 480px; display: flex; align-items: center;
background: url(/wp-content/uploads/2026/09/hero3-city-kl.webp) center/cover no-repeat; /* 動きなし環境用の静止画（先頭スライドと同じ） */
overflow: hidden;
}
.wta-hero::before {
content: ""; position: absolute; inset: 0; z-index: 1;
background: linear-gradient(100deg, rgba(0,0,0,.55), rgba(0,0,0,.25) 55%, rgba(0,0,0,.15));
}
.wta-hero__slide {
position: absolute; inset: 0; z-index: 0; opacity: 0;
background-position: center; background-size: cover; background-repeat: no-repeat;
animation: wtaHeroSlide 24s infinite;
}
/* 4枚×6秒＝24秒周期。フェードイン1.8秒（7.5%）・表示保持〜7.8秒（32.5%）・フェードアウト〜9.6秒（40%） */
@keyframes wtaHeroSlide {
0% { opacity: 0; } 7.5% { opacity: 1; } 32.5% { opacity: 1; } 40% { opacity: 0; } 100% { opacity: 0; }
}
@media (prefers-reduced-motion: reduce) { .wta-hero__slide { animation: none; } }
.wta-hero__copy {
position: relative; z-index: 2; color: #fff;
padding: 70px 22px; max-width: 1060px; margin: 0 auto; width: 100%;
}
.wta-hero__catch {
font-size: clamp(30px, 5vw, 48px); font-weight: 800; line-height: 1.4;
text-shadow: 0 2px 14px rgba(0,0,0,.35); margin: 0;
}
.wta-hero__sub {
margin: 14px 0 28px; font-size: 14px; color: #fff;
text-shadow: 0 1px 10px rgba(0,0,0,.5), 0 1px 3px rgba(0,0,0,.4);
}
/* スマホはテキストが画面全幅に広がり写真の明るい部分と重なりやすいため、覆いを少し強める */
@media (max-width: 640px) {
.wta-hero::before {
background: linear-gradient(100deg, rgba(0,0,0,.6), rgba(0,0,0,.42) 60%, rgba(0,0,0,.32));
}
}
/* =========================================================
ミッション
========================================================= */
.wta-mission { text-align: center; }
.wta-mission__body { max-width: 640px; margin: 0 auto 20px; }
.wta-mission p a { color: var(--color-accent); font-weight: 700; text-decoration: none; }
/* =========================================================
事業カード（グループに wta-card）
========================================================= */
.wta-card {
background: #fff; border-radius: 12px; overflow: hidden;
box-shadow: 0 2px 10px rgba(0,0,0,.06);
}
.wta-card__ph { margin: 0; }
.wta-card__ph img { width: 100%; height: 160px; object-fit: cover; display: block; }
.wta-card__bd { padding: 18px 20px 22px; }
.wta-card h3 { font-size: 17px; color: var(--color-primary); margin: 10px 0 6px; }
.wta-card__bd > p:not(.wta-chip):not(.wta-more) { font-size: 13.5px; color: #555; margin: 0; }
.wta-more { margin: 10px 0 0; font-size: 13px; }
.wta-more a { color: var(--color-accent); font-weight: 700; text-decoration: none; }
/* =========================================================
数字で見る活動（IMPACT帯）
========================================================= */
.wta-stats { color: #fff; text-align: center; }
.wta-stats .wta-en { color: rgba(255,255,255,.7); }
.wta-stats h2 { color: #fff; }
.wta-stat__row { align-items: baseline !important; }
.wta-num { font-size: clamp(34px, 4.5vw, 52px); font-weight: 800; line-height: 1.2; margin: 0; }
.wta-unit { font-size: 18px; margin: 0; }
.wta-lbl { font-size: 13px; opacity: .85; margin: 4px 0 0; }
.wta-stats__note { font-size: 11px; opacity: .6; margin: 22px 0 0; }
/* =========================================================
キャッチコピー帯（MESSAGE帯。グループに wta-catch）
トップページの旧IMPACT帯を置き換え（2026-09-16）。
旧 .wta-stats 系はパターン wta/impact-stats 用に残している。
========================================================= */
.wta-catch { color: #fff; text-align: center; padding-top: 84px; padding-bottom: 84px; }
.wta-catch .wta-en { color: rgba(255,255,255,.7); }
.wta-catch__copy {
font-size: clamp(19px, 4.5vw, 38px);
font-weight: 700;
line-height: 1.9;
letter-spacing: .12em;
font-feature-settings: "palt"; /* 約物を詰めて見出しらしく */
margin: 14px 0 0;
}
/* =========================================================
相談・参加・支援カード（グループに wta-scard）
========================================================= */
.wta-support { text-align: center; }
.wta-scard {
background: #fff; border-radius: 12px; padding: 28px 22px;
text-align: center; box-shadow: 0 2px 10px rgba(0,0,0,.05);
}
.wta-scard__ico {
width: 56px; height: 56px; border-radius: 50%; background: var(--bg-cream-2);
margin: 0 auto 12px; display: flex; align-items: center; justify-content: center;
font-size: 24px; /* 旧絵文字アイコン時代の名残（SVG化済みだが無害なので残置） */
}
/* カード内アイコンはインラインSVG（修正依頼1-10で絵文字から変更。2026-09-22）。
色はSVG側で直接指定（青緑＋椿赤アクセントの2色構成＝案C） */
.wta-scard__ico svg { width: 30px; height: 30px; }
.wta-scard h3 { color: var(--color-primary); font-size: 17px; margin: 0; }
.wta-scard > p:not(.wta-scard__ico) { font-size: 13px; color: #555; margin: 8px 0 18px; }
/* =========================================================
寄附CTAボックス（DONATION帯。グループに wta-donate）
トップのSUPPORT帯とNEWS帯の間に置く大型CTA（2026-09-18）。
写真＋青緑パネルの2分割ボックス。640px以下は縦積みになる。
パターン：wta/donation-cta
========================================================= */
.wta-donate__box {
display: flex; align-items: stretch;
background: var(--color-primary);
border-radius: 16px; overflow: hidden;
box-shadow: 0 4px 18px rgba(0,0,0,.10);
}
/* flex子にblockGap由来の上マージンが入り右パネルがずれるため打ち消す */
.wta-donate__box > * { margin: 0; }
.wta-donate__ph { flex: 0 0 42%; }
.wta-donate__ph img { width: 100%; height: 100%; object-fit: cover; display: block; }
.wta-donate__bd { flex: 1; padding: 44px 48px 40px; color: #fff; }
.wta-donate__bd .wta-en { color: rgba(255,255,255,.72); }
.wta-donate__bd h2 {
color: #fff; font-size: clamp(20px, 2.6vw, 26px);
line-height: 1.55; margin: 10px 0 0;
}
.wta-donate__bd p:not(.wta-en) {
font-size: 14.5px; line-height: 2; color: rgba(255,255,255,.92);
margin: 14px 0 24px;
}
@media (max-width: 640px) {
.wta-donate__box { flex-direction: column; }
.wta-donate__ph { flex: none; }
.wta-donate__ph img { height: 190px; }
.wta-donate__bd { padding: 26px 22px 30px; }
}
/* =========================================================
ニュース（クエリーループに wta-news）
========================================================= */
.wta-news__item {
border-bottom: 1px solid #ECE9E4; padding: 15px 4px;
gap: 14px; font-size: 14px;
}
.wta-news__date { color: #8A857D; font-size: 13px; margin: 0; }
/* カテゴリチップ：カテゴリごとに色分け（スラッグで判定） */
.wta-news__cat { font-size: 11px; }
.wta-news__cat a {
display: inline-block; font-weight: 700; text-decoration: none;
color: var(--text-beige); background: var(--color-secondary);
padding: 3px 10px; border-radius: 999px; letter-spacing: .06em;
}
.wta-news__cat a[href*="/category/info"] { background: var(--color-primary); color: #fff; }
.wta-news__cat a[href*="/category/event"] { background: var(--color-accent); color: #fff; }
.wta-news__title { font-size: 14px; font-weight: 400; margin: 0; }
.wta-news__title a { text-decoration: none; color: inherit; }
.wta-news__title a:hover { color: var(--color-primary); }
/* =========================================================
パートナー（ロゴは仮。実ロゴ提供後に差し替え）
========================================================= */
.wta-partners { text-align: center; }
.wta-logos { display: flex; flex-wrap: wrap; gap: 16px; justify-content: center; margin-top: 24px; }
.wta-lg {
width: 150px; height: 56px; background: #E2DAC8; color: #94896F;
display: flex; align-items: center; justify-content: center;
font-size: 11px; letter-spacing: .14em; border-radius: 6px;
}
/* 実パートナー（aタグ・リンク付き）。修正依頼6-1（2026-09-22）。
ロゴ画像が届くまでは団体名の文字表記（.wta-lg--text を併記）。
ロゴ入手後は 
に
差し替えれば下のimgルールで箱に収まる。.wta-logos は中央寄せなので1団体でも崩れない */
a.wta-lg {
background: #fff; border: 1px solid #E2DAC8; text-decoration: none;
transition: border-color .2s, box-shadow .2s;
}
a.wta-lg:hover { border-color: var(--color-primary); box-shadow: 0 2px 8px rgba(0, 0, 0, .08); }
a.wta-lg--text {
color: var(--color-primary); font-size: 14px; font-weight: 700;
letter-spacing: .06em; width: auto; min-width: 150px; padding: 0 22px;
}
.wta-lg img { max-width: 120px; max-height: 40px; width: auto; height: auto; }
/* ロゴ＋団体名のカード型（2026-09-24）。円形ロゴ向け：ロゴを上、団体名を下に小さく添える。
団体名
ロゴは正方形画像（240px）を想定。altは空（団体名テキストがリンク名になるため） */
a.wta-lg--card {
/* 枠は正確な正方形（184×184）。高さを固定し中身を上下中央に置く */
flex-direction: column; justify-content: center; gap: 12px;
width: 184px; height: 184px; box-sizing: border-box;
padding: 16px; border-radius: 12px;
}
a.wta-lg--card img.wta-lg__logo {
width: 96px; height: 96px; max-width: none; max-height: none;
border-radius: 50%; display: block;
}
.wta-lg__name {
color: var(--color-primary); font-size: 12px; font-weight: 700;
letter-spacing: .1em; line-height: 1.4;
}
a.wta-lg--card:hover { transform: translateY(-2px); }
a.wta-lg--card { transition: border-color .2s, box-shadow .2s, transform .2s; }
/* =========================================================
下層ページ共通（templates/page.html）
---------------------------------------------------------
・タイトル帯 .wta-page-title：構成は「ページタイトル＋パンくず」。
英語ラベル（抜粋欄のSUPPORT等）は2026-09-22に下層ページ全体で
廃止した（テンプレートから抜粋ブロックを削除。トップページの
欧文ラベル .wta-en は残す方針）。抜粋欄のデータ自体は残っているが
どこにも表示されない。
・見出し・本文の装飾は .wta-page 配下にだけ効かせる
（トップページ front-page.html には影響しない）。
========================================================= */
/* --- タイトル帯 --- */
.wta-page-title {
background: linear-gradient(135deg, var(--bg-cream), var(--bg-cream-2));
border-bottom: 1px solid #ECE5D4;
padding-top: 60px; padding-bottom: 56px; /* 左右はhas-global-paddingに任せる */
text-align: center;
}
h1.wta-page-title__h {
font-size: clamp(25px, 4vw, 34px); font-weight: 800;
color: var(--color-primary); line-height: 1.45; margin: 0;
}
/* --- 本文エリア（幅800pxに制約。テンプレート側で指定） --- */
.wta-page .wp-block-post-content {
padding-top: 56px; padding-bottom: 88px; /* 左右はhas-global-paddingに任せる */
display: flow-root; /* 回り込み画像（alignright）が本文エリア外にはみ出さないように */
}
/* --- 本文の見出し ---
h2＝節見出し：ベージュの下線＋青緑の短いアクセントバー
h3＝小見出し：青緑の左バー
h4＝項目見出し：青緑の小さな角マーク＋濃青緑の文字（h3のグループ内の各項目。例：/support/ の寄附の使途・方法）
h5＝h4の下の細目（例：振込元の金融機関別） */
.wta-page .wp-block-post-content h2 {
font-size: clamp(21px, 2.8vw, 26px); color: var(--color-primary);
line-height: 1.5; margin: 64px 0 22px;
padding-bottom: 10px; border-bottom: 2px solid var(--bg-cream-2);
position: relative;
}
.wta-page .wp-block-post-content h2::after {
content: ""; position: absolute; left: 0; bottom: -2px;
width: 56px; height: 2px; background: var(--color-primary);
}
.wta-page .wp-block-post-content > h2:first-child { margin-top: 0; }
.wta-page .wp-block-post-content h3 {
font-size: 18.5px; color: var(--color-primary-dk); line-height: 1.5;
border-left: 4px solid var(--color-primary); padding-left: 12px;
margin: 40px 0 14px;
}
.wta-page .wp-block-post-content h4 {
font-size: 16.5px; color: var(--color-primary-dk); line-height: 1.5;
position: relative; padding-left: 18px; margin: 32px 0 10px;
}
.wta-page .wp-block-post-content h4::before {
content: ""; position: absolute; left: 2px; top: .5em;
width: 8px; height: 8px; border-radius: 2px; background: var(--color-primary);
}
.wta-page .wp-block-post-content h3 + h4 { margin-top: 20px; } /* グループ見出し直後の項目は詰める */
.wta-page .wp-block-post-content h5 {
font-size: 15.5px; color: #26221D; margin: 26px 0 8px;
}
.wta-page .wp-block-post-content h6 {
font-size: 14px; color: #8A857D; letter-spacing: .04em; margin: 24px 0 8px;
text-transform: none; /* 親テーマのh6大文字化（uppercase）を打ち消す */
}
/* --- 本文の文字まわり --- */
.wta-lead { font-size: 17px; line-height: 2; } /* リード文（段落に追加クラス） */
.wta-statement { /* 理念・ミッションなどの主要文（段落に追加クラス） */
background: var(--bg-cream); border-radius: 10px; padding: 24px 28px;
font-size: 17.5px; font-weight: 700; line-height: 2;
color: var(--color-primary-dk); font-feature-settings: "palt";
}
.wta-note { font-size: 12.5px; color: #8A857D; } /* 注記・補足（段落に追加クラス） */
.wta-page .wp-block-post-content a:not(.wp-block-button__link) {
color: var(--color-primary); font-weight: 700;
text-decoration: underline; text-underline-offset: 3px;
}
.wta-page .wp-block-post-content a:not(.wp-block-button__link):hover {
color: var(--color-accent);
}
.wta-page .wp-block-post-content li { margin: 6px 0; }
.wta-page .wp-block-post-content li::marker { color: var(--color-primary); font-weight: 700; }
/* --- 本文中の図版（画像ブロックに追加クラス wta-figure）--- */
.wta-page .wta-figure img { border-radius: 12px; }
/* 右寄せ（alignright）の図版：後続テキストを左に回り込ませる（QA指摘 2026-09-16）。
スマホでは回り込みをやめて全幅に戻す */
.wta-page .wp-block-post-content .wta-figure.alignright {
float: right; margin: 6px 0 18px 26px;
}
@media (max-width: 640px) {
.wta-page .wp-block-post-content .wta-figure.alignright { float: none; margin: 18px 0; }
.wta-page .wp-block-post-content .wta-figure.alignright img { width: 100% !important; height: auto; }
}
/* --- 整形済みテキスト・引用・区切り線 --- */
.wta-page .wp-block-post-content pre {
background: var(--bg-cream); border: 1px solid #E8E0CE; border-radius: 8px;
padding: 16px 18px; font-size: 14px; line-height: 1.8;
overflow-x: auto; white-space: pre-wrap;
}
.wta-page .wp-block-post-content blockquote {
border-left: 4px solid var(--color-secondary); background: var(--bg-cream);
margin: 20px 0; padding: 14px 20px; border-radius: 0 8px 8px 0;
}
.wta-page .wp-block-post-content hr {
border: 0; border-top: 1px solid #E3DCCC; margin: 40px auto;
}
/* --- 事業チップ＋見出しの組（事業内容ページ等） ---
チップ（.wta-chip）を節の先頭に置き、直後のh2と近づける。
注意：チップはinline-block（幅＝文字幅）のため、WP本文の自動センタリング
（margin auto !important）の恩恵を受けられず、そのままだと画面左端に張り付く
（QA指摘 2026-09-16）。本文列の左端に揃うよう、列の左余白を自前で計算して
同じ!importantで上書きする。800px＝テンプレートのcontentSize。変えたらここも変える */
.wta-page .wp-block-post-content p.wta-chip {
margin-left: max(calc((100% - 800px) / 2), 0px) !important;
margin-top: 64px;
font-size: 13px; padding: 5px 14px; /* 下層本文では一回り大きく（QA指摘 2026-09-16） */
}
.wta-page .wp-block-post-content p.wta-chip + h2 { margin-top: 10px; }
.wta-page .wp-block-post-content > p.wta-chip:first-child { margin-top: 0; }
/* --- 事業セクション（グループに wta-biz。事業内容ページ）---
1事業＝1グループで包む方式（QA指摘 2026-09-16）。
・flow-root：回り込み画像（float）をグループ内に閉じ込める。
これにより画像はグループ＝本文列の右端に揃い、次の事業に食い込まない
・margin-block-start：事業間の区切りの余白（チップ上のスペース） */
.wta-page .wp-block-post-content > .wta-biz {
display: flow-root;
margin-block-start: 120px;
}
.wta-page .wta-biz > p.wta-chip { margin-top: 0; }
/* ページ内ジャンプ（アンカーつき見出し）の着地位置。
スティッキーヘッダー＋見出し上のチップが隠れない分を確保する。
.wta-biz＝事業内容の各事業、.wta-page h2[id]＝下層ページの本文見出し（/support/の各セクション等） */
.wta-biz h2[id], .wta-page h2[id] { scroll-margin-top: 150px; }
/* --- ステップフロー（グループに wta-flow、中の段落に wta-flow__step）---
「文化を知る→人と出会う→次へ」のような3段の流れ図。
PCは横並び（→）、スマホは縦並び（↓）になる */
.wta-flow { display: flex; gap: 26px; margin: 22px 0; clear: both; /* 回り込み画像の下に回す（横に押し潰されないように） */ }
.wta-flow__step {
flex: 1; background: var(--bg-cream); border: 1px solid #E8E0CE;
border-radius: 10px; padding: 16px 10px; text-align: center;
font-weight: 700; font-size: 14.5px; color: var(--color-primary-dk);
margin: 0 !important; position: relative; display: flex;
align-items: center; justify-content: center; line-height: 1.6;
}
.wta-flow__step:not(:first-child)::before {
content: "→"; position: absolute; left: -21px; top: 50%;
transform: translateY(-50%); color: var(--color-accent); font-weight: 700;
}
@media (max-width: 600px) {
.wta-flow { flex-direction: column; gap: 30px; }
.wta-flow__step:not(:first-child)::before {
content: "↓"; left: 50%; top: -27px; transform: translateX(-50%);
}
}
/* --- 表（コアのテーブルブロック） ---
基本：横罫線メイン。追加クラス wta-table-info を付けると
1列目が項目名（ベージュ地）の情報表になる（振込先・団体概要など） */
.wta-page .wp-block-table table { border-collapse: collapse; width: 100%; font-size: 15px; }
.wta-page .wp-block-table th,
.wta-page .wp-block-table td { border: 1px solid #E3DCCC; padding: 11px 16px; text-align: left; }
.wta-page .wp-block-table th { background: var(--bg-cream); font-weight: 700; }
.wta-page .wta-table-info td:first-child {
background: var(--bg-cream); font-weight: 700; width: 30%; white-space: nowrap;
}
@media (max-width: 600px) {
.wta-page .wta-table-info td:first-child { width: auto; white-space: normal; }
}
/* =========================================================
投稿詳細（templates/single.html）＋ニュース一覧ページ
---------------------------------------------------------
タイトル帯は下層ページ（.wta-page-title）を共用。
日付・カテゴリチップの色は「ニュース」セクションの
.wta-news__date / .wta-news__cat をそのまま使う
========================================================= */
.wta-page-title__meta { margin-top: 14px; } /* 投稿詳細：タイトルの下に日付＋カテゴリ */
/* パンくずリスト（mu-plugin wta-breadcrumb.php のショートコードが出力） */
.wta-breadcrumb { margin-top: 16px; font-size: 12px; color: #8A857D; line-height: 1.8; }
.wta-breadcrumb a { color: #8A857D; text-decoration: none; }
.wta-breadcrumb a:hover { color: var(--color-primary); text-decoration: underline; }
.wta-breadcrumb__sep { margin: 0 8px; opacity: .6; }
.wta-breadcrumb__cur { color: var(--text-beige); }
.wta-single .wp-block-post-content { padding-bottom: 40px; } /* 下は一覧へ戻るリンクが受け持つ */
.wta-single-back { padding-bottom: 80px; }
/* 一覧の本文エリア（home.html / archive.html。post-contentが無いため自前で上下余白） */
.wta-news-body { padding-top: 56px; padding-bottom: 88px; }
/* ニュース一覧ページのページ送り（クエリーページネーション） */
.wta-pagination { margin-top: 36px; font-size: 14.5px; }
.wta-pagination a { color: var(--color-primary); font-weight: 700; text-decoration: none; }
.wta-pagination a:hover { color: var(--color-accent); }
.wta-pagination .page-numbers.current { color: #8A857D; font-weight: 700; }
/* =========================================================
フッター（parts/footer.html）
========================================================= */
.wta-footer {
background: var(--color-primary-dk); color: #fff;
/* 左右paddingはWPのhas-global-paddingに任せる（横に書くとタブレット以下で余白が消える） */
padding-top: 44px; padding-bottom: 18px; font-size: 13px;
}
.wta-footer a { color: #fff; text-decoration: none; }
.wta-footer__row { gap: 28px; }
.wta-footer__name { font-weight: 800; font-size: 16px; margin: 0 0 8px; }
/* ロゴ＋団体名はトップページへのリンク（ヘッダーの .wta-logo と同じ扱い） */
.wta-footer__name a { display: inline-flex; align-items: center; gap: 10px; transition: opacity .2s; }
.wta-footer__name a:hover { opacity: .8; }
/* フッターの白ロゴマーク（logo-d_02_white・添付ID 171）。表示サイズはここで制御 */
.wta-footer__mark { width: 40px; height: 40px; }
.wta-footer__addr { opacity: .75; margin: 0; }
.wta-footer__nav { font-size: 13px; opacity: .9; }
.wta-footer__nav a:hover { text-decoration: underline; }
.wta-sns { display: flex; gap: 10px; margin-top: 10px; }
.wta-sns a {
width: 34px; height: 34px; border-radius: 50%; background: rgba(255,255,255,.18);
display: flex; align-items: center; justify-content: center; color: #FFFFFF;
}
.wta-sns a:hover { background: rgba(255,255,255,.32); }
.wta-footer__cr { text-align: center; margin: 30px 0 0; font-size: 11px; opacity: .6; }
/* --- スマホのハンバーガーメニュー開閉アニメーション ---
コアのナビゲーションブロックはオーバーレイを display 切替で即時表示するため、
開いた瞬間（.is-menu-open 付与時）にアニメーションを走らせる方式。
閉じるときは即座に display:none に戻るコア仕様のため、閉アニメーションは付けられない。
prefers-reduced-motion 時は従来どおり即時表示。 */
@media (prefers-reduced-motion: no-preference) {
.wp-block-navigation__responsive-container.is-menu-open {
animation: wta-menu-fade .25s ease-out both;
}
/* メニュー項目を上から順に少しずつ遅らせて出す */
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container > .wp-block-navigation-item {
animation: wta-menu-item .35s ease-out both;
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container > .wp-block-navigation-item:nth-child(1) { animation-delay: .08s; }
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container > .wp-block-navigation-item:nth-child(2) { animation-delay: .14s; }
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container > .wp-block-navigation-item:nth-child(3) { animation-delay: .20s; }
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container > .wp-block-navigation-item:nth-child(4) { animation-delay: .26s; }
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container > .wp-block-navigation-item:nth-child(5) { animation-delay: .32s; }
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container > .wp-block-navigation-item:nth-child(n+6) { animation-delay: .38s; }
}
@keyframes wta-menu-fade {
from { opacity: 0; }
to { opacity: 1; }
}
@keyframes wta-menu-item {
from { opacity: 0; transform: translateY(14px); }
to { opacity: 1; transform: none; }
}
/* フッター下部の規約系リンク（プライバシーポリシー等） */
.wta-footer__legal { text-align: center; margin: 30px 0 0; font-size: 12.5px; }
.wta-footer__legal a { color: #fff; opacity: .85; text-decoration: underline; text-underline-offset: 3px; }
.wta-footer__legal a:hover { opacity: 1; }
.wta-footer__legal + .wta-footer__cr { margin-top: 8px; }
/* ============================================================
お問い合わせフォーム（Contact Form 7 の出力に適用）
項目・メール文面は管理画面「お問い合わせ」で編集する。ここは見た目のみ。
wta-form__* はフォームテンプレート側に書いたクラス。
============================================================ */
.wta-form__row { margin: 0 0 24px; }
.wta-form__row label { display: block; font-weight: 700; font-size: 15px; color: var(--color-primary-dk); }
.wta-form__row .wpcf7-form-control-wrap { display: block; margin-top: 8px; font-weight: 400; }
/* 必須・任意バッジ */
.wta-form__req, .wta-form__opt {
display: inline-block; font-size: 11px; font-weight: 700; color: #fff;
border-radius: 4px; padding: 1px 8px; margin-left: 6px; vertical-align: 2px;
}
.wta-form__req { background: var(--color-accent); }
.wta-form__opt { background: #A9A294; }
/* 入力欄。font-size 16px未満はiOSでフォーカス時に画面が拡大されるため下げない */
.wpcf7-form input[type="text"], .wpcf7-form input[type="email"], .wpcf7-form input[type="tel"],
.wpcf7-form select, .wpcf7-form textarea {
width: 100%; box-sizing: border-box; font-size: 16px;
padding: 12px 14px; border: 1px solid #CFC6B0; border-radius: 8px; background: #FFFFFF;
}
.wpcf7-form textarea { min-height: 200px; }
.wpcf7-form input:focus, .wpcf7-form select:focus, .wpcf7-form textarea:focus {
outline: 2px solid var(--color-primary); outline-offset: -1px; border-color: var(--color-primary);
}
/* 同意チェックと送信ボタン */
.wta-form__consent { text-align: center; margin: 30px 0 8px; font-size: 14.5px; }
.wta-form__consent input[type="checkbox"] { width: 17px; height: 17px; accent-color: var(--color-primary); }
.wta-form__submit { text-align: center; margin: 18px 0 0; }
.wta-form__submit .wpcf7-submit {
display: inline-block; padding: 14px 60px; border: 0; border-radius: 999px; cursor: pointer;
font-weight: 700; font-size: 16px; background: var(--color-accent); color: #fff;
}
.wta-form__submit .wpcf7-submit:hover { background: #A93318; }
/* CF7がボタン直後に挿入するスピナー（送信中表示）は非表示時も幅を取り、
ボタンがセンターから左にずれる原因になる。ボタンの下の行に逃がして中央配置 */
.wta-form__submit .wpcf7-spinner { display: block; margin: 10px auto 0; }
/* バリデーション・送信結果メッセージをパレットに合わせる */
.wpcf7-not-valid-tip { color: var(--color-accent); font-size: 13px; margin-top: 4px; }
form.wpcf7-form .wpcf7-response-output {
border: 2px solid var(--color-primary); border-radius: 8px;
padding: 14px 18px; margin: 28px 0 0; text-align: center;
}
form.wpcf7-form.invalid .wpcf7-response-output,
form.wpcf7-form.failed .wpcf7-response-output { border-color: var(--color-accent); color: var(--color-accent); }
/* 団体概要：代表者名の右に置くnoteリンク（アイコン＋「（代表個人のnote）」） */
.wta-table-info a.wta-note-link {
display: inline-flex; align-items: center; gap: 4px;
margin-left: .9em; font-size: .9em; white-space: nowrap;
}
.wta-table-info a.wta-note-link img { width: 16px; height: 16px; flex: none; }
@media (max-width: 640px) {
/* スマホは代表者名の下の行に置く（セル幅が狭く、1行に収まらないため） */
.wta-table-info a.wta-note-link { display: flex; width: fit-content; margin: 4px 0 0; white-space: normal; }
}
/* ------------------------------------------------------------
非表示ユーティリティ（2026-09-28）
本文に残したまま一時的に隠すブロックに「追加CSSクラス」で付ける。
例：参加・相談・寄附ページの「支援事業を見る」「緊急・特別支援を見る」ボタン
（寄附募集案件が成立したらクラスを外し、リンク先を該当案件へ変更して復帰）
------------------------------------------------------------ */
.wta-is-hidden { display: none !important; }