/* jp-refined 機能プリミティブ v1.1 — 全て tokens.css の契約変数(v1.1)を消費する。
   生の色は書かない(transparent / currentColor のみ可)。
   v1.1 (2026-07-19): QC Medium-1対応=プリセット別直書きを機能色変数
   (--c-error / --c-field-bg / --c-field-ink / --c-ink-invert)参照へ全置換 */
*{box-sizing:border-box;margin:0;padding:0}
.sp-only{display:none}

body{
  /* 本文の数字は等高数字(lining figures)で組む。--font-num-ui 未定義のプリセットは
     従来どおり --font-en へフォールバックする(後方互換)。
     根拠: P4工務店でGeorgiaのオールドスタイル数字により「8月22日」が「8月aa日」と
     評価者10人中3人に誤読され、信頼感が実際に1点下がった(2026-07-20実測)。
     装飾用の大サイズ数字は各ページで --font-en を明示指定して従来の格を残す。
     記録: results/impl/2026-07-19-05-jp-refined-p4/eval-5panel-p4.md */
  font-family:var(--font-num-ui,var(--font-en)),var(--font-jp);
  font-variant-numeric:lining-nums;
  /* 和文の仮名を字幅に応じて詰める(プロポーショナルメトリクス)。
     根拠: 模写解析(results/research/2026-07-21-clone-study-shichiken/)。
     同じ文字数を同じ幅に流したのに原物4行・再現5行になった原因が
     CSSでなくフォントの仮名送りだった(相手の書体は仮名0.849em・
     システムフォントは1.0em)。paltを入れて行数のズレ6要素→0、
     再現一致率 80.3%→89.5%。**和文サイトでは既定でONにする。** */
  font-feature-settings:"palt" 1;
  color:var(--c-ink);
  background:var(--c-bg);
  font-size:var(--fs-body);
  line-height:var(--lh-body);
  letter-spacing:var(--ls-body);
  -webkit-font-smoothing:antialiased;
}
/* 暗色プリセット(shigyo-brand/mfg-brand)ではinkが地色側のため本文色を反転 */
[data-preset="shigyo-brand"] body,[data-preset="mfg-brand"] body{color:var(--c-ink-invert)}

h1,h2{
  font-family:var(--font-display),var(--font-jp);
  line-height:var(--lh-head);
  letter-spacing:var(--ls-head);
  font-weight:var(--fw-bold);
}
h1{font-size:30px;margin-bottom:14px}
h2{font-size:21px;margin-bottom:16px}

.p-main{max-width:var(--container-narrow);margin:0 auto;padding:0 var(--pad-x)}
.p-section{padding:var(--section-gap) 0 0}
.p-note{font-size:var(--fs-note);color:var(--c-ink-sub);max-width:38em}
.p-spacer{height:60vh;display:flex;align-items:center;font-size:var(--fs-note);color:var(--c-ink-sub)}

/* ---------- ③ ナビ ---------- */
.p-nav{position:sticky;top:0;z-index:20;background:var(--c-bg);border-bottom:1px solid var(--c-line)}
[data-preset="shigyo-brand"] .p-nav,[data-preset="mfg-brand"] .p-nav{background:var(--c-ink)}
.p-nav-in{max-width:var(--container);margin:0 auto;padding:0 var(--pad-x);
  height:64px;display:flex;align-items:center;justify-content:space-between;gap:18px}
.p-brand{display:flex;align-items:baseline;gap:10px;font-weight:var(--fw-bold);
  font-size:17px;color:inherit;text-decoration:none}
.p-brand-en{font-family:var(--font-en);font-size:10px;letter-spacing:var(--ls-label);
  text-transform:uppercase;color:var(--c-brand)}
.p-nav-links ul{display:flex;gap:28px;list-style:none;font-size:14px;align-items:center}
.p-nav-links a{color:inherit;text-decoration:none}
.p-nav-links a:hover{color:var(--c-brand)}
.p-nav-cta{border:1px solid var(--c-brand);color:var(--c-brand);
  border-radius:var(--radius-pill);padding:9px 20px;font-weight:var(--fw-bold)}
.p-burger{display:none}

/* ---------- ① フォーム ---------- */
.p-form{max-width:480px;background:var(--c-surface);border:1px solid var(--c-line);
  border-radius:var(--radius-m);box-shadow:var(--shadow-card);padding:28px 26px}
[data-preset="shigyo-brand"] .p-form{color:var(--c-ink)}
[data-preset="mfg-brand"] .p-form{color:var(--c-ink-invert)}
.p-field{margin-bottom:16px}
.p-field label{display:flex;align-items:center;gap:8px;font-size:13px;
  font-weight:var(--fw-bold);margin-bottom:7px}
.p-req{font-style:normal;font-size:10px;font-weight:var(--fw-bold);letter-spacing:.08em;
  color:var(--c-bg);background:var(--c-ink);padding:2px 7px;border-radius:var(--radius-s)}
[data-preset="shigyo-brand"] .p-req{color:var(--c-ink-invert);background:var(--c-ink)}
.p-req-opt{color:var(--c-ink-sub);background:transparent;border:1px solid var(--c-line)}
.p-field input[type="text"],.p-field input[type="tel"],.p-field select{
  width:100%;font:inherit;font-size:16px;   /* 16px未満はiOSでズームが走るため固定 */
  color:var(--c-field-ink);background:var(--c-field-bg);
  border:1px solid var(--c-line);border-radius:var(--radius-s);padding:12px 14px}
.p-field input:focus-visible,.p-field select:focus-visible{
  outline:2px solid var(--c-brand);outline-offset:1px;border-color:var(--c-brand)}
.p-field input[aria-invalid="true"]{border-color:var(--c-error)}
.p-error{font-size:12px;color:var(--c-error);margin-top:6px;min-height:0}
.p-field-check{display:grid;grid-template-columns:auto 1fr;gap:4px 10px;align-items:center}
.p-field-check label{margin:0;font-weight:var(--fw-base)}
.p-field-check .p-error{grid-column:1/-1}
.p-field-check input{width:18px;height:18px;accent-color:var(--c-brand)}
.p-submit{display:block;width:100%;font:inherit;font-size:15px;font-weight:var(--fw-bold);
  letter-spacing:var(--ls-body);color:var(--c-cta-ink);background:var(--c-cta-bg);
  border:1px solid var(--c-brand);border-radius:var(--radius-s);
  padding:15px 0;margin-top:6px;cursor:pointer}
.p-submit:hover{filter:brightness(.96)}
.p-form-done{font-size:13px;color:var(--c-brand-deep);margin-top:12px}
[data-preset="mfg-brand"] .p-form-done{color:var(--c-brand)}

/* ---------- プリセット切替(デモ専用UI) ---------- */
.p-preset-row{display:flex;gap:8px;flex-wrap:wrap;margin-top:14px}
.p-preset-row button{font:inherit;font-size:12.5px;padding:7px 13px;cursor:pointer;
  border:1px solid var(--c-line);background:var(--c-surface);color:inherit;border-radius:var(--radius-s)}
.p-preset-row button.on{border-color:var(--c-brand);color:var(--c-brand);font-weight:var(--fw-bold)}
[data-preset="shigyo-brand"] .p-preset-row button{color:var(--c-ink)}   /* 面はsurface=白系のためink */
[data-preset="mfg-brand"] .p-preset-row button{color:var(--c-ink-invert)} /* 面は半透明=暗のため反転 */

/* ---------- ② SP下部固定バー ---------- */
.p-spbar{display:none}

@media (max-width:768px){
  .sp-only{display:inline}
  .p-nav-in{height:58px}

  /* ナビ→ハンバーガー */
  .p-burger{display:inline-flex;align-items:center;gap:8px;font:inherit;font-size:12px;
    background:none;border:1px solid var(--c-line);border-radius:var(--radius-s);
    color:inherit;padding:8px 12px;cursor:pointer}
  .p-burger-bar{position:relative;width:16px;height:2px;background:currentColor;display:block}
  .p-burger-bar::before,.p-burger-bar::after{content:"";position:absolute;left:0;width:16px;height:2px;
    background:currentColor}
  .p-burger-bar::before{top:-5px}
  .p-burger-bar::after{top:5px}
  .p-nav-links{position:fixed;inset:58px 0 auto 0;z-index:19;background:var(--c-bg);
    border-bottom:1px solid var(--c-line);box-shadow:var(--shadow-card);
    transform:translateY(-8px);opacity:0;visibility:hidden;transition:.18s ease}
  [data-preset="shigyo-brand"] .p-nav-links,[data-preset="mfg-brand"] .p-nav-links{background:var(--c-ink)}
  .p-nav-links.is-open{transform:none;opacity:1;visibility:visible}
  .p-nav-links ul{flex-direction:column;align-items:stretch;gap:0;padding:8px var(--pad-x) 16px}
  .p-nav-links li{border-bottom:1px solid var(--c-line)}
  .p-nav-links li:last-child{border-bottom:0;padding-top:12px}
  .p-nav-links a{display:block;padding:14px 2px}
  .p-nav-cta{text-align:center}

  /* SP下部固定バー */
  .p-spbar{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:30;gap:1px;
    background:var(--c-brand-deep);padding:10px 12px calc(10px + env(safe-area-inset-bottom));
    transform:translateY(110%);transition:transform .25s ease}
  .p-spbar.is-visible{transform:none}
  .p-spbar a{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;
    text-decoration:none;padding:10px 0;border-radius:var(--radius-s)}
  .p-spbar-tel{background:var(--c-ink-invert);color:var(--c-brand-deep)}
  .p-spbar-tel b{font-size:15.5px;letter-spacing:.02em}
  .p-spbar-tel span{font-size:9.5px;font-weight:var(--fw-mid)}
  .p-spbar-form{background:var(--c-cta-bg);color:var(--c-cta-ink);
    font-size:13px;font-weight:var(--fw-bold)}
  .p-spbar-form span{font-size:9.5px;font-weight:var(--fw-mid)}
  body{padding-bottom:86px}   /* 固定バーの逃げ(バー非表示時も確保して跳ねを防ぐ) */
}