/* サンプル「事業を並べる」：まちの便利屋 ひとつ屋（架空）。最初の画面に、困りごとを選ぶ大きなボタン。紺と信号の黄色ではっきり。 */
:root {
  --navy: #1F3B57;
  --yellow: #F2C230;
  --sky: #E8F0F7;
  --ink: #1A2530;
  --white: #FFFFFF;
  --sans: "Hiragino Sans", "Yu Gothic", "YuGothic", "Noto Sans JP", sans-serif;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body { word-break: auto-phrase; line-break: strict;  margin: 0; background: var(--white); color: var(--ink); font: 400 1rem/1.85 var(--sans); }
a { color: var(--navy); }
a:focus-visible { outline: 3px solid var(--yellow); outline-offset: 3px; }
.wrap { max-width: 68rem; margin: 0 auto; padding: 0 1.25rem; }
.narrow { max-width: 44rem; }

/* ヘッダーは画面の上に固定（ゆうき 2026-11-06）。ページ内リンクの行き先がヘッダーの下に隠れないよう scroll-padding-top をあける */
.top { position: sticky; top: 0; z-index: 40; background: var(--navy); color: var(--white); }
html { scroll-padding-top: 4rem; }
.top .wrap { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding-block: .7rem; }
.name { margin: 0; font-size: .95rem; }
.name b { font-size: 1.3rem; letter-spacing: .06em; }
.top-ask { background: var(--yellow); color: var(--ink); text-decoration: none; font-weight: 700; padding: .5rem 1.1rem; border-radius: 6px; box-shadow: 0 2px 0 #B8901A; }

.hero { background: var(--navy); color: var(--white); padding-block: 2.2rem 3rem; }
.hero h1 { margin: 0; font: 800 clamp(1.7rem, 6vw, 2.8rem)/1.45 var(--sans); }
.lead { margin: .8rem 0 1.4rem; color: #CFDAE6; }
.board { list-style: none; margin: 0; padding: 0; display: grid; gap: .8rem; grid-template-columns: repeat(2, 1fr); }
@media (min-width: 56rem) { .board { grid-template-columns: repeat(4, 1fr); } }
.board a { display: grid; grid-template-rows: auto auto 1fr; gap: .2rem; height: 100%; padding: 1rem; background: var(--white); color: var(--ink); text-decoration: none; border-radius: 10px; box-shadow: 0 4px 0 #0F2236, 0 10px 22px rgba(0, 0, 0, .25); }
.board a:hover { transform: translateY(-2px); }
.board a:active { transform: translateY(2px); box-shadow: 0 2px 0 #0F2236; }
@media (prefers-reduced-motion: reduce) { .board a:hover, .board a:active { transform: none; } }
.board svg { width: 2.2rem; height: 2.2rem; fill: none; stroke: var(--navy); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; background: var(--yellow); border-radius: 50%; padding: .35rem; }
.board b { font-size: 1.05rem; line-height: 1.4; margin-top: .4rem; }
.board span { font-size: .82rem; line-height: 1.5; color: #4B5A68; }

.sec { padding-block: 3rem; }
h2 { font: 800 1.45rem/1.45 var(--sans); margin: 0 0 .8rem; }
.svc { padding: 1.6rem 0; border-bottom: 1px solid #DCE3EA; scroll-margin-top: 1rem; display: grid; gap: .2rem 3rem; }
@media (min-width: 48rem) { .svc { grid-template-columns: 16rem 1fr; } .svc h2 { grid-row: span 2; } }
.svc h2 { border-left: 6px solid var(--yellow); padding-left: .7rem; }
.svc p { margin: 0; }
.svc ul { margin: .5rem 0 0; padding-left: 1.2rem; }

.sky { background: var(--sky); }
.flow { list-style: none; counter-reset: s; margin: 0; padding: 0; display: grid; gap: 1.2rem; }
.flow li { counter-increment: s; display: grid; grid-template-columns: 2.4rem 1fr; column-gap: .9rem; }
.flow li::before { content: counter(s); grid-row: span 2; width: 2.2rem; height: 2.2rem; display: grid; place-items: center; background: var(--navy); color: var(--white); border-radius: 50%; font-weight: 800; }
.flow span { color: #4B5A68; font-size: .95rem; }

.navy { background: var(--navy); color: var(--white); }
.navy .mail { font-size: 1.5rem; font-weight: 800; color: var(--yellow); user-select: all; }

.foot { padding-block: 2rem 3rem; font-size: .85rem; color: #4B5A68; }
.foot p { margin: .2rem 0; }