/* ============================================================
   株式会社クレストヒルズマネジメント LP — 共通土台
   3案（A｜人／B｜仕事／C｜これから）＋D（30万円プラン・多ページ見本）で必ず同じにする部分だけを置く。
   ここに入れるもの：トークン／リセット／文字組／ボタン／skip link／
   ヘッダー外殻／会社概要・グループ・認定・画像枠／フォーム／フッター／
   モバイルCTA／モーション／フォーカスリング。
   ヒーローとセクションの見せ方は a.css / b.css / c.css / d.css が持つ。
   ONKS design-system v3（concept Y）のトークン体系を維持し、
   アクセントのみ先方コーポレートカラー（ライトグリーン）へ差し替えている。
   ============================================================ */
:root{
  --bg:#FAFAF9; --bg-alt:#F3FAF4; --surface:#FFFFFF;
  --ink:#0C0A09; --ink-2:#44403C; --mut:#6B6560; --faint:#78716C;
  --line:#E7E5E4; --line-2:#D6D3D1;
  /* accent: light green
     2026-09-21 戸谷様から見本の色がLINEで届き、「この画像の緑色に近い配色に」との
     ご要望を反映して、色相ごと入れ替えた。見本は 1200×630 の全画素が #77EE88 のベタ塗り。
     H=98°（黄緑・オリーブ寄り）→ H=129°（ミント寄り）へ、6つのトークンを揃えて移してある。
     🔴 --accent-inv が先方の指定色そのもの。ここは動かさない。
     🔴 --accent はこれ以上明るくできない＝白文字のAA(4.5:1)を割る。実測で #188928 が 4.52:1。
        明るさを足したい時は --accent ではなく --accent-inv（面）と --accent-line（罫）で稼ぐこと。 */
  --accent:#188928; --accent-ink:#156320; --accent-soft:#E7FBEA; --accent-line:#ACECB5;
  --accent-inv:#77EE88;                 /* 先方指定色／I案では大きな「面」（on --ink 13.52:1） */
  --accent-glow:rgba(24,137,40,.20);
  --focus:#156320;                      /* v3 の accent-line は薄すぎるので濃色を使う */
  /* 実測（2026-09-21・全数12対）：白 on accent 4.52 ／白 on accent-ink 7.40 ／accent-ink on bg 7.09 ／
     accent-ink on soft 6.83 ／ink on accent-inv 13.52 ／ink-2 on accent-inv 7.03 ／focus on bg 7.09 ／
     accent-line on bg 1.30（罫線・従来の #C4E7A6 も 1.31 で同等） */
  --f:'Manrope','Noto Sans JP',sans-serif;
  --s1:4px;--s2:8px;--s3:12px;--s4:16px;--s5:24px;--s6:32px;--s7:48px;--s8:64px;--s9:96px;
  /* 2026-09-09 角丸を落として帳票寄りに（角丸+薄枠+淡い影の箱＝AI生成サイトの定番で、警備の硬さとも合わない） */
  --r-sm:2px; --r:2px; --r-lg:0px; --r-full:2px;
  --sh-sm:none;
  --sh:none;
  --ease:cubic-bezier(.22,1,.36,1);
  --ease-out:cubic-bezier(.16,1,.3,1);
  --spring:cubic-bezier(.34,1.32,.5,1);
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{background:var(--bg);color:var(--ink);font-family:var(--f);line-height:1.8;
  -webkit-font-smoothing:antialiased;font-feature-settings:"palt" 1;
  overflow-wrap:anywhere;word-break:normal}
a{color:inherit;text-decoration:none}
.wrap{max-width:1080px;margin:0 auto;padding:0 22px}
section{position:relative}
/* sticky header の分だけアンカー着地位置を下げる */
[id]{scroll-margin-top:84px}
img,svg{display:block;max-width:100%}

/* ---------- typography ---------- */
/* 和文見出しは weight 500（v3 の 300 は 375px で日本語の線が飛ぶため） */
.h2{font-size:clamp(26px,4.2vw,40px);font-weight:500;letter-spacing:-.02em;line-height:1.28;text-wrap:balance}
.h2 b{font-weight:700}
/* 2026-09-21 和文見出しが単語の途中で折れるのを止める。
   実測：375px でも 1280px でも「立ち上げから、一｜緒にやれる人へ。」と割れていた。
   body に overflow-wrap:anywhere があり、和文は既定でどの文字でも折れるため。
   🔴 word-break:auto-phrase（文節で折る）を試したが不採用。
      「建前は、書かないことにしました。」が3行になり「た。」だけが残る孤立行を作った（実測・1280px）。
      overflow-wrap:anywhere と併用すると、入りきらない文節を任意の位置で割るため。
      割れると困る語を <span class="nw"> で固めるだけにする。これなら全ブラウザで同じ結果になる。
      実測（375px / 1280px）：見出し4本とも読点で折れ、はみ出し0件。 */
.nw{white-space:nowrap}
.eyebrow{font-size:12px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--accent);
  font-variant-numeric:tabular-nums}
.lead{font-size:clamp(15.5px,1.5vw,17px);color:var(--ink-2);line-height:1.95;text-wrap:pretty;max-width:34em}
.mut{color:var(--mut)}
.tnum{font-variant-numeric:tabular-nums}

/* ---------- buttons ---------- */
.btn{font-family:var(--f);font-weight:600;font-size:15px;cursor:pointer;border-radius:var(--r-sm);
  display:inline-flex;align-items:center;justify-content:center;gap:8px;white-space:nowrap;
  border:1px solid transparent;text-align:center;
  transition:background .25s var(--ease),color .25s var(--ease),border-color .25s var(--ease),
    box-shadow .3s var(--ease),transform .3s var(--spring)}
.btn:active{transform:translateY(0) scale(.985)}
.btn-primary{background:var(--accent);color:#fff;padding:14px 26px}
.btn-primary:hover{background:var(--accent-ink)}
.btn-outline{border-color:var(--line-2);color:var(--ink);padding:14px 24px;background:var(--surface)}
.btn-outline:hover{border-color:var(--accent);color:var(--accent-ink)}
.btn-lg{padding:17px 32px;font-size:16px;border-radius:2px}
.btn:focus-visible{outline:3px solid var(--focus);outline-offset:2px}

/* skip-to-content (WCAG 2.4.1) */
.skip{position:absolute;left:12px;top:-56px;z-index:200;background:var(--ink);color:#fff;font-weight:600;font-size:14px;
  padding:10px 18px;border-radius:var(--r-sm);transition:top .2s var(--ease)}
.skip:focus{top:12px}
.skip:focus-visible{outline:3px solid var(--focus);outline-offset:2px}

/* ---------- header 外殻 ---------- */
header{position:sticky;top:0;z-index:60;background:color-mix(in srgb,var(--bg) 92%,transparent);
  backdrop-filter:blur(12px);border-bottom:1px solid var(--line)}
.nav{display:flex;align-items:center;justify-content:space-between;height:68px;gap:20px;transition:height .28s var(--ease)}
.brand{display:flex;align-items:center;gap:10px;font-weight:700;font-size:16px;letter-spacing:-.01em;line-height:1.25}
.brand .mk{flex:none;width:32px;height:32px}
.brand .bn{display:block}
.brand .bs{display:block;font-size:10.5px;font-weight:500;color:var(--mut);letter-spacing:.02em}
.nav-links{display:flex;align-items:center;gap:26px}
.nav-links a{position:relative;font-size:14px;color:var(--mut);font-weight:500;transition:color .2s var(--ease)}
.nav-links a:hover{color:var(--ink)}
.nav-links a::after{content:"";position:absolute;left:0;right:0;bottom:-6px;height:1.5px;background:var(--accent);
  transform:scaleX(0);transform-origin:left center;transition:transform .28s var(--ease)}
.nav-links a:hover::after,.nav-links a:focus-visible::after{transform:scaleX(1)}
header.shrink{background:color-mix(in srgb,var(--bg) 96%,transparent);box-shadow:0 1px 0 rgba(12,10,9,.05)}
header.shrink .nav{height:58px}

/* ---------- 会社概要 ---------- */
.dl{margin-top:var(--s6);border-top:2px solid var(--ink);border-bottom:3px double var(--line-2);
  max-width:820px}
.dl .row{display:grid;grid-template-columns:180px 1fr;gap:20px;padding:18px 26px;border-bottom:1px solid var(--line)}
.dl .row:last-child{border-bottom:none}
.dl dt{font-size:13.5px;font-weight:700;color:var(--mut);letter-spacing:.02em}
.dl dd{font-size:15px;color:var(--ink);line-height:1.8;font-variant-numeric:tabular-nums}
.dl dd .sub{display:block;margin-top:4px;font-size:12.5px;color:var(--mut);font-weight:500}
/* 未確定を示すチップ（v3 の .tbd を踏襲）。ダミー値は絶対に置かない */
.tbd{font-size:12.5px;font-weight:600;color:var(--mut);letter-spacing:.02em;display:inline-block;
  border:1px dashed var(--line-2);border-radius:var(--r-full);padding:5px 13px;background:var(--bg-alt)}

/* ---------- グループ紹介 ---------- */
.group{margin-top:var(--s6);background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);
  padding:30px 28px;box-shadow:var(--sh-sm);max-width:760px}
.group p{font-size:15px;line-height:1.95;color:var(--ink-2);text-wrap:pretty}
.group p+p{margin-top:1.1em}

/* ---------- 認定証（認定後版のみ） ---------- */
.cert{margin-top:var(--s6);display:grid;grid-template-columns:260px 1fr;gap:clamp(20px,3vw,40px);align-items:center;
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);padding:28px;box-shadow:var(--sh-sm);
  max-width:820px}
.cert .no{font-size:clamp(18px,2.4vw,24px);font-weight:700;letter-spacing:.01em;font-variant-numeric:tabular-nums}
.cert .k{font-size:13px;color:var(--mut);font-weight:600;letter-spacing:.04em}

/* ---------- 画像プレースホルダ ---------- */
.ph{overflow:hidden;background:var(--accent-soft);border:1px solid var(--accent-line)}
.ph img{width:100%;height:auto;aspect-ratio:var(--ar,4/3);object-fit:cover}
.ph-note{padding:8px 12px;font-size:11.5px;color:var(--mut);background:var(--surface);
  border-top:1px solid var(--accent-line);line-height:1.6}

/* ---------- お問い合わせ（ダーク面＋フォーム） ---------- */
.final{background:var(--ink);color:#fff;border-radius:var(--r-lg);padding:clamp(28px,5vw,60px);margin-top:var(--s5)}
.final h2{font-weight:500;font-size:clamp(24px,3.6vw,38px);letter-spacing:-.02em;line-height:1.3;text-wrap:balance}
.final h2 b{font-weight:700}
.final .ac{color:var(--accent-inv)}
.final .flead{margin-top:14px;max-width:46ch;color:#D6D3D1;font-size:15px;line-height:1.9}
/* フォーム直上の打消し（警備業法4条・認定前は依頼と見積りを受けない旨を明示する）
   🔴 認定取得後もこの行は残さない＝認定が下りたら削除する。全案共通。 */
.fnote{margin-top:16px;padding:12px 14px;border:1px solid #44403C;background:#1C1917;
  font-size:13px;color:#D6D3D1;line-height:1.8;max-width:640px}
form{margin-top:var(--s6);display:grid;gap:16px;max-width:640px}
/* 送信成功で site.js が form.hidden=true にする。上の display:grid がブラウザ既定の [hidden] より強く、
   フォームが「送信中…」のまま残っていた（2026-10-13 判明）＝hidden の時だけ消す */
form[hidden]{display:none}
.fld{display:grid;gap:7px}
.fld label{font-size:13.5px;font-weight:600;color:#E7E5E4}
.fld .rq{color:var(--accent-inv);font-weight:700;margin-left:4px}
.fld input[type=text],.fld input[type=email],.fld input[type=tel],.fld textarea{
  font-family:var(--f);font-size:15px;line-height:1.7;color:var(--ink);background:#fff;
  border:1px solid var(--line-2);border-radius:var(--r-sm);padding:12px 14px;width:100%}
.fld textarea{min-height:130px;resize:vertical}
.fld input:focus-visible,.fld textarea:focus-visible{outline:3px solid var(--accent-inv);outline-offset:2px}
.radios{display:flex;gap:10px;flex-wrap:wrap}
.radios label{display:inline-flex;align-items:center;gap:8px;background:#1C1917;border:1px solid #44403C;
  border-radius:var(--r-full);padding:9px 16px;font-size:14px;font-weight:500;color:#E7E5E4;cursor:pointer;
  transition:border-color .2s var(--ease),background .2s var(--ease)}
.radios label:hover{border-color:var(--accent-inv)}
.radios input{accent-color:var(--accent-inv);width:16px;height:16px}
.radios input:focus-visible{outline:3px solid var(--accent-inv);outline-offset:2px}
.consent{display:flex;gap:10px;align-items:flex-start;font-size:13.5px;color:#E7E5E4;line-height:1.8}
.consent input{margin-top:5px;width:17px;height:17px;flex:none;accent-color:var(--accent-inv)}
.consent input:focus-visible{outline:3px solid var(--accent-inv);outline-offset:2px}
.consent a{color:var(--accent-inv);text-decoration:underline;text-underline-offset:3px}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.fmsg{margin-top:4px;font-size:14px;line-height:1.8;color:var(--accent-inv);font-weight:600}
.fmsg.err{color:#FF8A80}  /* 送信失敗。成功の緑と分ける。#0C0A09 の上で 8.65:1 */
.privacy{margin-top:var(--s5);max-width:640px}
.privacy summary{cursor:pointer;list-style:none;font-size:13.5px;font-weight:600;color:#D6D3D1;
  display:inline-flex;align-items:center;gap:8px;padding:6px 0}
.privacy summary::-webkit-details-marker{display:none}
.privacy summary .ico{width:20px;height:20px;border-radius:50%;border:1px solid #57534E;display:grid;place-items:center;
  color:var(--accent-inv);transition:transform .25s var(--ease);flex:none}
.privacy[open] summary .ico{transform:rotate(45deg)}
.privacy .body{margin-top:12px;font-size:12.5px;color:#A8A29E;line-height:1.95}
.privacy .body p+p{margin-top:.9em}

/* ---------- footer ---------- */
footer{border-top:1px solid var(--line);padding:var(--s6) 0 var(--s5);margin-top:var(--s7)}
.foot-grid{display:grid;grid-template-columns:1.5fr 1fr;gap:32px;align-items:start}
.foot-brand p{margin-top:14px;font-size:13px;color:var(--mut);line-height:1.9;max-width:36ch}
.foot-col .foot-h{font-size:11.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--faint)}
.foot-col a{display:block;margin-top:11px;font-size:14px;color:var(--ink-2)}
.foot-col a:hover{color:var(--accent-ink)}
.legal{margin-top:var(--s6);padding-top:var(--s4);border-top:1px solid var(--line);font-size:12px;
  color:var(--faint);line-height:1.9;display:flex;justify-content:space-between;flex-wrap:wrap;gap:8px}

/* ---------- ダーク面（.final）の白ボタン・.tbd（各案のインラインstyleを集約） ---------- */
.final .btn-primary{background:#fff;color:var(--ink);justify-self:start}
.final .btn-primary:hover{background:var(--accent-inv);color:var(--ink)}
.final .tbd{background:#1C1917;border-color:#57534E;color:#D6D3D1}

/* ---------- 視覚非表示テキスト（スクリーンリーダー専用） ---------- */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* ---------- 共通レイアウト（a/b/c/d で同一定義だったものを昇格） ---------- */
.sec-alt{background:var(--bg-alt)}
.cards2{margin-top:var(--s6);display:grid;grid-template-columns:1fr 1fr;gap:16px}

/* ---------- モバイル固定CTAバー ---------- */
.mcta{position:fixed;left:0;right:0;bottom:0;z-index:80;display:none;gap:8px;
  padding:10px 14px calc(10px + env(safe-area-inset-bottom));
  background:color-mix(in srgb,var(--bg) 94%,transparent);backdrop-filter:blur(12px);border-top:1px solid var(--line);
  transform:translateY(110%);visibility:hidden;
  transition:transform .3s var(--ease),visibility 0s .3s}  /* 隠れている間はフォーカス不能 */
.mcta.on{transform:none;visibility:visible;transition:transform .3s var(--ease)}
.mcta .btn{flex:1;padding:13px 10px;font-size:14.5px}

/* ---------- motion ---------- */
/* JSが動く環境でだけ隠す。JS失敗・無効時は最初から全部見える（プログレッシブエンハンスメント） */
.js .reveal{opacity:0;translate:0 16px;transition:opacity .7s var(--ease-out),translate .7s var(--ease-out);
  will-change:opacity,translate}
.js .reveal.in{opacity:1;translate:none}
.js .hero-anim{opacity:0;translate:0 12px;transition:opacity .6s var(--ease-out),translate .6s var(--ease-out)}
.js .hero.ready .hero-anim{opacity:1;translate:none}

/* ---------- 統一フォーカスリング ---------- */
a:focus-visible,summary:focus-visible,button:focus-visible{outline:3px solid var(--focus);outline-offset:3px;border-radius:6px}
.final a:focus-visible,.privacy summary:focus-visible,.final button:focus-visible{outline-color:var(--accent-inv)}

/* ---------- responsive ---------- */
@media(max-width:900px){
  footer{padding-bottom:calc(var(--s5) + 68px)}  /* モバイル固定CTAバーの高さぶん */
  .cards2{grid-template-columns:1fr}
  .cert{grid-template-columns:1fr}
  .foot-grid{grid-template-columns:1fr;gap:28px}
  .nav-links{display:none}
  .dl .row{grid-template-columns:1fr;gap:6px;padding:16px 20px}
  .mcta{display:flex}
}
@media(prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
  .reveal,.hero-anim,.js .reveal,.js .hero-anim{opacity:1!important;transform:none!important;translate:none!important}
  .mcta{transform:none!important}
  html{scroll-behavior:auto}
}