/* Auto-ported from `preview.html` <style> (app UI only) */
:root{
  /* ヒーロー背景: 画像内の上余白を減らしたい時は px を大きく（上にずらして切る） */
  --jres-hero-bg-y: -2rem;
  --home-hero-bg-y: -10rem;
  --home-hero-card-shift-x: 123px;
  --home-hero-card-shift-y: 92px;
  --home-hero-pest-shift-x: 172px;
  --home-hero-pest-shift-y: 41px;
  --home-hero-image: url("../jres-hero.webp");
  --ink:#0b1f3a;           /* deep navy */
  --ink-2:#1a3560;
  --ink-3:#45597a;
  --line:#dfe5ee;
  --line-2:#eef1f6;
  --bg:#f5f7fa;
  --bg-card:#ffffff;
  --brand:#1e55a8;         /* primary navy-blue */
  --brand-2:#14407f;
  --brand-soft:#e7eef9;
  --accent:#e85427;        /* warm CTA */
  --accent-2:#c6401a;
  --warn:#f2b134;
  --ok:#2aa97a;
  --shadow-sm: 0 1px 2px rgba(11,31,58,.06), 0 1px 3px rgba(11,31,58,.05);
  --shadow-md: 0 4px 14px rgba(11,31,58,.08), 0 2px 6px rgba(11,31,58,.05);
  --shadow-lg: 0 20px 50px rgba(11,31,58,.12), 0 6px 18px rgba(11,31,58,.06);
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family:"Noto Sans JP", -apple-system, BlinkMacSystemFont, "Hiragino Sans", sans-serif;
  color:var(--ink);
  background:#fff;
  line-height:1.7;
  -webkit-font-smoothing:antialiased;
  font-feature-settings:"palt";
}
.serif{font-family:"Noto Serif JP", serif; letter-spacing:.02em}
.mono{font-family:"JetBrains Mono", monospace}
a{color:inherit; text-decoration:none}
button{font-family:inherit; cursor:pointer; border:none; background:none; color:inherit}
img{max-width:100%}
.container{max-width:1200px; margin:0 auto; padding:0 24px}
.container-wide{max-width:1320px; margin:0 auto; padding:0 24px}

/* Hero: 通常はベタ塗り。背景写真は .pest-top-hero と .home-hero のみ */
.hero{
  position:relative;
  overflow:hidden;
  padding:0 0 48px;
  margin:0;
  border-bottom:1px solid var(--line);
  background: linear-gradient(180deg, #f7f9fc 0%, #fff 100%);
}
.pest-top-hero::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:0;
  pointer-events:none;
  background:
    linear-gradient(180deg, rgba(30,85,168,0.12) 0%, rgba(30,85,168,0.08) 55%, rgba(30,85,168,0.06) 100%),
    linear-gradient(180deg, rgba(255,255,255,0.4) 0%, rgba(255,255,255,0.72) 40%, rgba(255,255,255,0.98) 100%),
    radial-gradient(1200px 600px at 85% -10%, rgba(233,241,251,0.55) 0%, transparent 60%),
    url("../top-background.webp") center var(--jres-hero-bg-y) / cover no-repeat;
}
.pest-top-hero .container-wide{
  position:relative; z-index:1;
  padding-top:12px;
}
/* ----- トップ専用・キャプチャ風フル幅ヒーロー ----- */
.home-hero{
  position:relative;
  margin:0;
  padding:0 0 28px;
  min-height:min(72vh, 720px);
  border-bottom:1px solid var(--line);
  overflow:hidden;
}
.home-hero::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:0;
  background: var(--home-hero-image) center var(--home-hero-bg-y) / cover no-repeat;
}
.home-hero::after{
  content:"";
  position:absolute; inset:0; z-index:0; pointer-events:none;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.15) 0%, rgba(255,255,255,0.5) 45%, rgba(255,255,255,0.88) 100%),
    linear-gradient(90deg, rgba(255,255,255,0.35) 0%, transparent 55%);
}
.home-hero__wrap{
  position:relative; z-index:1;
  min-height:min(68vh, 680px);
  display:flex;
  flex-direction:column;
  padding-top:8px;
  padding-bottom:8px;
}
.home-hero__anchor{
  position:relative;
  top:-10px;
  height:0;
}
.home-hero__head{
  text-align:center;
  padding:20px 12px 12px;
  flex:0 0 auto;
}
.home-hero__h1{
  margin:0;
  font-size:clamp(24px, 4.2vw, 40px);
  font-weight:900;
  line-height:1.25;
  letter-spacing:-.02em;
  color:var(--ink);
  text-shadow:
    0 0 1px #fff, 0 0 2px #fff, 0 0 8px rgba(255,255,255,.95),
    0 0 16px rgba(255,255,255,.8);
}
.home-hero__sub{
  margin:10px auto 0;
  max-width:38ch;
  font-size:clamp(13px, 1.8vw, 15px);
  font-weight:800;
  line-height:1.6;
  color:var(--ink-2);
  text-shadow: 0 0 2px #fff, 0 0 10px rgba(255,255,255,.9);
}
/* Push the cards closer to center (less bottom-heavy) */
.home-hero__card-spacer{ flex:0 0 clamp(44px, 10vh, 92px); min-height:20px; }
.home-hero__lower{
  display:grid;
  grid-template-columns: minmax(0, 520px) minmax(0, 420px);
  gap:16px;
  align-items:end;
  position:relative;
}
@media (max-width: 900px){
  .home-hero__wrap{
    min-height:auto;
    padding-top:0;
    padding-bottom:12px;
  }
  .home-hero__head{
    padding:14px 12px 8px;
  }
  .home-hero__lower{
    grid-template-columns: 1fr;
    align-items:stretch;
    transform:none;
    align-self:stretch;
    justify-items:center;
    gap:14px;
    padding-left:16px;
    padding-right:16px;
  }
  .home-hero__card,
  .home-hero__pestpanel{
    width:100%;
    max-width:520px;
    margin-left:auto;
    margin-right:auto;
    transform:none !important;
  }
  .home-hero__card{ transform:none; padding:18px 14px 12px; }
  .home-hero__pestpanel{ transform:none; padding:14px 14px 12px; }
  .home-hero__card-spacer{ display:none; }
}
.home-hero__card{
  width:100%;
  max-width:100%;
  background:rgba(255,255,255,.97);
  border:1px solid var(--line);
  border-radius:20px;
  box-shadow:var(--shadow-lg);
  padding:28px 20px 16px;
  position:relative;
  margin-top:0;
  transform: translate(var(--home-hero-card-shift-x), var(--home-hero-card-shift-y));
}
.home-hero__grid2{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px;
  margin-top:0;
}
@media (max-width: 520px){
  .home-hero__grid2{ grid-template-columns:1fr; }
}
.home-hero__ql{
  display:flex; align-items:center; gap:10px;
  min-height:52px; padding:10px 12px;
  border-radius:12px;
  border:1px solid var(--line);
  background:#fff;
  text-decoration:none; color:var(--ink);
  font-size:13px; font-weight:700;
  line-height:1.35;
  transition:border-color .15s, background .15s, box-shadow .15s;
}
.home-hero__ql:hover{
  border-color:var(--brand);
  background:var(--brand-soft);
  box-shadow:var(--shadow-sm);
}
.home-hero__ql-ico{
  flex:0 0 36px; width:36px; height:36px;
  border-radius:8px; background:var(--brand-soft); color:var(--brand);
  display:grid; place-items:center;
}
.home-hero__ql-ico svg{ display:block; }
.home-hero__card-foot{
  display:flex; align-items:center; justify-content:space-between;
  gap:10px; flex-wrap:wrap;
  margin-top:12px; padding-top:10px;
  border-top:1px dashed var(--line);
  font-size:12px; font-weight:600;
}
.home-hero__card-foot a{
  color:var(--brand);
  text-decoration:underline; text-underline-offset:2px;
}
.home-hero__card-foot a:hover{ color:var(--brand-2) }
.home-hero__pestpanel{
  width:100%;
  background:rgba(255,255,255,.92);
  border:1px solid var(--line);
  border-radius:20px;
  box-shadow:var(--shadow-lg);
  padding:18px 18px 16px;
  position:relative;
  transform: translate(var(--home-hero-pest-shift-x), var(--home-hero-pest-shift-y));
}
.home-hero__pests-t{
  font-size:12px; font-weight:900; color:var(--ink-2);
  margin:0 0 10px;
  letter-spacing:.04em;
}
.home-pest-choices{ margin:0; }
.hero-kicker{
  display:inline-flex; align-items:center; gap:8px;
  background:var(--brand-soft); color:var(--brand-2);
  padding:6px 12px; border-radius:999px;
  font-size:12px; font-weight:700; letter-spacing:.05em;
}
.hero-kicker .dot{width:6px; height:6px; border-radius:50%; background:var(--accent); box-shadow:0 0 0 4px rgba(232,84,39,.18)}
.hero-title{
  font-size:40px; line-height:1.3; font-weight:900; margin:14px 0 10px;
  letter-spacing:-.01em;
}
.hero-title .hl{
  background:linear-gradient(transparent 65%, #ffe27a 65%);
  padding:0 2px;
}
.hero-sub{color:var(--ink-3); font-size:15px; max-width:60ch}
.hero-stats{
  display:flex; gap:26px; margin-top:22px; flex-wrap:wrap;
}
.hero-stat{display:flex; align-items:baseline; gap:8px}
.hero-stat .num{
  font-family:"Noto Serif JP", serif; font-weight:900;
  font-size:26px; color:var(--brand);
}
.hero-stat .lbl{font-size:12px; color:var(--ink-3); font-weight:500}
.hero-grid{
  margin-top:0;
  display:grid;
  grid-template-columns: minmax(0, 3fr) minmax(0, 1fr);
  gap:24px;
  align-items:stretch;
}
@media (max-width:1000px){
  .hero-grid{grid-template-columns:1fr}
  .hero-title{font-size:30px}
}
/* Pest top hero: map column should always occupy full grid width */
.hero-grid > .map-panel,
.hero-grid > .pestbook-japan-map{
  min-width:0;
  width:100%;
}
.pestbook-japan-map{
  width:100%;
}
.pestbook-map-panel.map-panel{
  width:100%;
  max-width:none;
  margin:0;
}
.home-pest-title{
  font-size:clamp(22px, 4.2vw, 30px);
  font-weight:900;
  margin:0 0 8px;
  letter-spacing:-.01em;
}
.home-pest-lead{color:var(--ink-3); font-size:15px; max-width:56ch; margin:0 0 20px}
.home-pest-choices{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap:14px;
}
@media (max-width: 820px){
  .home-pest-choices{grid-template-columns:1fr; gap:10px}
}
.home-pest-card{
  display:block;
  padding:18px 20px;
  border-radius:14px;
  border:1px solid var(--line);
  background:var(--bg-card);
  box-shadow:var(--shadow-sm);
  text-decoration:none;
  color:var(--ink);
  font-weight:800;
  font-size:15px;
  transition: border-color .15s, box-shadow .15s;
}
.home-pest-card:hover{
  border-color:var(--brand);
  box-shadow:var(--shadow-md);
}
.home-pest-card.is-disabled{
  color:var(--ink-3);
  opacity:.55;
  pointer-events:none;
  box-shadow:none;
}
.home-pest-card.is-disabled:hover{
  border-color:var(--line);
  box-shadow:none;
}
.home-pest-card__sub{
  display:block;
  margin-top:6px;
  font-size:12px;
  color:var(--ink-3);
  font-weight:500;
}
.pest-side__block{margin-bottom:18px}
.pest-side__block:last-child{margin-bottom:0; padding-top:4px; border-top:1px dashed var(--line)}
.pest-side__h{
  font-size:12px; font-weight:800; color:var(--ink-2);
  margin:0 0 8px; letter-spacing:.04em;
}
.pest-side__pests{display:flex; flex-direction:column; gap:8px}
.pest-side__pest-link{
  display:block;
  padding:12px 14px;
  border-radius:10px;
  border:1px solid var(--line);
  background:var(--bg);
  text-decoration:none;
  color:var(--ink);
  font-weight:700;
  font-size:14px;
}
.pest-side__pest-link:hover{border-color:var(--brand); background:var(--brand-soft)}
.pest-side__pest-link.is-disabled{
  color:var(--ink-3);
  opacity:.55;
  pointer-events:none;
  background:var(--bg);
}

/* スマホ: 地図下にサイド欄 */
@media (max-width: 820px){
  .pest-top-hero .container-wide{padding-left:0;padding-right:0;}
  .map-panel .panel-head{display:none;}
  .map-panel .map-legend{display:none;}
  .map-panel{
    border-radius:0;
    border:0;
    border-bottom:1px solid var(--line);
    box-shadow:none;
    padding:0;
    overflow:visible;
    background:#fff;
  }
  .map-panel::before{display:none;}
}

/* Map panel */
.map-panel{
  background:#fff; border:1px solid var(--line);
  border-radius:16px; padding:22px; box-shadow:var(--shadow-md);
  position:relative; overflow:hidden;
}
.map-panel::before{
  content:""; position:absolute; inset:0;
  background:
    radial-gradient(circle at 10% 0%, rgba(30,85,168,.05), transparent 40%);
  pointer-events:none;
}
.panel-head{
  display:flex; align-items:center; justify-content:space-between; margin-bottom:14px;
}
.panel-title{
  display:flex; align-items:center; gap:10px;
  font-size:15px; font-weight:700;
}
.panel-title .ico{
  width:28px; height:28px; border-radius:8px;
  background:var(--brand-soft); color:var(--brand);
  display:grid; place-items:center;
}
.panel-hint{font-size:12px; color:var(--ink-3)}
.map-wrap{
  position:relative;
  background:
    linear-gradient(180deg, #f7faff 0%, #eef3fb 100%);
  border:1px solid #cfd9e8;
  border-radius:12px;
  padding:16px;
  overflow:hidden;
  aspect-ratio: 16 / 9;
  width:100%;
  /* for responsive region cards */
  container-type:inline-size;
}
.pestbook-map-wrap.map-wrap{
  width:100%;
}
.map-corner-label{
  position:absolute;
  top:12px;
  left:12px;
  z-index:2;
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:6px 4px;
  font-weight:900;
  font-size:16px;
  color:var(--ink);
  text-shadow:
    0 0 2px rgba(255,255,255,.95),
    0 0 10px rgba(255,255,255,.8);
  pointer-events:none;
}
.map-corner-label .ico{
  width:32px; height:32px;
  border-radius:10px;
  background:transparent;
  color:var(--brand);
  display:grid;
  place-items:center;
}
.map-bg{
  position:absolute; inset:0;
  display:grid; place-items:center;
  pointer-events:auto;
  opacity:.9;
  transform-origin:center center;
  transition: transform .05s linear;
  user-select:none;
}
/* preview の map-bg と同じく scale/translate。親テーマの img{max-width:100%} で縮まないよう明示 */
.pestbook-map-bg.map-bg{
  transform:
    translate(var(--pestbook-map-x, 0px), var(--pestbook-map-y, 0px))
    scale(var(--pestbook-map-scale, 1.10));
}
.map-bg img,
.pestbook-map-bg img{
  width:110%;
  height:110%;
  max-width:none;
  max-height:none;
  object-fit:contain;
  filter:saturate(.85);
}
.map-overlay{
  position:absolute; inset:0;
  z-index:1;
}
.region-card{
  position:absolute;
  background:rgba(255,255,255,.96);
  border:1px solid var(--line);
  border-radius:8px;
  padding:clamp(4px, 1.2cqw, 6px) clamp(6px, 1.6cqw, 8px) clamp(5px, 1.3cqw, 7px);
  box-shadow: 0 2px 8px rgba(11,31,58,.08);
  backdrop-filter:saturate(140%) blur(3px);
  min-width:clamp(74px, 16cqw, 92px);
}
/* pestbook.css の地方カード用スケール（カスタマイザー/編集）を preview 由来の .region-card と合成 */
.pestbook-region-card.region-card{
  transform:scale(var(--pestbook-region-card-scale, 1));
  transform-origin:top left;
}
.region-card .rc-head{
  font-size:clamp(8px, 1.8cqw, 9.5px); font-weight:800; letter-spacing:.06em;
  color:#fff; background:var(--brand);
  padding:2px 6px; border-radius:3px; display:inline-block;
  margin-bottom:5px;
}
.region-card .rc-prefs{
  display:grid; grid-template-columns:repeat(2, 1fr); gap:2px;
}
.region-card.wide .rc-prefs{grid-template-columns:repeat(2, 1fr)}
.pref-chip{
  font-size:clamp(8.5px, 2.0cqw, 10px); font-weight:700;
  color:var(--ink-2);
  padding:clamp(2px, .8cqw, 3px) clamp(3px, 1.2cqw, 4px); border-radius:3px;
  text-align:center;
  cursor:pointer;
  border:1px solid transparent;
  transition:all .12s ease;
  line-height:1.2;
  background:#fff;
}
@container (max-width: 520px){
  .region-card{min-width:68px}
  .region-card .rc-head{margin-bottom:4px}
  .pref-chip{border-radius:4px}
}
@container (max-width: 420px){
  .region-card{min-width:62px}
}
.pref-chip:hover{
  background:var(--brand); color:#fff;
}
.pref-chip.active{
  background:var(--accent); color:#fff;
}
.region-connector{
  position:absolute;
  height:1px; background:var(--brand); opacity:.5;
  transform-origin:left center;
  z-index:0;
}
.region-connector::after{
  content:""; position:absolute; right:-3px; top:-2px;
  width:5px; height:5px; border-radius:50%; background:var(--brand);
}
.map-legend{
  display:flex; gap:14px; margin-top:10px; font-size:12px; color:var(--ink-3);
  flex-wrap:wrap;
}
.legend-sw{display:inline-flex; align-items:center; gap:6px}
.legend-sw .sw{width:12px; height:12px; border-radius:3px; border:1px solid #c7d2e2; background:#fff}
.legend-sw .sw.b{background:var(--brand); border-color:var(--brand-2)}
.legend-sw .sw.a{background:var(--accent); border-color:var(--accent-2)}

/* Right side: pest genre selector */
.genre-panel{
  background:#fff; border:1px solid var(--line);
  border-radius:16px; padding:22px; box-shadow:var(--shadow-md);
  display:flex; flex-direction:column;
}
.genre-search{
  display:flex; gap:8px; margin-bottom:14px;
}
.genre-search input{
  flex:1; border:1px solid var(--line);
  background:var(--bg); border-radius:10px;
  padding:12px 14px; font-size:14px; font-family:inherit;
  color:var(--ink);
}
.genre-search input:focus{outline:2px solid var(--brand-soft); border-color:var(--brand)}
.genre-search button{
  width:46px; border-radius:10px; background:var(--ink);
  color:#fff; display:grid; place-items:center;
}
.genre-head{font-size:12px; color:var(--ink-3); font-weight:700; letter-spacing:.08em; margin:10px 0 8px}
.genre-grid{
  display:flex; flex-direction:column; gap:6px;
  margin-bottom:12px;
}
.genre-card{
  border:1px solid var(--line); border-radius:10px;
  background:#fff;
  padding:10px 12px;
  display:flex; align-items:center; justify-content:space-between; gap:8px;
  text-align:left;
  transition:all .15s ease;
  position:relative;
}
.genre-card:hover{
  border-color:var(--brand); box-shadow:var(--shadow-sm);
}
.genre-card.active{
  border-color:var(--brand); background:var(--brand-soft);
}
.genre-card .nm{font-size:13px; font-weight:700; line-height:1.3; display:flex; align-items:center; gap:8px}
.genre-card .nm::before{
  content:""; width:6px; height:6px; border-radius:50%;
  background:var(--brand); opacity:.3;
}
.genre-card.active .nm::before{opacity:1}
.genre-card .pr{
  font-size:11px; color:var(--ink-3);
  font-family:"JetBrains Mono", monospace; letter-spacing:.02em;
}
.genre-card .pr b{color:var(--ink); font-weight:700}
.urgent-row{
  display:flex; gap:10px; margin-top:auto; padding-top:14px;
  border-top:1px dashed var(--line);
}
.urgent-btn{
  flex:1; background:var(--brand); color:#fff;
  border-radius:10px; padding:14px; font-weight:700; font-size:14px;
  display:flex; align-items:center; justify-content:center; gap:8px;
  transition:background .15s;
}
.urgent-btn:hover{background:var(--brand-2)}
@media (max-width:600px){
  .genre-grid{grid-template-columns:repeat(2,1fr)}
}

/* Generic section */
section{padding:72px 0; border-bottom:1px solid var(--line-2)}
.sec-kicker{
  font-size:12px; font-weight:700; letter-spacing:.25em;
  color:var(--brand); text-transform:uppercase;
}
.sec-title{
  font-size:32px; font-weight:900; letter-spacing:-.01em;
  margin:8px 0 8px;
}
.sec-sub{color:var(--ink-3); font-size:15px}
.sec-head{text-align:center; margin-bottom:40px}
.sec-head.left{text-align:left}

/* Simulator */
.sim{
  background:linear-gradient(180deg, #0b1f3a 0%, #13315c 100%);
  color:#fff;
  border-bottom-color:#13315c;
}
.sim .sec-title{color:#fff}
.sim .sec-kicker{color:#9ec1ef}
.sim .sec-sub{color:#b9c4d9}
.sim-card{
  background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.12);
  border-radius:18px;
  padding:28px;
  backdrop-filter:blur(6px);
  display:grid; grid-template-columns: 1.2fr 1fr; gap:28px;
}
@media (max-width:900px){ .sim-card{grid-template-columns:1fr} }
.sim-field{margin-bottom:18px}
.sim-label{
  display:flex; justify-content:space-between; align-items:center;
  font-size:12px; letter-spacing:.08em; color:#b9c4d9;
  font-weight:700; margin-bottom:8px;
}
.sim-label span.v{color:#fff; font-family:"JetBrains Mono", monospace}
.chips{display:flex; gap:8px; flex-wrap:wrap}
.chip{
  padding:10px 14px; border-radius:10px;
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.14);
  color:#dbe4f2; font-size:13px; font-weight:700;
  display:inline-flex; align-items:center; gap:8px;
  transition:all .15s;
}
.chip:hover{background:rgba(255,255,255,.1)}
.chip.active{ background:#fff; color:var(--ink); border-color:#fff; }
.chip.big{padding:14px 16px; font-size:14px}

/* Step-based diagnostic（preview.html と同構造） */
.diag{
  display:grid; grid-template-columns: 1fr 1fr; gap:28px;
}
.diag > *{ min-width:0; }
.diag-result-empty[hidden],
.sim-result[hidden]{
  display:none !important;
}
@media (max-width:900px){ .diag{grid-template-columns:1fr} }
.diag-steps{
  background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.12);
  border-radius:18px;
  padding:28px;
}
.diag-progress{
  display:flex; gap:6px; margin-bottom:22px;
}
.diag-progress .seg{
  flex:1; height:4px; border-radius:999px;
  background:rgba(255,255,255,.1);
  transition:background .3s;
}
.diag-progress .seg.on{background:#fff}
.diag-step-label{
  font-size:11px; letter-spacing:.2em; color:#9ec1ef; font-weight:700;
  margin-bottom:10px;
}
.diag-q{
  font-size:22px; font-weight:900; color:#fff;
  margin-bottom:20px; letter-spacing:-.005em;
}
.diag-opts{display:grid; grid-template-columns: 1fr 1fr; gap:8px}
.diag-opts.one{grid-template-columns:1fr}
.diag-opt{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:14px 16px;
  background:rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.14);
  border-radius:10px;
  color:#dbe4f2; font-weight:700; font-size:14px;
  text-align:left;
  transition:all .15s;
  width:100%;
  font-family:inherit;
  cursor:pointer;
}
.diag-opt:hover{background:rgba(255,255,255,.12); border-color:rgba(255,255,255,.3)}
.diag-opt.active{background:#fff; color:var(--ink); border-color:#fff}
.diag-opt:disabled{
  opacity:.5;
  cursor:not-allowed;
}
.diag-opt .meta{
  font-size:11px; font-weight:500; color:#b9c4d9;
  font-family:"JetBrains Mono", monospace;
}
.diag-opt.active .meta{color:var(--ink-3)}
.diag-nav{
  display:flex; justify-content:space-between; align-items:center;
  margin-top:24px;
}
.diag-back{
  font-size:13px; color:#9ec1ef; font-weight:700;
  display:inline-flex; align-items:center; gap:6px;
  background:transparent;
  border:0;
  padding:4px 0;
  cursor:pointer;
  font-family:inherit;
}
.diag-back:disabled{opacity:.3; cursor:not-allowed}
.diag-submit{
  background:var(--brand); color:#fff; font-weight:800;
  padding:12px 22px; border-radius:999px; font-size:14px;
  display:inline-flex; align-items:center; gap:8px;
  border:0;
  cursor:pointer;
  font-family:inherit;
}
.diag-submit:hover{background:#fff; color:var(--ink)}
.diag-submit:disabled{opacity:.4; cursor:not-allowed}
.diag-slider{
  background:rgba(0,0,0,.15); border-radius:12px; padding:18px 20px;
  margin-bottom:16px;
}
.diag-slider-val{
  font-family:"Noto Serif JP", serif; font-weight:900; font-size:36px;
  color:#fff; line-height:1; margin-bottom:14px;
}
.diag-slider-val small{font-size:14px; color:#9ec1ef; font-family:"Noto Sans JP", sans-serif; font-weight:500; margin-left:6px}
.diag-result-empty{
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-align:center;
  background:rgba(255,255,255,.03);
  border:1px dashed rgba(255,255,255,.14);
  border-radius:14px;
  padding:40px 24px;
  color:#9ec1ef;
  min-height:100%;
}
.diag-result-empty .step-i{
  font-family:"Noto Serif JP", serif; font-size:44px; font-weight:900;
  color:#fff; opacity:.18; line-height:1;
}
.diag-result-empty .lbl{font-size:12px; letter-spacing:.2em; font-weight:700; margin-top:10px; color:#b9c4d9}
.diag-result-empty .hint{font-size:13px; margin-top:10px; color:#b9c4d9; max-width:30ch}

@keyframes num-pulse{
  0%{transform:scale(1)}
  50%{transform:scale(1.04)}
  100%{transform:scale(1)}
}
.pulse{animation:num-pulse .4s ease}

.sim-range{
  width:100%; -webkit-appearance:none; appearance:none;
  height:6px; border-radius:999px; background:rgba(255,255,255,.14);
  outline:none;
}
.sim-range::-webkit-slider-thumb{
  -webkit-appearance:none; appearance:none;
  width:22px; height:22px; border-radius:50%;
  background:#fff; border:3px solid var(--brand);
  box-shadow:0 2px 8px rgba(0,0,0,.3); cursor:pointer;
}
.sim-result{
  background:#fff; color:var(--ink);
  border-radius:14px; padding:28px;
  display:flex; flex-direction:column;
  position:relative;
}
.sim-result-label{font-size:12px; color:var(--ink-3); font-weight:700; letter-spacing:.1em}
.sim-price{
  font-family:"Noto Serif JP", serif;
  font-weight:900; font-size:56px; line-height:1.1;
  letter-spacing:-.02em; color:var(--ink);
  margin:6px 0;
  display:flex; align-items:baseline; gap:4px;
}
.sim-price .unit{font-size:18px; font-weight:700; color:var(--ink-3); font-family:"Noto Sans JP", sans-serif}
.sim-price .sep{font-size:22px; color:var(--ink-3); font-weight:700; margin:0 4px}
.sim-bar{
  height:8px; background:var(--bg); border-radius:999px; overflow:hidden;
  margin:14px 0 10px;
}
.sim-bar .fill{
  height:100%;
  background:var(--brand);
  border-radius:999px;
  transition:width .4s cubic-bezier(.2,.7,.2,1);
}
.sim-breakdown{
  display:grid; grid-template-columns:1fr 1fr; gap:6px 14px;
  font-size:12px; color:var(--ink-3); margin-top:6px;
}
.sim-breakdown div{display:flex; justify-content:space-between}
.sim-breakdown b{color:var(--ink); font-family:"JetBrains Mono", monospace}
.sim-note{
  margin-top:auto; padding-top:14px;
  font-size:11px; color:var(--ink-3);
  border-top:1px dashed var(--line);
}
@media (max-width: 520px){
  .sim-result{ padding:18px 16px; }
  .sim-price{
    font-size:clamp(28px, 10vw, 42px);
    flex-wrap:wrap;
    word-break:break-word;
    overflow-wrap:anywhere;
  }
  .sim-price .unit{font-size:14px}
  .sim-price .sep{font-size:16px; margin:0 2px}
  .sim-breakdown{ grid-template-columns:1fr; }
}

/* FAQ */
.faq{background:#fff; border-bottom:1px solid var(--line)}
.faq-grid{display:grid; grid-template-columns:1fr 1fr; gap:14px}
@media (max-width: 820px){ .faq-grid{grid-template-columns:1fr} }
details.faq-item{
  border:1px solid var(--line);
  border-radius:14px;
  padding:14px 16px;
  background:var(--bg);
}
details.faq-item summary{
  cursor:pointer;
  list-style:none;
  display:flex;
  align-items:flex-start;
  gap:12px;
  font-weight:900;
  color:var(--ink);
}
details.faq-item summary::-webkit-details-marker{display:none;}
.faq-q{
  width:26px; height:26px; border-radius:8px;
  background:var(--brand-soft);
  color:var(--brand);
  display:grid; place-items:center;
  flex:0 0 auto;
  font-family:"JetBrains Mono", monospace;
  font-size:12px;
}
.faq-a{margin-top:10px; color:var(--ink-2); font-size:14px; line-height:1.7}
.faq-a b{color:var(--ink)}

/* Articles */
.art-head{display:flex; align-items:flex-end; justify-content:space-between; margin-bottom:24px; gap:16px; flex-wrap:wrap}
.art-scroll{
  display:grid; grid-auto-flow:column;
  grid-auto-columns: minmax(280px, 320px);
  gap:18px;
  overflow-x:auto;
  padding-bottom:14px;
  scroll-snap-type:x mandatory;
  scrollbar-width:thin;
}
.art-card{
  background:#fff; border:1px solid var(--line);
  border-radius:14px; overflow:hidden;
  scroll-snap-align:start;
  display:flex; flex-direction:column;
  transition:transform .18s, box-shadow .18s;
}
.art-card:hover{transform:translateY(-3px); box-shadow:var(--shadow-md)}
.art-thumb{
  height:160px;
  background:
    linear-gradient(135deg, rgba(30,85,168,.08), rgba(30,85,168,.02)),
    repeating-linear-gradient(45deg, #eef3fb 0 10px, #f7f9fc 10px 20px);
  position:relative;
  display:grid; place-items:center;
  font-family:"JetBrains Mono", monospace; font-size:11px; color:var(--ink-3);
  border-bottom:1px solid var(--line);
}
.art-tag{
  position:absolute; top:10px; left:10px;
  background:var(--ink); color:#fff; font-size:11px; font-weight:700;
  padding:3px 8px; border-radius:4px;
}
.art-body{padding:16px 18px 18px}
.art-title{font-size:15px; font-weight:700; line-height:1.55; margin-bottom:8px}
.art-meta{font-size:11px; color:var(--ink-3); display:flex; gap:10px; font-family:"JetBrains Mono", monospace}
.art-nav{display:flex; gap:8px}
.art-nav button{
  width:40px; height:40px; border-radius:50%;
  border:1px solid var(--line); background:#fff;
  display:grid; place-items:center;
}
.art-nav button:hover{border-color:var(--ink)}

/* CTA */
.cta{
  background:linear-gradient(135deg, #0b1f3a, #1e55a8 120%);
  color:#fff; text-align:center;
  padding:80px 0;
  position:relative; overflow:hidden;
}
.cta::before{
  content:""; position:absolute; inset:0;
  background-image:
    radial-gradient(circle at 20% 20%, rgba(255,255,255,.06) 0, transparent 40%),
    radial-gradient(circle at 80% 80%, rgba(30,85,168,.18) 0, transparent 40%);
}
.cta-inner{position:relative; z-index:1}
.cta h2{font-size:36px; margin:0 0 10px; font-weight:900}
.cta p{color:#c4d2ea; font-size:15px; margin-bottom:28px}
.cta-btns{display:flex; gap:14px; justify-content:center; flex-wrap:wrap}
.btn-primary{
  display:inline-flex; align-items:center; gap:10px;
  background:var(--brand); color:#fff; font-weight:800;
  padding:18px 34px; border-radius:999px; font-size:16px;
  box-shadow:0 12px 24px rgba(30,85,168,.35);
  transition:transform .15s, background .15s;
}
.btn-primary:hover{background:var(--brand-2); transform:translateY(-1px)}
.btn-ghost{
  display:inline-flex; align-items:center; gap:10px;
  background:rgba(255,255,255,.08); color:#fff;
  border:1px solid rgba(255,255,255,.3);
  padding:18px 28px; border-radius:999px; font-weight:700; font-size:14px;
}
.btn-ghost:hover{background:rgba(255,255,255,.14)}

/* Footer */
footer{background:#081627; color:#98a6bf; padding:44px 0 24px; font-size:13px}
.foot-grid{display:grid; grid-template-columns:2fr 1fr 1fr 1fr; gap:28px; margin-bottom:28px}
@media (max-width:820px){ .foot-grid{grid-template-columns:1fr 1fr} }
.foot-logo{color:#fff; font-weight:900; font-size:16px; margin-bottom:8px}
.foot-grid h5{color:#fff; margin:0 0 12px; font-size:13px}
.foot-grid ul{list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:8px}
.foot-grid a{color:#98a6bf}
.foot-grid a:hover{color:#fff}
.foot-bot{border-top:1px solid rgba(255,255,255,.08); padding-top:18px; text-align:center; font-size:11px; color:#6b7a94}

/* Mobile fixed CTA */
.mobile-cta{
  display:none;
  position:fixed; bottom:0; left:0; right:0;
  background:#fff; padding:10px 14px calc(10px + env(safe-area-inset-bottom));
  border-top:1px solid var(--line);
  z-index:40;
  box-shadow:0 -4px 14px rgba(11,31,58,.08);
  gap:10px;
}
.mobile-cta .btn-primary{flex:1; padding:14px 20px; font-size:14px; justify-content:center}
@media (max-width:900px){ .mobile-cta{display:flex} body{padding-bottom:86px} }

.postal-section{
  background:var(--bg);
  border-bottom:1px solid var(--line);
  padding:40px 0;
  scroll-margin-top: 84px;
}
.postal-section-inner{
  max-width:640px; margin:0 auto; padding:0 24px;
}
.postal-section h2{font-size:22px; font-weight:900; margin:0 0 8px}
.postal-section p{font-size:14px; color:var(--ink-3); margin:0 0 20px}
.postal-form{display:flex; gap:10px; flex-wrap:wrap; align-items:stretch}
.postal-form input{
  flex:1; min-width:200px;
  border:1px solid var(--line); border-radius:10px;
  padding:14px 16px; font-size:16px; font-family:inherit;
  letter-spacing:.08em;
}
.postal-form input:focus{outline:2px solid var(--brand-soft); border-color:var(--brand)}
.postal-form button{
  padding:14px 22px; border-radius:10px;
  background:var(--brand); color:#fff; font-weight:800; font-size:14px;
  white-space:nowrap;
}
.postal-form button:hover{background:var(--brand-2)}

/* Home: postal + geo side-by-side on desktop */
.home-duo{
  display:grid;
  grid-template-columns:1fr;
  gap:18px;
  padding:36px 0 10px;
  border-bottom:1px solid var(--line);
  background:#fff;
}
.home-duo > section{
  padding:0;
  border-bottom:0;
  background:transparent;
}
.home-duo .postal-section-inner{
  max-width:none;
  padding:0 24px;
}
@media (min-width: 980px){
  .home-duo{
    grid-template-columns:1fr 1fr;
    align-items:start;
  }
  .home-duo .geo-section .geo-actions{
    justify-content:center;
  }
}
@media (max-width: 900px){
  .geo-actions{ justify-content:center; }
}

.city-select-page, .area-result-page{
  background:#fff;
  border-bottom:1px solid var(--line);
  min-height:40vh;
}
.breadcrumb{color:var(--ink-3); font-size:13px; margin-bottom:16px}
.breadcrumb a{color:var(--brand); font-weight:700}
.city-list{
  border:1px solid var(--line); border-radius:12px; overflow:auto;
  max-width:560px;
  max-height:min(70vh, 720px);
}
.city-row{
  display:block; padding:14px 18px; border-bottom:1px solid var(--line);
  font-size:15px; font-weight:600; color:var(--ink);
  transition:background .12s;
}
.city-row:last-child{border-bottom:0}
.city-row:hover{background:var(--brand-soft)}

/* CitySelect (PC: avoid tall 1-column lists) */
.city-select__table{
  display:grid;
  grid-template-columns:minmax(180px, 220px) 1fr;
  border:1px solid var(--line);
  border-radius:14px;
  background:#fff;
  overflow:hidden;
  /* Some environments fail to apply max-height:min(); ensure a definite height so inner panes can scroll. */
  height:520px;
  height:min(62vh, 520px);
  max-height:520px;
  max-height:min(62vh, 520px);
  min-height:0;
}
.city-select__left{
  background:var(--bg);
  border-right:1px solid var(--line);
  overflow:auto;
  height:100%;
  min-height:0;
}
.city-select__right{
  padding:14px 14px;
  overflow:auto;
  height:100%;
  min-height:0;
}
.city-select__cities{
  display:grid;
  grid-template-columns:repeat(3, minmax(0, 1fr));
  gap:10px 14px;
}
.pb-city-pick.pb-city-pick--disabled{
  pointer-events:none;
}
.pb-city-pick.pb-city-pick--disabled:focus{
  outline:none;
}
@media (min-width: 1100px){
  .city-select__cities{ grid-template-columns:repeat(4, minmax(0, 1fr)); }
}
@media (max-width: 900px){
  .city-select__cities{ grid-template-columns:repeat(2, minmax(0, 1fr)); }
  .city-select__table{ grid-template-columns: minmax(160px, 200px) 1fr; }
}
@media (max-width: 560px){
  .city-select__table{ grid-template-columns: 1fr; max-height:none; }
  .city-select__left{ border-right:0; border-bottom:1px solid var(--line); max-height:240px; }
  .city-select__cities{ grid-template-columns:1fr; }
}

/* Mobile: 地図→アコーディオンリスト（preview互換） */
.map-mobile-list{display:none}
@media (max-width: 820px){
  .map-wrap{
    aspect-ratio:auto;
    min-height:0;
    padding:0;
    background:transparent;
    border:0;
    border-radius:0 !important;
    box-shadow:none;
    overflow:visible;
  }
  .map-overlay{display:none !important;}
  .map-bg{display:none !important;}
  .map-mobile-list{
    display:block;
    position:relative;
    z-index:2;
    padding:0;
    margin:0;
    overflow:visible;
    background:transparent;
    -webkit-overflow-scrolling:touch;
  }
  .mml-section-bar{
    background:var(--line-2);
    color:var(--ink-2);
    font-size:14px;
    font-weight:900;
    padding:14px 16px;
    border-bottom:1px solid var(--line);
    letter-spacing:.02em;
  }
  .mml-acc{border-bottom:1px solid var(--line); background:#fff;}
  .mml-acc-trigger{
    width:100%;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    padding:16px 16px;
    border:0;
    background:#fff;
    font-family:inherit;
    font-size:15px;
    font-weight:700;
    color:var(--ink);
    text-align:left;
    cursor:pointer;
  }
  .mml-acc-trigger:active{background:var(--bg);}
  .mml-chev{
    flex:0 0 auto;
    color:var(--ink-3);
    font-size:11px;
    line-height:1;
    transition:transform .2s ease;
  }
  .mml-acc-trigger.is-open .mml-chev{transform:rotate(180deg);}
  .mml-acc-panel{
    padding:0;
    border:0;
    background:#fff;
  }
  .mml-pref-list{margin:0; padding:0;}
  .mml-pref-row{
    display:block;
    width:100%;
    box-sizing:border-box;
    margin:0;
    padding:14px 16px;
    border:0;
    border-top:1px solid var(--line);
    background:#fff;
    font-family:inherit;
    font-size:15px;
    font-weight:600;
    color:var(--ink);
    text-align:left;
    cursor:pointer;
  }
  .mml-pref-row:active{background:rgba(11,31,58,.03);}
  .mml-pref-row.is-active{
    background:rgba(30,85,168,.08);
    font-weight:800;
  }
}