:root{
  --bg:#F4F6FA; --panel:#FFFFFF; --panel2:#F7F9FC; --line:#E3E9F1; --line2:#D3DCE8;
  --text:#0F1F33; --text2:#42566E; --muted:#64758C;
  --acc:#D93A0F; --acc2:#B32607; --navy:#0B1E35;
  --radius:12px; --shadow:0 1px 2px rgba(16,32,58,.06),0 8px 24px rgba(16,32,58,.06);
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background:var(--bg); color:var(--text);
  font-family:system-ui,-apple-system,"Hiragino Kaku Gothic ProN","Noto Sans JP",Meiryo,sans-serif;
  font-size:15px; line-height:1.6; -webkit-font-smoothing:antialiased;
}
a{color:inherit;text-decoration:none}

/* ---- header ---- */
.hdr{
  position:sticky; top:0; z-index:20; display:flex; align-items:center; gap:12px;
  padding:10px 16px; background:rgba(255,255,255,.96); backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);
}
.brand{display:flex; align-items:center; gap:8px; min-width:0}
.brand .pin{width:26px; height:26px; flex:0 0 auto}
.brand .bn{font-weight:800; letter-spacing:-.2px; font-size:16px; white-space:nowrap}
.brand em{font-style:normal; font-weight:700; color:var(--acc2); font-size:13px; white-space:nowrap}
.nav{margin-left:auto; display:flex; align-items:center; gap:6px; flex:0 0 auto}
.nav a{
  display:inline-flex; align-items:center; height:34px; padding:0 12px; border-radius:9px;
  border:1px solid var(--line2); background:#fff; color:var(--text2); font-weight:700; font-size:13px;
}
.nav a:hover{border-color:#B9C6D8; color:var(--text)}
.nav a.on{background:var(--navy); border-color:var(--navy); color:#fff}
.nav a.cta{background:linear-gradient(180deg,#D93A0F,#B32607); border-color:transparent; color:#fff}
.tagline{
  background:#FFF6E6; border-bottom:1px solid #F2DDB3; color:#7A4A0E;
  font-size:12.5px; font-weight:700; padding:7px 16px; text-align:center;
}

/* ---- layout ---- */
.wrap{max-width:880px; margin:0 auto; padding:18px 16px 56px}
.crumbs{display:flex; flex-wrap:wrap; align-items:center; gap:4px; font-size:13px; color:#4E6076; margin:0 0 10px}
.crumbs a{color:#2C3F58; text-decoration:underline; text-underline-offset:2px}
.crumbs span{color:var(--text); font-weight:700}
.crumbs em{font-style:normal; color:#A9B7C9}
h1{font-size:23px; line-height:1.35; margin:0 0 8px; letter-spacing:-.3px}
.lead{margin:0 0 16px; color:var(--text2); font-size:14px}
.lead b{color:var(--text)}

/* ---- stats ---- */
.stats{
  display:grid; grid-template-columns:auto 1fr auto; gap:16px; align-items:start;
  background:var(--panel); border:1px solid var(--line); border-radius:var(--radius);
  padding:14px 16px; margin:0 0 18px; box-shadow:var(--shadow);
}
.stat-main b{font-size:30px; line-height:1; letter-spacing:-1px}
.stat-main span{display:block; font-size:11.5px; color:var(--muted); font-weight:700; margin-top:2px}
.stat-bars{display:flex; flex-direction:column; gap:5px}
.bar{display:grid; grid-template-columns:96px 1fr 24px; gap:6px; align-items:center; font-size:11.5px; color:var(--text2)}
.bar .bl{white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.bar .bt{height:6px; background:#EDF1F7; border-radius:99px; overflow:hidden}
.bar .bt i{display:block; height:100%; border-radius:99px}
.bar b{text-align:right; font-size:11.5px; display:flex; align-items:baseline; justify-content:flex-end; gap:3px}
.bar b em{font-style:normal; font-size:10px; color:#64758C; font-weight:600}
.stat-side{font-size:11.5px; color:var(--text2); min-width:112px}
.stat-side .ss{margin:0; color:var(--muted); font-weight:700}
.stat-side .sb{margin:1px 0 6px}
.stat-side .sb b{font-size:13px}

/* ---- tabs / chips ---- */
.tabs2{display:flex; gap:6px; margin:0 0 10px}
.tab{
  display:inline-flex; align-items:center; height:30px; padding:0 11px; border-radius:99px;
  border:1px solid var(--line2); background:#fff; color:var(--text2); font-size:12.5px; font-weight:700;
}
.tab.on{background:var(--navy); border-color:var(--navy); color:#fff}
.chips{
  display:flex; gap:7px; overflow-x:auto; padding:2px 0 10px; margin:0 0 4px;
  scrollbar-width:thin; -webkit-overflow-scrolling:touch;
  mask-image:linear-gradient(90deg,#000 0,#000 calc(100% - 26px),transparent 100%);
  -webkit-mask-image:linear-gradient(90deg,#000 0,#000 calc(100% - 26px),transparent 100%);
}
.chips::-webkit-scrollbar{height:4px}
.chips::-webkit-scrollbar-thumb{background:#D3DCE8; border-radius:99px}
.chip{
  display:inline-flex; align-items:center; gap:6px; flex:0 0 auto; height:30px; padding:0 11px;
  border-radius:99px; border:1px solid #C9D5E4; background:#fff; font-size:12.5px; font-weight:700; color:var(--text2);
}
.chip i{width:8px; height:8px; border-radius:99px; background:var(--c,#4C9AFF); display:block}
.chip.on{background:var(--navy); border-color:var(--navy); color:#fff}
.chip.on i{box-shadow:0 0 0 2px rgba(255,255,255,.35)}
.chip-count{font-size:12px; color:var(--muted); padding-right:4px}

/* ---- rows ---- */
.rows{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:8px}
.row{
  display:grid; grid-template-columns:auto 1fr auto; gap:11px; align-items:start;
  background:var(--panel); border:1px solid var(--line); border-radius:var(--radius);
  padding:13px 14px; box-shadow:var(--shadow); transition:border-color .12s, transform .12s;
}
.row:hover{border-color:#C3D0E0; transform:translateY(-1px)}
.dot{width:9px; height:9px; border-radius:99px; margin-top:7px; box-shadow:0 0 0 3px rgba(11,30,53,.06)}
.row-main{display:flex; flex-direction:column; gap:4px; min-width:0}
.row-title{font-weight:800; font-size:14.5px; line-height:1.5; letter-spacing:-.2px}
.row-meta{font-size:12.5px; color:#4E6076}
.row-sum{font-size:13px; color:#33465E; line-height:1.6}
.tags{display:flex; flex-wrap:wrap; gap:5px; margin-top:4px}
.tag{display:inline-flex; align-items:center; gap:4px; font-size:11.5px; font-weight:700; color:#2C3F58;
  background:#EFF4FA; border:1px solid #E1E9F3; border-radius:6px; padding:1px 7px}
.tag i{width:6px; height:6px; border-radius:99px; display:block; flex:0 0 auto}
.thumb{width:88px; height:88px; object-fit:cover; border-radius:9px; border:1px solid var(--line); background:#EDF1F7}
.empty{
  background:var(--panel); border:1px dashed var(--line2); border-radius:var(--radius);
  padding:34px 16px; text-align:center; color:var(--text2);
}
.empty p{margin:0 0 6px}
.empty .empty-sub a{color:var(--acc2); font-weight:700; text-decoration:underline}

/* ---- pager ---- */
.pager{display:flex; flex-wrap:wrap; gap:6px; justify-content:center; margin:20px 0 0}
.pg{
  display:inline-flex; align-items:center; justify-content:center; min-width:34px; height:34px; padding:0 10px;
  border-radius:9px; border:1px solid var(--line2); background:#fff; font-size:13px; font-weight:700; color:var(--text2);
}
.pg.cur{background:var(--navy); border-color:var(--navy); color:#fff}
.pg.off{opacity:.45}
.dots{align-self:center; color:var(--muted)}

/* ---- note ---- */
.note{
  background:#FFF6E6; border:1px solid #F2DDB3; color:#7A4A0E; border-radius:10px;
  padding:10px 12px; font-size:12.5px; margin:0 0 14px;
}
.note b{color:#5E3708}

/* ---- TOP ---- */
.hero{
  background:linear-gradient(180deg,#FFFFFF,#F8FAFD); border:1px solid var(--line); border-radius:16px;
  padding:22px 20px; box-shadow:var(--shadow); margin:0 0 26px;
}
.hero h1{font-size:26px; line-height:1.35; margin:0 0 8px; letter-spacing:-.6px}
.hero-lead{margin:0 0 16px; color:var(--text2); font-size:13.5px}
.searchbox{display:flex; gap:7px; margin:0 0 12px}
.searchbox input{
  flex:1; min-width:0; height:44px; border:1px solid #C9D5E4; border-radius:11px; padding:0 13px;
  font-size:14px; font-family:inherit; color:var(--text); background:#fff;
}
.searchbox input:focus{outline:none; border-color:var(--acc); box-shadow:0 0 0 3px rgba(217,58,15,.12)}
.searchbox button{
  height:44px; padding:0 18px; border:0; border-radius:11px; background:var(--navy);
  color:#fff; font-weight:800; font-size:14px; font-family:inherit; cursor:pointer;
}
.searchbox button:hover{background:#12283F}
.cta-row{display:flex; flex-wrap:wrap; gap:8px}
.btn-main,.btn-sub{
  display:inline-flex; align-items:center; justify-content:center; height:42px; padding:0 16px; border-radius:11px;
  font-weight:800; font-size:13.5px;
}
.btn-main{background:linear-gradient(180deg,#D93A0F,#B32607); color:#fff; box-shadow:0 6px 16px rgba(217,58,15,.22)}
.btn-main:hover{filter:brightness(1.05)}
.btn-sub{background:#fff; border:1px solid #C9D5E4; color:#22344B}
.btn-sub:hover{border-color:rgba(217,58,15,.5); color:var(--acc2)}
.sec{margin:0 0 26px}
.sec-h{font-size:15.5px; margin:0 0 10px; letter-spacing:-.2px; display:flex; align-items:center; gap:8px}
.sec-h::before{content:''; width:3px; height:15px; border-radius:2px; background:var(--acc); display:block}
.more{margin:10px 0 0; text-align:right}
.more a{color:var(--acc2); font-weight:800; font-size:13px}
.area-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(146px,1fr)); gap:8px}
.area{
  display:flex; align-items:center; justify-content:space-between; gap:8px; background:#fff;
  border:1px solid var(--line); border-radius:10px; padding:10px 12px; font-weight:700; font-size:13.5px;
}
.area:hover{border-color:#C3D0E0; background:#FBFCFF}
.area b{font-size:12px; color:#4E6076; background:#EFF4FA; border-radius:99px; padding:1px 8px}
.chip .cc{font-size:10.5px; color:#64758C; font-weight:700}

/* ---- footer ---- */
.ftr{border-top:1px solid var(--line); padding:18px 16px 28px; text-align:center; color:#5A6B80; font-size:12.5px}
.ftr p{margin:0 0 6px}
.ftr-links{display:flex; gap:14px; justify-content:center}
.ftr-links a{color:#2C3F58; text-decoration:underline; text-underline-offset:2px}

@media (max-width:640px){
  body{font-size:14.5px}
  .hdr{gap:8px; padding:9px 12px}
  .brand .bn{font-size:15px}
  .brand em{font-size:12px}
  .brand .pin{width:23px;height:23px}
  .nav a{height:32px; padding:0 10px; font-size:12.5px}
  .nav a[href$="/list"]{display:none}
  .tagline{font-size:12px; padding:6px 10px}
  .wrap{padding:14px 12px 44px}
  h1{font-size:19px}
  .hero{padding:18px 14px; border-radius:14px; margin-bottom:22px}
  .hero h1{font-size:21px}
  .hero-lead{font-size:13px}
  .searchbox input{height:42px; font-size:13.5px}
  .searchbox button{height:42px; padding:0 14px; font-size:13px}
  .btn-main,.btn-sub{height:40px; flex:1 1 auto; font-size:13px}
  .area-grid{grid-template-columns:repeat(auto-fill,minmax(128px,1fr))}
  .stats{grid-template-columns:auto 1fr; gap:12px}
  .stat-side{grid-column:1/-1; display:flex; gap:12px; align-items:baseline; min-width:0}
  .stat-side .ss{margin:0}
  .stat-side .sb{margin:0}
  .stat-main b{font-size:26px}
  .bar{grid-template-columns:82px 1fr 22px}
  .row{grid-template-columns:auto 1fr auto; padding:12px; gap:9px}
  .thumb{width:76px; height:76px}
  .chips{padding-bottom:8px}
}

/* 検索の説明（TOP） */
.search-feats{display:flex; flex-wrap:wrap; gap:8px; margin:0 0 14px}
.search-feats .sf{display:inline-flex; align-items:center; gap:7px; font-size:12px; color:var(--text2);
  background:#fff; border:1px solid var(--line); border-radius:99px; padding:6px 12px; line-height:1.4}
.search-feats .sf b{font-size:11px; font-weight:800; letter-spacing:.02em; color:#fff; background:var(--navy);
  border-radius:99px; padding:2px 8px}
@media (max-width:560px){ .search-feats .sf{font-size:11.5px; padding:5px 10px} }