/* =========================================================
   みい山アニメ化を支持する会
   白ベース × パステル。作品画像・ロゴは一切使用しない。
   ========================================================= */

:root{
  /* ベース */
  --bg:        #FDFCFA;
  --bg-alt:    #FBF8F6;
  --surface:   #FFFFFF;

  /* パステル（装飾専用） */
  --pink:      #F7C6D0;
  --mint:      #BFE3E0;
  --lavender:  #D9CBEB;
  --neon:      #E85D8A;   /* 装飾のみ。テキストには使わない（AA不足） */

  /* テキスト・UI（AA以上を確認済み） */
  --ink:       #2E2A33;   /* 13.70:1 */
  --ink-sub:   #5F5867;   /*  6.65:1 */
  --accent:    #C8386A;   /*  4.84:1 / 白文字 4.96:1 */
  --accent-dk: #B32C5E;   /*  5.96:1 */

  --line:      #EBE5E8;
  --radius:    18px;
  --radius-lg: 26px;
  --shadow:    0 1px 2px rgba(46,42,51,.04), 0 8px 24px -12px rgba(46,42,51,.14);
  --shadow-lg: 0 2px 4px rgba(46,42,51,.04), 0 24px 56px -24px rgba(46,42,51,.20);

  --font-head: "Zen Maru Gothic", "Hiragino Maru Gothic ProN", system-ui, sans-serif;
  --font-body: "Noto Sans JP", system-ui, -apple-system, sans-serif;

  --wrap: 1080px;
}

*,*::before,*::after{ box-sizing:border-box; }

html{ scroll-behavior:smooth; }
@media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto; } }

body{
  margin:0;
  font-family:var(--font-body);
  font-weight:400;
  font-size:16px;
  line-height:1.9;
  letter-spacing:.02em;
  color:var(--ink);
  background:var(--bg);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}

/* 微細グレイン */
body::after{
  content:""; position:fixed; inset:0; z-index:1; pointer-events:none;
  opacity:.28; mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.32'/%3E%3C/svg%3E");
}

/* ---------- 背景装飾 ---------- */
.bg-decor{ position:fixed; inset:0; z-index:0; pointer-events:none; overflow:hidden; }

/* 大きな色の広がり（ぼかしは控えめにして形を残す） */
.mesh{ position:absolute; border-radius:50%; filter:blur(58px); opacity:.42; }
.mesh-1{ width:46vw; height:46vw; background:var(--pink);     top:-12vw; left:-10vw; }
.mesh-2{ width:40vw; height:40vw; background:var(--mint);     top:28vh;  right:-14vw; }
.mesh-3{ width:38vw; height:38vw; background:var(--lavender); bottom:-8vw; left:22vw; }

/* 水玉模様：CSSタイルなので画面幅に関係なく必ず表示される。密度は控えめに */
.dots{
  position:absolute; inset:0;
  background-image:
    radial-gradient(circle, rgba(238,150,178,.28) 0 7px, transparent 7.5px),
    radial-gradient(circle, rgba(143,211,206,.24) 0 6px, transparent 6.5px);
  background-size:420px 420px, 560px 560px;
  background-position:40px 30px, 300px 260px;
}
/* 輪郭だけのリング（水玉に奥行きを出す） */
.rings{
  position:absolute; inset:0;
  background-image:
    radial-gradient(circle, transparent 0 13px, rgba(238,150,178,.3) 13px 15px, transparent 15.5px);
  background-size:720px 720px;
  background-position:180px 120px;
}

.bokeh{ position:absolute; inset:0; width:100%; height:100%; opacity:.58; }

/* ---------- レイアウト ---------- */
.wrap{ width:min(100% - 40px, var(--wrap)); margin-inline:auto; position:relative; z-index:2; }
.wrap.narrow{ width:min(100% - 40px, 760px); }

.section{ padding:96px 0; position:relative; z-index:2; }
.section.alt{ background:rgba(251,248,246,.72); backdrop-filter:blur(6px); border-block:1px solid var(--line); }

.skip-link{
  position:absolute; left:-9999px; top:0; z-index:100;
  background:var(--ink); color:#fff; padding:12px 20px; border-radius:0 0 12px 0;
}
.skip-link:focus{ left:0; }

.visually-hidden{
  position:absolute!important; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}

/* ---------- タイポ ---------- */
h1,h2,h3{ font-family:var(--font-head); font-weight:700; letter-spacing:.01em; line-height:1.5; margin:0; }

h1{ font-size:clamp(28px, 5.4vw, 50px); line-height:1.42; margin-bottom:28px; }
h2{ font-size:clamp(22px, 3.4vw, 32px); margin-bottom:16px; }
h3{ font-size:18px; margin-bottom:10px; }

p{ margin:0 0 16px; }
p:last-child{ margin-bottom:0; }
strong{ font-weight:700; }

/* 本文リンクは水玉が透けた背景でもAAを満たすよう濃い方を使う */
a{ color:var(--accent-dk); text-underline-offset:3px; text-decoration-thickness:1px; }
a:hover{ color:#96204D; }

.section-lead{ color:var(--ink-sub); margin-bottom:36px; font-size:15px; }
.note{ font-size:13.5px; color:var(--ink-sub); line-height:1.85; }
.center{ text-align:center; }

/* ---------- ヘッダー ---------- */
.site-header{
  position:sticky; top:0; z-index:40;
  background:rgba(253,252,250,.82); backdrop-filter:blur(14px) saturate(1.3);
  border-bottom:1px solid var(--line);
}
.header-inner{ display:flex; align-items:center; justify-content:space-between; gap:16px; height:62px; }
.brand{ display:flex; align-items:center; gap:9px; font-family:var(--font-head); font-weight:700; font-size:14.5px; }
.brand-mark{ width:26px; height:26px; flex:none; }

/* ---------- ボタン ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  font-family:var(--font-head); font-weight:700; font-size:15px; line-height:1;
  padding:15px 30px; border-radius:999px; border:1px solid transparent;
  background:var(--accent); color:#fff; text-decoration:none; cursor:pointer;
  box-shadow:0 6px 18px -8px rgba(200,56,106,.6);
  transition:transform .18s ease, box-shadow .18s ease, background-color .18s ease;
}
.btn:hover{ background:var(--accent-dk); color:#fff; transform:translateY(-2px); box-shadow:0 12px 26px -10px rgba(200,56,106,.62); }
.btn:active{ transform:translateY(0); }
.btn-sm{ padding:10px 20px; font-size:13.5px; }
.btn-lg{ padding:18px 42px; font-size:16.5px; }
.btn-block{ width:100%; }
.btn-ghost{
  background:transparent; color:var(--accent); border-color:rgba(200,56,106,.34); box-shadow:none;
}
.btn-ghost:hover{ background:rgba(200,56,106,.06); color:var(--accent-dk); box-shadow:none; }
.btn[disabled]{ opacity:.5; pointer-events:none; }

:where(a,button,input,select,textarea,summary,details):focus-visible{
  outline:3px solid var(--accent); outline-offset:3px; border-radius:6px;
}

/* ---------- ヒーロー ---------- */
.hero{ padding:96px 0 84px; position:relative; z-index:2; overflow:hidden; }

.hero .wrap{ position:relative; z-index:1; }

/* 見出しとイラストを横並びに。イラストは独立した枠に収め、水玉や文字に重ねない */
.hero-top{ display:flex; align-items:center; gap:clamp(28px, 4vw, 56px); }
.hero-copy{ flex:1 1 auto; min-width:0; }

.hero-art{ flex:0 0 auto; width:clamp(230px, 28vw, 360px); }
.hero-art picture{ display:block; }
.hero-art img{
  display:block; width:100%; height:auto; aspect-ratio:1/1; object-fit:cover;
  border-radius:26px; box-shadow:var(--shadow-lg);
}
.eyebrow{
  display:inline-block; font-family:var(--font-head); font-weight:700; font-size:12.5px;
  letter-spacing:.14em; color:var(--accent-dk);
  /* 背景のイラスト・水玉が透けるとコントラストが落ちるため不透明にする（4.78:1） */
  background:#FBDCE3;
  padding:8px 18px; border-radius:999px; margin-bottom:26px;
}
.lead{ font-size:clamp(15px,2vw,17.5px); color:var(--ink-sub); line-height:2.05; margin-bottom:20px; }
.lead-strong{
  font-family:var(--font-head); font-weight:700;
  font-size:clamp(17px,2.6vw,23px); line-height:1.75; margin-bottom:44px;
  background:linear-gradient(transparent 62%, var(--pink) 62%);
  display:inline; padding:0 2px; box-decoration-break:clone; -webkit-box-decoration-break:clone;
}

.counter-card{
  margin-top:44px; background:var(--surface); border:1px solid var(--line);
  border-radius:var(--radius-lg); padding:38px 32px; text-align:center; box-shadow:var(--shadow-lg);
}
.counter-num{ font-family:var(--font-head); font-weight:700; line-height:1; color:var(--accent); }
.counter-num span[data-count]{ font-size:clamp(46px,9vw,76px); letter-spacing:-.02em; }
.counter-unit{ font-size:22px; margin-left:6px; }
.counter-label{ font-size:13px; color:var(--ink-sub); letter-spacing:.1em; margin:12px 0 16px; }

/* 募金を募らないことの明示 */
.no-donation{
  display:inline-flex; align-items:center; gap:8px;
  font-size:13px; color:var(--ink); margin:0 auto 24px;
  background:rgba(191,227,224,.42); border:1px solid rgba(143,211,206,.55);
  padding:9px 18px; border-radius:999px; line-height:1.5; text-align:left;
}
.no-donation svg{ width:17px; height:17px; flex:none; color:#14514C; }
.counter-actions{ display:flex; flex-wrap:wrap; gap:12px; justify-content:center; }

/* ---------- 立場 ---------- */
.stance-box{
  background:var(--surface); border:1px solid var(--line); border-left:5px solid var(--pink);
  border-radius:var(--radius); padding:32px 30px; box-shadow:var(--shadow); font-size:15.5px;
}

/* ---------- カード ---------- */
.cards{ display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); gap:22px; }
.card{
  position:relative; background:var(--surface); border:1px solid var(--line);
  border-radius:var(--radius); padding:34px 28px 30px; box-shadow:var(--shadow);
  transition:transform .28s ease, box-shadow .28s ease;
}
.card:hover{ transform:translateY(-4px); box-shadow:var(--shadow-lg); }
.card-num{
  display:inline-block; font-family:var(--font-head); font-weight:700; font-size:12px;
  letter-spacing:.12em; color:var(--accent); background:rgba(247,198,208,.36);
  padding:5px 13px; border-radius:999px; margin-bottom:14px;
}
.card p{ font-size:14.5px; color:var(--ink-sub); line-height:1.95; }
.card p strong{ color:var(--ink); }

/* ---------- Q&A / アコーディオン ---------- */
.qa{ display:flex; flex-direction:column; gap:12px; }
.qa details{
  background:var(--surface); border:1px solid var(--line);
  border-radius:var(--radius); box-shadow:var(--shadow); overflow:hidden;
}
.qa summary{
  cursor:pointer; list-style:none; padding:22px 56px 22px 26px; position:relative;
  font-family:var(--font-head); font-weight:700; font-size:15.5px; line-height:1.65;
}
.qa summary::-webkit-details-marker{ display:none; }
.qa summary::after{
  content:""; position:absolute; right:26px; top:50%; width:10px; height:10px;
  border-right:2.5px solid var(--accent); border-bottom:2.5px solid var(--accent);
  transform:translateY(-70%) rotate(45deg); transition:transform .25s ease;
}
.qa details[open] summary::after{ transform:translateY(-25%) rotate(225deg); }
.qa summary:hover{ background:rgba(247,198,208,.14); }
.qa-body{ padding:0 26px 26px; font-size:14.5px; color:var(--ink-sub); line-height:2; }
.qa-body strong{ color:var(--ink); }

/* ---------- テーブル ---------- */
.table-scroll{ overflow-x:auto; border-radius:var(--radius); border:1px solid var(--line); background:var(--surface); box-shadow:var(--shadow); }
table{ width:100%; border-collapse:collapse; font-size:14.5px; min-width:520px; }
thead th{
  background:rgba(191,227,224,.34); font-family:var(--font-head); font-weight:700;
  text-align:left; padding:15px 18px; white-space:nowrap;
}
tbody td{ padding:16px 18px; border-top:1px solid var(--line); vertical-align:top; color:var(--ink-sub); }
tbody td:first-child{ color:var(--ink); font-weight:500; white-space:nowrap; }
.tag{ display:inline-block; font-size:12px; font-weight:700; padding:4px 12px; border-radius:999px; white-space:nowrap; }
.tag-pos{ background:rgba(191,227,224,.6); color:#14514C; }
.tag-neg{ background:rgba(217,203,235,.6); color:#4A3A66; }

/* ---------- タイムライン ---------- */
.timeline{ list-style:none; margin:0; padding:0 0 0 26px; border-left:2px solid var(--line); }
.timeline li{ position:relative; padding:0 0 30px 24px; }
.timeline li::before{
  content:""; position:absolute; left:-33px; top:6px; width:13px; height:13px;
  border-radius:50%; background:var(--surface); border:2.5px solid var(--lavender);
}
.timeline li.tl-now::before{ border-color:var(--accent); background:var(--accent); }
.tl-date{ display:block; font-family:var(--font-head); font-weight:700; font-size:13px; color:var(--accent); margin-bottom:5px; }
.timeline p{ font-size:14.5px; color:var(--ink-sub); }

/* ---------- フォーム ---------- */
.sign-section{ position:relative; }
.form{
  background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-lg);
  padding:38px 34px; box-shadow:var(--shadow-lg);
}
.field{ margin-bottom:24px; }
.field > label{ display:block; font-family:var(--font-head); font-weight:700; font-size:14.5px; margin-bottom:9px; }
.req,.opt{ font-size:11px; font-weight:700; padding:3px 9px; border-radius:999px; margin-left:7px; vertical-align:middle; }
.req{ background:rgba(200,56,106,.12); color:var(--accent-dk); }
.opt{ background:#F1EEF0; color:var(--ink-sub); }

input[type=text], select, textarea{
  width:100%; font-family:var(--font-body); font-size:16px; color:var(--ink);
  padding:14px 16px; border:1.5px solid var(--line); border-radius:12px;
  background:var(--bg); transition:border-color .18s ease, box-shadow .18s ease;
}
input[type=text]:focus, select:focus, textarea:focus{
  border-color:var(--accent); box-shadow:0 0 0 4px rgba(200,56,106,.1); outline:none;
}
textarea{ resize:vertical; line-height:1.85; }
select{ appearance:none; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%235F5867' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 16px center; padding-right:42px; }

.grid-2{ display:grid; grid-template-columns:1fr 1fr; gap:18px; }
.checkbox-field{ display:flex; align-items:flex-start; gap:11px; }
.checkbox-field input{ width:20px; height:20px; margin-top:2px; flex:none; accent-color:var(--accent); }
.checkbox-field label{ font-size:14px; line-height:1.75; color:var(--ink-sub); }
.hint{ font-size:12.5px; color:var(--ink-sub); margin:7px 0 0; }
.turnstile-slot:not(:empty){ margin-bottom:22px; }

.form-error{
  background:rgba(200,56,106,.08); border:1px solid rgba(200,56,106,.28);
  color:var(--accent-dk); border-radius:12px; padding:13px 16px; font-size:14px; margin-bottom:18px;
}

.thanks{
  background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-lg);
  padding:52px 34px; text-align:center; box-shadow:var(--shadow-lg);
}
.thanks-mark{ width:62px; height:62px; margin-bottom:18px; }
.thanks h3{ font-size:21px; margin-bottom:12px; }
.thanks p{ color:var(--ink-sub); margin-bottom:26px; }

/* ---------- 賛同コメント ---------- */
.voices{ columns:2; column-gap:20px; }
.voice{
  break-inside:avoid; background:var(--surface); border:1px solid var(--line);
  border-radius:var(--radius); padding:22px 24px; margin-bottom:20px; box-shadow:var(--shadow);
}
.voice p{ font-size:14.5px; color:var(--ink-sub); line-height:1.95; margin-bottom:12px; }
.voice footer{ font-size:12.5px; color:var(--ink); font-weight:500; }
.voice footer span{ color:var(--ink-sub); font-weight:400; }

/* ---------- 出典 ---------- */
.sources{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:11px; }
.sources li{ padding-left:20px; position:relative; font-size:14.5px; }
.sources li::before{ content:""; position:absolute; left:0; top:11px; width:7px; height:7px; border-radius:50%; background:var(--mint); }

/* ---------- フッター ---------- */
.site-footer{ background:var(--bg-alt); border-top:1px solid var(--line); padding:66px 0 44px; position:relative; z-index:2; }
.site-footer h2{ font-size:17px; margin:36px 0 14px; }
.disclaimer{
  background:rgba(217,203,235,.24); border:1px solid rgba(217,203,235,.55);
  border-radius:var(--radius); padding:20px 24px; font-size:14px; line-height:1.9;
}
.privacy-dl{ margin:0; font-size:14px; }
.privacy-dl dt{ font-family:var(--font-head); font-weight:700; margin-top:14px; }
.privacy-dl dd{ margin:4px 0 0; color:var(--ink-sub); line-height:1.9; }
.copyright{ margin-top:46px; padding-top:24px; border-top:1px solid var(--line); font-size:12.5px; color:var(--ink-sub); text-align:center; }

/* =========================================================
   運営者アプリのバナー
   PC = フッター最下部 / SP = 画面下部固定
   ========================================================= */

.app-icon{ flex:none; display:block; }
.app-icon svg{ display:block; width:100%; height:100%; border-radius:22%; box-shadow:0 2px 6px rgba(46,42,51,.16); }
.app-name{ font-family:var(--font-head); font-weight:700; color:#E4007F; line-height:1.3; }
.app-tag{ font-weight:700; color:#E60012; line-height:1.3; }
.app-heart{ margin-left:1px; }
.app-dl{ font-family:var(--font-head); font-weight:700; color:var(--ink); line-height:1.3; }

/* --- PC：フッター内バナー --- */
.app-banners{ display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); gap:16px; margin-top:6px; }
.app-banner{
  display:flex; align-items:center; gap:14px; text-decoration:none;
  background:var(--surface); border:1px solid var(--line); border-radius:var(--radius);
  padding:16px 20px; box-shadow:var(--shadow);
  transition:transform .2s ease, box-shadow .2s ease;
}
.app-banner:hover{ transform:translateY(-2px); box-shadow:var(--shadow-lg); }
.app-banner .app-icon{ width:52px; height:52px; }
.app-banner .app-text{ display:flex; flex-direction:column; gap:3px; min-width:0; }
.app-banner .app-name{ font-size:20px; }
.app-banner .app-tag{ font-size:12.5px; }
.app-banner .app-dl{ margin-left:auto; font-size:13px; white-space:nowrap; padding-left:10px; }

/* --- SP：画面下部固定バナー --- */
.app-bar{
  display:none;
  position:fixed; left:0; right:0; bottom:0; z-index:60;
  gap:8px; padding:8px 44px 8px 8px;
  background:rgba(255,255,255,.96); backdrop-filter:blur(12px);
  border-top:1px solid var(--line);
  box-shadow:0 -6px 20px -12px rgba(46,42,51,.4);
  padding-bottom:calc(8px + env(safe-area-inset-bottom));
}
.app-bar.is-hidden{ display:none !important; }
.app-bar-item{
  flex:1 1 0; min-width:0;
  display:flex; align-items:center; gap:8px; text-decoration:none;
  background:var(--bg); border:1px solid var(--line); border-radius:12px; padding:7px 9px;
}
.app-bar-item .app-icon{ width:34px; height:34px; }
.app-bar-text{ display:flex; flex-direction:column; gap:1px; min-width:0; }
.app-bar-text .app-name{ font-size:12.5px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.app-bar-text .app-dl{ font-size:10.5px; color:var(--ink-sub); }
.app-bar-close{
  position:absolute; top:50%; right:8px; transform:translateY(-50%);
  width:30px; height:30px; padding:0; display:flex; align-items:center; justify-content:center;
  background:transparent; border:none; border-radius:50%; color:var(--ink-sub); cursor:pointer;
}
.app-bar-close:hover{ background:rgba(46,42,51,.07); color:var(--ink); }
.app-bar-close svg{ width:17px; height:17px; }

@media (max-width:900px){
  .app-bar{ display:flex; }
  /* 固定バナーが本文や署名ボタンを隠さないようにする */
  body.has-app-bar{ padding-bottom:74px; }
  .app-banners{ display:none; }
  .site-footer h2.app-banners-heading{ display:none; }
}

/* ---------- スクロール演出 ---------- */
.reveal{ opacity:0; transform:translateY(20px); transition:opacity .7s cubic-bezier(.22,1,.36,1), transform .7s cubic-bezier(.22,1,.36,1); }
.reveal.is-visible{ opacity:1; transform:none; }

@media (prefers-reduced-motion: reduce){
  .reveal{ opacity:1; transform:none; transition:none; }
  .card:hover{ transform:none; }
  .btn:hover{ transform:none; }
  *{ animation-duration:.001ms!important; transition-duration:.001ms!important; }
}

/* ---------- レスポンシブ ---------- */
@media (max-width:900px){
  /* 縦積みにして、イラストは中央に小さく置く */
  .hero-top{ flex-direction:column; align-items:stretch; gap:32px; }
  .hero-art{ width:min(230px, 62%); align-self:center; }
}

@media (max-width:760px){
  .section{ padding:68px 0; }
  .hero{ padding:56px 0 56px; }
  .hero-art{ width:min(200px, 56%); }
  .hero-art img{ border-radius:22px; }
  .form{ padding:28px 20px; }
  .counter-card{ padding:30px 20px; }
  .grid-2{ grid-template-columns:1fr; }
  .voices{ columns:1; }
  .stance-box{ padding:26px 22px; }
  .qa summary{ padding:19px 48px 19px 20px; font-size:15px; }
  .qa-body{ padding:0 20px 22px; }
  .card{ padding:28px 22px 26px; }
  .counter-actions .btn{ width:100%; }
}