/* ============================================================
   assets/home.css — トップページ（地域から探す版）
   色・フォント・角丸・影は styles.css の変数のみを使用
   記事カードは styles.css 既存の .article-card を再利用
   ブレークポイントは styles.css と同じ 1024px / 768px
============================================================ */

/* --- ヒーロー：都道府県を選ぶ --- */
.hm-hero { background:#fff; border-bottom:1px solid var(--border); padding:36px 0 40px; }
.hm-hero-inner {
  max-width:1240px; margin:0 auto; padding:0 20px;
  display:grid; grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr); gap:40px; align-items:center;
}
.hm-hero h1 { font-size:28px; line-height:1.5; margin-bottom:10px; }
.hm-hero-sub { color:var(--text-sub); font-size:15px; margin:0 0 22px; }
.hm-hero-img { aspect-ratio:4/3; border-radius:var(--radius); overflow:hidden; position:relative; background:#fff; }
.hm-hero-img img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }

.hm-area-form label { display:block; font-size:13px; font-weight:700; color:var(--text-sub); margin:0 0 8px; }
.hm-area-row { display:flex; gap:8px; }
.hm-area-row select {
  flex:1 1 auto; min-width:0; height:54px; padding:0 44px 0 16px;
  border:2px solid var(--border-strong); border-radius:var(--radius-sm);
  font:inherit; font-size:16px; font-weight:600; color:var(--text);
  background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%2315546C' stroke-width='2'/%3E%3C/svg%3E") no-repeat right 16px center;
  appearance:none; -webkit-appearance:none; cursor:pointer;
}
.hm-area-row select:focus { outline:none; border-color:var(--primary); }
/* 青のボタン：サイト内での検索・絞り込みに使う（CTAの赤とは区別する） */
.btn-search {
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  flex:0 0 auto; min-height:54px; padding:0 24px;
  background:var(--primary-deep); color:#fff; border:none; border-radius:var(--radius-sm);
  font:inherit; font-size:15px; font-weight:700; line-height:1.4; cursor:pointer; white-space:nowrap;
  transition:background .18s;
}
.btn-search:hover { background:#0E3D50; }
.btn-search:focus-visible { outline:3px solid var(--primary-line); outline-offset:2px; }
.hm-area-help { margin:10px 0 0; font-size:13px; color:var(--muted); }

/* --- セクション見出し --- */
.hm-sec { margin:56px 0 0; scroll-margin-top:110px; }
.hm-sec-head { display:flex; align-items:baseline; justify-content:space-between; gap:16px; margin-bottom:18px; flex-wrap:wrap; }
.hm-sec-head h2 { font-size:22px; flex:1 1 auto; min-width:0; }
.hm-sec-head .hm-sub { flex:1 0 100%; margin:-8px 0 0; font-size:13.5px; color:var(--text-sub); }
.hm-more { font-size:14px; font-weight:600; color:var(--link); white-space:nowrap; }
.hm-more::after { content:" ›"; }
.hm-more:hover { text-decoration:underline; text-underline-offset:4px; }
.hm-reset { font-size:13px; color:var(--muted); background:none; border:none; padding:0; font:inherit; cursor:pointer; text-decoration:underline; text-underline-offset:3px; }

/* --- 対応業者（地域で絞り込む） --- */
.hm-compare { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:20px; }
.hm-cmp { background:#fff; border:1px solid var(--border-warm); border-radius:var(--radius); overflow:hidden; display:flex; flex-direction:column; }
/* グレーはページ背景（--warm-bg）や --border-warm と同じ、少し暖かみのあるグレーで統一する */
.hm-compare { --hm-gray:#6E6A63; --hm-gray-tint:#F5F2ED; --hm-gray-line:var(--border-warm); }
/* 枠の見出し：グレーの帯に白文字・中央寄せ */
.hm-cmp-head { padding:14px 20px; text-align:center; background:var(--hm-gray); }
.hm-cmp-head h3 { font-size:18px; font-weight:700; color:#fff; letter-spacing:.04em; }
.hm-cmp-head span { font-size:12.5px; color:var(--muted); white-space:nowrap; }
/* 1行のなかの要素は「青字＝押せる／黒字＝押せない」で塗り分ける。
   社名＝青字リンク（外部）／料金＝黒字（押せない）／徹底解説＝青字リンク（内部）。
   サイト全体ですでにリンクは青（--primary-deep）なので、この行だけ黒に落としていた指定を外す。 */
.hm-cmp-row {
  display:grid; grid-template-columns:minmax(0,1fr) auto; gap:12px; align-items:center;
  padding:14px 20px; border-bottom:1px solid var(--border-warm);
}
.hm-cmp-lead { min-width:0; }
.hm-cmp-lead .nm { font-size:15px; font-weight:700; line-height:1.45; color:var(--link); }
.hm-cmp-lead .nm:hover { text-decoration:underline; text-underline-offset:3px; }
.hm-cmp-lead .s { font-size:12.5px; color:var(--text); line-height:1.6; margin-top:3px; }
.hm-cmp-row .lnk-explain { font-size:13px; font-weight:700; color:var(--link); text-decoration:underline; text-underline-offset:3px; white-space:nowrap; }
.hm-cmp-row .lnk-explain:hover { color:var(--link-hover); }
.hm-cmp-foot { padding:14px 20px; margin-top:auto; }
.hm-cmp-foot .btn-secondary { width:100%; }
.hm-cmp-empty { padding:18px 20px; font-size:14px; color:var(--text-sub); }
.hm-cmp-row[hidden], .hm-cmp-empty[hidden] { display:none; }

.hm-area-note { margin:14px 0 0; font-size:12.5px; color:var(--muted); }

/* --- 新着記事 --- */
.hm-cards { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:20px; }
.hm-cards .article-card .thumb > img { position:absolute; inset:0; z-index:2; width:100%; height:100%; object-fit:cover; }
.hm-cards .article-card h3 { display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; }
.hm-all { margin:28px 0 0; text-align:center; }

.hm-note { margin:48px 0 0; font-size:12.5px; color:var(--muted); border-top:1px solid var(--border); padding-top:18px; }


/* --- セクション見出し：既存の .section-head（中央寄せ）を使用。補足と解除リンクのみ追加 --- */
.hm-sec > .section-head { margin-top:0; }
.hm-sec { margin:60px 0 0; }
.section-head h2 { white-space:nowrap; }
.section-head .hm-reset { display:block; margin:8px auto 0; }
.section-head .hm-reset[hidden] { display:none; }
@media (max-width:480px) { .section-head h2 { white-space:normal; } }

/* --- お悩み別に探す（既存 home.css からそのまま移植） --- */
.topic-list {
  display:grid; grid-template-columns:repeat(4,1fr); margin:0 0 40px;
  background:#fff; border:1px solid var(--border); border-radius:var(--radius); overflow:hidden;
}
.topic-list-item {
  padding:20px; border-right:1px solid var(--border); text-decoration:none; color:var(--text);
  display:block; transition:background .18s, transform .18s var(--ease);
}
.topic-list-item:last-child { border-right:none; }
.topic-list-item:hover { background:var(--primary-pale); text-decoration:none; }
.topic-list-item:active { transform:scale(.985); }
.topic-list-item .title { font-size:15.5px; font-weight:700; margin-bottom:4px; color:var(--text); }
.topic-list-item .desc { font-size:12.5px; color:var(--muted); line-height:1.6; }

/* --- お悩みブロック --- */
.worries { background:#fff; border:1px solid var(--border); border-radius:var(--radius); padding:36px 40px; margin:40px 0; }
.worries h3 { text-align:center; font-size:20px; margin-bottom:24px; }
.worry-list { display:grid; grid-template-columns:repeat(2,1fr); gap:12px 28px; }
.worry-item { display:flex; gap:12px; align-items:flex-start; font-size:15px; color:var(--text); }
.worry-item::before {
  content:"✓"; color:var(--primary); font-weight:700; font-size:18px;
  line-height:1; margin-top:5px; flex:0 0 auto;
}
.worries-note { text-align:center; margin:22px 0 0; font-size:14px; color:var(--text-sub); }
@media (max-width:768px) {
  .topic-list { grid-template-columns:repeat(2,1fr); }
  .topic-list-item { border-right:1px solid var(--border); border-bottom:1px solid var(--border); }
  .topic-list-item:nth-child(2n) { border-right:none; }
  .topic-list-item:nth-last-child(-n+2) { border-bottom:none; }
  .worries { padding:24px 20px; margin:28px 0; }
  .worries h3 { font-size:18px; }
  .worry-list { grid-template-columns:1fr; }
}
@media (max-width:480px) {
  .topic-list { grid-template-columns:1fr; }
  .topic-list-item { border-right:none; }
  .topic-list-item:nth-last-child(-n+2) { border-bottom:1px solid var(--border); }
  .topic-list-item:last-child { border-bottom:none; }
}

/* ============================================================
   動き（控えめ・0.2〜0.7秒）
   スクロールで出てくる動きは styles.css / site.js の data-reveal を使う
   OSで「視差効果を減らす」設定の人には動きを出さない
============================================================ */
@keyframes hm-rise { from { opacity:0; transform:translateY(14px); } to { opacity:1; transform:none; } }
@keyframes hm-fade { from { opacity:0; } to { opacity:1; } }
@keyframes hm-zoom { from { transform:scale(1.06); } to { transform:scale(1); } }

/* ヒーロー：読み込み時に文字・フォーム・画像が順に出る */
.hm-hero-copy > * { animation:hm-rise .7s var(--ease) both; }
.hm-hero-copy > :nth-child(2) { animation-delay:.08s; }
.hm-hero-copy > :nth-child(3) { animation-delay:.16s; }
.hm-hero-img { animation:hm-fade .8s var(--ease) .1s both; }
.hm-hero-img img { animation:hm-zoom 1.6s var(--ease) both; }

/* 対応業者を見る：ホバーで少し浮く */
.btn-search { transition:background .18s, transform .18s var(--ease); }
.btn-search:hover { transform:translateY(-1px); }
.btn-search:active { transform:translateY(0) scale(.98); }

/* 業者の行：ホバーで背景が薄く変わる */

/* 詳細はこちら：ホバーで矢印が右へ */
.btn-detail::after { transition:transform .2s var(--ease); }
a.btn-detail:hover::after { transform:translateX(3px); }

/* 地域を切り替えたとき：行が上から順に出る */
.hm-compare.is-swap .hm-cmp-row { animation:hm-rise .45s var(--ease) both; animation-delay:calc(var(--i, 0) * 60ms); }
.hm-compare.is-swap .hm-cmp-head h3 { animation:hm-fade .4s var(--ease) both; }

/* 比較表を見る：ホバーで矢印 */
.hm-cmp-foot .btn-secondary::after { content:"›"; margin-left:4px; transition:transform .2s var(--ease); }
.hm-cmp-foot .btn-secondary:hover::after { transform:translateX(3px); }

@media (prefers-reduced-motion: reduce) {
  .hm-hero-copy > *, .hm-hero-img, .hm-hero-img img,
  .hm-compare.is-swap .hm-cmp-row, .hm-compare.is-swap .hm-cmp-head h3 { animation:none !important; }
  .btn-search, .btn-detail::after, .hm-cmp-foot .btn-secondary::after { transition:none !important; }
}

/* --- レスポンシブ --- */
@media (max-width:1024px) {
  .hm-cards { grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (max-width:768px) {
  .hm-hero { padding:22px 0 26px; }
  .hm-hero-inner { grid-template-columns:1fr; gap:0; }
  .hm-hero-img { display:none; }
  .hm-hero h1 { font-size:22px; }
  .hm-hero-sub { font-size:14px; margin-bottom:16px; }
  .hm-area-row { flex-direction:column; }
  .hm-area-row .btn-search { width:100%; }
  .hm-sec { margin-top:40px; scroll-margin-top:70px; }
  .hm-sec-head h2 { font-size:19px; }
  .hm-compare { grid-template-columns:1fr; }
  .hm-cmp-row { padding:12px 16px; }
  .hm-cmp-head, .hm-cmp-foot, .hm-cmp-empty { padding-left:16px; padding-right:16px; }
  /* 新着・人気記事（TOP）：スマホは縦並び。左に小さな画像、右にタイトル */
  .hm-cards:not(.hm-cards-all) { display:flex; flex-direction:column; gap:10px; }
  .hm-cards:not(.hm-cards-all) .article-card { flex-direction:row; align-items:stretch; }
  .hm-cards:not(.hm-cards-all) .article-card .thumb { flex:0 0 112px; width:112px; aspect-ratio:auto; min-height:84px; }
  .hm-cards:not(.hm-cards-all) .article-card .thumb .ph { font-size:9px; padding:6px; }
  .hm-cards:not(.hm-cards-all) .article-card .body { padding:12px 14px; justify-content:center; }
  .hm-cards:not(.hm-cards-all) .article-card h3 { font-size:14.5px; line-height:1.6; margin:0; }
  /* 記事一覧ページはスマホでも横スクロールにせず縦に並べる */
  .hm-cards.hm-cards-all { display:grid; grid-template-columns:1fr; overflow:visible; margin:0; padding:0; }
}

/* ============================================================
   TOP 2026-11：WordPressの標準的なブログ構成（.wp-*）
   検索・カテゴリ・地域・新着記事＋サイドバー。業者が増えてもTOPは伸びない
============================================================ */
body:has(.wp-layout) { background:#fff; }

.wp-hero { background:#F4F8FA; border-bottom:1px solid var(--border); padding:32px 0; }
.wp-hero h1 { font-size:24px; line-height:1.5; margin:0 0 6px; }
.wp-hero-sub { margin:0 0 16px; font-size:14.5px; color:var(--text-sub); }
.wp-search { display:flex; max-width:720px; }
.wp-search input {
  flex:1 1 auto; min-width:0; height:50px; padding:0 14px; font:inherit; font-size:16px;
  border:1px solid #BFC9CF; border-right:0; border-radius:4px 0 0 4px; background:#fff; color:var(--text);
}
.wp-search input:focus { outline:2px solid var(--primary-line); outline-offset:-1px; }
.wp-search button {
  flex:0 0 auto; padding:0 26px; font:inherit; font-size:15px; font-weight:700; color:#fff;
  background:var(--primary-deep); border:0; border-radius:0 4px 4px 0; cursor:pointer;
}
.wp-search button:hover { background:#0E3D50; }

.wp-layout { display:grid; grid-template-columns:minmax(0,1fr) 300px; gap:40px; padding-top:32px; padding-bottom:40px; }
.wp-main { min-width:0; }
.wp-sec { margin:0 0 40px; scroll-margin-top:110px; }
.wp-sec[hidden] { display:none; }
.wp-h2 { font-size:19px; line-height:1.5; padding:8px 14px; margin:0 0 16px; background:#F3F3F3; border-left:5px solid var(--primary-deep); }
.wp-more { display:block; margin:14px 0 0; text-align:right; font-size:14px; font-weight:600; }
.wp-more::after { content:" ›"; }

/* 検索結果 */
.wp-results { list-style:none; margin:0; padding:0; border-top:1px solid var(--border); }
.wp-results li { border-bottom:1px solid var(--border); }
.wp-results a { display:block; padding:12px 4px; color:var(--text); text-decoration:none; }
.wp-results a:hover .t { text-decoration:underline; color:var(--link); }
.wp-results .k { display:inline-block; font-size:11px; font-weight:700; color:#fff; background:var(--muted); padding:1px 7px; border-radius:2px; margin-right:8px; vertical-align:2px; }
.wp-results .t { font-size:15.5px; font-weight:700; color:var(--link); }
.wp-results .d { display:block; margin-top:4px; font-size:13px; color:var(--text-sub); line-height:1.7; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.wp-results .none { padding:14px 4px; font-size:14px; color:var(--text-sub); }
.wp-clear { margin-top:10px; background:none; border:0; padding:0; font:inherit; font-size:13px; color:var(--muted); text-decoration:underline; cursor:pointer; }

/* カテゴリ：画像タイル */
.wp-cats { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:12px; }
.wp-cat { display:block; color:var(--text); text-decoration:none; border:1px solid var(--border); border-radius:4px; overflow:hidden; background:#fff; }
.wp-cat .thumb { display:block; aspect-ratio:8/5; position:relative; background:#E9EEF1; }
.wp-cat .thumb img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.wp-cat .label { display:block; padding:8px 10px 0; font-size:15px; font-weight:700; }
.wp-cat .desc { display:block; padding:0 10px 10px; font-size:12px; color:var(--muted); }
.wp-cat:hover { text-decoration:none; color:var(--text); }
.wp-cat:hover .label { color:var(--link); text-decoration:underline; }

/* 地域から探す */
.wp-area { display:flex; flex-wrap:wrap; align-items:center; gap:8px 14px; }
.wp-area label { flex:0 0 100%; font-size:14px; font-weight:700; }
.wp-area select {
  flex:0 1 360px; min-width:0; height:46px; padding:0 40px 0 12px; font:inherit; font-size:16px; color:var(--text);
  border:1px solid #BFC9CF; border-radius:4px; appearance:none; -webkit-appearance:none; cursor:pointer;
  background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%2315546C' stroke-width='2'/%3E%3C/svg%3E") no-repeat right 14px center;
}
.wp-area .hm-reset[hidden] { display:none; }
.wp-area-help { margin:8px 0 0; font-size:13px; color:var(--muted); }
.wp-area-result { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:20px; margin-top:16px; }
.wp-area-result[hidden] { display:none; }
.wp-area-col h3 { font-size:15px; padding:0 0 6px; border-bottom:2px solid var(--primary-deep); }
.wp-area-col ul { list-style:none; margin:0; padding:0; }
.wp-area-col li { display:flex; justify-content:space-between; align-items:center; gap:10px; padding:9px 2px; border-bottom:1px solid var(--border); font-size:14.5px; }
.wp-area-col li[hidden] { display:none; }
.wp-area-col .nm { font-weight:700; }
.wp-detail { flex:0 0 auto; font-size:12.5px; }
.wp-detail::after { content:" ›"; }
.wp-area-col .hm-cmp-empty { padding:10px 2px; font-size:13.5px; color:var(--text-sub); }
.wp-area-col .hm-cmp-empty[hidden] { display:none; }

/* 新着記事：カードの格子 */
.wp-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:20px 16px; }
.wp-card { display:block; color:var(--text); text-decoration:none; }
.wp-card .thumb { display:block; aspect-ratio:8/5; position:relative; overflow:hidden; background:#E9EEF1; border-radius:3px; }
.wp-card .thumb img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.wp-card .cat { position:absolute; left:0; top:0; z-index:2; background:var(--primary-deep); color:#fff; font-size:11px; font-weight:700; padding:2px 8px; }
.wp-card .ttl { display:block; margin-top:8px; font-size:14.5px; font-weight:700; line-height:1.6; display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; }
.wp-card:hover { text-decoration:none; color:var(--text); }
.wp-card:hover .ttl { color:var(--link); text-decoration:underline; }

/* サイドバー */
.wp-widget { margin:0 0 28px; }
.wp-wh { font-size:15px; color:#fff; background:var(--primary-deep); padding:8px 12px; margin:0; }
.wp-wlist { list-style:none; margin:0; padding:0; border:1px solid var(--border); border-top:0; }
.wp-wlist li { border-top:1px solid var(--border); }
.wp-wlist li:first-child { border-top:0; }
.wp-wlist a { display:block; padding:10px 28px 10px 12px; font-size:14px; color:var(--text); text-decoration:none; position:relative; }
.wp-wlist a::after { content:"›"; position:absolute; right:12px; top:50%; transform:translateY(-50%); color:var(--muted); }
.wp-wlist a:hover { background:#F4F8FA; color:var(--link); }
.wp-tags { display:flex; flex-wrap:wrap; gap:6px; padding:12px 0 0; }
.wp-tags a { font-size:12.5px; color:var(--text); border:1px solid #BFC9CF; border-radius:3px; padding:3px 9px; text-decoration:none; }
.wp-tags a:hover { border-color:var(--primary-deep); color:var(--primary-deep); }

@media (max-width:1024px) {
  .wp-layout { grid-template-columns:1fr; gap:8px; }
  .wp-side { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:0 20px; }
}
@media (max-width:768px) {
  .wp-hero { padding:20px 0; }
  .wp-hero h1 { font-size:19px; }
  .wp-hero-sub { font-size:13.5px; margin-bottom:12px; }
  .wp-search input { height:46px; font-size:16px; }
  .wp-search button { padding:0 18px; }
  .wp-layout { padding-top:22px; }
  .wp-sec { margin-bottom:30px; }
  .wp-h2 { font-size:17px; }
  .wp-cats { grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }
  .wp-cat .desc { display:none; }
  .wp-cat .label { padding-bottom:8px; font-size:14px; }
  .wp-area select { flex:1 1 100%; }
  .wp-area-result { grid-template-columns:1fr; }
  .wp-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px 12px; }
  .wp-card .ttl { font-size:13.5px; }
  .wp-side { grid-template-columns:1fr; }
  .wp-pc-only { display:none; }
}

.hm-cmp.wp-area-col { background:none; border:0; border-radius:0; overflow:visible; }
/* 地域の結果：小さな画像＋社名＋料金（ボタンは増やさない） */
.wp-area-col li.wp-co { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:12px; align-items:center; padding:11px 2px; }
.wp-co .ph { display:block; width:64px; aspect-ratio:4/3; border:1px solid var(--border); border-radius:3px; overflow:hidden; background:#F4F6F8; position:relative; }
.wp-co .ph img { position:absolute; inset:0; width:100%; height:100%; object-fit:contain; background:#fff; }
.wp-co .txt { min-width:0; }
.wp-co .nm { display:block; font-size:15px; font-weight:700; line-height:1.5; }
.wp-co .pr-line { display:block; margin-top:2px; font-size:12.5px; line-height:1.5; color:var(--text); }
.wp-co .wp-detail { font-size:12.5px; color:var(--text-sub); }
/* 社名：控えめなボタン風（薄い灰色の箱＋黒字＋›） */
.wp-co a.nm { display:inline-block; color:#222 !important; text-decoration:none !important; background:#F2F4F6; border:1px solid #D5DBE0; border-radius:4px; padding:3px 12px 3px 10px; font-size:15px; }
.wp-co a.nm::after { content:" ›"; color:var(--muted); }
.wp-co a.nm:hover { background:#E6EEF3; border-color:#9FB3C0; }
.wp-co .pr-line { margin-top:6px; }
.wp-co .pr-line, .wp-co .pr-line * { color:#333 !important; }
/* 徹底解説：下線＋末尾に ↗ の印 */
.wp-co .wp-detail { text-decoration:underline; text-underline-offset:3px; }
.wp-co .wp-detail::after {
  content:""; display:inline-block; width:11px; height:11px; margin-left:4px; vertical-align:-1px;
  background:no-repeat center/contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M4.5 1.5h6v6M10.5 1.5 4 8M8.5 7v3.5h-7v-7H5' fill='none' stroke='%234A5A68' stroke-width='1.3'/%3E%3C/svg%3E");
}
/* 社名：マウスオーバーで色を反転（黒地＋白字） */
.wp-co a.nm:hover, .wp-co a.nm:focus-visible { background:var(--primary); border-color:var(--primary); color:#fff !important; }
.wp-co a.nm:hover::after, .wp-co a.nm:focus-visible::after { color:#fff; }
/* 記事一覧ページ */
.wp-page-title { margin-top:0; }
.wp-search-sm { margin:0 0 24px; }
.wp-search-sm input { height:44px; }

/* 地域の結果：タブで切り替え（スクロール中はタブだけ上部に残る） */
.wp-area-result { display:block; }
.wp-area-result[hidden] { display:none; }
.wp-area-col[hidden] { display:none; }
.wp-area-col h3 { display:none; }
.wp-tabs { position:sticky; top:58px; z-index:20; display:grid; grid-template-columns:1fr 1fr; background:#fff; border-bottom:2px solid var(--primary-deep); margin:0 0 4px; }
.wp-tab { appearance:none; border:0; background:#EEF2F5; color:var(--text-sub); font:inherit; font-size:15px; font-weight:700; padding:12px 8px; cursor:pointer; border-radius:6px 6px 0 0; }
.wp-tab + .wp-tab { margin-left:6px; }
.wp-tab[aria-selected="true"] { background:var(--primary-deep); color:#fff; }
.wp-tab:not([aria-selected="true"]):hover { background:#E1E8ED; color:var(--text); }
.wp-tab .cnt { font-size:12.5px; font-weight:600; margin-left:2px; }
@media (max-width:768px) { .wp-tab { font-size:13.5px; padding:11px 4px; } .wp-tab .cnt { display:block; margin:0; font-size:11.5px; } }
/* 選んでいない方のタブ：ときどき上下にポヨンと跳ねる（「こっちもあるよ」の合図） */
.wp-tab[aria-selected="false"] { animation:tab-boing 2.4s ease-in-out infinite; transform-origin:50% 100%; }
.wp-tab[aria-selected="false"]:hover { animation-play-state:paused; }
@keyframes tab-boing {
  0%, 62%, 100% { transform:translateY(0) scale(1,1); }
  68% { transform:translateY(-6px) scale(.98,1.04); }
  76% { transform:translateY(0) scale(1.03,.96); }
  82% { transform:translateY(-2px) scale(1,1.01); }
  88% { transform:translateY(0) scale(1,1); }
}
@media (prefers-reduced-motion: reduce) { .wp-tab[aria-selected="false"] { animation:none; } }
/* タブ化で1列になったので、PCでは料金を社名の右に並べる（スマホは縦のまま） */
@media (min-width:769px) {
  .wp-co .txt { display:grid; grid-template-columns:15em minmax(0,1fr); align-items:center; gap:4px 20px; }
  .wp-co .txt .nm { justify-self:start; }
  .wp-co .pr-line { margin-top:0 !important; }
}
/* 徹底解説の ↗ を大きく（11px → 15px） */
.wp-co .wp-detail::after { width:15px; height:15px; margin-left:5px; vertical-align:-3px; }
/* 徹底解説：文字と下線だけボルドー色（↗は灰色のまま） */
.wp-co .wp-detail, .wp-co .wp-detail:visited { color:#7D1A3A; text-decoration-color:#7D1A3A; font-weight:700; }
.wp-co .wp-detail:hover { color:#5E1029; text-decoration-color:#5E1029; }
.wp-co .wp-detail::after {
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M4.5 1.5h6v6M10.5 1.5 4 8M8.5 7v3.5h-7v-7H5' fill='none' stroke='%234A5A68' stroke-width='1.3'/%3E%3C/svg%3E");
}
/* TOP：ツールへの入口 */
.wp-tool { display:block; padding:16px 18px; border:2px solid var(--primary-deep); border-radius:6px; color:var(--text); text-decoration:none; }
.wp-tool .ttl { display:block; font-size:17px; font-weight:700; color:var(--primary-deep); }
.wp-tool .ttl::after { content:" ›"; }
.wp-tool .desc { display:block; margin-top:4px; font-size:14px; color:var(--text-sub); }
.wp-tool:hover { background:#F4F8FA; text-decoration:none; color:var(--text); }
/* 地域から探す：都道府県を選んで「この地域で探す」を押す */
.wp-area-go { height:46px; padding:0 22px; font:inherit; font-size:15px; font-weight:700; color:#fff; background:var(--primary-deep); border:0; border-radius:4px; cursor:pointer; }
.wp-area-go:hover:not(:disabled) { background:#0E3D50; }
.wp-area-go:disabled { background:#C9D2D8; color:#fff; cursor:not-allowed; }
.wp-area-help.is-result { font-size:15px; font-weight:700; color:var(--text); }
@media (max-width:768px) { .wp-area-go { flex:1 1 100%; } }