/* =====================================================================
   支える（support.mirainoironowa.com）— 2026-10-23 ぬりえのサイトと同じデザイン
   見本「14 SUPPORT」「15 ORGANIZER」。色はブランドカラーガイドの 6 色と、紺・金だけ。
   brand2026.css（ぬりえのサイトの共通の見た目を写したもの）のあとに読む。
   ===================================================================== */
:root,:root[data-theme="dark"],:root[data-theme="light"]{
  --paper:#fffdfb;--paper-2:#eef4fb;--ink:#233650;--ink-soft:#4f5d78;--ink-faint:#6b7590;
  --rule:rgba(35,54,80,.12);--shu:#233650;--gold:#c9a35e;--card:#FFFFFF;
  --shadow:0 12px 34px -16px rgba(35,54,80,.26),0 2px 8px rgba(35,54,80,.04);
  --serif:"Noto Serif JP","Hiragino Mincho ProN","Yu Mincho",serif;
  --sans:"Noto Sans JP","Hiragino Kaku Gothic ProN",sans-serif;
  color-scheme:light}
@media (prefers-color-scheme:dark){:root{--paper:#fffdfb;--paper-2:#eef4fb;--ink:#233650;--ink-soft:#4f5d78;--ink-faint:#6b7590;--rule:rgba(35,54,80,.12);--shu:#233650;--gold:#c9a35e;--card:#fff}
  .brandlogo,.menulogo,.flogo{background:none!important}}
body{background:url(/img2026/wc_full.webp) center top/100% auto repeat-y,#fffdfb;color:var(--ink);font-family:var(--serif)}
@media(max-width:760px){body{background-size:240% auto}}
.wrap{max-width:none;padding:0}
:is(.wrap,body)>*:not(.wrap):not(.top):not(.hero):not(footer):not(.sticky):not(.form):not(script){max-width:44rem;margin-left:auto;margin-right:auto;padding-left:clamp(18px,5vw,0px);padding-right:clamp(18px,5vw,0px)}
@media(max-width:760px){:is(.wrap,body)>*:not(.wrap):not(.top):not(.hero):not(footer):not(.sticky):not(.form):not(script){margin-left:18px;margin-right:18px;padding-left:0;padding-right:0}}

/* ---------- 帯（ヘッダー） ---------- */
.top{position:fixed;top:0;left:0;right:0;z-index:65;margin:0;padding:12px clamp(16px,3vw,40px);display:flex;align-items:center;gap:24px;
  background:rgba(255,253,251,.94);border-bottom:1px solid rgba(201,163,94,.6);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.top>a:first-child{display:flex;text-decoration:none;margin-right:auto}
.brandlogo{display:none}
.top .b-txt{display:flex;flex-direction:column;align-items:center;line-height:1}
.top .b-name{font-family:var(--display);font-weight:600;font-size:1.42rem;letter-spacing:.04em;color:var(--navy);white-space:nowrap}
.top .b-kana{font-family:var(--serif);font-size:.58rem;letter-spacing:.34em;color:var(--ink-soft);margin-top:5px;margin-right:-.34em}
.hnav{display:flex;gap:clamp(22px,3vw,44px);font-family:var(--serif);font-size:.86rem;letter-spacing:.1em}
.hnav a{color:var(--navy);text-decoration:none;font-weight:500;position:relative}
.hnav a.on::after,.hnav a:hover::after{content:"";position:absolute;left:0;right:0;bottom:-5px;height:1px;background:var(--gold-d)}
html[data-lang="en"] .hnav{font-family:var(--display);font-weight:600;font-size:.95rem;letter-spacing:.08em}
/* 言葉の札：JP | EN（いまの言葉を太字）。押すと、いまの仕組みで切り替わる */
.langone{position:static;font-size:0;border:0;border-left:1px solid var(--gold-d);border-radius:0;background:transparent;padding:2px 0 2px 20px;
  display:flex;align-items:center;gap:.5rem;color:#8a93a8;cursor:pointer}
.langone::before{content:"JP";font-family:var(--display);font-size:.92rem;letter-spacing:.14em}
.langone::after{content:"EN";font-family:var(--display);font-size:.92rem;letter-spacing:.14em;padding-left:.55rem;border-left:1px solid #b9c0cf;line-height:1}
html[data-lang="ja"] .langone::before,html[data-lang="en"] .langone::after{color:var(--navy);font-weight:700}
.langtog{display:none!important}
.menubtn{position:static;display:none}
.menubtn i{background:var(--navy)}
@media(max-width:1020px){
  .hnav{display:none}
  .top{padding:9px 14px;gap:12px}
  .langone{border-left:0;padding-left:0}
  .menubtn{display:flex}
}
@media(max-width:640px){.top .b-name{font-size:1.16rem}.top .b-kana{font-size:.52rem}}
.menu{background:#fffdfb}
.menulogo{display:none}
.menu .mlist{margin-top:1.6rem;border-top:1px solid rgba(201,163,94,.55)}
.mlist a{color:var(--navy);font-family:var(--serif);border-bottom:1px solid var(--rule)}
.mlist a.mcur{background:#eef4fb;color:var(--navy);border-left:3px solid var(--gold-d)}
.menuclose{color:var(--navy)}

/* ---------- 最初の画面：文は左、丸い作品は右 ---------- */
.hero{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.9fr);grid-template-areas:"h1 art" "p1 art" "p2 art" "cta art" "mt art" "cl art";
  align-items:start;column-gap:clamp(20px,4vw,64px);text-align:left;
  padding:calc(64px + clamp(30px,5vw,64px)) max(24px,calc((100vw - 1140px)/2)) clamp(40px,5vw,64px);
  background:url(/img2026/wc_hero.webp) center/100% 100% no-repeat}
.hero>h1{grid-area:h1}
.hero>.promise[style]{grid-area:p1}
.hero>.childline{grid-area:cl}
.hero>.cta{grid-area:cta}
.hero>.microtrust{grid-area:mt}
.hero>.promise:not([style]){grid-area:p2}
.hero>.heroimg{grid-area:art;align-self:center}
.heroimg{position:relative;margin:0 auto!important;max-width:440px;width:100%}
.heroimg img{position:relative;z-index:1;width:100%;aspect-ratio:1;object-fit:cover;border-radius:50%;border:0;background:#fff;
  box-shadow:0 0 0 7px rgba(255,255,255,.9),0 0 26px 10px rgba(248,187,154,.45),0 26px 46px -22px rgba(35,54,80,.4)}
.sp-lines{position:absolute;inset:-10%;width:120%;height:120%;z-index:0;overflow:visible;pointer-events:none}
.sp-lines path{vector-effect:non-scaling-stroke}
.heroimg figcaption{position:relative;z-index:1;margin-top:1.2rem;font-family:var(--serif);color:var(--ink-soft)}
.hero h1{font-family:var(--serif);font-weight:500;color:var(--navy);font-size:clamp(2rem,3.6vw,3.1rem)!important;line-height:1.35;letter-spacing:.04em;margin:.4rem 0 1.4rem}
html[data-lang="en"] .hero h1{font-family:var(--display);font-weight:600;letter-spacing:0;line-height:1.1}
.promise{font-family:var(--serif);color:var(--navy);margin:0 0 1.2rem;max-width:34rem}
.childline{margin:2rem 0 0;font-family:var(--serif);font-style:normal;color:var(--ink);padding:1.2rem 1.4rem;background:rgba(255,255,255,.8);border-left:2px solid var(--gold-d);border-radius:0 10px 10px 0}
.childline .who{color:var(--gold-t)}
@media(max-width:860px){
  .hero{grid-template-columns:1fr;grid-template-areas:"art" "h1" "p1" "p2" "cta" "mt" "cl";text-align:center;padding:calc(56px + 30px) 20px 40px;background-size:cover}
  .heroimg{max-width:280px;margin-bottom:1.6rem!important}
  .promise{margin-left:auto;margin-right:auto}
  .childline{text-align:left}
}

/* ---------- ボタン ---------- */
.cta{display:flex;align-items:center;justify-content:center;gap:12px;background:var(--navy);color:#fff;border-radius:999px;font-family:var(--serif);font-weight:500;
  letter-spacing:.1em;padding:1rem 2rem;box-shadow:0 10px 24px -12px rgba(35,54,80,.6);max-width:24rem}
.cta::after{content:"\2192";font-family:var(--sans)}
.cta:hover{background:var(--navy-2);box-shadow:0 12px 26px -12px rgba(35,54,80,.6)}
:is(.wrap,body)>.cta{margin:0 auto!important}
.microtrust,.doubt,.stopnote{color:var(--ink-soft);font-family:var(--serif)}
.hero .microtrust{text-align:left}
@media(max-width:860px){.hero .cta{margin:0 auto}.hero .microtrust{text-align:center}}
.stopnote a{color:var(--navy);border-bottom-color:var(--gold-d)}

/* ---------- 見出し・本文 ---------- */
hr.divider{background:linear-gradient(90deg,transparent,var(--gold-d),transparent);height:1px;max-width:120px!important;margin:3.4rem auto!important}
h2{font-family:var(--serif);font-weight:500;color:var(--navy);font-size:clamp(1.35rem,2.6vw,1.9rem);letter-spacing:.08em;text-transform:none;line-height:1.55}
html[data-lang="en"] h2{font-family:var(--display);font-weight:600;letter-spacing:.02em}
.lead{font-family:var(--serif);color:var(--navy)}
p{color:var(--ink)}
.pull{font-family:var(--serif);font-weight:500;color:var(--navy)}
.story,.ps{background:#fff;border:0;border-radius:14px;box-shadow:var(--shadow)}
.qsmall,.quote{font-family:var(--serif);font-style:normal;color:var(--ink)}
.qsmall .who,.quote .who,.childline .who{color:var(--gold-t);font-family:var(--serif)}
.quote{border-left-color:var(--gold-d)}
.effects li{color:var(--ink)}
.effects li::before{background:var(--b-gold);box-shadow:0 0 0 2px var(--gold-d) inset}
.threeR b{color:var(--navy)}

/* ---------- 支援のカード：タブと金額の四角 ---------- */
.form{max-width:52rem;margin:2.6rem auto!important;background:#fff;border:0;border-radius:16px;box-shadow:var(--shadow);padding:clamp(1.4rem,4vw,2.6rem)}
@media(max-width:760px){.form{margin:2rem 14px!important}}
.toggle{max-width:none;border:0;border-radius:10px 10px 0 0;background:#eef4fb;padding:0;overflow:hidden;margin-bottom:1.6rem}
.toggle button{border-radius:0;padding:.9rem;font-family:var(--serif);font-weight:500;color:var(--navy);font-size:.95rem}
.toggle button[aria-pressed="true"]{background:var(--navy);color:#fff;box-shadow:none;position:relative}
.toggle button[aria-pressed="true"]::after{content:"";position:absolute;left:50%;bottom:-7px;margin-left:-7px;border:7px solid transparent;border-bottom:0;border-top-color:var(--navy)}
.toggle{overflow:visible}
.tiers{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.tier{flex-direction:column;align-items:center;justify-content:flex-start;text-align:center;gap:.4rem;border:1px solid rgba(35,54,80,.22);border-radius:8px;background:#fff;padding:1rem .7rem}
.tier:hover{border-color:var(--navy)}
.tier.rec{background:#eef4fb;border:1.5px solid var(--navy);box-shadow:none}
.tier.rec .badge{background:var(--navy);left:50%;transform:translateX(-50%);white-space:nowrap}
.tier .amt{font-family:var(--display);font-weight:600;font-size:1.9rem;color:var(--navy);min-width:0;line-height:1.1}
.tier .amt .per{font-family:var(--sans);font-size:.72rem;color:var(--ink-soft)}
.tier .imp{font-size:.78rem;color:var(--ink-soft)}
.tier .go{display:none}
.tier:last-child{grid-column:1/-1;flex-direction:row;justify-content:center;gap:1rem;border-color:var(--navy);padding:.9rem 1rem}
.tier:last-child .amt{font-family:var(--serif);font-weight:500;font-size:1.05rem}
.tier:last-child::after{content:"\2192";color:var(--navy);font-family:var(--sans)}
.free-amt{color:var(--navy)!important}
@media(max-width:640px){.tiers{grid-template-columns:repeat(2,minmax(0,1fr))}.tier .amt{font-size:1.6rem}}

/* ---------- 使われ方：3 つの丸と、白い板 ---------- */
.trust{background:#fff;border:0;border-radius:14px;box-shadow:var(--shadow);padding:2rem clamp(1.2rem,4vw,2.4rem)!important}
.trust h2{text-align:center!important}
.sp-icons{display:flex;justify-content:center;gap:clamp(14px,5vw,48px);margin:0 0 1.6rem}
.sp-icons img{width:clamp(76px,12vw,120px);aspect-ratio:1;border-radius:50%;object-fit:cover}
.trust li{color:var(--ink)}
.trust li::before{color:var(--gold-d)}
.trust li a{border-bottom-color:var(--gold-d)}

/* ---------- 数字 ---------- */
.proofnums b{font-family:var(--display);font-weight:600;color:var(--navy);font-size:2.2rem}
.proofnums>div+div{border-left:1px solid rgba(201,163,94,.6);padding-left:1.6rem}
.ps .lbl,.sign{color:var(--gold-t)}
.sign{font-family:var(--display)}

/* ---------- 携帯の貼りつくボタン ---------- */
.sticky{background:rgba(255,253,251,.95);border-top:1px solid rgba(201,163,94,.5)}
.sticky .cta{max-width:none}

/* ---------- 運営者情報 ---------- */
.sp-rings{display:block;width:clamp(170px,26vw,300px);margin:calc(64px + 30px) 0 -40px auto;
  -webkit-mask-image:radial-gradient(ellipse 60% 60% at 55% 45%,#000 55%,transparent 100%);mask-image:radial-gradient(ellipse 60% 60% at 55% 45%,#000 55%,transparent 100%)}
.wrap>h1{font-family:var(--serif);font-weight:500;color:var(--navy);font-size:clamp(2rem,4vw,3.2rem);letter-spacing:.06em;margin-top:0}
html[data-lang="en"] .wrap>h1{font-family:var(--display);font-weight:600;letter-spacing:0}
.wrap>.sub{font-family:var(--display);font-weight:600;letter-spacing:.32em;color:var(--gold-t)}
.intro{font-family:var(--serif);color:var(--navy)}
dl{display:grid;grid-template-columns:minmax(120px,.32fr) 1fr;background:#fff;border:0;border-radius:14px;box-shadow:var(--shadow);overflow:hidden}
dt{background:#eef4fb;color:var(--navy);font-family:var(--serif);font-weight:500;letter-spacing:.08em;font-size:.86rem;padding:1.1rem 1.2rem;border-bottom:1px solid var(--rule)}
dd{margin:0;padding:1.1rem 1.4rem;border-bottom:1px solid var(--rule);font-size:.95rem;color:var(--ink)}
dt:last-of-type,dd:last-of-type{border-bottom:0}
dd a{color:var(--navy);border-bottom:1px solid var(--gold-d);text-decoration:none}
@media(max-width:560px){dl{grid-template-columns:1fr}dt{padding:.8rem 1.1rem;border-bottom:0}dd{padding:.6rem 1.1rem 1.1rem}}
.back{display:inline-flex;gap:10px;color:var(--navy);border-bottom:1px solid var(--navy);font-family:var(--serif)}

/* ---------- フッター：紺（ぬりえのサイトと同じ形） ---------- */
footer{max-width:none!important;margin:4rem 0 0!important;padding:clamp(3rem,7vw,4.4rem) 22px 36px!important;border:0;text-align:center;
  background:radial-gradient(ellipse 70% 60% at 50% 0%,#2e4566 0%,#233650 60%,#1d2d44 100%);color:#c9d3e3;font-family:var(--sans)}
footer .flogo{display:none}
footer .mf-band{margin:0 auto 2.4rem;max-width:760px}
footer .mf-brand{display:inline-flex;align-items:baseline;gap:.6rem;text-decoration:none;color:#eef1f7}
footer .mf-mark{font-family:var(--serif);font-size:2.5rem;line-height:1;position:relative;top:-.08em}
footer .mf-name{font-family:var(--display);font-weight:500;font-size:1.6rem;line-height:1;letter-spacing:.3em;margin-right:-.3em}
footer .mf-one{margin:.9rem 0 0;font-family:var(--serif);font-size:.9rem;letter-spacing:.16em;color:#dfe5ef!important}
footer .mf-rule{width:72px;height:1px;margin:1.6rem auto 0;background:linear-gradient(90deg,transparent,#d9b77a,transparent)}
footer .dots{display:flex;gap:7px;justify-content:center;margin:0 0 14px}
footer .dots i{width:7px;height:7px;border-radius:50%}
footer .fname{font-family:var(--display);font-size:1.15rem;letter-spacing:.14em;color:#eef1f7!important;margin:0 0 1rem}
footer .flinks a{color:#eef1f7;font-family:var(--serif);font-size:.8rem}
footer .flinks a:hover{color:#f3d9a4}
footer .fpol a{color:#9fb0c9;border-bottom-color:rgba(238,241,247,.25)}
footer .fcopy{color:#c9d3e3!important}
@media(max-width:880px){body{padding-bottom:0}footer{padding-bottom:140px!important}}
:is(.wrap,body)>.cta{max-width:24rem!important}

/* 2026-10-24 祥史さん「明朝だった文章がゴシックに変わるところが多々あります」→ 日本語の文はすべて明朝にそろえる（数字・矢印は除く） */
.promise,.effects li,.tier .imp,.trust li,.proofnums span,.ps,.ps .lbl,.heroimg figcaption,.childline .who,.qsmall .who,.quote .who,.microtrust,.doubt,.stopnote,.setup,section p,section li,footer,.proof p,.stiny,.sticky .stiny{font-family:var(--serif)}

/* ---------- ご支援の届け先（2026-10-23 下書き） ---------- */
.donee{margin-top:2.6rem!important;text-align:center}
.donee .lead{max-width:36rem;margin:0 auto 1.6rem}
.dn-draft{display:inline-block;font-size:.72rem;letter-spacing:.16em;color:var(--gold-t)!important;border:1px dashed var(--gold-d);border-radius:999px;padding:.15rem .9rem;margin:0 0 1rem}
.dn-card{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:0;background:#fff;border-radius:14px;box-shadow:var(--shadow);overflow:hidden;text-align:left}
.dn-photo{display:flex;align-items:center;justify-content:center;min-height:220px;background:#eef4fb;border-right:1px dashed rgba(35,54,80,.25);
  color:var(--ink-soft);font-size:.8rem;letter-spacing:.06em;padding:1rem;text-align:center}
.dn-body{padding:1.6rem 1.8rem}
.dn-name{font-family:var(--serif);font-weight:500;color:var(--navy)!important;font-size:1.3rem;margin:0 0 .4rem;padding-left:14px;border-left:2px solid var(--gold-d)}
html[data-lang="en"] .dn-name{font-family:var(--display);font-weight:600;font-size:1.5rem}
.dn-name small{display:block;font-size:.78rem;color:var(--ink-soft);margin-top:.2rem;font-family:var(--sans)}
.dn-body p{font-size:.92rem;line-height:1.95}
.dn-nums{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin:1.4rem 0 .6rem}
.dn-n{background:#fff;border-radius:12px;box-shadow:var(--shadow);padding:1rem .6rem}
.dn-n b{font-family:var(--display);font-weight:600;font-size:2.1rem;color:var(--navy);line-height:1.1}
.dn-n small{font-size:.8rem;color:var(--navy)}
.dn-n .dn-l{font-size:.76rem;color:var(--ink-soft)!important;margin:.3rem 0 0;line-height:1.6}
.dn-n .dn-s{font-size:.72rem;color:var(--gold-t)!important;margin:.2rem 0 0}
.dn-note,.dn-reg{font-size:.78rem;color:var(--ink-soft)!important;margin:.4rem 0}
.dn-reg a{color:var(--navy);border-bottom:1px solid var(--gold-d);text-decoration:none}
.dn-chk{margin:.5rem 0}
.dn-check{display:inline-block;font-size:.74rem;color:var(--gold-t);background:rgba(246,216,156,.25);border:1px dashed var(--gold-d);border-radius:6px;padding:.2rem .7rem;line-height:1.6}
@media(max-width:760px){
  .dn-card{grid-template-columns:1fr}
  .dn-photo{min-height:150px;border-right:0;border-bottom:1px dashed rgba(35,54,80,.25)}
  .dn-body{padding:1.2rem}
  .dn-nums{grid-template-columns:repeat(2,minmax(0,1fr))}
}
.dn-ok{font-size:.88rem;color:var(--navy)!important;font-family:var(--serif);margin:1rem 0 .4rem}
/* 届け先の写真（看板） */
figure.dn-photo{margin:0;flex-direction:column;gap:.6rem;justify-content:center;background:#eef4fb;border-right:1px solid var(--rule);padding:1.2rem}
figure.dn-photo img{display:block;width:100%;height:auto;aspect-ratio:760/650;object-fit:contain;background:#fff;border-radius:8px;
  box-shadow:0 0 0 5px #fff,0 12px 26px -14px rgba(35,54,80,.4)}
figure.dn-photo figcaption{font-size:.76rem;color:var(--ink-soft);text-align:center;margin-top:.4rem}
figure.dn-photo .dn-check{font-size:.7rem}
@media(max-width:760px){figure.dn-photo{border-right:0;border-bottom:1px solid var(--rule)}}