:root {
  color-scheme: light;
  --ink:#242036; --sub:#524966; --paper:#fbf9f6; --line:#ddd6e4;
  --rose:#a82154; --pink:#fae8f0; --lav:#f0eaf9; --mint:#ddf3ec; --green:#06685a;
  font-family:"Noto Sans JP","Hiragino Sans","Yu Gothic",Meiryo,system-ui,sans-serif;
}
* { box-sizing:border-box }
body { margin:0; border-top:5px solid var(--ink); background:var(--paper); color:var(--ink); font-size:1rem; line-height:1.65; line-break:strict }
.wrap { width:min(100% - 36px, 860px); margin-inline:auto }
p,figure,ol,ul,dl,dd,h1,h2,h3 { margin:0 }
b { font-weight:inherit; display:inline-block; max-width:100%; word-break:keep-all }
a { color:var(--green); text-underline-offset:.22em }
a:focus-visible { outline:2px solid var(--rose); outline-offset:4px }
.mast { display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:8px 18px; padding-block:14px; border-bottom:1px solid var(--line) }
.mast strong { color:var(--rose) }
.mast nav { display:flex; flex-wrap:wrap; gap:5px 16px; font-weight:700 }
.mast nav a { color:var(--sub) }
section { padding:clamp(26px,6vw,54px) 0; border-bottom:1px solid var(--line); scroll-margin-top:12px }
.eyebrow,.lead { color:var(--rose); font-weight:750 }
.eyebrow { margin-bottom:10px; font-size:1rem; letter-spacing:.045em }
h1,.headline { font-size:clamp(1.7rem,5.5vw,3.25rem); font-weight:850; line-height:1.21; letter-spacing:-.025em }
h1 { margin-bottom:20px }
.lead { margin:9px 0 18px; font-size:clamp(1rem,2.3vw,1.22rem) }
.visual { display:block; width:100%; height:auto; border-radius:15px }
figcaption { margin-top:5px; color:var(--sub); font-size:1rem; text-align:right }
.definition { margin:16px 0; padding:14px 16px; border-left:5px solid var(--rose); border-radius:10px; background:var(--pink); font-size:clamp(1.15rem,3.1vw,1.75rem); line-height:1.5; font-weight:800 }
.definition b:nth-of-type(n+3) { color:var(--rose) }
.ink,.mint { border-radius:13px; padding:15px 18px }
.ink { color:white; background:var(--ink) }
.ink .label { color:#ffd6e5; font-weight:750; font-size:1rem; margin-bottom:6px }
.ink p+p,.mint p+p { margin-top:3px }
.journey,.flow,.ideas,.steps,.rank,.sources { list-style:none; padding:0 }
.journey,.flow { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px }
.journey { margin:16px 0 }
.journey li { background:var(--pink); border-radius:11px; padding:12px; position:relative }
.journey li:nth-child(2) { background:var(--lav) }
.journey li:nth-child(3) { background:var(--mint) }
.journey span { display:block; font-size:1rem; color:var(--rose); font-weight:800 }
.journey strong,.flow strong { display:block; line-height:1.4 }
.journey p,.flow p,.ideas p,.steps p { color:var(--sub); margin-top:3px }
.journey li+li::before { content:"→"; display:grid; place-items:center; position:absolute; left:-17px; top:42%; width:22px; height:22px; border-radius:50%; background:white; color:var(--rose); font-weight:900 }
.panel { border:1px solid var(--line); border-radius:13px; background:white }
.stats { display:grid; grid-template-columns:1.1fr 1fr; padding:17px; gap:20px }
.stats>div+div { border-left:1px solid var(--line); padding-left:20px }
.stats h2,.mint h3,.steps h3,.official h3 { font-size:1.06rem; line-height:1.45 }
.chart-row { display:flex; align-items:center; flex-wrap:wrap; gap:14px; margin:12px 0 8px }
.donut { width:92px; aspect-ratio:1; border-radius:50%; background:conic-gradient(var(--rose) 0 70%,#d7cedf 70% 100%); display:grid; place-items:center }
.donut span { width:64%; aspect-ratio:1; display:grid; place-items:center; background:white; border-radius:50%; font-size:1rem; font-weight:800 }
.legend { display:grid; gap:6px }
.legend div { display:flex; align-items:baseline; gap:8px; font-size:1rem; font-weight:700 }
.legend dt::before { content:""; display:inline-block; width:8px; height:8px; margin-right:6px; background:var(--rose); border-radius:2px }
.legend div+div dt::before { background:#d7cedf }
.legend dd { color:var(--rose); font-size:1.06rem }
.legend div+div dd { color:var(--sub) }
.small { font-size:1rem; color:var(--sub); margin-top:6px }
.rank { display:grid; gap:5px; margin-top:9px; counter-reset:rank }
.rank li { padding:4px 8px; border-radius:6px; background:var(--lav); font-size:1rem; font-weight:750 }
.rank li::before { counter-increment:rank; content:counter(rank); margin-right:.7em }
.rank li:last-child { background:var(--mint); color:var(--green) }
.sources { display:flex; flex-wrap:wrap; gap:7px 20px; margin-top:12px; font-size:1rem; font-weight:650 }
.example { margin-bottom:12px; font-weight:750 }
.example b+b { margin-inline-start:.4em }
.phone-art { position:relative }
.product-tag { position:absolute; top:83.2%; left:8.2%; border-radius:16px; padding:0 .72em; background:var(--ink); color:white; font-size:1rem; font-weight:750; white-space:nowrap }
.flow { margin-top:12px }
.flow li,.steps li { display:flex; gap:8px; align-items:flex-start; min-width:0 }
.flow span,.steps span { flex:none; width:28px; height:28px; border-radius:50%; display:grid; place-items:center; font-size:1rem; line-height:1; font-weight:800; background:var(--ink); color:white }
.flow li:first-child span,.steps li:first-child span { background:var(--rose) }
.flow li:last-child span,.steps li:last-child span { background:var(--green) }
.subhead { font-size:clamp(1.05rem,2.65vw,1.42rem); margin:17px 0 10px }
.ideas { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; margin-bottom:14px }
.ideas li,.steps li { padding:12px }
.ideas strong,.cost strong { color:var(--rose) }
.mint { background:var(--mint) }
.mint h3,.pilot-note { color:var(--green); margin-bottom:5px }
.steps { display:grid; gap:10px }
.steps li { padding:14px }
.steps li div { min-width:0 }
.cost { background:var(--pink); padding:12px; border-radius:9px; margin:14px 0 }
.cost strong { margin-right:.6em }
.pilot h3 { font-size:clamp(1.45rem,5vw,2.5rem); margin-bottom:6px; line-height:1.35 }
.pilot .pilot-note { color:#c9f2e5; margin-top:10px }
.official { margin-top:18px }
.footer { padding:14px 0; color:var(--sub); font-size:1rem }
.footer time { margin-left:.8em }
@media (max-width:650px) {
  body { font-size:1.125rem; line-height:1.7 }
  h1,.headline { font-size:clamp(2rem,8.2vw,2.875rem) }
  .definition,.lead { font-size:1.3125rem }
  .mast nav { font-size:1rem }
  .stats h2,.mint h3,.steps h3,.official h3,.subhead { font-size:1.25rem }
  .legend dd { font-size:1.25rem }
  .pilot h3 { font-size:clamp(1.75rem,6vw,2.25rem) }
  .mast nav a,.sources a { display:inline-block; padding-block:6px }
  .journey,.flow { grid-template-columns:1fr; gap:8px }
  .journey li { display:grid; grid-template-columns:2.2em minmax(0,1fr); padding:9px 12px }
  .journey p { grid-column:2 }
  .journey li+li::before { content:none }
  .flow { margin-top:10px }
  .flow li { padding:9px 12px; background:white; border:1px solid var(--line); border-radius:10px }
  .flow span,.steps span { width:30px; height:30px }
  .steps li>div,.flow li>div { flex:1; min-width:0 }
  .stats { grid-template-columns:1fr; gap:12px }
  .stats>div+div { border-left:0; border-top:1px solid var(--line); padding:12px 0 0 }
  .desktop,.product-tag { display:none }
}
@media (max-width:470px) {
  .wrap { width:calc(100% - 28px) }
  .mast { padding-block:10px }
  .ideas { grid-template-columns:1fr; gap:6px }
  .steps li { padding:10px }
  .ink,.mint { padding:12px }
}
@media print {
  body { background:white; print-color-adjust:exact }
  .wrap { width:100% }
  .mast nav { display:none }
  section { break-after:page; border-bottom:0 }
  section:last-child { break-after:auto }
  figure,.panel,aside { break-inside:avoid }
}