:root{
  /* ── Core Colors（既存・後方互換） ────────────────── */
  --navy:       #0a1628;
  --navy2:      #0f2240;
  --green:      #00a86b;
  --green2:     #00c97f;
  --green-glow: rgba(0,168,107,0.35);
  --orange:     #ff7f3f;
  --litone-orange: #f0b31c;   /* LITONEブランドカラー（ロゴマニュアル準拠：RGB240,170,0 / #f0b31c）*/
  --sky:        #e8f8f2;
  --light:      #f5fbf8;
  --cream:      #fff8f0;
  --gray:       #222222;
  --text:       #18273d;
  --border:     #d6e8df;
  --card-shadow:0 4px 32px rgba(10,22,40,0.10);
  --radius:     20px;

  /* ── Semantic Color Aliases ───────────────────────── */
  --clr-primary:    var(--green);
  --clr-primary-lt: #7fe0b0;
  --clr-navy:       var(--navy);
  --clr-orange:     var(--orange);
  --clr-gray:       var(--gray);
  --clr-border:     var(--border);
  --clr-text:       var(--text);
  --clr-bg:         #fff;
  --clr-bg-subtle:  var(--light);

  /* ── Space Scale（clamp ベース） ─────────────────── */
  --sp-1: clamp(4px,  .5vw,  8px);
  --sp-2: clamp(8px,   1vw, 12px);
  --sp-3: clamp(12px, 1.5vw, 20px);
  --sp-4: clamp(20px, 2.5vw, 36px);
  --sp-5: clamp(36px,   5vw, 64px);
  --sp-6: clamp(56px,   8vw, 96px);

  /* ── Type Scale ──────────────────────────────────── */
  --text-xs:   16px;
  --text-sm:   16px;
  --text-base: 16px;
  --text-md:   clamp(16px, 1.5vw, 17px);
  --text-lg:   clamp(16px, 1.8vw, 20px);
  --text-xl:   clamp(20px, 2.4vw, 28px);
  --text-2xl:  clamp(22px, 3.2vw, 44px);
  --text-3xl:  clamp(26px,   5vw, 58px);

  /* ── Radius System ───────────────────────────────── */
  --radius-sm:   10px;
  --radius-md:   16px;
  --radius-lg:   26px;
  --radius-xl:   28px;
  --radius-full: 999px;

  /* ── Elevation ───────────────────────────────────── */
  --shadow-card: var(--card-shadow);
  --shadow-md:   0 8px 40px rgba(10,22,40,.12);
  --shadow-btn:  0 8px 32px rgba(0,168,107,.35);

  /* ── Layout ──────────────────────────────────────── */
  --container: min(1068px, calc(100% - 48px));
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
/* 固定ヘッダーぶんアンカー着地位置を下げる（#pricing/#demo等・2026-07-30） */
[id]{scroll-margin-top:calc(var(--header-h,72px) + 12px)}
body{
  font-family:"LINESeedJPStd","LINE Seed JP","Noto Sans JP",sans-serif;
  font-size:16px;
  color:var(--text);
  line-height:1.85;
  letter-spacing:0.02em;
  overflow-wrap:break-word;
  background:#fff;
  overflow-x:hidden;
}
img{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}
.inner{width:var(--container);margin-inline:auto}

/* ═══════════════════════════════════════════════════════
   CARD BASE — 共通カードスタイル（クラス名変更なし）
   case-card / stat-card / challenge-card で共有
   ═══════════════════════════════════════════════════════ */
.case-card,
.stat-card{
  background: var(--clr-bg);
  border: 1.5px solid var(--clr-border);
  box-shadow: var(--shadow-card);
}
.section{padding:clamp(48px,6vw,80px) 0}

/* LABELS */
.label{
  display:inline-flex;
  align-items:center;
  gap:10px;
  color:var(--green);
  font-size:var(--text-sm);
  font-weight:900;
  letter-spacing:.18em;
  margin-bottom:16px;
  text-transform:uppercase;
}
.label::before{content:"";width:32px;height:2px;background:var(--green);border-radius:99px}

/* HEADINGS */
.title{
  margin:0 0 20px;
  font-family:"LINESeedJPStd","LINE Seed JP","Noto Sans JP",sans-serif;
  font-size:clamp(20px,2.8vw,36px);
  line-height:1.4;
  color:var(--navy);
  font-weight:800;
  letter-spacing:-.02em;
}
.lead{margin:0 0 44px;color:var(--gray);font-size:clamp(16px,1.5vw,18px);line-height:1.9}

/* BUTTONS */
.btn-primary{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  padding:18px 5%;
  border-radius:var(--radius-full);
  background:var(--green);
  color:#fff;
  font-weight:900;
  font-size:17px;
  letter-spacing:.03em;
  white-space:nowrap;
  box-shadow:0 8px 32px rgba(0,168,107,0.35);
  transition:all .25s ease;
  position:relative;
  overflow:hidden;
}
.btn-primary::after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(135deg,rgba(255,255,255,.18) 0%,transparent 60%);
  pointer-events:none;
}
.btn-primary:hover{
  background:var(--green2);
  transform:translateY(-3px);
  box-shadow:0 14px 40px rgba(0,168,107,0.45);
}
.btn-primary svg{transition:.25s ease}
.btn-primary:hover svg{transform:translateX(4px)}

.btn-ghost{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:var(--sp-2);
  padding:16px 32px;
  border-radius:var(--radius-full);
  border:2px solid var(--navy);
  color:var(--navy);
  font-weight:800;
  font-size:16px;
  transition:.2s ease;
  background:transparent;
}
.btn-ghost:hover{border-color:var(--green);color:var(--green);background:rgba(0,168,107,.06)}

/* HEADER */
.header{
  position:sticky;
  top:0;
  z-index:100;
  background:rgba(255,255,255,.88);
  backdrop-filter:blur(20px);
  border-bottom:1px solid rgba(214,232,223,.7);
}
.header-inner{
  width:min(1068px,calc(100% - 48px));
  margin:0 auto;
  height:72px;
  display:flex;
  align-items:center;
  justify-content:space-between;
}
.logo{
  display:flex;
  align-items:center;
  gap:10px;
  text-decoration:none;
}
.logo-img{
  height:36px;
  width:auto;
  display:block;
}
.logo-tagline{
  display:flex;
  flex-direction:column;
  line-height:1.25;
  border-left:1px solid #d0d8e4;
  padding-left:10px;
}
.logo-tagline span{
  font-size:var(--text-xs);
  font-family:"LINESeedJPStd","LINE Seed JP","Noto Sans JP",sans-serif;
  font-weight:700;
  color:#222222;
  letter-spacing:.04em;
}
.header-cta{
  padding:11px 24px;
  border-radius:var(--radius-full);
  background:var(--green);
  color:#fff;
  font-weight:900;
  font-size:clamp(14px,2.0vw,16px);
  letter-spacing:.04em;
  box-shadow:0 4px 16px rgba(0,168,107,.25);
  transition:.2s ease;
}
.header-cta:hover{background:var(--green2);transform:translateY(-1px)}
/* ヘッダー右側グループ（料金アンカー＋CTA）2026-07-30 */
.header-right{display:flex;align-items:center;gap:22px}
.header-price-link{
  display:inline-flex;
  align-items:center;
  font-weight:800;
  font-size:clamp(13px,1.8vw,14px);
  color:var(--navy);
  letter-spacing:.06em;
  padding:8px 18px;
  border:1.5px solid var(--navy);
  border-radius:999px;
  transition:background .2s ease,color .2s ease,border-color .2s ease;
  white-space:nowrap;
}
.header-price-link:hover{background:var(--navy);color:#fff}
/* FV直下クイックリンク（料金／紹介動画）2026-07-30 */
.hero-quick-links{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap}
.hero-price-link{
  display:inline-flex;
  align-items:center;
  gap:6px;
  font-size:clamp(14px,2.0vw,16px);
  font-weight:600;
  color:rgba(80,80,80,.9);
  text-decoration:none;
  letter-spacing:.03em;
  white-space:nowrap;
  transition:color .2s ease;
}
.hero-price-link:hover{color:#333}
.hero-price-link svg{flex-shrink:0;opacity:.7}

/* FV直下 目次アンカー（2026-08-20：料金・動画クイックリンクの後継） */
.hero-toc{display:flex;flex-direction:column;gap:8px;align-items:stretch;max-width:520px;margin:0 auto}
.hero-toc-link{
  display:flex;
  align-items:center;
  gap:9px;
  padding:11px 16px;
  background:rgba(255,255,255,.85);
  border:1px solid rgba(10,22,40,.12);
  border-radius:30px;
  font-size:clamp(13px,1.6vw,15px);
  font-weight:600;
  color:var(--navy);
  text-decoration:none;
  text-align:left;
  line-height:1.5;
  transition:background .2s ease,transform .2s ease,box-shadow .2s ease;
}
/* 増田さん案コピー用（2026-08-24）：結び強調と改行制御 */
/* 2026-09-14：ブランド緑 #00a86b は、FVの白スクリム越しだとコントラスト比が
   旧写真で2.93・新写真（屋上・青空）で2.57しかなく、大きい文字のAA基準3:1を
   下回っていた。LPで最も重要な数字なのでFVだけ濃い緑にする。
   2026-09-14 追記：差し替え後の写真（青空が濃い）で #00794d は3.71〜4.34まで下がったため
   #006b44 に一段濃くした。実測 4.47〜5.0（1200/1440/1920px・高さ700〜1080pxで確認）。
   ※ --green 自体は変えない（ボタン地色など白抜きで使う箇所は問題ないため） */
.hero-catch .catch-strong{color:#006b44}
.hero-catch .nb{white-space:nowrap}
/* 目次リンクのリード句は控えめに（本文より一段小さく） */
.hero-toc-link .toc-lead{font-size:.85em;color:rgba(10,22,40,.62);margin-right:2px}
.hero-toc-link:hover{background:#fff;transform:translateY(-1px);box-shadow:0 4px 14px rgba(10,22,40,.1)}
.hero-toc-link svg{flex-shrink:0;color:var(--green)}
.hero-toc-link strong{font-weight:800}
@media (max-width:600px){
  .hero-toc{gap:7px}
  .hero-toc-link{padding:10px 12px;font-size:13px}
}

\/* ============================
   HERO
   ============================ */
.hero{
  position:relative;
  overflow:hidden;
  color:#fff;
  padding:0;
  min-height:max(600px, calc(100dvh - var(--header-h, 72px)));
  display:block;
}
.hero-fullbg{
  background-size:cover;
  /* 2026-09-14 ご指示：left 35% → 0% → 17%。
     35%は下寄りすぎて空が切れ、0%は上端ぴったりで人物が下がりすぎたため、
     間を取って17%。画像の上17%ぶんを送った位置で切り出す。
     ※1023px以下は別指定（center 20%）なので影響しない */
  background-position:left 17%;
  background-repeat:no-repeat;
  min-height:max(600px, calc(100dvh - var(--header-h, 72px)));
}
.hero-overlay{
  position:absolute;
  inset:0;
  background:linear-gradient(to right,rgba(245,251,248,0) 0%,rgba(245,251,248,0) 33%,rgba(245,251,248,.12) 44%,rgba(245,251,248,.42) 55%,rgba(245,251,248,.5) 100%);
  z-index:0;
}
.hero-fullbg-inner{
  position:relative;
  z-index:1;
  width:min(1068px,calc(100% - 48px));
  margin:0 auto;
  min-height:100%;
  box-sizing:border-box;
  padding-top:28px;
  padding-bottom:40px;
  display:flex;
  align-items:flex-start;
  justify-content:flex-end;
}
.hero-content{
  width:50%;
  max-width:560px;
  text-align:center;
}
.hero h1 .accent{
  color:var(--orange);
  display:block;
  font-size:clamp(26px,5vw,58px);
  line-height:1.2;
  font-weight:900;
  letter-spacing:-.03em;
}
.hero-logo-img{
  display:block;
  width:clamp(290px,47vw,475px);
  height:auto;
  margin:14px auto 12px;
}
/* PCのみ：げんばDXロゴ（h1）の上下余白 */
@media (min-width:769px){
  .hero-logo-img{margin:30px auto 30px}
}

.hero-eyebrow{
  position:relative;
  display:inline-flex;
  align-items:center;
  gap:10px;
  font-size:clamp(12px,1.3vw,15px);
  font-weight:800;
  color:var(--navy);
  background:none;
  border:none;
  padding:0 0 9px;
  border-radius:0;
  margin-top:10px;
  margin-bottom:10px;
  letter-spacing:.04em;
  box-shadow:none;
  text-shadow:0 1px 3px rgba(255,255,255,.7);
}
/* 2色下線（左50%オレンジ／右50%グリーン） */
.hero-eyebrow::before,
.hero-eyebrow::after{
  content:"";
  position:absolute;
  bottom:0;
  height:3px;
  width:50%;
  border-radius:2px;
}
.hero-eyebrow::before{left:0;background:var(--orange,#ff7f3f)}
.hero-eyebrow::after{right:0;background:var(--green,#00a86b)}
.hero-brand-line{
  font-size:clamp(13px,1.4vw,16px);
  font-weight:600;
  color:var(--navy);
  letter-spacing:.02em;
  line-height:1.5;
  margin:6px 0 10px;
}
.hero-brand-line strong{font-weight:800}
.hero-catch{
  font-family:"LINESeedJPStd","LINE Seed JP","Noto Sans JP",sans-serif;
  font-size:clamp(18px,2.4vw,30px);
  font-weight:800;
  color:var(--navy);
  line-height:1.45;
  margin:4px 0 18px;
}
.hero-sub{
  position:relative;
  display:inline-block;
  font-size:clamp(14px,2.0vw,16px);
  color:var(--navy);
  line-height:2.05;
  margin-bottom:clamp(16px,2vw,24px);
  text-align:left;
  text-shadow:0 0 3px rgba(255,255,255,.9);
}
/* テキスト行だけ半透明の白ハイライト（マーカー風・折り返し追従） */
.hero-sub-hl{
  background:rgba(255,255,255,.62);
  -webkit-box-decoration-break:clone;
  box-decoration-break:clone;
  padding:.12em .28em;
  border-radius:5px;
}
.hero-actions{
  display:flex;
  gap:14px;
  flex-wrap:nowrap;
  align-items:center;
  justify-content:center;
  margin-bottom:18px;
  margin-top:40px;
}
/* 相談ボタン（軽いCTA） */
.btn-consult{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  padding:16px 28px;
  border-radius:var(--radius-full);
  border:2px solid var(--navy);
  color:var(--navy);
  font-weight:800;
  font-size:16px;
  transition:.2s ease;
  background:transparent;
  white-space:nowrap;
}
.btn-consult:hover{border-color:var(--green);color:var(--green);background:rgba(0,168,107,.06)}
.btn-consult .consult-tag{
  font-size:16px;
  font-weight:700;
  color:#fff;
  background:var(--green);
  border-radius:4px;
  padding:1px 5px;
  letter-spacing:.04em;
}
/* デモリンク（テキストリンク） */
.hero-demo-link{
  display:inline-flex;
  align-items:center;
  gap:6px;
  font-size:clamp(14px,2.0vw,16px);
  font-weight:600;
  color:rgba(80,80,80,.9);
  text-decoration:none;
  letter-spacing:.03em;
  transition:color .2s ease;
  white-space:nowrap;
  margin-right:35px;
}
.hero-demo-link:hover{color:#333;}
.hero-demo-link svg{flex-shrink:0;opacity:.7;}

/* H1 sub label */
.h1-sub{
  font-size:clamp(16px,2vw,24px);
  font-weight:800;
  color:var(--navy);
  letter-spacing:.02em;
  display:inline-block;
  margin-bottom:4px;
}

/* ============================
   PROBLEM / BEFORE
   ============================ */
.problem-section{
  background:#fff;
}
.bflow-card:not(:last-child)::after{
  content:"→";
  position:absolute;
  right:-14px;top:50%;
  transform:translateY(-50%);
  color:#ccc;
  font-size:clamp(20px,2.8vw,22px);
  font-weight:900;
  z-index:2;
}
/* vertical connector line between steps */
.flow-step:not(:last-child) .flow-step-icon::after{
  content:"";
  position:absolute;
  top:88px;
  left:50%;
  transform:translateX(-50%);
  width:2px;
  height:calc(100% - 20px);
  background:linear-gradient(180deg,var(--green) 0%,rgba(0,168,107,.15) 100%);
}

/* ============================
   SOLUTION
   ============================ */
.solution-section{background:#fff}

.solution-grid{display:grid;grid-template-columns:1fr 1fr;gap:var(--sp-4)}
.strength-grid{
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}
.strength-item{
  background: #fff;
  border: 1px solid #e4eaf0;
  border-top: 3px solid #fab902;
  border-radius: 12px;
  padding: 20px 22px;
  box-shadow: 0 2px 10px rgba(13,31,60,.05);
  transition: transform .2s ease, box-shadow .2s ease;
}
.strength-item:hover{
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(217,119,6,.12);
}
.strength-body{
  margin: 0;
  font-size:clamp(12.5px,1.8vw,14.5px);
  color: #222;
  line-height: 1.7;
}
.strength-body strong{ color: #d97706; font-weight: 800; }

@media (max-width: 960px) {
  .strength-grid{ grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
  .strength-grid{ grid-template-columns: 1fr; }
}
.solution-card{
  background:#fff;
  border:1.5px solid var(--border);
  border-radius:var(--radius-lg);
  padding:34px;
  box-shadow:var(--card-shadow);
  display:flex;
  align-items:center;
  gap:var(--sp-4);
}
.solution-card-body{flex:1;min-width:0}
.solution-card-img{flex-shrink:0;display:flex;align-items:center;justify-content:center}
.solution-card h3{
  font-family:"LINESeedJPStd","LINE Seed JP","Noto Sans JP",sans-serif;
  font-size:clamp(17px,2.2vw,20px);
  font-weight:800;
  color:var(--navy);
  margin-bottom:20px;
  letter-spacing:-.01em;
  word-break: keep-all;
  overflow-wrap: break-word;
}
.check-list{list-style:none;display:grid;gap:var(--sp-2)}
.check-list li{
  position:relative;
  padding-left:32px;
  font-weight:700;
  font-size:clamp(13px,1.9vw,15px);
  line-height:1.6;
  color:var(--text);
}
.check-list li::before{
  content:"✓";
  position:absolute;
  left:0;top:0;
  color:var(--green);
  font-weight:900;
  font-size:clamp(14px,2.0vw,16px);
}

/* ============================
   STATS / TRUST
   ============================ */
.stats-section{background:#fff}
.stats-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--sp-3);margin:0 20px}
.stat-card{
  background:#fff;
  border:1.5px solid var(--border);
  border-radius:22px;
  padding:32px 20px;
  text-align:center;
  box-shadow:var(--card-shadow);
  transition:.25s ease;
}
.stat-card:hover{transform:translateY(-4px);border-color:var(--green);box-shadow:0 12px 40px rgba(0,168,107,.12)}
.stat-num{
  font-family:"LINESeedJPStd","LINE Seed JP","Noto Sans JP",sans-serif;
  font-size:clamp(24px,4vw,48px);
  line-height:1;
  color:var(--green);
  font-weight:800;
  letter-spacing:-.03em;
  margin-bottom:12px;
}
.stat-num small{font-size:18px;letter-spacing:0}
.stat-label{color:var(--navy);font-weight:800;font-size:clamp(14px,2.0vw,16px);line-height:1.6}
.stat-note{margin-top:24px;color:#888;font-size:11px;text-align:center}
.trust-awards-wrap{
  margin-top:36px;
  padding-top:28px;
  border-top:1px solid var(--border);
}
.trust-awards-label{
  font-size:clamp(17px,2.4vw,19px);
  font-weight:700;
  color:var(--gray);
  letter-spacing:.08em;
  text-align:left;
  margin-bottom:20px;
}
.trust-awards-row{
  display:flex;
  align-items:center;
  gap:32px;
  justify-content:center;
  flex-wrap:wrap;
}
.trust-award-cybozu{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:16px;
  flex-wrap:wrap;
}
.trust-star-img{
  height:100px;
  width:auto;
  border-radius:8px;
  flex-shrink:0;
}
.trust-award-cybozu-text .st-label{
  font-size:var(--text-xs);
  font-weight:700;
  color:#222222;
  letter-spacing:.06em;
  margin-bottom:4px;
}
.trust-award-cybozu-text .st-body{
  font-size:clamp(14px,2.0vw,16px);
  font-weight:800;
  color:#0d1f3c;
  line-height:1.5;
}

/* ============================
   CASE STUDY
   ============================ */
.case-section{background:#fff}

/* ── 事例後CTA バンド ── */
.case-cta-band{
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
  gap:clamp(16px,3vw,28px);
  margin-top:clamp(40px,6vw,64px);
  padding:clamp(32px,4vw,52px) clamp(24px,5vw,80px);
  /* 2026-09-03：CTA帯の配色統一（薄緑 → #ebaf30） */
  background:#ebaf30;
  border-top:1px solid var(--border);
  border-bottom:1px solid var(--border);
  width:100vw;
  margin-left:calc(-50vw + 50%);
}
.case-cta-text{width:100%}
.case-cta-eyebrow{
  font-size:clamp(16px,1vw,16px);
  font-weight:700;
  color:var(--gray);
  letter-spacing:.1em;
  text-transform:uppercase;
  margin-bottom:6px;
}
.case-cta-copy{
  font-size:clamp(16px,1.8vw,22px);
  font-weight:800;
  color:var(--navy);
  line-height:1.4;
  margin:0;
}
.case-cta-actions{
  display:flex;
  gap:12px;
  flex-wrap:wrap;
  justify-content:center;
  align-items:center;
  width:100%;
}
.case-cta-actions .btn-consult{
  border-color:#000;
  color:#000;
  font-size:16px;
}
.case-cta-actions .btn-consult:hover{
  border-color:#000;
  background:rgba(0,0,0,.05);
}
/* case-cta：ボタンは他CTAと同様に中央・横並びピル（モバイルの縦積みfull-width上書きは廃止・2026-06-10）。
   バンドは基本レイアウト(中央寄せ)を全幅で維持。横に収まらない極小画面でのみ自動折返し。 */

@keyframes ticker-scroll{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.ticker-outer{
  overflow-x:hidden;
  overflow-y:visible;
  width:100vw;
  margin-left:calc(-50vw + 50%);
  margin-right:calc(-50vw + 50%);
  padding:90px 0 58px;
  position:relative;
}
.ticker-outer::before,
.ticker-outer::after{
  content:"";
  position:absolute;top:0;bottom:0;width:160px;z-index:2;pointer-events:none;
}
.ticker-outer::before{left:0;background:linear-gradient(to right,#f5f8f5 30%,transparent)}
.ticker-outer::after{right:0;background:linear-gradient(to left,#f5f8f5 30%,transparent)}
.ticker-track{
  display:flex;
  width:max-content;
  gap:22px;
  animation:ticker-scroll 40s linear infinite;
}
.ticker-track:hover{animation-play-state:paused}
.ticker-track .case-card{width:340px;flex-shrink:0;height:auto}
.case-card{
  background:#fff;
  border:1.5px solid var(--border);
  border-radius:var(--radius-lg);
  padding:30px;
  box-shadow:var(--card-shadow);
  display:flex;
  flex-direction:column;
  transition:.25s ease;
  position:relative;
}
.case-card:hover{transform:translateY(-5px);border-color:var(--green);box-shadow:0 12px 40px rgba(0,168,107,.12)}
.case-badge{
  position:absolute;
  top:-36px;
  left:20px;
  background:var(--green);
  color:#fff;
  font-weight:700;
  font-size:15px;
  letter-spacing:.1em;
  padding:7px 18px;
  border-radius:var(--radius-sm) 10px 0 0;
  white-space:nowrap;
}
.case-card h3{
  font-family:"LINESeedJPStd","LINE Seed JP","Noto Sans JP",sans-serif;
  font-size:clamp(17px,2.4vw,19px);
  font-weight:800;
  line-height:1.45;
  color:var(--navy);
  margin-bottom:12px;
}
.case-card p{color:var(--gray);font-size:clamp(12.5px,1.8vw,14.5px);margin-bottom:18px;line-height:1.8;flex:1}
.case-photo{
  width:calc(100% + 44px);
  margin:-22px -22px 20px;
  height:160px;
  border-radius:var(--radius-lg) 26px 0 0;
  overflow:hidden;
  flex-shrink:0;
}
.case-photo img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}
.case-card-with-photo{
  padding-top:0;
}
.case-card-with-photo .case-badge{
  top:-69px;
  z-index:1;
}
.case-tags{display:flex;gap:var(--sp-2);flex-wrap:wrap;margin-top:auto}
.case-tags span{
  background:var(--cream);
  border:1px solid #f0dfb8;
  border-radius:var(--radius-full);
  padding:4px 10px;
  font-size:12px;
  font-weight:800;
  color:var(--navy);
}

/* ============================
   FINAL CTA
   ============================ */
.cta{
  position:relative;
  overflow:hidden;
  background:linear-gradient(135deg,#ffc36a 0%,#ffae55 35%,#ff9a43 70%,#ff8a35 100%);
  color:#222222;
  text-align:center;
  padding:60px 0;
  padding-top:80px;
}
/* 炭酸シュワシュワ：3層のバブル（極小・小・中）が異なる速度で上昇 */
.cta::before{
  content:"";
  position:absolute;
  inset:-20% 0 -20% 0;       /* 上下にはみ出して loop の継ぎ目を隠す */
  background-image:
    /* 中サイズ（散在・大粒・ゆっくり） */
    radial-gradient(circle, rgba(255,255,255,.55) 5px, transparent 6px),
    radial-gradient(circle, rgba(255,255,255,.45) 6px, transparent 7px),
    radial-gradient(circle, rgba(255,255,255,.50) 4.5px, transparent 5.5px),
    radial-gradient(circle, rgba(255,255,255,.40) 5.5px, transparent 6.5px),
    /* 小サイズ（中濃度・点在） */
    radial-gradient(circle, rgba(255,255,255,.45) 2.5px, transparent 3px),
    /* 極小サイズ（密度高・速い） */
    radial-gradient(circle, rgba(255,255,255,.55) 1.2px, transparent 1.7px),
    radial-gradient(circle, rgba(255,255,255,.40) 1px,   transparent 1.5px);
  background-position:
    12% 18%,
    78% 32%,
    30% 70%,
    88% 84%,
    0 0,
    0 0,
    13px 13px;
  background-size:
    100% 100%,
    100% 100%,
    100% 100%,
    100% 100%,
    70px 70px,
    26px 26px,
    26px 26px;
  background-repeat:
    no-repeat,
    no-repeat,
    no-repeat,
    no-repeat,
    repeat,
    repeat,
    repeat;
  animation: cta-fizz-up 14s linear infinite;
  pointer-events:none;
}
/* 上端のフェードと下端のオレンジ濃 vignette を別レイヤで */
.cta::after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(180deg,rgba(255,255,255,.16) 0%, rgba(255,255,255,0) 30%, rgba(255,255,255,0) 70%, rgba(216,68,15,.10) 100%);
  pointer-events:none;
}
@keyframes cta-fizz-up {
  from { background-position:
    12% 18%, 78% 32%, 30% 70%, 88% 84%,    /* 大粒4つは固定（全面） */
    0 0,                                     /* 小バブル：開始位置 */
    0 0,                                     /* 極小バブル①：開始 */
    13px 13px;                               /* 極小バブル②：オフセット開始 */
  }
  to   { background-position:
    12% 18%, 78% 32%, 30% 70%, 88% 84%,
    0 -70px,                                 /* 小：1tile上昇 */
    0 -260px,                                /* 極小①：10tile上昇（速い） */
    13px -247px;                             /* 極小②：10tile上昇（速い） */
  }
}
@media (prefers-reduced-motion: reduce) {
  .cta::before{ animation: none; }
}
.cta-blob{
  position:absolute;
  border-radius:50%;
  filter:blur(100px);
  pointer-events:none;
}
.cta-blob-1{
  width:500px;height:500px;
  background:radial-gradient(circle,rgba(255,240,210,.45) 0%,transparent 70%);
  top:-100px;left:10%;
}
.cta-blob-2{
  width:400px;height:400px;
  background:radial-gradient(circle,rgba(255,200,140,.30) 0%,transparent 70%);
  bottom:-80px;right:5%;
}
.cta-inner{position:relative;z-index:1}

/* 無料相談で分かること（FINAL CTA内・白カード3枚） */
.cta .cta-learn-label{font-size:clamp(12px,1.8vw,14px);font-weight:800;letter-spacing:.08em;color:#222222;margin:30px 0 16px;}
.cta-learn{list-style:none;display:flex;gap:16px;justify-content:center;flex-wrap:wrap;max-width:1068px;margin:0 auto 40px;padding:0;}
.cta-learn li{flex:1 1 280px;max-width:360px;display:flex;flex-direction:column;text-align:left;background:#fff;border-radius:14px;padding:18px 20px;box-shadow:0 6px 20px rgba(180,80,10,.18);}
.cta-learn li strong{font-weight:800;color:#0d1f3c;}
.cta .cta-worry{font-size:13.5px;color:#8a8a8a;font-weight:600;margin:0 0 10px;line-height:1.5;}
.cta-relief{font-size:clamp(13px,1.9vw,15px);color:#0d1f3c;font-weight:800;line-height:1.55;margin:0 0 12px;display:flex;gap:7px;align-items:flex-start;}
.cta-relief-t{flex:1;font-size:clamp(13px,1.9vw,15px);font-weight:800}
.cta-relief-ck{flex:none;width:20px;height:20px;border-radius:50%;background:var(--litone-orange);color:#0d1f3c;font-size:12px;font-weight:900;display:inline-flex;align-items:center;justify-content:center;margin-top:2px;}
.cta-relief-more{margin-top:auto;font-size:13px;font-weight:800;color:#c98f00;text-decoration:none;border-top:1px solid #f0e6cf;padding-top:10px;}
.cta-relief-more:hover{color:#a87700;}
@media(max-width:760px){.cta-learn li{flex:1 1 100%;max-width:420px}}

/* 事例エリア：無料トライアル進行中バンド */
.case-trial-band{display:flex;align-items:center;gap:14px;flex-wrap:wrap;background:#fffaf0;border:1px solid #f3dca0;border-left:4px solid var(--litone-orange);border-radius:10px;padding:13px 20px;margin:0 0 28px;}
.case-trial-badge{flex:none;display:inline-flex;align-items:center;gap:7px;background:var(--litone-orange);color:#0d1f3c;font-weight:800;font-size:13px;letter-spacing:.04em;padding:5px 13px;border-radius:999px;}
.case-trial-dot{width:8px;height:8px;border-radius:50%;background:#0d1f3c;animation:caseTrialPulse 1.6s ease-in-out infinite;}
@keyframes caseTrialPulse{0%,100%{opacity:1}50%{opacity:.25}}
.case-trial-text{font-size:clamp(13px,1.9vw,15px);font-weight:700;color:#0d1f3c;line-height:1.55;}
.case-trial-text strong{font-weight:800;color:#c98f00;}

.cta h2{
  font-family:"LINESeedJPStd","LINE Seed JP","Noto Sans JP",sans-serif;
  font-size:clamp(22px,3.8vw,50px);
  font-weight:800;
  line-height:1.45;
  margin-bottom:20px;
  letter-spacing:-.02em;
  color:#222222;
}
.cta h2 em{
  color:#222222;
  font-style:normal;
}
.cta p{
  color:#222222;
  margin-bottom:0px;
  font-size:clamp(15px,2.1vw,17px);
  line-height:1.9;
  font-weight:500;
}

.cta-actions{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:20px;
}
.cta-buttons{
  display:flex;
  flex-direction:row;
  flex-wrap:wrap;
  justify-content:center;
  align-items:center;
  gap:16px;
}
@media (max-width:640px){
  .cta-buttons{flex-direction:column;width:100%}
  .cta-buttons > .btn-primary,
.cta-buttons > .btn-ghost{width:100%;max-width:360px}
}
.cta-notes{
  display:flex;
  gap:0 24px;
  justify-content:center;
  flex-wrap:wrap;
  font-size:clamp(14px,2.0vw,16px);
  font-weight:700;
  color:#222222;
  margin-top:8px;
}
.cta-notes span{
  background:transparent;
  color:#222222;
  border-radius:0;
  padding:0;
  box-shadow:none;
}
.cta-notes span::before{content:"● ";color:#1a8b4e;font-size:.85em}
/* スクリーンリーダー/SEO用の視覚非表示テキスト */
.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}


/* ── Customer band ── */
.customer-band{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:var(--sp-5);
  align-items:center;
  padding:52px 0 52px 52px;
  margin-bottom:56px;
  background:#fff;
  border:1.5px solid var(--border);
  box-shadow:var(--card-shadow);
  border-radius:var(--radius-xl);
  position:relative;
}
.customer-band::before{
  content:"";
  position:absolute;
  inset:0;
  background-image:
    linear-gradient(rgba(0,0,0,.03) 1px,transparent 1px),
    linear-gradient(90deg,rgba(0,0,0,.03) 1px,transparent 1px);
  background-size:40px 40px;
  pointer-events:none;
}
.customer-band-left{position:relative;min-width:0}
.customer-band-catch{
  font-family:"LINESeedJPStd","LINE Seed JP","Noto Sans JP",sans-serif;
  font-size:clamp(18px,2.4vw,28px);
  font-weight:800;
  color:var(--navy);
  line-height:1.6;
  margin-bottom:28px;
  letter-spacing:-.02em;
}
.customer-industries{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
}

/* Donut chart */
.customer-band-right{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  position:relative;
  min-width:0;
}
.donut-svg{
  position:absolute;
  right:23%;
  top:50%;
  transform:translateY(-50%) rotate(-90deg);
  width:460px;
  height:460px;
}
@keyframes donut-spin-in{
  0%  {transform:rotate(-450deg);opacity:0}
  25% {opacity:1}
  100%{transform:rotate(-90deg);opacity:1}
}
.donut-ring{
  transform-origin:110px 110px;
}
.donut-ring.is-visible{
  animation:donut-spin-in 3s cubic-bezier(.22,1,.36,1) both;
}
/* Segment colors */
.seg1{stroke:#00c97f}
.seg2{stroke:#00a86b}
.seg3{stroke:#4dd9a0}
.seg4{stroke:#f5a000}
.seg5{stroke:#b8ccd8}
/* Center text (counter-rotated) */
.donut-label-main{
  font-family:"LINESeedJPStd","LINE Seed JP","Noto Sans JP",sans-serif;
  font-size:16px;
  font-weight:800;
  fill:#0d1f3c;
  transform:rotate(90deg);
  transform-origin:110px 110px;
}
/* Legend */
.donut-legend{
  display:flex;
  flex-direction:column;
  gap:var(--sp-2);
}
.dleg{
  display:flex;
  align-items:center;
  gap:var(--sp-2);
  font-size:var(--text-sm);
  font-weight:700;
  color:var(--gray);
  white-space:nowrap;
}
.dleg-dot{
  width:10px;height:10px;
  border-radius:50%;
  flex-shrink:0;
}
.dot1{background:#00c97f}
.dot2{background:#00a86b}
.dot3{background:#4dd9a0}
.dot4{background:#f5a000}
.dot5{background:#b8ccd8}

.customer-industries-frame{
  margin-top:28px;
  padding-top:24px;
  border-top:1px solid var(--border);
}
.ci-frame-label{
  font-size:var(--text-sm);
  font-weight:800;
  color:var(--navy);
  margin:0 0 12px;
  letter-spacing:.02em;
}
.customer-industries{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
}
.ci-tag{
  display:inline-flex;
  align-items:center;
  padding:6px 13px;
  font-size:13px;
  font-weight:700;
  color:var(--navy);
  background:#fff;
  border:1px solid var(--border);
  border-radius:999px;
  line-height:1;
}

@media(max-width:900px){
  .customer-band{grid-template-columns:1fr;text-align:center;padding:40px 20px}
  .customer-industries{justify-content:center}
  .customer-band-right{justify-content:center}
  .donut-legend{flex-direction:column;align-items:flex-start;gap:8px;width:fit-content;margin-left:auto;margin-right:auto}
}
@media(max-width:520px){
  .donut-svg{width:260px;height:260px;right:-40px}
}
@media(max-width:900px){
  .donut-svg{
    position:relative;
    right:auto;
    top:auto;
    transform:rotate(-90deg);
    width:min(260px,72vw);
    height:auto;
    margin:0 auto;
    display:block;
  }
}

/* Case result KPI */
.case-result{
  display:block;
  margin-bottom:12px;
}
.case-kpi{
  display:inline-block;
  font-size:clamp(16px,1.4vw,16px);
  font-weight:800;
  color:var(--navy);
  margin-bottom:12px;
  line-height:1.45;
  border-bottom:2.5px solid var(--green);
  padding-bottom:5px;
}
.case-kpi em{
  font-style:normal;
  color:var(--green);
  font-weight:900;
  font-size:clamp(17px,2vw,20px);
  margin:0 2px;
}

/* H1 sub label */
.h1-sub{
  font-size:clamp(16px,2vw,24px);
  font-weight:800;
  color:var(--navy);
  letter-spacing:.02em;
  display:inline-block;
  margin-bottom:4px;
}


/* Hero logos */
.hero-logos{
  display:table;
  margin:0 auto;
  gap:0;
  margin-top:28px;
  background:rgba(255,255,255,.85);
  border:1.5px solid var(--border);
  border-radius:var(--radius-md);
  padding:16px 20px;
  backdrop-filter:blur(8px);
  max-width:100%;
  width:100%;
}

/* ── FAQ ── */
.faq-wrap{
  display:grid;
  gap:0;
}
.faq-cat-label{
  font-size:clamp(16px,2.3vw,18px);
  font-weight:800;
  color:var(--navy);
  letter-spacing:.02em;
  margin:36px 0 12px;
  padding:4px 0 4px 14px;
  background:none;
  border-left:4px solid var(--green);
  border-radius:0;
}
.faq-cat-label:first-child{margin-top:0}
.faq-cat-label:first-child{margin-top:0}
.faq-item{
  border:2.5px solid var(--border);
  border-radius:var(--radius-md);
  margin-bottom:10px;
  background:#fff;
  overflow:hidden;
  transition:.2s ease;
}
.faq-item:hover{border-color:var(--green)}
.faq-q{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  padding:18px 22px;
  cursor:pointer;
}
.faq-q-text{
  font-size:clamp(16px,1.4vw,17px);
  font-weight:500;
  color:var(--navy);
  line-height:1.6;
  flex:1;
}
.faq-chevron{
  font-size:22px;
  font-weight:400;
  color:var(--green);
  flex-shrink:0;
  transition:transform .25s ease;
  line-height:1;
}
.faq-item.open .faq-chevron{
  transform:rotate(45deg);
}
.faq-a{
  max-height:0;
  overflow:hidden;
  padding:0 22px;
  font-size:clamp(14px,2.0vw,16px);
  color:var(--gray);
  line-height:1.85;
  border-top:0px solid var(--border);
  transition:max-height .2s ease, padding .2s ease, border-color .2s ease;
}
.faq-item.open .faq-a{
  max-height:600px;
  padding:16px 22px 20px;
  border-top-width:2px;
}
.ba-before{
  background: #f5f7fa;
  padding: 38px 22px 0;
  text-align: center;
  position: relative;
  border-radius: 16px 16px 0 0;
}
.ba-after{
  background: #fff;
  padding: 42px 22px 28px;
  text-align: center;
  border-top: 1px dashed #d4dae3;
  position: relative;
  border-radius: 0 0 16px 16px;
}

/* ===== ROI バーチャート（東部環境G 実証） ===== */
.roi-bars-wrap{
  margin: 0 20px;
  max-width: 880px;
}
.roi-bars-head{
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  margin-bottom: 24px;
}

.roi-bars-grid{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 22px;
}

.roi-chart{
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 22px 18px 22px;
  text-align: center;
}
.roi-chart-label{
  font-size:clamp(14px,2.0vw,16px);
  font-weight: 700;
  color: #0d1f3c;
  margin: 0 0 18px;
}
.roi-chart-label sup{
  color: #222222;
  font-size:clamp(14px,2.0vw,16px);
  font-weight: 500;
  margin-left: 2px;
}

.roi-chart-vis{
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  align-items: end;
  gap: 0;
  height: 280px;
  position: relative;
}
.roi-vis-diagonal{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 0;
}

.roi-vis-before{
  display: flex;
  flex-direction: column;
  align-items: center;
  height: 100%;
  justify-content: flex-end;
  position: relative;
  z-index: 1;
}

.roi-vis-before-bar{
  width: 100%;
  max-width: 80px;
  height: 70%;
  background: #d6dde6;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 8px 6px;
  box-sizing: border-box;
}
.roi-vis-before-bar-tall{
  height: 85%;
}
.roi-vis-before-value{
  color: #222222;
  font-weight: 700;
  font-size:clamp(14px,2.0vw,16px);
  white-space: nowrap;
}

.roi-vis-stage-label{
  margin-top: 10px;
  font-size:clamp(14px,2.0vw,16px);
  font-weight: 700;
  color: #222222;
  letter-spacing: .04em;
}
/* グレー棒とグリーン箱の下端を揃える（after側は gap6+margin10=16 のため before も16に） */
.roi-vis-before .roi-vis-stage-label{ margin-top: 16px; }
.roi-vis-stage-after{
  color: #0d1f3c;
  font-weight: 800;
}

.roi-vis-after-stack{
  display: flex;
  flex-direction: column;
  align-items: center;
  height: 100%;
  justify-content: flex-end;
  position: relative;
  z-index: 2;
  gap: 6px;
}
.roi-vis-arrow{
  background: linear-gradient(to bottom, #c8f0db 0%, #7fd4a9 100%);
  clip-path: polygon(0% 0%, 100% 0%, 100% 70%, 65% 70%, 50% 100%, 35% 70%, 0% 70%);
  width: 100%;
  max-width: 130px;
  padding: 16px 8px 32px;
  text-align: center;
}
.roi-vis-arrow-num{
  font-family:"LINESeedJPStd","LINE Seed JP","Noto Sans JP",sans-serif;
  font-size: clamp(28px, 4vw, 42px);
  font-weight: 900;
  color: #0d6b3c;
  line-height: 1;
  letter-spacing: -.02em;
}
.roi-vis-arrow-num span{
  font-size: .55em;
  margin-left: 2px;
  font-weight: 800;
}
.roi-vis-arrow-label{
  font-size: 16px;
  font-weight: 800;
  color: #0d6b3c;
  margin-top: 4px;
  letter-spacing: .04em;
}

.roi-vis-after-box{
  width: 100%;
  max-width: 90px;
  background: linear-gradient(135deg, #0d8f4d 0%, #0aa05c 100%);
  color: #fff;
  padding: 12px 8px;
  font-size:clamp(14px,2.0vw,16px);
  font-weight: 800;
  text-align: center;
  white-space: nowrap;
  box-shadow: 0 4px 14px rgba(13,143,77,.25);
}
.roi-vis-after-box-small{
  padding: 10px 6px;
  font-size:clamp(14px,2.0vw,16px);
}

.roi-bars-source{
  text-align: center;
  font-size: 11px;
  color: #888;
  font-style: italic;
  margin: 22px 0 6px;
}
.roi-bars-notes{
  text-align: center;
  font-size: 11px;
  color: #888;
  line-height: 1.6;
  margin: 0;
}

@media (max-width: 640px) {
  .roi-bars-grid{
    grid-template-columns: 1fr;
    gap: 16px;
  }
  .roi-chart-vis{
    height: 230px;
  }
  .roi-bars-notes{
    text-align: left;
    padding: 0 8px;
  }
}

/* ===== kintone 既ユーザー向けコールアウト ===== */
.kintone-existing-section{
  background: #fff;
  padding-block: clamp(48px,6vw,80px);
}
.kintone-callout{
  margin: 0 auto;
  position: relative;
}
.kintone-callout::before{ content: none; }
.kintone-callout-head{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 28px;
  align-items: center;
  text-align: left;
  margin-bottom: 36px;
  padding-top: 16px;
}

.kintone-callout-points{
  list-style: none;
  padding: 0;
  margin: 0 20px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
.kintone-callout-points li{
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 12px;
  padding: 24px 22px;
  background: #f8fafc;
  border-radius: 14px;
  border: 1px solid #e4eaf0;
  overflow: hidden;
}
.kcp-head{
  display: flex;
  align-items: center;
  gap: 14px;
}
.kcp-num{
  position: static;
  display: inline-block;
  font-family:"LINESeedJPStd","LINE Seed JP","Noto Sans JP",sans-serif;
  font-size: clamp(24px,3.6vw,36px);
  font-weight: 800;
  color: #fab902;
  letter-spacing: .02em;
  line-height: 1;
  background: none;
  padding: 0;
  border-radius: 0;
  box-shadow: none;
  flex-shrink: 0;
}
.kcp-head h3{
  flex: 1;
  min-width: 0;
  margin: 0;
  font-size: clamp(17px,2.2vw,20px);
  line-height: 1.3;
  word-break: keep-all;     /* 日本語の中途半端な単語分割を抑制 */
  overflow-wrap: anywhere;   /* 長すぎる場合のフォールバック */
}
/* PC専用改行：モバイルでは無効化 */
.pc-br{ display: none; }
@media (min-width: 769px) {
  .pc-br{ display: inline; }
}

/* PC向け：狭いカード内テキストの日本語改行を自然な位置で（中途半端な単語分割を抑制） */
@media (min-width: 769px){
  .use-case-title,
  .use-case-desc,
  .case-tags span,
  .strength-body,
  .strength-tag,
  .solution-card .check-list li,
  .ext-card-list li,
  .kpi-bar-label,
  .stat-label,
  .diff-point,
  .ba-pill-before,
  .ba-pill-after,
  .ba-before-title,
  .ba-after-title,
  .ba-after-desc,
  .mc-row-label,
  .mc-best,
  .mc-table tbody td,
  .b3-bottom-note p,
  .b3-rc-name,
  .b3-rc-tool {
    word-break: keep-all;
    overflow-wrap: break-word;
  }
}
.kcp-img{
  display: block;
  width: calc(100% + 44px);
  max-width: none;
  margin: auto -22px -24px; /* margin-top:auto で常にカード下端に張り付かせる */
  aspect-ratio: 16 / 9;     /* 3カードを同じサイズ枠に統一 */
  height: auto;
  object-fit: contain;       /* 画像比率を保ちつつ枠内に収める（はみ出し・切れなし） */
  object-position: center;
  background: #fff;
  border-radius: 0 0 14px 14px;
}
@media (max-width: 768px) {
  .kcp-img{
    width: calc(100% + 36px);
    margin: auto -18px -20px;
  }
}

.kintone-callout-band{
  width: 100%;
  /* 2026-09-03：CTA帯の配色統一（薄緑 → #ebaf30） */
  background: #ebaf30;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  padding: clamp(48px,6vw,72px) clamp(24px,5vw,80px);
}
.kintone-callout-cta{
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  text-align: center;
}
.kintone-callout-band-catch{
  font-family: 'LINESeedJPStd','LINE Seed JP','Noto Sans JP',sans-serif;
  font-size: clamp(18px,2.2vw,24px);
  font-weight: 800;
  color: var(--navy);
  line-height: 1.5;
  margin: 0 0 6px;
}
.kintone-callout-btn{
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: var(--green);
  color: #fff;
  font-weight: 800;
  font-size: 16px;
  padding: 16px 36px;
  border-radius: 999px;
  text-decoration: none;
  box-shadow: 0 8px 32px rgba(0,168,107,0.35);
  transition: transform .15s ease, box-shadow .15s ease, background .15s ease;
}
.kintone-callout-btn:hover{
  background: var(--green2);
  transform: translateY(-1px);
  box-shadow: 0 14px 40px rgba(0,168,107,0.45);
}
.kintone-callout-note{
  font-size:clamp(14px,2.0vw,16px);
  color: #222222;
}

@media (max-width: 768px) {
  .kintone-existing-section{ padding: 44px 0; }
  .kintone-callout{
    padding: 24px 14px;
    border-radius: 14px;
  }
  .kintone-callout-head{
    grid-template-columns: 1fr;
    gap: 14px;
  }
  .kintone-callout-points{
    grid-template-columns: 1fr;
    gap: 14px;
    margin: 0;
  }
  .kintone-callout-points li{
    padding: 18px 14px;
  }
  .kintone-callout-btn{
    font-size: 16px;
    padding: 14px 26px;
    text-align: center;
  }
}

/* ===== FAQ 末尾 CTA ボックス ===== */
.faq-footer-cta{
  margin-top: 36px;
  background: #fafafa;
  border: none;
  border-radius: 14px;
  padding: 22px 28px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  box-shadow: none;
}
.faq-footer-text{
  margin: 0;
  font-size: clamp(14px,1.7vw,16px);
  font-weight: 600;
  color: #2d3748;
  line-height: 1.5;
}
.faq-footer-text-wrap{ flex: 1; min-width: 0; }
.faq-footer-btn{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: linear-gradient(135deg, #078b50, #04a862);
  color: #fff;
  font-weight: 700;
  font-size: 16px;
  padding: 14px 28px;
  border-radius: 999px;
  text-decoration: none;
  box-shadow: 0 4px 14px rgba(7,139,80,.25);
  white-space: nowrap;
  transition: transform .15s ease, box-shadow .15s ease;
}
.faq-footer-btn:hover{
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(7,139,80,.35);
}
@media (max-width: 768px) {
  .faq-footer-cta{
    flex-direction: column;
    align-items: stretch;
    gap: 14px;
    padding: 20px;
    text-align: center;
  }
  .faq-footer-btn{
    justify-content: center;
  }
}

/* ============================
   RESPONSIVE
   ============================ */
@media(max-width:960px){
  .hero-actions{flex-direction:column;align-items:flex-start;flex-wrap:nowrap}
  .hero-actions .btn-primary,.hero-actions .btn-consult,.hero-actions .btn-ghost{width:auto;white-space:nowrap}
  .hero-grid,.gentle-box,.solution-grid,.customer-head{grid-template-columns:1fr}
  .solution-card{flex-direction:column}
  .solution-card-img{order:-1}
  .challenge-grid{grid-template-columns:1fr 1fr}
  .after-flow{grid-template-columns:1fr}
  .after-step:not(:last-child)::after{
    content:"↓";
    right:auto;left:50%;
    top:auto;bottom:-20px;
    transform:translateX(-50%);
  }
  .before-flow-cards{grid-template-columns:1fr 1fr;gap:18px}
  .bflow-card:not(:last-child)::after{display:none}
  .stats-grid{grid-template-columns:1fr 1fr}
  .benefits{grid-template-columns:1fr 1fr}
  .after-points{grid-template-columns:1fr}
  .mid-cta{
  background:linear-gradient(135deg,var(--navy) 0%,#0e2d52 100%);
  border-radius:var(--radius-xl);
  position:relative;
  overflow:hidden;
}
.mid-cta::before{
  content:"";
  position:absolute;
  right:-60px;top:-60px;
  width:250px;height:250px;
  border-radius:50%;
  background:radial-gradient(circle,rgba(0,168,107,.15) 0%,transparent 70%);
  pointer-events:none;
}
}
@media(max-width:600px){
  .inner{width:calc(100% - 32px)}
  .section{padding:64px 0}
  .hero{
  position:relative;
  overflow:hidden;
  color:#fff;
  padding:0;
  min-height:max(600px, calc(100dvh - var(--header-h, 72px)));
  display:block;
}
  .solution-card,
.case-card{padding:22px}
  .btn-primary,
.btn-ghost,
.header-cta{width:100%;min-width:auto;justify-content:center}
  .header-inner{height:auto;padding:14px 0;align-items:flex-start;flex-direction:column;gap:var(--sp-2)}
  .stats-grid{grid-template-columns:1fr 1fr}
  /* Hero: 1カラム・高さ調整 */
  .hero-fullbg-inner{align-items:flex-start;padding-top:40px}
  .hero-content{width:100%;max-width:100%;text-align:left}
  /* モバイルは上部に白スクリム（テキスト可読）、下部に人物を見せる */
  .hero-overlay{background:linear-gradient(to bottom,rgba(245,251,248,.55) 0%,rgba(245,251,248,.5) 55%,rgba(245,251,248,.3) 72%,rgba(245,251,248,0) 90%)}
  .hero-fullbg{background-position:center 20%}
  .hero{height:auto;min-height:auto}
  .hero-fullbg{height:auto;min-height:620px}
  .hero-actions{flex-direction:column;align-items:stretch}
  .hero-actions .btn-primary,
.hero-actions .btn-consult,
.hero-actions .btn-ghost{width:100%;justify-content:center}
  /* Ticker: グラデーション幅縮小 */
  .ticker-outer::before,
.ticker-outer::after{width:60px}
  /* 事例バッジ: スマホ時カードに近く */
  .case-card-with-photo .case-badge{top:-36px}
  /* footer */
  .gb-star-row{justify-content:center}
  .gb-address-grid{grid-template-columns:1fr}
  .hero-sub br,
.lead br{display:none}
  /* ボタン文字サイズ縮小 */
  .btn-primary{font-size:16px;padding:16px 28px}
  .btn-ghost{font-size:16px;padding:14px 24px}
  /* セクション見出し余白 */
  .title{margin-bottom:14px}
  .lead{margin-bottom:28px}
  /* カードの余白 */
  .section{padding:56px 0}
  /* FAQテキスト */
  .faq-q{padding:16px 18px}
}


/* ===== Pricing Section ===== */
.pricing-section{
  background: #fff;
}
.pricing-notes{
  list-style: none;
  padding: 0;
  text-align: left;
  display: flex;
  flex-direction: column;
  gap: 0px;
  color: #222222;
  font-size: 13px;
}
.pricing-notes li::before{
  content: "※ ";
}

/* ===== 月額料金に含まれるもの ===== */
.pricing-included{
  margin-top: 32px;
  background: #fff;
  border: 1px solid #e4eae0;
  border-radius: 16px;
  padding: 28px 32px;
  box-shadow: 0 6px 20px rgba(13,31,60,.06);
}
.included-title{
  font-size:clamp(15px,2.1vw,17px);
  font-weight: 800;
  color: #0d1f3c;
  margin: 0 0 18px;
  padding-bottom: 12px;
  border-bottom: 2px solid #e4eae0;
  letter-spacing: .02em;
}
.included-list{
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 12px 24px;
}
.included-list li{
  display: flex;
  align-items: center;
  gap: 10px;
  font-size:clamp(14px,2.0vw,16px);
  color: #2d3748;
  line-height: 1.5;
}
.included-list li strong{
  font-weight: 800;
  color: #0d1f3c;
}
.included-check{
  flex-shrink: 0;
  color: #078b50;
}
@media (max-width: 768px) {
  .pricing-included{
    padding: 22px 20px;
  }
  .included-title{
    font-size:clamp(14px,2.0vw,16px);
  }
  .included-list{
    grid-template-columns: 1fr;
    gap: 10px;
  }
  .included-list li{
    font-size:clamp(14px,2.0vw,16px);
  }
}

/* ヘッダーコーナーセル サブラベル（display:none下だがa11y用） */
.cell-corner .label-sub{
  font-size: 16px;
  font-weight: 700;
  opacity: .82;
  letter-spacing: .04em;
  margin-top: 2px;
}

/* ===== PRICING サブタイトル（「年間一括払」見出しと同系統） ===== */
.pricing-subtitle{
  text-align: left;
  font-size:clamp(16px,2.3vw,18px);
  font-weight: 700;
  color: #222;
  margin: 8px 0 28px;
  padding: 0 0 12px 10px;
  border-left: 4px solid #fab902;
  border-radius: 0;
  letter-spacing: .04em;
  line-height: 1.5;
}
.pricing-subtitle strong{
  color: #ff7f3f;
  font-weight: 900;
  margin-right: 4px;
}
.pricing-subtitle-sub{
  display: inline-block;
  font-size:clamp(14px,2.0vw,16px);
  font-weight: 500;
  color: #222222;
  margin-left: 6px;
  letter-spacing: .02em;
}
@media (max-width: 768px) {
  .pricing-subtitle{
    font-size:clamp(14px,2.0vw,16px);
    margin: 4px 0 22px;
    padding-left: 8px;
  }
  .pricing-subtitle-sub{
    display: block;
    font-size:clamp(14px,2.0vw,16px);
    margin-left: 0;
    margin-top: 4px;
  }
}


/* ===== Case Card Logo ===== */
.case-logo-wrap{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
  max-width: 100%;
}
.case-logo{
  height: 32px;
  max-width: 130px;
  width: auto;
  object-fit: contain;
  display: block;
}
.case-logo-sama{
  font-size: 13px;
  color: #222222;
  white-space: nowrap;
  flex-shrink: 0;
}
.case-logo-text{
  font-size:clamp(14px,2.0vw,16px);
  font-weight: 800;
  color: var(--navy);
  line-height: 1.4;
}
.case-card h3{
  font-size:clamp(14px,2.0vw,16px);
  color: var(--gray);
  font-weight: 400;
  margin: 0 0 10px;
}


.logo-bg-dark{
  display: inline-flex;
  align-items: center;
  background: #1d2c4a;
  border-radius: 6px;
  padding: 5px 10px;
}
.logo-bg-dark .case-logo{
  height: 28px;
  filter: brightness(1.1);
}


/* ===== GlobalB Footer (gbalb.com style) ===== */
/* ===== Promo Banner（パララックス背景） =====
   background-attachment: fixed で「窓から覗いた画像が固定されて見える」効果。
   PCでは fixed、iOS/Android では fixed が不安定なので scroll に切替。
   ※ transform/filter/perspective が ancestor にあると fixed が壊れるため、
      .reveal などのフェードイン animation 対象外にしている。 */
.promo-banner{
  width: 100vw;
  margin-left: calc(-50vw + 50%);
  margin-right: calc(-50vw + 50%);
  height: clamp(280px, 32vw, 420px);
  background-image: url('../img/LITONEfooterback.webp');
  background-attachment: fixed;
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  /* reveal が誤って付与された場合の保険 */
  transform: none !important;
  opacity: 1 !important;
}
@media (max-width: 768px) {
  .promo-banner{
    background-attachment: scroll;
    height: clamp(200px, 50vw, 320px);
  }
}
@media (prefers-reduced-motion: reduce) {
  .promo-banner{ background-attachment: scroll; }
}

.site-footer{ background: #fff; border-top: 1px solid #e8edf2; }
.gb-footer-wrap{
  max-width: 940px;
  margin: 0 auto;
  padding: 48px 24px 32px;
}
.gb-footer-head{
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 36px;
  flex-wrap: wrap;
  text-align: center;
  margin-bottom: 28px;
  padding-bottom: 24px;
  border-bottom: 1px solid #eef2f7;
}
.gb-footer-head-logo{
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}
.gb-company-logo{
  height: 40px;
  width: auto;
  display: block;
  margin: 0;
}
.gb-company-name{
  font-size: clamp(14px,1.7vw,16px);
  font-weight: 800;
  color: #0d1f3c;
  margin-bottom: 0;
}
@media (max-width: 640px) {
  .gb-footer-head{ gap: 20px; }
  .gb-plogo{ height: 48px; }
}
.gb-address-grid{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px 24px;
  margin-bottom: 28px;
  padding: 0px 24px;
  background: none;
  border-radius: 0;
  font-size: clamp(11px,1.2vw,12px);
  color: #222222;
  line-height: 1.8;
  font-style: normal;
}
@media (max-width: 768px) {
  .gb-address-grid{
    grid-template-columns: 1fr;
    gap: 12px;
    padding: 0 16px;
  }
}
/* .gb-footer-partners / .gb-partner-desc は撤去（パートナーロゴはヘッダーへ移動） */
.gb-partner-logos{ display: flex; gap: 8px; align-items: center; flex-shrink: 0; }
.gb-plogo{ height: 60px; width: auto; }
.gb-star-row{
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
  margin-bottom: 14px;
  flex-wrap: wrap;
}
.gb-star-badge{ height: 100px; width: auto; flex-shrink: 0; }
.gb-crs-icon{ height: 86px; width: auto; flex-shrink: 0; border-radius: 8px; }
.gb-award-img{ height: 120px; width: auto; flex-shrink: 0; }
.trust-crs-img{ height: 80px; width: auto; flex-shrink: 0; border-radius: 6px; }
@media (max-width: 640px) {
  .gb-crs-icon{ height: 64px; }
  .trust-crs-img{ height: 60px; }
}
.gb-cert-iso{
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
}
.gb-cert-img{ height: 60px; width: auto; display: block; }
.gb-cert-note{
  font-size: 11px;
  color: #222222;
  margin: 0;
  line-height: 1.3;
  text-align: center;
}
@media (max-width: 640px) {
  .gb-cert-img{ height: 52px; }
}
.gb-star-text-box{
  flex: 1;
  min-width: 200px;
  background: #fff;
  border: 0;
  border-radius: 10px;
  padding: 16px 20px;
  text-align: center;
}
.gb-star-text-box .st-label{
  font-size:clamp(14px,2.0vw,16px);
  font-weight: 700;
  color: #0d1f3c;
  opacity: .7;
  margin-bottom: 4px;
}
.gb-star-text-box .st-body{
  font-size:clamp(13px,1.9vw,15px);
  font-weight: 800;
  color: #0d1f3c;
  line-height: 1.5;
}
.gb-copyright{
  font-size: 12px;
  color: #222222;
  text-align: center;
  padding-top: 16px;
  border-top: 1px solid #eef2f7;
}


/* ── 比較表セクション ── */
.comparison-section{background:#fff;position:relative;overflow:hidden}

/* ===== ポップ装飾（共通ブロブ・ドット・キラキラ） ===== */
/* --- ブロブ：COMPARISON（緑＋黄） --- */
.comparison-section::before{
  content:"";position:absolute;
  top:-90px;left:-70px;
  width:340px;height:340px;
  background:radial-gradient(circle at 35% 35%, #c4e8d4 0%, #d9f0e3 55%, transparent 74%);
  border-radius:46% 54% 60% 40% / 52% 44% 56% 48%;
  z-index:0;pointer-events:none;
}
.comparison-section::after{
  content:"";position:absolute;
  bottom:-110px;right:-70px;
  width:380px;height:380px;
  background:radial-gradient(circle at 60% 40%, #ffe89c 0%, #fff2c4 55%, transparent 72%);
  border-radius:58% 42% 45% 55% / 48% 56% 44% 52%;
  z-index:0;pointer-events:none;
}
.comparison-section .inner{position:relative;z-index:1}

/* --- ブロブ：CASE STUDY（ミント＋黄） --- */
.case-section{position:relative;overflow:hidden;padding-bottom:0}
.case-section::before{
  content:"";position:absolute;
  top:-100px;right:-80px;
  width:360px;height:360px;
  background:radial-gradient(circle at 50% 40%, #bfe9dc 0%, #d8f2ea 55%, transparent 73%);
  border-radius:52% 48% 56% 44% / 50% 52% 48% 50%;
  z-index:0;pointer-events:none;
}
.case-section::after{
  content:"";position:absolute;
  bottom:-120px;left:-90px;
  width:340px;height:340px;
  background:radial-gradient(circle at 40% 50%, #ffe89c 0%, #fff2c4 55%, transparent 72%);
  border-radius:44% 56% 50% 50% / 56% 46% 54% 44%;
  z-index:0;pointer-events:none;
}
.case-section .inner{position:relative;z-index:1}
/* --- ブロブ：PRICING（黄＋緑） --- */
.pricing-section{position:relative;overflow:hidden}
.pricing-section::before{
  content:"";position:absolute;
  top:-90px;left:-80px;
  width:350px;height:350px;
  background:radial-gradient(circle at 40% 40%, #ffe89c 0%, #fff2c4 55%, transparent 72%);
  border-radius:50% 50% 56% 44% / 54% 48% 52% 46%;
  z-index:0;pointer-events:none;
}
.pricing-section::after{
  content:"";position:absolute;
  bottom:-110px;right:-70px;
  width:340px;height:340px;
  background:radial-gradient(circle at 55% 45%, #c4e8d4 0%, #d9f0e3 55%, transparent 73%);
  border-radius:56% 44% 48% 52% / 46% 54% 46% 54%;
  z-index:0;pointer-events:none;
}
.pricing-section .inner{position:relative;z-index:1}
.pricing-section .inner::before{
  content:"";position:absolute;
  top:8px;right:0;
  width:96px;height:64px;
  background-image:radial-gradient(#f3d97a 2.2px, transparent 2.6px);
  background-size:16px 16px;opacity:.75;
  z-index:0;pointer-events:none;
}

.comp-table-wrap{
  overflow-x:auto;
  margin:clamp(24px,3vw,40px) 20px 0;
  border-radius:var(--radius-lg);
  border:1.5px solid var(--border);
  box-shadow:var(--shadow-card);
}
.comp-table{
  width:100%;
  border-collapse:collapse;
  font-size:14px;
  min-width:560px;
}
.comp-table thead th{
  padding:12px 12px;
    width: 24%;
  font-weight:800;
  font-size:14px;
  text-align:center;
  background:var(--navy);
  color:#fff;
  border-right:1px solid rgba(255,255,255,.1);
}
.comp-table thead th.comp-feature-col{
  text-align:left;
  width:30%;
}
.comp-table thead th.comp-litone{
  background:var(--litone-orange);
  color:#0d1f3c;
}
.comp-table thead th span{
  display:block;
  font-size:12.5px;
  font-weight:600;
  opacity:.8;
  margin-top:2px;
}
.comp-table tbody tr:nth-child(even) td{background:#f8fafc}
.comp-table tbody tr:nth-child(even) td.comp-litone{background:#fbf1cf}
.comp-table tbody td{
  padding:10px 12px;
  border-top:1px solid var(--border);
  border-right:1px solid var(--border);
  text-align:center;
  vertical-align:middle;
  color:var(--navy);
}
.comp-table tbody td:first-child{
  text-align:left;
  font-weight:600;
}
.comp-table tbody td.comp-litone{
  background:#fdf7e6;
  font-weight:700;
}
.comp-o{color:var(--green);font-size:16px;font-weight:900;display:block}
/* LITONE列の◎も他列と同じ緑で統一（2026-06-15）*/
.comp-table td.comp-litone .comp-o{color:var(--green)}
.comp-t{color:#f59e0b;font-size:16px;font-weight:900;display:block}
.comp-m{color:#f59e0b;font-size:16px;font-weight:900;display:block}
.comp-x{color:#ef4444;font-size:16px;font-weight:900;display:block}
.comp-table small{display:block;font-size:12.5px;color:var(--gray);margin-top:2px;font-weight:400}
.comp-note{
  font-size:13px;
  color:var(--gray);
  margin-top:12px;
  text-align:right;
}

/* ── 他社との違いカード ── */
.diff-card{
  margin-top:clamp(32px,4vw,52px);
  padding:clamp(28px,3vw,44px) clamp(24px,3vw,48px);
  background:linear-gradient(135deg,#f0faf6 0%,#e8f5f0 100%);
  border:1.5px solid var(--border);
  border-radius:var(--radius-xl);
}
.diff-card-header{
  text-align:center;
  margin-bottom:clamp(24px,3vw,16px);
}
.diff-label{
  display:inline-block;
  font-size:clamp(14px,2.0vw,16px);
  font-weight:800;
  letter-spacing:.12em;
  color:var(--green);
  text-transform:uppercase;
  margin-bottom:8px;
}
.diff-title{
  font-size:clamp(18px,2vw,24px);
  font-weight:800;
  color:var(--navy);
}
.diff-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:clamp(16px,2vw,28px);
}
.diff-item{
  display:flex;
  gap:14px;
  align-items:flex-start;
  background:#fff;
  border-radius:var(--radius-lg);
  padding:20px;
  border:1px solid var(--border);
}
.diff-icon{
  flex-shrink:0;
  width:40px;
  height:40px;
  display:flex;
  align-items:center;
  justify-content:center;
  background:var(--cream);
  border-radius:10px;
  color:var(--navy);
}
.diff-point{
  font-size:clamp(15px,2.1vw,17px);
  font-weight:800;
  color:var(--navy);
  margin-bottom:6px;
  line-height:1.5;
}
.diff-sub{
  font-size:clamp(14px,2.0vw,16px);
  color:var(--gray);
  line-height:1.75;
}
@media(max-width:768px){
  .diff-grid{grid-template-columns:1fr}
}


/* ── fare/style.css: 料金表CSS ── */
/* ===========================================
   LINE WORKS 料金表 - カード型デザイン（PC/SP共通）
   角丸・ダークヘッダー・ホワイトボディ
   =========================================== */









.price-table-wrapper{
  max-width: 1240px;
  margin: 0 auto;
  padding: 0 20px;
}
.ba-table{padding:0 20px}

/* ===========================================
   ベースレイアウト（モバイルファースト）
   =========================================== */
.price-table{
  display: flex;
  flex-direction: column;
  gap: 0;
  background: transparent;
  border: none;
  min-width: 0;
}

/* ---------- 非表示にする要素（カード化により不要） ---------- */
.cell-corner,
.cell-initial-label{
  display: none;
}

/* ---------- 1. 初期構築費用バナー ---------- */
.cell-initial-value{
  order: 1;
  background: #ffeed3;
  border: 2px solid #f0c060;
  border-radius: 14px;
  padding: 18px 14px;
  margin-bottom: 24px;
  min-height: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  font-size: 28px;
  font-weight: 700;
  color: #000;
  letter-spacing: 0.04em;
  text-align: center;
}
.cell-initial-value::before{
  content: "初期構築費用";
  font-size: 16px;
  font-weight: 600;
  color: #000000;
  letter-spacing: 0.06em;
}

/* ---------- 2. セクション見出し「年間一括払（月換算）」 ---------- */
.cell-yearly-label{
  order: 2;
  background: transparent;
  border: none;
  padding: 0 0 12px 10px;
  margin-bottom: 8px;
  min-height: auto;
  display: flex;
  flex-direction: row;
  align-items: baseline;
  justify-content: flex-start;
  gap: 6px;
  border-left: 4px solid #fab902;
  border-radius: 0;
  text-align: left;
}
.cell-yearly-label span{
  display: inline-block;
  font-size: 18px;
  font-weight: 700;
  color: #222;
  letter-spacing: 0.04em;
}
.cell-yearly-label .label-sub{
  font-size: 16px;
  font-weight: 500;
  color: #222222;
}

/* ---------- 3. カードのヘッダー部（1〜20 など） ---------- */
.cell-header:not(.cell-label-col){
  background: #2b2b2b;
  color: #fff;
  border: 1.5px solid #2b2b2b;
  border-radius: 12px 12px 0 0;
  padding: 14px 12px 16px;
  font-size: 22px;
  font-weight: 700;
  min-height: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  line-height: 1.2;
}
.cell-header:not(.cell-label-col)::before{
  content: "LINE WORKS ユーザー数";
  font-size: 12px;
  font-weight: 500;
  opacity: 0.7;
  letter-spacing: 0.04em;
}

/* ---------- 4. カードのデータ部（料金本体） ---------- */
.cell-data{
  background: #fff;
  border: 1.5px solid #2b2b2b;
  border-top: none;
  border-radius: 0 0 12px 12px;
  padding: 22px 14px;
  margin-bottom: 14px;
  min-height: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}
.cell-data:last-child{
  margin-bottom: 0;
}

.cell-data .user-count{
  font-size: 12px;
  color: #222222;
  margin-bottom: 4px;
  font-weight: 500;
}
.cell-data .user-count br{
  display: none;
}

.cell-data .price-amount{
  color: #00a86b;
  font-size: 30px;
  font-weight: 800;
  margin: 4px 0 12px;
  line-height: 1.1;
  letter-spacing: 0.02em;
}

.cell-data .per-user-badge{
  background: #fab902;
  color: #000;
  font-size: 11px;
  font-weight: 700;
  padding: 4px 12px;
  border-radius: 999px;
  display: inline-block;
  letter-spacing: 0.02em;
  margin-bottom: 6px;
}

.cell-data .per-user-amount{
  font-size: 20px;
  font-weight: 600;
}

/* ---------- 5. 「101〜500」の詳細セル ---------- */
.cell-data-detail{
  padding-bottom: 18px;
}
.cell-data-detail .note{
  font-size: 13px;
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px dashed #ccc;
  align-self: stretch;
  text-align: center;
  color: #222222;
}
.cell-data-detail .tier-list{
  list-style: none;
  align-self: center;
  max-width: 240px;
  margin-top: 6px;
  font-size: 13px; /* モバイル/タブレット用。PC(≥961px)では下の media query で 10.4px に上書き */
  line-height: 1.9;
  text-align: left;
  padding-left: 0;
}
.cell-data-detail .tier-list li{
  display: flex;
  gap: 8px;
  justify-content: center;
}
.cell-data-detail .tier-range{
  display: inline-block;
  min-width: 36px;
}

/* ---------- 6. 「1,
001以上」相談セル ---------- */
.cell-consult{
  background: #fffbe6;
  justify-content: center;
}
.cell-consult .consult-text{
  font-size: 16px;
  font-weight: 600;
  line-height: 1.7;
  color: #b07b00;
}

/* ---------- 7. カードの並び順（order） ---------- */
/* バナー(1) → 見出し(2) → 各 tier の header → data */
.tier-1.cell-header{ order: 3; }
.tier-1.cell-data{ order: 4; }
.tier-2.cell-header{ order: 5; }
.tier-2.cell-data{ order: 6; }
.tier-3.cell-header{ order: 7; }
.tier-3.cell-data{ order: 8; }
.tier-4.cell-header{ order: 9; }
.tier-4.cell-data{ order: 10; }
.tier-5.cell-header{ order: 11; }
.tier-5.cell-data{ order: 12; }
.tier-6.cell-header{ order: 13; }
.tier-6.cell-data{ order: 14; }

/* ===========================================
   タブレット以上（≥ 641px）：3列カードグリッド
   =========================================== */
@media (min-width: 641px){
  

  .price-table {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: auto auto auto auto 36px auto auto;
    column-gap: 16px;
    row-gap: 0;
    align-items: stretch;
  }

  /* バナー：全幅 */
  .cell-initial-value {
    grid-column: 1 / -1;
    grid-row: 1;
    flex-direction: row;
    gap: 24px;
    padding: 20px 28px;
    font-size:clamp(30px,4.0vw,32px);
    margin-bottom: 28px;
  }
  .cell-initial-value::before {
    font-size:clamp(14px,2.0vw,16px);
    padding-right: 20px;
    border-right: 1.5px solid #c89c4a;
  }

  /* セクション見出し：全幅 */
  .cell-yearly-label {
    grid-column: 1 / -1;
    grid-row: 2;
    padding: 0 0 14px 12px;
    margin-bottom: 14px;
  }
  .cell-yearly-label span { font-size:clamp(18px,2.5vw,20px); }

  /* カードヘッダー（tier-1〜6） */
  .cell-header:not(.cell-label-col) {
    margin-bottom: 0;
    align-self: stretch;
    height: 100%;
  }
  .cell-data {
    margin-bottom: 24px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
    align-self: stretch;
    height: 100%;
  }

  /* 各 tier カードのグリッド配置（3列×2段、間に row 5=36pxスペーサー） */
  .tier-1.cell-header { grid-column: 1; grid-row: 3; }
  .tier-1.cell-data   { grid-column: 1; grid-row: 4; }
  .tier-2.cell-header { grid-column: 2; grid-row: 3; }
  .tier-2.cell-data   { grid-column: 2; grid-row: 4; }
  .tier-3.cell-header { grid-column: 3; grid-row: 3; }
  .tier-3.cell-data   { grid-column: 3; grid-row: 4; }
  .tier-4.cell-header { grid-column: 1; grid-row: 6; }
  .tier-4.cell-data   { grid-column: 1; grid-row: 7; }
  .tier-5.cell-header { grid-column: 2; grid-row: 6; }
  .tier-5.cell-data   { grid-column: 2; grid-row: 7; }
  .tier-6.cell-header { grid-column: 3; grid-row: 6; }
  .tier-6.cell-data   { grid-column: 3; grid-row: 7; }
}

/* ===========================================
   PC（≥ 961px）：6列カードグリッド
   =========================================== */
@media (min-width: 961px){
  

  .price-table {
    grid-template-columns: repeat(6, 1fr);
    grid-template-rows: auto auto auto auto;
    column-gap: 14px;
  }

  /* バナーと見出しは全幅維持 */
  .cell-initial-value {
    grid-column: 1 / -1;
    padding: 22px 32px;
    font-size:clamp(32px,4.3vw,34px);
    margin-bottom: 32px;
  }

  .cell-yearly-label {
    grid-column: 1 / -1;
    padding: 0 0 14px 14px;
    margin-bottom: 16px;
  }
  .cell-yearly-label span { font-size:clamp(20px,2.8vw,22px); }
  .cell-yearly-label .label-sub { font-size:clamp(14px,2.0vw,16px); }

  /* 各 tier を 1列ずつ配置（6カードを1列に横並び） */
  .tier-1.cell-header { grid-column: 1; grid-row: 3; }
  .tier-1.cell-data   { grid-column: 1; grid-row: 4; }
  .tier-2.cell-header { grid-column: 2; grid-row: 3; }
  .tier-2.cell-data   { grid-column: 2; grid-row: 4; }
  .tier-3.cell-header { grid-column: 3; grid-row: 3; }
  .tier-3.cell-data   { grid-column: 3; grid-row: 4; }
  .tier-4.cell-header { grid-column: 4; grid-row: 3; }
  .tier-4.cell-data   { grid-column: 4; grid-row: 4; }
  .tier-5.cell-header { grid-column: 5; grid-row: 3; }
  .tier-5.cell-data   { grid-column: 5; grid-row: 4; }
  .tier-6.cell-header { grid-column: 6; grid-row: 3; }
  .tier-6.cell-data   { grid-column: 6; grid-row: 4; }

  /* PC ではカードヘッダーをやや小さく */
  .cell-header:not(.cell-label-col) {
    font-size:clamp(17px,2.4vw,19px);
    padding: 14px 8px 16px;
  }
  .cell-header:not(.cell-label-col)::before {
    font-size: 12px;
  }

  /* PC ではデータ部の余白を最適化 */
  .cell-data {
    padding: 22px 10px;
  }
  .cell-data .price-amount {
    font-size:clamp(22px,3.0vw,24px);
  }
  .cell-data .per-user-amount {
    font-size:clamp(16px,2.3vw,18px);
  }
  .cell-data .per-user-badge {
    font-size: 11px;
    padding: 4px 12px;
  }

  /* 詳細セル（101〜500）の余白 */
  .cell-data-detail .note {
    font-size: 13px;
  }
  .cell-data-detail .tier-list {
    font-size: 10.4px;
  }
}

/* ══════════════════════════════════════
   BEFORE / AFTER 比較レイアウト v5
   ══════════════════════════════════════ */

/* ── 全体コンテナ ── */
.ba-compare{
  display: grid;
  grid-template-columns: 1fr 1fr;
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 6px 40px rgba(10,22,40,.14);
  border: 1px solid rgba(10,22,40,.1);
}

.ba-col{ display: flex; flex-direction: column; min-width: 0; }
.ba-col-after{ border-left: 2px solid rgba(10,22,40,.08); }

/* ── カラムヘッダー ── */
.ba-col-head{ padding: 20px 24px 18px; }
.ba-col-head-before{ background: #0a1628; }
.ba-col-head-after{ background: #edb94a; }

.ba-head-badge{
  display: inline-block;
  font-size: 16px;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
  padding: 3px 10px;
  border-radius: 99px;
  margin-bottom: 10px;
  font-family:"LINESeedJPStd","LINE Seed JP","Noto Sans JP",sans-serif;
}
.ba-col-head-before .ba-head-badge{
  background: rgba(180,180,180,.2);
  color: #c0c0c0;
  border: 1px solid rgba(180,180,180,.35);
}
.ba-col-head-after .ba-head-badge{
  background: rgba(90,50,10,.25);
  color: #5a2e00;
  border: 1px solid rgba(90,50,10,.3);
}
.ba-head-title{
  font-size: clamp(22px,2.4vw,30px);
  font-weight: 900;
  color: #fff;
  letter-spacing: -.02em;
  line-height: 1.1;
  margin-bottom: 6px;
  font-family:"LINESeedJPStd","LINE Seed JP","Noto Sans JP",sans-serif;
}
.ba-head-desc{
  font-size:clamp(14px,2.0vw,16px);
  color: rgba(255,255,255,.8);
  font-weight: 600;
  line-height: 1.5;
}

/* ── ステップリスト（縦並びカード） ── */
.ba-step-list{
  flex: 1;
  padding: 30px;
  background: #f2f5f8;
  display: flex;
  flex-direction: column;
}
.ba-col-before .ba-step-list{ background: #f0f0f0; }
.ba-col-after  .ba-step-list{ background: #fdf6e3; }

/* ── 個別ステップカード ── */
.ba-step-card{
  background: #fff;
  border-radius: 12px;
  padding: 12px 14px;
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 12px;
}
.ba-col-before .ba-step-card{
  border: 1.5px solid #d8d8d8;
}
.ba-col-after .ba-step-card{
  border: 1.5px solid #f0d090;
}


/* ── ステップ間矢印 ── */
.ba-step-arrow{
  text-align: center;
  padding: 2px 0;
  font-size: 18px;
  line-height: 1;
  user-select: none;
}
.ba-col-before .ba-step-arrow{ color: #c0c0c0; }
.ba-col-after  .ba-step-arrow{ color: #edb94a; }

/* ── 数字＋アイコン＋タイトル（同一行） ── */
.ba-step-head{
  display: flex;
  align-items: center;
  gap: 7px;
  margin-bottom: 6px;
}
.ba-snum{
  font-size:clamp(24px,3.3vw,26px);
  font-weight: 900;
  font-family:"LINESeedJPStd","LINE Seed JP","Noto Sans JP",sans-serif;
  line-height: 1;
  flex-shrink: 0;
  letter-spacing: -.02em;
}
.ba-col-before .ba-snum{ color: #b8b8b8; }
.ba-col-after  .ba-snum{ color: #edb94a; }

.ba-sstep-icon{
  flex-shrink: 0;
  display: flex;
  align-items: center;
}
.ba-col-before .ba-sstep-icon{ color: #a0a0a0; }
.ba-col-after  .ba-sstep-icon{ color: #c88a00; }

.ba-stitle{
  font-size:clamp(14px,2.0vw,16px);
  font-weight: 800;
  color: var(--navy);
  line-height: 1.2;
}

/* ── メインテキスト（太字カラー） ── */
.ba-smain{
  font-size:clamp(15px,2.1vw,17px);
  font-weight: 800;
  line-height: 1.45;
  margin: 0 0 4px;
}
.ba-col-before .ba-smain{ color: #222222; }
.ba-col-after  .ba-smain{ color: #8a5c00; }

/* ── サブテキスト ── */
.ba-sdesc{
  font-size:clamp(14px,2.0vw,16px);
  color: #222222;
  line-height: 1.65;
  margin: 0 0 8px;
}

/* ── 人物画像（カード内下部） ── */
.ba-simg{
  width: 35%;
  height: auto;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.ba-simg img{
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: bottom center;
}

/* ── 下部まとめエリア ── */
.ba-col-bottom{
  padding: 18px 18px 22px;
  border-top: 2px solid;
}
.ba-col-before .ba-col-bottom{ background: #141e2e; border-color: rgba(150,150,150,.3); }
.ba-col-after  .ba-col-bottom{ background: #fffbf0; border-color: #f0d090; }

.ba-bottom-label{
  font-size:clamp(14px,2.0vw,16px);
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
  margin-bottom: 12px;
  font-family:"LINESeedJPStd","LINE Seed JP","Noto Sans JP",sans-serif;
}
.ba-col-before .ba-bottom-label{ color: #909090; }
.ba-col-after  .ba-bottom-label{ color: #c88a00; }

.ba-bitem-list{ display: flex; flex-direction: column; gap: 8px; }
.ba-bitem{
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size:clamp(14px,2.0vw,16px);
  font-weight: 700;
  line-height: 1.55;
}
.ba-col-before .ba-bitem{ color: rgba(255,255,255,.85); }
.ba-col-after  .ba-bitem{ color: #3a2800; }

.ba-bmark{
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size:clamp(14px,2.0vw,16px);
  font-weight: 900;
  margin-top: 1px;
  line-height: 1;
}
.ba-col-before .ba-bmark{
  background: rgba(150,150,150,.2);
  color: #909090;
  border: 1px solid rgba(150,150,150,.3);
}
.ba-col-after .ba-bmark{
  background: #fde8a0;
  color: #8a5c00;
  border: 1px solid #f0c840;
}

/* ── レスポンシブ ── */
@media (max-width: 860px){
  .ba-compare { grid-template-columns: 1fr; }
  .ba-col-after { border-left: none; border-top: 3px solid #e0e8f0; }
  .ba-step-card { gap: 8px; padding: 10px 12px; }
  .ba-simg { width: 30%; height: auto; }
}
@media (max-width: 480px) {
  .ba-col-head{ padding: 16px 18px 14px; }
  .ba-step-list{ flex-direction: column; overflow-x: visible; }
  .ba-step-card{ gap: 8px; padding: 9px 10px; }
  .ba-step-arrow{ transform: none; padding: 2px 0; }
  .ba-snum{ font-size:clamp(20px,2.8vw,22px); }
  .ba-simg{ width: 28%; height: auto; }
  .ba-col-bottom{ padding: 16px 16px 18px; }
}


.ba-stextblock{ flex: 1; min-width: 0; }

/* ── KPI BAR（全幅・ヒーロー直下） ── */
.kpi-bar{
  background: #f5f5f5;
  border-top: 1px solid #e8e8e8;
  border-bottom: 1px solid #e8e8e8;
  padding: 28px 0;
}
.kpi-bar-inner{
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0;
}
.kpi-bar-item{
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  flex: 1;
  max-width: 220px;
}
.kpi-bar-num{
  font-family:"LINESeedJPStd","LINE Seed JP","Noto Sans JP",sans-serif;
  font-size: clamp(28px, 4vw, 48px);
  font-weight: 800;
  color: var(--primary, #1a1a2e);
  letter-spacing: -0.02em;
  line-height: 1;
}
.kpi-bar-num small{
  font-size: .34em;
  letter-spacing: 0;
}
.kpi-bar-pre{
  display: block;
  font-size: .22em;
  font-weight: 700;
  letter-spacing: 0.05em;
  color: var(--gray, #666);
}
.kpi-bar-label{
  font-size: clamp(16px, 1vw, 16px);
  font-weight: 700;
  color: var(--gray, #666);
  letter-spacing: 0.05em;
}
.kpi-bar-divider{
  width: 1px;
  height: 48px;
  background: #ccc;
  flex-shrink: 0;
  margin: 0 24px;
}
@media (max-width: 600px) {
  .kpi-bar-inner{ gap: 0; }
  .kpi-bar-divider{ height: 32px; margin: 0 12px; }
  .kpi-bar-num{ font-size: clamp(24px, 6vw, 36px); }
}

.kpi-bar-note{
  font-size: 11px;
  color: #888;
  text-align: right;
  margin: 8px 0 0;
}

.manga-frame{
    max-width:760px;
    margin:0 auto 32px;
    border-radius:24px;
    overflow:hidden;
    box-shadow:0 10px 40px rgba(0,0,0,.08);
    background:#fff;
  }
  .manga-img{display:block;width:100%;height:auto}
  .manga-bridge{
    text-align:center;
    margin:0 auto;
    max-width:680px;
    color:var(--gray);
    font-size:clamp(16px,1.4vw,16px);
    line-height:1.85;
  }
  .manga-bridge strong{color:var(--navy);font-weight:800}
  @media (max-width:768px){
    .manga-frame{max-width:100%;border-radius:16px}
  }

/* ============================
   SCROLL REVEAL — minimal (Stripe/Linear/Vercel流)
   ============================
   方針：
   - 要素単位のフェードはしない（テキスト・カード・ラベルは静的表示）
   - 主要な「視覚的に重い」セクション単位のみ、控えめに出現
   - 動きは 1 種類だけ：8px ↑ + opacity、500ms、ease-out
*/
.reveal{
  opacity: 0;
  transform: translateY(8px);
  transition: opacity .5s ease-out, transform .5s ease-out;
  will-change: opacity, transform;
}
.reveal.is-in{
  opacity: 1;
  transform: none;
}

/* ── HERO 入場アニメ（ページロード時に順番に登場）── */
@keyframes hero-rise{
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: none; }
}
.hero .h1-sub,
.hero h1 .accent,
.hero-logo-img,
.hero-brand-line,
.hero-catch,
.hero-sub,
.hero-actions,
.hero-demo-link{
  opacity: 0;
  animation: hero-rise .8s cubic-bezier(.22,1,.36,1) forwards;
}
.hero .h1-sub{ animation-delay: .15s; }
.hero h1 .accent{ animation-delay: .30s; }
.hero-logo-img{ animation-delay: .30s; }
.hero-brand-line{ animation-delay: .40s; }
.hero-catch{ animation-delay: .45s; }
.hero-sub{ animation-delay: .55s; }
.hero-actions{ animation-delay: .80s; }
.hero-demo-link{ animation-delay: 1.0s; }

@media (prefers-reduced-motion: reduce) {
  .reveal{
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
  .hero .h1-sub,
.hero h1 .accent,
.hero-logo-img,
.hero-brand-line,
.hero-catch,
.hero-sub,
.hero-actions,
.hero-demo-link{
    opacity: 1 !important;
    animation: none !important;
  }
}

/* ============================
   PDF反映: HERO trial / trust strips
   ============================ */
.hero-trial-strip{
  list-style: none;
  padding: 0;
  margin: 14px 0 8px;
  display: flex;
  flex-wrap: wrap;
  gap: 4px 20px;
  font-size:clamp(12px,1.8vw,14px);
  color: var(--navy, #0d1f3c);
  font-weight: 700;
}
.hero-trial-strip li{
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: transparent;
  padding: 0;
  border-radius: 0;
  box-shadow: none;
}
.hero-trial-strip strong{ color: #0d8f4d; font-weight: 800; }

@media (max-width: 768px) {
  .hero-trial-strip{ font-size: 13px; gap: 6px 10px; }
  .hero-trial-strip li{ padding: 5px 10px; }
}

/* ============================
   PDF反映: FAQ footer mini text
   ============================ */
.faq-footer-text-wrap{ flex: 1; }
.faq-footer-mini{
  margin: 6px 0 0;
  font-size: clamp(11px,1.3vw,12.5px);
  color: #647084;
  font-weight: 600;
}
.industry-matrix-table tbody tr:nth-child(even) td:not(.col-industry){
  background: #fafbfd;
}
.kcp-cost-eyebrow{
  display: inline-block;
  font-size:clamp(13px,1.9vw,15px);
  font-weight: 800;
  color: #fff;
  background: #d97706;
  padding: 4px 12px;
  border-radius: 999px;
  letter-spacing: .08em;
  margin: 0 0 10px;
}
.kcp-cost-title{
  font-size: clamp(16px, 1.5vw, 19px);
  font-weight: 800;
  color: var(--navy, #0d1f3c);
  margin: 0 0 20px;
  line-height: 1.5;
}
.kcp-cost-title strong{ color: #d97706; font-weight: 900; }
.cf-step:not(:last-child)::after{content:"";position:absolute;right:-12px;top:50%;transform:translateY(-50%);border-left:9px solid #9ad9bf;border-top:6px solid transparent;border-bottom:6px solid transparent;z-index:2}

/* ───────────────────────────────────────────
   主要ブロックの幅を基準（COMPARISON .inner 内容幅）に統一（2026-06-10）
   HOW・BEFORE/AFTER の .inner は左右パディング(≈38px)＋max-width で内容が
   狭く(821px)なっていたため、COMPARISON と同じ container 幅・パディング0に揃える
   ─────────────────────────────────────────── */
.kintone-callout{max-width:none}
@media(min-width:769px){
  .b3-section .inner,
.ba-section .inner{padding-left:0 !important;padding-right:0 !important}
}
/* 見出しデザイン統一（2026-06-10）：kintoneコールアウト見出しをCOMPARISON型（縦積み左寄せ）に */
.kintone-callout-head{display:block;text-align:left;grid-template-columns:none}
.kintone-callout-head .lead{margin-bottom:0}
/* KPIバーのラベル（長い正式名称）を小さく */
.kpi-bar-label{font-size:12px}
/* ROI実証ブロック：外枠は#f5f7fa・全幅、内側roi-chartは白（kcp-cost系のeyebrow/titleは流用） */
.roi-bars-wrap{background:#f5f7fa;border:1px solid var(--border);border-radius:16px;padding:26px 28px;max-width:none;margin-top:40px}
.roi-bars-head{flex-direction:row;align-items:center;flex-wrap:wrap;text-align:left;gap:14px;margin-bottom:20px}
.roi-bars-head .kcp-cost-eyebrow,
.roi-bars-head .kcp-cost-title{margin-bottom:0}
/* 実証データ(ROI)のeyebrowだけ濃紺に（コスト試算のオレンジpillとは別色） */
.roi-bars-head .kcp-cost-eyebrow{background:#0d1039}
/* BEFORE/AFTER の本文（AFTER側メイン）を大きめに */
.ba-cell-main{font-size:19px;font-weight:800}
/* BEFORE/AFTER テーブル内の強調（emで黄色アンダーライン） */
.ba-section em{font-style:normal;font-weight:800;background:linear-gradient(transparent 56%, #ffe44d 56%);padding:0 2px}

/* ───────────────────────────────────────────
   現場でできること 仮ビジュアル（2026-06-08新設）
   ※ .ff-mock 内の SVG は仮モック。実スクリーンショットが用意でき次第
     <img class="ff-shot" src="img/field_*.png"> に差し替え可能な構造
   ─────────────────────────────────────────── */
.ff-block{margin-top:clamp(40px,5vw,64px)}
.ff-block-title{font-size:clamp(17px,2.2vw,21px);font-weight:800;color:var(--navy);text-align:center;margin:0 0 8px}
.ff-block-lead{text-align:center;color:var(--gray);font-size:clamp(12px,1.8vw,14px);line-height:1.7;margin:0 auto 28px;max-width:700px}
.ff-grid{display:flex;flex-wrap:wrap;gap:18px;justify-content:center}
.ff-card{flex:1 1 240px;max-width:300px;background:#fff;border:1.5px solid var(--border);border-radius:18px;padding:22px 18px;box-shadow:var(--shadow-card);text-align:center}
.ff-mock{display:flex;justify-content:center;margin-bottom:14px}
.ff-mock svg{width:118px;height:auto;display:block}
.ff-mock .ff-shot{width:118px;height:auto;border-radius:14px;display:none}
.ff-card h4{font-size:clamp(13px,1.9vw,15px);font-weight:800;color:var(--navy);margin:0 0 8px;line-height:1.5}
.ff-card p{font-size:13px;color:var(--gray);line-height:1.7;margin:8px 0 0}
@media(max-width:760px){.ff-card{flex:1 1 100%;max-width:360px}}

/* ===== WHY LITONE リニューアル（2026-06-12）===== */
/* 強み3カード（番号＋画像） */
.strength-grid-cards .strength-item{border:1px solid #e4eaf0;border-top:1px solid #e4eaf0;text-align:left;padding:18px 18px;display:flex;flex-direction:column;min-width:0}
.strength-grid-cards .strength-body{word-break:normal;overflow-wrap:anywhere}
.strength-head{display:flex;align-items:center;gap:10px;margin-bottom:12px}
.strength-no{flex:none;width:30px;height:30px;border-radius:50%;background:#1a8b4e;color:#fff;font-weight:800;font-size:clamp(14px,2.0vw,16px);display:flex;align-items:center;justify-content:center}
.strength-name{margin:0;font-size:clamp(15px,2.1vw,17px);font-weight:800;color:var(--navy);line-height:1.3}
.strength-img-wrap{margin:0 0 14px}
.strength-img-wrap img{width:100%;aspect-ratio:295/172;object-fit:contain;background:#fff;display:block;border-radius:10px}

/* 補足：現場機能5カード（アイコン＋実画像） */
.ff-grid-5{gap:14px}
.ff-grid-5 .ff-card{flex:1 1 175px;max-width:205px;padding:16px 14px}
.ff-card-head{display:flex;align-items:center;justify-content:center;gap:7px;margin-bottom:12px}
.ff-ico{color:#1a8b4e;display:inline-flex;flex:none}
.ff-ico svg{width:24px;height:24px;display:block}
.ff-card-head h4{font-size:clamp(12px,1.8vw,14px);font-weight:800;color:var(--navy);margin:0;line-height:1.3}
.ff-shot-wrap{margin:0 0 10px}
.ff-shot-wrap img{width:100%;height:auto;display:block;border-radius:12px}
@media(max-width:760px){.ff-grid-5{display:grid;grid-template-columns:1fr 1fr;gap:14px}.ff-grid-5 .ff-card{flex:none;max-width:none}}

/* はじめ方もかんたん！ */
.start-block{background:#fffdf3;border:1px solid #f3e6bf;border-radius:18px;padding:28px 26px;margin-top:8px;text-align:center}
.start-title{font-size:clamp(18px,2.2vw,22px);font-weight:800;color:var(--navy);margin:0 0 22px}
.start-flow{display:flex;align-items:stretch;justify-content:center;gap:12px;flex-wrap:wrap}
.start-step{flex:1 1 200px;max-width:250px;background:#fff;border:1px solid #ede3c8;border-radius:14px;padding:14px 14px}
.start-step-head{display:flex;align-items:center;justify-content:center;gap:8px;font-size:clamp(12px,1.8vw,14px);font-weight:800;color:var(--navy);margin-bottom:10px;line-height:1.4}
.start-no{flex:none;width:24px;height:24px;border-radius:50%;background:#ffb300;color:#fff;font-weight:800;font-size:13px;display:flex;align-items:center;justify-content:center}
.start-img-wrap{margin:0 0 8px}
/* 2026-09-04：新素材は3枚とも縦横比が違う（2.96 / 2.52 / 1.40）ため、
   height:auto だと画像の高さが74/87/157pxとバラつき、下のテキスト位置がずれる。
   強みカードと同じく共通の枠に収めて揃える（object-fit:contain で切らない）。 */
.start-img-wrap img{
  width:100%;aspect-ratio:295/172;height:auto;
  object-fit:contain;background:#fff;
  display:block;border-radius:8px
}
.start-step p{font-size:12.5px;color:var(--gray);line-height:1.6;margin:0}
.start-arrow{align-self:center;color:#ffb300;font-size:22px;font-weight:800;flex:none}
.start-checks{display:flex;flex-wrap:wrap;justify-content:center;gap:10px 22px;margin:22px 0 0;padding:0;list-style:none}
.start-checks li{font-size:13.5px;font-weight:700;color:var(--navy)}
.start-checks li::before{content:"✓ ";color:#1a8b4e;font-weight:900}
@media(max-width:760px){.start-arrow{transform:rotate(90deg)}.start-step{flex:1 1 100%;max-width:320px}}

/* ===== HOW：アフターサービス全体フロー（7ステップ色分け・2026-06-12）===== */
.aflow{list-style:none;display:flex;flex-wrap:nowrap;gap:12px;justify-content:center;padding:4px 0 12px;margin:0 20px 14px;overflow-x:visible}
@media(max-width:760px){.aflow{flex-wrap:wrap}}
@media(max-width:760px){
  .cf-step:not(:last-child)::after{right:auto;left:50%;top:auto;bottom:-13px;transform:translateX(-50%);border-left:7px solid transparent;border-right:7px solid transparent;border-top:9px solid #9ad9bf;border-bottom:none}
}

/* ===== ヘッダー料金リンク：モバイル調整（2026-07-30・ファイル末尾でカスケード優先）===== */
@media(max-width:600px){
  /* CTA非表示時は1行レイアウトに戻し、ロゴ左・料金右で常時アクセス可能に */
  .header-inner{flex-direction:row;align-items:center;justify-content:space-between;height:auto;padding:10px 0;gap:12px}
  .header-right{gap:0}
  .header-price-link{padding:7px 14px}
  /* FVクイックリンク：モバイルも横並び2カラム */
  .hero-quick-links{flex-wrap:nowrap;justify-content:space-between;gap:10px}
  .hero-price-link{font-size:13.5px}
  .hero-demo-link{margin-right:0;font-size:13.5px}
}
/* 極小幅（〜360px）のみ折り返しを許可（320px端末のはみ出し防止） */
@media(max-width:360px){
  .hero-quick-links{flex-wrap:wrap}
  .logo-img{height:26px}
  .logo-tagline span{font-size:9.5px}
}

/* ============================
   FV高さフィット（2026-08-21）
   目次アンカー3本目までを1画面に収める。画面高さに応じて余白を段階圧縮
   ============================ */
@media (min-width:601px) and (max-height:940px){
  .hero-fullbg-inner{padding-top:16px;padding-bottom:24px}
  .hero-logo-img{margin:16px auto 14px}
  .hero-actions{margin-top:24px}
}
@media (min-width:601px) and (max-height:820px){
  .hero-logo-img{width:clamp(270px,36vw,400px);margin:12px auto 10px}
  .hero-catch{margin:2px 0 12px}
  .hero-sub{line-height:1.85;margin-bottom:12px}
  .hero-actions{margin-top:16px;margin-bottom:12px}
  .hero-trial-strip{margin:10px 0 6px}
  .hero-toc{gap:6px}
  .hero-toc-link{padding:8px 14px}
}
@media (min-width:601px) and (max-height:740px){
  .hero-fullbg-inner{padding-top:8px;padding-bottom:16px}
  .hero-logo-img{width:clamp(250px,32vw,360px);margin:8px auto 8px}
  .hero-sub{line-height:1.75;margin-bottom:10px}
  .hero-actions{margin-top:12px;margin-bottom:10px}
  .btn-primary{padding:14px 4%}
  .btn-consult{padding:12px 22px}
  .hero-toc-link{padding:7px 13px;font-size:13.5px}
}
/* ============================
   FV目次・ヘッダー：モバイル調整（2026-08-21）
   目次リンクを1行化しメインビジュアルの上へ。上部余白の圧縮
   ============================ */
@media(max-width:600px){
  /* ヘッダー：タグラインの中途折り返しを防止（高さ圧縮）。
     nowrapで料金ボタンに食い込まないよう、ロゴ・タグラインを縮小 */
  .logo-tagline span{white-space:nowrap;font-size:10.5px}
  .logo-img{height:30px}
  .logo-tagline{padding-left:8px}
  .logo{gap:8px}
  /* FV上部の余白を圧縮（旧40px） */
  .hero-fullbg-inner{padding-top:16px}
  /* 目次：リード句を隠して1行に収める */
  .hero-toc-link .toc-lead{display:none}
  /* 増田さん案コピー：スマホは1行20字が入る級数に */
  .hero-catch{font-size:clamp(15px,4.3vw,16.5px)}
  .hero-toc-link{white-space:nowrap;font-size:13.5px;padding:10px 12px}
  /* 表示順（2026-08-24改訂）：コピー → 写真＋UI → 目次 → CTA → トライアル表記。
     写真とUIを1画面目に入れるため、目次より上に配置 */
  .hero-content{display:flex;flex-direction:column}
  .hero-eyebrow{order:0}
  .hero h1{order:1}
  .hero-brand-line{order:2}
  .fv-photo-wrap{order:3}
  /* 画像を先頭に置くぶん、ロゴ・写真・UIを圧縮してキャッチまで1画面に収める */
  .hero-logo-img{width:clamp(240px,62vw,300px);margin:6px auto 4px}
  .hero-brand-line{font-size:12px;margin:2px 0 4px}
  .hero-catch{order:4;margin:6px 0 10px}
  .hero-sub{order:5;line-height:1.85;margin-bottom:10px}
  .hero-toc{order:6;margin-top:10px}
  .hero-actions{order:7}
  .hero-trial-strip{order:8}
}
/* 極小幅（〜360px）：ヘッダーの料金ボタンへの食い込み防止（上のnowrap指定より後置きで優先） */
@media(max-width:360px){
  .logo-img{height:24px}
  .logo{gap:6px}
  .logo-tagline{padding-left:6px}
  .logo-tagline span{font-size:9px}
}

/* ============================
   FVスマホUI（2026-08-24）
   報告書入力画面のモックアップをFVに配置
   PC＝人物写真と文章の境界／スマホ＝写真右下にチラ見せ
   ============================ */
.hero-content{position:relative}
/* PC（〜1429px）：ビューポート左端基準で写真左下（生け垣・通路上）に退避。
   テキスト右側に余白がない幅では人物の顔・テキストと干渉しないため */
.fv-phone-img{
  position:absolute;
  top:auto;
  bottom:24px;
  left:calc(28px - 50vw);
  transform:none;
  width:clamp(150px,12vw,200px);
  height:auto;
  z-index:3;
  filter:drop-shadow(0 20px 36px rgba(10,22,40,.35));
}
/* PC（1200px〜）：テキスト列に食い込ませて一体化。
   ロゴ・キャッチを縮小し、eyebrow以下のテキストに右パディングを取って
   UIをその右側（コンテンツ右端）に重ねる */
@media (min-width:1200px){
  /* ===== 2026-09-11：FVを「左＝コピー／右＝スマホUI」の2カラムグリッドに =====
     旧：モックを position:absolute で浮かせ、コピー側に padding-right で逃げを作り、
         帯とカードを手計算の margin-top（110px等）で押し下げていた。
         押し下げ量がモックの寸法と画面の高さの両方に依存し、
         実測で画面高700〜820pxのとき帯が26px重なった。
     新：グリッドで列を分ける。行の高さは中身から自動で決まるので重なりが起きない。
         逃げの padding-right と押し下げの margin-top はすべて不要になった。 */
  .hero-content{
    display:grid;
    /* 右列は170px枠。モック実体は220pxで、右へ50pxはみ出させる（margin-right:-50px）。
       左列は 534 − 170 − 14 ＝ 350px。説明文の1行に必要な339pxを満たす。 */
    grid-template-columns:minmax(0,1fr) 170px;
    column-gap:14px;
    align-items:start;
    /* spacer は要素を置かない空の行。モックのほうが左列より背が高いぶんを、
       ここ（唯一の 1fr）に吸わせる。こうしないと余りが見出し〜CTAの各行に
       均等配分されて、コピーが間延びする。
       帯とカードはモックの下の行なので、全幅で置いても重ならない。 */
    grid-template-areas:
      "eyebrow eyebrow"
      "logo    logo"
      "brand   brand"
      "catch   phone"
      "sub     phone"
      "actions phone"
      "spacer  phone"
      "strip   strip"
      "toc     toc";
    grid-template-rows:
      min-content min-content min-content
      min-content min-content min-content
      1fr
      min-content min-content;
    text-align:left;
  }
  .hero-eyebrow   {grid-area:eyebrow}
  .hero h1        {grid-area:logo}
  .hero-brand-line{grid-area:brand}
  .hero-catch     {grid-area:catch}
  .hero-sub       {grid-area:sub}
  .fv-photo-wrap  {grid-area:phone}
  .hero-actions   {grid-area:actions}
  .hero-trial-strip{grid-area:strip}
  .hero-toc       {grid-area:toc}

  /* モックは通常フローに戻す（絶対配置をやめる）。
     右へ50pxはみ出すが、1200pxでもインナーの右外に66pxの余白があるため
     横スクロールにはならない。 */
  .fv-photo-wrap{position:relative}
  .fv-phone-img{
    position:static;
    width:220px;height:auto;max-width:none;
    margin:0 -50px 0 0;
    filter:drop-shadow(0 10px 22px rgba(10,22,40,.20));
  }

  /* アイブロウ・ロゴ・by行 は全幅で中央寄せ。コピー以下は左揃え（ご指示） */
  .hero-eyebrow{display:block;text-align:center}
  .hero h1,
  .hero-brand-line{text-align:center}
  .hero-logo-img{width:min(100%,420px);margin:14px auto 10px}

  /* 逃げ（padding-right）はグリッド化で不要になったので全廃 */
  .hero-catch,
  .hero-sub,
  .hero-trial-strip,
  .hero-actions{padding-right:0}

  /* 見出し20px・説明文15pxは固定値。1200px以上はテキスト列が534px固定
     （インナーが1068pxで頭打ち）なので、vw連動だと幅が変わらないのに字だけ縮む。 */
  .hero-catch{margin-top:50px;font-size:20px;line-height:1.6;letter-spacing:0}
  .hero-catch .catch-strong{font-size:1.25em}
  .hero-sub{font-size:15px}
  /* 白い下地の左パディング4.2pxを外して、見出しと文字の開始位置を揃える */
  .hero-sub .hero-sub-hl{padding-left:0}
  .hero-brand-line .nb{white-space:nowrap}

  /* CTAは縦2段・ボタン幅300px（ご指示） */
  .hero-actions{
    flex-direction:column;
    align-items:flex-start;
    gap:10px;
    margin-top:22px;
  }
  .hero-actions > a{width:min(100%,300px)}

  .hero-trial-strip{justify-content:flex-start}
  .hero-toc.toc-cards{margin-left:0;margin-right:auto;margin-top:34px}
}
/* 食い込みレイアウト時の低解像度対策（サブコピーが5行になるぶんを圧縮して1画面に収める） */
@media (min-width:1200px) and (max-height:820px){
  .hero-fullbg-inner{padding-top:10px}
  .hero-logo-img{margin:8px auto 6px}
  .hero-brand-line{font-size:13px;margin:4px 0 8px}
  .hero-catch{margin:2px 0 10px}
  .hero-sub{font-size:15px;line-height:1.8;margin-bottom:10px}
  .hero-actions{margin-top:10px;margin-bottom:10px}
  .hero-trial-strip{margin:8px 0 4px}
  .hero-toc{gap:5px}
  .hero-toc-link{padding:7px 13px}
}
@media (min-width:1200px) and (max-height:740px){
  .hero-fullbg-inner{padding-top:6px;padding-bottom:14px}
  .hero-sub{margin-bottom:8px}
  .hero-actions{margin-top:8px;margin-bottom:8px}
  .hero-trial-strip{margin:6px 0 2px}
  .hero-toc-link{padding:6px 12px}
}
@media (max-width:600px){
  .fv-photo-wrap{position:relative;margin:4px 0 30px}
  .fv-photo-wrap .hero-mobile-photo{max-height:190px;object-fit:cover;object-position:0 20%}
  .fv-phone-img{
    position:absolute;top:22px;bottom:auto;left:auto;right:10px;
    transform:none;width:128px;
    filter:drop-shadow(0 6px 12px rgba(10,22,40,.2));
  }
}

/* ============================
   お悩み共感TIPS（2026-08-24 増田さん案③）
   KPIバー直後・#before直前。現状の手間→こうしたい の対比で自分ごと化
   ============================ */
.tips-section{
  padding:clamp(48px,6vw,72px) 0;
  /* 2026-09-03：薄緑グラデ → 白。吹き出し側に青のグラデを入れたため、
     背景も色を持つと色味が3系統になって煩雑だった */
  background:#fff;
  border-top:1px solid var(--border);
  border-bottom:1px solid var(--border);
}
.tips-section .lead{margin-bottom:36px}
.tips-bubbles{display:flex;gap:18px;justify-content:center;align-items:stretch;flex-wrap:wrap}
.tip-bubble{
  position:relative;flex:1 1 260px;max-width:340px;
  /* 薄い青→白の下方向グラデ（2026-09-03）。62%で白に到達させ、
     下端は白なので ::after の尻尾（#fff）と自然に繋がる */
  background:linear-gradient(180deg,#eaf2fb 0%,#fff 62%);
  border:3px solid #d5d5d5;border-radius:16px;
  padding:22px 20px 18px;
  box-shadow:0 6px 22px rgba(20,30,60,.07);
  display:flex;flex-direction:column;
}
.tip-bubble::after{
  content:"";position:absolute;left:50%;bottom:-12px;
  width:18px;height:18px;background:#fff;
  border-right:3px solid #d5d5d5;border-bottom:3px solid #d5d5d5;
  transform:translateX(-50%) rotate(45deg);
}
/* 現状の動作（痛みの描写）＝主役 */
.tip-now{
  font-weight:800;color:var(--navy,#0a1628);
  font-size:clamp(14.5px,1.7vw,16.5px);line-height:1.75;
  margin:0 0 14px;text-align:left;
}
.tip-now .arw{display:inline-block;color:var(--orange,#ff7f3f);font-weight:900;margin:0 .15em}
/* PCは「→」の後ろを2行目に送る（現状→結果の対比を明確に） */
@media (min-width:601px){
  .tip-now .now-b{display:block}
}
/* 願望（増田さん原案の文言）＝従 */
.tip-want{
  display:flex;align-items:flex-start;gap:8px;
  margin:0;padding-top:12px;border-top:1px dashed #dbe3ea;
  font-size:clamp(12.5px,1.4vw,13.5px);font-weight:700;
  color:#0d8f4d;line-height:1.6;text-align:left;
}
.tip-want svg{width:15px;height:15px;flex-shrink:0;margin-top:3px}
/* 結び */
.tips-answer{
  display:flex;align-items:center;justify-content:center;gap:12px;
  max-width:760px;margin:38px auto 0;
  /* 2026-09-03：カード（白背景＋影＋角丸）をやめて直置きに。
     セクション背景が白になり、白いカードを重ねる意味がなくなったため */
  background:none;border-radius:0;padding:4px 0 0;
  box-shadow:none;
  font-family:"LINESeedJPStd","LINE Seed JP","Noto Sans JP",sans-serif;
  font-size:clamp(15px,2vw,21px);font-weight:900;color:var(--navy,#0a1628);
  text-align:center;line-height:1.5;
}
.tips-answer .ans-strong{color:var(--green,#00a86b)}
.tips-answer svg{color:var(--green,#00a86b);flex-shrink:0}
@media (max-width:600px){
  .tips-bubbles{flex-direction:column;align-items:stretch;gap:18px}
  .tip-bubble{flex:0 0 auto;max-width:none;padding:16px 16px 14px}
  .tip-now{font-size:14.5px;margin-bottom:10px}
  .tip-want{padding-top:9px}
  /* 結び：スマホは矢印を上に置いて中央寄せの2行組にし、「その手 / 間、」のような不自然な折り返しを防ぐ */
  .tips-answer{flex-direction:column;padding:4px 0 0;gap:6px;font-size:16px}
  .tips-answer .ans-nowrap{white-space:nowrap}
}


/* ===== スマホの導入事例：要約カード＋タップで全文（2026-09-03） =====
   ティッカーは340px幅のカードが自動で横スクロールし続けるため、
   スマホでは縦に長いカードを読み切れなかった。スマホだけ
   「業種・ロゴ・成果数値」に絞った2列カードに組み替え、
   全文はタップでモーダル表示する。HTMLは共通のまま。 */
@media (max-width:600px){
  .ticker-outer{overflow:visible;padding:0 16px}
  .ticker-outer::before,.ticker-outer::after{display:none}
  .ticker-track{
    animation:none;
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:10px;
    width:auto;
  }
  /* 後半8枚はループ用の複製なので隠す */
  .ticker-track .case-card:nth-child(n+9){display:none}

  .ticker-track .case-card{
    width:auto;
    padding:14px 12px 12px;
    margin:0;
    cursor:pointer;
    min-height:0;
  }
  .ticker-track .case-card:hover{transform:none}
  /* 要約に不要な要素はスマホでは隠す（モーダルで見せる） */
  .ticker-track .case-card .case-photo,
  .ticker-track .case-card p,
  .ticker-track .case-card .case-tags{display:none}

  .ticker-track .case-card-with-photo{padding-top:14px}
  /* 業種バッジは必ず1行に収める。最長が「総合ビルメンテナンス・清掃」の
     13文字（全角）なので、9px×13=117px＋左右padding14px=131px。
     カードの内容幅143pxに収まる。折り返すと高さが揃わず読みにくいため nowrap。 */
  .ticker-track .case-card-with-photo .case-badge{
    position:static;top:auto;left:auto;
    display:inline-block;width:auto;max-width:100%;
    padding:4px 7px;border-radius:8px;
    font-size:9px;line-height:1.4;letter-spacing:-0.02em;
    white-space:nowrap;
    /* フォント読込前のフォールバック書体は幅が異なるため、
       その瞬間だけカード外へ溢れるのを防ぐ */
    overflow:hidden;text-overflow:ellipsis;
    margin:0 0 8px;
  }
  .ticker-track .case-card .case-logo-wrap{
    width:auto;margin:0 0 8px;padding:0;min-height:28px;
    display:flex;align-items:center
  }
  /* 1件（パソナライフケア）だけ img に style="max-height:36px" が
     直接書かれており、!important でないと上書きできない */
  .ticker-track .case-card .case-logo-wrap img{
    max-height:24px!important;width:auto!important;max-width:100%
  }
  .ticker-track .case-card .case-result{display:block;margin:0}
  .ticker-track .case-card .case-kpi{
    display:block;margin:0 0 4px!important;font-size:11.5px;line-height:1.45
  }
  .ticker-track .case-card .case-kpi:nth-of-type(n+2){display:none}
  .ticker-track .case-card .case-kpi em{font-size:14px}

  /* タップできることを示す */
  .ticker-track .case-card::after{
    content:"詳しく見る ＞";
    display:block;margin-top:8px;
    font-size:10.5px;font-weight:700;color:var(--green,#00a86b);
    letter-spacing:.02em
  }
}

/* ===== 事例モーダル（スマホのみ使用・2026-09-03） ===== */
.case-modal{
  position:fixed;inset:0;z-index:9999;display:none;
  align-items:flex-end;justify-content:center;
  background:rgba(10,20,35,.62);
  -webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);
}
.case-modal[open],.case-modal.is-open{display:flex}
.case-modal-panel{
  width:100%;max-height:88vh;overflow-y:auto;
  background:#fff;border-radius:20px 20px 0 0;
  padding:18px 18px 26px;
  box-shadow:0 -8px 40px rgba(0,0,0,.28);
  animation:case-modal-up .22s cubic-bezier(.22,.61,.36,1)
}
@keyframes case-modal-up{from{transform:translateY(24px);opacity:.6}to{transform:none;opacity:1}}
@media (prefers-reduced-motion:reduce){.case-modal-panel{animation:none}}
.case-modal-close{
  position:sticky;top:0;margin-left:auto;display:block;
  width:38px;height:38px;border:0;border-radius:50%;
  background:#eef2f7;color:#1c2733;font-size:20px;line-height:1;
  cursor:pointer
}
.case-modal-close:hover{background:#dfe6ef}
.case-modal-body .case-card{
  border:0!important;box-shadow:none!important;padding:0!important;
  margin:0!important;width:auto!important;transform:none!important
}
.case-modal-body .case-photo{display:block!important;margin-bottom:12px}
.case-modal-body .case-photo img{width:100%;height:auto;border-radius:12px;display:block}
.case-modal-body p{display:block!important;font-size:13.5px!important;line-height:1.85}
.case-modal-body .case-tags{display:flex!important;flex-wrap:wrap;gap:6px}
.case-modal-body .case-badge{
  position:static!important;top:auto!important;left:auto!important;
  display:inline-block!important;width:auto!important;
  padding:5px 11px!important;border-radius:9px!important;
  font-size:12px!important;margin:0 0 10px!important;white-space:normal!important
}
.case-modal-body .case-kpi{display:block!important;margin:0 0 6px!important}
.case-modal-body .case-kpi:nth-of-type(n+2){display:block!important}
.case-modal-body .case-logo-wrap{width:auto!important;margin:0 0 10px!important;padding:0!important}
.case-modal-body .case-logo-wrap img{max-height:38px;width:auto}
body.case-modal-lock{overflow:hidden}
/* モーダル表示中は下部固定CTAを隠す（重なって本文を覆うため） */
body.case-modal-lock .mobile-fixed-cta{display:none!important}

/* ===== スマホの比較表：1段小さくして列の切れを軽減（2026-09-03） =====
   375px幅では表が560pxあり、最重要のLITONE列が画面外に出ていた。
   文字と余白を詰め、min-width を下げて見える範囲を広げる。 */
@media (max-width:600px){
  .comp-table-wrap{margin-left:12px;margin-right:12px}
  .comp-table{font-size:12px;min-width:454px}
  .comp-table thead th{font-size:11.5px;padding:9px 7px}
  .comp-table tbody td{padding:9px 7px;font-size:12px}
  .comp-table tbody td:first-child{font-size:11.5px}
  .comp-table small{font-size:10.5px;line-height:1.5}
  .comp-table .comp-o,.comp-table .comp-x{font-size:15px}
}

/* 低解像度素材の表示上限は 2026-09-04 に撤去した。
   素材を高解像度のものに差し替え（start01〜03=580px幅／tuyomi1〜3=684px幅、
   いずれも最大表示幅の2.0倍）、引き伸ばしが解消したため。
   旧素材は img/old_lowres_20260904/ に退避してある。 */


/* ===== 課題 → 解決 の転換ブロック（2026-09-03） =====
   BEFORE（課題の羅列）と HOW IT WORKS（解決）の間に置く橋渡し。
   全幅の帯だとCTA帯（#ebaf30 が6箇所）と役割が混ざるため、
   ポップな吹き出しにして「ここで話が切り替わる」ことを示す。
   外側の上下余白は詰めてある（帯だった名残の余白を残さない）。 */
.pivot-band{
  position:relative;
  display:flex;justify-content:center;
  padding:0 clamp(16px,4vw,40px);
  /* 外側の余白は持たせない。前後のセクションのpaddingだけで間隔をとる。
     しっぽ（下に22px）は次セクションのpadding内へはみ出すので文字とは当たらない */
  margin:0 auto;
}
/* 吹き出しの背後に、上（課題）と下（解決）を分ける線を通す。
   .pivot-band の高さ＝吹き出しの高さなので、top:50% がちょうど中央になる。
   線は画面全幅、吹き出しはその上に乗せる（z-index）。 */
.pivot-band::before{
  content:"";position:absolute;z-index:0;
  top:50%;left:50%;transform:translateX(-50%);
  width:100vw;height:3px;
  /* LITONEブランドカラー。吹き出し(#ebaf30)と近い色なので、
     線と吹き出しがひと続きの要素として読める */
  background:var(--litone-orange,#f0b31c);
}
.pivot-bubble{position:relative;z-index:1}
.pivot-bubble{
  position:relative;
  background:#ebaf30;
  border:4px solid #fff;
  border-radius:999px;
  padding:clamp(16px,2vw,22px) clamp(30px,5vw,52px);
  max-width:660px;
  box-shadow:0 10px 30px rgba(190,130,10,.28);
  text-align:center;
}
.pivot-bubble::after{
  content:"";position:absolute;left:50%;bottom:-20px;
  width:0;height:0;transform:translateX(-50%);
  border-left:18px solid transparent;
  border-right:18px solid transparent;
  border-top:22px solid #ebaf30;
}
.pivot-lead{
  margin:0;
  font-family:"LINESeedJPStd","LINE Seed JP","Noto Sans JP",sans-serif;
  font-size:clamp(24px,4.2vw,42px);font-weight:800;
  color:var(--navy,#0a1628);letter-spacing:.01em;line-height:1.25;
}
/* 「なら！」はブランド名より一段小さく（LITONE を主役にする） */
.pivot-nara{font-size:.68em;letter-spacing:.02em}
.pivot-sub{
  margin:2px 0 0;font-size:clamp(12.5px,1.6vw,16px);font-weight:700;
  color:#3a2f10;line-height:1.6;
}
@media (max-width:600px){
  .pivot-band{
    padding:0 14px;
    margin:0 auto;
  }
  .pivot-bubble{
    border-radius:26px;          /* スマホは2行になるので丸すぎると間延びする */
    padding:14px 20px;
  }
  .pivot-bubble::after{
    bottom:-18px;
    border-left-width:15px;border-right-width:15px;border-top-width:19px;
  }
}

/* 転換ブロックの直後は上余白を詰める（2026-09-03）
   ※ .bf-section の下padding は index.html 内の<style>が後勝ちするため、
     そちら側で指定している */
.pivot-band + .hw-section{padding-top:clamp(14px,2vw,26px)}
/* スマホは吹き出しのしっぽ先端と「HOW IT WORKS」が2pxまで詰まるため、
   次セクション側で最小限の逃げを作る（吹き出し自体にmarginは持たせない） */
@media (max-width:600px){
  .pivot-band + .hw-section{padding-top:26px}
}

/* ===== オレンジ帯の上の「無料で試してみる」を白背景に（2026-09-04） =====
   .btn-consult は既定が background:transparent。白背景・薄緑背景の上では
   輪郭だけのゴーストボタンとして成立していたが、CTA帯を #ebaf30 にした結果
   オレンジに黒枠が浮いて見えるため、帯の上に限って白地にする。
   最終CTAセクションの .btn-ghost は元から background:#fff で、それに揃える形。
   2026-09-14：FV（写真の上）の同ボタンも白地にする（ご指示）。
   屋上写真に差し替えて背景が青空になり、透明のゴーストボタンだと
   輪郭だけが空に浮いて押せるものに見えづらかったため。
   .hero-actions はヒーロー内にしか無いので、これでFV限定になる。 */
#mid-cta-1 .btn-consult,
#mid-cta-2 .btn-consult,
#mid-cta-3 .btn-consult,
#mid-cta-4 .btn-consult,
.case-cta-band .btn-consult,
.hero-actions .btn-consult{
  background:#fff;
}


/* ===== ウェビナー誘導帯（2026-09-04） =====
   画面全幅のネイビー帯＋右に「毎月開催」の丸円。
   既存のCTA帯（#ebaf30 が6箇所）と役割が違うことが一目で分かるよう配色を変えている。
   帯は1行に詰めて細くし、円が上下にはみ出す形。 */
.wbn-band{
  display:block;text-decoration:none;color:inherit;
  /* 2026-09-05：帯だけ少し明るいネイビーにする。サイト共通の --navy(#0a1628) は
     見出し・罫線にも使っているため、ここでは直接指定して他へ波及させない。 */
  background:#0c264c;
  /* 2026-09-05：上下の余白を撤去。前後のセクションが自前で余白を持っているため
     帯側でも取ると間延びしていた。左右のパディングは狭い画面で文字が端に
     つかないよう残す（帯の高さには影響しない）。 */
  padding:0 clamp(16px,4vw,40px);
  margin:0;
}
.wbn-in{
  max-width:1068px;margin:0 auto;
  display:flex;align-items:center;gap:clamp(16px,3vw,34px)
}
.wbn-txt{flex:1 1 auto;min-width:0}
.wbn-head{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
/* 2026-09-05：「無料」を大きく見せるため2行の縦積みバッジにした。
   帯の高さは円（146px − マージン52px = 94px）が決めているので、
   タグを厚くしても帯は高くならない。 */
.wbn-tag{
  flex:none;background:#ebaf30;color:#0a1628;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  padding:8px 16px;border-radius:8px;line-height:1.15;letter-spacing:.02em;
  white-space:nowrap;
  box-shadow:0 3px 14px rgba(235,175,48,.35)
}
.wbn-tag-free{font-size:22px;font-weight:800}
.wbn-tag-sem{font-size:12px;font-weight:800;margin-top:2px}
/* 本文とサブ行をひとつの縦積みにして、サブ行の左端が本文1文字目（「サ」）に
   揃うようにする。タグと同じ階層に並べると、サブ行がタグの左端から始まってしまう。 */
.wbn-body{display:flex;flex-direction:column;min-width:0}
.wbn-main{
  margin:0;font-size:clamp(14.5px,1.85vw,15px);font-weight:800;color:#fff;line-height:1.5;
  /* 折り返しが2〜3行になる幅で、最終行に1〜2文字だけ残るのを防ぐ。
     非対応ブラウザでは通常の折り返しに戻るだけで、崩れはしない */
  text-wrap:balance
}
/* サブ行（2026-09-05 追加）。本文より一段落として、参加のハードルの低さだけ伝える */
.wbn-meta{
  display:block;margin:3px 0 0;
  font-size:clamp(11.5px,1.35vw,12.5px);font-weight:700;line-height:1.6;color:#ebaf30;
  text-wrap:balance
}
/* 丸円：帯の上下にはみ出させて視線を止める */
.wbn-circle{
  flex:none;width:146px;height:146px;margin:-26px 0;
  background:#fff;border-radius:50%;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;box-shadow:0 6px 22px rgba(10,22,40,.22)
}
.wbn-next{font-size:11px;font-weight:800;color:#5b6b7d;letter-spacing:.04em}
.wbn-day{font-size:20px;font-weight:800;color:#0a1628;line-height:1.15}
.wbn-time{font-size:11px;font-weight:700;color:#5b6b7d;margin-top:1px;font-variant-numeric:tabular-nums}
.wbn-btn{
  margin-top:6px;background:var(--green,#00a86b);color:#fff;font-weight:800;font-size:12px;
  padding:7px 15px;border-radius:999px;display:inline-flex;align-items:center;gap:4px;white-space:nowrap
}
.wbn-band:hover .wbn-btn{background:#00915c}
.wbn-band:focus-visible{outline:3px solid #ebaf30;outline-offset:-3px}

@media (max-width:700px){
  /* スマホは縦積みなので、上だけは余白がないとタグが帯の縁に貼りつく。
     下は円が34pxはみ出すぶんで足りるため0のまま。 */
  .wbn-band{padding:14px 16px 0;margin-top:0}
  .wbn-in{flex-direction:column;text-align:center;gap:8px}
  .wbn-head{justify-content:center}
  .wbn-main{font-size:15px}
  .wbn-meta{margin-top:5px}
  .wbn-circle{margin:2px auto -34px;width:146px;height:146px}
}


/* ===== 2026-09-08 FV微調整 ===== */
.hero-brand-line{font-size:10px}
.hero-catch{margin-top:20px}


/* ===== FV目次：横長pill → ボタン風カード（2026-09-11） =====
   旧：横長のpillを3本縦積み。実測 PC 147px ／ スマホ375px 141px。
       長い1行が3本並ぶため、FV全体の「渋滞」の一因になっていた。
   新：ウェビナーLP（litone-webapp-webinar）と同じ縦型カードを3枚横並び。
       実測 PC 112px ／ スマホ 95px。
   2段組にしたことで、旧リード文（「スマホで完結！」等）を小さい上段として残せている。
   ・.hero-toc を併記しているのは、スマホの表示順（order:6）と margin-top を活かすため。
     そのため、ここでは margin-left/right だけ指定して margin-top を上書きしない。
   ・.hero-toc.toc-cards（詳細度0,2,0）で、既存の .hero-toc の gap 指定より優先させる。
   ・旧 .hero-toc-link 系のCSSは残してある（この版で未使用だが、差し戻しの保険）。 */
.hero-toc.toc-cards{
  display:grid;grid-template-columns:repeat(3,1fr);
  gap:10px;align-items:stretch;
  max-width:520px;margin-left:auto;margin-right:auto;
}
.toc-card{
  display:flex;flex-direction:column;align-items:center;justify-content:flex-start;
  gap:8px;padding:14px 8px 13px;
  background:#fff;border:1px solid var(--border,#d6e8df);border-radius:12px;
  text-decoration:none;color:var(--navy,#0a1628);text-align:center;
  box-shadow:0 2px 10px rgba(10,22,40,.05);
  transition:border-color .2s,box-shadow .2s,transform .2s;
}
.toc-card:hover{
  border-color:var(--green,#00a86b);
  box-shadow:0 6px 18px rgba(10,22,40,.10);
  transform:translateY(-1px);
}
.toc-card:focus-visible{outline:3px solid var(--green,#00a86b);outline-offset:2px}
.tc-ico{
  flex:none;width:42px;height:42px;border-radius:50%;
  background:var(--green,#00a86b);color:#fff;
  display:flex;align-items:center;justify-content:center;
}
.tc-t{font-size:12px;font-weight:800;line-height:1.45}
/* 上段＝旧リード文。本文より一段落として、行き先の名前を主役にする */
.tc-t em{display:block;font-style:normal;font-size:11px;font-weight:700;color:#5b6b7d}

@media (max-width:600px){
  .hero-toc.toc-cards{gap:7px}
  .toc-card{padding:11px 5px 10px;gap:6px;border-radius:10px}
  .tc-ico{width:36px;height:36px}
  .tc-t{font-size:11px}
  .tc-t em{font-size:10px}
}


/* ===== 2026-09-11：1200px以上のFV 最終上書き =====
   .hero-catch の margin-top は、上（3870行付近・2026-09-08のFV微調整）で
   メディアクエリ外から 20px が指定されている。メディアクエリ内でも詳細度は同じなので、
   後ろに書かないと勝てない。ファイル末尾に置くのはそのため。
   ロゴの左右 auto（中央寄せ）も、高さ別ブロックの margin ショートハンドに
   負けないようここで最終指定する。
   ※帯の押し下げ（margin-top）はグリッド化で不要になったため削除した。 */
@media (min-width:1200px){
  .hero-catch{margin-top:50px}
  .hero-logo-img{margin-left:auto;margin-right:auto}
}


/* ===== 2026-09-14：スマホのFVにアンカーリンク（カード3枚）を収める =====
   背景：広告クリックの77%がモバイル。スマホの並び順は
     写真 → 見出し → 説明文 → カード3枚 → CTA → トライアル帯
   なのでカードがCTAより先に来るが、実測でカード下端が709pxあり、
   実質の可視下端（画面高 − 下部固定バー68px）を超えて切れていた。
     iPhone 13/14（715px可視）→ 64px不足
     Android 360×800（690px可視）→ 87px不足
   もっとも容量を食っていたのが写真ブロック（写真190px＋モックのはみ出しで計250px）。
   ここを削り、上余白と字間も詰めて、カード下端を709→611pxまで繰り上げる。
   ※ファイル末尾に置いているのは、上の @media(max-width:600px) 群より後に
     書かないと margin ショートハンド等に負けるため。 */
@media (max-width:600px){
  /* FV上部の余白（旧16px） */
  .hero-fullbg-inner{padding-top:10px}
  /* アイブロウを1行に収める（2026-09-14 ご指示）＋中央寄せ。
     「アフターサービス・保守点検業向け ｜ LINE WORKS × kintone」は
     10pxのとき1行に309px必要。使える幅は「画面幅−32px」なので、
     1行に収まる上限は画面幅で変わる：
       320px→9.32px ／ 360px→10.62px ／ 375px→11.10px
       390px→11.59px ／ 412px→12.30px
     固定値にすると広い端末で小さすぎるため、幅に連動させる。
     割る数32.5は 30.9（＝309/10）に約5%の安全マージンを乗せた値。
     フォントがフォールバックして字幅が変わっても折り返さないようにするため。
     ※ white-space:nowrap は付けない。計算が外れたとき画面外へはみ出すより、
       折り返してくれたほうが事故が小さいため。 */
  .hero-eyebrow{
    font-size:clamp(8.8px, calc((100vw - 32px) / 32.5), 12px);
    letter-spacing:0;
    text-align:center;
  }
  /* 写真ブロック：写真190→140px、モック128→79px。
     ポイントは「モックの高さを写真に合わせる」こと。
     旧：写真110px・モック164pxで、モックが写真より54px背が高く下へはみ出していた。
         はみ出しを逃がすために枠の下余白を30px確保する必要があり、
         ブロック全体で172px使いながら写真は110pxしか映っていなかった（62pxが空白）。
     新：写真140px・モック140px（幅79px）でぴったり揃える。はみ出しが消えるので
         枠の下余白は8pxで足りる。ブロックは150pxに縮み、写真は逆に30px大きくなる。
     実測（375×690）：カード下端 611→605px、可視下端までの余裕 11→17px。
     ※ margin はショートハンドで書かないこと。写真は margin-left:50% ＋
       transform:translateX(-50%) で全幅出ししているため、左マージンを消すと横にずれる。 */
  .fv-photo-wrap{margin-top:2px;margin-bottom:8px}
  .fv-photo-wrap .hero-mobile-photo{max-height:140px;margin-bottom:0}
  .fv-phone-img{width:79px;top:0}
}