/* =========================================================
   おかえりのいえ ― 配色・フォントのテーマ（theme.css / v10）
   ---------------------------------------------------------
   ・全ページで最後に読み込み、色とフォントだけを上書きします。
     レイアウト・HTML・画像・データには触れていません。
   ・フォント：サイト全体を Zen Maru Gothic に統一（ロゴは画像のため対象外）。
   ・色：アイボリーの背景はそのまま。ロゴの色と合うよう、
     コーラル／ターコイズ／マスタード／グリーンの4色をアクセントに使います。
     文字に使う色は、いずれも背景に対して 4.5:1 以上のコントラストです。
   ========================================================= */

:root {
  /* 本文：やわらかいダークブラウン */
  --text-dark: #43352a;
  --text-mid: #6a5848;

  /* アクセント4色（明るい色＝面・線用／濃い色＝文字・白文字の背景用） */
  --c-coral: #ef746b;      --c-coral-ink: #c4493f;   --c-coral-bg: #cd4a40;   --c-coral-pale: #fdeceA;
  --c-aqua: #58bfcb;       --c-aqua-ink: #1e7f8b;    --c-aqua-bg: #1c808d;    --c-aqua-pale: #e7f4f5;
  --c-mustard: #f3b23a;    --c-mustard-ink: #946509; --c-mustard-pale: #fcf1d8;
  --c-green: #7db37d;      --c-green-ink: #4f7f4f;

  --t-accent-ink: var(--c-coral-ink);   /* 英字の小見出し（Baby Room など） */
  --t-green-pale: var(--c-aqua-pale);   /* 「ご支援・寄付」の背景：淡いグリーン → 淡いターコイズ */
}

/* ── ① フォントを Zen Maru Gothic に統一 ─────────────── */
html body,
html body *:not(svg):not(svg *) {
  font-family: 'Zen Maru Gothic', 'Hiragino Maru Gothic ProN', 'ヒラギノ丸ゴ ProN', 'BIZ UDPGothic', 'Meiryo', sans-serif !important;
}
body { font-weight: 500; }   /* 本文は読みやすい太さ */
/* 見出し・カードタイトルは太く（明朝体で使っていた字間を、丸ゴシック向けに少し詰める） */
h1, h2, h3, h4,
.t-title, .section-title, .t-subtitle, .program-title, .info-card-title, .y-card-title,
.r-feature-title, .letter-preview-title, .a-title, .s-name, .statement, .feature-lead,
.volunteer-catch, .contact-title, .values-title, .schedule-title, .hero3-catch, .entry-what {
  font-weight: 700;
}
.t-title, .section-title { letter-spacing: 0.03em; }
.hero3-catch-b { letter-spacing: 0.04em; }

/* ── ② HERO直下の3つの導線をカラフルに（配置・リンク・内容は同じ） ── */
.entry .entry-link,
.entry .entry-link:first-child,
.entry .entry-link + .entry-link { color: #fff; }
.entry .entry-link:nth-child(1) { background: var(--c-coral-bg); }
.entry .entry-link:nth-child(2) { background: var(--c-aqua-bg); color: #fff; }
.entry .entry-link:nth-child(3) { background: var(--c-mustard); color: #3b2a14; }   /* 黄色は白文字だと読みにくいため、こげ茶の文字 */
.entry .entry-link:nth-child(2) .entry-who { color: #fff; opacity: 0.92; }
.entry .entry-link:nth-child(3) .entry-who { color: #3b2a14; opacity: 0.85; }
.entry .entry-arrow,
.entry .entry-link:nth-child(2) .entry-arrow { background: rgba(255,255,255,0.22); color: #fff; }
.entry .entry-link:nth-child(3) .entry-arrow { background: rgba(59,42,20,0.12); color: #3b2a14; }
.entry .entry-link:hover { filter: brightness(1.05) saturate(1.05); }
@media (min-width: 900px) {
  /* 下端に少し濃い色の帯（むすびえのタブを参考に、控えめに） */
  .entry .entry-link:nth-child(1) { box-shadow: inset 0 -5px 0 #b43c33; }
  .entry .entry-link:nth-child(2) { box-shadow: inset 0 -5px 0 #156a75; }
  .entry .entry-link:nth-child(3) { box-shadow: inset 0 -5px 0 #d99a22; }
}

/* HEROの写真の下端をゆるやかな曲線に（写真の色はそのまま） */
#hero .hero3-slides,
#hero .hero3-veil { clip-path: ellipse(150% 100% at 50% 0%); }
/* HEROと次のセクションの境目に、4色の細いライン */
#hero .entry::after {
  height: 3px;
  bottom: -1px;
  z-index: 0;
  background: linear-gradient(90deg,
    var(--c-coral) 0 25%, var(--c-aqua) 25% 50%, var(--c-mustard) 50% 75%, var(--c-green) 75% 100%);
  opacity: 0.9;
}

/* HEROのボタン */
.hero3-btn--primary { color: var(--c-coral-ink); }
.hero3-sub .hero3-btn--primary { background: var(--c-coral-bg); color: #fff; }
.hero3-sub .hero3-btn--primary:hover { background: #b8403a; }
.hero3-sub .hero3-tag { border-bottom-color: var(--c-mustard); }
.hero3-dot.is-active::before { background: var(--c-coral); }

/* ── ③ サイト全体の色使い（本文セクションは控えめに） ── */
/* ナビ：主要ボタンはコーラル、「読みもの」はグリーンの枠のまま */
.nav-cta a { background: var(--c-coral-bg); }
.nav-cta a:hover { background: #b8403a; }
.nav-cta a.nav-link-sub { background: transparent; color: var(--c-green-ink); }
.nav-cta a.nav-link-sub:hover, .nav-cta a.nav-link-sub[aria-current="page"] { background: #edf3ea; color: var(--c-green-ink); }

/* セクションの英字ラベル：セクションごとに4色を順に */
.section-label { color: var(--c-green-ink); }
#about .section-label     { color: var(--c-coral-ink); }   #about .section-label::before     { background: var(--c-coral); }
#information .section-label { color: var(--c-aqua-ink); }  #information .section-label::before { background: var(--c-aqua); }
#reports .section-label   { color: var(--c-mustard-ink); } #reports .section-label::before   { background: var(--c-mustard); }
#letter .section-label    { color: var(--c-coral-ink); }   #letter .section-label::before    { background: var(--c-coral); }
#support .section-label   { color: var(--c-aqua-ink); }    #support .section-label::before   { background: var(--c-aqua); }
#volunteer .section-label { color: var(--c-mustard-ink); } #volunteer .section-label::before { background: var(--c-mustard); }
#access .section-label    { color: var(--c-green-ink); }   #access .section-label::before    { background: var(--c-green); }

/* 大切にしていること：番号を4色に */
.values-list li:nth-child(1) .values-no { color: var(--c-coral-ink); }
.values-list li:nth-child(2) .values-no { color: var(--c-aqua-ink); }
.values-list li:nth-child(3) .values-no { color: var(--c-mustard-ink); }
.values-list li:nth-child(4) .values-no { color: var(--c-green-ink); }
.about-tags li:nth-child(1)::before { background: var(--c-coral); }
.about-tags li:nth-child(2)::before { background: var(--c-aqua); }
.about-tags li:nth-child(3)::before { background: var(--c-mustard); }
.about-tags li:nth-child(4)::before { background: var(--c-green); }

/* 活動のご案内：3枚のカードのタグ色と「詳しく見る」ボタンを、導線と同じ3色に */
#information [data-guide="okaeri"] .info-card-btn   { background: var(--c-coral-bg); }
#information [data-guide="daberiba"] .info-card-btn { background: var(--c-aqua-bg); }
#information [data-guide="schedule"] .info-card-btn { background: var(--c-mustard); color: #3b2a14; }
#information .info-card-btn:hover { filter: brightness(1.06); }
#information .tag-okaeri   { background: var(--c-coral-pale); color: var(--c-coral-ink); }
#information .tag-teens    { background: var(--c-aqua-pale); color: var(--c-aqua-ink); }
#information .tag-schedule { background: var(--c-mustard-pale); color: var(--c-mustard-ink); }
.guide-more > summary { color: var(--c-aqua-ink); }

/* 活動の記録：カテゴリ文字・矢印 */
.r-row-cat, .r-row-arrow { color: var(--c-mustard-ink); }
.r-row:hover .r-row-title, .r-feature:hover .r-feature-title { color: var(--c-coral-ink); }

/* 「ご支援・寄付」の方法の番号、お問い合わせの枠 */
.ways--numbered .way:nth-child(1) .way-title::before { color: var(--c-coral-ink); }
.ways--numbered .way:nth-child(2) .way-title::before { color: var(--c-aqua-ink); }
.ways--numbered .way:nth-child(3) .way-title::before { color: var(--c-mustard-ink); }
.contact { background: var(--c-mustard-pale); }
.volunteer-catch { color: var(--c-coral-ink); }
#supporters .s-type { color: var(--c-aqua-ink); border-color: rgba(30,127,139,0.4); }
#supporters .s-controls button { border-color: var(--c-aqua-ink); color: var(--c-aqua-ink); }
#supporters .s-controls button:hover:not(:disabled) { background: var(--c-aqua-bg); color: #fff; }

/* 読みもの一覧・記事：タブとリンクの色 */
.y-tabs [role="tab"][aria-selected="true"] { color: var(--c-coral-ink); }
.y-tabs [role="tab"]:hover { color: var(--c-coral-ink); }
.y-textlink { color: var(--c-coral-ink); }
#reports .y-textlink { color: var(--c-coral-ink); }
.y-more { color: var(--c-coral-ink); border-color: var(--c-coral-ink); }
.y-more:hover { background: var(--c-coral-bg); color: #fff; }
.y-prose li::marker { color: var(--c-coral); }
.y-prose a { color: var(--c-aqua-ink); }
.a-pager a span { color: var(--c-coral-ink); }

/* LINEのボタンはLINEらしいグリーンのまま（.t-btn--line・.btn-primary は変更なし） */

/* ── 丸ゴシックは字幅が少し広いため、改行・折り返しを防ぐ微調整 ── */
/* 小さいスマホ（〜400px）：ナビのロゴ文字とボタンを少し詰めて1行に */
@media (max-width: 400px) {
  nav { padding: 0 0.8rem; }
  .nav-logo span { font-size: 0.86rem; letter-spacing: 0.02em; }
  .nav-cta { gap: 0.4rem; }
  .nav-cta a { padding: 6px 10px; font-size: 0.72rem; letter-spacing: 0.02em; white-space: nowrap; }
}
@media (max-width: 340px) {
  .nav-logo img { width: 30px; height: 30px; }
  .nav-logo span { font-size: 0.8rem; }
  .nav-cta a { padding: 5px 8px; font-size: 0.68rem; }
  .t-btn { font-size: 0.8rem; padding: 0 16px; letter-spacing: 0.02em; }
}
/* PCの導線タブ：900〜1199pxでは文字を少し小さく */
@media (min-width: 900px) and (max-width: 1199px) {
  .entry .entry-what { font-size: 1.12rem; letter-spacing: 0.03em; }
}
.entry .entry-what, .info-card-btn, .y-tabs [role="tab"], .t-btn, .hero3-btn { white-space: nowrap; }

/* =========================================================
   v11：配色の再調整（やわらかく、統一感のある色に）
   ・基本色：コーラル #DF8178／スカイブルー #6CB8C4／ハニーイエロー #E8B958
            アイボリー #FBF7F0／淡いミント #EAF4F0／ダークブラウン #46382F
   ・面に使う色はやわらかいトーン。上に載る文字はダークブラウンで統一
     （白文字だとこのトーンでは読みにくいため）。
   ・文字として使う色は、濃いめの同系色（アイボリー・ミント地で 4.5:1 以上）。
   ・グリーンは落ち着いたセージ系にして、主張を弱める。
   ========================================================= */
:root {
  --text-dark: #46382f;
  --text-mid: #6b5a4e;

  --c-coral: #df8178;   --c-coral-bg: #e6928a;  --c-coral-ink: #a9584f;  --c-coral-pale: #fbe9e5;
  --c-aqua: #6cb8c4;    --c-aqua-bg: #6cb8c4;   --c-aqua-ink: #2f7884;   --c-aqua-pale: #e6f3f5;
  --c-mustard: #e8b958; --c-mustard-ink: #8a6316; --c-mustard-pale: #fbf0d9;
  --c-green: #9cc3ae;   --c-green-ink: #4a7660;
  --c-mint: #eaf4f0;

  /* 既存のグリーン（ボタン・ラベルなど）を、落ち着いたセージ系に */
  --green: #4a7660;
  --green-light: #6f957f;
  --green-pale: #eaf4f0;
  --h3-green: #4a7660;
  --h3-green-deep: #3f6853;

  --t-green-pale: var(--c-mint);   /* 「ご支援・寄付」の背景：淡いミント */
}

/* HERO下の3つの導線：やわらかい3色＋ダークブラウンの文字（4.7〜6.2 : 1） */
.entry .entry-link,
.entry .entry-link:first-child,
.entry .entry-link + .entry-link { color: var(--text-dark); }
.entry .entry-link:nth-child(1) { background: var(--c-coral-bg); color: var(--text-dark); }
.entry .entry-link:nth-child(2) { background: var(--c-aqua-bg); color: var(--text-dark); }
.entry .entry-link:nth-child(3) { background: var(--c-mustard); color: var(--text-dark); }
.entry .entry-link .entry-who,
.entry .entry-link:nth-child(2) .entry-who,
.entry .entry-link:nth-child(3) .entry-who { color: var(--text-dark); opacity: 0.85; }
.entry .entry-arrow,
.entry .entry-link:nth-child(2) .entry-arrow,
.entry .entry-link:nth-child(3) .entry-arrow { background: rgba(255,255,255,0.55); color: var(--text-dark); }
.entry .entry-link:hover { filter: brightness(1.04); }
@media (min-width: 900px) {
  .entry .entry-link:nth-child(1) { box-shadow: inset 0 -4px 0 #d27a71; }
  .entry .entry-link:nth-child(2) { box-shadow: inset 0 -4px 0 #57a6b2; }
  .entry .entry-link:nth-child(3) { box-shadow: inset 0 -4px 0 #d6a645; }
}
#hero .entry::after { opacity: 0.75; }

/* ボタン：やわらかいコーラル＋ダークブラウンの文字 */
.nav-cta a { background: var(--c-coral-bg); color: var(--text-dark); }
.nav-cta a:hover { background: #ec9f97; }
.hero3-btn--primary { color: var(--c-coral-ink); }
.hero3-sub .hero3-btn--primary { background: var(--c-coral-bg); color: var(--text-dark); }
.hero3-sub .hero3-btn--primary:hover { background: #ec9f97; }
#information [data-guide="okaeri"] .info-card-btn   { background: var(--c-coral-bg); color: var(--text-dark); }
#information [data-guide="daberiba"] .info-card-btn { background: var(--c-aqua-bg); color: var(--text-dark); }
#information [data-guide="schedule"] .info-card-btn { background: var(--c-mustard); color: var(--text-dark); }
/* LINE・申込などのボタン：セージグリーン（白文字 5.2 : 1） */
.t-btn--line, .btn-primary { background: var(--green); }
.t-btn--line:hover, .btn-primary:hover { background: #3f6853; }
.y-more:hover { background: var(--c-coral-bg); color: var(--text-dark); }
#supporters .s-controls button:hover:not(:disabled) { background: var(--c-aqua-bg); color: var(--text-dark); }

/* 「しくみ」の英字ラベル */
#shikumi .section-label { color: var(--c-coral-ink); }
#shikumi .section-label::before { background: var(--c-coral); }
/* お問い合わせの枠 */
.contact { background: var(--c-mustard-pale); }
/* カードの影をやわらかく（おこめーの手描きの線になじむよう控えめに） */
.info-card { box-shadow: 0 4px 18px rgba(70,56,47,0.08); }
.info-card:hover { box-shadow: 0 12px 30px rgba(70,56,47,0.14); }