/* saPPPoro ─ 札幌の公共の花と緑（hana-sappporo.com）
   ⚠ 静的ファイルだけで作る。PHP・WordPressは置かない（古いWPを狙うボットが今も来る）。
   見た目：ロゴと同じ「黒地に金」を、ヘッダー・見出し・協力業者の帯・フッターに使う。
           本文は読みやすさ優先で明るい地に濃い文字。差し色だけ金にする（自治体の方が読む資料として）。 */
:root{
  --ink:#0c0b09;
  --gold:#d8b76a; --gold-l:#f1dea8; --gold-d:#8a6a22;   /* 金（黒地の上）／金（明るい地の上＝濃いめ） */
  --bg:#f8f5ee; --paper:#ffffff; --text:#26221b; --muted:#6c655a; --line:#e6ddc9;
  --tint:#f3ecdb; --snow:#eef2f5;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --bg:#15130f; --paper:#1d1a14; --text:#ece6d8; --muted:#aaa08e; --line:#332d22;
    --gold-d:#d8b76a; --tint:#241f16; --snow:#1b1d20;
  }
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--text);
  font-family:"Noto Sans JP","Hiragino Kaku Gothic ProN","Yu Gothic",sans-serif;font-size:16px;line-height:1.85}
a{color:var(--gold-d)}
img{max-width:100%;display:block}
.wrap{max-width:1080px;margin:0 auto;padding:0 20px}

/* ── ヘッダー（黒地） ── */
.hd{background:var(--ink);border-bottom:1px solid #2a2418;position:sticky;top:0;z-index:10}
.hd .wrap{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:64px;flex-wrap:wrap}
.logo{display:flex;align-items:center;gap:12px;text-decoration:none;color:var(--gold-l)}
.logo img{height:48px;width:auto}
.logo span{font-size:14px;font-weight:700;letter-spacing:.08em;line-height:1.4}
.logo small{display:block;font-weight:400;font-size:11px;color:var(--gold);letter-spacing:.12em}
.nav{display:flex;gap:18px;flex-wrap:wrap;font-size:13.5px}
.nav a{text-decoration:none;color:#e9e1cd}
.nav a:hover{color:var(--gold)}

/* ── 見出し（黒地に金） ── */
.hero{background:radial-gradient(ellipse at 72% 30%,#2b2414 0%,var(--ink) 62%);color:#efe7d4;padding:60px 0 64px;overflow:hidden}
.hero-in{display:grid;grid-template-columns:1.1fr .9fr;gap:44px;align-items:center}
.eyebrow{font-size:12px;letter-spacing:.24em;color:var(--gold);margin:0 0 14px}
.hero h1{font-size:clamp(28px,5vw,44px);line-height:1.45;margin:0 0 18px;letter-spacing:.05em;color:#fff8e6}
.hero h1 em{font-style:normal;color:var(--gold)}
.hero p.lead{font-size:16.5px;max-width:600px;margin:0 0 28px;color:#ddd3bd}
.hero-key{width:100%;height:auto;border-radius:20px;box-shadow:0 0 0 1px #3a311d,0 24px 60px rgba(0,0,0,.6)}
.btns{display:flex;gap:10px;flex-wrap:wrap}
.btn{display:inline-block;padding:12px 24px;border-radius:999px;text-decoration:none;font-size:14.5px;letter-spacing:.04em;border:1px solid var(--gold)}
.btn.main{background:linear-gradient(180deg,#e7cb85,#c49a3e);color:#1c1609;border-color:#c49a3e;font-weight:700}
.btn.sub{background:transparent;color:var(--gold)}
.btn.sub-l{background:var(--paper);color:var(--gold-d);border-color:var(--gold-d)}

/* ── 本文 ── */
section{padding:60px 0}
section.alt{background:var(--paper);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.h2-en{display:block;font-size:12px;letter-spacing:.26em;color:var(--gold-d);margin-bottom:4px}
h2{font-size:clamp(22px,3.4vw,28px);margin:0 0 10px;letter-spacing:.05em}
.sec-lead{color:var(--muted);margin:0 0 30px;max-width:740px}
h3{font-size:18px;margin:0 0 8px}

/* 案内役（キャラクター）のひとこと */
.guide{display:flex;gap:16px;align-items:center;margin:0 0 26px}
.guide img{width:88px;height:88px;border-radius:50%;object-fit:cover;background:var(--ink);box-shadow:0 0 0 2px var(--gold);flex:0 0 auto}
.guide p{margin:0;background:var(--tint);border:1px solid var(--line);border-radius:14px;padding:12px 16px;font-size:14.5px}

/* 名前 */
.who{display:block;font-size:12px;letter-spacing:.14em;color:var(--gold-d);margin-bottom:2px}
figure{margin:0}
figcaption{text-align:center;font-size:12px;letter-spacing:.12em;margin-top:6px;color:var(--gold-d)}
.who-fig figcaption,.band figcaption{color:var(--gold)}

/* 札幌の1年 */
.year{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.season{background:var(--bg);border:1px solid var(--line);border-top:3px solid var(--gold);border-radius:14px;padding:18px 16px}
.season .when{font-size:12px;letter-spacing:.14em;color:var(--gold-d);font-weight:700}
.season h3{margin:4px 0 8px}
.season ul{margin:0;padding-left:1.15em;font-size:14.5px}
.season.winter{background:var(--snow)}
.note{font-size:12.5px;color:var(--muted);margin-top:14px}

/* できること */
.pillars{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.pillar{display:flex;flex-direction:column;background:var(--paper);border:1px solid var(--line);border-radius:18px;padding:22px 20px;text-decoration:none;color:var(--text);transition:border-color .2s,transform .2s}
.pillar:hover{border-color:var(--gold);transform:translateY(-2px)}
.pillar .top{display:flex;align-items:center;gap:12px;margin-bottom:10px}
.pillar .top img{width:58px;height:58px;border-radius:50%;object-fit:cover;background:var(--ink);box-shadow:0 0 0 2px var(--gold)}
.pillar .no{font-size:12px;letter-spacing:.2em;color:var(--gold-d);display:block}
.pillar h3{font-size:21px;margin:0}
.pillar ul{margin:0 0 14px;padding-left:1.15em;font-size:14.5px;flex:1}
.pillar .more{font-size:13.5px;color:var(--gold-d)}

/* 進め方 */
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.step{border-left:3px solid var(--gold);padding:6px 0 6px 14px}
.step b{display:block;font-size:15.5px}
.step span{font-size:14px;color:var(--muted)}

/* 協力業者（黒地の帯） */
.band{background:var(--ink);color:#e9e1cd}
.band h2{color:#fff8e6}
.band .h2-en{color:var(--gold)}
.band .sec-lead{color:#cfc5ae}
.partner{display:grid;grid-template-columns:220px 1fr;gap:32px;align-items:center}
.partner img{width:100%;height:auto;border-radius:18px}

/* 相談窓口 */
.contact{background:var(--tint);border:1px solid var(--line);border-radius:20px;padding:30px 26px;display:grid;grid-template-columns:1fr 160px;gap:20px;align-items:center}
.contact h2{margin-bottom:4px}
.contact dl{display:grid;grid-template-columns:7em 1fr;gap:6px 12px;margin:14px 0 18px;font-size:15px}
.contact dt{color:var(--muted)}
.contact dd{margin:0}
.contact .pair{display:flex;gap:8px;justify-content:center}
.contact .pair img{width:74px;height:74px;border-radius:50%;object-fit:cover;background:var(--ink);box-shadow:0 0 0 2px var(--gold)}

/* 下層ページの見出し（黒地） */
.page-hd{background:var(--ink);color:#e9e1cd;padding:40px 0 34px}
.page-hd .in{display:grid;grid-template-columns:1fr 150px;gap:24px;align-items:center}
.page-hd .crumb{font-size:12.5px;color:#b9ae95;margin-bottom:8px}
.page-hd .crumb a{color:var(--gold)}
.page-hd h1{font-size:clamp(24px,4.4vw,36px);margin:0 0 10px;color:#fff8e6}
.page-hd h1 .no{color:var(--gold);margin-right:.4em}
.page-hd p{margin:0;max-width:680px;color:#d6ccb6}
.page-hd img{width:150px;height:150px;border-radius:50%;object-fit:cover;box-shadow:0 0 0 2px var(--gold)}
.list{display:grid;grid-template-columns:repeat(2,1fr);gap:14px}
.item{background:var(--paper);border:1px solid var(--line);border-left:3px solid var(--gold);border-radius:14px;padding:18px}
.item p{margin:0;font-size:14.5px}
.tag{display:inline-block;font-size:11.5px;padding:1px 9px;border-radius:999px;background:var(--tint);color:var(--gold-d);border:1px solid var(--line);margin-left:6px;vertical-align:middle}

/* フッター（黒地） */
.ft{padding:34px 0 44px;font-size:13px;color:#b9ae95;background:var(--ink);border-top:1px solid #2a2418}
.ft a{color:var(--gold)}
.ft .fl{display:flex;gap:18px;align-items:center;flex-wrap:wrap}
.ft .fl img{height:44px;width:auto}


/* ── 2026-09-26 追加ページの部品 ── */
/* もっと知る */
.more-links{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.more-links a{display:block;background:var(--paper);border:1px solid var(--line);border-top:3px solid var(--gold);border-radius:14px;padding:16px;text-decoration:none;color:var(--text)}
.more-links a:hover{border-color:var(--gold)}
.more-links b{display:block;font-size:16px;margin-bottom:4px}
.more-links span{font-size:13.5px;color:var(--muted)}
/* 案内役の紹介 */
.chara{display:grid;grid-template-columns:140px 1fr;gap:24px;align-items:center;margin-bottom:22px}
.chara img{width:140px;height:140px;border-radius:50%;object-fit:cover;background:var(--ink);box-shadow:0 0 0 2px var(--gold)}
.chara p{margin:0}
/* 札幌の12か月 */
.months{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.month{background:var(--paper);border:1px solid var(--line);border-top:3px solid var(--gold);border-radius:12px;padding:14px}
.month.winter{background:var(--snow)}
.month .mh{display:flex;align-items:baseline;gap:8px}
.month .mh b{font-size:20px;color:var(--gold-d)}
.month .mh span{font-size:12px;color:var(--muted);letter-spacing:.1em}
.month .md{margin:2px 0 6px;font-size:13px;color:var(--muted)}
.month ul{margin:0;padding-left:1.1em;font-size:14px}
/* こんな場所で */
.places .snow{margin-top:8px;font-size:13.5px;color:var(--muted)}
/* よくある質問 */
.faq details{background:var(--paper);border:1px solid var(--line);border-left:3px solid var(--gold);border-radius:12px;padding:14px 18px;margin-bottom:10px}
.faq summary{cursor:pointer;font-weight:700;list-style:none;display:flex;gap:10px;align-items:baseline}
.faq summary::-webkit-details-marker{display:none}
.faq summary::before{content:"Q";color:var(--gold-d);font-weight:700;font-size:17px}
.faq details[open] summary{color:var(--gold-d)}
.faq details p{padding-left:24px}
.faq details p{margin:10px 0 0;font-size:14.5px}
/* フッターの追加分 */
.ft-proj{color:var(--gold);letter-spacing:.06em}
.ft-note{font-size:11.5px;color:#8f8674;margin-top:6px}
.ft-links{display:flex;flex-wrap:wrap;gap:6px 16px;margin-top:8px}

@media (max-width:860px){
  .more-links{grid-template-columns:repeat(2,1fr)}
  .months{grid-template-columns:repeat(2,1fr)}
  .hero-in{grid-template-columns:1fr;gap:28px}
  .hero-key{max-width:440px;margin:0 auto}
  .year{grid-template-columns:repeat(2,1fr)}
  .pillars{grid-template-columns:1fr}
  .steps{grid-template-columns:repeat(2,1fr)}
  .list{grid-template-columns:1fr}
  .partner{grid-template-columns:140px 1fr;gap:20px}
  .contact{grid-template-columns:1fr}
  .contact .pair{order:-1;justify-content:flex-start}
  .page-hd .in{grid-template-columns:1fr 96px}
  .page-hd img{width:96px;height:96px}
}
@media (max-width:480px){
  .more-links{grid-template-columns:1fr}
  .months{grid-template-columns:1fr}
  .chara{grid-template-columns:96px 1fr;gap:16px}
  .chara img{width:96px;height:96px}
  .wrap{padding:0 16px}
  .hd{position:static}
  .logo img{height:40px}
  .nav{gap:12px;font-size:13px}
  .year{grid-template-columns:1fr}
  .steps{grid-template-columns:1fr}
  .partner{grid-template-columns:1fr}
  .partner img{max-width:200px}
  .contact dl{grid-template-columns:1fr}
  .contact dt{margin-top:6px}
  .guide img{width:64px;height:64px}
  section{padding:46px 0}
  .hero{padding:40px 0 44px}
}

/* ── かんたん試算（2026-09-27）── */
.more-links{grid-template-columns:repeat(auto-fit,minmax(180px,1fr))}
.sim{background:var(--paper);border:1px solid var(--line);border-radius:18px;padding:22px 20px;display:grid;gap:16px}
.sim-q .lbl{display:block;font-size:13px;font-weight:700;color:var(--gold-d);margin-bottom:6px;letter-spacing:.06em}
.sim-q.two{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.sim select,.sim input[type=number]{font:inherit;font-size:15px;padding:8px 10px;border:1px solid var(--line);border-radius:8px;background:var(--bg);color:var(--text)}
.sim select{width:100%;max-width:360px}
.sim input[type=number]{width:110px;text-align:right}
.unit{display:inline-flex;align-items:center;gap:6px}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chips label{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--line);border-radius:999px;padding:7px 14px;cursor:pointer;background:var(--bg);font-size:14px}
.chips label:has(input:checked){border-color:var(--gold);background:var(--tint);font-weight:700}
.chips input,.check input{accent-color:#c49a3e}
.check{display:flex;gap:8px;align-items:center;font-size:14px;cursor:pointer}
.sim-adv summary{cursor:pointer;font-size:13px;color:var(--muted)}
.sim-adv .sim-q{margin-top:10px}
.sim-out{margin-top:22px}
.sim-sum{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-bottom:16px}
.sim-sum div{background:var(--ink);color:#efe7d4;border-radius:14px;padding:14px 16px}
.sim-sum span{display:block;font-size:12px;color:var(--gold);letter-spacing:.08em}
.sim-sum b{font-size:30px;color:#fff8e6;font-variant-numeric:tabular-nums}
.sim-sum small{font-size:14px;color:#d6ccb6}
.tbl-wrap{overflow-x:auto}
.sim-tbl{width:100%;border-collapse:collapse;background:var(--paper);border:1px solid var(--line);border-radius:12px;font-size:14.5px}
.sim-tbl th{text-align:left;font-size:12.5px;color:var(--muted);font-weight:500;padding:8px 12px;border-bottom:1px solid var(--line)}
.sim-tbl td{padding:8px 12px;border-bottom:1px solid var(--line)}
.h3like{font-weight:700;margin:18px 0 8px}
.tl{display:grid;grid-template-columns:repeat(9,1fr);gap:6px}
.tl-m{background:var(--paper);border:1px solid var(--line);border-radius:10px;padding:8px 6px;min-height:70px;font-size:12px}
.tl-m b{display:block;font-size:13px;color:var(--muted);margin-bottom:4px}
.tl-m.on{border-color:var(--gold);background:var(--tint)}
.tl-m.on b{color:var(--gold-d)}
.tl-m span{display:block;line-height:1.5;margin-bottom:3px}
.sim-notes{margin:14px 0 0;padding-left:1.2em;font-size:14px}
.sim-price{margin:16px 0 14px;background:var(--tint);border:1px solid var(--line);border-left:3px solid var(--gold);border-radius:10px;padding:12px 16px;font-size:14.5px}
@media (max-width:860px){.tl{grid-template-columns:repeat(3,1fr)}.sim-sum b{font-size:24px}}
@media (max-width:480px){.sim-q.two{grid-template-columns:1fr}.sim-sum{grid-template-columns:1fr}}

/* ── 運営会社の表・ご依頼の流れ（2026-10-07）── */
.co{display:grid;grid-template-columns:15em 1fr;gap:0;margin:0;max-width:820px;background:var(--paper);border:1px solid var(--line);border-radius:14px;overflow:hidden;font-size:15px}
.co dt,.co dd{margin:0;padding:12px 16px;border-top:1px solid var(--line)}
.co dt{color:var(--muted);background:var(--tint)}
.co dt:first-of-type,.co dt:first-of-type + dd{border-top:0}
.item ul{margin:8px 0 0;padding-left:1.2em;font-size:14.5px}
.item li{margin-bottom:4px}
.list.ask{margin-top:22px}
@media (max-width:600px){
  .co{grid-template-columns:1fr}
  .co dd{border-top:0;padding-top:0}
  .co dt{background:transparent;padding-bottom:4px}
}