:root{--ink:#243337;--muted:#667774;--line:#dce7e4;--soft:#f5f7f5;--accent:#287c70;--accent-soft:#eaf5f2;--warm:#956b43;--bg:#f4f6f4}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--bg);color:var(--ink);font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","Hiragino Sans","Yu Gothic","Noto Sans JP",Meiryo,sans-serif;line-height:1.7;-webkit-font-smoothing:antialiased}
a{color:var(--accent)}button{font:inherit}.page{max-width:1320px;margin:auto;padding:0 40px 72px}.topnav{display:flex;justify-content:space-between;align-items:center;gap:24px;padding:22px 0;border-bottom:1px solid var(--line)}.brand{color:var(--ink);text-decoration:none;font-size:20px;font-weight:900}.navlinks{display:flex;gap:18px;flex-wrap:wrap}.navlinks a{color:#4f6561;text-decoration:none;font-size:14px;font-weight:750}.navlinks a[aria-current=page]{color:var(--accent)}
.kicker{margin:0;color:var(--warm);font-size:11px;font-weight:950;letter-spacing:.11em}.rankHero{padding:34px 0 24px;border-bottom:1px solid var(--line)}.rankHero h1{margin:7px 0 10px;font-size:clamp(36px,5vw,56px);line-height:1.18;letter-spacing:-.035em}.rankHero>p:not(.kicker){max-width:760px;margin:0;color:var(--muted);font-size:17px}.rankHero strong{color:var(--ink)}.heroMeta{display:flex;gap:8px;flex-wrap:wrap;margin-top:22px}.heroMeta span{padding:6px 10px;border-radius:999px;background:#edf5f2;color:#41665f;font-size:12px;font-weight:850}
.rankingPrinciple{margin:26px 0 0;padding:18px 20px;border-left:4px solid var(--accent);background:#f6faf8}.rankingPrinciple strong{display:block;font-size:15px}.rankingPrinciple p{max-width:920px;margin:5px 0 0;color:var(--muted);font-size:13px}
.rankingBrowse{padding:26px 0 42px}.sectionHead{display:flex;justify-content:space-between;align-items:end;gap:24px;margin-bottom:16px}.sectionHead h2{margin:4px 0 0;font-size:clamp(28px,3vw,38px)}.sectionHead>p{max-width:460px;margin:0;color:var(--muted);font-size:13px;text-align:right}.rankingFilters{display:flex;gap:7px;flex-wrap:wrap;margin-bottom:16px}.rankingFilters button{min-height:40px;padding:8px 14px;border:1px solid #cbdad6;border-radius:999px;background:#fff;color:#526b65;cursor:pointer;font-size:13px;font-weight:800}.rankingFilters button[aria-pressed=true]{border-color:var(--accent);background:var(--accent);color:#fff}.rankingScope{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin:-2px 0 14px}.rankingScope label{display:flex;align-items:center;gap:8px;color:#526b65;font-size:12px;font-weight:850}.rankingScope select{min-width:150px;min-height:40px;padding:7px 34px 7px 11px;border:1px solid #cbdad6;border-radius:10px;background:#fff;color:var(--ink);font:inherit;font-size:13px;font-weight:800}.rankingScope p{margin:0;color:var(--muted);font-size:11px}.rankingScope select:focus-visible{outline:3px solid #267465;outline-offset:3px}.rankingStatus{margin:0 0 14px;color:var(--muted);font-size:12px}
.rankingGrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}.rankingCard{position:relative;min-height:248px;padding:24px 76px 22px 24px;border:1px solid #e2e9e6;border-radius:22px;background:#f7f8f6;color:var(--ink);text-decoration:none;transition:transform .15s ease,border-color .15s ease,box-shadow .15s ease}.rankingCard:hover{transform:translateY(-2px);border-color:#bfd3cd;box-shadow:0 10px 28px rgba(40,85,75,.07)}.rankingCard:focus-visible,.rankingFilters button:focus-visible{outline:3px solid #267465;outline-offset:3px}.rankingCardHead{display:flex;align-items:center;gap:10px}.rankingIcon{width:30px;height:30px;display:grid;place-items:center;border-radius:9px;background:#e5f1ee;color:#3a7168}.rankingIcon svg{width:18px;height:18px}.rankingCard small{color:#71807c;font-size:11px;font-weight:800}.rankingCard h3{margin:9px 0 4px;font-size:20px;line-height:1.4}.rankingCard>p{margin:0 0 13px;color:#5d6c68;font-size:12px;line-height:1.6}.topThree{display:grid;gap:3px}.topRow{display:grid;grid-template-columns:28px minmax(0,1fr) auto;align-items:baseline;gap:6px;min-height:28px}.topRow .rank{color:#8a9692;font-size:12px}.topRow strong{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:13px}.topRow b{color:var(--accent);font-size:14px;font-variant-numeric:tabular-nums}.rankingArrow{position:absolute;right:22px;bottom:20px;width:42px;height:42px;display:grid;place-items:center;border-radius:50%;background:#fff;font-size:24px;line-height:1}.rankingType{position:absolute;right:22px;top:22px;color:#83908c;font-size:10px;font-weight:850}
.rankingDetail{padding:16px 0 48px;border-top:1px solid var(--line);scroll-margin-top:20px}.detailHead{display:flex;justify-content:space-between;align-items:end;gap:20px;padding:24px 0 18px}.detailHead h2{margin:4px 0 5px;font-size:clamp(28px,3.4vw,42px)}.detailHead p:last-child{max-width:760px;margin:0;color:var(--muted);font-size:14px}.detailHead>a{flex-shrink:0;font-size:13px;font-weight:800}.rankingList{border-top:1px solid var(--line)}.rankingListRow{display:grid;grid-template-columns:56px minmax(0,1fr) 92px 128px;align-items:center;gap:14px;min-height:68px;border-bottom:1px solid var(--line);color:inherit;text-decoration:none}.rankingListRow:hover{background:#f7faf9}.rankingListRow .placeRank{font-size:14px;font-weight:900;color:#677873}.rankingListRow:first-child .placeRank{color:var(--accent);font-size:18px}.placeMain{min-width:0}.placeMain strong{display:block;font-size:16px}.placeMain small{display:block;color:#73817e;font-size:11px}.placeScore{text-align:right;font-size:22px;font-weight:900;color:#2d665d;font-variant-numeric:tabular-nums}.placeAction{text-align:right;color:var(--accent);font-size:12px;font-weight:800}.rankingDetailNote{margin:16px 0 0;padding:14px 16px;background:#f7f8f6;color:#65736f;font-size:12px;line-height:1.7}
.rankingNext{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:36px;align-items:center;padding:34px 0;border-top:1px solid var(--line)}.rankingNext h2{margin:4px 0 5px;font-size:28px}.rankingNext p:not(.kicker){margin:0;color:var(--muted);font-size:13px}.nextLinks{display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-end}.nextLinks a{min-height:42px;display:inline-flex;align-items:center;padding:8px 13px;border:1px solid #bdd3cd;border-radius:10px;text-decoration:none;font-size:12px;font-weight:850}.nextLinks .primary{background:var(--accent);border-color:var(--accent);color:#fff}
footer{margin-top:34px;padding-top:24px;border-top:1px solid var(--line);color:var(--muted);font-size:12px}
@media(max-width:800px){.page{padding:0 18px 54px}.topnav{align-items:flex-start}.navlinks{gap:10px 13px}.rankHero{padding:26px 0 20px}.rankHero h1{font-size:36px}.rankHero>p:not(.kicker){font-size:15px}.sectionHead{display:block}.sectionHead>p{margin-top:6px;text-align:left}.rankingGrid{grid-template-columns:1fr}.rankingCard{min-height:232px}.detailHead{display:block}.detailHead>a{display:inline-block;margin-top:12px}.rankingListRow{grid-template-columns:40px minmax(0,1fr) 68px;gap:9px;padding:9px 0}.placeAction{display:none}.placeMain strong{font-size:14px}.placeScore{font-size:18px}.rankingNext{grid-template-columns:1fr}.nextLinks{justify-content:flex-start}}
@media(max-width:500px){.navlinks a{font-size:12px}.rankingScope{align-items:stretch}.rankingScope label{width:100%;justify-content:space-between}.rankingScope select{min-width:0;flex:1}.rankingCard{padding:20px 60px 18px 18px;border-radius:17px}.rankingArrow{right:16px;bottom:16px}.rankingType{right:17px;top:18px}.topRow{grid-template-columns:24px minmax(0,1fr) auto}.topRow strong{font-size:12px}.topRow b{font-size:13px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.rankingCard{transition:none}}

/* 2026-09-24 prefecture money rankings. */
.rankingListRow{grid-template-columns:56px minmax(0,1fr) 142px 128px}
.placeScore.moneyScore{font-size:17px;white-space:nowrap}
@media(max-width:800px){
  .rankingListRow{grid-template-columns:40px minmax(0,1fr) 104px}
  .placeScore.moneyScore{font-size:15px}
}
@media(max-width:500px){
  .rankingFilters button{min-height:44px}
  .placeScore.moneyScore{font-size:14px}
}


/* 2026-09-24 ranking card contrast pass.
   Keep the calm page canvas, but make each ranking read as a distinct interactive surface. */
.rankingCard{
  overflow:hidden;
  isolation:isolate;
  border-color:#d4e1dd;
  background:#fff;
  box-shadow:0 7px 22px rgba(36,70,63,.065);
}
.rankingCard::before{
  content:"";
  position:absolute;
  inset:0 0 auto 0;
  height:4px;
  z-index:1;
  background:var(--accent);
  opacity:.9;
}
.rankingCard:hover{
  transform:translateY(-2px);
  border-color:#aecbc4;
  box-shadow:0 13px 32px rgba(36,70,63,.11);
}
.rankingCard h3{
  color:#203438;
  font-weight:900;
}
.rankingCard>p{
  color:#596c67;
}
.rankingIcon{
  width:34px;
  height:34px;
  border-radius:10px;
  background:#e4f3ef;
  color:#266f65;
}
.rankingIcon svg{width:19px;height:19px}
.topThree{
  gap:1px;
  margin-top:3px;
}
.topRow{
  min-height:31px;
  padding:3px 6px;
  margin:0 -6px;
  border-radius:8px;
}
.topRow:first-child{
  background:#f1f8f6;
}
.topRow:first-child .rank,
.topRow:first-child strong,
.topRow:first-child b{
  font-weight:900;
}
.topRow .rank{color:#748681}
.topRow strong{color:#263a3e;font-size:13px}
.topRow b{
  color:#208477;
  font-size:14px;
  font-weight:900;
}
.rankingArrow{
  border:1px solid #d7e5e1;
  background:#f7fbfa;
  color:#244f49;
  box-shadow:0 3px 10px rgba(36,70,63,.055);
  transition:transform .15s ease,background .15s ease,border-color .15s ease;
}
.rankingCard:hover .rankingArrow{
  transform:translateX(2px);
  border-color:#b9d3cd;
  background:#edf7f4;
}
.rankingType{
  color:#758680;
  font-weight:900;
}
@media(max-width:600px){
  .rankingCard{
    border-color:#cfdfda;
    box-shadow:0 6px 18px rgba(36,70,63,.075);
  }
  .rankingCard::before{height:3px}
}


/* 2026-09-25 genre filters: target x topic browsing without adding ranking scores together. */
.rankingFilterPanel{
  margin:0 0 14px;
  padding:15px 16px;
  border:1px solid #d8e4e0;
  border-radius:18px;
  background:#fff;
  box-shadow:0 5px 18px rgba(36,70,63,.045);
}
.rankingFilterRow{
  display:grid;
  grid-template-columns:82px minmax(0,1fr);
  align-items:start;
  gap:12px;
}
.rankingFilterRow+.rankingFilterRow{
  margin-top:11px;
  padding-top:11px;
  border-top:1px solid #edf1ef;
}
.rankingFilterLabel{
  padding-top:9px;
  color:#667a75;
  font-size:11px;
  font-weight:950;
  letter-spacing:.05em;
}
.rankingFilterPanel .rankingFilters{margin:0}
.rankingGenreFilters button{background:#f8faf9}
.rankingGenreFilters button[aria-pressed=true]{background:#315f58;border-color:#315f58;color:#fff}
.rankingFilterPanel .rankingScope{
  margin:12px 0 0;
  padding-top:12px;
  border-top:1px solid #edf1ef;
}
.rankingEmpty{
  grid-column:1/-1;
  padding:30px 24px;
  border:1px dashed #bfd0cb;
  border-radius:18px;
  background:#fbfcfb;
  text-align:center;
}
.rankingEmpty strong{display:block;font-size:16px}
.rankingEmpty p{margin:5px 0 0;color:var(--muted);font-size:12px}
@media(max-width:600px){
  .rankingFilterPanel{padding:13px 12px;border-radius:16px}
  .rankingFilterRow{display:block}
  .rankingFilterLabel{display:block;padding:0 0 7px}
  .rankingFilterPanel .rankingFilters{
    flex-wrap:nowrap;
    overflow-x:auto;
    padding:1px 1px 4px;
    scrollbar-width:none;
    -webkit-overflow-scrolling:touch;
  }
  .rankingFilterPanel .rankingFilters::-webkit-scrollbar{display:none}
  .rankingFilterPanel .rankingFilters button{flex:0 0 auto;white-space:nowrap}
  .rankingFilterPanel .rankingScope{margin-top:10px}
}


/* 2026-09-25 above-the-fold ranking pass.
   Make a useful ranking entry visible in the first viewport on desktop. */
.rankHero{
  padding:22px 0 17px;
}
.rankHero h1{
  margin:5px 0 7px;
  font-size:clamp(34px,4.2vw,48px);
  line-height:1.16;
  white-space:nowrap;
}
.rankHero>p:not(.kicker){
  max-width:960px;
  font-size:14px;
  line-height:1.65;
}
.heroQuick{
  display:flex;
  align-items:center;
  gap:7px;
  flex-wrap:wrap;
  margin-top:14px;
}
.heroQuickLabel{
  color:#7f684f;
  font-size:11px;
  font-weight:950;
  letter-spacing:.04em;
}
.heroQuick a{
  display:inline-flex;
  align-items:center;
  min-height:34px;
  padding:6px 11px;
  border:1px solid #bdd6d0;
  border-radius:999px;
  background:#fff;
  color:#286f66;
  text-decoration:none;
  font-size:12px;
  font-weight:900;
}
.heroQuick a:hover{
  background:#edf7f4;
  border-color:#9fc7be;
}
.heroMeta{
  margin-top:10px;
}
.heroMeta span{
  padding:4px 8px;
  font-size:11px;
}
.rankingBrowse{
  padding:17px 0 36px;
}
.sectionHead{
  margin-bottom:10px;
}
.sectionHead h2{
  margin-top:2px;
  font-size:clamp(25px,2.6vw,32px);
}
.rankingFilterPanel{
  padding:11px 13px;
  border-radius:15px;
}
.rankingFilterRow{
  grid-template-columns:64px minmax(0,1fr);
  gap:9px;
}
.rankingFilterRow+.rankingFilterRow{
  margin-top:8px;
  padding-top:8px;
}
.rankingFilterLabel{
  padding-top:7px;
}
.rankingFilterPanel .rankingFilters{
  gap:5px;
}
.rankingFilterPanel .rankingFilters button{
  min-height:34px;
  padding:6px 10px;
  font-size:12px;
}
.rankingFilterPanel .rankingScope{
  margin-top:8px;
  padding-top:8px;
}
.rankingScope select{
  min-height:34px;
  padding-top:5px;
  padding-bottom:5px;
}
.rankingStatus{
  margin-bottom:10px;
}
@media(max-width:900px){
  .rankHero h1{white-space:normal}
}
@media(max-width:600px){
  .rankHero{padding:18px 0 14px}
  .rankHero h1{font-size:32px}
  .rankHero>p:not(.kicker){font-size:14px}
  .heroQuick{gap:6px;margin-top:12px}
  .heroQuick a{min-height:36px;padding:6px 10px}
  .heroMeta{margin-top:9px}
  .rankingBrowse{padding-top:14px}
}


/* 2026-09-25 lifestyle scenario discovery. */
.scenarioBrowse{padding:22px 0 18px;border-bottom:1px solid var(--line);scroll-margin-top:18px}
.scenarioHead{margin-bottom:10px}
.scenarioMethod{display:flex;gap:10px;align-items:baseline;margin:0 0 12px;padding:10px 12px;border-left:3px solid #7ebbb0;background:#f2f8f6;color:#58706b;font-size:11px;line-height:1.6}
.scenarioMethod strong{flex:0 0 auto;color:#2d665d;font-size:11px}
.scenarioGrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.scenarioCard{position:relative;min-height:218px;padding:18px 54px 16px 18px;border:1px solid #d6e3df;border-radius:18px;background:#fff;color:var(--ink);text-decoration:none;box-shadow:0 5px 18px rgba(36,70,63,.045);transition:transform .15s ease,border-color .15s ease,box-shadow .15s ease}
.scenarioCard:hover{transform:translateY(-2px);border-color:#a9c9c1;box-shadow:0 10px 26px rgba(36,70,63,.09)}
.scenarioCard:focus-visible{outline:3px solid #267465;outline-offset:3px}
.scenarioCardHead{display:flex;align-items:center;gap:8px;color:#6d817b;font-size:10px;font-weight:900}
.scenarioCard h3{margin:8px 0 5px;font-size:17px;line-height:1.42}
.scenarioCard>p{margin:0 0 9px;color:#60716d;font-size:11px;line-height:1.55}
.scenarioComponents{display:flex;gap:5px;flex-wrap:wrap;margin:0 0 9px}
.scenarioComponents span{padding:3px 7px;border-radius:999px;background:#edf6f3;color:#3c6e66;font-size:9px;font-weight:850}
.scenarioCard .topRow{min-height:27px}
.scenarioCard .topRow strong{font-size:11px}
.scenarioCard .topRow b{font-size:12px}
.scenarioCardStatic{min-height:106px;display:flex;flex-direction:column;justify-content:center;padding:16px 18px}
.scenarioCardStatic>span{color:#59746e;font-size:10px;font-weight:850}
.scenarioCardStatic>strong{margin-top:4px;font-size:15px;line-height:1.5}
.scenarioDetail{padding-top:10px}
@media(max-width:980px){.scenarioGrid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:600px){
 .scenarioBrowse{padding-top:16px}
 .scenarioMethod{display:block}
 .scenarioMethod strong{display:block;margin-bottom:3px}
 .scenarioGrid{grid-template-columns:1fr}
 .scenarioCard{min-height:0;padding:17px 50px 15px 16px}
 .scenarioCard h3{font-size:16px}
}