/* 物価の現在地：スーパーのレジ台に置かれたレシート、という見立て */
:root{
  --pop:#f1e3ad;      /* やわらかい黄色（地の色） */
  --ink:#1a1814;      /* 印字の黒 */
  --paper:#ffffff;    /* レシートの紙 */
  --shade:#f3f1ea;    /* 紙の上の薄い面 */
  --rule:#b9b5aa;     /* 点線 */
  --up:#d3121f;       /* 値上がり */
  --down:#0057d9;     /* 値下がり */
  --s1:#2a78d6; --up-line:#d3121f; --s2:#eb6834; --s3:#1baf7a; /* 折れ線の3系列 */
  --display:"Dela Gothic One","Hiragino Sans","Yu Gothic",sans-serif;
  --print:"DotGothic16","Hiragino Sans","Yu Gothic",monospace;
  --body:"Zen Kaku Gothic New","Hiragino Sans","Yu Gothic",sans-serif;
}
*{box-sizing:border-box}
html{background:var(--pop)}
body{margin:0;color:var(--ink);font-family:var(--body);font-size:16px;line-height:1.8;-webkit-text-size-adjust:100%;
  background:var(--pop)}
.num{font-variant-numeric:tabular-nums}
.up{color:var(--up)} .down{color:var(--down)}
a{color:inherit}
:focus-visible{outline:3px solid var(--down);outline-offset:2px}
header.top,main,footer{max-width:560px;margin:0 auto;padding:0 18px}

/* 上部 */
header.top{display:flex;justify-content:space-between;align-items:flex-start;padding-top:18px}
.brand{margin:0;font-family:var(--display);font-size:17px;line-height:1.3}
.brand small{display:block;font-family:var(--body);font-weight:500;font-size:11px;letter-spacing:.06em}
.stamp{margin:0;font-family:var(--print);font-size:13px;border:2px solid var(--ink);border-radius:999px;padding:1px 12px;transform:rotate(3deg)}

/* 見出し */
.hero{padding:34px 0 26px}
.hero h1{margin:0;font-family:var(--display);font-weight:400;line-height:1.1}
.h-lead{display:block;font-size:clamp(26px,7.4vw,40px)}
.h-price{display:block;overflow:hidden;color:var(--up);font-size:clamp(48px,15vw,92px);letter-spacing:-.02em;margin:.1em 0 0;white-space:nowrap;max-width:100%}
.h-price small{font-size:.36em;margin-left:.08em;color:var(--ink)}
.h-note{margin:14px 0 0;font-size:15px;font-weight:500;max-width:30em}

/* 紙片（すべての内容はレジ台の上の紙に載る） */
.slip{position:relative;background:var(--paper);padding:26px 20px 30px;margin:0 0 34px;
  box-shadow:0 10px 0 -4px rgba(26,24,20,.16)}
.slip[hidden]{display:none}
.slip::before,.slip::after{content:"";position:absolute;left:0;right:0;height:8px;
  background:linear-gradient(135deg,var(--paper) 50%,transparent 50%) 0 0/8px 8px,linear-gradient(225deg,var(--paper) 50%,transparent 50%) 0 0/8px 8px}
.slip::before{top:-8px;transform:scaleY(-1)}
.slip::after{bottom:-8px}
.slip h2{font-family:var(--display);font-weight:400;font-size:21px;line-height:1.35;margin:0 0 10px}
.lead{margin:0 0 16px;font-size:14.5px}
.fine{font-size:12px;line-height:1.6;margin:14px 0 0;color:#5c584f}

/* レシート */
.receipt{font-family:var(--print);font-size:15px;line-height:1.7;padding-top:30px}
.receipt .r-title{font-family:var(--print);font-size:20px;text-align:center;letter-spacing:.08em;margin:0 0 2px}
.r-center{text-align:center;margin:0}
.r-small{font-size:12.5px;line-height:1.7}
.receipt hr{border:0;border-top:2px dashed var(--rule);margin:14px 0}
.r-items{list-style:none;margin:0;padding:0}
.r-items summary{display:grid;grid-template-columns:1fr auto 4.6em;gap:0 10px;align-items:baseline;cursor:pointer;padding:5px 0;list-style:none}
.r-items summary::-webkit-details-marker{display:none}
.r-items summary:hover .r-name{text-decoration:underline;text-underline-offset:4px}
.r-yen{color:#5c584f;font-size:13.5px;white-space:nowrap}
.r-diff{text-align:right;white-space:nowrap}
.r-more{font-family:var(--body);font-size:13px;line-height:1.7;margin:2px 0 8px;padding:8px 10px;background:var(--shade)}
.r-line{display:flex;justify-content:space-between;gap:12px}
.r-total{font-size:22px;line-height:1.5}
.barcode{height:44px;margin:18px auto 0;width:70%;
  background:repeating-linear-gradient(90deg,var(--ink) 0 2px,transparent 2px 5px,var(--ink) 5px 6px,transparent 6px 8px,var(--ink) 8px 11px,transparent 11px 13px)}

/* 印字されて出てくる動き（最初の1回だけ） */
@media (prefers-reduced-motion:no-preference){
  #receipt{animation:print 1.5s .5s steps(22) both}
  @keyframes print{from{clip-path:inset(0 0 100% 0)}to{clip-path:inset(-10px 0 -20px 0)}}
}

/* 今月のポイント */
.headline{font-size:18px;font-weight:700;line-height:1.55;margin:0 0 6px}
.summary{margin:0;font-size:15px}
.points{list-style:none;margin:18px 0 0;padding:0;display:grid;gap:12px}
.points li{background:var(--pop);padding:12px 14px;font-size:14.5px;line-height:1.7}
.points li:nth-child(odd){transform:rotate(-.6deg)}
.points li:nth-child(even){transform:rotate(.5deg)}
.points strong{display:block;font-family:var(--display);font-weight:400;font-size:16px;margin-bottom:2px}

/* グラフ */
.chart{width:100%}
.chart svg{display:block;overflow:visible}
.axis-label{font-family:var(--print);font-size:12px;fill:#5c584f}
.grid{stroke:#e4e1d8;stroke-width:1}
.zero{stroke:var(--ink);stroke-width:1.5}
.hit{fill:transparent}
.cross{stroke:var(--ink);stroke-width:1;stroke-dasharray:3 3}
.tip{position:fixed;pointer-events:none;background:var(--ink);color:#fff;padding:8px 10px;font-size:12px;display:none;z-index:10;max-width:270px;line-height:1.6}
.legend{display:grid;gap:2px;font-size:13px;margin:10px 0 0}
.sw{display:inline-block;width:14px;height:4px;margin-right:8px;vertical-align:middle}
.sw.s1{background:var(--s1)} .sw.s2{background:var(--s2)} .sw.s3{background:var(--s3)}
.tbl{margin-top:12px;font-size:13px}
.tbl summary{cursor:pointer;display:inline-block;border-bottom:2px solid var(--ink);font-weight:700}
table{border-collapse:collapse;width:100%;margin-top:10px;font-family:var(--print)}
th,td{border-bottom:1px dashed var(--rule);padding:5px 2px;text-align:right;font-weight:400}
thead th{font-family:var(--body);font-size:11px;font-weight:700;line-height:1.3;vertical-align:bottom}
th:first-child{text-align:left}

/* 入力 */
button{font:inherit;cursor:pointer;color:var(--ink)}
.actions{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.actions.center{justify-content:center;margin-top:14px;font-family:var(--body);font-size:13px}
.ghost{background:transparent;border:2px solid var(--ink);padding:5px 12px;font-size:13px;font-weight:700}
.form{display:grid;grid-template-columns:1fr 1fr;gap:12px 14px;margin:16px 0 18px}
.field label{display:block;font-size:14px;font-weight:700;line-height:1.4}
.field .hint{display:block;font-size:11px;font-weight:400;color:#5c584f;min-height:2.8em}
.field .row{display:flex;align-items:center;gap:6px;font-size:13px}
.field input{width:100%;min-width:0;font-family:var(--print);font-size:17px;padding:7px 8px;border:0;border-bottom:2px solid var(--ink);border-radius:0;background:var(--shade);color:var(--ink);text-align:right}
.primary{width:100%;background:var(--up);color:#fff;border:0;padding:14px;font-family:var(--display);font-size:18px;box-shadow:0 5px 0 #8f0b14}
.primary:active{transform:translateY(3px);box-shadow:0 2px 0 #8f0b14}

/* 下部 */
footer{padding-bottom:48px;font-size:12.5px;line-height:1.75}
footer h2{font-family:var(--display);font-weight:400;font-size:17px;margin:6px 0 8px}
.how{margin:0 0 16px;padding-left:1.4em;font-size:13.5px}
footer p{margin:0 0 8px}

@media (max-width:380px){
  .form{grid-template-columns:1fr}
  .field .hint{min-height:0}
  .receipt{font-size:14px}
}

/* ここから：ページ切り替え・ランキング・品目しらべ・読みもの */
.brand a{text-decoration:none}
.nav{max-width:560px;margin:12px auto 0;padding:0 18px;display:flex;gap:6px;flex-wrap:wrap}
.nav a{font-size:13px;font-weight:700;text-decoration:none;padding:3px 10px;border:2px solid var(--ink)}
.nav a[aria-current="page"]{background:var(--ink);color:var(--pop)}
.hero.small{padding:26px 0 20px}
.slip h3{font-family:var(--display);font-weight:400;font-size:16px;margin:0 0 4px}
.rank2{display:grid;grid-template-columns:1fr;gap:18px}
.rank{list-style:none;counter-reset:r;margin:0;padding:0;font-family:var(--print);font-size:15px}
.rank li{counter-increment:r;display:grid;grid-template-columns:1.8em 1fr auto;gap:0 6px;align-items:baseline;padding:4px 0;border-bottom:1px dashed var(--rule)}
.rank li::before{content:counter(r);color:#5c584f}
.primary.link{display:block;text-align:center;text-decoration:none;margin-top:18px;font-size:16px;line-height:1.5}
.back{margin:0 0 34px}
a.r-line{text-decoration:none;padding:5px 0;border-bottom:1px dashed var(--rule)}
a.r-line:hover span:first-child{text-decoration:underline;text-underline-offset:4px}
.r-yen{color:#5c584f;font-size:13.5px}
.share{margin:0 0 30px}
.share h2{font-family:var(--display);font-weight:400;font-size:17px;margin:0 0 8px}
.share a.ghost{text-decoration:none}
.f-links{display:flex;gap:14px;flex-wrap:wrap;font-weight:700}
.search{width:100%;font-family:var(--print);font-size:18px;padding:10px 12px;border:2px solid var(--ink);border-radius:0;background:var(--shade);color:var(--ink)}
.chips{display:flex;gap:6px;flex-wrap:wrap;margin:10px 0 0}
.chip{background:var(--pop);border:0;padding:3px 12px;font-size:13px;font-weight:700}
.hits{list-style:none;margin:12px 0 0;padding:0}
.hits button{width:100%;display:flex;justify-content:space-between;gap:10px;background:none;border:0;border-bottom:1px dashed var(--rule);padding:8px 0;font-family:var(--print);font-size:15px;text-align:left}
.hits button:hover span:first-child{text-decoration:underline;text-underline-offset:4px}
.item{margin-top:16px;border:2px solid var(--ink);padding:16px 14px}
.item .r-title{margin-bottom:0}
.prose h2{font-size:17px;margin:22px 0 4px}
.prose h2:first-child{margin-top:0}
.prose p,.prose ol{margin:0 0 8px;font-size:14.5px}
.prose ol{padding-left:1.4em}
.sw.up{background:var(--up)}
@media (min-width:480px){ .rank2{grid-template-columns:1fr 1fr;gap:20px} }

/* 人口の住民票 */
.h-price.pop{font-size:clamp(40px,12.5vw,80px)}
.h-price.pop small{font-size:.42em;margin:0 .04em}
.village{display:grid;grid-template-columns:repeat(20,1fr);gap:4px;margin:4px 0 12px}
.village i{aspect-ratio:1;border-radius:50%}
.village .v1{background:var(--s3)} .village .v2{background:var(--s1)} .village .v3{background:var(--s2)}

/* 地域くらべ：日本列島の形のタイル */
.tiles{display:grid;grid-template-columns:repeat(13,1fr);gap:3px;margin:6px 0 12px}
.tile{aspect-ratio:1;border:0;padding:0;font-family:var(--body);font-size:clamp(8px,2.5vw,12px);font-weight:700;line-height:1;color:var(--ink)}
.tile.on{outline:3px solid var(--ink);outline-offset:1px;position:relative;z-index:1}
.t1{background:#d95926;color:#fff}.t2{background:#f0a57f}.t3{background:#f7d9c6}.t4{background:#b7d3f6}.t5{background:#2a78d6;color:#fff}
.sw.t1,.sw.t2,.sw.t3,.sw.t4,.sw.t5{height:10px;width:10px}
.legend.row{grid-template-columns:1fr 1fr}
.gx0{grid-column:1}.gx1{grid-column:2}.gx2{grid-column:3}.gx3{grid-column:4}.gx4{grid-column:5}.gx5{grid-column:6}.gx6{grid-column:7}.gx7{grid-column:8}.gx8{grid-column:9}.gx9{grid-column:10}.gx10{grid-column:11}.gx11{grid-column:12}.gx12{grid-column:13}
.gy0{grid-row:1}.gy1{grid-row:2}.gy2{grid-row:3}.gy3{grid-row:4}.gy4{grid-row:5}.gy5{grid-row:6}.gy6{grid-row:7}.gy7{grid-row:8}.gy8{grid-row:9}.gy9{grid-row:10}.gy10{grid-row:11}.gy11{grid-row:12}