/* METIS ONE — カラーレイヤー
   ------------------------------------------------------------------
   レイアウト・形（幅・高さ・位置・角丸・clip-path・字送りなど）は
   一切変更していない。色に関わる値だけを製品トークンに置き換え、
   製品画面と同じ「ブルー→シアン」の面を LP にも通している。

   色の出どころは metis-tokens.css（製品と同一）:
     --gradient-brand      … 製品のダッシュボード面と同じ 33.05deg・5ストップ
     --color-primary-*     … ブランドのブルー（400 が基本色）
     --color-secondary-*   … ブランドのシアン（400 が基本色）
   ------------------------------------------------------------------ */
:root {
  --lp-ink: var(--color-gray-950);
  --lp-muted: var(--color-gray-800);
  --lp-line: var(--color-border-subdued);
  --lp-blue: var(--color-primary-400);
  --lp-teal: var(--color-secondary-400);
  --lp-teal-text: var(--color-secondary-700);
  --lp-paper-blue: var(--color-primary-50);
  --lp-paper-teal: var(--color-secondary-50);
  --lp-charcoal: var(--color-primary-950);
  --lp-shot-shadow: 0 20px 50px rgb(49 50 59 / .09);

  /* 製品面をそのまま持ち込むための下地 */
  --lp-brand-surface: var(--gradient-brand);
}
.lp-header { border-bottom-color: var(--color-border-default); }
.lp-nav a:hover { color: var(--lp-blue); opacity: 1; }
.lp-label { color: var(--color-gray-700); }
.lp-label::before { width: 22px; height: 3px; background: linear-gradient(90deg,var(--lp-blue),var(--lp-teal)); }
.lp-hero { background: var(--color-white); }
/* ファーストビューの右肩。製品面と同じ並び（ブルー→シアン）の淡い版 */
.lp-hero::before { width: 61%; right: -7%; height: 640px; border-radius: 0; top: 76px; transform: none; background: linear-gradient(135deg,var(--color-primary-50) 4%,var(--color-secondary-50) 62%,var(--color-secondary-100)); clip-path: polygon(26% 0,100% 0,100% 100%,0 100%); }
.lp-hero__brand-flash { position: absolute; right: -55px; top: 54px; width: min(59vw,830px); height: 650px; background: url('illustrations/brand-flash.svg') center / contain no-repeat; opacity: .15; pointer-events: none; }
.lp-hero__badge { color: var(--color-gray-800); letter-spacing: .14em; }
.lp-hero__badge::before { width: 22px; height: 3px; background: linear-gradient(90deg,var(--lp-blue),var(--lp-teal)); }
.lp-hero__accent { color: var(--color-primary-600); background: var(--gradient-brand); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.lp-hero__accent::after { display: none; }
.lp-hero__visual-label { color: var(--color-gray-800); font-weight: 700; letter-spacing: .24em; }
.lp-status-dot { background: var(--color-secondary-600); box-shadow: 0 0 0 4px rgb(0 204 205 / .12); }
.lp-hero__shot { box-shadow: 0 24px 64px rgb(13 14 89 / .16),0 0 0 1px rgb(88 94 117 / .08); border-radius: 12px; }
.lp-phone { border-color: var(--color-gray-950); box-shadow: 0 16px 32px rgb(49 50 59 / .2); }
.lp-hero__callout { border-color: var(--color-secondary-100); box-shadow: 0 12px 28px rgb(2 127 131 / .12); border-radius: 10px; }
.lp-callout-icon { color: var(--color-secondary-700); background: var(--color-secondary-50); border-radius: 8px; }
.lp-callout-icon svg { width: 26px; height: 26px; }
.lp-callout-check { color: var(--color-secondary-700); background: var(--color-secondary-50); }
.lp-partners { border-top-color: var(--color-border-subdued); }
.lp-partner { color: var(--color-gray-900); }
.lp-partner__icon { color: var(--color-gray-800); }
/* 「見る。知る。解く。」の面。製品のキャンバスをそのまま使う。
   上に載る文字は白へ、3枚のカードは白のままなので中身の色は触らない。 */
.lp-overview {
  background-image: var(--gradient-brand);
  background-color: var(--color-primary-600);
  /* 横方向のブルー→シアンはそのまま。縦の見え幅だけを下側（青寄り）に寄せて、
     白い見出しが読める明るさに収めている。面の左は青、右はシアンのまま。 */
  background-size: 100% 300%;
  background-position: left bottom;
  background-repeat: no-repeat;
  border-top-color: transparent;
}
.lp-overview .lp-h2 { color: var(--color-white); }
.lp-overview .lp-text { color: var(--color-white); }
.lp-overview .lp-label { color: var(--color-white); }
.lp-overview .lp-label::before { background: var(--color-white); }
.lp-overview .lp-text-accent { color: var(--color-secondary-100); }
.lp-overview .lp-journey__item { border-color: transparent; box-shadow: 0 10px 30px rgb(13 14 89 / .16); }
.lp-text-accent { color: var(--color-primary-600); }
.lp-journey__item { border-radius: 10px; border-color: var(--color-border-subdued); box-shadow: 0 4px 16px rgb(49 50 59 / .025); }
.lp-journey__number { color: var(--color-gray-200); }
.lp-journey__icon { border-radius: 12px; background: var(--color-primary-50); }
.lp-journey__item:nth-child(2) .lp-journey__icon { background: var(--color-secondary-50); color: var(--color-secondary-700); }
.lp-journey__item:nth-child(3) .lp-journey__icon { background: var(--color-gray-100); color: var(--color-gray-800); }
.lp-journey__item:nth-child(2) .lp-journey__arrow { color: var(--color-secondary-700); }
.lp-journey__item:nth-child(3) .lp-journey__arrow { color: var(--color-gray-800); }
.lp-steprow { background: var(--lp-paper-blue); border: 1px solid var(--color-primary-100); border-radius: 16px; }
.lp-steprow--rev { background: var(--lp-paper-teal); border-color: var(--color-secondary-100); }
.lp-steprow:nth-child(3) { background: var(--color-gray-50); border-color: var(--color-border-subdued); }
.lp-steprow--rev .lp-steprow__num,.lp-steprow--rev .lp-steprow__lead { color: var(--color-secondary-700); }
.lp-steprow:nth-child(3) .lp-steprow__num,.lp-steprow:nth-child(3) .lp-steprow__lead { color: var(--color-gray-800); }
.lp-card { border-color: var(--color-border-subdued); border-radius: 12px; }
.lp-card:nth-child(3n+2) .lp-card__icon { color: var(--color-secondary-700); background: var(--color-secondary-50); }
.lp-card:nth-child(3n) .lp-card__icon { color: var(--color-gray-800); background: var(--color-gray-100); }
.lp-card__icon { border-radius: 10px; }
.lp-chip { background: var(--color-primary-50); color: var(--color-primary-700); }
.lp-chip--outline { background: var(--color-white); color: var(--lp-ink); }
/* 濃色面はブランドの深いブルー（primary-950）。チャコールより製品に近い */
.lp-section--dark { background: var(--lp-charcoal); overflow: clip; }
.lp-section--dark::before { content: ''; position: absolute; pointer-events: none; width: 440px; height: 380px; top: -130px; right: -90px; background: url('illustrations/brand-flash.svg') center / contain no-repeat; opacity: .16; }
.lp-section--dark > .lp-container { position: relative; }
.lp-section--dark .lp-label { color: var(--color-secondary-300); }
.lp-depth__row--1 { background: var(--color-primary-400); }
.lp-depth__row--2 { background: var(--color-secondary-700); border-color: var(--color-secondary-600); }
.lp-depth__row--3 { background: var(--color-primary-800); border-color: var(--color-primary-700); }
.lp-depth__row { border-radius: 9px; }
.lp-role { background: rgb(255 255 255 / .035); border-color: rgb(255 255 255 / .14); border-radius: 10px; }
.lp-statcard { background: var(--color-gray-50); border-top-color: var(--color-primary-400); }
.lp-statcard:nth-child(2) { border-top-color: var(--color-secondary-400); }
.lp-statcard:nth-child(2) .lp-stat { color: var(--color-secondary-700); }
.lp-statcard:nth-child(3) { border-top-color: var(--color-gray-500); }
.lp-statcard:nth-child(3) .lp-stat { color: var(--color-gray-800); }
.lp-illust--wide.lp-artwork { background: var(--color-primary-50); }
.lp-card:nth-child(even) .lp-illust--wide.lp-artwork { background: var(--color-secondary-50); }
.lp-report-tabs:not([hidden]) { background: var(--color-gray-100); border-radius: 9px; }
.lp-report-tabs button[aria-selected="true"] { color: var(--color-primary-600); }
.lp-section--band.lp-invert { background: var(--color-secondary-50); color: var(--lp-ink); border-block: 1px solid var(--color-secondary-100); }
.lp-section--band .lp-h2 { color: var(--lp-ink); position: relative; }
.lp-section--band .lp-flash { opacity: .25; }
.lp-section--band .lp-btn--on-invert { background: var(--color-primary-400); color: var(--color-white); box-shadow: none; }
.lp-section--band .lp-btn--on-invert:hover { background: var(--color-primary-600); }
.lp-section--band .lp-btn--on-invert-ghost { border-color: var(--color-gray-300); color: var(--lp-ink); background: var(--color-white); }
/* 最終CTA。製品のダッシュボード面と同じグラデーションをそのまま使う。
   面より大きく描いて、文字が青〜青緑の側に乗るようにしている
   （既定のままだとシアン側に文字が乗り、白文字が読みにくくなるため）。 */
#contact { background-color: var(--color-primary-700); background-image: var(--gradient-brand); }
#contact .lp-flash { opacity: .32; }
#contact::before { content: ''; position: absolute; width: 580px; height: 550px; top: -50px; right: -120px; background: url('illustrations/brand-flash.svg') center / contain no-repeat; opacity: .42; pointer-events: none; }
.lp-contact-concept { font: 600 12px var(--font-latin); letter-spacing: .3em; color: var(--color-white); margin: 0 0 22px; }
#contact .lp-display { font-size: clamp(40px,5vw,62px); line-height: 1.45; letter-spacing: -.035em; }
.lp-formcard { border-radius: 14px; box-shadow: 0 24px 64px rgb(0 0 0 / .15); }
.lp-footer { background: var(--color-gray-50); }
.lp-lightbox::backdrop { background: color-mix(in srgb, var(--color-primary-950) 78%, transparent); }
@media (max-width: 700px) {
 .lp-hero::before { top: 452px; height: 395px; width: 110%; right: -18%; clip-path: polygon(24% 0,100% 0,100% 100%,0 100%); }
 .lp-hero__brand-flash { top: 410px; right: -70px; width: 95%; height: 380px; opacity: .13; }
 #contact::before { width: 360px; height: 360px; right: -130px; opacity: .25; }
 .lp-contact-concept { font-size: 10px; }
}
@media (forced-colors: active) {
 .lp-hero__accent { background: none; -webkit-text-fill-color: currentColor; }
}

/* ------------------------------------------------------------------
   副次テキストの濃さ
   製品トークンの --color-text-subdued（gray-600）は白背景で 3.95:1、
   gray-50 の上では 3.68:1 で、本文として読みづらい。
   同じグレーの系列で一段濃い gray-800（白背景 6.4:1）に揃える。
   色以外（大きさ・字送り・配置）は変更していない。
   ------------------------------------------------------------------ */
.lp-note,
.lp-small,
.lp-faq__a,
.lp-figure__caption,
.lp-footer__address,
.lp-footer__links a,
.lp-table thead th,
.lp-card .lp-small,
.lp-formcard__note { color: var(--color-gray-800); }

/* 図版内の小ラベルも同様（primary-50 の上で 4.15:1 だった） */
.lp-figure svg [fill="var(--color-gray-700)"] { fill: var(--color-gray-900); }

/* 見出し脇の大きな連番は、面から浮かない程度に濃くする */
.lp-journey__number { color: var(--color-gray-300); }