/* ぐんまきつねぱーく 村役場 */
:root{
  --green:#2F5D46;      /* 役場の緑 */
  --green-dk:#21432F;
  --fox:#FCA838;        /* そんちょの毛色 */
  --cream:#FDF9F0;      /* そんちょのおなか */
  --ink:#281409;        /* 線・目 */
  --tip:#6E4E36;        /* 耳先・手先 */
  --gold:#FCC102;       /* 強調線 */
  --cork:#C9A27A;
  --paper:#FFFEFA;
  --line:#E6DccB;
  --fs:16px;
  --mincho:"Zen Old Mincho",serif;
  --maru:"Zen Maru Gothic",sans-serif;
}
html.big{--fs:19px}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;background:var(--green-dk)}
body{margin:0;background:var(--cream);color:var(--ink);font:500 var(--fs)/1.85 var(--maru);letter-spacing:.02em}
img{max-width:100%;height:auto;display:block}
a{color:var(--green)}
a:focus-visible,button:focus-visible{outline:3px solid var(--gold);outline-offset:3px;border-radius:4px}
.wrap{max-width:1040px;margin:0 auto;padding:0 20px}

/* 上の細い帯：文字サイズ */
.util{background:var(--green-dk);color:#E9F1EA;font-size:12.5px}
.util .wrap{display:flex;justify-content:flex-end;align-items:center;gap:10px;min-height:34px}
.util span{opacity:.8}
.util button{font:700 12.5px var(--maru);background:transparent;color:inherit;border:1px solid rgba(233,241,234,.45);border-radius:3px;padding:1px 9px;cursor:pointer}
.util button[aria-pressed="true"]{background:var(--cream);color:var(--green-dk);border-color:var(--cream)}

/* ヘッダー */
.site{background:var(--green);color:#fff;border-bottom:5px solid var(--fox)}
.site .wrap{display:flex;align-items:center;gap:16px;padding-top:14px;padding-bottom:14px;flex-wrap:wrap}
.brand{display:flex;align-items:center;gap:12px;color:#fff;text-decoration:none;margin-right:auto}
.brand svg{width:52px;height:52px;flex:none}
.brand small{display:block;font:500 11.5px var(--maru);opacity:.85;letter-spacing:.12em}
.brand b{display:block;font:700 22px/1.2 var(--mincho);letter-spacing:.06em}
.gnav{display:flex;flex-wrap:wrap;gap:2px}
.gnav a{color:#fff;text-decoration:none;font-weight:700;font-size:14px;padding:6px 12px;border-radius:3px}
.gnav a:hover,.gnav a[aria-current="page"]{background:rgba(255,255,255,.14)}

/* パンくず */
.crumbs{font-size:13px;color:var(--tip);padding:12px 0 0}
.crumbs a{color:var(--tip)}

/* 見出し（役場の見出し） */
.h2{font:700 1.5em/1.4 var(--mincho);margin:0 0 18px;padding:0 0 8px 14px;border-left:6px solid var(--green);border-bottom:1px solid var(--line)}
section{padding:44px 0 8px}

/* 村長あいさつ */
.greet{display:grid;grid-template-columns:minmax(220px,300px) 1fr;gap:36px;align-items:start}
.portrait{background:var(--paper);border:1px solid var(--line);padding:14px 14px 10px;box-shadow:0 2px 0 var(--line)}
.portrait .ph{background:#F3EBDD;aspect-ratio:1/1;display:grid;place-items:center;overflow:hidden}
.portrait .ph img{width:82%;height:82%;object-fit:contain}
.portrait figcaption{text-align:center;padding-top:10px;line-height:1.5}
.portrait figcaption small{display:block;font-size:12px;color:var(--tip)}
.portrait figcaption b{font:700 20px var(--mincho);letter-spacing:.2em}
.letter{background:var(--paper);border:1px solid var(--line);border-top:4px solid var(--fox);padding:28px 34px 24px;line-height:1.95}
.letter p{margin:0 0 1.1em}
.sign{display:flex;justify-content:flex-end;align-items:center;gap:14px;margin-top:18px;font-family:var(--mincho);font-weight:700;line-height:1.5;text-align:right}
.hanko{width:64px;height:64px;border-radius:50%;border:3px solid #D1452F;color:#D1452F;display:grid;place-items:center;font:700 15px/1.05 var(--mincho);text-align:center;transform:rotate(-8deg);opacity:.9}

/* 掲示板 */
.board{background:var(--cork);background-image:radial-gradient(rgba(110,78,54,.18) 1px,transparent 1.5px);background-size:9px 9px;
  border:12px solid #8B6B4A;border-radius:6px;padding:34px 26px 30px;display:grid;grid-template-columns:repeat(3,1fr);gap:26px;align-items:start}
.notice{background:var(--paper);color:var(--ink);text-decoration:none;padding:20px 18px 18px;position:relative;box-shadow:0 6px 10px rgba(60,35,15,.22);display:block}
.notice:nth-child(1){transform:rotate(-1.6deg)}
.notice:nth-child(2){transform:rotate(1.2deg);margin-top:14px}
.notice:nth-child(3){transform:rotate(-.6deg)}
.notice::before{content:"";position:absolute;top:-8px;left:50%;width:16px;height:16px;margin-left:-8px;border-radius:50%;background:radial-gradient(circle at 35% 35%,#FFE27A,var(--gold) 45%,#B58A00);box-shadow:0 2px 2px rgba(0,0,0,.3)}
.notice .kind{font-size:12px;font-weight:700;color:var(--green)}
.notice h3{font:700 21px/1.35 var(--mincho);margin:2px 0 8px}
.notice p{margin:0;font-size:.9em;line-height:1.7}
.notice img{width:auto;max-width:56%;max-height:190px;object-fit:contain;margin:12px auto 0}
a.notice:hover h3{text-decoration:underline}
.notice.go{border-top:6px solid var(--fox)}

/* おしらせ一覧 */
.news{list-style:none;margin:0;padding:0;border-top:1px solid var(--line)}
.news li{display:grid;grid-template-columns:7.5em 6.5em 1fr;gap:12px;align-items:baseline;padding:13px 4px;border-bottom:1px solid var(--line)}
.news time{font-variant-numeric:tabular-nums;color:var(--tip);font-size:.92em}
.tag{display:inline-block;font-size:12px;font-weight:700;color:#fff;background:var(--green);border-radius:2px;padding:0 8px;text-align:center;line-height:1.9}
.tag.play{background:#C8611F}
.tag.goods{background:var(--tip)}

/* 村のこと */
.story{display:grid;grid-template-columns:1fr 1fr;gap:28px}
.story p{margin:0 0 1em}
.facts{margin:0;display:grid;grid-template-columns:7em 1fr;border-top:1px solid var(--line)}
.facts dt,.facts dd{margin:0;padding:10px 6px;border-bottom:1px solid var(--line)}
.facts dt{font-weight:700;color:var(--green);background:#F6F0E3}

/* 住民名簿 */
.roster{width:100%;border-collapse:collapse;background:var(--paper);font-size:.95em}
.roster caption{text-align:left;font-size:13px;color:var(--tip);padding-bottom:8px}
.roster th,.roster td{border:1px solid var(--line);padding:10px 12px;text-align:left;vertical-align:top}
.roster thead th{background:var(--green);color:#fff;font-weight:700;border-color:var(--green)}
.roster tbody th{font:700 1.05em var(--mincho);white-space:nowrap;width:7em}

/* 特産品 */
.goods-row{display:grid;grid-template-columns:1fr auto;gap:24px;align-items:center;background:var(--paper);border:1px solid var(--line);padding:22px 26px}
.goods-row h3{font:700 22px/1.4 var(--mincho);margin:0 0 4px}
.goods-row p{margin:0}
.stamps{display:flex;flex-wrap:wrap;gap:6px;margin-top:12px}
.stamps img{width:64px;height:64px;object-fit:contain}
.btn{display:inline-block;font:700 16px var(--maru);text-decoration:none;color:#fff;background:#06C755;border-radius:999px;padding:12px 26px;white-space:nowrap}
.btn.fox{background:#C8611F}
.btn:hover{filter:brightness(1.06)}

/* あそびば */
.games{display:grid;grid-template-columns:repeat(2,1fr);gap:24px}
.game{background:var(--paper);border:1px solid var(--line);display:grid;grid-template-rows:auto 1fr;text-decoration:none;color:var(--ink)}
.game .shot{background:#16234A;aspect-ratio:1200/630;overflow:hidden}
.game .shot img{width:100%;height:100%;object-fit:cover}
.game .body{padding:16px 20px 20px}
.game h3{font:700 22px/1.35 var(--mincho);margin:0 0 4px}
.game p{margin:0 0 12px}
.game .play{font-weight:700;color:#C8611F}
a.game:hover h3{text-decoration:underline}
.game.soon{border-style:dashed;background:transparent;display:flex;align-items:center;justify-content:center;text-align:center;padding:30px;min-height:240px;color:var(--tip)}
.game.soon img{width:120px;margin:0 auto 10px;opacity:.9}

/* フッター */
.foot{margin-top:56px;background:var(--green-dk);color:#E9F1EA;font-size:14px}
.foot .wrap{display:grid;grid-template-columns:1fr auto;gap:24px;padding-top:30px;padding-bottom:30px}
.foot b{font:700 18px var(--mincho);letter-spacing:.06em;color:#fff}
.foot p{margin:4px 0}
.foot a{color:#fff}
.sns{display:flex;flex-direction:column;gap:6px;text-align:right}
.copy{border-top:1px solid rgba(255,255,255,.15);text-align:center;font-size:12px;padding:12px 20px;opacity:.85}

@media (max-width:760px){
  .site .wrap{gap:10px}
  .gnav{width:100%;overflow-x:auto;flex-wrap:nowrap;margin:0 -6px}
  .gnav a{white-space:nowrap;padding:6px 10px}
  .greet{grid-template-columns:1fr;gap:20px}
  .portrait{max-width:260px;margin:0 auto}
  .letter{padding:22px 20px 18px}
  .board{grid-template-columns:1fr;border-width:9px;padding:28px 18px}
  .notice:nth-child(2){margin-top:0}
  .news li{grid-template-columns:auto 1fr;gap:4px 10px}
  .news .tag{justify-self:start}
  .news li a{grid-column:1/-1}
  .story{grid-template-columns:1fr}
  .goods-row{grid-template-columns:1fr}
  .games{grid-template-columns:1fr}
  .foot .wrap{grid-template-columns:1fr}
  .sns{text-align:left}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}

/* ようこそ */
.hero{display:grid;grid-template-columns:1fr 300px;gap:28px;align-items:center;padding:40px 0 10px}
.hero-lead{font:700 1.65em/1.65 var(--mincho);margin:0 0 14px}
.hero-sub{margin:0 0 22px;color:var(--tip)}
.hero-img{width:100%;max-width:300px;justify-self:center}
.follow{display:flex;flex-wrap:wrap;gap:10px}
.btn.ig{background:linear-gradient(45deg,#F09433,#DC2743 55%,#BC1888)}
.btn.x{background:var(--ink)}
.hero-game{display:inline-block;margin-top:16px;font-weight:700;color:#C8611F}
/* 村長の一日 */
.day{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.day li{background:var(--paper);border:1px solid var(--line);padding:16px 12px 14px;text-align:center;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;gap:10px}
.day img{max-height:120px;width:auto;object-fit:contain}
.day span{font-weight:700;font-size:.92em;line-height:1.5;word-break:keep-all;overflow-wrap:anywhere}
.ps{margin:16px 0 0;font-size:.92em;color:var(--tip)}
@media (max-width:760px){
  .hero{grid-template-columns:1fr;padding-top:26px}
  .hero-img{max-width:170px;grid-row:1}
  .hero-lead{font-size:1.3em}
  .hero-lead br,.hero-sub br{display:none}
  .follow .btn{flex:1 1 100%;text-align:center}
  .day{grid-template-columns:repeat(2,1fr);gap:12px}
}
.more{text-align:right;margin:14px 0 0;font-weight:700}