@charset "utf-8";
/* =========================================================================
 * haka-navi.jp（近くの石材店ランキング）唯一のスタイルシート。
 *
 * ⛔ 外部CDN・Webフォントは読み込まない（表示速度と足跡の両方のため）。
 * ⛔ CSSはこの1本だけ。テンプレート側に <style> を書かない。
 *
 * 色・寸法は design/01〜03 のPNGを画素単位で実測した値。
 *   深緑 #2c6b3a（ヘッダー帯 実測 #2b6a3a〜#2c6b3a）
 *   CTA  #e15a12（実測 #e75406 / #e7571b。同系だが他サイトと同じ16進数にはしない）
 *   淡緑 #eef4ee（タイルの地 実測 #edf3ed）
 *   金   #e8a20a（星 実測 #eaa806）
 *   赤   #c4231c（価格の強調 実測 #c00c0c〜#d21212）
 * ========================================================================= */

:root{
  --green:#2c6b3a;
  --green-d:#235730;
  --green-pale:#eef4ee;
  --green-chip:#e6f2e8;
  --green-line:#d7e4d9;
  --cta:#e15a12;
  --cta-d:#c24a0b;
  --gold:#f0ad0b;
  --red:#c4231c;
  --ink:#232a25;
  --ink-strong:#16241a;
  --sub:#5d665f;
  --line:#e2e6e3;
  --bg:#ffffff;
  --bg-soft:#f4f6f4;
  --bg-grey:#f4f4f4;
  --r:5px;
  --w:1160px;   /* 本文幅。2026-09-22 に 1040 -> 1160（近くの税理士事務所Navi zeiri.heteml.net の .wrap と同じ） */
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:"Hiragino Kaku Gothic ProN","Hiragino Sans","Yu Gothic UI","Yu Gothic","Meiryo",sans-serif;
  font-size:15px;
  line-height:1.9;
}
img{max-width:100%;height:auto;vertical-align:middle}
a{color:#1d6b3f}
p{margin:0 0 1em}
ul,ol{margin:0 0 1em;padding-left:1.4em}
li{margin:.2em 0}

/* 2026-09-22：本文の器を「近くの税理士事務所Navi」に合わせた（幅1160px・左右24px）。
   ⛔ それまでは図（画像幅1024pxのとき本文942px）に合わせた 1040px / 左右40px だった。 */
.hk-wrap{max-width:var(--w);margin:0 auto;padding:0 24px}
.hk-main{padding-bottom:48px}

/* ---------- ヘッダー ---------- */
.hk-head{background:var(--green);color:#fff}
.hk-head-in{max-width:var(--w);margin:0 auto;padding:0 24px;height:56px;display:flex;align-items:center;gap:18px}
.hk-logo{display:flex;align-items:center;text-decoration:none;flex:0 0 auto}
.hk-logo img{height:22px;width:auto;display:block}
.hk-nav{margin-left:auto;display:flex;align-items:center;gap:18px}
.hk-nav a{color:#fff;text-decoration:none;font-size:13.5px;font-weight:700;white-space:nowrap}
.hk-nav a:hover{text-decoration:underline}
.hk-head-cta{
  background:var(--cta);color:#fff;text-decoration:none;font-weight:700;font-size:13.5px;
  padding:9px 16px;border-radius:var(--r);white-space:nowrap;line-height:1.2;
}
.hk-head-cta:hover{background:var(--cta-d)}

/* ---------- パンくず・正規H1 ---------- */
.hk-crumb{font-size:12px;color:var(--sub);padding:12px 0 2px}
.hk-crumb a{color:var(--sub);text-decoration:none}
.hk-crumb a:hover{text-decoration:underline}
.hk-crumb span{margin:0 6px;color:#aab2ac}
/* ⛔ 全サイト共通の絶対ルール：ヒーローの大見出しは <h1> にしない。
      正規のH1はここに、ユーザーに見える形（小さいテキスト）で1つだけ置く。 */
.hk-page-h1{font-size:12px;font-weight:400;color:#7b847d;margin:0 0 10px;line-height:1.6}

/* ---------- 見出し ---------- */
.hk-h2{
  font-size:22px;line-height:1.5;font-weight:700;color:var(--ink-strong);
  margin:44px 0 14px;padding-left:14px;border-left:6px solid var(--green);
}
.hk-h2-line{
  font-size:20px;font-weight:700;color:var(--ink-strong);
  margin:40px 0 14px;padding-bottom:8px;border-bottom:2px solid var(--green);
}
.hk-h3{font-size:17px;font-weight:700;color:var(--ink-strong);margin:26px 0 8px}
.hk-lead{color:var(--sub);font-size:14px;margin:0 0 16px}

/* ---------- エリアページのヒーロー ---------- */
.hk-hero{display:grid;grid-template-columns:minmax(0,1fr) 47.7%;gap:22px;align-items:center;margin:4px 0 24px}
/* 図の実測：大見出しの字高32px＝約36px。 */
.hk-hero-title{font-size:36px;line-height:1.3;font-weight:700;color:var(--ink-strong);margin:0 0 12px}
.hk-hero-title .hk-month{font-size:16px;color:var(--sub);font-weight:700;white-space:nowrap}
.hk-hero p{font-size:14.5px;color:#41493f;margin:0 0 .45em;line-height:1.85}
.hk-hero-img{border-radius:var(--r);overflow:hidden;position:relative;line-height:0}
/* 図の実測：449×186px＝2.41:1。16/9だと縦に伸びて図と違う形になる。 */
.hk-hero-img img{width:100%;aspect-ratio:2.41/1;object-fit:cover}

/* ---------- 数字タイル（料金を公開している 2社 など） ---------- */
.hk-tiles{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin:0 0 28px}
/* 図の実測：タイルの高さ69px。padding14pxだと94pxになって図より背が高い。 */
.hk-tile{
  background:var(--green-pale);border:1px solid var(--green-line);border-radius:var(--r);
  padding:7px 16px;display:flex;align-items:center;gap:16px;
}
.hk-tile img{width:38px;height:38px;flex:0 0 38px}
/* 図の実測：ラベルは黒15px、数字は赤・字高31px（＝約33px）、単位の「社」は18px。
   ⛔ 前回ここを黒の23pxにしていたため、図の「2社」の強さが丸ごと消えていた。 */
.hk-tile b{display:block;font-size:15px;font-weight:700;color:#141a15;line-height:1.45}
.hk-tile .hk-num{font-size:33px;font-weight:700;color:var(--red);line-height:1.15;letter-spacing:-.01em}
.hk-tile .hk-num small{font-size:17px;margin-left:2px;font-weight:700}

/* ---------- 絞り込みチップ ---------- */
.hk-filter{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 18px}
.hk-filter button{
  font:inherit;font-size:13px;line-height:1.4;cursor:pointer;
  background:#fff;border:1px solid var(--green-line);color:#33423a;
  border-radius:var(--r);padding:7px 13px;
}
.hk-filter button[aria-pressed="true"]{background:var(--green);border-color:var(--green);color:#fff}
.hk-filter button b{font-weight:700;margin-left:5px}
.hk-filter-note{font-size:12px;color:var(--sub);margin:-8px 0 20px}

/* ---------- 店舗カード（ランキング） ---------- */
.hk-cards{display:flex;flex-direction:column;gap:15px;margin:0 0 10px}
/* 図の実測：カード幅942px／写真295×163px（31.3%・1.81:1）／ボタン157×43px（16.7%）。
   カードの高さは172pxで、写真がほぼ全高を占める＝余白8px。 */
.hk-card{
  border:1px solid var(--line);border-radius:var(--r);background:#fff;
  padding:6px;display:grid;grid-template-columns:31.3% minmax(0,1fr) 160px;gap:16px;align-items:center;
}
.hk-card-photo{border-radius:var(--r);overflow:hidden;line-height:0}
.hk-card-photo img{width:100%;aspect-ratio:1.81/1;object-fit:cover;display:block}
/* 写真が無い店の代わり。⛔ 仮の写真（架空の看板つき）は使わない。 */
.hk-card-noimg{
  width:100%;aspect-ratio:1.81/1;border-radius:var(--r);
  background:#eaf1ea;border:1px solid var(--green-line);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;
}
.hk-card-noimg .hk-initial{
  font-size:46px;font-weight:700;color:var(--green);line-height:1;opacity:.85;
  font-family:"Hiragino Mincho ProN","Yu Mincho","MS PMincho",serif;
}
.hk-card-noimg .hk-noimg-note{font-size:11px;color:#7c8b7f;letter-spacing:.04em}
/* 順位の丸（.hk-rank）は 2026-09-22 に廃止。説明・星・タグは店名の左端にそろえる。
   ⛔ 丸を消したぶんの余白は詰めるだけ（別のものを入れない）。 */
.hk-card-body{padding:8px 0;display:grid;grid-template-columns:minmax(0,1fr);row-gap:0}
.hk-card-head{display:contents}
.hk-card-name{grid-column:1;grid-row:1}
.hk-card-desc,.hk-card-body .hk-card-addr,.hk-card-body .hk-score,.hk-card-body .hk-tags{grid-column:1}
.hk-card-name{font-size:21px;font-weight:700;color:var(--ink-strong);margin:0 0 4px;line-height:1.35}
.hk-card-name a{color:inherit;text-decoration:none}
.hk-card-name a:hover{text-decoration:underline}
/* 住所（2026-09-22追加）。店名のすぐ下に1行。⛔ タグの「世田谷区」はここと重なるので外した。 */
.hk-card-addr{font-size:12.5px;color:var(--sub);margin:0 0 7px;line-height:1.6;overflow-wrap:anywhere}
/* 紹介文（2026-09-22）。カードは3行までで切って、続きは「…」にする（個別ページは切らない）。
   ⛔ 文字数で切らない。1行に入る字数は画面幅で変わるので、行数で切るこの形でないと3行にならない。 */
.hk-card-desc{
  font-size:14px;color:#41493f;margin:0 0 9px;line-height:1.75;
  display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;line-clamp:3;overflow:hidden;
}
.hk-card-cta{display:flex;flex-direction:column;gap:8px}
.hk-btn{
  display:block;text-align:center;text-decoration:none;font-weight:700;font-size:15px;
  background:var(--cta);color:#fff;border-radius:var(--r);padding:11px 10px;line-height:1.4;
}
.hk-card-cta .hk-btn{font-size:17px;padding:9px 10px}
.hk-btn:hover{background:var(--cta-d)}
.hk-btn-ghost{
  display:block;text-align:center;text-decoration:none;font-weight:700;font-size:13.5px;
  background:#fff;color:var(--green);border:1px solid var(--green);border-radius:var(--r);padding:10px;
}
.hk-btn-ghost:hover{background:var(--green-pale)}

/* 評価点と星 */
.hk-score{display:flex;align-items:center;gap:8px;margin:0 0 8px;flex-wrap:wrap}
/* 図には「4.5点＝星4つ半」がある。灰色の星の上に、金の星を点数ぶんの幅だけ重ねて出す。 */
.hk-stars{position:relative;display:inline-block;line-height:0;white-space:nowrap}
.hk-stars .hk-stars-row{display:inline-flex;gap:1px}
.hk-stars .hk-stars-on{position:absolute;left:0;top:0;overflow:hidden}
.hk-stars svg{width:19px;height:19px;display:block;flex:0 0 19px}
.hk-stars .s-on{fill:var(--gold)}
.hk-stars .s-off{fill:#d7dbd8}
.hk-score-num{font-size:20px;font-weight:700;color:var(--red);letter-spacing:-.01em}
.hk-score-sub{font-size:12px;color:var(--sub)}

/* タグ */
.hk-tags{display:flex;flex-wrap:wrap;gap:6px}
.hk-tags span{
  font-size:12.5px;line-height:1.5;background:var(--green-chip);color:#2f5b3c;
  border-radius:var(--r);padding:5px 11px;
}
.hk-tags span.is-empty{background:var(--bg-grey);color:#7e867f}


/* ---------- 表 ---------- */
.hk-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;margin:0 0 10px}
.hk-table{border-collapse:collapse;width:100%;font-size:13.5px;background:#fff}
.hk-table th,.hk-table td{border:1px solid var(--line);padding:9px 12px;text-align:left;vertical-align:middle;overflow-wrap:anywhere}
.hk-table thead th{background:var(--green-chip);color:#2b4a35;font-weight:700;white-space:nowrap}
.hk-table tbody th{background:#fff;font-weight:700;white-space:nowrap}
.hk-table td.is-yen{color:var(--red);font-weight:700;white-space:nowrap}
.hk-table td.is-empty{background:#fafafa;color:#a7ada9;text-align:center}
.hk-table td.is-on{background:#f2f8f3;text-align:center;color:var(--green);font-weight:700}
.hk-table caption{caption-side:bottom;font-size:12px;color:var(--sub);text-align:left;padding-top:8px}

/* ---------- FAQ ---------- */
/* 図の実測：質問ごとに白い枠が独立していて、あいだにすき間がある。 */
.hk-faq{display:flex;flex-direction:column;gap:10px}
.hk-faq .hk-faq-a{background:#fafafa;border-top:1px solid var(--line);padding:14px 22px 16px 52px;font-size:14px;margin:0}
.hk-faq .hk-faq-a p{margin:0 0 .7em}
.hk-faq .hk-faq-a p:last-child{margin:0}

/* ---------- 注意・補足のボックス ---------- */
.hk-note{background:var(--green-pale);border:1px solid var(--green-line);border-radius:var(--r);padding:14px 18px;margin:0 0 18px;font-size:13.5px}
.hk-note b{color:var(--ink-strong)}
.hk-note p:last-child{margin:0}
.hk-wait{background:#fbf7ef;border:1px solid #e8dcc4;border-radius:var(--r);padding:12px 14px;font-size:13px;color:#6c5c3b}
.hk-wait b{display:block;color:#7a6532;margin-bottom:2px}

/* ---------- 料金の公開一覧 ---------- */
.hk-price{border:1px solid var(--line);border-radius:var(--r);padding:16px 18px;margin:0 0 14px}
.hk-price h3{margin:0 0 8px;font-size:15.5px;color:var(--ink-strong)}
.hk-price .hk-yen{font-size:24px;font-weight:700;color:var(--red)}
.hk-price ul{margin:8px 0 0;padding-left:1.2em;font-size:13.5px}

/* ---------- 選び方 ---------- */
.hk-step{border:1px solid var(--line);border-radius:var(--r);padding:16px 18px;margin:0 0 12px}
.hk-step h3{margin:0 0 6px;font-size:16px;color:var(--ink-strong)}
.hk-step p:last-child{margin:0}
.hk-step-n{
  display:inline-flex;width:24px;height:24px;border-radius:50%;background:var(--green);color:#fff;
  font-size:13px;font-weight:700;align-items:center;justify-content:center;margin-right:8px;vertical-align:2px;
}

/* ---------- リンクのチップ（ジャンル・近隣エリア） ---------- */
.hk-links{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 8px}
.hk-links a{
  background:#fff;border:1px solid var(--green-line);border-radius:var(--r);
  padding:8px 14px;font-size:13.5px;text-decoration:none;color:#2f5b3c;
}
.hk-links a:hover{background:var(--green-pale)}
.hk-links a b{color:var(--green);margin-left:6px}
.hk-links .is-soon{background:var(--bg-grey);border-color:var(--line);color:#9aa29c;padding:8px 14px;border-radius:var(--r);font-size:13.5px}

/* ---------- 個別ページ ---------- */
.hk-sg{display:grid;grid-template-columns:45% minmax(0,1fr);gap:26px;margin:6px 0 24px;align-items:start}
.hk-sg-photo{border-radius:var(--r);overflow:hidden;line-height:0}
.hk-sg-photo img{width:100%;aspect-ratio:2/1;object-fit:cover}
.hk-sg-nophoto{
  border:1px dashed var(--green-line);background:var(--green-pale);border-radius:var(--r);
  padding:26px 20px;font-size:13px;color:#5f6b62;text-align:center;
}
.hk-sg-title{font-size:27px;line-height:1.4;font-weight:700;color:var(--ink-strong);margin:0 0 6px}
.hk-sg-kana{font-size:12px;color:#8a938c;margin:0 0 8px}
.hk-sg-head{font-size:14.5px;color:#41493f;margin:0 0 12px}
.hk-sg-rows{margin:0 0 14px}
.hk-sg-row{display:flex;gap:10px;align-items:flex-start;font-size:14px;margin:0 0 7px}
.hk-sg-row img{width:18px;height:18px;flex:0 0 18px;margin-top:4px}
.hk-sg-cta{display:flex;gap:12px;flex-wrap:wrap;margin-top:14px}
.hk-sg-cta .hk-btn,.hk-sg-cta .hk-btn-ghost{flex:1 1 200px;display:flex;align-items:center;justify-content:center;gap:8px}
.hk-sg-cta img{width:17px;height:17px}

.hk-facts{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin:0 0 28px}
.hk-fact{
  background:var(--green-pale);border:1px solid var(--green-line);border-radius:var(--r);
  padding:14px;display:flex;align-items:center;gap:12px;
}
.hk-fact img{width:30px;height:30px;flex:0 0 30px}
.hk-fact b{display:block;font-size:12.5px;color:#4a5a4e;font-weight:700;line-height:1.5}
.hk-fact .hk-fact-v{font-size:17px;font-weight:700;color:var(--ink-strong);line-height:1.4}

.hk-works{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin:0 0 10px}
.hk-work{border:1px solid var(--line);border-radius:var(--r);padding:16px 14px;text-align:center}
.hk-work img{width:36px;height:36px;margin:0 auto 8px;display:block}
.hk-work b{display:block;font-size:14.5px;color:var(--ink-strong);margin-bottom:4px}
.hk-work p{font-size:12.5px;color:var(--sub);margin:0;line-height:1.7}

.hk-2col{display:grid;grid-template-columns:1fr 1fr;gap:26px;margin:0 0 20px;align-items:start}
.hk-axis{display:grid;grid-template-columns:150px minmax(0,1fr) 38px;gap:10px;align-items:center;font-size:13.5px;margin:0 0 9px}
.hk-axis .hk-bar{background:#e7ecec;border-radius:3px;height:11px;overflow:hidden}
.hk-axis .hk-bar i{display:block;height:100%;background:var(--green)}
.hk-axis .hk-axis-v{text-align:right;font-weight:700;color:var(--ink-strong)}
.hk-total{
  background:var(--green-pale);border:1px solid var(--green-line);border-radius:var(--r);
  padding:14px 18px;display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-top:14px;
}
.hk-total b{font-size:14px;color:#3c4a3f}
.hk-total .hk-total-v{font-size:30px;font-weight:700;color:var(--red);line-height:1}

.hk-def{border-collapse:collapse;width:100%;font-size:13.5px}
.hk-def th{
  background:#f0f2f5;border:1px solid var(--line);padding:9px 12px;text-align:left;
  font-weight:700;white-space:nowrap;width:110px;vertical-align:top;
}
.hk-def td{border:1px solid var(--line);padding:9px 12px;vertical-align:top;overflow-wrap:anywhere;word-break:break-word}
.hk-def td.is-empty{color:#a7ada9;background:#fafafa}

.hk-others{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.hk-other{border:1px solid var(--line);border-radius:var(--r);padding:14px}
.hk-other b{display:block;font-size:14.5px;color:var(--ink-strong);margin-bottom:4px;line-height:1.5}
.hk-other p{font-size:12.5px;color:var(--sub);margin:0 0 10px}

/* ---------- トップページ ---------- */
/* ヒーローの写真は「全幅」。お手本＝近くの屋根修理Navi（yane.heteml.net）と同じ作り。
 *   ・<img> ではなく background-image（画像のURLだけ front.php から inline style で渡す＝?v= が効く）
 *   ・901px以上の横位置は calc(50% - 30px)（＝女性が本文1160pxの右端にそろう。2026-09-22）
 *   ・901px以上の高さは 500px 固定（⛔ vw で幅に比例させない）
 *
 * ⭐ 901px以上では background-size を「auto 619px」＝写真の原寸に固定している（cover ではない）。
 *   理由＝高さを 619px から 500px に狭めた時点で、表示枠の比率が画像の 4.2:1 を超える幅
 *   （約2100px以上）が出てくる。そこから先は cover だと「幅に合わせて拡大」する側に切り替わり、
 *   画面を広げるほど人物が大きくなる（＝生首が再発する）。
 *   auto 619px なら拡大率が常に 1.000 で、人物の大きさは 1280 / 1920 / 2560 のどこでも同じ。
 *   狭めたぶんは上下から均等に切り取られるだけ（上＝空 / 下＝手前の石のふち。顔には届かない）。
 *   ⛔ 900px以下は今までどおり cover のまま（スマホ・タブレットの見え方を変えない）。 */
.hk-top-hero{
  position:relative;background-color:#fff;overflow:hidden;
  /* ⭐ 73% ＝「写真を右端ぞろえにしていた頃（画像が2600px幅だった頃）と同じ場所を見せる」値。
        2026-09-22 に画像の右へ400px（鏡写しの風景）を継ぎ足して 2600->3000px にしたので、
        右端ぞろえ（100%）のままだと、継ぎ足した部分がタブレットに出てしまう。
        cover の倍率 s は幅で変わるので厳密な1つの値は無い。601〜900pxでの実測値は 67.5〜79%、
        代表値（768px）が 73.1% なので 73% を採る（端でも源画像で±75px＝見た目は変わらない）。
        ⛔ 901px以上は下の @media が calc() で上書きするので、この値は使われない。 */
  background-repeat:no-repeat;background-size:cover;background-position:73% 50%;
}
.hk-top-copy{
  /* 置く場所の明るさを実測＝平均221/255（空）。白文字だと読めないので、濃い色に白のふちを付ける。 */
  /* 写真が全幅に戻ったので、画面の右端から34px内側（＝人物の右にある空きの上）。 */
  position:absolute;right:34px;top:46px;
  z-index:1;color:#13351f;font-size:21px;font-weight:700;
  line-height:1.75;text-align:right;letter-spacing:.06em;
  text-shadow:0 0 10px rgba(255,255,255,.95),0 0 20px rgba(255,255,255,.8),0 1px 2px rgba(255,255,255,.9);
  font-family:"Hiragino Mincho ProN","Yu Mincho","MS PMincho",serif;
}
/* ⛔ 高さは固定。vw で幅に比例させない（＝画面がいくら広くても写真の大きさが変わらない）。
      500px＝お手本の屋根修理Navi（619px）より狭くした値。屋根Naviは中身（バッジ＋見出し＋説明＋
      タブ付き検索＋評価の行）で619pxが埋まるが、こちらは中身が185pxしか無いので空が余る。 */
.hk-top-hero-in{position:relative;max-width:var(--w);margin:0 auto;padding:44px 20px;min-height:500px;display:flex;align-items:center}
/* ⛔ 900px以下では、この白いパネルが必須（写真の上に文字が直接乗ると読めない）。
      901px以上では下の @media で背景を消し、左からの白いグラデーションの上に文字を直接置く。 */
.hk-top-panel{background:rgba(255,255,255,.95);border-radius:var(--r);padding:26px 28px;max-width:470px}
/* ⭐ 掲載件数のバッジ（2026-09-22。本文の上にあった3つの箱をここへまとめた）。
   お手本＝近くの屋根修理Navi（yane.heteml.net）の .ynf-badge を実測した形。
     ・見出しの「上」に置く（お手本と同じ位置）
     ・丸い帯ひとつ（border-radius:999px）・白抜きの太字・数字だけ一回り大きい（b）
     ・お手本の実測値＝padding:7px 18px / font-size:14px / b は 19px / margin-bottom:16px
   ⛔ 数字が3つあるぶん、お手本より1段小さい 12.5px にしてある（14pxだと470pxの箱に入らない）。
   ⛔ 色はお手本のオレンジ（--cta）にしない。このサイトではオレンジは「押せるボタン」だけの色なので、
      押せないバッジに使うと押せるものに見える。深緑（--green）＝サイトの主役の色を当てた。 */
.hk-top-badge{
  display:inline-flex;flex-wrap:wrap;align-items:baseline;gap:4px 10px;
  background:var(--green);color:#fff;border-radius:999px;
  padding:7px 18px;margin:0 0 14px;font-size:12.5px;font-weight:700;line-height:1.5;
}
.hk-top-badge span{white-space:nowrap}
.hk-top-badge b{font-size:17px;font-weight:800;margin:0 1px}
.hk-top-badge i{font-style:normal;opacity:.55}
.hk-top-panel .hk-top-title{font-size:31px;line-height:1.35;font-weight:700;color:#12381f;margin:0 0 10px}
.hk-top-panel p{font-size:14px;color:#3d463f;margin:0 0 14px}
.hk-top-find{display:flex;gap:10px}
.hk-top-find select{
  font:inherit;font-size:14px;flex:1 1 auto;min-width:0;padding:11px 12px;border:1px solid #cdd4ce;
  border-radius:var(--r);background:#fff;color:var(--ink);
}
.hk-top-find button{
  font:inherit;font-weight:700;font-size:15px;color:#fff;background:var(--cta);border:0;
  border-radius:var(--r);padding:11px 26px;cursor:pointer;
}
.hk-top-find button:hover{background:var(--cta-d)}

/* ⭐ 901px以上＝白い箱をやめて、左からの白いグラデーションで写真に文字を溶かす。
   お手本＝近くの屋根修理Navi（yane.heteml.net）の .ynf-hero-bg::after を実測して、そのまま使っている。
   左3割は真っ白 → 42%で85% → 60%で完全に透明。箱の枠が無くなるぶん、写真とひと続きに見える。
   ⛔ 900px以下には当てない（上の .hk-top-panel の注記のとおり）。
   ⛔ 文字は白地に乗るので濃い色のまま（見出し #12381f＝白に対して 13.0:1）。
      本番実測の最悪値は 1280/1920/2560 で 見出し 12.69 / 12.23 / 12.02、説明文 9.41 / 8.93 / 8.54。 */
@media (min-width:901px){
  /* ⭐⭐ 女性を「本文の幅（1160px）の右端」に合わせる。2026-09-22。
     ⛔ それまでは background-position:100% 50%（＝画面の右端ぞろえ）だったので、
        画面が広いほど女性が本文の外へ出ていった（2356px を超えると本文の外）。
     写真は原寸表示（下の background-size:auto 619px ＝拡大率1.000）なので、
     女性の位置は「写真の左端からの距離」で決まる＝画像内での女性は x=2002〜2110px。
     本文の右端は画面中央から +580px（1160/2）なので、
       写真の左端を   画面中央 - 1530px（= 580 - 2110）に置けば、
       女性の右端が   画面中央 + 580px  ＝ちょうど本文の右端に来る。
     background-position の % は「枠幅 - 画像幅」に対する比なので、
       50% ＝ (W-3000)/2 = W/2 - 1500 → あと 30px だけ左へ寄せれば W/2 - 1530 になる。
     ＝ calc(50% - 30px)。画面幅が変わっても、女性は常に本文の右端にそろう。
     ⛔ この寄せで写真の右端が画面中央+1470pxまでしか届かないので、
        画面が 2940px を超えると右に白が出る（画像を右へさらに継ぎ足すしかない）。 */
  .hk-top-hero{background-size:auto 619px;background-position:calc(50% - 30px) 50%}
  /* ⭐ 画面が本文（1160px＋左右24px＝1208px）より狭いときは、本文の右端＝画面の右端の24px内側になる。
        上の式のままだと女性が画面の外へ出る（901pxでは丸ごと見えなくなる。2026-09-22 Codexの指摘）。
        そこで「画面の右端から24px内側」より右へは行かないように頭を押さえる。
        min() は解決後の長さで比べるので、
          ・枠幅 1208px 以上 → calc(50% - 30px)（＝本文の右端。1280/1600/1920/2560 はこちらで不変）
          ・枠幅 1208px 未満 → calc(100% + 866px)（＝女性の右端が画面の右端 -24px）
        の2つが自動で切り替わり、境目でも値が一致するので飛びが出ない。
        ⛔ 上の行は min() を読めない古いブラウザ向けに残してある（消さない）。 */
  .hk-top-hero{background-position:min(calc(50% - 30px),calc(100% + 866px)) 50%}
  .hk-top-hero::after{
    content:"";position:absolute;inset:0;pointer-events:none;
    background:linear-gradient(90deg,
      rgb(255,255,255)        0%,
      rgb(255,255,255)       30%,
      rgba(255,255,255,0.85) 42%,
      rgba(255,255,255,0)    60%);
  }
  /* ⛔ ::after は DOM の最後に描かれるので、中身に z-index を付けないと白で覆われる。
        .hk-top-copy（手書きコピー）は元から z-index:1 なので触らなくてよい。 */
  .hk-top-hero-in{z-index:1}
  .hk-top-panel{background:none;border-radius:0;padding:0}
}

/* ⭐ 1519px以下だけ、グラデーションの裾を 60% → 50% に寄せる。
   理由＝写真は右端ぞろえなので、画面が狭いほど右の女性が枠の左寄りに来る。
   女性の左端が枠の何%に来るかは (枠幅-598)/枠幅 で決まり、
   1520px以上なら 60.3% 以上＝お手本の 60% の外側にいるので、そのままで白はかからない。
   1519px以下ではそれが 60% を割り込み、1280pxでは 52.7% まで来るので、
   左肩に最大34.4%（平均27.3%）・顔に最大18.3%（平均9.9%）の白がかぶっていた（実測）。
   裾を50%にすると 1280px で女性への白は 0.0%。
   ⛔ 文字は裾に届かない（1280pxで右端が35.7%の位置）ので、読みやすさは落ちない。
      実測でも 見出し12.69:1 / 説明文9.40:1 / コピー9.36:1 と、60%のときと同じ値。
   ⛔ 1520px以上（＝1920・2560）はお手本の 60% のまま。変える必要が無い。 */
@media (min-width:901px) and (max-width:1519px){
  .hk-top-hero::after{
    background:linear-gradient(90deg,
      rgb(255,255,255)        0%,
      rgb(255,255,255)       30%,
      rgba(255,255,255,0.85) 42%,
      rgba(255,255,255,0)    50%);
  }
}

.hk-genres{display:grid;grid-template-columns:repeat(5,1fr);gap:16px;margin:24px 0 8px}
.hk-genre{border:1px solid var(--line);border-radius:var(--r);overflow:hidden;text-decoration:none;display:block;background:#fff}
.hk-genre img{width:100%;aspect-ratio:1/1;object-fit:cover;display:block}
.hk-genre b{display:block;text-align:center;font-size:17px;color:var(--ink-strong);padding:12px 6px}
.hk-genre:hover b{color:var(--green)}
.hk-genre.is-soon{opacity:.72}
.hk-genre.is-soon b small{display:block;font-size:11px;color:var(--sub);font-weight:400}

.hk-band{background:var(--green-pale);padding:30px 0 34px;margin:34px 0}
.hk-band .hk-h2{margin-top:0}
.hk-anx{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.hk-anx div{
  background:#fff;border:1px solid var(--green-line);border-radius:var(--r);padding:14px 16px;
  display:flex;align-items:center;gap:12px;font-size:13.5px;line-height:1.6;color:#3c4a3f;
}
.hk-anx img{width:30px;height:30px;flex:0 0 30px}

.hk-area-find{display:grid;grid-template-columns:minmax(0,1fr) 250px;gap:20px;align-items:start}
.hk-pref-row{display:grid;grid-template-columns:110px minmax(0,1fr);gap:10px;margin:0 0 8px;align-items:start}
.hk-pref-row>b{
  background:var(--green-chip);border-radius:var(--r);padding:7px 10px;font-size:13px;
  color:#2f5b3c;text-align:center;font-weight:700;
}
.hk-pref-row .hk-pref-list{display:flex;flex-wrap:wrap;gap:6px}
.hk-pref-row a,.hk-pref-row span{
  border:1px solid var(--line);border-radius:var(--r);padding:6px 11px;font-size:12.5px;
  text-decoration:none;color:#2f5b3c;background:#fff;
}
.hk-pref-row a:hover{background:var(--green-pale)}
.hk-pref-row span{color:#a7ada9;background:#fafafa}
.hk-map{text-align:center}
.hk-map img{width:100%;max-width:230px}
.hk-map p{font-size:12px;color:var(--sub);margin:6px 0 0}

.hk-cols{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.hk-col{border:1px solid var(--line);border-radius:var(--r);overflow:hidden;background:#fff}
.hk-col img{width:100%;aspect-ratio:16/9;object-fit:cover;display:block}
.hk-col .hk-col-in{padding:14px 16px 16px}
.hk-col b{display:block;font-size:15.5px;color:var(--ink-strong);line-height:1.6;margin-bottom:6px}
.hk-col p{font-size:13px;color:var(--sub);margin:0;line-height:1.8}

.hk-howto{background:var(--bg-soft);padding:26px 0 30px;margin:34px 0 0}
.hk-howto-grid{display:grid;grid-template-columns:minmax(0,1fr) 210px;gap:24px;align-items:center}
.hk-howto ol{margin:0;padding-left:1.3em;font-size:13.5px}

/* ⛔ .hk-counts / .hk-count（トップの3つの件数の箱）は 2026-09-22 に削除した。
      件数はヒーローの中の .hk-top-badge へまとめたので、使う場所がもう無い。 */

/* トップで、ジャンルタイルのすぐ下に来る説明文。
   3つの箱を抜いたぶん、タイルと文章がくっつくので、その間だけ空ける。 */
.hk-lead-sep{margin-top:18px}

/* ---------- フッター ---------- */
.hk-foot{background:var(--green);color:#fff;padding:30px 0 22px;margin-top:40px}
.hk-foot-in{display:grid;grid-template-columns:1.3fr 1fr 1fr 1fr 1fr;gap:22px}
.hk-foot-in>div:first-child{border-right:1px solid rgba(255,255,255,.22);padding-right:22px}
.hk-foot img{height:22px;width:auto;margin-bottom:8px}
.hk-foot p{font-size:12.5px;color:#d8e6da;margin:0 0 .6em;line-height:1.8}
.hk-foot b{display:block;font-size:13.5px;margin:0 0 8px}
.hk-foot ul{list-style:none;margin:0;padding:0}
.hk-foot li{margin:0 0 5px}
.hk-foot a{color:#e3efe5;text-decoration:none;font-size:12.5px}
.hk-foot a:hover{text-decoration:underline}
.hk-copy{border-top:1px solid rgba(255,255,255,.22);margin-top:22px;padding-top:14px;font-size:11.5px;color:#cfe0d2}

/* ---------- 900px以下 ---------- */
/* ⛔ 手書きのコピーは、左のパネルと重なる幅では出さない。
   パネルは最大470px。820pxより狭いと、右のコピーとぶつかる。 */
@media (max-width:820px){
  .hk-top-copy{display:none}
}

@media (max-width:900px){
  /* ⛔ 900px以下のヒーローの高さは今までどおり（中身で決まる310px基準）。
        619px は広い画面のためのお手本値なので、タブレット・スマホには当てない。 */
  .hk-top-hero-in{min-height:310px}
  .hk-hero{grid-template-columns:1fr}
  .hk-tiles{grid-template-columns:1fr}
  .hk-card{grid-template-columns:34% minmax(0,1fr);}
  .hk-card-cta{grid-column:1/-1;flex-direction:row}
  .hk-card-cta .hk-btn{flex:1}
  .hk-facts{grid-template-columns:repeat(2,1fr)}
  .hk-works{grid-template-columns:repeat(2,1fr)}
  .hk-2col{grid-template-columns:1fr;gap:18px}
  .hk-sg{grid-template-columns:1fr}
  .hk-others{grid-template-columns:1fr}
  .hk-genres{grid-template-columns:repeat(3,1fr)}
  .hk-anx{grid-template-columns:repeat(2,1fr)}
  .hk-area-find{grid-template-columns:1fr}
  .hk-map{display:none}
  .hk-cols{grid-template-columns:1fr}
  .hk-howto-grid{grid-template-columns:1fr}
  .hk-foot-in{grid-template-columns:1fr 1fr}
}

/* ---------- 600px以下（スマホ・375pxで崩れないこと） ---------- */
@media (max-width:600px){
  body{font-size:14.5px}
  .hk-wrap,.hk-head-in,.hk-top-hero-in{padding-left:16px;padding-right:16px}
  .hk-hero-title{font-size:25px}
  .hk-foot-in>div:first-child{border-right:0;padding-right:0}
  .hk-head-in{height:auto;min-height:52px;gap:10px;flex-wrap:wrap;padding-top:9px;padding-bottom:0}
  .hk-logo img{height:19px}
  .hk-nav{order:3;width:100%;margin:0;gap:15px;overflow-x:auto;padding:9px 0;-webkit-overflow-scrolling:touch}
  .hk-nav a{font-size:12.5px}
  .hk-head-cta{font-size:12px;padding:8px 11px}
  .hk-h2{font-size:19px;margin-top:34px;border-left-width:5px;padding-left:11px}
  .hk-h2-line{font-size:18px}
  .hk-card{grid-template-columns:1fr;padding:10px;gap:11px}
  .hk-card-photo img,.hk-card-noimg{aspect-ratio:16/9}
  .hk-card-noimg .hk-initial{font-size:40px}
  .hk-card-cta{flex-direction:column}
  .hk-card-name{font-size:18px}
  .hk-card-cta .hk-btn{font-size:16px}
  .hk-tile .hk-num{font-size:29px}
  .hk-tile b{font-size:14px}
  .hk-facts{grid-template-columns:1fr}
  .hk-works{grid-template-columns:1fr}
  .hk-genres{grid-template-columns:repeat(2,1fr)}
  .hk-anx{grid-template-columns:1fr}
  .hk-sg-title{font-size:22px}
  .hk-axis{grid-template-columns:110px minmax(0,1fr) 34px;font-size:12.5px}
  .hk-def th{width:88px;font-size:12.5px;padding:8px}
  .hk-def td{font-size:12.5px;padding:8px}
  /* スマホはパネルが写真のほとんどを覆うので、人物の顔にパネルが重ならないよう、
     写真の左側（空と墓石）を見せる。値は今までと同じ（object-position → background-position）。 */
  /* 18% ＝ 画像が2600px幅だった頃の「22%」と同じ場所を見せる値（375pxで実測18.3%／600pxで17.4%）。
     ⛔ 見え方を変えるための変更ではない。画像を3000pxに広げたぶんを打ち消しているだけ。 */
  .hk-top-hero{background-position:18% 40%}
  /* ⛔ 375pxではバッジが1行に収まらない（実測で必要な幅が箱の中身より広い）。
        折り返す前提にして、区切りの「／」は消す（行あたまに「／」が来るのを防ぐ）。
        角の丸みも 999px のままだと2段になった時に形が崩れるので 14px に落とす。 */
  .hk-top-badge{border-radius:14px;font-size:12px;padding:7px 14px;gap:3px 12px;margin-bottom:12px}
  .hk-top-badge i{display:none}
  .hk-top-badge b{font-size:16px}
  .hk-top-panel{padding:18px 18px 20px}
  .hk-top-panel .hk-top-title{font-size:23px}
  .hk-top-find{flex-direction:column}
  .hk-top-find button{padding:11px}
  .hk-pref-row{grid-template-columns:1fr;gap:6px}
  .hk-foot-in{grid-template-columns:1fr}
  .hk-table{font-size:12.5px}
  .hk-table th,.hk-table td{padding:7px 9px}
  .hk-scroll .hk-table{min-width:660px}
  .hk-scroll .hk-table tbody th{position:sticky;left:0;z-index:1;box-shadow:1px 0 0 var(--line)}
      .hk-faq .hk-faq-a{padding-left:38px}
}

/* ---------- 細かい部品 ---------- */
.screen-reader-text{
  position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;border:0;
}
/* ⛔ ヒーローの写真は1枚だけ。人物ごと図から切り出した hero-top.jpg を使う。
   人物を別の <img> で右に重ねると、その写真の四角い縁がそのまま継ぎ目になる。
   図に写っているものは、図から切り出す（作り直さない）。 */
.hk-article{font-size:15px}
.hk-article h2{font-size:21px;margin:34px 0 12px;padding-left:12px;border-left:6px solid var(--green)}
.hk-article h3{font-size:17px;margin:24px 0 8px}
.hk-article img{border-radius:var(--r)}
.hk-work b{line-height:1.5}
.hk-price h3 a{color:inherit}
.hk-table th a{color:inherit;text-decoration:none}
.hk-table th a:hover{text-decoration:underline}
.hk-other b a{color:inherit;text-decoration:none}
.hk-col{text-decoration:none;color:inherit;display:block}
.hk-col:hover b{color:var(--green)}
.hk-wait a{display:inline-block;margin-top:4px;color:#8a6d2f;font-weight:700}
.hk-genre.is-soon{background:#fbfbfb}


/* ---------- お墓の種類の表（図＝4列・費用は赤） ---------- */
.hk-kinds th{white-space:nowrap}
.hk-kinds tbody th{background:#fff;font-weight:700}
.hk-kinds td:first-of-type{color:#41493f}
.hk-kinds-note{font-size:12px;color:var(--sub);line-height:1.9;margin:10px 0 16px}
.hk-kinds-note a{color:#1d6b3f}

/* 出典の注記（本文の一番下に小さく。⛔ 導入文には書かない） */
.hk-source{font-size:12px;color:var(--sub);line-height:1.9;margin:34px 0 0;
  border-top:1px solid var(--line);padding-top:14px}
.hk-source a{color:#1d6b3f}

/* ---------- よくある質問（答えを最初から見せる。details で閉じない） ---------- */
.hk-faq-item{border:1px solid var(--line);border-radius:var(--r);background:#fff;padding:15px 20px}
.hk-faq-q{
  font-size:15.5px;font-weight:700;color:var(--ink-strong);margin:0 0 8px;
  padding-left:30px;position:relative;line-height:1.6;
}
.hk-faq-q::before{content:"Q";position:absolute;left:0;top:-2px;color:var(--green);font-weight:700;font-size:19px}
.hk-faq .hk-faq-a{background:none;border:0;padding:0 0 0 30px;font-size:14px;margin:0;color:#41493f}
.hk-faq .hk-faq-a p{margin:0 0 .5em}
.hk-faq .hk-faq-a p:last-child{margin:0}

/* まだ作っていないページ（リンクにしない） */
.hk-soon{color:#a9b4ab;cursor:default}
.hk-foot .hk-soon{color:#a6bfab}
.hk-btn-inline{display:inline-block;padding:11px 22px}

/* ---------- お問い合わせフォーム ---------- */
.hk-form{max-width:640px;margin:18px 0 8px}
.hk-form-ok{background:var(--green-pale);border:1px solid var(--green-line);border-radius:var(--r);
  padding:14px 18px;color:#2b5b38;font-weight:700;margin:0 0 14px}
.hk-form-ng{background:#fdeaea;border:1px solid #f0cdcd;border-radius:var(--r);
  padding:14px 18px;color:#8d1f1f;margin:0 0 14px}
.hk-f-row{margin:0 0 14px}
.hk-f-row label{display:block;font-size:14px;font-weight:700;color:var(--ink-strong);margin:0 0 5px}
.hk-f-row input,.hk-f-row select,.hk-f-row textarea{
  font:inherit;font-size:15px;width:100%;padding:10px 12px;border:1px solid #cdd4ce;
  border-radius:var(--r);background:#fff;color:var(--ink);
}
.hk-f-row textarea{line-height:1.8;resize:vertical}
.hk-req{display:inline-block;margin-left:8px;font-size:11px;font-weight:700;color:#fff;
  background:var(--red);border-radius:3px;padding:2px 6px;vertical-align:2px}
.hk-f-note{font-size:12.5px;color:var(--sub);margin:0 0 14px}
.hk-f-pot{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.hk-form button.hk-btn{border:0;cursor:pointer;font-family:inherit}