@charset "UTF-8";
/* 自治会・自治体向け 街頭防犯カメラ かんたん概算見積り（jichikai-estimate.html 専用）
   - サイト共通トークン（styles.css の :root）を優先して再利用する。
     再定義するのは「このツールにしか無い値」だけで、すべて --jk- 接頭辞を付ける。
   - クラス名も jk- 接頭辞で名前空間を分離し、styles.css の .btn / .hero 等と衝突させない。
   - 帳票（見積書）は印刷が主目的のため、専用の墨・罫線階調トークンを持つ。 */

:root{
  --jk-paper:#FBFAF7;              /* 用紙色（本文背景・サイト白より少し温かい） */
  /* 主要CTA: 白文字とのコントラスト 4.5:1 以上が要件（--orange-deep は 3.71:1 で不足） */
  --jk-cta:#A85E1F;                /* 白文字とのコントラスト 4.90:1 */
  --jk-cta-hover:#8F4E15;          /* 白文字とのコントラスト 6.43:1 */
  --jk-warn-ink:#7a3f06;           /* 仮単価バーの文字（薄橙ストライプ上） */
  --jk-orange-dim:rgba(230,126,34,.10);  /* 注記の下地（サイトの --orange-dim より薄い） */
  /* 帳票（見積書）専用トークン: 印刷物の墨・罫線階調 */
  --jk-doc-ink:#111; --jk-doc-ink-2:#333; --jk-doc-ink-3:#444; --jk-doc-mute:#666;
  --jk-doc-rule:#bbb; --jk-doc-rule-2:#ccc; --jk-doc-rule-3:#999;
  --jk-doc-caution:#8a4a06; --jk-doc-watermark:rgba(230,126,34,.12);
  --jk-mincho:"Hiragino Mincho ProN","Yu Mincho","Noto Serif JP",serif;
  --jk-r-in:10px;                  /* 操作部品の角丸（カードは --r-card を使う） */
}

body.jk-page{ background:var(--jk-paper); }
/* styles.css の img{} は height を指定しないため、幅可変で潰れないよう明示する */
.jk-scope img{ height:auto; }
.jk-scope{ line-height:1.85; letter-spacing:.01em; }
.jk-scope b{ font-weight:700; }

/* ---------- ページヒーロー（他ツール頁と同じ帯） ---------- */
.page-hero{
  position:relative; color:#fff;
  background:
    radial-gradient(1000px 500px at 75% 20%, rgba(230,126,34,0.1), transparent 60%),
    linear-gradient(150deg, var(--navy-2) 0%, var(--navy) 100%);
  padding:clamp(130px, 16vw, 190px) 0 clamp(48px, 6vw, 72px);
  border-bottom:1px solid rgba(255,255,255,0.08);
}

/* 動画ヒーロー（index.html メインヒーロー .hero__scene-video / .hero__scene-overlay と同型の
   「video 背面・overlay 背面・inner 前面」3層構成。overlay は疑似要素ではなく実体 div
   （.page-hero__overlay）にして、旧CSSキャッシュ事故時にもインラインで直書きできる保険を持たせる。
   動画は脇役のため、薄い側も含め全域で紺 α≧0.75 を確保し、絵は気配として沈める
   （実測: 最明フレーム t=3.42s・h1領域p95輝度184.6・生動画のみだとAA未達=1.74:1 →
    現行オーバーレイ込みで9.31:1だが、右端(旧α0.50)の余白は要件未達のため全域引き上げ）。 */
.page-hero--video{
  background:var(--navy);
  isolation:isolate;
  overflow:hidden;
}
.page-hero__video{
  position:absolute; inset:0; z-index:0;
  width:100%; height:100%;
  object-fit:cover; display:block;
  pointer-events:none;
}
.page-hero__overlay{
  position:absolute; inset:0; z-index:1;
  background:
    radial-gradient(1000px 500px at 88% 12%, rgba(230,126,34,0.10), transparent 60%),
    linear-gradient(100deg, rgba(10,22,40,0.90) 0%, rgba(10,22,40,0.85) 50%, rgba(10,22,40,0.78) 100%);
}
/* narrow では文字が横幅いっぱいに回り込むため、横グラデの薄い側に文字が乗ってしまう。
   縦方向のグラデに切り替え、最も薄い所でも α=0.82 を確保する。 */
@media (max-width:1000px){
  .page-hero__overlay{
    background:
      radial-gradient(700px 400px at 85% 10%, rgba(230,126,34,0.10), transparent 60%),
      linear-gradient(170deg, rgba(10,22,40,0.92) 0%, rgba(10,22,40,0.87) 55%, rgba(10,22,40,0.82) 100%);
  }
}
/* 動きを減らす設定では動画を出さず、ポスター（朝の始端フレーム）の静止画にする */
@media (prefers-reduced-motion: reduce){
  .page-hero__video{ display:none; }
  .page-hero--video{
    background-image:url("assets/jichikai/hero-day-loop-poster.webp");
    background-size:cover; background-position:center;
  }
}
.page-hero__inner{ position:relative; z-index:2; max-width:var(--maxw); margin:0 auto; padding:0 var(--pad-x); }
.page-hero h1{ font-size:clamp(28px, 4vw, 48px); font-weight:800; letter-spacing:-0.02em; line-height:1.25; color:#fff; margin:0 0 16px; }
.page-hero__sub{ font-size:clamp(15px, 1.2vw, 17px); color:rgba(255,255,255,0.85); line-height:1.85; max-width:60ch; margin:0; }
.breadcrumbs{ display:flex; gap:10px; align-items:center; font-size:13px; color:rgba(255,255,255,0.6); margin-bottom:20px; letter-spacing:0.04em; flex-wrap:wrap; }
.breadcrumbs a{ color:rgba(255,255,255,0.85); text-decoration:none; }
.breadcrumbs a:hover{ color:var(--orange); }
.breadcrumbs__sep{ color:rgba(255,255,255,0.25); }

/* ---------- 仮単価バー（PROVISIONAL=false で JS が非表示にする） ---------- */
.jk-mockbar{
  background:repeating-linear-gradient(135deg,var(--jk-orange-dim) 0 14px,rgba(230,126,34,.18) 14px 28px);
  border-bottom:2px solid var(--orange);
  color:var(--jk-warn-ink); font-size:14px; line-height:1.7; text-align:center;
  padding:9px var(--pad-x);
}

/* ---------- 導入（イラスト＋3ステップ） ---------- */
.jk-intro{ max-width:var(--maxw); margin:0 auto; padding:26px var(--pad-x) 6px; display:grid; grid-template-columns:minmax(0,1.05fr) minmax(0,1fr); gap:28px; align-items:center; }
.jk-intro__img{ width:100%; border-radius:var(--r-card); box-shadow:var(--shadow-2); }
.jk-intro__lead{ margin:0 0 16px; font-size:18px; line-height:1.9; }
.jk-intro__steps{ list-style:none; margin:0; padding:0; display:grid; gap:8px; }
.jk-intro__steps li{ display:flex; gap:12px; align-items:center; background:var(--white); border:1px solid var(--line); border-radius:var(--jk-r-in); padding:10px 14px; font-size:16px; }
.jk-intro__steps span{ flex:0 0 auto; width:30px; height:30px; border-radius:50%; background:var(--navy); color:#fff; font-weight:800; display:grid; place-items:center; font-size:15px; }

/* ---------- レイアウト ---------- */
.jk-wrap{ max-width:var(--maxw); margin:0 auto; padding:18px var(--pad-x) 40px; }
.jk-noscript{ background:var(--jk-orange-dim); border:1px solid var(--orange); border-radius:var(--jk-r-in); padding:16px 20px; font-size:15px; line-height:1.9; margin:0 0 18px; }
.jk-layout{ display:grid; grid-template-columns:minmax(0,1fr) 348px; gap:28px; align-items:start; }
.jk-qs{ display:grid; gap:18px; min-width:0; }

/* ---------- 質問カード ---------- */
.jk-q{ background:var(--white); border:1px solid var(--line); border-radius:var(--r-card); padding:20px; display:grid; grid-template-columns:150px minmax(0,1fr); gap:20px; align-items:start; }
.jk-q__img img{ width:150px; height:150px; object-fit:contain; border-radius:var(--jk-r-in); background:#fff; }
.jk-q__t{ margin:0 0 6px; font-size:20px; font-weight:800; line-height:1.5; letter-spacing:0; display:flex; gap:10px; align-items:baseline; }
.jk-q__no{ flex:0 0 auto; min-width:30px; height:30px; padding:0 6px; border-radius:15px; background:var(--orange); color:#fff; font-size:15px; font-weight:800; display:inline-grid; place-items:center; line-height:1; transform:translateY(2px); }
.jk-q__d{ margin:0 0 14px; font-size:16px; color:var(--ink-3); line-height:1.8; }
.jk-q__hedge{ margin:12px 0 0; font-size:15px; line-height:1.8; background:var(--jk-orange-dim); border-left:4px solid var(--orange); border-radius:8px; padding:10px 14px; }

/* ステッパー */
.jk-stepper{ display:inline-flex; align-items:center; gap:6px; border:2px solid var(--line); border-radius:var(--jk-r-in); padding:5px; background:var(--grey); }
.jk-stepbtn{ width:56px; height:52px; min-height:48px; font:inherit; font-size:26px; font-weight:700; line-height:1; color:var(--navy); background:var(--white); border:1px solid var(--line); border-radius:8px; cursor:pointer; }
.jk-stepbtn:hover:not(:disabled){ border-color:var(--orange-deep); background:#fff; }
.jk-stepbtn:disabled{ opacity:.35; cursor:not-allowed; }
.jk-stepper__v{ min-width:96px; text-align:center; font-size:24px; font-weight:800; color:var(--navy); }
.jk-stepper__u{ font-size:15px; font-weight:600; margin-left:4px; color:var(--ink-3); }
.jk-stepper--sm .jk-stepbtn{ width:48px; height:48px; font-size:22px; }
.jk-stepper--sm .jk-stepper__v{ min-width:78px; font-size:20px; }

/* 選択ボタン */
.jk-choices{ display:flex; gap:10px; flex-wrap:wrap; }
.jk-ch{ flex:0 1 auto; min-width:118px; min-height:52px; padding:12px 18px; font:inherit; font-size:17px; font-weight:700; color:var(--navy); background:var(--white); border:2px solid var(--line); border-radius:var(--jk-r-in); cursor:pointer; }
.jk-ch:hover{ border-color:var(--orange-deep); }
.jk-ch[aria-checked="true"]{ background:var(--navy); border-color:var(--navy); color:#fff; }
.jk-choices--3 .jk-ch{ min-width:0; flex:1 1 170px; }
.jk-sub{ margin-top:14px; padding:14px; background:var(--grey); border-radius:var(--jk-r-in); }
.jk-sub__t{ margin:0 0 8px; font-size:16px; font-weight:700; }

/* ---------- 合計パネル ----------
   カード全体を1つのスクロール領域にすると、画面が低いときに
   「見積書を確認する」ボタンや電話番号がカード外へ押し出されて見切れる（実測: カード全高 837px）。
   そのため縦積み（flex column）にして、伸縮するのは内訳リストだけに限定する。 */
.jk-sum{ min-width:0; }
.jk-sum__in{ background:var(--white); border:2px solid var(--navy); border-radius:var(--r-card); padding:18px; box-shadow:var(--shadow-2); display:flex; flex-direction:column; }
.jk-sum__in > *{ flex:0 0 auto; }   /* 入力欄・CTA・電話行は絶対に潰さない */
.jk-sum__cap{ margin:0; font-size:14px; font-weight:700; color:var(--mute); }
.jk-sum__total{ margin:2px 0 0; font-size:38px; font-weight:800; color:var(--orange-deep); line-height:1.15; letter-spacing:-.02em; border-radius:6px; }
.jk-sum__yen{ font-size:18px; font-weight:700; color:var(--ink); margin-left:4px; }
.jk-sum__sub{ margin:2px 0 12px; font-size:13.5px; color:var(--mute); }
.jk-sum__lcap{ margin:0; font-size:12.5px; font-weight:700; color:var(--mute); border-top:1px solid var(--line); padding-top:8px; }
.jk-sum__list{ list-style:none; margin:0 0 12px; padding:4px 0 10px; border-bottom:1px solid var(--line); display:grid; gap:5px; font-size:13.5px; max-height:196px; overflow:auto; overscroll-behavior:contain; }
.jk-sum__list li{ display:flex; justify-content:space-between; gap:10px; line-height:1.6; }
.jk-sum__list .jk-n{ font-variant-numeric:tabular-nums; color:var(--ink-3); white-space:nowrap; }
.jk-sum__warn{ margin:0 0 14px; font-size:13px; line-height:1.75; color:var(--ink-3); background:var(--grey); border-radius:8px; padding:9px 12px; }
.jk-sum__name{ display:grid; gap:4px; margin-bottom:12px; }
.jk-sum__name label{ font-size:13px; font-weight:700; color:var(--ink-3); }
.jk-sum__name input{ width:100%; min-height:48px; padding:10px 12px; font:inherit; font-size:16px; border:2px solid var(--line); border-radius:8px; background:#fff; color:var(--ink); }
.jk-sum__name input:focus{ outline:2px solid var(--orange-deep); outline-offset:1px; }
.jk-sum__tel{ margin:12px 0 0; font-size:13.5px; color:var(--ink-3); text-align:center; line-height:1.7; }

.jk-btn{ display:block; width:100%; min-height:54px; padding:14px 18px; font:inherit; font-size:17px; font-weight:800; border-radius:var(--jk-r-in); cursor:pointer; border:2px solid transparent; }
.jk-btn--main{ background:var(--jk-cta); color:#fff; }
.jk-btn--main:hover{ background:var(--jk-cta-hover); }
.jk-btn--ghost{ background:#fff; color:var(--navy); border-color:var(--line); margin-top:8px; font-weight:700; font-size:15px; min-height:48px; }
.jk-btn--ghost:hover{ border-color:var(--orange-deep); }
.jk-btn--sm{ width:auto; min-height:48px; padding:10px 18px; font-size:15px; }

/* 画面が十分に高いときだけ追従させる（カード固定部 641px + 内訳最小 64px + ナビ 80px が入る高さ）。
   追従中にスクロールするのは内訳リストだけ。入力欄・CTA・電話行はカード内に必ず残る。 */
@media (min-width:1001px) and (min-height:820px){
  .jk-sum{ position:sticky; top:calc(var(--nav-h) + 8px); }
  .jk-sum__in{
    max-height:calc(100vh - var(--nav-h) - 24px);
    max-height:calc(100dvh - var(--nav-h) - 24px);
  }
  .jk-sum__list{ flex:0 1 auto; min-height:64px; overflow-y:auto; }
}
/* 追従できない高さの画面の扱いは、.jk-mbar の既定値より後で上書きする必要があるため
   ファイル末尾のレスポンシブ節に置く（下の「低い画面」ブロック）。 */

/* ---------- モバイル固定バー ---------- */
.jk-mbar{ display:none; position:fixed; left:0; right:0; bottom:0; z-index:40; background:var(--navy); color:#fff; padding:10px 14px calc(10px + env(safe-area-inset-bottom)); align-items:center; justify-content:space-between; gap:12px; box-shadow:0 -4px 16px rgba(10,22,40,.2); }
.jk-mbar__cap{ display:block; font-size:12px; color:rgba(255,255,255,.75); }
.jk-mbar__v{ display:block; font-size:24px; font-weight:800; color:#fff; line-height:1.2; }

/* ---------- 見積書プレビュー（モーダル） ---------- */
.jk-modal{ position:fixed; inset:0; z-index:110; background:rgba(10,22,40,.55); overflow:auto; }
.jk-modal[hidden]{ display:none; }
.jk-modal__bar{ position:sticky; top:0; z-index:2; display:flex; gap:12px; align-items:center; justify-content:space-between; background:var(--navy); color:#fff; padding:10px 14px; }
.jk-modal__cap{ font-size:13.5px; color:rgba(255,255,255,.8); }
.jk-modal__body{ padding:20px 14px 60px; display:flex; justify-content:center; }

/* ---------- 見積書本体（A4） ---------- */
.jk-sheet{ position:relative; width:100%; max-width:186mm; background:#fff; color:var(--jk-doc-ink); padding:16mm 14mm; box-shadow:0 10px 40px rgba(0,0,0,.3); font-size:12.5px; line-height:1.75; }
.jk-sheet__watermark{ position:absolute; top:44%; left:0; right:0; text-align:center; font-size:60px; font-weight:800; color:var(--jk-doc-watermark); letter-spacing:.2em; transform:rotate(-18deg); pointer-events:none; }
.jk-sheet__hd{ display:flex; justify-content:space-between; align-items:flex-start; gap:20px; border-bottom:3px solid var(--navy); padding-bottom:10px; margin-bottom:16px; }
.jk-sheet__ttl{ margin:0; font-family:var(--jk-mincho); font-size:26px; font-weight:700; letter-spacing:.16em; color:var(--jk-doc-ink); }
.jk-sheet__date{ margin:4px 0 0; font-size:12px; color:var(--jk-doc-ink-3); }
.jk-sheet__logo{ width:170px; height:auto; }
.jk-sheet__to{ margin-bottom:14px; }
.jk-sheet__org{ margin:0; font-size:18px; font-weight:700; border-bottom:1px solid var(--jk-doc-rule-3); display:inline-block; padding:0 24px 3px 0; }
.jk-sheet__person{ margin:6px 0 0; font-size:13px; }
.jk-sheet__subj{ margin:8px 0 0; font-size:13.5px; }
.jk-sheet__grand{ margin:0 0 14px; background:var(--grey); border-left:6px solid var(--orange); padding:10px 16px; font-size:15px; font-weight:700; }
.jk-sheet__grand b{ font-size:27px; font-family:var(--jk-mincho); letter-spacing:.02em; color:var(--navy); }
.jk-sheet__tbl{ width:100%; border-collapse:collapse; font-size:11.5px; margin-bottom:12px; }
.jk-sheet__tbl th,.jk-sheet__tbl td{ border:1px solid var(--jk-doc-rule); padding:5px 8px; text-align:left; vertical-align:top; }
.jk-sheet__tbl thead th{ background:var(--navy); color:#fff; font-weight:700; text-align:center; }
.jk-sheet__tbl .jk-n{ text-align:right; font-variant-numeric:tabular-nums; white-space:nowrap; }
.jk-sheet__tbl .jk-memo{ display:block; color:var(--jk-doc-mute); font-size:10.5px; line-height:1.55; }
.jk-sheet__tbl tfoot td,.jk-sheet__tbl tfoot th{ background:var(--grey); font-weight:700; }
.jk-sheet__tbl tfoot tr.jk-grand td,.jk-sheet__tbl tfoot tr.jk-grand th{ background:var(--navy); color:#fff; font-size:13.5px; }
.jk-sheet__cond{ border:1px solid var(--jk-doc-rule-2); border-radius:6px; padding:8px 12px; margin-bottom:10px; }
.jk-sheet__cond-t{ margin:0 0 3px; font-size:11.5px; font-weight:700; color:var(--jk-doc-ink-2); }
.jk-sheet__cond ul{ margin:0; padding-left:1.2em; font-size:11px; line-height:1.7; columns:2; column-gap:18px; }
.jk-sheet__notes{ font-size:11px; line-height:1.75; }
.jk-sheet__notes p{ margin:0 0 3px; }
.jk-sheet__mock{ color:var(--jk-doc-caution); background:var(--jk-orange-dim); padding:4px 8px; border-radius:4px; }
.jk-sheet__ft{ margin-top:12px; border-top:2px solid var(--navy); padding-top:8px; font-size:11px; line-height:1.65; }
.jk-sheet__co{ margin:0; font-size:14px; font-weight:700; font-family:var(--jk-mincho); letter-spacing:.06em; }
.jk-sheet__ft p{ margin:0; }

/* 金額が変わったことを一瞬光らせて知らせる */
@keyframes jkflash{ 0%{ background:rgba(230,126,34,.28); } 100%{ background:transparent; } }
.jk-flash{ animation:jkflash .55s ease-out; }
@media (prefers-reduced-motion:reduce){ .jk-flash{ animation:none; } }

/* ---------- レスポンシブ ---------- */
@media (max-width:1000px){
  /* 1カラムでは合計パネルが質問の下に来るため、走行中の合計は下部固定バーが担う */
  body.jk-page{ padding-bottom:80px; }
  .jk-layout{ grid-template-columns:1fr; }
  .jk-intro{ grid-template-columns:1fr; gap:16px; }
  .jk-sum{ position:static; max-height:none; overflow:visible; }
  .jk-sum__list{ max-height:none; }
  .jk-sum__lcap{ display:none; }
  .jk-mbar{ display:flex; }
}
/* 低い画面（横は広いがサマリを追従させると見切れる高さ）:
   カードは素直に流し、走行中の合計はモバイルと同じ下部固定バーが受け持つ。 */
@media (min-width:1001px) and (max-height:819px){
  body.jk-page{ padding-bottom:80px; }
  .jk-mbar{ display:flex; }
}
@media (max-width:640px){
  .jk-scope{ font-size:16px; }
  .jk-q{ grid-template-columns:1fr; gap:12px; padding:16px; }
  .jk-q__img{ display:flex; justify-content:center; }
  .jk-q__img img{ width:190px; height:190px; }
  .jk-q__t{ font-size:19px; }
  .jk-choices .jk-ch{ flex:1 1 140px; }
  .jk-sum__total{ font-size:32px; }
  .jk-sheet{ padding:10mm 8mm; font-size:12px; }
  .jk-sheet__cond ul{ columns:1; }
  .jk-sheet__hd{ flex-direction:column-reverse; align-items:flex-start; gap:8px; }
}

/* ---------- 印刷（A4見積書のみを出力） ---------- */
@media print{
  @page{ size:A4; margin:12mm; }
  html,body{ background:#fff; }
  body.jk-page{ padding:0; }
  body>*{ display:none !important; }
  #jkModal{ display:block !important; position:static; background:none; overflow:visible; inset:auto; }
  .jk-modal__bar{ display:none !important; }
  .jk-modal__body{ padding:0; display:block; }
  .jk-sheet{ max-width:none; width:auto; box-shadow:none; padding:0; font-size:11.5px; }
  .jk-sheet, .jk-sheet *{ -webkit-print-color-adjust:exact; print-color-adjust:exact; }
  .jk-sheet__watermark{ font-size:54px; }
  .jk-sheet__tbl{ font-size:10.5px; page-break-inside:auto; }
  .jk-sheet__tbl tr{ page-break-inside:avoid; }
  .jk-sheet__notes,.jk-sheet__cond,.jk-sheet__ft{ page-break-inside:avoid; }
}