/* Ann Design System — design tokens (colors, type, layout).
   Ported from the Claude Design "Ann Design System" bundle. */
/* フォントは公式サイト側(base.css等)で読み込むNoto Sans JP + Montserratを使用するため、LP独自のGoogle Fonts importは削除 */

.lp-scope{
  color-scheme:light;

  /* --- Brand accent (sky blue) --- */
  --blue-50:#eaf8fe;
  --blue-100:#c9edfc;
  --blue-200:#9fdff9;
  --blue-300:#6bcef4;
  --blue-400:#29bced;
  --blue-500:#12a7db;
  --blue-600:#0d8bbb;
  --blue-700:#0d6f95;

  /* --- Neutral / grayscale ramp --- */
  --white:#ffffff;
  --gray-25:#fbfcfd;
  --gray-50:#f5f7f9;
  --gray-100:#eceff2;
  --gray-200:#dde2e7;
  --gray-300:#c4ccd3;
  --gray-400:#9aa4ad;
  --gray-500:#6f7a83;
  --gray-600:#515b63;
  --gray-700:#3a424a;
  --gray-800:#272d33;
  --gray-900:#171b1f;
  --black:#0f1216;

  /* --- Warm support tint --- */
  --sand-50:#fbf8f4;
  --sand-100:#f3ede4;

  /* --- Semantic: text --- */
  --text-strong:var(--gray-900);
  --text-body:var(--gray-700);
  --text-muted:var(--gray-600);
  --text-faint:var(--gray-600);
  --text-on-accent:var(--white);
  --text-link:var(--blue-700);
  --text-link-hover:var(--gray-900);

  /* --- Semantic: surfaces --- */
  --surface-page:var(--white);
  --surface-subtle:var(--gray-50);
  --surface-card:var(--white);
  --surface-sunken:var(--gray-100);
  --surface-accent-soft:var(--blue-50);
  --surface-accent:var(--blue-400);
  --surface-inverse:var(--gray-900);

  /* --- Semantic: borders --- */
  --border-subtle:var(--gray-200);
  --border-default:var(--gray-300);
  --border-strong:var(--gray-400);
  --border-accent:var(--blue-400);

  /* --- Feedback --- */
  --success:#3aa76d;
  --success-soft:#e6f5ed;
  --warning:#e0a23a;
  --warning-soft:#fbf1de;
  --danger:#dd5b57;
  --danger-soft:#fbe9e8;

  /* --- Focus ring --- */
  --ring:color-mix(in srgb, var(--blue-400) 55%, transparent);

  /* --- Type families --- */
  --font-display:'Noto Sans JP','メイリオ',Meiryo,Osaka,'ＭＳ Ｐゴシック','MS PGothic',sans-serif;
  --font-body:'Noto Sans JP','メイリオ',Meiryo,Osaka,'ＭＳ Ｐゴシック','MS PGothic',sans-serif;
  --font-latin:'Montserrat','Noto Sans JP',sans-serif;

  /* --- Weights --- */
  --fw-regular:400;
  --fw-medium:500;
  --fw-bold:700;
  --fw-black:900;

  /* --- Type scale --- */
  --fs-display:clamp(33.6px,4vw,54.4px);
  --fs-h1:clamp(30.4px,3.2vw,40px);
  --fs-h2:clamp(25.6px,2.6vw,32px);
  --fs-h3:24px;
  --fs-h4:20px;
  --fs-lead:18px;
  --fs-body:16px;
  --fs-sm:14px;
  --fs-xs:12px;

  /* --- Type scale: 固定サイズのテキスト(価格・数字・チャットUI等)---
     ここも他の--fs-*と同様、値を変えれば該当箇所すべてに反映される。 */
  --fs-price-main:64px;   /* 価格の大きな数字 (.price-num) */
  --fs-price-sub:34px;    /* プラン価格 (.plan-price) */
  --fs-stat-num:26px;     /* 実績の数字 (.stat-num) */
  --fs-feature-num:40px;  /* 装飾の連番 (.feature-num) */
  --fs-step-no:34px;      /* ステップ番号 (.step-no) */
  --fs-chat-title:14px;   /* チャットデモのタイトル (.hero-chat-title) */
  --fs-chat-sub:11px;     /* チャットデモのサブ (.hero-chat-sub) */
  --fs-toast:14px;        /* トースト通知 (.toast) */
  --fs-header-brand:14px;    /* ヘッダーのサービス名・通常 (.header-service-name) */
  --fs-header-brand-lg:16px; /* ヘッダーのサービス名・PC幅(メニューの--fs-smより大きめ) (.header-service-name) */
  --fs-ba-head:20px;      /* Before/After「相談前/相談後」ラベル・PC幅 (.ba-head) */
  --fs-ba-cell:16px;      /* Before/Afterカード内テキスト・PC/SP共通 (.ba-cell) */
  --fs-reco-pc:17px;      /* こんな方におすすめリスト・PC幅のみ (.reco-grid li) */
  --fs-faq-q-pc:18px;     /* FAQ質問文・PC幅のみ (.faq-item summary) */
  --fs-faq-a-pc:17px;     /* FAQ回答文・PC幅のみ (.faq-answer) */
  --fs-founder-label:20px; /* 担当コンサルタント紹介の小見出し・PC/SP共通 (.founder-label) */
  --fs-founder-body:16px;  /* 担当コンサルタント紹介の本文・PC/SP共通 (.founder-card p) */
  --fs-concept-answer:24px;  /* コンセプトカードの答え見出し・PC (.concept-answer h3) */
  --fs-concept-answer-sp:24px; /* 同・スマホ(01/02見出し20pxより大きく主役に) (.concept-answer h3) */
  --fs-concept-num:40px;     /* コンセプトカードの連番 01/02 (.concept-num) */
  --fs-concept-caption:clamp(24px,4vw,41.6px); /* 写真上のキャッチコピー (.concept-photo-caption) */

  /* --- Line heights --- */
  --lh-tight:1.5;
  --lh-snug:1.45;
  --lh-body:1.75;
  --lh-loose:2;

  /* --- Letter spacing --- */
  --ls-display:0.01em;
  --ls-heading:0.02em;
  --ls-body:0.02em;
  --ls-label:0.08em;

  /* --- Spacing (4px base) --- */
  --space-1:4px;
  --space-2:8px;
  --space-3:12px;
  --space-4:16px;
  --space-5:24px;
  --space-6:32px;
  --space-7:48px;
  --space-8:64px;
  --space-9:96px;
  --space-10:128px;

  /* --- Radius --- */
  --radius-sm:8px;
  --radius-md:12px;
  --radius-lg:18px;
  --radius-xl:26px;
  --radius-pill:999px;

  /* --- Shadows --- */
  --shadow-xs:0 1px 2px rgba(23,27,31,.06);
  --shadow-sm:0 2px 8px rgba(23,27,31,.06);
  --shadow-md:0 8px 24px rgba(23,27,31,.08);
  --shadow-lg:0 18px 48px rgba(23,27,31,.10);
  --shadow-accent:0 10px 28px rgba(41,188,237,.28);

  /* --- Motion --- */
  --ease-out:cubic-bezier(.22,.61,.36,1);
  --dur-fast:120ms;
  --dur:200ms;
  --dur-slow:360ms;

  /* --- Layout --- */
  --container:1120px;
  --container-narrow:760px;
  --focus-width:3px;

  /* --- Breakpoints (referenced in comments; media queries hardcode px) --- */
  /* mobile: <768px / tablet: 768–1023px / pc: >=1024px */
}

/* --- Mobile type-size bump ---
   fs-sm / fs-xs are used widely for card body copy and captions.
   On phones these read as too small; nudge them up a notch. */
@media (max-width:767.98px){
  .lp-scope{
    --fs-sm:15px;   /* 14px -> 15px */
    --fs-xs:13px;   /* 12px -> 13px */
    --lh-snug:1.5;
  }
}

.lp-scope *,.lp-scope *::before,.lp-scope *::after{box-sizing:border-box}

.lp-scope html{
  scroll-padding-top:76px;
}

.lp-scope{
  margin:0;
  font-family:var(--font-body);
  font-size:var(--fs-body);
  line-height:var(--lh-body);
  letter-spacing:var(--ls-body);
  color:var(--text-body);
  background:var(--surface-page);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-wrap:break-word;
  word-break:normal;
}
.lp-scope h1,.lp-scope h2,.lp-scope h3,.lp-scope h4{
  font-family:var(--font-display);
  color:var(--text-strong);
  line-height:var(--lh-tight);
  letter-spacing:var(--ls-heading);
  font-weight:var(--fw-bold);
  margin:0 0 .5em;
}
.lp-scope a{color:var(--text-link);text-decoration:none;transition:color var(--dur) var(--ease-out)}
.lp-scope a:hover{color:var(--text-link-hover);text-decoration:underline;text-underline-offset:3px}
.lp-scope img{max-width:100%;display:block}

/* --- 改行ユーティリティ ---
   .br-sp : スマホ(767px以下)でのみ改行される<br>
   .br-pc : PC(768px以上)でのみ改行される<br>
   通常の<br>は全画面で改行される。 */
.lp-scope .br-sp{display:none}
@media (max-width:767.98px){
  .lp-scope .br-sp{display:inline}
  .lp-scope .br-pc{display:none}
}
.lp-scope :focus-visible{outline:var(--focus-width) solid var(--ring);outline-offset:2px;border-radius:var(--radius-sm)}
.lp-scope ::selection{background:var(--blue-100)}