@charset "UTF-8";

/* ==========================================================================
   FLARO MARKETING — Landing Page
   Monotone (white background / black text) design system
   ========================================================================== */

:root {
  --ink:        #000000;
  --ink-2:      #000000;
  --muted:      #000000;
  --muted-2:    #000000;
  --mark:       #999999;   /* 矢印・リストマーカー等の装飾線（文字ではない） */
  --line:       #e4e4e4;
  --line-2:     #efefef;
  --soft:       #f6f6f6;
  --soft-2:     #fafafa;
  --white:      #ffffff;
  --dark:       #111111;
  --dark-2:     #1c1c1c;

  /* ---------- タイポグラフィ ----------
     役割ごとに1つだけ選ぶ。ここに無いサイズは使わない。
     詳細は docs/DESIGN-RULES.md を参照。 */
  --fs-caption: 12px;                        /* 注記・バッジ・単位 */
  --fs-meta:    13px;                        /* ナビ・番号・図版内の補助 */
  --fs-sm:      15px;                        /* カード本文・リスト */
  --fs-base:    16px;                        /* 本文 */
  --fs-h4:      18px;                        /* 小見出し・リード */
  --fs-h3:      21px;                        /* カード見出し */
  --fs-h3-lg:   26px;                        /* 大きい第3見出し */
  --fs-h2:      clamp(26px, 3.2vw, 34px);    /* セクション見出し */
  --fs-h1:      clamp(32px, 4.8vw, 50px);    /* ヒーロー見出し */
  /* 実績値の数字。本文の尺度とは別系統で、欧文フォントで組む */
  --fs-num:     42px;
  --fs-num-sm:  34px;

  /* 行間。和文は欧文より広く取らないと行が詰まって見える */
  --lh-num:     1.15;
  --lh-heading: 1.45;   /* H1 / H2 */
  --lh-snug:    1.6;    /* H3 / H4 */
  --lh-body:    1.85;   /* 本文 */
  --lh-loose:   2;      /* リード・注記などの読ませる段落 */

  /* 字間。palt と併用する前提の値 */
  --ls-heading: .01em;
  --ls-base:    .04em;
  --ls-label:   .08em;
  --ls-caps:    .2em;   /* 欧文の大文字ラベル */

  /* ---------- 余白（8pxグリッド） ----------
     margin / padding / gap はこの段階からのみ選ぶ */
  --sp-4:   4px;
  --sp-8:   8px;
  --sp-12:  12px;
  --sp-16:  16px;
  --sp-24:  24px;
  --sp-32:  32px;
  --sp-40:  40px;
  --sp-48:  48px;
  --sp-56:  56px;
  --sp-72:  72px;
  --sp-96:  96px;
  --sp-120: 120px;

  --sec-y:    var(--sp-120);  /* セクションの上下。ブレークポイントで縮める */
  --card-p:   var(--sp-32);   /* カードの内側 */
  --grid-gap: var(--sp-24);   /* カードを並べるときの間隔 */

  --radius:     14px;
  --radius-lg:  20px;
  --radius-sm:  8px;

  --container:  1180px;
  --gutter:     24px;

  --header-h:   72px;

  --ease:       cubic-bezier(.22, .61, .36, 1);

  /* 欧文はHelvetica系、和文はNoto Sans JP。Webフォントが落ちてもOS標準に退避する。
     Windowsの游ゴシックは細くて可読性が落ちるため、Notoで全環境を揃える。 */
  --font: "Helvetica Neue", Arial, "Noto Sans JP", "Hiragino Kaku Gothic ProN",
          "Hiragino Sans", "Yu Gothic Medium", "Yu Gothic", Meiryo, sans-serif;
  --font-en: "Helvetica Neue", Arial, sans-serif;
}

/* ---------- reset ---------- */
*, *::before, *::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + var(--sp-16));
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  font-family: var(--font);
  color: var(--ink);
  background: var(--white);
  font-size: var(--fs-base);
  line-height: var(--lh-body);
  /* palt（文字詰め）とセットで字間を開ける。palt単体だと和文が窮屈に見える */
  font-feature-settings: "palt" 1;
  letter-spacing: var(--ls-base);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, p, ul, ol, dl, dd, figure, table { margin: 0; padding: 0; }
ul, ol { list-style: none; }
img, svg { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; transition: opacity .2s var(--ease); }
a:hover { opacity: .6; }
table { border-collapse: collapse; width: 100%; }

.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ---------- layout ---------- */
.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.container-narrow { max-width: 880px; }

.section { padding: var(--sec-y) 0; }
.section-soft { background: var(--soft); }
.section-dark { background: var(--dark); color: var(--white); }

.sp-only { display: none; }

/* ---------- 日本語の改行位置 ----------
   既定の折り返しは「ヒトサ／ラ」のように語の途中でも改行してしまう。
   auto-phrase は文節を見て改行位置を決めるため、画面幅を問わず読みやすい。
   未対応ブラウザ（Safari等）では通常の折り返しに戻るだけで、崩れることはない。 */
p, li, dd, dt, summary, figcaption {
  word-break: auto-phrase;
  line-break: strict;
  text-wrap: pretty;
}

/* 見出しは行ごとの長さを揃え、1文字だけ次行に落ちるのを防ぐ */
h1, h2, h3, h4,
.sec-title, .hero-title, .card-title, .feature-title, .step-title,
.ba-title, .cta-title, .workload-title, .case-title, .glance-step h3 {
  word-break: auto-phrase;
  text-wrap: balance;
}

/* 逃げ道。auto-phrase は文節を割らないため、「マーケティングレポート」のような
   長い語が狭い画面で枠からはみ出す。収まらないときだけ途中で折る */
h1, h2, h3, h4, p, li, dd, dt, summary, figcaption {
  overflow-wrap: break-word;
}

/* 文節のまとまり。この内部では改行させない。
   auto-phrase 未対応のブラウザでも語の途中で切れないようにする保険だが、
   カード内など列が狭い場所で使うと行末が大きく余って不格好になる。
   使ってよいのは、1行が十分に長い場所（リード文・注記・見出し）だけ。
   ルールは docs/DESIGN-RULES.md「改行」を参照。 */
.nb { display: inline-block; }

/* スマートフォンでは1行が短く、文節を塊にすると行末が大きく余る。
   通常の折り返し（＋auto-phrase）に戻す */
@media (max-width: 680px) {
  .nb { display: inline; }
}

/* ---------- section head ---------- */
.sec-head { text-align: center; margin-bottom: var(--sp-56); }

.sec-title {
  font-size: var(--fs-h2);
  font-weight: 700;
  line-height: var(--lh-heading);
  letter-spacing: var(--ls-heading);
}
.sec-en {
  margin-top: var(--sp-12);
  font-family: var(--font-en);
  font-size: var(--fs-caption);
  letter-spacing: var(--ls-caps);
  color: var(--muted-2);
  font-weight: 600;
}
.sec-lead {
  margin-top: var(--sp-24);
  font-size: var(--fs-base);
  color: var(--muted);
  line-height: var(--lh-loose);
  max-width: 720px;
  margin-inline: auto;
}
.sec-head-invert .sec-en { color: var(--white); }
.sec-head-invert .sec-lead { color: var(--white); }

.note {
  margin-top: var(--sp-24);
  font-size: var(--fs-caption);
  max-width: 46em;
  color: var(--muted-2);
  line-height: var(--lh-body);
}
.notes {
  margin-top: var(--sp-32);
  font-size: var(--fs-caption);
  max-width: 52em;
  color: var(--muted-2);
  line-height: var(--lh-body);
}
.notes li { position: relative; padding-left: 1.1em; }
.notes li::before { content: "※"; position: absolute; left: 0; }

/* ---------- buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-8);
  min-height: 54px;
  padding: 0 var(--sp-32);
  border-radius: 999px;
  font-size: var(--fs-sm);
  font-weight: 700;
  letter-spacing: var(--ls-base);
  border: 1px solid transparent;
  transition: background-color .25s var(--ease), color .25s var(--ease),
              border-color .25s var(--ease), transform .25s var(--ease);
  white-space: nowrap;
}
.btn:hover { opacity: 1; transform: translateY(-1px); }
.btn::after { content: "→"; font-size: var(--fs-meta); }

.btn-dark  { background: var(--ink); color: var(--white); }
.btn-dark:hover { background: var(--ink-2); }

.btn-ghost { background: transparent; color: var(--ink); border-color: var(--ink); }
.btn-ghost:hover { background: var(--ink); color: var(--white); }

.btn-light { background: var(--white); color: var(--ink); }
.btn-light:hover { background: var(--soft); }

.btn-outline-light { background: transparent; color: var(--white); border-color: var(--white); }
.btn-outline-light:hover { background: var(--white); color: var(--ink); }

.btn-sm { min-height: 42px; padding: 0 var(--sp-24); font-size: var(--fs-meta); }
.btn-block { display: flex; width: 100%; margin-top: var(--sp-32); }

/* ==========================================================================
   HEADER
   ========================================================================== */
.site-header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 100;
  height: var(--header-h);
  background: rgba(255,255,255,.9);
  backdrop-filter: saturate(180%) blur(12px);
  border-bottom: 1px solid transparent;
  transition: border-color .3s var(--ease), background-color .3s var(--ease);
}
.site-header.is-scrolled { border-bottom-color: var(--line); }

.header-inner {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-24);
}

.logo { display: inline-flex; align-items: baseline; gap: var(--sp-8); }
.logo-mark { width: 17px; height: 17px; align-self: center; color: currentColor; }
.logo-text {
  font-family: var(--font-en);
  font-size: var(--fs-h3);
  font-weight: 700;
  letter-spacing: var(--ls-label);
}
.logo-sub {
  font-size: var(--fs-caption);
  letter-spacing: var(--ls-label);
  color: var(--muted);
  padding-left: var(--sp-8);
  border-left: 1px solid var(--line);
}
.logo-invert { color: var(--white); }

.gnav { display: flex; align-items: center; gap: var(--sp-24); }
.gnav a { font-size: var(--fs-meta); font-weight: 600; letter-spacing: var(--ls-base); }
.gnav-cta { margin-left: var(--sp-4); }
.gnav-cta:hover { opacity: 1; }

.nav-toggle {
  display: none;
  position: relative;
  width: 44px; height: 44px;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: var(--white);
  cursor: pointer;
}
.nav-toggle-bar,
.nav-toggle-bar::before,
.nav-toggle-bar::after {
  position: absolute;
  left: 50%;
  width: 18px; height: 1.5px;
  background: var(--ink);
  transform: translateX(-50%);
  transition: transform .3s var(--ease), opacity .2s var(--ease);
}
.nav-toggle-bar { top: 50%; margin-top: -.75px; }
.nav-toggle-bar::before { content: ""; top: -6px; left: 50%; }
.nav-toggle-bar::after  { content: ""; top:  6px; left: 50%; }
.nav-toggle[aria-expanded="true"] .nav-toggle-bar { background: transparent; }
.nav-toggle[aria-expanded="true"] .nav-toggle-bar::before { transform: translateX(-50%) translateY(6px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle-bar::after  { transform: translateX(-50%) translateY(-6px) rotate(-45deg); }

/* ==========================================================================
   HERO
   ========================================================================== */
.hero {
  position: relative;
  padding: calc(var(--header-h) + var(--sp-96)) 0 var(--sp-96);
  background:
    radial-gradient(1100px 460px at 78% 6%, #f4f4f4 0%, rgba(255,255,255,0) 62%),
    var(--white);
  overflow: hidden;
}

/* 背景写真。白のスクリムを強くかけて、本文の可読性を最優先する。
   画像が未配置でも alt="" の img は何も表示しないので、レイアウトは崩れない。 */
.hero-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}
.hero-bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 40%;
  filter: contrast(.95);
  opacity: .85;
}
/* 左（本文側）はほぼ白に伏せ、右にいくほど写真を出す。
   本文の可読性を最優先し、写真は奥行きを足す程度に留める。 */
.hero-bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(100deg,
      rgba(255,255,255,.98) 0%,
      rgba(255,255,255,.96) 38%,
      rgba(255,255,255,.86) 62%,
      rgba(255,255,255,.74) 100%),
    linear-gradient(180deg,
      rgba(255,255,255,.92) 0%,
      rgba(255,255,255,.35) 34%,
      rgba(255,255,255,.8) 72%,
      rgba(255,255,255,.95) 100%);
}
.hero-inner { position: relative; z-index: 1; }
.hero-inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.02fr);
  gap: var(--sp-56);
  align-items: center;
}

.hero-eyebrow {
  display: inline-block;
  font-size: var(--fs-caption);
  font-weight: 700;
  letter-spacing: var(--ls-label);
  color: var(--ink);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: var(--sp-8) var(--sp-16);
  margin-bottom: var(--sp-32);
}
.hero-title {
  font-size: var(--fs-h1);
  font-weight: 700;
  line-height: var(--lh-heading);
  letter-spacing: var(--ls-heading);
}
/* h1に入れる説明行。見出しの一部だが、キャッチコピーより一段小さく組む */
.hero-title-sub {
  display: block;
  margin-top: var(--sp-16);
  font-size: var(--fs-h4);
  font-weight: 700;
  line-height: var(--lh-snug);
  letter-spacing: var(--ls-base);
}
.hero-lead {
  margin-top: var(--sp-32);
  font-size: var(--fs-base);
  line-height: var(--lh-loose);
  color: var(--muted);
  max-width: 34em;
}
.hero-actions { margin-top: var(--sp-40); display: flex; flex-wrap: wrap; gap: var(--sp-16); }

.hero-facts {
  margin-top: var(--sp-48);
  padding-top: var(--sp-32);
  border-top: 1px solid var(--line);
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-40);
}
.hero-facts strong {
  display: block;
  font-family: var(--font-en);
  font-size: var(--fs-num);
  font-weight: 700;
  line-height: var(--lh-num);
  letter-spacing: var(--ls-heading);
}
/* 単位は数字と同じ大きさだと数字が埋もれる。半分程度に落として主役を立てる */
.hero-facts small { font-size: .5em; font-weight: 700; margin-left: 2px; letter-spacing: 0; }
.hero-facts li > span { display: block; font-size: var(--fs-sm); color: var(--muted); margin-top: var(--sp-8); }
.hero-facts-note { margin-top: var(--sp-12); font-size: var(--fs-caption); color: var(--muted-2); }

.hero-visual { position: relative; }

/* ==========================================================================
   MEDIA STRIP
   ========================================================================== */
.strip { border-block: 1px solid var(--line); padding: var(--sp-32) 0; background: var(--white); }
.strip-label {
  text-align: center;
  font-family: var(--font-en);
  font-size: var(--fs-caption); letter-spacing: var(--ls-caps); color: var(--muted-2);
  font-weight: 600;
  margin-bottom: var(--sp-16);
}
/* ロゴ列。normalize-logos.py が同じキャンバスに中央配置して書き出すので、
   CSS側は同じ箱を並べるだけで見た目の大きさが揃う。 */
.strip-logos {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: var(--sp-4) var(--sp-16);
}
.strip-logos li { flex: 0 0 auto; }
.strip-logos img {
  width: 200px;
  height: 72px;
  object-fit: contain;
}

/* 連携開発中の媒体。対応済みと区別できるよう、やや小さく＋ラベル付き */
.strip-logos-soon { margin-top: var(--sp-24); gap: var(--sp-8) var(--sp-32); }
.strip-logos-soon li {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-4);
}
.strip-logos-soon img { width: 150px; height: 54px; }
.soon-label {
  font-size: var(--fs-caption);
  font-weight: 700;
  letter-spacing: var(--ls-label);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 2px var(--sp-12);
}

.strip-list {
  display: flex; flex-wrap: wrap; justify-content: center; gap: var(--sp-12) var(--sp-12);
}
.strip-logos + .strip-list { margin-top: var(--sp-24); }
.strip-list li {
  font-size: var(--fs-meta); font-weight: 600; letter-spacing: var(--ls-heading);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: var(--sp-8) var(--sp-24);
  color: var(--ink-2);
}
.strip-list .is-soon { color: var(--muted-2); border-style: dashed; }
.strip-list .is-soon span {
  font-size: var(--fs-caption); margin-left: var(--sp-8); padding-left: var(--sp-8);
  border-left: 1px solid var(--line);
}

/* ==========================================================================
   CARDS
   ========================================================================== */
.cards { display: grid; gap: var(--grid-gap); }
.cards-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.cards-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

.card {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: var(--card-p);
  transition: transform .3s var(--ease), box-shadow .3s var(--ease);
}
.card:hover { transform: translateY(-3px); box-shadow: 0 18px 40px -26px rgba(0,0,0,.35); }
.card-goal { display: flex; flex-direction: column; }
.card-goal .card-text { margin-bottom: var(--sp-24); }

/* 写真付きカード。画像はカード上端まで回り込ませ、本文だけ内側に余白を持たせる */
.card-photo { padding: 0; overflow: hidden; display: flex; flex-direction: column; }
.card-media { display: block; background: var(--soft); }
.card-media img {
  width: 100%;
  /* height属性(=height:800px)を打ち消さないと aspect-ratio が効かない */
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}
.card-body { padding: var(--sp-32) var(--sp-32) var(--sp-32); }
.card-no {
  font-family: var(--font-en);
  font-size: var(--fs-meta); font-weight: 700; letter-spacing: var(--ls-label);
  color: var(--muted-2);
  margin-bottom: var(--sp-16);
}
.card-title { font-size: var(--fs-h4); font-weight: 700; line-height: var(--lh-snug); margin-bottom: var(--sp-16); }
.card-text { font-size: var(--fs-sm); color: var(--muted); line-height: var(--lh-loose); }
.card-arrow {
  margin-top: auto; padding-top: var(--sp-16);
  border-top: 1px solid var(--line-2);
  font-size: var(--fs-meta); font-weight: 700;
}
.card-arrow::before { content: "→ "; }

.badge {
  display: inline-block;
  font-size: var(--fs-caption); font-weight: 700; letter-spacing: var(--ls-label);
  border: 1px solid var(--ink);
  border-radius: 999px;
  padding: 3px var(--sp-12);
  margin-bottom: var(--sp-16);
}
.card-soon .badge { border-color: var(--line); color: var(--muted); }

/* ==========================================================================
   SCATTER DIAGRAM
   ========================================================================== */
.diagram-scatter { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-24); }
.scatter-col {
  background: var(--white);
  border: 1px dashed var(--line);
  border-radius: var(--radius);
  padding: var(--sp-32) var(--sp-24);
}
.scatter-head { font-size: var(--fs-h4); font-weight: 700; }
.scatter-sub { font-size: var(--fs-caption); color: var(--muted-2); margin-top: var(--sp-4); padding-bottom: var(--sp-16); border-bottom: 1px solid var(--line-2); }
.scatter-col ul { margin-top: var(--sp-16); }
.scatter-col li {
  position: relative;
  padding-left: var(--sp-16);
  font-size: var(--fs-meta); color: var(--muted); line-height: var(--lh-loose);
}
.scatter-col li::before {
  content: ""; position: absolute; left: 0; top: .85em;
  width: 5px; height: 1px; background: var(--mark);
}


/* ==========================================================================
   SERVICE FLOW DIAGRAM
   ========================================================================== */
.diagram-flow {
  display: grid;
  grid-template-columns: 1fr 40px 1fr 40px 1fr;
  gap: var(--sp-12);
  align-items: stretch;
}
.flow-col { display: flex; flex-direction: column; }
.flow-cap {
  font-family: var(--font-en);
  font-size: var(--fs-caption); letter-spacing: var(--ls-caps); font-weight: 700;
  color: var(--muted-2);
  margin-bottom: var(--sp-12);
  text-align: center;
}
.flow-box {
  flex: 1;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--white);
  padding: var(--sp-24) var(--sp-24);
}
.flow-box > h3 {
  font-size: var(--fs-h4); font-weight: 700; text-align: center;
  padding-bottom: var(--sp-16); margin-bottom: var(--sp-16);
  border-bottom: 1px solid var(--line-2);
}
.flow-block + .flow-block { margin-top: var(--sp-16); }
.flow-block-title { font-size: var(--fs-meta); font-weight: 700; margin-bottom: var(--sp-8); }
.flow-block li { font-size: var(--fs-meta); color: var(--muted); line-height: var(--lh-body); position: relative; padding-left: var(--sp-12); }
.flow-block li::before { content: ""; position: absolute; left: 0; top: .85em; width: 4px; height: 1px; background: var(--mark); }

.flow-box-dark {
  background: var(--dark);
  color: var(--white);
  border-color: var(--dark);
  display: flex; flex-direction: column; justify-content: center; text-align: center;
}
.flow-box-dark h3 { border: 0; padding: 0; margin-bottom: var(--sp-12); font-size: var(--fs-h3); }
.flow-box-dark p { font-size: var(--fs-sm); color: var(--white); line-height: var(--lh-body); }

.flow-arrow { align-self: center; position: relative; height: 1px; background: var(--line); }
.flow-arrow::after {
  content: "";
  position: absolute; right: 0; top: 50%;
  width: 7px; height: 7px;
  border-top: 1px solid var(--mark);
  border-right: 1px solid var(--mark);
  transform: translateY(-50%) rotate(45deg);
}

/* ==========================================================================
   STEPS (structure)
   ========================================================================== */
.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-24); }
.step {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: var(--sp-32) var(--sp-32);
  background: var(--white);
  position: relative;
}
.step-no {
  font-family: var(--font-en);
  font-size: var(--fs-caption); font-weight: 700; letter-spacing: var(--ls-caps);
  color: var(--white);
  background: var(--ink);
  display: inline-block;
  padding: var(--sp-4) var(--sp-12);
  border-radius: 999px;
  margin-bottom: var(--sp-16);
}
.step-title { font-size: var(--fs-h3); font-weight: 700; }
.step-sub { font-size: var(--fs-sm); color: var(--muted); margin-top: var(--sp-4); padding-bottom: var(--sp-16); border-bottom: 1px solid var(--line-2); }
.step-text { margin-top: var(--sp-16); font-size: var(--fs-sm); color: var(--muted); line-height: var(--lh-loose); }

/* ==========================================================================
   FEATURE BLOCKS
   ========================================================================== */
.feature-block {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--sp-56);
  align-items: center;
  margin-bottom: var(--sp-96);
}
.feature-reverse .feature-text { order: 2; }

.feature-tag {
  font-family: var(--font-en);
  font-size: var(--fs-caption); font-weight: 700; letter-spacing: var(--ls-caps);
  color: var(--muted-2);
  margin-bottom: var(--sp-12);
}
.feature-title { font-size: var(--fs-h2); font-weight: 700; line-height: var(--lh-heading); }
.feature-lead { margin-top: var(--sp-16); font-size: var(--fs-sm); color: var(--muted); line-height: var(--lh-loose); }

.feature-dl { margin-top: var(--sp-24); border-top: 1px solid var(--line); }
.feature-dl > div { padding: var(--sp-16) 0; border-bottom: 1px solid var(--line); }
.feature-dl dt { font-size: var(--fs-sm); font-weight: 700; margin-bottom: var(--sp-4); }
.feature-dl dd { font-size: var(--fs-sm); color: var(--muted); line-height: var(--lh-body); margin: 0; }

.analytics { padding-top: var(--sp-8); }
.analytics .feature-title { margin-bottom: var(--sp-32); }

/* ==========================================================================
   NEW FEATURES
   ========================================================================== */
.newfeat { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-24); }
.newfeat-item {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: var(--sp-32) var(--sp-32);
  background: var(--white);
}
.newfeat-item > h3 { font-size: var(--fs-h3); font-weight: 700; line-height: var(--lh-snug); margin-bottom: var(--sp-24); }
.newfeat-item ol { counter-reset: nf; display: grid; gap: var(--sp-16); }
.newfeat-item li { position: relative; padding-left: var(--sp-32); counter-increment: nf; }
.newfeat-item li::before {
  content: counter(nf);
  position: absolute; left: 0; top: 3px;
  width: 22px; height: 22px;
  border: 1px solid var(--ink);
  border-radius: 50%;
  display: grid; place-items: center;
  font-family: var(--font-en);
  font-size: var(--fs-caption); font-weight: 700;
}
.newfeat-item li b { display: block; font-size: var(--fs-sm); font-weight: 700; line-height: var(--lh-snug); }
.newfeat-item li > span { display: block; font-size: var(--fs-sm); color: var(--muted); line-height: var(--lh-body); margin-top: var(--sp-4); }
.newfeat-arrow {
  margin-top: var(--sp-24); padding-top: var(--sp-16);
  border-top: 1px solid var(--line-2);
  font-size: var(--fs-sm); font-weight: 700;
}
.newfeat-arrow::before { content: "→ "; }

/* ==========================================================================
   STRENGTH (dark)
   ========================================================================== */
.strength {
  display: grid;
  grid-template-columns: 1fr 60px 1fr;
  align-items: center;
  gap: var(--sp-16);
}
.strength-item {
  border: 1px solid rgba(255,255,255,.22);
  border-radius: var(--radius);
  padding: var(--sp-40) var(--sp-32);
  height: 100%;
}
.strength-tag {
  display: inline-block;
  font-size: var(--fs-caption); font-weight: 700; letter-spacing: var(--ls-label);
  border: 1px solid rgba(255,255,255,.4);
  border-radius: 999px;
  padding: 3px var(--sp-16);
  margin-bottom: var(--sp-16);
}
.strength-logo {
  width: 300px;
  height: 100px;
  object-fit: contain;
  object-position: left center;
  margin-bottom: var(--sp-12);
}
.strength-item h3 { font-size: var(--fs-h4); font-weight: 700; line-height: var(--lh-snug); margin-bottom: var(--sp-16); }
.strength-item p { font-size: var(--fs-sm); color: var(--white); line-height: var(--lh-loose); }
.strength-x { text-align: center; font-size: var(--fs-h3-lg); color: var(--white); }
.strength-foot {
  margin-top: var(--sp-40);
  text-align: center;
  font-size: var(--fs-h4);
  font-weight: 700;
  letter-spacing: var(--ls-heading);
}

/* ==========================================================================
   CASE
   ========================================================================== */
.case {
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  overflow: hidden;
}
/* 事例の企業イメージ。カード上端まで回り込ませる */
.case-photo { display: block; background: var(--soft); }
.case-photo img {
  width: 100%;
  height: auto;
  aspect-ratio: 21 / 9;
  object-fit: cover;
}
.case-main {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
  gap: var(--sp-40);
  padding: var(--sp-40);
  align-items: center;
}
.case-logo {
  width: 240px;
  height: 80px;
  object-fit: contain;
  object-position: left center;
  margin-bottom: var(--sp-4);
}
.case-tag {
  display: inline-block;
  font-size: var(--fs-caption); font-weight: 700; letter-spacing: var(--ls-label);
  background: var(--ink); color: var(--white);
  border-radius: 999px; padding: var(--sp-4) var(--sp-16);
  margin-bottom: var(--sp-16);
}
.case-title { font-size: var(--fs-h3-lg); font-weight: 700; margin-bottom: var(--sp-16); }
.case-text { font-size: var(--fs-sm); color: var(--muted); line-height: var(--lh-loose); }
.case-figs { display: grid; gap: var(--sp-16); }
.case-figs li {
  border: 1px solid var(--line-2);
  background: var(--soft-2);
  border-radius: var(--radius-sm);
  padding: var(--sp-16) var(--sp-24);
  display: flex; align-items: baseline; justify-content: space-between; gap: var(--sp-12);
}
.case-figs strong { font-family: var(--font-en); font-size: var(--fs-num); font-weight: 700; line-height: var(--lh-num); }
.case-figs small { font-size: .46em; font-weight: 700; margin-left: 3px; letter-spacing: 0; }
.case-figs li > span { font-size: var(--fs-sm); color: var(--muted); }

/* --- before / after --- */
.ba { margin-top: var(--sp-72); }
.ba-title { text-align: center; font-size: var(--fs-h3-lg); font-weight: 700; }
.ba-lead { text-align: center; font-size: var(--fs-sm); color: var(--muted); margin-top: var(--sp-12); margin-bottom: var(--sp-40); }

.ba-grid {
  display: grid;
  grid-template-columns: minmax(0, .85fr) minmax(0, 1.3fr) minmax(0, .85fr);
  gap: var(--sp-16);
  align-items: stretch;
}
.ba-side {
  border-radius: var(--radius);
  padding: var(--sp-32) var(--sp-32);
  display: flex; flex-direction: column; justify-content: center;
}
.ba-before { border: 1px dashed var(--line); background: var(--soft-2); }
.ba-after  { border: 1px solid var(--ink); background: var(--ink); color: var(--white); }
.ba-label {
  font-family: var(--font-en);
  font-size: var(--fs-caption); font-weight: 700; letter-spacing: var(--ls-caps);
  color: var(--muted-2);
  margin-bottom: var(--sp-16);
}
.ba-after .ba-label { color: var(--white); }
.ba-headline { font-size: var(--fs-h3); font-weight: 700; line-height: var(--lh-snug); }
.ba-text { font-size: var(--fs-sm); color: var(--muted); margin-top: var(--sp-8); line-height: var(--lh-body); }
.ba-after .ba-text { color: var(--white); }
.ba-stat {
  margin-top: var(--sp-16); padding-top: var(--sp-16);
  border-top: 1px solid var(--line);
  font-size: var(--fs-sm); font-weight: 700; color: var(--muted);
}
.ba-stats { margin-top: var(--sp-16); padding-top: var(--sp-16); border-top: 1px solid rgba(255,255,255,.22); display: grid; gap: var(--sp-12); }
.ba-stats li { display: flex; align-items: baseline; justify-content: space-between; }
.ba-stats b { font-family: var(--font-en); font-size: var(--fs-num-sm); font-weight: 700; line-height: var(--lh-num); }
.ba-stats small { font-size: .48em; font-weight: 700; margin-left: 2px; letter-spacing: 0; }
.ba-stats li > span { font-size: var(--fs-meta); color: var(--white); }

.ba-mid { display: grid; gap: var(--sp-16); }
.ba-step {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--white);
  padding: var(--sp-24) var(--sp-24);
}
.ba-step-no {
  font-family: var(--font-en);
  font-size: var(--fs-caption); font-weight: 700; letter-spacing: var(--ls-caps);
  color: var(--muted-2); margin-bottom: var(--sp-8);
}
.ba-step h4 { font-size: var(--fs-h4); font-weight: 700; margin-bottom: var(--sp-8); }
.ba-step p { font-size: var(--fs-sm); color: var(--muted); line-height: var(--lh-body); }
.ba-arrow { margin-top: var(--sp-12); font-size: var(--fs-meta); font-weight: 700; color: var(--ink) !important; }
.ba-arrow::before { content: "→ "; }

/* ==========================================================================
   FLOW (steps to start)
   ========================================================================== */
/* 5列に並べると1列が狭くなり、短い項目まで途中で改行されてしまう。
   縦に積んだ行レイアウトにして、各項目が1行に収まる幅を確保する。
   「貴社対応」「FLARO支援」は列で揃うので、行の高さを合わせる小細工も要らない */
.flow { display: grid; gap: var(--sp-24); }
.flow-item {
  position: relative;
  display: grid;
  grid-template-columns: minmax(200px, 240px) minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--sp-32);
  align-items: start;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--white);
  padding: var(--sp-32);
}
/* 行と行のあいだに進行方向を示す。装飾なので読み上げ対象にしない */
.flow-item:not(:last-child)::after {
  content: "";
  position: absolute;
  left: calc(var(--sp-32) + 8px);
  bottom: calc(var(--sp-24) / -2 - 7px);
  width: 10px; height: 10px;
  border-right: 2px solid var(--ink);
  border-bottom: 2px solid var(--ink);
  transform: rotate(45deg);
}

.flow-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--sp-8) var(--sp-12); }
.flow-no {
  font-family: var(--font-en);
  font-size: var(--fs-h3); font-weight: 700; letter-spacing: var(--ls-heading);
  line-height: var(--lh-num);
  width: 100%;
}
.flow-item > .flow-head > h3 { font-size: var(--fs-h3); font-weight: 700; line-height: var(--lh-snug); }
/* 番号・見出しの横に置く注記バッジ */
.flow-badge {
  font-size: var(--fs-caption); font-weight: 700; letter-spacing: 0;
  color: var(--ink);
  white-space: nowrap;
  border: 1px solid var(--ink); border-radius: 999px;
  padding: 3px var(--sp-8);
}
.flow-role-title {
  font-size: var(--fs-caption); font-weight: 700; letter-spacing: var(--ls-label);
  color: var(--ink);
  background: var(--soft);
  border-radius: 4px;
  padding: 3px var(--sp-8);
  display: inline-block;
  margin-bottom: var(--sp-12);
}
.flow-role li {
  position: relative; padding-left: var(--sp-12);
  font-size: var(--fs-sm); color: var(--muted); line-height: var(--lh-snug);
}
.flow-role li + li { margin-top: var(--sp-8); }
.flow-role li::before { content: ""; position: absolute; left: 0; top: .82em; width: 4px; height: 1px; background: var(--mark); }

/* ==========================================================================
   PRICE
   ========================================================================== */
.price-base {
  display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-24);
  margin-bottom: var(--sp-24);
}
.price-base-item {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: var(--sp-32) var(--sp-32);
  display: flex; align-items: baseline; justify-content: space-between; gap: var(--sp-16);
  background: var(--soft-2);
}
.price-base-item p { font-size: var(--fs-sm); font-weight: 700; }
.price-base-item strong { font-family: var(--font-en); font-size: var(--fs-num); font-weight: 700; }
.price-base-item small { font-family: var(--font); font-size: var(--fs-sm); font-weight: 700; margin-left: var(--sp-4); letter-spacing: 0; }

.price-plans { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-24); }
.plan {
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: var(--sp-40);
  background: var(--white);
  position: relative;
  display: flex;
  flex-direction: column;
}
/* 機能の数がプランで違っても、ボタンの位置は揃える */
.plan .btn-block { margin-top: auto; }
.plan .planfeat-list { margin-bottom: var(--sp-32); }
.plan-main { border-color: var(--ink); border-width: 1.5px; }
.plan-tag {
  position: absolute; top: -13px; left: 36px;
  font-size: var(--fs-caption); font-weight: 700; letter-spacing: var(--ls-label);
  background: var(--ink); color: var(--white);
  border-radius: 999px; padding: var(--sp-4) var(--sp-16);
}
.plan-name { font-size: var(--fs-h3); font-weight: 700; }
.plan-price { margin-top: var(--sp-12); padding-bottom: var(--sp-24); border-bottom: 1px solid var(--line-2); }
.plan-price strong { font-family: var(--font-en); font-size: var(--fs-num); font-weight: 700; letter-spacing: var(--ls-heading); }
.plan-price small { font-size: var(--fs-sm); font-weight: 700; margin-left: var(--sp-4); letter-spacing: 0; }
/* フルプランが下位プランを内包していることを、一覧の前に明示する */
.plan-inherit {
  display: flex; align-items: center; gap: var(--sp-8);
  margin-top: var(--sp-24);
  font-size: var(--fs-sm); font-weight: 700;
}
.plan-inherit span { font-family: var(--font-en); font-size: var(--fs-h4); color: var(--mark); }
.plan-group {
  margin-top: var(--sp-24);
  margin-bottom: var(--sp-16);
  font-size: var(--fs-h4); font-weight: 700;
}

/* 機能ツリー。第2・第3階層は罫線で親子関係を示す */
.planfeat-list { display: grid; gap: var(--sp-8); }
.planfeat-list .lv1 { font-weight: 700; }
.planfeat-list .lv2 { padding-left: var(--sp-16); border-left: 1px solid var(--line); margin-left: var(--sp-4); }
.planfeat-list .lv3 { padding-left: var(--sp-32); border-left: 1px solid var(--line); margin-left: var(--sp-4); }
.planfeat-list .lv1 + .lv1,
.planfeat-list .lv2 + .lv1 { margin-top: var(--sp-8); }

/* ==========================================================================
   FAQ
   ========================================================================== */
.faq { border-top: 1px solid var(--line); }
.faq-item { border-bottom: 1px solid var(--line); }
.faq-item summary {
  position: relative;
  list-style: none;
  cursor: pointer;
  padding: var(--sp-24) var(--sp-56) var(--sp-24) var(--sp-32);
  font-size: var(--fs-sm); font-weight: 700; line-height: var(--lh-snug);
  transition: opacity .2s var(--ease);
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary:hover { opacity: .6; }
.faq-item summary::before {
  content: "Q";
  position: absolute; left: 0; top: 24px;
  font-family: var(--font-en); font-size: var(--fs-sm); font-weight: 700;
}
.faq-item summary::after {
  content: "";
  position: absolute; right: 6px; top: 33px;
  width: 11px; height: 11px;
  border-right: 1.5px solid var(--ink);
  border-bottom: 1.5px solid var(--ink);
  transform: rotate(45deg);
  transition: transform .3s var(--ease);
}
.faq-item[open] summary::after { transform: rotate(-135deg); top: 37px; }
.faq-body {
  position: relative;
  padding: 0 var(--sp-32) var(--sp-32);
  max-width: 44em;
  font-size: var(--fs-sm); color: var(--muted); line-height: var(--lh-loose);
}
.faq-body::before {
  content: "A";
  position: absolute; left: 0; top: 0;
  font-family: var(--font-en); font-size: var(--fs-sm); font-weight: 700;
  color: var(--muted-2);
}
.faq-body p + p { margin-top: var(--sp-12); }
.faq-formula {
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: var(--sp-16) var(--sp-16);
  font-size: var(--fs-meta);
  color: var(--ink);
  background: var(--soft-2);
}
.faq-body .note { margin-top: var(--sp-8); }

/* ==========================================================================
   CTA
   ========================================================================== */
.cta { position: relative; background: var(--dark); color: var(--white); padding: var(--sp-96) 0; overflow: hidden; }

/* 背景写真。黒のスクリムで白文字のコントラストを確保する */
.cta-bg { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.cta-bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: .38;
}
.cta-bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(120% 100% at 50% 50%, rgba(17,17,17,.55) 0%, rgba(17,17,17,.86) 70%, rgba(17,17,17,.94) 100%);
}
.cta-inner { position: relative; z-index: 1; text-align: center; }
.cta-en {
  font-family: var(--font-en);
  font-size: var(--fs-caption); letter-spacing: var(--ls-caps); font-weight: 600;
  color: var(--white);
  margin-bottom: var(--sp-16);
}
.cta-title { font-size: var(--fs-h2); font-weight: 700; line-height: var(--lh-heading); }
.cta-text { margin-top: var(--sp-24); font-size: var(--fs-sm); color: var(--white); line-height: var(--lh-loose); }
.cta-actions { margin-top: var(--sp-40); display: flex; flex-wrap: wrap; gap: var(--sp-16); justify-content: center; }

/* ==========================================================================
   COMPANY
   ========================================================================== */
.company { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: var(--sp-40); align-items: start; }
.company-mv { display: grid; gap: var(--sp-16); }
.mv-item {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: var(--sp-32) var(--sp-32);
}
.mv-label {
  font-family: var(--font-en);
  font-size: var(--fs-caption); font-weight: 700; letter-spacing: var(--ls-caps);
  color: var(--muted-2); margin-bottom: var(--sp-12);
}
.mv-text { font-size: var(--fs-h3); font-weight: 700; line-height: var(--lh-snug); }

.company-table { font-size: var(--fs-sm); }
.company-table th, .company-table td {
  text-align: left; vertical-align: top;
  padding: var(--sp-16) 0;
  border-bottom: 1px solid var(--line);
  line-height: var(--lh-body);
}
.company-table th { width: 30%; font-weight: 700; padding-right: var(--sp-24); }
.company-table td { color: var(--muted); }
.company-table tr:first-child th, .company-table tr:first-child td { border-top: 1px solid var(--line); }
.company-table a { text-decoration: underline; text-underline-offset: 3px; }

/* ==========================================================================
   FOOTER
   ========================================================================== */
.site-footer { background: var(--dark-2); color: var(--white); padding: var(--sp-72) 0 var(--sp-40); }
.footer-top {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr);
  gap: var(--sp-48);
  padding-bottom: var(--sp-48);
  border-bottom: 1px solid rgba(255,255,255,.14);
}
.footer-tagline { margin-top: var(--sp-16); font-size: var(--fs-meta); color: var(--white); line-height: var(--lh-body); }
.footer-nav { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-32); }
.footer-nav-title { font-size: var(--fs-meta); font-weight: 700; letter-spacing: var(--ls-label); margin-bottom: var(--sp-16); }
.footer-nav li { margin-bottom: var(--sp-8); }
.footer-nav a { font-size: var(--fs-meta); color: var(--white); }

.footer-notes { padding: var(--sp-40) 0; border-bottom: 1px solid rgba(255,255,255,.14); }
.footer-notes-title { font-size: var(--fs-meta); font-weight: 700; margin-bottom: var(--sp-16); color: var(--white); }
.footer-notes li {
  position: relative; padding-left: var(--sp-16);
  max-width: 58em;
  font-size: var(--fs-caption); color: var(--white); line-height: var(--lh-loose);
}
.footer-notes li::before { content: "●"; position: absolute; left: 0; font-size: .5em; top: .95em; }

.copyright {
  margin-top: var(--sp-32);
  font-family: var(--font-en);
  font-size: var(--fs-caption); letter-spacing: var(--ls-base);
  color: var(--white);
  text-align: center;
}

/* ==========================================================================
   SCROLL REVEAL
   ========================================================================== */
.reveal { opacity: 0; transform: translateY(18px); }
.reveal.is-in {
  opacity: 1; transform: none;
  transition: opacity .7s var(--ease), transform .7s var(--ease);
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal, .reveal.is-in { opacity: 1; transform: none; transition: none; }
}
@media print {
  .reveal, .reveal.is-in { opacity: 1; transform: none; transition: none; }
  .site-header { position: static; }
}

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
@media (max-width: 1080px) {
  .gnav { gap: var(--sp-16); }
  .gnav a { font-size: var(--fs-caption); }
}

@media (max-width: 960px) {
  :root { --header-h: 64px; }

  :root { --sec-y: var(--sp-72); }
  .sec-head { margin-bottom: var(--sp-40); }

  /* nav drawer */
  .nav-toggle { display: block; }
  .gnav {
    position: fixed;
    inset: var(--header-h) 0 auto 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    background: var(--white);
    border-bottom: 1px solid var(--line);
    padding: var(--sp-8) var(--sp-24) var(--sp-32);
    max-height: calc(100dvh - var(--header-h));
    overflow-y: auto;
    transform: translateY(-12px);
    opacity: 0;
    visibility: hidden;
    transition: opacity .25s var(--ease), transform .25s var(--ease), visibility .25s;
  }
  .gnav.is-open { opacity: 1; visibility: visible; transform: none; }
  .gnav a { padding: var(--sp-16) 0; font-size: var(--fs-sm); border-bottom: 1px solid var(--line-2); }
  .gnav-cta { margin-top: var(--sp-24); border-bottom: 0 !important; }

  .hero { padding: calc(var(--header-h) + var(--sp-56)) 0 var(--sp-72); }
  .hero-inner { grid-template-columns: minmax(0, 1fr); gap: var(--sp-48); }
  .hero-visual { max-width: 620px; }
  .mock-phone { right: 0; bottom: -24px; width: 148px; }

  .cards-3, .cards-4, .steps, .diagram-scatter, .newfeat { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .cards-4 { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }

  .diagram-flow { grid-template-columns: minmax(0, 1fr); gap: var(--sp-16); }
  .flow-arrow { width: 1px; height: 24px; justify-self: center; }
  .flow-arrow::after { right: 50%; top: auto; bottom: 0; transform: translateX(50%) rotate(135deg); }

  .feature-block { grid-template-columns: minmax(0, 1fr); gap: var(--sp-32); margin-bottom: var(--sp-56); }
  .feature-reverse .feature-text { order: 0; }

  .case-main { grid-template-columns: minmax(0, 1fr); padding: var(--sp-32) var(--sp-24) var(--sp-32); gap: var(--sp-32); }
  .ba-grid { grid-template-columns: minmax(0, 1fr); }


  .flow-item { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--sp-24); }
  .flow-head { grid-column: 1 / -1; }
  .flow-item:not(:last-child)::after { left: calc(50% - 5px); }

  .company { grid-template-columns: minmax(0, 1fr); gap: var(--sp-32); }

  .footer-top { grid-template-columns: minmax(0, 1fr); gap: var(--sp-40); }
}

@media (max-width: 680px) {
  :root { --gutter: var(--sp-24); }

  body { font-size: var(--fs-sm); }

  :root { --sec-y: var(--sp-56); --card-p: var(--sp-24); }

  .logo-sub { display: none; }

  .hero-facts {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--sp-16);
  }
  .hero-facts li { min-width: 0; }
  .hero-facts strong { font-size: var(--fs-h3-lg); }
  .hero-facts li > span { font-size: var(--fs-caption); margin-top: var(--sp-4); }
  .hero-actions .btn { width: 100%; }

  .mock-row, .mock-row:last-child { grid-template-columns: minmax(0, 1fr); }
  .mock-phone { display: none; }

  .cards-3, .cards-4, .steps, .diagram-scatter, .newfeat,
  .price-base, .price-plans, .strength {
    grid-template-columns: minmax(0, 1fr);
  }
  .strength-x { padding: var(--sp-4) 0; }

  .card, .step, .scatter-col, .newfeat-item, .flow-item, .plan, .mv-item {
    padding: var(--sp-24) var(--sp-24);
  }
  /* 上の一括指定より後に置いて、写真付きカードの余白ゼロを維持する */
  .card-photo { padding: 0; }
  .card-body { padding: var(--sp-24) var(--sp-24) var(--sp-32); }
  .plan { padding: var(--sp-32) var(--sp-24); }
  .plan-tag { left: 24px; }


  .case-figs li { flex-direction: column; align-items: flex-start; gap: 2px; }
  .price-base-item { flex-direction: column; align-items: flex-start; gap: var(--sp-4); }

  .company-table th, .company-table td { display: block; width: 100%; }
  .company-table th { padding-bottom: var(--sp-4); border-bottom: 0; }
  .company-table tr:first-child td { border-top: 0; }
  .company-table th { padding-top: var(--sp-16); }
  .company-table td { padding-top: 0; }
  .company-table tr:first-child th { border-top: 1px solid var(--line); }

  .flow-item { grid-template-columns: minmax(0, 1fr); gap: var(--sp-24); }

  .footer-nav { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--sp-24); }

  .faq-item summary { font-size: var(--fs-sm); padding: var(--sp-24) var(--sp-40) var(--sp-24) var(--sp-32); }
  .faq-item summary::before { top: 20px; }
  .faq-item summary::after { top: 28px; }
  .faq-item[open] summary::after { top: 32px; }
  .faq-body { padding: 0 0 var(--sp-24) var(--sp-32); }

  .cta { padding: var(--sp-72) 0; }
  .cta-actions .btn { width: 100%; }
}

/* ==========================================================================
   AT A GLANCE — ファーストビュー直下で全体像を掴ませる3ステップ
   ========================================================================== */
.glance-steps {
  display: grid;
  grid-template-columns: 1fr 48px 1fr 48px 1fr;
  gap: var(--sp-16);
  align-items: stretch;
}
.glance-step {
  position: relative;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: var(--sp-32) var(--sp-32) var(--sp-32);
  background: var(--white);
  text-align: center;
}
.glance-no {
  display: inline-block;
  font-family: var(--font-en);
  font-size: var(--fs-caption); font-weight: 700; letter-spacing: var(--ls-caps);
  color: var(--white); background: var(--ink);
  border-radius: 999px; padding: var(--sp-4) var(--sp-12);
  margin-bottom: var(--sp-24);
}
/* 線画アイコン。塗りを持たせず、白黒基調に馴染ませる */
.glance-icon {
  width: 72px; height: 72px;
  margin: 0 auto var(--sp-16);
  fill: none;
  stroke: var(--ink);
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.glance-step h3 { font-size: var(--fs-h3); font-weight: 700; margin-bottom: var(--sp-12); }
.glance-step p { font-size: var(--fs-sm); color: var(--muted); line-height: var(--lh-loose); text-wrap: pretty; }

.glance-arrow { align-self: center; }
.glance-arrow svg {
  width: 40px; height: 24px;
  fill: none; stroke: var(--mark); stroke-width: 2;
  stroke-linecap: round; stroke-linejoin: round;
}

/* ==========================================================================
   BEFORE / AFTER — 月初のレポート業務の比較
   ========================================================================== */
.workload-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 64px minmax(0, 1fr);
  gap: var(--sp-16);
  align-items: stretch;
}
.workload-col {
  border-radius: var(--radius);
  padding: var(--sp-32) var(--sp-32) var(--sp-32);
  display: flex;
  flex-direction: column;
}
.workload-before { border: 1px dashed var(--line); background: var(--soft-2); }
.workload-after  { border: 1px solid var(--ink); background: var(--ink); color: var(--white); }

.workload-label {
  font-family: var(--font-en);
  font-size: var(--fs-caption); font-weight: 700; letter-spacing: var(--ls-caps);
  margin-bottom: var(--sp-16);
}
.workload-after .workload-label { color: var(--white); }
.workload-title { font-size: var(--fs-h3); font-weight: 700; line-height: var(--lh-snug); margin-bottom: var(--sp-24); }

/* --- 工数の内訳ドーナツ --- */
.donut {
  position: relative;
  width: min(220px, 100%);
  margin: var(--sp-8) auto var(--sp-16);
}
.donut svg { width: 100%; height: auto; overflow: visible; }
.donut-center {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  gap: 1px;
  font-family: var(--font-en);
  letter-spacing: var(--ls-heading);
}
.donut-center strong { font-size: var(--fs-num-sm); font-weight: 700; line-height: var(--lh-num); }
.donut-center small { font-size: var(--fs-h4); font-weight: 700; }
.donut-cap {
  text-align: center;
  font-size: var(--fs-caption);
  margin-bottom: var(--sp-24);
}
.workload-after .donut-cap { color: rgba(255,255,255,.8); }

.workload-legend { display: grid; gap: var(--sp-12); }
.workload-legend li {
  display: grid;
  grid-template-columns: 12px minmax(0, 1fr) auto;
  align-items: baseline;
  gap: var(--sp-12);
  font-size: var(--fs-sm);
  line-height: var(--lh-snug);
}
.workload-legend i {
  width: 12px; height: 12px;
  border-radius: 3px;
  background: var(--c);
  align-self: center;
}
.workload-legend b {
  font-family: var(--font-en); font-weight: 700;
  white-space: nowrap;
}
/* 「約」と単位は数字より小さくして、分数そのものを主役にする */
.workload-legend b small { font-family: var(--font); font-size: var(--fs-caption); }
.workload-legend b small:first-child { margin-right: 1px; }

/* AFTER側で消える4工程 */
.workload-remain {
  font-size: var(--fs-sm);
  font-weight: 700;
  padding-top: var(--sp-16);
  border-top: 1px solid rgba(255,255,255,.28);
}

.workload-sum {
  margin-top: auto;
  padding-top: var(--sp-24);
  font-size: var(--fs-h4);
  font-weight: 700;
}
.workload-before .workload-sum { border-top: 1px solid var(--line); }
.workload-after  .workload-sum { border-top: 1px solid rgba(255,255,255,.28); }

/* 横並びのときは右向き、縦積みのときは下向きにする */
.workload-vs { align-self: center; justify-self: center; transform: rotate(-90deg); }
.workload-vs svg {
  width: 24px; height: 40px;
  fill: none; stroke: var(--mark); stroke-width: 2;
  stroke-linecap: round; stroke-linejoin: round;
}

@media (max-width: 960px) {
  .glance-steps { grid-template-columns: minmax(0, 1fr); }
  .glance-arrow { justify-self: center; transform: rotate(90deg); }
  .workload-grid { grid-template-columns: minmax(0, 1fr); }
  .workload-vs { transform: rotate(0deg); }
}

@media (max-width: 680px) {
  .glance-step { padding: var(--sp-32) var(--sp-24) var(--sp-24); }
  .workload-col { padding: var(--sp-24) var(--sp-24) var(--sp-24); }
}

/* ==========================================================================
   管理画面キャプチャ
   ========================================================================== */
.shot {
  display: block;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--white);
  box-shadow: 0 22px 50px -34px rgba(0,0,0,.4);
}
.shot img { width: 100%; height: auto; }

/* カード上部に置く場合は、画面の上部（重要な指標が並ぶ位置）を見せる */
.card-shot img {
  aspect-ratio: 16 / 10;
  object-fit: cover;
  object-position: top center;
}
/* キャプチャが無いカードは、上部に余白を足して他と高さを揃える */
.card-noshot .card-body { padding-top: var(--sp-32); }

/* ヘッダー・フッターの公式ロゴ */
.logo img { width: 220px; height: auto; }
.footer-logo { width: 180px; height: auto; }

@media (max-width: 680px) {
  .logo img { width: 180px; }
}

/* サービス概要フロー図のENGINEに入れる白抜きロゴ */
.flow-logo {
  width: 300px;
  height: 100px;
  object-fit: contain;
  margin: 0 auto;
}
@media (max-width: 680px) {
  .flow-logo { width: 240px; height: 80px; }
}

/* ==========================================================================
   ライトボックス（管理画面キャプチャの拡大表示）
   ========================================================================== */
.shot-zoom { cursor: zoom-in; position: relative; }
.shot-zoom:focus-visible { outline: 2px solid var(--ink); outline-offset: 4px; }

/* 拡大できることが分かるよう、右下に控えめな目印を出す */
.shot-zoom::after {
  content: "＋ クリックで拡大";
  position: absolute;
  right: 10px;
  bottom: 10px;
  font-size: var(--fs-caption);
  font-weight: 700;
  letter-spacing: var(--ls-base);
  color: var(--white);
  background: rgba(17,17,17,.82);
  border-radius: 999px;
  padding: var(--sp-4) var(--sp-12);
  opacity: 0;
  transition: opacity .2s var(--ease);
  pointer-events: none;
}
.shot-zoom:hover::after,
.shot-zoom:focus-visible::after { opacity: 1; }

body.is-locked { overflow: hidden; }

.lightbox {
  position: fixed;
  inset: 0;
  /* 固定ヘッダー(100)・スキップリンク(300)より必ず前に出す */
  z-index: 999;
  display: grid;
  place-items: center;
  padding: var(--sp-32);
  background: rgba(10,10,10,.92);
  opacity: 0;
  visibility: hidden;
  transition: opacity .22s var(--ease), visibility .22s;
}
.lightbox.is-open { opacity: 1; visibility: visible; }

.lightbox-inner {
  width: min(1600px, 96vw);
  max-height: 92vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-16);
}
.lightbox-caption {
  color: var(--white);
  font-size: var(--fs-sm);
  font-weight: 700;
  letter-spacing: var(--ls-base);
}
.lightbox-img {
  width: 100%;
  height: auto;
  max-height: 86vh;
  object-fit: contain;
  border-radius: 10px;
  background: var(--white);
  /* 拡大時は等倍以上に伸ばさず、原寸の精細さを保つ */
  cursor: default;
}

.lightbox-close {
  position: absolute;
  top: 20px;
  right: 20px;
  width: 44px;
  height: 44px;
  border: 1px solid rgba(255,255,255,.5);
  border-radius: 50%;
  background: transparent;
  cursor: pointer;
}
.lightbox-close::before,
.lightbox-close::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 18px;
  height: 1.5px;
  background: var(--white);
}
.lightbox-close::before { transform: translate(-50%, -50%) rotate(45deg); }
.lightbox-close::after  { transform: translate(-50%, -50%) rotate(-45deg); }
.lightbox-close:hover { background: rgba(255,255,255,.12); }

@media (max-width: 680px) {
  .lightbox { padding: var(--sp-16); }
  .lightbox-close { top: 12px; right: 12px; }
  /* タッチ環境ではホバーが無いので、目印を常に出す */
  .shot-zoom::after { opacity: 1; }
}

/* ---------- ツールチップ ----------
   ホバーだけだとタッチ環境で開けないので、クリックとキーボード操作にも対応する */
.tip { position: relative; display: inline-block; }
.tip-btn {
  font: inherit;
  color: inherit;
  letter-spacing: inherit;
  background: none;
  border: 0;
  border-bottom: 1px dotted var(--mark);
  padding: 0;
  text-align: left;
  cursor: help;
}
.tip-btn::after {
  content: "?";
  display: inline-grid;
  place-items: center;
  width: 1em; height: 1em;
  margin-left: 6px;
  vertical-align: 1px;
  font-family: var(--font-en);
  /* 装飾の記号なので、尺度に載せず親の文字サイズに追従させる */
  font-size: .72em; font-weight: 700;
  color: var(--mark);
  border: 1px solid var(--line);
  border-radius: 50%;
}
/* 吹き出しは行（li）の幅に合わせる。
   機能名を基準にすると、階層が深い項目で画面右端からはみ出す */
.planfeat-list li { position: relative; }
.planfeat-list .tip { position: static; }
.tip-body {
  position: absolute;
  left: 0; right: 0; top: calc(100% + var(--sp-8));
  z-index: 20;
  padding: var(--sp-12) var(--sp-16);
  background: var(--dark);
  color: var(--white);
  border-radius: var(--radius-sm);
  font-size: var(--fs-caption); font-weight: 400;
  line-height: var(--lh-body); letter-spacing: var(--ls-base);
  box-shadow: 0 16px 34px -20px rgba(0,0,0,.7);
  opacity: 0; visibility: hidden;
  transform: translateY(-4px);
  transition: opacity .18s var(--ease), transform .18s var(--ease), visibility .18s;
  pointer-events: none;
}
.tip:hover .tip-body,
.tip-btn:focus-visible + .tip-body,
.tip-btn[aria-expanded="true"] + .tip-body {
  opacity: 1; visibility: visible; transform: none;
}


/* ==========================================================================
   常時アクセスできるCTA
   ========================================================================== */

/* 導入事例の直後に置く帯。証明を見た直後が、いちばん行動に近い */
.cta-band {
  border-block: 1px solid var(--line);
  background: var(--soft-2);
  padding: var(--sp-40) 0;
}
.cta-band-inner {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: var(--sp-16) var(--sp-32);
}
.cta-band-text { font-size: var(--fs-h4); font-weight: 700; line-height: var(--lh-snug); }

/* スマートフォン用の追従CTA。
   PCは固定ヘッダーに資料請求ボタンが常時出ているので、こちらは出さない。
   ヒーローと最終CTAが見えているあいだは、同じボタンが重複するので隠す */
.cta-fixed {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 90;
  display: none;
  padding: var(--sp-8) var(--sp-16);
  padding-bottom: calc(var(--sp-8) + env(safe-area-inset-bottom, 0px));
  background: rgba(255,255,255,.94);
  backdrop-filter: saturate(180%) blur(12px);
  border-top: 1px solid var(--line);
  transform: translateY(110%);
  transition: transform .3s var(--ease);
}
.cta-fixed .btn { margin-top: 0; }
.cta-fixed.is-in { transform: none; }

@media (max-width: 960px) {
  .cta-fixed { display: block; }
  /* 追従CTAがフッター末尾に重ならないよう、その高さぶん空ける */
  .site-footer { padding-bottom: calc(var(--sp-56) + 60px); }
  .cta-band { padding: var(--sp-32) 0; }
  .cta-band-inner { flex-direction: column; }
  .cta-band-text { text-align: center; }
  .cta-band .btn { width: 100%; }
}

/* キーボード操作でナビゲーションを読み飛ばせるようにする */
.skip-link {
  position: absolute;
  top: 8px;
  left: 8px;
  z-index: 300;
  padding: var(--sp-12) var(--sp-24);
  border-radius: 999px;
  background: var(--ink);
  color: var(--white);
  font-size: var(--fs-sm);
  font-weight: 700;
  transform: translateY(-200%);
  transition: transform .2s var(--ease);
}
.skip-link:focus { transform: translateY(0); opacity: 1; }

/* 文節のまとまり。この内部では改行させない。
   word-break: auto-phrase の未対応ブラウザ（Safari等）でも、
   語の途中で改行されるのを防ぐ。 */
.nb { display: inline-block; }

/* AFTER側。BEFOREの作業が「消える」ことを、同じ項目を打ち消して見せる */
.workload-gone { display: grid; gap: var(--sp-8); margin-bottom: var(--sp-24); }
.workload-gone li {
  position: relative;
  padding-left: var(--sp-24);
  font-size: var(--fs-sm);
  line-height: var(--lh-snug);
  color: rgba(255,255,255,.8);
  text-decoration: line-through;
  text-decoration-thickness: 1px;
}
.workload-gone li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .52em;
  width: 14px;
  height: 14px;
  border: 1.5px solid rgba(255,255,255,.8);
  border-radius: 50%;
}
.workload-gone li::after {
  content: "";
  position: absolute;
  left: 4px;
  top: .78em;
  width: 6px;
  height: 6px;
  border-left: 1.5px solid rgba(255,255,255,.8);
  border-bottom: 1.5px solid rgba(255,255,255,.8);
  transform: rotate(-45deg) translate(-1px, -1px);
}

/* 各社の公式サイトへの導線 */
.strength-item { display: flex; flex-direction: column; }
/* 縦並びのflexは既定で幅いっぱいに伸びる。枠線・下線を持つ要素は文字幅に留める */
.strength-tag, .strength-link { align-self: flex-start; }
.strength-link {
  margin-top: auto;
  padding-top: var(--sp-24);
  font-size: var(--fs-sm);
  font-weight: 700;
  color: var(--white);
  text-decoration: underline;
  text-underline-offset: 4px;
  text-decoration-thickness: 1px;
}
.strength-link::after { content: " ↗"; text-decoration: none; }