/*!
 * Sechstant TOP renewal (2026-09)
 *
 * 目次
 *   1.  Tokens          :root のカラー / 角丸 / 影 / イージング
 *   2.  Reset / Base    全体リセットと素の要素のスタイル
 *   3.  Utilities       .wrap / .sr-only / .btn / .ico / .rv 系 / 見出し / グリッド / 背景バンド
 *   4.  Layout          ヘッダー・ドロワー・フッター
 *   5.  Sections        ページ順のセクション別スタイル
 *       5.1  hero (#top)            スライド / 対話デモカード / KPI バー
 *       5.2  clients (#clients)     ロゴマーキー
 *       5.3  issue (#issue)         課題カード
 *       5.4  about (#about)         生態系ダイアグラム (eco)
 *       5.5  aifeat (#aifeat)       紙芝居デモ (story) / チャット / コントロールバー
 *       5.6  datahub (#datahub)     story の製品別アクセントとライトテーマ
 *       5.7  cdp (#cdp)             ダッシュボードスライダー
 *       5.8  crm (#crm)             ※ 5.6 の .acc-teal を流用するため専用ルールなし
 *       5.9  usecase (#usecase)     BtoC / BtoB タブ
 *       5.10 function (#function)   機能一覧タブ
 *       5.11 case (#case)           活用事例 / KPI / 導入実績
 *       5.12 security (#security)
 *       5.13 feature (#feature)     製品別 5つの特徴
 *       5.14 plan (#plan)           料金プラン
 *       5.15 faq (#faq)
 *       5.16 cta (#contact)
 *   6.  Animations      @keyframes
 *   7.  Responsive      max-width:1200px → 1000px → 560px
 *   8.  Motion pref.    prefers-reduced-motion
 */

/* ===== 1. Tokens ===== */
:root{
  /* ブランドの紺。数字が大きいほど濃い */
  --navy-900:#081120;
  --navy-800:#0b1b33;
  --navy-700:#10263f;
  --navy-600:#16324f;

  /* ブランドの金 */
  --gold:#dbae58;
  --gold-light:#e8c987;
  --gold-dark:#b8903f;

  /* 製品別アクセント (CDP=gold / CDP+AI=purple / CRM=teal / DataHub=slate) */
  --teal:#2FB7A6;
  --teal-light:#8fe6da;
  --slate:#5B7FA6;
  --purple:#7B6CF6;

  /* 明るい面のテキストと罫線 */
  --white:#fff;
  --off-white:#f6f8fb;
  --text-dark:#1a2635;
  --text-mid:#4a5a6e;
  --line:#dde4ec;

  /* 濃い面 (navy / slate バンド) に載せるテキスト。dim ほど弱い */
  --on-dark:#c9d6e6;
  --on-dark-mid:#b9c8da;
  --on-dark-dim:#9fb2c8;

  --radius:14px;
  --shadow:0 10px 34px rgba(8,17,32,.10);
  --shadow-hi:0 18px 48px rgba(8,17,32,.18);
  --ease:cubic-bezier(.22,.68,0,1);
}

/* ===== 2. Reset / Base ===== */
*{
  margin:0;
  padding:0;
  box-sizing:border-box;
}

/* scroll-padding-top は固定ヘッダー(76px)に少し余裕を足した値。
   scroll-behavior は html 全体には付けない(読み込み時の #contact 復帰や確認画面のリロードまで滑らかになるため)。
   ページ内リンクのクリック時だけ JS (initAnchorScroll) で smooth にする */
html{
  scroll-padding-top:80px;
}

body{
  font-family:"Zen Kaku Gothic New","Hiragino Kaku Gothic ProN","Hiragino Sans","Yu Gothic Medium","Yu Gothic",Meiryo,sans-serif;
  color:var(--text-dark);
  background:var(--white);
  line-height:1.8;
  font-size:16px;
}

/* 横はみ出し対策。.rv-l / .rv-r は表示前に 40px 横へずれているため、clip で横スクロール幅に含めない。
   iOS Safari は body の overflow-x:hidden だけでは横パンを止められないので html / main にも付ける */
html,body,main{
  overflow-x:hidden;
  overflow-x:clip;
}

img{
  max-width:100%;
  display:block;
  height:auto;
}

a{
  color:inherit;
  text-decoration:none;
}

/* 日本語の折り返しを文節単位にして、不自然な改行を減らす */
h1,h2,h3,p,li,summary,.bub,.callout,.hd-title,.hero-sub,.sec-lead,.eco-pill,.ai-item span,.case-co span,figcaption{
  word-break:auto-phrase;
}

p,.sec-lead,.hero-sub,.callout,.bub{
  text-wrap:pretty;
}

section{
  padding:104px 0;
  position:relative;
}

/* ===== 3. Utilities ===== */

/* --- コンテンツ幅 --- */
.wrap{
  max-width:1120px;
  margin:0 auto;
  padding:0 24px;
}

/* --- スクリーンリーダー専用テキスト --- */
/* 語句の途中で折り返したくない短いフレーズ用 */
.nowrap{white-space:nowrap}

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

/* --- ボタン --- */
.btn{
  display:inline-block;
  padding:11px 26px;
  border-radius:999px;
  font-weight:700;
  font-size:14px;
  text-align:center;
  transition:transform .3s var(--ease),box-shadow .3s var(--ease),background .3s,color .3s;
  cursor:pointer;
  border:none;
  position:relative;
  overflow:hidden;
}

.btn-gold{
  background:linear-gradient(135deg,var(--gold-light),var(--gold-dark));
  color:var(--navy-900);
  box-shadow:0 4px 16px rgba(219,174,88,.28);
}

.btn-gold:hover{
  transform:translateY(-3px);
  box-shadow:0 10px 26px rgba(219,174,88,.45);
}

.btn-line{
  border:1.5px solid var(--gold);
  color:var(--gold);
  background:transparent;
}

.btn-line:hover{
  background:rgba(219,174,88,.14);
  transform:translateY(-3px);
}

.btn-lg{
  padding:16px 42px;
  font-size:16px;
}

/* モバイルヘッダーに入る小さい丸ボタン */
.btn-pill-sm{
  padding:8px 14px;
  font-size:12.5px;
  font-weight:700;
  white-space:nowrap;
}

/* --- 線画アイコン (SVG) --- */
.ico{
  width:1em;
  height:1em;
  display:block;
  fill:none;
  stroke:currentColor;
  stroke-width:2.2;
  stroke-linecap:round;
  stroke-linejoin:round;
}

/* --- スクロールで現れる要素 --- */
/* .rv=下から / .rv-l=左から / .rv-r=右から / .rv-s=子要素を順番に。JS が .in を付ける */
.rv{
  opacity:0;
  transform:translateY(34px);
  transition:opacity .9s var(--ease),transform .9s var(--ease);
}

.rv.in{
  opacity:1;
  transform:none;
}

.rv-l{
  opacity:0;
  transform:translateX(-40px);
  transition:opacity .9s var(--ease),transform .9s var(--ease);
}

.rv-r{
  opacity:0;
  transform:translateX(40px);
  transition:opacity .9s var(--ease),transform .9s var(--ease);
}

.rv-l.in,.rv-r.in{
  opacity:1;
  transform:none;
}

.rv-s>*{
  opacity:0;
  transform:translateY(28px);
  transition:opacity .8s var(--ease),transform .8s var(--ease);
}

.rv-s.in>*{
  opacity:1;
  transform:none;
}

.rv-s.in>*:nth-child(1){transition-delay:.05s}
.rv-s.in>*:nth-child(2){transition-delay:.14s}
.rv-s.in>*:nth-child(3){transition-delay:.23s}
.rv-s.in>*:nth-child(4){transition-delay:.32s}
.rv-s.in>*:nth-child(5){transition-delay:.41s}
.rv-s.in>*:nth-child(6){transition-delay:.5s}
.rv-s.in>*:nth-child(7){transition-delay:.59s}
.rv-s.in>*:nth-child(8){transition-delay:.68s}
.rv-s.in>*:nth-child(n+9){transition-delay:.77s}

/* --- セクション見出し --- */
.sec-head{
  text-align:center;
  margin-bottom:56px;
}

.sec-en{
  display:inline-block;
  color:var(--gold-dark);
  font-size:12.5px;
  font-weight:800;
  letter-spacing:.28em;
  margin-bottom:12px;
  text-transform:uppercase;
}

.sec-title{
  font-size:clamp(24px,3.1vw,35px);
  font-weight:800;
  line-height:1.5;
  text-wrap:balance;
}

.sec-lead{
  margin-top:16px;
  color:var(--text-mid);
  font-size:15.5px;
}

/* h2 を SEO 向けの「製品名｜説明」にした版(index_h2.html)で、元のキャッチコピーを h2 直下に残すための行 */
.sec-catch{
  margin-top:12px;
  font-size:clamp(17px,2vw,21px);
  font-weight:700;
  line-height:1.5;
  color:var(--gold-dark);
  text-wrap:balance;
}

.bg-navy .sec-catch,.band-navy .sec-catch{
  color:var(--gold-light);
}

/* SP でだけ有効にする改行 */
.br-sp{
  display:none;
}

/* --- グリッド --- */
.grid3{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:24px;
}

.grid2{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:24px;
}

/* --- 背景バンド --- */
/* warm: ほぼ白のニュートラルグレー */
.bg-warm{
  background:#f9fafb;
}

/* FAQ は白い Q カードを浮かせたいので 1 段濃くする */
#faq.bg-warm{
  background:#f3f4f6;
}

.bg-warm::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:radial-gradient(760px 440px at 6% 0%,rgba(0,0,0,.04),transparent 66%),
             radial-gradient(560px 380px at 98% 100%,rgba(0,0,0,.02),transparent 66%);
}

/* navy: グラデーション + 微細なグリッド。上下の縁を斜めに切り落とす */
.bg-navy{
  background:linear-gradient(160deg,var(--navy-900),var(--navy-700));
  color:var(--white);
  clip-path:polygon(0 0,100% 2.4%,100% 100%,0 97.6%);
  padding:130px 0;
  margin:-14px 0; /* 斜めカットで空く隙間を前後のセクションに食い込ませて埋める */
}

.bg-navy::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background-image:linear-gradient(rgba(255,255,255,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 1px);
  background-size:48px 48px;
}

.bg-navy::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:radial-gradient(700px 420px at 90% 10%,rgba(219,174,88,.16),transparent 65%);
}

.bg-navy .sec-en{color:var(--gold)}
.bg-navy .sec-lead{color:var(--on-dark-mid)}

/* smart: ニュートラルグレー + くっきりしたデータグリッド */
.bg-smart{
  background:linear-gradient(180deg,#f3f4f6 0%,#e5e7eb 100%);
}

.bg-smart::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background-image:linear-gradient(rgba(0,0,0,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(0,0,0,.05) 1px,transparent 1px);
  background-size:40px 40px;
  -webkit-mask-image:radial-gradient(90% 100% at 50% 50%,#000 45%,transparent 100%);
  mask-image:radial-gradient(90% 100% at 50% 50%,#000 45%,transparent 100%);
}

.bg-smart::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:linear-gradient(115deg,rgba(255,255,255,.6) 0%,rgba(255,255,255,0) 38%),
             radial-gradient(620px 380px at 92% 8%,rgba(0,0,0,.05),transparent 65%),
             radial-gradient(480px 320px at 6% 96%,rgba(0,0,0,.03),transparent 65%);
}

/* slate: 深い青灰。navy と違って縁はまっすぐ */
.bg-slate{
  background:linear-gradient(160deg,#152238 0%,#1c2f4d 100%);
  color:var(--white);
}

.bg-slate::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background-image:linear-gradient(rgba(255,255,255,.045) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.045) 1px,transparent 1px);
  background-size:40px 40px;
}

.bg-slate::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:radial-gradient(700px 400px at 88% 0%,rgba(91,127,166,.35),transparent 65%),radial-gradient(520px 340px at 8% 100%,rgba(219,174,88,.16),transparent 65%);
}

.bg-slate .sec-en{color:var(--gold)}
.bg-slate .sec-lead{color:var(--on-dark-mid)}
.bg-slate .issue-cta{color:var(--on-dark-mid)}

.bg-slate .issue-cta a{
  color:var(--gold-light);
  border-bottom-color:rgba(232,201,135,.5);
}

/* 疑似要素で敷いた模様より中身を前に出す */
.bg-warm>*,.bg-navy>*,.bg-slate>*,.bg-smart>*{
  position:relative;
  z-index:1;
}

/* ===== 4. Layout ===== */

/* --- スクロール進捗バー --- */
#progress{
  position:fixed;
  top:0;
  left:0;
  height:3px;
  width:0;
  z-index:200;
  background:linear-gradient(90deg,var(--gold-dark),var(--gold-light));
  transition:width .1s linear;
}

/* --- ヘッダー --- */
/* 初期は半透明。90px スクロールで JS が .solid を付け、不透明かつ低背 (76px→62px) になる */
header{
  position:fixed;
  top:0;
  left:0;
  right:0;
  z-index:100;
  background:rgba(8,17,32,.55);
  backdrop-filter:blur(10px);
  border-bottom:1px solid rgba(219,174,88,0);
  transition:background .4s var(--ease),border-color .4s var(--ease);
}

header.solid{
  background:rgba(8,17,32,.94);
  border-bottom-color:rgba(219,174,88,.28);
}

.header-in{
  max-width:1240px;
  margin:0 auto;
  padding:0 24px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  height:76px; /* ヘッダー高 (通常) */
  transition:height .4s var(--ease);
}

header.solid .header-in{
  height:62px; /* ヘッダー高 (スクロール後) */
}

.header-logo img{
  height:34px;
  width:auto;
  transition:height .4s var(--ease);
}

header.solid .header-logo img{
  height:28px;
}

nav.gnav{
  display:flex;
  gap:24px;
  align-items:center;
}

nav.gnav a{
  color:#dce6f2;
  font-size:13.5px;
  font-weight:600;
  position:relative;
  padding:4px 0;
}

nav.gnav a::after{
  content:"";
  position:absolute;
  left:0;
  bottom:0;
  width:0;
  height:1.5px;
  background:var(--gold);
  transition:width .3s var(--ease);
}

nav.gnav a:hover{color:var(--gold)}
nav.gnav a:hover::after{width:100%}

/* スクロールスパイ: 現在地のリンク (JS が .on を付ける) */
nav.gnav a.on{color:var(--gold)}
nav.gnav a.on::after{width:100%}

.header-cta{
  display:flex;
  gap:10px;
}

/* --- モバイルヘッダー: 小さい資料請求ボタン + ハンバーガー --- */
.hdr-mb{
  display:none;
  align-items:center;
  gap:8px;
  flex-shrink:0;
}

.hbg{
  display:none;
  width:40px;
  height:40px;
  padding:9px;
  border:0;
  background:transparent;
  cursor:pointer;
  flex-direction:column;
  justify-content:space-between;
  align-items:center;
}

.hbg span{
  display:block;
  width:22px;
  height:2px;
  background:#fff;
  border-radius:2px;
  transition:transform .35s var(--ease),opacity .2s linear;
}

/* 開いている間は 3 本線を × に組み替える */
.hbg.on span:nth-child(1){transform:translateY(10px) rotate(45deg)}
.hbg.on span:nth-child(2){opacity:0}
.hbg.on span:nth-child(3){transform:translateY(-10px) rotate(-45deg)}

/* --- ドロワー (1000px 以下) --- */
.drawer{
  position:fixed;
  inset:0;
  z-index:99;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  padding:76px 0 0; /* ヘッダー高ぶん空ける */
  overflow-y:auto;
  background:rgba(8,17,32,.97);
  backdrop-filter:blur(12px);
  opacity:0;
  visibility:hidden;
  transition:opacity .35s var(--ease),visibility .35s var(--ease);
}

.drawer.on{
  opacity:1;
  visibility:visible;
}

.dw-nav{
  display:flex;
  flex-direction:column;
  padding:6px 20px 0;
}

.dw-nav a{
  display:flex;
  align-items:center;
  justify-content:space-between;
  min-height:56px; /* タップ領域を確保 */
  font-size:17px;
  font-weight:700;
  color:#e6edf5;
  border-bottom:1px solid rgba(255,255,255,.08);
}

.dw-nav a::after{
  content:"";
  width:9px;
  height:9px;
  border-top:1.8px solid #7d90a8;
  border-right:1.8px solid #7d90a8;
  transform:rotate(45deg);
  margin-right:4px;
  flex:0 0 9px;
}

.dw-nav a.on{color:var(--gold)}
.dw-nav a.on::after{color:var(--gold)}

.dw-foot{
  padding:18px 20px 28px;
  display:grid;
  gap:10px;
}

.dw-foot .btn{
  width:100%;
}

.dw-tel{
  text-align:center;
  font-size:12px;
  color:var(--on-dark-dim);
  margin-top:2px;
}

/* --- サイドナビ (1200px 以上) --- */
/* 左に浮かぶ白いパネル。ヒーローが見えている間は隠し、JS が .is-visible を付けたら出す (.show はユースケースの 2 カラム紹介で使用済みのため別名) */
.sidenav{
  display:none;
  position:fixed;
  left:28px;
  top:50%;
  z-index:90;
  width:200px;
  padding:26px 22px 22px;
  background:var(--white);
  border-radius:24px;
  box-shadow:var(--shadow-hi);
  opacity:0;
  pointer-events:none;
  transform:translate(-16px,-50%);
  transition:opacity .45s var(--ease),transform .45s var(--ease);
}

.sidenav.is-visible{
  opacity:1;
  pointer-events:auto;
  transform:translate(0,-50%);
}

.sidenav ul{
  list-style:none;
  margin-bottom:16px;
}

.sidenav li a{
  display:flex;
  justify-content:flex-end;
  align-items:center;
  gap:10px;
  font-size:13px;
  font-weight:600;
  line-height:34px;
  color:var(--text-mid);
  transition:color .3s var(--ease);
}

/* 右側の丸。現在地だけ金で塗る (幅は常に確保して文字位置をそろえる) */
.sidenav li a::after{
  content:"";
  flex:0 0 6px;
  width:6px;
  height:6px;
  border-radius:50%;
  background:transparent;
  transition:background .3s var(--ease);
}

.sidenav li a span{text-align:right}
.sidenav li a:hover{color:var(--gold-dark)}
.sidenav li a.on{color:var(--gold-dark)}
.sidenav li a.on::after{background:var(--gold)}

.sidenav-cta{
  width:100%;
  justify-content:center;
  font-size:12px;
  padding:8px 10px;
  line-height:1.35;
  text-align:center;
  word-break:keep-all; /* 折り返しは <wbr>(「・」の後)だけに限定 */
}

/* 1200〜1499px は本文との左余白が約 120px しかないため、パネルを詰めて常時展開する
   (本文の .wrap 内側パディング 24px には掛かるが、テキストには掛からない) */
@media(min-width:1200px) and (max-width:1499px){
  .sidenav{
    left:10px;
    width:126px;
    padding:14px 12px 12px;
    border-radius:16px;
  }
  .sidenav li a{
    font-size:11.5px;
    line-height:1.4;
    padding:5px 0;
    gap:7px;
  }
  .sidenav li a span{text-align:right}
  .sidenav li a::after{flex-basis:5px;width:5px;height:5px}
  .sidenav ul{margin-bottom:10px}
  .sidenav-cta{font-size:11px;padding:7px 8px}
}

/* --- フッター --- */
footer{
  background:var(--navy-900);
  color:var(--on-dark-dim);
  padding:56px 0 30px;
  font-size:13px;
  border-top:1px solid rgba(219,174,88,.2);
}

.foot-in{
  max-width:1120px;
  margin:0 auto;
  padding:0 24px;
  display:flex;
  justify-content:space-between;
  gap:40px;
  flex-wrap:wrap;
}

.foot-brand img{
  height:30px;
  margin-bottom:16px;
}

.foot-brand p{
  line-height:2;
}

.foot-nav{
  display:flex;
  gap:48px;
  flex-wrap:wrap;
}

.foot-nav dt{
  color:var(--gold);
  font-weight:700;
  margin-bottom:10px;
  font-size:13px;
}

.foot-nav dd a{
  display:block;
  margin-bottom:7px;
  transition:color .25s,transform .25s;
}

.foot-nav dd a:hover{
  color:var(--white);
  transform:translateX(3px);
}

.copyright{
  text-align:center;
  margin-top:44px;
  padding-top:22px;
  border-top:1px solid rgba(255,255,255,.08);
  font-size:11.5px;
  color:#5f7188;
}

/* ===== 5.1 Section: hero (#top) ===== */
.hero{
  position:relative;
  background:var(--navy-900);
  color:var(--white);
  /* 2026-09-24: 画面高に追従させ、直下の事例ストリップ(約160px)がファーストビューに入るようにする。
     上限 750px、下限は中身(見出し+CTA+デモカード)が収まる 650px。SP はメディアクエリ側で auto */
  height:clamp(600px,calc(100vh - 160px),750px);
  min-height:0;
  display:flex;
  align-items:center;
  padding:118px 0 72px; /* 下 72px は absolute で重なる KPI バーの高さぶん */
  overflow:hidden;
  isolation:isolate;
}

#heroCanvas{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  display:block;
  z-index:0;
}

/* 写真は右側に置き、左へ向かって紺に溶かす */
.hero-scene{
  position:absolute;
  top:0;
  right:0;
  bottom:0;
  width:62%;
  z-index:1;
  overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent 0%,rgba(0,0,0,.28) 16%,rgba(0,0,0,.8) 40%,#000 62%);
  mask-image:linear-gradient(90deg,transparent 0%,rgba(0,0,0,.28) 16%,rgba(0,0,0,.8) 40%,#000 62%);
}

/* 背景ベース (スライド読み込み前のちらつき防止) */
.hero-scene::before{
  content:"";
  position:absolute;
  inset:0;
  background:var(--navy-900);
}

/* ブランドの金を写真側にも通す光のスイープ */
.hero-scene::after{
  content:"";
  position:absolute;
  top:-40%;
  left:-30%;
  width:34%;
  height:180%;
  background:linear-gradient(90deg,transparent,rgba(232,201,135,.13),transparent);
  transform:rotate(14deg);
  animation:sweep 9s var(--ease) infinite;
}

/* 3 枚の静止画スライド。表示中の 1 枚だけ Ken Burns (ゆるいズーム＋パン) で動く */
.hero-slide{
  position:absolute;
  inset:-4%;
  opacity:0;
  transition:opacity 1s var(--ease);
  will-change:opacity;
}

.hero-slide.on{
  opacity:1;
}

.hero-slide img{
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:74% 45%;
  filter:saturate(.9) contrast(1.05) brightness(.88);
  transform:scale(1);
  will-change:transform;
}

.hero-slide.on img{
  animation:kb 12s var(--ease) forwards;
}

/* 2 枚目は逆向きに動かして、切り替わりが単調にならないようにする */
.hero-slide:nth-child(2).on img{
  animation-name:kb-alt;
}

/* 明るい写真でも下部の KPI バーとデモカードが読めるように上下を締める */
.hero-shade{
  position:absolute;
  inset:0;
  pointer-events:none;
  background:linear-gradient(180deg,rgba(8,17,32,.42) 0%,transparent 28%,transparent 62%,rgba(8,17,32,.6) 100%);
}

/* コピーを読ませるための暗幕 */
.hero::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:2;
  pointer-events:none;
  background:linear-gradient(96deg,rgba(8,17,32,.97) 0%,rgba(8,17,32,.9) 28%,rgba(8,17,32,.55) 48%,rgba(8,17,32,.12) 66%,transparent 82%),
             radial-gradient(120% 80% at 50% 118%,rgba(8,17,32,.85),transparent 60%);
}

.hero-in{
  position:relative;
  z-index:3;
  max-width:1240px;
  margin:0 auto;
  padding:0 24px;
  width:100%;
  align-self:stretch;
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:flex-start;
}

.hero-text{
  max-width:780px;
}

/* h1 は SEO 用の 1 行(小さく可視)。キャッチコピーは p.hero-catch が担う */
.hero-h1{
  display:flex;
  align-items:center;
  gap:12px;
  margin:0 0 18px;
  font-size:clamp(17px,1.5vw,21px);
  font-weight:800;
  letter-spacing:.04em;
  line-height:1.5;
  color:var(--white);
  text-shadow:0 1px 18px rgba(8,17,32,.9);
}

.hero-h1::before{
  content:"";
  flex:0 0 6px;
  height:1.6em;
  border-radius:3px;
  background:var(--gold);
}

.hero .hero-catch{
  margin:0;
  font-size:clamp(26px,3.45vw,46px);
  font-weight:800;
  line-height:1.4;
  letter-spacing:.01em;
  text-shadow:0 2px 30px rgba(8,17,32,.85);
}

/* 強調語は <em> で置いているので、斜体を打ち消す */
.hero .hero-catch .gold{
  color:var(--gold);
  font-style:normal;
}

/* 1 行ずつ下からせり上がらせるためのクリップ */
.hero .hero-catch .ln{
  display:block;
  overflow:hidden;
}

.hero .hero-catch .ln>span{
  display:inline-block;
}

.hero-sub{
  margin:26px 0 36px;
  font-size:16px;
  color:#cdd9e8;
  max-width:34em;
  line-height:1.9;
  text-shadow:0 1px 18px rgba(8,17,32,.9);
}

.hero-btns{
  display:flex;
  gap:14px;
  flex-wrap:wrap;
}

/* --- ヒーローの登場アニメーション (時間差で順に出す) --- */
.hero-h1,.hero .hero-catch .ln>span,.hero-sub,.hero-btns,.hero-scene,.hero-kpi{
  opacity:0;
  transform:translateY(28px);
  animation:heroIn 1s var(--ease) forwards;
}

/* 1 行目 → 2 行目の順に出す。h1 先頭に読み上げ用の .sr-only span があるため nth-of-type は使わない */
.hero-h1{animation-delay:.08s}
.hero .hero-catch .ln>span{animation-delay:.18s}
.hero .hero-catch .ln+.ln>span{animation-delay:.32s}
.hero-sub{animation-delay:.5s}
.hero-btns{animation-delay:.68s}
.hero-kpi{animation-delay:.86s}

/* 写真はフェードのみ。動かすと mask の位置がぶれる */
.hero-scene{
  animation-delay:.1s;
  animation-duration:1.8s;
  transform:none;
}

/* --- ヒーロー下端の KPI ティッカー --- */
.hero-kpi{
  position:absolute;
  left:0;
  right:0;
  bottom:0;
  z-index:3;
  border-top:1px solid rgba(219,174,88,.22);
  background:linear-gradient(rgba(8,17,32,.2),rgba(8,17,32,.72));
  backdrop-filter:blur(6px);
}

.hero-kpi ul{
  max-width:1240px;
  margin:0 auto;
  padding:16px 24px;
  display:flex;
  gap:44px;
  list-style:none;
  flex-wrap:wrap;
}

.hero-kpi li{
  display:flex;
  align-items:baseline;
  gap:9px;
  font-size:12.5px;
  color:var(--on-dark-dim);
  letter-spacing:.02em;
}

.hero-kpi b{
  font-size:21px;
  font-weight:800;
  color:var(--gold);
  line-height:1;
}

.hero-kpi b .u{
  font-size:12.5px;
  margin-left:2px;
}


/* --- ヒーローの対話分析デモカード --- */
.hero-demo{
  position:absolute;
  right:24px;
  bottom:0;
  z-index:3;
  width:min(400px,34vw);
  cursor:pointer;
  opacity:0;
  transform:translateY(28px);
  animation:heroIn 1s var(--ease) forwards;
  animation-delay:1.05s;
}

.hd-bub.user{
  display:flex;
  align-items:flex-end;
  gap:8px;
  margin-left:auto;
  background:rgba(8,17,32,.78);
  backdrop-filter:blur(8px);
  border:1px solid rgba(255,255,255,.12);
  border-radius:14px 14px 4px 14px;
  padding:10px 12px;
  font-size:12.5px;
  line-height:1.7;
  color:#e6edf5;
  box-shadow:0 10px 26px rgba(0,0,0,.35);
}

/* 1 文字目が入る前も高さが潰れないように 1 行分確保する */
.hd-bub .type{
  flex:1;
  min-height:1.7em;
}

.hd-send{
  flex:0 0 26px;
  width:26px;
  height:26px;
  border-radius:50%;
  display:grid;
  place-items:center;
  font-style:normal;
  background:linear-gradient(135deg,var(--gold-light),var(--gold-dark));
  box-shadow:0 4px 10px rgba(219,174,88,.4);
}

.hd-send .ico{
  width:13px;
  height:13px;
  color:var(--navy-900);
  stroke-width:2.6;
}

.hd-label{
  display:flex;
  align-items:center;
  gap:8px;
  margin:12px 0 8px;
  font-size:12px;
  color:var(--on-dark);
  font-weight:700;
  opacity:0;
  transform:translateY(8px);
  transition:opacity .5s var(--ease),transform .5s var(--ease);
}

.hd-label i{
  flex:0 0 18px;
  width:18px;
  height:18px;
  border-radius:50%;
  display:grid;
  place-items:center;
  font-style:normal;
  font-size:10px;
  color:#fff;
  background:linear-gradient(135deg,var(--purple),#a89cff);
  box-shadow:0 4px 10px rgba(123,108,246,.45);
}

.hd-card{
  background:#fff;
  color:var(--text-dark);
  border-radius:14px;
  box-shadow:0 18px 44px rgba(0,0,0,.45);
  padding:14px 16px;
  opacity:0;
  transform:translateY(10px);
  transition:opacity .55s var(--ease),transform .45s var(--ease);
}

/* JS が .on を付けたらラベルと回答カードを出す */
.hero-demo.on .hd-label,.hero-demo.on .hd-card{
  opacity:1;
  transform:none;
}

.hero-demo.on:hover .hd-card{
  transform:translateY(-3px);
}

.hd-card .hd-title{
  font-size:14px;
  font-weight:800;
  line-height:1.55;
}

.hd-stats{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:8px;
  margin-top:10px;
  padding-top:10px;
  border-top:1px solid var(--line);
}

.hd-stats div b{
  display:block;
  font-size:20px;
  font-weight:800;
  color:var(--gold-dark);
  line-height:1.15;
  font-variant-numeric:tabular-nums;
  white-space:nowrap;
}

.hd-stats div span{
  display:block;
  font-size:11px;
  color:var(--text-mid);
  line-height:1.45;
}

.hd-acts{
  display:flex;
  flex-wrap:wrap;
  gap:6px;
  margin-top:10px;
}

.hd-acts span{
  display:inline-flex;
  align-items:center;
  gap:6px;
  background:#fff;
  border:1px solid var(--line);
  border-radius:8px;
  padding:4px 9px;
  font-size:11px;
  font-weight:700;
  color:var(--text-dark);
}

.hd-acts i{
  font-style:normal;
  font-size:10px;
  font-weight:800;
  color:#fff;
  background:var(--purple);
  border-radius:4px;
  padding:1px 6px;
}

/* ===== 5.2 Section: clients (#clients) ===== */
/* 見出しのない紺の帯。ヒーロー直下に事例ストリップ → ロゴを流す */
.band-navy{
  background:linear-gradient(180deg,#081120 0%,#0d1f3a 100%);
  padding:28px 0 22px;
  position:relative;
  border-top:1px solid rgba(219,174,88,.22);
  border-bottom:1px solid rgba(219,174,88,.14);
}

.band-navy::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:radial-gradient(700px 200px at 50% 0%,rgba(219,174,88,.12),transparent 70%);
}

.band-navy>*{
  position:relative;
  z-index:1;
}

/* --- 導入事例ハイライト (ファーストビューに事例を出すための 3 社要約) --- */
.case-strip{
  list-style:none;
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:14px;
  margin-top:26px; /* ロゴ帯の下に置く */
}

.case-strip a{
  display:flex;
  flex-direction:column;
  gap:2px;
  height:100%;
  position:relative;
  padding:14px 18px;
  padding-right:96px; /* 右端の「事例を見る ›」のぶん */
  background:rgba(255,255,255,.05);
  border:1px solid rgba(219,174,88,.3);
  border-radius:12px;
  transition:border-color .35s var(--ease),background .35s var(--ease);
}

.case-strip a:hover{
  border-color:var(--gold);
  background:rgba(255,255,255,.08);
}

.case-strip b{
  font-size:15px;
  font-weight:800;
  color:var(--gold);
  letter-spacing:.02em;
  line-height:1.4;
}

.case-strip span{
  font-size:13px;
  color:var(--on-dark);
  line-height:1.6;
}

.case-strip em{
  font-style:normal;
  font-weight:700;
  color:var(--white);
}

/* 右端のリンク表記。› は文字グリフではなく border で描く */
.case-strip i{
  position:absolute;
  right:18px;
  top:50%;
  transform:translateY(-50%);
  font-style:normal;
  font-size:11.5px;
  font-weight:700;
  color:var(--gold);
  white-space:nowrap;
  display:flex;
  align-items:center;
  gap:6px;
}

.case-strip i::after{
  content:"";
  width:6px;
  height:6px;
  border-top:1.5px solid currentColor;
  border-right:1.5px solid currentColor;
  transform:rotate(45deg);
  transition:transform .3s var(--ease);
}

.case-strip a:hover i::after{
  transform:translateX(3px) rotate(45deg);
}

/* .mq / .mq-track / .logo は JS (initLogoMarquee) が生成する */
.mq{
  overflow:hidden;
  margin-bottom:14px;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);
}

.mq-track{
  display:flex;
  gap:14px;
  width:max-content;
  animation:slide 60s linear infinite;
}

/* 2 行目は逆向き・別速度にして、同じ動きに見えないようにする */
.mq:nth-child(even) .mq-track{
  animation-direction:reverse;
  animation-duration:70s;
}

/* 1 社 1 タイル。sechstant.jp と同じ 162x63 相当の均一サイズ */
.logo{
  flex:0 0 170px;
  height:66px;
  background:#fff;
  border-radius:10px;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:7px 14px;
  box-sizing:border-box;
  box-shadow:0 6px 16px rgba(0,0,0,.28);
  transition:transform .3s var(--ease);
}

/* 画像は枠(内側)に収める。元画像が小さいものは拡大しすぎないよう自然サイズを上限にする */
.logo img{
  display:block;
  width:auto;
  height:auto;
  max-width:100%;
  max-height:100%;
  object-fit:contain;
}

.clients-note{
  text-align:center;
  font-size:12px;
  color:#8fa3bd;
  margin-top:6px;
  letter-spacing:.04em;
}

/* ===== 5.3 Section: issue (#issue) ===== */
.issue{
  background:var(--white);
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:30px 26px;
  box-shadow:var(--shadow);
  position:relative;
  transition:transform .4s var(--ease),box-shadow .4s var(--ease),border-color .4s;
}

.issue:hover{
  transform:translateY(-7px);
  box-shadow:var(--shadow-hi);
  border-color:rgba(219,174,88,.6);
}

.issue b{
  display:block;
  font-size:26px;
  font-weight:800;
  color:rgba(219,174,88,.55);
  line-height:1;
  letter-spacing:.02em;
  margin-bottom:12px;
}

.issue h3{
  font-size:17px;
  font-weight:800;
  margin-bottom:10px;
  line-height:1.55;
  color:var(--text-dark);
}

.issue p{
  font-size:14px;
  color:var(--text-mid);
}

.issue-cta{
  text-align:center;
  margin-top:34px;
  font-size:14.5px;
  color:var(--text-mid);
}

.issue-cta a{
  color:var(--gold-dark);
  font-weight:700;
  border-bottom:1px solid rgba(184,144,63,.5);
}

.issue-cta a:hover{
  border-bottom-color:var(--gold-dark);
}

/* ===== 5.4 Section: about (#about) ===== */
.concept-copy{
  text-align:center;
  font-size:clamp(20px,2.6vw,30px);
  font-weight:800;
  line-height:1.9;
  color:var(--text-dark);
  margin:-14px 0 6px;
}

.concept-copy .gold{
  color:var(--gold-dark);
}

/* --- 生態系ダイアグラム (カード + #flowCanvas のコネクタ) --- */
#about{
  overflow:hidden; /* .eco::before の光が横に溢れるのを止める */
}

.eco{
  position:relative;
  display:grid;
  grid-template-columns:168px 1fr 168px;
  gap:40px;
  align-items:center;
  padding:18px 0 62px;
  min-height:540px;
}

.eco::before{
  content:"";
  position:absolute;
  inset:-60px -260px;
  z-index:0;
  pointer-events:none;
  background:radial-gradient(520px 320px at 12% 20%,rgba(219,174,88,.16),transparent 70%),
             radial-gradient(560px 340px at 88% 82%,rgba(91,127,166,.14),transparent 70%),
             radial-gradient(420px 300px at 55% 50%,rgba(123,108,246,.07),transparent 70%);
}

#flowCanvas{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  z-index:1;
  pointer-events:none;
}

/* canvas に描いた線よりノードを前に出す */
.eco>*:not(canvas){
  position:relative;
  z-index:2;
}

.eco-col{
  display:flex;
  flex-direction:column;
  justify-content:center;
  gap:18px;
}

.eco-lbl{
  font-size:11px;
  font-weight:800;
  letter-spacing:.22em;
  color:var(--gold-dark);
  margin-bottom:4px;
}

/* ノードのアクセント色は HTML 側の style="--c:..." で 1 つずつ指定する */
.eco-node{
  display:flex;
  align-items:center;
  gap:10px;
  background:var(--white);
  border:1px solid var(--line);
  border-radius:14px;
  padding:7px 12px 7px 7px;
  box-shadow:var(--shadow);
  font-size:13px;
  font-weight:700;
  color:var(--text-dark);
  transition:transform .35s var(--ease),box-shadow .35s var(--ease);
}

.eco-node:hover{
  transform:translateY(-3px);
  box-shadow:var(--shadow-hi);
}

.eco-ic{
  flex:0 0 38px;
  width:38px;
  height:38px;
  border-radius:11px;
  display:grid;
  place-items:center;
  color:#fff;
  background:linear-gradient(145deg,color-mix(in srgb,var(--c) 82%,#fff),var(--c));
  box-shadow:0 6px 14px color-mix(in srgb,var(--c) 38%,transparent);
}

.eco-ic svg{
  width:20px;
  height:20px;
  fill:none;
  stroke:currentColor;
  stroke-width:1.8;
  stroke-linecap:round;
  stroke-linejoin:round;
}

.eco-mid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:24px;
  align-items:start;
}

.eco-card{
  position:relative;
  background:var(--white);
  border:1px solid var(--line);
  border-radius:18px;
  overflow:visible;
  box-shadow:0 14px 40px rgba(8,17,32,.12);
  transition:transform .45s var(--ease),box-shadow .45s var(--ease);
}

.eco-card:hover{
  transform:translateY(-8px);
  box-shadow:0 24px 54px rgba(8,17,32,.18);
}

/* 3 枚を段違いに置いて、左から右への流れを見せる */
.eco-card:nth-child(1){margin-top:76px}
.eco-card:nth-child(3){margin-top:96px}

.eco-step{
  position:absolute;
  top:-12px;
  left:-12px;
  z-index:3;
  width:30px;
  height:30px;
  border-radius:50%;
  display:grid;
  place-items:center;
  background:linear-gradient(135deg,var(--gold-light),var(--gold-dark));
  color:var(--navy-900);
  font-weight:800;
  font-size:13px;
  box-shadow:0 6px 14px rgba(219,174,88,.45);
}

.eco-photo{
  position:relative;
  border-radius:18px 18px 0 0;
  overflow:hidden;
  aspect-ratio:74/45;
  background:var(--navy-800);
}

.eco-photo img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
  transition:transform 1.1s var(--ease);
}

.eco-card:hover .eco-photo img{
  transform:scale(1.06);
}

.eco-pill{
  position:absolute;
  left:12px;
  bottom:12px;
  max-width:calc(100% - 24px);
  background:var(--c);
  color:#fff;
  font-size:11.5px;
  font-weight:800;
  line-height:1.4;
  padding:6px 11px;
  border-radius:12px;
  box-shadow:0 6px 16px rgba(8,17,32,.28);
}

.eco-body{
  padding:16px 18px 18px;
}

.eco-body h3{
  font-size:18px;
  font-weight:800;
  color:var(--c);
  line-height:1.2;
  filter:saturate(.9) brightness(.85); /* アクセント色をそのまま文字にすると明るすぎるので落とす */
}

.eco-body .eco-sub{
  display:block;
  font-size:10px;
  letter-spacing:.08em;
  white-space:nowrap;
  color:var(--text-mid);
  font-weight:700;
  margin-top:4px;
  line-height:1.2;
}

.eco-tags{
  display:flex;
  flex-wrap:wrap;
  gap:6px;
  margin-top:12px;
}

.eco-tags span{
  font-size:11.5px;
  font-weight:700;
  color:color-mix(in srgb,var(--c) 70%,#1a2635);
  background:color-mix(in srgb,var(--c) 12%,#fff);
  border:1px solid color-mix(in srgb,var(--c) 30%,#fff);
  border-radius:8px;
  padding:3px 9px;
}

.eco .eco-loop-lbl{
  position:absolute;
  left:50%;
  bottom:12px;
  transform:translateX(-50%);
  font-size:12px;
  font-weight:700;
  color:#4a86c8;
  white-space:nowrap;
}

/* canvas に描く 2 種類の線の凡例 */
.flow-cap{
  display:flex;
  gap:26px;
  justify-content:center;
  flex-wrap:wrap;
  margin-top:22px;
  font-size:13px;
  color:var(--text-mid);
}

.flow-cap span{
  display:inline-flex;
  align-items:center;
  gap:7px;
}

.flow-cap i{
  width:9px;
  height:9px;
  border-radius:50%;
  background:var(--gold);
}

.flow-cap i.b{
  background:#6ea8d8;
}

/* ===== 5.5 Section: aifeat (#aifeat) ===== */
/* 紙芝居デモ。#aifeat / #datahub / #crm の 3 箇所で使い回す */
.story{
  --acc:var(--gold);
  --acc-rgb:219,174,88;
  background:rgba(255,255,255,.04);
  border:1px solid rgba(219,174,88,.3);
  border-radius:20px;
  padding:22px;
  display:grid;
  grid-template-columns:250px 1fr;
  gap:22px;
  align-items:stretch;
}

/* --- 左のコマ選択 --- */
.story-nav{
  display:flex;
  flex-direction:column;
  gap:10px;
}

.story-nav button{
  position:relative;
  text-align:left;
  background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.12);
  border-radius:14px;
  padding:14px 16px 16px 52px;
  color:var(--on-dark);
  cursor:pointer;
  font-family:inherit;
  transition:background .3s,border-color .3s;
  overflow:hidden;
}

.story-nav button i{
  position:absolute;
  left:16px;
  top:16px;
  width:26px;
  height:26px;
  border-radius:50%;
  display:grid;
  place-items:center;
  font-style:normal;
  font-weight:800;
  font-size:12px;
  background:rgba(255,255,255,.1);
  color:#fff;
}

.story-nav button span{
  display:block;
  font-weight:800;
  font-size:15px;
  color:#fff;
}

.story-nav button small{
  display:block;
  font-size:12px;
  color:var(--on-dark-dim);
  margin-top:3px;
}

/* 残り時間ゲージ。幅は JS、所要時間は --dur (JS が data-dur から設定) */
.story-nav button em{
  position:absolute;
  left:0;
  bottom:0;
  height:3px;
  width:0;
  background:linear-gradient(90deg,var(--gold-dark),var(--gold-light));
}

.story-nav button.on{
  background:rgba(219,174,88,.12);
  border-color:rgba(219,174,88,.6);
}

.story-nav button.on i{
  background:var(--gold);
  color:var(--navy-900);
}

.story-nav button.on em{
  width:100%;
  transition:width var(--dur,8s) linear;
}

/* --- 右のステージ --- */
.story-stage{
  position:relative;
  min-height:560px;
  border-radius:14px;
  overflow:hidden;
  background:#fff;
  box-shadow:0 20px 50px rgba(0,0,0,.35);
}

.story-frame{
  position:absolute;
  inset:0;
  opacity:0;
  transform:translateX(24px);
  transition:opacity .6s var(--ease),transform .6s var(--ease);
  pointer-events:none;
}

.story-frame.on{
  opacity:1;
  transform:none;
  pointer-events:auto;
}

.story-frame img{
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:top left;
  display:block;
}

/* --- 画面キャプチャ上の吹き出し --- */
/* 位置は内容ごとに違うので HTML 側の style="left:..;top:.." で個別指定する */
.callout{
  position:absolute;
  background:rgba(8,17,32,.92);
  color:#fff;
  border-left:3px solid var(--gold);
  border-radius:8px;
  padding:9px 13px;
  font-size:12.5px;
  line-height:1.5;
  max-width:230px;
  box-shadow:0 10px 26px rgba(0,0,0,.35);
  opacity:0;
  transform:translateY(8px);
  transition:opacity .5s var(--ease) .5s,transform .5s var(--ease) .5s;
}

.callout b{
  display:block;
  color:var(--gold);
  font-size:12px;
  margin-bottom:2px;
}

.callout.c1{
  right:22px;
  top:26%;
}

.callout.c2{
  left:26%;
  bottom:16%;
  transition-delay:1.3s;
}

.story-frame.on .callout{
  opacity:1;
  transform:none;
}

/* .d1 / .d2 は 2 個目・3 個目の吹き出しを遅らせて順に出すためのクラス */
.callout.d1{transition-delay:.9s}
.callout.d2{transition-delay:1.7s}

/* --- チャット画面のコマ --- */
.chat{
  position:absolute;
  inset:0;
  display:flex;
  flex-direction:column;
  background:var(--off-white);
  color:var(--text-dark);
  overflow:hidden;
}

/* ダッシュボード生成のコマは上半分だけチャット、下は生成結果 */
.chat.compact{
  inset:0 0 auto 0;
  background:transparent;
}

.chat-head{
  display:flex;
  align-items:center;
  gap:8px;
  padding:12px 18px;
  background:#fff;
  border-bottom:1px solid var(--line);
  font-weight:800;
  font-size:14px;
}

.chat-head i{
  width:22px;
  height:22px;
  border-radius:7px;
  background:var(--navy-800);
}

.chat-body{
  padding:16px 18px;
  overflow:hidden;
  display:flex;
  flex-direction:column;
  gap:12px;
  flex:1;
  scroll-behavior:auto; /* JS が自前でゆっくりスクロールするので smooth は邪魔 */
  touch-action:pan-y;
  overscroll-behavior:contain;
}

.bub{
  max-width:82%;
  padding:10px 14px;
  border-radius:14px;
  font-size:13.5px;
  line-height:1.7;
}

.bub.user{
  align-self:flex-end;
  background:#e8e6ff;
  color:#2a2560;
  border-radius:14px 14px 4px 14px;
  margin:14px 18px 0 auto;
  min-height:44px;
}

.chat-body .bub.user{
  margin:0 0 0 auto;
}

/* タイプ中のカーソル。JS が .done を付けたら消える */
.type::after{
  content:"";
  display:inline-block;
  width:2px;
  height:1em;
  background:currentColor;
  margin-left:2px;
  vertical-align:-2px;
  animation:blink 1s steps(1) infinite;
}

.type.done::after{
  display:none;
}

/* --- 分析中の進捗バー --- */
.progress{
  display:none;
  align-items:center;
  gap:10px;
  font-size:12px;
  color:#6b7c93;
  padding:0 18px;
}

.chat-body .progress{
  padding:0;
}

.progress.on{
  display:flex;
}

.pg-bar{
  flex:1;
  height:4px;
  background:#e3e8ef;
  border-radius:2px;
  overflow:hidden;
}

.pg-bar i{
  display:block;
  height:100%;
  width:0;
  background:var(--purple);
  transition:width 2.6s linear;
}

.progress.on .pg-bar i{
  width:100%;
}

/* --- 回答 --- */
.answer{
  flex-shrink:0;
  opacity:0;
  transform:translateY(10px);
  transition:opacity .6s var(--ease),transform .6s var(--ease);
  background:#fff;
  border:1px solid var(--line);
  border-radius:12px;
  padding:14px 16px;
  font-size:12.5px;
}

.chat-body .bub.user,.chat-body .progress{
  flex-shrink:0;
}

.answer.on{
  opacity:1;
  transform:none;
}

.answer .ans-title{
  font-size:14.5px;
  font-weight:800;
  margin-bottom:6px;
}

.answer p{
  color:var(--text-mid);
  margin-bottom:10px;
}

.answer table{
  width:100%;
  border-collapse:collapse;
  font-size:11.5px;
  margin-bottom:10px;
}

.answer th{
  background:#f3f5f9;
  text-align:left;
  padding:6px 8px;
  font-weight:700;
  color:var(--text-mid);
}

.answer td{
  padding:6px 8px;
  border-top:1px solid var(--off-white);
}

.answer td b{
  color:#2a56c6;
}

.insight,.acts{
  border-radius:8px;
  padding:9px 12px;
  font-size:12px;
  line-height:1.6;
}

/* .insight=示唆 (黄) / .acts=打ち手 (青) */
.insight{
  background:#fff7e6;
  border:1px solid #f4dba3;
  margin-bottom:8px;
}

.insight b,.acts b{
  display:block;
  font-size:11.5px;
  margin-bottom:3px;
}

.insight b{
  color:#9a6f1f;
}

.acts{
  background:#eef3ff;
  border:1px solid #cdd8f6;
}

.acts b{
  color:#2a56c6;
}

.acts ul{
  list-style:none;
  display:grid;
  gap:5px;
}

.acts li b{
  display:inline;
  color:var(--text-dark);
  margin-right:6px;
}

.acts li span{
  color:var(--text-mid);
}

/* そのまま実行できる提案チップ */
.props{
  margin-top:8px;
  display:flex;
  flex-wrap:wrap;
  gap:6px;
  align-items:center;
}

.props b{
  flex-basis:100%;
  font-size:11.5px;
  color:var(--text-mid);
  margin-bottom:2px;
}

.props span{
  display:inline-flex;
  align-items:center;
  gap:6px;
  background:#fff;
  border:1px solid var(--line);
  border-radius:8px;
  padding:4px 9px;
  font-size:11.5px;
  font-weight:700;
  color:var(--text-dark);
}

.props span i{
  font-style:normal;
  font-size:10px;
  font-weight:800;
  color:#fff;
  background:var(--purple);
  border-radius:4px;
  padding:1px 6px;
}

/* --- 生成されたダッシュボード (チャットの下に出る) --- */
.gen{
  position:absolute;
  inset:118px 0 0 0; /* チャットヘッダー + 質問 + 進捗バーの高さぶん下げる */
  opacity:0;
  transform:translateY(16px);
  transition:opacity .7s var(--ease),transform .7s var(--ease);
  background:#fff;
}

.gen.on{
  opacity:1;
  transform:none;
}

.gen img{
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:top left;
}

/* --- 下部の注記とコントロールバー --- */
.story-foot{
  grid-column:1/-1;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:10px;
  font-size:12px;
  color:var(--on-dark-dim);
  padding-top:2px;
}

/* order でコントロールバーを注記より上に置く */
.story-note{
  order:2;
  text-align:center;
  line-height:1.6;
}

/* .story-ctl の中身 (.sc-btn / .sc-bar / .sc-count) は JS が生成する */
.story-ctl{
  order:1;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:14px;
}

.sc-btn{
  width:38px;
  height:38px;
  flex:0 0 38px;
  border-radius:50%;
  border:1px solid rgba(255,255,255,.28);
  background:rgba(255,255,255,.03);
  color:#e3ebf5;
  font-size:16px;
  padding:0;
  line-height:1;
  cursor:pointer;
  font-family:inherit;
  display:grid;
  place-items:center;
  transition:border-color .3s,color .3s,background .3s;
}

.sc-btn:hover{
  border-color:var(--gold);
  color:var(--gold);
  background:rgba(219,174,88,.1);
}

.sc-bar{
  display:flex;
  gap:8px;
  align-items:center;
}

/* コマ数ぶんのセグメント。中の <b> が残り時間ぶん伸びる */
.sc-bar i{
  position:relative;
  display:block;
  width:48px;
  height:4px;
  border-radius:2px;
  background:rgba(255,255,255,.15);
  overflow:hidden;
  cursor:pointer;
}

.sc-bar i b{
  display:block;
  height:100%;
  width:0;
  border-radius:2px;
  background:linear-gradient(90deg,var(--gold-dark),var(--gold-light));
}

.sc-count{
  font-size:12.5px;
  letter-spacing:.1em;
  min-width:4.6em;
  text-align:left;
  font-variant-numeric:tabular-nums;
  color:var(--on-dark-dim);
}

/* --- 機能タイルグリッド --- */
.ai-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:14px;
  margin-top:40px;
}

.ai-item{
  background:rgba(255,255,255,.05);
  border:1px solid rgba(219,174,88,.28);
  border-radius:12px;
  padding:16px 16px 14px;
  transition:transform .35s var(--ease),border-color .35s;
}

.ai-item:hover{
  transform:translateY(-4px);
  border-color:var(--gold);
}

.ai-item i{
  font-style:normal;
  font-size:11px;
  font-weight:800;
  color:var(--gold);
  letter-spacing:.1em;
}

.ai-item b{
  display:block;
  font-size:15px;
  margin:4px 0 4px;
  color:#fff;
}

.ai-item span{
  font-size:12.5px;
  color:var(--on-dark-mid);
  line-height:1.6;
}

/* ===== 5.6 Section: datahub (#datahub) / story の製品別アクセントとライトテーマ ===== */
/* .acc-slate=DataHub / .acc-teal=CRM。.light は明るい背景のセクション用 */
.story.acc-slate{
  --acc:var(--slate);
  --acc-rgb:91,127,166;
}

.story.acc-teal{
  --acc:var(--teal);
  --acc-rgb:47,183,166;
  border-color:rgba(47,183,166,.35);
}

.story.acc-teal .story-nav button.on{
  background:rgba(47,183,166,.12);
  border-color:rgba(47,183,166,.6);
}

.story.acc-teal .story-nav button.on i{
  background:var(--teal);
  color:#fff;
}

.story.acc-teal .story-nav button em{
  background:linear-gradient(90deg,var(--teal),var(--teal-light));
}

.story.acc-teal .callout{
  border-left-color:var(--teal);
}

.story.acc-teal .callout b{
  color:var(--teal-light);
}

.story.light{
  background:#fff;
  border-color:var(--line);
  box-shadow:var(--shadow);
}

.story.light .story-nav button{
  background:var(--off-white);
  border-color:var(--line);
  color:var(--text-mid);
}

.story.light .story-nav button span{color:var(--text-dark)}
.story.light .story-nav button small{color:var(--text-mid)}

.story.light .story-nav button i{
  background:#e3e8ef;
  color:var(--text-dark);
}

.story.light .story-nav button.on{
  background:rgba(var(--acc-rgb),.10);
  border-color:rgba(var(--acc-rgb),.7);
}

.story.light .story-nav button.on i{
  background:var(--acc);
  color:#fff;
}

.story.light .story-nav button em{
  background:var(--acc);
}

.story.light .story-stage{
  box-shadow:0 18px 44px rgba(8,17,32,.16);
  border:1px solid var(--line);
}

.story.light .story-foot{color:var(--text-mid)}

.story.light .callout{
  border-left-color:var(--acc);
}

.story.light .callout b{
  color:var(--acc);
  filter:brightness(.92);
}

.story.light .sc-btn{
  border-color:var(--line);
  color:var(--text-mid);
}

.story.light .sc-btn:hover{
  border-color:var(--acc);
  color:var(--acc);
  background:rgba(var(--acc-rgb),.08);
}

.story.light .sc-bar i{background:var(--line)}
.story.light .sc-bar i b{background:var(--acc)}
.story.light .sc-count{color:var(--text-mid)}

.story.acc-teal .sc-btn:hover{
  border-color:var(--teal);
  color:var(--teal-light);
  background:rgba(47,183,166,.1);
}

.story.acc-teal .sc-bar i b{
  background:linear-gradient(90deg,var(--teal),var(--teal-light));
}

/* 明るい背景に置く機能タイル */
.ai-grid.light .ai-item{
  background:#fff;
  border-color:var(--line);
  box-shadow:var(--shadow);
}

.ai-grid.light .ai-item:hover{border-color:var(--acc,#5B7FA6)}
.ai-grid.light .ai-item i{color:var(--acc,#5B7FA6)}
.ai-grid.light .ai-item b{color:var(--text-dark)}
.ai-grid.light .ai-item span{color:var(--text-mid)}

.ai-grid.acc-slate{--acc:var(--slate)}

.ai-grid.acc-teal .ai-item{border-color:rgba(47,183,166,.3)}
.ai-grid.acc-teal .ai-item:hover{border-color:var(--teal)}
.ai-grid.acc-teal .ai-item i{color:var(--teal-light)}

/* ===== 5.7 Section: cdp (#cdp) ===== */
.cdp-wrap{
  display:grid;
  grid-template-columns:1fr 1.55fr;
  gap:44px;
  align-items:center;
}

.cdp-copy h3{
  font-size:22px;
  font-weight:800;
  line-height:1.5;
  margin-bottom:14px;
}

.cdp-copy p{
  color:var(--text-mid);
  font-size:14.5px;
  line-height:1.9;
}

.cdp-points{
  margin-top:22px;
  display:grid;
  gap:10px;
}

.cdp-points li{
  list-style:none;
  display:flex;
  gap:12px;
  align-items:flex-start;
  font-size:14px;
  color:var(--text-dark);
  background:#fff;
  border:1px solid var(--line);
  border-radius:12px;
  padding:12px 14px;
  box-shadow:var(--shadow);
}

.cdp-points li i{
  flex:0 0 auto;
  width:22px;
  height:22px;
  border-radius:7px;
  background:var(--gold);
  color:var(--navy-900);
  font-style:normal;
  font-weight:800;
  font-size:11px;
  display:grid;
  place-items:center;
  margin-top:1px;
}

.cdp-points li b{
  display:block;
  font-size:14px;
}

.cdp-points li span{
  display:block;
  color:var(--text-mid);
  font-size:12.5px;
  margin-top:2px;
}

/* --- ダッシュボードスライダー --- */
/* ドットが枠の下にはみ出すので、外側に余白を持たせる */
.slider-holder{
  padding-bottom:34px;
}

.slider{
  position:relative;
  border-radius:16px;
  overflow:hidden;
  background:var(--navy-800);
  box-shadow:var(--shadow-hi);
  border:1px solid rgba(8,17,32,.12);
}

.slides{
  display:flex;
  transition:transform .7s var(--ease);
  will-change:transform;
}

.slide{
  flex:0 0 100%;
  position:relative;
}

.slide img{
  width:100%;
  aspect-ratio:16/10;
  object-fit:cover;
  object-position:top;
  display:block;
}

.slide figcaption{
  position:absolute;
  left:0;
  right:0;
  bottom:0;
  padding:34px 18px 14px;
  background:linear-gradient(transparent,rgba(8,17,32,.9));
  color:#fff;
  font-weight:800;
  font-size:15px;
  display:flex;
  justify-content:space-between;
  align-items:baseline;
}

.slide figcaption small{
  font-weight:600;
  font-size:12px;
  color:var(--on-dark);
}

.slider-btn{
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  width:40px;
  height:40px;
  border-radius:50%;
  border:1px solid rgba(255,255,255,.35);
  background:rgba(8,17,32,.55);
  color:#fff;
  font-size:18px;
  cursor:pointer;
  display:grid;
  place-items:center;
  backdrop-filter:blur(4px);
  transition:background .3s;
}

.slider-btn:hover{
  background:var(--gold);
  color:var(--navy-900);
  border-color:var(--gold);
}

.slider-btn.prev{left:12px}
.slider-btn.next{right:12px}

.slider-btn .ico{
  width:18px;
  height:18px;
}

/* ドットは JS が枚数ぶん生成する */
.slider-dots{
  position:absolute;
  left:0;
  right:0;
  bottom:-30px;
  display:flex;
  justify-content:center;
  gap:8px;
}

.slider-dots button{
  width:8px;
  height:8px;
  border-radius:50%;
  border:0;
  background:#9aa7b8;
  cursor:pointer;
  padding:0;
  transition:transform .3s,background .3s;
}

.slider-dots button.on{
  background:var(--gold);
  transform:scale(1.35);
}

/* ===== 5.9 Section: usecase (#usecase) ===== */
/* BtoC / BtoB は縦に並べて常時表示。上のピルは各パネルへのジャンプ (現在地は JS が .on を付ける) */
.uc-jump{
  display:flex;
  justify-content:center;
  gap:12px;
  margin-bottom:40px;
}

.uc-jump a{
  display:block;
  background:var(--white);
  border:1.5px solid var(--line);
  border-radius:14px;
  padding:12px 34px;
  text-align:center;
  transition:all .35s var(--ease);
  font-weight:800;
  font-size:18px;
  line-height:1.6;
  color:var(--text-mid);
  min-width:200px;
}

.uc-jump a small{
  display:block;
  font-size:12px;
  font-weight:700;
  color:var(--text-mid);
  margin-top:2px;
}

.uc-jump a:hover{
  border-color:var(--gold);
}

.uc-jump a.on{
  background:var(--navy-800);
  border-color:var(--navy-800);
  color:#fff;
}

.uc-jump a.on small{
  color:var(--gold);
}

.uc-panel{
  display:block;
}

.uc-panel+.uc-panel{
  margin-top:72px;
}

/* パネル先頭の区切り。左右に罫線を伸ばし、中央にピルと見出しを置く */
.uc-divider{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:14px;
  margin-bottom:32px;
}

.uc-divider::before,.uc-divider::after{
  content:"";
  flex:1;
  height:1px;
  background:var(--line);
}

.uc-divider-pill{
  background:var(--navy-800);
  color:#fff;
  font-size:13px;
  font-weight:800;
  letter-spacing:.06em;
  border-radius:999px;
  padding:4px 16px;
}

.uc-divider b{
  font-size:17px;
  font-weight:800;
  color:var(--text-dark);
}

/* --- BtoC のカード --- */
.uc-card{
  background:var(--white);
  border:1px solid var(--line);
  border-radius:18px;
  overflow:hidden;
  box-shadow:var(--shadow);
  display:flex;
  flex-direction:column;
  transition:transform .45s var(--ease),box-shadow .45s var(--ease);
}

.uc-card:hover{
  transform:translateY(-8px);
  box-shadow:var(--shadow-hi);
}

.uc-card>img{
  width:100%;
  aspect-ratio:74/45;
  object-fit:cover;
}

/* 準備中カードは破線 + ストライプのプレースホルダ */
.uc-card.placeholder{
  border-style:dashed;
  border-color:#c7d0dc;
}

.uc-ph{
  aspect-ratio:74/45;
  display:grid;
  place-items:center;
  background:repeating-linear-gradient(135deg,#f3f5f9 0 12px,#e9edf4 12px 24px);
  color:var(--text-mid);
  font-size:13px;
  font-weight:700;
  border-bottom:1px dashed var(--line);
}

.uc-body{
  padding:18px 20px 20px;
  display:flex;
  flex-direction:column;
  gap:8px;
  flex:1;
}

.uc-role{
  font-size:11.5px;
  font-weight:800;
  letter-spacing:.12em;
  color:var(--gold-dark);
}

.uc-body h3{
  font-size:17px;
  font-weight:800;
  line-height:1.5;
}

.uc-body p{
  font-size:14px;
  color:var(--text-mid);
}

.uc-body .ph-note{
  color:#8592a6;
  font-style:normal;
}

/* タグは常にカード下端にそろえる */
.uc-body .eco-tags{
  margin-top:auto;
  padding-top:6px;
}

/* --- BtoB: 5つの壁 --- */
.b2b-intro{
  background:var(--navy-800);
  color:#fff;
  border-radius:18px;
  padding:30px 32px;
  margin-bottom:32px;
}

.b2b-intro h3{
  font-size:19px;
  font-weight:800;
  margin-bottom:8px;
}

.b2b-intro p{
  font-size:14px;
  color:var(--on-dark);
  margin-bottom:18px;
}

.walls{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
}

.walls span{
  display:inline-flex;
  align-items:center;
  gap:8px;
  background:rgba(255,255,255,.06);
  border:1px solid rgba(219,174,88,.35);
  border-radius:999px;
  padding:7px 14px 7px 8px;
  font-size:13px;
  font-weight:700;
}

.walls i{
  width:22px;
  height:22px;
  border-radius:50%;
  background:var(--gold);
  color:var(--navy-900);
  display:grid;
  place-items:center;
  font-style:normal;
  font-size:12px;
  font-weight:800;
}

/* --- BtoB: CRM 2 本立て --- */
.b2b-two{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:24px;
}

.b2b-col{
  background:var(--white);
  border:1px solid var(--line);
  border-radius:18px;
  overflow:hidden;
  box-shadow:var(--shadow);
  padding-bottom:22px;
}

/* 画像だけ全幅に出したいので、テキスト側にだけ左右余白を付ける */
.b2b-col img{
  width:100%;
  aspect-ratio:16/9; /* 生成写真 (rn_b2b-*.webp 1280x720) と同じ比率 */
  object-fit:cover;
  margin-bottom:16px;
}

.b2b-col .uc-role,.b2b-col h3,.b2b-col p,.b2b-col ul{
  padding:0 22px;
}

.b2b-col h3{
  font-size:18px;
  font-weight:800;
  margin:4px 0 6px;
  line-height:1.5;
}

.b2b-col p{
  font-size:14px;
  color:var(--text-mid);
  margin-bottom:10px;
}

.b2b-col ul{
  list-style:none;
}

.b2b-col li{
  font-size:13.5px;
  color:var(--text-mid);
  padding:5px 0 5px 1.3em;
  position:relative;
}

.b2b-col li::before{
  content:"";
  position:absolute;
  left:0;
  top:11px;
  border-style:solid;
  border-width:3.5px 0 3.5px 5.5px;
  border-color:transparent transparent transparent var(--gold-dark);
}

/* --- BtoB: 3 つの集計軸 --- */
.b2b-three{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:18px;
  margin-top:28px;
}

.tier{
  background:var(--white);
  border:1px solid var(--line);
  border-radius:14px;
  padding:20px 20px 18px 62px;
  position:relative;
  box-shadow:var(--shadow);
}

.tier i{
  position:absolute;
  left:18px;
  top:18px;
  width:30px;
  height:30px;
  border-radius:50%;
  background:var(--navy-800);
  color:var(--gold);
  display:grid;
  place-items:center;
  font-style:normal;
  font-weight:800;
  font-size:13px;
}

.tier b{
  display:block;
  font-size:15px;
  margin-bottom:4px;
}

.tier span{
  font-size:13px;
  color:var(--text-mid);
  line-height:1.65;
}

/* --- 画像 + テキストの 2 カラム紹介 --- */
.show{
  display:grid;
  grid-template-columns:1.15fr .85fr;
  gap:48px;
  align-items:center;
  margin-top:56px;
  margin-bottom:88px;
}

.show:last-child{
  margin-bottom:0;
}

/* .rev は画像とテキストの比率を入れ替える (左右は HTML 上の並びで入れ替わる) */
.show.rev{
  grid-template-columns:.85fr 1.15fr;
}

.show-img{
  border-radius:14px;
  overflow:hidden;
  box-shadow:var(--shadow-hi);
  border:1px solid var(--line);
  background:var(--white);
}

.show-img img{
  width:100%;
  transition:transform 1s var(--ease);
}

.show-img:hover img{
  transform:scale(1.035);
}

.show-tag{
  display:inline-flex;
  align-items:center;
  gap:8px;
  font-size:11.5px;
  font-weight:800;
  letter-spacing:.14em;
  color:var(--gold-dark);
  margin-bottom:10px;
}

.show-tag b{
  background:var(--gold);
  color:var(--navy-900);
  border-radius:4px;
  padding:1px 8px;
  letter-spacing:.06em;
}

.show-txt h3{
  font-size:clamp(20px,2.3vw,26px);
  font-weight:800;
  line-height:1.55;
  margin-bottom:14px;
}

.show-txt p{
  font-size:14.8px;
  color:var(--text-mid);
}

.show-txt ul{
  list-style:none;
  margin-top:16px;
}

.show-txt ul li{
  font-size:14px;
  color:var(--text-mid);
  padding-left:1.5em;
  position:relative;
  margin-bottom:7px;
}

.show-txt ul li::before{
  content:"";
  position:absolute;
  left:0;
  top:9px;
  border-style:solid;
  border-width:4px 0 4px 6px;
  border-color:transparent transparent transparent var(--gold-dark);
}

/* --- BtoB: 導入フェーズ --- */
.phases{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:18px;
  margin-top:56px;
}

.phase{
  background:var(--white);
  border:1px solid var(--line);
  border-radius:14px;
  padding:22px;
  box-shadow:var(--shadow);
  position:relative;
}

/* カードの間に次フェーズへの矢印を置く */
.phase:not(:last-child)::after{
  content:"";
  position:absolute;
  right:-14px;
  top:50%;
  width:12px;
  height:12px;
  border-top:2px solid var(--gold-dark);
  border-right:2px solid var(--gold-dark);
  transform:translateY(-50%) rotate(45deg);
}

.phase i{
  font-style:normal;
  font-size:11.5px;
  font-weight:800;
  letter-spacing:.12em;
  color:var(--gold-dark);
}

.phase b{
  display:block;
  font-size:17px;
  margin:4px 0 2px;
}

.phase em{
  display:inline-block;
  font-style:normal;
  font-size:12px;
  font-weight:700;
  color:var(--navy-800);
  background:var(--off-white);
  border-radius:6px;
  padding:2px 9px;
  margin-bottom:10px;
}

.phase span{
  display:block;
  font-size:13px;
  color:var(--text-mid);
  line-height:1.7;
}

.uc-note{
  text-align:center;
  font-size:12.5px;
  color:var(--text-mid);
  margin-top:22px;
}

/* ===== 5.10 Section: function (#function) ===== */
.tabs{
  display:flex;
  gap:10px;
  justify-content:center;
  margin-bottom:30px;
  flex-wrap:wrap;
}

.tabs button{
  background:var(--white);
  border:1.5px solid var(--line);
  border-radius:999px;
  padding:11px 28px;
  font-size:14px;
  font-weight:700;
  color:var(--text-mid);
  cursor:pointer;
  font-family:inherit;
  transition:all .35s var(--ease);
}

.tabs button:hover{
  border-color:var(--gold);
  color:var(--text-dark);
}

.tabs button.on{
  background:var(--navy-800);
  border-color:var(--navy-800);
  color:var(--white);
}

.panel{
  display:none;
  animation:fadeUp .6s var(--ease);
}

.panel.on{
  display:block;
}

.fn-list{
  background:var(--white);
  border:1px solid var(--line);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  padding:12px 30px;
  columns:2;
  column-gap:40px;
}

.fn-list li{
  list-style:none;
  font-size:13.8px;
  color:var(--text-mid);
  padding:9px 0 9px 1.5em;
  position:relative;
  border-bottom:1px solid var(--off-white);
  break-inside:avoid;
}

/* ■ が標準機能、○ がオプション機能 */
.fn-list li::before{
  content:"■";
  color:var(--gold);
  font-size:8px;
  position:absolute;
  left:2px;
  top:15px;
}

.fn-list li.opt::before{
  content:"○";
  color:var(--gold-dark);
  font-size:11px;
  top:11px;
}

.fn-legend{
  text-align:center;
  font-size:12.5px;
  color:var(--text-mid);
  margin-top:20px;
}

/* ===== 5.11 Section: case (#case) ===== */
.case-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:26px;
}

.case{
  background:rgba(255,255,255,.05);
  border:1px solid rgba(219,174,88,.3);
  border-radius:var(--radius);
  padding:32px 30px;
  transition:transform .45s var(--ease),border-color .45s;
}

.case:hover{
  transform:translateY(-7px);
  border-color:var(--gold);
}

.case-co{
  display:flex;
  align-items:baseline;
  gap:12px;
  margin-bottom:6px;
  flex-wrap:wrap;
}

.case-co b{
  font-size:19px;
  color:var(--gold);
  font-weight:800;
  letter-spacing:.02em;
}

.case-co span{
  font-size:12.5px;
  color:var(--on-dark-dim);
}

.case h3{
  font-size:16.5px;
  font-weight:800;
  margin-bottom:14px;
  line-height:1.6;
}

.case p{
  font-size:14px;
  color:var(--on-dark);
}

.case .src{
  display:inline-block;
  margin-top:14px;
  font-size:11.5px;
  color:#7d90a8;
  border-bottom:1px dotted #7d90a8;
}

.case .src:hover{
  color:var(--gold);
}

/* --- 匿名事例 (BtoB) は 2 カラムの横長カード --- */
.case.anon{
  grid-column:1/-1;
  display:grid;
  grid-template-columns:1.1fr .9fr;
  gap:22px 28px;
  align-items:start;
  border-style:dashed;
}

.case.anon .anon-tag{
  grid-column:1/-1;
  display:inline-block;
  justify-self:start;
  background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.2);
  color:var(--on-dark);
  font-size:12px;
  font-weight:700;
  border-radius:6px;
  padding:3px 10px;
}

.case.anon h3{
  grid-column:1/-1;
  font-size:20px;
  margin:0;
}

.case.anon .anon-lead,.case.anon .anon-visual{
  grid-column:1/-1;
}

.case.anon .anon-lead b{
  color:var(--white);
  font-weight:700;
}

/* --- 決定木のイメージ (インライン SVG) --- */
/* viewBox 640 幅をほぼ等倍で見せ、SVG 内の文字を 11〜13px 相当に保つため幅に上限を置く */
.case.anon .anon-visual{
  width:100%;
  max-width:760px;
  justify-self:center;
  margin:4px 0 6px;
}

.anon-visual svg.tr-sp{display:none} /* SP 用は 560px 以下でのみ表示 */

.anon-visual svg{
  display:block;
  width:100%;
  height:auto;
  overflow:visible;
  font-family:inherit;
}

.anon-visual .tr-edges path{fill:none;stroke:rgba(255,255,255,.4);stroke-width:2;stroke-linejoin:round}
.anon-visual marker path{fill:rgba(255,255,255,.55)}
.anon-visual .tr-node rect:first-child{fill:rgba(255,255,255,.06);stroke:rgba(255,255,255,.26);stroke-width:1.5}
.anon-visual .tr-root rect:first-child{fill:rgba(255,255,255,.12);stroke:rgba(219,174,88,.7)}
.anon-visual .tr-high rect:first-child{fill:rgba(47,183,166,.16);stroke:var(--teal);stroke-width:2}
.anon-visual .tr-mid rect:first-child{fill:rgba(219,174,88,.16);stroke:var(--gold);stroke-width:2}
.anon-visual .tr-low rect:first-child{fill:rgba(255,255,255,.05);stroke:rgba(255,255,255,.22)}
.anon-visual .tr-div{stroke:rgba(255,255,255,.22);stroke-width:1}
.anon-visual .tr-t1{font-size:15.5px;font-weight:800;fill:var(--white)}
.anon-visual .tr-t2{font-size:11.5px;fill:var(--on-dark)}
.anon-visual .tr-sp .tr-t1{font-size:13.5px}
.anon-visual .tr-sp .tr-t2{font-size:10.5px}
/* アイコン: ノードの色に合わせる */
.anon-visual .tr-ic{fill:rgba(255,255,255,.75)}
.anon-visual .tr-ic-s{fill:none;stroke:rgba(255,255,255,.75);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.anon-visual .tr-high .tr-ic{fill:var(--teal-light)}
.anon-visual .tr-high .tr-ic-s{stroke:var(--teal-light)}
.anon-visual .tr-mid .tr-ic{fill:var(--gold-light)}
.anon-visual .tr-low .tr-ic{fill:rgba(255,255,255,.45)}
/* 期待値のピル */
.anon-visual .tr-exp rect{fill:rgba(255,255,255,.1)}
.anon-visual .tr-exp text{font-size:12.5px;font-weight:800;fill:var(--white)}
.anon-visual .tr-high .tr-exp rect{fill:rgba(47,183,166,.32)}
.anon-visual .tr-high .tr-exp text{fill:var(--teal-light)}
.anon-visual .tr-mid .tr-exp rect{fill:rgba(219,174,88,.3)}
.anon-visual .tr-mid .tr-exp text{fill:var(--gold-light)}
.anon-visual .tr-low .tr-exp text{fill:var(--on-dark)}
/* 分岐の質問(金のピル) */
.anon-visual .tr-q rect{fill:var(--gold)}
.anon-visual .tr-q text{font-size:13.5px;font-weight:800;fill:var(--navy-900)}
.anon-visual .tr-q .tr-ic{fill:var(--navy-900)}
.anon-visual .tr-q .tr-ic-s{stroke:var(--navy-900)}
/* YES / NO バッジ */
.anon-visual .tr-b text{font-size:11px;font-weight:800;fill:var(--white);letter-spacing:.04em}
.anon-visual .tr-yes rect{fill:var(--teal)}
.anon-visual .tr-yes2 rect{fill:#b8842a}
.anon-visual .tr-no rect{fill:rgba(255,255,255,.28)}
.anon-visual .tr-note{font-size:10.5px;fill:var(--on-dark-dim)}

/* 3 ステップは決定木の下に横並び */
.case.anon .anon-steps{
  grid-column:1/-1;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:14px;
}

.anon-steps{
  display:grid;
  gap:10px;
}

/* 左に「01 分析」などのラベルを置くぶんインデントする */
.anon-steps div{
  font-size:13.5px;
  color:var(--on-dark);
  line-height:1.7;
  padding-left:0;
  padding-top:26px;
  position:relative;
}

.anon-steps i{
  position:absolute;
  left:0;
  top:2px;
  font-style:normal;
  font-size:11px;
  font-weight:800;
  color:var(--gold);
  letter-spacing:.06em;
}

.case.anon .kpi{
  grid-column:1/-1;
  margin-top:0;
}

/* --- 事例カード下部の KPI --- */
.case .kpi{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(92px,1fr));
  gap:12px 8px;
  margin-top:18px;
  padding-top:16px;
  border-top:1px solid rgba(219,174,88,.22);
}

.kpi-it b{
  display:block;
  font-size:25px;
  font-weight:800;
  color:var(--gold);
  line-height:1.1;
  font-variant-numeric:tabular-nums;
}

.kpi-it b small{
  font-size:12px;
  margin-left:3px;
  color:var(--gold-light);
  font-weight:700;
}

.kpi-it>span{
  display:block;
  font-size:11.5px;
  color:var(--on-dark-dim);
  margin-top:4px;
  line-height:1.45;
}

/* 数値のない定性 KPI は ✓ 付きの 1 行表示 */
.kpi-it.txt{
  display:flex;
  align-items:center;
  gap:10px;
}

.kpi-it.txt b{
  flex:0 0 24px;
  width:24px;
  height:24px;
  border-radius:50%;
  border:1.5px solid var(--gold);
  display:grid;
  place-items:center;
  font-size:12px;
  color:var(--gold);
  line-height:1;
}

.kpi-it.txt>span{
  font-size:13px;
  font-weight:700;
  color:#fff;
  margin-top:0;
  line-height:1.45;
}

/* --- BtoB 導入実績 --- */
.track{
  margin-top:44px;
  background:rgba(255,255,255,.05);
  border:1px solid rgba(219,174,88,.3);
  border-radius:var(--radius);
  padding:30px 32px;
}

.track h3{
  font-size:18px;
  font-weight:800;
  margin-bottom:18px;
}

.track h3 small{
  font-size:12px;
  color:var(--on-dark-dim);
  font-weight:700;
  margin-left:8px;
}

.track-cols{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:24px;
}

.track-cols b{
  display:block;
  font-size:12.5px;
  color:var(--gold);
  letter-spacing:.06em;
  margin-bottom:8px;
}

.track-cols ul{
  list-style:none;
}

.track-cols li{
  font-size:14px;
  color:#e6edf5;
  padding:4px 0;
  border-bottom:1px solid rgba(255,255,255,.08);
}

.track>p{
  margin-top:16px;
  font-size:13px;
  color:var(--on-dark-dim);
}

/* ===== 5.12 Section: security (#security) ===== */
.sec-box{
  background:var(--white);
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:30px 28px;
  box-shadow:var(--shadow);
  transition:transform .4s var(--ease),box-shadow .4s var(--ease);
}

.sec-box:hover{
  transform:translateY(-6px);
  box-shadow:var(--shadow-hi);
}

.sec-box h3{
  font-size:17px;
  font-weight:800;
  margin-bottom:14px;
  color:var(--navy-800);
}

.sec-box h3 span{
  color:var(--gold-dark);
  margin-right:8px;
}

.sec-box ul{
  list-style:none;
}

.sec-box ul li{
  font-size:13.5px;
  color:var(--text-mid);
  padding:7px 0 7px 1.6em;
  position:relative;
  border-bottom:1px solid var(--off-white);
}

.sec-box ul li:last-child{
  border-bottom:none;
}

.sec-box ul li::before{
  content:"🛡";
  position:absolute;
  left:0;
  font-size:12px;
}

/* ===== 5.13 Section: feature (#feature) ===== */
.feat-cols{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:28px;
}

.feat-box{
  background:rgba(255,255,255,.05);
  border:1px solid rgba(219,174,88,.35);
  border-radius:var(--radius);
  padding:34px 30px;
  transition:border-color .4s,transform .4s var(--ease);
}

.feat-box:hover{
  border-color:var(--gold);
  transform:translateY(-5px);
}

.feat-box h3{
  color:var(--gold);
  font-size:20px;
  font-weight:800;
  margin-bottom:4px;
}

.feat-box .feat-en{
  font-size:11.5px;
  letter-spacing:.18em;
  color:var(--on-dark-dim);
  font-weight:800;
}

/* 01, 02 … の連番は counter で振る */
.feat-box ol{
  list-style:none;
  margin-top:18px;
  counter-reset:f;
}

.feat-box ol li{
  counter-increment:f;
  display:flex;
  gap:14px;
  align-items:baseline;
  padding:9px 0;
  border-bottom:1px solid rgba(255,255,255,.08);
  font-size:14.5px;
}

.feat-box ol li:last-child{
  border-bottom:none;
}

.feat-box ol li::before{
  content:counter(f,decimal-leading-zero);
  color:var(--gold);
  font-weight:800;
  font-size:15px;
  min-width:2em;
}

/* ===== 5.14 Section: plan (#plan) ===== */
.plan-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:24px;
}

.plan{
  background:var(--white);
  border:1px solid var(--line);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  text-align:center;
  position:relative;
  display:flex;
  flex-direction:column;
  padding-bottom:30px;
  transition:transform .45s var(--ease),box-shadow .45s var(--ease);
}

.plan:hover{
  transform:translateY(-9px);
  box-shadow:var(--shadow-hi);
}

/* おすすめプランは金の枠で強調する */
.plan.reco{
  border:2px solid var(--gold);
}

.plan .reco-tag{
  position:absolute;
  top:-14px;
  left:50%;
  transform:translateX(-50%);
  background:linear-gradient(135deg,var(--gold-light),var(--gold-dark));
  color:var(--navy-900);
  font-size:12px;
  font-weight:800;
  border-radius:999px;
  padding:3px 18px;
  white-space:nowrap;
  box-shadow:0 4px 14px rgba(219,174,88,.4);
}

.plan h3{
  background:var(--navy-800);
  color:var(--white);
  padding:20px;
  font-size:20px;
  font-weight:800;
  border-radius:var(--radius) var(--radius) 0 0;
}

/* 枠が 2px ぶん内側に入るので、角丸を 12px に詰める */
.plan.reco h3{
  border-radius:12px 12px 0 0;
}

.plan h3 .plan-brand{
  display:block;
  text-transform:uppercase;
  color:var(--gold);
  font-size:11.5px;
  letter-spacing:.12em;
  font-weight:700;
}

.plan .price{
  padding:24px 24px 4px;
}

.plan .price .row{
  font-size:14px;
  color:var(--text-mid);
}

.plan .price .row b{
  font-size:27px;
  color:var(--text-dark);
  font-weight:800;
  margin:0 4px;
}

.plan .price .row .unit{
  font-size:13px;
}

/* 金額が確定しない項目 (データハブの初期費用) は数字の代わりに「お見積り」を置く */
.plan .price .row b.quote{
  font-size:20px;
  line-height:2.43; /* 27px の数字行 (27px × 1.8) と行の高さをそろえる */
  letter-spacing:.02em;
}

.plan ul{
  list-style:none;
  text-align:left;
  padding:14px 28px 0;
  flex:1;
}

.plan ul li{
  font-size:13.5px;
  color:var(--text-mid);
  padding:6px 0 6px 1.4em;
  position:relative;
}

.plan ul li::before{
  content:"✓";
  color:var(--gold-dark);
  font-weight:800;
  position:absolute;
  left:0;
}

.plan-note{
  margin-top:24px;
  font-size:12px;
  color:var(--text-mid);
  text-align:center;
  line-height:1.9;
}

/* ===== 5.15 Section: faq (#faq) ===== */
.faq-list{
  max-width:860px;
  margin:0 auto;
}

.faq{
  background:var(--white);
  border:1px solid var(--line);
  border-radius:12px;
  box-shadow:var(--shadow);
  margin-bottom:12px;
  overflow:hidden;
}

/* 左に Q マーク、右に開閉の山形を置くぶん padding を空ける */
.faq summary{
  cursor:pointer;
  list-style:none;
  padding:18px 54px 18px 52px;
  font-size:15.5px;
  font-weight:700;
  position:relative;
  transition:color .3s;
}

.faq summary::-webkit-details-marker{
  display:none;
}

.faq summary::before{
  content:"Q";
  position:absolute;
  left:22px;
  top:18px;
  color:var(--gold-dark);
  font-weight:800;
  font-size:15px;
}

.faq summary::after{
  content:"";
  position:absolute;
  right:24px;
  top:26px;
  width:9px;
  height:9px;
  border-right:2px solid var(--gold-dark);
  border-bottom:2px solid var(--gold-dark);
  transform:rotate(45deg);
  transition:transform .3s var(--ease);
}

.faq[open] summary::after{
  transform:rotate(-135deg);
}

.faq summary:hover{
  color:var(--gold-dark);
}

/* margin-top:-1px は summary との境界線を 1 本に重ねるため */
.faq p{
  padding:16px 26px 20px 52px;
  font-size:14.5px;
  color:var(--text-mid);
  border-top:1px solid var(--off-white);
  margin-top:-1px;
}

/* ===== 5.16 Section: cta (#contact) ===== */
/* --- 5.16 contact (#contact): 資料請求フォーム。既存サイトの p-contact / c-form / questionnaire_ の
       クラス名をそのまま使い、見た目だけ本ページのトーン(紺の帯 + 白カード + 金ボタン)に合わせる --- */
.p-contact{
  position:relative;
  background:var(--navy-900);
  color:var(--white);
  padding:100px 0 110px;
  overflow:hidden;
}

.p-contact .sec-title,
.p-contact .sec-lead{color:var(--white)}
.p-contact .sec-lead{color:var(--on-dark)}

/* 左: 資料の説明 / 右: フォーム の 2 カラム。カード全体は白 */
.p-contact__container{
  display:grid;
  grid-template-columns:1fr 1.05fr;
  gap:32px;
  margin-top:44px;
  padding:36px;
  border-radius:20px;
  background:var(--white);
  color:var(--text-dark);
  box-shadow:0 24px 60px rgba(0,0,0,.35);
}

.p-contact__content{display:flex;flex-direction:column;gap:22px}

.p-contact__image img{
  width:100%;
  height:auto;
  border-radius:12px;
  display:block;
}

/* 「資料でわかること」の箱 */
.p-contact__block{
  background:var(--off-white);
  border:1px solid var(--line);
  border-radius:12px;
  padding:20px 22px;
}

.p-contact__text01{
  font-size:15px;
  font-weight:800;
  color:var(--navy-800);
  padding-left:12px;
  border-left:3px solid var(--gold);
  line-height:1.3;
}

.p-contact__list{
  list-style:none;
  margin-top:12px;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:6px 16px;
}

.p-contact__item{
  font-size:13.5px;
  color:var(--text-mid);
  display:flex;
  align-items:center;
  gap:8px;
}

/* 金のチェック丸 */
.p-contact__item::before{
  content:"";
  flex:0 0 14px;
  width:14px;
  height:14px;
  border-radius:50%;
  background:var(--gold) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23081120' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'><path d='M5 12l5 5L20 7'/></svg>") center/9px no-repeat;
}

/* --- フォーム側 --- */
.p-contact__formWrap{
  background:var(--white);
  border:1px solid var(--line);
  border-radius:16px;
  padding:26px 26px 30px;
}

.c-form__title{
  text-align:center;
  font-size:16px;
  font-weight:800;
  line-height:1.6;
}

/* ステップ表示 (1 / 2 / 3) */
.c-form__nav{
  margin:18px 0 22px;
  display:flex;
  justify-content:center;
  align-items:center;
  gap:12px;
}

.c-form__nav--text{font-size:13px;font-weight:700;color:var(--text-mid)}

.c-form__navNum{list-style:none;display:flex;align-items:center;gap:8px}

.c-form__navNum--item{
  width:30px;
  height:30px;
  border-radius:50%;
  display:grid;
  place-items:center;
  font-size:13px;
  font-weight:800;
  background:var(--off-white);
  border:1px solid var(--line);
  color:var(--text-mid);
  cursor:pointer;
  transition:background .3s,color .3s,border-color .3s;
}

.c-form__navNum--item.is-current{
  background:var(--navy-800);
  border-color:var(--navy-800);
  color:var(--white);
}

/* CMS が出力するフォームのステップ(タブ)。is-active のものだけ表示 */
.form_list-wrap > div[class*="tab"]{display:none}
.form_list-wrap > div[class*="tab"].is-active{display:block}

.questionnaire_box_ + .questionnaire_box_{margin-top:16px}

.questionnaire_box_ h3{
  font-size:13.5px;
  font-weight:700;
  margin-bottom:6px;
  line-height:1.5;
  color:var(--text-dark);
}

.questionnaire_box_ .required{
  display:inline-block;
  margin-left:8px;
  padding:2px 7px;
  border-radius:4px;
  background:var(--gold);
  color:var(--navy-900);
  font-size:11px;
  font-weight:800;
  line-height:1.4;
  vertical-align:middle;
}

/* 入力欄。CMS 出力の <input size> 属性に負けないよう幅は明示する */
.questionnaire_ input[type="text"],
.questionnaire_ input[type="email"],
.questionnaire_ input[type="tel"],
.questionnaire_ textarea{
  width:100%;
  font:inherit;
  font-size:14px;
  color:var(--text-dark);
  background:var(--off-white);
  border:1px solid var(--line);
  border-radius:8px;
  padding:11px 13px;
  transition:border-color .25s,box-shadow .25s;
}

.questionnaire_ input:focus,
.questionnaire_ textarea:focus{
  outline:none;
  border-color:var(--gold);
  box-shadow:0 0 0 3px rgba(219,174,88,.2);
}

.questionnaire_ ::placeholder{color:#a9b4c2}

.questionnaire_ textarea{min-height:120px;resize:vertical}

/* 姓・名の 2 分割 (CMS 出力の input 間にある空白文字で折れないよう flex で並べる) */
.questionnaire_box_content_{display:flex;flex-wrap:wrap;gap:8px 10px}
.questionnaire_box_content_ > input[type="text"],
.questionnaire_box_content_ > input[type="email"],
.questionnaire_box_content_ > textarea{flex:1 1 100%}
.questionnaire_box_content_ > input.wth_48{flex:1 1 calc(50% - 5px);width:auto;min-width:0} /* size 属性の最小幅を無効化 */

/* チェックボックス / ラジオ: 標準 UI を隠して自作 */
.questionnaire_ input[type="checkbox"],
.questionnaire_ input[type="radio"]{
  position:absolute;
  opacity:0;
  width:0;
  height:0;
}

.questionnaire_ input[type="checkbox"] + label,
.questionnaire_ input[type="radio"] + label{
  position:relative;
  display:inline-block;
  padding:6px 0 6px 26px;
  margin:0 18px 2px 0;
  font-size:13.5px;
  cursor:pointer;
  user-select:none;
}

.questionnaire_ input[type="checkbox"] + label::before,
.questionnaire_ input[type="radio"] + label::before{
  content:"";
  position:absolute;
  left:0;
  top:50%;
  transform:translateY(-50%);
  width:18px;
  height:18px;
  background:var(--white);
  border:1.5px solid #b9c3d0;
  border-radius:4px;
  transition:background .2s,border-color .2s;
}

.questionnaire_ input[type="radio"] + label::before{border-radius:50%}

.questionnaire_ input[type="checkbox"]:checked + label::before{
  background:var(--navy-800) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'><path d='M5 12l5 5L20 7'/></svg>") center/12px no-repeat;
  border-color:var(--navy-800);
}

.questionnaire_ input[type="radio"]:checked + label::before{
  border-color:var(--navy-800);
  background:radial-gradient(circle,var(--navy-800) 0 5px,var(--white) 6px);
}

.questionnaire_ input:focus-visible + label::before{box-shadow:0 0 0 3px rgba(219,174,88,.3)}

/* 次へ / 戻る / 確認画面へ */
.c-form__BtnWrap{display:flex;gap:12px;margin-top:22px}

.c-form__BtnWrap button,
.questionnaire_ .submit_ input[type="submit"]{
  flex:1;
  min-height:48px;
  border-radius:999px;
  border:0;
  font:inherit;
  font-size:15px;
  font-weight:800;
  cursor:pointer;
  transition:transform .3s var(--ease),box-shadow .3s var(--ease),opacity .3s;
}

.c-form__BtnWrap .js-nextBtn,
.questionnaire_ .submit_ input[type="submit"]{
  background:linear-gradient(135deg,var(--gold-light),var(--gold-dark));
  color:var(--navy-900);
  box-shadow:0 4px 16px rgba(219,174,88,.28);
}

.c-form__BtnWrap .js-nextBtn:hover,
.questionnaire_ .submit_ input[type="submit"]:hover{
  transform:translateY(-2px);
  box-shadow:0 10px 26px rgba(219,174,88,.45);
}

.c-form__BtnWrap .js-prevBtn{
  flex:0 0 auto;
  padding:0 22px;
  background:transparent;
  border:1.5px solid var(--line);
  color:var(--text-mid);
}

.c-form__BtnWrap .js-prevBtn:hover{border-color:var(--gold);color:var(--gold-dark)}

.questionnaire_ .submit_{margin-top:14px;display:flex}
.questionnaire_ .submit_ input[type="submit"]{width:100%}

/* 未入力のまま「次へ」を押したときの強調 */
.questionnaire_ .is-invalid{border-color:#d9534f!important;box-shadow:0 0 0 3px rgba(217,83,79,.18)!important}
.questionnaire_ .questionnaire_box_.is-invalid h3{color:#d9534f}

/* ===== 6. Animations ===== */

/* ヒーロー内要素の登場 */
@keyframes heroIn{
  to{opacity:1;transform:none}
}

/* 背景写真の Ken Burns (通常 / 2 枚目用の逆再生) */
@keyframes kb{
  from{transform:scale(1) translate3d(0,0,0)}
  to{transform:scale(1.07) translate3d(-1.2%,-1%,0)}
}

@keyframes kb-alt{
  from{transform:scale(1.07) translate3d(1%,-.6%,0)}
  to{transform:scale(1) translate3d(0,0,0)}
}

/* ヒーロー写真を横切る光 */
@keyframes sweep{
  0%{left:-30%;opacity:0}
  12%{opacity:1}
  55%{left:120%;opacity:0}
  100%{left:120%;opacity:0}
}


/* ロゴマーキー。1 行に 3 コピー並ぶので 1/3 動かすとちょうど 1 コピーぶん進む */
@keyframes slide{
  from{transform:translateX(0)}
  to{transform:translateX(-33.3333%)}
}

/* タイプ中のカーソル点滅 */
@keyframes blink{
  50%{opacity:0}
}

/* タブパネルの切り替え */
@keyframes fadeUp{
  from{opacity:0;transform:translateY(18px)}
  to{opacity:1;transform:none}
}

/* ===== 7. Responsive ===== */

/* --- 背の低い PC 画面 (ノート PC の 768px 前後): ヒーローの中身を詰めて、事例ストリップまで初期表示に入れる --- */
@media(min-width:1001px) and (max-height:820px){
  .hero{padding-top:96px}
  .hero .hero-catch{font-size:clamp(26px,3vw,40px)}
  .hero-sub{margin:16px 0 22px;font-size:15px}
  .hero-btns .btn-lg{padding:13px 34px;font-size:15px}
  .hd-card{padding:10px 14px}
  .hd-card .hd-title{font-size:13px}
  .hd-stats{margin-top:8px;padding-top:8px}
  .hd-stats div b{font-size:17px}
  .hd-acts{margin-top:8px}
}

/* --- 1200px 以上: ヘッダーのナビを外し、左のサイドナビに置き換える --- */
@media(min-width:1200px){
  nav.gnav{display:none}
  .sidenav{display:block}
}

/* --- 1200px 以下: 横幅が詰まってヒーローのコピーとデモカードがぶつかる --- */
@media(max-width:1200px){
  .hero-demo{
    position:static;
    margin:28px 0 0;
    width:100%;
    max-width:440px;
    align-self:flex-start;
  }
}

/* --- 1000px 以下: グローバルナビをドロワーへ、主要グリッドを 1 カラムへ --- */
@media(max-width:1000px){
  /* header / drawer */
  .header-cta{display:none}
  .hdr-mb{display:flex}
  .header-logo img{height:26px}
  .btn-pill-sm{font-size:11px;padding:7px 10px}
  .hbg{display:flex}
  nav.gnav{display:none}

  /* hero */
  /* KPI バーを重ねずに流し込むことで、CTA を覆わないようにする */
  .hero{
    height:auto;
    min-height:auto;
    flex-direction:column;
    justify-content:center;
    align-items:stretch;
    padding:120px 0 0;
  }

  .hero-text{max-width:none}

  /* 写真は下半分の全幅バンドになる */
  .hero-scene{
    width:100%;
    top:auto;
    height:58%;
    -webkit-mask-image:linear-gradient(180deg,transparent 0%,rgba(0,0,0,.55) 26%,#000 62%);
    mask-image:linear-gradient(180deg,transparent 0%,rgba(0,0,0,.55) 26%,#000 62%);
  }

  .hero-slide img{object-position:70% 40%}

  .hero::after{
    background:linear-gradient(180deg,rgba(8,17,32,.95) 0%,rgba(8,17,32,.9) 40%,rgba(8,17,32,.72) 68%,rgba(8,17,32,.9) 100%);
  }

  /* CTA が写真の一番うるさい部分に重なるので下地を敷く */
  .hero-btns .btn-line{
    background:rgba(8,17,32,.42);
    backdrop-filter:blur(3px);
  }

  .hero-demo{
    position:static;
    margin:28px auto 0;
    width:100%;
    max-width:440px;
    align-self:center;
  }

  .hero-kpi{
    position:static;
    width:100%;
    margin-top:36px;
  }

  .hero-kpi ul{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:12px 18px;
    padding:14px 24px;
  }


  /* clients: 事例ストリップは 1 列に積み、「事例を見る」は省く */
  .case-strip{grid-template-columns:1fr;gap:10px}
  .case-strip a{padding-right:18px}
  .case-strip i{display:none}
  .hero-kpi b{font-size:18px}

  /* 共通レイアウト */
  section{padding:66px 0}

  .bg-navy{
    padding:84px 0;
    clip-path:polygon(0 0,100% 1.6%,100% 100%,0 98.4%);
    margin:-8px 0;
  }

  .grid3,.plan-grid{grid-template-columns:1fr}
  .grid2,.feat-cols,.case-grid{grid-template-columns:1fr}

  /* about (eco): 3 カラムを縦積みにする */
  .eco{
    grid-template-columns:1fr;
    gap:30px;
    padding:16px 0 54px 30px; /* 左の余白は縦向きフィードバック線の通り道 */
    min-height:0;
  }

  .eco-col{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:10px;
    max-width:400px;
    margin:0 auto;
    width:100%;
  }

  .eco-lbl{
    grid-column:1/-1;
    text-align:center;
    margin-bottom:0;
  }

  /* チャネルは 3 つなので、最後の 1 つを中央に置く */
  .eco-ch .eco-node:last-child{
    grid-column:1/-1;
    justify-self:center;
    min-width:calc(50% - 5px);
  }

  .eco-mid{
    grid-template-columns:1fr;
    gap:34px;
    max-width:400px;
    margin:0 auto;
    width:100%;
  }

  .eco-card:nth-child(1),.eco-card:nth-child(3){margin-top:0}

  /* story: ナビを上の横並び 3 つに */
  .story{grid-template-columns:minmax(0,1fr)}
  .story>*{min-width:0}

  .story-nav{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:8px;
    overflow:visible;
  }

  .story-nav button{
    min-width:0;
    padding:10px 6px 12px;
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:5px;
    text-align:center;
  }

  .story-nav button small{display:none}

  .story-nav button span{
    font-size:12.5px;
    line-height:1.35;
    word-break:keep-all;
    overflow-wrap:normal;
  }

  .story-nav button i{
    position:static;
    width:22px;
    height:22px;
    font-size:11px;
  }

  /* 高さは 4:5。aspect-ratio だけだと iOS Safari(WebKit)でグリッド子要素の幅と高さが 0 に解決されるため、
     ::before の padding-top で高さを作る(max-height 560px を超えるぶんは overflow:hidden で切れる) */
  .story-stage{
    min-height:0;
    max-height:560px;
    width:100%;
  }
  .story-stage::before{
    content:"";
    display:block;
    padding-top:125%;
  }

  .gen{inset:150px 0 0 0}
  .sc-bar i{width:34px}
  .story-ctl{gap:12px;flex-wrap:nowrap}
  .callout{max-width:180px;font-size:11.5px}
  .ai-grid{grid-template-columns:1fr 1fr}

  /* cdp */
  .cdp-wrap{grid-template-columns:1fr}

  /* usecase */
  .uc-jump a{
    min-width:0;
    flex:1;
    padding:10px 12px;
    font-size:16px;
  }

  .b2b-two,.b2b-three,.phases,.track-cols{grid-template-columns:1fr}
  .phase:not(:last-child)::after{display:none}
  .show,.show.rev{grid-template-columns:1fr;gap:26px;margin-bottom:60px}

  /* function */
  .fn-list{columns:1}

  /* contact form */
  .p-contact{padding:70px 0 80px}
  .p-contact__container{grid-template-columns:1fr;gap:22px;padding:18px;margin-top:30px;border-radius:16px}
  .p-contact__image{display:none} /* SP は資料画像を省き、フォームを先に見せる */
  .p-contact__formWrap{padding:20px 16px 24px}
  .p-contact__list{grid-template-columns:1fr}
  .c-form__BtnWrap{flex-direction:column}
  .c-form__BtnWrap .js-prevBtn{order:2}
  /* case */
  .case.anon{grid-template-columns:1fr}
  .case.anon .anon-steps{grid-template-columns:1fr}

  /* faq */
  .faq summary{padding:16px 46px 16px 44px;font-size:14.5px}
  .faq summary::before{left:18px}
  .faq p{padding-left:44px;padding-right:20px}
}

/* --- 560px 以下: 375px 実機を基準にした調整 --- */
@media(max-width:560px){
  /* header */
  .header-cta .btn-line{display:none}

  /* 共通 */
  .wrap,.hero-in,.foot-in{padding-left:20px;padding-right:20px}
  .sec-title,.cta h2{font-size:23px}
  .sec-lead{font-size:14px}

  /* hero */
  .hero-h1{font-size:15px;gap:9px;margin-bottom:14px;align-items:flex-start}
  .hero-h1::before{flex-basis:4px;height:2.9em}
  .hero .hero-catch{
    font-size:clamp(22px,6.1vw,28px);
    line-height:1.5;
    text-wrap:balance;
  }

  .hero-sub{font-size:15px;margin:18px 0 26px}
  .hero-btns{flex-direction:column;width:100%}
  .hero-btns .btn{width:100%;padding:15px}
  .hero-kpi ul{padding:14px 20px}
  .hero-kpi li{flex-direction:column;align-items:flex-start;gap:2px}
  .hero-kpi b{white-space:nowrap}
  .hd-stats div b{font-size:17px}

  /* clients */
  /* 端で硬く切れないよう、フェード幅を 6% → 16% に広げる */
  .mq{
    -webkit-mask-image:linear-gradient(90deg,transparent,#000 16%,#000 84%,transparent);
    mask-image:linear-gradient(90deg,transparent,#000 16%,#000 84%,transparent);
  }
  .logo{flex-basis:124px;height:50px;padding:6px 10px}
  .mq-track{gap:10px}

  /* story */
  .story{padding:16px}
  .story-ctl{gap:10px}
  .sc-btn{width:34px;height:34px;flex-basis:34px;font-size:14px}
  .sc-bar{gap:6px}
  .sc-bar i{width:24px}
  .sc-count{min-width:0;font-size:12px;letter-spacing:.06em}
  .story-nav button{padding:9px 4px 11px}
  .story-nav button i{width:20px;height:20px}
  .story-nav button span{font-size:12px}

  /* 2 個目以降の吹き出しは重なって読めないので隠す */
  .callout.c2,.callout.d1,.callout.d2{display:none}

  /* [SP画像案 index_spimg.html] 画面キャプチャの左メニューを切り落とし、本体を幅いっぱいに見せる。
     画像幅 1400 のうち左メニューは AI 220px / Data Hub 160px */
  /* 画像を高さ基準・比率維持で置き(幅 auto)、自身の幅に対する % でメニュー幅ぶん左へずらす。
     AI: 220/1400 = 15.71% / Data Hub: メニュー 160 + 余白 ≒ 280/1400 = 20%。ステージ高さに依存しない */
  .sp-shot-crop .story-frame.crop-ai img,.sp-shot-crop .story-frame.crop-dh img{width:auto;max-width:none;height:100%;object-fit:contain;object-position:left top}
  .sp-shot-crop .story-frame.crop-ai img{transform:translateX(-15.714%)}
  .sp-shot-crop .story-frame.crop-dh img{transform:translateX(-20%)} /* Data Hub はメニュー右の余白(〜280px)も含めて切る */
  .sp-shot-crop #datahub .story-frame[data-step="1"] img{transform:translateX(-11.429%)} /* 加工ビルダーはメニュー直後から内容があるので 160px だけ切る */
  /* AI の「ダッシュボード作成」の生成結果: 左メニュー 176px + 依頼パネル ≒ 484px/1400 = 34.6% を切ってダッシュボード本体を見せる */
  .sp-shot-crop #aifeat .gen img{width:calc(100% / 0.654);max-width:none;height:auto;object-fit:fill;transform:translateX(-34.6%)} /* 残り 65.4% が枠幅いっぱいになる倍率 */
  .callout{max-width:160px;font-size:11px}

  .answer{font-size:11.5px}
  .answer table{display:block;overflow-x:auto;white-space:nowrap}
  .chat.compact .bub{font-size:12px;max-width:92%;margin:10px 12px 0 auto;min-height:0;line-height:1.6}
  .chat.compact .progress{padding:0 12px}
  .gen{inset:172px 0 0 0}

  /* aifeat / datahub / crm の機能タイル */
  .ai-grid{grid-template-columns:1fr}

  /* case */
  .case{padding:24px 20px}
  .case-co b{font-size:17px}
  .case-co span{font-size:12px}

  /* 決定木は PC 用(横 640)を縮小すると読めないので、縦積みの SP 用 SVG に切り替える */
  .case.anon .anon-visual{max-width:none;margin:6px 0 4px}
  .anon-visual svg.tr-pc{display:none}
  .anon-visual svg.tr-sp{display:block}

  /* faq: タップ領域の確保 */
  .faq summary{min-height:44px}

  /* cta / footer */
  .cta .hero-btns{width:100%}
  .foot-in{flex-direction:column;gap:28px}
  .foot-nav{display:grid;grid-template-columns:1fr 1fr;gap:20px 24px}
  .br-sp{display:inline}
}

/* ===== 8. Motion preference ===== */
/* OS 側で「視差効果を減らす」が有効なときは、動きを止めて最終状態を見せる */
@media(prefers-reduced-motion:reduce){
  *{
    animation-duration:.01ms!important;
    animation-iteration-count:1!important;
    transition-duration:.01ms!important;
  }
  .rv,.rv-l,.rv-r,.rv-s>*{opacity:1!important;transform:none!important}
  .hero-scene,.hero-kpi{opacity:1!important;transform:none!important}
  .hero-scene::after{display:none}
  .hero-slide{transition:none}
  .hero-slide img{animation:none!important}
}