@charset "UTF-8";

/* ==========================================================================
   FLARO MARKETING — Landing Page
   Monotone (white background / black text) design system
   値は FLARO デザインシステム（コーポレート／製品サイトの src/styles/global.css と同じ）に合わせている。
   ========================================================================== */

: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;
  --error:      #c62828;   /* フォームの入力エラーだけに使う */

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

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

  /* 字間。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-20:  20px;
  --sp-24:  24px;
  --sp-32:  32px;
  --sp-40:  40px;
  --sp-48:  48px;
  --sp-56:  56px;
  --sp-72:  72px;
  --sp-80:  80px;
  --sp-96:  96px;
  --sp-120: 120px;

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

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

  --container:  1400px;
  --gutter:     40px;

  --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: "Inter", "Helvetica Neue", Arial, sans-serif;
  /* 英字ラベルと数字は Inter（Webフォント）。Helvetica Neue は Mac にしか無く、
     Windows では Arial に置き換わって大きな数字の形が変わってしまうため */
  --font-num: "Inter", "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; }

/* 改行位置の出し分け。文節で切りたい位置が画面幅で変わるため */
.br-sp { display: none; }

/* ---------- 日本語の改行位置 ----------
   既定の折り返しは「ヒトサ／ラ」のように語の途中でも改行してしまう。
   auto-phrase は文節を見て改行位置を決めるため、画面幅を問わず読みやすい。
   未対応ブラウザ（Safari等）では通常の折り返しに戻るだけで、崩れることはない。 */
p, li, dd, dt, summary, figcaption {
  word-break: auto-phrase;
  line-break: strict;
}
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（pretty・balance）は、Safari では各行の長さをそろえようとして、枠の途中で早めに折り返してしまう。
   文節で折り返せるブラウザ（Chrome など）だけに使う。見出しは行ごとの長さを揃え、本文は最終行の1文字落ちを防ぐ */
@supports (word-break: auto-phrase) {
  p, li, dd, dt, summary, figcaption { text-wrap: pretty; }
  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 { 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-40); }

.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-16);
  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 { box-shadow: 0 6px 24px -18px rgba(0,0,0,.35); }

.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-56)) 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-40);
  /* キャプチャは見出しの高さから始める。中央に揃えると本文の途中まで
     下がってしまい、最初に目に入る位置から外れる。 */
  align-items: start;
}

/* キャプチャは画面の右端まで抜く。コンテナの外側に残っている余白
   （左右振り分けぶん＋ガター）を負のマージンで打ち消す。
   .hero に overflow: hidden があるので、横スクロールは出ない。 */
@media (min-width: 961px) {
  .hero-visual {
    margin-right: calc(-1 * ((100vw - min(100vw, var(--container))) / 2 + var(--gutter)));
  }
  /* 画面外へ続いて見せたいので、右の角丸と枠線は落とす */
  .hero-visual .shot {
    border-right: 0;
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
  }
  /* 読み込みと同時に右の画面外からせり出す。
     JSが付ける .reveal は reveal と is-in が1フレーム差で付くため、
     初期状態が描かれずに動きが出ない。ここはCSSアニメーションで直接動かし、
     both で最終状態を保持して .reveal の opacity:0 に負けないようにする。 */
  .hero-visual { animation: hero-slide-in .9s var(--ease) both; }
}

@keyframes hero-slide-in {
  from { opacity: 0; transform: translateX(96px); }
  to   { opacity: 1; transform: none; }
}

.hero-title {
  font-size: var(--fs-h1);
  font-weight: 700;
  line-height: var(--lh-heading);
  letter-spacing: var(--ls-heading);
}
/* 業界初バッジ。CTAの直後に「印章＋説明文」の組みで置く。
   同種の認定バッジ（ITreview / BOXIL 等）と同じく、主要動線の直後に添えて
   信頼の裏づけとして効かせる。キャプチャには重ねない ── 重ねると
   ダッシュボードの数字を隠すうえ、狭い画面で逃げ場がなくなるため。
   モノトーンの中で金だけが色を持つので、ここが認定の印だと一目でわかる。 */
.hero-award {
  display: flex;
  align-items: center;
  gap: var(--sp-16);
  margin-top: var(--sp-32);
}
.award-seal {
  flex: 0 0 auto;
  width: 116px;
  height: 116px;
  filter: drop-shadow(0 10px 20px rgba(163,125,28,.3));
}
.award-seal text { font-family: var(--font); }
.seal-sub  { font-size: 11px; font-weight: 700; letter-spacing: var(--ls-label); }
.seal-main { font-size: 23px; font-weight: 700; letter-spacing: var(--ls-heading); }

.hero-award-text { display: flex; flex-direction: column; gap: var(--sp-4); min-width: 0; }
.hero-award-lead {
  font-size: var(--fs-sm);
  line-height: var(--lh-body);
  font-weight: 700;
}
.hero-award-note {
  font-size: var(--fs-caption);
  line-height: var(--lh-body);
  color: var(--muted);
}
.hero-award-note a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }


/* 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-actions { margin-top: var(--sp-32); display: flex; flex-wrap: wrap; gap: var(--sp-16); }

/* 実績数値はCTAの直後。ここまでをPCの1画面に収めたいので、
   ヒーロー内の縦の間隔はこの3か所（リード・CTA・数値）で詰めている。 */
.hero-proof { margin-top: var(--sp-32); }
.hero-facts {
  padding-top: var(--sp-24);
  border-top: 1px solid var(--line);
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-40);
}
.hero-facts strong {
  display: block;
  white-space: nowrap;
  font-family: var(--font-num);
  font-size: var(--fs-num);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -.02em;
}
/* 単位は数字と同じ大きさだと数字が埋もれる。.4em に落として主役を立てる */
.hero-facts small { font-size: .4em; font-weight: 700; margin-left: var(--sp-4); letter-spacing: 0; }
/* 何の数字かを、数字の上に黒いタグで先に見せる（デザインシステムの StatFacts） */
.hero-facts li { display: flex; flex-direction: column; align-items: flex-start; gap: var(--sp-4); }
.hero-facts li > span {
  order: -1;
  display: inline-flex; align-items: center; gap: var(--sp-8);
  padding: var(--sp-4) var(--sp-16);
  border-radius: 999px;
  background: var(--ink); color: var(--white);
  font-size: var(--fs-meta); font-weight: 700; letter-spacing: var(--ls-label);
  line-height: var(--lh-snug);
}
.hero-facts li > span::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--white); opacity: .7; }
.hero-facts-note { margin-top: var(--sp-8); font-size: var(--fs-caption); color: var(--muted-2); }

.hero-visual { position: relative; }

/* 左右の高さを揃える。キャプチャの上下を、左カラムの先頭（見出し）と
   末尾（バッジ）にぴったり合わせる。行の高さは、本文の高さと
   キャプチャが原寸で必要とする高さの、高いほうで決まる。
   - 本文のほうが高いとき（おおむね 1200〜1600px）：キャプチャを本文の高さまで
     引き伸ばす。縦横比は保つので幅も一緒に伸び、あふれたぶんは画面の右外に出る
     （.hero の overflow: hidden で切れる）。もともと右端まで抜くつくりなので
     見え方は変わらず、ダッシュボードの数字はむしろ大きく読める。
   - キャプチャのほうが高いとき（おおむね 1600px 以上）：本文側が伸びる。
     余ったぶんは「見出し／CTA／数値／バッジ」の3か所の間に等分して足す。
     数値と注記は .hero-proof で束ねてあるので、この2つの間は開かない。
   コンテナ幅（1400px＋ガター）に近い 1200px 以上でだけ効かせる。
   これより狭いと左カラムが折り返しで伸び、キャプチャの拡大が過ぎて
   右のカードが画面外へ出すぎる。 */
@media (min-width: 1200px) {
  .hero-inner { align-items: stretch; }
  .hero-copy { display: flex; flex-direction: column; justify-content: space-between; }
  /* キャプチャの縦横比。shot-board-800w.webp の width/height と合わせる */
  .hero-visual { aspect-ratio: 800 / 615; }
  .hero-visual .shot { position: absolute; inset: 0; }
  /* 箱は縦横比どおりなので通常は切り取りが起きない。cover は保険 */
  .hero-visual .shot img { height: 100%; object-fit: cover; object-position: left top; }
}

/* ==========================================================================
   MEDIA STRIP
   ========================================================================== */
.strip { border-block: 1px solid var(--line); padding: var(--sp-32) 0; background: var(--white); }
/* 「対応媒体」「連携POSレジ・店舗システム」は、黒い角丸のラベルで見出しにする */
.strip-label {
  display: table; margin: 0 auto var(--sp-16);
  padding: var(--sp-4) var(--sp-16);
  border-radius: 999px; background: var(--ink); color: var(--white);
  font-size: var(--fs-meta); letter-spacing: var(--ls-label); font-weight: 700;
}
/* 対応媒体と連携POSは、間に線を引かずに続けて見せる */
.strip:has(+ .strip) { border-bottom: 0; padding-bottom: var(--sp-8); }
/* ロゴ列。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;
}

/* 連携POSレジ。点数が多いので一回り小さい箱で組む。
   帯が2本続くので、境目の罫線は1本にまとめる。 */
.strip + .strip { border-top: 0; }
.strip-note {
  text-align: center;
  font-size: var(--fs-sm);
  line-height: var(--lh-body);
  color: var(--muted);
  margin-bottom: var(--sp-16);
}
.strip-logos-sm { gap: var(--sp-4) var(--sp-8); }
.strip-logos-sm img { width: 140px; height: 48px; }

/* 連携開発中の媒体。各社のロゴ使用ガイドラインに配慮し、名称のテキストで示す */
.strip-soon {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: flex-start;
  gap: var(--sp-16) var(--sp-40);
  margin-top: var(--sp-32);
}
.strip-soon li {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-8);
}
.strip-soon-name {
  font-size: var(--fs-h4);
  font-weight: 700;
  letter-spacing: var(--ls-base);
}
.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-8);
}
.card-title { font-size: var(--fs-h4); font-weight: 700; line-height: var(--lh-snug); margin-bottom: var(--sp-8); }
.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-12);
}
.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;
  display: flex; flex-direction: column;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--white);
  padding: var(--sp-24) var(--sp-32);
}
/* 入力と出力で項目の数が違っても釣り合うよう、見出しの下の項目は箱の上下の真ん中に置く */
.flow-box > .flow-block:first-of-type { margin-top: auto; }
.flow-box > .flow-block:last-of-type { margin-bottom: auto; }
.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-sm); font-weight: 700; margin-bottom: var(--sp-8); }
.flow-block li { font-size: var(--fs-sm); color: var(--muted); line-height: var(--lh-body); position: relative; padding-left: var(--sp-16); }
.flow-block li::before { content: ""; position: absolute; left: 0; top: .85em; width: 6px; 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-8);
}
.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-8); 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-8);
}
.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-12);
}
.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-8); }
.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); line-height: var(--lh-num); 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);
}
/* ロゴと社名は先方の公式サイトへのリンク。見た目は変えず、
   触れるものだと分かる合図だけ足す。
   img は display:block なので、囲むリンクも block にして
   タグ（導入事例）と同じ行に上がってこないようにする */
.case-logo-link { display: block; width: fit-content; }
.case-title-link:hover { text-decoration: underline; text-underline-offset: 4px; }
.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; line-height: var(--lh-snug); margin-bottom: var(--sp-8); }
.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; line-height: var(--lh-snug); }
.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: center; justify-content: space-between; gap: var(--sp-12); }
.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-4); }
.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)
   ========================================================================== */
/* ご利用までの流れ：番号の丸を縦の線でつないだタイムライン。
   各段階の下に「貴社対応」「FLARO支援」を左右に並べ、横幅は読みやすい幅に絞る */
.flow { display: grid; max-width: 960px; margin-inline: auto; }
.flow-item {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--sp-12) var(--sp-16);
  padding: 0 0 var(--sp-40) 88px;
}
.flow-item:last-child { padding-bottom: 0; }
/* 丸と丸をつなぐ線。装飾なので読み上げ対象にしない */
.flow-item:not(:last-child)::before {
  content: "";
  position: absolute;
  left: 27px; top: 64px; bottom: 8px;
  width: 2px; background: var(--line);
}
.flow-head { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-8) var(--sp-16); min-height: 56px; }
.flow-no {
  position: absolute; left: 0; top: 0;
  width: 56px; height: 56px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--ink); color: var(--white);
  font-family: var(--font-en); font-size: var(--fs-h4); font-weight: 700; line-height: 1;
}
.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 {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: var(--sp-20) var(--sp-24);
}
.flow-role-title {
  font-size: var(--fs-caption); font-weight: 700; letter-spacing: var(--ls-label);
  color: var(--ink);
  background: var(--soft);
  border-radius: 999px;
  padding: 3px var(--sp-12);
  display: inline-block;
  margin-bottom: var(--sp-12);
}
/* FLARO側の支援は黒いラベルで見分ける */
.flow-role:last-child .flow-role-title { background: var(--ink); color: var(--white); }
.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; line-height: var(--lh-num); }
.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; line-height: var(--lh-num); 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; }
  .hero-visual { animation: 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-32)) 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); padding-left: 60px; }
  .flow-no { width: 44px; height: 44px; font-size: var(--fs-sm); }
  .flow-head { min-height: 44px; }
  .flow-item:not(:last-child)::before { left: 21px; top: 52px; }

  .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; }

  /* スマホは「左に項目名、右に数字」の行で並べる（flaro.jp 本体のスマホ表示と同じ形）。
     3列に詰めると数字が小さく、黒いタグが横に並んで重たく見えるため */
  .hero-facts { display: block; padding-top: 0; }
  .hero-facts li {
    flex-direction: row; justify-content: space-between; align-items: center; gap: var(--sp-16);
    padding-block: var(--sp-12);
    border-bottom: 1px solid var(--line);
  }

  /* 対応媒体は2列。Googleマップだけ最下段に単独で置き、中央に来るようにする */
  .strip-logos {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--sp-16) var(--sp-8);
    justify-items: center;
  }
  /* 印章を小さくして、横の説明文の行数を1行ぶん減らす */
  .hero-award { gap: var(--sp-12); margin-top: var(--sp-24); }
  .award-seal { width: 92px; height: 92px; }

  .br-pc { display: none; }
  .br-sp { display: inline; }

  .strip-logo-wide { grid-column: 1 / -1; }
  .strip-logos img { width: 150px; height: 54px; }
  /* POSは20点あるので、2列だと帯が縦に伸びすぎる。3列に収まる大きさへ落とす */
  .strip-logos-sm { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-8) var(--sp-4); }
  /* 320pxでは1列の幅が100pxを下回るので、列からはみ出さないよう上限として扱う */
  .strip-logos-sm img { width: 100%; max-width: 100px; height: 36px; }
  .strip-soon { gap: var(--sp-16) var(--sp-24); }
  .strip-soon-name { font-size: var(--fs-sm); }
  .hero-facts strong { font-size: var(--fs-num-sm); }
  .hero-facts li > span { padding: var(--sp-4) var(--sp-12); font-size: var(--fs-caption); white-space: nowrap; }
  .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-role, .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); }


  .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-16);
}
/* 線画アイコン。塗りを持たせず、白黒基調に馴染ませる */
.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-8); }
.glance-step p { font-size: var(--fs-sm); color: var(--muted); line-height: var(--lh-loose); }

.glance-arrow { align-self: center; justify-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; }

/* カード上部に置く場合は、画面の上部（重要な指標が並ぶ位置）を見せる */
/* キャプチャの縦横比はまちまち（1.40〜1.84）。cover で切り抜くと、
   枠より横長のものだけ左右が削られて他と揃わない。
   全体を収める contain にして、どのキャプチャも欠けないようにする。
   カードの高さを揃えるため、枠の比率自体は共通のまま。 */
.card-shot {
  background: var(--white);
  padding: var(--sp-8);
}
.card-shot img {
  aspect-ratio: 16 / 10;
  object-fit: contain;
  object-position: center;
}
/* ヘッダー・フッターの公式ロゴ */
.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;
  /* iOSは inset:0 がURLバーを含む大きい方の高さになるため、
     中央揃えの基準が実際の表示領域とずれ、画像が上に寄って見える。
     dvh（いま見えている高さ）を基準にする */
  height: 100vh;
  height: 100dvh;
  /* 固定ヘッダー(100)・スキップリンク(300)より必ず前に出す */
  z-index: 999;
  display: grid;
  place-items: center;
  padding: var(--sp-32);
  background: rgba(10,10,10,.96);
  opacity: 0;
  visibility: hidden;
  transition: opacity .22s var(--ease), visibility .22s;
}
.lightbox.is-open { opacity: 1; visibility: visible; }

/* グリッドの中央に置くのは画像だけにする。
   見出しを同じ列に積むと、その高さのぶん画像が上へずれる */
.lightbox-inner {
  grid-area: 1 / 1;
  /* 96vw だと余白(padding)より広くなる。中央揃えは領域からはみ出すと
     ブラウザが開始側へ寄せてしまうため、必ず領域内に収まる幅にする */
  width: 100%;
  max-width: 1600px;
  display: flex;
  justify-content: center;
}
.lightbox-caption {
  position: absolute;
  left: 0; right: 0;
  bottom: var(--sp-24);
  text-align: center;
  color: var(--white);
  font-size: var(--fs-sm);
  font-weight: 700;
  letter-spacing: var(--ls-base);
}
.lightbox-img {
  width: 100%;
  height: auto;
  max-height: 78dvh;
  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; }
}

/* ---------- 問い合わせフォーム（モーダル） ----------
   CTAはページ内リンクではなくこのモーダルを開く。フォームはHubSpotの埋め込みで、
   中身の見た目は先方のスタイルに任せ、こちらは器と横幅だけ整える。 */
.modal {
  position: fixed;
  inset: 0;
  /* iOSのURLバーぶんのずれを避ける（ライトボックスと同じ理由） */
  height: 100vh;
  height: 100dvh;
  z-index: 999;
  display: grid;
  place-items: center;
  padding: var(--sp-24);
  background: rgba(10,10,10,.62);
  opacity: 0;
  transition: opacity .22s var(--ease);
}
/* .modal は display:grid なので、hidden 属性だけでは消えない */
.modal[hidden] { display: none; }
.modal.is-open { opacity: 1; }

.modal-dialog {
  position: relative;
  width: 100%;
  max-width: 560px;
  max-height: calc(100dvh - var(--sp-48));
  overflow-y: auto;
  overscroll-behavior: contain;
  background: var(--white);
  border-radius: var(--radius);
  padding: var(--sp-40);
  box-shadow: 0 30px 80px -40px rgba(0,0,0,.6);
  transform: translateY(10px);
  transition: transform .22s var(--ease);
}
.modal.is-open .modal-dialog { transform: none; }

.modal-close {
  position: absolute;
  top: var(--sp-16);
  right: var(--sp-16);
  width: 40px;
  height: 40px;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: var(--white);
  cursor: pointer;
}
.modal-close::before,
.modal-close::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 16px;
  height: 1.5px;
  background: var(--ink);
}
.modal-close::before { transform: translate(-50%, -50%) rotate(45deg); }
.modal-close::after  { transform: translate(-50%, -50%) rotate(-45deg); }
.modal-close:hover { background: var(--soft); }

.modal-title {
  font-size: var(--fs-h3);
  font-weight: 700;
  line-height: var(--lh-heading);
  letter-spacing: var(--ls-heading);
  padding-right: var(--sp-40);
}
.modal-text { margin-top: var(--sp-12); font-size: var(--fs-sm); color: var(--muted); line-height: var(--lh-body); }

/* HubSpot側のCSSと張り合わない。フォントと横幅だけこちらに合わせる */
.modal-form { margin-top: var(--sp-24); font-family: var(--font); }
.modal-form iframe { width: 100% !important; border: 0; }
.modal-loading { font-size: var(--fs-sm); color: var(--muted); line-height: var(--lh-body); }

.modal-note { margin-top: var(--sp-24); font-size: var(--fs-caption); color: var(--muted-2); line-height: var(--lh-body); }
.modal-note a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }

@media (max-width: 680px) {
  .modal { padding: var(--sp-16); }
  .modal-dialog { padding: var(--sp-32) var(--sp-24); }
  .modal-close { top: var(--sp-8); right: var(--sp-8); width: 36px; height: 36px; }
}

/* ---------- ツールチップ ----------
   ホバーだけだとタッチ環境で開けないので、クリックとキーボード操作にも対応する */
.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: 1.5em; height: 1.5em;
  margin-left: 6px;
  vertical-align: 1px;
  font-family: var(--font-en);
  /* 装飾の記号なので、尺度に載せず親の文字サイズに追従させる */
  font-size: .72em; font-weight: 700;
  /* 行の高さを箱と同じにしないと、行ボックスのほうが高くなって
     文字が下にずれる。place-items が中央に置くのは行ボックスであって
     文字の墨面ではないため。 */
  line-height: 1;
  /* 「?」は字面が左に寄っているので、円の中心に見えるまで右へ寄せる */
  text-indent: .05em;
  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; }
/* モーダルや拡大表示を開いているあいだは引っ込める。
   backdrop-filter を持つので、重ねると背景の暗幕の上に浮いて見えてしまう */
body.is-locked .cta-fixed.is-in { transform: translateY(110%); }

@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; }

/* ==========================================================================
   動き（FLARO 本体サイトの src/scripts/motion.ts・fx.ts と同じ語彙）
   - 待機状態（伸びる前の棒、出る前の文字など）は html.js-motion のときだけ。
     js-motion は index.html の <head> で、動きを減らす設定でないときにだけ付く。
     スクリプトが動かない・動きを減らす設定・印刷では、最初から完成した状態を見せる。
   - グラフ（svg.chart）は画面に入ると main.js が .is-play を付けて再生する。
   ========================================================================== */

/* ---------- 管理画面（SVG で描き直した画面キャプチャ） ---------- */
svg.mk {
  display: block;
  width: 100%;
  height: auto;
  font-family: var(--font);
  /* 本文の字間・文字詰めを引き継ぐと、元画面より横に広がる */
  letter-spacing: 0;
  font-feature-settings: normal;
}
/* カード上部の枠は共通の 16:10。画面全体を収め、余りは白で埋める（画像の contain と同じ） */
.card-shot svg.mk { aspect-ratio: 16 / 10; }
/* ヒーロー（1200px 以上）は枠を本文の高さまで伸ばすので、画像の cover と同じく左上を基準に埋める */
@media (min-width: 1200px) {
  .hero-visual .shot svg.mk { height: 100%; }
}
.mk .mk-bar, .mk .mk-pop, .mk .mk-barx, .mk .mk-rule, .mk .mk-halo { transform-box: fill-box; }
.mk .mk-bar { transform-origin: 50% 100%; }
.mk :is(.mk-barx, .mk-rule) { transform-origin: 0 50%; }
.mk :is(.mk-pop, .mk-halo) { transform-origin: center; }
.mk .mk-bar { transition: filter .2s var(--ease); }
.mk .mk-bar:hover { filter: brightness(.88); }

@media screen and (prefers-reduced-motion: no-preference) {
  .js-motion .mk:not(.is-play) :is(.mk-card, .mk-fade, .mk-row, .mk-tip, .mk-halo) { opacity: 0; }
  .js-motion .mk:not(.is-play) .mk-bar { transform: scaleY(0); }
  .js-motion .mk:not(.is-play) :is(.mk-barx, .mk-rule) { transform: scaleX(0); }
  .js-motion .mk:not(.is-play) .mk-pop { transform: scale(0); }
  .js-motion .mk:not(.is-play) .mk-ring { stroke-dasharray: 0 100; }
  .js-motion .mk:not(.is-play) .mk-line { stroke-dasharray: 1; stroke-dashoffset: 1; }

  .mk.is-play .mk-card { animation: mk-fade .6s var(--ease) calc(var(--i, 0) * 80ms) both; }
  .mk.is-play .mk-fade { animation: mk-rise .6s var(--ease) calc(.3s + var(--i, 0) * 60ms) both; }
  .mk.is-play .mk-tip  { animation: mk-rise .5s var(--ease) .4s both; }
  .mk.is-play .mk-ring { animation: mk-sweep 1.5s var(--ease) calc(.2s + var(--i, 0) * .3s) both; }
  .mk.is-play .mk-halo { animation: mk-fade .8s var(--ease) 1.3s both, mk-breathe 3.2s ease-in-out 2.4s infinite; }
  .mk.is-play .mk-bar  { animation: mk-grow-y .8s var(--ease) calc(.5s + var(--i, 0) * 55ms) both; }
  .mk.is-play .mk-barx { animation: mk-grow-x .9s var(--ease) calc(1s + var(--i, 0) * 90ms) both; }
  .mk.is-play .mk-rule { animation: mk-grow-x .9s var(--ease) .3s both; }
  .mk.is-play .mk-line { stroke-dasharray: 1; animation: mk-draw 1.6s var(--ease) 1.1s both; }
  .mk.is-play .mk-pop  { animation: mk-pop .55s cubic-bezier(.34, 1.56, .64, 1) calc(1.2s + var(--i, 0) * 70ms) both; }
  /* 表の行は、上から1行ずつ打ち込まれるように出す */
  .mk.is-play .mk-row  { animation: mk-type .5s var(--ease) calc(.35s + var(--i, 0) * 75ms) both; }
}
@keyframes mk-fade   { from { opacity: 0; } }
@keyframes mk-rise   { from { opacity: 0; transform: translateY(10px); } }
@keyframes mk-type   { from { opacity: 0; transform: translateX(-14px); } }
@keyframes mk-sweep  { from { stroke-dasharray: 0 100; } }
@keyframes mk-grow-y { from { transform: scaleY(0); } }
@keyframes mk-grow-x { from { transform: scaleX(0); } }
@keyframes mk-draw   { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes mk-pop    { from { transform: scale(0); } }
@keyframes mk-breathe { 50% { transform: scale(1.02); opacity: .55; } }

/* 拡大表示に複製した SVG。縦横比を保ったまま、画面の高さの 78% に収める */
svg.mk.lightbox-svg { width: min(100%, calc(78dvh * var(--ar, 1.3))); height: auto; max-height: none; }

/* ---------- 月初の業務比較のドーナツ ---------- */
@media screen and (prefers-reduced-motion: no-preference) {
  .js-motion .donut[data-play]:not(.is-play) circle:not([stroke^="rgba"]) { stroke-dasharray: 0 402.12; }
  .js-motion .donut[data-play]:not(.is-play) .donut-center { opacity: 0; }
  .donut.is-play circle:not([stroke^="rgba"]) { animation: donut-sweep 1.1s var(--ease) both; }
  .donut.is-play circle:nth-child(2) { animation-delay: .25s; }
  .donut.is-play circle:nth-child(3) { animation-delay: .5s; }
  .donut.is-play circle:nth-child(4) { animation-delay: .75s; }
  .donut.is-play .donut-center { animation: mk-fade .6s var(--ease) .2s both; }
}
@keyframes donut-sweep { from { stroke-dasharray: 0 402.12; } }

/* ---------- 写真・キャプチャのせり上がり ---------- */
/* transform は傾き（.tilt）が使うので、せり上がりは translate で行う */
.reveal-media { opacity: 0; translate: 0 32px; clip-path: inset(6% 0 0 0 round var(--radius)); }
.reveal-media.is-in {
  opacity: 1; translate: 0 0; clip-path: inset(0 0 0 0 round var(--radius));
  transition: opacity .8s var(--ease), translate 1s var(--ease), clip-path 1.1s var(--ease), transform .4s var(--ease), box-shadow .4s var(--ease);
}
.card-media.reveal-media, .case-photo.reveal-media { clip-path: inset(10% 0 0 0); }
.card-media.reveal-media.is-in, .case-photo.reveal-media.is-in { clip-path: inset(0); }

/* ---------- ヒーローの文言は、読み込み時に上から順に出す ---------- */
@media screen and (prefers-reduced-motion: no-preference) {
  .js-motion .hero-copy > * { animation: rise-in .9s var(--ease) both; }
  .js-motion .hero-copy > :nth-child(2) { animation-delay: .12s; }
  .js-motion .hero-copy > :nth-child(3) { animation-delay: .24s; }
  .js-motion .hero-copy > :nth-child(4) { animation-delay: .36s; }
  .js-motion .hero-award .award-seal { animation: seal-in .9s cubic-bezier(.34, 1.56, .64, 1) .6s both; }
}
@keyframes rise-in { from { opacity: 0; transform: translateY(24px); } }
@keyframes seal-in { from { opacity: 0; transform: scale(.6) rotate(-25deg); } }
.hero-bg img { will-change: transform; }

/* ---------- 見出しを言葉ごとに（main.js が .char に分ける）。言葉の途中では改行しない ---------- */
.split .char { display: inline-block; white-space: nowrap; opacity: 0; transform: translateY(.6em) rotate(4deg); }
.split.is-in .char {
  opacity: 1; transform: none;
  transition: opacity .5s var(--ease), transform .7s var(--ease);
  transition-delay: calc(var(--ci) * 60ms);
}

/* ---------- 画面キャプチャの立体的な傾きと、表面の光 ---------- */
/* ::after は「クリックで拡大」の目印が使っているので、光は ::before に描く */
.tilt {
  transform: perspective(1200px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));
  transition: transform .4s var(--ease), box-shadow .4s var(--ease);
  will-change: transform;
}
.tilt::before {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; border-radius: inherit;
  background: radial-gradient(600px circle at var(--gx, 50%) var(--gy, 50%), rgba(255,255,255,.35), transparent 40%);
  opacity: 0; transition: opacity .3s;
}
.tilt:hover { box-shadow: 0 40px 80px -36px rgba(0,0,0,.45); }
.tilt:hover::before { opacity: 1; }
.reveal-media.is-in.tilt { transition: opacity .8s var(--ease), translate 1s var(--ease), clip-path 1.1s var(--ease), transform .4s var(--ease), box-shadow .4s var(--ease); }

/* ---------- カード：少し浮き上がり、マウスを追う光 ---------- */
/* 浮き上がりは translate で行う。transform は .reveal（スクロールで出す）が使っている */
@media (hover: hover) {
  :is(.card, .step, .plan, .newfeat-item, .flow-role, .scatter-col, .glance-step, .strength-item, .mv-item),
  .reveal.is-in:is(.card, .step, .plan, .newfeat-item, .flow-role, .scatter-col, .glance-step, .strength-item, .mv-item) {
    transition: opacity .7s var(--ease), transform .7s var(--ease), translate .35s var(--ease), box-shadow .35s var(--ease);
  }
  :is(.card, .step, .plan, .newfeat-item, .flow-role, .scatter-col, .glance-step, .mv-item):hover {
    translate: 0 -4px;
    box-shadow: 0 18px 40px -26px rgba(0,0,0,.35);
  }
  .strength-item:hover { translate: 0 -4px; box-shadow: 0 18px 40px -26px rgba(0,0,0,.8); }
  /* 元の .card:hover（transform）と二重に浮かないよう、浮き上がりは translate だけにする */
  .card:hover { transform: none; }
}
.glow { position: relative; isolation: isolate; }
.glow::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; border-radius: inherit;
  background: radial-gradient(260px circle at var(--gx, 50%) var(--gy, 50%), rgba(0,0,0,.06), transparent 70%);
  opacity: 0; transition: opacity .3s;
}
.card.glow { overflow: hidden; }
.card.glow::before { z-index: 1; }
.glow:hover::before { opacity: 1; }
.section-dark .glow::before { background: radial-gradient(240px circle at var(--gx, 50%) var(--gy, 50%), rgba(255,255,255,.1), transparent 70%); }

/* マグネットボタンは位置が戻るときだけゆっくり */
.btn-dark, .btn-light { transition: background-color .25s var(--ease), color .25s var(--ease), border-color .25s var(--ease), transform .35s var(--ease); }

/* ---------- 連携POSレジのロゴを流し続ける（main.js が複製して並べる） ----------
   リスト自体は幅いっぱいの窓のまま（中央揃えの検査とレイアウトを変えない）。
   ロゴを2回続けて並べ、全部を1セット分（--shift）だけ左へ送ったところで先頭に戻す */
.strip-logos.is-marquee {
  display: flex;
  flex-wrap: nowrap;
  justify-content: flex-start;
  gap: var(--sp-8) var(--sp-32);
  overflow: hidden;
  /* 左右の端をぼかして、ロゴが唐突に切れないようにする */
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.strip-logos.is-marquee li { flex: 0 0 auto; animation: logo-marquee var(--dur, 60s) linear infinite; }
.strip-logos.is-marquee:hover li { animation-play-state: paused; }
.strip-logos.is-marquee img { transition: transform .3s var(--ease); }
.strip-logos.is-marquee li:hover img { transform: scale(1.1); }
@keyframes logo-marquee { to { transform: translateX(calc(-1 * var(--shift, 0px))); } }
@media (max-width: 680px) {
  .strip-logos.is-marquee { gap: var(--sp-8) var(--sp-24); }
  .strip-logos-sm.is-marquee img { width: 104px; height: 36px; }
}

/* ---------- 読み進み具合のバー（ヘッダーの下端） ---------- */
.scroll-progress {
  position: absolute; left: 0; right: 0; bottom: -1px;
  height: 2px; background: var(--ink);
  transform: scaleX(0); transform-origin: 0 50%;
  pointer-events: none;
}

/* ---------- 段の背景の動く模様（canvas。main.js が敷く） ---------- */
/* 灰色の段：灰色の布の画像＋光線。白を重ねて薄め、文字の背景として落ち着かせる */
.section-soft, .cta-band { position: relative; isolation: isolate; overflow: clip; }
.section-soft {
  background:
    linear-gradient(rgba(246, 246, 246, .72), rgba(246, 246, 246, .72)),
    var(--soft) url('../images/bg-gray-streaks.webp') center / cover no-repeat;
}
.section-dark { position: relative; isolation: isolate; overflow: clip; }
.fx-bg { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; display: block; }
:is(.section-soft, .cta-band, .section-dark) > :not(.fx-bg) { position: relative; z-index: 1; }

@media (prefers-reduced-motion: reduce) {
  .split .char { opacity: 1; transform: none; }
  .reveal-media { opacity: 1; translate: none; clip-path: none; }
  .scroll-progress, .fx-bg { display: none; }
}
@media print {
  .reveal-media, .split .char { opacity: 1 !important; translate: none !important; clip-path: none !important; transform: none !important; }
  .scroll-progress, .fx-bg { display: none; }
}

/* ==========================================================================
   関連サービス：FLARO への入口（お問い合わせの手前）
   ========================================================================== */
.flaro-band-inner {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  gap: var(--sp-56);
  align-items: center;
}
.flaro-band-copy { display: flex; flex-direction: column; align-items: flex-start; gap: var(--sp-20); }
.flaro-band-tag {
  font-size: var(--fs-caption); font-weight: 700; letter-spacing: var(--ls-label);
  padding: var(--sp-4) var(--sp-12); border: 1px solid rgba(255, 255, 255, .5); border-radius: 999px;
}
.flaro-band-logo { width: 160px; height: auto; }
.flaro-band-title { font-size: var(--fs-h2); line-height: var(--lh-heading); letter-spacing: var(--ls-heading); }
.flaro-band-lead { line-height: var(--lh-loose); }
.flaro-band-lead + .flaro-band-lead { margin-top: calc(var(--sp-8) * -1); }
.flaro-band-visual { display: block; background: var(--white); border-radius: var(--radius); overflow: hidden; padding: var(--sp-24); }
.flaro-band-visual img { display: block; width: 100%; height: auto; }
@media (max-width: 900px) {
  .flaro-band-inner { grid-template-columns: minmax(0, 1fr); gap: var(--sp-32); }
}

/* ==========================================================================
   料金シミュレーション（#price の中）。左が入力、右（黒）が結果
   ========================================================================== */
.sim {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  margin-top: var(--sp-48);
  border: 1px solid var(--line); border-radius: var(--radius-lg); overflow: hidden;
  background: var(--white);
}
.sim-form { display: grid; gap: var(--sp-32); align-content: start; padding: var(--sp-48); }
.sim-title { font-size: var(--fs-h3); font-weight: 700; line-height: var(--lh-snug); }
.sim-lead { margin-top: calc(var(--sp-24) * -1); font-size: var(--fs-sm); line-height: var(--lh-body); }
.sim-label { display: block; margin-bottom: var(--sp-12); font-size: var(--fs-sm); font-weight: 700; }
.sim-plans { border: 0; padding: 0; margin: 0; min-width: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-8); }
.sim-plans legend { grid-column: 1 / -1; padding: 0; }
.sim-plan {
  position: relative; cursor: pointer;
  display: flex; flex-direction: column; gap: 2px;
  padding: var(--sp-16); border: 1px solid var(--line); border-radius: var(--radius-sm);
  transition: border-color .2s var(--ease), background-color .2s var(--ease), color .2s var(--ease);
}
.sim-plan input { position: absolute; opacity: 0; pointer-events: none; }
.sim-plan-name { font-size: var(--fs-sm); font-weight: 700; }
.sim-plan-price { font-family: var(--font-en); font-size: var(--fs-sm); }
.sim-plan:hover { border-color: var(--ink); }
.sim-plan:has(input:checked) { background: var(--ink); border-color: var(--ink); color: var(--white); }
.sim-plan:has(input:focus-visible) { outline: 2px solid var(--ink); outline-offset: 2px; }

.sim-stepper { display: flex; align-items: center; gap: var(--sp-8); }
.sim-stepper input {
  width: 6em; height: 56px; padding: 0 var(--sp-12);
  border: 1px solid var(--line); border-radius: var(--radius-sm);
  font-family: var(--font-en); font-size: var(--fs-h3); font-weight: 700; text-align: center;
  -moz-appearance: textfield; appearance: textfield;
}
.sim-stepper input::-webkit-inner-spin-button, .sim-stepper input::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.sim-stepper input:focus { outline: none; border-color: var(--ink); }
.sim-unit { font-size: var(--fs-sm); font-weight: 700; margin-right: var(--sp-8); }
.sim-step {
  flex: none; width: 56px; height: 56px;
  border: 1px solid var(--ink); border-radius: 50%; background: var(--white); color: var(--ink);
  font-size: var(--fs-h3); line-height: 1; cursor: pointer;
}
.sim-step:hover:not(:disabled) { background: var(--ink); color: var(--white); }
.sim-step:disabled { border-color: var(--line); color: var(--mark); cursor: default; }

.sim-result { display: flex; flex-direction: column; gap: var(--sp-16); padding: var(--sp-48); background: var(--ink); color: var(--white); }
.sim-total dt, .sim-rows dt { font-size: var(--fs-sm); font-weight: 700; }
.sim-total dt small, .sim-rows dt small { font-size: var(--fs-caption); font-weight: 400; }
.sim-total dd { display: flex; align-items: baseline; gap: var(--sp-8); margin: var(--sp-8) 0 0; }
.sim-total strong { font-family: var(--font-en); font-size: var(--fs-num-xl); font-weight: 700; line-height: 1; letter-spacing: -.03em; }
.sim-total dd small { font-size: var(--fs-h4); font-weight: 700; }
.sim-calc { font-size: var(--fs-meta); line-height: var(--lh-snug); opacity: .75; }
.sim-rows { display: grid; border-top: 1px solid rgba(255, 255, 255, .25); }
.sim-rows > div { display: flex; justify-content: space-between; align-items: baseline; gap: var(--sp-16); padding-block: var(--sp-16); border-bottom: 1px solid rgba(255, 255, 255, .25); }
.sim-rows dd { margin: 0; font-size: var(--fs-sm); font-weight: 700; white-space: nowrap; }
.sim-rows dd strong { font-family: var(--font-en); font-size: var(--fs-h3); margin-right: 2px; }
.sim-note { font-size: var(--fs-caption); line-height: var(--lh-body); opacity: .75; }
.sim-result .btn-block { margin-top: var(--sp-8); }

@media (max-width: 960px) {
  .sim { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 680px) {
  .sim { margin-top: var(--sp-32); border-radius: var(--radius); }
  .sim-form, .sim-result { padding: var(--sp-32) var(--sp-24); }
  .sim-total strong { font-size: var(--fs-num-lg); }
  .sim-stepper input { flex: 1; width: auto; min-width: 0; }
  .sim-rows dt small { display: block; }
}