/* =====================================================================
   ファクトリー修繕テック — 共通トークン & 部品
   工場修繕に特化したサービスサイト（堅実・信頼のブルー/ネイビー）
   ===================================================================== */

:root{
  /* ブルー/ネイビー（信頼） */
  --navy-900:#0b1b34;
  --navy-800:#102a4d;
  --navy-700:#163a6b;
  --navy-600:#1d4d8c;
  --blue-600:#1763c7;   /* primary */
  --blue-500:#2a7de1;
  --blue-300:#8fbdf2;
  --blue-100:#dbe8fa;
  --blue-050:#eef4fc;   /* tint bg */
  /* 差し色（CV用・温かいオレンジ） */
  --cta:#f26a1b;
  --cta-600:#e05c0f;
  /* 中立色 */
  --ink:#142640;
  --muted:#5d6b7e;
  --line:#dde4ee;
  --bg:#ffffff;
  --bg-soft:#f4f7fb;
  --white:#ffffff;

  --maxw:1200px;
  --radius:4px;
  --shadow-sm:0 1px 2px rgba(16,42,77,.08), 0 2px 8px rgba(16,42,77,.06);
  --shadow-md:0 6px 24px rgba(16,42,77,.12);
  --shadow-lg:0 18px 50px rgba(11,27,52,.20);

  --sans:"Noto Sans JP", system-ui, -apple-system, "Hiragino Kaku Gothic ProN", "Yu Gothic", Meiryo, sans-serif;
  --disp:"Oswald", "Noto Sans JP", sans-serif;
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family:var(--sans);
  color:var(--ink);
  background:var(--bg);
  line-height:1.75;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
h1,h2,h3,h4,p{margin:0}
ul{margin:0;padding:0;list-style:none}

.container{width:100%;max-width:var(--maxw);margin-inline:auto;padding-inline:24px}

/* ---- 写真プレースホルダー（差し替え前提） ---- */
.ph{
  position:relative;
  background:
    repeating-linear-gradient(135deg,
      rgba(22,58,107,.045) 0 14px,
      rgba(22,58,107,.085) 14px 28px),
    var(--blue-050);
  color:var(--navy-700);
  display:flex;align-items:center;justify-content:center;
  overflow:hidden;
}
.ph::after{
  content:attr(data-label);
  font-family:ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  font-size:12px;letter-spacing:.04em;
  color:rgba(22,58,107,.6);
  background:rgba(255,255,255,.72);
  padding:5px 11px;border-radius:3px;
  border:1px solid rgba(22,58,107,.16);
  text-align:center;line-height:1.5;max-width:80%;
}
.ph.dark{
  background:
    repeating-linear-gradient(135deg,
      rgba(255,255,255,.05) 0 14px,
      rgba(255,255,255,.09) 14px 28px),
    var(--navy-800);
}
.ph.dark::after{color:rgba(255,255,255,.7);background:rgba(10,22,42,.55);border-color:rgba(255,255,255,.18)}

/* ---- ボタン ---- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  font-weight:700;font-size:16px;line-height:1.2;
  padding:16px 28px;border-radius:var(--radius);
  border:2px solid transparent;cursor:pointer;
  transition:transform .12s ease, box-shadow .15s ease, background .15s ease, color .15s ease;
  white-space:nowrap;
}
.btn:active{transform:translateY(1px)}
.btn-cta{background:var(--cta);color:#fff;box-shadow:0 6px 16px rgba(242,106,27,.34)}
.btn-cta:hover{background:var(--cta-600);box-shadow:0 10px 22px rgba(242,106,27,.4)}
.btn-primary{background:var(--blue-600);color:#fff;box-shadow:0 6px 16px rgba(23,99,199,.28)}
.btn-primary:hover{background:var(--navy-600)}
.btn-line{background:#fff;color:var(--navy-700);border-color:var(--line)}
.btn-line:hover{border-color:var(--blue-300);background:var(--blue-050)}
.btn-ghost{background:rgba(255,255,255,.08);color:#fff;border-color:rgba(255,255,255,.4)}
.btn-ghost:hover{background:rgba(255,255,255,.16)}
.btn-lg{font-size:18px;padding:20px 36px}
.btn-block{width:100%}

/* ---- 共通の小物 ---- */
.eyebrow{
  font-family:var(--disp);font-weight:600;letter-spacing:.18em;
  text-transform:uppercase;font-size:14px;color:var(--blue-600);
}
.jp-label{font-weight:700;letter-spacing:.02em}
.num{font-family:var(--disp);font-weight:700;line-height:.9}

/* スクロール演出 */
.reveal{opacity:0;transform:translateY(22px);transition:opacity .7s ease, transform .7s cubic-bezier(.2,.7,.3,1)}
.reveal.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none;transition:none}}

/* ============ トップバー：モバイル対応（全ページ共通） ============ */
@media (max-width:1024px){
  /* 長いエリア紹介文は隠し、受付情報のみ表示 */
  .topbar .areas{display:none !important}
  .topbar .container{justify-content:center !important;height:auto !important;min-height:38px;padding-block:7px}
  .topbar .meta span{white-space:nowrap}
}
@media (max-width:560px){
  /* スマホではトップバーごと非表示（情報はヘッダーのTEL/CTAに集約） */
  .topbar{display:none !important}
}

/* ============ ヘッダー：スマホでCTAボタンを隠し社名見切れを防止（全ページ共通） ============ */
@media (max-width:768px){
  /* 社名＋ハンバーガーのみ表示。CTAはメニュー内と下部固定バーに残る */
  header .head-cta{display:none !important}
}