/* =========================================================
   YOUR PARTNER — Design System / Foundations
   by CARVANCL
   ---------------------------------------------------------
   デザイントークンの単一の真実（Single Source of Truth）。
   すべてのページCSS（lp.css / company.css）はここを継承する。
   このファイルを最初に読み込むこと。
   ========================================================= */

:root{
  /* ---- Brand colors ---- */
  --brand:#2E3192;        /* インディゴ：主役。見出し・線・ボタン */
  --brand-deep:#20235F;   /* 濃インディゴ：反転面・hover */
  --brand-tint:#E7E9F4;   /* 淡インディゴ：背景面・アイコン地 */
  --accent:#FE9DA0;       /* コーラル：アクセント（下線・ドット・帯） */
  --accent-ink:#D9787B;   /* コーラル濃：小さな文字色 */

  /* ---- Neutrals ---- */
  --bg:#F7F8FB;           /* ページ地 */
  --surface:#ffffff;      /* カード地 */
  --ink:#3E3E3E;          /* 本文 */
  --ink-strong:#2A2A33;   /* 見出し */
  --line:#E6E8F1;         /* 罫線・境界 */
  --muted:#6f6f78;        /* 補足テキスト */

  /* ---- Typography ---- */
  --serif:"Noto Serif JP","Hiragino Mincho ProN","YuMincho",serif;  /* 見出し（明朝） */
  --sans:"Noto Sans JP","Hiragino Kaku Gothic ProN",sans-serif;     /* 本文（ゴシック） */
  --geo:"Jost",var(--sans);                                         /* 英字・番号（幾何サンセリフ） */

  /* Type scale（clamp で流体的に） */
  --fs-hero:clamp(34px,5.6vw,60px);
  --fs-h2:clamp(24px,3.4vw,38px);
  --fs-h3:19px;
  --fs-lead:clamp(14px,1.5vw,16px);
  --fs-body:15px;
  --fs-small:13px;
  --fs-eyebrow:12px;

  /* ---- Spacing & layout ---- */
  --maxw:1120px;
  --gutter:clamp(24px,6vw,56px);
  --section-y:clamp(88px,13vw,150px);
  --grid-gap:clamp(20px,2.6vw,34px);

  /* ---- Radius ---- */
  --r-sm:8px;
  --r-md:14px;
  --r-lg:16px;
  --r-pill:34px;
  --r-circle:50%;

  /* ---- Shadow ---- */
  --shadow-card:0 14px 40px rgba(32,35,95,.05);
  --shadow-hover:0 22px 48px rgba(32,35,95,.10);
  --shadow-float:0 30px 70px rgba(32,35,95,.14);

  /* ---- Motion ---- */
  --ease:cubic-bezier(.2,.7,.2,1);
}

/* ---------- Reset / base ---------- */
*{box-sizing:border-box; margin:0; padding:0;}
html{scroll-behavior:smooth;}
body{font-family:var(--sans); color:var(--ink); background:var(--bg);
  line-height:2; font-weight:400; -webkit-font-smoothing:antialiased; overflow-x:hidden;}
img{display:block; max-width:100%;}
svg{display:block;}
a{color:inherit; text-decoration:none;}

/* ---------- Layout helpers ---------- */
.wrap{max-width:var(--maxw); margin:0 auto; padding:0 var(--gutter);}
section{padding:var(--section-y) 0;}

/* ---------- Headings ---------- */
h1,h2,h3{font-family:var(--serif); color:var(--ink-strong); font-weight:600;
  letter-spacing:.03em; line-height:1.55;}

/* ---------- Eyebrow（セクションの英字小見出し） ---------- */
.eyebrow{font-family:var(--geo); font-size:var(--fs-eyebrow); letter-spacing:.26em; color:var(--brand);
  text-transform:uppercase; display:inline-flex; align-items:center; gap:10px; font-weight:500; margin-bottom:28px;}
.eyebrow::before{content:""; width:7px; height:7px; border-radius:50%; background:var(--accent); flex:0 0 auto;}
.eyebrow.center{justify-content:center;}
.eyebrow.on-dark{color:rgba(255,255,255,.92);}

/* ---------- Lead text ---------- */
.lead{font-size:var(--fs-lead); color:#6a6a72; font-weight:400; line-height:2; max-width:30em; text-wrap:pretty;}

/* ---------- Icon box ---------- */
.ic svg{width:100%; height:100%;}
.ic img{width:100%; height:100%; display:block; object-fit:contain;}

/* ---------- Button ---------- */
.btn{display:inline-flex; align-items:center; gap:10px; font-family:var(--sans); font-size:14px;
  font-weight:500; padding:15px 34px; border-radius:var(--r-pill); border:1.5px solid var(--brand);
  transition:transform .18s, box-shadow .18s, background .18s, color .18s; cursor:pointer; white-space:nowrap;}
.btn .ar{font-family:var(--geo); transition:transform .2s;}
.btn:hover .ar{transform:translateX(4px);}
.btn.primary{background:var(--brand); color:#fff;}
.btn.primary:hover{background:var(--brand-deep); box-shadow:0 10px 28px rgba(46,49,146,.28); transform:translateY(-2px);}
.btn.ghost{background:transparent; color:var(--brand);}
.btn.ghost:hover{background:var(--brand-tint);}
.btn.on-dark{background:#fff; color:var(--brand); border-color:#fff;}
.btn.on-dark:hover{box-shadow:0 0 0 5px rgba(255,255,255,.16); transform:translateY(-2px);}